domotion-svg 0.2.2 → 0.3.2

package/dist/render/embedded-font-builder.d.ts

@@ -0,0 +1,49 @@
+/**
+ * One path command from fontkit. Mirrors fontkit's internal `Path.commands[]`
+ * shape so callers can hand the raw fontkit output across without converting.
+ *
+ *   moveTo (x, y)
+ *   lineTo (x, y)
+ *   quadraticCurveTo (cx, cy, x, y)
+ *   bezierCurveTo (c1x, c1y, c2x, c2y, x, y)
+ *   closePath ()
+ */
+export interface PathCommand {
+    command: string;
+    args: number[];
+}
+/**
+ * Reset per-composition state. Call alongside `clearEmbeddedFonts` at the
+ * start of every `composeScrollSvg` / `elementTreeToSvg` invocation so
+ * glyphs from a prior composition don't leak into the new one.
+ */
+export declare function clearEmbeddedFontBuilder(): void;
+/**
+ * Record that a glyph is used by the current composition and return its
+ * placement coordinates: which CSS family to reference and which PUA
+ * codepoint to emit in the `<text>` content.
+ *
+ * Idempotent on (`instanceKey`, `glyphId`): repeated calls return the same
+ * cssFamily + puaCodepoint, so the same glyph can be referenced many times
+ * across the SVG and collapses to a single entry in the custom font.
+ *
+ * `instanceKey` must be stable per (font, axes-tuple). Two text runs that
+ * resolve to "Inter Variable" at `wght=450 opsz=30` share an instance key;
+ * a third run at `wght=540 opsz=24` gets its own.
+ */
+export declare function trackGlyphInEmbedFont(instanceKey: string, unitsPerEm: number, ascender: number, descender: number, glyphId: number, pathCommands: PathCommand[], advanceWidth: number, variant?: {
+    italic: boolean;
+    weight: number;
+}): {
+    cssFamily: string;
+    puaCodepoint: number;
+} | null;
+/**
+ * Serialise every tracked custom font as `@font-face` rules with embedded
+ * TTF bytes. Returns the joined CSS ready to drop into the SVG's `<style>`
+ * block. Empty string when no glyphs were registered.
+ */
+export declare function getBuiltEmbeddedFontFaceCss(): string;
+/** Test-only: inspect builder state for assertions. */
+export declare function _builderRegistrySize(): number;
+export declare function _builderGlyphsFor(instanceKey: string): number;

package/dist/render/embedded-font-builder.js

