From aeac1099ef031a59f2970db218d91389337eff4b Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Wed, 8 Apr 2026 22:00:00 +1000
Subject: [PATCH] feat(zoom): tag zoom regions as auto or manual in VideoEditor

handleZoomSuggested creates regions with mode: 'auto',
handleZoomAdded creates regions with mode: 'manual'.
Wire zoomSmoothness state and mode change handler.
---
 src/components/video-editor/VideoEditor.tsx | 27 ++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index a48e89a2..70d2c486 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -105,6 +105,8 @@ import {
 	DEFAULT_PLAYBACK_SPEED,
 	DEFAULT_WEBCAM_OVERLAY,
 	DEFAULT_ZOOM_DEPTH,
+	DEFAULT_AUTO_ZOOM_DEPTH,
+	type ZoomMode,
 	DEFAULT_ZOOM_IN_DURATION_MS,
 	DEFAULT_ZOOM_IN_EASING,
 	DEFAULT_ZOOM_IN_OVERLAP_MS,
@@ -1646,7 +1648,6 @@ export default function VideoEditor() {
 			cursorStyle,
 			cursorSize,
 			cursorSmoothing,
-			zoomSmoothness,
 			cursorMotionBlur,
 			cursorClickBounce,
 			cursorClickBounceDuration,
@@ -2233,6 +2234,7 @@ export default function VideoEditor() {
 			endMs: Math.round(span.end),
 			depth: DEFAULT_ZOOM_DEPTH,
 			focus: { cx: 0.5, cy: 0.5 },
+			mode: "manual",
 		};
 		setZoomRegions((prev) => [...prev, newRegion]);
 		setSelectedZoomId(id);
@@ -2246,8 +2248,9 @@ export default function VideoEditor() {
 			id,
 			startMs: Math.round(span.start),
 			endMs: Math.round(span.end),
-			depth: DEFAULT_ZOOM_DEPTH,
-			focus: clampFocusToDepth(focus, DEFAULT_ZOOM_DEPTH),
+			depth: DEFAULT_AUTO_ZOOM_DEPTH,
+			focus: clampFocusToDepth(focus, DEFAULT_AUTO_ZOOM_DEPTH),
+			mode: "auto",
 		};
 		setZoomRegions((prev) => [...prev, newRegion]);
 		setSelectedZoomId(id);
@@ -2327,6 +2330,20 @@ export default function VideoEditor() {
 		[selectedZoomId],
 	);
 
+	const handleZoomModeChange = useCallback(
+		(mode: ZoomMode) => {
+			if (!selectedZoomId) return;
+			setZoomRegions((prev) =>
+				prev.map((region) =>
+					region.id === selectedZoomId
+						? { ...region, mode }
+						: region,
+				),
+			);
+		},
+		[selectedZoomId],
+	);
+
 	const handleZoomDelete = useCallback(
 		(id: string) => {
 			setZoomRegions((prev) => prev.filter((region) => region.id !== id));
@@ -4339,6 +4356,10 @@ export default function VideoEditor() {
 						}
 						onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
 						selectedZoomId={selectedZoomId}
+						selectedZoomMode={
+							selectedZoomId ? (zoomRegions.find((z) => z.id === selectedZoomId)?.mode ?? 'auto') : null
+						}
+						onZoomModeChange={(mode) => selectedZoomId && handleZoomModeChange(mode)}
 						onZoomDelete={handleZoomDelete}
 						selectedTrimId={selectedTrimId}
 						onTrimDelete={handleTrimDelete}