@vosjs/studio-core 0.23.1 → 0.24.0

package/dist/index.js

@@ -1828,8 +1828,8 @@ function round(v) {
 // src/lower/lowerToComposition.ts
 import {
   EASINGS,
-  lerpArray,
-  sample,
+  lerpArray as lerpArray2,
+  sample as sample2,
   segmentRate as segmentRate2,
   sortKeyframes as sortKeyframes2,
   sourceToTimeline,
@@ -2661,14 +2661,14 @@ function resolveOverlayFx(clip, clipDuration) {
     const maxTotal = Math.max(dur, clipDuration * 0.9);
     st = Math.min(st, Math.max(0, (maxTotal - dur) / (upperN - 1)));
   }
-  const round12 = (v) => Math.round(v * 1e4) / 1e4;
+  const round13 = (v) => Math.round(v * 1e4) / 1e4;
   return {
     k: spec.fx,
     u: unit,
     d: FX_DIR[spec.direction ?? "forward"] ?? 0,
-    st: round12(st),
-    dur: round12(dur),
-    tt: round12(st * (upperN - 1) + dur),
+    st: round13(st),
+    dur: round13(dur),
+    tt: round13(st * (upperN - 1) + dur),
     units,
     n
   };
@@ -3057,12 +3057,280 @@ function round2(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
+// src/lower/pin.ts
+import { lerpArray, sample } from "@vosjs/timeline";
+var PIN_GAP = 24;
+var PIN_MARGIN = 24;
+var PIN_SAMPLE_HZ = 30;
+var PIN_SIMPLIFY_PX = 0.5;
+var PIN_EDGE_S = 0.35;
+var PIN_PRESS_WINDOW_S = 0.5;
+var PIN_TEXT_ADVANCE = 0.55;
+var SIDE_ORDER = ["right", "left", "below", "above"];
+function pinReferent(doc, pin) {
+  const meta = doc.source.meta;
+  const w = meta.width || 0;
+  const h = meta.height || 0;
+  if (pin.rect && validRect(pin.rect)) {
+    return { rect: { ...pin.rect }, by: "rect", at: null };
+  }
+  if (pin.step !== void 0) {
+    const step = findStep(meta.steps ?? [], pin.step);
+    if (!step || step.skipped) return null;
+    if (step.rect && validRect(step.rect) && w > 0 && h > 0) {
+      return {
+        rect: normRect(step.rect, w, h),
+        by: "step",
+        step,
+        at: step.tStart
+      };
+    }
+    const union = unionRects(
+      pressRects(doc, step.tStart - 0.05, step.tEnd + 0.05)
+    );
+    if (!union || w <= 0 || h <= 0) return null;
+    return { rect: normRect(union, w, h), by: "step", step, at: step.tStart };
+  }
+  if (pin.press !== void 0 && Number.isFinite(pin.press)) {
+    let best = null;
+    for (const e of doc.source.cursor) {
+      if (e.type !== "down" || !e.rect || !validRect(e.rect)) continue;
+      const t = e.t / 1e3;
+      const d = Math.abs(t - pin.press);
+      if (d > PIN_PRESS_WINDOW_S) continue;
+      if (!best || d < Math.abs(best.t - pin.press)) best = { t, rect: e.rect };
+    }
+    if (!best || w <= 0 || h <= 0) return null;
+    return { rect: normRect(best.rect, w, h), by: "press", at: best.t };
+  }
+  return null;
+}
+function findStep(steps, ref) {
+  const byId = steps.find((s) => s.id !== void 0 && s.id === ref);
+  if (byId) return byId;
+  const idx = typeof ref === "number" ? ref : Number(ref);
+  if (!Number.isInteger(idx)) return void 0;
+  return steps.find((s) => s.step === idx);
+}
+function pressRects(doc, from, to) {
+  const out = [];
+  for (const e of doc.source.cursor) {
+    if (e.type !== "down" && e.type !== "key") continue;
+    if (!e.rect || !validRect(e.rect)) continue;
+    const t = e.t / 1e3;
+    if (t < from || t > to) continue;
+    out.push(e.rect);
+  }
+  return out;
+}
+function unionRects(rects) {
+  if (!rects.length) return null;
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const r of rects) {
+    x0 = Math.min(x0, r.x);
+    y0 = Math.min(y0, r.y);
+    x1 = Math.max(x1, r.x + r.w);
+    y1 = Math.max(y1, r.y + r.h);
+  }
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+function validRect(r) {
+  return Number.isFinite(r.x) && Number.isFinite(r.y) && Number.isFinite(r.w) && Number.isFinite(r.h) && r.w > 0 && r.h > 0;
+}
+function normRect(r, w, h) {
+  return { x: r.x / w, y: r.y / h, w: r.w / w, h: r.h / h };
+}
+function pinBox(clip, layout) {
+  const scale = clip.transform.scale || 1;
+  if (clip.kind === "html") {
+    const pb = htmlLayerPictureBox(clip);
+    const wPic = htmlLayerWidth(clip) * layout.W * scale;
+    const unit = wPic / pb.width;
+    return { w: clip.box.width * unit, h: clip.box.height * unit };
+  }
+  if (clip.kind !== "text") {
+    const w = (clip.width ?? OVERLAY_MEDIA_DEFAULT_WIDTH) * layout.W * scale;
+    return { w, h: w / (16 / 9) };
+  }
+  const r = overlayRect(clip, estimateMeasure, layout.W, layout.H);
+  return { w: r.w, h: r.h };
+}
+function estimateMeasure(text, font, letterSpacingPx = 0) {
+  const m = /(\d+(?:\.\d+)?)px/.exec(font);
+  const px = m ? Number(m[1]) : 16;
+  return text.length * (px * PIN_TEXT_ADVANCE + letterSpacingPx);
+}
+function pinRectOnScreen(rect, t, layout, camera, zoomTrack) {
+  let level = 1;
+  let cx = 0.5;
+  let cy = 0.5;
+  let centring;
+  if (zoomTrack && zoomTrack.keyframes.length) {
+    const z = sample(zoomTrack, t, lerpArray);
+    level = z[0];
+    cx = z[1];
+    cy = z[2];
+    if (z.length > 3) centring = z[3];
+  }
+  const v = zoomView(level, cx, cy, layout, camera, centring);
+  const map = (nx, ny) => {
+    const px = layout.dx + nx * layout.dw;
+    const py = layout.dy + ny * layout.dh;
+    return {
+      x: v.ox + (px - v.wcx) * v.level,
+      y: v.oy + (py - v.wcy) * v.level
+    };
+  };
+  const a = map(rect.x, rect.y);
+  const b = map(rect.x + rect.w, rect.y + rect.h);
+  return { x: a.x, y: a.y, w: b.x - a.x, h: b.y - a.y };
+}
+function pinPlacement(input) {
+  const { clip, referent, layout, camera, zoomTrack, base, motion } = input;
+  const dur = Math.max(1e-3, clip.duration);
+  const gap = clip.pin?.gap ?? PIN_GAP;
+  const box = pinBox(clip, layout);
+  const W = layout.W;
+  const H = layout.H;
+  const refAt = (local) => pinRectOnScreen(referent, clip.start + local, layout, camera, zoomTrack);
+  const centreFor = (r, side2) => {
+    switch (side2) {
+      case "right":
+        return { x: r.x + r.w + gap + box.w / 2, y: r.y + r.h / 2 };
+      case "left":
+        return { x: r.x - gap - box.w / 2, y: r.y + r.h / 2 };
+      case "below":
+        return { x: r.x + r.w / 2, y: r.y + r.h + gap + box.h / 2 };
+      case "above":
+        return { x: r.x + r.w / 2, y: r.y - gap - box.h / 2 };
+    }
+  };
+  const fits = (c) => c.x - box.w / 2 >= PIN_MARGIN && c.x + box.w / 2 <= W - PIN_MARGIN && c.y - box.h / 2 >= PIN_MARGIN && c.y + box.h / 2 <= H - PIN_MARGIN;
+  const room = (c) => {
+    const x0 = Math.max(PIN_MARGIN, c.x - box.w / 2);
+    const x1 = Math.min(W - PIN_MARGIN, c.x + box.w / 2);
+    const y0 = Math.max(PIN_MARGIN, c.y - box.h / 2);
+    const y1 = Math.min(H - PIN_MARGIN, c.y + box.h / 2);
+    return Math.max(0, x1 - x0) * Math.max(0, y1 - y0);
+  };
+  let side;
+  const asked = clip.pin?.side ?? "auto";
+  if (asked !== "auto") side = asked;
+  else {
+    const edge = Math.min(PIN_EDGE_S, dur / 3);
+    const probes = [edge, dur / 2, dur - edge].map(refAt);
+    const fitting = SIDE_ORDER.find(
+      (s) => probes.every((r) => fits(centreFor(r, s)))
+    );
+    if (fitting) side = fitting;
+    else {
+      let best = SIDE_ORDER[0];
+      let bestRoom = -1;
+      for (const s of SIDE_ORDER) {
+        const total = probes.reduce((acc, r) => acc + room(centreFor(r, s)), 0);
+        if (total > bestRoom) {
+          bestRoom = total;
+          best = s;
+        }
+      }
+      side = best;
+    }
+  }
+  const clampC = (c) => {
+    const minX = Math.min(W / 2, PIN_MARGIN + box.w / 2);
+    const maxX = Math.max(W / 2, W - PIN_MARGIN - box.w / 2);
+    const minY = Math.min(H / 2, PIN_MARGIN + box.h / 2);
+    const maxY = Math.max(H / 2, H - PIN_MARGIN - box.h / 2);
+    return {
+      x: Math.max(minX, Math.min(maxX, c.x)),
+      y: Math.max(minY, Math.min(maxY, c.y))
+    };
+  };
+  const tipFor = (c) => {
+    switch (side) {
+      case "right":
+        return { x: c.x - box.w / 2, y: c.y };
+      case "left":
+        return { x: c.x + box.w / 2, y: c.y };
+      case "below":
+        return { x: c.x, y: c.y - box.h / 2 };
+      case "above":
+        return { x: c.x, y: c.y + box.h / 2 };
+    }
+  };
+  const n = Math.max(1, Math.ceil(dur * PIN_SAMPLE_HZ));
+  const poses = [];
+  const tips = [];
+  let clamped = 0;
+  for (let i = 0; i <= n; i++) {
+    const local = i === n ? dur : i / PIN_SAMPLE_HZ;
+    const want = centreFor(refAt(local), side);
+    const c = clampC(want);
+    clamped = Math.max(clamped, Math.hypot(c.x - want.x, c.y - want.y));
+    const pose = motion?.keyframes.length ? sample(motion, local, lerpArray) : base;
+    poses.push({
+      t: local,
+      value: [c.x / W, c.y / H, pose[2], pose[3], pose[4]],
+      ease: "linear"
+    });
+    const tp = tipFor(c);
+    tips.push({ t: local, value: [tp.x / W, tp.y / H], ease: "linear" });
+  }
+  return {
+    side,
+    track: { keyframes: simplify(poses, [W, H, 1, 1, 1]) },
+    tip: { keyframes: simplify(tips, [W, H]) },
+    clamped: round4(clamped),
+    box
+  };
+}
+function simplify(keys, scalePx) {
+  if (keys.length <= 2) return keys.map(roundKey);
+  const out = [roundKey(keys[0])];
+  let a = 0;
+  for (let i = 2; i <= keys.length - 1; i++) {
+    const ka = keys[a];
+    const ki = keys[i];
+    let ok = true;
+    for (let j = a + 1; j < i && ok; j++) {
+      const kj = keys[j];
+      const u = (kj.t - ka.t) / (ki.t - ka.t || 1);
+      for (let k = 0; k < kj.value.length; k++) {
+        const pred = ka.value[k] + (ki.value[k] - ka.value[k]) * u;
+        if (Math.abs(pred - kj.value[k]) * (scalePx[k] ?? 1) > PIN_SIMPLIFY_PX) {
+          ok = false;
+          break;
+        }
+      }
+    }
+    if (!ok) {
+      a = i - 1;
+      out.push(roundKey(keys[a]));
+    }
+  }
+  const last = keys[keys.length - 1];
+  if (out[out.length - 1].t !== round4(last.t)) out.push(roundKey(last));
+  return out;
+}
+function roundKey(k) {
+  return { t: round4(k.t), value: k.value.map(round42), ease: k.ease };
+}
+function round4(v) {
+  return Math.round(v * 1e3) / 1e3;
+}
+function round42(v) {
+  return Math.round(v * 1e5) / 1e5;
+}
+
 // src/lower/cursorIdle.ts
 var CURSOR_IDLE_HOLD = 1;
 var CURSOR_IDLE_FADE_OUT = 0.35;
 var CURSOR_IDLE_FADE_IN = 0.18;
 var CURSOR_IDLE_EPS_FRAC = 25e-4;
-var round4 = (n) => Math.round(n * 1e3) / 1e3;
+var round5 = (n) => Math.round(n * 1e3) / 1e3;
 function cursorIdleFade(track, o) {
   const moves = track.filter((e) => e.type === "move" || e.type === "down" || e.type === "up").map((e) => ({ t: e.t / 1e3, x: e.x, y: e.y }));
   if (moves.length === 0) return [];
@@ -3114,7 +3382,7 @@ function emit(keys, s, e) {
   push(keys, e + CURSOR_IDLE_FADE_IN, 1);
 }
 function push(keys, t, a) {
-  const rt = round4(t);
+  const rt = round5(t);
   if (keys.length > 0 && rt <= keys[keys.length - 1].t) {
     keys[keys.length - 1].a = a;
     return;
@@ -4622,7 +4890,7 @@ function gatedRect(rect, x, y, space) {
     return null;
   const m = RECT_CONTAIN_MARGIN;
   const inside = x >= rect.x - m && x <= rect.x + rect.w + m && y >= rect.y - m && y <= rect.y + rect.h + m;
-  return inside ? [round5(rect.x), round5(rect.y), round5(rect.w), round5(rect.h)] : null;
+  return inside ? [round6(rect.x), round6(rect.y), round6(rect.w), round6(rect.h)] : null;
 }
 function extractClicks(track, segments, opts) {
   const out = [];
@@ -4647,11 +4915,11 @@ function extractClicks(track, segments, opts) {
     const upSrc = st + Math.max(pressLen, 0.02);
     const up = keptOutputEnd(segments, st, upSrc, opts.media) ?? ot + CLICK_SYNTH_RELEASE;
     const click = {
-      ot: round5(ot),
-      up: round5(Math.max(up, ot + 0.02)),
-      st: round5(st),
-      x: round5(e.x),
-      y: round5(e.y),
+      ot: round6(ot),
+      up: round6(Math.max(up, ot + 0.02)),
+      st: round6(st),
+      x: round6(e.x),
+      y: round6(e.y),
       b: button
     };
     if (opts.rects && e.rect) {
@@ -4670,7 +4938,7 @@ function hexToRgbTriplet(hex) {
   const n = parseInt(h, 16);
   return [n >> 16, n >> 8 & 255, n & 255];
 }
-function round5(v) {
+function round6(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -4746,7 +5014,7 @@ function trackEmitter() {
       if (tt <= prev.t + 1e-6 && sameVec(prev.value, value)) return prev.t;
       if (tt <= prev.t + 1e-6) tt = prev.t + 1e-3;
     }
-    keyframes.push({ t: round6(tt), value: value.map(round6), ease });
+    keyframes.push({ t: round7(tt), value: value.map(round7), ease });
     return tt;
   };
   return { keyframes, push: push2 };
@@ -4923,7 +5191,7 @@ function camBubbleRectAt(doc, t) {
     H
   );
   if (!track.keyframes.length) return camBubbleRect(doc.cam, W, H);
-  return camRectFromPose(sample(track, t, lerpArray), doc.cam, W, H);
+  return camRectFromPose(sample2(track, t, lerpArray2), doc.cam, W, H);
 }
 function motionTrack(base, keys, dur) {
   const sorted = keys.filter((k) => Number.isFinite(k.at)).sort((a, b) => a.at - b.at);
@@ -4971,7 +5239,7 @@ function overlayMotionPoseAt(o, t) {
     Math.max(OVERLAY_MIN_DURATION, o.duration)
   );
   if (!track.keyframes.length) return null;
-  return [...sample(track, t, lerpArray)];
+  return [...sample2(track, t, lerpArray2)];
 }
 function objectMotionBase(o) {
   const t = o.transform3d;
@@ -5001,7 +5269,7 @@ function objectMotionPoseAt(o, t, clipDur) {
     o.span?.duration ?? clipDur
   );
   if (!track.keyframes.length) return null;
-  return [...sample(track, t, lerpArray)];
+  return [...sample2(track, t, lerpArray2)];
 }
 var FRAME_STEP_SRC = `
   function stepPaused(vid, srcT) {
@@ -6383,6 +6651,50 @@ var ON_FRAME = `(ctx, content, dt) => {
     }
   }
 
+  // pinned layers' marks \u2014 a standing ring or underline on a layer's
+  // REFERENT for the layer's life (d.pins: OUTPUT-anchored records baked at
+  // lowering, the referent in normalised video fractions). Painted inside the
+  // zoom transform so the mark sits on the element under any level or pose,
+  // at a constant on-screen weight (\xF7 ceZs), with the layer's own entrance
+  // and exit. Locals are pn-prefixed (one var scope). Skipped on the ghost
+  // pass like the effects.
+  var pns = d.pins || []
+  if (pns.length && !tpG) {
+    for (var pi = 0; pi < pns.length; pi++) {
+      var pn = pns[pi]
+      if (!pn.mark || pn.mark === 'none') continue
+      var pnT = t - pn.start
+      if (pnT < 0 || pnT > pn.dur) continue
+      var pnA = 1
+      if (pnT < 0.35) { var pnU = pnT / 0.35; pnA = 1 - Math.pow(1 - pnU, 3) }
+      if (pn.dur - pnT < 0.35) { var pnV = (pn.dur - pnT) / 0.35; pnA = Math.min(pnA, 1 - Math.pow(1 - pnV, 3)) }
+      if (pnA <= 0.004) continue
+      var pnX = dx + pn.x * dw, pnY = dy + pn.y * dh, pnW = pn.w * dw, pnH = pn.h * dh
+      var pnLw = 2 * s2 / ceZs, pnPad = 6 * s2 / ceZs
+      var pnCol = pn.color || 'rgba(255,255,255,0.95)'
+      c.save()
+      c.globalAlpha = pnA
+      if (pn.mark === 'underline') {
+        // a bar under the referent: dark rim, then the ink
+        var pnBy = pnY + pnH + pnPad * 0.5
+        c.fillStyle = 'rgba(0,0,0,0.35)'
+        c.fillRect(pnX - pnLw, pnBy - pnLw, pnW + pnLw * 2, pnLw * 1.5 + pnLw * 2)
+        c.fillStyle = pnCol
+        c.fillRect(pnX, pnBy, pnW, pnLw * 1.5)
+      } else {
+        // a ring around the referent: the cursor's dual stroke, a dark rim
+        // under the ink, legible on any content
+        c.lineWidth = pnLw + 2 * s2 / ceZs
+        c.strokeStyle = 'rgba(0,0,0,0.35)'
+        rr(pnX - pnPad, pnY - pnPad, pnW + pnPad * 2, pnH + pnPad * 2, pnPad, c); c.stroke()
+        c.lineWidth = pnLw
+        c.strokeStyle = pnCol
+        rr(pnX - pnPad, pnY - pnPad, pnW + pnPad * 2, pnH + pnPad * 2, pnPad, c); c.stroke()
+      }
+      c.restore()
+    }
+  }
+
   // cursor (SOURCE-anchored samples, read at the on-screen source moment).
   // The dot is the only thing cursorStyle.visible hides \u2014 the track still drives
   // cursor-follow zoom, and click effects draw above on their own switch.
@@ -6445,8 +6757,15 @@ var ON_FRAME = `(ctx, content, dt) => {
   // Wait only for the FIRST decoded frame, then keep drawing through seeks.
   if (camV && camV.readyState >= 2) r.camHasFrame = true
   var camActiveNow = !!(camV && camOn && camS.visible !== false && r.camHasFrame)
+  // A pinned layer's leader is live for the layer's life: the overlay layer
+  // repaints while one is up (the referent moves with the camera).
+  var pqs = d.pins || [], pqLive = false
+  for (var pl = 0; pl < pqs.length; pl++) {
+    var pq0 = pqs[pl]
+    if (pq0.leader && t >= pq0.start && t <= pq0.start + pq0.dur) { pqLive = true; break }
+  }
   var ovSig = W + 'x' + H
-  var ovDirty = ov.sig !== ovSig || camActiveNow || ov.active || !!trOut
+  var ovDirty = ov.sig !== ovSig || camActiveNow || ov.active || !!trOut || pqLive
   if (ovDirty) {
   ovC.clearRect(0, 0, W, H)
   // webcam bubble \u2014 pinned to the frame corner regardless of card tilt/zoom.
@@ -6496,6 +6815,57 @@ var ON_FRAME = `(ctx, content, dt) => {
       ovC.restore()
     }
   }
+  // pinned layers' leaders \u2014 a hairline from the layer's near edge (the
+  // baked tip track, clip-local frame fractions) to the referent's near
+  // edge, the referent mapped through the camera the way the boundary dot
+  // is, with a dot at the referent. Fades with the layer; rides the rise
+  // entrance so the line meets the card as it lands.
+  if (pqLive) {
+    for (var pj = 0; pj < pqs.length; pj++) {
+      var pq = pqs[pj]
+      if (!pq.leader) continue
+      var pqT = t - pq.start
+      if (pqT < 0 || pqT > pq.dur) continue
+      var pqA = 1, pqRise = 0
+      if (pqT < 0.35) {
+        var pqU = 1 - Math.pow(1 - pqT / 0.35, 3)
+        pqA = pqU
+        if (pq.enter === 'rise') pqRise = (1 - pqU) * 24 * s
+      }
+      if (pq.dur - pqT < 0.35) { var pqV = (pq.dur - pqT) / 0.35; pqA = Math.min(pqA, 1 - Math.pow(1 - pqV, 3)) }
+      if (pqA <= 0.004 || !pq.tip || !pq.tip.keyframes || !pq.tip.keyframes.length) continue
+      var pqTip = TL.sample(pq.tip, pqT, TL.lerpArray)
+      var pqTx = pqTip[0] * W, pqTy = pqTip[1] * H + pqRise
+      // the referent's corners in frame space under the live camera
+      var pqAx = dx + pq.x * dw, pqAy = dy + pq.y * dh
+      var pqBx = dx + (pq.x + pq.w) * dw, pqBy = dy + (pq.y + pq.h) * dh
+      if (lvl > 1.001 && !d.zoomSuppressed) {
+        if (camStage) {
+          pqAx = W / 2 + (pqAx - wcx) * lvl; pqAy = H / 2 + (pqAy - wcy) * lvl
+          pqBx = W / 2 + (pqBx - wcx) * lvl; pqBy = H / 2 + (pqBy - wcy) * lvl
+        } else {
+          pqAx = fx + (pqAx - fx) * lvl; pqAy = fy + (pqAy - fy) * lvl
+          pqBx = fx + (pqBx - fx) * lvl; pqBy = fy + (pqBy - fy) * lvl
+        }
+      }
+      var pqRx = pq.side === 'right' ? pqBx : pq.side === 'left' ? pqAx : (pqAx + pqBx) / 2
+      var pqRy = pq.side === 'below' ? pqBy : pq.side === 'above' ? pqAy : (pqAy + pqBy) / 2
+      var pqCol = pq.color || 'rgba(255,255,255,0.95)'
+      var pqLw = 2 * s
+      ovC.save()
+      ovC.globalAlpha = pqA
+      ovC.lineCap = 'round'
+      ovC.strokeStyle = 'rgba(0,0,0,0.35)'; ovC.lineWidth = pqLw + 2 * s
+      ovC.beginPath(); ovC.moveTo(pqTx, pqTy); ovC.lineTo(pqRx, pqRy); ovC.stroke()
+      ovC.strokeStyle = pqCol; ovC.lineWidth = pqLw
+      ovC.beginPath(); ovC.moveTo(pqTx, pqTy); ovC.lineTo(pqRx, pqRy); ovC.stroke()
+      ovC.fillStyle = 'rgba(0,0,0,0.35)'
+      ovC.beginPath(); ovC.arc(pqRx, pqRy, 5 * s, 0, Math.PI * 2); ovC.fill()
+      ovC.fillStyle = pqCol
+      ovC.beginPath(); ovC.arc(pqRx, pqRy, 4 * s, 0, Math.PI * 2); ovC.fill()
+      ovC.restore()
+    }
+  }
   // The boundary dot: the outgoing card's last cursor point and the
   // incoming's current one, each carried by its card's move, one dot on
   // the eased lerp between them (the idle fade never fires across a page
@@ -6510,7 +6880,7 @@ var ON_FRAME = `(ctx, content, dt) => {
     drawCur(ovC, tqX2, tqY2, tqR, 1, 2 * (trQw || s))
   }
   ov.sig = ovSig
-  ov.active = camActiveNow || !!trOut
+  ov.active = camActiveNow || !!trOut || pqLive
   if (ov.texture) ov.texture.needsUpdate = true
   }
 
@@ -6604,7 +6974,7 @@ var ON_FRAME = `(ctx, content, dt) => {
     window.__voilaDebug = { cv: cv, bgCv: bg.canvas, ovCv: ov.canvas, W: W, H: H, glW: gl && gl.width, glH: gl && gl.height, t: t, canvases: document.querySelectorAll('canvas').length }
   }
 }`;
-function studioLayerData(layers, duration) {
+function studioLayerData(layers, duration, pins) {
   const rec = "source" in layers ? layers : null;
   return {
     // Music/SFX clips with their gain envelopes baked (shared truth for the
@@ -6613,14 +6983,14 @@ function studioLayerData(layers, duration) {
     // needs a decoded recording, which a sync lowering can't produce.
     audio: (layers.audio ?? []).map((c) => ({
       key: c.key,
-      start: round6(c.start),
-      in: round6(c.in),
-      out: round6(c.out),
-      gain: round6(c.gain),
+      start: round7(c.start),
+      in: round7(c.in),
+      out: round7(c.out),
+      gain: round7(c.gain),
       loop: !!c.loop,
-      len: round6(clipLength(c)),
+      len: round7(clipLength(c)),
       duck: !!c.duck,
-      env: clipEnvelope(c).map((p) => ({ t: round6(p.t), g: round6(p.g) }))
+      env: clipEnvelope(c).map((p) => ({ t: round7(p.t), g: round7(p.g) }))
     })),
     // Object clips: numbers resolved HERE; shapes are the drafted engine spec.
     ...layers.objects && layers.objects.length ? {
@@ -6633,17 +7003,17 @@ function studioLayerData(layers, duration) {
         } : o.asset.kind === "text3d" ? resolveText3dAsset(o.asset) : { kind: "gltf", key: o.asset.key },
         ...o.span ? {
           span: {
-            start: round6(o.span.start),
-            duration: round6(o.span.duration)
+            start: round7(o.span.start),
+            duration: round7(o.span.duration)
           }
         } : {},
-        x: round6(o.transform3d.x),
-        y: round6(o.transform3d.y),
-        z: round6(o.transform3d.z),
-        rx: round6(o.transform3d.rx),
-        ry: round6(o.transform3d.ry),
-        rz: round6(o.transform3d.rz),
-        scale: round6(o.transform3d.scale || OBJECT_DEFAULT_SCALE),
+        x: round7(o.transform3d.x),
+        y: round7(o.transform3d.y),
+        z: round7(o.transform3d.z),
+        rx: round7(o.transform3d.rx),
+        ry: round7(o.transform3d.ry),
+        rz: round7(o.transform3d.rz),
+        scale: round7(o.transform3d.scale || OBJECT_DEFAULT_SCALE),
         anim: idleKey(o),
         // Pose keyframes: clip-local [x,y,z,rx,ry,rz,scale] track,
         // sampled at t − span.start. Omitted when absent — parity.
@@ -6670,18 +7040,20 @@ function studioLayerData(layers, duration) {
         const base = {
           id: o.id,
           kind: o.kind,
-          start: round6(o.start),
-          dur: round6(Math.max(OVERLAY_MIN_DURATION, o.duration)),
-          x: round6(o.transform.x),
-          y: round6(o.transform.y),
-          scale: round6(o.transform.scale || 1),
-          rot: round6(o.transform.rotation || 0),
+          start: round7(o.start),
+          dur: round7(Math.max(OVERLAY_MIN_DURATION, o.duration)),
+          x: round7(o.transform.x),
+          y: round7(o.transform.y),
+          scale: round7(o.transform.scale || 1),
+          rot: round7(o.transform.rotation || 0),
           enter: enterKey(o),
           exit: exitKey(o),
           // Pose keyframes: a CLIP-LOCAL [x, y, scale, rot, opacity]
           // track, sampled in ON_FRAME at t − start. Omitted when the clip
           // has no motion — data byte parity.
           ...(() => {
+            const pinned = pins?.get(o.id);
+            if (pinned) return { track: pinned.track };
             if (!o.motion || !o.motion.length) return {};
             const mb = overlayMotionBase(o);
             const track = motionTrack(
@@ -6698,10 +7070,10 @@ function studioLayerData(layers, duration) {
             ...base,
             kind: "image",
             key: hl.key,
-            w: round6(hl.width),
+            w: round7(hl.width),
             radius: 0,
             shadow: "none",
-            opacity: round6(o.opacity ?? 1),
+            opacity: round7(o.opacity ?? 1),
             html: hl.html
           };
         }
@@ -6718,8 +7090,8 @@ function studioLayerData(layers, duration) {
               ...o.frame.browserBar?.theme ? { theme: o.frame.browserBar.theme } : {}
             },
             lean: [
-              round6(o.frame.lean?.rx ?? 0),
-              round6(o.frame.lean?.ry ?? 0)
+              round7(o.frame.lean?.rx ?? 0),
+              round7(o.frame.lean?.ry ?? 0)
             ],
             shadow: o.frame.shadow ?? LAYER_CARD_SHADOW,
             shadowContact: o.frame.shadowContact ?? 0,
@@ -6735,17 +7107,17 @@ function studioLayerData(layers, duration) {
             for (const ev of lm.cursor) {
               if (ev.type === "down")
                 clicks.push({
-                  t: round6(ev.t / 1e3),
-                  x: round6(ev.x),
-                  y: round6(ev.y)
+                  t: round7(ev.t / 1e3),
+                  x: round7(ev.x),
+                  y: round7(ev.y)
                 });
             }
             return {
               cur: {
                 pts: sm.map((p) => ({
-                  t: round6(p.t),
-                  x: round6(p.x),
-                  y: round6(p.y)
+                  t: round7(p.t),
+                  x: round7(p.x),
+                  y: round7(p.y)
                 })),
                 space: { w: lm.meta.width, h: lm.meta.height },
                 size: rec.cursor.size,
@@ -6760,7 +7132,7 @@ function studioLayerData(layers, duration) {
             ...lm && lm.crop ? { crop: lm.crop } : {},
             ...lmCard ? { card: lmCard } : {},
             ...lmFacts,
-            w: round6(o.width ?? OVERLAY_MEDIA_DEFAULT_WIDTH),
+            w: round7(o.width ?? OVERLAY_MEDIA_DEFAULT_WIDTH),
             radius: o.radius ?? OVERLAY_MEDIA_DEFAULT_RADIUS,
             opacity: o.opacity ?? 1,
             loop: !!o.loop,
@@ -6770,7 +7142,7 @@ function studioLayerData(layers, duration) {
             ...o.shadow ? { shadow: o.shadow } : {},
             ...o.border && o.border.width > 0 ? {
               border: {
-                width: round6(o.border.width),
+                width: round7(o.border.width),
                 color: o.border.color
               }
             } : {}
@@ -6790,11 +7162,11 @@ function studioLayerData(layers, duration) {
           // Style-v2 fields bake only when non-default (byte parity for
           // older docs); ON_FRAME reads them unconditionally.
           ...st.fontStyle === "italic" ? { sty: "italic" } : {},
-          ...o.maxWidth ? { mw: round6(o.maxWidth) } : {},
-          ...st.letterSpacing ? { ls: round6(st.letterSpacing) } : {},
-          ...st.lineHeight !== OVERLAY_LINE_HEIGHT ? { lh: round6(st.lineHeight) } : {},
+          ...o.maxWidth ? { mw: round7(o.maxWidth) } : {},
+          ...st.letterSpacing ? { ls: round7(st.letterSpacing) } : {},
+          ...st.lineHeight !== OVERLAY_LINE_HEIGHT ? { lh: round7(st.lineHeight) } : {},
           ...st.align !== "center" ? { align: st.align } : {},
-          ...st.stroke ? { stroke: { c: st.stroke.color, w: round6(st.stroke.width) } } : {},
+          ...st.stroke ? { stroke: { c: st.stroke.color, w: round7(st.stroke.width) } } : {},
           // Hosted face behind an override: ON_FRAME lazy-loads it so a
           // live family/weight edit paints without a LOAD (SETUP only
           // runs on cold load).
@@ -6807,10 +7179,10 @@ function studioLayerData(layers, duration) {
           ...bx ? {
             box: {
               c: bx.color,
-              o: round6(bx.opacity),
-              px: round6(bx.padX),
-              py: round6(bx.padY),
-              r: round6(bx.radius)
+              o: round7(bx.opacity),
+              px: round7(bx.padX),
+              py: round7(bx.padY),
+              r: round7(bx.radius)
             }
           } : {},
           // Entrance animation: segmentation + timing normalized
@@ -6844,36 +7216,22 @@ function lowerToComposition(input) {
     sourceDuration: (doc.source.meta.durationMs || 0) / 1e3
   }) : [];
   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,
+  const zoomSpans = loweredZoomSpans(
+    doc,
     rated,
     transitions,
-    ZOOM_SPAN_MIN
-  ).map((z) => {
-    if (z.focusMode === "auto") {
-      const f = followFocusEvents(
-        z,
-        doc.source.cursor,
-        { w: meta.width, h: meta.height },
-        layout,
-        {
-          safeRatio: zoomStyle.followSafeRatio,
-          recenter: zoomStyle.followRecenter,
-          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, camera)
-    };
-  });
+    layout,
+    camera,
+    zoomStyle
+  );
+  const zoomTrack = prependEntrance(
+    zoomTrackFromDoc(zoomSpans, rated, zoomStyle),
+    entranceZoomKeyframes(cardEnter(doc.frame))
+  );
+  const pins = resolvePins(doc, layout, camera, zoomTrack);
+  const pinsData = pinsDataOf(doc, pins);
   const data = {
     videoSrc: doc.source.videoKey,
     isImage: doc.source.sourceKind === "image",
@@ -6896,17 +7254,17 @@ function lowerToComposition(input) {
     // Rated segments (speed spans pre-intersected): ON_FRAME's mapTime and the
     // export's audio splice read the rate straight off each segment.
     segments: rated.map((seg) => ({
-      in: round6(seg.in),
-      out: round6(seg.out),
-      ...seg.rate !== void 0 && seg.rate !== 1 ? { rate: round6(seg.rate) } : {},
+      in: round7(seg.in),
+      out: round7(seg.out),
+      ...seg.rate !== void 0 && seg.rate !== 1 ? { rate: round7(seg.rate) } : {},
       ...seg.media ? { media: seg.media } : {}
     })),
     frame: doc.frame,
     micGain: doc.micGain ?? 1,
     cursor: smoothed.map((p) => ({
-      t: round6(p.t),
-      x: round6(p.x),
-      y: round6(p.y)
+      t: round7(p.t),
+      x: round7(p.x),
+      y: round7(p.y)
     })),
     cursorStyle: doc.cursor,
     cursorSpace: { w: doc.source.meta.width, h: doc.source.meta.height },
@@ -6929,9 +7287,9 @@ function lowerToComposition(input) {
           crop: m.crop ?? null,
           hasAudio: !!m.meta.hasAudio,
           cursor: sm.map((p) => ({
-            t: round6(p.t),
-            x: round6(p.x),
-            y: round6(p.y)
+            t: round7(p.t),
+            x: round7(p.x),
+            y: round7(p.y)
           })),
           cursorSpace: { w: m.meta.width, h: m.meta.height },
           // The card this media wears (its own placement, bar, corner,
@@ -6950,11 +7308,11 @@ function lowerToComposition(input) {
     // intensities/colors become numbers HERE — ON_FRAME reads no registry).
     ...clickFxData(doc, rated),
     // Rated segments so zoom spans land at their speed-adjusted output times.
-    // A pull-out entrance writes the track's head.
-    zoomTrack: prependEntrance(
-      zoomTrackFromDoc(zoomSpans, rated, zoomStyle),
-      entranceZoomKeyframes(cardEnter(doc.frame))
-    ),
+    zoomTrack,
+    // Pinned layers' marks and leaders: the referent (normalised video
+    // fractions) plus the leader's tip track, painted by ON_FRAME beside the
+    // camera. Absent when no pinned layer asks for either — byte parity.
+    ...pinsData.length ? { pins: pinsData } : {},
     // Tilt spans: OUTPUT-time [rx, ry] degree track. The rest pose is
     // FLAT — there is no static card tilt any more — and the motion constants
     // come from the camera style's tilt personality ('drift' slows its
@@ -6987,7 +7345,7 @@ function lowerToComposition(input) {
   };
   const entryData = {
     lights: true,
-    ...studioLayerData(doc, duration)
+    ...studioLayerData(doc, duration, pins)
   };
   const config = {
     version: 2,
@@ -7013,6 +7371,128 @@ function lowerToComposition(input) {
   };
   return { config, data, stack: { [STUDIO_ENTRY_ID]: entryData }, duration };
 }
+function loweredZoomSpans(doc, rated, transitions, layout, camera, zoomStyle) {
+  const meta = doc.source.meta;
+  return restSpansThroughTransitions(
+    doc.zoom,
+    rated,
+    transitions,
+    ZOOM_SPAN_MIN
+  ).map((z) => {
+    if (z.focusMode === "auto") {
+      const f = followFocusEvents(
+        z,
+        doc.source.cursor,
+        { w: meta.width, h: meta.height },
+        layout,
+        {
+          safeRatio: zoomStyle.followSafeRatio,
+          recenter: zoomStyle.followRecenter,
+          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, camera)
+    };
+  });
+}
+function docZoomTrack(input) {
+  const doc = migrateMotion(input);
+  const rated = ratedSegments(doc);
+  const transitions = docTransitions(doc);
+  const layout = docCardLayout(doc);
+  const camera = cameraModel(doc.frame);
+  const zoomStyle = resolveZoomStyle(doc.zoomStyle, doc.zoomParams);
+  const spans = loweredZoomSpans(
+    doc,
+    rated,
+    transitions,
+    layout,
+    camera,
+    zoomStyle
+  );
+  return prependEntrance(
+    zoomTrackFromDoc(spans, rated, zoomStyle),
+    entranceZoomKeyframes(cardEnter(doc.frame))
+  );
+}
+function resolvePins(doc, layout, camera, zoomTrack) {
+  const out = /* @__PURE__ */ new Map();
+  for (const o of doc.overlays ?? []) {
+    if (!o.pin) continue;
+    const ref = pinReferent(doc, o.pin);
+    if (!ref) continue;
+    const base = overlayMotionBase(o);
+    const motion = o.motion && o.motion.length ? motionTrack(
+      base,
+      overlayMotionKeys(o, base),
+      Math.max(OVERLAY_MIN_DURATION, o.duration)
+    ) : null;
+    out.set(
+      o.id,
+      pinPlacement({
+        clip: o,
+        referent: ref.rect,
+        layout,
+        camera,
+        zoomTrack,
+        base,
+        motion
+      })
+    );
+  }
+  return out;
+}
+function overlayPinPoseAt(doc, o, t) {
+  if (!o.pin) return null;
+  const layout = docCardLayout(doc);
+  const camera = cameraModel(doc.frame);
+  const pins = resolvePins(
+    { ...doc, overlays: [o] },
+    layout,
+    camera,
+    docZoomTrack(doc)
+  );
+  const p = pins.get(o.id);
+  if (!p) return null;
+  return [...sample2(p.track, t, lerpArray2)];
+}
+function pinsDataOf(doc, pins) {
+  const out = [];
+  for (const o of doc.overlays ?? []) {
+    const p = o.pin;
+    const placed = p ? pins.get(o.id) : void 0;
+    if (!p || !placed) continue;
+    const mark = p.mark ?? "none";
+    if (mark === "none" && !p.leader) continue;
+    const ref = pinReferent(doc, p);
+    if (!ref) continue;
+    out.push({
+      id: o.id,
+      start: round7(o.start),
+      dur: round7(Math.max(OVERLAY_MIN_DURATION, o.duration)),
+      x: round43(ref.rect.x),
+      y: round43(ref.rect.y),
+      w: round43(ref.rect.w),
+      h: round43(ref.rect.h),
+      side: placed.side,
+      mark,
+      leader: !!p.leader,
+      ...p.color ? { color: p.color } : {},
+      enter: enterKey(o),
+      tip: placed.tip
+    });
+  }
+  return out;
+}
+function round43(v) {
+  return Math.round(v * 1e5) / 1e5;
+}
 function clickFxData(doc, rated) {
   const fx = doc.cursor.clickFx;
   const on = fx.style !== "none" || fx.press;
@@ -7046,7 +7526,7 @@ function clickFxData(doc, rated) {
     }
   };
 }
-function round6(v) {
+function round7(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -7136,8 +7616,8 @@ function planAutoSpeed(track, opts) {
   accepted.sort((a, b) => a.in - b.in);
   return accepted.map((c, i) => ({
     id: `s${i}`,
-    in: round7(c.in),
-    out: round7(c.out),
+    in: round8(c.in),
+    out: round8(c.out),
     rate: clampSpeedRate(c.rate),
     source: "auto"
   }));
@@ -7190,7 +7670,7 @@ function collectRuns(evs, gap, minLen, emit2) {
   }
   flush();
 }
-function round7(v) {
+function round8(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -7371,16 +7851,16 @@ function momentsFromDoc(doc, plan, opts = {}) {
     return {
       id: `m${String(i + 1).padStart(2, "0")}`,
       kind: d.kind,
-      source: { in: round8(d.in), out: round8(d.out) },
-      output: output ? { in: round8(output.start), out: round8(output.end) } : null,
-      at: d.at === null ? null : round8(d.at),
-      outputAt: outAt ? round8(outAt.start) : null,
-      focus: d.focus ? { cx: round8(d.focus.cx), cy: round8(d.focus.cy) } : null,
+      source: { in: round9(d.in), out: round9(d.out) },
+      output: output ? { in: round9(output.start), out: round9(output.end) } : null,
+      at: d.at === null ? null : round9(d.at),
+      outputAt: outAt ? round9(outAt.start) : null,
+      focus: d.focus ? { cx: round9(d.focus.cx), cy: round9(d.focus.cy) } : null,
       rect: d.rect ? {
-        x: round8(d.rect.x),
-        y: round8(d.rect.y),
-        w: round8(d.rect.w),
-        h: round8(d.rect.h)
+        x: round9(d.rect.x),
+        y: round9(d.rect.y),
+        w: round9(d.rect.w),
+        h: round9(d.rect.h)
       } : null,
       ...d.clicks !== void 0 ? { clicks: d.clicks } : {},
       ...d.surface ? { surface: true } : {},
@@ -7401,7 +7881,7 @@ function activityOf(bins, d) {
     sum += bins[i];
     n++;
   }
-  return n ? round8(sum / n) : null;
+  return n ? round9(sum / n) : null;
 }
 function saidOver(transcript, d) {
   if (!transcript?.length) return null;
@@ -7410,7 +7890,7 @@ function saidOver(transcript, d) {
   const text = transcript.filter((s) => s.start < hi && s.end > lo).map((s) => s.text.trim()).filter(Boolean).join(" ");
   return text || null;
 }
-function round8(v) {
+function round9(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -7904,8 +8384,8 @@ function buildDigest(input) {
   return {
     digestVersion: DIGEST_VERSION,
     take: {
-      sourceDuration: round9(meta.durationMs / 1e3),
-      outputDuration: round9(input.outputDuration),
+      sourceDuration: round10(meta.durationMs / 1e3),
+      outputDuration: round10(input.outputDuration),
       width: meta.width,
       height: meta.height,
       captureWidth: meta.captureWidth ?? null,
@@ -7954,7 +8434,7 @@ function buildDigest(input) {
 function outputDurationOf(doc) {
   return docOutputDuration(doc);
 }
-function round9(v) {
+function round10(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -7980,20 +8460,20 @@ function setSpeedInRange(spans, srcIn, srcOut, rate) {
       continue;
     }
     if (srcIn - s.in >= MIN_REMAINDER)
-      kept.push({ ...s, out: round10(srcIn), source: "manual" });
+      kept.push({ ...s, out: round11(srcIn), source: "manual" });
     if (s.out - srcOut >= MIN_REMAINDER)
       kept.push({
         ...s,
         id: mintId(used),
-        in: round10(srcOut),
+        in: round11(srcOut),
         source: "manual"
       });
   }
   if (rate != null)
     kept.push({
       id: mintId(used),
-      in: round10(srcIn),
-      out: round10(srcOut),
+      in: round11(srcIn),
+      out: round11(srcOut),
       rate: clampSpeedRate(rate),
       source: "manual"
     });
@@ -8009,9 +8489,9 @@ function removeSourceRange(segments, srcIn, srcOut) {
       next.push(seg);
       continue;
     }
-    if (srcIn - seg.in >= MIN_SEGMENT) next.push({ ...seg, out: round10(srcIn) });
+    if (srcIn - seg.in >= MIN_SEGMENT) next.push({ ...seg, out: round11(srcIn) });
     if (seg.out - srcOut >= MIN_SEGMENT)
-      next.push({ ...seg, in: round10(srcOut) });
+      next.push({ ...seg, in: round11(srcOut) });
   }
   return next.length ? next : [...segments];
 }
@@ -8029,8 +8509,8 @@ function zoomSpanForRange(zoom, srcIn, srcOut) {
   while (used.has(`u${n}`)) n++;
   return {
     id: `u${n}`,
-    in: round10(start),
-    out: round10(end),
+    in: round11(start),
+    out: round11(end),
     level: DEFAULT_ZOOM_LEVEL,
     cx: 0.5,
     cy: 0.5,
@@ -8044,7 +8524,7 @@ function mintId(used) {
   used.add(id);
   return id;
 }
-function round10(v) {
+function round11(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -8748,8 +9228,8 @@ var videoLane = {
     return segments.map((s, i) => ({
       id: `seg-${i}`,
       kind: "clip",
-      t: round11(starts[i]),
-      duration: round11(
+      t: round12(starts[i]),
+      duration: round12(
         outputLen(s, speeds, freezes, i === 0 || !contiguous(segments, i))
       )
     }));
@@ -8832,7 +9312,7 @@ var videoLane = {
           if (local >= m.t - 1e-9 && local <= m.t + m.duration + 1e-9)
             return null;
         }
-        const sourceT = round11(
+        const sourceT = round12(
           mapTime2(segmentPieces(s, speeds, freezes, leading), local)
         );
         if (sourceT - s.in < 0.05 || s.out - sourceT < 0.05) return null;
@@ -8873,7 +9353,7 @@ var videoLane = {
           n === 1 || !contiguous(segments, n - 1)
         )
       ] : []
-    ].map(round11);
+    ].map(round12);
   }
 };
 function nextFreezeId(doc) {
@@ -8900,8 +9380,8 @@ var freezeLane = {
         {
           id: f.id,
           kind: "clip",
-          t: round11(m.t),
-          duration: round11(m.duration),
+          t: round12(m.t),
+          duration: round12(m.duration),
           label: `${trimZeros(f.seconds)}s`
         }
       ] : [];
@@ -8923,7 +9403,7 @@ var freezeLane = {
         if (g.t >= m.t - 1e-9 && g.t <= m.t + m.duration + 1e-9) return null;
       }
       if (g.t > totalDuration7(rated) + 1e-9) return null;
-      const srcT = round11(mapTime2(rated, Math.max(0, g.t)));
+      const srcT = round12(mapTime2(rated, Math.max(0, g.t)));
       if (!kept(srcT) || !clear(srcT)) return null;
       const id = nextFreezeId(doc);
       const mediaHere = mediaAtOutput(rated, Math.max(0, g.t));
@@ -8965,7 +9445,7 @@ var freezeLane = {
       const marks = freezeOutputExtents(splitBySpeed4(segs, speeds), freezes);
       const mine = marks.get(f.id);
       const endOut = mine ? mine.t + mine.duration : null;
-      const srcT = round11(
+      const srcT = round12(
         Math.min(sourceDuration, mapTime2(base, Math.max(0, g.t)))
       );
       if (!kept(srcT) || !clear(srcT, f.id)) return null;
@@ -9025,8 +9505,8 @@ var zoomLane = {
         {
           id: z.id,
           kind: "clip",
-          t: round11(ext.start),
-          duration: round11(ext.end - ext.start),
+          t: round12(ext.start),
+          duration: round12(ext.end - ext.start),
           label: `${z.level.toFixed(2)}\xD7`
         }
       ];
@@ -9053,8 +9533,8 @@ var zoomLane = {
           ...d.zoom,
           {
             id,
-            in: round11(srcT),
-            out: round11(srcT + len),
+            in: round12(srcT),
+            out: round12(srcT + len),
             level: DEFAULT_ZOOM_LEVEL,
             cx,
             cy,
@@ -9086,8 +9566,8 @@ var zoomLane = {
       return (d) => {
         const z = d.zoom.find((x) => x.id === g.id);
         if (!z) return;
-        z.in = round11(newIn);
-        z.out = round11(newIn + len);
+        z.in = round12(newIn);
+        z.out = round12(newIn + len);
         z.source = "manual";
         d.zoom.sort((a, b) => a.in - b.in);
       };
@@ -9116,8 +9596,8 @@ var zoomLane = {
       return (d) => {
         const z = d.zoom.find((x) => x.id === g.id);
         if (!z) return;
-        z.in = round11(next.in);
-        z.out = round11(next.out);
+        z.in = round12(next.in);
+        z.out = round12(next.out);
         z.source = "manual";
       };
     }
@@ -9139,8 +9619,8 @@ function cursorFocusAt(doc, srcT) {
     if (Math.abs(e.t - ms) < Math.abs(best.t - ms)) best = e;
   const clamp015 = (v) => Math.max(0, Math.min(1, v));
   return {
-    cx: round11(clamp015(best.x / width)),
-    cy: round11(clamp015(best.y / height))
+    cx: round12(clamp015(best.x / width)),
+    cy: round12(clamp015(best.y / height))
   };
 }
 var tiltLane = {
@@ -9154,8 +9634,8 @@ var tiltLane = {
         {
           id: z.id,
           kind: "clip",
-          t: round11(ext.start),
-          duration: round11(ext.end - ext.start),
+          t: round12(ext.start),
+          duration: round12(ext.end - ext.start),
           label: `${formatDeg(z.rx)}\xB0/${formatDeg(z.ry)}\xB0`
         }
       ];
@@ -9181,8 +9661,8 @@ var tiltLane = {
           ...d.tilt ?? [],
           {
             id,
-            in: round11(srcT),
-            out: round11(srcT + len),
+            in: round12(srcT),
+            out: round12(srcT + len),
             rx: DEFAULT_TILT_POSE.rx,
             ry: DEFAULT_TILT_POSE.ry,
             source: "manual",
@@ -9213,8 +9693,8 @@ var tiltLane = {
       return (d) => {
         const z = (d.tilt ?? []).find((x) => x.id === g.id);
         if (!z || !d.tilt) return;
-        z.in = round11(newIn);
-        z.out = round11(newIn + len);
+        z.in = round12(newIn);
+        z.out = round12(newIn + len);
         z.source = "manual";
         d.tilt.sort((a, b) => a.in - b.in);
       };
@@ -9243,8 +9723,8 @@ var tiltLane = {
       return (d) => {
         const z = (d.tilt ?? []).find((x) => x.id === g.id);
         if (!z) return;
-        z.in = round11(next.in);
-        z.out = round11(next.out);
+        z.in = round12(next.in);
+        z.out = round12(next.out);
         z.source = "manual";
       };
     }
@@ -9271,8 +9751,8 @@ var camMoveLane = {
         {
           id: z.id,
           kind: "clip",
-          t: round11(ext.start),
-          duration: round11(ext.end - ext.start),
+          t: round12(ext.start),
+          duration: round12(ext.end - ext.start),
           label: z.size != null ? `${Math.round(z.size * 100)}%` : "Move"
         }
       ];
@@ -9296,8 +9776,8 @@ var camMoveLane = {
           ...d.camMotion ?? [],
           {
             id,
-            in: round11(srcT),
-            out: round11(srcT + len),
+            in: round12(srcT),
+            out: round12(srcT + len),
             ...DEFAULT_CAM_POSE,
             source: "manual"
           }
@@ -9326,8 +9806,8 @@ var camMoveLane = {
       return (d) => {
         const z = (d.camMotion ?? []).find((x) => x.id === g.id);
         if (!z || !d.camMotion) return;
-        z.in = round11(newIn);
-        z.out = round11(newIn + len);
+        z.in = round12(newIn);
+        z.out = round12(newIn + len);
         z.source = "manual";
         d.camMotion.sort((a, b) => a.in - b.in);
       };
@@ -9356,8 +9836,8 @@ var camMoveLane = {
       return (d) => {
         const z = (d.camMotion ?? []).find((x) => x.id === g.id);
         if (!z) return;
-        z.in = round11(next.in);
-        z.out = round11(next.out);
+        z.in = round12(next.in);
+        z.out = round12(next.out);
         z.source = "manual";
       };
     }
@@ -9390,10 +9870,10 @@ var camLane = {
       items.push({
         id: `cam-${i}`,
         kind: "clip",
-        t: round11(
+        t: round12(
           starts[i] + outputLen({ in: s.in, out: a }, speeds, freezes, leading)
         ),
-        duration: round11(
+        duration: round12(
           outputLen({ in: a, out: b }, speeds, freezes, a === s.in && leading)
         )
       });
@@ -9422,7 +9902,7 @@ var camLane = {
         Math.max(first.in, last.out - span)
       );
       return (d) => {
-        d.cam.window = { in: round11(newIn), out: round11(newIn + span) };
+        d.cam.window = { in: round12(newIn), out: round12(newIn + span) };
       };
     }
     const overlapping = eff.map((s, i) => ({
@@ -9435,8 +9915,8 @@ var camLane = {
     const next = g.edge === "start" ? { in: Math.min(sourceT, current.out - 0.05), out: current.out } : { in: current.in, out: Math.max(sourceT, current.in + 0.05) };
     return (d) => {
       d.cam.window = {
-        in: round11(Math.max(0, next.in)),
-        out: round11(Math.min(sourceDuration, next.out))
+        in: round12(Math.max(0, next.in)),
+        out: round12(Math.min(sourceDuration, next.out))
       };
     };
   },
@@ -9456,8 +9936,8 @@ var micLane = {
     return segments.map((s, i) => ({
       id: `mic-${i}`,
       kind: "clip",
-      t: round11(starts[i]),
-      duration: round11(
+      t: round12(starts[i]),
+      duration: round12(
         outputLen(s, speeds, freezes, i === 0 || !contiguous(segments, i))
       )
     }));
@@ -9513,8 +9993,8 @@ var speedLane = {
         {
           id: sp.id,
           kind: "clip",
-          t: round11(start),
-          duration: round11(end - start),
+          t: round12(start),
+          duration: round12(end - start),
           label: `${sp.rate}\xD7`
         }
       ];
@@ -9538,8 +10018,8 @@ var speedLane = {
           ...d.speed ?? [],
           {
             id,
-            in: round11(srcT),
-            out: round11(srcT + len),
+            in: round12(srcT),
+            out: round12(srcT + len),
             rate: DEFAULT_SPEED_RATE,
             source: "manual",
             ...mediaHere ? { media: mediaHere } : {}
@@ -9570,8 +10050,8 @@ var speedLane = {
       return (d) => {
         const s = d.speed?.find((x) => x.id === g.id);
         if (!s) return;
-        s.in = round11(newIn);
-        s.out = round11(newIn + len);
+        s.in = round12(newIn);
+        s.out = round12(newIn + len);
         s.source = "manual";
         d.speed.sort((a, b) => a.in - b.in);
       };
@@ -9600,8 +10080,8 @@ var speedLane = {
       return (d) => {
         const s = d.speed?.find((x) => x.id === g.id);
         if (!s) return;
-        s.in = round11(next.in);
-        s.out = round11(next.out);
+        s.in = round12(next.in);
+        s.out = round12(next.out);
         s.source = "manual";
       };
     }
@@ -9620,8 +10100,8 @@ var audioLane = {
     return doc.audio.map((c) => ({
       id: c.id,
       kind: "clip",
-      t: round11(c.start),
-      duration: round11(clipLength(c)),
+      t: round12(c.start),
+      duration: round12(clipLength(c)),
       label: c.name
     }));
   },
@@ -9632,7 +10112,7 @@ var audioLane = {
       const start = Math.max(0, g.t);
       return (d) => {
         const c = d.audio.find((x) => x.id === g.id);
-        if (c) c.start = round11(start);
+        if (c) c.start = round12(start);
       };
     }
     if (g.type === "resize") {
@@ -9645,8 +10125,8 @@ var audioLane = {
           return (d) => {
             const c = d.audio.find((x) => x.id === g.id);
             if (!c) return;
-            c.start = round11(newStart2);
-            c.loopLen = round11(end - newStart2);
+            c.start = round12(newStart2);
+            c.loopLen = round12(end - newStart2);
           };
         }
         const delta = g.t - clip.start;
@@ -9655,22 +10135,22 @@ var audioLane = {
         return (d) => {
           const c = d.audio.find((x) => x.id === g.id);
           if (!c) return;
-          c.in = round11(newIn);
-          c.start = round11(newStart);
+          c.in = round12(newIn);
+          c.start = round12(newStart);
         };
       }
       if (clip.loop) {
         const newLen = Math.max(0.1, g.t - clip.start);
         return (d) => {
           const c = d.audio.find((x) => x.id === g.id);
-          if (c) c.loopLen = round11(newLen);
+          if (c) c.loopLen = round12(newLen);
         };
       }
       const span = Math.max(0.05, g.t - clip.start);
       const newOut = Math.min(clip.in + span, clip.duration);
       return (d) => {
         const c = d.audio.find((x) => x.id === g.id);
-        if (c) c.out = round11(Math.max(c.in + 0.05, newOut));
+        if (c) c.out = round12(Math.max(c.in + 0.05, newOut));
       };
     }
     if (g.type === "remove") {
@@ -9683,8 +10163,8 @@ var audioLane = {
   },
   magnets(doc) {
     return doc.audio.flatMap((c) => [
-      round11(c.start),
-      round11(c.start + clipLength(c))
+      round12(c.start),
+      round12(c.start + clipLength(c))
     ]);
   }
 };
@@ -9702,7 +10182,7 @@ function poseItems(clipId, start, duration, motion) {
   return (motion ?? []).map((p, i) => ({
     id: `${clipId}::k${i}`,
     kind: "keyframe",
-    t: round11(start + Math.min(Math.max(0, p.at), duration))
+    t: round12(start + Math.min(Math.max(0, p.at), duration))
   }));
 }
 var overlaysLane = {
@@ -9713,8 +10193,8 @@ var overlaysLane = {
       {
         id: o.id,
         kind: "clip",
-        t: round11(o.start),
-        duration: round11(o.duration),
+        t: round12(o.start),
+        duration: round12(o.duration),
         label: o.kind === "text" ? o.text.split("\n")[0].slice(0, 24) || "Text" : o.kind === "html" ? htmlLayerLabel(o) : o.kind === "image" ? "Image" : "Video"
       },
       // Pose diamonds render after the clips, so they sit on top.
@@ -9734,7 +10214,7 @@ var overlaysLane = {
           return (d) => {
             const o = (d.overlays ?? []).find((x) => x.id === kf.clipId);
             const p = o?.motion?.[kf.index];
-            if (p) p.at = round11(at);
+            if (p) p.at = round12(at);
           };
         }
         if (g.type === "remove") {
@@ -9763,8 +10243,8 @@ var overlaysLane = {
           {
             id,
             kind: "text",
-            start: round11(start),
-            duration: round11(len),
+            start: round12(start),
+            duration: round12(len),
             text: "Title",
             preset: "title",
             // Frame fractions: centered, lower-third — at any aspect ratio.
@@ -9779,7 +10259,7 @@ var overlaysLane = {
       const start = Math.max(0, g.t);
       return (d) => {
         const o = (d.overlays ?? []).find((x) => x.id === g.id);
-        if (o) o.start = round11(start);
+        if (o) o.start = round12(start);
       };
     }
     if (g.type === "resize") {
@@ -9789,14 +10269,14 @@ var overlaysLane = {
         return (d) => {
           const o = (d.overlays ?? []).find((x) => x.id === g.id);
           if (!o) return;
-          o.start = round11(newStart);
-          o.duration = round11(end - newStart);
+          o.start = round12(newStart);
+          o.duration = round12(end - newStart);
         };
       }
       const newLen = Math.max(OVERLAY_MIN_DURATION, g.t - clip.start);
       return (d) => {
         const o = (d.overlays ?? []).find((x) => x.id === g.id);
-        if (o) o.duration = round11(newLen);
+        if (o) o.duration = round12(newLen);
       };
     }
     return (d) => {
@@ -9805,8 +10285,8 @@ var overlaysLane = {
   },
   magnets(doc) {
     return (doc.overlays ?? []).flatMap((o) => [
-      round11(o.start),
-      round11(o.start + o.duration)
+      round12(o.start),
+      round12(o.start + o.duration)
     ]);
   }
 };
@@ -9819,8 +10299,8 @@ var objectsLane = {
       {
         id: o.id,
         kind: "clip",
-        t: round11(o.span?.start ?? 0),
-        duration: round11(o.span?.duration ?? outDur),
+        t: round12(o.span?.start ?? 0),
+        duration: round12(o.span?.duration ?? outDur),
         label: o.asset.kind === "primitive" ? o.asset.shape : o.asset.kind === "text3d" ? o.asset.text : "model"
       },
       // Pose diamonds: clip-local `at` from the span start (0 span-less).
@@ -9848,7 +10328,7 @@ var objectsLane = {
         return (d) => {
           const o = (d.objects ?? []).find((x) => x.id === kf.clipId);
           const p = o?.motion?.[kf.index];
-          if (p) p.at = round11(at);
+          if (p) p.at = round12(at);
         };
       }
       if (g.type === "remove") {
@@ -9869,7 +10349,7 @@ var objectsLane = {
       const start = Math.max(0, g.t);
       return (d) => {
         const o = (d.objects ?? []).find((x) => x.id === g.id);
-        if (o?.span) o.span.start = round11(start);
+        if (o?.span) o.span.start = round12(start);
       };
     }
     if (g.type === "resize") {
@@ -9880,14 +10360,14 @@ var objectsLane = {
         return (d) => {
           const o = (d.objects ?? []).find((x) => x.id === g.id);
           if (!o?.span) return;
-          o.span.start = round11(newStart);
-          o.span.duration = round11(end - newStart);
+          o.span.start = round12(newStart);
+          o.span.duration = round12(end - newStart);
         };
       }
       const newLen = Math.max(OVERLAY_MIN_DURATION, g.t - clip.span.start);
       return (d) => {
         const o = (d.objects ?? []).find((x) => x.id === g.id);
-        if (o?.span) o.span.duration = round11(newLen);
+        if (o?.span) o.span.duration = round12(newLen);
       };
     }
     return (d) => {
@@ -9896,7 +10376,7 @@ var objectsLane = {
   },
   magnets(doc) {
     return (doc.objects ?? []).flatMap(
-      (o) => o.span ? [round11(o.span.start), round11(o.span.start + o.span.duration)] : []
+      (o) => o.span ? [round12(o.span.start), round12(o.span.start + o.span.duration)] : []
     );
   }
 };
@@ -9923,7 +10403,7 @@ function nextSpeedId(doc) {
 function segIndex(id) {
   return Number(id.replace("seg-", ""));
 }
-function round11(v) {
+function round12(v) {
   return Math.round(v * 1e3) / 1e3;
 }
 
@@ -10164,6 +10644,8 @@ export {
   OVERLAY_SIZE_MIN,
   OVERLAY_TRANSITION_DUR,
   OVERLAY_Z,
+  PIN_GAP,
+  PIN_MARGIN,
   PLATE_GROUND,
   PLAYBACK_ACTIVITY,
   PRIMARY_MEDIA,
@@ -10272,6 +10754,7 @@ export {
   docToCropSpace,
   docToFullSpace,
   docTransitions,
+  docZoomTrack,
   dragsFromTrack,
   dropTemplate,
   duckCurve,
@@ -10289,6 +10772,7 @@ export {
   expectedFrameSize,
   exportSizeFor,
   extractClicks,
+  findStep,
   focusBounds,
   focusForViewportCentre,
   followFocusEvents,
@@ -10360,12 +10844,17 @@ export {
   overlayLines,
   overlayMotionBase,
   overlayMotionPoseAt,
+  overlayPinPoseAt,
   overlayRect,
   overlaysLane,
   ownFreezes,
   pageDisplayUrl,
   parsePoseId,
   pickStyle,
+  pinBox,
+  pinPlacement,
+  pinRectOnScreen,
+  pinReferent,
   placeFreezes,
   planAutoSpeed,
   planAutoTilt,
@@ -10384,6 +10873,7 @@ export {
   resolveExportSize,
   resolveOverlayBox,
   resolveOverlayStyle,
+  resolvePins,
   resolveText3dAsset,
   resolveZoomStyle,
   restLeanOf,