@@ -0,0 +1,149 @@
+// DM-655: build custom standalone TTFs from extracted glyph outlines so the
+// embedded-font render mode can emit `<text>` against any font Chrome paints
+// with — webfonts, system fonts, variable-axis instances — not just CDN-
+// fetched webfonts. Each tracked font becomes one `@font-face` whose `src:`
+// is a `data:font/ttf;base64,…` URI containing JUST the glyphs the SVG uses,
+// at their captured outlines and advances.
+//
+// Glyph addressing: every shaped glyph is assigned a sequential PUA codepoint
+// (U+E000+). The `<text>` we emit contains the PUA stream, NOT the original
+// codepoints — so the consumer browser performs zero shaping / kerning /
+// ligature substitution and renders each glyph at its declared advance.
+// fontkit already did the shaping at capture time, so this preserves
+// contextual joining (Arabic init/medi/fina), ligatures (fi, ffi), and
+// cluster reordering (Devanagari i-matra) without us having to ship any
+// GSUB/GPOS rules in the custom font.
+// opentype.js ships no type declarations; declare the minimal surface we
+// use so callers stay strict-typed at the boundary.
+import opentype from "opentype.js";
+const ot = opentype;
+const builderRegistry = new Map();
+let builderIdCounter = 0;
+/** PUA-A block: U+E000..U+F8FF (6400 codepoints). Plenty for typical SVGs. */
+const PUA_START = 0xE000;
+const PUA_END = 0xF8FF;
+/**
+ * Reset per-composition state. Call alongside `clearEmbeddedFonts` at the
+ * start of every `composeScrollSvg` / `elementTreeToSvg` invocation so
+ * glyphs from a prior composition don't leak into the new one.
+ */
+export function clearEmbeddedFontBuilder() {
+    builderRegistry.clear();
+    builderIdCounter = 0;
+}
+/**
+ * Record that a glyph is used by the current composition and return its
+ * placement coordinates: which CSS family to reference and which PUA
+ * codepoint to emit in the `<text>` content.
+ *
+ * Idempotent on (`instanceKey`, `glyphId`): repeated calls return the same
+ * cssFamily + puaCodepoint, so the same glyph can be referenced many times
+ * across the SVG and collapses to a single entry in the custom font.
+ *
+ * `instanceKey` must be stable per (font, axes-tuple). Two text runs that
+ * resolve to "Inter Variable" at `wght=450 opsz=30` share an instance key;
+ * a third run at `wght=540 opsz=24` gets its own.
+ */
+export function trackGlyphInEmbedFont(instanceKey, unitsPerEm, ascender, descender, glyphId, pathCommands, advanceWidth, variant = { italic: false, weight: 400 }) {
+    let entry = builderRegistry.get(instanceKey);
+    if (entry == null) {
+        entry = {
+            cssFamily: `dmf${builderIdCounter++}`,
+            unitsPerEm,
+            ascender,
+            descender,
+            glyphs: new Map(),
+            puaForGlyphId: new Map(),
+            nextPua: PUA_START,
+            italic: variant.italic,
+            weight: variant.weight,
+        };
+        builderRegistry.set(instanceKey, entry);
+    }
+    const cached = entry.puaForGlyphId.get(glyphId);
+    if (cached != null)
+        return { cssFamily: entry.cssFamily, puaCodepoint: cached };
+    if (entry.nextPua > PUA_END) {
+        // Out of PUA-A slots. Caller falls through to paths-mode emission for
+        // this glyph; the (rare) over-6400-glyph case keeps rendering, just
+        // without the embedded-font fast path for the run that exceeded.
+        return null;
+    }
+    const pua = entry.nextPua++;
+    entry.puaForGlyphId.set(glyphId, pua);
+    const otPath = new ot.Path();
+    for (const cmd of pathCommands) {
+        switch (cmd.command) {
+            case "moveTo":
+                otPath.moveTo(cmd.args[0], cmd.args[1]);
+                break;
+            case "lineTo":
+                otPath.lineTo(cmd.args[0], cmd.args[1]);
+                break;
+            case "quadraticCurveTo":
+                otPath.quadraticCurveTo(cmd.args[0], cmd.args[1], cmd.args[2], cmd.args[3]);
+                break;
+            case "bezierCurveTo":
+                otPath.curveTo(cmd.args[0], cmd.args[1], cmd.args[2], cmd.args[3], cmd.args[4], cmd.args[5]);
+                break;
+            case "closePath":
+                otPath.close();
+                break;
+        }
+    }
+    entry.glyphs.set(glyphId, new ot.Glyph({
+        name: `g${glyphId}`,
+        unicode: pua,
+        advanceWidth,
+        path: otPath,
+    }));
+    return { cssFamily: entry.cssFamily, puaCodepoint: pua };
+}
+/**
+ * Serialise every tracked custom font as `@font-face` rules with embedded
+ * TTF bytes. Returns the joined CSS ready to drop into the SVG's `<style>`
+ * block. Empty string when no glyphs were registered.
+ */
+export function getBuiltEmbeddedFontFaceCss() {
+    if (builderRegistry.size === 0)
+        return "";
+    const rules = [];
+    for (const entry of builderRegistry.values()) {
+        // Glyph 0 must be .notdef per OpenType spec — opentype.js enforces this
+        // by adding the first glyph as .notdef. Provide an empty .notdef so any
+        // codepoint the consumer might query that we DIDN'T embed (shouldn't
+        // happen in practice since we emit only PUA codepoints we registered)
+        // renders as a zero-width invisible glyph rather than tofu.
+        const notdef = new ot.Glyph({
+            name: ".notdef",
+            unicode: 0,
+            advanceWidth: Math.round(entry.unitsPerEm / 2),
+            path: new ot.Path(),
+        });
+        const allGlyphs = [notdef, ...entry.glyphs.values()];
+        const font = new ot.Font({
+            familyName: entry.cssFamily,
+            styleName: "Regular",
+            unitsPerEm: entry.unitsPerEm,
+            ascender: entry.ascender,
+            descender: entry.descender,
+            glyphs: allGlyphs,
+        });
+        const ttfBytes = Buffer.from(font.toArrayBuffer());
+        const b64 = ttfBytes.toString("base64");
+        // Emit explicit font-style / font-weight descriptors so the consumer
+        // browser matches this @font-face EXACTLY when the `<text>` element
+        // requests italic / bold. Without these the rule defaults to
+        // `font-style: normal; font-weight: 400` and Chromium synthesizes faux
+        // italic / faux bold on top of glyphs whose italic / bold shape is
+        // already baked into the custom TTF.
+        const styleDesc = entry.italic ? "italic" : "normal";
+        rules.push(`@font-face { font-family: "${entry.cssFamily}"; font-style: ${styleDesc}; font-weight: ${entry.weight}; src: url("data:font/ttf;base64,${b64}"); }`);
+    }
+    return rules.join("\n");
+}
+/** Test-only: inspect builder state for assertions. */
+export function _builderRegistrySize() { return builderRegistry.size; }
+export function _builderGlyphsFor(instanceKey) {
+    return builderRegistry.get(instanceKey)?.glyphs.size ?? 0;
+}

