@vosjs/studio-core 0.36.0 → 0.37.0

package/dist/index.js

@@ -3239,6 +3239,169 @@ function htmlLayerPayload(clip) {
   };
 }
 
+// src/richText/layout.ts
+var sameStyle = (a, b) => (a.f || 0) === (b.f || 0) && a.c === b.c && a.u === b.u && a.s === b.s && a.h === b.h;
+function graphemesOf(text) {
+  if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
+    const seg = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+    const out = [];
+    for (const s of seg.segment(text)) out.push(s.segment);
+    return out;
+  }
+  return Array.from(text);
+}
+function tokenRanges(line) {
+  const out = [];
+  const re = /\S+\s*/g;
+  let m;
+  while ((m = re.exec(line)) !== null) {
+    out.push([m.index, m.index + m[0].length]);
+  }
+  return out.length ? out : [[0, line.length]];
+}
+function layoutText(input, measure) {
+  const memo = {};
+  const adv = (t, f) => {
+    if (!t) return 0;
+    const key = f + "\0" + t;
+    let w = memo[key];
+    if (w === void 0) {
+      w = measure(t, f);
+      memo[key] = w;
+    }
+    return w;
+  };
+  const slice = (runs, a, b) => {
+    const out = [];
+    let at = 0;
+    for (let i = 0; i < runs.length; i++) {
+      const r = runs[i];
+      const from = Math.max(a, at);
+      const to = Math.min(b, at + r.t.length);
+      if (to > from) {
+        const t = r.t.slice(from - at, to - at);
+        const last = out[out.length - 1];
+        if (last && sameStyle(last, r)) last.t += t;
+        else out.push({ ...r, t });
+      }
+      at += r.t.length;
+      if (at >= b) break;
+    }
+    return out;
+  };
+  const widthOf = (runs) => {
+    let w = 0;
+    for (let i = 0; i < runs.length; i++) w += adv(runs[i].t, runs[i].f || 0);
+    return w;
+  };
+  const partsIn = (frags, a, b) => {
+    const out = [];
+    for (let i = 0; i < frags.length; i++) {
+      const fr = frags[i];
+      const from = Math.max(a, fr.o);
+      const to = Math.min(b, fr.o + fr.t.length);
+      if (to <= from) continue;
+      const f = fr.f || 0;
+      const before = adv(fr.t.slice(0, from - fr.o), f);
+      out.push({
+        ...fr,
+        t: fr.t.slice(from - fr.o, to - fr.o),
+        x: fr.x + before,
+        w: adv(fr.t.slice(0, to - fr.o), f) - before,
+        o: from
+      });
+    }
+    return out;
+  };
+  const unitOf = (frags, a, b) => {
+    const parts = partsIn(frags, a, b);
+    if (!parts.length) return { x: 0, w: 0, parts };
+    const last = parts[parts.length - 1];
+    return { x: parts[0].x, w: last.x + last.w - parts[0].x, parts };
+  };
+  const lines = [];
+  const max = input.maxWidth && input.maxWidth > 0 ? input.maxWidth : 0;
+  let width = 0;
+  let base = 0;
+  const push2 = (runs, a, b) => {
+    const cut = slice(runs, a, b);
+    const frags = [];
+    let x = 0;
+    let o = 0;
+    for (let i = 0; i < cut.length; i++) {
+      const w = adv(cut[i].t, cut[i].f || 0);
+      frags.push({ ...cut[i], x, w, o });
+      x += w;
+      o += cut[i].t.length;
+    }
+    const line = { w: x, frags, a: base + a, n: b - a };
+    if (input.unit) {
+      const text = cut.map((r) => r.t).join("");
+      const units = [];
+      if (input.unit === "line") units.push(unitOf(frags, 0, text.length));
+      else if (input.unit === "word") {
+        const toks = tokenRanges(text);
+        for (let i = 0; i < toks.length; i++) {
+          units.push(unitOf(frags, toks[i][0], toks[i][1]));
+        }
+      } else {
+        let at = 0;
+        const gs = graphemesOf(text);
+        for (let i = 0; i < gs.length; i++) {
+          units.push(unitOf(frags, at, at + gs[i].length));
+          at += gs[i].length;
+        }
+      }
+      line.units = units;
+    }
+    if (x > width) width = x;
+    lines.push(line);
+  };
+  for (let li = 0; li < input.lines.length; li++) {
+    const runs = input.lines[li];
+    let len = 0;
+    for (let i = 0; i < runs.length; i++) len += runs[i].t.length;
+    if (!max || !len || widthOf(slice(runs, 0, len)) <= max) {
+      push2(runs, 0, len);
+    } else {
+      const text = runs.map((r) => r.t).join("");
+      const toks = tokenRanges(text);
+      let a = 0;
+      let b = toks[0][1];
+      for (let i = 1; i < toks.length; i++) {
+        if (widthOf(slice(runs, a, toks[i][1])) <= max) b = toks[i][1];
+        else {
+          push2(runs, a, b);
+          a = toks[i][0];
+          b = toks[i][1];
+        }
+      }
+      push2(runs, a, b);
+    }
+    base += len + 1;
+  }
+  if (!lines.length) lines.push({ w: 0, frags: [], a: 0, n: 0 });
+  return { lines, width };
+}
+var UNDERLINE_OFFSET_EM = 0.42;
+var DECORATION_THICKNESS_EM = 0.065;
+var STRIKE_OFFSET_EM = 0.02;
+var HIGHLIGHT_HALF_EM = 0.58;
+function decorationRect(kind, x, w, y, px) {
+  const x0 = Math.round(x);
+  const x1 = Math.round(x + w);
+  if (kind === "h") {
+    const top2 = Math.round(y - HIGHLIGHT_HALF_EM * px);
+    const bottom = Math.round(y + HIGHLIGHT_HALF_EM * px);
+    return { x: x0, y: top2, w: x1 - x0, h: bottom - top2 };
+  }
+  const t = Math.max(1, Math.round(DECORATION_THICKNESS_EM * px));
+  const top = Math.round(
+    y + (kind === "u" ? UNDERLINE_OFFSET_EM : STRIKE_OFFSET_EM) * px
+  );
+  return { x: x0, y: top, w: x1 - x0, h: t };
+}
+
 // src/overlayText.ts
 var OVERLAY_BOX_PAD_X = 0.6;
 var OVERLAY_BOX_PAD_Y = 0.35;
