@vosjs/studio-core 0.38.0 → 0.40.0

package/dist/index.js

@@ -2213,7 +2213,7 @@ function htmlLayerPayload(clip) {
   };
 }
 
-// src/richText/layout.ts
+// ../elements/dist/chunk-GYJBPCR2.js
 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") {
@@ -2375,8 +2375,6 @@ function decorationRect(kind, x, w, y, px) {
   );
   return { x: x0, y: top, w: x1 - x0, h: t };
 }
-
-// src/richText/runs.ts
 var RUN_STYLE_KEYS = [
   "weight",
   "italic",
@@ -2421,6 +2419,24 @@ function normalizeRuns(text) {
   if (out.length === 1 && !isStyled(out[0])) return out[0].text;
   return out;
 }
+function layoutLines(text, fontOf) {
+  const lines = [[]];
+  for (const run of runsOf(text)) {
+    const f = fontOf(run);
+    const set = {
+      ...f ? { f } : {},
+      ...run.color ? { c: run.color } : {},
+      ...run.underline ? { u: 1 } : {},
+      ...run.strike ? { s: 1 } : {},
+      ...run.highlight ? { h: run.highlight } : {}
+    };
+    run.text.split("\n").forEach((part, i) => {
+      if (i > 0) lines.push([]);
+      if (part) lines[lines.length - 1].push({ t: part, ...set });
+    });
+  }
+  return lines;
+}
 function snapOffset(plain, offset, dir) {
   const o = Math.max(0, Math.min(plain.length, offset));
   let at = 0;
@@ -2530,6 +2546,68 @@ function diffInput(prev, next, caretAfter) {
   };
 }
 
+// ../elements/dist/text/index.js
+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/overlayText.ts
 var OVERLAY_BOX_PAD_X = 0.6;
 var OVERLAY_BOX_PAD_Y = 0.35;
@@ -2699,24 +2777,13 @@ function styledTextOf(clip) {
     }
     return at;
   };
-  const l = [[]];
-  for (const run of runs) {
-    const f = fontOf(
+  const l = layoutLines(
+    runs,
+    (run) => fontOf(
       run.weight !== void 0 ? snapRunWeight(clip, run.weight) : style.weight,
       run.italic ?? italic
-    );
-    const set = {
-      ...f ? { f } : {},
-      ...run.color ? { c: run.color } : {},
-      ...run.underline ? { u: 1 } : {},
-      ...run.strike ? { s: 1 } : {},
-      ...run.highlight ? { h: run.highlight } : {}
-    };
-    run.text.split("\n").forEach((part, i) => {
-      if (i > 0) l.push([]);
-      if (part) l[l.length - 1].push({ t: part, ...set });
-    });
-  }
+    )
+  );
   const entry = familyEntryOf(clip);
   const faces = [];
   for (const font of fs.slice(1)) {
@@ -2740,63 +2807,30 @@ function styledTextOf(clip) {
     h: hashOf(JSON.stringify([l, fs]))
   };
 }
