npm - @argo-video/cli - Versions diffs - 0.26.0 → 0.27.0 - Mend

@argo-video/cli 0.26.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/preview.js CHANGED Viewed

@@ -294,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,
@@ -307,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. */
@@ -611,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 = [];
@@ -1271,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;
@@ -1901,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;
@@ -1987,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>
@@ -2023,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>
@@ -2144,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;
@@ -2160,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 ──────────────────────────────────────────────────────────────
@@ -2217,6 +2319,7 @@ video.addEventListener('timeupdate', () => {
     updateActiveSceneUI();
     updateOverlayVisibility(currentMs);
   }
+  applyCameraTransform(currentMs);
 });
 // Click and drag on timeline bar to scrub
@@ -2388,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');
@@ -2576,6 +2684,7 @@ function renderSceneList() {
       </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>
@@ -3101,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) {
@@ -3491,6 +4101,7 @@ function snapshotAllScenes() {
       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))),
     });
   }
 }
@@ -3518,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;
 }
@@ -3553,6 +4168,21 @@ function undoScene(sceneName) {
     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;
@@ -3625,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');
@@ -3647,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');
@@ -3691,6 +4323,7 @@ document.getElementById('btn-rerecord').addEventListener('click', async () => {
     await saveVoiceover();
     await saveOverlays();
     await saveEffects();
+    await saveCameraMoves();
     await saveTiming();
     clearDirty();
   }