domotion-svg 0.3.2 → 0.4.1

package/dist/animation/animator.d.ts

@@ -155,6 +155,13 @@ export interface AnimationConfig {
      * them in every frame's local defs.
      */
     sharedDefs?: string;
+    /**
+     * DM-839: embedded-font `@font-face` rules collected once across all frames
+     * (the caller renders each frame with `includeEmbeddedFontCss=false` and
+     * passes the accumulated `getEmbeddedFontFaceCss()` here). Injected into the
+     * top-level `<style>` so the base64 font bytes appear once, not per frame.
+     */
+    fontFaceCss?: string;
     /**
      * Optional cursor / click overlay (DM-277). Renders a macOS-style cursor
      * moving along the script timeline with QuickTime-style click pulses.

package/dist/animation/animator.js

@@ -222,7 +222,7 @@ export function generateAnimatedSvg(config) {
     <clipPath id="viewport-clip"><rect width="${width}" height="${height}" /></clipPath>${sharedDefsMarkup}
   </defs>
   <style>
-    :root { --scene-dur: ${totalSec.toFixed(2)}s; }
+${config.fontFaceCss != null && config.fontFaceCss !== "" ? config.fontFaceCss + "\n" : ""}    :root { --scene-dur: ${totalSec.toFixed(2)}s; }
     .f { opacity: 0; visibility: hidden; }
     ${keyframes.join("\n")}${animationCss}${cullCss === "" ? "" : "\n" + cullCss}
   </style>
@@ -444,7 +444,7 @@ function composeMergedSvg(config, frameTiming, totalSec) {
     <clipPath id="viewport-clip"><rect width="${width}" height="${height}" /></clipPath>${sharedDefsMarkup}
   </defs>
   <style>
-    :root { --scene-dur: ${totalSec.toFixed(2)}s; }
+${config.fontFaceCss != null && config.fontFaceCss !== "" ? config.fontFaceCss + "\n" : ""}    :root { --scene-dur: ${totalSec.toFixed(2)}s; }
 ${css}${animationCss}${cullCss === "" ? "" : "\n" + cullCss}
   </style>
   <g clip-path="url(#viewport-clip)">

package/dist/capture/index.js

@@ -10,7 +10,7 @@ import { elementTreeToSvg } 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 { registerLocalFontAlias, registerWebfont } from "../render/text-to-path.js";
+import { clearEmbeddedFonts, registerLocalFontAlias, registerWebfont } from "../render/text-to-path.js";
 import { CAPTURE_SCRIPT } from "./script.generated.js";
 import { rasterizeBitmapGlyphs } from "./emoji.js";
 import { _resetLastCaptureWarnings } from "./warnings.js";
@@ -141,6 +141,10 @@ 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();
         return elementTreeToSvg(tree, this.width, this.height, idPrefix, true, this.embedRemoteImagesHiDPIFactor ?? 2);
     }
     /**
@@ -165,6 +169,7 @@ export class DemoRecorder {
         }
         // DM-549: rasterize conic-gradient layers — see captureCurrent above.
         await rasterizeConicGradients(tree, { hiDPIFactor: this.embedRemoteImagesHiDPIFactor });
+        clearEmbeddedFonts(); // DM-839: see captureCurrent
         const svgContent = elementTreeToSvg(tree, this.width, pageHeight, idPrefix, true, this.embedRemoteImagesHiDPIFactor ?? 2);
         return { svgContent, pageHeight };
     }

package/dist/cli/animate.js

@@ -8,7 +8,7 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { parseArgs } from "node:util";
-import { captureElementTree, clearWebfonts, composeScrollSvg, cullElementsOutsideViewBox, elementTreeToSvg, executeScrollPattern, generateAnimatedSvg, launchChromium, optimizeSvg, parseScrollPattern, } from "../index.js";
+import { captureElementTree, clearEmbeddedFonts, clearWebfonts, composeScrollSvg, cullElementsOutsideViewBox, elementTreeToSvg, executeScrollPattern, generateAnimatedSvg, getEmbeddedFontFaceCss, launchChromium, optimizeSvg, parseScrollPattern, } from "../index.js";
 import { attachWebfontTracker, discoverAndRegisterWebfonts } from "../capture/index.js";
 import { applyReadyWaits, isSvgzPath, loadInputIntoPage, makeLogger, resolveOutputPath, timed, writeOutput, } from "./common.js";
 export async function runAnimate(args, help) {
@@ -61,6 +61,11 @@ export async function runAnimate(args, help) {
         // same registry. Multiple frames declaring the same family register
         // multiple variants and the resolver picks the closest weight/style.
         clearWebfonts();
+        // DM-839: embedded-font is the default render mode. Reset the builder once
+        // here; each frame renders with includeEmbeddedFontCss=false (below) and we
+        // collect the deduped @font-face block once into the animator's top-level
+        // <style> after the loop — so the base64 font bytes appear once, not per frame.
+        clearEmbeddedFonts();
         // One tracker for the whole animate run — fonts fetched by any frame
         // get accumulated, and we deduplicate URLs inside discoverAndRegister.
         const tracker = attachWebfontTracker(page);
@@ -156,7 +161,7 @@ export async function runAnimate(args, help) {
                 const totalDurationMs = cfg.frames.reduce((sum, f) => sum + f.duration + (f.transition?.type === "cut" ? 0 : (f.transition?.duration ?? 300)), 0);
                 const result = cullElementsOutsideViewBox(tree, cfg.width, cfg.height, resolvedAnimations, frameStartMs, totalDurationMs);
                 frameCullCss = result.css;
-                svgContent = elementTreeToSvg(tree, cfg.width, cfg.height, `f${i}-`);
+                svgContent = elementTreeToSvg(tree, cfg.width, cfg.height, `f${i}-`, true, 2, false);
             }
             // Resolve SVG-kind overlays: read each `src` from disk, namespace its
             // ids, and replace with `innerSvg`. Other overlay kinds pass through
@@ -172,7 +177,10 @@ export async function runAnimate(args, help) {
             });
         }
         tracker.detach();
-        let svg = await timed(log, `Composed animated SVG (${cfg.frames.length} frames)`, () => Promise.resolve(generateAnimatedSvg({ width: cfg.width, height: cfg.height, frames })));
+        // DM-839: collect the embedded-font @font-face rules accumulated across all
+        // frames once, for the animator's top-level <style>.
+        const fontFaceCss = getEmbeddedFontFaceCss();
+        let svg = await timed(log, `Composed animated SVG (${cfg.frames.length} frames)`, () => Promise.resolve(generateAnimatedSvg({ width: cfg.width, height: cfg.height, frames, fontFaceCss })));
         // svgz is auto-detected from the output filename; implies --optimize
         // unless --no-optimize was passed.
         const outputArg = values.output ?? cfg.output;

package/dist/cli/capture.js

@@ -6,7 +6,7 @@
  * scroll machinery.
  */
 import { parseArgs } from "node:util";
-import { captureElementTree, clearWebfonts, composeScrollSvg, cullElementsOutsideViewBox, elementTreeToSvg, executeScrollPattern, launchChromium, logCaptureWarnings, optimizeSvg, parseScrollPattern, wrapSvg, } from "../index.js";
+import { captureElementTree, clearEmbeddedFonts, clearWebfonts, composeScrollSvg, cullElementsOutsideViewBox, elementTreeToSvg, executeScrollPattern, launchChromium, logCaptureWarnings, optimizeSvg, parseScrollPattern, wrapSvg, } from "../index.js";
 import { attachWebfontTracker, discoverAndRegisterWebfonts } from "../capture/index.js";
 import { applyReadyWaits, isSvgzPath, loadInputIntoPage, makeLogger, parseColorScheme, parseIntFlag, parseTuple, resolveOutputPath, timed, writeOutput, } from "./common.js";
 export async function runCapture(args, help) {
@@ -139,6 +139,7 @@ export async function runCapture(args, help) {
             // so this is a defense-in-depth pass for the position:fixed-descendant
             // escape cases where an off-viewport ancestor still gets captured.
             cullElementsOutsideViewBox(tree, clip[2], clip[3], undefined, 0, 1);
+            clearEmbeddedFonts(); // DM-839: reset embedded-font builder before this single-frame render
             const inner = elementTreeToSvg(tree, clip[2], clip[3]);
             svg = wrapSvg(inner, clip[2], clip[3]);
         }

package/dist/render/element-tree-to-svg.d.ts

@@ -67,7 +67,17 @@ includeGlyphDefs?: boolean,
  * `resizeEmbeddedImages` for the same tree, or the lookup misses and
  * the renderer falls back to the source-resolution data URI. Default 2.
  */
-hiDPIFactor?: number): string;
+hiDPIFactor?: number, 
+/**
+ * DM-839: when true, emit the embedded-font `@font-face` rules
+ * (`getEmbeddedFontFaceCss()`) as a `<style>` inside this frame's `<defs>`.
+ * Defaults to `includeGlyphDefs` — single-frame standalone producers
+ * (capture, CLI, the test harness) own their top-level defs and so should
+ * carry their font CSS here. Multi-frame producers (animator, scroll
+ * composer) pass `false` and collect the CSS once at the top level instead,
+ * so the (potentially large) base64 font bytes aren't duplicated per frame.
+ */
+includeEmbeddedFontCss?: boolean): string;
 /**
  * Rewrite a captured `<mask>` element's `outerHTML` so it can be safely
  * inlined in the output SVG's `<defs>`. The mask's own `id` becomes

package/dist/render/element-tree-to-svg.js

@@ -4,7 +4,7 @@
  * Uses Playwright to inspect DOM elements and recreate them as native SVG.
  */
 import { renderSingleLineText, renderMultiSegmentText, renderMultiLineText, renderInputText } from "./text.js";
