From 7b10464f1557899971fb9c13c565982454879990 Mon Sep 17 00:00:00 2001
From: SatyaViswas <mvsviswas@gmail.com>
Date: Tue, 26 May 2026 10:51:39 +0530
Subject: [PATCH] feat: add draggable and resizable image overlay support in
 live preview

---
 src/components/ImageOverlay.tsx |  27 +--
 src/components/ThemeToggle.tsx  |  38 +++-
 src/components/VideoEditor.tsx  |  20 +-
 src/components/VideoPreview.tsx | 372 ++++++++++++++++++++++----------
 src/hooks/useVideoEditor.ts     |   4 +-
 src/lib/ffmpeg.ts               | 154 ++++++++-----
 src/lib/ffmpeg.worker.ts        | 277 +++++++++++++++++-------
 src/lib/types.ts                |  11 +-
 8 files changed, 609 insertions(+), 294 deletions(-)

diff --git a/src/components/ImageOverlay.tsx b/src/components/ImageOverlay.tsx
index ac928206..8b772116 100644
--- a/src/components/ImageOverlay.tsx
+++ b/src/components/ImageOverlay.tsx
@@ -1,24 +1,23 @@
 import Image from "next/image";
 import { useRef, useState, useEffect } from "react";
-import { OverlayPosition } from "@/lib/types";
 import { ArrowUpLeft, ArrowUpRight, ArrowDownLeft, ArrowDownRight, Upload, Trash2, FileImage } from "lucide-react";
 
 interface ImageOverlayPanelProps {
   overlayFile: File | null;
   setOverlayFile: (file: File | null) => void;
-  overlayPosition: OverlayPosition;
-  setOverlayPosition: (p: OverlayPosition) => void;
+  overlayPosition: { x: number; y: number };
+  setOverlayPosition: (p: { x: number; y: number }) => void;
   overlaySize: number;
   setOverlaySize: (v: number) => void;
   overlayOpacity: number;
   setOverlayOpacity: (v: number) => void;
 }
 