@@ -3445,19 +3608,44 @@ function resolveEmphasis(clip) {
     } : {}
   };
 }
-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;
+function hashOf(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
   }
-  if (run) w += measure(run, b ? emFont : font);
-  return w;
+  return (h >>> 0).toString(36);
+}
+function styledTextOf(clip) {
+  const em = resolveEmphasis(clip);
+  if (!em) return null;
+  const l = overlayLines(overlayDisplayText(clip)).map((line) => {
+    const runs = [];
+    let run = "";
+    let bold = false;
+    const flush = () => {
+      if (!run) return;
+      runs.push(
+        bold ? { t: run, f: 1, ...em.color ? { c: em.color } : {} } : { t: run }
+      );
+      run = "";
+    };
+    for (const c of line) {
+      if (c === EM_OPEN || c === EM_CLOSE) {
+        flush();
+        bold = c === EM_OPEN;
+      } else run += c;
+    }
+    flush();
+    return runs;
+  });
+  const fs = [{ w: resolveOverlayStyle(clip).weight }, { w: em.weight }];
+  return {
+    l,
+    fs,
+    ...em.face ? { faces: [{ f: em.face.family, w: em.face.weight, u: em.face.url }] } : {},
+    h: hashOf(JSON.stringify([l, fs]))
+  };
 }
 function overlayTokens(line) {
   return line.match(/\S+\s*/g) ?? [line];
@@ -3487,7 +3675,7 @@ function wrapOverlayLines(lines, measure, maxPx) {
   }
   return out.length ? out : [""];
 }
