nodality 1.0.185 → 1.0.187

package/layout/text.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -23,7 +23,6 @@ class Text extends Animator {
 		this.react = [];
 		this.code.push(`new Text("${this.text}")`);
 		//console.log("15/12/25 cool");
-		console.log("26-01-26 11:12:00");
 	}
 
 
@@ -177,7 +176,6 @@ class Text extends Animator {
 		if (opts === undefined) {
 			return this;
 		}
-console.log("DEL");
 		const options = opts.op;
 		const breakpoint = opts.point;
 
@@ -324,8 +322,6 @@ console.log("DEL");
 
     // Line breaks
     html = html.replace(/\n/g, "<br>");
-console.log("HTML");
-console.log(html);
 
     return html;
   }
@@ -463,8 +459,6 @@ this.res.style.position = "absolute";
 
 
 		/*if (obj.transform){
-			console.warn("ARE DIFFERENT OBJS HERE?");
-			console.warn(obj.transform)
 		}*/
 		// Done by commonMethods
 		//obj.transform && this.reactOnTransform(obj.transform); // remove obj.op.duration
@@ -473,8 +467,6 @@ this.res.style.position = "absolute";
 			alert("P");
 		}*/
 
-		console.log("OGA");
-		console.log(obj);
 		
 		
 		this.callReact(obj);
@@ -552,8 +544,6 @@ this.res.style.position = "absolute";
 		}*/
 
 		// console.log("ARA IS " + arr);
-		console.log("ARA IS ");
-		console.log(arr);
 
 			this.chainReact(arr, this.options.id, keep);
 		}
