@vosjs/studio-core 0.20.0 → 0.22.0

package/dist/index.js

@@ -132,6 +132,9 @@ var DEFAULT_CURSOR_STYLE = {
   visible: true,
   smoothing: 0.15,
   size: 24,
+  // The dot every earlier take was cut with; a NEW take opens on the
+  // arrow (projectFromArtifact sets it), so a document that stores
+  // 'default' keeps its dot.
   style: "default",
   hideWhenIdle: true,
   clickFx: DEFAULT_CLICK_FX
@@ -157,6 +160,10 @@ var BASE_FRAME_STYLE = {
   radius: 12,
   shadow: 0.4,
   border: 0,
+  // The stage camera: a new take's zoom centres its target and shows the
+  // ground past the card's edge. A document without the field keeps the
+  // clamped magnifier it was cut with (see FrameStyle.camera).
+  camera: "stage",
   // 'native' = the recording's own aspect ratio (meta.width/height). See ASPECT_RATIOS.
   aspectRatio: "native",
   browserBar: DEFAULT_BROWSER_BAR
@@ -431,7 +438,9 @@ function projectFromArtifact(artifact, videoUrl, opts = {}) {
     zoom: [],
     // planner runs once the doc is loaded (editor) or planned (CLI)
     audio: [],
-    cursor: { ...DEFAULT_CURSOR_STYLE },
+    // A new take wears the OS pointer; DEFAULT_CURSOR_STYLE keeps the dot
+    // so a document that stores it renders as it was cut.
+    cursor: { ...DEFAULT_CURSOR_STYLE, style: "arrow" },
     cam: { ...DEFAULT_CAM_STYLE },
     frame: {
       ...baseFrame,
@@ -445,7 +454,9 @@ function projectFromArtifact(artifact, videoUrl, opts = {}) {
         url: pageDisplayUrl(artifact.meta.pageUrl)
       }
     },
-    export: { resolution: "1080p", fps: 30, format: "mp4" }
+    // 60 fps: the footage duplicates frames, the camera does not, and a
+    // 0.5 s glide at 30 fps is fifteen visible steps.
+    export: { resolution: "1080p", fps: 60, format: "mp4" }
   };
   return { doc, videoUrl };
 }
@@ -1132,29 +1143,35 @@ function clamp(v, lo, hi) {
 // src/zoomStyle.ts
 var ZOOM_STYLES = {
   // Cursorful strategy — one steady zoom per activity session, travel by pans.
+  // The camera's timing was measured against a Cursorful take of the same
+  // steps: a zoom-in of ~0.55 s on a heavy ease-out (most of the move in
+  // the first quarter second, a long settle), a zoom-out of ~0.45 s, and
+  // holds of four to five seconds per beat. The old 1.1 s ramp started
+  // 0.75 s BEFORE the click and landed 0.35 s after it, so the frame was
+  // moving more of the time than it was resting.
   glide: {
     autoZoom: true,
     clusterGap: 3,
-    minClusterClicks: 2,
+    minClusterClicks: 1,
     targetFill: 0.42,
     minLevel: 1.3,
     maxLevel: 1.8,
-    lead: 0.5,
-    hold: 0.6,
+    lead: 0.35,
+    hold: 1.2,
     followByDefault: true,
     typingZoom: true,
     typingGap: 2.5,
     typingHold: 1.1,
     typingMinLevel: 1.4,
-    rampIn: 1.1,
-    rampInOverlap: 0.35,
-    rampOut: 1,
-    chainGap: 2.5,
-    pan: 1,
-    ease: "css-bezier(0.26, 0, 0.16, 1)",
-    panEase: "css-bezier(0.3, 0, 0.2, 1)",
+    rampIn: 0.55,
+    rampInOverlap: 0.2,
+    rampOut: 0.5,
+    chainGap: 3,
+    pan: 0.55,
+    ease: "css-bezier(0.16, 1, 0.3, 1)",
+    panEase: "css-bezier(0.22, 1, 0.36, 1)",
     followSafeRatio: 0.45,
-    followRecenter: 0.8,
+    followRecenter: 0.55,
     followLookahead: 0.4,
     tilt: { intensity: "off" }
   },
@@ -1308,7 +1325,7 @@ var ZOOM_STYLES = {
   keynote: {
     autoZoom: true,
     clusterGap: 3,
-    minClusterClicks: 2,
+    minClusterClicks: 1,
     targetFill: 0.42,
     minLevel: 1.3,
     maxLevel: 1.8,
@@ -1417,13 +1434,17 @@ var DWELL_MIN = 0.45;
 var DWELL_MAX = 2.6;
 var DWELL_SPACING = 1.8;
 var DRAG_FIT_LEVEL = 1.15;
+var PRESS_ECHO_MS = 4;
+var PRESS_ECHO_PX = 2;
 var TYPING_MIN_PINGS = 2;
 var TYPING_MIN_DUR = 0.5;
 var TYPING_CLICK_ABSORB = 1.5;
 var TYPING_REFOCUS_FRAC = 0.08;
 function groupTrack(track, opts) {
-  const { width, height, clusterGap, typingGap, typingZoom } = opts;
-  const clicks = track.filter((e) => e.type === "down").map((e) => ({ t: e.t / 1e3, rect: e.rect, x: e.x, y: e.y }));
+  const { width, height, clusterGap, typingGap, typingZoom, targetFill } = opts;
+  const clicks = dedupePresses(
+    track.filter((e) => e.type === "down")
+  ).map((e) => ({ t: e.t / 1e3, rect: e.rect, x: e.x, y: e.y }));
   const sessions = typingZoom ? typingSessions(track, width, height, typingGap) : [];
   const absorbed = /* @__PURE__ */ new Set();
   for (const s of sessions) {
@@ -1441,15 +1462,43 @@ function groupTrack(track, opts) {
       s.events = [best, ...s.events];
     }
   }
-  const clusters = [];
+  const targets = [];
+  const surfaces = [];
   for (const c of clicks) {
     if (absorbed.has(c)) continue;
-    const last = clusters.at(-1);
-    const prev = last?.at(-1);
-    if (last && prev && c.t - prev.t <= clusterGap) last.push(c);
-    else clusters.push([c]);
+    if (isSurfacePress(c, width, height, targetFill)) surfaces.push(c);
+    else targets.push(c);
+  }
+  const chain = (list) => {
+    const clusters = [];
+    for (const c of list) {
+      const last = clusters.at(-1);
+      const prev = last?.at(-1);
+      if (last && prev && c.t - prev.t <= clusterGap) last.push(c);
+      else clusters.push([c]);
+    }
+    return clusters;
+  };
+  return { sessions, clusters: chain(targets), surfaces: chain(surfaces) };
+}
+function dedupePresses(downs) {
+  const kept = [];
+  for (const e of downs) {
+    const prev = kept.at(-1);
+    if (prev && e.t - prev.t <= PRESS_ECHO_MS && Math.abs(e.x - prev.x) <= PRESS_ECHO_PX && Math.abs(e.y - prev.y) <= PRESS_ECHO_PX) {
+      continue;
+    }
+    kept.push(e);
   }
-  return { sessions, clusters };
+  return kept;
+}
+function fitLevel(rect, width, height, targetFill) {
+  if (!rect || rect.w <= 0 || rect.h <= 0) return null;
+  return Math.min(width * targetFill / rect.w, height * targetFill / rect.h);
+}
+function isSurfacePress(c, width, height, targetFill) {
+  const fit = fitLevel(c.rect, width, height, targetFill);
+  return fit !== null && fit < DRAG_FIT_LEVEL;
 }
 function planAutoZoom(track, options) {
   const style = resolveZoomStyle(options.style, options.params);
@@ -1470,31 +1519,31 @@ function planAutoZoom(track, options) {
     typingHold = style.typingHold,
     typingMinLevel = style.typingMinLevel
   } = options;
-  const { sessions, clusters } = groupTrack(track, {
+  const { sessions, clusters, surfaces } = groupTrack(track, {
     width,
     height,
     clusterGap,
     typingGap,
-    typingZoom
+    typingZoom,
+    targetFill
   });
   const eligible = clusters.filter((c) => c.length >= minClusterClicks);
   const clickSpans = [];
-  const dragReserved = [];
+  const dragReserved = surfaces.map((cluster, i) => {
+    const f = clusterFocus(cluster, width, height);
+    return {
+      id: `drag${i}`,
+      in: Math.max(0, cluster[0].t - lead),
+      out: cluster[cluster.length - 1].t + hold,
+      level: 1,
+      cx: f.cx,
+      cy: f.cy
+    };
+  });
   for (const cluster of eligible) {
     const first = cluster[0];
     const last = cluster[cluster.length - 1];
     const f = focusFor(cluster, width, height, targetFill, minLevel, maxLevel);
-    if (f.fit !== null && f.fit < DRAG_FIT_LEVEL) {
-      dragReserved.push({
-        id: `drag${dragReserved.length}`,
-        in: Math.max(0, first.t - lead),
-        out: last.t + hold,
-        level: 1,
-        cx: f.cx,
-        cy: f.cy
-      });
-      continue;
-    }
     clickSpans.push({
       in: Math.max(0, first.t - lead),
       out: last.t + hold,
@@ -1668,15 +1717,8 @@ function focusFor(cluster, width, height, targetFill, minLevel, maxLevel) {
   const n = cluster.length;
   const cx = clamp012(sx / n / width);
   const cy = clamp012(sy / n / height);
-  let level = maxLevel;
-  let fit = null;
-  if (maxW > 0 && maxH > 0) {
-    const fitX = width * targetFill / maxW;
-    const fitY = height * targetFill / maxH;
-    level = Math.min(fitX, fitY);
-    fit = level;
-  }
-  return { cx, cy, level: clamp2(level, minLevel, maxLevel), fit };
+  const level = fitLevel({ x: 0, y: 0, w: maxW, h: maxH }, width, height, targetFill) ?? maxLevel;
+  return { cx, cy, level: clamp2(level, minLevel, maxLevel) };
 }
 function clusterFocus(events, width, height) {
   let sx = 0;
@@ -1840,10 +1882,29 @@ function camBubbleRect(cam, W, H = 1080) {
     radius: cam.shape === "rounded" ? (cam.radius ?? 18) * s : size / 2
   };
 }
-function focusBounds(level, layout) {
+function focusBounds(level, layout, camera = "card") {
   if (level <= 1.001) {
     return { minX: 0.5, maxX: 0.5, minY: 0.5, maxY: 0.5 };
   }
+  if (camera === "stage") {
+    const x2 = stageAxisBounds(
+      layout.dx,
+      layout.dw,
+      layout.cardX,
+      layout.cardW,
+      layout.W,
+      level
+    );
+    const y2 = stageAxisBounds(
+      layout.dy,
+      layout.dh,
+      layout.cardY,
+      layout.cardH,
+      layout.H,
+      level
+    );
+    return { minX: x2.min, maxX: x2.max, minY: y2.min, maxY: y2.max };
+  }
   const x = axisBounds(
     layout.dx,
     layout.dw,
@@ -1873,8 +1934,19 @@ function axisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, level)
   }
   return { min: clamp013(lo), max: clamp013(hi) };
 }
-function clampFocus(cx, cy, level, layout) {
-  const b = focusBounds(level, layout);
+function stageAxisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, level) {
+  const b = CAMERA_COVER_MIN / 2 * viewport;
+  let lo = (coverOff + b / level - anchorOff) / anchorSize;
+  let hi = (coverOff + coverSize - b / level - anchorOff) / anchorSize;
+  if (lo > hi) {
+    const mid = (lo + hi) / 2;
+    lo = mid;
+    hi = mid;
+  }
+  return { min: clamp013(lo), max: clamp013(hi) };
+}
+function clampFocus(cx, cy, level, layout, camera = "card") {
+  const b = focusBounds(level, layout, camera);
   return {
     cx: Math.min(b.maxX, Math.max(b.minX, cx)),
     cy: Math.min(b.maxY, Math.max(b.minY, cy))
@@ -1883,6 +1955,45 @@ function clampFocus(cx, cy, level, layout) {
 function clamp013(v) {
   return Math.max(0, Math.min(1, v));
 }
+function cameraModel(frame) {
+  return frame?.camera === "stage" ? "stage" : "card";
+}
+var CAMERA_CENTRE_RAMP = 0.3;
+var CAMERA_COVER_MIN = 0.8;
+function cameraCentring(level) {
+  const u = clamp013((level - 1) / CAMERA_CENTRE_RAMP);
+  return u * u * (3 - 2 * u);
+}
+function zoomView(level, cx, cy, layout, camera = "card") {
+  const L = Math.max(1, level);
+  const fx = layout.dx + cx * layout.dw;
+  const fy = layout.dy + cy * layout.dh;
+  const ox = layout.W / 2;
+  const oy = layout.H / 2;
+  const t = camera === "stage" ? cameraCentring(L) : 0;
+  const wcx = fx + (ox - fx) / L * (1 - t);
+  const wcy = fy + (oy - fy) / L * (1 - t);
+  return { level: L, fx, fy, wcx, wcy, ox, oy };
+}
+function zoomViewport(level, cx, cy, layout, camera = "card") {
+  const v = zoomView(level, cx, cy, layout, camera);
+  const size = 1 / v.level;
+  return {
+    x: (v.wcx - layout.W / (2 * v.level)) / layout.W,
+    y: (v.wcy - layout.H / (2 * v.level)) / layout.H,
+    w: size,
+    h: size
+  };
+}
+function focusForViewportCentre(cX, cY, level, layout, camera = "card") {
+  const L = Math.max(1, level);
+  const t = camera === "stage" ? cameraCentring(L) : 0;
+  const a = 1 - (1 - t) / L;
+  if (a <= 1e-6) return { cx: 0.5, cy: 0.5 };
+  const fx = (cX * layout.W - layout.W / 2 * (1 - t) / L) / a;
+  const fy = (cY * layout.H - layout.H / 2 * (1 - t) / L) / a;
+  return { cx: (fx - layout.dx) / layout.dw, cy: (fy - layout.dy) / layout.dh };
+}
 function levelForFocusFraction(frac) {
   if (!(frac > 0)) return clampZoomLevel(Number.POSITIVE_INFINITY);
   return clampZoomLevel(Math.max(1.1, 1 / frac));
@@ -2787,6 +2898,7 @@ function followFocusEvents(span, cursor, space, layout, options = {}) {
   const safeRatio = options.safeRatio ?? FOLLOW_SAFE_RATIO;
   const recenter = options.recenter ?? FOLLOW_RECENTER;
   const lookahead = options.lookahead ?? 0;
+  const camera = options.camera ?? "card";
   const level = clampZoomLevel(span.level);
   if (!cursor.length || !space.w || !space.h || level <= 1.001) {
     return { entry: null, events: [] };
@@ -2797,12 +2909,7 @@ function followFocusEvents(span, cursor, space, layout, options = {}) {
     ny: clamp014(e.y / space.h)
   }));
   if (!pts.length) return { entry: null, events: [] };
-  let entryPt = pts[0];
-  for (const p of pts) {
-    if (p.t > span.in) break;
-    entryPt = p;
-  }
-  const entry = clampFocus(entryPt.nx, entryPt.ny, level, layout);
+  const entry = clampFocus(span.cx, span.cy, level, layout, camera);
   const thrX = safeRatio * layout.W / (2 * level * layout.dw);
   const thrY = safeRatio * layout.H / (2 * level * layout.dh);
   const events = [];
@@ -2815,7 +2922,7 @@ function followFocusEvents(span, cursor, space, layout, options = {}) {
     if (p.t < nextAllowed) continue;
     if (Math.abs(p.nx - cx) > thrX || Math.abs(p.ny - cy) > thrY) {
       const target = lookahead > 0 ? sampleAt2(pts, Math.min(p.t + lookahead, span.out)) : p;
-      const f = clampFocus(target.nx, target.ny, level, layout);
+      const f = clampFocus(target.nx, target.ny, level, layout, camera);
       if (Math.abs(f.cx - cx) < 1e-3 && Math.abs(f.cy - cy) < 1e-3) continue;
       events.push({ t: round2(p.t), cx: round2(f.cx), cy: round2(f.cy) });
       cx = f.cx;
@@ -5819,9 +5926,28 @@ var ON_FRAME = `(ctx, content, dt) => {
   // ceZs = the zoom transform's device scale, for the two values below that
   // are sized in DEVICE pixels inside a scaled user space.
   var ceZs = 1
+  // The camera model (cfr.camera; MIRRORS layout.ts zoomView \u2014 change them
+  // together). The magnifier scales the card about the focus, which stays
+  // where it is on screen; the stage camera also slides the card so the
+  // focus lands at the frame's centre, blended in over CAMERA_CENTRE_RAMP
+  // of level (a smoothstep, 0 at level 1) so a ramp through the band slides
+  // without a kink, and past the card's edge the ground shows. wcx/wcy is
+  // the content point at the frame's centre under either model; the two
+  // branches are the same map, the magnifier's kept in its old float order
+  // so every existing document renders byte-identically.
+  var camStage = cfr.camera === 'stage'
+  var fx = dx + zx * dw, fy = dy + zy * dh
+  var wcx = fx, wcy = fy
   if (lvl > 1.001 && !d.zoomSuppressed) {
-    var fx = dx + zx * dw, fy = dy + zy * dh
-    c.translate(fx, fy); c.scale(lvl, lvl); c.translate(-fx, -fy)
+    if (camStage) {
+      var ctu = Math.max(0, Math.min(1, (lvl - 1) / ${CAMERA_CENTRE_RAMP}))
+      var ctt = ctu * ctu * (3 - 2 * ctu)
+      wcx = fx + ((W / 2 - fx) / lvl) * (1 - ctt)
+      wcy = fy + ((H / 2 - fy) / lvl) * (1 - ctt)
+      c.translate(W / 2, H / 2); c.scale(lvl, lvl); c.translate(-wcx, -wcy)
+    } else {
+      c.translate(fx, fy); c.scale(lvl, lvl); c.translate(-fx, -fy)
+    }
     ceZs = lvl
   }
   // The card's shadows are cast by a body drawn OFF-CANVAS and brought back
@@ -5963,6 +6089,34 @@ var ON_FRAME = `(ctx, content, dt) => {
   // cursor coordinate space + drawn radius (shared by click effects + the dot)
   var space = (actM ? actM.cursorSpace : d.cursorSpace) || { w: vw, h: vh }
   var curSize = ((d.cursorStyle && d.cursorStyle.size) || 24) * s2 * 0.5
+  // The pointer's shape: an OS-style arrow (tip on the recorded point, a
+  // black body with a white edge, the shape of the pointer on the viewer's
+  // own screen) or the white dot every earlier take was cut with. One
+  // painter for both draw sites (in the card, and the ghost across a
+  // boundary); r is the dot's radius, so an arrow stands 2r tall.
+  var curArrow = !!(d.cursorStyle && d.cursorStyle.style === 'arrow')
+  function drawCur(cc, x, y, r, a, lw) {
+    cc.save()
+    if (curArrow) {
+      var h = 2 * r
+      var P = [[0, 0], [0, 0.72], [0.19, 0.55], [0.31, 0.83], [0.43, 0.78], [0.31, 0.5], [0.55, 0.5]]
+      cc.beginPath()
+      cc.moveTo(x, y)
+      for (var pi = 1; pi < P.length; pi++) cc.lineTo(x + P[pi][0] * h, y + P[pi][1] * h)
+      cc.closePath()
+      cc.lineJoin = 'round'
+      cc.fillStyle = 'rgba(0,0,0,' + (0.92 * a) + ')'
+      cc.strokeStyle = 'rgba(255,255,255,' + (0.95 * a) + ')'
+      cc.lineWidth = Math.max(1, lw * 0.75)
+      cc.fill(); cc.stroke()
+    } else {
+      cc.fillStyle = 'rgba(255,255,255,' + (0.95 * a) + ')'
+      cc.strokeStyle = 'rgba(0,0,0,' + (0.4 * a) + ')'
+      cc.lineWidth = lw
+      cc.beginPath(); cc.arc(x, y, r, 0, Math.PI * 2); cc.fill(); cc.stroke()
+    }
+    cc.restore()
+  }
 
   // click effects \u2014 pure f(t): d.clicks are
   // OUTPUT-anchored records baked at lowering (sorted by ot; re-baked on every
@@ -6136,16 +6290,14 @@ var ON_FRAME = `(ctx, content, dt) => {
     // moving: each pass leaves its point, mapped out of the zoom.
     if (trOut) {
       var tqX = ax, tqY = ay
-      if (lvl > 1.001 && !d.zoomSuppressed) { tqX = fx + (ax - fx) * lvl; tqY = fy + (ay - fy) * lvl }
+      if (lvl > 1.001 && !d.zoomSuppressed) {
+        if (camStage) { tqX = W / 2 + (ax - wcx) * lvl; tqY = H / 2 + (ay - wcy) * lvl }
+        else { tqX = fx + (ax - fx) * lvl; tqY = fy + (ay - fy) * lvl }
+      }
       if (tpG) trQa = [tqX, tqY]
       else { trQb = [tqX, tqY]; trQs = curSize * ckPress; trQw = s2 }
     } else if (cuA > 0.01) {
-      c.save()
-      c.fillStyle = 'rgba(255,255,255,' + (0.95 * cuA) + ')'
-      c.strokeStyle = 'rgba(0,0,0,' + (0.4 * cuA) + ')'
-      c.lineWidth = 2 * s2
-      c.beginPath(); c.arc(ax, ay, curSize * ckPress, 0, Math.PI * 2); c.fill(); c.stroke()
-      c.restore()
+      drawCur(c, ax, ay, curSize * ckPress, cuA, 2 * s2)
     }
   }
   if (fitCover) c.restore()
@@ -6230,12 +6382,7 @@ var ON_FRAME = `(ctx, content, dt) => {
     var tqBx = (tqB[0] - W / 2) * trSc + W / 2 + trOx * W, tqBy = (tqB[1] - H / 2) * trSc + H / 2 - trOy * H
     var tqX2 = tqAx + (tqBx - tqAx) * tqP, tqY2 = tqAy + (tqBy - tqAy) * tqP
     var tqR = trQs || (((d.cursorStyle && d.cursorStyle.size) || 24) * s * 0.5)
-    ovC.save()
-    ovC.fillStyle = 'rgba(255,255,255,0.95)'
-    ovC.strokeStyle = 'rgba(0,0,0,0.4)'
-    ovC.lineWidth = 2 * (trQw || s)
-    ovC.beginPath(); ovC.arc(tqX2, tqY2, tqR, 0, Math.PI * 2); ovC.fill(); ovC.stroke()
-    ovC.restore()
+    drawCur(ovC, tqX2, tqY2, tqR, 1, 2 * (trQw || s))
   }
   ov.sig = ovSig
   ov.active = camActiveNow || !!trOut
@@ -6574,6 +6721,7 @@ function lowerToComposition(input) {
   const layout = docCardLayout(doc);
   const meta = doc.source.meta;
   const zoomStyle = resolveZoomStyle(doc.zoomStyle, doc.zoomParams);
+  const camera = cameraModel(doc.frame);
   const zoomSpans = restSpansThroughTransitions(
     doc.zoom,
     rated,
@@ -6589,13 +6737,17 @@ function lowerToComposition(input) {
         {
           safeRatio: zoomStyle.followSafeRatio,
           recenter: zoomStyle.followRecenter,
-          lookahead: zoomStyle.followLookahead
+          lookahead: zoomStyle.followLookahead,
+          camera
         }
       );
       if (f.entry)
         return { ...z, cx: f.entry.cx, cy: f.entry.cy, followEvents: f.events };
     }
-    return { ...z, ...clampFocus(z.cx, z.cy, clampZoomLevel(z.level), layout) };
+    return {
+      ...z,
+      ...clampFocus(z.cx, z.cy, clampZoomLevel(z.level), layout, camera)
+    };
   });
   const data = {
     videoSrc: doc.source.videoKey,
@@ -6962,14 +7114,15 @@ function momentsFromDoc(doc, plan, opts = {}) {
     rect: null
   });
   if (track.length) {
-    const { sessions, clusters } = groupTrack(track, {
+    const { sessions, clusters, surfaces } = groupTrack(track, {
       width,
       height,
       clusterGap: style.clusterGap,
       typingGap: style.typingGap,
-      typingZoom: style.typingZoom
+      typingZoom: style.typingZoom,
+      targetFill: style.targetFill
     });
-    for (const c of clusters) {
+    const pressed = (c, surface) => {
       const f = clusterFocus(c, width, height);
       drafts.push({
         kind: "click",
@@ -6980,9 +7133,12 @@ function momentsFromDoc(doc, plan, opts = {}) {
         at: c[0].t,
         focus: { cx: f.cx, cy: f.cy },
         rect: f.rect,
-        clicks: c.length
+        clicks: c.length,
+        ...surface ? { surface: true } : {}
       });
-    }
+    };
+    for (const c of clusters) pressed(c, false);
+    for (const c of surfaces) pressed(c, true);
     for (const s of sessions) {
       const f = clusterFocus(s.events, width, height);
       drafts.push({
@@ -7102,6 +7258,7 @@ function momentsFromDoc(doc, plan, opts = {}) {
         h: round8(d.rect.h)
       } : null,
       ...d.clicks !== void 0 ? { clicks: d.clicks } : {},
+      ...d.surface ? { surface: true } : {},
       ...d.pings !== void 0 ? { pings: d.pings } : {},
       activity: activityOf(opts.bins, d),
       proposed,
@@ -7146,15 +7303,14 @@ function sceneChanges(bins, opts = {}) {
 }
 
 // src/digest/framing.ts
-function zoomWindow(span, layout) {
+function zoomWindow(span, layout, camera = "card") {
   const L = Math.max(1, span.level);
-  const { cx, cy } = clampFocus(span.cx, span.cy, L, layout);
-  const fx = layout.dx + cx * layout.dw;
-  const fy = layout.dy + cy * layout.dh;
-  const px0 = fx - fx / L;
-  const px1 = fx + (layout.W - fx) / L;
-  const py0 = fy - fy / L;
-  const py1 = fy + (layout.H - fy) / L;
+  const { cx, cy } = clampFocus(span.cx, span.cy, L, layout, camera);
+  const v = zoomViewport(L, cx, cy, layout, camera);
+  const px0 = v.x * layout.W;
+  const px1 = (v.x + v.w) * layout.W;
+  const py0 = v.y * layout.H;
+  const py1 = (v.y + v.h) * layout.H;
   return {
     x0: (px0 - layout.dx) / layout.dw,
     x1: (px1 - layout.dx) / layout.dw,
@@ -7162,9 +7318,9 @@ function zoomWindow(span, layout) {
     y1: (py1 - layout.dy) / layout.dh
   };
 }
-function zoomCoversRect(span, rect, layout, tol = 0.02) {
+function zoomCoversRect(span, rect, layout, tol = 0.02, camera = "card") {
   if (span.level <= 1.001) return true;
-  const w = zoomWindow(span, layout);
+  const w = zoomWindow(span, layout, camera);
   return rect.x >= w.x0 - tol && rect.x + rect.w <= w.x1 + tol && rect.y >= w.y0 - tol && rect.y + rect.h <= w.y1 + tol;
 }
 
@@ -9782,6 +9938,8 @@ export {
   AUDIO_PLAN_STEP,
   BACKGROUND_Z,
   BASE_FRAME_STYLE,
+  CAMERA_CENTRE_RAMP,
+  CAMERA_COVER_MIN,
   CAMERA_FAR,
   CAMERA_NEAR,
   CAM_CHAIN_GAP,
@@ -9948,6 +10106,8 @@ export {
   camRectFromPose,
   camRestPose,
   camTrackFromDoc,
+  cameraCentring,
+  cameraModel,
   cardEnter,
   cardExit,
   cardFields,
@@ -10002,6 +10162,7 @@ export {
   exportSizeFor,
   extractClicks,
   focusBounds,
+  focusForViewportCentre,
   followFocusEvents,
   frameGeometry,
   freezeLane,
@@ -10129,6 +10290,8 @@ export {
   zoomLane,
   zoomSpanForRange,
   zoomTrackFromDoc,
+  zoomView,
+  zoomViewport,
   zoomWindow
 };
 //# sourceMappingURL=index.js.map