@vosjs/studio-core 0.33.3 → 0.35.0

package/dist/index.js

@@ -1420,7 +1420,7 @@ function docStillTime(doc) {
     }
   }
   if (!(footage > 0)) return r3(clampOut(STILL_DEFAULT));
-  let hero = entranceSeconds(cardEnter(doc.frame));
+  let hero = entranceEnd(cardEnter(doc.frame));
   for (const clip of doc.overlays ?? []) {
     if (clip.start > OPENING_WINDOW) continue;
     const step = enterOf(clip.anim);
@@ -1488,6 +1488,14 @@ function entranceSeconds(e) {
   if (!e || e.kind === "none") return 0;
   return Math.max(0.2, Math.min(3, e.seconds ?? ENTRANCE_SECONDS));
 }
+function entranceAt(e) {
+  if (!entranceSeconds(e)) return 0;
+  const at = e?.at;
+  return typeof at === "number" && at > 0 ? Math.min(30, at) : 0;
+}
+function entranceEnd(e) {
+  return entranceAt(e) + entranceSeconds(e);
+}
 function exitSeconds(e) {
   if (!e || e.kind === "none") return 0;
   const house = e.kind === "fade" ? CARD_FADE_SECONDS : END_CARD_RECEDE;
@@ -1551,22 +1559,26 @@ function withHolds(docSegments, rated) {
 function entranceTiltKeyframes(e) {
   const s = entranceSeconds(e);
   if (!s || e?.kind !== "tilt-in") return [];
+  const a = entranceAt(e);
   return [
     { t: 0, value: [...TILT_IN_POSE], ease: "none" },
-    { t: s, value: [0, 0], ease: "power3.out" }
+    ...a ? [{ t: a, value: [...TILT_IN_POSE], ease: "none" }] : [],
+    { t: a + s, value: [0, 0], ease: "power3.out" }
   ];
 }
 function entranceZoomKeyframes(e) {
   const s = entranceSeconds(e);
   if (!s) return [];
+  const a = entranceAt(e);
   if (e?.kind === "pull-out")
     return [
       { t: 0, value: [PULL_OUT_LEVEL, 0.5, 0.42], ease: "none" },
-      { t: s, value: [1, 0.5, 0.5], ease: "power3.out" }
+      ...a ? [{ t: a, value: [PULL_OUT_LEVEL, 0.5, 0.42], ease: "none" }] : [],
+      { t: a + s, value: [1, 0.5, 0.5], ease: "power3.out" }
     ];
   return [
     { t: 0, value: [1, 0.5, 0.5], ease: "none" },
-    { t: s, value: [1, 0.5, 0.5], ease: "none" }
+    { t: a + s, value: [1, 0.5, 0.5], ease: "none" }
   ];
 }
 function prependEntrance(track, head) {
@@ -1582,15 +1594,18 @@ var RECEDE_MID = [0.91, -0.018, 0.8];
 function cardPoseTrack(enter, exit, footageEnd, outputEnd2 = footageEnd) {
   const keyframes = [];
   const s = entranceSeconds(enter);
+  const a = entranceAt(enter);
   if (s) {
     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];
+    if (a) from[2] = 0;
     keyframes.push({ t: 0, value: from, ease: "none" });
-    keyframes.push({ t: s, value: [1, 0, 1], ease: "power3.out" });
+    if (a) keyframes.push({ t: a, value: [...from], ease: "none" });
+    keyframes.push({ t: a + s, value: [1, 0, 1], ease: "power3.out" });
   }
   const x = exitSeconds(exit);
   let last = [1, 0, 1];
   if (x > 0 && footageEnd > 0) {
-    const t0 = round3(Math.max(s, footageEnd - x));
+    const t0 = round3(Math.max(a + s, footageEnd - x));
     const t1 = round3(Math.max(t0 + 0.05, footageEnd));
     last = exitPose(exit);
     keyframes.push({ t: t0, value: [1, 0, 1], ease: "none" });
@@ -1812,6 +1827,7 @@ function liveZoomStyleName(name) {
   if (name in ZOOM_STYLES) return name;
   return RETIRED_ZOOM_STYLES[name]?.style ?? null;
 }
+var HOLD_DRIFT_MAX = 0.15;
 var PUMP_REST = 1;
 function pumpFreeChainGap(p) {
   return p.rampOut + (p.rampIn - p.rampInOverlap) + PUMP_REST;
@@ -2685,7 +2701,10 @@ function camBubbleRect(cam, W, H = 1080) {
     radius: cam.shape === "rounded" ? (cam.radius ?? 18) * s : size / 2
   };
 }
-function focusBounds(level, layout, camera = "card") {
+function focusBounds(level, layout, camera = "card", screen) {
+  if (camera === "stage" && screen && level > 1.001) {
+    return { minX: 0, maxX: 1, minY: 0, maxY: 1 };
+  }
   if (level <= 1.001) {
     return { minX: 0.5, maxX: 0.5, minY: 0.5, maxY: 0.5 };
   }
@@ -2748,8 +2767,8 @@ function stageAxisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, l
   }
   return { min: clamp013(lo), max: clamp013(hi) };
 }
-function clampFocus(cx, cy, level, layout, camera = "card") {
-  const b = focusBounds(level, layout, camera);
+function clampFocus(cx, cy, level, layout, camera = "card", screen) {
+  const b = focusBounds(level, layout, camera, screen);
   return {
     cx: Math.min(b.maxX, Math.max(b.minX, cx)),
     cy: Math.min(b.maxY, Math.max(b.minY, cy))
@@ -2758,6 +2777,9 @@ function clampFocus(cx, cy, level, layout, camera = "card") {
 function clamp013(v) {
   return Math.max(0, Math.min(1, v));
 }
+function screenPoint(layout, camera, screen) {
+  return camera === "stage" && screen ? { ox: screen.x * layout.W, oy: screen.y * layout.H } : { ox: layout.W / 2, oy: layout.H / 2 };
+}
 function cameraModel(frame) {
   return frame?.camera === "stage" ? "stage" : "card";
 }
@@ -2767,34 +2789,36 @@ function cameraCentring(level) {
   const u = clamp013((level - 1) / CAMERA_CENTRE_RAMP);
   return u * u * (3 - 2 * u);
 }
-function zoomView(level, cx, cy, layout, camera = "card", centring) {
+function zoomView(level, cx, cy, layout, camera = "card", centring, screen) {
   const L = Math.max(1, level);
   const fx = layout.dx + cx * layout.dw;
   const fy = layout.dy + cy * layout.dh;
-  const ox = layout.W / 2;
-  const oy = layout.H / 2;
+  const { ox, oy } = screenPoint(layout, camera, screen);
   const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
   const wcx = fx + (ox - fx) / L * (1 - t);
   const wcy = fy + (oy - fy) / L * (1 - t);
   return { level: L, fx, fy, wcx, wcy, ox, oy };
 }
-function zoomViewport(level, cx, cy, layout, camera = "card", centring) {
-  const v = zoomView(level, cx, cy, layout, camera, centring);
+function zoomViewport(level, cx, cy, layout, camera = "card", centring, screen) {
+  const v = zoomView(level, cx, cy, layout, camera, centring, screen);
   const size = 1 / v.level;
+  const mx = v.wcx + (layout.W / 2 - v.ox) / v.level;
+  const my = v.wcy + (layout.H / 2 - v.oy) / v.level;
   return {
-    x: (v.wcx - layout.W / (2 * v.level)) / layout.W,
-    y: (v.wcy - layout.H / (2 * v.level)) / layout.H,
+    x: (mx - layout.W / (2 * v.level)) / layout.W,
+    y: (my - layout.H / (2 * v.level)) / layout.H,
     w: size,
     h: size
   };
 }
-function focusForViewportCentre(cX, cY, level, layout, camera = "card", centring) {
+function focusForViewportCentre(cX, cY, level, layout, camera = "card", centring, screen) {
   const L = Math.max(1, level);
   const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
   const a = 1 - (1 - t) / L;
   if (a <= 1e-6) return { cx: 0.5, cy: 0.5 };
-  const fx = (cX * layout.W - layout.W / 2 * (1 - t) / L) / a;
-  const fy = (cY * layout.H - layout.H / 2 * (1 - t) / L) / a;
+  const { ox, oy } = screenPoint(layout, camera, screen);
+  const fx = (cX * layout.W - ox * (1 - t) / L - (layout.W / 2 - ox) / L) / a;
+  const fy = (cY * layout.H - oy * (1 - t) / L - (layout.H / 2 - oy) / L) / a;
   return { cx: (fx - layout.dx) / layout.dw, cy: (fy - layout.dy) / layout.dh };
 }
 function levelForFocusFraction(frac) {
@@ -3321,14 +3345,17 @@ function overlayFaceFor(clip) {
 function overlayFontFaces(doc) {
   const faces = [...OVERLAY_FONT_FACES];
   const seen = new Set(faces.map((f) => `${f.family}|${f.weight}`));
-  for (const o of doc.overlays ?? []) {
-    if (o.kind !== "text") continue;
-    const face = overlayFaceFor(o);
-    if (!face) continue;
+  const add = (face) => {
+    if (!face) return;
     const key = `${face.family}|${face.weight}`;
-    if (seen.has(key)) continue;
+    if (seen.has(key)) return;
     seen.add(key);
     faces.push(face);
+  };
+  for (const o of doc.overlays ?? []) {
+    if (o.kind !== "text") continue;
+    add(overlayFaceFor(o));
+    add(resolveEmphasis(o)?.face);
   }
   return faces;
 }
@@ -3336,6 +3363,102 @@ function overlayLines(text) {
   const lines = text.split("\n");
   return lines.length ? lines : [""];
 }
+var EM_OPEN = "
";
+var EM_CLOSE = "";
+function parseEmphasis(text) {
+  let any = false;
+  const lines = text.split("\n").map((line) => {
+    const chars = [];
+    const bold = [];
+    const marker = [];
+    for (let i = 0; i < line.length; i++) {
+      if (line[i] === "\\" && line[i + 1] === "*") {
+        chars.push("*");
+        marker.push(false);
+        i++;
+      } else {
+        chars.push(line[i]);
+        marker.push(line[i] === "*");
+      }
+    }
+    const keep = chars.map(() => true);
+    for (let i = 0; i < chars.length; i++) {
+      if (!marker[i]) continue;
+      let j = i + 1;
+      while (j < chars.length && !marker[j]) j++;
+      if (j >= chars.length) break;
+      const inner = chars.slice(i + 1, j).join("");
+      if (!inner.trim()) {
+        i = j - 1;
+        continue;
+      }
+      keep[i] = false;
+      keep[j] = false;
+      for (let k = i + 1; k < j; k++) bold[k] = true;
+      any = true;
+      i = j;
+    }
+    const kept = [];
+    for (let i = 0; i < chars.length; i++) {
+      if (keep[i])
+        kept.push({ c: chars[i], b: !!bold[i] && !/\s/.test(chars[i]) });
+    }
+    let out = "";
+    for (let i = 0; i < kept.length; i++) {
+      const { c, b } = kept[i];
+      if (b && !(i > 0 && kept[i - 1].b)) out += EM_OPEN;
+      out += c;
+      if (b && !(i + 1 < kept.length && kept[i + 1].b)) out += EM_CLOSE;
+    }
+    return out;
+  });
+  return any ? lines.join("\n") : null;
+}
+function overlayDisplayText(clip) {
+  if (!clip.emphasis) return clip.text;
+  return parseEmphasis(clip.text) ?? clip.text;
+}
+function stripEmphasis(text) {
+  return text.split(EM_OPEN).join("").split(EM_CLOSE).join("");
+}
+var EMPHASIS_WEIGHT = 700;
+function resolveEmphasis(clip) {
+  if (!clip.emphasis || parseEmphasis(clip.text) === null) return null;
+  const style = resolveOverlayStyle(clip);
+  const entry = findFontFamily2(
+    clip.family ?? PRESET_FAMILY[clip.preset in TEXT_PRESETS ? clip.preset : "title"]
+  );
+  const wanted = clip.emphasis?.weight ?? Math.max(EMPHASIS_WEIGHT, style.weight);
+  const weight = entry ? nearestFontWeight2(entry, wanted) : wanted;
+  const inBase = OVERLAY_FONT_FACES.some(
+    (f) => entry && f.family === entry.family && f.weight === weight
+  );
+  return {
+    weight,
+    ...clip.emphasis?.color ? { color: clip.emphasis.color } : {},
+    ...entry && !inBase ? {
+      face: {
+        family: entry.family,
+        weight,
+        url: fontFaceUrl2(entry.slug, weight)
+      }
+    } : {}
+  };
+}
+function measureEmphasized(text, measure, font, emFont, bold = false) {
+  let w = 0;
+  let run = "";
+  let b = bold;
+  for (const c of text) {
+    if (c === EM_OPEN || c === EM_CLOSE) {
+      if (run) w += measure(run, b ? emFont : font);
+      run = "";
+      b = c === EM_OPEN;
+    } else run += c;
+  }
+  if (run) w += measure(run, b ? emFont : font);
+  return w;
+}
 function overlayTokens(line) {
   return line.match(/\S+\s*/g) ?? [line];
 }
@@ -3386,9 +3509,10 @@ function resolveOverlayFx(clip, clipDuration) {
   const spec = overlayFxSpec(clip) ?? clip.fx ?? null;
   if (!spec) return null;
   const unit = spec.unit ?? "block";
-  const units = overlaySegments(clip.text, unit);
+  const text = overlayDisplayText(clip);
+  const units = overlaySegments(text, unit);
   const n = unit === "block" ? 1 : units.reduce((sum, line) => sum + line.length, 0);
-  const upperN = unit === "line" && clip.maxWidth ? overlayLines(clip.text).reduce(
+  const upperN = unit === "line" && clip.maxWidth ? overlayLines(text).reduce(
     (sum, line) => sum + overlayTokens(line).length,
     0
   ) : n;
@@ -3435,13 +3559,13 @@ function overlayRect(clip, measure, frameW, frameH = 1080, mediaAspect) {
   const style = resolveOverlayStyle(clip);
   const font = overlayFontString(style, scale, 1);
   const ls = style.letterSpacing * scale;
-  const lines = clip.maxWidth ? wrapOverlayLines(
-    overlayLines(clip.text),
-    (t) => measure(t, font, ls),
-    clip.maxWidth * frameW
-  ) : overlayLines(clip.text);
+  const em = resolveEmphasis(clip);
+  const emFont = em ? overlayFontString({ ...style, weight: em.weight }, scale, 1) : "";
+  const width = (t) => em ? measureEmphasized(t, (run, f) => measure(run, f, ls), font, emFont) : measure(t, font, ls);
+  const text = overlayDisplayText(clip);
+  const lines = clip.maxWidth ? wrapOverlayLines(overlayLines(text), width, clip.maxWidth * frameW) : overlayLines(text);
   let w = 0;
-  for (const line of lines) w = Math.max(w, measure(line, font, ls));
+  for (const line of lines) w = Math.max(w, width(line));
   const lineH = style.size * scale * style.lineHeight;
   const box = resolveOverlayBox(clip);
   const padX = box ? box.padX * scale : 0;
@@ -3590,7 +3714,7 @@ function docTransitions(doc) {
   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 });
+    if (m) out.push({ t: round32(entranceAt(open)), d: m.d, in: m });
   }
   for (let i = 0; i + 1 < segments.length; i++) {
     const a = segments[i];
@@ -3947,14 +4071,16 @@ function pinRectOnScreen(rect, t, layout, camera, zoomTrack) {
   let cx = 0.5;
   let cy = 0.5;
   let centring;
+  let screen;
   if (zoomTrack && zoomTrack.keyframes.length) {
     const z = sample(zoomTrack, t, lerpArray);
     level = z[0];
     cx = z[1];
     cy = z[2];
     if (z.length > 3) centring = z[3];
+    if (z.length > 5) screen = { x: z[4], y: z[5] };
   }
-  const v = zoomView(level, cx, cy, layout, camera, centring);
+  const v = zoomView(level, cx, cy, layout, camera, centring, screen);
   const map = (nx, ny) => {
     const px = layout.dx + nx * layout.dw;
     const py = layout.dy + ny * layout.dh;
@@ -4996,6 +5122,19 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
           } catch (e) {}
         }
       }
+      // The emphasis weight's face, the same way (a live edit that adds the
+      // first *marked* word paints without a LOAD).
+      if (ol.em && ol.em.face) {
+        var oeKey = ol.em.face.f + '|' + ol.em.face.w
+        if (!ofSet[oeKey]) {
+          ofSet[oeKey] = 1
+          try {
+            var oeFace = new FontFace(ol.em.face.f, 'url(' + ol.em.face.u + ')', { weight: String(ol.em.face.w) })
+            document.fonts.add(oeFace)
+            oeFace.load().catch(function () {})
+          } catch (e) {}
+        }
+      }
     }
     ovC.save()
     ovC.globalAlpha = olA
@@ -5011,6 +5150,69 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     ovC.textAlign = 'center'
     ovC.textBaseline = 'middle'
     ovC.letterSpacing = ((ol.ls || 0) * olMS * s) + 'px'
+    // Emphasis (ol.em, baked only when the text marks a word): the lines
+    // carry \\u0001/\\u0002 around every emphasized word, and the normal and
+    // emphasis fonts alternate at them, run by run. MIRRORS measureEmphasized
+    // in overlayText.ts \u2014 change together. A clip without ol.em never reaches
+    // these helpers: it keeps its plain measureText/fillText calls.
+    var olEm = ol.em || null
+    var olFN = ovC.font
+    var olFB = olEm ? (ol.sty ? ol.sty + ' ' : '') + olEm.w + ' ' + olPx + 'px ' + ol.stack : ''
+    var olMeasure = function (t, b0) {
+      if (!olEm) return ovC.measureText(t).width
+      var mw = 0, mrun = '', mb = !!b0
+      for (var mi = 0; mi < t.length; mi++) {
+        var mc = t.charAt(mi)
+        if (mc === '\\u0001' || mc === '\\u0002') {
+          if (mrun) { ovC.font = mb ? olFB : olFN; mw += ovC.measureText(mrun).width }
+          mrun = ''
+          mb = mc === '\\u0001'
+        } else mrun += mc
+      }
+      if (mrun) { ovC.font = mb ? olFB : olFN; mw += ovC.measureText(mrun).width }
+      ovC.font = olFN
+      return mw
+    }
+    // The emphasis state after a run of text (a char unit starts in it).
+    var olStateAfter = function (t, b0) {
+      var sb = !!b0
+      for (var si = 0; si < t.length; si++) {
+        var sc = t.charAt(si)
+        if (sc === '\\u0001') sb = true
+        else if (sc === '\\u0002') sb = false
+      }
+      return sb
+    }
+    // Draw t LEFT-aligned from x, run by run: the font switches at the
+    // marks, an emphasized run takes ol.em.c when set, stroke under fill.
+    var olDraw = function (t, x, y, b0) {
+      var drun = '', db = !!b0, dx = x
+      var dflush = function () {
+        if (!drun) return
+        ovC.font = db ? olFB : olFN
+        var dfs = ovC.fillStyle
+        if (db && olEm.c) ovC.fillStyle = olEm.c
+        if (ol.stroke) {
+          ovC.strokeStyle = ol.stroke.c
+          ovC.lineWidth = ol.stroke.w * olMS * s
+          ovC.lineJoin = 'round'
+          ovC.strokeText(drun, dx, y)
+        }
+        ovC.fillText(drun, dx, y)
+        dx += ovC.measureText(drun).width
+        ovC.fillStyle = dfs
+        drun = ''
+      }
+      for (var di = 0; di < t.length; di++) {
+        var dc = t.charAt(di)
+        if (dc === '\\u0001' || dc === '\\u0002') {
+          dflush()
+          db = dc === '\\u0001'
+        } else drun += dc
+      }
+      dflush()
+      ovC.font = olFN
+    }
     var olLines = ol.lines || ['']
     // maxWidth wrap (ol.mw = frame-width fraction): greedy over word tokens
     // (/\\S+\\s*/ \u2014 the SAME tokenization fx uses, trailing spaces kept, so
@@ -5022,7 +5224,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       var olWrapped = []
       for (var olwl = 0; olwl < olLines.length; olwl++) {
         var olWLine = olLines[olwl]
-        if (!olWLine || ovC.measureText(olWLine).width <= olWMax) {
+        if (!olWLine || olMeasure(olWLine) <= olWMax) {
           olWrapped.push(olWLine)
           continue
         }
@@ -5030,7 +5232,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
         var olCur = ''
         for (var olti = 0; olti < olToks.length; olti++) {
           if (!olCur) { olCur = olToks[olti]; continue }
-          if (ovC.measureText(olCur + olToks[olti]).width <= olWMax) {
+          if (olMeasure(olCur + olToks[olti]) <= olWMax) {
             olCur += olToks[olti]
           } else {
             olWrapped.push(olCur)
@@ -5080,10 +5282,10 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       olFx = { k: olFx.k, u: olFx.u, d: olFx.d, st: olFx.st, dur: olFx.dur, tt: olFx.tt, units: olRe, n: olReN }
     }
     var olLWs = null, olMaxW = 0
-    if (ol.box || ol.align || olFx) {
+    if (ol.box || ol.align || olFx || olEm) {
       olLWs = []
       for (var olwi = 0; olwi < olLines.length; olwi++) {
-        var olw = ovC.measureText(olLines[olwi]).width
+        var olw = olMeasure(olLines[olwi])
         olLWs.push(olw)
         if (olw > olMaxW) olMaxW = olw
       }
@@ -5119,6 +5321,12 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
             : (olMaxW - olLWs[ok]) / 2
         }
         var olLY = olY0 + ok * olLH
+        if (olEm) {
+          // Runs draw LEFT-aligned from the centred line's left edge.
+          ovC.textAlign = 'left'
+          olDraw(olLines[ok], olXof - olLWs[ok] / 2, olLY, false)
+          continue
+        }
         if (ol.stroke) {
           ovC.strokeStyle = ol.stroke.c
           ovC.lineWidth = ol.stroke.w * olMS * s
@@ -5155,7 +5363,10 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
               : olIdx
           var olT2 = olT - olOrd * olFx.st
           var olNext = olPref + olUs[ou]
-          var olNW = ovC.measureText(olNext).width
+          var olNW = olMeasure(olNext)
+          // The emphasis state this unit starts in (a char unit inside a
+          // marked word carries no mark of its own).
+          var olUB = olEm ? olStateAfter(olPref) : false
           var olUW = olNW - olPW
           var olUX = olXb + olPW
           var olUA = 1, olUu = 1
@@ -5184,6 +5395,11 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
               ovC.filter = 'blur(' + ((1 - olUu) * olPx * 0.12).toFixed(2) + 'px)'
             }
           }
+          if (olEm) {
+            olDraw(olUnit, olUX, olLY2, olUB)
+            ovC.restore()
+            continue
+          }
           if (ol.stroke) {
             ovC.strokeStyle = ol.stroke.c
             ovC.lineWidth = ol.stroke.w * olMS * s
@@ -5832,15 +6048,22 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     return ext ? [{ z, tIn: ext.start, tOut: ext.end }] : [];
   });
   const { keyframes, push: push2 } = trackEmitter();
+  const placedAt = (z) => z.screen && z.focusMode !== "auto" ? z.screen : null;
+  const placed = mapped.some(({ z }) => placedAt(z) !== null);
+  const sc = (z) => {
+    if (!placed) return [];
+    const s = placedAt(z);
+    return s ? [s.x, s.y] : [0.5, 0.5];
+  };
   let chained = false;
   for (let i = 0; i < mapped.length; i++) {
     const { z, tIn, tOut } = mapped[i];
-    const entry = [clampZoomLevel(z.level), z.cx, z.cy, 1];
+    const entry = [clampZoomLevel(z.level), z.cx, z.cy, 1, ...sc(z)];
     let cur = entry;
     const m = transitionMult(z.transition);
     if (!chained) {
       const startWanted = tIn - (style.rampIn - style.rampInOverlap) * m;
-      const start = push2(startWanted, [1, z.cx, z.cy, 0], "none");
+      const start = push2(startWanted, [1, z.cx, z.cy, 0, ...sc(z)], "none");
       push2(
         rampLanding(start, startWanted, style.rampIn * m, tOut),
         entry,
@@ -5852,7 +6075,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
       const eOut = sourceToTimeline(segments, e.t);
       if (eOut === null || eOut <= tIn || eOut >= tOut) continue;
       if (eOut - tIn < RAMP_FLOOR || tOut - eOut < RAMP_FLOOR) continue;
-      const next2 = [cur[0], e.cx, e.cy, 1];
+      const next2 = [cur[0], e.cx, e.cy, 1, ...cur.slice(4)];
       if (e.path) {
         if (!inPath) {
           push2(Math.max(tIn, eOut - style.followRecenter), cur, "none");
@@ -5868,11 +6091,31 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
       }
       cur = next2;
     }
-    push2(tOut, cur, "none");
+    const drift = Math.max(0, style.holdDrift ?? 0);
+    const landed = keyframes.at(-1)?.t;
+    if (drift > 0 && z.focusMode !== "auto" && !(z.followEvents ?? []).length && landed !== void 0 && tOut > landed) {
+      const grow = Math.min(HOLD_DRIFT_MAX, drift * (tOut - landed));
+      cur = [
+        clampZoomLevel(cur[0] * (1 + grow)),
+        cur[1],
+        cur[2],
+        cur[3],
+        ...cur.slice(4)
+      ];
+      push2(tOut, cur, "linear");
+    } else {
+      push2(tOut, cur, "none");
+    }
     const next = mapped.at(i + 1);
     if (next && next.tIn - tOut <= style.chainGap) {
       const mNext = transitionMult(next.z.transition);
-      const nextValue = [clampZoomLevel(next.z.level), next.z.cx, next.z.cy, 1];
+      const nextValue = [
+        clampZoomLevel(next.z.level),
+        next.z.cx,
+        next.z.cy,
+        1,
+        ...sc(next.z)
+      ];
       push2(
         Math.max(
           tOut + RAMP_FLOOR,
@@ -5888,7 +6131,7 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     } else {
       push2(
         tOut + style.rampOut * m,
-        [1, cur[1], cur[2], 0],
+        [1, cur[1], cur[2], 0, ...cur.slice(4)],
         spanEase(z.ease, style.ease)
       );
       chained = false;
@@ -6930,37 +7173,71 @@ var ON_FRAME = `(ctx, content, dt) => {
   bgC.fillStyle = '#0b0b0c'
   bgC.fillStyle = (function () {
     var bgcss = frame.background || '#0b0b0c'
-    if (typeof bgcss === 'string' && bgcss.indexOf('linear-gradient') === 0) {
-      var inner = bgcss.substring(bgcss.indexOf('(') + 1, bgcss.lastIndexOf(')'))
-      var parts = inner.split(',').map(function (x) { return x.trim() })
-      var ang = 135, cols = []
-      for (var i = 0; i < parts.length; i++) {
-        if (parts[i].indexOf('deg') >= 0) ang = parseFloat(parts[i])
-        else cols.push(parts[i])
+    if (typeof bgcss !== 'string') return '#0b0b0c'
+    var gKind = bgcss.indexOf('linear-gradient') === 0 ? 'linear' : bgcss.indexOf('radial-gradient') === 0 ? 'radial' : ''
+    if (!gKind) return bgcss
+    // Split on TOP-LEVEL commas only: an rgba() or hsl() stop has commas of
+    // its own, and splitting inside one hands canvas half a colour.
+    var gin = bgcss.substring(bgcss.indexOf('(') + 1, bgcss.lastIndexOf(')'))
+    var gps = [], gDepth = 0, gCur = ''
+    for (var gi = 0; gi < gin.length; gi++) {
+      var gch = gin.charAt(gi)
+      if (gch === '(') gDepth++
+      else if (gch === ')') gDepth--
+      if (gch === ',' && gDepth === 0) { gps.push(gCur.trim()); gCur = '' } else gCur += gch
+    }
+    gps.push(gCur.trim())
+    // The geometry (an angle, a side, a shape and centre) leads; every other
+    // part is a STOP, a colour with an optional position ('#2b6f64 40%').
+    var ang = 135, rcx = 0.5, rcy = 0.5, gStops = []
+    for (var gj = 0; gj < gps.length; gj++) {
+      var gp = gps[gj]
+      if (!gp) continue
+      if (gKind === 'linear' && gj === 0 && gp.indexOf('deg') >= 0) { ang = parseFloat(gp); continue }
+      if (gKind === 'linear' && gj === 0 && gp.indexOf('to ') === 0) {
+        var tdx = gp.indexOf('right') >= 0 ? 1 : gp.indexOf('left') >= 0 ? -1 : 0
+        var tdy = gp.indexOf('bottom') >= 0 ? 1 : gp.indexOf('top') >= 0 ? -1 : 0
+        ang = Math.atan2(tdx, -tdy) * 180 / Math.PI
+        continue
+      }
+      if (gKind === 'radial' && gj === 0 && (gp.indexOf('circle') === 0 || gp.indexOf('ellipse') === 0 || gp.indexOf('at ') === 0 || gp.indexOf('closest') === 0 || gp.indexOf('farthest') === 0)) {
+        var rat = /at\\s+([\\d.]+)%\\s+([\\d.]+)%/.exec(gp)
+        if (rat) { rcx = parseFloat(rat[1]) / 100; rcy = parseFloat(rat[2]) / 100 }
+        continue
       }
-      if (cols.length < 2) cols = [cols[0] || '#000', cols[0] || '#000']
+      var gSp = gp.lastIndexOf(' ')
+      var gTail = gSp > 0 ? gp.substring(gSp + 1) : ''
+      if (gTail.charAt(gTail.length - 1) === '%' && !isNaN(parseFloat(gTail))) {
+        gStops.push({ c: gp.substring(0, gSp).trim(), p: parseFloat(gTail) / 100 })
+      } else gStops.push({ c: gp, p: null })
+    }
+    if (!gStops.length) return '#0b0b0c'
+    if (gStops.length === 1) gStops.push({ c: gStops[0].c, p: null })
+    // CSS's own fix-up: an unplaced first stop sits at 0 and last at 1, a
+    // position never runs backwards, and the unplaced stops between two
+    // placed ones spread evenly. Canvas throws outside 0..1, so clamp.
+    var gN = gStops.length
+    if (gStops[0].p === null) gStops[0].p = 0
+    if (gStops[gN - 1].p === null) gStops[gN - 1].p = 1
+    var gMax = 0
+    for (var gk = 0; gk < gN; gk++) {
+      if (gStops[gk].p !== null) { gStops[gk].p = Math.min(1, Math.max(gMax, gStops[gk].p)); gMax = gStops[gk].p }
+    }
+    for (var gm = 1; gm < gN; gm++) {
+      if (gStops[gm].p !== null) continue
+      var gEnd = gm
+      while (gStops[gEnd].p === null) gEnd++
+      var gFrom = gStops[gm - 1].p, gTo = gStops[gEnd].p, gRun = gEnd - gm + 1
+      for (var gq = gm; gq < gEnd; gq++) gStops[gq].p = gFrom + (gTo - gFrom) * (gq - gm + 1) / gRun
+    }
+    var g
+    if (gKind === 'linear') {
       var rad = (ang - 90) * Math.PI / 180
       var ux = Math.cos(rad), uy = Math.sin(rad)
-      var g = bgC.createLinearGradient(W / 2 - ux * W / 2, H / 2 - uy * H / 2, W / 2 + ux * W / 2, H / 2 + uy * H / 2)
-      g.addColorStop(0, cols[0]); g.addColorStop(1, cols[cols.length - 1])
-      return g
-    }
-    // Radial: 'radial-gradient([circle|ellipse] [at X% Y%,] A, B)'. Canvas
-    // cannot take the string, so it is built here like the linear one, with
-    // CSS's own default extent (farthest corner) so the second colour lands
-    // exactly where a browser would put it.
-    if (typeof bgcss === 'string' && bgcss.indexOf('radial-gradient') === 0) {
-      var rin = bgcss.substring(bgcss.indexOf('(') + 1, bgcss.lastIndexOf(')'))
-      var rps = rin.split(',').map(function (x) { return x.trim() })
-      var rcx = 0.5, rcy = 0.5, rcols = []
-      for (var ri = 0; ri < rps.length; ri++) {
-        var rp = rps[ri]
-        if (rp.indexOf('circle') === 0 || rp.indexOf('ellipse') === 0 || rp.indexOf('at ') === 0) {
-          var rat = /at\\s+([\\d.]+)%\\s+([\\d.]+)%/.exec(rp)
-          if (rat) { rcx = parseFloat(rat[1]) / 100; rcy = parseFloat(rat[2]) / 100 }
-        } else rcols.push(rp)
-      }
-      if (rcols.length < 2) rcols = [rcols[0] || '#000', rcols[0] || '#000']
+      g = bgC.createLinearGradient(W / 2 - ux * W / 2, H / 2 - uy * H / 2, W / 2 + ux * W / 2, H / 2 + uy * H / 2)
+    } else {
+      // CSS's default extent (farthest corner), so the last stop lands
+      // exactly where a browser would put it.
       var rpx = rcx * W, rpy = rcy * H
       var rr = Math.max(
         Math.sqrt(rpx * rpx + rpy * rpy),
@@ -6968,11 +7245,15 @@ var ON_FRAME = `(ctx, content, dt) => {
         Math.sqrt(rpx * rpx + (H - rpy) * (H - rpy)),
         Math.sqrt((W - rpx) * (W - rpx) + (H - rpy) * (H - rpy))
       )
-      var rg = bgC.createRadialGradient(rpx, rpy, 0, rpx, rpy, rr)
-      rg.addColorStop(0, rcols[0]); rg.addColorStop(1, rcols[rcols.length - 1])
-      return rg
+      g = bgC.createRadialGradient(rpx, rpy, 0, rpx, rpy, rr)
     }
-    return bgcss
+    // A stop canvas still cannot parse (a colour keyword it lacks, a second
+    // position) lands on the known ground: a background must never take the
+    // frame down with it.
+    try {
+      for (var gs = 0; gs < gN; gs++) g.addColorStop(gStops[gs].p, gStops[gs].c)
+    } catch (e) { return '#0b0b0c' }
+    return g
   })()
   bgC.fillRect(0, 0, W, H)
 
@@ -7078,7 +7359,7 @@ var ON_FRAME = `(ctx, content, dt) => {
   // current zoom \u2014 a standard keyframe track in OUTPUT time (hold + arrival pairs
   // expanded by the lowering), sampled with the shared deterministic interpolator.
   // Sampled here, before the rect math, so a cover crop can follow it.
-  var lvl = 1, zx = 0.5, zy = 0.5, zc = -1
+  var lvl = 1, zx = 0.5, zy = 0.5, zc = -1, zsx = 0.5, zsy = 0.5
   var zt = d.zoomTrack
   if (zt && zt.keyframes && zt.keyframes.length) {
     var z = TL.sample(zt, tpT, TL.lerpArray)
@@ -7087,6 +7368,9 @@ var ON_FRAME = `(ctx, content, dt) => {
     // with the level); a three-component track (a document lowered before
     // the component existed) falls back to the level band below.
     if (z.length > 3) zc = z[3]
+    // A span placed on screen carries where its target lands (frame
+    // fractions); a track without them lands it at the centre.
+    if (z.length > 5) { zsx = z[4]; zsy = z[5] }
   }
   var barH = bar.kind && bar.kind !== 'none' ? (bar.height || 44) * s2 : 0
   var availW = Math.max(1, W - ipL - ipR), availH = Math.max(1, H - ipT - ipB - barH)
@@ -7147,6 +7431,10 @@ var ON_FRAME = `(ctx, content, dt) => {
   var camStage = cfr.camera === 'stage'
   var fx = dx + zx * dw, fy = dy + zy * dh
   var wcx = fx, wcy = fy
+  // The point the stage camera lands its focus on: the span's place on
+  // screen, else the centre (0.5\xB7W is W / 2 exactly). MIRRORS zoomView's
+  // screenPoint \u2014 change together.
+  var cox = camStage ? zsx * W : W / 2, coy = camStage ? zsy * H : H / 2
   if (lvl > 1.001 && !d.zoomSuppressed) {
     if (camStage) {
       var ctt = zc
@@ -7154,9 +7442,9 @@ var ON_FRAME = `(ctx, content, dt) => {
         var ctu = Math.max(0, Math.min(1, (lvl - 1) / ${CAMERA_CENTRE_RAMP}))
         ctt = ctu * ctu * (3 - 2 * ctu)
       }
-      wcx = fx + ((W / 2 - fx) / lvl) * (1 - ctt)
-      wcy = fy + ((H / 2 - fy) / lvl) * (1 - ctt)
-      c.translate(W / 2, H / 2); c.scale(lvl, lvl); c.translate(-wcx, -wcy)
+      wcx = fx + ((cox - fx) / lvl) * (1 - ctt)
+      wcy = fy + ((coy - fy) / lvl) * (1 - ctt)
+      c.translate(cox, coy); c.scale(lvl, lvl); c.translate(-wcx, -wcy)
     } else {
       c.translate(fx, fy); c.scale(lvl, lvl); c.translate(-fx, -fy)
     }
@@ -7556,7 +7844,7 @@ var ON_FRAME = `(ctx, content, dt) => {
     if (trOut) {
       var tqX = ax, tqY = ay
       if (lvl > 1.001 && !d.zoomSuppressed) {
-        if (camStage) { tqX = W / 2 + (ax - wcx) * lvl; tqY = H / 2 + (ay - wcy) * lvl }
+        if (camStage) { tqX = cox + (ax - wcx) * lvl; tqY = coy + (ay - wcy) * lvl }
         else { tqX = fx + (ax - fx) * lvl; tqY = fy + (ay - fy) * lvl }
       }
       if (tpG) trQa = [tqX, tqY]
@@ -7678,8 +7966,8 @@ var ON_FRAME = `(ctx, content, dt) => {
       }
       if (lvl > 1.001 && !d.zoomSuppressed) {
         if (camStage) {
-          pqAx = W / 2 + (pqAx - wcx) * lvl; pqAy = H / 2 + (pqAy - wcy) * lvl
-          pqBx = W / 2 + (pqBx - wcx) * lvl; pqBy = H / 2 + (pqBy - wcy) * lvl
+          pqAx = cox + (pqAx - wcx) * lvl; pqAy = coy + (pqAy - wcy) * lvl
+          pqBx = cox + (pqBx - wcx) * lvl; pqBy = coy + (pqBy - wcy) * lvl
         } else {
           pqAx = fx + (pqAx - fx) * lvl; pqAy = fy + (pqAy - fy) * lvl
           pqBx = fx + (pqBx - fx) * lvl; pqBy = fy + (pqBy - fy) * lvl
@@ -7988,10 +8276,27 @@ function studioLayerData(layers, duration, pins) {
         }
         const st = resolveOverlayStyle(o);
         const bx = resolveOverlayBox(o);
+        const em = resolveEmphasis(o);
         return {
           ...base,
           text: o.text,
-          lines: overlayLines(o.text),
+          // The DISPLAYED lines: emphasis marks inline, else the source.
+          lines: overlayLines(overlayDisplayText(o)),
+          // Emphasis set (weight, colour, face to lazy-load), only when
+          // the text marks a word: an unmarked clip's data is unchanged.
+          ...em ? {
+            em: {
+              w: em.weight,
+              ...em.color ? { c: em.color } : {},
+              ...em.face ? {
+                face: {
+                  f: em.face.family,
+                  w: em.face.weight,
+                  u: em.face.url
+                }
+              } : {}
+            }
+          } : {},
           fs: st.size,
           weight: st.weight,
           stack: st.stack,
@@ -8235,7 +8540,15 @@ function loweredZoomSpans(doc, rated, transitions, layout, camera, zoomStyle) {
     }
     return {
       ...z,
-      ...clampFocus(z.cx, z.cy, clampZoomLevel(z.level), layout, camera)
+      // A span placed on screen is the author's composition: no cover band.
+      ...clampFocus(
+        z.cx,
+        z.cy,
+        clampZoomLevel(z.level),
+        layout,
+        camera,
+        z.focusMode !== "auto" ? z.screen : void 0
+      )
     };
   });
 }
@@ -8788,8 +9101,9 @@ function sceneChanges(bins, opts = {}) {
 // src/digest/framing.ts
 function zoomWindow(span, layout, camera = "card") {
   const L = Math.max(1, span.level);
-  const { cx, cy } = clampFocus(span.cx, span.cy, L, layout, camera);
-  const v = zoomViewport(L, cx, cy, layout, camera);
+  const screen = span.focusMode !== "auto" ? span.screen : void 0;
+  const { cx, cy } = clampFocus(span.cx, span.cy, L, layout, camera, screen);
+  const v = zoomViewport(L, cx, cy, layout, camera, void 0, screen);
   const px0 = v.x * layout.W;
   const px1 = (v.x + v.w) * layout.W;
   const py0 = v.y * layout.H;
@@ -11515,6 +11829,8 @@ export {
   DRAG_FIT_LEVEL,
   DRAG_MIN_S,
   DRAG_MIN_TRAVEL_FRAC,
+  EM_CLOSE,
+  EM_OPEN,
   END_CARD_FROM,
   END_CARD_RECEDE,
   END_CARD_SECONDS,
@@ -11530,6 +11846,7 @@ export {
   FREEZE_DEFAULT_SECONDS,
   FREEZE_SECONDS_MAX,
   FREEZE_SECONDS_MIN,
+  HOLD_DRIFT_MAX,
   HOUSE_GRADIENT,
   HOUSE_REGISTER,
   HTML_LAYER_FOREIGN_FIELDS,
@@ -11689,6 +12006,8 @@ export {
   endCardClips,
   enterKey,
   enterOf,
+  entranceAt,
+  entranceEnd,
   entranceSeconds,
   envelopeAt,
   envelopeValueAt,
@@ -11743,6 +12062,7 @@ export {
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
+  measureEmphasized,
   mediaAtOutput,
   mediaDuration,
   mediaFrame,
@@ -11766,6 +12086,7 @@ export {
   outputEnd,
   outputRangeToSource,
   overlapFraction,
+  overlayDisplayText,
   overlayFaceFor,
   overlayFontFaces,
   overlayFontString,
@@ -11780,6 +12101,7 @@ export {
   ownFreezes,
   pageDisplayUrl,
   parseCssColour,
+  parseEmphasis,
   parsePoseId,
   pickStyle,
   pinBox,
@@ -11807,6 +12129,7 @@ export {
   relativeLuminance,
   removeSourceRange,
   removeSpeedInRange,
+  resolveEmphasis,
   resolveExportSize,
   resolveOverlayBox,
   resolveOverlayStyle,
@@ -11827,6 +12150,7 @@ export {
   smoothCursor,
   spanOutputExtent,
   speedLane,
+  stripEmphasis,
   studioAudioPlan,
   studioEntry,
   studioLayerData,