-import { getGlyphDefs, measureLastGlyphRsb } from "./text-to-path.js";
+import { getEmbeddedFontFaceCss, getGlyphDefs, measureLastGlyphRsb } from "./text-to-path.js";
 import { renderFormControl } from "./form-controls.js";
 import { r, esc, stopFmt } from "./format.js";
 import { parseColor, colorStr, sameColor } from "./colors.js";
@@ -104,7 +104,17 @@ includeGlyphDefs = true,
  * `resizeEmbeddedImages` for the same tree, or the lookup misses and
  * the renderer falls back to the source-resolution data URI. Default 2.
  */
-hiDPIFactor = 2) {
+hiDPIFactor = 2, 
+/**
+ * DM-839: when true, emit the embedded-font `@font-face` rules
+ * (`getEmbeddedFontFaceCss()`) as a `<style>` inside this frame's `<defs>`.
+ * Defaults to `includeGlyphDefs` — single-frame standalone producers
+ * (capture, CLI, the test harness) own their top-level defs and so should
+ * carry their font CSS here. Multi-frame producers (animator, scroll
+ * composer) pass `false` and collect the CSS once at the top level instead,
+ * so the (potentially large) base64 font bytes aren't duplicated per frame.
+ */
+includeEmbeddedFontCss = includeGlyphDefs) {
     setActiveHiDPIFactor(hiDPIFactor);
     const svgParts = [];
     const defsParts = [];
@@ -2956,7 +2966,13 @@ hiDPIFactor = 2) {
     // `getEmbeddedFontFaceCss()` themselves once at the top level (see how
     // `composeScrollSvg` injects it into the outer <style>).
     const glyphDefsMarkup = includeGlyphDefs ? getGlyphDefs() : "";
-    const allDefs = defsParts.join("") + glyphDefsMarkup;
+    // DM-839: embedded-font `@font-face` rules for the text runs rendered above
+    // (empty in paths mode, or when no run was embeddable). A `<style>` inside
+    // `<defs>` is valid SVG. Single-frame producers emit it here; multi-frame
+    // producers pass includeEmbeddedFontCss=false and inject once at the top.
+    const embeddedFontCss = includeEmbeddedFontCss ? getEmbeddedFontFaceCss() : "";
+    const fontStyleMarkup = embeddedFontCss !== "" ? `<style>${embeddedFontCss}</style>` : "";
+    const allDefs = defsParts.join("") + glyphDefsMarkup + fontStyleMarkup;
     const defs = allDefs !== "" ? `  <defs>${allDefs}</defs>\n` : "";
     return defs + svgParts.join("\n");
 }

