nodality 1.0.220 → 1.0.224

package/layout/multiswitcher.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -16,9 +16,14 @@ class /*Multi*/Switcher extends Animator {
     this.resizeListener = null;
   }
 
-  set({ breakpoints }) {
+  //@ id: DOM id for the switcher's own box. The views are swapped in and out, so an id belongs here rather than on a view that may not be mounted.
+  //@ area: The switcher's grid-area — the name of a cell declared in the parent's `areas`. It goes here because the switcher's box IS the grid item; the views live inside it, so an area set on a view would never reach the grid.
+  set({ breakpoints, id, area }) {
 
     this.options = {breakpoints: breakpoints};
+    // Applied in render(): the box does not exist until then.
+    this._id = id;
+    this._area = area;
 
     if (!Array.isArray(breakpoints)) {
       throw new Error("Breakpoints should be an array of objects with 'at' and 'view' properties.");
@@ -64,7 +69,10 @@ str += `{ at: "${this.options.breakpoints[i].at}", view: ${this.options.breakpoi
       //alert(val)
       // Create an internal div for switching content
       this.internalDiv = document.createElement("div");
-    
+      this.res = this.internalDiv;
+      if (this._id) this.internalDiv.setAttribute("id", this._id);
+      if (this._area) this.internalDiv.style.gridArea = this._area;
+
       // Apply the initial view
       this.applyView();
     

package/layout/nav-bar.js

@@ -1,12 +1,17 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class NavBar {
+import {Animator} from "./animator.js";
+class NavBar extends Animator{
 	constructor(els){
-		this.ele = null;
+		super();
+		// Converted from a standalone class; opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour.
+		this._noTheme = true;
+		this.res = null;
 		this.titleText = "";
 		this.hasHamburger = false;
 		this.setup(); // should nt be eited 2024
@@ -34,7 +39,7 @@ class NavBar {
 		el.style.margin = 0;
 		el.style.paddingTop = "1em";
 		el.style.paddingBottom = "1em";
-		this.ele = el;
+		this.res = el;
 		// EVIL LINE
 		
 		return this;
@@ -51,17 +56,17 @@ class NavBar {
 					
 					let paddingObject = pado;// paddingValues[0]; // Assuming only one object in the array
                     if (paddingObject.hasOwnProperty('top')) {
-                        this.ele.style.marginTop = paddingObject['top'];
+                        this.res.style.marginTop = paddingObject['top'];
                     }
                     if (paddingObject.hasOwnProperty('right')) {
 						//alert("P")
-                        this.ele.style.marginRight = paddingObject['right'];
+                        this.res.style.marginRight = paddingObject['right'];
                     }
                     if (paddingObject.hasOwnProperty('bottom')) {
-                        this.ele.style.marginBottom = paddingObject['bottom'];
+                        this.res.style.marginBottom = paddingObject['bottom'];
                     }
                     if (paddingObject.hasOwnProperty('left')) {
-                        this.ele.style.marginLeft = paddingObject['left'];
+                        this.res.style.marginLeft = paddingObject['left'];
                     }
 				}
 
@@ -74,7 +79,7 @@ class NavBar {
     }
     
 	radius(rad){
-		this.ele.style.borderRadius = rad;
+		this.res.style.borderRadius = rad;
 		return this;
 	}
     
@@ -101,7 +106,7 @@ class NavBar {
             
             
            
-                 this.ele.appendChild(item.render());
+                 this.res.appendChild(item.render());
             
             
        
@@ -125,14 +130,14 @@ class NavBar {
 	
 	
 	sticky(){
-		this.ele.style.position = "fixed";
+		this.res.style.position = "fixed";
 		return this;
 	}
 	
 	font(family){
 		
-		for (var i = 0; i < this.ele.children; i++){
-			this.ele.children[i].style.fontFamily = family;
+		for (var i = 0; i < this.res.children; i++){
+			this.res.children[i].style.fontFamily = family;
 		}
 		
 		return this;
@@ -142,8 +147,8 @@ class NavBar {
     
     
         background(obj){
-            this.ele.style.backgroundColor = obj.color;
-              this.ele.style.opacity = obj.opacity;
+            this.res.style.backgroundColor = obj.color;
+              this.res.style.opacity = obj.opacity;
             return this;
         }
 
@@ -156,10 +161,10 @@ adjust(w) {
 	let media2 = window.matchMedia(`(max-device-width: 415px)`);
 
 	if (media.matches || media2.matches) {
-		this.ele.style.flexDirection = "column";
+		this.res.style.flexDirection = "column";
 	} else {
-		this.ele.style.flexDirection = "row";
-		this.ele.style.marginLeft = 0;
+		this.res.style.flexDirection = "row";
+		this.res.style.marginLeft = 0;
 	}
 
 	const addHamburger = () => {
@@ -180,8 +185,8 @@ adjust(w) {
 	
 	const adjustFontSize = () => {
 	//	alert("NOT USED IN VIEWPORT")
-		for (var i = 0; i < this.ele.children.length; i++) {
-			let el = this.ele.children[i];
+		for (var i = 0; i < this.res.children.length; i++) {
+			let el = this.res.children[i];
 			 el.style.fontSize = media2.matches ? "1.2em" : "1em";
 
             
@@ -209,9 +214,9 @@ adjust(w) {
 	}
 
 	const toWideScreen = () => {
-		for (var i = 0; i < this.ele.children.length; i++) {
+		for (var i = 0; i < this.res.children.length; i++) {
 			
-			let child = this.ele.children[i];
+			let child = this.res.children[i];
 			
 			child.style.marginTop = "0em";
 			child.style.display = "block";
@@ -220,14 +225,14 @@ adjust(w) {
 				child.style.fontSize = "2em";
 			}
 			
-		if (this.ele.childNodes[i].textContent == "☰") {
-			this.ele.removeChild(this.ele.childNodes[i]);
+		if (this.res.childNodes[i].textContent == "☰") {
+			this.res.removeChild(this.res.childNodes[i]);
 		}
 		
 		}
 
 	
-		this.ele.style.flexDirection = "row";
+		this.res.style.flexDirection = "row";
 	}
 	
 
@@ -239,17 +244,17 @@ adjust(w) {
 		var closed = false;
 		var btn = addHamburger();
 		
-		 /*(((this.ele.children.length == this.itemCount + 1)||*/
-		if (this.ele.children.length == this.itemCount) {
-			this.ele.insertBefore(btn, this.ele.firstChild);
+		 /*(((this.res.children.length == this.itemCount + 1)||*/
+		if (this.res.children.length == this.itemCount) {
+			this.res.insertBefore(btn, this.res.firstChild);
 		}
 
-		this.ele.style.flexDirection = "column";
-		for (var i = 0; i < this.ele.children.length; i++) {
-			if (this.ele.children[i].textContent == "☰" || this.ele.children[i].textContent == /*"Lands"*/ this.keepItem){
-				this.ele.children[i].style.display = "block";
+		this.res.style.flexDirection = "column";
+		for (var i = 0; i < this.res.children.length; i++) {
+			if (this.res.children[i].textContent == "☰" || this.res.children[i].textContent == /*"Lands"*/ this.keepItem){
+				this.res.children[i].style.display = "block";
 			} else {
-				this.ele.children[i].style.display = "none";
+				this.res.children[i].style.display = "none";
 			}
 		}
 
@@ -257,21 +262,21 @@ adjust(w) {
 			// alert
 			closed = !closed;
 
-			for (var i = 0; i < this.ele.children.length; i++) {
-				if (i != 0 && this.ele.children[i].textContent != /*"Lands"*/ this.keepItem) {
+			for (var i = 0; i < this.res.children.length; i++) {
+				if (i != 0 && this.res.children[i].textContent != /*"Lands"*/ this.keepItem) {
 
 					if (!closed) {
-						this.ele.children[i].style.display = "none";
-						this.ele.children[i].style.marginTop = "0em";
+						this.res.children[i].style.display = "none";
+						this.res.children[i].style.marginTop = "0em";
 					} else {
                         
                         
-                        if (this.ele.children[i].getAttribute("class") === "innerHider"){
+                        if (this.res.children[i].getAttribute("class") === "innerHider"){
                             // alert("WOW");
-                               this.ele.children[i].style.display = "none";
+                               this.res.children[i].style.display = "none";
                         } else {
-                            this.ele.children[i].style.display = "block";
-							this.ele.children[i].style.marginTop = "3em";
+                            this.res.children[i].style.display = "block";
+							this.res.children[i].style.marginTop = "3em";
                         }
                         
                         
@@ -306,14 +311,13 @@ adjust(w) {
 		if (div){
 			document.querySelector(div).style.padding = 0;
 			document.querySelector(div).style.margin = 0;
-			document.querySelector(div).appendChild(this.ele);
+			document.querySelector(div).appendChild(this.res);
 		} else {
-			return this.ele;
+			return this.res;
 		}
-			return this.ele;
+			return this.res;
 	}
 }
 	 
-window.NavBar = NavBar;
-
+if (typeof window !== "undefined") window.NavBar = NavBar;
 export { NavBar };

package/layout/nav-factor/custom-div.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -60,5 +60,5 @@ class CustomDivRenderer {
     }
 }
 
-window.CustomDivRenderer = CustomDivRenderer;
+if (typeof window !== "undefined") window.CustomDivRenderer = CustomDivRenderer;
 export { CustomDivRenderer };

package/layout/new-nav-bar.js

@@ -1,10 +1,11 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
 import {Animator} from "./animator.js";
+import { toObjectSource } from "../lib/codegen.js";
 // import {CustomDivRenderer} from "./navFactor/customDiv.js";
 // CORRECT
 class CustomDivRenderer {
@@ -80,7 +81,7 @@ class UINavBar extends Animator {
         // 16:01:09 09/11/24 What????
         // Convert attributes to .set({...}) format if there are any attributes
         if (Object.keys(this.attributes).length > 0) {
-            codeStr += `.setup(${JSON.stringify(this.attributes, null, 2).replace(/"([^"]+)":/g, '$1:')})`;
+            codeStr += `.setup(${toObjectSource(this.attributes, 2)})`;
 
         } else {
             codeStr += `.setup({})`;
@@ -95,8 +96,14 @@ class UINavBar extends Animator {
     
         codeStr += `\n])`;
 
-        return codeStr;
-    
+        // An ARRAY, like every other class's toCode(). Returning a bare
+        // string meant a bar could never be a child of a Wrapper at all:
+        // Wrapper.add() does `el.toCode().flatMap(...)`, and a string has
+        // no flatMap, so building the tree threw. Consumers that push the
+        // result and flatten later (designer.js) are unaffected, and a
+        // one-element array concatenates to exactly what the string did.
+        return [codeStr];
+
     }
 
     styled(obj) {

package/layout/polygon.js

@@ -1,11 +1,12 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
 import { Animator } from "./animator.js";
 
+import { toObjectSource } from "../lib/codegen.js";
 class Polygon extends Animator {
   constructor(obj = {}) {
     super();
@@ -32,9 +33,7 @@ class Polygon extends Animator {
    toCode(){
    const codeObj = this.options || {};
   // stringify with indentation
-  let str = JSON.stringify(codeObj, null, 2);
-  // remove quotes around keys
-  str = str.replace(/"([^"]+)":/g, '$1:');
+  let str = toObjectSource(codeObj, 2);
   return `new Polygon().set(${str})`;
   }
 

package/layout/prerender-site.js

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

package/layout/prerender.js

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

package/layout/progress.js

@@ -1,13 +1,18 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
+import {Animator} from "./animator.js";
 // changed on 26/12/2020
 
-class Progress {
+class Progress extends Animator {
 	constructor(value){
+		super();
+		// Converted from a standalone class. Opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour; opt in per component.
+		this._noTheme = true;
 		this.res = null;
 		this.value = value;
 		this.setup();

package/layout/row.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class Row {
+import {Animator} from "./animator.js";
+class Row extends Animator {
 	constructor(frs, saveEl) {
+		super();
+		// Converted from a standalone class. Opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour; opt in per component.
+		this._noTheme = true;
 		this.saveEl = saveEl;
 		this.frs = frs;
 		this.res = null;

package/layout/scroll-video.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class ScrollVideo {
+import {Animator} from "./animator.js";
+class ScrollVideo extends Animator {
     constructor() {
+		super();
+		// Converted from a standalone class. Opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour; opt in per component.
+		this._noTheme = true;
         this.frameNumber = 0; // Start video at frame 0
         this.res = document.createElement("div");
         this.vid = null;

package/layout/side-bar.js

@@ -1,12 +1,17 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class SideBar {
+import {Animator} from "./animator.js";
+class SideBar extends Animator{
 	constructor(els, obj){
-		this.ele = null;
+		super();
+		// Converted from a standalone class; opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour.
+		this._noTheme = true;
+		this.res = null;
         this.width = "16em";
         this.height = "100vh";
         
@@ -129,7 +134,7 @@ class SideBar {
         })
         
         
-		this.ele = outer;
+		this.res = outer;
         
      
         
@@ -149,15 +154,15 @@ class SideBar {
     // DO NOT CHANGE WIDTH AFTER
     
     background(obj){
-            this.ele.children[1].style.backgroundColor = obj.color;
-              this.ele.children[1].style.opacity = obj.opacity;
+            this.res.children[1].style.backgroundColor = obj.color;
+              this.res.children[1].style.opacity = obj.opacity;
             return this;
         }
 	
 	items(items){
 		this.itemCount = items.length;
 		for (var i = 0; i < items.length; i++){
-			this.ele.children[1].appendChild(items[i].render());
+			this.res.children[1].appendChild(items[i].render());
 		}
 		
 		return this;
@@ -169,11 +174,11 @@ class SideBar {
 		if (div){
 			document.querySelector(div).style.padding = 0;
 			document.querySelector(div).style.margin = 0;
-			document.querySelector(div).appendChild(this.ele);
+			document.querySelector(div).appendChild(this.res);
 		} else {
-			return this.ele;
+			return this.res;
 		}
-			return this.ele;
+			return this.res;
 	}
 }
 	

package/layout/side-nav-bar.js

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

package/layout/simple-bar.js

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

package/layout/slider-2025.js

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

package/layout/spacer.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class Spacer { 
+import {Animator} from "./animator.js";
+class Spacer extends Animator { 
 	constructor( hide) {
+		super();
+		// Converted from a standalone class. Opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour; opt in per component.
+		this._noTheme = true;
         
         
         

package/layout/stack.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class Stack {
+import {Animator} from "./animator.js";
+class Stack extends Animator {
     constructor(st){
+		super();
+		// Converted from a standalone class. Opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour; opt in per component.
+		this._noTheme = true;
        this.res = null;
 
      this.st = st;

package/layout/svg.js

@@ -1,11 +1,12 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
 import { Wrapper } from "./container.js";
 
+import { toObjectSource } from "../lib/codegen.js";
 /**
  * Svg — a Nodality primitive for inline SVG icons.
  *
@@ -99,9 +100,7 @@ class Svg extends Wrapper {
 			const cleanedObj = Object.fromEntries(
 				Object.entries(this.obj).filter(([k, v]) => v !== null)
 			);
-			const objString = JSON
-				.stringify(cleanedObj, null, 2)
-				.replace(/"([^"]+)":/g, "$1:");
+			const objString = toObjectSource(cleanedObj, 2);
 			code += `\n${pad}  .set(${objString})`;
 		}
 		code += `\n${pad}`;

package/layout/switcher.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class Switcher {
+import {Animator} from "./animator.js";
+class Switcher extends Animator {
     constructor(obj){
+		super();
+		// Converted from a standalone class. Opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour; opt in per component.
+		this._noTheme = true;
       this.res = null;
       this.obj = obj;
       this.code = [];

package/layout/table.js

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

package/layout/text-field.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -179,12 +179,8 @@ class TextField extends Animator {
 		this.res.style.border = `${w}px solid ${color}`;
 		return this;
 	}
-	
-	
-	width(w){
-		this.res.style.width = w;
-		return this;
-	}
+
+
 	/**
 	 * Corner radius. A number is pixels; a string is passed through, so
 	 * `radius("50%")` and `radius(12)` both work.
@@ -192,12 +188,6 @@ class TextField extends Animator {
 
 
 
-	//@deprecated round: superseded by `radius()`, which is the same thing under the name the option already uses.
-	round(v) {
-		this.deprecatedOption("round()", "radius()");
-		return this.radius(v);
-	}
-
 	
 	onChange(action){
 		var value = this.res.value;