From fffd60bb983e5a5f7ca18825d77d43c8522ae890 Mon Sep 17 00:00:00 2001
From: Karthikeya <karthikeya20012007@gmail.com>
Date: Fri, 22 May 2026 01:01:53 +0530
Subject: [PATCH 1/5] fix: trap keyboard focus within onboarding dialog

---
 src/components/OnboardingTour.tsx | 172 +++++++++++++++++++++++-------
 1 file changed, 131 insertions(+), 41 deletions(-)

diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index 816fd301..90d8cd25 100644
--- a/src/components/OnboardingTour.tsx
+++ b/src/components/OnboardingTour.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
+import { FocusTrap } from "focus-trap-react";
 
 const TOUR_KEY = "reframe_onboarding_complete";
 
@@ -44,7 +45,7 @@ const TOUR_STEPS: TourStep[] = [
   },
 ];
 
-const PADDING = 12; // spotlight padding around target element
+const PADDING = 12;
 const TOOLTIP_OFFSET = 16;
 
 interface Rect {
@@ -76,16 +77,19 @@ function getTooltipStyle(
         top: sr.top - th - TOOLTIP_OFFSET,
         left: sr.left + sr.width / 2 - tw / 2,
       };
+
     case "left":
       return {
         top: sr.top + sr.height / 2 - th / 2,
         left: sr.left - tw - TOOLTIP_OFFSET,
       };
+
     case "right":
       return {
         top: sr.top + sr.height / 2 - th / 2,
         left: sr.left + sr.width + TOOLTIP_OFFSET,
       };
+
     case "bottom":
     default:
       return {
@@ -126,13 +130,14 @@ function Spotlight({ rect }: SpotlightProps) {
           />
         </mask>
       </defs>
+
       <rect
         width="100%"
         height="100%"
         fill="rgba(0,0,0,0.65)"
         mask="url(#spotlight-mask)"
       />
-      {/* Highlight ring */}
+
       <rect
         x={r.left}
         y={r.top}
@@ -183,7 +188,6 @@ function Tooltip({
       style={{ ...style }}
       tabIndex={-1}
     >
-      {/* Progress bar */}
       <div className="h-1 rounded-t-xl overflow-hidden bg-[var(--border)]">
         <div
           className="h-full bg-indigo-500 transition-all duration-300"
@@ -192,12 +196,12 @@ function Tooltip({
       </div>
 
       <div className="p-5">
-        {/* Step counter */}
         <p className="text-xs font-semibold tracking-widest uppercase text-indigo-500 mb-1">
           Step {stepIndex + 1} of {totalSteps}
         </p>
 
         <h2 className="text-base font-semibold mb-1">{step.title}</h2>
+
         <p className="text-sm text-[var(--muted)] leading-relaxed mb-4">
           {step.description}
         </p>
@@ -209,6 +213,7 @@ function Tooltip({
           >
             Skip tour
           </button>
+
           <button
             onClick={onNext}
             ref={(el) => {
@@ -231,8 +236,10 @@ export default function OnboardingTour() {
   const [stepIndex, setStepIndex] = useState(0);
   const [visible, setVisible] = useState(false);
   const [targetRect, setTargetRect] = useState<Rect | null>(null);
+
   const tooltipRef = useRef<HTMLDivElement>(null);
   const isFirstRender = useRef(true);
+
   const currentStep = TOUR_STEPS[stepIndex];
 
   const dismiss = useCallback(() => {
@@ -244,25 +251,35 @@ export default function OnboardingTour() {
     return new Promise((resolve) => {
       const attempt = (tries: number) => {
         const el = document.getElementById(id);
+
         if (el) {
-          el.scrollIntoView({ behavior: "smooth", block: "center" });
+          el.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          });
+
           setTimeout(() => {
             const r = el.getBoundingClientRect();
+
             resolve({
               top: r.top,
               left: r.left,
               width: r.width,
               height: r.height,
             });
-          }, 400); // wait for scroll to finish
+          }, 400);
+
           return;
         }
+
         if (tries <= 0) {
           resolve(null);
           return;
         }
+
         setTimeout(() => attempt(tries - 1), 300);
       };
+
       attempt(5);
     });
   }, []);
@@ -270,30 +287,61 @@ export default function OnboardingTour() {
   // Initialise on mount
   useEffect(() => {
     if (localStorage.getItem(TOUR_KEY)) return;
+
     const t = setTimeout(async () => {
       const rect = await measureTarget(TOUR_STEPS[0]?.targetId ?? "");
+
       if (rect) {
         setTargetRect(rect);
         setVisible(true);
       }
     }, 600);
+
     return () => clearTimeout(t);
   }, [measureTarget]);
 
-  // Measure target whenever step changes (skip on first render — init effect handles that)
+  // Measure target whenever step changes
+  useEffect(() => {
+    if (!visible) return;
+
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    measureTarget(TOUR_STEPS[stepIndex]?.targetId ?? "").then((rect) => {
+      if (rect) {
+        setTargetRect(rect);
+
+        setTimeout(() => {
+          tooltipRef.current?.focus();
+        }, 50);
+      } else {
+        if (stepIndex < TOUR_STEPS.length - 1) {
+          setStepIndex((i) => i + 1);
+        } else {
+          dismiss();
+        }
+      }
+    });
+  }, [stepIndex, visible, measureTarget, dismiss]);
+
+  // Retry measuring the current target if necessary
   useEffect(() => {
     if (!visible) return;
+
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
     }
+
     if (!currentStep) {
       dismiss();
       return;
     }
 
     let retryCount = 0;
-    const maxRetries = 10; // Retry up to ~5s with 500ms delays
+    const maxRetries = 10;
     let retryTimer: number | null = null;
     let cancelled = false;
 
@@ -301,17 +349,25 @@ export default function OnboardingTour() {
       measureTarget(currentStep.targetId)
         .then((rect) => {
           if (cancelled) return;
+
           if (rect) {
             setTargetRect(rect);
-            setTimeout(() => tooltipRef.current?.focus(), 50);
+
+            setTimeout(() => {
+              tooltipRef.current?.focus();
+            }, 50);
+
             retryCount = 0;
           } else if (retryCount < maxRetries) {
             retryCount++;
+
             retryTimer = window.setTimeout(tryMeasure, 500);
           } else {
-            // If we've retried enough, fallback to advancing or dismissing
-            if (stepIndex < TOUR_STEPS.length - 1) setStepIndex((i) => i + 1);
-            else dismiss();
+            if (stepIndex < TOUR_STEPS.length - 1) {
+              setStepIndex((i) => i + 1);
+            } else {
+              dismiss();
+            }
           }
         })
         .catch((error) => {
@@ -324,7 +380,10 @@ export default function OnboardingTour() {
 
     return () => {
       cancelled = true;
-      if (retryTimer !== null) clearTimeout(retryTimer);
+
+      if (retryTimer !== null) {
+        clearTimeout(retryTimer);
+      }
     };
   }, [stepIndex, visible, measureTarget, dismiss, currentStep]);
 
@@ -332,15 +391,22 @@ export default function OnboardingTour() {
   // requestAnimationFrame prevents layout thrashing on rapid scroll/resize events.
   useEffect(() => {
     if (!visible) return;
+
     let rafId: number;
+
     const remeasure = () => {
       cancelAnimationFrame(rafId);
+
       rafId = requestAnimationFrame(() => {
-        measureTarget(TOUR_STEPS[stepIndex]?.targetId ?? "").then(setTargetRect);
+        measureTarget(
+          TOUR_STEPS[stepIndex]?.targetId ?? ""
+        ).then(setTargetRect);
       });
     };
+
     window.addEventListener("resize", remeasure);
     window.addEventListener("scroll", remeasure, true);
+
     return () => {
       cancelAnimationFrame(rafId);
       window.removeEventListener("resize", remeasure);
@@ -351,22 +417,33 @@ export default function OnboardingTour() {
   // Keyboard support
   useEffect(() => {
     if (!visible) return;
+
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") dismiss();
+      if (e.key === "Escape") {
+        dismiss();
+      }
+
       if (e.key === "ArrowRight" || e.key === "Enter") {
-        if (stepIndex < TOUR_STEPS.length - 1) setStepIndex((i) => i + 1);
-        else dismiss();
+        if (stepIndex < TOUR_STEPS.length - 1) {
+          setStepIndex((i) => i + 1);
+        } else {
+          dismiss();
+        }
       }
     };
+
     window.addEventListener("keydown", onKey);
+
     return () => window.removeEventListener("keydown", onKey);
   }, [visible, stepIndex, dismiss]);
 
   // Lock body scroll when tour is active
   useEffect(() => {
     if (!visible) return;
+
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
+
     return () => {
       document.body.style.overflow = originalOverflow;
     };
@@ -375,28 +452,41 @@ export default function OnboardingTour() {
   if (!visible || !targetRect || !currentStep) return null;
 
   return createPortal(
-    <>
-      {/* Clickable backdrop to skip */}
-      <div
-        className="fixed inset-0"
-        style={{ zIndex: 9997 }}
-        aria-hidden="true"
-        onClick={dismiss}
-      />
-      <Spotlight rect={targetRect} />
-      <Tooltip
-        step={currentStep}
-        stepIndex={stepIndex}
-        totalSteps={TOUR_STEPS.length}
-        rect={targetRect}
-        onNext={() => {
-          if (stepIndex < TOUR_STEPS.length - 1) setStepIndex((i) => i + 1);
-          else dismiss();
-        }}
-        onSkip={dismiss}
-        tooltipRef={tooltipRef}
-      />
-    </>,
-    document.body,
+    <FocusTrap
+      active={visible}
+      focusTrapOptions={{
+        escapeDeactivates: true,
+        clickOutsideDeactivates: false,
+        fallbackFocus: () => tooltipRef.current!,
+      }}
+    >
+      <div>
+        <div
+          className="fixed inset-0"
+          style={{ zIndex: 9997 }}
+          aria-hidden="true"
+          onClick={dismiss}
+        />
+
+        <Spotlight rect={targetRect} />
+
+        <Tooltip
+          step={currentStep}
+          stepIndex={stepIndex}
+          totalSteps={TOUR_STEPS.length}
+          rect={targetRect}
+          onNext={() => {
+            if (stepIndex < TOUR_STEPS.length - 1) {
+              setStepIndex((i) => i + 1);
+            } else {
+              dismiss();
+            }
+          }}
+          onSkip={dismiss}
+          tooltipRef={tooltipRef}
+        />
+      </div>
+    </FocusTrap>,
+    document.body
   );
-}
+}
\ No newline at end of file

From 6bf443ff479626498286af3c656be5e7541c584e Mon Sep 17 00:00:00 2001
From: Anshul Jain <167362756+anshul23102@users.noreply.github.com>
Date: Sat, 23 May 2026 16:58:26 +0530
Subject: [PATCH 2/5] fix(ffmpeg): guard buildAudioFilter against zero or
 negative speed (#892)

When speed is zero or negative, the while loop dividing remaining by
0.5 never converges: 0 / 0.5 == 0, causing an infinite loop that
blocks the browser thread entirely.

Return an empty filter string immediately for any speed <= 0, which
is consistent with the existing behavior of omitting atempo filters
when no adjustment is needed.

Closes #862
---
 src/lib/ffmpeg.ts | 74 ++++++++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/lib/ffmpeg.ts b/src/lib/ffmpeg.ts
index 017b0511..3b09ad1e 100644
--- a/src/lib/ffmpeg.ts
+++ b/src/lib/ffmpeg.ts
@@ -2,7 +2,7 @@ import { EditRecipe, ExportResult, BackgroundMusicOptions, ImageOverlayOptions,
 import { getPresetById } from "./presets";
 import { buildTextFilter } from "./text-overlay";
 
-export class FFmpegLoadError extends Error {}
+export class FFmpegLoadError extends Error { }
 
 
 type SerializedFile = {
@@ -63,7 +63,7 @@ function createWorker(): Worker {
 
   // MUST be strictly inline for Next.js/Webpack to detect and compile the worker chunk
   ffmpegWorker = new Worker(new URL("./ffmpeg.worker.ts", import.meta.url), { type: "module" });
-  
+
   ffmpegWorker.onmessage = handleWorkerMessage;
   ffmpegWorker.onerror = (event) => {
     const message = event.message || "FFmpeg worker error";
@@ -165,8 +165,8 @@ export async function loadFFmpeg(
   onProgress?: (percent: number) => void
 ): Promise<void> {
   // 1. Capture if the worker is uninitialized before ensureWorker runs
-  const isFirstLoad = !ffmpegWorker; 
-  
+  const isFirstLoad = !ffmpegWorker;
+
   await ensureWorker();
 
   if (workerReady && workerReadyResolve === null) {
@@ -245,10 +245,10 @@ export async function exportVideo(
 
   const musicFilePayload = musicOptions?.file
     ? {
-        name: musicOptions.file.name,
-        type: musicOptions.file.type || "audio/mpeg",
-        data: await musicOptions.file.arrayBuffer(),
-      }
+      name: musicOptions.file.name,
+      type: musicOptions.file.type || "audio/mpeg",
+      data: await musicOptions.file.arrayBuffer(),
+    }
     : undefined;
 
   if (overlayOptions?.file && overlayOptions.file.size > MAX_FILE_SIZE) {
@@ -257,10 +257,10 @@ export async function exportVideo(
 
   const overlayFilePayload = overlayOptions?.file
     ? {
-        name: overlayOptions.file.name,
-        type: overlayOptions.file.type || "image/png",
-        data: await overlayOptions.file.arrayBuffer(),
-      }
+      name: overlayOptions.file.name,
+      type: overlayOptions.file.type || "image/png",
+      data: await overlayOptions.file.arrayBuffer(),
+    }
     : undefined;
 
   const sanitizedMusicOptions = musicOptions
@@ -441,9 +441,11 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
 
 export function buildAudioFilter(recipe: EditRecipe): string {
   if (recipe.speed <= 0) return "";
+
   const filters: string[] = [];
 
   let remaining = recipe.speed;
+
   while (remaining < 0.5) {
     filters.push("atempo=0.5");
     remaining /= 0.5;
@@ -527,38 +529,38 @@ function buildArguments(
       videoOut = "[vbase]";
     }
 
-if (hasOverlay) {
-  const scaledW = overlayOptions!.size;
-  const alpha = (overlayOptions!.opacity / 100).toFixed(2);
-  const posMap: Record<string, string> = {
-    "top-left":     "20:20",
-    "top-right":    "main_w-w-20:20",
-    "bottom-left":  "20:main_h-h-20",
-    "bottom-right": "main_w-w-20:main_h-h-20",
-  };
-
-interface PositionCoords {
-    x: number;
-    y: number;
-  }
+    if (hasOverlay) {
+      const scaledW = overlayOptions!.size;
+      const alpha = (overlayOptions!.opacity / 100).toFixed(2);
+      const posMap: Record<string, string> = {
+        "top-left": "20:20",
+        "top-right": "main_w-w-20:20",
+        "bottom-left": "20:main_h-h-20",
+        "bottom-right": "main_w-w-20:main_h-h-20",
+      };
+
+      interface PositionCoords {
+        x: number;
+        y: number;
+      }
 
-  const pos = typeof overlayOptions?.position === "string"
-    ? (posMap[overlayOptions.position] ?? "main_w-w-20:main_h-h-20")
-    : overlayOptions?.position
-    ? `(main_w)*${(overlayOptions.position as PositionCoords).x}/100:(main_h)*${(overlayOptions.position as PositionCoords).y}/100`
-    : "main_w-w-20:main_h-h-20";
+      const pos = typeof overlayOptions?.position === "string"
+        ? (posMap[overlayOptions.position] ?? "main_w-w-20:main_h-h-20")
+        : overlayOptions?.position
+          ? `(main_w)*${(overlayOptions.position as PositionCoords).x}/100:(main_h)*${(overlayOptions.position as PositionCoords).y}/100`
+          : "main_w-w-20:main_h-h-20";
 
-  filterParts.push(`[${overlayIdx}:v]scale=${scaledW}:-2,format=rgba,colorchannelmixer=aa=${alpha}[logo]`);
-  filterParts.push(`${videoOut}[logo]overlay=${pos}[vout]`);
-  videoOut = "[vout]";
-}
+      filterParts.push(`[${overlayIdx}:v]scale=${scaledW}:-2,format=rgba,colorchannelmixer=aa=${alpha}[logo]`);
+      filterParts.push(`${videoOut}[logo]overlay=${pos}[vout]`);
+      videoOut = "[vout]";
+    }
 
     let audioOut = "";
     if (shouldKeepAudio) {
       if (hasMusicTrack) {
         const musicVol = (musicOptions!.musicVolume / 100).toFixed(2);
         if (hasOriginalAudio) {
-          const origVol  = (musicOptions!.originalAudioVolume / 100).toFixed(2);
+          const origVol = (musicOptions!.originalAudioVolume / 100).toFixed(2);
           const origChain = afParts.length > 0
             ? `[0:a]${afParts.join(",")},volume=${origVol}[orig]`
             : `[0:a]volume=${origVol}[orig]`;

From b50f0fa14a786aa092b32596efe2388a1e95cc58 Mon Sep 17 00:00:00 2001
From: Anshul Jain <167362756+anshul23102@users.noreply.github.com>
Date: Sat, 23 May 2026 16:59:37 +0530
Subject: [PATCH 3/5] fix(useVideoEditor): guard validateRecipe and
 localStorage against NaN dimensions (#894)

NaN comparisons (NaN < 16, NaN > 7680) always evaluate to false, so a
customWidth or customHeight that is NaN passes all boundary checks and
validateRecipe returns null (no error). The NaN then propagates to the
FFmpeg scale filter as scale=NaN:NaN, crashing the export immediately.

Two fixes applied:

1. validateRecipe: prefix each custom-dimension check with Number.isNaN()
   so a NaN value is caught as a validation error before any comparison.

2. Legacy localStorage parser: replace bare nullish-coalescing on
   parsed.customWidth/customHeight with a sanitizeDimension helper that
   calls Number.isFinite() and enforces the [16, 7680] range. Any
   corrupted, non-numeric, or out-of-range stored value falls back to the
   previous safe default instead of being merged into state as NaN.

Closes #864
---
 src/hooks/useVideoEditor.ts | 101 ++++++++++++++++++++++++++----------
 1 file changed, 74 insertions(+), 27 deletions(-)

diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index ab67dcf8..64fd3a20 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -34,7 +34,7 @@ export function extractMetadata(file: File): Promise<{ width: number; height: nu
     const video = document.createElement("video");
     const timeout = setTimeout(() => {
       URL.revokeObjectURL(url);
-      reject( new Error("Video metaData load timeout — the file may be too large or the device too slow. Please try again.") );
+      reject(new Error("Video metaData load timeout — the file may be too large or the device too slow. Please try again."));
     }, 5000);
 
     video.preload = "metadata";
@@ -81,7 +81,7 @@ function verifyMagicBytes(file: File): Promise<boolean> {
   });
 }
 
-function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
+function validateRecipe(recipe: EditRecipe, duration: number): string | null {
   const validations: Array<[boolean, string]> = [
     [
       recipe.trimStart < 0,
@@ -92,8 +92,8 @@ function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
       `Trim end time cannot exceed the video duration (${Math.floor(duration)}s).`,
     ],
     [
-      recipe.trimEnd !== null 
-        ? recipe.trimStart >= recipe.trimEnd 
+      recipe.trimEnd !== null
+        ? recipe.trimStart >= recipe.trimEnd
         : (duration > 0 && recipe.trimStart >= duration),
       "Trim start time must be earlier than the end time.",
     ],
@@ -212,15 +212,15 @@ export function useVideoEditor() {
   }, [addTrack]);
 
   const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
-  setRecipe((prev) => {
-    const next = { ...prev, ...patch };
-    // GIF has no audio — force keepAudio off
-    if (next.format === "gif") {
-      next.keepAudio = false;
-    }
-    return next;
-  });
-}, []);
+    setRecipe((prev) => {
+      const next = { ...prev, ...patch };
+      // GIF has no audio — force keepAudio off
+      if (next.format === "gif") {
+        next.keepAudio = false;
+      }
+      return next;
+    });
+  }, []);
   const isValidValue = (key: keyof EditRecipe, val: any): boolean => {
     switch (key) {
       case "preset":
@@ -256,7 +256,7 @@ export function useVideoEditor() {
 
   useEffect(() => {
     if (typeof window === "undefined") return;
-    
+
     // Auto-restore saved video session
     loadSessionFile().then(async (savedFile) => {
       if (savedFile) {
@@ -315,10 +315,57 @@ export function useVideoEditor() {
           }));
         }
       } else {
-        setRecipe((current) => loadPersistedRecipe(localStorage, migratePersistedRecipe({
-          ...current,
-          soundOnCompletion: getStoredSoundPreference(localStorage),
-        })));
+        // Try full recipe restore first (new key)
+        try {
+          const raw = localStorage.getItem(STORAGE_KEY);
+          if (raw) {
+            const parsed = JSON.parse(raw);
+            if (isValidRecipe(parsed)) {
+              setRecipe((current) =>
+                loadPersistedRecipe(
+                  localStorage,
+                  migratePersistedRecipe({
+                    ...current,
+                    ...parsed,
+                    soundOnCompletion: getStoredSoundPreference(localStorage),
+                  })
+                )
+              );
+              return;
+            }
+          }
+        } catch {
+          // ignore parse/validation errors and fall back to legacy
+        }
+
+        // Legacy partial settings (keep for backward compatibility)
+        const saved = localStorage.getItem("reframe-settings");
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          const sanitizeDimension = (
+            val: unknown,
+            fallback: number
+          ): number => {
+            const n = Number(val);
+            return Number.isFinite(n) && n >= 16 && n <= 7680 ? n : fallback;
+          };
+
+          setRecipe((prev) => ({
+            ...prev,
+            preset: parsed.preset ?? prev.preset,
+            quality: parsed.quality ?? prev.quality,
+            speed: parsed.speed ?? prev.speed,
+            customWidth: sanitizeDimension(
+              parsed.customWidth,
+              prev.customWidth
+            ),
+            customHeight: sanitizeDimension(
+              parsed.customHeight,
+              prev.customHeight
+            ),
+            soundOnCompletion: getStoredSoundPreference(localStorage),
+          }));
+        }
       }
     } catch (e) {
       // ignore
@@ -378,7 +425,7 @@ export function useVideoEditor() {
     setError(null);
     setFile(null);
     setVideoMetadata(null);
-    
+
     if (!selectedFile) {
       setFileError("");
       return;
@@ -521,7 +568,7 @@ export function useVideoEditor() {
         exportDurationMs: Date.now() - startedAt,
       });
       setStatus("done");
-     }  catch (err) {
+    } catch (err) {
       if (exportCancelledRef.current) return;
 
       console.error("export failed:", err);
@@ -594,7 +641,7 @@ export function useVideoEditor() {
     window.addEventListener("beforeunload", handler);
     return () => window.removeEventListener("beforeunload", handler);
   }, [status]);
-  
+
   useEffect(() => {
     const handleKeydown = (e: KeyboardEvent) => {
       if (
@@ -639,13 +686,13 @@ export function useVideoEditor() {
     };
   }, [file]);
 
-  useEffect(()=>{
-    return ()=>{
-      if(result?.blobUrl){
+  useEffect(() => {
+    return () => {
+      if (result?.blobUrl) {
         URL.revokeObjectURL(result.blobUrl);
       }
     }
-   },[result?.blobUrl])
+  }, [result?.blobUrl])
 
   useEffect(() => {
     return () => {
@@ -714,8 +761,8 @@ export function useVideoEditor() {
   });
 
   const toggleSound = useCallback(() => {
-  updateRecipe({ soundOnCompletion: !recipe.soundOnCompletion });
-}, [recipe.soundOnCompletion, updateRecipe]);
+    updateRecipe({ soundOnCompletion: !recipe.soundOnCompletion });
+  }, [recipe.soundOnCompletion, updateRecipe]);
 
   return {
     file,

From 79c7bfd332d19d575f530a86e35405076f3cc7c4 Mon Sep 17 00:00:00 2001
From: shiv <74009335+shivanshanand@users.noreply.github.com>
Date: Sun, 24 May 2026 09:41:39 +0530
Subject: [PATCH 4/5] fix: prevent onboarding tour crash during step
 transitions (#1032)

---
 src/components/OnboardingTour.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index 90d8cd25..0aa71fd2 100644
--- a/src/components/OnboardingTour.tsx
+++ b/src/components/OnboardingTour.tsx
@@ -284,7 +284,6 @@ export default function OnboardingTour() {
     });
   }, []);
 
-  // Initialise on mount
   useEffect(() => {
     if (localStorage.getItem(TOUR_KEY)) return;
 
@@ -487,6 +486,6 @@ export default function OnboardingTour() {
         />
       </div>
     </FocusTrap>,
-    document.body
+    document.body,
   );
 }
\ No newline at end of file

From 1490e68ed460f64a85a95fdcb21f97e75d707e43 Mon Sep 17 00:00:00 2001
From: Karthikeya <karthikeya20012007@gmail.com>
Date: Sun, 16 Aug 2026 14:13:07 +0530
Subject: [PATCH 5/5] fix: use recipe storage key for persisted recipe

---
 src/hooks/useVideoEditor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index 64fd3a20..2f0f2752 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -317,7 +317,7 @@ export function useVideoEditor() {
       } else {
         // Try full recipe restore first (new key)
         try {
-          const raw = localStorage.getItem(STORAGE_KEY);
+          const raw = localStorage.getItem(RECIPE_STORAGE_KEY);
           if (raw) {
             const parsed = JSON.parse(raw);
             if (isValidRecipe(parsed)) {