package/dist/render/index.d.ts

@@ -1,2 +1,2 @@
 export { elementTreeToSvg, wrapSvg, } from "./element-tree-to-svg.js";
-export { getGlyphDefs, clearGlyphDefs, registerWebfont, clearWebfonts, } from "./text-to-path.js";
+export { getGlyphDefs, clearGlyphDefs, registerWebfont, clearWebfonts, setRenderTextMode, getRenderTextMode, clearEmbeddedFonts, getEmbeddedFontFaceCss, type RenderTextMode, } from "./text-to-path.js";

package/dist/render/index.js

@@ -1,4 +1,8 @@
 // Render-side public surface. Pure functions that take a captured element
 // tree (or fragments of one) and emit SVG markup.
 export { elementTreeToSvg, wrapSvg, } from "./element-tree-to-svg.js";
-export { getGlyphDefs, clearGlyphDefs, registerWebfont, clearWebfonts, } from "./text-to-path.js";
+export { getGlyphDefs, clearGlyphDefs, registerWebfont, clearWebfonts, 
+// DM-839: embedded-font is the default render mode; expose the controls so
+// consumers can opt back into per-pixel-faithful `paths` mode and manage the
+// embedded-font lifecycle.
+setRenderTextMode, getRenderTextMode, clearEmbeddedFonts, getEmbeddedFontFaceCss, } from "./text-to-path.js";

