@vosjs/studio-core 0.34.0 → 0.35.1

package/dist/index.js

@@ -2701,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 };
   }
@@ -2764,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))
@@ -2774,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";
 }
@@ -2783,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) {
@@ -3337,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;
 }
@@ -3352,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];
 }
@@ -3402,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;
@@ -3451,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;
@@ -3963,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;
@@ -5012,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
@@ -5027,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
@@ -5038,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
         }
@@ -5046,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)
@@ -5096,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
       }
@@ -5135,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
@@ -5171,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
@@ -5200,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
@@ -5848,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,
@@ -5868,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");
@@ -5888,7 +6095,13 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     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 = [
+        clampZoomLevel(cur[0] * (1 + grow)),
+        cur[1],
+        cur[2],
+        cur[3],
+        ...cur.slice(4)
+      ];
       push2(tOut, cur, "linear");
     } else {
       push2(tOut, cur, "none");
@@ -5896,7 +6109,13 @@ function zoomTrackFromDoc(zoom, segments, style = ZOOM_STYLES[DEFAULT_ZOOM_STYLE
     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,
@@ -5912,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;
@@ -7140,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)
@@ -7149,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)
@@ -7209,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
@@ -7216,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)
     }
@@ -7618,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]
@@ -7740,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
@@ -8050,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,
@@ -8297,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
+      )
     };
   });
 }
@@ -8850,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;
@@ -11577,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,
@@ -11808,6 +12062,7 @@ export {
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
+  measureEmphasized,
   mediaAtOutput,
   mediaDuration,
   mediaFrame,
@@ -11831,6 +12086,7 @@ export {
   outputEnd,
   outputRangeToSource,
   overlapFraction,
+  overlayDisplayText,
   overlayFaceFor,
   overlayFontFaces,
   overlayFontString,
@@ -11845,6 +12101,7 @@ export {
   ownFreezes,
   pageDisplayUrl,
   parseCssColour,
+  parseEmphasis,
   parsePoseId,
   pickStyle,
   pinBox,
@@ -11872,6 +12129,7 @@ export {
   relativeLuminance,
   removeSourceRange,
   removeSpeedInRange,
+  resolveEmphasis,
   resolveExportSize,
   resolveOverlayBox,
   resolveOverlayStyle,
@@ -11892,6 +12150,7 @@ export {
   smoothCursor,
   spanOutputExtent,
   speedLane,
+  stripEmphasis,
   studioAudioPlan,
   studioEntry,
   studioLayerData,