-function graphemesOf(line) {
+function graphemesOf2(line) {
   if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
     return [
       ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
@@ -3502,14 +3690,14 @@ function overlaySegments(text, unit) {
   if (unit === "block") return [];
   if (unit === "line") return lines.map((l) => [l]);
   if (unit === "word") return lines.map(overlayTokens);
-  return lines.map(graphemesOf);
+  return lines.map(graphemesOf2);
 }
 var FX_DIR = { forward: 0, reverse: 1, center: 2 };
 function resolveOverlayFx(clip, clipDuration) {
   const spec = overlayFxSpec(clip) ?? clip.fx ?? null;
   if (!spec) return null;
   const unit = spec.unit ?? "block";
-  const text = overlayDisplayText(clip);
+  const text = stripEmphasis(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(text).reduce(
@@ -3559,13 +3747,25 @@ function overlayRect(clip, measure, frameW, frameH = 1080, mediaAspect) {
   const style = resolveOverlayStyle(clip);
   const font = overlayFontString(style, scale, 1);
   const ls = style.letterSpacing * scale;
-  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);
+  const styled = styledTextOf(clip);
   let w = 0;
-  for (const line of lines) w = Math.max(w, width(line));
+  let lineCount = 0;
+  if (styled) {
+    const fonts = styled.fs.map(
+      (f) => overlayFontString({ ...style, weight: f.w }, scale, 1)
+    );
+    const laid = layoutText(
+      { lines: styled.l, maxWidth: clip.maxWidth ? clip.maxWidth * frameW : 0 },
+      (t, f) => measure(t, fonts[f], ls)
+    );
+    w = laid.width;
+    lineCount = laid.lines.length;
+  } else {
+    const width = (t) => measure(t, font, ls);
+    const lines = clip.maxWidth ? wrapOverlayLines(overlayLines(clip.text), width, clip.maxWidth * frameW) : overlayLines(clip.text);
+    for (const line of lines) w = Math.max(w, width(line));
+    lineCount = lines.length;
+  }
   const lineH = style.size * scale * style.lineHeight;
   const box = resolveOverlayBox(clip);
   const padX = box ? box.padX * scale : 0;
@@ -3574,7 +3774,7 @@ function overlayRect(clip, measure, frameW, frameH = 1080, mediaAspect) {
     ...base,
     w: Math.max(w, style.size * scale * 0.6) + padX * 2,
     // empty text still selectable
-    h: lines.length * lineH + padY * 2
+    h: lineCount * lineH + padY * 2
   };
 }
 function overlayHit(rect, px, py, padPx = 8) {
@@ -4317,6 +4517,11 @@ function push(keys, t, a) {
 
 // src/lower/studioEntry.ts
 import { timelineRuntimeCode } from "@vosjs/timeline/bundle";
+
+// src/richText/layoutCode.ts
+var textLayoutCode = '"use strict";var __vosTextLayout=(()=>{var E=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var W=(n,r)=>{for(var h in r)E(n,h,{get:r[h],enumerable:!0})},j=(n,r,h,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of A(r))!N.call(n,f)&&f!==h&&E(n,f,{get:()=>r[f],enumerable:!(l=k(r,f))||l.enumerable});return n};var C=n=>j(E({},"__esModule",{value:!0}),n);var v={};W(v,{DECORATION_THICKNESS_EM:()=>U,HIGHLIGHT_HALF_EM:()=>I,STRIKE_OFFSET_EM:()=>H,UNDERLINE_OFFSET_EM:()=>O,decorationRect:()=>K,graphemesOf:()=>_,layoutText:()=>G,tokenRanges:()=>F});var D=(n,r)=>(n.f||0)===(r.f||0)&&n.c===r.c&&n.u===r.u&&n.s===r.s&&n.h===r.h;function _(n){if(typeof Intl<"u"&&typeof Intl.Segmenter=="function"){let r=new Intl.Segmenter(void 0,{granularity:"grapheme"}),h=[];for(let l of r.segment(n))h.push(l.segment);return h}return Array.from(n)}function F(n){let r=[],h=/\\S+\\s*/g,l;for(;(l=h.exec(n))!==null;)r.push([l.index,l.index+l[0].length]);return r.length?r:[[0,n.length]]}function G(n,r){let h={},l=(i,u)=>{if(!i)return 0;let s=u+"\\0"+i,t=h[s];return t===void 0&&(t=r(i,u),h[s]=t),t},f=(i,u,s)=>{let t=[],o=0;for(let e=0;e<i.length;e++){let c=i[e],a=Math.max(u,o),m=Math.min(s,o+c.t.length);if(m>a){let g=c.t.slice(a-o,m-o),x=t[t.length-1];x&&D(x,c)?x.t+=g:t.push({...c,t:g})}if(o+=c.t.length,o>=s)break}return t},p=i=>{let u=0;for(let s=0;s<i.length;s++)u+=l(i[s].t,i[s].f||0);return u},R=(i,u,s)=>{let t=[];for(let o=0;o<i.length;o++){let e=i[o],c=Math.max(u,e.o),a=Math.min(s,e.o+e.t.length);if(a<=c)continue;let m=e.f||0,g=l(e.t.slice(0,c-e.o),m);t.push({...e,t:e.t.slice(c-e.o,a-e.o),x:e.x+g,w:l(e.t.slice(0,a-e.o),m)-g,o:c})}return t},L=(i,u,s)=>{let t=R(i,u,s);if(!t.length)return{x:0,w:0,parts:t};let o=t[t.length-1];return{x:t[0].x,w:o.x+o.w-t[0].x,parts:t}},y=[],d=n.maxWidth&&n.maxWidth>0?n.maxWidth:0,w=0,T=0,S=(i,u,s)=>{let t=f(i,u,s),o=[],e=0,c=0;for(let m=0;m<t.length;m++){let g=l(t[m].t,t[m].f||0);o.push({...t[m],x:e,w:g,o:c}),e+=g,c+=t[m].t.length}let a={w:e,frags:o,a:T+u,n:s-u};if(n.unit){let m=t.map(x=>x.t).join(""),g=[];if(n.unit==="line")g.push(L(o,0,m.length));else if(n.unit==="word"){let x=F(m);for(let b=0;b<x.length;b++)g.push(L(o,x[b][0],x[b][1]))}else{let x=0,b=_(m);for(let M=0;M<b.length;M++)g.push(L(o,x,x+b[M].length)),x+=b[M].length}a.units=g}e>w&&(w=e),y.push(a)};for(let i=0;i<n.lines.length;i++){let u=n.lines[i],s=0;for(let t=0;t<u.length;t++)s+=u[t].t.length;if(!d||!s||p(f(u,0,s))<=d)S(u,0,s);else{let t=u.map(a=>a.t).join(""),o=F(t),e=0,c=o[0][1];for(let a=1;a<o.length;a++)p(f(u,e,o[a][1]))<=d||(S(u,e,c),e=o[a][0]),c=o[a][1];S(u,e,c)}T+=s+1}return y.length||y.push({w:0,frags:[],a:0,n:0}),{lines:y,width:w}}var O=.42,U=.065,H=.02,I=.58;function K(n,r,h,l,f){let p=Math.round(r),R=Math.round(r+h);if(n==="h"){let d=Math.round(l-I*f),w=Math.round(l+I*f);return{x:p,y:d,w:R-p,h:w-d}}let L=Math.max(1,Math.round(U*f)),y=Math.round(l+(n==="u"?O:H)*f);return{x:p,y,w:R-p,h:L}}return C(v);})();';
+
+// src/lower/studioEntry.ts
 var STUDIO_ENTRY_ID = "vosso.studio";
 function studioEntry(data) {
   return {
@@ -4713,6 +4918,18 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
   var s = H / 1080 // scale design-px controls to comp px
   var ns = window.__vos__ || {}
   var playing = ns.isPaused === false
+  // The styled-text layout (richText/layout.ts, generated), installed once:
+  // the page lays a text layer out with the code the host picks with.
+  if (!ns.textLayout) { ${textLayoutCode}; ns.textLayout = __vosTextLayout }
+  var TXL = ns.textLayout
+  // The font epoch counts faces landing. A face changes what text measures
+  // and what it paints, so the epoch is part of every layout's key and of
+  // the layer's signature: a late face repaints a held layer once.
+  var ofBump = function () { ns.fontEpoch = (ns.fontEpoch || 0) + 1 }
+  if (!ns.fontWatch && typeof document !== 'undefined' && document.fonts && document.fonts.addEventListener) {
+    ns.fontWatch = 1
+    document.fonts.addEventListener('loadingdone', ofBump)
+  }
 
   // --- audio clips (music/SFX): Web Audio scheduler against the transport ---
   // Buffer sources are one-shot: (re)schedule everything on play / clip-data change
@@ -4840,7 +5057,19 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     if (t < ol0.start || t > ol0.start + ol0.dur) continue
     // A page that taints on foreignObject draws no HTML layer (setup's probe).
     if (ol0.html && ns.htmlSafe === false) continue
-    olVisSig += ol0.id + ':' + (ol0.text || ol0.key) + ':' + ol0.x + ',' + ol0.y + ',' + ol0.scale + ',' + ol0.rot + ',' + (ol0.fs || ol0.w) + ',' + (ol0.color || ol0.radius) + ',' + (ol0.opacity == null ? 1 : ol0.opacity) + (ol0.fx ? ',' + ol0.fx.k + ol0.fx.u + ol0.fx.d + ol0.fx.st : '') + (ol0.mw ? ',w' + ol0.mw : '') + ';'
+    olVisSig += ol0.id + ':' + (ol0.text || ol0.key) + ':' + ol0.x + ',' + ol0.y + ',' + ol0.scale + ',' + ol0.rot + ',' + (ol0.fs || ol0.w) + ',' + (ol0.color || ol0.radius) + ',' + (ol0.opacity == null ? 1 : ol0.opacity) + (ol0.fx ? ',' + ol0.fx.k + ol0.fx.u + ol0.fx.d + ol0.fx.st : '') + (ol0.mw ? ',w' + ol0.mw : '')
+    // Everything else a held layer's pixels depend on. The signature is the
+    // ONLY thing that repaints a hold, so a field missing here is an edit
+    // that does not show until something else moves.
+    if (ol0.lines) {
+      olVisSig += '|' + ol0.lines.join('\\n') + '|' + ol0.weight + '|' + ol0.stack + '|' + (ol0.sty || '') + '|' + (ol0.ls || 0) + '|' + (ol0.lh || 0) + '|' + (ol0.align || '') + '|' + ol0.shadow
+        + (ol0.stroke ? '|s' + ol0.stroke.c + ol0.stroke.w : '')
+        + (ol0.box ? '|b' + ol0.box.c + ol0.box.o + ',' + ol0.box.px + ',' + ol0.box.py + ',' + ol0.box.r : '')
+        + (ol0.rt ? '|r' + ol0.rt.h : '')
+    } else {
+      olVisSig += '|' + (ol0.shadow || '') + (ol0.border ? '|' + ol0.border.width + ol0.border.color : '') + (ol0.crop ? '|c' + ol0.crop.x + ',' + ol0.crop.y + ',' + ol0.crop.w + ',' + ol0.crop.h : '')
+    }
+    olVisSig += ';'
     // fx widens the entrance window to the whole staggered span (tt);
     // without fx it is the legacy enter transition window.
     var olEW = ol0.fx ? ol0.fx.tt : olTD
@@ -4878,8 +5107,20 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       if (ns.htmlErrors) delete ns.htmlErrors[hlK]
     }
   }
-  var ovSig = W + 'x' + H + '|' + olVisSig
-  var ovDirty = ov.sig !== ovSig || ov.active || olAnim
+  // A styled layer's cached layout leaves with its clip.
+  if (ns.textLayouts) {
+    for (var tlK in ns.textLayouts) {
+      var tlSeen = false
+      for (var tlI = 0; tlI < ols.length; tlI++) if (ols[tlI].id === tlK) { tlSeen = true; break }
+      if (!tlSeen) delete ns.textLayouts[tlK]
+    }
+  }
+  var ovSig = W + 'x' + H + '|' + (ns.fontEpoch || 0) + '|' + (ns.htmlSafe === false ? 0 : 1) + '|' + olVisSig
+  // The layer repaints when what it shows changed (the signature), while
+  // something on it animates, and ONCE more after an animation's last frame:
+  // that frame was drawn a moment short of settled, and a picture that
+  // landed between two frames is drawn by it too. A hold costs nothing.
+  var ovDirty = ov.sig !== ovSig || olAnim || ov.wasAnim
   // The layer cards visible this frame, with their pose, for the card
   // planes below (the overlay loop collects them instead of painting).
   var lcList = []
@@ -5108,7 +5349,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
         try {
           var ofBF = new FontFace(ofB.family, 'url(' + ofB.url + ')', { weight: String(ofB.weight) })
           document.fonts.add(ofBF)
-          ofBF.load().catch(function () {})
+          ofBF.load().then(ofBump, function () {})
         } catch (e) {}
       }
       if (ol.face) {
@@ -5118,20 +5359,22 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
           try {
             var ofFace = new FontFace(ol.face.f, 'url(' + ol.face.u + ')', { weight: String(ol.face.w) })
             document.fonts.add(ofFace)
-            ofFace.load().catch(function () {})
+            ofFace.load().then(ofBump, function () {})
           } 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
+      // A styled layer's other faces, the same way (a live edit that styles
+      // its first run paints without a LOAD).
+      if (ol.rt && ol.rt.faces) {
+        for (var rfj = 0; rfj < ol.rt.faces.length; rfj++) {
+          var rtF = ol.rt.faces[rfj]
+          var rtFK = rtF.f + '|' + rtF.w
+          if (ofSet[rtFK]) continue
+          ofSet[rtFK] = 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 () {})
+            var rtFace = new FontFace(rtF.f, 'url(' + rtF.u + ')', { weight: String(rtF.w) })
+            document.fonts.add(rtFace)
+            rtFace.load().then(ofBump, function () {})
           } catch (e) {}
         }
       }
@@ -5150,68 +5393,143 @@ 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
+    // A STYLED layer (ol.rt: lines of runs, each set its own way) is laid
+    // out by the layout module, ONCE: the layout is kept per clip under a
+    // key of everything it was measured with, so a frame that only moves,
+    // fades or reveals the layer measures nothing. Fragments draw left to
+    // right from each line's left edge; a per-unit entrance animates the
+    // layout's units, each a few parts of fragments.
+    if (ol.rt) {
+      var rtFonts = [ovC.font]
+      for (var rfi = 1; rfi < ol.rt.fs.length; rfi++) {
+        rtFonts.push((ol.sty ? ol.sty + ' ' : '') + ol.rt.fs[rfi].w + ' ' + olPx + 'px ' + ol.stack)
+      }
+      var rtFx = ol.fx && ol.fx.units.length ? ol.fx : null
+      var rtMax = ol.mw ? ol.mw * W : 0
+      var rtKey = ol.rt.h + '|' + rtFonts[0] + '|' + ((ol.ls || 0) * olMS * s) + '|' + rtMax + '|' + (rtFx ? rtFx.u : '') + '|' + (ns.fontEpoch || 0)
+      var rtAll = ns.textLayouts || (ns.textLayouts = {})
+      var rtHit = rtAll[ol.id]
+      if (!rtHit || rtHit.k !== rtKey) {
+        rtHit = rtAll[ol.id] = {
+          k: rtKey,
+          L: TXL.layoutText(
+            { lines: ol.rt.l, maxWidth: rtMax, unit: rtFx ? rtFx.u : undefined },
+            function (mt, mf) { ovC.font = rtFonts[mf]; return ovC.measureText(mt).width }
+          )
+        }
+        ovC.font = rtFonts[0]
+      }
+      var rtL = rtHit.L
+      var rtN = rtL.lines.length
+      var rtLH = olPx * (ol.lh || ${OVERLAY_LINE_HEIGHT})
+      var rtY0 = -((rtN - 1) * rtLH) / 2
+      // A line's left edge: lines sit centred on the anchor and align
+      // against the widest, as the plain layer's do.
+      var rtLeft = function (lw) {
+        var xo = ol.align === 'left' ? (lw - rtL.width) / 2 : ol.align === 'right' ? (rtL.width - lw) / 2 : 0
+        return xo - lw / 2
+      }
+      if (ol.box) {
+        var rbPX = ol.box.px * olMS * s
+        var rbPY = ol.box.py * olMS * s
+        var rbW = rtL.width + rbPX * 2
+        var rbH = rtN * rtLH + rbPY * 2
+        ovC.save()
+        ovC.globalAlpha = olA * ol.box.o
+        ovC.fillStyle = ol.box.c
+        rr(-rbW / 2, -rbH / 2, rbW, rbH, Math.min(ol.box.r * olMS * s, rbH / 2), ovC)
+        ovC.fill()
+        ovC.restore()
+      }
+      // Highlights sit behind the words and take no legibility shadow.
+      for (var rhi = 0; rhi < rtN; rhi++) {
+        var rhLine = rtL.lines[rhi]
+        for (var rhj = 0; rhj < rhLine.frags.length; rhj++) {
+          var rhF = rhLine.frags[rhj]
+          if (!rhF.h) continue
+          var rhR = TXL.decorationRect('h', rtLeft(rhLine.w) + rhF.x, rhF.w, rtY0 + rhi * rtLH, olPx)
+          ovC.fillStyle = rhF.h
+          ovC.fillRect(rhR.x, rhR.y, rhR.w, rhR.h)
+        }
+      }
+      if (ol.shadow > 0) {
+        ovC.shadowColor = 'rgba(0,0,0,' + ol.shadow + ')'
+        ovC.shadowBlur = olPx * 0.25
+        ovC.shadowOffsetY = olPx * 0.04
+      }
+      ovC.textAlign = 'left'
+      // One fragment (or the part of one a unit holds): the underline under
+      // the glyphs, stroke under fill, the strikethrough over them.
+      var rtPart = function (p, bx, y) {
+        ovC.font = rtFonts[p.f || 0]
+        ovC.fillStyle = p.c || ol.color
+        if (p.u) {
+          var ru = TXL.decorationRect('u', bx + p.x, p.w, y, olPx)
+          ovC.fillRect(ru.x, ru.y, ru.w, ru.h)
+        }
         if (ol.stroke) {
           ovC.strokeStyle = ol.stroke.c
           ovC.lineWidth = ol.stroke.w * olMS * s
           ovC.lineJoin = 'round'
-          ovC.strokeText(drun, dx, y)
+          ovC.strokeText(p.t, bx + p.x, y)
+        }
+        ovC.fillText(p.t, bx + p.x, y)
+        if (p.s) {
+          var rs = TXL.decorationRect('s', bx + p.x, p.w, y, olPx)
+          ovC.fillRect(rs.x, rs.y, rs.w, rs.h)
         }
-        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
+      if (!rtFx) {
+        for (var rli = 0; rli < rtN; rli++) {
+          var rLine = rtL.lines[rli]
+          var rBX = rtLeft(rLine.w)
+          for (var rfk = 0; rfk < rLine.frags.length; rfk++) rtPart(rLine.frags[rfk], rBX, rtY0 + rli * rtLH)
+        }
+      } else {
+        // Per-unit entrance, the plain layer's own arithmetic over the
+        // layout's units: delay = order(index) x st, eased over dur.
+        var rtCount = 0
+        for (var rci = 0; rci < rtN; rci++) rtCount += rtL.lines[rci].units.length
+        var rtIdx = 0
+        for (var rui = 0; rui < rtN; rui++) {
+          var rULine = rtL.lines[rui]
+          var rUBX = rtLeft(rULine.w)
+          var rUY = rtY0 + rui * rtLH
+          for (var ruj = 0; ruj < rULine.units.length; ruj++, rtIdx++) {
+            var rU = rULine.units[ruj]
+            var rOrd = rtFx.d === 1 ? (rtCount - 1 - rtIdx) : rtFx.d === 2 ? Math.abs(rtIdx - (rtCount - 1) / 2) : rtIdx
+            var rT2 = olT - rOrd * rtFx.st
+            var rUA = 1, rUu = 1
+            if (rtFx.k === 'typewriter') {
+              rUA = rT2 >= 0 ? 1 : 0
+            } else {
+              rUu = Math.max(0, Math.min(1, rT2 / rtFx.dur))
+              var rUE = 1 - Math.pow(1 - rUu, 3)
+              rUA = rtFx.k === 'pop' ? Math.min(1, rUu * 2) : rUE
+            }
+            if (rUA <= 0.004) continue
+            ovC.save()
+            ovC.globalAlpha = olA * rUA
+            if (rUu < 1) {
+              if (rtFx.k === 'rise') {
+                ovC.translate(0, (1 - (1 - Math.pow(1 - rUu, 3))) * 24 * s)
+              } else if (rtFx.k === 'pop') {
+                var rPS = 1 + 2.70158 * Math.pow(rUu - 1, 3) + 1.70158 * Math.pow(rUu - 1, 2)
+                var rCX = rUBX + rU.x + rU.w / 2
+                ovC.translate(rCX, rUY)
+                ovC.scale(rPS, rPS)
+                ovC.translate(-rCX, -rUY)
+              } else if (rtFx.k === 'blur') {
+                ovC.filter = 'blur(' + ((1 - rUu) * olPx * 0.12).toFixed(2) + 'px)'
+              }
+            }
+            for (var rpk = 0; rpk < rU.parts.length; rpk++) rtPart(rU.parts[rpk], rUBX, rUY)
+            ovC.restore()
+          }
+        }
       }
-      dflush()
-      ovC.font = olFN
+      ovC.restore()
+      continue
     }
     var olLines = ol.lines || ['']
     // maxWidth wrap (ol.mw = frame-width fraction): greedy over word tokens
@@ -5224,7 +5542,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       var olWrapped = []
       for (var olwl = 0; olwl < olLines.length; olwl++) {
         var olWLine = olLines[olwl]
-        if (!olWLine || olMeasure(olWLine) <= olWMax) {
+        if (!olWLine || ovC.measureText(olWLine).width <= olWMax) {
           olWrapped.push(olWLine)
           continue
         }
@@ -5232,7 +5550,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
         var olCur = ''
         for (var olti = 0; olti < olToks.length; olti++) {
           if (!olCur) { olCur = olToks[olti]; continue }
-          if (olMeasure(olCur + olToks[olti]) <= olWMax) {
+          if (ovC.measureText(olCur + olToks[olti]).width <= olWMax) {
             olCur += olToks[olti]
           } else {
             olWrapped.push(olCur)
@@ -5282,10 +5600,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 || olEm) {
+    if (ol.box || ol.align || olFx) {
       olLWs = []
       for (var olwi = 0; olwi < olLines.length; olwi++) {
-        var olw = olMeasure(olLines[olwi])
+        var olw = ovC.measureText(olLines[olwi]).width
         olLWs.push(olw)
         if (olw > olMaxW) olMaxW = olw
       }
@@ -5321,12 +5639,6 @@ 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
@@ -5363,10 +5675,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
               : olIdx
           var olT2 = olT - olOrd * olFx.st
           var olNext = olPref + olUs[ou]
-          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 olNW = ovC.measureText(olNext).width
           var olUW = olNW - olPW
           var olUX = olXb + olPW
           var olUA = 1, olUu = 1
@@ -5395,11 +5704,6 @@ 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
@@ -5414,7 +5718,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     ovC.restore()
   }
   ov.sig = ovSig
-  ov.active = olVisSig !== ''
+  ov.wasAnim = olAnim
   if (ov.texture) ov.texture.needsUpdate = true
   }
 
@@ -8367,27 +8671,16 @@ function studioLayerData(layers, duration, pins) {
         }
         const st = resolveOverlayStyle(o);
         const bx = resolveOverlayBox(o);
-        const em = resolveEmphasis(o);
+        const rt = styledTextOf(o);
         return {
           ...base,
           text: 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
-                }
-              } : {}
-            }
-          } : {},
+          // The lines a person reads. A styled layer (rt) is painted from
+          // its runs; these are then its words, for the signature.
+          lines: overlayLines(stripEmphasis(overlayDisplayText(o))),
+          // The styled payload, only when the layer is set in more than
+          // one style: a plain clip's data is unchanged.
+          ...rt ? { rt } : {},
           fs: st.size,
           weight: st.weight,
           stack: st.stack,
@@ -10520,6 +10813,68 @@ function applyLook(frame, look, size, video, placement) {
   return out;
 }
 
+// src/richText/caret.ts
+function caretStops(line, measure) {
+  const stops = [{ o: line.a, x: 0 }];
+  for (const fr of line.frags) {
+    let at = 0;
+    for (const g of graphemesOf(fr.t)) {
+      at += g.length;
+      stops.push({
+        o: line.a + fr.o + at,
+        x: fr.x + measure(fr.t.slice(0, at), fr.f || 0)
+      });
+    }
+  }
+  return stops;
+}
+function lineOfOffset(layout, offset) {
+  const lines = layout.lines;
+  for (let i = lines.length - 1; i >= 0; i--) {
+    if (offset >= lines[i].a) return i;
+  }
+  return 0;
+}
+function caretAt(layout, offset, measure) {
+  const li = lineOfOffset(layout, offset);
+  const stops = caretStops(layout.lines[li], measure);
+  let x = stops[stops.length - 1].x;
+  for (const s of stops) {
+    if (s.o >= offset) {
+      x = s.x;
+      break;
+    }
+  }
+  return { line: li, x };
+}
+function offsetAtX(line, x, measure) {
+  const stops = caretStops(line, measure);
+  let best = stops[0];
+  for (const s of stops) {
+    if (Math.abs(s.x - x) < Math.abs(best.x - x)) best = s;
+  }
+  return best.o;
+}
+function rangeRects(layout, start, end, measure, breakTail = 0) {
+  const out = [];
+  if (end <= start) return out;
+  layout.lines.forEach((line, i) => {
+    const lineEnd = line.a + line.n;
+    if (end <= line.a || start > lineEnd) return;
+    const stops = caretStops(line, measure);
+    const xOf = (o) => {
+      for (const s of stops) if (s.o >= o) return s.x;
+      return stops[stops.length - 1].x;
+    };
+    const x0 = xOf(Math.max(start, line.a));
+    const x1 = xOf(Math.min(end, lineEnd));
+    const next = layout.lines[i + 1];
+    const tail = next && next.a > lineEnd && end > lineEnd ? breakTail : 0;
+    if (x1 + tail > x0) out.push({ line: i, x: x0, w: x1 - x0 + tail });
+  });
+  return out;
+}
+
 // src/timeline/lanes.ts
 import {
   mapTime as mapTime3,
@@ -11900,6 +12255,7 @@ export {
   CURSOR_IDLE_FADE_OUT,
   CURSOR_IDLE_HOLD,
   DARK_GROUND,
+  DECORATION_THICKNESS_EM,
   DEFAULT_BROWSER_BAR,
   DEFAULT_CAM_POSE,
   DEFAULT_CAM_STYLE,
@@ -11937,6 +12293,7 @@ export {
   FREEZE_DEFAULT_SECONDS,
   FREEZE_SECONDS_MAX,
   FREEZE_SECONDS_MIN,
+  HIGHLIGHT_HALF_EM,
   HOLD_DRIFT_MAX,
   HOUSE_GRADIENT,
   HOUSE_REGISTER,
@@ -11986,6 +12343,7 @@ export {
   SPEED_SPAN_MIN,
   STAGE_CLIP_PREFIX,
   STILL_DEFAULT,
+  STRIKE_OFFSET_EM,
   STUDIO_ENTRY_ID,
   STYLE_FIELDS,
   TEXT3D_DEPTH_DEFAULT,
@@ -12010,6 +12368,7 @@ export {
   TRANSITION_SECONDS_MAX,
   TRANSITION_SECONDS_MIN,
   TRANSITION_SPEED_MULT,
+  UNDERLINE_OFFSET_EM,
   WINDOW_FOCUS_MIN,
   ZOOM_CHAIN_GAP,
   ZOOM_EASE,
@@ -12053,6 +12412,8 @@ export {
   cardInset,
   cardPointToScreen,
   cardPoseTrack,
+  caretAt,
+  caretStops,
   clampCamFrac,
   clampCamSize,
   clampFocus,
@@ -12076,6 +12437,7 @@ export {
   cursorFromRecords,
   cursorFromTrace,
   cursorIdleFade,
+  decorationRect,
   deltaE,
   deriveViewportCrop,
   destinationById,
@@ -12146,14 +12508,15 @@ export {
   lastLayerEnd,
   layerMedia,
   layoutOf,
+  layoutText,
   levelForFocusFraction,
+  lineOfOffset,
   liveZoomStyleName,
   lookFromBrand,
   lookKindForGround,
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
-  measureEmphasized,
   mediaAtOutput,
   mediaDuration,
   mediaFrame,
@@ -12173,6 +12536,7 @@ export {
   objectMotionBase,
   objectMotionPoseAt,
   objectsLane,
+  offsetAtX,
   outputDurationOf,
   outputEnd,
   outputRangeToSource,
@@ -12213,6 +12577,7 @@ export {
   programStillTime,
   projectFromArtifact,
   pumpFreeChainGap,
+  rangeRects,
   ratedSegments,
   recommendedExportResolution,
   refillAudioBeds,
@@ -12245,8 +12610,10 @@ export {
   studioAudioPlan,
   studioEntry,
   studioLayerData,
+  styledTextOf,
   tiltLane,
   tiltTrackFromDoc,
+  tokenRanges,
   traceKindOf,
   transitionMult,
   transitionSeconds,