sidebar controls (shape selection and roundness slider)

src/components/controls/PresetSelector.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import type { Preset } from "@/types/shape";
+
+const presets: { value: Preset; label: string }[] = [
+    { value: "triangle", label: "Triangle" },
+    { value: "square", label: "Square" },
+    { value: "circle", label: "Circle" },
+];
+
+export default function PresetSelector({
+    value,
+    onChange,
+}: {
+    value: Preset;
+    onChange: (preset: Preset) => void;
+}) {
+    return (
+        <div className="flex gap-2">
+            {presets.map((preset) => (
+                <Button
+                    key={preset.value}
+                    variant={value === preset.value ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => onChange(preset.value)}
+                >
+                    {preset.label}
+                </Button>
+            ))}
+        </div>
+    );
+}

src/components/ui/button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                default: "bg-primary text-primary-foreground hover:bg-primary/90 border border-primary",
                 destructive:
                     "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
                 outline: