nodality 1.3.6 → 1.3.8

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -2526,6 +2526,11 @@ ${defaultSeam}
 // computes, on a clone, so the snapshot matches the live layout.
 const VIEWPORT_UNIT = /\d(?:vw|vh|vmin|vmax|dvw|dvh|svw|svh|lvw|lvh)\b/i;
 
+// Text metrics that must reach the snapshot as pixels. Anything relative here
+// gives the foreignObject a chance to resolve it against its own box instead of
+// the page — see part 1b of freezeStyles.
+const FROZEN_LENGTHS = ["font-size", "line-height", "letter-spacing", "word-spacing"];
+
 // Inheritable text properties. A foreignObject rendered from a data: URI
 // carries NO page stylesheet, and a clone carries only inline styles — so
 // anything a rule or an ancestor supplied is gone. Nodality's own
@@ -2570,8 +2575,8 @@ function freezeStyles(original, clone) {
         //    5vw)` renders at a different size than it does on the page.
         //    The glyphs then sit somewhere the DOM text does not, which
         //    is what makes a selection highlight look offset.
+        let computed = null;
         if (inline.length > 0) {
-            let computed = null;
             // Iterate a snapshot of the names: writing to style mutates the list.
             for (const prop of Array.from(inline)) {
                 if (!VIEWPORT_UNIT.test(inline.getPropertyValue(prop))) continue;
@@ -2581,6 +2586,28 @@ function freezeStyles(original, clone) {
             }
         }
 
+        // 1b. Text lengths are frozen to pixels ALWAYS, whatever unit they were
+        //     written in and whether or not they were set inline.
+        //
+        //     The sweep above only rewrites a declaration whose own inline text
+        //     matches VIEWPORT_UNIT. That misses every other way a length can
+        //     resolve differently inside the foreignObject: `rem` against a root
+        //     that is not the page's root, `em` down an ancestor chain the clone
+        //     no longer has, and — the case that prompted this — a `clamp()` whose
+        //     chosen branch depends on a viewport the SVG does not share. A
+        //     headline written `clamp(2.4rem, 4.6vw, 3.4rem)` came out at a
+        //     fraction of its size on a phone while looking correct in desktop
+        //     device emulation, because the two resolve that clamp differently.
+        //
+        //     Computed values are already absolute pixels, so this cannot change
+        //     what the page shows; it only removes the chance for the SVG to
+        //     recompute something the page had already decided.
+        for (const prop of FROZEN_LENGTHS) {
+            computed = computed || window.getComputedStyle(origs[i]);
+            const px = computed.getPropertyValue(prop);
+            if (px && px !== "normal") inline.setProperty(prop, px);
+        }
+
         // 2. Inherited text styling, which the clone would otherwise lose.
         const cs = window.getComputedStyle(origs[i]);
         const parent = origs[i].parentElement;
@@ -2721,27 +2748,249 @@ function fitImageToBox(img, w, h, dpr) {
     return c;
 }
 
+// ── Web fonts inside the snapshot ────────────────────────────────────
+//
+// A foreignObject rendered from a data: URI fetches NO subresources. An
+// @font-face whose src is a URL therefore never loads inside the capture, and
+// the text draws in whatever family the SVG can resolve locally — the page's
+// own web font is simply not among them. Recapturing on document.fonts.ready
+// does not help: the font is ready on the PAGE, never inside the snapshot.
+//
+// The only way the real typeface reaches the capture is to carry the bytes in
+// with it, so the faces the subtree actually uses are fetched once, base64'd,
+// and emitted as an inline <style> ahead of the serialized markup.
+//
+// Everything here degrades to "no embedded font" rather than failing the
+// capture: a cross-origin stylesheet that refuses CORS, a font host that does
+// the same, an offline reload — each ends with the previous behaviour, which is
+// a fallback typeface, not a broken image.
+
+/** Absolute font URL -> `data:` URI, or null when it could not be fetched. */
+const FONT_DATA_CACHE = new Map();
+
+/** Parsed @font-face rules for the document, resolved once. */
+let FACE_RULES = null;
+
+const FACE_BLOCK = /@font-face\s*{[^}]*}/gi;
+const FACE_FAMILY = /font-family\s*:\s*(['"]?)([^;'"]+)\1/i;
+const FACE_WEIGHT = /font-weight\s*:\s*([^;]+)/i;
+const FACE_STYLE = /font-style\s*:\s*([^;]+)/i;
+const FACE_SRC_URL = /url\((['"]?)([^)'"]+)\1\)/gi;
+const FACE_RANGE = /unicode-range\s*:\s*([^;}]+)/i;
+
+/**
+ * Does this face cover any character the capture actually contains?
+ *
+ * A provider splits one family into a subset per script — Google ships seven for
+ * Inter — so embedding every subset for every weight in use put well over half a
+ * megabyte of base64 into a single snapshot. Only the subsets the text actually
+ * lands in are worth carrying. A face that declares no range covers everything
+ * and is always kept.
+ */
+function faceCoversText(range, text) {
+    if (!range) return true;
+    const spans = [];
+    for (const part of range.split(",")) {
+        const m = /U\+([0-9a-fA-F?]+)(?:-([0-9a-fA-F]+))?/.exec(part.trim());
+        if (!m) continue;
+        if (m[1].indexOf("?") !== -1) {
+            spans.push([parseInt(m[1].replace(/\?/g, "0"), 16),
+                        parseInt(m[1].replace(/\?/g, "F"), 16)]);
+        } else {
+            const lo = parseInt(m[1], 16);
+            spans.push([lo, m[2] ? parseInt(m[2], 16) : lo]);
+        }
+    }
+    if (!spans.length) return true;
+    for (const ch of text) {
+        const cp = ch.codePointAt(0);
+        for (let i = 0; i < spans.length; i++) {
+            if (cp >= spans[i][0] && cp <= spans[i][1]) return true;
+        }
+    }
+    return false;
+}
+
+function parseFaces(cssText, baseUrl) {
+    const out = [];
+    for (const block of cssText.match(FACE_BLOCK) || []) {
+        const fam = FACE_FAMILY.exec(block);
+        if (!fam) continue;
+        const urls = [];
+        let m;
+        FACE_SRC_URL.lastIndex = 0;
+        while ((m = FACE_SRC_URL.exec(block))) {
+            try { urls.push(new URL(m[2], baseUrl).href); } catch (e) { /* skip */ }
+        }
+        if (!urls.length) continue;
+        out.push({
+            family: fam[2].trim().toLowerCase(),
+            weight: (FACE_WEIGHT.exec(block) || [, "400"])[1].trim(),
+            style: (FACE_STYLE.exec(block) || [, "normal"])[1].trim(),
+            range: (FACE_RANGE.exec(block) || [, ""])[1].trim(),
+            block,
+            urls,
+        });
+    }
+    return out;
+}
+
+async function collectFaceRules() {
+    if (FACE_RULES) return FACE_RULES;
+    const faces = [];
+    for (const sheet of Array.from(document.styleSheets || [])) {
+        // Same-origin sheets can be read directly. A cross-origin one throws on
+        // cssRules, so it is fetched instead — Google Fonts and the like serve
+        // their CSS with permissive CORS, and anything that does not simply
+        // contributes no faces.
+        let rules = null;
+        try { rules = sheet.cssRules; } catch (e) { rules = null; }
+        if (rules) {
+            for (const rule of Array.from(rules)) {
+                if (rule.constructor && rule.constructor.name === "CSSFontFaceRule") {
+                    faces.push(...parseFaces(rule.cssText, sheet.href || location.href));
+                }
+            }
+        } else if (sheet.href) {
+            try {
+                const res = await fetch(sheet.href, { mode: "cors" });
+                if (res.ok) faces.push(...parseFaces(await res.text(), sheet.href));
+            } catch (e) { /* no faces from this sheet */ }
+        }
+    }
+    FACE_RULES = faces;
+    return faces;
+}
+
+async function asDataUri(url) {
+    if (FONT_DATA_CACHE.has(url)) return FONT_DATA_CACHE.get(url);
+    let uri = null;
+    try {
+        const res = await fetch(url, { mode: "cors" });
+        if (res.ok) {
+            const buf = new Uint8Array(await res.arrayBuffer());
+            let bin = "";
+            for (let i = 0; i < buf.length; i++) bin += String.fromCharCode(buf[i]);
+            const type = url.endsWith(".woff2") ? "font/woff2"
+                : url.endsWith(".woff") ? "font/woff" : "font/ttf";
+            uri = `data:${type};base64,${btoa(bin)}`;
+        }
+    } catch (e) { uri = null; }
+    FONT_DATA_CACHE.set(url, uri);
+    return uri;
+}
+
+/** The (family, weight, style) triples this subtree actually renders in. */
+function usedFaces(el) {
+    const seen = new Map();
+    for (const node of [el, ...el.querySelectorAll("*")]) {
+        const cs = window.getComputedStyle(node);
+        const first = (cs.fontFamily || "").split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+        if (!first) continue;
+        const key = `${first.toLowerCase()}|${cs.fontWeight}|${cs.fontStyle}`;
+        if (!seen.has(key)) {
+            seen.set(key, { family: first.toLowerCase(), weight: cs.fontWeight, style: cs.fontStyle });
+        }
+    }
+    return Array.from(seen.values());
+}
+
+async function embeddedFontCss(el) {
+    let faces;
+    try { faces = await collectFaceRules(); } catch (e) { return ""; }
+    if (!faces.length) return "";
+
+    const wanted = usedFaces(el);
+    const text = el.textContent || "";
+    const chosen = faces.filter((f) => faceCoversText(f.range, text) && wanted.some((u) =>
+        u.family === f.family &&
+        (f.style === u.style || f.style === "normal") &&
+        // Google emits one face per weight; a variable face states a range and
+        // is kept for every weight that asks for the family.
+        (f.weight === String(u.weight) || /\s/.test(f.weight))));
+    if (!chosen.length) return "";
+
+    const parts = [];
+    for (const face of chosen) {
+        // First url that actually comes back — the list is a preference order.
+        let uri = null;
+        for (const u of face.urls) {
+            uri = await asDataUri(u);
+            if (uri) break;
+        }
+        if (!uri) continue;
+        parts.push(
+            `@font-face{font-family:'${face.family}';font-style:${face.style};` +
+            `font-weight:${face.weight};src:url(${uri});}`);
+    }
+    return parts.join("");
+}
+
 function snapshotToImage(el, w, h, dpr) {
     const direct = soleImageOf(el);
     if (direct) return Promise.resolve(fitImageToBox(direct, w, h, dpr));
 
-    return new Promise((resolve, reject) => {
+    // The font CSS is resolved before serialising. It is cached after the first
+    // capture, so only the very first snapshot on a page pays for the fetch, and
+    // a failure returns "" and leaves the previous fallback behaviour intact.
+    return embeddedFontCss(el).catch(() => "").then((fontCss) => new Promise((resolve, reject) => {
         const serialized = new XMLSerializer()
             .serializeToString(freezeStyles(el, el.cloneNode(true)));
+        // The SVG carries NO scaling at all — it is emitted at CSS size, 1:1.
+        //
+        // Engines do not agree about scaling foreignObject content: mobile Chrome and
+        // Safari apply neither a viewBox ratio nor an ancestor transform to the HTML
+        // subtree, so content laid out at `w x h` stayed `w x h` in the top-left of a
+        // `w*dpr` canvas. Reading the uploaded texture back off the GPU on a dpr-3
+        // phone showed exactly that: a 1101x369 texture with its ink confined to the
+        // first 367x123. The same SVG looked correct in an <img> sized to 367 CSS px,
+        // because there the unscaled content happened to fill the box — which is what
+        // made this look like a compositing bug for so long.
+        //
+        // So the SVG is rasterised at the size its contents are laid out for, and the
+        // dpr upscale is done by drawImage below, where the destination rectangle is
+        // stated outright and no engine has an opinion. High-dpr output is a touch
+        // softer than a native-resolution rasterisation would be; correct everywhere
+        // beats crisp on the machines that happened to agree with us.
         const svg =
-            `<svg xmlns="http://www.w3.org/2000/svg" width="${w * dpr}" height="${h * dpr}" viewBox="0 0 ${w} ${h}">` +
+            `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">` +
             `<foreignObject width="100%" height="100%">` +
-            `<div xmlns="http://www.w3.org/1999/xhtml">${serialized}</div>` +
+            `<div xmlns="http://www.w3.org/1999/xhtml">` +
+            (fontCss ? `<style>${fontCss}</style>` : "") +
+            `${serialized}</div>` +
             `</foreignObject></svg>`;
         // createElement, NOT `new Image()` — this library exports a
         // component named `Image`, and consumers publish the exports onto
         // globalThis. Where they do, the DOM constructor is gone and this
         // promise never settles: the snapshot backend hangs with no error.
         const img = document.createElement("img");
-        img.onload = () => resolve(img);
+        img.onload = () => {
+            // Rasterise into a canvas of exactly the size we asked for, and hand
+            // THAT to the caller.
+            //
+            // texImage2D takes an image's INTRINSIC size, and engines disagree about
+            // what that is for an SVG: desktop Chrome honours the width/height
+            // attributes (w*dpr), while mobile Chrome and Safari take it from the
+            // viewBox (w). On a phone the texture therefore arrived at 1/dpr scale
+            // and the effect painted its content into the top-left corner of its own
+            // canvas — the headline came out about a third of its size, while every
+            // measurement of the box, the SVG and the CSS looked perfectly correct.
+            //
+            // Drawing with an explicit destination rectangle makes the size ours
+            // instead of theirs, so the texture matches the backing store on every
+            // engine. This mirrors what fitImageToBox already does for the
+            // sole-image fast path.
+            const c = document.createElement("canvas");
+            c.width = Math.max(1, Math.round(w * dpr));
+            c.height = Math.max(1, Math.round(h * dpr));
+            const ctx = c.getContext("2d");
+            if (!ctx) { resolve(img); return; }
+            ctx.drawImage(img, 0, 0, c.width, c.height);
+            resolve(c);
+        };
         img.onerror = reject;
         img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
-    });
+    }));
 }
 
 // ── switch: pick a sub-chain by condition ────────────────────────────

package/lib/raster-presets.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/resolve-refs.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/scroll-video.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/seo.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/stacker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/suggest.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/theme.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/transform-anim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/transition.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/validate-nodes.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/lib/webmcp-adapter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.6
+ * nodality v1.3.8
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "nodality",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "bin": {
-    "nodality": "bin/nodality.js"
+    "nodality": "bin/nodality.mjs"
   },
   "files": [
     "lib/",