package/dist/render/form-controls.js

@@ -757,28 +757,41 @@ function renderDatePicker(el, indent) {
     const parts = [];
     const t = el.styles.inputType ?? "date";
     const val = el.styles.inputValue ?? "";
+    // DM-723: Chrome's UA stylesheet sets date/time/month/week/datetime-local
+    // inputs to `font-family: monospace; font-size: ~13.333px` (small-control
+    // form-control metric). Read the captured font-size so we match Chrome's
+    // resolved metric instead of an under-scaled 11px literal — the previous
+    // hardcoded size emitted glyphs noticeably narrower than the expected paint.
+    const fontSize = parseFloat(el.styles.fontSize ?? "") || 13.333;
     const tx = el.x + 6;
-    const ty = el.y + el.height / 2 + 4;
+    const ty = el.y + el.height / 2 + fontSize * 0.35;
+    // DM-731: pick up the input's resolved color so the value text matches
+    // the active color-scheme. Hardcoding `rgb(0,0,0)` made dark-mode date
+    // inputs render with invisible black text on a dark background. Falls
+    // back to black when the capture didn't supply a color.
+    const textFill = (el.styles.color != null && el.styles.color !== "")
+        ? el.styles.color
+        : "rgb(0,0,0)";
     // Chrome renders date inputs with an en-US-formatted display value: dates
     // as MM/DD/YYYY, times as hh:mm AM/PM, etc. The captured `inputValue` is
     // the canonical ISO form (`2026-04-21`). DM-263.
     const display = formatDateInputDisplay(t, val);
     if (display !== "") {
-        // Chrome paints date input values in a tabular monospaced face; we route
-        // through the system mono fallback so the segments don't kern.
-        parts.push(`${indent}<text x="${r(tx)}" y="${r(ty)}" font-size="11" font-family="ui-monospace, Menlo, monospace" fill="rgb(0,0,0)">${display.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]))}</text>`);
+        parts.push(`${indent}<text x="${r(tx)}" y="${r(ty)}" font-size="${r(fontSize)}" font-family="ui-monospace, Menlo, monospace" fill="${textFill}">${display.replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]))}</text>`);
     }
     // Picker icon on the right edge: calendar for date / month / week / datetime-local,
     // clock for time. Chrome paints these monochrome at ~14px in the input's
     // line-height. DM-263.
+    // DM-731: pass the input's text color through so the icon picks up the
+    // dark-mode color (was hardcoded to TRACK_FG light-mode constant).
     const cx = el.x + el.width - 12;
     const cy = el.y + el.height / 2;
     const iconSize = Math.min(11, el.height - 6);
     if (t === "time") {
-        parts.push(renderClockIcon(indent, cx, cy, iconSize));
+        parts.push(renderClockIcon(indent, cx, cy, iconSize, textFill));
     }
     else {
-        parts.push(renderCalendarIcon(indent, cx, cy, iconSize));
+        parts.push(renderCalendarIcon(indent, cx, cy, iconSize, textFill));
     }
     return parts.join("\n");
 }
