biome check+format

components.json

@@ -1,22 +1,22 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/App.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "",
+        "css": "src/App.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "iconLibrary": "lucide",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "registries": {}
 }

src/App.tsx

@@ -1,5 +1,5 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Index from "@/Index";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Settings from "./Settings";
 
 function App() {

src/Layout.tsx

@@ -1,7 +1,7 @@
 import ThemeToggle from "@/components/theme-toggle";
-import { Link, useLocation } from "react-router-dom";
-import { Home, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Home, Settings } from "lucide-react";
+import { Link, useLocation } from "react-router-dom";
 
 export default function Layout({
     children,

src/components/canvas/ShapeCanvas.tsx

@@ -1,7 +1,7 @@
-import { Stage, Layer } from "react-konva";
-import { useEffect, useState } from "react";
-import MorphableShape from "./MorphableShape";
 import type { ShapeState } from "@/types/shape";
+import { useEffect, useState } from "react";
+import { Layer, Stage } from "react-konva";
+import MorphableShape from "./MorphableShape";
 
 export default function ShapeCanvas({
     state,

src/components/theme-toggle.tsx

@@ -1,7 +1,7 @@
-import { Moon, Sun } from "lucide-react";
-import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
 
 function ThemeToggle({ className }: { className?: string }) {
     const [theme, setTheme] = useState<string | null>();

src/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import type * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

src/components/ui/slider.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 

src/components/ui/toggle.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import type * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

src/hooks/useShapeState.ts

@@ -39,17 +39,17 @@ export function useShapeState(centerX: number, centerY: number) {
     }, [centerX, centerY]);
 
     // beforeunload warning
-    useEffect(() => {
-        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-            const hasChanged = JSON.stringify(state) !== JSON.stringify(initialStateRef.current);
-            if (hasChanged) {
-                e.preventDefault();
-            }
-        };
+    // useEffect(() => {
+    //     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+    //         const hasChanged = JSON.stringify(state) !== JSON.stringify(initialStateRef.current);
+    //         if (hasChanged) {
+    //             e.preventDefault();
+    //         }
+    //     };
 
-        window.addEventListener("beforeunload", handleBeforeUnload);
-        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-    }, [state]);
+    //     window.addEventListener("beforeunload", handleBeforeUnload);
+    //     return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    // }, [state]);
 
     return [state, setState] as const;
 }

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs));
 }

src/main.tsx

@@ -1,7 +1,7 @@
 import "./App.css";
+import App from "@/App";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "@/App";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>