@argo-video/cli 0.25.0 → 0.27.0

package/dist/preview.js

@@ -91,6 +91,7 @@ function updatePreviewVoiceoverEntry(target, entry) {
     changed = setManifestField(target, 'speed', entry.speed) || changed;
     changed = setManifestField(target, 'lang', entry.lang) || changed;
     changed = setManifestField(target, '_hint', entry._hint) || changed;
+    changed = setManifestField(target, 'playbackSpeed', entry.playbackSpeed) || changed;
     return changed;
 }
 function updatePreviewOverlayEntry(target, overlay) {
@@ -123,6 +124,23 @@ function updatePreviewOverlayEntry(target, overlay) {
         changed = setManifestField(overlayTarget, 'body', undefined) || changed;
         changed = setManifestField(overlayTarget, 'kicker', undefined) || changed;
         changed = setManifestField(overlayTarget, 'src', undefined) || changed;
+        // Clear arrow fields
+        changed = setManifestField(overlayTarget, 'direction', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'label', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'color', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'size', undefined) || changed;
+    }
+    else if (overlay.type === 'arrow') {
+        changed = setManifestField(overlayTarget, 'direction', 'direction' in overlay ? overlay.direction : undefined) || changed;
+        changed = setManifestField(overlayTarget, 'label', 'label' in overlay ? overlay.label : undefined) || changed;
+        changed = setManifestField(overlayTarget, 'color', 'color' in overlay ? overlay.color : undefined) || changed;
+        changed = setManifestField(overlayTarget, 'size', 'size' in overlay ? overlay.size : undefined) || changed;
+        // Clear non-arrow fields
+        changed = setManifestField(overlayTarget, 'text', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'title', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'body', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'kicker', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'src', undefined) || changed;
     }
     else {
         changed = setManifestField(overlayTarget, 'text', undefined) || changed;
@@ -130,6 +148,11 @@ function updatePreviewOverlayEntry(target, overlay) {
         changed = setManifestField(overlayTarget, 'body', 'body' in overlay ? overlay.body : undefined) || changed;
         changed = setManifestField(overlayTarget, 'kicker', 'kicker' in overlay ? overlay.kicker : undefined) || changed;
         changed = setManifestField(overlayTarget, 'src', 'src' in overlay ? overlay.src : undefined) || changed;
+        // Clear arrow fields
+        changed = setManifestField(overlayTarget, 'direction', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'label', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'color', undefined) || changed;
+        changed = setManifestField(overlayTarget, 'size', undefined) || changed;
     }
     return changed;
 }
@@ -194,6 +217,7 @@ function loadPreviewData(demoName, argoDir, demosDir, outputDir = 'videos', expo
         speed: s.speed,
         lang: s.lang,
         _hint: s._hint,
+        playbackSpeed: s.playbackSpeed,
     }));
     const overlays = scenes
         .filter((s) => s.overlay)
@@ -270,6 +294,18 @@ function loadPreviewData(demoName, argoDir, demosDir, outputDir = 'videos', expo
         }
         catch { /* ignore */ }
     }
+    // Load cursor telemetry for dwell-based camera suggestions, shift for head trim
+    const cursorTelemetryPath = join(demoDir, '.timing.cursor-telemetry.json');
+    const rawCursorTelemetry = readJsonFile(cursorTelemetryPath, []);
+    const cursorTelemetry = headTrimMs > 0
+        ? rawCursorTelemetry.map(s => ({ ...s, timeMs: s.timeMs - headTrimMs })).filter(s => s.timeMs >= 0)
+        : rawCursorTelemetry;
+    // Load camera moves from sidecar file, shift for head trim
+    const cameraMovesPath = join(demoDir, '.timing.camera-moves.json');
+    let cameraMoves = readJsonFile(cameraMovesPath, []);
+    if (headTrimMs > 0 && cameraMoves.length > 0) {
+        cameraMoves = shiftCameraMoves(cameraMoves, headTrimMs);
+    }
     return {
         demoName,
         timing,
@@ -283,6 +319,9 @@ function loadPreviewData(demoName, argoDir, demosDir, outputDir = 'videos', expo
         videoDurationMs,
         pipelineMeta,
         bgm,
+        cameraMoves,
+        cursorTelemetry,
+        headTrimMs,
     };
 }
 /** List WAV clip files available for a demo. */
@@ -587,6 +626,18 @@ export async function startPreviewServer(options) {
                 res.end(JSON.stringify({ ok: true, changed }));
                 return;
             }
+            // Save camera moves to .timing.camera-moves.json
+            if (url === '/api/camera-moves' && req.method === 'POST') {
+                const chunks = [];
+                for await (const chunk of req)
+                    chunks.push(chunk);
+                const moves = JSON.parse(Buffer.concat(chunks).toString('utf-8'));
+                const cameraMovesPath = join(demoDir, '.timing.camera-moves.json');
+                writeFileSync(cameraMovesPath, JSON.stringify(moves, null, 2) + '\n', 'utf-8');
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ ok: true }));
+                return;
+            }
             // Save timing marks to .timing.json
             if (url === '/api/save-timing' && req.method === 'POST') {
                 const chunks = [];
@@ -1247,6 +1298,7 @@ const PREVIEW_HTML = `<!DOCTYPE html>
     position: relative;
     background: #000;
     display: flex;
+    overflow: hidden;
     align-items: center;
     justify-content: center;
     min-height: 0;
@@ -1877,6 +1929,25 @@ const PREVIEW_HTML = `<!DOCTYPE html>
     margin-bottom: 6px;
   }
 
