nodality 1.0.193 → 1.0.195

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.193
+ * nodality v1.0.195
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -1425,11 +1425,18 @@ function freezeViewportUnits(original, clone) {
  */
 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);
+    let img = null;
+    if (el.tagName === "IMG") {
+        img = el;
+    } else if (el.children) {
+        // Ignore the pipeline's own canvas: by the time a capture runs it has
+        // already been appended to the host, so a strict one-child test never
+        // matches and a wrapped photo falls back to the foreignObject path —
+        // which cannot fetch the image and captures blank.
+        const content = Array.prototype.filter.call(
+            el.children, (n) => !n.hasAttribute || !n.hasAttribute("data-nodality-raster"));
+        if (content.length === 1 && content[0].tagName === "IMG") img = content[0];
+    }
     if (!img || !img.complete || !img.naturalWidth) return null;
     try {
         // Relative and same-origin absolute srcs both resolve clean here.
@@ -1622,11 +1629,18 @@ function applyRasterPipeline(el, rasterNodes) {
     // Content-box measurement: some elements (fluid-sized Text) keep a
     // collapsed layout box while their glyphs overflow it, so fall back
     // to scroll dimensions when the rect is degenerate.
+    //
+    // The fallback is per-axis and only for a genuinely collapsed box. It
+    // used to be an unconditional max(rect, scroll), which cannot shrink:
+    // the canvas is a CHILD of the measured element, so once it has been
+    // sized up its own width holds scrollWidth at the old value, the max
+    // never comes down, and a host that is animating smaller (a hero
+    // collapsing as you scroll back up) leaves the canvas stuck wide.
     const measure = () => {
         const r = el.getBoundingClientRect();
         return {
-            width: Math.max(r.width, el.scrollWidth || 0),
-            height: Math.max(r.height, el.scrollHeight || 0),
+            width: r.width >= 2 ? r.width : (el.scrollWidth || 0),
+            height: r.height >= 2 ? r.height : (el.scrollHeight || 0),
         };
     };
     const rect = measure();
@@ -1954,12 +1968,20 @@ function applyRasterPipeline(el, rasterNodes) {
         const px = mouse[0] / canvas.width;
         const py = 1 - mouse[1] / canvas.height;
         let dx = 0, dy = 0;
-        if (s.primed) {
+        // Only a real pointer event counts as motion. `mouse` is stored in
+        // canvas pixels, so this normalised position also shifts whenever the
+        // canvas itself resizes or moves — an element being animated (a
+        // scroll-driven hero expanding) would otherwise inject phantom
+        // velocity every frame and stir itself with the pointer sitting
+        // still, or with the pointer nowhere near it.
+        if (s.primed && pointerMoved) {
             dx = (px - s.prevX) / Math.max(dt, 1e-3);
             dy = (py - s.prevY) / Math.max(dt, 1e-3);
         }
+        // Re-baseline regardless, so the frame after a resize does not
+        // measure its delta against a position from a different geometry.
         s.prevX = px; s.prevY = py; s.primed = true;
-        const moving = Math.abs(dx) + Math.abs(dy) > 1e-3;
+        const moving = pointerMoved && Math.abs(dx) + Math.abs(dy) > 1e-3;
 
         s.def.solver.step(S, s.node, {
             dt, px, py, dx, dy, moving,
@@ -2191,10 +2213,17 @@ function applyRasterPipeline(el, rasterNodes) {
     // Pointer -> u_mouse (listen on the host so the overlay stays
     // pointer-events: none).
     let mouse = [canvas.width * 0.5, canvas.height * 0.5];
+    // Set by a real pointer event, cleared once the solvers have consumed
+    // it. Stateful ops splat only while this is true, so nothing is stirred
+    // by the element resizing or scrolling under a stationary pointer.
+    let pointerMoved = false;
     const onMove = (e) => {
         const r = canvas.getBoundingClientRect();
         const pt = e.touches ? e.touches[0] : e;
-        mouse = [(pt.clientX - r.left) * dpr, (pt.clientY - r.top) * dpr];
+        const next = [(pt.clientX - r.left) * dpr, (pt.clientY - r.top) * dpr];
+        // Guard against move events that report the same position.
+        if (next[0] !== mouse[0] || next[1] !== mouse[1]) pointerMoved = true;
+        mouse = next;
     };
     el.addEventListener("mousemove", onMove, { passive: true });
     el.addEventListener("touchmove", onMove, { passive: true });
@@ -2240,6 +2269,10 @@ function applyRasterPipeline(el, rasterNodes) {
             // 1. Advance stateful fluid solvers into their own off-screen
             //    targets (this rebinds framebuffer/program/textures).
             for (const s of solverOps) stepSolver(s, dt);
+            // Consumed for this frame: a splat needs a fresh pointer event,
+            // not merely a pointer position that happens to differ because
+            // the canvas moved or resized beneath it.
+            pointerMoved = false;
 
             // 2. Composite pass, back on the visible framebuffer.
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -2306,15 +2339,30 @@ function applyRasterPipeline(el, rasterNodes) {
     // ResizeObserver, the window-resize fallback and the font-loading
     // recapture, so all three agree on what "resize the canvas" means.
     const remeasureAndCapture = () => {
-        if (destroyed || mode !== "snapshot") return;
+        if (destroyed) return;
         const m = measure();
+        if (m.width < 2 || m.height < 2) return;
+        const bw = Math.round(m.width * dpr);
+        const bh = Math.round(m.height * dpr);
         rect.width = m.width;
         rect.height = m.height;
-        canvas.width = Math.round(m.width * dpr);
-        canvas.height = Math.round(m.height * dpr);
         canvas.style.width = m.width + "px";
         canvas.style.height = m.height + "px";
-        snapshotCapture();
+        // Re-allocating the buffer clears it, so skip when it already matches
+        // — syncCanvasBox may have kept the CSS box in step without needing a
+        // new buffer at all.
+        const bufferStale = canvas.width !== bw || canvas.height !== bh;
+        if (bufferStale) {
+            canvas.width = bw;
+            canvas.height = bh;
+        }
+        if (mode === "snapshot") {
+            snapshotCapture();
+        } else if (bufferStale) {
+            // Live mode re-uploads from the DOM every paint, so it needs no
+            // recapture — only a fresh upload at the new buffer size.
+            onPaint();
+        }
     };
 
     // Match the canvas box to the host immediately, without recapturing.
@@ -2323,6 +2371,11 @@ function applyRasterPipeline(el, rasterNodes) {
     // being animated (a scroll-driven hero expanding every frame) would
     // otherwise render up to a debounce-interval behind its own layout —
     // the canvas visibly trailing the content it is drawn over.
+    // CSS size only. Assigning canvas.width/height re-allocates the drawing
+    // buffer and CLEARS it, so doing that per frame while an element is being
+    // animated makes the whole effect flash on every scroll step. The buffer
+    // is left to the debounced recapture below; stretching the existing one
+    // for a few frames costs a little sharpness and nothing else.
     const syncCanvasBox = () => {
         if (destroyed) return;
         const m = measure();
@@ -2333,8 +2386,6 @@ function applyRasterPipeline(el, rasterNodes) {
         rect.height = m.height;
         canvas.style.width = m.width + "px";
         canvas.style.height = m.height + "px";
-        canvas.width = Math.round(m.width * dpr);
-        canvas.height = Math.round(m.height * dpr);
     };
 
     if (typeof ResizeObserver !== "undefined") {

package/lib/scroll-video.js

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

package/lib/seo.js

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

package/lib/stacker.js

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

package/lib/theme.js

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

package/lib/transform-anim.js

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

package/package.json

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