Merge branch 'main' into feature/speed-option

src/components/video-editor/KeyboardShortcutsHelp.tsx

@@ -1,65 +1,62 @@
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, Settings2 } from "lucide-react";
 import { useState, useEffect } from "react";
 import { formatShortcut } from "@/utils/platformUtils";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { formatBinding, SHORTCUT_LABELS, SHORTCUT_ACTIONS } from "@/lib/shortcuts";
 
 export function KeyboardShortcutsHelp() {
-  const [shortcuts, setShortcuts] = useState({
-    delete: 'Ctrl + D',
-    pan: 'Shift + Ctrl + Scroll',
-    zoom: 'Ctrl + Scroll'
-  });
+  const { shortcuts, isMac, openConfig } = useShortcuts();
+
+  const [scrollLabels, setScrollLabels] = useState({ pan: 'Shift + Ctrl + Scroll', zoom: 'Ctrl + Scroll' });
 
   useEffect(() => {
     Promise.all([
-      formatShortcut(['mod', 'D']),
       formatShortcut(['shift', 'mod', 'Scroll']),
-      formatShortcut(['mod', 'Scroll'])
-    ]).then(([deleteKey, panKey, zoomKey]) => {
-      setShortcuts({
-        delete: deleteKey,
-        pan: panKey,
-        zoom: zoomKey
-      });
-    });
+      formatShortcut(['mod', 'Scroll']),
+    ]).then(([pan, zoom]) => setScrollLabels({ pan, zoom }));
   }, []);
 
   return (
     <div className="relative group">
       <HelpCircle className="w-4 h-4 text-slate-500 hover:text-[#34B27B] transition-colors cursor-help" />
+
       <div className="absolute right-0 top-full mt-2 w-64 bg-[#09090b] border border-white/10 rounded-lg p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-xl z-50">
-        <div className="text-xs font-semibold text-slate-200 mb-2">Keyboard Shortcuts</div>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs font-semibold text-slate-200">Keyboard Shortcuts</span>
+          <button
+            type="button"
+            onClick={openConfig}
+            title="Customize shortcuts"
+            className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-[#34B27B] transition-colors"
+          >
+            <Settings2 className="w-3 h-3" />
+            Customize
+          </button>
+        </div>
+
         <div className="space-y-1.5 text-[10px]">
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Zoom</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">Z</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Annotation</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">A</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Keyframe</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">F</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Trim</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">T</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Delete Selected</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{shortcuts.delete}</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Pan Timeline</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{shortcuts.pan}</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Zoom Timeline</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{shortcuts.zoom}</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Pause/Play</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">Space</kbd>
+          {SHORTCUT_ACTIONS.map((action) => (
+            <div key={action} className="flex items-center justify-between">
+              <span className="text-slate-400">{SHORTCUT_LABELS[action]}</span>
+              <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+                {formatBinding(shortcuts[action], isMac)}
+              </kbd>
+            </div>
+          ))}
+
+          <div className="pt-1 border-t border-white/5 mt-1">
+            <div className="flex items-center justify-between">
+              <span className="text-slate-400">Pan Timeline</span>
+              <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{scrollLabels.pan}</kbd>
+            </div>
+            <div className="flex items-center justify-between mt-1.5">
+              <span className="text-slate-400">Zoom Timeline</span>
+              <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{scrollLabels.zoom}</kbd>
+            </div>
+            <div className="flex items-center justify-between mt-1.5">
+              <span className="text-slate-400">Cycle Annotations</span>
+              <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">Tab</kbd>
+            </div>
           </div>
         </div>
       </div>

src/components/video-editor/ShortcutsConfigDialog.tsx

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Keyboard, RotateCcw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  DEFAULT_SHORTCUTS,
+  FIXED_SHORTCUTS,
+  SHORTCUT_ACTIONS,
+  SHORTCUT_LABELS,
+  findConflict,
+  formatBinding,
+  type ShortcutAction,
+  type ShortcutBinding,
+  type ShortcutConflict,
+  type ShortcutsConfig,
+} from '@/lib/shortcuts';
+import { useShortcuts } from '@/contexts/ShortcutsContext';
+
+const MODIFIER_KEYS = new Set(['Control', 'Shift', 'Alt', 'Meta']);
+
+export function ShortcutsConfigDialog() {
+  const { shortcuts, isMac, isConfigOpen, closeConfig, setShortcuts, persistShortcuts } =
+    useShortcuts();
+
+  const [draft, setDraft] = useState<ShortcutsConfig>(shortcuts);
+  const [captureFor, setCaptureFor] = useState<ShortcutAction | null>(null);
+  const [conflict, setConflict] = useState<{ forAction: ShortcutAction; pending: ShortcutBinding; conflictWith: ShortcutConflict } | null>(null);
+
+  useEffect(() => {
+    if (isConfigOpen) {
+      setDraft(shortcuts);
+      setCaptureFor(null);
+      setConflict(null);
+    }
+  }, [isConfigOpen, shortcuts]);
+
+  useEffect(() => {
+    if (!captureFor) return;
+
+    const handleCapture = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.key === 'Escape') {
+        setCaptureFor(null);
+        return;
+      }
+
+      if (MODIFIER_KEYS.has(e.key)) return;
+
+      const binding: ShortcutBinding = {
+        key: e.key.toLowerCase(),
+        ...(e.ctrlKey || e.metaKey ? { ctrl: true } : {}),
+        ...(e.shiftKey ? { shift: true } : {}),
+        ...(e.altKey ? { alt: true } : {}),
+      };
+
+      const found = findConflict(binding, captureFor, draft);
+      setCaptureFor(null);
+
+      if (found?.type === 'fixed') {
+        toast.error(`This shortcut is reserved for "${found.label}" and cannot be reassigned.`);
+        return;
+      }
+
+      if (found?.type === 'configurable') {
+        setConflict({ forAction: captureFor, pending: binding, conflictWith: found });
+        return;
+      }
+
+      setDraft((prev: ShortcutsConfig) => ({ ...prev, [captureFor]: binding }));
+    };
+
+    window.addEventListener('keydown', handleCapture, { capture: true });
+    return () => window.removeEventListener('keydown', handleCapture, { capture: true });
+  }, [captureFor]);
+
+  const handleSwap = useCallback(() => {
+    if (!conflict || conflict.conflictWith.type !== 'configurable') return;
+    const { forAction, pending, conflictWith } = conflict;
+    setDraft((prev: ShortcutsConfig) => ({
+      ...prev,
+      [forAction]: pending,
+      [conflictWith.action]: prev[forAction],
+    }));
+    setConflict(null);
+  }, [conflict]);
+
+  const handleCancelConflict = useCallback(() => setConflict(null), []);
+
+  const handleSave = useCallback(async () => {
+    setShortcuts(draft);
+    await persistShortcuts(draft);
+    toast.success('Keyboard shortcuts saved');
+    closeConfig();
+  }, [draft, setShortcuts, persistShortcuts, closeConfig]);
+
+  const handleReset = useCallback(() => {
+    setDraft({ ...DEFAULT_SHORTCUTS });
+    toast.info('Reset to default shortcuts — click Save to apply');
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setCaptureFor(null);
+    setConflict(null);
+    closeConfig();
+  }, [closeConfig]);
+
+  return (
+    <Dialog open={isConfigOpen} onOpenChange={(open: boolean) => { if (!open) handleClose(); }}>
+      <DialogContent className="bg-[#09090b] border-white/10 text-white max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <Keyboard className="w-4 h-4 text-[#34B27B]" />
+            Keyboard Shortcuts
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-0.5">
+          <p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">Configurable</p>
+          {SHORTCUT_ACTIONS.map((action) => {
+            const isCapturing = captureFor === action;
+            const hasConflict = conflict?.forAction === action;
+            return (
+              <div key={action}>
+                <div className="flex items-center justify-between py-1.5 px-1 border-b border-white/5">
+                  <span className="text-sm text-slate-300">{SHORTCUT_LABELS[action]}</span>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setConflict(null);
+                      setCaptureFor(isCapturing ? null : action);
+                    }}
+                    title={isCapturing ? 'Press Esc to cancel' : 'Click to change'}
+                    className={[
+                      'px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none',
+                      isCapturing
+                        ? 'bg-[#34B27B]/20 border-[#34B27B] text-[#34B27B] animate-pulse'
+                        : hasConflict
+                          ? 'bg-amber-500/10 border-amber-500/50 text-amber-400'
+                          : 'bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer',
+                    ].join(' ')}
+                  >
+                    {isCapturing ? 'Press a key…' : formatBinding(draft[action], isMac)}
+                  </button>
+                </div>
+                {hasConflict && conflict?.conflictWith.type === 'configurable' && (
+                  <div className="flex items-center justify-between px-1 py-1.5 mb-0.5 bg-amber-500/10 border border-amber-500/20 rounded text-xs">
+                    <span className="text-amber-400">
+                      ⚠ Already used by <strong>{SHORTCUT_LABELS[conflict.conflictWith.action]}</strong>
+                    </span>
+                    <div className="flex gap-1.5">
+                      <button
+                        type="button"
+                        onClick={handleSwap}
+                        className="px-2 py-0.5 bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 rounded text-amber-300 font-medium transition-colors"
+                      >
+                        Swap
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleCancelConflict}
+                        className="px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded text-slate-400 transition-colors"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="space-y-0.5 mt-2">
+          <p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">Fixed</p>
+          {FIXED_SHORTCUTS.map(({ label, display }) => (
+            <div
+              key={label}
+              className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
+            >
+              <span className="text-sm text-slate-400">{label}</span>
+              <kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-xs font-mono text-slate-400 min-w-[90px] text-center">
+                {display}
+              </kbd>
+            </div>
+          ))}
+        </div>
+
+        <p className="text-[10px] text-slate-500 mt-1">
+          Click a shortcut then press the new key combination. Press{' '}
+          <span className="font-mono border border-white/10 rounded px-1">Esc</span> to cancel.
+        </p>
+
+        <DialogFooter className="flex gap-2 sm:justify-between mt-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-slate-400 hover:text-white gap-1.5"
+            onClick={handleReset}
+          >
+            <RotateCcw className="w-3 h-3" />
+            Reset to defaults
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              className="bg-[#34B27B] hover:bg-[#2d9e6c] text-white"
+              onClick={handleSave}
+            >
+              Save
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/video-editor/VideoEditor.tsx

@@ -24,6 +24,7 @@ import {
   type ZoomDepth,
   type ZoomFocus,
   type ZoomRegion,
+  type CursorTelemetryPoint,
   type TrimRegion,
   type AnnotationRegion,
   type CropRegion,
@@ -34,6 +35,8 @@ import {
 import { VideoExporter, GifExporter, type ExportProgress, type ExportQuality, type ExportSettings, type ExportFormat, type GifFrameRate, type GifSizePreset, GIF_SIZE_PRESETS, calculateOutputDimensions } from "@/lib/exporter";
 import { type AspectRatio, getAspectRatioValue } from "@/utils/aspectRatioUtils";
 import { getAssetPath } from "@/lib/assetPath";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { matchesShortcut } from "@/lib/shortcuts";
 
 const WALLPAPER_COUNT = 18;
 const WALLPAPER_PATHS = Array.from({ length: WALLPAPER_COUNT }, (_, i) => `/wallpapers/wallpaper${i + 1}.jpg`);
@@ -53,6 +56,7 @@ export default function VideoEditor() {
   const [padding, setPadding] = useState(50);
   const [cropRegion, setCropRegion] = useState<CropRegion>(DEFAULT_CROP_REGION);
   const [zoomRegions, setZoomRegions] = useState<ZoomRegion[]>([]);
+  const [cursorTelemetry, setCursorTelemetry] = useState<CursorTelemetryPoint[]>([]);
   const [selectedZoomId, setSelectedZoomId] = useState<string | null>(null);
   const [trimRegions, setTrimRegions] = useState<TrimRegion[]>([]);
   const [selectedTrimId, setSelectedTrimId] = useState<string | null>(null);
@@ -75,6 +79,8 @@ export default function VideoEditor() {
   const nextZoomIdRef = useRef(1);
   const nextTrimIdRef = useRef(1);
   const nextSpeedIdRef = useRef(1);
+
+  const { shortcuts, isMac } = useShortcuts();
   const nextAnnotationIdRef = useRef(1);
   const nextAnnotationZIndexRef = useRef(1); // Track z-index for stacking order
   const exporterRef = useRef<VideoExporter | null>(null);
@@ -95,6 +101,19 @@ export default function VideoEditor() {
     return fileUrl;
   };
 
+  const fromFileUrl = (fileUrl: string): string => {
+    if (!fileUrl.startsWith('file://')) {
+      return fileUrl;
+    }
+
+    try {
+      const url = new URL(fileUrl);
+      return decodeURIComponent(url.pathname);
+    } catch {
+      return fileUrl.replace(/^file:\/\//, '');
+    }
+  };
+
   useEffect(() => {
     async function loadVideo() {
       try {
@@ -115,6 +134,37 @@ export default function VideoEditor() {
     loadVideo();
   }, []);
 
+  useEffect(() => {
+    let mounted = true;
+
+    async function loadCursorTelemetry() {
+      if (!videoPath) {
+        if (mounted) {
+          setCursorTelemetry([]);
+        }
+        return;
+      }
+
+      try {
+        const result = await window.electronAPI.getCursorTelemetry(fromFileUrl(videoPath));
+        if (mounted) {
+          setCursorTelemetry(result.success ? result.samples : []);
+        }
+      } catch (telemetryError) {
+        console.warn('Unable to load cursor telemetry:', telemetryError);
+        if (mounted) {
+          setCursorTelemetry([]);
+        }
+      }
+    }
+
+    loadCursorTelemetry();
+
+    return () => {
+      mounted = false;
+    };
+  }, [videoPath]);
+
   // Initialize default wallpaper with resolved asset path
   useEffect(() => {
     let mounted = true;
@@ -186,6 +236,21 @@ export default function VideoEditor() {
     setSelectedAnnotationId(null);
   }, []);
 
+  const handleZoomSuggested = useCallback((span: Span, focus: ZoomFocus) => {
+    const id = `zoom-${nextZoomIdRef.current++}`;
+    const newRegion: ZoomRegion = {
+      id,
+      startMs: Math.round(span.start),
+      endMs: Math.round(span.end),
+      depth: DEFAULT_ZOOM_DEPTH,
+      focus: clampFocusToDepth(focus, DEFAULT_ZOOM_DEPTH),
+    };
+    setZoomRegions((prev) => [...prev, newRegion]);
+    setSelectedZoomId(id);
+    setSelectedTrimId(null);
+    setSelectedAnnotationId(null);
+  }, []);
+
   const handleTrimAdded = useCallback((span: Span) => {
     const id = `trim-${nextTrimIdRef.current++}`;
     const newRegion: TrimRegion = {
@@ -458,7 +523,7 @@ export default function VideoEditor() {
         e.preventDefault();
       }
 
-      if (e.key === ' ' || e.code === 'Space') {
+      if (matchesShortcut(e, shortcuts.playPause, isMac)) {
         // Allow space only in inputs/textareas
         if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
           return;
@@ -478,7 +543,7 @@ export default function VideoEditor() {
     
     window.addEventListener('keydown', handleKeyDown, { capture: true });
     return () => window.removeEventListener('keydown', handleKeyDown, { capture: true });
-  }, []);
+  }, [shortcuts, isMac]);
 
   useEffect(() => {
     if (selectedZoomId && !zoomRegions.some((region) => region.id === selectedZoomId)) {
@@ -873,8 +938,10 @@ export default function VideoEditor() {
               videoDuration={duration}
               currentTime={currentTime}
               onSeek={handleSeek}
+              cursorTelemetry={cursorTelemetry}
               zoomRegions={zoomRegions}
               onZoomAdded={handleZoomAdded}
+              onZoomSuggested={handleZoomSuggested}
               onZoomSpanChange={handleZoomSpanChange}
               onZoomDelete={handleZoomDelete}
               selectedZoomId={selectedZoomId}
@@ -973,4 +1040,4 @@ export default function VideoEditor() {
       />
     </div>
   );
-}
+}

src/components/video-editor/timeline/TimelineEditor.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTimelineContext } from "dnd-timeline";
 import { Button } from "@/components/ui/button";
-import { Plus, Scissors, ZoomIn, MessageSquare, ChevronDown, Check, Gauge } from "lucide-react";
+import { Plus, Scissors, ZoomIn, MessageSquare, ChevronDown, Check, Gauge, WandSparkles } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import TimelineWrapper from "./TimelineWrapper";
@@ -9,7 +9,7 @@ import Row from "./Row";
 import Item from "./Item";
 import KeyframeMarkers from "./KeyframeMarkers";
 import type { Range, Span } from "dnd-timeline";
-import type { ZoomRegion, TrimRegion, AnnotationRegion, SpeedRegion } from "../types";
+import type { ZoomRegion, TrimRegion, AnnotationRegion, SpeedRegion, CursorTelemetryPoint, ZoomFocus } from "../types";
 import { v4 as uuidv4 } from 'uuid';
 import {
   DropdownMenu,
@@ -20,6 +20,9 @@ import {
 import { type AspectRatio, getAspectRatioLabel, ASPECT_RATIOS } from "@/utils/aspectRatioUtils";
 import { formatShortcut } from "@/utils/platformUtils";
 import { TutorialHelp } from "../TutorialHelp";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { matchesShortcut } from "@/lib/shortcuts";
+import { detectZoomDwellCandidates, normalizeCursorTelemetry } from "./zoomSuggestionUtils";
 
 const ZOOM_ROW_ID = "row-zoom";
 const TRIM_ROW_ID = "row-trim";
@@ -27,13 +30,16 @@ const ANNOTATION_ROW_ID = "row-annotation";
 const SPEED_ROW_ID = "row-speed";
 const FALLBACK_RANGE_MS = 1000;
 const TARGET_MARKER_COUNT = 12;
+const SUGGESTION_SPACING_MS = 1800;
 
 interface TimelineEditorProps {
   videoDuration: number;
   currentTime: number;
   onSeek?: (time: number) => void;
+  cursorTelemetry?: CursorTelemetryPoint[];
   zoomRegions: ZoomRegion[];
   onZoomAdded: (span: Span) => void;
+  onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
   onZoomSpanChange: (id: string, span: Span) => void;
   onZoomDelete: (id: string) => void;
   selectedZoomId: string | null;
@@ -551,8 +557,10 @@ export default function TimelineEditor({
   videoDuration,
   currentTime,
   onSeek,
+  cursorTelemetry = [],
   zoomRegions,
   onZoomAdded,
+  onZoomSuggested,
   onZoomSpanChange,
   onZoomDelete,
   selectedZoomId,
@@ -589,16 +597,17 @@ export default function TimelineEditor({
   const [range, setRange] = useState<Range>(() => createInitialRange(totalMs));
   const [keyframes, setKeyframes] = useState<{ id: string; time: number }[]>([]);
   const [selectedKeyframeId, setSelectedKeyframeId] = useState<string | null>(null);
-  const [shortcuts, setShortcuts] = useState({
+  const [scrollLabels, setScrollLabels] = useState({
     pan: 'Shift + Ctrl + Scroll',
     zoom: 'Ctrl + Scroll'
   });
   const timelineContainerRef = useRef<HTMLDivElement>(null);
+  const { shortcuts: keyShortcuts, isMac } = useShortcuts();
 
   useEffect(() => {
     formatShortcut(['shift', 'mod', 'Scroll']).then(pan => {
       formatShortcut(['mod', 'Scroll']).then(zoom => {
-        setShortcuts({ pan, zoom });
+        setScrollLabels({ pan, zoom });
       });
     });
   }, []);
@@ -778,6 +787,91 @@ export default function TimelineEditor({
     onZoomAdded({ start: startPos, end: startPos + actualDuration });
   }, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded, defaultRegionDurationMs]);
 
+  const handleSuggestZooms = useCallback(() => {
+    if (!videoDuration || videoDuration === 0 || totalMs === 0) {
+      return;
+    }
+
+    if (!onZoomSuggested) {
+      toast.error("Zoom suggestion handler unavailable");
+      return;
+    }
+
+    if (cursorTelemetry.length < 2) {
+      toast.info("No cursor telemetry available", {
+        description: "Record a screencast first to generate cursor-based suggestions.",
+      });
+      return;
+    }
+
+    const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+    if (defaultDuration <= 0) {
+      return;
+    }
+
+    const reservedSpans = [...zoomRegions]
+      .map((region) => ({ start: region.startMs, end: region.endMs }))
+      .sort((a, b) => a.start - b.start);
+
+    const normalizedSamples = normalizeCursorTelemetry(cursorTelemetry, totalMs);
+
+    if (normalizedSamples.length < 2) {
+      toast.info("No usable cursor telemetry", {
+        description: "The recording does not include enough cursor movement data.",
+      });
+      return;
+    }
+
+    const dwellCandidates = detectZoomDwellCandidates(normalizedSamples);
+
+    if (dwellCandidates.length === 0) {
+      toast.info("No clear cursor dwell moments found", {
+        description: "Try a recording with slower cursor pauses on important actions.",
+      });
+      return;
+    }
+
+    const sortedCandidates = [...dwellCandidates].sort((a, b) => b.strength - a.strength);
+    const acceptedCenters: number[] = [];
+
+    let addedCount = 0;
+
+    sortedCandidates.forEach((candidate) => {
+      const tooCloseToAccepted = acceptedCenters.some(
+        (center) => Math.abs(center - candidate.centerTimeMs) < SUGGESTION_SPACING_MS,
+      );
+
+      if (tooCloseToAccepted) {
+        return;
+      }
+
+      const centeredStart = Math.round(candidate.centerTimeMs - defaultDuration / 2);
+      const candidateStart = Math.max(0, Math.min(centeredStart, totalMs - defaultDuration));
+      const candidateEnd = candidateStart + defaultDuration;
+      const hasOverlap = reservedSpans.some(
+        (span) => candidateEnd > span.start && candidateStart < span.end,
+      );
+
+      if (hasOverlap) {
+        return;
+      }
+
+      reservedSpans.push({ start: candidateStart, end: candidateEnd });
+      acceptedCenters.push(candidate.centerTimeMs);
+      onZoomSuggested({ start: candidateStart, end: candidateEnd }, candidate.focus);
+      addedCount += 1;
+    });
+
+    if (addedCount === 0) {
+      toast.info("No auto-zoom slots available", {
+        description: "Detected dwell points overlap existing zoom regions.",
+      });
+      return;
+    }
+
+    toast.success(`Added ${addedCount} cursor-based zoom suggestion${addedCount === 1 ? "" : "s"}`);
+  }, [videoDuration, totalMs, defaultRegionDurationMs, zoomRegions, onZoomSuggested, cursorTelemetry]);
+
   const handleAddTrim = useCallback(() => {
     if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onTrimAdded) {
       return;
@@ -861,16 +955,16 @@ export default function TimelineEditor({
         return;
       }
 
-      if (e.key === 'f' || e.key === 'F') {
+      if (matchesShortcut(e, keyShortcuts.addKeyframe, isMac)) {
         addKeyframe();
       }
-      if (e.key === 'z' || e.key === 'Z') {
+      if (matchesShortcut(e, keyShortcuts.addZoom, isMac)) {
         handleAddZoom();
       }
-      if (e.key === 't' || e.key === 'T') {
+      if (matchesShortcut(e, keyShortcuts.addTrim, isMac)) {
         handleAddTrim();
       }
-      if (e.key === 'a' || e.key === 'A') {
+      if (matchesShortcut(e, keyShortcuts.addAnnotation, isMac)) {
         handleAddAnnotation();
       }
       if (e.key === 's' || e.key === 'S') {
@@ -900,7 +994,7 @@ export default function TimelineEditor({
         }
       }
       // Delete key or Ctrl+D / Cmd+D
-      if (e.key === 'Delete' || e.key === 'Backspace' || ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))) {
+      if (e.key === 'Delete' || e.key === 'Backspace' || matchesShortcut(e, keyShortcuts.deleteSelected, isMac)) {
         if (selectedKeyframeId) {
           deleteSelectedKeyframe();
         } else if (selectedZoomId) {
@@ -916,7 +1010,7 @@ export default function TimelineEditor({
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [addKeyframe, handleAddZoom, handleAddTrim, handleAddAnnotation, handleAddSpeed, deleteSelectedKeyframe, deleteSelectedZoom, deleteSelectedTrim, deleteSelectedAnnotation, deleteSelectedSpeed, selectedKeyframeId, selectedZoomId, selectedTrimId, selectedAnnotationId, selectedSpeedId, annotationRegions, currentTime, onSelectAnnotation]);
+  }, [addKeyframe, handleAddZoom, handleAddTrim, handleAddAnnotation, handleAddSpeed, deleteSelectedKeyframe, deleteSelectedZoom, deleteSelectedTrim, deleteSelectedAnnotation, deleteSelectedSpeed, selectedKeyframeId, selectedZoomId, selectedTrimId, selectedAnnotationId, selectedSpeedId, annotationRegions, currentTime, onSelectAnnotation, keyShortcuts, isMac]);
 
   const clampedRange = useMemo<Range>(() => {
     if (totalMs === 0) {
@@ -1029,6 +1123,15 @@ export default function TimelineEditor({
           >
             <ZoomIn className="w-4 h-4" />
           </Button>
+          <Button
+            onClick={handleSuggestZooms}
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
+            title="Suggest Zooms from Cursor"
+          >
+            <WandSparkles className="w-4 h-4" />
+          </Button>
           <Button
             onClick={handleAddTrim}
             variant="ghost"
@@ -1088,11 +1191,11 @@ export default function TimelineEditor({
         <div className="flex-1" />
         <div className="flex items-center gap-4 text-[10px] text-slate-500 font-medium">
           <span className="flex items-center gap-1.5">
-            <kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">{shortcuts.pan}</kbd>
+            <kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">{scrollLabels.pan}</kbd>
             <span>Pan</span>
           </span>
           <span className="flex items-center gap-1.5">
-            <kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">{shortcuts.zoom}</kbd>
+            <kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">{scrollLabels.zoom}</kbd>
             <span>Zoom</span>
           </span>
         </div>

src/components/video-editor/timeline/zoomSuggestionUtils.ts

@@ -0,0 +1,75 @@
+import type { CursorTelemetryPoint, ZoomFocus } from "../types";
+
+export const MIN_DWELL_DURATION_MS = 450;
+export const MAX_DWELL_DURATION_MS = 2600;
+export const DWELL_MOVE_THRESHOLD = 0.02;
+
+export interface ZoomDwellCandidate {
+  centerTimeMs: number;
+  focus: ZoomFocus;
+  strength: number;
+}
+
+function normalizeTelemetrySample(sample: CursorTelemetryPoint, totalMs: number): CursorTelemetryPoint {
+  return {
+    timeMs: Math.max(0, Math.min(sample.timeMs, totalMs)),
+    cx: Math.max(0, Math.min(sample.cx, 1)),
+    cy: Math.max(0, Math.min(sample.cy, 1)),
+  };
+}
+
+export function normalizeCursorTelemetry(
+  telemetry: CursorTelemetryPoint[],
+  totalMs: number,
+): CursorTelemetryPoint[] {
+  return [...telemetry]
+    .filter((sample) => Number.isFinite(sample.timeMs) && Number.isFinite(sample.cx) && Number.isFinite(sample.cy))
+    .sort((a, b) => a.timeMs - b.timeMs)
+    .map((sample) => normalizeTelemetrySample(sample, totalMs));
+}
+
+export function detectZoomDwellCandidates(samples: CursorTelemetryPoint[]): ZoomDwellCandidate[] {
+  if (samples.length < 2) {
+    return [];
+  }
+
+  const dwellCandidates: ZoomDwellCandidate[] = [];
+  let runStart = 0;
+
+  const pushRunIfDwell = (startIndex: number, endIndexExclusive: number) => {
+    if (endIndexExclusive - startIndex < 2) {
+      return;
+    }
+
+    const start = samples[startIndex];
+    const end = samples[endIndexExclusive - 1];
+    const runDuration = end.timeMs - start.timeMs;
+    if (runDuration < MIN_DWELL_DURATION_MS || runDuration > MAX_DWELL_DURATION_MS) {
+      return;
+    }
+
+    const runSamples = samples.slice(startIndex, endIndexExclusive);
+    const avgCx = runSamples.reduce((sum, sample) => sum + sample.cx, 0) / runSamples.length;
+    const avgCy = runSamples.reduce((sum, sample) => sum + sample.cy, 0) / runSamples.length;
+
+    dwellCandidates.push({
+      centerTimeMs: Math.round((start.timeMs + end.timeMs) / 2),
+      focus: { cx: avgCx, cy: avgCy },
+      strength: runDuration,
+    });
+  };
+
+  for (let index = 1; index < samples.length; index += 1) {
+    const prev = samples[index - 1];
+    const curr = samples[index];
+    const distance = Math.hypot(curr.cx - prev.cx, curr.cy - prev.cy);
+
+    if (distance > DWELL_MOVE_THRESHOLD) {
+      pushRunIfDwell(runStart, index);
+      runStart = index;
+    }
+  }
+  pushRunIfDwell(runStart, samples.length);
+
+  return dwellCandidates;
+}

src/components/video-editor/types.ts

@@ -13,6 +13,12 @@ export interface ZoomRegion {
   focus: ZoomFocus;
 }
 
+export interface CursorTelemetryPoint {
+  timeMs: number;
+  cx: number;
+  cy: number;
+}
+
 export interface TrimRegion {
   id: string;
   startMs: number;