@vosjs/studio-core 0.17.0 → 0.18.0

package/dist/index.js

@@ -456,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",
@@ -797,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" });
   }
@@ -1698,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";
 
@@ -2188,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);
@@ -3698,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)
@@ -3708,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) {
@@ -4036,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}
@@ -4302,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)
@@ -4579,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
@@ -4775,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
@@ -4831,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
@@ -5034,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)
@@ -5193,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) + ')'
@@ -5204,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
@@ -5221,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.
@@ -5271,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
   }
 
@@ -5301,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
@@ -5326,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
@@ -5550,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;
@@ -5564,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,
@@ -5651,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),
@@ -5668,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 } : {};
     })(),
@@ -6145,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,
@@ -6171,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;
@@ -6200,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;
@@ -6432,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(
@@ -6442,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") {
@@ -6470,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);
   }
@@ -6480,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);
   }
@@ -6501,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;
@@ -6743,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);
 }
@@ -6774,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;
@@ -7372,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",
@@ -7448,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,
@@ -7484,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)
           )
@@ -7551,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) => {
@@ -7577,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);
@@ -7618,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(
@@ -7635,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(
@@ -7649,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);
@@ -8210,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(
@@ -8822,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,
@@ -8847,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,
@@ -8912,6 +9280,7 @@ export {
   docStillTime,
   docToCropSpace,
   docToFullSpace,
+  docTransitions,
   dropTemplate,
   duckCurve,
   effectiveSegments,
@@ -9011,10 +9380,15 @@ export {
   resolveText3dAsset,
   resolveZoomStyle,
   restLeanOf,
+  restSpansThroughTransitions,
   sameMedia,
   sceneChanges,
   scrollRuns,
+  segmentOutputExtents,
+  outputLen as segmentOutputLen,
+  segmentStarts,
   setSpeedInRange,
+  slideSide,
   smoothCursor,
   spanOutputExtent,
   speedLane,
@@ -9024,6 +9398,7 @@ export {
   tiltLane,
   tiltTrackFromDoc,
   transitionMult,
+  transitionSeconds,
   videoLane,
   voiceKey,
   withBackdrop,