-const POSITIONS: { value: OverlayPosition; icon: React.ReactNode; label: string }[] = [
-  { value: "top-left",     icon: <ArrowUpLeft size={11} />,  label: "TL" },
-  { value: "top-right",    icon: <ArrowUpRight size={11} />, label: "TR" },
-  { value: "bottom-left",  icon: <ArrowDownLeft size={11} />, label: "BL" },
-  { value: "bottom-right", icon: <ArrowDownRight size={11} />, label: "BR" },
+const POSITIONS: { value: { x: number; y: number }; icon: React.ReactNode; label: string }[] = [
+  { value: { x: 5, y: 5 },   icon: <ArrowUpLeft size={11} />,  label: "TL" },
+  { value: { x: 85, y: 5 },  icon: <ArrowUpRight size={11} />, label: "TR" },
+  { value: { x: 5, y: 85 },  icon: <ArrowDownLeft size={11} />, label: "BL" },
+  { value: { x: 85, y: 85 }, icon: <ArrowDownRight size={11} />, label: "BR" },
 ];
 
 export default function ImageOverlayPanel({
@@ -58,6 +57,10 @@ export default function ImageOverlayPanel({
   const isMediumOpacity = overlayOpacity > 35 && overlayOpacity <= 75;
   const isSolidOpacity = overlayOpacity > 75;
 
+  const isPositionActive = (val: { x: number; y: number }) => {
+    return overlayPosition.x === val.x && overlayPosition.y === val.y;
+  };
+
   return (
     <div className="w-full text-[11px] text-[var(--text)] space-y-3">
       
@@ -140,16 +143,16 @@ export default function ImageOverlayPanel({
             <div className="grid grid-cols-4 gap-1 flex-1">
               {POSITIONS.map(({ value, icon, label }) => (
                 <button
-                  key={value}
+                  key={`${value.x}-${value.y}`}
                   type="button"
                   onClick={() => setOverlayPosition(value)}
                   className={`rounded border py-0.5 text-center text-[10px] transition flex items-center justify-center gap-0.5 ${
-                    overlayPosition === value
+                    isPositionActive(value)
                       ? "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-[var(--accent)]" : "text-[var(--muted)]"}>
+                  <span className={isPositionActive(value) ? "text-[var(--accent)]" : "text-[var(--muted)]"}>
                     {icon}
                   </span>
                   <span>{label}</span>
@@ -241,4 +244,4 @@ export default function ImageOverlayPanel({
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 26464263..c96b5be2 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -11,7 +11,7 @@ export function ThemeToggle() {
   }, []);
 
   const isDark = theme === "dark";
-  
+
   if (!mounted) {
     return (
       <button
@@ -30,10 +30,10 @@ export function ThemeToggle() {
 
   return (
     <button
-       type="button"
-       suppressHydrationWarning={true}
-       onClick={toggleTheme}
-       aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      type="button"
+      suppressHydrationWarning={true}
+      onClick={toggleTheme}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
       className="
         relative flex items-center justify-center
         w-9 h-9 rounded-full
@@ -46,14 +46,34 @@ export function ThemeToggle() {
         transition-all duration-200
       "
     >
-    {!mounted ? (
-        <div className="w-4 h-4" /> 
+      {!mounted ? (
+        <div className="w-4 h-4" />
       ) : isDark ? (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="w-4 h-4"
+          aria-hidden="true"
+        >
           <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
         </svg>
       ) : (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="w-4 h-4"
+          aria-hidden="true"
+        >
           <circle cx="12" cy="12" r="4" />
           <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
         </svg>
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index b1d2e574..40219789 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -381,13 +381,19 @@ export default function VideoEditor() {
 
               {file && (
                 <div className="mt-4 animate-fade-in">
-                  <VideoPreview
-                    file={file}
-                    recipe={recipe}
-                    videoRef={videoRef}
-                    selectedTextId={selectedTextId}
-                    onSelectText={setSelectedTextId}
-                    onUpdateText={handleUpdateTextOverlay}
+                  <VideoPreview 
+                    file={file} 
+                    recipe={recipe} 
+                    videoRef={videoRef} 
+                    selectedTextId={selectedTextId} 
+                    onSelectText={setSelectedTextId} 
+                    onUpdateText={handleUpdateTextOverlay} 
+                    overlayFile={overlayFile} 
+                    overlayPosition={overlayPosition} 
+                    overlaySize={overlaySize} 
+                    setOverlaySize={setOverlaySize} 
+                    overlayOpacity={overlayOpacity} 
+                    setOverlayPosition={setOverlayPosition} 
                   />
 
                   <div className="mt-3">
diff --git a/src/components/VideoPreview.tsx b/src/components/VideoPreview.tsx
index 7456ac89..1681ff6c 100644
--- a/src/components/VideoPreview.tsx
+++ b/src/components/VideoPreview.tsx
@@ -16,6 +16,12 @@ interface Props {
   selectedTextId?: string | null;
   onSelectText?: (id: string | null) => void;
   onUpdateText?: (id: string, updates: Partial<TextOverlay>) => void;
+  overlayFile?: File | null;
+  overlayPosition?: { x: number; y: number };
+  overlaySize?: number;
+  overlayOpacity?: number;
+  setOverlayPosition?: (p: { x: number; y: number }) => void;
+  setOverlaySize?: (size: number) => void;
 }
 
 export default function VideoPreview({
@@ -25,20 +31,50 @@ export default function VideoPreview({
   selectedTextId = null,
   onSelectText,
   onUpdateText,
+  overlayFile,
+  overlayPosition,
+  overlaySize = 250,
+  overlayOpacity = 100,
+  setOverlayPosition,
+  setOverlaySize,
 }: 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 [showGridOverlay, setShowGridOverlay] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
   const [containerDimensions, setContainerDimensions] = useState({
     width: 0,
     height: 0,
   });
   const previewContainerRef = useRef<HTMLDivElement>(null);
+  const innerCanvasRef = useRef<HTMLDivElement>(null);
   const onLoadedRef = useRef<(() => void) | null>(null);
 
+  // High-performance DOM track nodes
+  const overlayDOMRef = useRef<HTMLDivElement>(null);
+  const canvasRectRef = useRef<DOMRect | null>(null); // Cached geometry to stop layout thrashing
+  const dragStartCoordsRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const dragStartPosRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const resizeStartSizeRef = useRef<number>(250);
+
+  const [isDraggingOverlay, setIsDraggingOverlay] = useState(false);
+  const [isResizingOverlay, setIsResizingOverlay] = useState(false);
+  const [overlayUrl, setOverlayUrl] = useState<string | null>(null);
+
+  // Handle local memory compilation for overlay source files safely
+  useEffect(() => {
+    if (!overlayFile) {
+      setOverlayUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(overlayFile);
+    setOverlayUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [overlayFile]);
+
+  /** Capture the current video frame and download it as a PNG. */
   const handleGrabFrame = useCallback(() => {
     const video = videoRef.current;
     if (!video || video.readyState < 2) return;
@@ -53,7 +89,6 @@ export default function VideoPreview({
 
     canvas.toBlob((blob) => {
       if (!blob) return;
-
       const totalSec = Math.floor(video.currentTime);
       const mins = String(Math.floor(totalSec / 60)).padStart(2, "0");
       const secs = String(totalSec % 60).padStart(2, "0");
@@ -75,10 +110,6 @@ export default function VideoPreview({
     setIsLoading(true);
     const id = ++lastId.current;
     const url = URL.createObjectURL(file);
-
-    if (urlRef.current) {
-      URL.revokeObjectURL(urlRef.current);
-    }
     urlRef.current = url;
 
     const video = videoRef.current;
@@ -93,7 +124,6 @@ export default function VideoPreview({
     };
 
     onLoadedRef.current = handleLoaded;
-
     video.addEventListener("loadeddata", handleLoaded);
 
     return () => {
@@ -101,13 +131,11 @@ export default function VideoPreview({
         video.removeEventListener("loadeddata", onLoadedRef.current);
         onLoadedRef.current = null;
       }
-
       if (video) {
         video.pause();
         video.removeAttribute("src");
         video.load();
       }
-
       if (urlRef.current === url) {
         URL.revokeObjectURL(urlRef.current);
         urlRef.current = null;
@@ -125,9 +153,7 @@ export default function VideoPreview({
     videoRef.current.playbackRate = recipe.speed;
   }, [recipe, videoRef]);
 
-  /**
-   * Track preview container dimensions for text overlay positioning.
-   */
+  /** Track preview container dimensions for text overlay positioning. */
   useEffect(() => {
     const updateDimensions = () => {
       if (previewContainerRef.current) {
@@ -144,51 +170,116 @@ export default function VideoPreview({
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
 
-  const overlay = (() => {
-    if (!recipe || !showOverlay) return null;
-
-    const preset = recipe.preset === "custom"
-      ? { width: recipe.customWidth, height: recipe.customHeight }
-      : getPresetById(recipe.preset);
-
-    if (!preset) return null;
-
-    // Preview container is 16:9
-    const containerW = 16;
-    const containerH = 9;
-    const containerRatio = containerW / containerH;   // 1.777…
-    const outputRatio = preset.width / preset.height;
-
-    if (recipe.framing === "fit") {
-      // Letterbox: the output video fits entirely inside 16:9, padded with bars.
-      if (outputRatio > containerRatio) {
-        // Wider output → pillarbox bars on top & bottom
-        const contentH = (containerRatio / outputRatio) * 100;
-        const barH = (100 - contentH) / 2;
-        return { mode: "fit", barTop: `${barH}%`, barBottom: `${barH}%`, barLeft: "0", barRight: "0" };
-      } else {
-        // Taller output → letterbox bars on left & right
-        const contentW = (outputRatio / containerRatio) * 100;
-        const barW = (100 - contentW) / 2;
-        return { mode: "fit", barTop: "0", barBottom: "0", barLeft: `${barW}%`, barRight: `${barW}%` };
-      }
-    } else {
-      // Fill / crop: the output fills the entire 16:9 preview — show a box representing what survives the crop.
-      if (outputRatio < containerRatio) {
-        // Output is taller → crops top & bottom
-        const visibleH = (outputRatio / containerRatio) * 100;
-        const cropH = (100 - visibleH) / 2;
-        return { mode: "fill", barTop: `${cropH}%`, barBottom: `${cropH}%`, barLeft: "0", barRight: "0" };
-      } else {
-        // Output is wider → crops left & right
-        const visibleW = (containerRatio / outputRatio) * 100;
-        const cropW = (100 - visibleW) / 2;
-        return { mode: "fill", barTop: "0", barBottom: "0", barLeft: `${cropW}%`, barRight: `${cropW}%` };
+  // --- High-Performance Smooth Drag Node Operators ---
+  const handleOverlayPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (isResizingOverlay || !overlayPosition) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsDraggingOverlay(true);
+
+    // Cache canvas metrics once at the beginning of interaction to eliminate layout thrashing
+    if (innerCanvasRef.current) {
+      canvasRectRef.current = innerCanvasRef.current.getBoundingClientRect();
+    }
+
+    dragStartCoordsRef.current = { x: e.clientX, y: e.clientY };
+    dragStartPosRef.current = { x: overlayPosition.x, y: overlayPosition.y };
+  };
+
+  const handleOverlayPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDraggingOverlay || !canvasRectRef.current || !overlayDOMRef.current)
+      return;
+
+    const rect = canvasRectRef.current; // Read instantly from memory cache
+    const deltaX = e.clientX - dragStartCoordsRef.current.x;
+    const deltaY = e.clientY - dragStartCoordsRef.current.y;
+
+    const pctDeltaX = (deltaX / rect.width) * 100;
+    const pctDeltaY = (deltaY / rect.height) * 100;
+
+    let targetX = Math.min(
+      100,
+      Math.max(0, dragStartPosRef.current.x + pctDeltaX),
+    );
+    let targetY = Math.min(
+      100,
+      Math.max(0, dragStartPosRef.current.y + pctDeltaY),
+    );
+
+    // Direct styling modification on DOM layer for instantaneous tracking response
+    overlayDOMRef.current.style.left = `${targetX}%`;
+    overlayDOMRef.current.style.top = `${targetY}%`;
+  };
+
+  const handleOverlayPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    setIsDraggingOverlay(false);
+
+    if (overlayDOMRef.current) {
+      const savedX = parseFloat(overlayDOMRef.current.style.left);
+      const savedY = parseFloat(overlayDOMRef.current.style.top);
+      if (!isNaN(savedX) && !isNaN(savedY)) {
+        setOverlayPosition?.({ x: savedX, y: savedY });
       }
     }
-  })();
+    canvasRectRef.current = null; // Flush cache
+  };
 
-  if (!file) return null;
+  // --- High-Performance Smooth Resize Node Operators ---
+  const handleResizePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsResizingOverlay(true);
+
+    // Cache canvas metrics once at the beginning of resize interaction
+    if (innerCanvasRef.current) {
+      canvasRectRef.current = innerCanvasRef.current.getBoundingClientRect();
+    }
+
+    resizeStartSizeRef.current = overlaySize;
+    dragStartCoordsRef.current = { x: e.clientX, y: e.clientY };
+  };
+
+  const handleResizePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isResizingOverlay || !overlayDOMRef.current) return;
+    e.stopPropagation();
+
+    // Replace: const presetWidth = activePreset?.width || 1920;
+    // With this:
+    const presetWidth = 1920;
+
+    const deltaX = e.clientX - dragStartCoordsRef.current.x;
+    const deltaPresetPx =
+      (deltaX / (previewContainerRef.current?.offsetWidth || 1)) * presetWidth;
+    let newWidthPresetPx = resizeStartSizeRef.current + deltaPresetPx;
+
+    if (newWidthPresetPx >= 50 && newWidthPresetPx <= presetWidth) {
+      overlayDOMRef.current.style.width = `${(newWidthPresetPx / presetWidth) * 100}%`;
+    }
+  };
+
+  const handleResizePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    setIsResizingOverlay(false);
+
+    if (overlayDOMRef.current) {
+      const currentPctWidth = parseFloat(overlayDOMRef.current.style.width);
+
+      // Replace: const presetWidth = activePreset?.width || 1920;
+      // With this:
+      const presetWidth = 1920;
+
+      if (!isNaN(currentPctWidth)) {
+        const finalSizePx = (currentPctWidth / 100) * presetWidth;
+        setOverlaySize?.(finalSizePx);
+      }
+    }
+    canvasRectRef.current = null;
+  };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.code === "Space") {
@@ -197,85 +288,104 @@ export default function VideoPreview({
         target.tagName === "INPUT" ||
         target.tagName === "TEXTAREA" ||
         target.isContentEditable
-      ) {
+      )
         return;
-      }
 
       const video = videoRef.current;
       if (video) {
-        e.preventDefault(); // Prevent default page scroll
-        if (video.paused) {
-          video.play().catch(() => {});
-        } else {
-          video.pause();
-        }
+        e.preventDefault();
+        if (video.paused) video.play().catch(() => {});
+        else video.pause();
       }
     }
   };
 
+  if (!file) return null;
+
   return (
     <>
       <div
         ref={previewContainerRef}
         role="group"
-        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)"
+        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)]"
       >
         {isLoading && (
           <div
-            className="absolute inset-0 animate-pulse bg-[var(--surface)] rounded-xl transition-opacity duration-300"
+            className="absolute inset-0 animate-pulse bg-[var(--surface)] rounded-xl transition-opacity duration-300 z-20"
             aria-label="Loading video preview"
           />
         )}
-        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-        <video
-          ref={videoRef}
-          controls
-          className={cn("w-full h-full object-contain transition-opacity duration-300", isLoading ? "opacity-0" : "opacity-100")}
-          onLoadedData={() => setIsLoading(false)}
-          playsInline
-          muted={!recipe?.keepAudio}
+
+        {/* The WYSIWYG Inner Canvas Boundary */}
+        <div
+          ref={innerCanvasRef}
+          className="absolute inset-0 flex items-center justify-center overflow-hidden ring-1 ring-white/10 shadow-2xl bg-black select-none touch-none"
         >
-          <track kind="captions" />
-        </video>
-
-        {/* Letterbox / Crop overlay */}
-        {overlay && (
-          <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
-            {overlay.mode === "fit" ? (
-              // Letterbox: semi-transparent bars outside the content area
-              <>
-                <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-[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={{
-                    top: overlay.barTop,
-                    bottom: overlay.barBottom,
-                    left: overlay.barLeft,
-                    right: overlay.barRight,
-                  }}
-                />
-              </>
+          <video
+            ref={videoRef}
+            controls
+            onLoadedData={() => setIsLoading(false)}
+            className={cn(
+              "w-full h-full object-contain transition-opacity duration-300",
+              isLoading ? "opacity-0" : "opacity-100",
             )}
-          </div>
-        )}
+            playsInline
+            muted={!recipe?.keepAudio}
+          >
+            <track kind="captions" />
+          </video>
+
+          {/* High-Performance Smooth Rendering Image Overlay Wrapper */}
+          {overlayUrl && overlayPosition && (
+            <div
+              ref={overlayDOMRef}
+              className="group absolute select-none touch-none z-30"
+              style={{
+                left: `${overlayPosition?.x || 50}%`,
+                top: `${overlayPosition?.y || 50}%`,
+                transform: `translate(-${overlayPosition?.x || 50}%, -${overlayPosition?.y || 50}%)`, // Essential fix for visibility
+                opacity: overlayOpacity / 100,
+                width: `${(overlaySize / 1920) * 100}%`, // Simplified width calculation
+                cursor: isDraggingOverlay ? "grabbing" : "grab",
+              }}
+              onPointerDown={handleOverlayPointerDown}
+              onPointerMove={handleOverlayPointerMove}
+              onPointerUp={handleOverlayPointerUp}
+              onPointerCancel={handleOverlayPointerUp}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={overlayUrl}
+                className="w-full h-auto pointer-events-none select-none"
+                alt="Workspace Overlay"
+              />
+
+              {/* Seamless Resize Grab Anchor */}
+              <div
+                className={cn(
+                  "absolute -bottom-1.5 -right-1.5 w-4 h-4 bg-[var(--accent)] rounded-full border-2 border-white cursor-nwse-resize z-50 touch-none shadow-md transition-opacity duration-200",
+                  isResizingOverlay
+                    ? "opacity-100"
+                    : "opacity-0 group-hover:opacity-100",
+                )}
+                onPointerDown={handleResizePointerDown}
+                onPointerMove={handleResizePointerMove}
+                onPointerUp={handleResizePointerUp}
+                onPointerCancel={handleResizePointerUp}
+              />
+            </div>
+          )}
+        </div>
 
         {/* 3x3 Grid Overlay */}
         {showGridOverlay && (
-          <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
+          <div
+            className="absolute inset-0 pointer-events-none"
+            aria-hidden="true"
+          >
             {/* Vertical lines */}
             <div className="absolute top-0 bottom-0 left-1/3 border-l-2 border-dotted border-black" />
             <div className="absolute top-0 bottom-0 right-1/3 border-l-2 border-dotted border-black" />
@@ -298,6 +408,18 @@ export default function VideoPreview({
         )}
 
         {/* Toggle button */}
+        {recipe && !isLoading && containerDimensions.width > 0 && (
+          <DraggableTextOverlays
+            recipe={recipe}
+            containerWidth={containerDimensions.width}
+            containerHeight={containerDimensions.height}
+            selectedTextId={selectedTextId ?? null}
+            onSelectText={onSelectText || (() => {})}
+            onUpdateText={onUpdateText || (() => {})}
+          />
+        )}
+
+        {/* Framing Overlay Toggle Button */}
         {recipe && !isLoading && (
           <button
             type="button"
@@ -308,14 +430,18 @@ export default function VideoPreview({
                 : "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"}
-            title={showOverlay ? "Hide framing overlay" : "Show framing overlay"}
+            aria-label={
+              showOverlay ? "Hide framing overlay" : "Show framing overlay"
+            }
+            title={
+              showOverlay ? "Hide framing overlay" : "Show framing overlay"
+            }
           >
             {showOverlay ? "Hide overlay" : "Show overlay"}
           </button>
         )}
 
-        {/* Grid overlay button */}
+        {/* Grid Overlay Toggle Button */}
         {recipe && !isLoading && (
           <button
             type="button"
@@ -326,26 +452,36 @@ export default function VideoPreview({
                 : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
             }`}
             aria-pressed={showGridOverlay}
-            aria-label={showGridOverlay ? "Hide grid overlay" : "Show grid overlay"}
-            title={showGridOverlay ? "Hide grid overlay" : "Show grid overlay"}
+            aria-label={
+              showGridOverlay ? "Hide grid overlay" : "Show grid overlay"
+            }
+            title={showGridOverlay ? "Hide grid overlay" : "Show grid"}
           >
             {showGridOverlay ? "Hide grid" : "Show grid"}
           </button>
         )}
-
         {/* Compare button */}
         {recipe && !isLoading && (
           <button
             type="button"
             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 ${
+            className={cn(
+              "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-[var(--accent)] text-white"
-                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)]"
-            }`}
+                : "bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)]",
+            )}
             aria-pressed={showComparison}
-            aria-label={showComparison ? "Hide comparison preview" : "Show comparison preview"}
-            title={showComparison ? "Hide comparison preview" : "Show comparison preview"}
+            aria-label={
+              showComparison
+                ? "Hide comparison preview"
+                : "Show comparison preview"
+            }
+            title={
+              showComparison
+                ? "Hide comparison preview"
+                : "Show comparison preview"
+            }
           >
             Compare
           </button>
@@ -356,7 +492,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-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] 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-20 pointer-events-auto bg-[var(--surface)] text-[var(--muted)] hover:bg-[var(--accent-muted)] flex items-center gap-1"
             aria-label="Grab frame as PNG"
             title="Download current frame as PNG"
           >
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index b3ea8283..061c7bb7 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { EditRecipe, ExportResult, ExportStatus, MAX_FILE_SIZE, OverlayPosition, isValidRecipe } from "@/lib/types";
+import { EditRecipe, ExportResult, ExportStatus, MAX_FILE_SIZE, isValidRecipe } from "@/lib/types";
 import { DEFAULT_RECIPE, SPEED_STEPS } from "@/lib/constants";
 import { getPresetById } from "@/lib/presets";
 import { loadFFmpeg, exportVideo, terminateFFmpeg, FFmpegLoadError } from "@/lib/ffmpeg";
@@ -184,7 +184,7 @@ export function useVideoEditor() {
   const [loopMusic, setLoopMusic] = useState(false);
 
   const [overlayFile, setOverlayFile] = useState<File | null>(null);
-  const [overlayPosition, setOverlayPosition] = useState<OverlayPosition>("bottom-right");
+  const [overlayPosition, setOverlayPosition] = useState<{ x: number; y: number }>({ x: 85, y: 5 });
   const [overlaySize, setOverlaySize] = useState(150);
   const [overlayOpacity, setOverlayOpacity] = useState(100);
   const [currentTime, setCurrentTime] = useState(0);
diff --git a/src/lib/ffmpeg.ts b/src/lib/ffmpeg.ts
index 625387d2..55798c51 100644
--- a/src/lib/ffmpeg.ts
+++ b/src/lib/ffmpeg.ts
@@ -1,10 +1,14 @@
-import { EditRecipe, ExportResult, BackgroundMusicOptions, ImageOverlayOptions } from "./types";
+import {
+  EditRecipe,
+  ExportResult,
+  BackgroundMusicOptions,
+  ImageOverlayOptions,
+} from "./types";
 import { getPresetById } from "./presets";
 import { buildTextFilter } from "./text-overlay";
 
 export class FFmpegLoadError extends Error {}
 
-
 type SerializedFile = {
   name: string;
   type: string;
@@ -62,8 +66,10 @@ function createWorker(): Worker {
   }
 
   // MUST be strictly inline for Next.js/Webpack to detect and compile the worker chunk
-  ffmpegWorker = new Worker(new URL("./ffmpeg.worker.ts", import.meta.url), { type: "module" });
-  
+  ffmpegWorker = new Worker(new URL("./ffmpeg.worker.ts", import.meta.url), {
+    type: "module",
+  });
+
   ffmpegWorker.onmessage = handleWorkerMessage;
   ffmpegWorker.onerror = (event) => {
     const message = event.message || "FFmpeg worker error";
@@ -156,11 +162,11 @@ async function ensureWorker() {
 
 export async function loadFFmpeg(
   signal?: AbortSignal,
-  onProgress?: (percent: number) => void
+  onProgress?: (percent: number) => void,
 ): Promise<void> {
   // 1. Capture if the worker is uninitialized before ensureWorker runs
-  const isFirstLoad = !ffmpegWorker; 
-  
+  const isFirstLoad = !ffmpegWorker;
+
   await ensureWorker();
 
   if (workerReady && workerReadyResolve === null) {
@@ -201,7 +207,9 @@ export async function loadFFmpeg(
 
 function cancelPendingExport(reason?: unknown) {
   if (pendingExport) {
-    pendingExport.reject(reason ?? new DOMException("Export cancelled", "AbortError"));
+    pendingExport.reject(
+      reason ?? new DOMException("Export cancelled", "AbortError"),
+    );
     pendingExport = null;
   }
   pendingProgress = null;
@@ -213,7 +221,7 @@ export async function exportVideo(
   onProgress: (percent: number) => void,
   signal?: AbortSignal,
   musicOptions?: BackgroundMusicOptions,
-  overlayOptions?: ImageOverlayOptions
+  overlayOptions?: ImageOverlayOptions,
 ): Promise<ExportResult> {
   await loadFFmpeg(signal, onProgress);
 
@@ -286,7 +294,7 @@ export async function exportVideo(
       overlayFile: overlayFilePayload,
       overlayOptions: sanitizedOverlayOptions,
     } as WorkerExportRequest,
-    transfers
+    transfers,
   );
 
   try {
@@ -325,7 +333,11 @@ function buildSessionId(): string {
   return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
 
-export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: number): string {
+export function buildVideoFilter(
+  recipe: EditRecipe,
+  targetW: number,
+  targetH: number,
+): string {
   const filters: string[] = [];
 
   if (recipe.trimStart > 0 || recipe.trimEnd !== null) {
@@ -348,12 +360,12 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
   if (recipe.framing === "fit") {
     filters.push(
       `scale=${targetW}:${targetH}:force_original_aspect_ratio=decrease`,
-      `pad=${targetW}:${targetH}:(ow-iw)/2:(oh-ih)/2:color=black`
+      `pad=${targetW}:${targetH}:(ow-iw)/2:(oh-ih)/2:color=black`,
     );
   } else {
     filters.push(
       `scale=${targetW}:${targetH}:force_original_aspect_ratio=increase`,
-      `crop=${targetW}:${targetH}`
+      `crop=${targetW}:${targetH}`,
     );
   }
 
@@ -373,13 +385,11 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
   }
 
   const needsEq =
-    recipe.brightness !== 0 ||
-    recipe.contrast !== 1 ||
-    recipe.saturation !== 1;
+    recipe.brightness !== 0 || recipe.contrast !== 1 || recipe.saturation !== 1;
 
   if (needsEq) {
     filters.push(
-      `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`
+      `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`,
     );
   }
 
@@ -392,7 +402,10 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
   return filters.join(",");
 }
 
-export function buildAudioFilter(speed: number, normalizeAudio: boolean): string {
+export function buildAudioFilter(
+  speed: number,
+  normalizeAudio: boolean,
+): string {
   if (speed <= 0) return "";
   const filters: string[] = [];
 
@@ -436,11 +449,13 @@ function buildArguments(
   overlayInputName: string,
   overlayOptions: ImageOverlayOptions | undefined,
   hasOriginalAudio: boolean,
-  videoDuration: number
+  videoDuration: number,
 ): string[] {
   const vf = buildVideoFilter(recipe, targetW, targetH);
   const audioTrim = hasOriginalAudio ? buildAudioTrimFilter(recipe) : "";
-  const audioSpeed = hasOriginalAudio ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false) : "";
+  const audioSpeed = hasOriginalAudio
+    ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false)
+    : "";
   const afParts = [audioTrim, audioSpeed].filter(Boolean);
   const af = afParts.join(",");
 
@@ -458,7 +473,8 @@ function buildArguments(
   }
 
   const needsFilterComplex = hasOverlay || hasMusicTrack;
-  const shouldKeepAudio = recipe.keepAudio && (hasOriginalAudio || hasMusicTrack);
+  const shouldKeepAudio =
+    recipe.keepAudio && (hasOriginalAudio || hasMusicTrack);
 
   if (needsFilterComplex) {
     const filterParts: string[] = [];
@@ -469,44 +485,45 @@ function buildArguments(
       videoOut = "[vbase]";
     }
 
-if (hasOverlay) {
-  const scaledW = overlayOptions!.size;
-  const alpha = (overlayOptions!.opacity / 100).toFixed(2);
-  const posMap: Record<string, string> = {
-    "top-left":     "20:20",
-    "top-right":    "main_w-w-20:20",
-    "bottom-left":  "20:main_h-h-20",
-    "bottom-right": "main_w-w-20:main_h-h-20",
-  };
-
-interface PositionCoords {
-    x: number;
-    y: number;
-  }
-
-  const pos = typeof overlayOptions?.position === "string"
-    ? (posMap[overlayOptions.position] ?? "main_w-w-20:main_h-h-20")
-    : overlayOptions?.position
-    ? `(main_w)*${(overlayOptions.position as PositionCoords).x}/100:(main_h)*${(overlayOptions.position as PositionCoords).y}/100`
-    : "main_w-w-20:main_h-h-20";
-
-  filterParts.push(`[${overlayIdx}:v]scale=${scaledW}:-2,format=rgba,colorchannelmixer=aa=${alpha}[logo]`);
-  filterParts.push(`${videoOut}[logo]overlay=${pos}[vout]`);
-  videoOut = "[vout]";
-}
+    if (hasOverlay) {
+      const scaledW = overlayOptions!.size;
+      const alpha = (overlayOptions!.opacity / 100).toFixed(2);
+      const posMap: Record<string, string> = {
+        "top-left": "20:20",
+        "top-right": "main_w-w-20:20",
+        "bottom-left": "20:main_h-h-20",
+        "bottom-right": "main_w-w-20:main_h-h-20",
+      };
+
+      const pos =
+        typeof overlayOptions?.position === "string"
+          ? (posMap[overlayOptions.position] ?? "main_w-w-20:main_h-h-20")
+          : overlayOptions?.position
+            ? `(main_w)*${overlayOptions.position.x}/100:(main_h)*${overlayOptions.position.y}/100`
+            : "main_w-w-20:main_h-h-20";
+
+      filterParts.push(
+        `[${overlayIdx}:v]scale=${scaledW}:-2,format=rgba,colorchannelmixer=aa=${alpha}[logo]`,
+      );
+      filterParts.push(`${videoOut}[logo]overlay=${pos}[vout]`);
+      videoOut = "[vout]";
+    }
 
     let audioOut = "";
     if (shouldKeepAudio) {
       if (hasMusicTrack) {
         const musicVol = (musicOptions!.musicVolume / 100).toFixed(2);
         if (hasOriginalAudio) {
-          const origVol  = (musicOptions!.originalAudioVolume / 100).toFixed(2);
-          const origChain = afParts.length > 0
-            ? `[0:a]${afParts.join(",")},volume=${origVol}[orig]`
-            : `[0:a]volume=${origVol}[orig]`;
+          const origVol = (musicOptions!.originalAudioVolume / 100).toFixed(2);
+          const origChain =
+            afParts.length > 0
+              ? `[0:a]${afParts.join(",")},volume=${origVol}[orig]`
+              : `[0:a]volume=${origVol}[orig]`;
           filterParts.push(origChain);
           filterParts.push(`[${musicIdx}:a]volume=${musicVol}[music]`);
-          filterParts.push(`[orig][music]amix=inputs=2:duration=first:dropout_transition=0[aout]`);
+          filterParts.push(
+            `[orig][music]amix=inputs=2:duration=first:dropout_transition=0[aout]`,
+          );
           audioOut = "[aout]";
         } else {
           filterParts.push(`[${musicIdx}:a]volume=${musicVol}[aout]`);
@@ -541,18 +558,39 @@ interface PositionCoords {
 
   if (format === "webm") {
     args.push(
-      "-c:v", "libvpx-vp9",
-      "-b:v", "0",
-      "-crf", String(recipe.quality),
-      "-cpu-used", "4",
-      "-deadline", "realtime"
+      "-c:v",
+      "libvpx-vp9",
+      "-b:v",
+      "0",
+      "-crf",
+      String(recipe.quality),
+      "-cpu-used",
+      "4",
+      "-deadline",
+      "realtime",
     );
     if (shouldKeepAudio) args.push("-c:a", "libopus");
   } else if (format === "mkv") {
-    args.push("-c:v", "libx264", "-crf", String(recipe.quality), "-preset", "ultrafast");
+    args.push(
+      "-c:v",
+      "libx264",
+      "-crf",
+      String(recipe.quality),
+      "-preset",
+      "ultrafast",
+    );
     if (shouldKeepAudio) args.push("-c:a", "aac", "-b:a", "128k");
   } else {
-    args.push("-c:v", "libx264", "-crf", String(recipe.quality), "-preset", "ultrafast", "-movflags", "+faststart");
+    args.push(
+      "-c:v",
+      "libx264",
+      "-crf",
+      String(recipe.quality),
+      "-preset",
+      "ultrafast",
+      "-movflags",
+      "+faststart",
+    );
     if (shouldKeepAudio) args.push("-c:a", "aac", "-b:a", "128k");
   }
 
diff --git a/src/lib/ffmpeg.worker.ts b/src/lib/ffmpeg.worker.ts
index f72ef583..d5b7ccb1 100644
--- a/src/lib/ffmpeg.worker.ts
+++ b/src/lib/ffmpeg.worker.ts
@@ -1,14 +1,22 @@
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { toBlobURL } from "@ffmpeg/util";
-import { EditRecipe, BackgroundMusicOptions, ImageOverlayOptions } from "./types";
+import {
+  EditRecipe,
+  BackgroundMusicOptions,
+  ImageOverlayOptions,
+} from "./types";
 import { getPresetById } from "./presets";
 import { buildTextFilter } from "./text-overlay";
 
-const CORE_BASE_URL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
-const MT_CORE_BASE_URL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.6/dist/esm";
+const CORE_BASE_URL =
+  "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
+const MT_CORE_BASE_URL =
+  "https://cdn.jsdelivr.net/npm/@ffmpeg/core-mt@0.12.6/dist/esm";
 const SRI_HASHES: Record<string, string> = {
-  "ffmpeg-core.js":   "sha384-sKfkiFtvUk+vexk+0EUhEh366190/4WpgUAsUvaxEfyg7+E1Zt5Y5hrsU808g8Q9",
-  "ffmpeg-core.wasm": "sha384-U1VDhkPYrM3wTCT4/vjSpSsKqG/UjljYrYCI4hBSJ02svbCkxuCi6U6u/peg5vpW",
+  "ffmpeg-core.js":
+    "sha384-sKfkiFtvUk+vexk+0EUhEh366190/4WpgUAsUvaxEfyg7+E1Zt5Y5hrsU808g8Q9",
+  "ffmpeg-core.wasm":
+    "sha384-U1VDhkPYrM3wTCT4/vjSpSsKqG/UjljYrYCI4hBSJ02svbCkxuCi6U6u/peg5vpW",
 };
 
 type SerializedFile = {
@@ -35,7 +43,11 @@ type CancelRequest = { type: "cancel" };
 
 type TerminateRequest = { type: "terminate" };
 
-type WorkerCommand = LoadRequest | ExportRequest | CancelRequest | TerminateRequest;
+type WorkerCommand =
+  | LoadRequest
+  | ExportRequest
+  | CancelRequest
+  | TerminateRequest;
 
 type ProgressPayload = { type: "progress"; percent: number };
 
@@ -56,14 +68,22 @@ type ErrorPayload = { type: "error"; id?: string; message: string };
 
 type CancelledPayload = { type: "cancelled"; id?: string };
 
-type WorkerResponse = ProgressPayload | ReadyPayload | ResultPayload | ErrorPayload | CancelledPayload;
+type WorkerResponse =
+  | ProgressPayload
+  | ReadyPayload
+  | ResultPayload
+  | ErrorPayload
+  | CancelledPayload;
 
 let ffmpeg: FFmpeg | null = null;
 let ffmpegLoaded = false;
 let activeExportAbortController: AbortController | null = null;
 let activeExportId: string | null = null;
 
-async function fetchWithIntegrity(url: string, mimeType: string): Promise<string> {
+async function fetchWithIntegrity(
+  url: string,
+  mimeType: string,
+): Promise<string> {
   const key = url.split("/").pop()!;
   const integrity = SRI_HASHES[key];
 
@@ -79,7 +99,11 @@ async function fetchWithIntegrity(url: string, mimeType: string): Promise<string
   return URL.createObjectURL(blob);
 }
 
-function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: number): string {
+function buildVideoFilter(
+  recipe: EditRecipe,
+  targetW: number,
+  targetH: number,
+): string {
   const filters: string[] = [];
 
   if (recipe.trimStart > 0 || recipe.trimEnd !== null) {
@@ -102,12 +126,12 @@ function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: number):
   if (recipe.framing === "fit") {
     filters.push(
       `scale=${targetW}:${targetH}:force_original_aspect_ratio=decrease`,
-      `pad=${targetW}:${targetH}:(ow-iw)/2:(oh-ih)/2:color=black`
+      `pad=${targetW}:${targetH}:(ow-iw)/2:(oh-ih)/2:color=black`,
     );
   } else {
     filters.push(
       `scale=${targetW}:${targetH}:force_original_aspect_ratio=increase`,
-      `crop=${targetW}:${targetH}`
+      `crop=${targetW}:${targetH}`,
     );
   }
 
@@ -125,13 +149,11 @@ function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: number):
   }
 
   const needsEq =
-    recipe.brightness !== 0 ||
-    recipe.contrast !== 1 ||
-    recipe.saturation !== 1;
+    recipe.brightness !== 0 || recipe.contrast !== 1 || recipe.saturation !== 1;
 
   if (needsEq) {
     filters.push(
-      `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`
+      `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`,
     );
   }
 
@@ -187,11 +209,13 @@ function buildArguments(
   overlayInputName: string,
   overlayOptions: ImageOverlayOptions | undefined,
   hasOriginalAudio: boolean,
-  videoDuration: number
+  videoDuration: number,
 ): string[] {
   const vf = buildVideoFilter(recipe, targetW, targetH);
   const audioTrim = hasOriginalAudio ? buildAudioTrimFilter(recipe) : "";
-  const audioSpeed = hasOriginalAudio ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false) : "";
+  const audioSpeed = hasOriginalAudio
+    ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false)
+    : "";
   const afParts = [audioTrim, audioSpeed].filter(Boolean);
   const af = afParts.join(",");
 
@@ -209,7 +233,8 @@ function buildArguments(
   }
 
   const needsFilterComplex = hasOverlay || hasMusicTrack;
-  const shouldKeepAudio = recipe.keepAudio && (hasOriginalAudio || hasMusicTrack);
+  const shouldKeepAudio =
+    recipe.keepAudio && (hasOriginalAudio || hasMusicTrack);
 
   if (needsFilterComplex) {
     const filterParts: string[] = [];
@@ -220,31 +245,29 @@ function buildArguments(
       videoOut = "[vbase]";
     }
 
-if (hasOverlay) {
-  const scaledW = overlayOptions!.size;
-  const alpha = (overlayOptions!.opacity / 100).toFixed(2);
-  const posMap: Record<string, string> = {
-    "top-left":     "20:20",
-    "top-right":    "W-w-20:20",
-    "bottom-left":  "20:H-h-20",
-    "bottom-right": "W-w-20:H-h-20",
-  };
-
-interface PositionCoords {
-    x: number;
-    y: number;
-  }
+    if (hasOverlay) {
+      const scaledW = overlayOptions!.size;
+      const alpha = (overlayOptions!.opacity / 100).toFixed(2);
+      const posMap: Record<string, string> = {
+        "top-left": "20:20",
+        "top-right": "W-w-20:20",
+        "bottom-left": "20:H-h-20",
+        "bottom-right": "W-w-20:H-h-20",
+      };
 
-  const pos = typeof overlayOptions?.position === "string"
-    ? (posMap[overlayOptions.position] ?? "W-w-20:H-h-20")
-    : overlayOptions?.position
-    ? `(W-w)*${(overlayOptions.position as PositionCoords).x}/100:(H-h)*${(overlayOptions.position as PositionCoords).y}/100`
-    : "W-w-20:H-h-20";
+      const pos =
+        typeof overlayOptions?.position === "string"
+          ? (posMap[overlayOptions.position] ?? "W-w-20:H-h-20")
+          : overlayOptions?.position
+            ? `(W-w)*${overlayOptions.position.x}/100:(H-h)*${overlayOptions.position.y}/100`
+            : "W-w-20:H-h-20";
 
-  filterParts.push(`[${overlayIdx}:v]scale=${scaledW}:-2,format=rgba,colorchannelmixer=aa=${alpha}[logo]`);
-  filterParts.push(`${videoOut}[logo]overlay=${pos}[vout]`);
-  videoOut = "[vout]";
-}
+      filterParts.push(
+        `[${overlayIdx}:v]scale=${scaledW}:-2,format=rgba,colorchannelmixer=aa=${alpha}[logo]`,
+      );
+      filterParts.push(`${videoOut}[logo]overlay=${pos}[vout]`);
+      videoOut = "[vout]";
+    }
 
     let audioOut = "";
     if (shouldKeepAudio) {
@@ -252,12 +275,15 @@ interface PositionCoords {
         const musicVol = (musicOptions!.musicVolume / 100).toFixed(2);
         if (hasOriginalAudio) {
           const origVol = (musicOptions!.originalAudioVolume / 100).toFixed(2);
-          const origChain = afParts.length > 0
-            ? `[0:a]${afParts.join(",")},volume=${origVol}[orig]`
-            : `[0:a]volume=${origVol}[orig]`;
+          const origChain =
+            afParts.length > 0
+              ? `[0:a]${afParts.join(",")},volume=${origVol}[orig]`
+              : `[0:a]volume=${origVol}[orig]`;
           filterParts.push(origChain);
           filterParts.push(`[${musicIdx}:a]volume=${musicVol}[music]`);
-          filterParts.push(`[orig][music]amix=inputs=2:duration=first:dropout_transition=0[aout]`);
+          filterParts.push(
+            `[orig][music]amix=inputs=2:duration=first:dropout_transition=0[aout]`,
+          );
           audioOut = "[aout]";
         } else {
           filterParts.push(`[${musicIdx}:a]volume=${musicVol}[aout]`);
@@ -292,18 +318,39 @@ interface PositionCoords {
 
   if (format === "webm") {
     args.push(
-      "-c:v", "libvpx-vp9",
-      "-b:v", "0",
-      "-crf", String(recipe.quality),
-      "-cpu-used", "4",
-      "-deadline", "realtime"
+      "-c:v",
+      "libvpx-vp9",
+      "-b:v",
+      "0",
+      "-crf",
+      String(recipe.quality),
+      "-cpu-used",
+      "4",
+      "-deadline",
+      "realtime",
     );
     if (shouldKeepAudio) args.push("-c:a", "libopus");
   } else if (format === "mkv") {
-    args.push("-c:v", "libx264", "-crf", String(recipe.quality), "-preset", "ultrafast");
+    args.push(
+      "-c:v",
+      "libx264",
+      "-crf",
+      String(recipe.quality),
+      "-preset",
+      "ultrafast",
+    );
     if (shouldKeepAudio) args.push("-c:a", "aac", "-b:a", "128k");
   } else {
-    args.push("-c:v", "libx264", "-crf", String(recipe.quality), "-preset", "ultrafast", "-movflags", "+faststart");
+    args.push(
+      "-c:v",
+      "libx264",
+      "-crf",
+      String(recipe.quality),
+      "-preset",
+      "ultrafast",
+      "-movflags",
+      "+faststart",
+    );
     if (shouldKeepAudio) args.push("-c:a", "aac", "-b:a", "128k");
   }
 
@@ -336,10 +383,19 @@ async function loadCore(onProgress?: (percent: number) => void): Promise<void> {
 
   try {
     await ffmpeg.load({
-      coreURL: await fetchWithIntegrity(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
-      wasmURL: await fetchWithIntegrity(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
+      coreURL: await fetchWithIntegrity(
+        `${baseURL}/ffmpeg-core.js`,
+        "text/javascript",
+      ),
+      wasmURL: await fetchWithIntegrity(
+        `${baseURL}/ffmpeg-core.wasm`,
+        "application/wasm",
+      ),
       ...(isIsolated && {
-        workerURL: await fetchWithIntegrity(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
+        workerURL: await fetchWithIntegrity(
+          `${baseURL}/ffmpeg-core.worker.js`,
+          "text/javascript",
+        ),
       }),
     });
 
@@ -359,7 +415,10 @@ function getOutputConfig(format: string, sessionId: string) {
     case "webm":
       return { filename: `output_${sessionId}.webm`, mimeType: "video/webm" };
     case "mkv":
-      return { filename: `output_${sessionId}.mkv`, mimeType: "video/x-matroska" };
+      return {
+        filename: `output_${sessionId}.mkv`,
+        mimeType: "video/x-matroska",
+      };
     case "gif":
       return { filename: `output_${sessionId}.gif`, mimeType: "image/gif" };
     default:
@@ -402,21 +461,35 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
   const ext = request.file.name.split(".").pop() ?? "mp4";
   const inputName = `input_${sessionId}.${ext}`;
 
-  const { filename: outputName, mimeType } = getOutputConfig(recipe.format, sessionId);
+  const { filename: outputName, mimeType } = getOutputConfig(
+    recipe.format,
+    sessionId,
+  );
   const fallbackOutputName = `fallback_${sessionId}.webm`;
   const paletteName = `palette_${sessionId}.png`;
-  const cleanupFiles = new Set<string>([inputName, outputName, fallbackOutputName, paletteName]);
+  const cleanupFiles = new Set<string>([
+    inputName,
+    outputName,
+    fallbackOutputName,
+    paletteName,
+  ]);
 
   const fileBytes = serializeFileBuffer(request.file);
-  await ffmpeg.writeFile(inputName, fileBytes, { signal: activeExportAbortController?.signal });
+  await ffmpeg.writeFile(inputName, fileBytes, {
+    signal: activeExportAbortController?.signal,
+  });
 
   const hasMusicTrack = !!(request.musicFile && recipe.keepAudio);
   const musicInputName = `music_input_${sessionId}.mp3`;
   if (hasMusicTrack) {
     cleanupFiles.add(musicInputName);
-    await ffmpeg.writeFile(musicInputName, serializeFileBuffer(request.musicFile!), {
-      signal: activeExportAbortController?.signal,
-    });
+    await ffmpeg.writeFile(
+      musicInputName,
+      serializeFileBuffer(request.musicFile!),
+      {
+        signal: activeExportAbortController?.signal,
+      },
+    );
   }
 
   const hasOverlay = !!request.overlayFile;
@@ -424,16 +497,23 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
   const overlayInputName = `overlay_${sessionId}.${overlayExt}`;
   if (hasOverlay) {
     cleanupFiles.add(overlayInputName);
-    await ffmpeg.writeFile(overlayInputName, serializeFileBuffer(request.overlayFile!), {
-      signal: activeExportAbortController?.signal,
-    });
+    await ffmpeg.writeFile(
+      overlayInputName,
+      serializeFileBuffer(request.overlayFile!),
+      {
+        signal: activeExportAbortController?.signal,
+      },
+    );
   }
 
   const videoDuration = request.videoDuration;
 
   const handleProgress = ({ progress }: { progress: number }) => {
     if (activeExportId !== sessionId) return;
-    postMessage({ type: "progress", percent: Math.min(99, Math.round(progress * 100)) });
+    postMessage({
+      type: "progress",
+      percent: Math.min(99, Math.round(progress * 100)),
+    });
   };
 
   let logListener: ((event: { message: string }) => void) | null = null;
@@ -447,25 +527,45 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
         ? `[0:v]${vf}[x];[x][1:v]paletteuse`
         : "[0:v][1:v]paletteuse";
 
-      const gifDurationArgs = recipe.speed !== 1
-        ? (() => {
-            const sourceDuration = (recipe.trimEnd ?? videoDuration) - recipe.trimStart;
-            const outputDuration = sourceDuration / recipe.speed;
-            return ["-t", outputDuration.toFixed(6)];
-          })()
-        : [];
+      const gifDurationArgs =
+        recipe.speed !== 1
+          ? (() => {
+              const sourceDuration =
+                (recipe.trimEnd ?? videoDuration) - recipe.trimStart;
+              const outputDuration = sourceDuration / recipe.speed;
+              return ["-t", outputDuration.toFixed(6)];
+            })()
+          : [];
 
       const pass1Code = await ffmpeg.exec(
-        ["-i", inputName, "-vf", vfWithPalette, ...gifDurationArgs, "-y", paletteName],
+        [
+          "-i",
+          inputName,
+          "-vf",
+          vfWithPalette,
+          ...gifDurationArgs,
+          "-y",
+          paletteName,
+        ],
         undefined,
-        { signal: activeExportAbortController?.signal }
+        { signal: activeExportAbortController?.signal },
       );
       if (pass1Code !== 0) throw new Error("GIF palette generation failed");
 
       const pass2Code = await ffmpeg.exec(
-        ["-i", inputName, "-i", paletteName, "-lavfi", vfWithPaletteUse, ...gifDurationArgs, "-y", outputName],
+        [
+          "-i",
+          inputName,
+          "-i",
+          paletteName,
+          "-lavfi",
+          vfWithPaletteUse,
+          ...gifDurationArgs,
+          "-y",
+          outputName,
+        ],
         undefined,
-        { signal: activeExportAbortController?.signal }
+        { signal: activeExportAbortController?.signal },
       );
       if (pass2Code !== 0) throw new Error("GIF export failed");
 
@@ -512,7 +612,7 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
       overlayInputName,
       request.overlayOptions,
       true,
-      videoDuration
+      videoDuration,
     );
 
     let exitCode = await ffmpeg.exec(args, undefined, {
@@ -535,7 +635,7 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
         overlayInputName,
         request.overlayOptions,
         false,
-        videoDuration
+        videoDuration,
       );
       exitCode = await ffmpeg.exec(args, undefined, {
         signal: activeExportAbortController?.signal,
@@ -557,7 +657,7 @@ async function runExport(request: ExportRequest): Promise<ResultPayload> {
         overlayInputName,
         request.overlayOptions,
         !missingAudioDetected,
-        videoDuration
+        videoDuration,
       );
 
       const fallbackCode = await ffmpeg.exec(args, undefined, {
@@ -641,7 +741,11 @@ async function handleCommand(message: WorkerCommand) {
     }
     case "export": {
       if (!ffmpeg) {
-        postMessage({ type: "error", id: message.id, message: "FFmpeg engine is not loaded." });
+        postMessage({
+          type: "error",
+          id: message.id,
+          message: "FFmpeg engine is not loaded.",
+        });
         return;
       }
       if (activeExportAbortController?.signal.aborted) {
@@ -663,7 +767,11 @@ async function handleCommand(message: WorkerCommand) {
         if (activeExportAbortController?.signal.aborted) {
           postMessage({ type: "cancelled", id: message.id });
         } else {
-          postMessage({ type: "error", id: message.id, message: (error as Error).message });
+          postMessage({
+            type: "error",
+            id: message.id,
+            message: (error as Error).message,
+          });
         }
       } finally {
         activeExportAbortController = null;
@@ -672,7 +780,10 @@ async function handleCommand(message: WorkerCommand) {
       return;
     }
     case "cancel": {
-      if (activeExportAbortController && !activeExportAbortController.signal.aborted) {
+      if (
+        activeExportAbortController &&
+        !activeExportAbortController.signal.aborted
+      ) {
         activeExportAbortController.abort();
       }
       return;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index deb816b8..6376d248 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -38,11 +38,12 @@ export interface EditRecipe {
   version: number;
 }
 
-export type OverlayPosition =
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right";
+export type OverlayPosition = 
+  | "top-left" 
+  | "top-right" 
+  | "bottom-left" 
+  | "bottom-right" 
+  | { x: number; y: number };
 
 export interface ImageOverlayOptions {
   file: File | null;