nodality 1.0.190 → 1.0.192

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.190
+ * nodality v1.0.192
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -1407,7 +1407,41 @@ function freezeViewportUnits(original, clone) {
     return clone;
 }
 
+/**
+ * The single <img> a host renders, if that is all it is.
+ *
+ * A foreignObject rendered from a data: URI never fetches subresources, so
+ * any <img> inside the serialized subtree comes back blank — a photo host
+ * would capture as fully transparent. When the host is just an image we can
+ * skip serialization entirely and upload that image as the texture, which
+ * is both correct and considerably cheaper.
+ *
+ * Only same-origin, already-decoded images qualify: a cross-origin one
+ * would taint the canvas and break the readback the pipeline depends on.
+ */
+function soleImageOf(el) {
+    if (!el) return null;
+    const img = el.tagName === "IMG"
+        ? el
+        : (el.children && el.children.length === 1 && el.children[0].tagName === "IMG"
+            ? el.children[0]
+            : null);
+    if (!img || !img.complete || !img.naturalWidth) return null;
+    try {
+        // Relative and same-origin absolute srcs both resolve clean here.
+        if (new URL(img.currentSrc || img.src, location.href).origin !== location.origin) {
+            return null;
+        }
+    } catch (e) {
+        return null;
+    }
+    return img;
+}
+
 function snapshotToImage(el, w, h, dpr) {
+    const direct = soleImageOf(el);
+    if (direct) return Promise.resolve(direct);
+
     return new Promise((resolve, reject) => {
         const serialized = new XMLSerializer()
             .serializeToString(freezeViewportUnits(el, el.cloneNode(true)));
@@ -1476,6 +1510,67 @@ function resolveSwitches(nodes, depth) {
     return out;
 }
 
+// ── Replaced / void hosts ────────────────────────────────────────────
+//
+// Elements that cannot contain rendered children. Appending the pipeline
+// canvas to one of these puts it in the DOM but never paints it, so the
+// effect appears to attach and then does nothing at all.
+const VOID_RASTER_HOSTS = new Set([
+    "IMG", "VIDEO", "CANVAS", "IFRAME", "INPUT", "EMBED", "OBJECT",
+    "TEXTAREA", "SELECT", "BR", "HR", "AREA", "SOURCE", "TRACK", "WBR",
+]);
+
+// Styles that describe the element's CONTENT rather than its box, and so
+// must stay on the element when its box moves to the wrapper.
+const CONTENT_STYLES = [
+    "objectFit", "objectPosition", "borderRadius", "imageRendering", "filter",
+];
+
+/**
+ * Put `el` inside a container that can host the pipeline canvas.
+ *
+ * The wrapper takes over the element's authored inline box — position,
+ * insets, size, margins — so layout is unchanged, and the element is reset
+ * to fill it. Inline styles are moved rather than computed values copied:
+ * copying computed width/height would freeze a fluid element at whatever
+ * pixel size it happened to have at attach time.
+ *
+ * @returns {HTMLElement|null} the wrapper, or null if `el` has no parent.
+ */
+function wrapReplacedHost(el) {
+    if (!el.parentNode) return null;
+
+    const keep = {};
+    for (const k of CONTENT_STYLES) {
+        if (el.style[k]) keep[k] = el.style[k];
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("data-nodality-raster-host", el.tagName.toLowerCase());
+    wrap.style.cssText = el.style.cssText;
+
+    el.parentNode.insertBefore(wrap, el);
+    wrap.appendChild(el);
+
+    // The wrapper is now the box; the element fills it.
+    el.removeAttribute("style");
+    Object.assign(el.style, keep);
+    el.style.display = "block";
+    el.style.width = "100%";
+    el.style.height = "100%";
+
+    // The canvas is positioned against the wrapper, so it needs to be a
+    // containing block.
+    const pos = typeof getComputedStyle === "function"
+        ? getComputedStyle(wrap).position
+        : "static";
+    if (pos === "static") wrap.style.position = "relative";
+    if (!wrap.style.width) wrap.style.width = "100%";
+    if (!wrap.style.height) wrap.style.height = "100%";
+
+    return wrap;
+}
+
 // ── Pipeline runner ──────────────────────────────────────────────────
 
 function applyRasterPipeline(el, rasterNodes) {
@@ -1501,6 +1596,21 @@ function applyRasterPipeline(el, rasterNodes) {
     if (typeof window.matchMedia === "function" &&
         window.matchMedia("(prefers-reduced-motion: reduce)").matches) return null;
 
+    // The pipeline hosts its canvas as a child of the target. Replaced and
+    // void elements cannot take children — appending to an <img> puts the
+    // canvas in the tree but never renders it, so the effect silently does
+    // nothing. Wrap such a target in a container and host there instead.
+    if (VOID_RASTER_HOSTS.has(el.tagName)) {
+        const existing =
+            el.parentElement &&
+            el.parentElement.hasAttribute &&
+            el.parentElement.hasAttribute("data-nodality-raster-host")
+                ? el.parentElement
+                : null;
+        el = existing || wrapReplacedHost(el);
+        if (!el) return null;
+    }
+
     // One pipeline per host element (set() chains can fire more than
     // once across codegen instances; only the mounted one matters).
     if (el.querySelector && el.querySelector(":scope > canvas[data-nodality-raster]")) return null;

package/lib/scroll-video.js

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

package/lib/seo.js

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

package/lib/stacker.js

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

package/lib/theme.js

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

package/lib/transform-anim.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.0.190",
+  "version": "1.0.192",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",