@vosjs/studio-core 0.13.1 → 0.15.0

package/dist/index.js

@@ -209,6 +209,20 @@ function exportSizeFor(ratio, resolution) {
   const safe = ratio > 0 && Number.isFinite(ratio) ? ratio : 16 / 9;
   return safe >= 1 ? { width: even(short * safe), height: even(short) } : { width: even(short), height: even(short / safe) };
 }
+var MEDIA_FRAME_KEYS = [
+  "browserBar",
+  "radius",
+  "shadow",
+  "shadowContact",
+  "shadowColor",
+  "inset",
+  "border",
+  "borderWidth",
+  "borderColor",
+  "fit",
+  "focus",
+  "focusFollow"
+];
 
 // src/capture.ts
 var CHROME_TOP_MIN = 20;
@@ -511,6 +525,71 @@ function lastLayerEnd(doc) {
 
 // src/lower/motion.ts
 import { splitBySpeed, totalDuration } from "@vosjs/timeline";
+
+// src/media.ts
+var PRIMARY_MEDIA = "";
+var mediaKey = (id) => id ?? PRIMARY_MEDIA;
+var sameMedia = (a, b) => mediaKey(a) === mediaKey(b);
+function docMediaList(doc) {
+  return [
+    { id: PRIMARY_MEDIA, source: doc.source },
+    ...(doc.media ?? []).map((m) => ({ id: m.id, source: m }))
+  ];
+}
+function mediaSource(doc, id) {
+  const key = mediaKey(id);
+  if (key === PRIMARY_MEDIA) return doc.source;
+  return (doc.media ?? []).find((m) => m.id === key) ?? null;
+}
+function mediaDuration(source) {
+  return (source.meta.durationMs || 0) / 1e3;
+}
+function mediaAtOutput(rated, t) {
+  let acc = 0;
+  let last = null;
+  for (const p of rated) {
+    const len = Math.max(0, p.out - p.in) / (p.rate && p.rate > 0 ? p.rate : 1);
+    if (t < acc + len) return mediaKey(p.media);
+    acc += len;
+    last = p;
+  }
+  return last ? mediaKey(last.media) : PRIMARY_MEDIA;
+}
+function mediaFrame(doc, id) {
+  const key = mediaKey(id);
+  if (key === PRIMARY_MEDIA) return doc.frame;
+  const m = (doc.media ?? []).find((x) => x.id === key);
+  if (!m) return doc.frame;
+  const over = m.frame ?? {};
+  const out = { ...doc.frame };
+  for (const k of MEDIA_FRAME_KEYS) {
+    if (k === "browserBar") continue;
+    const v = over[k];
+    if (v !== void 0) out[k] = v;
+  }
+  const bar = { ...doc.frame.browserBar };
+  const page = pageDisplayUrl(m.meta.pageUrl);
+  if (page) bar.url = page;
+  if (!m.meta.pageUrl) bar.kind = "none";
+  out.browserBar = { ...bar, ...over.browserBar ?? {} };
+  return out;
+}
+function cardFields(frame) {
+  const out = {};
+  for (const k of MEDIA_FRAME_KEYS) {
+    const v = frame[k];
+    if (v !== void 0) out[k] = v;
+  }
+  return out;
+}
+function nextMediaId(doc) {
+  const taken = new Set((doc.media ?? []).map((m) => m.id));
+  let n = 1;
+  while (taken.has(`m${n}`)) n++;
+  return `m${n}`;
+}
+
+// src/lower/motion.ts
 function docRestTime(doc) {
   if (doc.endCard) return null;
   const freezes = docFreezes(doc);
@@ -575,17 +654,19 @@ function exitSeconds(e) {
 }
 function placeFreezes(rated, freezes) {
   const marks = /* @__PURE__ */ new Map();
-  const pending = [...freezes].filter((f) => f.seconds > 0).sort((a, b) => a.at - b.at);
+  const placed = /* @__PURE__ */ new Set();
   const pieces = [];
   let acc = 0;
-  const freezePiece = (f) => {
+  const freezePiece = (f, media) => {
     const at = Math.max(HOLD_SOURCE_SPAN, f.at);
     marks.set(f.id, { t: acc, duration: f.seconds });
     pieces.push({
       in: at - HOLD_SOURCE_SPAN,
       out: at,
-      rate: HOLD_SOURCE_SPAN / f.seconds
+      rate: HOLD_SOURCE_SPAN / f.seconds,
+      ...media !== void 0 ? { media } : {}
     });
+    placed.add(f.id);
     acc += f.seconds;
   };
   const push2 = (p) => {
@@ -595,32 +676,23 @@ function placeFreezes(rated, freezes) {
   for (let i = 0; i < rated.length; i++) {
     let piece = rated[i];
     const next = rated[i + 1];
-    while (pending.length) {
-      const f = pending[0];
-      if (f.at > piece.out + 1e-9) break;
-      if (f.at < piece.in - 1e-9) {
-        pending.shift();
-        continue;
-      }
+    const continues = !!next && sameMedia(next.media, piece.media) && Math.abs(next.in - piece.out) < 1e-9 && next.out > piece.out;
+    const mine = freezes.filter(
+      (f) => f.seconds > 0 && !placed.has(f.id) && sameMedia(f.media, piece.media) && f.at >= piece.in - 1e-9 && (continues ? f.at < piece.out - 1e-9 : f.at <= piece.out + 1e-9)
+    ).sort((a, b) => a.at - b.at);
+    for (const f of mine) {
       if (f.at <= piece.in + 1e-9) {
-        pending.shift();
-        freezePiece(f);
-        continue;
-      }
-      if (f.at < piece.out - 1e-9) {
+        freezePiece(f, piece.media);
+      } else if (f.at < piece.out - 1e-9) {
         push2({ ...piece, out: f.at });
-        pending.shift();
-        freezePiece(f);
+        freezePiece(f, piece.media);
         piece = { ...piece, in: f.at };
-        continue;
+      } else {
+        const media = piece.media;
+        push2(piece);
+        piece = null;
+        freezePiece(f, media);
       }
-      const continues = next && Math.abs(next.in - piece.out) < 1e-9 && next.out > piece.out;
-      if (continues) break;
-      push2(piece);
-      piece = null;
-      pending.shift();
-      freezePiece(f);
-      break;
     }
     if (piece) push2(piece);
   }
@@ -1570,7 +1642,7 @@ import {
   sample,
   segmentRate as segmentRate2,
   sortKeyframes as sortKeyframes2,
-  sourceToTimeline as sourceToTimeline2,
+  sourceToTimeline,
   splitBySpeed as splitBySpeed2,
   totalDuration as totalDuration2
 } from "@vosjs/timeline";
@@ -1640,18 +1712,20 @@ function computeCardLayout(frame, video, W, H, zoomFocus) {
     cardH: dh + barH
   };
 }
-function docCardLayout(doc) {
+function docCardLayout(doc, media) {
   const meta = doc.source.meta;
   const H = 1080;
   const W = Math.max(
     2,
     Math.round(H * aspectRatioValue(doc.frame.aspectRatio, meta))
   );
+  const src = mediaSource(doc, media) ?? doc.source;
+  const sm = src.meta;
   return computeCardLayout(
-    doc.frame,
+    mediaFrame(doc, media),
     {
-      width: meta.captureWidth ?? meta.width,
-      height: meta.captureHeight ?? meta.height
+      width: sm.captureWidth ?? sm.width,
+      height: sm.captureHeight ?? sm.height
     },
     W,
     H
@@ -3242,7 +3316,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
 }`;
 
 // src/lower/extractClicks.ts
-import { segmentRate, sourceToTimeline } from "@vosjs/timeline";
+import { segmentRate } from "@vosjs/timeline";
 var CLICK_FX_PRE = 0.06;
 var CLICK_RIPPLE_DUR = 0.45;
 var CLICK_PULSE_DUR = 0.35;
@@ -3251,14 +3325,27 @@ var CLICK_SYNTH_RELEASE = 0.12;
 var CLICK_PAIR_MAX = 10;
 var CLICK_RECT_MAX_FRAC = 0.35;
 var RECT_CONTAIN_MARGIN = 8;
-function keptOutputEnd(segments, sIn, sOut) {
+function outputAt(segments, sourceT, media) {
+  if (!segments.length) return sourceT;
+  let acc = 0;
+  for (const s of segments) {
+    const rate = segmentRate(s);
+    if (sameMedia(s.media, media) && sourceT >= s.in && sourceT <= s.out)
+      return acc + (sourceT - s.in) / rate;
+    acc += Math.max(0, s.out - s.in) / rate;
+  }
+  return null;
+}
+function keptOutputEnd(segments, sIn, sOut, media) {
   let acc = 0;
   let end = null;
   for (const p of segments) {
     const rate = segmentRate(p);
-    const ovIn = Math.max(sIn, p.in);
-    const ovOut = Math.min(sOut, p.out);
-    if (ovOut > ovIn) end = acc + (ovOut - 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) end = acc + (ovOut - p.in) / rate;
+    }
     acc += Math.max(0, p.out - p.in) / rate;
   }
   return end;
@@ -3290,10 +3377,10 @@ function extractClicks(track, segments, opts) {
         break;
       }
     }
-    const ot = sourceToTimeline(segments, st);
+    const ot = outputAt(segments, st, opts.media);
     if (ot === null) continue;
     const upSrc = st + Math.max(pressLen, 0.02);
-    const up = keptOutputEnd(segments, st, upSrc) ?? ot + CLICK_SYNTH_RELEASE;
+    const up = keptOutputEnd(segments, st, upSrc, opts.media) ?? ot + CLICK_SYNTH_RELEASE;
     const click = {
       ot: round5(ot),
       up: round5(Math.max(up, ot + 0.02)),
@@ -3346,19 +3433,32 @@ var PROGRAM_DURATION = 1;
 function ratedSegments(doc) {
   const segs = isRecordingDoc(doc) ? doc.segments.length ? doc.segments : [{ in: 0, out: doc.source.meta.durationMs / 1e3 }] : [{ in: 0, out: programDuration(doc) }];
   const freezes = isRecordingDoc(doc) ? docFreezes(doc) : [];
-  return withFreezes(splitBySpeed2(segs, doc.speed ?? []), freezes);
+  const speeds = doc.speed ?? [];
+  const pieces = segs.flatMap(
+    (seg) => splitBySpeed2(
+      [seg],
+      speeds.filter(
+        (sp) => sameMedia(sp.media, seg.media)
+      )
+    )
+  );
+  return withFreezes(pieces, freezes);
 }
 function durationSec(doc, rated) {
   const trimmed = totalDuration2(rated);
   return trimmed > 0 ? trimmed : doc.source.meta.durationMs / 1e3;
 }
-function spanOutputExtent(segments, sIn, sOut) {
+function spanOutputExtent(segments, sIn, sOut, media) {
   let acc = 0;
   let start = null;
   let end = null;
   for (const p of segments) {
     const rate = segmentRate2(p);
     const len = Math.max(0, p.out - p.in) / rate;
+    if (!sameMedia(p.media, media)) {
+      acc += len;
+      continue;
+    }
     const ovIn = Math.max(sIn, p.in);
     const ovOut = Math.min(sOut, p.out);
     if (ovOut > ovIn) {
@@ -3389,7 +3489,7 @@ function trackEmitter() {
 function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE]) {
   const panEase = style.panEase;
   const mapped = [...zoom].sort((a, b) => a.in - b.in).flatMap((z) => {
-    const ext = spanOutputExtent(segments, z.in, z.out);
+    const ext = spanOutputExtent(segments, z.in, z.out, z.media);
     return ext ? [{ z, tIn: ext.start, tOut: ext.end }] : [];
   });
   const { keyframes, push: push2 } = trackEmitter();
@@ -3408,7 +3508,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
       push2(start + style.rampIn * m, entry, spanEase(z.ease, style.ease));
     }
     for (const e of z.followEvents ?? []) {
-      const eOut = sourceToTimeline2(segments, e.t);
+      const eOut = sourceToTimeline(segments, e.t);
       if (eOut === null || eOut <= tIn || eOut >= tOut) continue;
       const next2 = [cur[0], e.cx, e.cy];
       push2(eOut, cur, "none");
@@ -3451,7 +3551,7 @@ function tiltTrackFromDoc(tilt, segments, motion = {}) {
   const panEase = TILT_PAN_EASE;
   const rest = [0, 0];
   const mapped = [...tilt].sort((a, b) => a.in - b.in).flatMap((z) => {
-    const ext = spanOutputExtent(segments, z.in, z.out);
+    const ext = spanOutputExtent(segments, z.in, z.out, z.media);
     return ext ? [{ z, tIn: ext.start, tOut: ext.end }] : [];
   });
   const { keyframes, push: push2 } = trackEmitter();
@@ -3494,7 +3594,7 @@ function camTrackFromDoc(cam, spans, segments, W, H = 1080) {
   ];
   const panEase = CAM_PAN_EASE;
   const mapped = [...spans].sort((a, b) => a.in - b.in).flatMap((z) => {
-    const ext = spanOutputExtent(segments, z.in, z.out);
+    const ext = spanOutputExtent(segments, z.in, z.out, z.media);
     return ext ? [{ z, tIn: ext.start, tOut: ext.end }] : [];
   });
   const { keyframes, push: push2 } = trackEmitter();
@@ -3870,6 +3970,26 @@ var SETUP = `async (ctx) => {
   // the same sync as the screen video (source-anchored, so element time == the
   // video's). Unmuted \u2014 syncVid's autoplay net re-mutes on policy rejection.
   const mic = ctx.data.micSrc ? await load(ctx.data.micSrc, false) : null
+  // The take's OTHER media (concat): one element each, decoded the way the
+  // primary is; ON_FRAME drives the one under the playhead and pauses the
+  // rest. Absent = one media, byte-identical.
+  const mediaEls = {}
+  for (const m of ctx.data.media || []) {
+    try {
+      const el = m.isImage ? await loadImage(m.src) : await load(m.src, !m.hasAudio)
+      if (!m.isImage && ctx.data.videoDecodeMode === 'webcodecs') {
+        try {
+          const wp = await makeWcProvider(m.src)
+          if (wp && (!el.videoWidth || (wp.width === el.videoWidth && wp.height === el.videoHeight))) el.__voilaWc = wp
+        } catch (e) {
+          console.warn('[voila] webcodecs provider unavailable for a media, seeks stay html5', e)
+        }
+      }
+      mediaEls[m.id] = el
+    } catch (e) {
+      console.warn('[voila] a media failed to load', m.id, e)
+    }
+  }
   // Background media (frame.backgroundMedia): warm-load so the first paint is
   // complete. FAIL-OPEN \u2014 a bad key degrades to the CSS fill underneath, never
   // a dead LOAD (unlike the recording, which is the comp's reason to exist).
@@ -3898,9 +4018,27 @@ var SETUP = `async (ctx) => {
     const d = ctx.data
     const TL = globalThis.__vosTimeline
     const srcT = TL.mapTime(d.segments || [], t)
-    if (video.play) stepPaused(video, srcT)
-    if (cam) stepPaused(cam, srcT)
-    if (mic) stepPaused(mic, srcT)
+    // The media under the playhead (concat): step its element; the
+    // primary's sidecars belong to the primary's moments only.
+    let am = ''
+    {
+      let acc = 0
+      const sg = d.segments || []
+      for (let i = 0; i < sg.length; i++) {
+        const s0 = sg[i]
+        const ln = Math.max(0, s0.out - s0.in) / (s0.rate || 1)
+        if (t < acc + ln || i === sg.length - 1) { am = s0.media || ''; break }
+        acc += ln
+      }
+    }
+    const amEl = am ? mediaEls[am] : null
+    if (amEl) {
+      if (amEl.play) stepPaused(amEl, srcT)
+    } else {
+      if (video.play) stepPaused(video, srcT)
+      if (cam) stepPaused(cam, srcT)
+      if (mic) stepPaused(mic, srcT)
+    }
     const bg2 = d.frame && d.frame.backgroundMedia
     if (bg2 && bg2.key && bg2.kind !== 'image') {
       const bgEl2 = cache.get(bg2.key)
@@ -3910,7 +4048,7 @@ var SETUP = `async (ctx) => {
       }
     }
   })
-  return { video: video, cam: cam, mic: mic }
+  return { video: video, cam: cam, mic: mic, media: mediaEls }
 }`;
 var CREATE_CONTENT = `(ctx, setupData) => {
   const THREE = ctx.THREE
@@ -3961,6 +4099,7 @@ var CREATE_CONTENT = `(ctx, setupData) => {
       // { c2d, canvas, texture }) drive the card and let bg/overlay fall back.
       canvas: card.canvas, c2d: card.c2d, texture: card.texture,
       video: setupData.video, cam: setupData.cam, mic: setupData.mic,
+      media: setupData.media,
     },
   }
 }`;
@@ -4071,6 +4210,29 @@ var ON_FRAME = `(ctx, content, dt) => {
   // Output-timeline seconds (engine-fed master clock) \u2192 source seconds on screen.
   var t = ctx.time || 0
   var srcT = TL.mapTime(d.segments || [], t)
+  // The media under the playhead (concat): its element, crop, cursor and
+  // space stand in for the primary's below, and every other media's
+  // element rests. An absent media list is the primary alone.
+  var amId = ''
+  { var amAcc = 0, amSg = d.segments || []
+    for (var amI = 0; amI < amSg.length; amI++) {
+      var amS = amSg[amI], amLn = Math.max(0, amS.out - amS.in) / (amS.rate || 1)
+      if (t < amAcc + amLn || amI === amSg.length - 1) { amId = amS.media || ''; break }
+      amAcc += amLn
+    } }
+  var actM = null
+  if (amId && d.media) for (var amJ = 0; amJ < d.media.length; amJ++) if (d.media[amJ].id === amId) actM = d.media[amJ]
+  if (actM && r.media && r.media[amId]) video = r.media[amId]
+  else amId = ''
+  // The card under the playhead: another media's own card fields over the
+  // take's frame (resolved at lowering), the take's frame for the primary.
+  var cfr = amId && actM && actM.frame ? actM.frame : frame
+  if (r.media) for (var amK in r.media) { var amE = r.media[amK]; if (amK !== amId && amE && amE.pause && amE.paused === false) amE.pause() }
+  if (amId) {
+    if (r.video && r.video.pause && r.video.paused === false) r.video.pause()
+    if (r.cam && r.cam.pause && r.cam.paused === false) r.cam.pause()
+    if (r.mic && r.mic.pause && r.mic.paused === false) r.mic.pause()
+  }
   var s = H / 1080 // scale design-px controls to comp px
 
   // Play natively while playing (smooth); seek precisely otherwise (paused, scrubbing,
@@ -4152,8 +4314,8 @@ var ON_FRAME = `(ctx, content, dt) => {
     } catch (e) {}
   }
   if (video.play) syncVid(video) // stills (HTMLImageElement) have nothing to sync
-  if (r.cam) syncVid(r.cam)
-  if (r.mic) syncVid(r.mic)
+  if (r.cam && !amId) syncVid(r.cam)
+  if (r.mic && !amId) syncVid(r.mic)
   // 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
@@ -4367,19 +4529,19 @@ var ON_FRAME = `(ctx, content, dt) => {
   // strip is part of the card: it takes barH from the available height and the video
   // sits below it \u2014 bar + video share the rounded clip and zoom together.
   var pad = (frame.padding || 0) * s
-  // Per-side placement (frame.inset: fractions of the frame, a negative side
+  // Per-side placement (cfr.inset: fractions of the frame, a negative side
   // bleeds the card past the edge) overrides the symmetric padding on the
   // sides it names; absent sides keep pad, so the old math falls out.
-  var ipIns = frame.inset || {}
+  var ipIns = cfr.inset || {}
   var ipL = ipIns.left == null ? pad : ipIns.left * W
   var ipR = ipIns.right == null ? pad : ipIns.right * W
   var ipT = ipIns.top == null ? pad : ipIns.top * H
   var ipB = ipIns.bottom == null ? pad : ipIns.bottom * H
-  var bar = frame.browserBar || {}
+  var bar = cfr.browserBar || {}
   // Window takes carry a viewport crop (drawImage source rect, capture px) that
   // removes the real browser chrome \u2014 the card's source dims are then the CROP
   // dims (meta/cursor were rewritten into crop space at doc build).
-  var crp = d.crop || null
+  var crp = actM ? (actM.crop || null) : (d.crop || null)
   var vw = crp ? crp.w : (video.videoWidth || video.naturalWidth || 16)
   var vh = crp ? crp.h : (video.videoHeight || video.naturalHeight || 9)
   // Card-chrome scale: everything that belongs to the CARD (browser bar +
@@ -4393,11 +4555,11 @@ var ON_FRAME = `(ctx, content, dt) => {
   // Cover fit: the CARD rect and the VIDEO rect separate. Under
   // contain (default, byte-identical for every existing doc) the card IS the
   // fitted video; under cover the card is the padded area itself and the
-  // footage cover-fills it, cropped around frame.focus (normalized video
+  // footage cover-fills it, cropped around cfr.focus (normalized video
   // fractions, the zoom cx/cy convention; clamped so no gap ever shows).
   // Chrome under cover scales by s alone (cf = 1): the card is as wide as
   // the frame allows, which is the case cf existed to protect against.
-  var fitCover = frame.fit === 'cover'
+  var fitCover = cfr.fit === 'cover'
   var cf = fitCover ? 1 : Math.min(1, (W / H) / (vw / vh))
   var s2 = s * cf
   // current zoom \u2014 a standard keyframe track in OUTPUT time (hold + arrival pairs
@@ -4416,11 +4578,11 @@ var ON_FRAME = `(ctx, content, dt) => {
     sc = Math.max(availW / vw, availH / vh)
     dw = vw * sc; dh = vh * sc
     cardX = ipL; cardY = ipT; cardW = availW; cardH = availH + barH
-    var fcv = frame.focus || {}
+    var fcv = cfr.focus || {}
     var fcx = fcv.cx == null ? 0.5 : Math.max(0, Math.min(1, fcv.cx))
     var fcy = fcv.cy == null ? 0.5 : Math.max(0, Math.min(1, fcv.cy))
     // focusFollow: the crop keeps the camera's focus in frame (a 9:16 cut).
-    if (frame.focusFollow === 'camera' && zt && zt.keyframes && zt.keyframes.length) { fcx = zx; fcy = zy }
+    if (cfr.focusFollow === 'camera' && zt && zt.keyframes && zt.keyframes.length) { fcx = zx; fcy = zy }
     var vTop = ipT + barH
     dx = Math.min(cardX, Math.max(cardX + availW - dw, cardX + availW / 2 - fcx * dw))
     dy = Math.min(vTop, Math.max(vTop + availH - dh, vTop + availH / 2 - fcy * dh))
@@ -4432,14 +4594,14 @@ var ON_FRAME = `(ctx, content, dt) => {
     dx = ipL + (availW - dw) / 2; dy = ipT + barH + (availH - dh) / 2
     cardX = dx; cardY = dy - barH; cardW = dw; cardH = dh + barH
   }
-  var radius = (frame.radius || 0) * s2
-  var shadow = frame.shadow || 0
+  var radius = (cfr.radius || 0) * s2
+  var shadow = cfr.shadow || 0
   // The shadow's colour (a #rrggbb; the strengths are its alpha) and the
   // optional tight CONTACT layer that makes a light card sit on a light
   // ground.
-  var shC = frame.shadowContact || 0
+  var shC = cfr.shadowContact || 0
   var shRgb = '0,0,0'
-  var shHex = frame.shadowColor
+  var shHex = cfr.shadowColor
   if (typeof shHex === 'string' && /^#[0-9a-fA-F]{6}$/.test(shHex)) {
     shRgb = parseInt(shHex.slice(1, 3), 16) + ',' + parseInt(shHex.slice(3, 5), 16) + ',' + parseInt(shHex.slice(5, 7), 16)
   }
@@ -4579,15 +4741,15 @@ var ON_FRAME = `(ctx, content, dt) => {
   // expanded by half the width so the stroke's inner edge lands on the card's
   // own edge and never covers footage (inset, a 24px width ate 24px of the
   // recording). Outer corner radius grows with the width, the CSS-border rule;
-  // a square card stays square. frame.border is the ALPHA (0 = off) and rides
+  // a square card stays square. cfr.border is the ALPHA (0 = off) and rides
   // globalAlpha, so borderColor takes any CSS colour notation without this
   // having to parse one. Card chrome, so it scales by s2.
-  if (frame.border) {
-    var bdW = (frame.borderWidth > 0 ? frame.borderWidth : ${FRAME_BORDER_WIDTH_DEFAULT}) * s2
+  if (cfr.border) {
+    var bdW = (cfr.borderWidth > 0 ? cfr.borderWidth : ${FRAME_BORDER_WIDTH_DEFAULT}) * s2
     var bdH = bdW / 2
     c.save()
-    c.globalAlpha = Math.min(1, frame.border)
-    c.strokeStyle = frame.borderColor || '${FRAME_BORDER_COLOR_DEFAULT}'
+    c.globalAlpha = Math.min(1, cfr.border)
+    c.strokeStyle = cfr.borderColor || '${FRAME_BORDER_COLOR_DEFAULT}'
     c.lineWidth = bdW
     rr(cardX - bdH, cardY - bdH, cardW + bdW, cardH + bdW, radius > 0 ? radius + bdH : 0)
     c.stroke()
@@ -4598,7 +4760,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   // card. Contain never needs it (the video rect IS the card).
   if (fitCover) { c.save(); rr(cardX, cardY, cardW, cardH, radius); c.clip() }
   // cursor coordinate space + drawn radius (shared by click effects + the dot)
-  var space = d.cursorSpace || { w: vw, h: vh }
+  var space = (actM ? actM.cursorSpace : d.cursorSpace) || { w: vw, h: vh }
   var curSize = ((d.cursorStyle && d.cursorStyle.size) || 24) * s2 * 0.5
 
   // click effects \u2014 pure f(t): d.clicks are
@@ -4630,8 +4792,9 @@ var ON_FRAME = `(ctx, content, dt) => {
       // click's source moment, or an effect near a cut would keep painting
       // over the NEXT segment's unrelated footage
       if (Math.abs(srcT - ck.st) > 2) continue
-      var ckAx = dx + (ck.x / (space.w || vw)) * dw
-      var ckAy = dy + (ck.y / (space.h || vh)) * dh
+      var ckSp = ck.sp || space
+      var ckAx = dx + (ck.x / (ckSp.w || vw)) * dw
+      var ckAy = dy + (ck.y / (ckSp.h || vh)) * dh
       // press dip: smoothstep down around the real mousedown (80 ms lead \u2014
       // anticipation is what makes effects feel synced), hold through the real
       // down\u2192up span (drags dip long), easeOutBack rebound with a slight
@@ -4744,7 +4907,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   // The dot is the only thing cursorStyle.visible hides \u2014 the track still drives
   // cursor-follow zoom, and click effects draw above on their own switch.
   // Undefined reads as visible so pre-toggle docs are unchanged.
-  var cur = d.cursor || []
+  var cur = (actM ? actM.cursor : d.cursor) || []
   if (cur.length && !(d.cursorStyle && d.cursorStyle.visible === false)) {
     var px = cur[0].x, py = cur[0].y
     for (var j = 0; j < cur.length; j++) { if (cur[j].t <= srcT) { px = cur[j].x; py = cur[j].y } }
@@ -4753,7 +4916,7 @@ var ON_FRAME = `(ctx, content, dt) => {
     // Idle fade: a sparse SOURCE-time opacity curve baked by cursorIdleFade.
     // Linear between keys \u2014 opacity needs no easing, and the ramps are already
     // shaped by where the keys sit. Absent/empty = the cursor never dwells.
-    var cuA = 1, cuK = d.cursorFade
+    var cuA = 1, cuK = actM ? actM.cursorFade : d.cursorFade
     if (cuK && cuK.length) {
       if (srcT <= cuK[0].t) cuA = cuK[0].a
       else if (srcT >= cuK[cuK.length - 1].t) cuA = cuK[cuK.length - 1].a
@@ -4786,7 +4949,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   // runtime; the card c2d under stubs). Redraw + re-upload only while the
   // bubble is active (a video \u2192 every frame), on resize, or once when it turns
   // off (to clear) \u2014 so a cam-less take never uploads the overlay after frame 1.
-  var camV = r.cam, camS = d.cam || {}
+  var camV = amId ? null : r.cam, camS = d.cam || {}
   var camOn = !camS.window || (srcT >= camS.window.in && srcT <= camS.window.out)
   // Readiness is STICKY: readyState drops to HAVE_METADATA while a seek is in
   // flight, so gating each frame on it makes the bubble vanish on every scrub
@@ -5128,7 +5291,8 @@ function lowerToComposition(input) {
     segments: rated.map((seg) => ({
       in: round6(seg.in),
       out: round6(seg.out),
-      ...seg.rate !== void 0 && seg.rate !== 1 ? { rate: round6(seg.rate) } : {}
+      ...seg.rate !== void 0 && seg.rate !== 1 ? { rate: round6(seg.rate) } : {},
+      ...seg.media ? { media: seg.media } : {}
     })),
     frame: doc.frame,
     micGain: doc.micGain ?? 1,
@@ -5139,6 +5303,38 @@ function lowerToComposition(input) {
     })),
     cursorStyle: doc.cursor,
     cursorSpace: { w: doc.source.meta.width, h: doc.source.meta.height },
+    // The other media (concat): each with its element's source, its crop
+    // and its own cursor in its own capture space; absent = one media.
+    ...doc.media && doc.media.length ? {
+      media: doc.media.map((m) => {
+        const sm = smoothCursor(m.cursor, {
+          factor: doc.cursor.smoothing,
+          clickSnap: fx.style !== "none" || fx.press
+        });
+        const fade = doc.cursor.hideWhenIdle !== false && doc.cursor.visible !== false ? cursorIdleFade(m.cursor, {
+          space: { w: m.meta.width, h: m.meta.height },
+          sourceDuration: (m.meta.durationMs || 0) / 1e3
+        }) : [];
+        return {
+          id: m.id,
+          src: m.videoKey,
+          isImage: m.sourceKind === "image",
+          crop: m.crop ?? null,
+          hasAudio: !!m.meta.hasAudio,
+          cursor: sm.map((p) => ({
+            t: round6(p.t),
+            x: round6(p.x),
+            y: round6(p.y)
+          })),
+          cursorSpace: { w: m.meta.width, h: m.meta.height },
+          // The card this media wears (its own placement, bar, corner,
+          // shadow, border, fit and focus over the take's), resolved
+          // here so ON_FRAME swaps one object and reads no document.
+          frame: cardFields(mediaFrame(doc, m.id)),
+          ...fade.length ? { cursorFade: fade } : {}
+        };
+      })
+    } : {},
     ...cursorFade.length ? { cursorFade } : {},
     // Click effects: OUTPUT-anchored click records + resolved styling (named
     // intensities/colors become numbers HERE — ON_FRAME reads no registry).
@@ -5207,10 +5403,24 @@ function clickFxData(doc, rated) {
   const meta = doc.source.meta;
   const level = CLICK_FX_INTENSITY[fx.intensity];
   return {
-    clicks: on ? extractClicks(doc.source.cursor, rated, {
-      rects: fx.style === "highlight",
-      space: { w: meta.width, h: meta.height }
-    }) : [],
+    clicks: on ? [
+      ...extractClicks(doc.source.cursor, rated, {
+        rects: fx.style === "highlight",
+        space: { w: meta.width, h: meta.height }
+      }),
+      // The other media's clicks map through their own pieces and carry
+      // their own capture space, so the ring lands where the press was.
+      ...(doc.media ?? []).flatMap(
+        (m) => extractClicks(m.cursor, rated, {
+          rects: fx.style === "highlight",
+          space: { w: m.meta.width, h: m.meta.height },
+          media: m.id
+        }).map((ck) => ({
+          ...ck,
+          sp: { w: m.meta.width, h: m.meta.height }
+        }))
+      )
+    ].sort((a, b) => a.ot - b.ot) : [],
     clickFx: {
       style: fx.style,
       press: fx.press,
@@ -6835,7 +7045,7 @@ import {
   mapTime as mapTime2,
   removeSegment,
   segmentRate as segmentRate3,
-  sourceToTimeline as sourceToTimeline3,
+  sourceToTimeline as sourceToTimeline2,
   splitBySpeed as splitBySpeed3,
   totalDuration as totalDuration6,
   trimSegment
@@ -6920,7 +7130,7 @@ var videoLane = {
           freezes.filter((f) => f.at < seg.out - 1e-9),
           index === 0 || !contiguous(segments, index)
         );
-        const anchorOut = sourceToTimeline3(fullMap, Math.min(edgeSrc, sourceDuration)) ?? edgeSrc;
+        const anchorOut = sourceToTimeline2(fullMap, Math.min(edgeSrc, sourceDuration)) ?? edgeSrc;
         const sourceT = mapTime2(fullMap, anchorOut + (g.t - edgeOutNow));
         const next = trimSegment(
           segments,
@@ -7050,10 +7260,16 @@ var freezeLane = {
       const srcT = round11(mapTime2(rated, Math.max(0, g.t)));
       if (!kept(srcT) || !clear(srcT)) return null;
       const id = nextFreezeId(doc);
+      const mediaHere = mediaAtOutput(rated, Math.max(0, g.t));
       return (d) => {
         d.freeze = [
           ...d.freeze ?? [],
-          { id, at: srcT, seconds: FREEZE_DEFAULT_SECONDS }
+          {
+            id,
+            at: srcT,
+            seconds: FREEZE_DEFAULT_SECONDS,
+            ...mediaHere ? { media: mediaHere } : {}
+          }
         ].sort((a, b) => a.at - b.at);
       };
     }
@@ -7138,7 +7354,7 @@ var zoomLane = {
   items(doc) {
     const segments = ratedSegments(doc);
     return doc.zoom.flatMap((z) => {
-      const ext = spanOutputExtent(segments, z.in, z.out);
+      const ext = spanOutputExtent(segments, z.in, z.out, z.media);
       return ext === null ? [] : [
         {
           id: z.id,
@@ -7156,10 +7372,13 @@ var zoomLane = {
     const sourceDuration = anchorSourceDuration(doc);
     if (g.type === "create") {
       const srcT = mapTime2(rated, Math.max(0, g.t));
-      if (spans.some((z) => srcT >= z.in && srcT < z.out)) return null;
-      const next = spans.filter((z) => z.in > srcT).sort((a, b) => a.in - b.in).at(0);
-      const limit = Math.min(sourceDuration, next ? next.in : sourceDuration);
-      const len = Math.min(spanDefaultLen(sourceDuration), limit - srcT);
+      const mediaHere = mediaAtOutput(rated, Math.max(0, g.t));
+      const here = spans.filter((z) => (z.media ?? "") === mediaHere);
+      const mediaLen = mediaDuration(mediaSource(doc, mediaHere) ?? doc.source);
+      if (here.some((z) => srcT >= z.in && srcT < z.out)) return null;
+      const next = here.filter((z) => z.in > srcT).sort((a, b) => a.in - b.in).at(0);
+      const limit = Math.min(mediaLen, next ? next.in : mediaLen);
+      const len = Math.min(spanDefaultLen(mediaLen), limit - srcT);
       if (len < ZOOM_SPAN_MIN * rateAt(rated, srcT)) return null;
       const id = nextZoomId(doc);
       const { cx, cy } = cursorFocusAt(doc, srcT);
@@ -7173,7 +7392,8 @@ var zoomLane = {
             level: DEFAULT_ZOOM_LEVEL,
             cx,
             cy,
-            source: "manual"
+            source: "manual",
+            ...mediaHere ? { media: mediaHere } : {}
           }
         ].sort((a, b) => a.in - b.in);
       };
@@ -7263,7 +7483,7 @@ var tiltLane = {
   items(doc) {
     const segments = ratedSegments(doc);
     return (doc.tilt ?? []).flatMap((z) => {
-      const ext = spanOutputExtent(segments, z.in, z.out);
+      const ext = spanOutputExtent(segments, z.in, z.out, z.media);
       return ext === null ? [] : [
         {
           id: z.id,
@@ -7281,10 +7501,13 @@ var tiltLane = {
     const sourceDuration = anchorSourceDuration(doc);
     if (g.type === "create") {
       const srcT = mapTime2(rated, Math.max(0, g.t));
-      if (spans.some((z) => srcT >= z.in && srcT < z.out)) return null;
-      const next = spans.filter((z) => z.in > srcT).sort((a, b) => a.in - b.in).at(0);
-      const limit = Math.min(sourceDuration, next ? next.in : sourceDuration);
-      const len = Math.min(spanDefaultLen(sourceDuration), limit - srcT);
+      const mediaHere = mediaAtOutput(rated, Math.max(0, g.t));
+      const here = spans.filter((z) => (z.media ?? "") === mediaHere);
+      const mediaLen = mediaDuration(mediaSource(doc, mediaHere) ?? doc.source);
+      if (here.some((z) => srcT >= z.in && srcT < z.out)) return null;
+      const next = here.filter((z) => z.in > srcT).sort((a, b) => a.in - b.in).at(0);
+      const limit = Math.min(mediaLen, next ? next.in : mediaLen);
+      const len = Math.min(spanDefaultLen(mediaLen), limit - srcT);
       if (len < TILT_SPAN_MIN * rateAt(rated, srcT)) return null;
       const id = nextTiltId(doc);
       return (d) => {
@@ -7296,7 +7519,8 @@ var tiltLane = {
             out: round11(srcT + len),
             rx: DEFAULT_TILT_POSE.rx,
             ry: DEFAULT_TILT_POSE.ry,
-            source: "manual"
+            source: "manual",
+            ...mediaHere ? { media: mediaHere } : {}
           }
         ].sort((a, b) => a.in - b.in);
       };
@@ -7376,7 +7600,7 @@ var camMoveLane = {
     if (!doc.source.camKey) return [];
     const segments = ratedSegments(doc);
     return (doc.camMotion ?? []).flatMap((z) => {
-      const ext = spanOutputExtent(segments, z.in, z.out);
+      const ext = spanOutputExtent(segments, z.in, z.out, z.media);
       return ext === null ? [] : [
         {
           id: z.id,
@@ -7642,6 +7866,7 @@ var speedLane = {
       const len = Math.min(spanDefaultLen(sourceDuration), limit - srcT);
       if (len < SPEED_SPAN_MIN * DEFAULT_SPEED_RATE) return null;
       const id = nextSpeedId(doc);
+      const mediaHere = mediaAtOutput(rated, Math.max(0, g.t));
       return (d) => {
         d.speed = [
           ...d.speed ?? [],
@@ -7650,7 +7875,8 @@ var speedLane = {
             in: round11(srcT),
             out: round11(srcT + len),
             rate: DEFAULT_SPEED_RATE,
-            source: "manual"
+            source: "manual",
+            ...mediaHere ? { media: mediaHere } : {}
           }
         ].sort((a, b) => a.in - b.in);
       };
@@ -7698,7 +7924,7 @@ var speedLane = {
           out: sp.out
         };
       } else {
-        const startOut = sourceToTimeline3(base, sp.in) ?? sp.in;
+        const startOut = sourceToTimeline2(base, sp.in) ?? sp.in;
         const sourceT = sp.in + sp.rate * Math.max(0, g.t - startOut);
         next = {
           in: sp.in,
@@ -8245,6 +8471,7 @@ export {
   LOOK_KINDS,
   MEDIA_ENTER_KINDS,
   MEDIA_EXIT_KINDS,
+  MEDIA_FRAME_KEYS,
   MINIMAL_BAR_THEMES,
   MOTION_DELTA,
   MOTION_EASE,
@@ -8261,6 +8488,7 @@ export {
   OVERLAY_Z,
   PLATE_GROUND,
   PLAYBACK_ACTIVITY,
+  PRIMARY_MEDIA,
   PROGRAM_RETIME,
   REJECT_OVERLAP,
   REST_TILT_ID,
@@ -8323,6 +8551,7 @@ export {
   camTrackFromDoc,
   cardEnter,
   cardExit,
+  cardFields,
   cardInset,
   cardPointToScreen,
   cardPoseTrack,
@@ -8348,6 +8577,7 @@ export {
   destinationsForChannel,
   docCardLayout,
   docFreezes,
+  docMediaList,
   docOutputDuration,
   docRestTime,
   docToCropSpace,
@@ -8393,12 +8623,18 @@ export {
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
+  mediaAtOutput,
+  mediaDuration,
+  mediaFrame,
+  mediaKey,
+  mediaSource,
   micLane,
   migrateHostedDoc,
   migrateMotion,
   momentsFromDoc,
   motionTrack,
   musicBedClip,
+  nextMediaId,
   normalizeCaptureSpace,
   objectMotionBase,
   objectMotionPoseAt,
@@ -8441,6 +8677,7 @@ export {
   resolveText3dAsset,
   resolveZoomStyle,
   restLeanOf,
+  sameMedia,
   sceneChanges,
   scrollRuns,
   setSpeedInRange,