fix: resolve next.js production build compilation errors and worker type mismatches

next.config.ts

@@ -5,6 +5,26 @@ const nextConfig: NextConfig = {
   experimental: {
     scrollRestoration: true,
   },
+
+  // Appends security headers required for client-side WASM shared memory pools
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Cross-Origin-Opener-Policy",
+            value: "same-origin",
+          },
+          {
+            key: "Cross-Origin-Embedder-Policy",
+            value: "require-corp",
+          },
+        ],
+      },
+    ];
+  },
+
   // Required for ffmpeg.wasm to load WASM files correctly
   // Without this, Next.js might try to process .wasm files and break them
   webpack: (config) => {

package.json

@@ -10,7 +10,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.1",

src/app/globals.css

@@ -25,7 +25,27 @@
   --error-hover: #fecaca;
 }
 
-/* ── Dark mode tokens ── */
+/* ── Dark mode tokens (Supporting both media queries and class selectors) ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f1117;
+    --surface: #1a1d27;
+    --border: #2e3147;
+    --text: #f0f0f5;
+    --muted: #8b8fa8;
+    --accent: #4f6ef7;
+    --accent-hover: #3a57d4;
+    --accent-muted: rgba(79, 110, 247, 0.12);
+    --radius: 10px;
+    --shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+    --warning: #fbbf24;
+    --error: #f87171;
+    --error-bg: #7f1d1d;
+    --error-border: #991b1b;
+    --error-hover: #991b1b;
+  }
+}
+
 .dark {
   --bg: #0f1117;
   --surface: #1a1d27;
@@ -104,6 +124,7 @@ body {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+h1, h2, h3, h4, h5, h6 {
 img,
 picture,
 video,
@@ -123,35 +144,28 @@ h6 {
   font-weight: 700;
 }
 
-p,
-li {
+p, li {
   color: color-mix(in srgb, var(--text) 95%, transparent);
 }
 
 button {
   transition: all 0.2s ease;
 }
 
-input,
-select,
-textarea {
+input, select, textarea {
   background: var(--bg);
   border: 1px solid var(--border);
   color: var(--text);
 }
 
-input:focus,
-select:focus,
-textarea:focus {
+input:focus, select:focus, textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-muted);
   outline: none;
 }
 
 /* Smooth transitions for all themed elements */
-*,
-*::before,
-*::after {
+*, *::before, *::after {
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: ease;
   transition-duration: 200ms;
@@ -163,7 +177,8 @@ textarea:focus {
   border-radius: var(--radius);
 }
 
-detail > summary {
+/* Corrected typo from detail to details */
+details > summary {
   list-style: none;
 }
 details > summary::-webkit-details-marker {

src/components/RotateControl.tsx

@@ -5,18 +5,24 @@ import { RotateCw } from "lucide-react";
 import BaseButton from "./ui/BaseButton";
 import { cn } from "@/lib/utils";
 
+// Create a local type intersection so TypeScript knows 'rotate' exists on this object
+type RecipeWithRotation = EditRecipe & { rotate?: number };
+
 interface Props {
-  recipe: EditRecipe;
-  onChange: (patch: Partial<EditRecipe>) => void;
+  recipe: RecipeWithRotation;
+  onChange: (patch: Partial<RecipeWithRotation>) => void;
 }
 
 const ROTATIONS = [0, 90, 180, 270] as const;
 
 export default function RotateControl({ recipe, onChange }: Props) {
+  // Safe fallback to 0 if 'rotate' is undefined on the recipe state
+  const currentRotation = typeof recipe.rotate === "number" ? recipe.rotate : 0;
+
   return (
     <div className="flex gap-2">
       {ROTATIONS.map((deg) => {
-        const active = recipe.rotate === deg;
+        const active = currentRotation === deg;
         return (
           <BaseButton
             type="button"
@@ -27,11 +33,16 @@ export default function RotateControl({ recipe, onChange }: Props) {
             active={active}
             className="flex-1 flex flex-col items-center gap-1.5 py-3"
           >
-            <RotateCw size={15} aria-hidden="true" style={{ transform: `rotate(${deg}deg)`, transformOrigin: 'center' }} className="transition-transform" />
-            {deg}
+            <RotateCw 
+              size={15} 
+              aria-hidden="true" 
+              style={{ transform: `rotate(${deg}deg)`, transformOrigin: 'center' }} 
+              className="transition-transform" 
+            />
+            {deg}°
           </BaseButton>
         );
       })}
     </div>
   );
-}
+}