-function overlayTokens(line) {
-  return line.match(/\S+\s*/g) ?? [line];
-}
-function wrapOverlayLines(lines, measure, maxPx) {
-  if (!(maxPx > 0)) return lines;
-  const out = [];
-  for (const line of lines) {
-    if (!line || measure(line) <= maxPx) {
-      out.push(line);
-      continue;
-    }
-    let current = "";
-    for (const token of overlayTokens(line)) {
-      if (!current) {
-        current = token;
-        continue;
-      }
-      if (measure(current + token) <= maxPx) {
-        current += token;
-      } else {
-        out.push(current);
-        current = token;
+function textRunsOf(clip) {
+  const styled = styledTextOf(clip);
+  if (styled) return styled;
+  const style = resolveOverlayStyle(clip);
+  return {
+    l: overlayLines(overlayPlainText(clip)).map((t) => t ? [{ t }] : []),
+    fs: [
+      {
+        w: style.weight,
+        ...style.fontStyle === "italic" ? { i: 1 } : {}
       }
-    }
-    if (current) out.push(current);
-  }
-  return out.length ? out : [""];
-}
-function graphemesOf2(line) {
-  if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
-    return [
-      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
-        line
-      )
-    ].map((s) => s.segment);
-  }
-  return [...line];
-}
-function overlaySegments(text, unit) {
-  const lines = overlayLines(text);
-  if (unit === "block") return [];
-  if (unit === "line") return lines.map((l) => [l]);
-  if (unit === "word") return lines.map(overlayTokens);
-  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 = overlayPlainText(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(
-    (sum, line) => sum + overlayTokens(line).length,
-    0
-  ) : n;
+  const lines = overlayLines(overlayPlainText(clip));
+  const count = (per) => lines.reduce((sum, line) => sum + per(line), 0);
+  const words = () => count((line) => tokenRanges(line).length);
+  const n = unit === "block" ? 1 : unit === "line" ? lines.length : unit === "word" ? words() : count((line) => graphemesOf(line).length);
+  const upperN = unit === "line" && clip.maxWidth ? words() : n;
   const typewriter = spec.fx === "typewriter";
   const dur = typewriter ? 1e-3 : Math.min(2, Math.max(0.05, spec.duration ?? OVERLAY_TRANSITION_DUR));
   const defaultStagger = typewriter ? 0.05 : unit === "block" ? 0 : 0.06;
@@ -2812,9 +2846,7 @@ function resolveOverlayFx(clip, clipDuration) {
     d: FX_DIR[spec.direction ?? "forward"] ?? 0,
     st: round14(st),
     dur: round14(dur),
-    tt: round14(st * (upperN - 1) + dur),
-    units,
-    n
+    tt: round14(st * (upperN - 1) + dur)
   };
 }
 function overlayFontString(style, scale, s) {
@@ -2838,35 +2870,21 @@ function overlayRect(clip, measure, frameW, frameH = 1080, mediaAspect) {
     return { ...base, w: w2, h: w2 / (mediaAspect || 16 / 9) };
   }
   const style = resolveOverlayStyle(clip);
-  const font = overlayFontString(style, scale, 1);
   const ls = style.letterSpacing * scale;
-  const styled = styledTextOf(clip);
-  let w = 0;
-  let lineCount = 0;
-  if (styled) {
-    const fonts = styled.fs.map(
-      (f) => overlayFontString(
-        { ...style, weight: f.w, fontStyle: f.i ? "italic" : "normal" },
-        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(overlayPlainText(clip)),
-      width,
-      clip.maxWidth * frameW
-    ) : overlayLines(overlayPlainText(clip));
-    for (const line of lines) w = Math.max(w, width(line));
-    lineCount = lines.length;
-  }
+  const runs = textRunsOf(clip);
+  const fonts = runs.fs.map(
+    (f) => overlayFontString(
+      { ...style, weight: f.w, fontStyle: f.i ? "italic" : "normal" },
+      scale,
+      1
+    )
+  );
+  const laid = layoutText(
+    { lines: runs.l, maxWidth: clip.maxWidth ? clip.maxWidth * frameW : 0 },
+    (t, f) => measure(t, fonts[f], ls)
+  );
+  const w = laid.width;
+  const lineCount = laid.lines.length;
   const lineH = style.size * scale * style.lineHeight;
   const box = resolveOverlayBox(clip);
   const padX = box ? box.padX * scale : 0;
@@ -5117,7 +5135,7 @@ 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 styled-text layout (the engine's text/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
@@ -5592,334 +5610,155 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     ovC.textAlign = 'center'
     ovC.textBaseline = 'middle'
     ovC.letterSpacing = ((ol.ls || 0) * olMS * s) + 'px'
-    // 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.
+    // Every text layer is laid out by the layout module, ONCE: a styled one
+    // from its runs (ol.rt: lines of runs, each set its own way), a plain
+    // one from its lines, each a single run in the layer's own style. 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.
+    var rtFonts = [ovC.font]
     if (ol.rt) {
-      var rtFonts = [ovC.font]
       for (var rfi = 1; rfi < ol.rt.fs.length; rfi++) {
         rtFonts.push((ol.rt.fs[rfi].i ? 'italic ' : '') + 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. Under
-      // a per-unit entrance each is drawn with its unit instead (below), so
-      // it arrives with its word.
-      for (var rhi = 0; !rtFx && 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, withH) {
-        if (withH && p.h) {
-          var rhU = TXL.decorationRect('h', bx + p.x, p.w, y, olPx)
-          var rhS = ovC.shadowColor
-          ovC.shadowColor = 'rgba(0,0,0,0)'
-          ovC.fillStyle = p.h
-          ovC.fillRect(rhU.x, rhU.y, rhU.w, rhU.h)
-          ovC.shadowColor = rhS
-        }
-        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(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)
-        }
-      }
-      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, true)
-            ovC.restore()
-          }
-        }
-      }
-      ovC.restore()
-      continue
     }
-    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
-    // unit sequences stay byte-identical) at measured widths. MIRRORS
-    // wrapOverlayLines in overlayText.ts \u2014 change together. A token wider
-    // than the budget gets its own line; explicit \\n lines wrap independently.
-    if (ol.mw) {
-      var olWMax = ol.mw * W
-      var olWrapped = []
-      for (var olwl = 0; olwl < olLines.length; olwl++) {
-        var olWLine = olLines[olwl]
-        if (!olWLine || ovC.measureText(olWLine).width <= olWMax) {
-          olWrapped.push(olWLine)
-          continue
-        }
-        var olToks = olWLine.match(/\\S+\\s*/g) || [olWLine]
-        var olCur = ''
-        for (var olti = 0; olti < olToks.length; olti++) {
-          if (!olCur) { olCur = olToks[olti]; continue }
-          if (ovC.measureText(olCur + olToks[olti]).width <= olWMax) {
-            olCur += olToks[olti]
-          } else {
-            olWrapped.push(olCur)
-            olCur = olToks[olti]
-          }
-        }
-        if (olCur) olWrapped.push(olCur)
-      }
-      olLines = olWrapped.length ? olWrapped : ['']
-    }
-    var olLH = olPx * (ol.lh || ${OVERLAY_LINE_HEIGHT})
-    var olY0 = -((olLines.length - 1) * olLH) / 2
-    // Per-line widths: needed by the pill, by left/right alignment (lines
-    // draw centered; alignment is an x offset against the widest line), and
-    // by per-unit fx (units place by prefix advance from the line's left edge).
-    var olFx = ol.fx && ol.fx.units.length ? ol.fx : null
-    // With wrap active, baked per-line unit arrays regroup onto the WRAPPED
-    // lines. Wrapping never reorders: word/char units consume in flat order
-    // by string length (wrapped lines are token concatenations); 'line'
-    // units become one per wrapped line. Flat delay order is unchanged.
-    if (olFx && ol.mw) {
-      var olFlat = []
-      for (var olfi = 0; olfi < olFx.units.length; olfi++) {
-        for (var olfj = 0; olfj < olFx.units[olfi].length; olfj++) {
-          olFlat.push(olFx.units[olfi][olfj])
-        }
-      }
-      var olRe = []
-      if (olFx.u === 'line') {
-        for (var olri = 0; olri < olLines.length; olri++) olRe.push([olLines[olri]])
-      } else {
-        var olFk = 0
-        for (var olri2 = 0; olri2 < olLines.length; olri2++) {
-          var olNeed = olLines[olri2].length
-          var olArr = []
-          var olGot = 0
-          while (olFk < olFlat.length && olGot < olNeed) {
-            olArr.push(olFlat[olFk])
-            olGot += olFlat[olFk].length
-            olFk++
-          }
-          olRe.push(olArr)
-        }
-      }
-      var olReN = 0
-      for (var olrn = 0; olrn < olRe.length; olrn++) olReN += olRe[olrn].length
-      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) {
-      olLWs = []
-      for (var olwi = 0; olwi < olLines.length; olwi++) {
-        var olw = ovC.measureText(olLines[olwi]).width
-        olLWs.push(olw)
-        if (olw > olMaxW) olMaxW = olw
+    var rtFx = ol.fx && ol.fx.u !== 'block' ? ol.fx : null
+    var rtMax = ol.mw ? ol.mw * W : 0
+    var rtKey = (ol.rt ? 'r' + ol.rt.h : 'p' + (ol.lines || ['']).join('\\n')) + '|' + 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) {
+      var rtIn = ol.rt ? ol.rt.l : []
+      if (!ol.rt) {
+        var rtPl = ol.lines || ['']
+        for (var rpi = 0; rpi < rtPl.length; rpi++) rtIn.push(rtPl[rpi] ? [{ t: rtPl[rpi] }] : [])
+      }
+      rtHit = rtAll[ol.id] = {
+        k: rtKey,
+        L: TXL.layoutText(
+          { lines: rtIn, 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.
+    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
     }
-    // Background pill (ol.box, baked design px at fs): drawn BEFORE the text
-    // and before the legibility shadow config, so the pill never inherits the
-    // text shadow. Geometry mirrors overlayRect's inflation \u2014 change together.
     if (ol.box) {
-      var obPX = ol.box.px * olMS * s
-      var obPY = ol.box.py * olMS * s
-      var obFullW = olMaxW + obPX * 2
-      var obFullH = olLines.length * olLH + obPY * 2
-      var obR = Math.min(ol.box.r * olMS * s, obFullH / 2)
+      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(-obFullW / 2, -obFullH / 2, obFullW, obFullH, obR, ovC)
+      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. Under
+    // a per-unit entrance each is drawn with its unit instead (below), so
+    // it arrives with its word.
+    for (var rhi = 0; !rtFx && 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.fillStyle = ol.color
-    if (!olFx) {
-      for (var ok = 0; ok < olLines.length; ok++) {
-        var olXof = 0
-        if (ol.align && olLWs) {
-          olXof = ol.align === 'left'
-            ? (olLWs[ok] - olMaxW) / 2
-            : (olMaxW - olLWs[ok]) / 2
-        }
-        var olLY = olY0 + ok * olLH
-        if (ol.stroke) {
-          ovC.strokeStyle = ol.stroke.c
-          ovC.lineWidth = ol.stroke.w * olMS * s
-          ovC.lineJoin = 'round'
-          ovC.strokeText(olLines[ok], olXof, olLY)
-        }
-        ovC.fillText(olLines[ok], olXof, olLY)
+    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, withH) {
+      if (withH && p.h) {
+        var rhU = TXL.decorationRect('h', bx + p.x, p.w, y, olPx)
+        var rhS = ovC.shadowColor
+        ovC.shadowColor = 'rgba(0,0,0,0)'
+        ovC.fillStyle = p.h
+        ovC.fillRect(rhU.x, rhU.y, rhU.w, rhU.h)
+        ovC.shadowColor = rhS
+      }
+      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(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)
+      }
+    }
+    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: units draw LEFT-aligned at prefix advances
-      // measured from the full line (exact bar cross-unit kerning), so the
-      // settled frame matches the non-fx layout. Per-unit progress is pure
-      // f(t): delay = order(index)\xB7st, eased over dur; typewriter is a step
-      // reveal. Stroke-under-fill per unit; pill/shadow config above apply.
-      ovC.textAlign = 'left'
-      var olIdx = 0
-      for (var ok2 = 0; ok2 < olFx.units.length; ok2++) {
-        var olUs = olFx.units[ok2]
-        var olLW2 = olLWs ? olLWs[ok2] : 0
-        var olLY2 = olY0 + ok2 * olLH
-        var olXof2 = 0
-        if (ol.align) {
-          olXof2 = ol.align === 'left'
-            ? (olLW2 - olMaxW) / 2
-            : (olMaxW - olLW2) / 2
-        }
-        var olXb = olXof2 - olLW2 / 2
-        var olPref = '', olPW = 0
-        for (var ou = 0; ou < olUs.length; ou++, olIdx++) {
-          var olOrd = olFx.d === 1
-            ? (olFx.n - 1 - olIdx)
-            : olFx.d === 2
-              ? Math.abs(olIdx - (olFx.n - 1) / 2)
-              : olIdx
-          var olT2 = olT - olOrd * olFx.st
-          var olNext = olPref + olUs[ou]
-          var olNW = ovC.measureText(olNext).width
-          var olUW = olNW - olPW
-          var olUX = olXb + olPW
-          var olUA = 1, olUu = 1
-          if (olFx.k === 'typewriter') {
-            olUA = olT2 >= 0 ? 1 : 0
+      // 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 {
-            olUu = Math.max(0, Math.min(1, olT2 / olFx.dur))
-            var olUE = 1 - Math.pow(1 - olUu, 3)
-            olUA = olFx.k === 'pop' ? Math.min(1, olUu * 2) : olUE
+            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
           }
-          var olUnit = olUs[ou]
-          olPref = olNext
-          olPW = olNW
-          if (olUA <= 0.004) continue
+          if (rUA <= 0.004) continue
           ovC.save()
-          ovC.globalAlpha = olA * olUA
-          if (olUu < 1) {
-            if (olFx.k === 'rise') {
-              ovC.translate(0, (1 - (1 - Math.pow(1 - olUu, 3))) * 24 * s)
-            } else if (olFx.k === 'pop') {
-              var olPS = 1 + 2.70158 * Math.pow(olUu - 1, 3) + 1.70158 * Math.pow(olUu - 1, 2)
-              ovC.translate(olUX + olUW / 2, olLY2)
-              ovC.scale(olPS, olPS)
-              ovC.translate(-(olUX + olUW / 2), -olLY2)
-            } else if (olFx.k === 'blur') {
-              ovC.filter = 'blur(' + ((1 - olUu) * olPx * 0.12).toFixed(2) + 'px)'
+          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)'
             }
           }
-          if (ol.stroke) {
-            ovC.strokeStyle = ol.stroke.c
-            ovC.lineWidth = ol.stroke.w * olMS * s
-            ovC.lineJoin = 'round'
-            ovC.strokeText(olUnit, olUX, olLY2)
-          }
-          ovC.fillText(olUnit, olUX, olLY2)
+          for (var rpk = 0; rpk < rU.parts.length; rpk++) rtPart(rU.parts[rpk], rUBX, rUY, true)
           ovC.restore()
         }
       }
@@ -8885,11 +8724,12 @@ function studioLayerData(input, duration, pins) {
         return {
           ...base,
           text: overlayPlainText(o),
-          // The lines a person reads. A styled layer (rt) is painted from
+          // The lines a person reads: what a plain layer is laid out
+          // from, one run a line. A styled layer (rt) is laid out from
           // its runs; these are then its words, for the signature.
           lines: overlayLines(overlayPlainText(o)),
           // The styled payload, only when the layer is set in more than
-          // one style: a plain clip's data is unchanged.
+          // one style.
           ...rt ? { rt } : {},
           fs: st.size,
           weight: st.weight,
@@ -8922,9 +8762,10 @@ function studioLayerData(input, duration, pins) {
               r: round8(bx.radius)
             }
           } : {},
-          // Entrance animation: segmentation + timing normalized
-          // HERE (deterministic doc-derived data) — ON_FRAME interprets
-          // per-unit progress as pure f(t). Absent = data byte parity.
+          // Entrance animation: timing normalized HERE (deterministic
+          // doc-derived data) — ON_FRAME cuts the units from the layout
+          // and interprets per-unit progress as pure f(t). Absent = data
+          // byte parity.
           ...(() => {
             const olFx = resolveOverlayFx(
               o,
@@ -11023,68 +10864,6 @@ 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,
@@ -12835,6 +12614,7 @@ export {
   styleAt,
   styleOf,
   styledTextOf,
+  textRunsOf,
   tiltLane,
   tiltTrackFromDoc,
   toggleStyle,