@vosjs/studio-core 0.16.0 → 0.18.0

package/dist/index.js

@@ -98,6 +98,8 @@ function clipLength(clip) {
   return clip.loop ? Math.max(span, clip.loopLen ?? span) : span;
 }
 var MOTION_EASE = "power2.inOut";
+var LAYER_CARD_SHADOW = 0.32;
+var MEDIA_KEY_PREFIX = "media:";
 var OVERLAY_SCALE_MAX = 8;
 var OVERLAY_MEDIA_DEFAULT_WIDTH = 0.35;
 var OVERLAY_MEDIA_DEFAULT_RADIUS = 12;
@@ -454,9 +456,35 @@ var CARD_ENTER_KINDS = [
   "fade",
   "rise",
   "tilt-in",
-  "pull-out"
+  "pull-out",
+  "slide"
 ];
 var CARD_EXIT_KINDS = ["none", "fade", "recede"];
+var SEGMENT_ENTER_KINDS = [
+  "none",
+  "slide",
+  "fade",
+  "scale"
+];
+var SEGMENT_EXIT_KINDS = [
+  "none",
+  "slide",
+  "fade",
+  "scale"
+];
+var TRANSITION_SECONDS = 0.6;
+var TRANSITION_SECONDS_MIN = 0.15;
+var TRANSITION_SECONDS_MAX = 2;
+function transitionSeconds(step) {
+  if (!step || step.kind === "none") return 0;
+  return Math.max(
+    TRANSITION_SECONDS_MIN,
+    Math.min(TRANSITION_SECONDS_MAX, step.seconds ?? TRANSITION_SECONDS)
+  );
+}
+function slideSide(step, which) {
+  return step?.side ?? (which === "enter" ? "right" : "left");
+}
 var TEXT_ENTER_KINDS = [
   "none",
   "fade",
@@ -582,6 +610,15 @@ function cardFields(frame) {
   }
   return out;
 }
