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

---
 src/components/OnboardingTour.tsx | 178 ++++++++++++++++--------------
 1 file changed, 96 insertions(+), 82 deletions(-)

diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index d5c163bc..d76f6c28 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";
 
@@ -14,7 +15,7 @@ interface TourStep {
 }
 
 const TOUR_STEPS: TourStep[] = [
-   {
+  {
     targetId: "upload-zone",
     title: "Drop your video here",
     description: "Click to browse or drag and drop a video file to get started.",
@@ -32,11 +33,11 @@ const TOUR_STEPS: TourStep[] = [
     description: "After uploading, set in/out points and tweak colour in the controls that appear on the left.",
     position: "left",
   },
-    {
+  {
     targetId: "export-button",
     title: "Export your video",
     description: "Click Export (or press ⌘↵) to process your video locally — nothing ever leaves your device.",
-    position: "top",  
+    position: "top",
   },
 ];
 
@@ -198,7 +199,7 @@ function Tooltip({ step, stepIndex, totalSteps, rect, onNext, onSkip, tooltipRef
             Skip tour
           </button>
           <button
-              onClick={onNext}
+            onClick={onNext}
             ref={(el) => { el?.focus(); }}
             className="px-4 py-2 rounded-lg text-sm font-medium
               bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700
@@ -218,7 +219,7 @@ export default function OnboardingTour() {
   const [visible, setVisible] = useState(false);
   const [targetRect, setTargetRect] = useState<Rect | null>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
-  const isFirstRender = useRef(true);  
+  const isFirstRender = useRef(true);
 
   const dismiss = useCallback(() => {
     localStorage.setItem(TOUR_KEY, "1");
@@ -226,70 +227,70 @@ export default function OnboardingTour() {
   }, []);
 
   const measureTarget = useCallback((id: string): Promise<Rect | null> => {
-  return new Promise((resolve) => {
-    const attempt = (tries: number) => {
-      const el = document.getElementById(id);
-      if (el) {
-        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
-        return;
-      }
-      if (tries <= 0) {
-        resolve(null);
-        return;
-      }
-      setTimeout(() => attempt(tries - 1), 300);
-    };
-    attempt(5);
-  });
-}, []);
+    return new Promise((resolve) => {
+      const attempt = (tries: number) => {
+        const el = document.getElementById(id);
+        if (el) {
+          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
+          return;
+        }
+        if (tries <= 0) {
+          resolve(null);
+          return;
+        }
+        setTimeout(() => attempt(tries - 1), 300);
+      };
+      attempt(5);
+    });
+  }, []);
 
   // 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]);
+    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)
-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);
+  // Measure target whenever step changes (skip on first render — init effect handles that)
+  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 {
-        dismiss();
+        if (stepIndex < TOUR_STEPS.length - 1) {
+          setStepIndex((i) => i + 1);
+        } else {
+          dismiss();
+        }
       }
-    }
-  });
-}, [stepIndex, visible, measureTarget, dismiss]);
+    });
+  }, [stepIndex, visible, measureTarget, dismiss]);
 
   // Re-measure on resize
   useEffect(() => {
-  if (!visible) return;
-  const onResize = () => {
-    measureTarget(TOUR_STEPS[stepIndex]?.targetId ?? "").then(setTargetRect);
-  };
-  window.addEventListener("resize", onResize);
-  return () => window.removeEventListener("resize", onResize);
-}, [visible, stepIndex, measureTarget]);
+    if (!visible) return;
+    const onResize = () => {
+      measureTarget(TOUR_STEPS[stepIndex]?.targetId ?? "").then(setTargetRect);
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [visible, stepIndex, measureTarget]);
 
   // Keyboard support
   useEffect(() => {
@@ -308,28 +309,41 @@ useEffect(() => {
   if (!visible || !targetRect) 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={TOUR_STEPS[stepIndex]!}
-        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}
-      />
-    </>,
+    <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={TOUR_STEPS[stepIndex]!}
+          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 acb043d04c34cbe02d92c1e147bfbb71ffa6fe29 Mon Sep 17 00:00:00 2001
From: RAHUL RAJAK <rahulrajak.cs@gmail.com>
Date: Sat, 23 May 2026 16:57:43 +0530
Subject: [PATCH 02/13] fix(types): remove duplicate DEFAULT_RECIPE and
 SPEED_STEPS from types.ts (#886)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: enable noUncheckedIndexedAccess and fix resulting type errors

* fix: add JS validation for custom preset width/height inputs

- Validate width/height in handleWidthChange and handleHeightChange
- Reject values outside 16–7680 range and NaN before updating state
- Add autoComplete='off' to width and height inputs

Fixes #24

* fix(types): remove duplicate DEFAULT_RECIPE and SPEED_STEPS from types.ts

DEFAULT_RECIPE was defined in both types.ts and constants.ts with
diverged values. types.ts had contrast:0 and saturation:0, while
constants.ts had the correct neutral values contrast:1 and saturation:1.

FFmpeg's eq filter treats contrast=0 as fully grey and saturation=0
as greyscale, so any reset via the wrong definition would corrupt output.

useKeyboardShortcuts.ts was importing DEFAULT_RECIPE from types.ts
(the broken one). Fixed to import from constants.ts instead.

SPEED_STEPS was also duplicated — removed from types.ts since
constants.ts is the canonical source already used everywhere else.

All 54 tests pass with no regressions.

Fixes #YOUR_ISSUE_NUMBER

---------

Co-authored-by: Akanksha Trehun <akankshatrehun@gmail.com>
---
 src/hooks/useKeyboardShortcuts.ts |  6 +++---
 src/lib/types.ts                  | 33 -------------------------------
 2 files changed, 3 insertions(+), 36 deletions(-)

diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
index 27bb1bd3..1ce2e57e 100644
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -1,12 +1,12 @@
 import { useEffect } from "react";
-import { EditRecipe, DEFAULT_RECIPE, ExportStatus } from "@/lib/types";
+import { EditRecipe, ExportStatus } from "@/lib/types";
 import { PRESETS } from "@/lib/presets";
 
 interface UseKeyboardShortcutsProps {
   file: File | null;
   recipe: EditRecipe;
   resetSettings: () => void;
-  updateRecipe: (recipe: Partial<EditRecipe>) => void;  
+  updateRecipe: (recipe: Partial<EditRecipe>) => void;
   handleExport: () => void;
   status: ExportStatus;
   cancelExport: () => void;
@@ -40,7 +40,7 @@ export function useKeyboardShortcuts({
         e.stopPropagation();   // ← add this
         if (file && status === "idle") handleExport();
         return;
-    }
+      }
 
       if (!file) return;
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index f2811e20..2014d039 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -58,39 +58,6 @@ export type ExportStatus =
   | "done"
   | "error";
 
-export const SPEED_STEPS = [
-  0.25,
-  0.5,
-  0.75,
-  1,
-  1.25,
-  1.5,
-  2,
-  4,
-] as const;
-
-export const DEFAULT_RECIPE: EditRecipe = {
-  preset: "vertical-9-16",
-  customWidth: 1920,
-  customHeight: 1080,
-  framing: "fit",
-  trimStart: 0,
-  trimEnd: null,
-  rotate: 0,
-  keepAudio: true,
-  normalizeAudio: false,
-  speed: 1,
-  quality: 23,
-  format: "mp4",
-  stabilization: false,
-  denoise: false,
-  brightness: 0,
-  contrast: 1,
-  saturation: 1,
-  soundOnCompletion: false,
-  version: RECIPE_VERSION,
-};
-
 export const MAX_FILE_SIZE =
   2 * 1024 * 1024 * 1024;
 

From 8f2d93e8ec0427a68136797fe857fb401bd02e84 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 03/13] 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 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/ffmpeg.ts b/src/lib/ffmpeg.ts
index 28aa255c..94c2ddb3 100644
--- a/src/lib/ffmpeg.ts
+++ b/src/lib/ffmpeg.ts
@@ -147,6 +147,7 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
 }
 
  export function buildAudioFilter(speed: number, normalizeAudio: boolean): string {
+  if (speed <= 0) return "";
   const filters: string[] = [];
 
   let remaining = speed;

From f7e9aedde213483fc119723eaf993e347fe32c54 Mon Sep 17 00:00:00 2001
From: Anshul Jain <167362756+anshul23102@users.noreply.github.com>
Date: Sat, 23 May 2026 16:58:58 +0530
Subject: [PATCH 04/13] fix(ThumbnailStrip): replace abortRef with run ID to
 eliminate concurrency race (#893)

* fix(ffmpeg): guard buildAudioFilter against zero or negative speed

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

* fix(ThumbnailStrip): replace abortRef with run ID to eliminate concurrency race

The previous abortRef approach had a race window: the useEffect cleanup
sets abortRef.current = true, but the new effect immediately invokes
generateThumbnails which resets it to false. Any in-flight iteration from
the prior run reads the newly-reset false and continues executing
concurrently with the new run, causing duplicate offscreen video elements,
interleaved thumbnail sequences, and DOM/memory leaks.

Replace abortRef with a lastRunIdRef integer counter. Each invocation
captures its own runId via ++lastRunIdRef.current. Every await checkpoint
and every state-mutating code path checks lastRunIdRef.current === runId
before proceeding. The cleanup function simply increments the counter,
which immediately invalidates any in-flight run without a shared boolean
that can be reset underneath it.

Wrap the video element lifecycle in try/finally to guarantee video.src
is cleared and offscreenVideoRef is released even when the function exits
early (stale run detected, ctx unavailable, or unhandled rejection).

Closes #863
---
 src/components/ThumbnailStrip.tsx | 132 +++++++++++++++++-------------
 1 file changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/components/ThumbnailStrip.tsx b/src/components/ThumbnailStrip.tsx
index a5bda76e..90cc5f3c 100644
--- a/src/components/ThumbnailStrip.tsx
+++ b/src/components/ThumbnailStrip.tsx
@@ -33,7 +33,7 @@ export default function ThumbnailStrip({
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const stripRef = useRef<HTMLDivElement>(null);
   const offscreenVideoRef = useRef<HTMLVideoElement | null>(null);
-  const abortRef = useRef(false);
+  const lastRunIdRef = useRef(0);
   const objectUrlsRef = useRef<string[]>([]);
 
   const effectiveTrimEnd = trimEnd ?? duration;
@@ -46,81 +46,97 @@ export default function ThumbnailStrip({
   const generateThumbnails = useCallback(async () => {
     if (!videoSrc || duration <= 0) return;
 
-    abortRef.current = false;
+    const runId = ++lastRunIdRef.current;
     setIsGenerating(true);
     revokeAllObjectUrls();
     setThumbnails([]);
     setProgress(0);
 
     const video = document.createElement("video");
-    video.src = videoSrc;
-    video.crossOrigin = "anonymous";
-    video.muted = true;
-    video.preload = "auto";
     offscreenVideoRef.current = video;
 
-    await new Promise<void>((resolve, reject) => {
-      video.onloadedmetadata = () => resolve();
-      video.onerror = () => reject(new Error("Video load failed"));
-      video.load();
-    });
+    try {
+      video.src = videoSrc;
+      video.crossOrigin = "anonymous";
+      video.muted = true;
+      video.preload = "auto";
 
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+      await new Promise<void>((resolve, reject) => {
+        video.onloadedmetadata = () => resolve();
+        video.onerror = () => reject(new Error("Video load failed"));
+        video.load();
+      });
 
-    const thumbW = 160;
-    const thumbH = 90;
-    canvas.width = thumbW;
-    canvas.height = thumbH;
+      if (lastRunIdRef.current !== runId) return;
 
-    const times: number[] = [];
-    for (let t = 0; t <= duration; t += intervalSeconds) {
-      times.push(Math.min(t, duration - 0.1));
-    }
-    if ((times[times.length - 1] ?? 0) < duration - 0.5) {
-      times.push(duration - 0.1);
-    }
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
 
-    const captured: Thumbnail[] = [];
+      const thumbW = 160;
+      const thumbH = 90;
+      canvas.width = thumbW;
+      canvas.height = thumbH;
 
-    for (let i = 0; i < times.length; i++) {
-      if (abortRef.current) break;
+      const times: number[] = [];
+      for (let t = 0; t <= duration; t += intervalSeconds) {
+        times.push(Math.min(t, duration - 0.1));
+      }
+      if ((times[times.length - 1] ?? 0) < duration - 0.5) {
+        times.push(duration - 0.1);
+      }
 
-      const time = times[i] ?? 0;
-      await new Promise<void>((resolve) => {
-        const onSeeked = async () => {
-          video.removeEventListener("seeked", onSeeked);
-          ctx.drawImage(video, 0, 0, thumbW, thumbH);
+      const captured: Thumbnail[] = [];
 
-          try {
-            const blob = await new Promise<Blob | null>((blobResolve) => {
-              canvas.toBlob((b) => blobResolve(b), "image/jpeg", 0.7);
-            });
-            if (blob && !abortRef.current) {
-              const url = URL.createObjectURL(blob);
-              objectUrlsRef.current.push(url);
-              captured.push({ time, dataUrl: url });
+      for (let i = 0; i < times.length; i++) {
+        if (lastRunIdRef.current !== runId) break;
+
+        const time = times[i] ?? 0;
+        await new Promise<void>((resolve) => {
+          const onSeeked = async () => {
+            video.removeEventListener("seeked", onSeeked);
+
+            if (lastRunIdRef.current !== runId) {
+              resolve();
+              return;
+            }
 
-              if (i === times.length - 1 || captured.length % 5 === 0) {
-                setThumbnails([...captured]);
+            ctx.drawImage(video, 0, 0, thumbW, thumbH);
+
+            try {
+              const blob = await new Promise<Blob | null>((blobResolve) => {
+                canvas.toBlob((b) => blobResolve(b), "image/jpeg", 0.7);
+              });
+              if (blob && lastRunIdRef.current === runId) {
+                const url = URL.createObjectURL(blob);
+                objectUrlsRef.current.push(url);
+                captured.push({ time, dataUrl: url });
+
+                if (i === times.length - 1 || captured.length % 5 === 0) {
+                  setThumbnails([...captured]);
+                }
               }
+            } catch (err) {
+              console.error("Failed to generate thumbnail blob", err);
             }
-          } catch (err) {
-            console.error("Failed to generate thumbnail blob", err);
-          }
-
-          setProgress(Math.round(((i + 1) / times.length) * 100));
-          resolve();
-        };
-        video.addEventListener("seeked", onSeeked);
-        video.currentTime = time;
-      });
-    }
 
-    video.src = "";
-    offscreenVideoRef.current = null;
-    setIsGenerating(false);
+            setProgress(Math.round(((i + 1) / times.length) * 100));
+            resolve();
+          };
+          video.addEventListener("seeked", onSeeked);
+          video.currentTime = time;
+        });
+      }
+
+      if (lastRunIdRef.current === runId) {
+        setIsGenerating(false);
+      }
+    } finally {
+      video.src = "";
+      if (offscreenVideoRef.current === video) {
+        offscreenVideoRef.current = null;
+      }
+    }
   }, [videoSrc, duration, intervalSeconds, revokeAllObjectUrls]);
 
   useEffect(() => {
@@ -128,7 +144,7 @@ export default function ThumbnailStrip({
       generateThumbnails();
     }
     return () => {
-      abortRef.current = true;
+      lastRunIdRef.current++;
       revokeAllObjectUrls();
     };
   }, [generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);

From 9d12c0c5f7f6789f141f4a29a29a1c7287644a97 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 05/13] 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 | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index 33ab63ed..77bf9ab4 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -81,11 +81,11 @@ function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
       "Trim start time must be earlier than the end time.",
     ],
     [
-      recipe.preset === "custom" && (recipe.customWidth < 16 || recipe.customWidth > 7680),
+      recipe.preset === "custom" && (Number.isNaN(recipe.customWidth) || recipe.customWidth < 16 || recipe.customWidth > 7680),
       "Width must be between 16px and 7680px.",
     ],
     [
-      recipe.preset === "custom" && (recipe.customHeight < 16 || recipe.customHeight > 7680),
+      recipe.preset === "custom" && (Number.isNaN(recipe.customHeight) || recipe.customHeight < 16 || recipe.customHeight > 7680),
       "Height must be between 16px and 7680px.",
     ],
     [
@@ -248,13 +248,17 @@ export function useVideoEditor() {
         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: parsed.customWidth ?? prev.customWidth,
-            customHeight: parsed.customHeight ?? prev.customHeight
+            customWidth: sanitizeDimension(parsed.customWidth, prev.customWidth),
+            customHeight: sanitizeDimension(parsed.customHeight, prev.customHeight),
           }));
         }
       }

From 0aabcc3e27f61a2aba72440dd45e091ddfe7af66 Mon Sep 17 00:00:00 2001
From: Vedant Bidari <vedhantvarnika123@gmail.com>
Date: Sat, 23 May 2026 16:59:44 +0530
Subject: [PATCH 06/13] fix: prevent custom dimension inputs from clipping
 4-digit values (#884)

---
 src/components/PresetSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
index d549cc79..fd129ab2 100644
--- a/src/components/PresetSelector.tsx
+++ b/src/components/PresetSelector.tsx
@@ -290,7 +290,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               step={2}
               value={recipe.customWidth}
               onChange={(e) => handleWidthChange(Number(e.target.value))}
-              className="w-full rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading transition-all focus:outline-none focus:ring-2 focus:ring-film-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              className="w-full min-w-20 rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading transition-all focus:outline-none focus:ring-2 focus:ring-film-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             />
           </div>
 
@@ -316,7 +316,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               step={2}
               value={recipe.customHeight}
               onChange={(e) => handleHeightChange(Number(e.target.value))}
-              className="w-full rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading transition-all focus:outline-none focus:ring-2 focus:ring-film-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              className="w-full min-w-20 rounded-md border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading transition-all focus:outline-none focus:ring-2 focus:ring-film-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             />
           </div>
 

From 3a5bff616038abab62ee4565442a6052543f0b19 Mon Sep 17 00:00:00 2001
From: Anshul Jain <167362756+anshul23102@users.noreply.github.com>
Date: Sun, 24 May 2026 09:32:59 +0530
Subject: [PATCH 07/13] fix: allow external contributors to trigger automated
 PR review workflows (#1036)

---
 .github/workflows/claude-manager.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/claude-manager.yml b/.github/workflows/claude-manager.yml
index 235a00d7..07fef221 100644
--- a/.github/workflows/claude-manager.yml
+++ b/.github/workflows/claude-manager.yml
@@ -35,6 +35,7 @@ jobs:
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
           trigger_phrase: ""
           direct_prompt: |
             You are the automated manager for magic-peach/reframe, a GSSoC'26 open-source project.
@@ -74,6 +75,7 @@ jobs:
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
           trigger_phrase: ""
           direct_prompt: |
             You are the automated manager for magic-peach/reframe, a GSSoC'26 open-source project.
@@ -122,6 +124,7 @@ jobs:
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
           trigger_phrase: ""
           direct_prompt: |
             You are the automated manager for magic-peach/reframe, a GSSoC'26 open-source project.

From 8439533e80f16ffde8d61be8c09a5413de1db9e0 Mon Sep 17 00:00:00 2001
From: Shivani <jadhavshivani2024@gmail.com>
Date: Sun, 24 May 2026 09:35:12 +0530
Subject: [PATCH 08/13] docs: improve and standardize pull request template
 (#1035)

Co-authored-by: shivani11jadhav <shivanij112006@gmail.com>
---
 .github/PULL_REQUEST_TEMPLATE.md | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index e1356945..2e51c0aa 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,25 +1,17 @@
 ## Description
-<!-- Briefly describe the changes made in this PR -->
-
 ## Related Issue
-<!-- Mention the issue number, for example: Closes #12 -->
-
 ## Type of Contribution
 - [ ] Bug fix
 - [ ] New feature
 - [ ] Documentation update
+- [ ] Refactor
 - [ ] GSSoC contribution
 
 ## Participant Info
-- GitHub username:
-- Contribution level (Beginner/Intermediate/Advanced):
+- GitHub username: 
+- Contribution level (Beginner/Intermediate/Advanced): 
 
 ## Screen Recording
-
-<!-- REQUIRED for all UI / feature / design changes. -->
-<!-- Drag a video file here or paste a Loom link below. -->
-<!-- PRs touching any visible UI without a recording will NOT be merged. -->
-
 > **How to record:** run `bun run dev` → open http://localhost:3000 → demonstrate the full working flow of your change, including any edge cases.
 >
 > - **macOS**: `Cmd + Shift + 5` → Record Selected Portion, or use QuickTime Player
@@ -27,9 +19,7 @@
 > - **Linux**: OBS Studio, GNOME Screenshot tool, or `kazam`
 > - **Any OS**: [Loom](https://loom.com) (free screen recorder, great for sharing)
 
-**Recording / Loom link:** <!-- drag file here or paste link -->
-
-## Checklist
+**Recording / Loom link:** ## Checklist
 - [ ] I have read the contribution guidelines
 - [ ] My changes follow the project structure
 - [ ] I have tested my changes in Chrome, Firefox, and Safari
@@ -38,4 +28,4 @@
 - [ ] New interactive elements have `aria-label` / accessible names
 - [ ] No `console.log` statements left in
 - [ ] This PR is related to a valid issue
-- [ ] **Screen recording attached above** (required for UI/feature/design changes)
+- [ ] **Screen recording attached above** (required for UI/feature/design changes)
\ No newline at end of file

From d5324d7a3728ab107789f4aa53dc3dbffec7e479 Mon Sep 17 00:00:00 2001
From: Ajey Awasthi <115537579+dropps07@users.noreply.github.com>
Date: Sun, 24 May 2026 09:37:45 +0530
Subject: [PATCH 09/13] feat: improve mobile layout & responsiveness (#912)
 (#1034)

Co-authored-by: Ajey Awasthi <dropps07@Ajeys-MacBook-Air.local>
---
 bun.lock                       | 19 +++++++++-
 src/components/VideoEditor.tsx | 64 +++++++++++++++++++++++-----------
 2 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/bun.lock b/bun.lock
index 3b78ac97..c5aa7903 100644
--- a/bun.lock
+++ b/bun.lock
@@ -20,6 +20,7 @@
         "wasm-feature-detect": "^1.8.0",
       },
       "devDependencies": {
+        "@testing-library/jest-dom": "^6.0.0",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/bun": "^1.3.14",
@@ -38,6 +39,8 @@
     },
   },
   "packages": {
+    "@adobe/css-tools": ["@adobe/css-tools@4.5.0", "", {}, "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q=="],
+
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
     "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
@@ -218,6 +221,8 @@
 
     "@testing-library/dom": ["@testing-library/dom@9.3.4", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.1.3", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "pretty-format": "^27.0.2" } }, "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ=="],
 
+    "@testing-library/jest-dom": ["@testing-library/jest-dom@6.9.1", "", { "dependencies": { "@adobe/css-tools": "^4.4.0", "aria-query": "^5.0.0", "css.escape": "^1.5.1", "dom-accessibility-api": "^0.6.3", "picocolors": "^1.1.1", "redent": "^3.0.0" } }, "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA=="],
+
     "@testing-library/react": ["@testing-library/react@14.3.1", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@testing-library/dom": "^9.0.0", "@types/react-dom": "^18.0.0" }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } }, "sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ=="],
 
     "@testing-library/user-event": ["@testing-library/user-event@14.6.1", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw=="],
@@ -420,6 +425,8 @@
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
     "cssstyle": ["cssstyle@3.0.0", "", { "dependencies": { "rrweb-cssom": "^0.6.0" } }, "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg=="],
@@ -458,7 +465,7 @@
 
     "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
-    "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
+    "dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
 
     "domexception": ["domexception@4.0.0", "", { "dependencies": { "webidl-conversions": "^7.0.0" } }, "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw=="],
 
@@ -612,6 +619,8 @@
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
 
+    "indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
+
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
@@ -762,6 +771,8 @@
 
     "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
+    "min-indent": ["min-indent@1.0.1", "", {}, "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="],
+
     "minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
 
     "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
@@ -880,6 +891,8 @@
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
+    "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "reframe": ["reframe@root:", {}],
@@ -968,6 +981,8 @@
 
     "strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
 
+    "strip-indent": ["strip-indent@3.0.0", "", { "dependencies": { "min-indent": "^1.0.0" } }, "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="],
+
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
 
     "styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "@babel/core": "*", "babel-plugin-macros": "*", "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" }, "optionalPeers": ["@babel/core", "babel-plugin-macros"] }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
@@ -1084,6 +1099,8 @@
 
     "@testing-library/dom/aria-query": ["aria-query@5.1.3", "", { "dependencies": { "deep-equal": "^2.0.5" } }, "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ=="],
 
+    "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
+
     "@testing-library/react/@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
 
     "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index ef9ad3f7..d1f2854b 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -288,29 +288,51 @@ export default function VideoEditor() {
       </div>
 
       <div className="max-w-6xl mx-auto px-4 py-8 pb-6 flex-1 w-full">
-
-        <header className="mb-10 flex items-end justify-between animate-fade-in">
-          <div
-            className="inline-block px-5 py-3 rounded-xl border border-[var(--border)] bg-[var(--surface)] shadow-sm border-l-4 border-l-film-600"
-            aria-label="Reframe — video editor"
-          >
-            <h1 className="font-display text-6xl leading-none tracking-widest2 text-[var(--text)]">
-              REFRAME
-            </h1>
-            <p className="font-heading text-sm text-[var(--muted)] mt-1 uppercase tracking-widest">
-              Your video, any format
-            </p>
-          </div>
-          <div className="hidden sm:flex items-center gap-2 text-sm font-heading font-semibold uppercase tracking-widest text-[var(--muted)] pb-1">
-            <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
-            No login. No ads. 100% private - your video never leaves your device.
-          </div>
-        </header>
-
+        <header className="mb-10 flex flex-col items-center justify-center gap-4 animate-fade-in">
+        <div
+          className="inline-block rounded-xl border border-[var(--border)] bg-[var(--surface)] shadow-sm border-l-4 border-l-film-600 mx-auto w-fit min-w-min"
+          style={{ padding: 'clamp(0.75rem,3vw,1.25rem) clamp(1rem,5vw,2rem)', boxSizing: 'border-box' }}
+          aria-label="Reframe — video editor"
+        >
+        <h1
+          className="font-display leading-none tracking-widest2 text-[var(--text)] break-words text-center transition-all"
+          style={{ fontSize: 'clamp(2rem,10vw,4rem)', viewTransitionName: 'reframe-text' }}
+        >
+          REFRAME
+        </h1>
+        <p
+          className="font-heading text-[var(--muted)] uppercase tracking-widest text-center"
+          style={{
+            fontSize: 'clamp(0.7rem,2vw,0.875rem)',
+            marginTop: 'clamp(0.25rem,1vw,0.5rem)',
+          }}
+        >
+          Your video, any format
+        </p>
+    <div
+      className="flex md:hidden items-center justify-center gap-2 font-heading font-semibold uppercase tracking-widest text-[var(--muted)] border-t border-[var(--border)]"
+      style={{
+        fontSize: 'clamp(0.6rem,1.5vw,0.75rem)',
+        marginTop: 'clamp(0.5rem,2vw,0.75rem)',
+        paddingTop: 'clamp(0.5rem,2vw,0.75rem)',
+      }}
+    >
+      <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
+      No login. No ads. 100% private.
+    </div>
+  </div>  
+  <div
+    className="flex flex-wrap justify-center text-center items-center gap-2 text-sm font-heading font-semibold uppercase tracking-widest text-[var(--muted)] pb-1"
+    style={{ justifyContent: 'center', textAlign: 'center', margin: '0', width: 'auto' }}
+  >
+    <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
+    No login. No ads. 100% private - your video never leaves your device.
+  </div>
+    </header>
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-5">
 
           <div className="space-y-4 min-w-0">
-            <div className="bg-[var(--surface)] rounded-xl p-5 border border-[var(--border)] animate-fade-in">
+            <div className="bg-[var(--surface)] rounded-xl p-3 border border-[var(--border)] animate-fade-in">
               <FileUpload onFileSelect={handleFileSelect} currentFile={file} fileError={fileError} duration={duration} />
 
               {!file && (
@@ -345,7 +367,7 @@ export default function VideoEditor() {
             )}
             {file && (
               <div className={cn(
-                "grid grid-cols-1 sm:grid-cols-2 gap-4",
+                "grid grid-cols-1 gap-4",
                 isProcessing && "pointer-events-none opacity-50"
               )}>
                 <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6">

From 76280ac0b27c466f221b40a73db04de83ceb588c Mon Sep 17 00:00:00 2001
From: Mohammed danyal <mohammeddanyal.h@gmail.com>
Date: Sun, 24 May 2026 09:40:21 +0530
Subject: [PATCH 10/13] feat: add text overlay (#1033)

---
 src/components/DraggableTextOverlays.tsx | 261 +++++++++++++++++++++++
 src/components/TextControls.tsx          | 217 +++++++++++++++++++
 src/components/ThumbnailStrip.tsx        |   1 +
 src/components/VideoEditor.tsx           |  41 +++-
 src/components/VideoPreview.tsx          |  52 ++++-
 src/lib/constants.ts                     |   1 +
 src/lib/ffmpeg.ts                        |   8 +
 src/lib/text-overlay.ts                  |  89 ++++++++
 src/lib/types.ts                         |  15 ++
 9 files changed, 681 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DraggableTextOverlays.tsx
 create mode 100644 src/components/TextControls.tsx
 create mode 100644 src/lib/text-overlay.ts

diff --git a/src/components/DraggableTextOverlays.tsx b/src/components/DraggableTextOverlays.tsx
new file mode 100644
index 00000000..04628cc3
--- /dev/null
+++ b/src/components/DraggableTextOverlays.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import { TextOverlay, EditRecipe } from "@/lib/types";
+import { useRef, useState, useCallback, useEffect, useMemo } from "react";
+import { getTextPixelPosition, getTextPercentPosition } from "@/lib/text-overlay";
+
+interface DraggableTextOverlaysProps {
+  recipe?: EditRecipe;
+  containerWidth: number;
+  containerHeight: number;
+  selectedTextId: string | null;
+  onUpdateText: (id: string, updates: Partial<TextOverlay>) => void;
+  onSelectText: (id: string | null) => void;
+}
+
+/**
+ * Renders draggable text overlays on the video preview.
+ * Users can click and drag text to reposition it on the canvas.
+ */
+export default function DraggableTextOverlays({
+  recipe,
+  containerWidth,
+  containerHeight,
+  selectedTextId,
+  onUpdateText,
+  onSelectText,
+}: DraggableTextOverlaysProps) {
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editText, setEditText] = useState<string>("");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editInputRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Memoize text overlays to prevent unnecessary dependency changes.
+   */
+  const textOverlays = useMemo(() => recipe?.textOverlays || [], [recipe?.textOverlays]);
+
+  /**
+   * Handles the start of a drag operation.
+   */
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, overlayId: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const overlay = textOverlays.find((o) => o.id === overlayId);
+      if (!overlay || !containerRef.current) return;
+
+      onSelectText(overlayId);
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const { left: pixelX, top: pixelY } = getTextPixelPosition(
+        overlay.x,
+        overlay.y,
+        containerWidth,
+        containerHeight
+      );
+
+      setDraggingId(overlayId);
+      setDragOffset({
+        x: e.clientX - rect.left - pixelX,
+        y: e.clientY - rect.top - pixelY,
+      });
+    },
+    [textOverlays, containerWidth, containerHeight, onSelectText]
+  );
+
+  /**
+   * Handles double-click to enter edit mode.
+   */
+  const handleDoubleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, overlayId: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const overlay = textOverlays.find((o) => o.id === overlayId);
+      if (!overlay) return;
+
+      setEditingId(overlayId);
+      setEditText(overlay.text);
+    },
+    [textOverlays]
+  );
+
+  /**
+   * Saves the edited text and exits edit mode.
+   */
+  const handleSaveEdit = useCallback(
+    (overlayId: string) => {
+      if (editText.trim()) {
+        onUpdateText(overlayId, { text: editText });
+      }
+      setEditingId(null);
+      setEditText("");
+    },
+    [editText, onUpdateText]
+  );
+
+  /**
+   * Handles keyboard events in edit mode.
+   */
+  const handleEditKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>, overlayId: string) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSaveEdit(overlayId);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setEditingId(null);
+        setEditText("");
+      }
+    },
+    [handleSaveEdit]
+  );
+
+  /**
+   * Handles dragging of text overlays.
+   */
+  useEffect(() => {
+    if (!draggingId || !containerRef.current) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = containerRef.current!.getBoundingClientRect();
+      const pixelX = e.clientX - rect.left - dragOffset.x;
+      const pixelY = e.clientY - rect.top - dragOffset.y;
+
+      const { x: percentX, y: percentY } = getTextPercentPosition(
+        pixelX,
+        pixelY,
+        containerWidth,
+        containerHeight
+      );
+
+      onUpdateText(draggingId, { x: percentX, y: percentY });
+    };
+
+    const handleMouseUp = () => {
+      setDraggingId(null);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggingId, dragOffset, containerWidth, containerHeight, onUpdateText]);
+
+  /**
+   * Focus edit input when entering edit mode.
+   */
+  useEffect(() => {
+    if (editingId && editInputRef.current) {
+      // Set the initial text content
+      editInputRef.current.textContent = editText;
+      editInputRef.current.focus();
+      // Select all text for quick replacement
+      const range = document.createRange();
+      range.selectNodeContents(editInputRef.current);
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    }
+  }, [editingId, editText]);
+
+  if (!textOverlays || textOverlays.length === 0) return null;
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 pointer-events-none"
+      style={{ width: containerWidth, height: containerHeight }}
+    >
+      {textOverlays.map((overlay) => {
+        const { left, top } = getTextPixelPosition(
+          overlay.x,
+          overlay.y,
+          containerWidth,
+          containerHeight
+        );
+
+        const isSelected = selectedTextId === overlay.id;
+        const isDragging = draggingId === overlay.id;
+
+        return (
+          <div
+            key={overlay.id}
+            role="button"
+            tabIndex={0}
+            onMouseDown={(e) => handleMouseDown(e, overlay.id)}
+            onDoubleClick={(e) => handleDoubleClick(e, overlay.id)}
+            onKeyDown={(e) => {
+              if (editingId === overlay.id) {
+                handleEditKeyDown(e, overlay.id);
+              } else if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelectText(overlay.id);
+              }
+            }}
+            className={`absolute pointer-events-auto ${
+              editingId === overlay.id ? "cursor-text" : "cursor-move"
+            } select-none transition-all ${
+              isDragging ? "scale-105" : "scale-100"
+            } ${
+              isSelected
+                ? "ring-2 ring-film-500 ring-offset-1 ring-offset-black/50"
+                : ""
+            }`}
+            style={{
+              left: `${left}px`,
+              top: `${top}px`,
+              transform: "translate(-50%, -50%)",
+              fontSize: `${overlay.fontSize}px`,
+              color: overlay.color,
+              fontWeight:
+                overlay.fontWeight === "900"
+                  ? 900
+                  : overlay.fontWeight === "bold"
+                  ? 700
+                  : 400,
+              textShadow: "0 2px 8px rgba(0, 0, 0, 0.8)",
+              whiteSpace: "nowrap",
+            }}
+            aria-label={`Text overlay: ${overlay.text}`}
+            aria-pressed={isSelected}
+          >
+            {editingId === overlay.id ? (
+              <div
+                ref={editInputRef}
+                contentEditable
+                suppressContentEditableWarning
+                onBlur={() => handleSaveEdit(overlay.id)}
+                onInput={(e) => setEditText(e.currentTarget.textContent || "")}
+                className="outline-none bg-black/30 px-1 py-0.5 rounded"
+                style={{
+                  color: overlay.color,
+                  fontSize: `${overlay.fontSize}px`,
+                  fontWeight:
+                    overlay.fontWeight === "900"
+                      ? 900
+                      : overlay.fontWeight === "bold"
+                      ? 700
+                      : 400,
+                  textShadow: "0 2px 8px rgba(0, 0, 0, 0.8)",
+                }}
+              >
+              </div>
+            ) : (
+              overlay.text
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/TextControls.tsx b/src/components/TextControls.tsx
new file mode 100644
index 00000000..31903b05
--- /dev/null
+++ b/src/components/TextControls.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { EditRecipe, TextOverlay } from "@/lib/types";
+import { createDefaultTextOverlay } from "@/lib/text-overlay";
+import { Trash2, Plus } from "lucide-react";
+import { useMemo } from "react";
+import BaseButton from "./ui/BaseButton";
+
+interface TextControlsProps {
+  recipe: EditRecipe;
+  onChange: (patch: Partial<EditRecipe>) => void;
+  selectedTextId: string | null;
+  onSelectText: (id: string | null) => void;
+}
+
+/**
+ * Controls for managing text overlays on the video.
+ * Allows users to add, remove, and select text overlays.
+ */
+export default function TextControls({
+  recipe,
+  onChange,
+  selectedTextId,
+  onSelectText,
+}: TextControlsProps) {
+  /**
+   * Memoize text overlays to prevent unnecessary dependency changes.
+   */
+  const textOverlays = useMemo(() => recipe.textOverlays || [], [recipe.textOverlays]);
+
+  /**
+   * Adds a new text overlay to the recipe.
+   */
+  const handleAddText = () => {
+    const newOverlay = createDefaultTextOverlay();
+    const updatedOverlays = [...textOverlays, newOverlay];
+    onChange({ textOverlays: updatedOverlays });
+    onSelectText(newOverlay.id);
+  };
+
+  /**
+   * Removes a text overlay from the recipe.
+   */
+  const handleRemoveText = (id: string) => {
+    const updatedOverlays = textOverlays.filter((overlay) => overlay.id !== id);
+    onChange({ textOverlays: updatedOverlays });
+    if (selectedTextId === id) {
+      onSelectText(null);
+    }
+  };
+
+  /**
+   * Updates a text overlay property.
+   */
+  const handleUpdateText = (id: string, updates: Partial<TextOverlay>) => {
+    const updatedOverlays = textOverlays.map((overlay) =>
+      overlay.id === id ? { ...overlay, ...updates } : overlay
+    );
+    onChange({ textOverlays: updatedOverlays });
+  };
+
+  /**
+   * Get the currently selected overlay.
+   */
+  const selectedOverlay = useMemo(
+    () => textOverlays.find((o) => o.id === selectedTextId),
+    [textOverlays, selectedTextId]
+  );
+
+  return (
+    <div className="w-full space-y-3">
+      {/* Add Text Button */}
+      <button
+        type="button"
+        onClick={handleAddText}
+        className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[var(--text)] font-semibold text-sm hover:bg-[var(--border)] transition-colors"
+      >
+        <Plus size={14} />
+        Add Text
+      </button>
+
+      {/* Text Overlay List */}
+      {textOverlays.length > 0 && (
+        <div className="space-y-2 max-h-40 overflow-y-auto">
+          {textOverlays.map((overlay, idx) => (
+            <div
+              key={overlay.id}
+              className={`flex items-center justify-between gap-2 p-2 rounded border transition-colors ${
+                selectedTextId === overlay.id
+                  ? "border-film-500 bg-film-600/10"
+                  : "border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)]"
+              }`}
+            >
+              <button
+                type="button"
+                onClick={() => onSelectText(overlay.id)}
+                className="flex-1 text-left text-xs truncate text-[var(--text)] font-medium"
+              >
+                {overlay.text || "(empty)"}
+              </button>
+              <button
+                type="button"
+                onClick={() => handleRemoveText(overlay.id)}
+                className="w-5 h-5 flex items-center justify-center rounded text-red-400 hover:bg-red-500/10 transition-colors"
+                aria-label={`Remove text overlay ${idx + 1}`}
+              >
+                <Trash2 size={13} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Text Editing Controls */}
+      {selectedOverlay && (
+        <div className="space-y-3 pt-2 border-t border-[var(--border)]">
+          {/* Text Input */}
+          <div>
+            <label htmlFor="text-input" className="text-xs text-[var(--muted)] font-medium mb-1 block">
+              Text
+            </label>
+            <textarea
+              id="text-input"
+              value={selectedOverlay.text}
+              onChange={(e) => handleUpdateText(selectedTextId!, { text: e.target.value })}
+              placeholder="Enter text here"
+              className="w-full px-2 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] text-[var(--text)] placeholder-[var(--muted)] focus:outline-none focus:ring-2 focus:ring-film-500 resize-none"
+              rows={2}
+            />
+          </div>
+
+          {/* Font Size Slider */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label htmlFor="font-size-slider" className="text-xs text-[var(--muted)] font-medium">
+                Font Size
+              </label>
+              <span className="text-xs text-[var(--text)] font-semibold">
+                {selectedOverlay.fontSize}px
+              </span>
+            </div>
+            <input
+              id="font-size-slider"
+              type="range"
+              min="12"
+              max="120"
+              step="2"
+              value={selectedOverlay.fontSize}
+              onChange={(e) =>
+                handleUpdateText(selectedTextId!, {
+                  fontSize: Number(e.target.value),
+                })
+              }
+              className="w-full accent-film-600"
+            />
+          </div>
+
+          {/* Text Color Picker */}
+          <div>
+            <label htmlFor="color-picker" className="text-xs text-[var(--muted)] font-medium mb-1 block">
+              Color
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                id="color-picker"
+                type="color"
+                value={selectedOverlay.color}
+                onChange={(e) =>
+                  handleUpdateText(selectedTextId!, { color: e.target.value })
+                }
+                className="w-10 h-8 rounded border border-[var(--border)] cursor-pointer"
+              />
+              <input
+                type="text"
+                value={selectedOverlay.color}
+                onChange={(e) =>
+                  handleUpdateText(selectedTextId!, { color: e.target.value })
+                }
+                className="flex-1 px-2 py-1 text-xs rounded border border-[var(--border)] bg-[var(--bg)] text-[var(--text)] font-mono focus:outline-none focus:ring-2 focus:ring-film-500"
+                placeholder="#ffffff"
+                aria-label="Hex color input"
+              />
+            </div>
+          </div>
+
+          {/* Font Weight */}
+          <div>
+            <legend className="text-xs text-[var(--muted)] font-medium mb-1 block">
+              Weight
+            </legend>
+            <div className="grid grid-cols-3 gap-1">
+              {(["normal", "bold", "900"] as const).map((weight) => (
+                <button
+                  key={weight}
+                  type="button"
+                  onClick={() =>
+                    handleUpdateText(selectedTextId!, { fontWeight: weight })
+                  }
+                  className={`px-2 py-1.5 text-xs rounded border transition-colors ${
+                    selectedOverlay.fontWeight === weight
+                      ? "border-film-500 bg-film-600/10 text-film-400"
+                      : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--border)]"
+                  }`}
+                  style={{
+                    fontWeight: weight === "normal" ? 400 : weight === "bold" ? 700 : 900,
+                  }}
+                >
+                  {weight === "900" ? "Heavy" : weight.charAt(0).toUpperCase() + weight.slice(1)}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ThumbnailStrip.tsx b/src/components/ThumbnailStrip.tsx
index 90cc5f3c..22c1b5e7 100644
--- a/src/components/ThumbnailStrip.tsx
+++ b/src/components/ThumbnailStrip.tsx
@@ -144,6 +144,7 @@ export default function ThumbnailStrip({
       generateThumbnails();
     }
     return () => {
+      // Increment ref to invalidate any pending async operations
       lastRunIdRef.current++;
       revokeAllObjectUrls();
     };
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index d1f2854b..0fb4429e 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useVideoEditor } from "@/hooks/useVideoEditor";
+import { TextOverlay } from "@/lib/types";
 import FileUpload from "./FileUpload";
 import VideoPreview from "./VideoPreview";
 import ThumbnailStrip from "./ThumbnailStrip";
@@ -9,6 +10,7 @@ import PresetSelector from "./PresetSelector";
 import FramingControl from "./FramingControl";
 import TrimControl from "./TrimControl";
 import RotateControl from "./RotateControl";
+import TextControls from "./TextControls";
 import AudioSpeedControl from "./AudioSpeedControl";
 import FormatSelector from "./FormatSelector";
 import ExportSettings from "./ExportSettings";
@@ -18,7 +20,7 @@ import ImageOverlay from "./ImageOverlay"
 
 import { cn } from "@/lib/utils";
 import {
-  Layers, Crop, Scissors, RotateCw, Volume2,
+  Layers, Crop, Scissors, RotateCw, Volume2, Type,
   SlidersHorizontal, Zap, AlertTriangle, Github, Copy
 } from "lucide-react";
 import OnboardingTour from "./OnboardingTour";
@@ -232,10 +234,12 @@ export default function VideoEditor() {
 
   const [copied, setCopied] = useState(false);
   const [shareCopied, setShareCopied] = useState(false);
+  const [selectedTextId, setSelectedTextId] = useState<string | null>(null);
   const [openSections, setOpenSections] = useState({
     resize: true,
     trim: false,
     rotation: false,
+    text: false,
     audio: false,
     export: false,
   });
@@ -244,6 +248,16 @@ export default function VideoEditor() {
     setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const downloadRef = useRef<HTMLDivElement>(null);
 
+  /**
+   * Updates a text overlay property and syncs with recipe.
+   */
+  const handleUpdateTextOverlay = (id: string, updates: Partial<TextOverlay>) => {
+    const updatedOverlays = (recipe.textOverlays || []).map((overlay) =>
+      overlay.id === id ? { ...overlay, ...updates } : overlay
+    );
+    updateRecipe({ textOverlays: updatedOverlays });
+  };
+
   const handleCopyLink = () => {
     if (typeof window === "undefined") return;
     navigator.clipboard.writeText(window.location.href).then(() => {
@@ -344,7 +358,14 @@ export default function VideoEditor() {
 
               {file && (
                 <div className="mt-4 animate-fade-in">
-                  <VideoPreview file={file} recipe={recipe} videoRef={videoRef} />
+                  <VideoPreview
+                    file={file}
+                    recipe={recipe}
+                    videoRef={videoRef}
+                    selectedTextId={selectedTextId}
+                    onSelectText={setSelectedTextId}
+                    onUpdateText={handleUpdateTextOverlay}
+                  />
 
                   <div className="mt-3">
                     <ThumbnailStrip
@@ -397,6 +418,22 @@ export default function VideoEditor() {
                   >
                     <RotateControl recipe={recipe} onChange={updateRecipe} />
                   </AccordionSection>
+
+                  <AccordionSection
+                    id="text"
+                    icon={<Type size={12} />}
+                    title="Text Overlay"
+                    isOpen={openSections.text}
+                    onToggle={() => toggleSection("text")}
+                    delay={110}
+                  >
+                    <TextControls
+                      recipe={recipe}
+                      onChange={updateRecipe}
+                      selectedTextId={selectedTextId}
+                      onSelectText={setSelectedTextId}
+                    />
+                  </AccordionSection>
                 </div>
                 <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6">
                   <AccordionSection
diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index 4e6f7e9d..0f20882c 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -2,24 +2,40 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback, RefObject } from "react";
-import { EditRecipe } from "@/lib/types";
+import { EditRecipe, TextOverlay } from "@/lib/types";
 import { getPresetById } from "@/lib/presets";
 import { cn } from "@/lib/utils";
 import { Camera } from "lucide-react";
 import ComparisonPreview from "./ComparisonPreview";
+import DraggableTextOverlays from "./DraggableTextOverlays";
 
 interface Props {
   file: File | null;
   recipe?: EditRecipe;
   videoRef: RefObject<HTMLVideoElement | null>;
+  selectedTextId?: string | null;
+  onSelectText?: (id: string | null) => void;
+  onUpdateText?: (id: string, updates: Partial<TextOverlay>) => void;
 }
 
-export default function VideoPreview({ file, recipe, videoRef }: Props) {
+export default function VideoPreview({
+  file,
+  recipe,
+  videoRef,
+  selectedTextId = null,
+  onSelectText,
+  onUpdateText,
+}: Props) {
   const lastId = useRef(0);
   const urlRef = useRef<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [showOverlay, setShowOverlay] = useState(false);
   const [showComparison, setShowComparison] = useState(false);
+  const [containerDimensions, setContainerDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const previewContainerRef = useRef<HTMLDivElement>(null);
   const onLoadedRef = useRef<(() => void) | null>(null);
 
   const handleGrabFrame = useCallback(() => {
@@ -108,6 +124,25 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
     videoRef.current.playbackRate = recipe.speed;
   }, [recipe, videoRef]);
 
+  /**
+   * Track preview container dimensions for text overlay positioning.
+   */
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (previewContainerRef.current) {
+        const rect = previewContainerRef.current.getBoundingClientRect();
+        setContainerDimensions({
+          width: rect.width,
+          height: rect.height,
+        });
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+
   const overlay = (() => {
     if (!recipe || !showOverlay) return null;
 
@@ -180,6 +215,7 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
   return (
     <>
       <div
+        ref={previewContainerRef}
         role="group"
         className="relative w-full rounded-lg overflow-hidden bg-[#0a0a0a] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-film-500"
         tabIndex={0}
@@ -236,6 +272,18 @@ export default function VideoPreview({ file, recipe, videoRef }: Props) {
           </div>
         )}
 
+        {/* Draggable Text Overlays */}
+        {recipe && !isLoading && containerDimensions.width > 0 && (
+          <DraggableTextOverlays
+            recipe={recipe}
+            containerWidth={containerDimensions.width}
+            containerHeight={containerDimensions.height}
+            selectedTextId={selectedTextId ?? null}
+            onSelectText={onSelectText || (() => {})}
+            onUpdateText={onUpdateText || (() => {})}
+          />
+        )}
+
         {/* Toggle button */}
         {recipe && !isLoading && (
           <button
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index f838e8a2..e713f779 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -22,5 +22,6 @@ export const DEFAULT_RECIPE: EditRecipe = {
   denoise: false,
   soundOnCompletion: false,
   normalizeAudio: false,
+  textOverlays: [],
   version: RECIPE_VERSION,
 };
diff --git a/src/lib/ffmpeg.ts b/src/lib/ffmpeg.ts
index 94c2ddb3..1e4978bf 100644
--- a/src/lib/ffmpeg.ts
+++ b/src/lib/ffmpeg.ts
@@ -2,6 +2,7 @@ import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { fetchFile, toBlobURL } from "@ffmpeg/util";
 import { EditRecipe, ExportResult, BackgroundMusicOptions, ImageOverlayOptions } from "./types";
 import { getPresetById } from "./presets";
+import { buildTextFilter } from "./text-overlay";
 import { simd } from "wasm-feature-detect";
 
 const CORE_BASE_URL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
@@ -143,6 +144,13 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
   filters.push(
     `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`
   );
+
+  // Add text overlays
+  const textOverlays = recipe.textOverlays || [];
+  textOverlays.forEach((overlay) => {
+    filters.push(buildTextFilter(overlay, targetW, targetH));
+  });
+
   return filters.join(",");
 }
 
diff --git a/src/lib/text-overlay.ts b/src/lib/text-overlay.ts
new file mode 100644
index 00000000..94c22601
--- /dev/null
+++ b/src/lib/text-overlay.ts
@@ -0,0 +1,89 @@
+import { TextOverlay } from "./types";
+
+/**
+ * Generates a unique ID for a text overlay.
+ */
+export function generateTextOverlayId(): string {
+  return `text-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/**
+ * Creates a default text overlay with sensible defaults.
+ */
+export function createDefaultTextOverlay(): TextOverlay {
+  return {
+    id: generateTextOverlayId(),
+    text: "Enter text",
+    x: 50, // Centered horizontally
+    y: 20, // Near top
+    fontSize: 48,
+    color: "#ffffff",
+    fontWeight: "normal",
+  };
+}
+
+/**
+ * Calculates the position of a text overlay relative to the preview container.
+ * @param percentX - Horizontal position as percentage (0-100)
+ * @param percentY - Vertical position as percentage (0-100)
+ * @param containerWidth - Width of the preview container in pixels
+ * @param containerHeight - Height of the preview container in pixels
+ */
+export function getTextPixelPosition(
+  percentX: number,
+  percentY: number,
+  containerWidth: number,
+  containerHeight: number
+): { left: number; top: number } {
+  return {
+    left: (percentX / 100) * containerWidth,
+    top: (percentY / 100) * containerHeight,
+  };
+}
+
+/**
+ * Converts pixel position back to percentage within the container.
+ */
+export function getTextPercentPosition(
+  pixelX: number,
+  pixelY: number,
+  containerWidth: number,
+  containerHeight: number
+): { x: number; y: number } {
+  return {
+    x: Math.max(0, Math.min(100, (pixelX / containerWidth) * 100)),
+    y: Math.max(0, Math.min(100, (pixelY / containerHeight) * 100)),
+  };
+}
+
+/**
+ * Generates a drawText FFmpeg filter for a single text overlay.
+ * Escapes special characters and positions text on the output video.
+ */
+export function buildTextFilter(
+  overlay: TextOverlay,
+  targetWidth: number,
+  targetHeight: number
+): string {
+  // Escape special characters for FFmpeg drawtext filter
+  const escapedText = overlay.text
+    .replace(/\\/g, "\\\\")
+    .replace(/'/g, "\\'")
+    .replace(/:/g, "\\:");
+
+  // Convert percentage position to pixel position
+  const pixelX = Math.round((overlay.x / 100) * targetWidth);
+  const pixelY = Math.round((overlay.y / 100) * targetHeight);
+
+  // Build the drawtext filter with proper escaping
+  // Using 'fontsize' and 'fontcolor' parameters
+  // Note: Font file path may not be available in all environments,
+  // so we rely on the system default font
+  return `drawtext=text='${escapedText}':x=${pixelX}:y=${pixelY}:fontsize=${overlay.fontSize}:fontcolor=${overlay.color}:fontweight=${
+    overlay.fontWeight === "900"
+      ? "bold"
+      : overlay.fontWeight === "bold"
+      ? "bold"
+      : "normal"
+  }`;
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 2014d039..21fc4f2f 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,5 +1,18 @@
 export const RECIPE_VERSION = 1;
 
+/**
+ * Text overlay data structure for rendering custom text on videos.
+ */
+export interface TextOverlay {
+  id: string;
+  text: string;
+  x: number; // Percentage (0-100) from left
+  y: number; // Percentage (0-100) from top
+  fontSize: number; // In pixels
+  color: string; // Hex color
+  fontWeight: "normal" | "bold" | "900";
+}
+
 export interface EditRecipe {
   preset: string;
   customWidth: number;
@@ -19,6 +32,7 @@ export interface EditRecipe {
   contrast: number;
   saturation: number;
   soundOnCompletion: boolean;
+  textOverlays: TextOverlay[];
   version: number;
 }
 
@@ -86,6 +100,7 @@ export function isValidRecipe(value: unknown): value is EditRecipe {
   if (typeof v.contrast !== "number" || !isFinite(v.contrast)) return false;
   if (typeof v.saturation !== "number" || !isFinite(v.saturation)) return false;
   if (typeof v.soundOnCompletion !== "boolean") return false;
+  if (!Array.isArray(v.textOverlays)) return false;
 
   return true;
 }

From aff28bd1a0769bb54e3bc016e13d0b272002b421 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 11/13] fix: prevent onboarding tour crash during step
 transitions (#1032)

---
 src/components/OnboardingTour.tsx | 212 +++++++++++++++++++++---------
 1 file changed, 152 insertions(+), 60 deletions(-)

diff --git a/src/components/OnboardingTour.tsx b/src/components/OnboardingTour.tsx
index 5bb9ecdb..7a4f077c 100644
--- a/src/components/OnboardingTour.tsx
+++ b/src/components/OnboardingTour.tsx
@@ -18,30 +18,34 @@ const TOUR_STEPS: TourStep[] = [
   {
     targetId: "upload-zone",
     title: "Drop your video here",
-    description: "Click to browse or drag and drop a video file to get started.",
+    description:
+      "Click to browse or drag and drop a video file to get started.",
     position: "right",
   },
   {
     targetId: "preset-selector",
     title: "Pick an output format",
-    description: "Choose a preset optimised for your platform — Instagram, YouTube, TikTok and more.",
+    description:
+      "Choose a preset optimised for your platform — Instagram, YouTube, TikTok and more.",
     position: "left",
   },
   {
-    targetId: "preset-selector",
+    targetId: "trim",
     title: "Trim & adjust",
-    description: "After uploading, set in/out points and tweak colour in the controls that appear on the left.",
+    description:
+      "After uploading, set in/out points and tweak colour in the controls that appear on the left.",
     position: "left",
   },
   {
     targetId: "export-button",
     title: "Export your video",
-    description: "Click Export (or press ⌘↵) to process your video locally — nothing ever leaves your device.",
+    description:
+      "Click Export (or press ⌘↵) to process your video locally — nothing ever leaves your device.",
     position: "top",
   },
 ];
 
-const PADDING = 12; // spotlight padding around target element
+const PADDING = 12;
 const TOOLTIP_OFFSET = 16;
 
 interface Rect {
@@ -54,7 +58,7 @@ interface Rect {
 function getTooltipStyle(
   rect: Rect,
   position: TourStep["position"],
-  tooltipRef: React.RefObject<HTMLDivElement | null>
+  tooltipRef: React.RefObject<HTMLDivElement | null>,
 ): React.CSSProperties {
   const tooltip = tooltipRef.current;
   const tw = tooltip?.offsetWidth ?? 320;
@@ -73,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 {
@@ -123,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}
@@ -154,7 +162,15 @@ interface TooltipProps {
   tooltipRef: React.RefObject<HTMLDivElement | null>;
 }
 
-function Tooltip({ step, stepIndex, totalSteps, rect, onNext, onSkip, tooltipRef }: TooltipProps) {
+function Tooltip({
+  step,
+  stepIndex,
+  totalSteps,
+  rect,
+  onNext,
+  onSkip,
+  tooltipRef,
+}: TooltipProps) {
   const style = getTooltipStyle(rect, step.position, tooltipRef);
   const isLast = stepIndex === totalSteps - 1;
 
@@ -172,7 +188,6 @@ function Tooltip({ step, stepIndex, totalSteps, rect, onNext, onSkip, tooltipRef
       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"
@@ -181,12 +196,12 @@ function Tooltip({ step, stepIndex, totalSteps, rect, onNext, onSkip, tooltipRef
       </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>
@@ -198,9 +213,12 @@ function Tooltip({ step, stepIndex, totalSteps, rect, onNext, onSkip, tooltipRef
           >
             Skip tour
           </button>
+
           <button
             onClick={onNext}
-            ref={(el) => { el?.focus(); }}
+            ref={(el) => {
+              el?.focus();
+            }}
             className="px-4 py-2 rounded-lg text-sm font-medium
               bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700
               text-white transition-colors focus-visible:outline focus-visible:outline-2
@@ -218,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(() => {
@@ -227,91 +247,160 @@ export default function OnboardingTour() {
     setVisible(false);
   }, []);
 
-  const measureTarget = useCallback((id: string): Promise<Rect | null> => {
-    return new Promise((resolve) => {
-      const attempt = (tries: number) => {
-        const el = document.getElementById(id);
-        if (el) {
-          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
-          return;
-        }
-        if (tries <= 0) {
-          resolve(null);
-          return;
-        }
-        setTimeout(() => attempt(tries - 1), 300);
-      };
-      attempt(5);
-    });
-  }, []);
+  const measureTarget = useCallback(
+    (id: string): Promise<Rect | null> => {
+      return new Promise((resolve) => {
+        const attempt = (tries: number) => {
+          const el = document.getElementById(id);
+
+          if (el) {
+            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);
+
+            return;
+          }
+
+          if (tries <= 0) {
+            resolve(null);
+            return;
+          }
+
+          setTimeout(() => attempt(tries - 1), 300);
+        };
+
+        attempt(5);
+      });
+    },
+    [],
+  );
 
-  // Initialise on mount
   useEffect(() => {
     if (localStorage.getItem(TOUR_KEY)) return;
+
     const t = setTimeout(async () => {
-      const rect = await measureTarget(TOUR_STEPS[0]?.targetId ?? "");
+      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)
   useEffect(() => {
     if (!visible) return;
+
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
     }
+
     if (!currentStep) {
       dismiss();
       return;
     }
-    measureTarget(currentStep.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();
+
+    let retryCount = 0;
+    const maxRetries = 10;
+
+    let retryTimer: number | null = null;
+
+    const tryMeasure = () => {
+      measureTarget(currentStep.targetId).then((rect) => {
+        if (rect) {
+          setTargetRect(rect);
+
+          setTimeout(() => {
+            tooltipRef.current?.focus();
+          }, 50);
+
+          retryCount = 0;
+        } else if (retryCount < maxRetries) {
+          retryCount++;
+
+          retryTimer = window.setTimeout(
+            tryMeasure,
+            500,
+          );
         }
+      });
+    };
+
+    tryMeasure();
+
+    return () => {
+      if (retryTimer !== null) {
+        clearTimeout(retryTimer);
       }
-    });
-  }, [stepIndex, visible, measureTarget, dismiss, currentStep]);
+    };
+  }, [
+    stepIndex,
+    visible,
+    measureTarget,
+    dismiss,
+    currentStep,
+  ]);
 
-  // Re-measure on resize
   useEffect(() => {
     if (!visible) return;
+
     const onResize = () => {
-      measureTarget(TOUR_STEPS[stepIndex]?.targetId ?? "").then(setTargetRect);
+      measureTarget(
+        TOUR_STEPS[stepIndex]?.targetId ?? "",
+      ).then(setTargetRect);
     };
+
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
   }, [visible, stepIndex, measureTarget]);
 
-  // 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);
+
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
   }, [visible, stepIndex, dismiss]);
 
-  if (!visible || !targetRect || !currentStep) return null;
+  if (!visible || !targetRect || !currentStep) {
+    return null;
+  }
 
   return createPortal(
     <FocusTrap
@@ -338,14 +427,17 @@ export default function OnboardingTour() {
           totalSteps={TOUR_STEPS.length}
           rect={targetRect}
           onNext={() => {
-            if (stepIndex < TOUR_STEPS.length - 1) setStepIndex((i) => i + 1);
-            else dismiss();
+            if (stepIndex < TOUR_STEPS.length - 1) {
+              setStepIndex((i) => i + 1);
+            } else {
+              dismiss();
+            }
           }}
           onSkip={dismiss}
           tooltipRef={tooltipRef}
         />
       </div>
     </FocusTrap>,
-    document.body
+    document.body,
   );
-}
+}
\ No newline at end of file

From 90c0e3b05d133e313a150dc67f3bca73d5cc8153 Mon Sep 17 00:00:00 2001
From: Arsh Sharma <arsharma9966@gmail.com>
Date: Sun, 24 May 2026 09:43:03 +0530
Subject: [PATCH 12/13] fix: improve border and surface contrast in light mode
 (#1031)

- --border: #e2e8f0 -> #cbd5e1 (darker, more visible borders)
- --surface: #f8fafc -> #f1f5f9 (slightly more contrast on surfaces)
- Dark mode tokens unchanged
- Improves WCAG contrast compliance for UI elements in light mode

Closes #1018
---
 src/app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ae6d78e5..0bab4371 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,8 +5,8 @@
 /* ── Light mode tokens ── */
 :root {
   --bg: #ffffff;
-  --surface: #f8fafc;
-  --border: #e2e8f0;
+  --surface: #f1f5f9;
+  --border: #cbd5e1;
   --text: #0f172a;
   --muted: #64748b;
   --accent: #3b82f6;

From 7f0fe927f385ca03cfc6eeadf2df745d1683e4af Mon Sep 17 00:00:00 2001
From: Abhijeet Ranjan <abhijeet.r1907@gmail.com>
Date: Sun, 24 May 2026 15:29:09 +0530
Subject: [PATCH 13/13] fix: improve color palette and visual consistency
 (closes #616) (#989)

Co-authored-by: zack34567 <varun.ch@gmail.com>
---
 src/app/contact/page.tsx             | 12 ++---
 src/app/globals.css                  | 65 +++++++++++++++++++++++-----
 src/app/layout.tsx                   |  4 +-
 src/app/page.tsx                     |  2 +-
 src/components/AudioSpeedControl.tsx |  4 +-
 src/components/DownloadResult.tsx    | 14 +++---
 src/components/ExportSettings.tsx    |  4 +-
 src/components/FileUpload.tsx        | 24 +++++-----
 src/components/Footer.tsx            | 20 ++++-----
 src/components/ImageOverlay.tsx      | 42 +++++++++---------
 src/components/ScrollToTop.tsx       |  4 +-
 src/components/ThemeToggle.tsx       |  7 +--
 src/components/ThumbnailStrip.tsx    | 56 +++++++++++++-----------
 src/components/TrimControl.tsx       | 10 +++--
 src/components/VideoEditor.tsx       | 10 ++---
 src/components/VideoPreview.tsx      | 30 ++++++-------
 src/components/WaveformCanvas.tsx    |  4 +-
 src/components/components.tsx        | 48 +++++++++-----------
 tailwind.config.ts                   | 22 +++++-----
 vitest.config.ts                     |  5 +++
 vitest.setup.ts                      | 14 ++++++
 21 files changed, 234 insertions(+), 167 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 224ae2f1..13b04261 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -6,11 +6,11 @@ export const metadata: Metadata = {
 };
 export default function ContactPage() {
   return (
-    <main className="min-h-screen bg-black text-white p-8">
+    <main className="min-h-screen bg-[var(--bg)] text-[var(--text)] p-8">
       <div className="mb-8">
         <Link 
           href="/" 
-          className="inline-flex items-center text-sm opacity-70 hover:opacity-100 transition-opacity"
+          className="inline-flex items-center text-sm text-[var(--muted)] hover:text-[var(--text)] transition-colors"
         >
           &larr; Back to Reframe
         </Link>
@@ -27,11 +27,11 @@ export default function ContactPage() {
             href="https://github.com/magic-peach/reframe/issues"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-lg font-semibold underline hover:opacity-80 transition-opacity"
+            className="text-lg font-semibold text-[var(--accent)] underline hover:text-[var(--accent-hover)] transition-colors"
           >
             GitHub Issues
           </a>
-          <p className="opacity-70 mt-1">For bug reports and feature requests.</p>
+          <p className="text-[var(--muted)] mt-1">For bug reports and feature requests.</p>
         </div>
 
         <div>
@@ -39,11 +39,11 @@ export default function ContactPage() {
             href="https://github.com/magic-peach/reframe/discussions"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-lg font-semibold underline hover:opacity-80 transition-opacity"
+            className="text-lg font-semibold text-[var(--accent)] underline hover:text-[var(--accent-hover)] transition-colors"
           >
             GitHub Discussions
           </a>
-          <p className="opacity-70 mt-1">For questions, ideas, and general help.</p>
+          <p className="text-[var(--muted)] mt-1">For questions, ideas, and general help.</p>
         </div>
       </div>
     </main>
diff --git a/src/app/globals.css b/src/app/globals.css
index 0bab4371..408e2d8e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,6 +11,9 @@
   --muted: #64748b;
   --accent: #3b82f6;
   --accent-hover: #1d4ed8;
+  --accent-muted: rgba(59, 130, 246, 0.12);
+  --radius: 10px;
+  --shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
   --film-600: #e63946;
   --film-400: #ff6b6b;
   --warning: #f59e0b;
@@ -22,13 +25,16 @@
 
 /* ── Dark mode tokens ── */
 .dark {
-  --bg: #0f172a;
-  --surface: #1e293b;
-  --border: #334155;
-  --text: #f1f5f9;
-  --muted: #94a3b8;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
+  --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;
@@ -47,6 +53,9 @@
 
   --accent: #FFFF00;
   --accent-hover: #FFFF00;
+  --accent-muted: rgba(255, 255, 0, 0.22);
+  --radius: 10px;
+  --shadow: none;
 
   --error: #FF6666;
   --success: #66FF66;
@@ -82,9 +91,45 @@
 body {
   background-color: var(--bg);
   color: var(--text);
+  line-height: 1.6;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text);
+  font-weight: 700;
+}
+
+p,
+li {
+  color: color-mix(in srgb, var(--text) 95%, transparent);
+}
+
+button {
+  transition: all 0.2s ease;
+}
+
+input,
+select,
+textarea {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+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,
@@ -95,7 +140,7 @@ body {
 }
 
 :focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--accent-muted);
+  border-radius: var(--radius);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 593f68c8..129528b2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -70,7 +70,7 @@ export default function RootLayout({
       <body className="min-h-screen bg-[var(--bg)] text-[var(--text)] antialiased">
         
       <a href="#main-content"
-          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-black"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-[var(--radius)] focus:border focus:border-[var(--border)] focus:bg-[var(--surface)] focus:px-4 focus:py-2 focus:text-[var(--text)]"
         >
           Skip to main content
         </a>
@@ -78,7 +78,7 @@ export default function RootLayout({
           <ErrorBoundary>
             <header
               role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--bg)]"
+              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-6 py-3 backdrop-blur"
             >
               <div className="flex items-center gap-2">
                 <BrandLogo size={24} />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5245ade9..381fbd80 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,7 @@ export default function Home() {
         href="https://github.com/magic-peach/reframe"
         target="_blank"
         rel="noopener noreferrer"
-        className="hidden min-[300px]:flex fixed top-4 right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:shadow-[0_0_10px_rgba(255,255,255,0.15)] hover:bg-white/10"
+        className="hidden min-[300px]:flex fixed top-4 right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
       >
         ⭐ Star on GitHub
       </a>
diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx
index bbeb93c8..dd6c6007 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/src/components/AudioSpeedControl.tsx
@@ -146,7 +146,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       )}
 
       {recipe.keepAudio && (recipe.trimStart !== 0 || recipe.trimEnd !== null) && (
-        <div role="note" className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-700 leading-relaxed flex items-start gap-2 animate-fade-in">
+        <div role="note" className="mt-3 p-3 bg-[var(--accent-muted)] border border-[var(--border)] rounded text-sm text-[var(--text)] leading-relaxed flex items-start gap-2 animate-fade-in">
           <AlertTriangle size={12} aria-hidden="true" className="shrink-0 mt-0.5" />
           <p>
             Note: If audio doesn&apos;t start within the selected range, the output will be silent.
@@ -155,4 +155,4 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index 1f61081c..bfc039ff 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -80,7 +80,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           <label htmlFor="filename-input" className="text-[var(--muted)] font-heading font-semibold uppercase tracking-wider">
             Filename
           </label>
-          <span className={cn("transition-colors", name.length >= 100 ? "text-red-500 font-medium" : "text-[var(--muted)]")}>
+          <span className={cn("transition-colors", name.length >= 100 ? "text-[var(--error)] font-medium" : "text-[var(--muted)]")}>
             {100 - name.length} chars remaining
           </span>
         </div>
@@ -93,7 +93,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
             maxLength={100}
             className={cn(
               "flex-1 px-3 py-2.5 bg-[var(--bg)] border rounded-lg text-sm transition-colors text-[var(--text)] placeholder:text-[var(--muted)]",
-              !isValid && name.length > 0 ? "border-red-500 focus:outline-red-500 focus:ring-1 focus:ring-red-500" : "border-[var(--border)] focus:outline-film-500"
+              !isValid && name.length > 0 ? "border-[var(--error)] focus:outline-[var(--error)] focus:ring-1 focus:ring-[var(--error)]" : "border-[var(--border)] focus:outline-[var(--accent)]"
             )}
             placeholder="Enter filename"
           />
@@ -102,7 +102,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           </span>
         </div>
         {!isValid && name.length > 0 && (
-          <p className="text-xs text-red-500 px-1 flex items-center gap-1.5 mt-1 animate-fade-in">
+          <p className="text-xs text-[var(--error)] px-1 flex items-center gap-1.5 mt-1 animate-fade-in">
             <AlertCircle size={12} />
             Filename contains invalid characters (\ / : * ? &quot; &lt; &gt; |)
           </p>
@@ -116,7 +116,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
-              ? "bg-film-600 text-white hover:bg-film-700 hover:scale-[1.01] active:scale-[0.99] cursor-pointer" 
+              ? "bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] hover:scale-[1.02] active:scale-[0.99] cursor-pointer"
               : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
           )}
           onClick={(e) => {
@@ -136,7 +136,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Preview video in new tab"
-          className="flex items-center justify-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:bg-[var(--bg)] transition-colors"
+          className="flex items-center justify-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
         >
           Preview
         </a>
@@ -145,7 +145,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}
-          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:bg-[var(--bg)] transition-colors"
+          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
         >
           <RotateCcw size={14} aria-hidden="true" />
           New
@@ -155,7 +155,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Share on X (opens in a new tab)"
-          className="flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 border border-[var(--border)] text-[var(--text)] text-sm font-heading font-bold uppercase tracking-wide rounded-lg hover:bg-[var(--bg)] transition-colors"
+          className="flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 border border-[var(--border)] text-[var(--text)] text-sm font-heading font-bold uppercase tracking-wide rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-colors"
         >
           <Share2 size={15} aria-hidden="true" />
           Share on X
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 8b7f5286..6eee9b9b 100644
--- a/src/components/ExportSettings.tsx
+++ b/src/components/ExportSettings.tsx
@@ -112,7 +112,7 @@ export default function ExportSettings({
           </p>
 
           {isGif && (
-            <p className="text-xs text-amber-600 font-medium">
+            <p className="text-xs text-[var(--warning)] font-medium">
               ⚠ GIF files can be very large. Keep clips under 10 s for best results.
             </p>
           )}
@@ -176,7 +176,7 @@ export default function ExportSettings({
             className={cn(
               "text-xs",
               recipe.stabilization
-                ? "text-red-700 font-medium"
+                ? "text-[var(--error)] font-medium"
                 : "text-[var(--muted)]"
             )}
           >
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index d76845c5..f9f2127e 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -127,7 +127,7 @@ export default function FileUpload({
 
   // ── File info (shown after upload) ───────────────────
   const FileInfo = () => (
-    <div className="px-4 py-3 bg-film-50 border border-film-200 rounded-lg">
+    <div className="px-4 py-3 bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius)] shadow-[var(--shadow)]">
       <div className="flex flex-col lg:flex-row lg:items-center gap-3">
         <div className="flex items-start gap-3 flex-1 min-w-0">
           <div className="hidden lg:flex items-center justify-center w-9 h-9 rounded-lg bg-[var(--surface)] border border-[var(--border)] shrink-0">
@@ -136,18 +136,18 @@ export default function FileUpload({
           <Film size={18} className="lg:hidden text-film-600 shrink-0 mt-0.5" />
           <div className="flex-1 min-w-0">
             <div className="flex flex-wrap items-center gap-2 mb-0.5">
-              <p className="text-sm font-semibold text-film-700 truncate max-w-[320px] xl:max-w-[420px]">
+              <p className="text-sm font-semibold text-[var(--text)] truncate max-w-[320px] xl:max-w-[420px]">
                 {currentFile?.name}
               </p>
               {currentFile && (
-                <span className="px-2 py-0.5 bg-gray-700 text-white font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
+                <span className="px-2 py-0.5 bg-[var(--accent-muted)] text-[var(--text)] font-bold tracking-wider rounded text-[10px] uppercase shrink-0">
                   {currentFile.name.includes(".")
                     ? currentFile.name.split(".").pop()
                     : "VIDEO"}
                 </span>
               )}
             </div>
-            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
+            <div className="text-xs text-[var(--muted)] mt-1 space-y-0.5">
               <p>{formatBytes(currentFile?.size ?? 0)}</p>
               <p>
                 {duration > 0
@@ -168,12 +168,12 @@ export default function FileUpload({
         </button>
       </div>
 
-      <p className="text-xs text-gray-500 mt-3 break-words">
+      <p className="text-xs text-[var(--muted)] mt-3 break-words">
         Supports: MP4, MOV, AVI, MKV, WebM, and most video formats
       </p>
 
       {fileError && (
-        <p className="text-xs text-red-500 mt-2 font-medium">{fileError}</p>
+        <p className="text-xs text-[var(--error)] mt-2 font-medium">{fileError}</p>
       )}
 
       <input
@@ -212,7 +212,7 @@ export default function FileUpload({
         "group flex flex-col items-center justify-center gap-4 py-12 px-6",
         "border-2 border-dashed rounded-xl cursor-pointer transition-all duration-300 relative overflow-hidden",
         dragging
-          ? "border-film-500 bg-film-50/50 scale-[1.02] shadow-[0_0_40px_-10px_rgba(230,57,70,0.4)] ring-4 ring-film-500/30"
+          ? "border-[var(--accent)] bg-[var(--accent-muted)] scale-[1.02] shadow-[var(--shadow)] ring-4 ring-[var(--accent-muted)]"
           : "border-[var(--border)] bg-[var(--bg)] hover:border-film-400 hover:bg-film-50/40"
       )}
     >
@@ -239,12 +239,12 @@ export default function FileUpload({
         MP4 / MOV / AVI / WebM
       </div>
 
-      <p className="text-xs text-gray-500 text-center">
+      <p className="text-xs text-[var(--muted)] text-center">
         Supports: MP4, MOV, AVI, MKV, WebM, and most video formats up to 2GB
       </p>
 
       {fileError && (
-        <p className="text-sm text-red-500 text-center">{fileError}</p>
+        <p className="text-sm text-[var(--error)] text-center">{fileError}</p>
       )}
 
       <input
@@ -296,12 +296,12 @@ export default function FileUpload({
       {/* ── Normal upload UI ── */}
       <div className="space-y-2">
         {error && (
-          <p role="alert" className="text-sm text-red-500">
+          <p role="alert" className="text-sm text-[var(--error)]">
             {error}
           </p>
         )}
         {warning && (
-          <p role="alert" className="text-sm text-yellow-500">
+          <p role="alert" className="text-sm text-[var(--warning)]">
             {warning}
           </p>
         )}
@@ -309,4 +309,4 @@ export default function FileUpload({
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d055027c..c6006f0d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -41,7 +41,7 @@ export default function Footer() {
             ].map((tag) => (
               <span
                 key={tag.label}
-                className="flex items-center gap-1.5 px-3 py-1 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-semibold tracking-wide uppercase transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:border-[var(--accent)] hover:shadow-[0_0_10px_rgba(255,255,255,0.08)] cursor-pointer select-none"
+                className="flex items-center gap-1.5 px-3 py-1 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-semibold tracking-wide uppercase transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)] cursor-pointer select-none"
               >
                 {tag.icon} {tag.label}
               </span>
@@ -59,19 +59,19 @@ export default function Footer() {
               href="https://github.com/magic-peach/reframe"
               target="_blank"
               rel="noopener"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
             >
               GitHub
             </a>
             <Link
               href="/contact"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
             >
               Contact
             </Link>
             <Link
               href="/privacy"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
             >
               Privacy Policy
             </Link>
@@ -102,7 +102,7 @@ export default function Footer() {
             ) : (
               <div
                 id="updates-signup-form"
-                className="w-full sm:w-72 px-4 flex items-center bg-[var(--surface)] border border-blue-500/50 rounded-lg transition-all duration-500 ease-in-out"
+                className="w-full sm:w-72 px-4 flex items-center bg-[var(--surface)] border border-[var(--accent)] rounded-lg transition-all duration-500 ease-in-out"
               >
                 <form
                   aria-label="Updates signup form"
@@ -122,7 +122,7 @@ export default function Footer() {
                   <button
                     aria-label="Submit email for updates"
                     type="submit"
-                    className="text-blue-500 hover:text-blue-400 p-1"
+                    className="text-[var(--accent)] hover:text-[var(--accent-hover)] p-1"
                   >
                     <ArrowRight size={16} aria-hidden="true" />
                   </button>
@@ -143,7 +143,7 @@ export default function Footer() {
                 href="https://github.com/magic-peach/reframe"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
                 aria-label="Open Reframe GitHub repository"
               >
                 <Github
@@ -157,7 +157,7 @@ export default function Footer() {
                 href="https://twitter.com"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
                 aria-label="Open Twitter"
               >
                 <TwitterIcon
@@ -171,7 +171,7 @@ export default function Footer() {
                 href="https://instagram.com"
                 target="_blank"
                 rel="noopener"
-                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--border)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
+                className="p-2.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] transition-all hover:-translate-y-1 active:scale-95 flex items-center justify-center group"
                 aria-label="Open Instagram"
               >
                 <Instagram
@@ -189,7 +189,7 @@ export default function Footer() {
       <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-[var(--border)] flex flex-col md:flex-row justify-between items-center gap-4 text-[9px] font-bold uppercase tracking-[0.3em] opacity-40">
         <p>© {new Date().getFullYear()} Reframe · MIT License</p>
         <div className="flex items-center gap-2">
-          <span className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]" />
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)] shadow-[0_0_8px_var(--accent)]" />
           Processing happens locally
         </div>
       </div>
diff --git a/src/components/ImageOverlay.tsx b/src/components/ImageOverlay.tsx
index 1f74359b..9af09391 100644
--- a/src/components/ImageOverlay.tsx
+++ b/src/components/ImageOverlay.tsx
@@ -59,7 +59,7 @@ export default function ImageOverlayPanel({
   const isSolidOpacity = overlayOpacity > 75;
 
   return (
-    <div className="w-full text-[11px] text-white space-y-3">
+    <div className="w-full text-[11px] text-[var(--text)] space-y-3">
       
       {/* Side-by-Side Area */}
       <div className="flex gap-2.5 items-center w-full">
@@ -67,8 +67,8 @@ export default function ImageOverlayPanel({
         {/* Left Side: Dynamic Upload / Preview Square */}
         <label className={`w-14 h-11 shrink-0 rounded-lg overflow-hidden flex flex-col items-center justify-center transition border ${
           overlayFile 
-            ? "border-[var(--border)] bg-black/40 pointer-events-none" 
-            : "border-dashed border-[#2d4266] hover:bg-white/5 text-[#c7d8f7] hover:text-white cursor-pointer"
+            ? "border-[var(--border)] bg-[var(--bg)] pointer-events-none"
+            : "border-dashed border-[var(--border)] hover:bg-[var(--accent-muted)] text-[var(--muted)] hover:text-[var(--text)] cursor-pointer"
         }`}>
           {thumbUrl ? (
             <Image
@@ -96,7 +96,7 @@ export default function ImageOverlayPanel({
         </label>
 
         {/* Right Side: Horizontal Details Card */}
-        <div className="flex-1 min-w-0 h-11 rounded-lg border border-[var(--border)] bg-[#121d30]/20 flex items-center justify-between px-3 gap-2.5">
+        <div className="flex-1 min-w-0 h-11 rounded-lg border border-[var(--border)] bg-[var(--bg)] flex items-center justify-between px-3 gap-2.5">
           {overlayFile ? (
             <>
               {/* File Info block */}
@@ -116,7 +116,7 @@ export default function ImageOverlayPanel({
                 type="button"
                 onClick={() => setOverlayFile(null)}
                 aria-label="Remove overlay image"
-                className="w-6 h-6 rounded flex items-center justify-center bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 transition shrink-0"
+                className="w-6 h-6 rounded flex items-center justify-center bg-[var(--error-bg)] hover:bg-[var(--error-hover)] text-[var(--error)] border border-[var(--error-border)] transition shrink-0"
               >
                 <Trash2 size={11} aria-hidden="true" />
               </button>
@@ -143,11 +143,11 @@ export default function ImageOverlayPanel({
                   onClick={() => setOverlayPosition(value)}
                   className={`rounded border py-0.5 text-center text-[10px] transition flex items-center justify-center gap-0.5 ${
                     overlayPosition === value
-                      ? "border-film-500 text-white bg-film-600/10"
-                      : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                      ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                      : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                   }`}
                 >
-                  <span className={overlayPosition === value ? "text-film-400" : "text-[var(--muted)]"}>
+                  <span className={overlayPosition === value ? "text-[var(--accent)]" : "text-[var(--muted)]"}>
                     {icon}
                   </span>
                   <span>{label}</span>
@@ -165,8 +165,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlaySize(100)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isSmallSize
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 Small
@@ -176,8 +176,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlaySize(250)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isMediumSize
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 Medium
@@ -187,8 +187,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlaySize(450)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isLargeSize
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 Large
@@ -205,8 +205,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlayOpacity(25)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isFaintOpacity
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 25%
@@ -216,8 +216,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlayOpacity(60)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isMediumOpacity
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 60%
@@ -227,8 +227,8 @@ export default function ImageOverlayPanel({
                 onClick={() => setOverlayOpacity(100)}
                 className={`rounded border py-0.5 text-center text-[10px] transition ${
                   isSolidOpacity
-                    ? "border-film-500 text-white bg-film-600/10"
-                    : "border-[var(--border)] text-[var(--muted)] hover:bg-white/5"
+                    ? "border-[var(--accent)] text-[var(--text)] bg-[var(--accent-muted)]"
+                    : "border-[var(--border)] text-[var(--muted)] hover:bg-[var(--accent-muted)]"
                 }`}
               >
                 100%
@@ -239,4 +239,4 @@ export default function ImageOverlayPanel({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
index 57bc329c..e2706342 100644
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -34,7 +34,7 @@ export default function ScrollToTop() {
       className="
         fixed bottom-5 right-5 z-50
         h-12 w-12 rounded-full
-        bg-black text-white shadow-lg
+        bg-[var(--accent)] text-white shadow-[var(--shadow)]
         flex items-center justify-center
         md:hidden
       "
@@ -42,4 +42,4 @@ export default function ScrollToTop() {
       ↑
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index b94b2b13..03e32bef 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -17,9 +17,10 @@ export function ThemeToggle() {
         bg-[var(--surface)]
         text-[var(--text)]
         border border-[var(--border)]
-        hover:opacity-90
-        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
-        transition-colors duration-200
+        hover:border-[var(--accent)] hover:bg-[var(--accent-muted)]
+        focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2
+        focus:ring-offset-[var(--bg)]
+        transition-all duration-200
       "
     >
       {isDark ? (
diff --git a/src/components/ThumbnailStrip.tsx b/src/components/ThumbnailStrip.tsx
index 22c1b5e7..f5094722 100644
--- a/src/components/ThumbnailStrip.tsx
+++ b/src/components/ThumbnailStrip.tsx
@@ -43,6 +43,10 @@ export default function ThumbnailStrip({
     objectUrlsRef.current = [];
   }, []);
 
+  const cancelThumbnailRun = useCallback(() => {
+    lastRunIdRef.current += 1;
+  }, []);
+
   const generateThumbnails = useCallback(async () => {
     if (!videoSrc || duration <= 0) return;
 
@@ -144,11 +148,10 @@ export default function ThumbnailStrip({
       generateThumbnails();
     }
     return () => {
-      // Increment ref to invalidate any pending async operations
-      lastRunIdRef.current++;
+      cancelThumbnailRun();
       revokeAllObjectUrls();
     };
-  }, [generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);
+  }, [cancelThumbnailRun, generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);
 
   const formatTime = (seconds: number) => {
     const m = Math.floor(seconds / 60);
@@ -239,11 +242,12 @@ export default function ThumbnailStrip({
       <style>{`
         .thumbnail-strip-wrapper {
           width: 100%;
-          background: #0d0d0f;
-          border: 1px solid #1e1e24;
-          border-radius: 10px;
+          background: var(--surface);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
           overflow: hidden;
           font-family: 'SF Mono', 'Fira Code', monospace;
+          box-shadow: var(--shadow);
         }
 
         .strip-header {
@@ -251,8 +255,8 @@ export default function ThumbnailStrip({
           align-items: center;
           gap: 12px;
           padding: 8px 14px;
-          background: #111115;
-          border-bottom: 1px solid #1e1e24;
+          background: var(--bg);
+          border-bottom: 1px solid var(--border);
         }
 
         .strip-label {
@@ -263,14 +267,14 @@ export default function ThumbnailStrip({
           font-weight: 600;
           letter-spacing: 0.08em;
           text-transform: uppercase;
-          color: #5a5a72;
+          color: var(--muted);
         }
 
         .strip-progress {
           position: relative;
           flex: 1;
           height: 3px;
-          background: #1e1e24;
+          background: var(--border);
           border-radius: 2px;
           overflow: hidden;
           display: flex;
@@ -282,7 +286,7 @@ export default function ThumbnailStrip({
           left: 0;
           top: 0;
           height: 100%;
-          background: linear-gradient(90deg, #4f6ef7, #a78bfa);
+          background: var(--accent);
           border-radius: 2px;
           transition: width 0.2s ease;
         }
@@ -291,14 +295,14 @@ export default function ThumbnailStrip({
           position: absolute;
           right: -28px;
           font-size: 9px;
-          color: #5a5a72;
+          color: var(--muted);
           white-space: nowrap;
         }
 
         .strip-meta {
           margin-left: auto;
           font-size: 10px;
-          color: #3a3a50;
+          color: var(--muted);
         }
 
         .strip-scroll-area {
@@ -306,7 +310,7 @@ export default function ThumbnailStrip({
           overflow-y: hidden;
           padding: 10px 10px 6px;
           scrollbar-width: thin;
-          scrollbar-color: #2a2a35 transparent;
+          scrollbar-color: var(--border) transparent;
         }
 
         .strip-scroll-area::-webkit-scrollbar {
@@ -318,7 +322,7 @@ export default function ThumbnailStrip({
         }
 
         .strip-scroll-area::-webkit-scrollbar-thumb {
-          background: #2a2a35;
+          background: var(--border);
           border-radius: 2px;
         }
 
@@ -331,7 +335,7 @@ export default function ThumbnailStrip({
           width: 106px;
           height: 60px;
           border-radius: 6px;
-          background: linear-gradient(90deg, #111115 25%, #1a1a22 50%, #111115 75%);
+          background: linear-gradient(90deg, var(--bg) 25%, var(--surface) 50%, var(--bg) 75%);
           background-size: 200% 100%;
           animation: shimmer 1.4s infinite;
           flex-shrink: 0;
@@ -382,14 +386,14 @@ export default function ThumbnailStrip({
         .thumb-btn:hover,
         .thumb-btn.hovered {
           transform: translateY(-3px) scale(1.04);
-          box-shadow: 0 8px 24px rgba(0,0,0,0.6);
-          outline-color: rgba(79, 110, 247, 0.5);
+          box-shadow: var(--shadow);
+          outline-color: var(--accent);
           z-index: 2;
         }
 
         .thumb-btn.active {
-          outline-color: #4f6ef7;
-          box-shadow: 0 0 0 2px #4f6ef7, 0 8px 20px rgba(79,110,247,0.3);
+          outline-color: var(--accent);
+          box-shadow: 0 0 0 2px var(--accent), var(--shadow);
           z-index: 3;
         }
 
@@ -407,9 +411,9 @@ export default function ThumbnailStrip({
           left: 0;
           right: 0;
           padding: 3px 4px 3px;
-          background: linear-gradient(transparent, rgba(0,0,0,0.85));
+          background: linear-gradient(transparent, var(--bg));
           font-size: 9px;
-          color: rgba(255,255,255,0.75);
+          color: var(--muted);
           text-align: center;
           letter-spacing: 0.04em;
           pointer-events: none;
@@ -417,7 +421,7 @@ export default function ThumbnailStrip({
         }
 
         .thumb-btn.active .thumb-time {
-          color: #a5b4fc;
+          color: var(--text);
         }
 
         .active-indicator {
@@ -427,8 +431,8 @@ export default function ThumbnailStrip({
           width: 6px;
           height: 6px;
           border-radius: 50%;
-          background: #4f6ef7;
-          box-shadow: 0 0 6px #4f6ef7;
+          background: var(--accent);
+          box-shadow: 0 0 6px var(--accent);
           animation: pulse-dot 1.5s ease-in-out infinite;
         }
 
@@ -439,4 +443,4 @@ export default function ThumbnailStrip({
       `}</style>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/TrimControl.tsx b/src/components/TrimControl.tsx
index 577dc1fa..aa064cd2 100644
--- a/src/components/TrimControl.tsx
+++ b/src/components/TrimControl.tsx
@@ -256,7 +256,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-label="Trim start time in seconds"
             aria-invalid={invalidStart}
             aria-describedby={invalidStart ? "trim-start-error" : undefined}
-            className={`${inputClass} ${invalidStart ? "border-red-500 focus:ring-red-400" : "border-[var(--border)]"}`}
+            className={`${inputClass} ${
+              invalidStart ? "border-[var(--error)]" : "border-[var(--border)]"
+            }`}
             placeholder="0"
           />
           {invalidStart && (
@@ -290,7 +292,9 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-label="Trim end time in seconds"
             aria-invalid={invalidEnd}
             aria-describedby={invalidEnd ? "trim-end-error" : undefined}
-            className={`${inputClass} ${invalidEnd ? "border-red-500 focus:ring-red-400" : "border-[var(--border)]"}`}
+            className={`${inputClass} ${
+              invalidEnd ? "border-[var(--error)]" : "border-[var(--border)]"
+            }`}
             placeholder={duration > 0 ? `${duration.toFixed(1)}` : "full length"}
           />
           {invalidEnd && (
@@ -313,7 +317,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
       )}
       {recipe.trimEnd !== null &&
         recipe.trimEnd - recipe.trimStart < MIN_CLIP_DURATION && (
-          <p className="text-[10px] text-red-500 font-heading">
+          <p className="text-[10px] text-[var(--error)] font-heading">
             Clip must be at least 0.1 seconds long.
           </p>
       )}
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 0fb4429e..d971fc7b 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -331,7 +331,7 @@ export default function VideoEditor() {
         paddingTop: 'clamp(0.5rem,2vw,0.75rem)',
       }}
     >
-      <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
+      <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-[var(--accent)] inline-block animate-pulse" />
       No login. No ads. 100% private.
     </div>
   </div>  
@@ -339,7 +339,7 @@ export default function VideoEditor() {
     className="flex flex-wrap justify-center text-center items-center gap-2 text-sm font-heading font-semibold uppercase tracking-widest text-[var(--muted)] pb-1"
     style={{ justifyContent: 'center', textAlign: 'center', margin: '0', width: 'auto' }}
   >
-    <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-400 inline-block animate-pulse" />
+    <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-[var(--accent)] inline-block animate-pulse" />
     No login. No ads. 100% private - your video never leaves your device.
   </div>
     </header>
@@ -605,7 +605,7 @@ export default function VideoEditor() {
             (isProcessing || !file) && "pointer-events-none opacity-50"
           )}>
             {!file && (
-              <div className="bg-film-50 dark:bg-film-900/10 border border-film-100 dark:border-film-900/20 rounded-xl p-4 animate-fade-in">
+              <div className="bg-[var(--surface)] border border-[var(--border)] rounded-xl p-4 animate-fade-in">
                 <p className="text-[10px] font-heading font-bold text-film-600 uppercase tracking-widest">
                   Getting Started
                 </p>
@@ -669,7 +669,7 @@ export default function VideoEditor() {
                 "w-full flex items-center justify-center gap-3 py-5 min-h-[44px] rounded-xl",
                 "font-display text-2xl tracking-widest transition-all duration-200",
                 file && !isProcessing
-                  ? "bg-film-600 hover:bg-film-700 hover:scale-[1.01] text-white shadow-lg shadow-film-200 active:scale-[0.98] cursor-pointer"
+                  ? "bg-[var(--accent)] hover:bg-[var(--accent-hover)] hover:scale-[1.02] text-white shadow-[var(--shadow)] active:scale-[0.98] cursor-pointer"
                   : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
               )}
             >
@@ -687,4 +687,4 @@ export default function VideoEditor() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index 0f20882c..d684c1e5 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -217,14 +217,14 @@ export default function VideoPreview({
       <div
         ref={previewContainerRef}
         role="group"
-        className="relative w-full rounded-lg overflow-hidden bg-[#0a0a0a] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-film-500"
+        className="relative w-full rounded-lg overflow-hidden bg-[var(--bg)] aspect-video focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
         tabIndex={0}
         onKeyDown={handleKeyDown}
         aria-label="Video preview (press Space to play/pause)"
       >
         {isLoading && (
           <div
-            className="absolute inset-0 animate-pulse bg-gray-700 rounded-xl transition-opacity duration-300"
+            className="absolute inset-0 animate-pulse bg-[var(--surface)] rounded-xl transition-opacity duration-300"
             aria-label="Loading video preview"
           />
         )}
@@ -246,18 +246,18 @@ export default function VideoPreview({
             {overlay.mode === "fit" ? (
               // Letterbox: semi-transparent bars outside the content area
               <>
-                <div className="absolute left-0 right-0 top-0 bg-black/50" style={{ height: overlay.barTop }} />
-                <div className="absolute left-0 right-0 bottom-0 bg-black/50" style={{ height: overlay.barBottom }} />
-                <div className="absolute top-0 bottom-0 left-0 bg-black/50" style={{ width: overlay.barLeft }} />
-                <div className="absolute top-0 bottom-0 right-0 bg-black/50" style={{ width: overlay.barRight }} />
+                <div className="absolute left-0 right-0 top-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-[color-mix(in_srgb,var(--bg)_60%,transparent)]" style={{ width: overlay.barRight }} />
               </>
             ) : (
               // Fill/crop: dashed border around the surviving area, dimmed outside
               <>
-                <div className="absolute left-0 right-0 top-0 bg-red-900/50" style={{ height: overlay.barTop }} />
-                <div className="absolute left-0 right-0 bottom-0 bg-red-900/50" style={{ height: overlay.barBottom }} />
-                <div className="absolute top-0 bottom-0 left-0 bg-red-900/50" style={{ width: overlay.barLeft }} />
-                <div className="absolute top-0 bottom-0 right-0 bg-red-900/50" style={{ width: overlay.barRight }} />
+                <div className="absolute left-0 right-0 top-0 bg-[var(--error-bg)]" style={{ height: overlay.barTop }} />
+                <div className="absolute left-0 right-0 bottom-0 bg-[var(--error-bg)]" style={{ height: overlay.barBottom }} />
+                <div className="absolute top-0 bottom-0 left-0 bg-[var(--error-bg)]" style={{ width: overlay.barLeft }} />
+                <div className="absolute top-0 bottom-0 right-0 bg-[var(--error-bg)]" style={{ width: overlay.barRight }} />
                 <div
                   className="absolute border-2 border-dashed border-film-400"
                   style={{
@@ -291,8 +291,8 @@ export default function VideoPreview({
             onClick={() => setShowOverlay((v) => !v)}
             className={`absolute top-2 left-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
               showOverlay
-                ? "bg-film-600 text-white"
-                : "bg-black/60 text-white/70 hover:bg-black/80"
+                ? "bg-[var(--accent)] text-white"
+                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
             }`}
             aria-pressed={showOverlay}
             aria-label={showOverlay ? "Hide framing overlay" : "Show framing overlay"}
@@ -309,8 +309,8 @@ export default function VideoPreview({
             onClick={() => setShowComparison((v) => !v)}
             className={`absolute top-2 right-32 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto ${
               showComparison
-                ? "bg-film-600 text-white"
-                : "bg-black/60 text-white/70 hover:bg-black/80"
+                ? "bg-[var(--accent)] text-white"
+                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
             }`}
             aria-pressed={showComparison}
             aria-label={showComparison ? "Hide comparison preview" : "Show comparison preview"}
@@ -325,7 +325,7 @@ export default function VideoPreview({
           <button
             type="button"
             onClick={handleGrabFrame}
-            className="absolute top-2 right-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto bg-black/60 text-white/70 hover:bg-black/80 flex items-center gap-1"
+            className="absolute top-2 right-2 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wider rounded transition-colors z-10 pointer-events-auto bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] flex items-center gap-1"
             aria-label="Grab frame as PNG"
             title="Download current frame as PNG"
           >
diff --git a/src/components/WaveformCanvas.tsx b/src/components/WaveformCanvas.tsx
index cff6a6bc..ee75055c 100644
--- a/src/components/WaveformCanvas.tsx
+++ b/src/components/WaveformCanvas.tsx
@@ -35,7 +35,7 @@ export default function WaveformCanvas({ samples, loading, hasAudio }: Props) {
     const midY = height / 2;
 
     // Read theme colour from :root — falls back to a visible purple
-    const accentColor = getCssVar("--film-500", "#8b5cf6");
+    const accentColor = getCssVar("--accent", "#4f6ef7");
 
     if (!hasAudio || samples.length === 0) {
       // Flat centre line for silent videos
@@ -92,4 +92,4 @@ export default function WaveformCanvas({ samples, loading, hasAudio }: Props) {
       className="w-full h-16 rounded-md border border-[var(--border)] bg-[var(--surface)]"
     />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/components.tsx b/src/components/components.tsx
index b4994015..bd5241a5 100644
--- a/src/components/components.tsx
+++ b/src/components/components.tsx
@@ -14,10 +14,7 @@ export function Card({ title, description, children, className = "" }: CardProps
   return (
     <div
       className={`
-        rounded-xl border p-6
-        bg-[var(--surface)]
-        border-[var(--border)]
-        shadow-sm
+        rounded-[var(--radius)] border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[var(--shadow)]
         ${className}
       `}
     >
@@ -46,21 +43,21 @@ export function Button({ variant = "primary", className = "", children, ...props
     primary: `
       bg-[var(--accent)]
       text-white
-      hover:opacity-90
-      focus:ring-blue-500
+      hover:bg-[var(--accent-hover)] hover:scale-[1.02]
+      focus:ring-[var(--accent)]
     `,
     secondary: `
-      bg-[var(--surface)]
+      bg-[var(--accent-muted)]
       text-[var(--text)]
-      border border-[var(--border)]
-      hover:opacity-90
-      focus:ring-gray-400
+      border border-[var(--accent)]
+      hover:bg-[var(--surface)] hover:scale-[1.02]
+      focus:ring-[var(--accent)]
     `,
     ghost: `
       bg-transparent
-      text-[var(--text)]
-      hover:bg-[var(--surface)]
-      focus:ring-gray-400
+      text-[var(--muted)]
+      hover:bg-[var(--accent-muted)] hover:text-[var(--text)]
+      focus:ring-[var(--accent)]
     `,
   };
 
@@ -68,9 +65,10 @@ export function Button({ variant = "primary", className = "", children, ...props
     <button
       className={`
         inline-flex items-center justify-center gap-2
-        rounded-lg px-4 py-2 text-sm font-medium
+        rounded-[var(--radius)] px-4 py-2 text-sm font-medium
         focus:outline-none focus:ring-2 focus:ring-offset-2
-        transition-colors duration-200
+        focus:ring-offset-[var(--bg)]
+        transition-all duration-200
         disabled:opacity-50 disabled:cursor-not-allowed
         ${variants[variant]}
         ${className}
@@ -89,14 +87,10 @@ export function Input({ className = "", ...props }: React.InputHTMLAttributes<HT
   return (
     <input
       className={`
-        w-full rounded-lg px-3 py-2 text-sm
-        bg-[var(--bg)]
-        text-[var(--text)]
-        border border-[var(--border)]
-        placeholder-[var(--muted)]
-        focus:outline-none focus:ring-2 focus:ring-blue-500
-        focus:border-transparent
-        transition-colors duration-200
+        w-full rounded-[var(--radius)] border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text)]
+        placeholder:text-[var(--muted)]
+        focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-muted)]
+        transition-all duration-200
         ${className}
       `}
       {...props}
@@ -114,10 +108,10 @@ interface BadgeProps {
 
 export function Badge({ label, variant = "default" }: BadgeProps) {
   const variants = {
-    default:  "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
-    success:  "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
-    warning:  "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
-    error:    "bg-[var(--surface)] text-[var(--text)] border border-[var(--border)]",
+    default: "bg-[var(--accent-muted)] text-[var(--text)]",
+    success: "bg-[var(--accent-muted)] text-[var(--text)]",
+    warning: "bg-[var(--accent-muted)] text-[var(--text)]",
+    error: "bg-[var(--error-bg)] text-[var(--error)]",
   };
 
   return (
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ddb67756..c79da9a2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,17 +17,17 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         film: {
-          50: "var(--film-50)",
-          100: "var(--film-100)",
-          200: "var(--film-200)",
-          300: "var(--film-300)",
-          400: "var(--film-400)",
-          500: "var(--film-500)",
-          600: "var(--film-600)",
-          700: "var(--film-700)",
-          800: "var(--film-800)",
-          900: "var(--film-900)",
-          950: "var(--film-950)",
+          50: "var(--accent-muted)",
+          100: "var(--accent-muted)",
+          200: "color-mix(in srgb, var(--accent) 30%, var(--border))",
+          300: "color-mix(in srgb, var(--accent) 55%, var(--border))",
+          400: "var(--accent)",
+          500: "var(--accent)",
+          600: "var(--accent)",
+          700: "var(--accent-hover)",
+          800: "var(--text)",
+          900: "var(--text)",
+          950: "var(--bg)",
         },
       },
       keyframes: {
diff --git a/vitest.config.ts b/vitest.config.ts
index 38167032..220799df 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,11 @@
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  oxc: {
+    jsx: {
+      runtime: 'automatic',
+    },
+  },
   test: {
     environment: 'jsdom',
     globals: true,
diff --git a/vitest.setup.ts b/vitest.setup.ts
index eecd4a61..d2973f28 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,2 +1,16 @@
 // Vitest setup: polyfills and global mocks
 import '@testing-library/jest-dom/vitest'
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+})