@@ -837,19 +850,21 @@ function formatDateInputDisplay(type, val) {
     }
     return val;
 }
-function renderCalendarIcon(indent, cx, cy, size) {
+function renderCalendarIcon(indent, cx, cy, size, strokeOverride) {
     // Simple calendar glyph: rounded rect with two top "binders" and a grid line.
     const w = size;
     const h = size;
     const x = cx - w / 2;
     const y = cy - h / 2;
-    const stroke = TRACK_FG;
+    // DM-731: caller supplies the stroke color so the icon picks up the
+    // active color-scheme (was hardcoded to the light-mode `TRACK_FG`).
+    const stroke = strokeOverride ?? TRACK_FG;
     return `${indent}<g fill="none" stroke="${stroke}" stroke-width="1" stroke-linecap="round"><rect x="${r(x + 0.5)}" y="${r(y + 1.5)}" width="${r(w - 1)}" height="${r(h - 2)}" rx="1" /><line x1="${r(x + 0.5)}" y1="${r(y + 4)}" x2="${r(x + w - 0.5)}" y2="${r(y + 4)}" /><line x1="${r(x + 3)}" y1="${r(y + 0.5)}" x2="${r(x + 3)}" y2="${r(y + 2.5)}" /><line x1="${r(x + w - 3)}" y1="${r(y + 0.5)}" x2="${r(x + w - 3)}" y2="${r(y + 2.5)}" /></g>`;
 }
-function renderClockIcon(indent, cx, cy, size) {
+function renderClockIcon(indent, cx, cy, size, strokeOverride) {
     // Simple clock glyph: circle with two hands.
     const r1 = size / 2;
-    const stroke = TRACK_FG;
+    const stroke = strokeOverride ?? TRACK_FG;
     return `${indent}<g fill="none" stroke="${stroke}" stroke-width="1" stroke-linecap="round"><circle cx="${r(cx)}" cy="${r(cy)}" r="${r(r1 - 0.5)}" /><line x1="${r(cx)}" y1="${r(cy)}" x2="${r(cx)}" y2="${r(cy - r1 * 0.55)}" /><line x1="${r(cx)}" y1="${r(cy)}" x2="${r(cx + r1 * 0.4)}" y2="${r(cy)}" /></g>`;
 }
 /**
@@ -1120,24 +1135,30 @@ function renderDetailsMarker(el, indent) {
     // previous 0.6em multiplier produced a triangle that read visibly small
     // vs Chrome's painted output.
     const size = Math.max(8, fontSizePx * 0.7);
-    const lineH = parseFloat(el.styles.lineHeight ?? "") || fontSizePx * 1.5;
-    // Position: marker sits inside the summary at its content-start, which
-    // is el.x + paddingL + borderL. Offset by half the marker size so the
-    // glyph's center sits ~half-marker-width past the summary's left edge,
-    // matching Chrome's painted offset (DM-448).
+    // DM-746: prefer the captured <summary> child's actual y / height when
+    // available — that's the line box Chrome paints the marker into. The
+    // previous fallback computed `cy` from `el.y + paddingT + borderT +
+    // lineH/2` with `lineH = parseFloat(lineHeight) || fontSize*1.5`, which
+    // overshoots by ~3 px when lineHeight is "normal" (Chrome's "normal"
+    // resolves to ~1.15× fontSize via the font's intrinsic ascent+descent
+    // +linegap, not the 1.5× literal). The drift was visible as a downward
+    // shift of the disclosure triangle on `niche-command-invokers`.
+    const summaryChild = el.children?.find((c) => c.tag === "summary");
     const padL = parseFloat(el.styles.paddingLeft ?? "") || 0;
     const brL = parseFloat(el.styles.borderLeftWidth ?? "") || 0;
     const padT = parseFloat(el.styles.paddingTop ?? "") || 0;
     const brT = parseFloat(el.styles.borderTopWidth ?? "") || 0;
-    const cx = el.x + padL + brL + size / 2;
-    // Vertical center: the summary is the first child of <details>; its
-    // first line-box top sits at el.y + paddingTop + borderTop, and its
-    // center is half a line-height below that. The previous `cy = el.y +
-    // lineH/2` ignored the details element's own padding/border, leaving
-    // the triangle painted ~paddingTop pixels above where Chrome paints
-    // it (DM-448 user feedback: 'disclosure arrow positions still
-    // incorrect').
-    const cy = el.y + padT + brT + lineH / 2;
+    // Position: marker sits inside the summary at its content-start, which
+    // is el.x + paddingL + borderL. Offset by half the marker size so the
+    // glyph's center sits ~half-marker-width past the summary's left edge,
+    // matching Chrome's painted offset (DM-448).
+    const cx = (summaryChild != null ? summaryChild.x : el.x + padL + brL) + size / 2;
+    // Vertical center: the summary is the first child of <details>; use its
+    // captured line-box center when available. Fallback computes from the
+    // details' padding/border + a corrected line-height ratio.
+    const cy = summaryChild != null
+        ? summaryChild.y + summaryChild.height / 2
+        : el.y + padT + brT + (parseFloat(el.styles.lineHeight ?? "") || fontSizePx * 1.15) / 2;
     const open = el.styles.detailsOpen === true;
     // Use the summary's text color when captured, else dark gray.
     const fill = (el.styles.color != null && el.styles.color !== "")

package/dist/render/gradients.d.ts

@@ -104,6 +104,21 @@ export interface ConicGradient {
 export type AnyGradient = LinearGradient | RadialGradient | ConicGradient;
 /** Try every supported gradient type. Returns the first that parses or null. */
 export declare function parseGradient(text: string | undefined | null): AnyGradient | null;
+/**
+ * Normalize legacy `-webkit-gradient(linear, ...)` syntax (still emitted by
+ * Chromium's computed-style serializer for old CSS that uses it — e.g. the
+ * Slashdot mobile header) into the modern `linear-gradient(...)` form so the
+ * regular parser can consume it. Returns null when the input isn't a legacy
+ * linear webkit-gradient.
+ *
+ * Grammar (legacy):
+ *   -webkit-gradient(linear, <p1>, <p2>, from(<c>), [color-stop(<pos>, <c>)...], to(<c>))
+ * where <pN> is either a percentage pair `0% 0%` or a side keyword pair like
+ * `left top` / `right bottom`. Only axis-aligned cases (vertical / horizontal)
+ * are handled — diagonal legacy-syntax gradients are rare and would need a
+ * separate angle solve.
+ */
+export declare function convertLegacyWebkitGradient(text: string | undefined | null): string | null;
 /** Parse `linear-gradient(...)` or `repeating-linear-gradient(...)` text. */
 export declare function parseLinearGradient(text: string | undefined | null): LinearGradient | null;
 /**

package/dist/render/gradients.js

@@ -14,7 +14,108 @@
  */
 /** Try every supported gradient type. Returns the first that parses or null. */
 export function parseGradient(text) {
-    return parseLinearGradient(text) ?? parseRadialGradient(text) ?? parseConicGradient(text);
+    const normalized = convertLegacyWebkitGradient(text) ?? text;
+    return parseLinearGradient(normalized) ?? parseRadialGradient(normalized) ?? parseConicGradient(normalized);
+}
+/**
+ * Normalize legacy `-webkit-gradient(linear, ...)` syntax (still emitted by
+ * Chromium's computed-style serializer for old CSS that uses it — e.g. the
+ * Slashdot mobile header) into the modern `linear-gradient(...)` form so the
+ * regular parser can consume it. Returns null when the input isn't a legacy
+ * linear webkit-gradient.
+ *
+ * Grammar (legacy):
+ *   -webkit-gradient(linear, <p1>, <p2>, from(<c>), [color-stop(<pos>, <c>)...], to(<c>))
+ * where <pN> is either a percentage pair `0% 0%` or a side keyword pair like
+ * `left top` / `right bottom`. Only axis-aligned cases (vertical / horizontal)
+ * are handled — diagonal legacy-syntax gradients are rare and would need a
+ * separate angle solve.
+ */
+export function convertLegacyWebkitGradient(text) {
+    if (text == null)
+        return null;
+    const trimmed = text.trim();
+    const m = /^-webkit-gradient\s*\(\s*linear\s*,\s*([\s\S]+)\)\s*$/i.exec(trimmed);
+    if (m == null)
+        return null;
+    const parts = splitTopLevelCommas(m[1]).map((t) => t.trim()).filter((t) => t !== "");
+    if (parts.length < 4)
+        return null;
+    const p1 = parsePointToFracPair(parts[0]);
+    const p2 = parsePointToFracPair(parts[1]);
+    if (p1 == null || p2 == null)
+        return null;
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    // Only axis-aligned axes (vertical or horizontal). Skip diagonal cases.
+    let angleDeg;
+    if (Math.abs(dx) < 1e-6 && Math.abs(dy) > 1e-6) {
+        angleDeg = dy > 0 ? 180 : 0;
+    }
+    else if (Math.abs(dy) < 1e-6 && Math.abs(dx) > 1e-6) {
+        angleDeg = dx > 0 ? 90 : 270;
+    }
+    else {
+        return null;
+    }
+    const stopExprs = [];
+    for (let i = 2; i < parts.length; i++) {
+        const t = parts[i];
+        const fromMatch = /^from\s*\(\s*([\s\S]+?)\s*\)\s*$/i.exec(t);
+        const toMatch = /^to\s*\(\s*([\s\S]+?)\s*\)\s*$/i.exec(t);
+        const csMatch = /^color-stop\s*\(\s*([^,]+)\s*,\s*([\s\S]+?)\s*\)\s*$/i.exec(t);
+        if (fromMatch != null) {
+            stopExprs.push(`${fromMatch[1].trim()} 0%`);
+        }
+        else if (toMatch != null) {
+            stopExprs.push(`${toMatch[1].trim()} 100%`);
+        }
+        else if (csMatch != null) {
+            const pos = csMatch[1].trim();
+            // CSS color-stop accepts a 0..1 number or a percentage; normalize to %.
+            const pct = /^[0-9.]+%$/.test(pos) ? pos : `${parseFloat(pos) * 100}%`;
+            stopExprs.push(`${csMatch[2].trim()} ${pct}`);
+        }
+        else {
+            return null;
+        }
+    }
+    if (stopExprs.length < 2)
+        return null;
+    return `linear-gradient(${angleDeg}deg, ${stopExprs.join(", ")})`;
+}
+/**
+ * Parse a legacy webkit-gradient point token like `0% 0%`, `left top`, or
+ * `right bottom` into fractional 0..1 coordinates. Returns null on diagonal
+ * or unrecognised inputs (caller fails fast in that case).
+ */
+function parsePointToFracPair(tok) {
+    const lower = tok.toLowerCase().trim();
+    // Keyword form: "left top", "right", "center bottom", etc.
+    const KW = { left: 0, top: 0, center: 0.5, right: 1, bottom: 1 };
+    const words = lower.split(/\s+/);
+    if (words.length > 0 && words.every((w) => w in KW)) {
+        // Determine which keyword maps to x vs y. "top/bottom" → y, "left/right" → x.
+        let x = 0.5, y = 0.5;
+        for (const w of words) {
+            if (w === "left" || w === "right")
+                x = KW[w];
+            else if (w === "top" || w === "bottom")
+                y = KW[w];
+            else if (w === "center") { /* leave default */ }
+        }
+        return { x, y };
+    }
+    // Percentage / pixel pair: "0% 0%", "50% 100%".
+    const m = /^([\d.]+)(%|px)\s+([\d.]+)(%|px)$/.exec(lower);
+    if (m != null) {
+        const ux = m[2] === "%" ? parseFloat(m[1]) / 100 : NaN;
+        const uy = m[4] === "%" ? parseFloat(m[3]) / 100 : NaN;
+        if (Number.isFinite(ux) && Number.isFinite(uy))
+            return { x: ux, y: uy };
+        // px-pair: can't resolve without rect dims. Skip — uncommon in real CSS.
+    }
+    return null;
 }
 /** Parse `linear-gradient(...)` or `repeating-linear-gradient(...)` text. */
 export function parseLinearGradient(text) {
@@ -709,7 +810,7 @@ function resolveStops(stops, gradientLineLength, opts) {
 function tileRepeatingStops(stops) {
     if (stops.length < 2)
         return stops;
-    const sorted = stops.filter((s) => s.offset != null);
+    const sorted = stops.filter((s) => typeof s.offset === "number" && Number.isFinite(s.offset));
     if (sorted.length < 2)
         return stops;
     const tileStart = sorted[0].offset;

package/dist/render/gradients.test.js

@@ -1,5 +1,39 @@
 import { describe, expect, it } from "vitest";
 import { buildLinearGradientDef, parseConicGradient, parseGradient, parseLinearGradient } from "./gradients.js";
+describe("convertLegacyWebkitGradient: legacy -webkit-gradient(linear, ...)", () => {
+    it("vertical top-to-bottom from()/to() form (slashdot mobile header)", () => {
+        // Slashdot's mobile header background, as Chromium serializes it.
+        const g = parseGradient("-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)))");
+        expect(g).not.toBeNull();
+        expect(g.kind).toBe("linear");
+        const lg = g;
+        expect(lg.angleDeg).toBe(180);
+        expect(lg.stops).toHaveLength(2);
+        expect(lg.stops[0].color).toBe("rgb(0, 0, 0)");
+        expect(lg.stops[0].offset).toBe(0);
+        expect(lg.stops[1].color).toBe("rgb(32, 32, 32)");
+        expect(lg.stops[1].offset).toBe(1);
+    });
+    it("horizontal with side keyword endpoints", () => {
+        const g = parseGradient("-webkit-gradient(linear, left top, right top, from(red), to(blue))");
+        expect(g).not.toBeNull();
+        expect(g.kind).toBe("linear");
+        expect(g.angleDeg).toBe(90);
+    });
+    it("intermediate color-stop() entries pass through", () => {
+        const g = parseGradient("-webkit-gradient(linear, 0% 0%, 0% 100%, from(red), color-stop(0.5, green), to(blue))");
+        expect(g).not.toBeNull();
+        const lg = g;
+        expect(lg.stops).toHaveLength(3);
+        expect(lg.stops[1].color).toBe("green");
+        expect(lg.stops[1].offset).toBe(0.5);
+    });
+    it("diagonal legacy webkit-gradient is skipped (returns null)", () => {
+        // Diagonal endpoints aren't axis-aligned; rare in real CSS — we don't
+        // try to solve a general angle from the endpoint pair.
+        expect(parseGradient("-webkit-gradient(linear, 0% 0%, 100% 100%, from(red), to(blue))")).toBeNull();
+    });
+});
 describe("parseLinearGradient: repeating support (DM-275)", () => {
     it("parses repeating-linear-gradient with the repeating flag set", () => {
         const g = parseLinearGradient("repeating-linear-gradient(90deg, red 0%, blue 10%)");

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

@@ -39,6 +39,17 @@ interface FontInstance {
         yStrikeoutSize?: number;
     };
 }
+export type RenderTextMode = "paths" | "embedded-font";
+export declare function setRenderTextMode(mode: RenderTextMode): void;
+export declare function getRenderTextMode(): RenderTextMode;
+export declare function clearEmbeddedFonts(): void;
+/**
+ * Emit one `@font-face` rule per font the embedded-font path registered
+ * during this render pass. Returns the CSS to inject into the SVG's
+ * `<style>` block (or `<defs><style>`). Empty string when no fonts were
+ * registered (e.g. `renderText: "paths"`).
+ */
+export declare function getEmbeddedFontFaceCss(): string;
 /**
  * Open a webfont buffer with fontkit and register it under the given family
  * name (case-insensitive). `weight` is a CSS numeric weight (100-900); 400
@@ -210,7 +221,16 @@ features?: string[],
  *  (PingFang TC / HK / MO, or Hiragino Kaku for `ja`). DM-394. */
 lang?: string, 
 /** Author-set `font-variation-settings` axis overrides. DM-578. */
-variationSettings?: Record<string, number>): string | null;
+variationSettings?: Record<string, number>, 
+/** DM-719: `-webkit-text-stroke-width` (px). When > 0, the emitted text
+ *  group gets a `stroke` attribute so each glyph paints with an outline. */
+textStrokeWidth?: number, 
+/** DM-719: `-webkit-text-stroke-color`. Required when `textStrokeWidth > 0`. */
+textStrokeColor?: string, 
+/** DM-719: `paint-order` (e.g. "stroke fill"). When `stroke fill`, the
+ *  stroke paints UNDER the fill so half the stroke is covered, eliminating
+ *  the chunky fill-on-stroke look at large widths. */
+paintOrder?: string): string | null;
 /**
  * Check if text-to-path conversion is available for a font family.
  */
@@ -263,6 +283,23 @@ underlineOffsetCss?: string): DecorationMetrics;
  * below baseline). Returns `[]` when font isn't resolvable, no glyphs cross
  * the rect, or shaping throws. (DM-446.)
  */
+/**
+ * Measure the right-side-bearing (rsb) of the last non-whitespace glyph in
+ * `text` when shaped through fontkit at the given font / size / weight /
+ * style. rsb = `advanceWidth − bbox.maxX`, in CSS px (already scaled by
+ * `fontSize / unitsPerEm`).
+ *
+ * Used by the list-marker emit path (DM-790): SVG `<text text-anchor="end">`
+ * places the anchor at the last glyph's advance-end, not its visible-right
+ * edge. To land the visible right at the target (Chromium's `el.x − 7` per
+ * `kCMarkerPaddingPx`), we have to shift the anchor right by `rsb`.
+ *
+ * Returns 0 when the font isn't resolvable, when shaping fails, when the
+ * text is empty / whitespace-only, or when the last glyph has no bbox. The
+ * built-in marker path's previous empirical 3 px offset for `.` is now
+ * font-metric-derived through this helper too.
+ */
+export declare function measureLastGlyphRsb(text: string, fontSize: number, fontFamily: string, fontWeight: string | number, fontStyle?: string): number;
 export declare function computeSkipInkGaps(text: string, fontSize: number, fontFamily: string, fontWeight: string | number, fontStyle?: string, decorationCenterYRel?: number, decorationThickness?: number, features?: string[], 
 /** Chromium-measured run width — when set, intercepts are scaled to match
  *  so gaps line up with the painted glyph positions even when fontkit's