domotion-svg 0.16.0 → 0.17.0

package/README.md

@@ -14,7 +14,7 @@
 
 **Domotion turns real HTML/CSS into one self-contained, animated SVG** — an accurate reproduction of the rendered page, with optional animation and simulated interaction built in. Text is emitted as real glyph paths, so it looks identical across browsers; the output scales crisply at any size and embeds anywhere with a plain `<img>`, no external assets.
 
-Beyond raw capture it ships a **template library** that turns a few flags into a polished animated SVG, **terminal-session capture** (a recording → an animated terminal), multi-frame **animation** with transitions, overlays, and simulated interaction, **device-chrome** framing, **nested compositing** (animated layers inside animated layers), one-command **SVG → MP4/WebM**, and a fidelity **review** tool.
+Beyond raw capture it ships a **template library** that turns a few flags into a polished animated SVG, **terminal-session capture** (a recording → an animated terminal), **scroll capture** (a long page replayed as one self-contained scrolling SVG), multi-frame **animation** with transitions, overlays, and simulated interaction, **device-chrome** framing, **nested compositing** (animated layers inside animated layers), one-command **SVG → MP4/WebM**, and a fidelity **review** tool.
 
 <p align="center">
   <img src="examples/output/hero-product-demo.svg" alt="An analytics dashboard assembling itself inside a browser window — KPI cards rise in, a bar chart grows with its peak highlighted, a search query types itself, and a nav item is clicked — all in one self-contained animated SVG" width="760">
@@ -74,6 +74,9 @@ domotion capture ./demo.html \
 
 # Capture HTML piped on stdin.
 cat demo.html | domotion capture - -o demo.svg
+
+# Capture a long page as one animated scrolling SVG (scrolls to the bottom over 8s).
+domotion capture https://example.com --scroll "down:bottom/8s" -o scroll.svg
 ```
 
 For a multi-frame animated SVG, write a small JSON config and run `domotion animate`:

package/dist/animation/animator.js

@@ -290,19 +290,16 @@ export function generateAnimatedSvg(config) {
             };
         });
     }
-    // Pre-compute per-frame timing windows (used by both the merge pipeline for
-    // timeline keyframes and the atomic push/scroll fallbacks below).
-    const frameTiming = {
-        startPct: [], holdEndPct: [], transEndPct: [],
-    };
+    // Pre-compute each frame's start-of-window percentage — the only field
+    // `buildIntraFrameAnimationCss` reads. (The per-frame loop below recomputes the
+    // hold / transition windows it needs locally via `pct()`, so they aren't
+    // collected here.)
+    const frameTiming = { startPct: [] };
     {
         let t = 0;
         for (const f of frames) {
-            const td = transitionDurationMs(f);
             frameTiming.startPct.push((t / totalDuration) * 100);
-            frameTiming.holdEndPct.push(((t + f.duration) / totalDuration) * 100);
-            frameTiming.transEndPct.push(((t + f.duration + td) / totalDuration) * 100);
-            t += f.duration + td;
+            t += f.duration + transitionDurationMs(f);
         }
     }
     // Every sequence composites: each frame is emitted as a complete, internally
@@ -876,7 +873,7 @@ function renderSvgOverlay(overlay, frameIdx, frameStart, frameHoldMs, totalDurat
         const e = overlay.enter;
         const easing = e.easing ?? "ease-out";
         const enterDelay = e.delay ?? 0;
-        const fromStr = offsetForDirection(e.from, overlay.width, overlay.height, true);
+        const fromStr = offsetForDirection(e.from, overlay.width, overlay.height);
         const enterStart = frameStart + enterDelay;
         const enterEnd = enterStart + e.duration;
         const enterId = `${id}-enter`;
@@ -889,7 +886,7 @@ function renderSvgOverlay(overlay, frameIdx, frameStart, frameHoldMs, totalDurat
         const e = overlay.exit;
         const easing = e.easing ?? "ease-in";
         const exitDelay = e.delay ?? 0;
-        const toStr = offsetForDirection(e.from, overlay.width, overlay.height, false);
+        const toStr = offsetForDirection(e.from, overlay.width, overlay.height);
         const exitStart = overlayEnd - e.duration - exitDelay;
         const exitId = `${id}-exit`;
         cssRules.push(`
