konva Stage setup

src/App.css

@@ -61,7 +61,7 @@
     --accent: oklch(0.97 0 0);
     --accent-foreground: oklch(0.205 0 0);
     --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
+    --border: oklch(0.85 0 0);
     --input: oklch(0.922 0 0);
     --ring: oklch(0.708 0 0);
     --chart-1: oklch(0.646 0.222 41.116);

src/Index.tsx

@@ -1,5 +1,26 @@
+import { Stage, Layer, Circle } from "react-konva";
+
+const STAGE_SIZE = 0.6;
+const ASPECT_RATIO = 4 / 3;
+
 function Index() {
-    return <div className="w-64 h-64 bg-orange-600 rounded-full" />;
+    return (
+        <Stage
+            width={window.innerWidth * STAGE_SIZE * ASPECT_RATIO}
+            height={window.innerWidth * STAGE_SIZE}
+            className="border rounded-lg"
+        >
+            <Layer>
+                <Circle
+                    x={(window.innerWidth * STAGE_SIZE * ASPECT_RATIO) / 2}
+                    y={(window.innerWidth * STAGE_SIZE) / 2}
+                    radius={100}
+                    fill="#68d436"
+                    draggable
+                />
+            </Layer>
+        </Stage>
+    );
 }
 
 export default Index;

src/Layout.tsx

@@ -7,17 +7,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
     return (
         <div className="flex flex-col h-[100vh] items-center">
-            <header className="w-full flex items-center justify-between border-b h-12 p-2">
+            <header className="w-full flex items-center justify-between border-b h-12 p-4">
                 <ThemeToggle />
                 <h1 className="text-3xl font-bold">The Shape of Sound</h1>
                 {router.pathname !== "/settings" && (
                     <Link to="/settings" className="">
-                        <Settings />
+                        <Settings className="size-6" />
                     </Link>
                 )}
                 {router.pathname !== "/" && (
                     <Link to="/" className="">
-                        <Home />
+                        <Home className="size-6" />
                     </Link>
                 )}
             </header>

src/components/theme-toggle.tsx

@@ -23,13 +23,14 @@ function ThemeToggle() {
         <Button
             type="button"
             variant="dummy"
+            size="none"
             className="rounded cursor-pointer"
             onClick={() => {
                 if (!theme || theme === "light") updateTheme("dark");
                 else updateTheme("light");
             }}
         >
-            {theme === "dark" ? <Sun /> : <Moon />}
+            {theme === "dark" ? <Sun className="size-6" /> : <Moon className="size-6" />}
         </Button>
     );
 }

src/components/ui/button.tsx

@@ -16,10 +16,11 @@ const buttonVariants = cva(
                     "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
                 secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-                dummy: "bg-transparent",
+                dummy: "bg-transparent px-0 py-0 mx-0 my-0",
                 link: "text-primary underline-offset-4 hover:underline",
             },
             size: {
+                none: "",
                 default: "h-9 px-4 py-2 has-[>svg]:px-3",
                 sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
                 lg: "h-10 rounded-md px-6 has-[>svg]:px-4",