sidebar controls (shape selection and roundness slider)

src/Index.tsx

@@ -1,7 +1,10 @@
-import { useEffect, useState } from "react";
 import ShapeCanvas from "@/components/canvas/ShapeCanvas";
+import PresetSelector from "@/components/controls/PresetSelector";
+import { Slider } from "@/components/ui/slider";
 import { useShapeState } from "@/hooks/useShapeState";
+import { useEffect, useState } from "react";
 import Layout from "./Layout";
+import { cn } from "./lib/utils";
 
 function Index() {
     const [dimensions, setDimensions] = useState({
@@ -26,8 +29,34 @@ function Index() {
 
     const [state, setState] = useShapeState(centerX, centerY);
 
+    const sidebarContent = (
+        <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+                <span className="text-sm font-medium">Shape</span>
+                <PresetSelector value={state.preset} onChange={(preset) => setState({ ...state, preset })} />
+            </div>
+            <div className="flex flex-col gap-2">
+                <span
+                    className={cn(
+                        "text-sm font-medium",
+                        state.preset === "circle" ? "opacity-50 pointer-events-none select-none" : "",
+                    )}
+                >
+                    Roundness
+                </span>
+                <Slider
+                    value={[state.roundness]}
+                    min={0}
+                    max={100}
+                    onValueChange={([v]) => setState({ ...state, roundness: v })}
+                    className={state.preset === "circle" ? "opacity-50 pointer-events-none" : ""}
+                />
+            </div>
+        </div>
+    );
+
     return (
-        <Layout sidebarContent={<>controls here</>}>
+        <Layout sidebarContent={sidebarContent}>
             <ShapeCanvas state={state} onStateChange={setState} />
         </Layout>
     );