nodality 1.0.199 → 1.0.201

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -39,13 +39,14 @@ class Animator {
 	// to the document and has a layout box. Safe no-op headless.
 	rasterize(list){
 		if (!list || list.length === 0 || this._rasterHandle) return;
+		if (this._rasterCancelled) return; // destroy() ran before we attached
 		if (typeof document === "undefined" || typeof setTimeout === "undefined") return;
 		// setTimeout, not requestAnimationFrame: rAF is throttled to a
 		// standstill in backgrounded tabs, which would leave the effect
 		// permanently unattached there.
 		let attempts = 0;
 		const tryAttach = () => {
-			if (this._rasterHandle) return;
+			if (this._rasterHandle || this._rasterCancelled) return;
 			if (this.res && this.res.isConnected) {
 				try {
 					this._rasterHandle = applyRasterPipeline(this.res, list);
@@ -57,9 +58,10 @@ class Animator {
 				// null: layout box not ready yet (or WebGL/motion
 				// unavailable) - keep retrying within the budget.
 			}
-			if (++attempts < 80) setTimeout(tryAttach, 50);
+			if (++attempts < 80) this._rasterTimer = setTimeout(tryAttach, 50);
 		};
-		setTimeout(tryAttach, 0);
+		this._rasterTimer = setTimeout(tryAttach, 0);
+		this._track(() => clearTimeout(this._rasterTimer));
 	}
 
 	isHidden(hide){
@@ -83,13 +85,54 @@ class Animator {
 		return this;
 	}
 
-	// Tear down theme subscription. Call this when removing a component from
-	// the DOM in long-lived apps to prevent listener accumulation on document.
+	// Register a teardown callback. Everything this component attaches to a
+	// long-lived target (window, document, an observer, the GPU pipeline)
+	// should go through _track/_on so destroy() can actually release it.
+	_track(fn){
+		if (typeof fn !== "function") return fn;
+		(this._disposables || (this._disposables = [])).push(fn);
+		return fn;
+	}
+
+	// addEventListener + automatic removal on destroy(). Element-level
+	// listeners are collected with the element, but window/document ones
+	// outlive it and pin the component (and its DOM subtree) forever.
+	_on(target, type, handler, opts){
+		if (!target || typeof target.addEventListener !== "function") return handler;
+		target.addEventListener(type, handler, opts);
+		this._track(() => target.removeEventListener(type, handler, opts));
+		return handler;
+	}
+
+	// Tear down everything this component attached: theme subscription, the
+	// raster GPU pipeline, window/document listeners and observers. Call it
+	// when removing a component from the DOM in a long-lived app.
+	//
+	// Previously this released only the theme subscription, so each mounted
+	// component leaked its resize/scroll handlers and — for raster elements —
+	// an entire WebGL context, RAF loop and two observers. raster-ops has had
+	// a complete destroy() all along; nothing ever called it.
 	destroy(){
 		if (typeof this._themeUnsub === "function") {
 			this._themeUnsub();
 			this._themeUnsub = null;
 		}
+
+		if (this._rasterHandle && typeof this._rasterHandle.destroy === "function") {
+			try { this._rasterHandle.destroy(); } catch (e) { /* already gone */ }
+		}
+		this._rasterHandle = null;
+		this._rasterCancelled = true;
+
+		if (this._disposables) {
+			for (const off of this._disposables) {
+				try { off(); } catch (e) { /* keep draining */ }
+			}
+			this._disposables.length = 0;
+		}
+		this._responsiveTasks = null;
+		this._responsiveHandler = null;
+
 		if (this.res && this.res.parentNode) {
 			this.res.parentNode.removeChild(this.res);
 		}
@@ -381,7 +424,14 @@ class Animator {
 		if (obj.animation) {
 
 			this.res.style.transition = `${obj.animation}`; //`${obj.animation}s ease-in-out`; // stop resize ???
-			this.res.style.transionProperty = `background, color, transform`;
+			// This used to be misspelled `transionProperty`, which CSSOM
+			// silently discards — so the shipped behaviour was the shorthand's
+			// default, `all`. Fixing the spelling narrows what animates, so the
+			// list has to name every property hover() actually changes
+			// (see the onmouseover/onmouseout handlers below) or those would
+			// start snapping instead of easing.
+			this.res.style.transitionProperty =
+				`background-color, color, border, box-shadow, transform`;
 			//  this.transition(obj.animation);
 		}
 
@@ -525,7 +575,7 @@ class Animator {
 			}
 		};
 
-		window.addEventListener("scroll", compute);
+		this._on(window, "scroll", compute);
 
 		// Fire at the beginning if user sets "from" value to 0
 		if (data.from === 0) {
@@ -618,7 +668,7 @@ _setupResponsiveManager() {
     // We check if the handler is already assigned to avoid duplicate listeners
     if (!this._responsiveHandler) {
         this._responsiveHandler = react;
-        window.addEventListener("resize", react);
+        this._on(window, "resize", react);
     }
 
     // 4. Trigger Execution (ALWAYS)
@@ -701,12 +751,10 @@ resprop(arr, op) {
     
     // --- 2. STATE CAPTURE ---
 
-    this.prevStyles = {};
-    for (const prop in this.res.style) {
-       if (this.res.style.hasOwnProperty(prop) && isNaN(parseInt(prop))) {
-          this.prevStyles[prop] = this.res.style[prop];
-        }
-    }
+    // NOTE: the full-style snapshot that used to live here (this.prevStyles)
+    // was write-only — the only readers are in commented-out earlier versions
+    // of resprop below. It walked every CSSOM property on every resprop() call
+    // for nothing, so it has been dropped.
 
     const responsiveProps = new Set();
     arr.forEach(bp => {
@@ -726,7 +774,7 @@ resprop(arr, op) {
 
     // --- 3. CORE LOGIC ---
     const respropTask = () => {
-        const width = window.innerWidth;
+        const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
         // 1. Find the first matching range. 
@@ -759,11 +807,14 @@ resprop(arr, op) {
         
         // C. Overrides: Apply matching breakpoint values
         for (const key in applied) {
-		
+
+			// `exact` is a font-size. It used to call this.set(applied) —
+			// re-entering the component's whole set() pipeline (re-registering
+			// hover handlers, re-parsing every option) on EVERY resize event.
+			// Apply the property directly instead.
 			if (key === "exact"){
-//alert(key);
-this.set(applied);
-//this.set({key: })
+				this.res.style.fontSize = applied[key];
+				continue;
 			}
 
 
@@ -840,7 +891,7 @@ respad(arr) {
 
     // --- 3. CORE LOGIC: The Responsive Task Function ---
     const respadTask = () => {
-        const width = window.innerWidth;
+        const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
         // 1. RANGE LOGIC: Find the exact breakpoint whose range matches the current width.
@@ -947,7 +998,7 @@ respad(arr) { // COOL
     // --- 3. CORE LOGIC: The 'react' function (Responsive Style Application) ---
 
     const react = () => {
-        const width = window.innerWidth;
+        const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
         // 1. RANGE LOGIC: Find the exact breakpoint whose range matches the current width.
@@ -1068,7 +1119,7 @@ _applyResponsive(arr, applyFn) {
   if (this._responsiveHandler) window.removeEventListener("resize", this._responsiveHandler);
   this._responsiveHandler = react;
 
-  window.addEventListener("resize", react);
+  this._on(window, "resize", react);
   
   // ⭐ FIX: Defer the initial call slightly to avoid race conditions on refresh.
   setTimeout(() => {
@@ -1170,7 +1221,7 @@ resprop(arr) { // COOL
     // --- 3. CORE LOGIC: The 'react' function (Responsive Style Application) ---
 
     const react = () => {
-        const width = window.innerWidth;
+        const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
         // 1. RANGE LOGIC: Find the FIRST breakpoint whose range matches the current width.
@@ -1299,7 +1350,7 @@ resprop(arr) {
     // --- 3. CORE LOGIC: The 'react' function (Responsive Style Application) ---
 
     const react = () => {
-        const width = window.innerWidth;
+        const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
         // 1. STANDARD MIN-WIDTH LOGIC: Find the LARGEST breakpoint whose MIN-WIDTH is matched.
@@ -1409,7 +1460,7 @@ resmar(arr) {
 
     // --- 3. CORE LOGIC: The Responsive Task Function ---
     const resmarTask = () => {
-        const width = window.innerWidth;
+        const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
         // 1. RANGE LOGIC: Find the exact breakpoint whose range matches the current width.
@@ -1487,6 +1538,15 @@ resmar(arr) {
 	isNumber(value) {
 		return typeof value === 'number' && !isNaN(value);
 	}
+
+	// Single source of truth for "how wide is the viewport". See the note in
+	// chainReact — visualViewport is preferred (it tracks pinch-zoom) but is
+	// not universally present.
+	static viewportWidth() {
+		if (typeof window === "undefined") return 0;
+		const vv = window.visualViewport;
+		return (vv && typeof vv.width === "number") ? vv.width : window.innerWidth;
+	}
  
 	pad(arr){
 
@@ -1607,17 +1667,12 @@ resmar(arr) {
         percent = (val - from.max) / (from.min - from.max);
     }
 
-    let toRange = (to.min - to.max) * percent - to.min;
-    toRange = Math.abs(toRange);
-
-    if (to.min < to.max) {
-        let sm = to.max + Math.abs(to.min);
-        let timesPerc = sm * percent;
-        toRange = to.min + timesPerc;
-    }
-
-
-    return toRange;
+    // Linear interpolation across the OUTPUT range. The old form added
+    // |to.min| to to.max instead of subtracting it, so any range whose
+    // minimum was above zero overshot: 0.2 -> 1 produced 0.2 + 1.2p = 1.4
+    // at full scroll. Correct only when to.min <= 0, which is why the
+    // 0 -> 1 demos never showed it.
+    return to.min + (to.max - to.min) * percent;
 }
 
 
@@ -2411,7 +2466,11 @@ setTags(obj){
 	// Function to check and log queries based on screen size
 	const checkQueries = (qban) => {
 		//alert("/P")
-	  const screenSize = window.visualViewport.width;  // window.innerWidth window.screen.width window.visualViewport.width
+	  // One width source for the whole library. visualViewport is absent in
+	  // jsdom and older WebViews (TypeError), and disagrees with innerWidth
+	  // during pinch-zoom — which used to make chainReact breakpoints flip at
+	  // different widths than resprop/respad breakpoints on the same page.
+	  const screenSize = Animator.viewportWidth();
 	  let ops = "";
 	  let operations = [];
 	  let globalQueries = [];
@@ -2799,12 +2858,12 @@ this.hasAnimated = true;
 let ass = this.options.animation.op;
 //alert(this.openTag);
 
- window.addEventListener(/*this.openTag*/"sidebar:open", () => {
+ this._on(window, /*this.openTag*/"sidebar:open", () => {
 		
     this.res.animate(ass.keyframesOpen, ass.openOptions);
   });
 
-   window.addEventListener(/*this.closeTag*/ "sidebar:closed", () => {
+   this._on(window, /*this.closeTag*/ "sidebar:closed", () => {
 	
     this.res.animate(ass.keyframesClose, ass.closeOptions);
   });
@@ -2823,11 +2882,11 @@ let ass = this.options.animation.op;
 		// alert("ONA" + this.openTag);
 		//alert(this.openTag);
 		
-window.addEventListener(this.openTag, () => {
+this._on(window, this.openTag, () => {
 		this.res.animate(ass.keyframesOpen, ass.openOptions);
 	});
 // "sidebar:opened" "sidebar:closed"
-	window.addEventListener(this.closeTag, () => {
+	this._on(window, this.closeTag, () => {
 		this.res.animate(ass.keyframesClose, ass.closeOptions);
 	});
 	   }
@@ -2853,7 +2912,7 @@ window.addEventListener(this.openTag, () => {
 			  }
 		  };
 
-		  window.addEventListener("scroll", scrollHandler);
+		  this._on(window, "scroll", scrollHandler);
 
 	  } 
 
@@ -2874,6 +2933,7 @@ window.addEventListener(this.openTag, () => {
   });
 
   observer.observe(this.res);
+  this._track(() => observer.disconnect());
 }
 /*
 if (!this.openedElements.get(this.res)) {
@@ -2936,7 +2996,7 @@ this.res.querySelectorAll('span').forEach(span => {
 	
 	if (!this.options.animation /*&& this.getType() !== "LayoutWrapperElement"*/){
 	
-	window.addEventListener('resize', () => checkQueries());
+	this._on(window, 'resize', () => checkQueries());
 	}
 	
 	checkQueries();
@@ -3098,7 +3158,7 @@ this.res.querySelectorAll('span').forEach(span => {
 		(this.blastTarget || this.res).style.transform = transformValue;
 		this.res.style.opacity = opacity;
 	} else {
-		alert("OPE")
+		console.warn("[nodality] transform produced no geometric value - check `values`")
 	}
 	}
 
@@ -3117,7 +3177,7 @@ this.res.querySelectorAll('span').forEach(span => {
 		
 	} else {
 		
-		window.addEventListener("load", () => {
+		this._on(window, "load", () => {
 			if (transform.delay) {
 
 				setTimeout(() => {
@@ -3192,7 +3252,7 @@ if (transform.on){
 	}
 	
 	} else {
-		alert("THIS FIRE WITH GRADIENT (invalid block");
+		console.warn("[nodality] reactOnTransform: unrecognised transform descriptor - ignored");
 	}
 
 	}

package/layout/audio.js

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

package/layout/audionew.js

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

package/layout/base-2.js

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

package/layout/base.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -28,19 +28,25 @@ class Base {
 	Proxima(a) {
 		var me = this;
 		return new Proxy(a, {
-			set(target, prop, key, value) {
-				 alert(`Setting ${key} to ${value}`);
-				target[key] = value;
-				
-				
-				this.initialState.data.push(key);
-				
+			// Proxy set traps are (target, prop, value, receiver). The old
+			// signature named the third parameter `key`, so `target[key] = value`
+			// stored the incoming VALUE under the receiver as a property name and
+			// the real property was never written — every reactive-state write
+			// silently corrupted the object.
+			set(target, prop, value) {
+				target[prop] = value;
+
+				if (me.initialState && me.initialState.data &&
+					typeof me.initialState.data.push === "function") {
+					me.initialState.data.push(prop);
+				}
+
 				 if (prop !== 'length') {
 					 me.refreshUI("Added");
 				 }
 				return true;//a[P];
 			},
-			has(target, prop, key, value) {
+			has(target, prop) {
 				
 				if (prop !== 'length') {
 					 me.refreshUI("Deleted");
@@ -62,7 +68,6 @@ class Base {
 	loadState(data, id){
 		this.loadEl = id;
 		this.initialState = data;
-		alert(this.initialState.data);
 		
 		return this.observe(this.state.data);
 		
@@ -144,7 +149,6 @@ class Base {
 		
 		
 		let node = document.querySelector("#res");
-		alert(this.render());
 		
 		
 		let nodes = this.toNode(this.toHTML());

package/layout/beta-desktop-bar.js

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

package/layout/beta-mobile-bar.js

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

package/layout/box.js

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

package/layout/button.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -457,8 +457,7 @@ this.options = obj;
 		const adj = () => {
 			let query = window.matchMedia("(max-device-width: 415px)");
 			if (query.matches) {
-                alert("WOW")
-				this.res.style.fontSize = '6rem';
+                				this.res.style.fontSize = '6rem';
 			} else {
 				this.res.style.fontSize = '3rem';
 			}

package/layout/cards.js

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

package/layout/center.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -94,8 +94,7 @@ return this;
 		} 
 		
 		if (!T && !R && !B){
-			alert("j")
-		this.res.style.margin = L;	
+					this.res.style.margin = L;	
 		}
 		
 		return this;
@@ -141,8 +140,7 @@ return this;
 		} 
 		
 		if (!T && !R && !B){
-			alert("j")
-		this.res.style.margin = L;	
+					this.res.style.margin = L;	
 		}
 		
 		return this;

package/layout/checkbox.js

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

package/layout/circle.js

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

package/layout/clean-row.js

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

package/layout/code.js

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

package/layout/container.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -953,8 +953,7 @@ apply(arr) {
 			let query = window.matchMedia(`(max-width: ${el.width}px)`);
 			if (el.device){
 				query = window.matchMedia(`(max-device-width: ${el.width}px)`);
-				alert(el.device);
-			}
+							}
 			
 			
 			

package/layout/custom.js

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

package/layout/div-image.js

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

package/layout/dropdown-2025.js

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

package/layout/dropdown.js

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

package/layout/empty-element.js

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

package/layout/external-stylesheet.js

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

package/layout/flex-card.js

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

package/layout/flex-grid.js

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

package/layout/flex-row.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -186,7 +186,6 @@ let stringified = JSON.stringify(options.borderObj);
 	//	// console.warn(options);
 
 	//	options.columnAlways && (this.columnAlways = true);
-		 options.columnAlways && alert("JIJ" + options.columnAlways);
 
 		 options.toColumn && this.toColumn(options.toColumn); // OK
 
@@ -495,7 +494,6 @@ let stringified = JSON.stringify(options.borderObj);
 
 
 	toColumn(at){
-		 alert("ON")
 
 		const toCol = () => {
 			let media = window.matchMedia(`(max-width: ${at})`);

package/layout/footer.js

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

package/layout/form-components/custom.js

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

package/layout/form-components/data-list.js

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