package/dist/render/text-to-path.d.ts

@@ -109,6 +109,12 @@ export declare function __pickWebfontVariantMetaForCodepointForTest(family: stri
 /** Drop all registered webfonts. Call at the start of a fresh capture run. */
 export declare function clearWebfonts(): void;
 export declare function registerLocalFontAlias(family: string, resolvedKey: string, weight?: number, italic?: boolean): void;
+/** Test-only window into the platform path resolver (DM-258). */
+export declare function __resolveFontSpecForTest(key: string): {
+    path: string;
+    postscriptName?: string;
+    extractor?: string;
+} | null;
 /**
  * Ordered list of fallback font keys to try when the primary font lacks a
  * glyph for `codepoint`. Caller iterates the chain and picks the first font
@@ -139,7 +145,27 @@ export declare function registerLocalFontAlias(family: string, resolvedKey: stri
  *   "ja" / "ja-JP"    → hiragino-jp (PingFang has no JP subfont on macOS)
  */
 export declare function pingfangKeyForLang(lang: string | undefined): string | null;
+/**
+ * Linux fallback chain (DM-259) — calibrated to what Chromium-on-Linux paints
+ * in the Playwright `*-noble` CI image, measured via CDP
+ * `CSS.getPlatformFontsForNode` (tools/probe-fallbacks-linux.mjs). Returns
+ * logical keys that `LINUX_FONT_PATHS` maps to the image's real faces
+ * (Liberation / WenQuanYi / FreeFont / Loma / IPAGothic). As on macOS, the
+ * caller has already tried the primary font, so what reaches here is the
+ * residue the primary lacks. The comment after each branch names the face the
+ * probe showed Chromium using for that block.
+ */
+export declare function linuxFallbackChain(codepoint: number, primaryKey?: string, _lang?: string): string[];
 export declare function fallbackFontChain(codepoint: number, primaryKey?: string, lang?: string): string[];
+/**
+ * macOS (CoreText) fallback chain — reverse-engineered from Chromium-on-macOS
+ * painted widths (DM-241 / DM-256 / DM-257 / …). Exported so the macOS-
+ * calibration unit tests assert it directly: the suite runs on Linux in CI,
+ * where `fallbackFontChain` dispatches to `linuxFallbackChain`, so those tests
+ * must call this function (not `fallbackFontChain`) to validate macOS routing
+ * regardless of the host platform (DM-842).
+ */
+export declare function darwinFallbackChain(codepoint: number, primaryKey?: string, lang?: string): string[];
 /** @deprecated Single-key wrapper for back-compat — prefer `fallbackFontChain`. */
 export declare function fallbackFontKey(codepoint: number): string | null;
 export declare function resolveFontKey(fontFamily: string): string;