@@ -1353,8 +1343,6 @@ checkForAnimation(queries){
 			el.setAttribute("id", obj.id);
 
 
-				console.log("ANIMAS");
-				console.log(obj);
 
 			if (obj.type === "span"){
 
@@ -1733,9 +1721,6 @@ checkForAnimation(queries){
 	render(div) {
 
 		/*console.log("FINAL CSS");
-		console.log(this.css[0].range);
-		console.log(this.css[0].rules);
-		console.log(this.elCSS);
 	*/
 
 		
@@ -1769,8 +1754,6 @@ checkForAnimation(queries){
 			}
 
 			if (this.looksLikeMarkdown(this.text)) {
-			console.log("See md"); // 224635 29/09/25
-			console.log(this.parseMarkdown(this.text));
       this.res.innerHTML = this.parseMarkdown(this.text);
     } 
 

package/layout/ulist.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -91,8 +91,6 @@ class UList extends Animator {
 		}*/
 
 		// console.log("ARA IS " + arr);
-		console.log("ARA IS ");
-		console.log(arr);
 
 			this.chainReact(arr, this.options.id, keep);
 		}

package/layout/video.js

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

package/layout/without-new.js

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

package/layout/wrap.js

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

package/layout/zoom-card.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -135,9 +135,6 @@ class ZoomCard extends Animator {
 	render(div) {
 
 		/*console.log("FINAL CSS");
-		console.log(this.css[0].range);
-		console.log(this.css[0].rules);
-		console.log(this.elCSS);
 	*/
 
 		

package/lib/card-getter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -7,8 +7,6 @@
 class CardGen {
 
     static cards(el, cardOption, storage) {
-        console.log("PP");
-        console.log(storage);
 
         let childStrings = [];
         for (var o = 0; o < el.children.length; o++) {
@@ -72,8 +70,6 @@ class CardGen {
            
            // Insert the text at the found index
            let result = inputString.slice(0, index) + ', ' + textToInsert + ', ' + inputString.slice(index);
-           console.log("RETA");
-           console.log(result);
            return result;
         } else {
            // If no match is found, return the original string

package/lib/data.js

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

package/lib/designer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -369,8 +369,6 @@ new Text("row.").set({
     nodes(arr) {
         this.options = arr;
         this.protoOptions = [...arr];
-        console.log(this.options);
-        console.log(this.protoOptions);
         return this;
     }
 
@@ -402,13 +400,8 @@ new Text("row.").set({
         this.elHTML = [];
 
         let customOptions = this.options;
-        console.log("COO");
-        console.log(customOptions);
 
 customOptions.forEach(item => {
-    console.log("mid")
-    console.log(item);
-    console.log("checking:", item.direction);
   if (item.direction === "radial" ) {
   //  alert("//")
     item.gradient = "radial-gradient(orange, green)";
@@ -563,10 +556,7 @@ customOptions.forEach(item => {
             ];
 
             /*console.log("OPS");
-            console.log(ops);
             
-            console.log("CUSTOM OPTIONS");
-            console.log(customOptions);
             */
 
 
@@ -621,7 +611,6 @@ customOptions.forEach(item => {
                 }
             }
 
-            console.warn(customOptions);
 
 
 
@@ -810,8 +799,6 @@ if (duration === "default"){
 if (/*q == i*/ true){ // 23:07.20 Nice!!!! 23:04 bef
     // 193615 Nice!!!
 //alert("MESS UP");
-console.log("DURA");
-console.log(duration);
 
                     customOptions[q].op = {
                         name: "transform",
@@ -837,8 +824,6 @@ console.log(duration);
                         delete customOptions[q].op[dur]; // remove in both logs, weird
                     }
 
-                    console.log("COQ");
-                    console.log(customOptions[q].op.values);
                     if (customOptions[q]?.op.values){
 
                  //   alert("P")
@@ -861,7 +846,6 @@ console.log(duration);
                 }
             } // for q = cycle end
 
-            console.log(`----------------------------LLL ${i} ${customOptions.length}`);
            
 
 
@@ -920,9 +904,7 @@ console.log(duration);
 
 replaceMedium(customOptions);
 
-            console.log("SENDING CUSTOM OPTIONS");
            
- console.log(customOptions);
 
             const matchEls = ["h1", "h2", "h3", "h4", "h5", "h6", "p"].includes(el.type) || el.type === "img" || el.type === "a";
            
@@ -973,9 +955,6 @@ replaceMedium(customOptions);
                     i: i,
                     storage: this.stor
                 });
-                console.log("S///");
-                console.log(ela);
-                     console.log(ela.toCode());
 
                 this.code.push(ela.toCode());
 
@@ -1153,15 +1132,10 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
                     i: i,
                     storage: this.stor
                 });
-                console.log("S///");
-                console.log(ela);
-                     console.log(ela.toCode());
 
                 this.code.push(ela.toCode());
 
             } else if (el.type === "cards") {
-                console.log("STORO");
-                console.log(this.stor);
                 ela = ElementMapper.mapType({
                     el: el,
                     customOptions: customOptions,
@@ -1365,8 +1339,6 @@ const components = {
 
         for (var i = 0; i < this.code.length; i++) {
             let sub = this.code[i];
-            console.log("SUBO");
-            console.log(sub);
             new Function(...Object.keys(components), sub)(...Object.values(components));
          //   eval(`${sub}`);
         }

package/lib/element-mapper.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -150,8 +150,6 @@ class ElementMapper { // 22:09:58 04/11/2024
 
 
          let el = obj.el;
-        console.log("///");
-        console.log(el);
 
     return new Table()
         .add([
@@ -195,8 +193,6 @@ class ElementMapper { // 22:09:58 04/11/2024
     static mapRow(obj){
 
         let el = obj.el;
-        console.log("///");
-        console.log(el);
 
 
        // return new Text("Hello").set({size: "S3"});
@@ -772,7 +768,6 @@ if (obj.el.dropdown){
           }
 
          const updatedLinks = removeKeyFromArray(links, "");
-          console.log(updatedLinks);
           */
 
           let shouldAnim = obj.el.animation;
@@ -1367,9 +1362,7 @@ let elo = new Polygon({ id: "hex" })
                 raster: this.filteroRaster(el.id, obj.customOptions),
   })
 
-  console.log(elo.code);
 
-  console.log(elo.toCode);
 
   return elo;
  }
@@ -1382,8 +1375,6 @@ let elo = new Polygon({ id: "hex" })
 
     
 
-console.warn("WHY DIFFER ATA TEXT (grad)");
-console.log(obj.customOptions);
 
 
         return new Text(el.text || el.value)
@@ -1504,8 +1495,6 @@ console.log(obj.customOptions);
 
 
     static mapGrid(obj){
-        console.log("OBJ IS");
-    console.log(obj.storage);
  let el = obj.el;
      let cardOption = obj.customOptions.find(l => l.op.name === "card-style") ?? {};
 

package/lib/keyframe-animation.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -244,10 +244,6 @@ if (cy < 0) cy = 0;
 if (cw > iw) cw = iw;
 if (ch > ih) ch = ih;
 
-console.log("WEIRD")
-console.log(img);
-console.log(cy);
-console.log(cw);
 // fill image in dest. rectangle
 ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
 }
@@ -271,7 +267,6 @@ maska(data){
 
     setupTopElement() {
     // If we scroll further after seeing topElement
-    console.warn("TOP INIT");
 
 
 
@@ -403,7 +398,6 @@ maska(data){
     
     
         /*   for (var i = 0; i <  this.h2a.children[0].children.length; i++){
-                console.log("P")
                 this.h2a.children[0].children[i].style.transform = `matrix(1, 0, 0, 1, 0, -${offset})`;
                 this.h2a.children[0].children[i].style.opacity = `${opacity - i * 0.2}`;
             }*/
@@ -604,7 +598,6 @@ maska(data){
     
     
             for (var i = 0; i <  this.h2a.children[0].children.length; i++){
-                console.log("P")
                 this.h2a.children[0].children[i].style.transform = `matrix(1, 0, 0, 1, 0, -${offset})`;
                 this.h2a.children[0].children[i].style.opacity = `${opacity - i * 0.2}`;
             }

package/lib/link-getter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -11,10 +11,6 @@ class LinkStyler {
         let el = obj.el;
         let re = obj.re;
 
-        console.log("OLESTE");
-        console.log(bst);
-        console.log(el);
-        console.log(re);
         let customOptions = obj.options;
         let links = [];
 
@@ -68,8 +64,6 @@ class LinkStyler {
                     }
                 }
 
-                console.log("OMESTE");
-                console.log(obj);
                 let split = bst[j].op.ops.split("-");
 
               //   re["color"] = //bst.op.style.color;

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -955,9 +955,38 @@ ${defaultSeam}
 
 // ── Snapshot backend: DOM subtree -> SVG foreignObject -> texture ────
 
+// Viewport-relative CSS inside a foreignObject resolves against the SVG
+// element's own size, not the browser viewport — so `font-size: calc(
+// 1.625rem + 5.075vw)` renders at a different size in the snapshot than
+// it does on the page. The glyphs then sit somewhere the DOM text does
+// not, which is what makes the selection highlight look offset.
+//
+// Freeze those declarations to the pixel values the element actually
+// 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;
+
+function freezeViewportUnits(original, clone) {
+    const origs = [original, ...original.querySelectorAll("*")];
+    const clones = [clone, ...clone.querySelectorAll("*")];
+    for (let i = 0; i < origs.length && i < clones.length; i++) {
+        const inline = clones[i].style;
+        if (!inline || inline.length === 0) continue;
+        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;
+            computed = computed || window.getComputedStyle(origs[i]);
+            const px = computed.getPropertyValue(prop);
+            if (px) inline.setProperty(prop, px, inline.getPropertyPriority(prop));
+        }
+    }
+    return clone;
+}
+
 function snapshotToImage(el, w, h, dpr) {
     return new Promise((resolve, reject) => {
-        const serialized = new XMLSerializer().serializeToString(el);
+        const serialized = new XMLSerializer()
+            .serializeToString(freezeViewportUnits(el, el.cloneNode(true)));
         const svg =
             `<svg xmlns="http://www.w3.org/2000/svg" width="${w * dpr}" height="${h * dpr}" viewBox="0 0 ${w} ${h}">` +
             `<foreignObject width="100%" height="100%">` +
@@ -1067,6 +1096,16 @@ function applyRasterPipeline(el, rasterNodes) {
         // chrome://flags/#canvas-draw-element). layoutsubtree was already
         // set before context creation above.
         const wrap = document.createElement("div");
+        // The wrapper MUST fill the canvas box. Left to itself it
+        // shrink-wraps its content — a headline wraps to the text width,
+        // not the element width — and texElementImage2D then captures
+        // that narrower box while the shader maps the texture across the
+        // whole canvas. Everything comes out stretched horizontally by
+        // canvasWidth/contentWidth, so the drawn glyphs no longer sit
+        // where the DOM text does and selection lands on the wrong
+        // characters.
+        wrap.style.cssText =
+            `display:block;width:${rect.width}px;height:${rect.height}px;`;
         while (el.firstChild) wrap.appendChild(el.firstChild);
         canvas.appendChild(wrap);
         sourceEl = wrap;
@@ -1075,13 +1114,24 @@ function applyRasterPipeline(el, rasterNodes) {
         canvas.style.cssText =
             `display:block;width:${rect.width}px;height:${rect.height}px;`;
     } else {
-        // Snapshot mode: purely visual overlay; the real DOM stays put
-        // underneath for accessibility, selection and events.
+        // Snapshot mode: purely visual overlay.
         canvas.style.cssText =
             "position:absolute;top:0;left:0;" +
             `width:${rect.width}px;height:${rect.height}px;` +
             "pointer-events:none;z-index:2147483000;";
-        canvas.setAttribute("aria-hidden", "true");
+        if (pureOverlay) {
+            // The real content is still visible underneath and keeps its
+            // own semantics, so the canvas is pure decoration.
+            canvas.setAttribute("aria-hidden", "true");
+        } else {
+            // In-place: the host gets hidden below, which would take its
+            // text out of the accessibility tree, out of find-in-page and
+            // out of innerText. Carry the label onto the canvas so the
+            // element is still announced rather than silently vanishing.
+            canvas.setAttribute("role", "img");
+            const label = (el.textContent || "").replace(/\s+/g, " ").trim();
+            if (label) canvas.setAttribute("aria-label", label.slice(0, 300));
+        }
     }
     el.appendChild(canvas);
 
@@ -1335,6 +1385,65 @@ function applyRasterPipeline(el, rasterNodes) {
     // texture is live, the host's own painting is hidden via the
     // visibility trick (the canvas child re-shows itself) so transparent
     // hosts — e.g. a bare headline — don't ghost-double under the effect.
+    // Keeping the host selectable.
+    // --------------------------------------------------------------
+    // The host must NOT be visibility:hidden. Hidden text cannot be
+    // selected, so dragging over the effect either selects nothing or
+    // catches neighbouring content — which is what makes the highlight
+    // look offset and unreliable. Instead the host stays in the flow
+    // with its ink made transparent, and the canvas is painted BEHIND
+    // it. The glyphs are invisible but still hit-testable, and the
+    // browser paints the selection highlight above the canvas, aligned
+    // with the real text, because that is where the text actually is.
+    const INK = {
+        "color": "transparent",
+        "-webkit-text-fill-color": "transparent",
+        "-webkit-text-stroke-color": "transparent",
+        "background-color": "transparent",
+        "background-image": "none",
+        "border-color": "transparent",
+        "box-shadow": "none",
+        "text-shadow": "none",
+    };
+    const REPLACED = "img,svg,video,picture,iframe";
+    let inkSaved = null;
+
+    const hideHostInk = () => {
+        if (inkSaved) return;
+        inkSaved = [];
+        for (const node of [el, ...el.querySelectorAll("*")]) {
+            if (node === canvas || node.tagName === "CANVAS") continue;
+            const saved = { op: node.style.getPropertyValue("opacity") };
+            for (const p in INK) saved[p] = node.style.getPropertyValue(p);
+            inkSaved.push([node, saved]);
+            for (const p in INK) node.style.setProperty(p, INK[p], "important");
+            // Replaced content has no "ink" property to neutralise.
+            if (node !== el && node.matches && node.matches(REPLACED)) {
+                node.style.setProperty("opacity", "0", "important");
+            }
+        }
+        // Contain the negative-z canvas so it stays behind this element's
+        // text but never slips behind an ancestor's background.
+        el.style.isolation = "isolate";
+        canvas.style.zIndex = "-1";
+    };
+
+    const showHostInk = () => {
+        el.style.visibility = "";
+        if (!inkSaved) return;
+        for (const [node, saved] of inkSaved) {
+            for (const p in INK) {
+                if (saved[p]) node.style.setProperty(p, saved[p]);
+                else node.style.removeProperty(p);
+            }
+            if (saved.op) node.style.setProperty("opacity", saved.op);
+            else node.style.removeProperty("opacity");
+        }
+        inkSaved = null;
+        el.style.isolation = "";
+        canvas.style.zIndex = "";
+    };
+
     const snapshotCapture = () => {
         // Overlay + image content: use the image directly as the texture.
         if (isOverlay) {
@@ -1359,8 +1468,7 @@ function applyRasterPipeline(el, rasterNodes) {
             }
         }
         canvas.style.display = "none";
-        const prevVisibility = el.style.visibility;
-        el.style.visibility = "";
+        showHostInk();
         const p = snapshotToImage(el, rect.width, rect.height, dpr)
             .then((img) => {
                 if (destroyed) return;
@@ -1368,15 +1476,14 @@ function applyRasterPipeline(el, rasterNodes) {
                 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
                 finishUpload();
                 textureReady = true;
-                // In-place transforms hide the host (the canvas replaces
-                // its look). A pure-overlay chain keeps it visible so the
-                // real content shows through the bubble; a mixed chain
-                // (in-place + overlay) hides it — the canvas carries all.
-                el.style.visibility = pureOverlay ? "" : "hidden";
+                // A pure-overlay chain leaves the host alone; the lens
+                // floats over untouched content. Otherwise the canvas
+                // carries the look and the host's own ink is suppressed.
+                if (!pureOverlay) hideHostInk();
                 canvas.style.visibility = "visible";
             })
             .catch((e) => {
-                el.style.visibility = prevVisibility;
+                showHostInk();
                 console.warn("[nodality] raster snapshot failed:", e);
             });
         canvas.style.display = "";
@@ -1671,6 +1778,7 @@ function applyRasterPipeline(el, rasterNodes) {
             }
             solverOps.length = 0;
             while (sourceEl !== el && sourceEl.firstChild) el.appendChild(sourceEl.firstChild);
+            showHostInk();
             el.style.visibility = "";
             canvas.remove();
         },

package/lib/scroll-video.js

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

package/lib/seo.js

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

package/lib/stacker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -11,7 +11,6 @@ class Stacker {
         this.res = document.createElement("div");
         this.res.style.display = "flex";
         this.res.style.flexDirection = "column";
-        console.log("A");
     }
 
     add(items){

package/lib/theme.js

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

package/lib/transform-anim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.185
+ * nodality v1.0.187
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -255,8 +255,6 @@ toCode(){
         if (data){
              
                let smart = smartRange(window.scrollY, {min: data.start, max: data.end}, {min: 7, max: 0}) // The other way
-                console.warn(smart);
-                console.warn(window.scrollY);
                // this.res.style.opacity = 0.7;