@@ -908,12 +905,13 @@ function renderSvgOverlay(overlay, frameIdx, frameStart, frameHoldMs, totalDurat
     return { svgMarkup, css: cssRules.join("") };
 }
 /**
- * Offset string for a slide direction. When `outFrom` is true the offset is
- * the off-screen starting position (i.e. the overlay sits there before
- * animating to `(0,0)`). When false, it's the off-screen end position
- * (overlay animates from `(0,0)` to here on exit).
+ * Off-screen offset string for a slide direction — the point the overlay sits
+ * at when fully off-screen on the given side. Enter animates from this offset to
+ * `translate(0,0)`; exit animates from `translate(0,0)` back to it. The offset
+ * is the same for both (the enter-vs-exit direction is carried by the keyframe
+ * construction, not by this function), so it takes only the direction + size.
  */
-function offsetForDirection(dir, w, h, _outFrom) {
+function offsetForDirection(dir, w, h) {
     if (dir === "top")
         return `translate(0, -${h}px)`;
     if (dir === "bottom")

package/dist/capture/embed.js

@@ -85,18 +85,21 @@ function embedAsDataUri(url) {
 }
 /**
  * DM-540 — active hiDPI multiplier used by `embedResizedDataUri` lookups
- * during a single `elementTreeToSvg` invocation. Set at entry to that
- * function (via `setActiveHiDPIFactor`) and reset on exit. Must match the
- * value passed to `resizeEmbeddedImages` for the same tree, otherwise the
- * lookup misses and the renderer falls back to the source-resolution data
- * URI.
+ * during a single `elementTreeToSvg` invocation. `elementTreeToSvgInner` sets it
+ * (via `setActiveHiDPIFactor`) as the FIRST thing it does on EVERY call, so each
+ * render reads its own value and a stale value can't leak across renders — it's
+ * only ever read (as the `embedResizedDataUri` default) inside the render that
+ * just set it. Must match the value passed to `resizeEmbeddedImages` for the
+ * same tree, otherwise the lookup misses and the renderer falls back to the
+ * source-resolution data URI.
  *
  * Module-scoped because the resize lookup is buried in a dozen helper
  * functions (border-image, repeat-pattern, list marker, pseudo-image,
  * background-layer); threading the factor through every signature would
  * touch every call site and grow the renderer surface area for no
  * functional benefit. Captures run sequentially per Node event loop so
- * there's no concurrency hazard.
+ * there's no concurrency hazard. (DM-1435: considered a save/restore scope
+ * guard like `withRenderTextMode`, but set-at-entry already prevents the leak.)
  */
 let _activeHiDPIFactor = 2;
 export function setActiveHiDPIFactor(n) {

package/dist/capture/emoji.d.ts

@@ -17,6 +17,14 @@
  */
 import type { Page } from "@playwright/test";
 import type { CapturedElement } from "./types.js";
+/**
+ * Reset the process-global emoji caches — the opened Apple Color Emoji font and
+ * the extracted sbix-bitmap cache. These are process-stable (the system font
+ * doesn't change between renders), so this isn't needed per-generation; it
+ * exists for convention parity with `clearEmbeddedImageCaches()` and for test
+ * isolation / forcing a re-open. DM-1435.
+ */
+export declare function clearEmojiCaches(): void;
 /**
  * Snap an Apple Color Emoji sbix bitmap to the SQUARE box Chrome actually
  * paints it in.

package/dist/capture/emoji.js

@@ -18,12 +18,25 @@
 import { existsSync } from "node:fs";
 import * as fontkit from "fontkit";
 import { clipRectForScreenshot } from "./clip-rect.js";
+import { forEachElement } from "../tree-ops/for-each-element.js";
 const APPLE_COLOR_EMOJI_PATH = "/System/Library/Fonts/Apple Color Emoji.ttc";
 let _aceFont = null;
 let _aceFontLoaded = false;
 // Available sbix strikes on macOS Apple Color Emoji.ttc.
 const SBIX_STRIKES = [20, 26, 32, 40, 48, 52, 64, 96, 160];
 const _sbixCache = new Map();
+/**
+ * Reset the process-global emoji caches — the opened Apple Color Emoji font and
+ * the extracted sbix-bitmap cache. These are process-stable (the system font
+ * doesn't change between renders), so this isn't needed per-generation; it
+ * exists for convention parity with `clearEmbeddedImageCaches()` and for test
+ * isolation / forcing a re-open. DM-1435.
+ */
+export function clearEmojiCaches() {
+    _aceFont = null;
+    _aceFontLoaded = false;
+    _sbixCache.clear();
+}
 // Only take the sbix path when the glyph rect is roughly emoji-shaped (wide
 // enough relative to its height). Narrow rects are usually text-presentation
 // dingbats / partial clusters where the page-screenshot fallback is safer.
@@ -201,51 +214,46 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
     //    otherwise path-rendered plain-text run; renderer stamps an <image>
     //    over each char on top of the text path.
     const candidates = [];
-    const walk = (els) => {
-        for (const el of els) {
-            // Element-level raster (SK-1108): textarea content region, too
-            // involved to word-wrap in the path pipeline. Key on text+size+color so
-            // identical textareas dedupe to one screenshot.
-            if (el.elementRaster != null) {
-                const er = el.elementRaster;
-                // DM-936: include text-decoration + text-underline-position in the
-                // dedupe key so 3 identical-text `.vert.pos-{left,right,auto}`
-                // columns don't collapse to the same screenshot (the underline
-                // paints in different places per pos-* but tag+text+color+size
-                // alone hashes them all together → wrong-side underline in 2/3
-                // of the columns). Same for text-shadow / writing-mode variants.
-                // All the decoration keys are typed reads off CapturedStyles now; only
-                // the `text-decoration` shorthand isn't captured (just the longhands),
-                // so narrow-cast that single fallback read.
-                const s = el.styles;
-                const tdShorthand = s.textDecoration;
-                const tdKey = `${s.textDecorationLine ?? tdShorthand ?? ""}|${s.textUnderlinePosition ?? ""}|${s.textUnderlineOffset ?? ""}|${s.textDecorationStyle ?? ""}|${s.textDecorationColor ?? ""}|${s.textDecorationThickness ?? ""}|${s.textShadow ?? ""}|${s.writingMode ?? ""}`;
-                candidates.push({
-                    rect: { x: er.x, y: er.y, width: er.width, height: er.height },
-                    key: `el|${el.tag}|${el.text}|${el.styles.color}|${el.styles.fontSize}|${er.width}x${er.height}|${tdKey}`,
-                    setDataUri: (uri) => { er.dataUri = uri; },
-                });
-            }
-            if (el.textSegments != null) {
-                for (const seg of el.textSegments) {
-                    if (seg.rasterRect != null) {
-                        candidates.push({
-                            rect: seg.rasterRect,
-                            key: `seg|${seg.text}|${seg.color ?? ""}|${seg.fontSize ?? ""}|${seg.fontWeight ?? ""}`,
-                            setDataUri: (uri) => { seg.rasterDataUri = uri; },
-                        });
-                    }
-                    if (seg.rasterGlyphs != null) {
-                        for (const g of seg.rasterGlyphs)
-                            queueRasterGlyph(g, seg, el, candidates);
-                    }
+    forEachElement(tree, (el) => {
+        // Element-level raster (SK-1108): textarea content region, too
+        // involved to word-wrap in the path pipeline. Key on text+size+color so
+        // identical textareas dedupe to one screenshot.
+        if (el.elementRaster != null) {
+            const er = el.elementRaster;
+            // DM-936: include text-decoration + text-underline-position in the
+            // dedupe key so 3 identical-text `.vert.pos-{left,right,auto}`
+            // columns don't collapse to the same screenshot (the underline
+            // paints in different places per pos-* but tag+text+color+size
+            // alone hashes them all together → wrong-side underline in 2/3
+            // of the columns). Same for text-shadow / writing-mode variants.
+            // All the decoration keys are typed reads off CapturedStyles now; only
+            // the `text-decoration` shorthand isn't captured (just the longhands),
+            // so narrow-cast that single fallback read.
+            const s = el.styles;
+            const tdShorthand = s.textDecoration;
+            const tdKey = `${s.textDecorationLine ?? tdShorthand ?? ""}|${s.textUnderlinePosition ?? ""}|${s.textUnderlineOffset ?? ""}|${s.textDecorationStyle ?? ""}|${s.textDecorationColor ?? ""}|${s.textDecorationThickness ?? ""}|${s.textShadow ?? ""}|${s.writingMode ?? ""}`;
+            candidates.push({
+                rect: { x: er.x, y: er.y, width: er.width, height: er.height },
+                key: `el|${el.tag}|${el.text}|${el.styles.color}|${el.styles.fontSize}|${er.width}x${er.height}|${tdKey}`,
+                setDataUri: (uri) => { er.dataUri = uri; },
+            });
+        }
+        if (el.textSegments != null) {
+            for (const seg of el.textSegments) {
+                if (seg.rasterRect != null) {
+                    candidates.push({
+                        rect: seg.rasterRect,
+                        key: `seg|${seg.text}|${seg.color ?? ""}|${seg.fontSize ?? ""}|${seg.fontWeight ?? ""}`,
+                        setDataUri: (uri) => { seg.rasterDataUri = uri; },
+                    });
+                }
+                if (seg.rasterGlyphs != null) {
+                    for (const g of seg.rasterGlyphs)
+                        queueRasterGlyph(g, seg, el, candidates);
                 }
             }
-            if (el.children.length > 0)
-                walk(el.children);
         }
-    };
-    walk(tree);
+    });
     if (candidates.length === 0)
         return;
     const cache = new Map();

package/dist/capture/index.d.ts

@@ -95,6 +95,14 @@ export declare class DemoRecorder {
     init(opts: CaptureOptions): Promise<void>;
     /** Navigate to a URL and capture the visible DOM as SVG. */
     captureUrl(path: string, waitMs?: number, idPrefix?: string): Promise<string>;
+    /**
+     * Shared post-capture pipeline (DM-1434): self-contained remote-image
+     * embedding + optional resize + conic-gradient rasterization, then reset the
+     * generation-scoped caches and render the tree to SVG body markup at `height`.
+     * `captureCurrent` (viewport) and `captureFullPage` (scrollable) differ only in
+     * the height, so they both funnel through here.
+     */
+    private renderCapturedTree;
     /** Capture the current page state as SVG content. */
     captureCurrent(idPrefix?: string): Promise<string>;
     /**
@@ -131,6 +139,32 @@ export declare function attachWebfontTracker(page: Page): {
     urls: Set<string>;
     detach: () => void;
 };
+/**
+ * Discover all `@font-face` rules in the page's stylesheets, fetch each
+ * font file via the browser context's request API (so cookies / CORS / auth
+ * follow whatever the browser is using), and register the bytes with
+ * `text-to-path.ts` so the renderer can draw with the actual webfont glyphs
+ * instead of falling through to the system-font substitutes.
+ *
+ * Should be called AFTER `await page.evaluate(() => document.fonts.ready)`
+ * — otherwise late-loading fonts may not be in `document.styleSheets` yet.
+ *
+ * Cross-origin stylesheets whose `cssRules` throw a SecurityError are silently
+ * skipped (we can't enumerate their rules from JS). Same-origin sheets and
+ * inline `<style>` blocks always work.
+ *
+ * Caller is responsible for `clearWebfonts()` between captures if needed.
+ * No-op when the page declares no `@font-face` rules.
+ */
+type FaceRule = {
+    kind: "font-face";
+    family: string;
+    weight: string;
+    style: string;
+    url: string;
+    urls?: string[];
+    unicodeRange?: Array<[number, number]>;
+};
 /** One row of the report returned by discoverAndRegisterWebfonts. */
 type WebfontRegisterReport = {
     family: string;
@@ -155,15 +189,7 @@ export declare function discoverAndRegisterWebfonts(page: Page, observedFontUrls
  * that never serialised back to text) aren't covered. Adequate for the
  * mainstream marketing-site case that motivated the change.
  */
-export declare function parseFontFaceRulesFromCssText(cssText: string, baseUrl: string): Array<{
-    kind: "font-face";
-    family: string;
-    weight: string;
-    style: string;
-    url: string;
-    urls?: string[];
-    unicodeRange?: Array<[number, number]>;
-}>;
+export declare function parseFontFaceRulesFromCssText(cssText: string, baseUrl: string): FaceRule[];
 /**
  * Parse a CSS `unicode-range` descriptor value (CSS Fonts 4 §4.5) into a list
  * of inclusive `[from, to]` codepoint intervals. Accepts the three forms:

package/dist/capture/index.js

@@ -10,12 +10,13 @@ import { elementTreeToSvgInner } from "../render/element-tree-to-svg.js";
 import { embedRemoteImages } from "./embed.js";
 import { resizeEmbeddedImages } from "../tree-ops/resize-embedded-images.js";
 import { rasterizeConicGradients } from "../render/conic-raster.js";
-import { clearEmbeddedFonts, clearGlyphDefs, registerLocalFontAlias, registerWebfont } from "../render/text-to-path.js";
+import { resetGeneration, registerLocalFontAlias, registerWebfont } from "../render/text-to-path.js";
 import { CAPTURE_SCRIPT } from "./script.generated.js";
 import { rasterizeBitmapGlyphs } from "./emoji.js";
 import { clipRectForScreenshot } from "./clip-rect.js";
 import { refineInitialLetterPositions } from "./initial-letter-probe.js";
 import { _resetLastCaptureWarnings } from "./warnings.js";
+import { forEachElement } from "../tree-ops/for-each-element.js";
 /**
  * Launch Chromium via Playwright, auto-installing the browser binary on first
  * use if it's missing. Use this instead of importing `chromium` from
@@ -123,13 +124,14 @@ export class DemoRecorder {
         await this.page.waitForTimeout(waitMs);
         return this.captureCurrent(idPrefix);
     }
-    /** Capture the current page state as SVG content. */
-    async captureCurrent(idPrefix = "") {
-        if (this.page == null)
-            throw new Error("Call init() first");
-        const tree = await captureElementTree(this.page, "body", {
-            x: 0, y: 0, width: this.width, height: this.height,
-        });
+    /**
+     * Shared post-capture pipeline (DM-1434): self-contained remote-image
+     * embedding + optional resize + conic-gradient rasterization, then reset the
+     * generation-scoped caches and render the tree to SVG body markup at `height`.
+     * `captureCurrent` (viewport) and `captureFullPage` (scrollable) differ only in
+     * the height, so they both funnel through here.
+     */
+    async renderCapturedTree(tree, height, idPrefix) {
         if (this.selfContained)
             await embedRemoteImages(tree, {
                 timeoutMs: this.embedRemoteImagesTimeoutMs,
@@ -143,12 +145,21 @@ export class DemoRecorder {
         // tree contains no conic content; otherwise the renderer (DM-550) emits
         // <pattern><image href="data:..."/></pattern> instead of dropping the layer.
         await rasterizeConicGradients(tree, { hiDPIFactor: this.embedRemoteImagesHiDPIFactor });
-        // DM-839: reset the embedded-font builder so this capture's `@font-face`
-        // block contains only its own fonts (the renderer repopulates it during
-        // elementTreeToSvg, which emits the CSS into this frame's <defs>).
-        clearEmbeddedFonts();
-        clearGlyphDefs(); // DM-1338: glyph registry (paths mode) shares the per-generation lifecycle
-        return elementTreeToSvgInner(tree, this.width, this.height, idPrefix, true, this.embedRemoteImagesHiDPIFactor ?? 2);
+        // DM-839/DM-1338/DM-1435: reset the generation-scoped caches (embedded-font
+        // builder + paths-mode glyph registry) so this capture's `@font-face` block /
+        // <defs> contain only its own fonts/glyphs (the renderer repopulates them
+        // during elementTreeToSvg, emitting into this frame's <defs>).
+        resetGeneration();
+        return elementTreeToSvgInner(tree, this.width, height, idPrefix, true, this.embedRemoteImagesHiDPIFactor ?? 2);
+    }
+    /** Capture the current page state as SVG content. */
+    async captureCurrent(idPrefix = "") {
+        if (this.page == null)
+            throw new Error("Call init() first");
+        const tree = await captureElementTree(this.page, "body", {
+            x: 0, y: 0, width: this.width, height: this.height,
+        });
+        return this.renderCapturedTree(tree, this.height, idPrefix);
     }
     /**
      * Capture a full-page (scrollable) DOM as SVG.
@@ -161,20 +172,7 @@ export class DemoRecorder {
         const tree = await captureElementTree(this.page, "body", {
             x: 0, y: 0, width: this.width, height: pageHeight,
         });
-        if (this.selfContained)
-            await embedRemoteImages(tree, {
-                timeoutMs: this.embedRemoteImagesTimeoutMs,
-                retries: this.embedRemoteImagesRetries,
-                retryBackoffMs: this.embedRemoteImagesRetryBackoffMs,
-            });
-        if (this.selfContained && this.embedRemoteImagesResize) {
-            await resizeEmbeddedImages(tree, { hiDPIFactor: this.embedRemoteImagesHiDPIFactor });
-        }
-        // DM-549: rasterize conic-gradient layers — see captureCurrent above.
-        await rasterizeConicGradients(tree, { hiDPIFactor: this.embedRemoteImagesHiDPIFactor });
-        clearEmbeddedFonts(); // DM-839: see captureCurrent
-        clearGlyphDefs(); // DM-1338: glyph registry shares the per-generation lifecycle
-        const svgContent = elementTreeToSvgInner(tree, this.width, pageHeight, idPrefix, true, this.embedRemoteImagesHiDPIFactor ?? 2);
+        const svgContent = await this.renderCapturedTree(tree, pageHeight, idPrefix);
         return { svgContent, pageHeight };
     }
     /** Get the underlying Playwright page for custom interactions. */
@@ -1010,23 +1008,18 @@ function clampClipToBounds(rect, viewport, boundW, boundH) {
  */
 async function rasterizeReplacedElements(page, tree, viewport, opts) {
     const targets = [];
-    const walk = (els) => {
-        for (const el of els) {
-            if (el.replacedSnapshot != null) {
-                const rs = el.replacedSnapshot;
-                targets.push({
-                    rid: rs.rid,
-                    tag: el.tag,
-                    rect: { x: rs.x, y: rs.y, width: rs.width, height: rs.height },
-                    setDataUri: (uri) => { rs.dataUri = uri; },
-                    setRect: (x, y, w, h) => { rs.x = x; rs.y = y; rs.width = w; rs.height = h; },
-                });
-            }
-            if (el.children.length > 0)
-                walk(el.children);
+    forEachElement(tree, (el) => {
+        if (el.replacedSnapshot != null) {
+            const rs = el.replacedSnapshot;
+            targets.push({
+                rid: rs.rid,
+                tag: el.tag,
+                rect: { x: rs.x, y: rs.y, width: rs.width, height: rs.height },
+                setDataUri: (uri) => { rs.dataUri = uri; },
+                setRect: (x, y, w, h) => { rs.x = x; rs.y = y; rs.width = w; rs.height = h; },
+            });
         }
-    };
-    walk(tree);
+    });
     if (targets.length === 0)
         return;
     // DM-562: custom elements (hyphenated tag — DM-511 routed them through
@@ -1278,16 +1271,11 @@ export async function calibrateBaselines(page, elements, pngBytes) {
     // Flatten the tree into a list of text-bearing elements with stable keys
     const flat = [];
     let counter = 0;
-    const walk = (els) => {
-        for (const e of els) {
-            if ((e.text != null && e.text !== "") && e.textTop != null && e.textWidth != null && e.textWidth > 0 && e.textHeight != null && e.textHeight > 0) {
-                flat.push({ key: `c${counter++}`, el: e });
-            }
-            if (e.children != null && e.children.length > 0)
-                walk(e.children);
+    forEachElement(elements, (e) => {
+        if ((e.text != null && e.text !== "") && e.textTop != null && e.textWidth != null && e.textWidth > 0 && e.textHeight != null && e.textHeight > 0) {
+            flat.push({ key: `c${counter++}`, el: e });
         }
-    };
-    walk(elements);
+    });
     if (flat.length === 0)
         return;
     const items = flat.map((f) => ({

package/dist/capture/initial-letter-probe.js

@@ -29,22 +29,18 @@
  */
 import sharp from "sharp";
 import { clipRectForScreenshot } from "./clip-rect.js";
+import { forEachElement } from "../tree-ops/for-each-element.js";
 export async function refineInitialLetterPositions(page, tree, viewport) {
     const jobs = [];
-    const walk = (els) => {
-        for (const el of els) {
-            if (el.textSegments != null) {
-                for (const seg of el.textSegments) {
-                    const probe = seg._initialLetterProbe;
-                    if (probe != null)
-                        jobs.push({ seg, probe });
-                }
+    forEachElement(tree, (el) => {
+        if (el.textSegments != null) {
+            for (const seg of el.textSegments) {
+                const probe = seg._initialLetterProbe;
+                if (probe != null)
+                    jobs.push({ seg, probe });
             }
-            if (el.children.length > 0)
-                walk(el.children);
         }
-    };
-    walk(tree);
+    });
     if (jobs.length === 0)
         return;
     for (const { seg, probe } of jobs) {