feat: improve editor panel visual hierarchy and section grouping

src/components/ExportSettings.tsx

@@ -137,54 +137,12 @@ export default function ExportSettings({
             aria-label="Play sound when export completes"
             className="accent-film-600 cursor-pointer"
           />
+
         </div>
         )}
       </div>
 
       <div>
-        <div className="flex items-center justify-between mb-1">
-          <label
-            htmlFor="stabilization-toggle"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
-          >
-            <SlidersHorizontal size={10} />
-            Stabilization
-          </label>
-
-          <span className="flex text-sm font-heading font-bold text-film-600">
-            <input
-              id="stabilization-toggle"
-              type="checkbox"
-              checked={recipe.stabilization}
-              onChange={(e) =>
-                onChange({
-                  stabilization: e.target.checked,
-                })
-              }
-              aria-label="Enable video stabilization"
-              aria-checked={recipe.stabilization}
-              className="w-full accent-film-600 cursor-pointer"
-            />
-          </span>
-        </div>
-
-        {/* Short descriptive label explaining what the setting does */}
-        <p className="text-xs text-[var(--muted)] mb-1">
-          Reduce camera shake
-        </p>
-
-        <div className="flex justify-end">
-          <span
-            className={cn(
-              "text-xs",
-              recipe.stabilization
-                ? "text-red-700 font-medium"
-                : "text-[var(--muted)]"
-            )}
-          >
-            Note: significantly increases processing time.
-          </span>
-        </div>
       </div>
     </>
   );

src/components/StabilizationControl.tsx

@@ -0,0 +1,46 @@
+import { SlidersHorizontal } from "lucide-react";
+
+interface StabilizationControlProps {
+  recipe: {
+    stabilization?: boolean;
+  };
+
+  onChange: (updates: { stabilization: boolean }) => void;
+}
+
+export default function StabilizationControl({
+  recipe,
+  onChange,
+}: StabilizationControlProps) {
+  return (
+    <div className="space-y-2">
+
+      <div className="flex items-center justify-between">
+        <label
+          htmlFor="stabilization-toggle"
+          className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+        >
+          <SlidersHorizontal size={10} />
+          Stabilization
+        </label>
+
+        <input
+          id="stabilization-toggle"
+          type="checkbox"
+          checked={recipe.stabilization ?? false}
+          onChange={(e) =>
+            onChange({
+              stabilization: e.target.checked,
+            })
+          }
+          className="h-4 w-4 accent-film-500 cursor-pointer"
+        />
+      </div>
+
+      <p className="text-xs text-[var(--muted)] leading-relaxed">
+        Note: significantly increases processing time.
+      </p>
+
+    </div>
+  );
+}