+var mediaRef = (id) => MEDIA_KEY_PREFIX + id;
+function mediaRefId(key) {
+  if (typeof key !== "string" || !key.startsWith(MEDIA_KEY_PREFIX)) return null;
+  return key.slice(MEDIA_KEY_PREFIX.length);
+}
+function layerMedia(doc, key) {
+  const id = mediaRefId(key);
+  return id === null ? null : mediaSource(doc, id);
+}
 function nextMediaId(doc) {
   const taken = new Set((doc.media ?? []).map((m) => m.id));
   let n = 1;
@@ -786,7 +823,7 @@ function cardPoseTrack(enter, exit, footageEnd, outputEnd2 = footageEnd) {
   const keyframes = [];
   const s = entranceSeconds(enter);
   if (s) {
-    const from = enter?.kind === "rise" ? [0.96, 0.08, 0.7] : enter?.kind === "pull-out" || enter?.kind === "fade" ? enter.kind === "fade" ? [1, 0, 0] : [1, 0, 1] : [0.94, 0.05, 0.7];
+    const from = enter?.kind === "rise" ? [0.96, 0.08, 0.7] : enter?.kind === "pull-out" || enter?.kind === "fade" || enter?.kind === "slide" ? enter.kind === "fade" ? [1, 0, 0] : [1, 0, 1] : [0.94, 0.05, 0.7];
     keyframes.push({ t: 0, value: from, ease: "none" });
     keyframes.push({ t: s, value: [1, 0, 1], ease: "power3.out" });
   }
@@ -1687,8 +1724,8 @@ import {
   segmentRate as segmentRate2,
   sortKeyframes as sortKeyframes2,
   sourceToTimeline,
-  splitBySpeed as splitBySpeed2,
-  totalDuration as totalDuration2
+  splitBySpeed as splitBySpeed3,
+  totalDuration as totalDuration3
 } from "@vosjs/timeline";
 import { timelineRuntimeCode as timelineRuntimeCode2 } from "@vosjs/timeline/bundle";
 
@@ -2177,6 +2214,142 @@ function resolveText3dAsset(asset) {
   };
 }
 
+// src/lower/segmentStarts.ts
+import { splitBySpeed as splitBySpeed2, totalDuration as totalDuration2 } from "@vosjs/timeline";
+function effectiveSegments(doc) {
+  if (isRecordingDoc(doc) && doc.segments.length) return doc.segments;
+  return [{ in: 0, out: anchorSourceDuration(doc) }];
+}
+var contiguous = (segments, i) => i > 0 && sameMedia(segments[i - 1].media, segments[i].media) && Math.abs(segments[i - 1].out - segments[i].in) < 1e-9;
+var segmentPieces = (seg, speeds, freezes, leading) => {
+  const own = freezes.filter(
+    (f) => sameMedia(f.media, seg.media) && f.at <= seg.out + 1e-9 && (leading ? f.at >= seg.in - 1e-9 : f.at > seg.in + 1e-9)
+  );
+  return withFreezes(
+    splitBySpeed2(
+      [seg],
+      speeds.filter((sp) => sameMedia(sp.media, seg.media))
+    ),
+    own
+  );
+};
+var outputLen = (seg, speeds, freezes = [], leading = true) => totalDuration2(segmentPieces(seg, speeds, freezes, leading));
+var segmentStarts = (segments, speeds, freezes = []) => {
+  const starts = [];
+  let acc = 0;
+  segments.forEach((s, i) => {
+    starts.push(acc);
+    acc += outputLen(s, speeds, freezes, i === 0 || !contiguous(segments, i));
+  });
+  return starts;
+};
+function segmentOutputExtents(doc) {
+  const segments = effectiveSegments(doc);
+  const speeds = doc.speed ?? [];
+  const freezes = isRecordingDoc(doc) ? docFreezes(doc) : [];
+  const starts = segmentStarts(segments, speeds, freezes);
+  return segments.map((s, i) => ({
+    start: starts[i],
+    end: starts[i] + outputLen(s, speeds, freezes, i === 0 || !contiguous(segments, i))
+  }));
+}
+
+// src/lower/transitions.ts
+var TRANSITION_TRAVEL = 1.04;
+var TRANSITION_SCALE_STEP = 0.08;
+var GHOST_Z_LIFT = 4e-3;
+var GHOST_RENDER_ORDER = 1.1;
+var LAST_FRAME_BACK = 2e-3;
+var round32 = (v) => Math.round(v * 1e3) / 1e3;
+function move(step, which, cap) {
+  const secs = transitionSeconds(step);
+  if (!secs || !step) return null;
+  const kind = step.kind;
+  if (kind !== "slide" && kind !== "fade" && kind !== "scale") return null;
+  const d = Math.min(secs, cap);
+  if (d < TRANSITION_SECONDS_MIN) return null;
+  return { kind, side: slideSide(step, which), d: round32(d) };
+}
+function docTransitions(doc) {
+  const out = [];
+  const segments = doc.segments;
+  const extents = segmentOutputExtents(doc);
+  const open = enterOf(doc.frame.anim);
+  if (open?.kind === "slide" && extents.length) {
+    const first = extents[0];
+    const m = move(open, "enter", Math.max(0, first.end - first.start) / 2);
+    if (m) out.push({ t: 0, d: m.d, in: m });
+  }
+  for (let i = 0; i + 1 < segments.length; i++) {
+    const a = segments[i];
+    const b = segments[i + 1];
+    const la = extents[i].end - extents[i].start;
+    const lb = extents[i + 1].end - extents[i + 1].start;
+    const cap = Math.min(la, lb) / 2;
+    const exit = move(exitOf(a.anim), "exit", cap);
+    const enter = move(enterOf(b.anim), "enter", cap);
+    if (!exit && !enter) continue;
+    const t = round32(extents[i + 1].start);
+    const rec = {
+      t,
+      d: Math.max(exit?.d ?? 0, enter?.d ?? 0)
+    };
+    if (enter) rec.in = enter;
+    if (exit)
+      rec.out = {
+        ...exit,
+        media: a.media ?? "",
+        at: round32(Math.max(a.in, a.out - LAST_FRAME_BACK))
+      };
+    out.push(rec);
+  }
+  return out;
+}
+var REST_LEAD = 0.1;
+function restSpansThroughTransitions(spans, rated, transitions, minLen) {
+  const windows = transitions.filter((tr) => tr.t > 0 && tr.d > 0);
+  if (!windows.length) return [...spans];
+  const out = [];
+  for (const span of spans) {
+    const start = outputStartOf(rated, span.in, span.out, span.media);
+    const win = start === null ? void 0 : windows.find((tr) => start >= tr.t - REST_LEAD && start < tr.t + tr.d);
+    if (start === null || !win) {
+      out.push(span);
+      continue;
+    }
+    const after = win.t + win.d;
+    if (mediaAtOutput(rated, after) !== (span.media ?? "")) continue;
+    const head = sourceAt(rated, after);
+    if (head === null || head > span.out - minLen) continue;
+    out.push({ ...span, in: round32(head) });
+  }
+  return out;
+}
+function outputStartOf(rated, sIn, sOut, media) {
+  let acc = 0;
+  for (const p of rated) {
+    const rate = p.rate ?? 1;
+    const len = Math.max(0, p.out - p.in) / rate;
+    if (sameMedia(p.media, media)) {
+      const ovIn = Math.max(sIn, p.in);
+      const ovOut = Math.min(sOut, p.out);
+      if (ovOut > ovIn) return acc + (ovIn - p.in) / rate;
+    }
+    acc += len;
+  }
+  return null;
+}
+function sourceAt(rated, t) {
+  let acc = 0;
+  for (const p of rated) {
+    const rate = p.rate ?? 1;
+    const len = Math.max(0, p.out - p.in) / rate;
+    if (t < acc + len) return p.in + (t - acc) * rate;
+    acc += len;
+  }
+  return null;
+}
+
 // src/lower/audioEnvelope.ts
 function clipEnvelope(clip) {
   const span = clipLength(clip);
@@ -2698,6 +2871,8 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     // over its whole life, so it must repaint every visible frame \u2014 the
     // signature alone would freeze it between edits (the olVisSig trap).
     if (ol0.track) olAnim = true
+    // A layer CARD is painted on its own plane every frame it is visible.
+    if (ol0.card) olAnim = true
     // Video overlays advance every frame; images redraw until decoded.
     if (ol0.kind === 'video') olAnim = true
     else if (ol0.kind === 'image') {
@@ -2707,6 +2882,76 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
   }
   var ovSig = W + 'x' + H + '|' + olVisSig
   var ovDirty = ov.sig !== ovSig || ov.active || olAnim
+  // The layer cards visible this frame, with their pose, for the card
+  // planes below (the overlay loop collects them instead of painting).
+  var lcList = []
+  // Acquire a media overlay's element through the shared cache and sync it
+  // to CLIP-LOCAL time (pure f(t); muted always \u2014 soundtracks belong to
+  // doc.audio). Null until it has a frame to draw. One seam for the flat
+  // picture and the layer card.
+  function olAcquire(ol, olT) {
+    var olEl = ns.videoCache ? ns.videoCache.get(ol.key) : null
+    if (!olEl && ns.videoCache) {
+      if (ol.kind === 'image') {
+        olEl = new Image()
+        olEl.crossOrigin = 'anonymous'
+        olEl.src = ol.key
+      } else {
+        olEl = document.createElement('video')
+        olEl.crossOrigin = 'anonymous'
+        olEl.muted = true
+        olEl.playsInline = true
+        olEl.preload = 'auto'
+        olEl.src = ol.key
+        olEl.load()
+      }
+      ns.videoCache.set(ol.key, olEl)
+    }
+    if (!olEl) return null
+    var olIsImg = ol.kind === 'image'
+    if (!olIsImg && olEl.play) {
+      var olDur = olEl.duration || 0
+      var olMT = olT
+      if (ol.loop && olDur > 0) olMT = olT % olDur
+      else if (olDur > 0) olMT = Math.min(olT, olDur - 0.001)
+      try {
+        if (playing) {
+          if (olEl.playbackRate !== 1) olEl.playbackRate = 1
+          var olDrift = Math.abs(olEl.currentTime - olMT)
+          if (olDur > 0 && !olEl.seeking && olDrift > 0.3 && (!ol.loop || olDur - olDrift > 0.3)) olEl.currentTime = olMT
+          if (!ol.loop && olDur > 0 && olT >= olDur) { if (!olEl.paused) olEl.pause() }
+          else if (olEl.paused) { var olP = olEl.play(); if (olP && olP.catch) olP.catch(function () {}) }
+        } else {
+          if (!olEl.paused) olEl.pause()
+          var olTarget = Math.min(olMT, olEl.duration || olMT)
+          // Coalesce scrub seeks (the backgroundMedia pattern): re-assigning
+          // currentTime aborts the in-flight seek, so a per-frame scrub keeps
+          // a remote source seeking forever. Defer until 'seeked' lands.
+          if (olEl.readyState >= 1 && !olEl.seeking && Math.abs(olEl.currentTime - olTarget) > 0.02) {
+            if (ns.pendingDecodes) {
+              var olDp = new Promise(function (resolve) {
+                var olDone = function () { olEl.removeEventListener('seeked', olDone); resolve() }
+                olEl.addEventListener('seeked', olDone)
+                setTimeout(olDone, 250)
+              })
+              ns.pendingDecodes.add(olDp)
+              olDp.finally(function () { ns.pendingDecodes.delete(olDp) })
+            }
+            olEl.currentTime = olTarget
+          }
+        }
+      } catch (e) {}
+    }
+    // Video readiness is STICKY through seeks (the cam-bubble pattern):
+    // readyState dips below HAVE_CURRENT_DATA while a scrub seek is in
+    // flight, and this layer repaints every frame a video clip is visible \u2014
+    // gating each frame on it would blink the clip out for the whole drag.
+    // After the first decoded frame, keep drawing: Chrome paints the
+    // element's retained frame mid-seek.
+    if (!olIsImg && olEl.readyState >= 2) olEl.__vosHasFrame = true
+    var olReady = olIsImg ? !!(olEl.complete && olEl.naturalWidth) : !!(olEl.readyState >= 2 || olEl.__vosHasFrame)
+    return olReady ? olEl : null
+  }
   if (ovDirty) {
   ovC.clearRect(0, 0, W, H)
   // --- text overlays (compositor v2): OUTPUT-anchored clips, styles resolved
@@ -2764,71 +3009,19 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     if (olPose) olA *= Math.max(0, Math.min(1, olPose[4]))
     if (olA <= 0.004) continue
     if (ol.kind === 'image' || ol.kind === 'video') {
+      // A layer CARD is painted by the card painter on its own plane, below:
+      // collect it with its pose and skip the flat picture.
+      if (ol.card) {
+        lcList.push({ ol: ol, t: olT, a: olA * (ol.opacity == null ? 1 : ol.opacity), x: olMX, y: olMY, s: olMS, r: olMR, yof: olYof })
+        continue
+      }
       // Media overlay: lazy-acquire through the shared cache (SET_DATA-added
       // clips load without a LOAD \u2014 the backgroundMedia pattern), sync video
       // to CLIP-LOCAL time (pure f(t)), draw a rounded media card centered on
       // the fraction anchor. Muted always \u2014 soundtracks belong to doc.audio.
-      var olEl = ns.videoCache ? ns.videoCache.get(ol.key) : null
-      if (!olEl && ns.videoCache) {
-        if (ol.kind === 'image') {
-          olEl = new Image()
-          olEl.crossOrigin = 'anonymous'
-          olEl.src = ol.key
-        } else {
-          olEl = document.createElement('video')
-          olEl.crossOrigin = 'anonymous'
-          olEl.muted = true
-          olEl.playsInline = true
-          olEl.preload = 'auto'
-          olEl.src = ol.key
-          olEl.load()
-        }
-        ns.videoCache.set(ol.key, olEl)
-      }
+      var olEl = olAcquire(ol, olT)
       if (!olEl) continue
       var olIsImg = ol.kind === 'image'
-      if (!olIsImg && olEl.play) {
-        var olDur = olEl.duration || 0
-        var olMT = olT
-        if (ol.loop && olDur > 0) olMT = olT % olDur
-        else if (olDur > 0) olMT = Math.min(olT, olDur - 0.001)
-        try {
-          if (playing) {
-            if (olEl.playbackRate !== 1) olEl.playbackRate = 1
-            var olDrift = Math.abs(olEl.currentTime - olMT)
-            if (olDur > 0 && !olEl.seeking && olDrift > 0.3 && (!ol.loop || olDur - olDrift > 0.3)) olEl.currentTime = olMT
-            if (!ol.loop && olDur > 0 && olT >= olDur) { if (!olEl.paused) olEl.pause() }
-            else if (olEl.paused) { var olP = olEl.play(); if (olP && olP.catch) olP.catch(function () {}) }
-          } else {
-            if (!olEl.paused) olEl.pause()
-            var olTarget = Math.min(olMT, olEl.duration || olMT)
-            // Coalesce scrub seeks (the backgroundMedia pattern): re-assigning
-            // currentTime aborts the in-flight seek, so a per-frame scrub keeps
-            // a remote source seeking forever. Defer until 'seeked' lands.
-            if (olEl.readyState >= 1 && !olEl.seeking && Math.abs(olEl.currentTime - olTarget) > 0.02) {
-              if (ns.pendingDecodes) {
-                var olDp = new Promise(function (resolve) {
-                  var olDone = function () { olEl.removeEventListener('seeked', olDone); resolve() }
-                  olEl.addEventListener('seeked', olDone)
-                  setTimeout(olDone, 250)
-                })
-                ns.pendingDecodes.add(olDp)
-                olDp.finally(function () { ns.pendingDecodes.delete(olDp) })
-              }
-              olEl.currentTime = olTarget
-            }
-          }
-        } catch (e) {}
-      }
-      // Video readiness is STICKY through seeks (the cam-bubble pattern):
-      // readyState dips below HAVE_CURRENT_DATA while a scrub seek is in
-      // flight, and this layer repaints every frame a video clip is visible \u2014
-      // gating each frame on it would blink the clip out for the whole drag.
-      // After the first decoded frame, keep drawing: Chrome paints the
-      // element's retained frame mid-seek.
-      if (!olIsImg && olEl.readyState >= 2) olEl.__vosHasFrame = true
-      var olReady = olIsImg ? !!(olEl.complete && olEl.naturalWidth) : !!(olEl.readyState >= 2 || olEl.__vosHasFrame)
-      if (!olReady) continue
       var olNW = (olIsImg ? olEl.naturalWidth : olEl.videoWidth) || 16
       var olNH = (olIsImg ? olEl.naturalHeight : olEl.videoHeight) || 9
       var olDW = ol.w * W * olMS
@@ -3340,6 +3533,194 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       }
       obM.scale.setScalar(obPS * obRefH * (obE.norm || 1))
     }
+    // --- layer cards (many cards): a media overlay that names a frame is
+    // drawn by the card painter on its OWN plane in the prop group
+    // (renderOrder 1.25: above the primary card, below the props): the
+    // layered shadow (the primary's table and strengths), the media clipped
+    // to its corners, the browser bar after it, the border, and for a
+    // document media its click rings and cursor dot inside the card, at
+    // clip-local time. Chrome scales WITH the card (a smaller window has
+    // smaller chrome), the way the primary's scales with cf. The plane is
+    // sized to the canvas at the card depth, placed at the clip's anchor,
+    // leaned by the card's own rx/ry (the tilt convention) and turned by the
+    // clip's rotation. Locals lc*.
+    var lcC = obC.cards || (obC.cards = new Map())
+    var lcSeen = {}
+    var lcK = obRefH / H
+    for (var lci = 0; lci < lcList.length; lci++) {
+      var lcI = lcList[lci], lcO = lcI.ol, lcCard = lcO.card
+      var lcEl = olAcquire(lcO, lcI.t)
+      if (!lcEl) continue
+      lcSeen[lcO.id] = true
+      var lcE = lcC.get(lcO.id)
+      if (!lcE) {
+        var lcCv = document.createElement('canvas')
+        var lcTx = new THREE3.CanvasTexture(lcCv)
+        if (THREE3.SRGBColorSpace) lcTx.colorSpace = THREE3.SRGBColorSpace
+        if (THREE3.LinearFilter) { lcTx.minFilter = THREE3.LinearFilter; lcTx.magFilter = THREE3.LinearFilter }
+        lcTx.generateMipmaps = false
+        var lcM = new THREE3.Mesh(new THREE3.PlaneGeometry(1, 1), new THREE3.MeshBasicMaterial({ map: lcTx, transparent: true, depthTest: false, depthWrite: false }))
+        lcM.renderOrder = 1.25
+        lcM.frustumCulled = false
+        obC.group.add(lcM)
+        lcE = { mesh: lcM, canvas: lcCv, c2d: lcCv.getContext('2d'), texture: lcTx }
+        lcC.set(lcO.id, lcE)
+      }
+      var lcIsImg = lcO.kind === 'image'
+      var lcCrop = lcO.crop || null
+      var lcNW = lcCrop ? lcCrop.w : ((lcIsImg ? lcEl.naturalWidth : lcEl.videoWidth) || 16)
+      var lcNH = lcCrop ? lcCrop.h : ((lcIsImg ? lcEl.naturalHeight : lcEl.videoHeight) || 9)
+      var lcW = Math.max(2, lcO.w * W * lcI.s)
+      var lcS = s * (lcW / W)
+      var lcBar = lcCard.bar || {}
+      var lcBarH = lcBar.kind && lcBar.kind !== 'none' ? (lcBar.height || 44) * lcS : 0
+      var lcMH = lcW * (lcNH / lcNW)
+      var lcH = lcMH + lcBarH
+      var lcRad = Math.min((lcO.radius || 0) * lcS, lcH / 2)
+      var lcMg = Math.ceil(170 * lcS)
+      var lcCW = Math.ceil(lcW + 2 * lcMg), lcCH = Math.ceil(lcH + 2 * lcMg)
+      var lcCv2 = lcE.canvas, lcX = lcE.c2d
+      if (lcCv2.width !== lcCW || lcCv2.height !== lcCH) { lcCv2.width = lcCW; lcCv2.height = lcCH }
+      lcX.clearRect(0, 0, lcCW, lcCH)
+      var lcX0 = lcMg, lcY0 = lcMg
+      var lcSh = lcCard.shadow == null ? ${LAYER_CARD_SHADOW} : lcCard.shadow
+      var lcRgb = '0,0,0'
+      var lcHex = lcCard.shadowColor
+      if (typeof lcHex === 'string' && /^#[0-9a-fA-F]{6}$/.test(lcHex)) lcRgb = parseInt(lcHex.slice(1, 3), 16) + ',' + parseInt(lcHex.slice(3, 5), 16) + ',' + parseInt(lcHex.slice(5, 7), 16)
+      // the shadows are cast by a body drawn off the canvas and brought back
+      // by shadowOffsetX (the primary's seam rule)
+      var lcD = lcCW * 2 + lcCH * 2
+      if (lcSh > 0) {
+        var lcL = [[2, 1, 0.1], [12, 4, 0.1], [40, 16, 0.14], [120, 44, 0.3]]
+        for (var lcj = 0; lcj < lcL.length; lcj++) {
+          lcX.save()
+          lcX.shadowColor = 'rgba(' + lcRgb + ',' + +(lcSh * lcL[lcj][2]).toFixed(3) + ')'
+          lcX.shadowBlur = lcL[lcj][0] * lcS; lcX.shadowOffsetX = lcD; lcX.shadowOffsetY = lcL[lcj][1] * lcS
+          lcX.fillStyle = '#000'
+          rr(lcX0 - lcD, lcY0, lcW, lcH, lcRad, lcX); lcX.fill()
+          lcX.restore()
+        }
+      }
+      if (lcCard.shadowContact > 0) {
+        lcX.save()
+        lcX.shadowColor = 'rgba(' + lcRgb + ',' + lcCard.shadowContact + ')'
+        lcX.shadowBlur = 10 * lcS; lcX.shadowOffsetX = lcD; lcX.shadowOffsetY = 3 * lcS
+        lcX.fillStyle = '#000'
+        rr(lcX0 - lcD, lcY0, lcW, lcH, lcRad, lcX); lcX.fill()
+        lcX.restore()
+      }
+      lcX.save()
+      rr(lcX0, lcY0, lcW, lcH, lcRad, lcX); lcX.clip()
+      var lcMY = lcY0 + lcBarH
+      try {
+        if (lcCrop) lcX.drawImage(lcEl, lcCrop.x, lcCrop.y, lcCrop.w, lcCrop.h, lcX0, lcMY, lcW, lcMH)
+        else lcX.drawImage(lcEl, lcX0, lcMY, lcW, lcMH)
+      } catch (e) {}
+      if (lcBarH > 0) {
+        var lcDark = lcBar.kind.indexOf('dark') >= 0, lcMin = lcBar.kind === 'minimal'
+        var lcThm = (lcMin && lcBar.theme) || null
+        lcX.fillStyle = lcMin ? (lcThm ? lcThm.bar : '#141417') : lcDark ? '#2a2a2e' : '#e9e9eb'
+        lcX.fillRect(lcX0, lcY0, lcW, lcBarH)
+        lcX.fillStyle = lcDark || (lcMin && !(lcThm && lcThm.light)) ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'
+        lcX.fillRect(lcX0, lcY0 + lcBarH - lcS, lcW, lcS)
+        var lcMid = lcY0 + lcBarH / 2
+        if (lcBar.showControls !== false && !lcMin) {
+          if (lcBar.kind.indexOf('mac') === 0) {
+            var lcLights = ['#ff5f57', '#febc2e', '#28c840']
+            for (var lcl = 0; lcl < 3; lcl++) { lcX.fillStyle = lcLights[lcl]; lcX.beginPath(); lcX.arc(lcX0 + (20 + lcl * 20) * lcS, lcMid, 6 * lcS, 0, Math.PI * 2); lcX.fill() }
+          } else {
+            lcX.strokeStyle = lcDark ? 'rgba(255,255,255,0.75)' : 'rgba(0,0,0,0.6)'
+            lcX.lineWidth = 1.5 * lcS
+            var lcG = 4.5 * lcS, lcGx = lcX0 + lcW - 22 * lcS
+            lcX.beginPath(); lcX.moveTo(lcGx - lcG, lcMid - lcG); lcX.lineTo(lcGx + lcG, lcMid + lcG); lcX.moveTo(lcGx + lcG, lcMid - lcG); lcX.lineTo(lcGx - lcG, lcMid + lcG); lcX.stroke()
+            lcX.strokeRect(lcGx - 28 * lcS - lcG, lcMid - lcG, lcG * 2, lcG * 2)
+            lcX.beginPath(); lcX.moveTo(lcGx - 56 * lcS - lcG, lcMid); lcX.lineTo(lcGx - 56 * lcS + lcG, lcMid); lcX.stroke()
+          }
+        }
+        if (lcBar.showUrl !== false && lcBar.url) {
+          var lcPW = Math.min(lcW * 0.5, Math.max(200 * lcS, lcW * 0.34)), lcPH = lcBarH - 16 * lcS
+          var lcPx = lcX0 + (lcW - lcPW) / 2, lcPy = lcY0 + 8 * lcS
+          lcX.fillStyle = lcMin ? (lcThm ? lcThm.pill : '#26262b') : lcDark ? '#1d1d20' : '#ffffff'
+          rr(lcPx, lcPy, lcPW, lcPH, lcPH / 2, lcX); lcX.fill()
+          lcX.fillStyle = lcMin ? (lcThm ? lcThm.text : '#9a9aa1') : lcDark ? '#a1a1a6' : '#5f5f64'
+          lcX.font = 13 * lcS + 'px -apple-system, system-ui, sans-serif'
+          lcX.textAlign = 'center'; lcX.textBaseline = 'middle'
+          var lcLabel = String(lcBar.url), lcMaxW = lcPW - 28 * lcS
+          if (lcX.measureText(lcLabel).width > lcMaxW) {
+            while (lcLabel.length > 1 && lcX.measureText(lcLabel + '\u2026').width > lcMaxW) lcLabel = lcLabel.slice(0, -1)
+            lcLabel += '\u2026'
+          }
+          lcX.fillText(lcLabel, lcPx + lcPW / 2, lcPy + lcPH / 2)
+          lcX.textAlign = 'start'; lcX.textBaseline = 'alphabetic'
+        }
+      }
+      // the media's facts: click rings and the cursor dot, video-anchored,
+      // at clip-local time
+      var lcCu = lcO.cur
+      if (lcCu && lcCu.pts && lcCu.pts.length) {
+        var lcSp = lcCu.space || { w: lcNW, h: lcNH }
+        var lcSize = (lcCu.size || 24) * lcS * 0.5
+        var lcT = lcI.t
+        var lcCks = lcCu.clicks || []
+        for (var lcc = 0; lcc < lcCks.length; lcc++) {
+          var lcCk = lcCks[lcc]
+          var lcAge = lcT - lcCk.t
+          if (lcAge < -0.08 || lcAge > 0.6) continue
+          var lcU = Math.max(0, Math.min(1, (lcAge + 0.08) / 0.68))
+          var lcFade = 1 - Math.pow(1 - lcU, 3)
+          lcX.save()
+          lcX.strokeStyle = 'rgba(255,255,255,' + (0.9 * (1 - lcU)) + ')'
+          lcX.lineWidth = Math.max(1, 3 * lcS * (1 - lcU * 0.6))
+          lcX.beginPath(); lcX.arc(lcX0 + (lcCk.x / (lcSp.w || lcNW)) * lcW, lcMY + (lcCk.y / (lcSp.h || lcNH)) * lcMH, lcSize * 0.8 + lcFade * 44 * lcS, 0, Math.PI * 2); lcX.stroke()
+          lcX.restore()
+        }
+        var lcPts = lcCu.pts, lcPX = lcPts[0].x, lcPY = lcPts[0].y
+        for (var lcp = 0; lcp < lcPts.length; lcp++) { if (lcPts[lcp].t <= lcT) { lcPX = lcPts[lcp].x; lcPY = lcPts[lcp].y } }
+        lcX.save()
+        lcX.fillStyle = 'rgba(255,255,255,0.95)'; lcX.strokeStyle = 'rgba(0,0,0,0.4)'; lcX.lineWidth = 2 * lcS
+        lcX.beginPath(); lcX.arc(lcX0 + (lcPX / (lcSp.w || lcNW)) * lcW, lcMY + (lcPY / (lcSp.h || lcNH)) * lcMH, lcSize, 0, Math.PI * 2); lcX.fill(); lcX.stroke()
+        lcX.restore()
+      }
+      lcX.restore()
+      if (lcO.border && lcO.border.width > 0) {
+        var lcBW = lcO.border.width * lcS
+        lcX.save(); lcX.strokeStyle = lcO.border.color || '#fff'; lcX.lineWidth = lcBW
+        rr(lcX0 - lcBW / 2, lcY0 - lcBW / 2, lcW + lcBW, lcH + lcBW, lcRad > 0 ? lcRad + lcBW / 2 : 0, lcX); lcX.stroke()
+        lcX.restore()
+      }
+      lcE.texture.needsUpdate = true
+      var lcM2 = lcE.mesh
+      lcM2.visible = true
+      if (lcM2.material) lcM2.material.opacity = lcI.a
+      var lcLean = lcCard.lean || [0, 0]
+      var lcRx = (lcLean[0] || 0) * Math.PI / 180, lcRy = (lcLean[1] || 0) * Math.PI / 180, lcRz = -(lcI.r || 0) * Math.PI / 180
+      var lcPlW = lcCW * lcK, lcPlH = lcCH * lcK
+      var lcWX = (lcI.x - 0.5) * obRefH * obAspect
+      var lcWY = -(lcI.y - 0.5) * obRefH - lcI.yof * lcK
+      if (obOrtho) {
+        lcM2.position.set((obOCX + (lcI.x - 0.5) * obOW) / obAX, obOCY - (lcI.y - 0.5) * obOH, -obOD)
+        obB.e.set(lcRx, lcRy, lcRz); lcM2.quaternion.setFromEuler(obB.e)
+      } else if (obB) {
+        lcM2.position.copy(obCam.position).addScaledVector(obB.f, Math.abs(${CARD_Z}) - 0.01).addScaledVector(obB.r, lcWX).addScaledVector(obB.u, lcWY)
+        obB.e.set(lcRx, lcRy, lcRz); lcM2.quaternion.copy(obCam.quaternion).multiply(obB.q.setFromEuler(obB.e))
+      } else {
+        lcM2.position.set(lcWX, lcWY, ${CARD_Z} + 0.01)
+        lcM2.rotation.set(lcRx, lcRy, lcRz)
+      }
+      lcM2.scale.set(lcPlW, lcPlH, 1)
+    }
+    // A card off screen rests; one gone from the data is disposed.
+    lcC.forEach(function (lcE2, lcId) {
+      if (lcSeen[lcId]) return
+      var lcStill = false
+      for (var lcq = 0; lcq < ols.length; lcq++) if (ols[lcq].id === lcId && ols[lcq].card) lcStill = true
+      if (lcStill) { lcE2.mesh.visible = false; return }
+      obC.group.remove(lcE2.mesh)
+      if (lcE2.mesh.geometry && lcE2.mesh.geometry.dispose) lcE2.mesh.geometry.dispose()
+      if (lcE2.mesh.material && lcE2.mesh.material.dispose) lcE2.mesh.material.dispose()
+      if (lcE2.texture && lcE2.texture.dispose) lcE2.texture.dispose()
+      lcC.delete(lcId)
+    })
     // Dispose props no longer in the data (live removal).
     obC.pool.forEach(function (obE2, obId) {
       if (!obSeen[obId]) {
@@ -3479,7 +3860,7 @@ function ratedSegments(doc) {
   const freezes = isRecordingDoc(doc) ? docFreezes(doc) : [];
   const speeds = doc.speed ?? [];
   const pieces = segs.flatMap(
-    (seg) => splitBySpeed2(
+    (seg) => splitBySpeed3(
       [seg],
       speeds.filter(
         (sp) => sameMedia(sp.media, seg.media)
@@ -3489,7 +3870,7 @@ function ratedSegments(doc) {
   return withFreezes(pieces, freezes);
 }
 function durationSec(doc, rated) {
-  const trimmed = totalDuration2(rated);
+  const trimmed = totalDuration3(rated);
   return trimmed > 0 ? trimmed : doc.source.meta.durationMs / 1e3;
 }
 function spanOutputExtent(segments, sIn, sOut, media) {
@@ -3817,6 +4198,52 @@ var FRAME_STEP_SRC = `
       }
       bgEl.currentTime = bgTarget
     }
+  }
+  // A GHOST element: a second element on the same bytes, held on ONE frame
+  // (a transition's outgoing snapshot), so one recording can be both cards
+  // at a boundary. Cached by source. Its readiness rides pendingDecodes,
+  // so an export's first paint inside a window waits for it, and a frame
+  // asked before it could seek is sought the moment it can.
+  function ghostEl(el) {
+    var gc = ns.ghostCache || (ns.ghostCache = new Map())
+    var src = el.currentSrc || el.src
+    var g = gc.get(src)
+    if (g) return g
+    g = document.createElement('video')
+    g.crossOrigin = 'anonymous'
+    g.muted = true
+    g.playsInline = true
+    g.preload = 'auto'
+    var gp = new Promise(function (resolve) {
+      var fired = false
+      var done = function () {
+        if (fired) return
+        fired = true
+        g.removeEventListener('loadeddata', done)
+        if (g.__voilaWant != null && g.readyState >= 1) {
+          var want = g.__voilaWant
+          g.__voilaWant = null
+          var seeked = function () { g.removeEventListener('seeked', seeked); resolve() }
+          g.addEventListener('seeked', seeked)
+          setTimeout(seeked, 250)
+          g.currentTime = Math.min(want, g.duration || want)
+        } else resolve()
+      }
+      g.addEventListener('loadeddata', done)
+      setTimeout(done, 2000)
+    })
+    if (ns.pendingDecodes) {
+      ns.pendingDecodes.add(gp)
+      gp.finally(function () { ns.pendingDecodes.delete(gp) })
+    }
+    g.src = src
+    g.load()
+    gc.set(src, g)
+    return g
+  }
+  function stepGhost(g, at) {
+    if (g.readyState >= 1) { g.__voilaWant = null; stepPaused(g, at); return }
+    g.__voilaWant = at
   }`;
 var SETUP = `async (ctx) => {
   ;${timelineRuntimeCode2}
@@ -4083,6 +4510,15 @@ var SETUP = `async (ctx) => {
       if (cam) stepPaused(cam, srcT)
       if (mic) stepPaused(mic, srcT)
     }
+    // A boundary's outgoing snapshot: the ghost element on the clip's last
+    // frame, stepped like the footage, and warmed a second ahead.
+    const trs = d.transitions || []
+    for (let i = 0; i < trs.length; i++) {
+      const tr = trs[i]
+      if (!tr.out || t < tr.t - 1 || t >= tr.t + tr.d) continue
+      const live = tr.out.media ? mediaEls[tr.out.media] : video
+      if (live && live.play) stepGhost(ghostEl(live), tr.out.at)
+    }
     const bg2 = d.frame && d.frame.backgroundMedia
     if (bg2 && bg2.key && bg2.kind !== 'image') {
       const bgEl2 = cache.get(bg2.key)
@@ -4360,6 +4796,87 @@ var ON_FRAME = `(ctx, content, dt) => {
   if (video.play) syncVid(video) // stills (HTMLImageElement) have nothing to sync
   if (r.cam && !amId) syncVid(r.cam)
   if (r.mic && !amId) syncVid(r.mic)
+
+  // --- transitions at a boundary (data.transitions, output seconds): the
+  // record whose window holds t, else the next one within a second (its
+  // snapshot warms ahead, so playback never shows a blank ghost). Locals
+  // are tr-prefixed (one var scope).
+  var trs = d.transitions || [], trA = null, trW = null
+  for (var trI = 0; trI < trs.length; trI++) {
+    var trR = trs[trI]
+    if (t >= trR.t && t < trR.t + trR.d) { trA = trR; break }
+    if (trR.out && trR.t > t && trR.t <= t + 1) { trW = trR; break }
+  }
+  function trEase(p) { p = p < 0 ? 0 : p > 1 ? 1 : p; var q = 1 - p; return 1 - q * q * q }
+  function trSide(side) { return side === 'left' ? [-1, 0] : side === 'right' ? [1, 0] : side === 'up' ? [0, 1] : [0, -1] }
+  // A record's outgoing media: its live element, and the GHOST held on the
+  // clip's last frame (a second element on the same bytes, so one
+  // recording can be both cards: a page change inside a single take). A
+  // still needs no ghost.
+  function trLiveEl(o) { return o.media ? (r.media ? r.media[o.media] : null) : r.video }
+  function trGhostEl(o) {
+    var el = trLiveEl(o)
+    if (!el) return null
+    if (!el.play) return el
+    var g = ghostEl(el)
+    stepGhost(g, o.at)
+    return g
+  }
+  if (trW) trGhostEl(trW.out)
+  var trIn = trA && trA.in ? trA.in : null, trOut = trA && trA.out ? trA.out : null
+  var trGEl = trOut ? trGhostEl(trOut) : null
+  if (!trGEl) trOut = null
+  // The live card's enter and the ghost's exit as plane-fraction offsets
+  // (x in plane widths, y in plane heights; +y up), a scale and an opacity.
+  var trOx = 0, trOy = 0, trSc = 1, trOp = 1
+  if (trIn) {
+    var trP = 1 - trEase((t - trA.t) / trIn.d)
+    if (trIn.kind === 'slide') { var trV = trSide(trIn.side); trOx = trV[0] * trP * ${TRANSITION_TRAVEL}; trOy = trV[1] * trP * ${TRANSITION_TRAVEL} }
+    else if (trIn.kind === 'fade') trOp = 1 - trP
+    else { trSc = 1 - ${TRANSITION_SCALE_STEP} * trP; trOp = 1 - trP }
+  }
+  var trGox = 0, trGoy = 0, trGsc = 1, trGop = 1
+  if (trOut) {
+    var trQ = trEase((t - trA.t) / trOut.d)
+    if (trOut.kind === 'slide') { var trV2 = trSide(trOut.side); trGox = trV2[0] * trQ * ${TRANSITION_TRAVEL}; trGoy = trV2[1] * trQ * ${TRANSITION_TRAVEL} }
+    else if (trOut.kind === 'fade') trGop = 1 - trQ
+    else { trGsc = 1 - ${TRANSITION_SCALE_STEP} * trQ; trGop = 1 - trQ }
+  }
+  var trGM = null
+  if (trOut && trOut.media && d.media) for (var trJ = 0; trJ < d.media.length; trJ++) if (d.media[trJ].id === trOut.media) trGM = d.media[trJ]
+  var trGFr = trOut && trOut.media && trGM && trGM.frame ? trGM.frame : frame
+  // The ghost layer: made on first need (most documents never cross a
+  // boundary), sized with the card layer, above it and below the stack's
+  // card planes. The flat stub paints the ghost on the card's own canvas.
+  var gh = null
+  if (trOut) {
+    if (!r.ghost && ctx.THREE && ctx.scene && card.mesh) {
+      var gT = ctx.THREE
+      var gCv = document.createElement('canvas')
+      gCv.width = cW; gCv.height = cH
+      var gTex = new gT.CanvasTexture(gCv)
+      gTex.colorSpace = gT.SRGBColorSpace
+      gTex.minFilter = gT.LinearFilter; gTex.magFilter = gT.LinearFilter; gTex.generateMipmaps = false
+      var gPh = 2 * ${Math.abs(CARD_Z)} * Math.tan(${CARD_FOV} * Math.PI / 180 / 2)
+      var gMesh = new gT.Mesh(new gT.PlaneGeometry(gPh * (W / H) * (cW / W), gPh * (cH / H)), new gT.MeshBasicMaterial({ map: gTex, transparent: true, depthTest: false, depthWrite: false }))
+      gMesh.position.set(0, 0, ${CARD_Z + GHOST_Z_LIFT})
+      gMesh.frustumCulled = false
+      gMesh.renderOrder = ${GHOST_RENDER_ORDER}
+      ctx.scene.add(gMesh)
+      r.ghost = { canvas: gCv, c2d: gCv.getContext('2d'), texture: gTex, mesh: gMesh, w: cW, h: cH }
+    }
+    gh = r.ghost || { c2d: c, canvas: cv }
+    if (r.ghost && (r.ghost.w !== cW || r.ghost.h !== cH)) {
+      r.ghost.canvas.width = cW; r.ghost.canvas.height = cH; r.ghost.w = cW; r.ghost.h = cH
+      if (r.ghost.texture.dispose) r.ghost.texture.dispose()
+      if (r.ghost.mesh.geometry && r.ghost.mesh.geometry.dispose) r.ghost.mesh.geometry.dispose()
+      var gPh2 = 2 * ${Math.abs(CARD_Z)} * Math.tan(${CARD_FOV} * Math.PI / 180 / 2)
+      r.ghost.mesh.geometry = new ctx.THREE.PlaneGeometry(gPh2 * (W / H) * (cW / W), gPh2 * (cH / H))
+    }
+  }
+  // The two cursor points a boundary lerps between (frame space), set by
+  // the passes below: the ghost's last, the live card's current.
+  var trQa = null, trQb = null, trQs = 0, trQw = 0
   // Gain routing (live via SET_DATA). With a mic sidecar (AT split) the
   // recording <video> carries SYSTEM audio \u2014 its volume is the system fader \u2014
   // and the sidecar element is the voice (micGain). Legacy takes have one
@@ -4556,6 +5073,19 @@ var ON_FRAME = `(ctx, content, dt) => {
   if (bg.texture) bg.texture.needsUpdate = true
   }
 
+  // The card paints in PASSES: the ghost first (the outgoing clip's last
+  // frame on its own canvas, while a boundary is crossing), then the live
+  // card. A pass swaps the canvas, the element, the media, the source
+  // moment and the card fields it reads; the ghost reads the camera as it
+  // stood at the boundary and paints no clicks and no dot. The live pass
+  // runs last, so everything after the loop reads the live card.
+  var lvVideo = video, lvActM = actM, lvAmId = amId, lvSrcT = srcT, lvCfr = cfr, lvC = c, lvCv = cv
+  var trPasses = trOut ? [true, false] : [false]
+  for (var tpI = 0; tpI < trPasses.length; tpI++) {
+  var tpG = trPasses[tpI]
+  var tpT = t
+  if (tpG) { c = gh.c2d; cv = gh.canvas; video = trGEl; actM = trGM; amId = trOut.media; srcT = trOut.at; cfr = trGFr; tpT = trA.t - 0.001 }
+  else { c = lvC; cv = lvCv; video = lvVideo; actM = lvActM; amId = lvAmId; srcT = lvSrcT; cfr = lvCfr }
   // The CARD layer canvas starts transparent each frame \u2014 the padding around
   // the contain-fit card shows the background layer through the plane's alpha.
   // Under overscan the canvas is larger than the frame and every frame-space
@@ -4612,7 +5142,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   var lvl = 1, zx = 0.5, zy = 0.5
   var zt = d.zoomTrack
   if (zt && zt.keyframes && zt.keyframes.length) {
-    var z = TL.sample(zt, t, TL.lerpArray)
+    var z = TL.sample(zt, tpT, TL.lerpArray)
     lvl = z[0]; zx = z[1]; zy = z[2]
   }
   var barH = bar.kind && bar.kind !== 'none' ? (bar.height || 44) * s2 : 0
@@ -4815,7 +5345,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   var cks = d.clicks || []
   var ckF = d.clickFx || {}
   var ckPress = 1
-  if (cks.length) {
+  if (cks.length && !tpG) {
     var ckK = ckF.k || 1
     var ckPre = ${CLICK_FX_PRE}
     var ckRD = ${CLICK_RIPPLE_DUR} * (ckF.dur || 1)
@@ -4974,7 +5504,15 @@ var ON_FRAME = `(ctx, content, dt) => {
         }
       }
     }
-    if (cuA > 0.01) {
+    // Across a boundary the dot is ONE, drawn in frame space on the
+    // overlay layer (the lerp after the passes), never on a card that is
+    // 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 (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) + ')'
@@ -4985,6 +5523,8 @@ var ON_FRAME = `(ctx, content, dt) => {
   }
   if (fitCover) c.restore()
   c.restore()
+  if (tpG && gh.texture) gh.texture.needsUpdate = true
+  }
 
   // --- OVERLAY layer (screen-space plane, never tilts): the cam bubble, the
   // recording's own footage. Text/image/video overlay CLIPS are the studio
@@ -5002,7 +5542,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   if (camV && camV.readyState >= 2) r.camHasFrame = true
   var camActiveNow = !!(camV && camOn && camS.visible !== false && r.camHasFrame)
   var ovSig = W + 'x' + H
-  var ovDirty = ov.sig !== ovSig || camActiveNow || ov.active
+  var ovDirty = ov.sig !== ovSig || camActiveNow || ov.active || !!trOut
   if (ovDirty) {
   ovC.clearRect(0, 0, W, H)
   // webcam bubble \u2014 pinned to the frame corner regardless of card tilt/zoom.
@@ -5052,8 +5592,26 @@ var ON_FRAME = `(ctx, content, dt) => {
       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
+  // change). It lands on the incoming's own dot as the window closes.
+  if (trOut && (trQa || trQb) && !(d.cursorStyle && d.cursorStyle.visible === false)) {
+    var tqA = trQa || trQb, tqB = trQb || trQa
+    var tqP = trEase((t - trA.t) / trA.d)
+    var tqAx = (tqA[0] - W / 2) * trGsc + W / 2 + trGox * W, tqAy = (tqA[1] - H / 2) * trGsc + H / 2 - trGoy * H
+    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()
+  }
   ov.sig = ovSig
-  ov.active = camActiveNow
+  ov.active = camActiveNow || !!trOut
   if (ov.texture) ov.texture.needsUpdate = true
   }
 
@@ -5082,15 +5640,22 @@ var ON_FRAME = `(ctx, content, dt) => {
     // which the overscan grows).
     var cpk = d.cardPoseTrack
     var cpH = 2 * ${Math.abs(CARD_Z)} * Math.tan(${CARD_FOV} * Math.PI / 180 / 2)
-    if (cpk && cpk.keyframes && cpk.keyframes.length && card.mesh.scale && card.mesh.position) {
-      var cpv = TL.sample(cpk, t, TL.lerpArray)
-      card.mesh.scale.x = cpv[0]; card.mesh.scale.y = cpv[0]
-      card.mesh.position.y = cpv[1] * cpH
-      if (card.mesh.material) card.mesh.material.opacity = cpv[2]
+    var cpv = null
+    if (cpk && cpk.keyframes && cpk.keyframes.length) cpv = TL.sample(cpk, t, TL.lerpArray)
+    if ((cpv || trIn) && card.mesh.scale && card.mesh.position) {
+      // The pose track, then a boundary's enter on top: a slide is an
+      // offset in plane widths and heights, a fade an opacity, a scale both.
+      var cpS = (cpv ? cpv[0] : 1) * trSc
+      var cpO = (cpv ? cpv[2] : 1) * trOp
+      card.mesh.scale.x = cpS; card.mesh.scale.y = cpS
+      card.mesh.position.x = trOx * cpH * (W / H)
+      card.mesh.position.y = ((cpv ? cpv[1] : 0) + trOy) * cpH
+      if (card.mesh.material) card.mesh.material.opacity = cpO
       // Gone past its clip: the mesh leaves the scene, not just its paint.
-      card.mesh.visible = cpv[2] > 0.001
-    } else if (card.mesh.scale && card.mesh.position && ((card.mesh.scale.x !== undefined && card.mesh.scale.x !== 1) || (card.mesh.position.y !== undefined && card.mesh.position.y !== 0) || card.mesh.visible === false)) {
+      card.mesh.visible = cpO > 0.001
+    } else if (card.mesh.scale && card.mesh.position && ((card.mesh.scale.x !== undefined && card.mesh.scale.x !== 1) || (card.mesh.position.y !== undefined && card.mesh.position.y !== 0) || (card.mesh.position.x !== undefined && card.mesh.position.x !== 0) || card.mesh.visible === false)) {
       card.mesh.scale.x = 1; card.mesh.scale.y = 1
+      card.mesh.position.x = 0
       card.mesh.position.y = 0
       if (card.mesh.material) card.mesh.material.opacity = 1
       card.mesh.visible = true
@@ -5107,6 +5672,29 @@ var ON_FRAME = `(ctx, content, dt) => {
     }
   }
 
+  // The ghost plane: posed as the card stood at the boundary (its lean, its
+  // pose), then moved by its exit; hidden while no boundary is crossing.
+  if (r.ghost && r.ghost.mesh) {
+    var gm = r.ghost.mesh
+    if (trOut && gh === r.ghost) {
+      var gtT = trA.t - 0.001
+      var grx = 0, gry = 0
+      var gtk = d.tiltTrack
+      if (gtk && gtk.keyframes && gtk.keyframes.length && !d.tiltSuppressed) { var gtv = TL.sample(gtk, gtT, TL.lerpArray); grx = gtv[0] * Math.PI / 180; gry = gtv[1] * Math.PI / 180 }
+      gm.rotation.x = grx; gm.rotation.y = gry
+      var gpv = [1, 0, 1]
+      var gpk = d.cardPoseTrack
+      if (gpk && gpk.keyframes && gpk.keyframes.length) gpv = TL.sample(gpk, gtT, TL.lerpArray)
+      var gpH = 2 * ${Math.abs(CARD_Z)} * Math.tan(${CARD_FOV} * Math.PI / 180 / 2)
+      var gS = gpv[0] * trGsc, gO = gpv[2] * trGop
+      gm.scale.x = gS; gm.scale.y = gS
+      gm.position.x = trGox * gpH * (W / H)
+      gm.position.y = (gpv[1] + trGoy) * gpH
+      if (gm.material) gm.material.opacity = gO
+      gm.visible = gO > 0.001
+    } else if (gm.visible !== false) gm.visible = false
+  }
+
   // The card layer redraws every frame (dynamic content); bg/overlay uploads are
   // gated inside their blocks (dirty-tracking above).
   if (card.texture) card.texture.needsUpdate = true
@@ -5118,6 +5706,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   }
 }`;
 function studioLayerData(layers, duration) {
+  const rec = "source" in layers ? layers : null;
   return {
     // Music/SFX clips with their gain envelopes baked (shared truth for the
     // preview scheduler and the export's offline mix). `duckEnv` (the mic-derived
@@ -5205,9 +5794,60 @@ function studioLayerData(layers, duration) {
           })()
         };
         if (o.kind !== "text") {
+          const lm = rec ? layerMedia(rec, o.key) : null;
+          const lmImage = lm ? lm.sourceKind === "image" : o.kind === "image";
+          const lmCard = o.frame ? {
+            bar: {
+              kind: o.frame.browserBar?.kind ?? "none",
+              url: o.frame.browserBar?.url ?? (lm ? pageDisplayUrl(lm.meta.pageUrl) : ""),
+              showUrl: o.frame.browserBar?.showUrl ?? true,
+              showControls: o.frame.browserBar?.showControls ?? true,
+              height: o.frame.browserBar?.height ?? 44,
+              ...o.frame.browserBar?.theme ? { theme: o.frame.browserBar.theme } : {}
+            },
+            lean: [
+              round6(o.frame.lean?.rx ?? 0),
+              round6(o.frame.lean?.ry ?? 0)
+            ],
+            shadow: o.frame.shadow ?? LAYER_CARD_SHADOW,
+            shadowContact: o.frame.shadowContact ?? 0,
+            ...o.frame.shadowColor ? { shadowColor: o.frame.shadowColor } : {}
+          } : null;
+          const lmFacts = lm && o.frame && o.frame.cursor !== false && lm.cursor.length ? (() => {
+            const lfx = rec.cursor.clickFx;
+            const sm = smoothCursor(lm.cursor, {
+              factor: rec.cursor.smoothing,
+              clickSnap: lfx.style !== "none" || lfx.press
+            });
+            const clicks = [];
+            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)
+                });
+            }
+            return {
+              cur: {
+                pts: sm.map((p) => ({
+                  t: round6(p.t),
+                  x: round6(p.x),
+                  y: round6(p.y)
+                })),
+                space: { w: lm.meta.width, h: lm.meta.height },
+                size: rec.cursor.size,
+                clicks
+              }
+            };
+          })() : {};
           return {
             ...base,
-            key: o.key,
+            ...lm ? { kind: lmImage ? "image" : "video" } : {},
+            key: lm ? lm.videoKey : o.key,
+            ...lm && lm.crop ? { crop: lm.crop } : {},
+            ...lmCard ? { card: lmCard } : {},
+            ...lmFacts,
             w: round6(o.width ?? OVERLAY_MEDIA_DEFAULT_WIDTH),
             radius: o.radius ?? OVERLAY_MEDIA_DEFAULT_RADIUS,
             opacity: o.opacity ?? 1,
@@ -5279,6 +5919,7 @@ function studioLayerData(layers, duration) {
 function lowerToComposition(input) {
   const doc = migrateMotion(input);
   const rated = ratedSegments(doc);
+  const transitions = docTransitions(doc);
   const footageEnd = durationSec(doc, rated);
   const duration = outputEnd(doc, footageEnd);
   const fx = doc.cursor.clickFx;
@@ -5293,7 +5934,12 @@ function lowerToComposition(input) {
   const layout = docCardLayout(doc);
   const meta = doc.source.meta;
   const zoomStyle = resolveZoomStyle(doc.zoomStyle, doc.zoomParams);
-  const zoomSpans = doc.zoom.map((z) => {
+  const zoomSpans = restSpansThroughTransitions(
+    doc.zoom,
+    rated,
+    transitions,
+    ZOOM_SPAN_MIN
+  ).map((z) => {
     if (z.focusMode === "auto") {
       const f = followFocusEvents(
         z,
@@ -5380,6 +6026,9 @@ function lowerToComposition(input) {
       })
     } : {},
     ...cursorFade.length ? { cursorFade } : {},
+    // The boundaries that move: ON_FRAME reads them by output time and
+    // needs no document. Absent when none moves.
+    ...transitions.length ? { transitions } : {},
     // Click effects: OUTPUT-anchored click records + resolved styling (named
     // intensities/colors become numbers HERE — ON_FRAME reads no registry).
     ...clickFxData(doc, rated),
@@ -5397,7 +6046,13 @@ function lowerToComposition(input) {
     // producer of this track, never a second pose.
     ...(() => {
       const head = entranceTiltKeyframes(cardEnter(doc.frame));
-      const spans = doc.tilt && doc.tilt.length ? tiltTrackFromDoc(doc.tilt, rated, zoomStyle.tilt) : void 0;
+      const tilts = doc.tilt ? restSpansThroughTransitions(
+        doc.tilt,
+        rated,
+        transitions,
+        TILT_SPAN_MIN
+      ) : [];
+      const spans = tilts.length ? tiltTrackFromDoc(tilts, rated, zoomStyle.tilt) : void 0;
       const track = prependEntrance(spans, head);
       return track ? { tiltTrack: track } : {};
     })(),
@@ -5874,18 +6529,18 @@ function zoomCoversRect(span, rect, layout, tol = 0.02) {
 }
 
 // src/digest/style.ts
-import { totalDuration as totalDuration4 } from "@vosjs/timeline";
+import { totalDuration as totalDuration5 } from "@vosjs/timeline";
 
 // src/audioBeds.ts
-import { totalDuration as totalDuration3 } from "@vosjs/timeline";
-var round32 = (v) => Math.round(v * 1e3) / 1e3;
+import { totalDuration as totalDuration4 } from "@vosjs/timeline";
+var round33 = (v) => Math.round(v * 1e3) / 1e3;
 function docOutputDuration(doc) {
-  const footage = totalDuration3(ratedSegments(doc));
+  const footage = totalDuration4(ratedSegments(doc));
   return isRecordingDoc(doc) ? outputEnd(migrateMotion(doc), footage) : footage;
 }
 function musicBedClip(input) {
-  const track = round32(input.trackDuration);
-  const output = round32(input.outputDuration);
+  const track = round33(input.trackDuration);
+  const output = round33(input.outputDuration);
   const clip = {
     id: input.id,
     key: input.key,
@@ -5900,7 +6555,7 @@ function musicBedClip(input) {
     fadeIn: 0,
     // A bed that just stops reads as a glitch; clamp so a very short cut
     // still spends most of its time at full level.
-    fadeOut: output > 0 ? Math.min(1.5, round32(output / 4)) : 1.5,
+    fadeOut: output > 0 ? Math.min(1.5, round33(output / 4)) : 1.5,
     duck: input.hasMic || void 0
   };
   if (output <= 0) return clip;
@@ -5929,18 +6584,18 @@ function refillAudioBeds(doc, prevDuration, nextDuration) {
     const placed = clip.loop ? Math.max(clip.out - clip.in, clip.loopLen ?? clip.out - clip.in) : clip.out - clip.in;
     if (Math.abs(clip.start + placed - prevDuration) > EPS2) continue;
     const span = clip.out - clip.in;
-    const nextLen = round32(nextDuration - clip.start);
+    const nextLen = round33(nextDuration - clip.start);
     if (clip.loop) {
       if (nextLen >= span) {
         clip.loopLen = nextLen;
       } else {
         clip.loop = void 0;
         clip.loopLen = void 0;
-        clip.out = round32(clip.in + nextLen);
+        clip.out = round33(clip.in + nextLen);
       }
     } else {
       if (clip.in + nextLen <= clip.duration) {
-        clip.out = round32(clip.in + nextLen);
+        clip.out = round33(clip.in + nextLen);
       } else {
         clip.out = clip.duration;
         clip.loop = true;
@@ -6161,8 +6816,8 @@ function applyTemplate(template, take, opts) {
       }
     ].sort((a, b) => a.at - b.at);
   }
-  const templateEnd = totalDuration4(ratedSegments(template));
-  const takeEnd = totalDuration4(ratedSegments(doc));
+  const templateEnd = totalDuration5(ratedSegments(template));
+  const takeEnd = totalDuration5(ratedSegments(doc));
   const shift = shiftBy(opts.at, templateEnd, takeEnd);
   const own = new Map((take.overlays ?? []).map((o) => [o.id, o]));
   const overlays = (doc.overlays ?? []).filter(
@@ -6171,7 +6826,7 @@ function applyTemplate(template, take, opts) {
   const skipped = [];
   for (const clip of template.overlays ?? []) {
     const next = structuredClone(clip);
-    next.start = Math.max(0, round33(clip.start + shift));
+    next.start = Math.max(0, round34(clip.start + shift));
     next.from = from;
     const mine = own.get(clip.id);
     if (next.kind === "text") {
@@ -6199,7 +6854,7 @@ function applyTemplate(template, take, opts) {
   for (const clip of template.objects ?? []) {
     const next = structuredClone(clip);
     if (next.span)
-      next.span.start = Math.max(0, round33(next.span.start + shift));
+      next.span.start = Math.max(0, round34(next.span.start + shift));
     next.from = from;
     objects.push(next);
   }
@@ -6209,7 +6864,7 @@ function applyTemplate(template, take, opts) {
   );
   for (const clip of template.audio) {
     const next = structuredClone(clip);
-    next.start = Math.max(0, round33(clip.start + shift));
+    next.start = Math.max(0, round34(clip.start + shift));
     next.from = from;
     audio.push(next);
   }
@@ -6230,7 +6885,7 @@ function applyTemplate(template, take, opts) {
   }
   return { doc, notes };
 }
-var round33 = (v) => Math.round(v * 1e3) / 1e3;
+var round34 = (v) => Math.round(v * 1e3) / 1e3;
 
 // src/digest/geometry.ts
 var CROP_MIN_FRAC = 0.25;
@@ -6472,7 +7127,7 @@ function round10(v) {
 
 // src/lower/lowerStudioDoc.ts
 import { applyTimelineEdits } from "@vosjs/shared/timelineEdits";
-import { totalDuration as totalDuration5 } from "@vosjs/timeline";
+import { totalDuration as totalDuration6 } from "@vosjs/timeline";
 function lowerStudioDoc(doc, opts = {}) {
   return isRecordingDoc(doc) ? lowerToComposition(doc) : lowerProgramDoc(doc, opts);
 }
@@ -6503,7 +7158,7 @@ function lowerProgramDoc(doc, opts = {}) {
   ) : doc.program.config;
   const own = programDuration(doc);
   const rated = ratedSegments(doc);
-  const duration = own > 0 ? totalDuration5(rated) : 0;
+  const duration = own > 0 ? totalDuration6(rated) : 0;
   const entryData = studioLayerData(doc, duration);
   const baseData = anchor.data && typeof anchor.data === "object" ? anchor.data : {};
   const retimed = !!doc.speed?.length && own > 0;
@@ -7101,31 +7756,10 @@ import {
   removeSegment,
   segmentRate as segmentRate3,
   sourceToTimeline as sourceToTimeline2,
-  splitBySpeed as splitBySpeed3,
-  totalDuration as totalDuration6,
+  splitBySpeed as splitBySpeed4,
+  totalDuration as totalDuration7,
   trimSegment
 } from "@vosjs/timeline";
-function effectiveSegments(doc) {
-  if (isRecordingDoc(doc) && doc.segments.length) return doc.segments;
-  return [{ in: 0, out: anchorSourceDuration(doc) }];
-}
-var segmentPieces = (seg, speeds, freezes, leading) => {
-  const own = freezes.filter(
-    (f) => f.at <= seg.out + 1e-9 && (leading ? f.at >= seg.in - 1e-9 : f.at > seg.in + 1e-9)
-  );
-  return withFreezes(splitBySpeed3([seg], speeds), own);
-};
-var outputLen = (seg, speeds, freezes = [], leading = true) => totalDuration6(segmentPieces(seg, speeds, freezes, leading));
-var segmentStarts = (segments, speeds, freezes = []) => {
-  const starts = [];
-  let acc = 0;
-  segments.forEach((s, i) => {
-    starts.push(acc);
-    acc += outputLen(s, speeds, freezes, i === 0 || !contiguous(segments, i));
-  });
-  return starts;
-};
-var contiguous = (segments, i) => i > 0 && Math.abs(segments[i - 1].out - segments[i].in) < 1e-9;
 var videoLane = {
   id: "video",
   label: "Video",
@@ -7177,7 +7811,7 @@ var videoLane = {
         if (index < 0 || index >= segments.length) return null;
         const seg = segments[index];
         const starts = segmentStarts(segments, speeds, freezes);
-        const fullMap = splitBySpeed3([{ in: 0, out: sourceDuration }], speeds);
+        const fullMap = splitBySpeed4([{ in: 0, out: sourceDuration }], speeds);
         const edgeSrc = g.edge === "start" ? seg.in : seg.out;
         const edgeOutNow = g.edge === "start" ? starts[index] : starts[index] + outputLen(
           seg,
@@ -7213,7 +7847,7 @@ var videoLane = {
         const leading = index === 0 || !contiguous(segments, index);
         const local = g.t - starts[index];
         for (const m of freezeOutputExtents(
-          splitBySpeed3([s], speeds),
+          splitBySpeed4([s], speeds),
           freezes.filter(
             (f) => f.at <= s.out + 1e-9 && (leading ? f.at >= s.in - 1e-9 : f.at > s.in + 1e-9)
           )
@@ -7280,7 +7914,7 @@ var freezeLane = {
     if (!freezes.length) return [];
     const segs = effectiveSegments(doc);
     const marks = freezeOutputExtents(
-      splitBySpeed3(segs, doc.speed ?? []),
+      splitBySpeed4(segs, doc.speed ?? []),
       freezes
     );
     return freezes.flatMap((f) => {
@@ -7306,12 +7940,12 @@ var freezeLane = {
     if (g.type === "create") {
       const rated = ratedSegments(doc);
       for (const m of freezeOutputExtents(
-        splitBySpeed3(segs, speeds),
+        splitBySpeed4(segs, speeds),
         freezes
       ).values()) {
         if (g.t >= m.t - 1e-9 && g.t <= m.t + m.duration + 1e-9) return null;
       }
-      if (g.t > totalDuration6(rated) + 1e-9) return null;
+      if (g.t > totalDuration7(rated) + 1e-9) return null;
       const srcT = round11(mapTime2(rated, Math.max(0, g.t)));
       if (!kept(srcT) || !clear(srcT)) return null;
       const id = nextFreezeId(doc);
@@ -7347,11 +7981,11 @@ var freezeLane = {
       return mine;
     };
     const base = withFreezes(
-      splitBySpeed3(segs, speeds),
+      splitBySpeed4(segs, speeds),
       freezes.filter((x) => x.id !== f.id)
     );
     if (g.type === "move" || g.type === "resize" && g.edge === "start") {
-      const marks = freezeOutputExtents(splitBySpeed3(segs, speeds), freezes);
+      const marks = freezeOutputExtents(splitBySpeed4(segs, speeds), freezes);
       const mine = marks.get(f.id);
       const endOut = mine ? mine.t + mine.duration : null;
       const srcT = round11(
@@ -7364,7 +7998,7 @@ var freezeLane = {
         x.at = srcT;
         if (g.type === "resize" && endOut !== null) {
           const after = freezeOutputExtents(
-            splitBySpeed3(effectiveSegments(d), d.speed ?? []),
+            splitBySpeed4(effectiveSegments(d), d.speed ?? []),
             docFreezes({
               ...d,
               freeze: (d.freeze ?? []).map(
@@ -7378,7 +8012,7 @@ var freezeLane = {
       };
     }
     if (g.type === "resize") {
-      const marks = freezeOutputExtents(splitBySpeed3(segs, speeds), freezes);
+      const marks = freezeOutputExtents(splitBySpeed4(segs, speeds), freezes);
       const mine = marks.get(f.id);
       if (!mine) return null;
       const seconds = clampFreezeSeconds(g.t - mine.t);
@@ -7939,7 +8573,7 @@ var speedLane = {
     const sp = spans.find((s) => s.id === g.id);
     if (!sp) return null;
     const others = spans.filter((o) => o.id !== g.id);
-    const base = splitBySpeed3(effectiveSegments(doc), others);
+    const base = splitBySpeed4(effectiveSegments(doc), others);
     if (g.type === "move") {
       const len = sp.out - sp.in;
       let newIn = clampToKept(
@@ -8522,11 +9156,13 @@ export {
   FREEZE_SECONDS_MIN,
   HOUSE_GRADIENT,
   IDLE_KINDS,
+  LAYER_CARD_SHADOW,
   LAYOUT_FRAME_FIELDS,
   LOOK_KINDS,
   MEDIA_ENTER_KINDS,
   MEDIA_EXIT_KINDS,
   MEDIA_FRAME_KEYS,
+  MEDIA_KEY_PREFIX,
   MINIMAL_BAR_THEMES,
   MOTION_DELTA,
   MOTION_EASE,
@@ -8549,6 +9185,8 @@ export {
   REST_TILT_ID,
   SCENE_MOTION,
   SCENE_QUIET,
+  SEGMENT_ENTER_KINDS,
+  SEGMENT_EXIT_KINDS,
   SPEED_RATE_MAX,
   SPEED_RATE_MIN,
   SPEED_SPAN_MIN,
@@ -8574,6 +9212,9 @@ export {
   TILT_RAMP_OUT,
   TILT_SPAN_MIN,
   TILT_UI_DEG_MAX,
+  TRANSITION_SECONDS,
+  TRANSITION_SECONDS_MAX,
+  TRANSITION_SECONDS_MIN,
   TRANSITION_SPEED_MULT,
   WINDOW_FOCUS_MIN,
   ZOOM_CHAIN_GAP,
@@ -8639,6 +9280,7 @@ export {
   docStillTime,
   docToCropSpace,
   docToFullSpace,
+  docTransitions,
   dropTemplate,
   duckCurve,
   effectiveSegments,
@@ -8673,6 +9315,7 @@ export {
   isStageClip,
   isUnitStep,
   lastLayerEnd,
+  layerMedia,
   layoutOf,
   levelForFocusFraction,
   lookFromBrand,
@@ -8684,6 +9327,8 @@ export {
   mediaDuration,
   mediaFrame,
   mediaKey,
+  mediaRef,
+  mediaRefId,
   mediaSource,
   micLane,
   migrateHostedDoc,
@@ -8735,10 +9380,15 @@ export {
   resolveText3dAsset,
   resolveZoomStyle,
   restLeanOf,
+  restSpansThroughTransitions,
   sameMedia,
   sceneChanges,
   scrollRuns,
+  segmentOutputExtents,
+  outputLen as segmentOutputLen,
+  segmentStarts,
   setSpeedInRange,
+  slideSide,
   smoothCursor,
   spanOutputExtent,
   speedLane,
@@ -8748,6 +9398,7 @@ export {
   tiltLane,
   tiltTrackFromDoc,
   transitionMult,
+  transitionSeconds,
   videoLane,
   voiceKey,
   withBackdrop,