+  .camera-moves-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
+  .camera-moves-section .section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
+  .camera-move-entry { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; padding: 6px 8px; background: var(--card); border-radius: 6px; border: 1px solid var(--border); }
+  .camera-move-entry label { font-size: 10px; color: var(--muted); display: block; }
+  .camera-move-entry input { width: 60px; }
+  .camera-move-entry .btn-target { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
+  .camera-move-entry .btn-target.active { background: #ef4444; }
+  .timeline-camera-move { position: absolute; bottom: 0; height: 5px; background: rgba(245,158,11,0.4); border-radius: 2px; pointer-events: auto; cursor: pointer; z-index: 2; }
+  .timeline-camera-move:hover { background: rgba(245,158,11,0.7); }
+  .timeline-camera-chain { position: absolute; bottom: 2px; height: 1px; background: rgba(245,158,11,0.6); pointer-events: none; z-index: 1; }
+  .timeline-camera-suggestion { position: absolute; bottom: 0; height: 5px; background: rgba(168,85,247,0.25); border: 1px dashed rgba(168,85,247,0.5); border-radius: 2px; pointer-events: auto; cursor: pointer; z-index: 3; }
+  .timeline-camera-suggestion:hover { background: rgba(168,85,247,0.45); }
+  .suggestion-tooltip { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 11px; white-space: nowrap; z-index: 20; display: flex; gap: 6px; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
+  .suggestion-tooltip .btn-accept { background: #22c55e; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px; }
+  .suggestion-tooltip .btn-dismiss { background: #6b7280; color: #fff; border: none; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 11px; }
+  .video-container.target-mode { cursor: crosshair; }
+  .camera-region-overlay { position: absolute; border: 2px solid rgba(245,158,11,0.8); background: rgba(245,158,11,0.08); pointer-events: none; z-index: 5; border-radius: 4px; transition: all 0.15s ease-out; }
+  .camera-region-overlay.target-preview { border-color: rgba(239,68,68,0.8); background: rgba(239,68,68,0.1); }
+  .camera-region-label { position: absolute; top: -18px; left: 0; font-size: 10px; color: rgba(245,158,11,0.9); white-space: nowrap; }
   .effects-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
   .effects-section .section-title {
     font-size: 11px;
@@ -1963,6 +2034,7 @@ const PREVIEW_HTML = `<!DOCTYPE html>
   <div class="video-container">
     <video id="video" src="/video" preload="auto" muted playsinline></video>
     <div class="overlay-layer" id="overlay-layer"></div>
+    <div class="camera-region-overlay" id="camera-region" style="display:none"><span class="camera-region-label"></span></div>
     <div class="snap-zone" data-zone="top-left" style="top:10%;left:5%;width:35%;height:35%"><span class="snap-zone-label">top-left</span></div>
     <div class="snap-zone" data-zone="top-right" style="top:10%;right:5%;width:35%;height:35%"><span class="snap-zone-label">top-right</span></div>
     <div class="snap-zone" data-zone="bottom-left" style="bottom:10%;left:5%;width:35%;height:35%"><span class="snap-zone-label">bottom-left</span></div>
@@ -1999,6 +2071,13 @@ const PREVIEW_HTML = `<!DOCTYPE html>
         </label>
         <span class="toggle-label">Overlays</span>
       </div>
+      <div class="toggle-group">
+        <label class="toggle-switch" title="Camera Preview">
+          <input type="checkbox" id="cb-camera" checked>
+          <span class="slider"></span>
+        </label>
+        <span class="toggle-label">Camera</span>
+      </div>
     </div>
   </div>
 </div>
@@ -2104,6 +2183,7 @@ const scenes = Object.entries(DATA.timing)
     name,
     startMs,
     vo: DATA.voiceover.find(v => v.scene === name),
+    playbackSpeed: DATA.voiceover.find(v => v.scene === name)?.playbackSpeed,
     overlay: DATA.overlays.find(o => o.scene === name),
     effects: DATA.effects[name] ?? [],
     rendered: DATA.renderedOverlays[name],
@@ -2119,11 +2199,17 @@ function getPreviewDurationMs() {
   return mediaDurationMs || DATA.videoDurationMs || DATA.sceneReport?.totalDurationMs || 0;
 }
 
+function moveEndMs(m) {
+  return m.startMs + m.durationMs + (m.holdMs ?? 0) + m.durationMs;
+}
+
 function renderTimelineMarkers() {
   const totalMs = getPreviewDurationMs();
   if (!totalMs) return;
 
   timelineBar.querySelectorAll('.timeline-scene').forEach(node => node.remove());
+  timelineBar.querySelectorAll('.timeline-camera-move').forEach(node => node.remove());
+  timelineBar.querySelectorAll('.timeline-camera-chain').forEach(node => node.remove());
 
   scenes.forEach((s, i) => {
     const pct = (s.startMs / totalMs) * 100;
@@ -2135,16 +2221,57 @@ function renderTimelineMarkers() {
     marker.style.left = pct + '%';
     marker.style.width = Math.max(widthPct, 2) + '%';
     const hasOverlay = s.overlay?.type;
-    marker.innerHTML = esc(s.name) + (hasOverlay ? '<span class="has-overlay"></span>' : '');
+    // Scene name is validated (alphanumeric + hyphens only) so esc() is safe for textContent
+    marker.textContent = s.name;
+    if (hasOverlay) {
+      const dot = document.createElement('span');
+      dot.className = 'has-overlay';
+      marker.appendChild(dot);
+    }
     marker.dataset.scene = s.name;
     marker.addEventListener('click', (e) => {
       e.stopPropagation();
-      // Don't seek to scene start if user just finished scrubbing
       if (justScrubbed) return;
       seekToScene(s);
     });
     timelineBar.appendChild(marker);
   });
+
+  // Camera move markers on timeline
+  const moves = DATA.cameraMoves ?? [];
+  const CHAIN_GAP_MS = 1500;
+  moves.forEach((m, i) => {
+    const scale = m.scale ?? 1.5;
+    if (scale <= 1.0) return;
+    const startPct = (m.startMs / totalMs) * 100;
+    const endMs = moveEndMs(m);
+    const widthPct = ((endMs - m.startMs) / totalMs) * 100;
+    const el = document.createElement('div');
+    el.className = 'timeline-camera-move';
+    el.style.left = startPct + '%';
+    el.style.width = Math.max(widthPct, 0.5) + '%';
+    el.title = 'Camera: ' + (m.scene ?? '') + ' (' + scale.toFixed(1) + 'x)';
+    el.addEventListener('click', (e) => {
+      e.stopPropagation();
+      video.currentTime = m.startMs / 1000;
+    });
+    timelineBar.appendChild(el);
+
+    // Chain indicator between connected moves
+    if (i + 1 < moves.length) {
+      const next = moves[i + 1];
+      const gap = next.startMs - endMs;
+      if (gap >= 0 && gap <= CHAIN_GAP_MS && (next.scale ?? 1.5) > 1.0) {
+        const chainStart = (endMs / totalMs) * 100;
+        const chainWidth = ((next.startMs - endMs) / totalMs) * 100;
+        const chain = document.createElement('div');
+        chain.className = 'timeline-camera-chain';
+        chain.style.left = chainStart + '%';
+        chain.style.width = chainWidth + '%';
+        timelineBar.appendChild(chain);
+      }
+    }
+  });
 }
 
 // ─── Timeline ──────────────────────────────────────────────────────────────
@@ -2192,6 +2319,7 @@ video.addEventListener('timeupdate', () => {
     updateActiveSceneUI();
     updateOverlayVisibility(currentMs);
   }
+  applyCameraTransform(currentMs);
 });
 
 // Click and drag on timeline bar to scrub
@@ -2363,6 +2491,11 @@ document.getElementById('cb-overlays').addEventListener('change', () => {
   updateOverlayVisibility(video.currentTime * 1000);
 });
 
+document.getElementById('cb-camera').addEventListener('change', () => {
+  cameraPreviewEnabled = document.getElementById('cb-camera').checked;
+  applyCameraTransform(video.currentTime * 1000);
+});
+
 // ─── Drag-to-snap overlay positioning ──────────────────────────────────────
 const SNAP_ZONES = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom-center', 'center'];
 const snapZoneEls = document.querySelectorAll('.snap-zone');
@@ -2544,9 +2677,14 @@ function renderSceneList() {
           <label>Speed</label>
           <input data-field="speed" data-scene="\${esc(s.name)}" type="number" step="0.1" min="0.5" max="2" value="\${s.vo?.speed ?? ''}\" placeholder="1.0">
         </div>
+        <div style="flex:0 0 80px">
+          <label title="Video playback speed (not TTS)">Playback</label>
+          <input data-field="playbackSpeed" data-scene="\${esc(s.name)}" type="number" step="0.25" min="0.25" max="4" value="\${s.playbackSpeed ?? ''}" placeholder="1.0">
+        </div>
       </div>
       \${renderOverlayFields(s)}
       \${renderEffectsFields(s)}
+      \${renderCameraMovesFields(s)}
       <div class="btn-row">
         <button class="btn btn-undo" data-scene="\${esc(s.name)}" onclick="undoScene('\${esc(s.name)}')" style="display:none" title="Revert to last saved state">Undo</button>
         <span class="btn-group"><button class="btn" onclick="previewScene('\${esc(s.name)}')" title="Play this scene">&#9654;</button><button class="btn" onclick="pausePreview()" title="Pause">&#9646;&#9646;</button></span>
@@ -2701,6 +2839,32 @@ function renderDynamicOverlayFields(sceneName, type, ov) {
         <label>Src</label>
         <input data-field="overlay-src" data-scene="\${esc(sceneName)}" value="\${esc(ov?.src ?? '')}" placeholder="assets/example.png">
       </div>\`;
+  } else if (type === 'arrow') {
+    fields += \`
+      <div class="field-group" style="display:flex;gap:8px">
+        <div style="flex:1">
+          <label>Direction</label>
+          <select data-field="overlay-direction" data-scene="\${esc(sceneName)}">
+            \${['up','down','left','right','up-left','up-right','down-left','down-right'].map(d =>
+              \`<option value="\${d}" \${(ov?.direction ?? 'down') === d ? 'selected' : ''}>\${d}</option>\`
+            ).join('')}
+          </select>
+        </div>
+        <div style="flex:1">
+          <label>Color</label>
+          <input type="color" data-field="overlay-color" data-scene="\${esc(sceneName)}" value="\${ov?.color ?? '#ef4444'}">
+        </div>
+      </div>
+      <div class="field-group" style="display:flex;gap:8px">
+        <div style="flex:1">
+          <label>Label</label>
+          <input data-field="overlay-text" data-scene="\${esc(sceneName)}" value="\${esc(ov?.label ?? '')}" placeholder="optional">
+        </div>
+        <div style="flex:0 0 80px">
+          <label>Size</label>
+          <input type="number" data-field="overlay-size" data-scene="\${esc(sceneName)}" value="\${ov?.size ?? 48}" min="16" max="128" step="4">
+        </div>
+      </div>\`;
   }
   return fields;
 }
@@ -2720,6 +2884,7 @@ function renderOverlayFields(s) {
             <option value="headline-card" \${type === 'headline-card' ? 'selected' : ''}>headline-card</option>
             <option value="callout" \${type === 'callout' ? 'selected' : ''}>callout</option>
             <option value="image-card" \${type === 'image-card' ? 'selected' : ''}>image-card</option>
+            <option value="arrow" \${type === 'arrow' ? 'selected' : ''}>arrow</option>
           </select>
         </div>
         \${type ? \`<div style="flex:1">
@@ -2749,6 +2914,9 @@ function renderOverlayFields(s) {
           <option value="slide-in" \${ov?.motion === 'slide-in' ? 'selected' : ''}>slide-in</option>
         </select>
       </div>\` : ''}
+      \${type ? \`<div class="field-group" style="display:flex;align-items:center;gap:8px">
+        <label style="margin:0"><input type="checkbox" data-field="overlay-autoBackground" data-scene="\${esc(s.name)}" \${ov?.autoBackground ? 'checked' : ''}> Auto theme</label>
+      </div>\` : ''}
       <div class="overlay-fields-dynamic" data-scene="\${esc(s.name)}">
         \${renderDynamicOverlayFields(s.name, type, ov)}
       </div>
@@ -2822,6 +2990,8 @@ function wireOverlayListeners(sceneName) {
       else if (field === 'overlay-text') {
         if (s.overlay.type === 'lower-third' || s.overlay.type === 'callout') {
           s.overlay.text = input.value;
+        } else if (s.overlay.type === 'arrow') {
+          s.overlay.label = input.value || undefined;
         } else {
           s.overlay.title = input.value;
         }
@@ -2829,6 +2999,13 @@ function wireOverlayListeners(sceneName) {
       else if (field === 'overlay-body') s.overlay.body = input.value || undefined;
       else if (field === 'overlay-kicker') s.overlay.kicker = input.value || undefined;
       else if (field === 'overlay-src') s.overlay.src = input.value || undefined;
+      else if (field === 'overlay-direction') s.overlay.direction = input.value || undefined;
+      else if (field === 'overlay-color') s.overlay.color = input.value || undefined;
+      else if (field === 'overlay-size') s.overlay.size = input.value ? parseInt(input.value, 10) : undefined;
+      else if (field === 'overlay-autoBackground') {
+        if (input.checked) s.overlay.autoBackground = true;
+        else delete s.overlay.autoBackground;
+      }
 
       markDirty();
 
@@ -3033,6 +3210,507 @@ async function saveEffects() {
   });
 }
 
+// ─── Camera Moves UI ─────────────────────────────────────────────────────
+
+function getMovesForScene(sceneName) {
+  const s = scenes.find(sc => sc.name === sceneName);
+  if (!s) return [];
+  const nextScene = scenes[scenes.indexOf(s) + 1];
+  const sceneEnd = nextScene ? nextScene.startMs : getPreviewDurationMs();
+  return (DATA.cameraMoves ?? []).filter(m => m.startMs >= s.startMs && m.startMs < sceneEnd);
+}
+
+function renderCameraMovesFields(s) {
+  const moves = getMovesForScene(s.name);
+  const items = moves.map((m, i) => {
+    const globalIdx = (DATA.cameraMoves ?? []).indexOf(m);
+    return \`<div class="camera-move-entry">
+      <div><label>Scale</label><input type="number" data-cm-field="scale" data-cm-idx="\${globalIdx}" step="0.1" min="1" max="5" value="\${m.scale ?? 1.5}"></div>
+      <div><label>Duration</label><input type="number" data-cm-field="durationMs" data-cm-idx="\${globalIdx}" step="100" min="100" value="\${m.durationMs}"></div>
+      <div><label>Hold</label><input type="number" data-cm-field="holdMs" data-cm-idx="\${globalIdx}" step="100" min="0" value="\${m.holdMs ?? 0}"></div>
+      <div><label>Target</label><button class="btn-target" onclick="enterTargetMode(\${globalIdx})" title="Click on video to set zoom target">Set</button></div>
+      <button class="btn btn-sm btn-danger" onclick="removeCameraMove(\${globalIdx})" title="Remove">&times;</button>
+    </div>\`;
+  }).join('');
+
+  return \`<div class="camera-moves-section">
+    <div class="section-title">
+      <span>Camera Moves (\${moves.length})</span>
+      <button class="btn btn-sm" onclick="addCameraMove('\${esc(s.name)}')">+ Add</button>
+    </div>
+    <div class="camera-moves-list" data-scene="\${esc(s.name)}">\${items}</div>
+  </div>\`;
+}
+
+function refreshCameraMovesUI(sceneName) {
+  const container = document.querySelector('.camera-moves-list[data-scene="' + sceneName + '"]');
+  if (!container) return;
+  const s = scenes.find(sc => sc.name === sceneName);
+  if (!s) return;
+  const moves = getMovesForScene(sceneName);
+  container.innerHTML = moves.map((m, i) => {
+    const globalIdx = (DATA.cameraMoves ?? []).indexOf(m);
+    return \`<div class="camera-move-entry">
+      <div><label>Scale</label><input type="number" data-cm-field="scale" data-cm-idx="\${globalIdx}" step="0.1" min="1" max="5" value="\${m.scale ?? 1.5}"></div>
+      <div><label>Duration</label><input type="number" data-cm-field="durationMs" data-cm-idx="\${globalIdx}" step="100" min="100" value="\${m.durationMs}"></div>
+      <div><label>Hold</label><input type="number" data-cm-field="holdMs" data-cm-idx="\${globalIdx}" step="100" min="0" value="\${m.holdMs ?? 0}"></div>
+      <div><label>Target</label><button class="btn-target" onclick="enterTargetMode(\${globalIdx})" title="Click on video to set zoom target">Set</button></div>
+      <button class="btn btn-sm btn-danger" onclick="removeCameraMove(\${globalIdx})" title="Remove">&times;</button>
+    </div>\`;
+  }).join('');
+  // Update count in header
+  const section = container.closest('.camera-moves-section');
+  const header = section?.querySelector('.section-title span');
+  if (header) header.textContent = 'Camera Moves (' + moves.length + ')';
+  wireCameraMoveListeners();
+  renderTimelineMarkers();
+}
+
+function wireCameraMoveListeners() {
+  document.querySelectorAll('[data-cm-field]').forEach(input => {
+    input.addEventListener('change', () => {
+      const idx = Number(input.dataset.cmIdx);
+      const field = input.dataset.cmField;
+      const move = DATA.cameraMoves?.[idx];
+      if (!move) return;
+      const val = parseFloat(input.value);
+      if (!Number.isFinite(val)) return;
+      if (field === 'scale') move.scale = val;
+      else if (field === 'durationMs') move.durationMs = val;
+      else if (field === 'holdMs') move.holdMs = val;
+      markDirty();
+      renderTimelineMarkers();
+      applyCameraTransform(video.currentTime * 1000);
+    });
+  });
+}
+
+function addCameraMove(sceneName) {
+  const s = scenes.find(sc => sc.name === sceneName);
+  if (!s) return;
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  if (!DATA.cameraMoves) DATA.cameraMoves = [];
+  DATA.cameraMoves.push({
+    scene: sceneName,
+    startMs: s.startMs + 500,
+    durationMs: 400,
+    x: Math.round(vw / 2),
+    y: Math.round(vh / 2),
+    w: Math.round(vw / 3),
+    h: Math.round(vh / 3),
+    scale: 1.5,
+    holdMs: 1000,
+  });
+  DATA.cameraMoves.sort((a, b) => a.startMs - b.startMs);
+  refreshCameraMovesUI(sceneName);
+  markDirty();
+  applyCameraTransform(video.currentTime * 1000);
+}
+
+function removeCameraMove(globalIdx) {
+  const move = DATA.cameraMoves?.[globalIdx];
+  if (!move) return;
+  const sceneName = move.scene ?? scenes.find(s => move.startMs >= s.startMs)?.name;
+  DATA.cameraMoves.splice(globalIdx, 1);
+  if (sceneName) refreshCameraMovesUI(sceneName);
+  markDirty();
+  applyCameraTransform(video.currentTime * 1000);
+}
+
+let targetModeIdx = -1;
+
+function enterTargetMode(globalIdx) {
+  targetModeIdx = globalIdx;
+  document.querySelector('.video-container')?.classList.add('target-mode');
+  document.querySelectorAll('.btn-target').forEach(b => b.classList.remove('active'));
+  const activeBtn = document.querySelector('[onclick="enterTargetMode(' + globalIdx + ')"]');
+  if (activeBtn) activeBtn.classList.add('active');
+}
+
+// Drag-to-select zoom region (macOS ⌘⇧4 style)
+let dragStart = null; // { x, y } in video pixels
+let isDraggingRegion = false;
+
+const videoContainer = document.querySelector('.video-container');
+
+videoContainer?.addEventListener('mousedown', (e) => {
+  if (targetModeIdx < 0) return;
+  e.preventDefault();
+  const rect = video.getBoundingClientRect();
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  dragStart = {
+    x: Math.round(((e.clientX - rect.left) / rect.width) * vw),
+    y: Math.round(((e.clientY - rect.top) / rect.height) * vh),
+  };
+  isDraggingRegion = true;
+  const regionEl = document.getElementById('camera-region');
+  if (regionEl) { regionEl.classList.add('target-preview'); regionEl.style.display = 'block'; }
+});
+
+videoContainer?.addEventListener('mousemove', (e) => {
+  if (!isDraggingRegion || targetModeIdx < 0 || !dragStart) return;
+  const rect = video.getBoundingClientRect();
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  const curX = Math.round(((e.clientX - rect.left) / rect.width) * vw);
+  const curY = Math.round(((e.clientY - rect.top) / rect.height) * vh);
+
+  // Draw the selection rectangle
+  const x1 = Math.max(0, Math.min(dragStart.x, curX));
+  const y1 = Math.max(0, Math.min(dragStart.y, curY));
+  const x2 = Math.min(vw, Math.max(dragStart.x, curX));
+  const y2 = Math.min(vh, Math.max(dragStart.y, curY));
+  const w = Math.max(20, x2 - x1);
+  const h = Math.max(20, y2 - y1);
+
+  const scaleX = rect.width / vw;
+  const scaleY = rect.height / vh;
+  const regionEl = document.getElementById('camera-region');
+  if (regionEl) {
+    const videoOffset = video.offsetLeft || 0;
+    const videoTop = video.offsetTop || 0;
+    regionEl.style.left = (videoOffset + x1 * scaleX) + 'px';
+    regionEl.style.top = (videoTop + y1 * scaleY) + 'px';
+    regionEl.style.width = (w * scaleX) + 'px';
+    regionEl.style.height = (h * scaleY) + 'px';
+    const scale = Math.max(1.1, Math.min(5, vw / w));
+    const label = regionEl.querySelector('.camera-region-label');
+    if (label) label.textContent = scale.toFixed(1) + 'x zoom';
+  }
+});
+
+videoContainer?.addEventListener('mouseup', (e) => {
+  if (!isDraggingRegion || targetModeIdx < 0 || !dragStart) return;
+  isDraggingRegion = false;
+  const move = DATA.cameraMoves?.[targetModeIdx];
+  if (!move) { dragStart = null; return; }
+
+  const rect = video.getBoundingClientRect();
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  const endX = Math.round(((e.clientX - rect.left) / rect.width) * vw);
+  const endY = Math.round(((e.clientY - rect.top) / rect.height) * vh);
+
+  const x1 = Math.max(0, Math.min(dragStart.x, endX));
+  const y1 = Math.max(0, Math.min(dragStart.y, endY));
+  const x2 = Math.min(vw, Math.max(dragStart.x, endX));
+  const y2 = Math.min(vh, Math.max(dragStart.y, endY));
+  const w = Math.max(50, x2 - x1);
+  const h = Math.max(50, y2 - y1);
+
+  // Set camera move from the drawn region
+  move.x = Math.round(x1 + w / 2); // center x
+  move.y = Math.round(y1 + h / 2); // center y
+  move.w = w;
+  move.h = h;
+  move.scale = Math.max(1.1, Math.min(5, Math.round((vw / w) * 10) / 10));
+
+  // Update the scale input in the sidebar
+  const scaleInput = document.querySelector('[data-cm-field="scale"][data-cm-idx="' + targetModeIdx + '"]');
+  if (scaleInput) scaleInput.value = String(move.scale);
+
+  // Keep region visible
+  const regionEl = document.getElementById('camera-region');
+  if (regionEl) regionEl.classList.remove('target-preview');
+  updateCameraRegionOverlay({ scale: move.scale, x: move.x, y: move.y });
+
+  document.querySelector('.video-container')?.classList.remove('target-mode');
+  document.querySelectorAll('.btn-target').forEach(b => b.classList.remove('active'));
+  targetModeIdx = -1;
+  dragStart = null;
+  markDirty();
+  renderTimelineMarkers();
+});
+
+// Cancel drag if mouse released outside video container
+document.addEventListener('mouseup', () => {
+  if (isDraggingRegion) {
+    isDraggingRegion = false;
+    dragStart = null;
+    if (targetModeIdx >= 0) {
+      document.querySelector('.video-container')?.classList.remove('target-mode');
+      document.querySelectorAll('.btn-target').forEach(b => b.classList.remove('active'));
+      const regionEl = document.getElementById('camera-region');
+      if (regionEl) { regionEl.classList.remove('target-preview'); regionEl.style.display = 'none'; }
+      targetModeIdx = -1;
+    }
+  }
+});
+
+async function saveCameraMoves() {
+  // Un-shift camera moves back to original (pre-trim) timeline for storage
+  const trim = DATA.headTrimMs ?? 0;
+  const moves = (DATA.cameraMoves ?? []).map(m => ({
+    ...m,
+    startMs: m.startMs + trim,
+  }));
+  await fetch('/api/camera-moves', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(moves),
+  });
+}
+
+// ─── Cursor-Dwell Camera Suggestions ────────────────────────────────────
+
+const DWELL_MOVE_THRESHOLD = 0.02; // 2% of viewport
+const MIN_DWELL_MS = 450;
+const MAX_DWELL_MS = 2600;
+const dismissedSuggestions = new Set();
+
+function detectDwells(telemetry) {
+  if (!telemetry || telemetry.length < 2) return [];
+  const sorted = [...telemetry].sort((a, b) => a.timeMs - b.timeMs);
+  const dwells = [];
+  let runStart = 0;
+
+  for (let i = 1; i <= sorted.length; i++) {
+    const broke = i === sorted.length ||
+      Math.hypot(sorted[i].cx - sorted[i - 1].cx, sorted[i].cy - sorted[i - 1].cy) > DWELL_MOVE_THRESHOLD;
+    if (broke) {
+      const runLen = i - runStart;
+      if (runLen >= 2) {
+        const duration = sorted[i - 1].timeMs - sorted[runStart].timeMs;
+        if (duration >= MIN_DWELL_MS && duration <= MAX_DWELL_MS) {
+          let sumX = 0, sumY = 0;
+          for (let j = runStart; j < i; j++) {
+            sumX += sorted[j].cx;
+            sumY += sorted[j].cy;
+          }
+          dwells.push({
+            cx: sumX / runLen,
+            cy: sumY / runLen,
+            startMs: sorted[runStart].timeMs,
+            durationMs: duration,
+            id: runStart + '-' + duration,
+          });
+        }
+      }
+      runStart = i;
+    }
+  }
+  return dwells;
+}
+
+function renderSuggestionMarkers() {
+  timelineBar.querySelectorAll('.timeline-camera-suggestion').forEach(n => n.remove());
+  const telemetry = DATA.cursorTelemetry ?? [];
+  if (telemetry.length === 0) return;
+
+  const totalMs = getPreviewDurationMs();
+  if (!totalMs) return;
+
+  const dwells = detectDwells(telemetry);
+  const existingMoves = DATA.cameraMoves ?? [];
+
+  for (const dwell of dwells) {
+    if (dismissedSuggestions.has(dwell.id)) continue;
+    // Skip if a camera move already exists near this dwell
+    const hasMove = existingMoves.some(m =>
+      Math.abs(m.startMs - dwell.startMs) < 1000 &&
+      (m.scale ?? 1.5) > 1.0
+    );
+    if (hasMove) continue;
+
+    const pct = (dwell.startMs / totalMs) * 100;
+    const widthPct = (dwell.durationMs / totalMs) * 100;
+    const el = document.createElement('div');
+    el.className = 'timeline-camera-suggestion';
+    el.style.left = pct + '%';
+    el.style.width = Math.max(widthPct, 0.5) + '%';
+    el.title = 'Suggested camera beat (' + (dwell.durationMs / 1000).toFixed(1) + 's dwell)';
+    el.addEventListener('click', (e) => {
+      e.stopPropagation();
+      showSuggestionTooltip(el, dwell);
+    });
+    timelineBar.appendChild(el);
+  }
+}
+
+function showSuggestionTooltip(markerEl, dwell) {
+  // Remove existing tooltips
+  document.querySelectorAll('.suggestion-tooltip').forEach(t => t.remove());
+
+  const tooltip = document.createElement('div');
+  tooltip.className = 'suggestion-tooltip';
+
+  const label = document.createElement('span');
+  label.textContent = 'Add camera beat?';
+  tooltip.appendChild(label);
+
+  const acceptBtn = document.createElement('button');
+  acceptBtn.className = 'btn-accept';
+  acceptBtn.textContent = 'Accept';
+  acceptBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    acceptSuggestion(dwell);
+    tooltip.remove();
+    markerEl.remove();
+  });
+  tooltip.appendChild(acceptBtn);
+
+  const dismissBtn = document.createElement('button');
+  dismissBtn.className = 'btn-dismiss';
+  dismissBtn.textContent = 'Dismiss';
+  dismissBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    dismissedSuggestions.add(dwell.id);
+    tooltip.remove();
+    markerEl.remove();
+  });
+  tooltip.appendChild(dismissBtn);
+
+  markerEl.appendChild(tooltip);
+}
+
+function acceptSuggestion(dwell) {
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  if (!DATA.cameraMoves) DATA.cameraMoves = [];
+  DATA.cameraMoves.push({
+    startMs: Math.round(dwell.startMs),
+    durationMs: 400,
+    x: Math.round(dwell.cx * vw),
+    y: Math.round(dwell.cy * vh),
+    w: Math.round(vw / 1.5),
+    h: Math.round(vh / 1.5),
+    scale: 1.5,
+    holdMs: Math.round(Math.min(dwell.durationMs, 2000)),
+  });
+  DATA.cameraMoves.sort((a, b) => a.startMs - b.startMs);
+  // Refresh the scene that contains this timestamp
+  const scene = scenes.find((s, i) => {
+    const next = scenes[i + 1];
+    return dwell.startMs >= s.startMs && (!next || dwell.startMs < next.startMs);
+  });
+  if (scene) refreshCameraMovesUI(scene.name);
+  renderTimelineMarkers();
+  renderSuggestionMarkers();
+  markDirty();
+}
+
+// Render suggestions on load
+setTimeout(renderSuggestionMarkers, 500);
+
+// ─── CSS Transform Camera Preview ───────────────────────────────────────
+
+function computeCameraTransform(currentMs) {
+  const moves = DATA.cameraMoves ?? [];
+  if (moves.length === 0) return null;
+  const CHAIN_GAP = 1500;
+
+  for (let i = 0; i < moves.length; i++) {
+    const m = moves[i];
+    const scale = m.scale ?? 1.5;
+    if (scale <= 1.0) continue;
+
+    const fadeIn = m.durationMs;
+    const hold = m.holdMs ?? 0;
+    const fadeOut = fadeIn;
+    const start = m.startMs;
+    const zoomInEnd = start + fadeIn;
+    const holdEnd = zoomInEnd + hold;
+    const zoomOutEnd = holdEnd + fadeOut;
+
+    // Check for chained next move
+    const next = moves[i + 1];
+    const nextScale = next?.scale ?? 1.5;
+    const isChained = next && nextScale > 1.0 && (next.startMs - zoomOutEnd) >= 0 && (next.startMs - zoomOutEnd) <= CHAIN_GAP;
+
+    // Zoom in
+    if (currentMs >= start && currentMs < zoomInEnd) {
+      const t = (currentMs - start) / fadeIn;
+      const s = 1 + t * (scale - 1);
+      return { scale: s, x: m.x, y: m.y };
+    }
+    // Hold
+    if (currentMs >= zoomInEnd && currentMs < holdEnd) {
+      return { scale, x: m.x, y: m.y };
+    }
+    // Chained pan or zoom out
+    if (isChained) {
+      const panDur = Math.max(100, Math.min(1000, next.startMs - holdEnd + next.durationMs));
+      const panEnd = holdEnd + panDur;
+      if (currentMs >= holdEnd && currentMs < panEnd) {
+        const t = (currentMs - holdEnd) / panDur;
+        const eased = 1 - Math.pow(1 - t, 3);
+        const s = scale + (nextScale - scale) * eased;
+        const x = m.x + (next.x - m.x) * eased;
+        const y = m.y + (next.y - m.y) * eased;
+        return { scale: s, x, y };
+      }
+      if (currentMs >= panEnd && currentMs < next.startMs + next.durationMs) {
+        return { scale: nextScale, x: next.x, y: next.y };
+      }
+    } else if (currentMs >= holdEnd && currentMs < zoomOutEnd) {
+      const t = 1 - (currentMs - holdEnd) / fadeOut;
+      const s = 1 + t * (scale - 1);
+      return { scale: s, x: m.x, y: m.y };
+    }
+  }
+  return null;
+}
+
+let cameraPreviewEnabled = true;
+
+function updateCameraRegionOverlay(cam) {
+  const regionEl = document.getElementById('camera-region');
+  if (!regionEl) return;
+  if (!cam || cam.scale <= 1.01) {
+    regionEl.style.display = 'none';
+    return;
+  }
+  const rect = video.getBoundingClientRect();
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  const scaleX = rect.width / vw;
+  const scaleY = rect.height / vh;
+
+  // Region size: what portion of the frame is visible at this zoom
+  const regionW = vw / cam.scale;
+  const regionH = vh / cam.scale;
+  // Region position: centered on focus point, clamped to frame
+  const regionX = Math.max(0, Math.min(cam.x - regionW / 2, vw - regionW));
+  const regionY = Math.max(0, Math.min(cam.y - regionH / 2, vh - regionH));
+
+  // Convert to CSS pixels relative to video element
+  const videoOffset = video.offsetLeft || 0;
+  const videoTop = video.offsetTop || 0;
+  regionEl.style.display = 'block';
+  regionEl.style.left = (videoOffset + regionX * scaleX) + 'px';
+  regionEl.style.top = (videoTop + regionY * scaleY) + 'px';
+  regionEl.style.width = (regionW * scaleX) + 'px';
+  regionEl.style.height = (regionH * scaleY) + 'px';
+
+  const label = regionEl.querySelector('.camera-region-label');
+  if (label) label.textContent = cam.scale.toFixed(1) + 'x zoom';
+}
+
+function applyCameraTransform(currentMs) {
+  const regionEl = document.getElementById('camera-region');
+  if (!cameraPreviewEnabled) {
+    video.style.transform = '';
+    if (regionEl) regionEl.style.display = 'none';
+    return;
+  }
+  const cam = computeCameraTransform(currentMs);
+  if (!cam || cam.scale <= 1.01) {
+    video.style.transform = '';
+    video.style.transformOrigin = '';
+    if (regionEl) regionEl.style.display = 'none';
+    return;
+  }
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  const originX = (cam.x / vw) * 100;
+  const originY = (cam.y / vh) * 100;
+  video.style.transformOrigin = originX + '% ' + originY + '%';
+  video.style.transform = 'scale(' + cam.scale.toFixed(3) + ')';
+  updateCameraRegionOverlay(cam);
+}
+
 async function saveTiming() {
   const timing = {};
   for (const s of scenes) {
@@ -3328,6 +4006,9 @@ function syncFormValuesToScenes() {
     if (voiceEl?.value && s.vo) s.vo.voice = voiceEl.value;
     const speedEl = document.querySelector('input[data-scene="' + s.name + '"][data-field="speed"]');
     if (speedEl?.value && s.vo) s.vo.speed = parseFloat(speedEl.value);
+    const pbSpeedEl = document.querySelector('input[data-scene="' + s.name + '"][data-field="playbackSpeed"]');
+    const pbVal = pbSpeedEl?.value ? parseFloat(pbSpeedEl.value) : undefined;
+    s.playbackSpeed = (Number.isFinite(pbVal) && pbVal !== 1.0) ? pbVal : undefined;
   }
 }
 
@@ -3345,6 +4026,11 @@ function collectVoiceover() {
     if (Number.isFinite(speed)) entry.speed = speed;
     else delete entry.speed;
 
+    const pbSpeedEl = document.querySelector('input[data-scene="' + s.name + '"][data-field="playbackSpeed"]');
+    const pbSpeed = pbSpeedEl?.value ? parseFloat(pbSpeedEl.value) : undefined;
+    if (Number.isFinite(pbSpeed) && pbSpeed !== 1.0) entry.playbackSpeed = pbSpeed;
+    else delete entry.playbackSpeed;
+
     return entry;
   });
 }
@@ -3412,8 +4098,10 @@ function snapshotAllScenes() {
       text: s.vo?.text ?? '',
       voice: s.vo?.voice ?? '',
       speed: s.vo?.speed ?? '',
+      playbackSpeed: s.playbackSpeed ?? '',
       overlay: s.overlay ? JSON.parse(JSON.stringify(s.overlay)) : null,
       effects: s.effects?.length ? JSON.parse(JSON.stringify(s.effects)) : [],
+      cameraMoves: JSON.parse(JSON.stringify(getMovesForScene(s.name))),
     });
   }
 }
@@ -3430,7 +4118,8 @@ function isSceneModified(sceneName) {
   const text = card.querySelector('[data-field="text"]')?.value ?? '';
   const voice = card.querySelector('[data-field="voice"]')?.value ?? '';
   const speed = card.querySelector('[data-field="speed"]')?.value ?? '';
-  if (text !== snap.text || voice !== snap.voice || String(speed) !== String(snap.speed)) return true;
+  const pbSpeed = card.querySelector('[data-field="playbackSpeed"]')?.value ?? '';
+  if (text !== snap.text || voice !== snap.voice || String(speed) !== String(snap.speed) || String(pbSpeed) !== String(snap.playbackSpeed)) return true;
   // Check overlay and effects from s.overlay / s.effects (single source of truth)
   const s = scenes.find(sc => sc.name === sceneName);
   const currentOverlay = s?.overlay;
@@ -3440,6 +4129,10 @@ function isSceneModified(sceneName) {
   const currentEffects = JSON.stringify(s?.effects ?? []);
   const snapEffects = JSON.stringify(snap.effects ?? []);
   if (currentEffects !== snapEffects) return true;
+  // Check camera moves
+  const currentMoves = JSON.stringify(getMovesForScene(sceneName));
+  const snapMoves = JSON.stringify(snap.cameraMoves ?? []);
+  if (currentMoves !== snapMoves) return true;
   return false;
 }
 
@@ -3467,12 +4160,29 @@ function undoScene(sceneName) {
   if (voiceEl) voiceEl.value = snap.voice;
   const speedEl = card.querySelector('[data-field="speed"]');
   if (speedEl) speedEl.value = snap.speed;
+  const pbSpeedEl = card.querySelector('[data-field="playbackSpeed"]');
+  if (pbSpeedEl) pbSpeedEl.value = snap.playbackSpeed;
   // Restore effects
   const s = scenes.find(sc => sc.name === sceneName);
   if (s) {
     s.effects = snap.effects?.length ? JSON.parse(JSON.stringify(snap.effects)) : [];
     refreshEffectsUI(sceneName);
   }
+  // Restore camera moves
+  if (s && snap.cameraMoves) {
+    // Remove current moves for this scene and replace with snapshot
+    const currentMoves = getMovesForScene(sceneName);
+    for (const m of currentMoves) {
+      const idx = (DATA.cameraMoves ?? []).indexOf(m);
+      if (idx >= 0) DATA.cameraMoves.splice(idx, 1);
+    }
+    const restored = JSON.parse(JSON.stringify(snap.cameraMoves));
+    if (!DATA.cameraMoves) DATA.cameraMoves = [];
+    DATA.cameraMoves.push(...restored);
+    DATA.cameraMoves.sort((a, b) => a.startMs - b.startMs);
+    refreshCameraMovesUI(sceneName);
+    renderTimelineMarkers();
+  }
   // Restore overlay from snapshot into s.overlay (single source of truth)
   if (s) {
     s.overlay = snap.overlay ? JSON.parse(JSON.stringify(snap.overlay)) : undefined;
@@ -3488,7 +4198,7 @@ function undoScene(sceneName) {
     const so = snap.overlay || {};
     const textField = card.querySelector('[data-field="overlay-text"]');
     if (textField) {
-      textField.value = so.type === 'lower-third' || so.type === 'callout' ? (so.text ?? '') : (so.title ?? '');
+      textField.value = so.type === 'lower-third' || so.type === 'callout' ? (so.text ?? '') : so.type === 'arrow' ? (so.label ?? '') : (so.title ?? '');
     }
     const bodyField = card.querySelector('[data-field="overlay-body"]');
     if (bodyField) bodyField.value = so.body ?? '';
@@ -3496,6 +4206,14 @@ function undoScene(sceneName) {
     if (kickerField) kickerField.value = so.kicker ?? '';
     const srcField = card.querySelector('[data-field="overlay-src"]');
     if (srcField) srcField.value = so.src ?? '';
+    const dirField = card.querySelector('[data-field="overlay-direction"]');
+    if (dirField) dirField.value = so.direction ?? 'down';
+    const colorField = card.querySelector('[data-field="overlay-color"]');
+    if (colorField) colorField.value = so.color ?? '#ef4444';
+    const sizeField = card.querySelector('[data-field="overlay-size"]');
+    if (sizeField) sizeField.value = String(so.size ?? 48);
+    const autoBgField = card.querySelector('[data-field="overlay-autoBackground"]');
+    if (autoBgField) autoBgField.checked = !!so.autoBackground;
     const placementField = card.querySelector('[data-field="overlay-placement"]');
     if (placementField) placementField.value = so.placement ?? 'bottom-center';
     const motionField = card.querySelector('[data-field="overlay-motion"]');
@@ -3537,6 +4255,7 @@ document.getElementById('btn-save').addEventListener('click', async () => {
     await saveVoiceover();
     await saveOverlays();
     await saveEffects();
+    await saveCameraMoves();
     await saveTiming();
     clearDirty();
     setStatus('All changes saved', 'saved');
@@ -3559,6 +4278,7 @@ document.getElementById('btn-export').addEventListener('click', async () => {
   await saveVoiceover();
   await saveOverlays();
   await saveEffects();
+  await saveCameraMoves();
   await saveTiming();
   clearDirty();
   const overlay = document.getElementById('recording-overlay');
@@ -3603,6 +4323,7 @@ document.getElementById('btn-rerecord').addEventListener('click', async () => {
     await saveVoiceover();
     await saveOverlays();
     await saveEffects();
+    await saveCameraMoves();
     await saveTiming();
     clearDirty();
   }