@litfamily/litclaude 1.0.10 → 1.0.13

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/scenes/karaoke-line.mjs

@@ -0,0 +1,47 @@
+// karaoke-line: one line revealed eojeol by eojeol at the timeline's reveal steps. Every word keeps
+// the position it has in the finished line, so nothing reflows while it reveals; the word being
+// read is set in the signal colour when the size makes that colour legible (MO-B-01).
+import { clamp, ease } from "../../core/util.mjs";
+import { GATE } from "../../core/constants.mjs";
+import { Scene, landing } from "../scene.mjs";
+
+export default class KaraokeLine extends Scene {
+  init() {
+    this.words = this.ctx.shot.text.trim().split(/\s+/u);
+  }
+  render(f, stage) {
+    const { palette, presetId, shot } = this.ctx;
+    const box = this.box();
+    const maxSize = presetId === "terminalcore" ? 81 : 120;
+    const { size, lines } = this.fitBlock(stage, shot.text, "display", box.w, maxSize, 3);
+    const step = size * 1.6;
+    const blockH = (lines.length - 1) * step;
+    const centerY = presetId === "terminalcore" ? box.y + box.h / 2 : 540;
+    const y0 = centerY - blockH / 2 + size * 0.35;
+    const revealed = shot.reveals.filter((r) => f.t >= r.start).length;
+    const current = revealed - 1;
+    const large = size >= GATE.largeFontPx;
+    let wordIndex = 0;
+    lines.forEach((line, li) => {
+      const words = line.text.split(" ");
+      const lineLeft = presetId === "swiss-signal" || presetId === "terminalcore" ? box.x : 960 - line.width / 2;
+      let offset = 0;
+      for (const word of words) {
+        const k = wordIndex;
+        wordIndex += 1;
+        const prefix = offset === 0 ? 0 : stage.type.layout(line.text.slice(0, offset), { voice: "display", size }).width;
+        offset += word.length + 1;
+        if (k >= revealed) continue;
+        const since = f.t - shot.reveals[k].start;
+        const rise = presetId === "tidal" ? (1 - ease.drift(clamp(since / 0.5))) * 10 : (1 - ease.slam(clamp(since / 0.18))) * 14;
+        const fill = k === current && large && palette.signal && presetId === "swiss-signal" ? palette.signal : palette.type;
+        const laid = stage.type.layout(word, { voice: "display", size });
+        stage.type.drawLine(stage.glyphs, laid, lineLeft + prefix, y0 + li * step + rise, {
+          fill, alpha: landing(since), elementId: `line/w${k}`,
+          extra: { blockId: "line", lineCount: lines.length, lineHeight: 1.6, cjk: /[가-힣]/u.test(shot.text) },
+        });
+      }
+    });
+    return {};
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/scenes/kinetic-list.mjs

@@ -0,0 +1,45 @@
+// kinetic-list: a heading and a list whose items arrive one per reveal step, sliding in on the
+// shortest path and staying put. The list is a multi-line block, so it carries the line-height
+// floors (MO-C-26): 1.6 for Hangul, 1.5 for Latin.
+import { clamp, ease } from "../../core/util.mjs";
+import { Scene, landing } from "../scene.mjs";
+
+export default class KineticList extends Scene {
+  render(f, stage) {
+    const { palette, presetId, shot } = this.ctx;
+    const box = this.box();
+    const items = shot.items ?? [];
+    const cjk = items.some((i) => /[가-힣]/u.test(i));
+    const lineHeight = cjk ? 1.6 : 1.5;
+    const itemSize = this.snapSize(Math.min(presetId === "terminalcore" ? 54 : 72, Math.floor((box.h - 180) / Math.max(1, items.length) / lineHeight)), "body");
+    let y = box.y + 20;
+    if (shot.heading) {
+      const hs = this.fit(stage, shot.heading, "display", box.w, presetId === "terminalcore" ? 72 : 96);
+      const h = stage.type.layout(shot.heading, { voice: "display", size: hs });
+      y += hs;
+      stage.type.drawLine(stage.glyphs, h, box.x, y, { fill: presetId === "swiss-signal" ? palette.signal : palette.type, alpha: landing(f.lt, 0.15), elementId: "list/heading" });
+      y += hs * 0.9;
+    }
+    const laid = items.map((item) => stage.type.layout(item, { voice: "body", size: itemSize }));
+    const alphas = [];
+    const offsets = [];
+    shot.reveals.forEach((r) => {
+      const since = f.t - r.start;
+      alphas.push(landing(since, 0.15));
+      offsets.push(since < 0 ? 0 : (1 - ease.outCubic(clamp(since / 0.3))) * -32);
+    });
+    const c = stage.glyphs.ctx;
+    laid.forEach((line, i) => {
+      if (alphas[i] <= 0) return;
+      c.save();
+      c.translate(offsets[i], 0);
+      stage.type.drawLine(stage.glyphs, line, box.x + 64, y + itemSize + i * itemSize * lineHeight, {
+        fill: palette.type, alpha: alphas[i], elementId: `list/l${i}`,
+        extra: { blockId: "list", lineCount: items.length, lineHeight, cjk },
+      });
+      c.restore();
+      stage.mark({ x: box.x + 16 + offsets[i], y: y + itemSize * 0.55 + i * itemSize * lineHeight, w: 18, h: 4 }, palette.dim ?? palette.type, `list/tick${i}`, "tick");
+    });
+    return {};
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/scenes/number-counter.mjs

@@ -0,0 +1,29 @@
+// number-counter: a figure that counts to its value over the first 70% of the shot and then holds,
+// set in the machine voice (monospaced digits, never negative tracking) with a label under it.
+import { clamp, ease } from "../../core/util.mjs";
+import { Scene, landing } from "../scene.mjs";
+
+export default class NumberCounter extends Scene {
+  render(f, stage) {
+    const { palette, shot } = this.ctx;
+    const box = this.box();
+    const from = Number(shot.from ?? 0);
+    const to = Number(shot.to ?? 0);
+    const hold = shot.end - shot.start;
+    const k = ease.outCubic(clamp(f.lt / (0.7 * hold)));
+    const value = Math.round(from + (to - from) * k);
+    const digits = `${shot.prefix ?? ""}${value.toLocaleString("en-US")}${shot.suffix ?? ""}`;
+    const size = this.fit(stage, shot.display, "machine", box.w, 260);
+    const figure = stage.type.layout(digits, { voice: "machine", size });
+    const y = 520 + size * 0.2;
+    stage.type.drawLine(stage.glyphs, figure, box.x, y, { fill: palette.type, elementId: "counter/figure" });
+    // Below the figure's descenders (a comma drops under the baseline): bar, then label.
+    const barY = y + size * 0.3;
+    stage.mark({ x: box.x, y: barY, w: Math.max(6, (box.w * 0.4) * k), h: 6 }, palette.mark, "counter/bar", "bar");
+    if (shot.label) {
+      const ls = this.fit(stage, shot.label, "body", box.w, 56);
+      stage.type.drawLine(stage.glyphs, stage.type.layout(shot.label, { voice: "body", size: ls }), box.x, barY + 28 + ls, { fill: palette.type, alpha: landing(f.lt - 0.2, 0.3), elementId: "counter/label" });
+    }
+    return {};
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/scenes/signature.mjs

@@ -0,0 +1,73 @@
+// signature: a Latin line written by a pen in one of the EMS single-stroke fonts, synced to the
+// reading time (writtenLength), with a short fading trail behind the pen head. The trail is this
+// engine's stateful example: advance() keeps the last few head positions (finite memory, well
+// inside prerollMax), so a seeked still replays it exactly.
+import { clamp } from "../../core/util.mjs";
+import { hexToLinear } from "../../core/util.mjs";
+import { strokeText, writtenLength, drawStrokeText } from "../stroke.mjs";
+import { Scene } from "../scene.mjs";
+
+const TRAIL = 6;
+
+export default class Signature extends Scene {
+  init() {
+    this.stateful = true;
+    this.prerollMax = 0.2;
+    const key = this.ctx.shot.font ?? "ems-readability";
+    this.font = this.ctx.strokeFonts.get(key);
+    if (!this.font) throw new Error(`stroke font not loaded: ${key}`);
+    this.fontKey = key;
+    this.reset();
+  }
+  reset() {
+    this.trail = [];
+  }
+  layout() {
+    if (!this.st) {
+      const box = this.box();
+      const probe = strokeText(this.font, this.ctx.shot.text, 100);
+      this.size = Math.min(180, (100 * box.w) / Math.max(1, probe.width));
+      this.st = strokeText(this.font, this.ctx.shot.text, this.size);
+    }
+    return this.st;
+  }
+  headAt(t) {
+    const st = this.layout();
+    const shot = this.ctx.shot;
+    const span = 0.7 * (shot.end - shot.start);
+    const n = st.charRange.length;
+    const times = st.charRange.map((_, i) => [shot.start + (span * i) / n, shot.start + (span * (i + 1)) / n]);
+    return writtenLength(st, times, t);
+  }
+  advance(f) {
+    this.trail.push({ t: f.t, len: this.headAt(f.t) });
+    if (this.trail.length > TRAIL) this.trail.shift();
+  }
+  render(f, stage) {
+    const { palette } = this.ctx;
+    const st = this.layout();
+    const box = this.box();
+    const x = box.x + (box.w - st.width) / 2;
+    const baseline = 540 + st.capHeight / 2;
+    const len = this.headAt(f.t);
+    const lineWidth = Math.max(4, this.size * 0.035);
+    const { bbox, head } = drawStrokeText(stage.glyphs, st, len, x, baseline, { color: palette.type, lineWidth });
+    if (bbox && stage.record) {
+      stage.type.boxes.push({
+        elementId: "signature", text: this.ctx.shot.text, voice: "signature", fontFile: this.fontKey, fontSizePx: +this.size.toFixed(2),
+        capHeightPx: +st.capHeight.toFixed(2), weight: 400, fill: palette.type, bbox: bbox.map((v) => +v.toFixed(2)), script: "latin", trackingEm: 0, widthPct: 100, alpha: 1,
+      });
+    }
+    if (head && len < st.total) {
+      const signal = hexToLinear(palette.mark);
+      stage.lines.segment(x + head.x, baseline + head.y, x + head.x, baseline + head.y, 12, signal, 1);
+      for (const p of this.trail) {
+        const age = f.t - p.t;
+        if (age <= 0 || age > 0.1) continue;
+        stage.lines.segment(x + head.x - (len - p.len) * 0.2, baseline + head.y, x + head.x, baseline + head.y, 3, signal, clamp(1 - age / 0.1) * 0.5);
+      }
+      if (stage.record) stage.record.elements.push({ elementId: "signature/pen", kind: "pen", bbox: [x + head.x - 6, baseline + head.y - 6, x + head.x + 6, baseline + head.y + 6] });
+    }
+    return {};
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/scenes/title-slam.mjs

@@ -0,0 +1,73 @@
+// title-slam: the opening hit. Display type lands on the shot's downbeat with the `slam` token
+// (180 ms, entrance scale floored at 0.95), then holds. swiss-signal steps the Latin width from 125
+// to 100 on landing; terminalcore types it in at the terminal's rate; tidal drifts it into place.
+import { clamp, ease } from "../../core/util.mjs";
+import { Scene, landing } from "../scene.mjs";
+
+export default class TitleSlam extends Scene {
+  render(f, stage) {
+    const { palette, presetId } = this.ctx;
+    const { text, sub } = this.ctx.shot;
+    const box = this.box();
+    const c = stage.glyphs.ctx;
+    const lt = f.lt;
+    if (presetId === "terminalcore") {
+      const { size, lines } = this.fitBlock(stage, text, "display", box.w, 108, 3);
+      const rate = this.ctx.tokens.typeInCharsPerSec ?? 22;
+      let budget = Math.floor(lt * rate) + 1;
+      const step = size * 1.6;
+      lines.forEach((line, i) => {
+        const chars = Array.from(line.text);
+        const shown = chars.slice(0, Math.max(0, Math.min(chars.length, budget))).join("");
+        budget -= chars.length;
+        if (!shown) return;
+        stage.type.drawLine(stage.glyphs, stage.type.layout(shown, { voice: "display", size }), box.x, box.y + size + i * step, { fill: palette.type, elementId: `title/l${i}`, extra: { blockId: "title", lineCount: lines.length, lineHeight: 1.6, cjk: /[가-힣]/u.test(text) } });
+      });
+      if (sub && budget > 4) {
+        const s = stage.type.layout(sub, { voice: "machine", size: 32 });
+        stage.type.drawLine(stage.glyphs, s, box.x, box.y + size + lines.length * step + 24, { fill: palette.dim, elementId: "title/sub" });
+      }
+      return {};
+    }
+    if (presetId === "tidal") {
+      const settle = ease.drift(clamp(lt / 2.4));
+      const { size, lines } = this.fitBlock(stage, text, "display", box.w * 0.9, 150, 3);
+      const alpha = landing(lt, 0.6);
+      const y0 = 540 - ((lines.length - 1) * size * 1.6) / 2 + size * 0.35 + (1 - settle) * 28;
+      stage.type.drawBlock(stage.glyphs, lines, 960, y0, { lineHeight: 1.6, fill: palette.type, alpha, align: "center", elementId: "title" });
+      if (sub) {
+        const s = stage.type.layout(sub, { voice: "machine", size: 30 });
+        stage.type.drawLine(stage.glyphs, s, 960, y0 + (lines.length - 1) * size * 1.6 + size * 0.9, { fill: palette.type, alpha: landing(lt - 0.5, 0.6), align: "center", elementId: "title/sub" });
+      }
+      return {};
+    }
+    // swiss-signal: the block sits on the grid's left edge with its last line in the lower third;
+    // the size shrinks until block, signal bar and annotation fit inside the title-safe box.
+    const landed = lt >= 0.18;
+    const slam = ease.slam(clamp(lt / 0.18));
+    const scale = 0.95 + 0.05 * slam;
+    const subSize = 28;
+    let fitted = this.fitBlock(stage, text, "display", box.w, 200, 3, { widthPct: 125, trackingEm: -0.02 });
+    const lineHeight = fitted.lines.some((l) => l.runs.some((r) => r.script === "hangul")) ? 1.6 : 1.5;
+    const height = (fb) => (fb.lines.length - 1) * fb.size * lineHeight + fb.size * 0.8 + (sub ? 72 + subSize : 40);
+    while (height(fitted) > box.h - 40 && fitted.size > 48) fitted = this.fitBlock(stage, text, "display", box.w, fitted.size * 0.9, 3, { widthPct: 125, trackingEm: -0.02 });
+    const { size, lines } = fitted;
+    const laid = landed ? lines.map((l) => stage.type.layout(l.text, { voice: "display", size, widthPct: 100, trackingEm: -0.02 })) : lines;
+    const step = size * lineHeight;
+    const blockH = (laid.length - 1) * step;
+    const bottom = box.y + box.h - (sub ? 72 + subSize : 40);
+    const baseY = Math.min(box.y + size * 0.8 + (box.h - height(fitted)) * 0.55, bottom - blockH);
+    c.save();
+    c.translate(box.x, baseY);
+    c.scale(scale, scale);
+    c.translate(-box.x, -baseY);
+    stage.type.drawBlock(stage.glyphs, laid, box.x, baseY, { lineHeight, fill: palette.type, alpha: 1, elementId: "title" });
+    c.restore();
+    stage.mark({ x: box.x, y: baseY + blockH + size * 0.22, w: Math.max(6, 96 * slam), h: 6 }, palette.mark, "title/signal-bar", "bar");
+    if (sub) {
+      const s = stage.type.layout(sub, { voice: "machine", size: subSize });
+      stage.type.drawLine(stage.glyphs, s, box.x, baseY + blockH + size * 0.22 + 24 + subSize, { fill: palette.type, alpha: landing(lt - 0.3, 0.2), elementId: "title/sub" });
+    }
+    return {};
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/stroke.mjs

@@ -0,0 +1,236 @@
+// Single-stroke plotter fonts (the five OFL EMS SVG fonts, MO-FT-08) laid out as polylines so a
+// line of Latin text can be written progressively by a moving pen. Adapted from mexicat/pdoom-video
+// app/src/engine/stroke.ts (MIT, see ../NOTICE). The Hershey fonts are excluded and never loaded.
+//
+// The files carry no kerning, so pairs that leave a hole (an overhang or a diagonal) are pulled in
+// optically: the closest horizontal approach of the two glyphs' ink is brought toward the font's
+// own n-n spacing. Connected scripts (EMS Allure) are never kerned, since that would break joins.
+import { SCALE } from "./scale.mjs";
+
+export const STROKE_FONTS = Object.freeze({
+  "ems-allure": { file: "EMSAllure.svg", connected: true },
+  "ems-felix": { file: "EMSFelix.svg", connected: false },
+  "ems-osmotron": { file: "EMSOsmotron.svg", connected: false },
+  "ems-readability": { file: "EMSReadability.svg", connected: false },
+  "ems-tech": { file: "EMSTech.svg", connected: false },
+});
+
+const BANDS = 48;
+
+function parsePath(d) {
+  const out = [];
+  const tokens = d.match(/[MLml]|-?\d*\.?\d+(?:e-?\d+)?/gu) ?? [];
+  let current = null;
+  let cmd = "M";
+  for (let i = 0; i < tokens.length;) {
+    const t = tokens[i];
+    if (/[MLml]/u.test(t)) {
+      cmd = t.toUpperCase();
+      i += 1;
+      continue;
+    }
+    const x = Number.parseFloat(tokens[i]);
+    const y = Number.parseFloat(tokens[i + 1]);
+    i += 2;
+    if (cmd === "M") {
+      current = [{ x, y }];
+      out.push(current);
+      cmd = "L";
+    } else current?.push({ x, y });
+  }
+  return out;
+}
+
+function inkBox(strokes) {
+  let x0 = Infinity;
+  let x1 = -Infinity;
+  let y0 = Infinity;
+  let y1 = -Infinity;
+  for (const s of strokes) for (const p of s) {
+    x0 = Math.min(x0, p.x); x1 = Math.max(x1, p.x); y0 = Math.min(y0, p.y); y1 = Math.max(y1, p.y);
+  }
+  return { x0, x1, y0, y1 };
+}
+
+export function parseStrokeFont(svgText, { connected }) {
+  const doc = new DOMParser().parseFromString(svgText, "image/svg+xml");
+  const face = doc.querySelector("font-face");
+  const fontEl = doc.querySelector("font");
+  const defaultAdvance = Number.parseFloat(fontEl?.getAttribute("horiz-adv-x") ?? "500");
+  const glyphs = new Map();
+  for (const g of doc.querySelectorAll("glyph")) {
+    const u = g.getAttribute("unicode");
+    if (u == null) continue;
+    glyphs.set(u, { adv: Number.parseFloat(g.getAttribute("horiz-adv-x") ?? String(defaultAdvance)), strokes: parsePath(g.getAttribute("d") ?? "") });
+  }
+  let yLo = Infinity;
+  let yHi = -Infinity;
+  for (const g of glyphs.values()) for (const s of g.strokes) for (const p of s) { yLo = Math.min(yLo, p.y); yHi = Math.max(yHi, p.y); }
+  const cap = glyphs.get("H") ? inkBox(glyphs.get("H").strokes).y1 : 700;
+  return { upm: Number.parseFloat(face?.getAttribute("units-per-em") ?? "1000"), glyphs, defaultAdvance, connected, cap, yLo, dy: (yHi - yLo + 1) / BANDS, profiles: new Map(), kerns: new Map(), target: null };
+}
+
+// Leftmost and rightmost ink per horizontal band (NaN where a band has no ink).
+function profile(font, ch) {
+  if (font.profiles.has(ch)) return font.profiles.get(ch);
+  const g = font.glyphs.get(ch);
+  let p = null;
+  if (g && g.strokes.length) {
+    const left = new Float32Array(BANDS).fill(Number.NaN);
+    const right = new Float32Array(BANDS).fill(Number.NaN);
+    const put = (x, y) => {
+      const i = Math.floor((y - font.yLo) / font.dy);
+      if (i < 0 || i >= BANDS) return;
+      if (!(left[i] <= x)) left[i] = x;
+      if (!(right[i] >= x)) right[i] = x;
+    };
+    for (const s of g.strokes) {
+      if (s.length === 1) put(s[0].x, s[0].y);
+      for (let k = 1; k < s.length; k++) {
+        const a = s[k - 1];
+        const b = s[k];
+        const n = Math.max(1, Math.ceil(Math.hypot(b.x - a.x, b.y - a.y) / (font.dy * 0.5)));
+        for (let j = 0; j <= n; j++) put(a.x + ((b.x - a.x) * j) / n, a.y + ((b.y - a.y) * j) / n);
+      }
+    }
+    p = { left, right };
+  }
+  font.profiles.set(ch, p);
+  return p;
+}
+
+function approach(font, a, b) {
+  const pa = profile(font, a);
+  const pb = profile(font, b);
+  if (!pa || !pb) return null;
+  const adv = font.glyphs.get(a).adv;
+  let m = Infinity;
+  for (let i = 0; i < BANDS; i++) if (!Number.isNaN(pa.right[i]) && !Number.isNaN(pb.left[i])) m = Math.min(m, adv + pb.left[i] - pa.right[i]);
+  return m === Infinity ? null : m;
+}
+
+function pairKern(font, a, b) {
+  if (font.connected || a === " " || b === " ") return 0;
+  const key = a + b;
+  if (font.kerns.has(key)) return font.kerns.get(key);
+  if (font.target === null) {
+    const refs = ["nn", "oo", "HH"].map((p) => approach(font, p[0], p[1])).filter((v) => v !== null);
+    font.target = refs.length ? refs.reduce((s, v) => s + v, 0) / refs.length : 0;
+  }
+  const m = approach(font, a, b);
+  const k = m === null ? 0 : Math.max(-0.12 * font.upm, Math.min(0, 0.6 * (font.target - m)));
+  font.kerns.set(key, k);
+  return k;
+}
+
+/** Lay out `text` at `size` px: strokes in px with the origin at the left baseline, y down. */
+export function strokeText(font, text, size) {
+  const s = size / font.upm;
+  const strokes = [];
+  const charOf = [];
+  const chars = Array.from(text);
+  let x = 0;
+  chars.forEach((ch, ci) => {
+    const g = font.glyphs.get(ch);
+    for (const st of g?.strokes ?? []) {
+      strokes.push(st.map((p) => ({ x: x + p.x * s, y: -p.y * s })));
+      charOf.push(ci);
+    }
+    x += (g?.adv ?? font.defaultAdvance) * s;
+    if (ci + 1 < chars.length) x += pairKern(font, ch, chars[ci + 1]) * s;
+  });
+  const lens = strokes.map((pts) => {
+    const L = new Float32Array(pts.length);
+    for (let i = 1; i < pts.length; i++) L[i] = L[i - 1] + Math.hypot(pts[i].x - pts[i - 1].x, pts[i].y - pts[i - 1].y);
+    return L;
+  });
+  const startLen = [];
+  let total = 0;
+  for (const L of lens) {
+    startLen.push(total);
+    total += L[L.length - 1] ?? 0;
+  }
+  const charRange = chars.map(() => [Infinity, -Infinity]);
+  strokes.forEach((_, i) => {
+    const r = charRange[charOf[i]];
+    r[0] = Math.min(r[0], startLen[i]);
+    r[1] = Math.max(r[1], startLen[i] + (lens[i][lens[i].length - 1] ?? 0));
+  });
+  let last = 0;
+  for (const r of charRange) {
+    if (r[0] === Infinity) { r[0] = last; r[1] = last; }
+    last = r[1];
+  }
+  return { text, strokes, startLen, lens, total, width: x, charRange, size, capHeight: font.cap * s };
+}
+
+/** Pen length (px) written by time t when char i is written during charTimes[i]. */
+export function writtenLength(st, charTimes, t) {
+  let len = 0;
+  for (let i = 0; i < st.charRange.length; i++) {
+    const [a, b] = st.charRange[i];
+    const [t0, t1] = charTimes[i] ?? [Infinity, Infinity];
+    if (t >= t1) len = b;
+    else if (t > t0) {
+      len = a + (b - a) * ((t - t0) / Math.max(1e-3, t1 - t0));
+      break;
+    } else break;
+  }
+  return len;
+}
+
+/**
+ * Stroke the first `length` px of a laid-out stroke text at (x, baseline) on the glyph layer.
+ * Returns the ink bbox in logical px (null when nothing is drawn) and the pen head.
+ */
+export function drawStrokeText(layer, st, length, x, baseline, { color, lineWidth }) {
+  const c = layer.ctx;
+  c.save();
+  c.translate(x, baseline);
+  c.strokeStyle = color;
+  c.lineWidth = lineWidth;
+  c.lineCap = "round";
+  c.lineJoin = "round";
+  c.beginPath();
+  let head = null;
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  const grow = (p) => { x0 = Math.min(x0, p.x); y0 = Math.min(y0, p.y); x1 = Math.max(x1, p.x); y1 = Math.max(y1, p.y); };
+  for (let i = 0; i < st.strokes.length; i++) {
+    const s0 = st.startLen[i];
+    if (s0 >= length) break;
+    const pts = st.strokes[i];
+    const L = st.lens[i];
+    const remain = length - s0;
+    const shown = [pts[0]];
+    let j = 1;
+    for (; j < pts.length && L[j] <= remain; j++) shown.push(pts[j]);
+    if (j < pts.length) {
+      const a = pts[j - 1];
+      const b = pts[j];
+      const u = (remain - L[j - 1]) / Math.max(1e-6, L[j] - L[j - 1]);
+      head = { x: a.x + (b.x - a.x) * u, y: a.y + (b.y - a.y) * u };
+      shown.push(head);
+    } else head = pts[pts.length - 1];
+    for (const p of shown) grow(p);
+    // The EMS glyphs are polylines; at display sizes their facets show. Curving through segment
+    // midpoints keeps the pen on the same path (within half a segment) without the corners.
+    c.moveTo(shown[0].x, shown[0].y);
+    for (let k = 1; k < shown.length - 1; k++) {
+      c.quadraticCurveTo(shown[k].x, shown[k].y, (shown[k].x + shown[k + 1].x) / 2, (shown[k].y + shown[k + 1].y) / 2);
+    }
+    if (shown.length > 1) c.lineTo(shown[shown.length - 1].x, shown[shown.length - 1].y);
+  }
+  c.stroke();
+  const m = c.getTransform();
+  c.restore();
+  if (x0 === Infinity) return { bbox: null, head: null };
+  const pad = lineWidth / 2;
+  const corners = [[x0 - pad, y0 - pad], [x1 + pad, y0 - pad], [x0 - pad, y1 + pad], [x1 + pad, y1 + pad]]
+    .map(([px, py]) => [(m.a * px + m.c * py + m.e) / SCALE, (m.b * px + m.d * py + m.f) / SCALE]);
+  const xs = corners.map((p) => p[0]);
+  const ys = corners.map((p) => p[1]);
+  return { bbox: [Math.min(...xs), Math.min(...ys), Math.max(...xs), Math.max(...ys)], head };
+}