@vosjs/studio-core 0.13.0 → 0.14.0

package/dist/index.js

@@ -511,6 +511,44 @@ 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 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 +613,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 +635,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 +1601,7 @@ import {
   sample,
   segmentRate as segmentRate2,
   sortKeyframes as sortKeyframes2,
-  sourceToTimeline as sourceToTimeline2,
+  sourceToTimeline,
   splitBySpeed as splitBySpeed2,
   totalDuration as totalDuration2
 } from "@vosjs/timeline";
@@ -3242,7 +3273,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 +3282,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 +3334,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 +3390,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 +3446,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 +3465,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 +3508,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 +3551,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 +3927,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 +3975,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 +4005,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 +4056,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 +4167,26 @@ 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 = ''
+  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 +4268,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
@@ -4379,7 +4495,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   // 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 +
@@ -4472,13 +4588,16 @@ var ON_FRAME = `(ctx, content, dt) => {
   // corners, drawn by the clip alone, hid theirs inside the arc.
   var shD = ceZs * (cardW + cardH) + 2 * (W + H)
   var shX = cardX - shD / ceZs
-  // The card shadow is LAYERED: three shadows whose blur and offset grow
-  // while each stays at a low alpha (shadow is the strength they share),
-  // so the card reads as lifted a little off the ground. One wide layer at
-  // the full strength was the old paint, and at the default 0.4 it read as
-  // a dark pool under the card.
+  // The card shadow is LAYERED: four shadows whose blur and offset grow
+  // while each stays at a low alpha (shadow is the strength they share):
+  // a hairline that defines the edge, two that ground it, and a WIDE,
+  // faint ambient bloom (120 design px of blur, dropped well below the
+  // card) that is what lets a large card read as lifted off a light
+  // ground instead of outlined on it. One wide layer at the full strength
+  // was the old paint, and at the default 0.4 it read as a dark pool
+  // under the card; three tight layers read as a rim.
   if (shadow > 0) {
-    var shL = [[3, 1, 0.2], [14, 6, 0.22], [48, 22, 0.3]]
+    var shL = [[2, 1, 0.1], [12, 4, 0.1], [40, 16, 0.14], [120, 44, 0.3]]
     for (var shI = 0; shI < shL.length; shI++) {
       c.save()
       c.shadowColor = 'rgba(' + shRgb + ',' + +(shadow * shL[shI][2]).toFixed(3) + ')'
@@ -4595,7 +4714,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
@@ -4627,8 +4746,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
@@ -4741,7 +4861,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 } }
@@ -4750,7 +4870,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
@@ -4783,7 +4903,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
@@ -5125,7 +5245,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,
@@ -5136,6 +5257,34 @@ 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 },
+          ...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).
@@ -5204,10 +5353,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,
@@ -6832,7 +6995,7 @@ import {
   mapTime as mapTime2,
   removeSegment,
   segmentRate as segmentRate3,
-  sourceToTimeline as sourceToTimeline3,
+  sourceToTimeline as sourceToTimeline2,
   splitBySpeed as splitBySpeed3,
   totalDuration as totalDuration6,
   trimSegment
@@ -6917,7 +7080,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,
@@ -7047,10 +7210,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);
       };
     }
@@ -7135,7 +7304,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,
@@ -7153,10 +7322,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);
@@ -7170,7 +7342,8 @@ var zoomLane = {
             level: DEFAULT_ZOOM_LEVEL,
             cx,
             cy,
-            source: "manual"
+            source: "manual",
+            ...mediaHere ? { media: mediaHere } : {}
           }
         ].sort((a, b) => a.in - b.in);
       };
@@ -7260,7 +7433,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,
@@ -7278,10 +7451,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) => {
@@ -7293,7 +7469,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);
       };
@@ -7373,7 +7550,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,
@@ -7639,6 +7816,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 ?? [],
@@ -7647,7 +7825,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);
       };
@@ -7695,7 +7874,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,
@@ -8258,6 +8437,7 @@ export {
   OVERLAY_Z,
   PLATE_GROUND,
   PLAYBACK_ACTIVITY,
+  PRIMARY_MEDIA,
   PROGRAM_RETIME,
   REJECT_OVERLAP,
   REST_TILT_ID,
@@ -8345,6 +8525,7 @@ export {
   destinationsForChannel,
   docCardLayout,
   docFreezes,
+  docMediaList,
   docOutputDuration,
   docRestTime,
   docToCropSpace,
@@ -8390,12 +8571,17 @@ export {
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
+  mediaAtOutput,
+  mediaDuration,
+  mediaKey,
+  mediaSource,
   micLane,
   migrateHostedDoc,
   migrateMotion,
   momentsFromDoc,
   motionTrack,
   musicBedClip,
+  nextMediaId,
   normalizeCaptureSpace,
   objectMotionBase,
   objectMotionPoseAt,
@@ -8438,6 +8624,7 @@ export {
   resolveText3dAsset,
   resolveZoomStyle,
   restLeanOf,
+  sameMedia,
   sceneChanges,
   scrollRuns,
   setSpeedInRange,