phase 1 complete

DEVELOPMENT_PLAN.md

@@ -86,10 +86,10 @@ src/
 - [x] Install `react-konva`, `konva`, `tone`, `simplex-noise`
 - [x] Initialize shadcn (neutral base, no CSS overwrite)
 - [x] Add shadcn components: `button`, `slider`, `toggle`
-- [ ] Create `types/shape.ts` with `ShapeState` interface
-- [ ] Create `Layout.tsx` - sidebar (fixed width) + canvas area (flex-1)
-- [ ] Update `Index.tsx` to use Layout
-- [ ] Verify existing dark theme still works
+- [x] Create `types/shape.ts` with `ShapeState` interface
+- [x] Create `Layout.tsx` - sidebar (fixed width) + canvas area (flex-1)
+- [x] Update `Index.tsx` to use Layout
+- [x] Verify existing dark theme still works
 
 ### Deliverables
 

src/App.css

@@ -82,7 +82,7 @@
 .dark {
     --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
+    --card: oklch(0.165 0 0);
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);

src/Index.tsx

@@ -1,25 +1,36 @@
 import { Stage, Layer, Circle } from "react-konva";
-
-const STAGE_SIZE = 0.6;
-const ASPECT_RATIO = 4 / 3;
+import { useEffect, useState } from "react";
 
 function Index() {
+    const [dimensions, setDimensions] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            setDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    // canvas fills the available space (accounting for sidebar width of 320px)
+    const canvasWidth = dimensions.width - 320;
+    const canvasHeight = dimensions.height;
+
     return (
-        <Stage
-            width={window.innerWidth * STAGE_SIZE * ASPECT_RATIO}
-            height={window.innerWidth * STAGE_SIZE}
-            className="border rounded-lg"
-        >
+        <>
+            <Stage width={canvasWidth} height={canvasHeight} className="">
                 <Layer>
-                <Circle
-                    x={(window.innerWidth * STAGE_SIZE * ASPECT_RATIO) / 2}
-                    y={(window.innerWidth * STAGE_SIZE) / 2}
-                    radius={100}
-                    fill="#68d436"
-                    draggable
-                />
+                    <Circle x={canvasWidth / 2} y={canvasHeight / 2} radius={100} fill="#68d436" draggable />
                 </Layer>
             </Stage>
+        </>
     );
 }
 

src/Layout.tsx

@@ -1,27 +1,19 @@
 import ThemeToggle from "@/components/theme-toggle";
-import { Link, useLocation } from "react-router-dom";
-import { Home, Settings } from "lucide-react";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-    const router = useLocation();
-
     return (
-        <div className="flex flex-col h-[100vh] items-center">
-            <header className="w-full flex items-center justify-between border-b h-12 p-4">
+        <div className="flex h-screen w-full">
+            {/* sidebar - fixed width */}
+            <aside className="w-80 border-r bg-card p-6 flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                    <h1 className="text-2xl font-semibold">The Shape of Sound</h1>
                     <ThemeToggle />
-                <h1 className="text-3xl font-bold">The Shape of Sound</h1>
-                {router.pathname !== "/settings" && (
-                    <Link to="/settings" className="">
-                        <Settings className="size-6" />
-                    </Link>
-                )}
-                {router.pathname !== "/" && (
-                    <Link to="/" className="">
-                        <Home className="size-6" />
-                    </Link>
-                )}
-            </header>
-            <main className="w-full flex-1 p-4 flex items-center justify-center">{children}</main>
+                </div>
+                <div className="flex-1">{/* controls will go here in later phases */}</div>
+            </aside>
+
+            {/* canvas area - flex-1 */}
+            <main className="flex-1 flex items-center justify-center bg-background">{children}</main>
         </div>
     );
 }

src/types/shape.ts

@@ -0,0 +1,14 @@
+export type Preset = "triangle" | "square" | "circle";
+
+export interface ShapeState {
+    x: number;
+    y: number;
+    preset: Preset;
+    roundness: number; // 0-100, controls morph from preset to circle
+    size: number; // 0-100, controls volume
+    wobble: number; // 0-100, visual wobble amount
+    wobbleSpeed: number; // 0-100, wobble animation speed
+    grain: number; // 0-100, noise mix
+    color: string; // hex color from clavier keyboard
+    octave: number; // 1-8, frequency multiplier
+}