nodality 1.0.220 → 1.0.224

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -7,6 +7,7 @@
 import { Theme } from "../lib/theme.js";
 import { applyRasterPipeline } from "../lib/raster-ops.js";
 
+import { keyPattern } from "../lib/codegen.js";
 // 22/08/2020 - 16:30
 class Animator {
     
@@ -169,6 +170,17 @@ class Animator {
 		}
 	}
 
+	// Custom properties. `style[name]` does not work for them — the CSSOM
+	// only reaches a `--*` property through setProperty — which is why an
+	// axis default written like every other style silently did nothing.
+	vars(map){
+		if (!map || typeof map !== "object") return this;
+		for (const name in map) {
+			this.res.style.setProperty(name, String(map[name]));
+		}
+		return this;
+	}
+
 	keySet(obj){
 		this.temporaryVal = 1;
 		if (Array.isArray(obj)) {
@@ -256,6 +268,20 @@ class Animator {
         gridTemplateRows: "gridTemplateRows",
         rowGap: "rowGap",
         columnGap: "columnGap",
+        // Extended 2026-08-11 — the shell vocabulary `bones` speaks, so a
+        // generated grid needs no keySet. `cols`/`rows` are short names for
+        // the two above; `areas` had no option at all, and `area` existed
+        // only on the three components that happened to dispatch it
+        // themselves (Wrapper, Text, Image) — those now set the same
+        // property to the same value, and everything else gains it.
+        //@ cols: grid-template-columns, verbatim — e.g. "240px 1fr".
+        cols: "gridTemplateColumns",
+        //@ rows: grid-template-rows, verbatim.
+        rows: "gridTemplateRows",
+        //@ areas: grid-template-areas, verbatim — e.g. '"nav main" "nav main"'.
+        areas: "gridTemplateAreas",
+        //@ area: This element's grid-area — the name of a cell declared in the parent's `areas`.
+        area: "gridArea",
 
         // ── Typography (extended) ──────────────────────────────────────
         letterSpacing: "letterSpacing",
@@ -349,6 +375,8 @@ class Animator {
     obj.size && this.fluidCopy(obj.size);
     //@ resprop: Per-breakpoint style overrides — [{breakpoint, ...css}]. `exact` is font size.
     obj.resprop && this.resprop(obj.resprop, obj);
+    //@ vars: Custom CSS properties on this element — {"--nod-split": 0.2}. Custom properties inherit, so writing them on a root drives its whole subtree with one declaration; that is how the morph axes reach every generated element without a stylesheet.
+    obj.vars && this.vars(obj.vars);
     //@ keySet: Escape hatch — {key, value} written straight to element.style, or an array of them.
     obj.keySet && this.keySet(obj.keySet);
     //@ noTheme: Opt this element out of Theme.setDefaults light/dark colouring.
@@ -1009,6 +1037,24 @@ resmar(arr) {
         return this;
     }
 
+	round(v) {
+		this.deprecatedOption("round()", "radius()");
+		return this.radius(v);
+	}
+
+	toCSS(){
+		return this.css; 
+	}
+
+	toHTMLA(){
+		return this.html;
+	}
+
+	background(color){
+		this.res.style.background = color;
+		return this;
+	}
+
 	deprecatedOption(name, replacement) {
 		console.error(`nodality: \`${name}\` is deprecated — use \`${replacement}\` instead.`);
 		return this;
@@ -2016,7 +2062,7 @@ maxWidth(w){
 }
 
 removeQuotesFromFirstWord(jsonString) {
-	const modifiedJSON = jsonString.replace(/"([^"]+)":/g, '$1:');
+	const modifiedJSON = jsonString.replace(keyPattern(), "$1:");
 	return modifiedJSON;
   }
   

package/layout/audio.js

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

package/layout/audionew.js

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

package/layout/base.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class Base {
+import {Animator} from "./animator.js";
+class Base extends Animator{
 	constructor(/*items*/){
+		super();
+		// Converted from a standalone class; opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour.
+		this._noTheme = true;
 		//Base.prototype.items = items;
 		this.oldLength = 0;
 	}
@@ -101,7 +106,7 @@ class Base {
 
 	
 	mount(el){
-		this.el = el;
+		this.res = el;
 		this.render(el).render(el); // // this.render === function inside component
 	}
 

package/layout/beta-desktop-bar.js

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

package/layout/beta-mobile-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 { keyPattern } from "../lib/codegen.js";
 class /*Beta*/MobileBar extends Animator {
     constructor() {
         super();
@@ -19,7 +20,7 @@ class /*Beta*/MobileBar extends Animator {
 		if (!jsonString){
 			return;
 		}
-		const modifiedJSON = jsonString.replace(/"([^"]+)":/g, '$1:');
+		const modifiedJSON = jsonString.replace(keyPattern(), "$1:");
 		return modifiedJSON;
 	  }
 

package/layout/button.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -265,11 +265,6 @@ this.options = obj;
     }
 
 
-    
-	background(color){
-		this.res.style.background = color;
-		return this;
-	}
 
 
     
@@ -346,11 +341,8 @@ this.options = obj;
 		
 		return this;
 	}
-	
-	onTap(e){
-		this.res.addEventListener("click", e);
-		return this;
-	}
+
+
 
 	toCode() {
 		//console.log("OPTIONS ARE");

package/layout/center.js

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

package/layout/checkbox.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -177,5 +177,5 @@ obj.resmar && this.resmar(obj.resmar);
 }
 
 // Export the class
-window.Checkbox = Checkbox;
+if (typeof window !== "undefined") window.Checkbox = Checkbox;
 export { Checkbox };

package/layout/circle.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 Circle extends Animator {
   constructor() {
     super();
@@ -36,7 +37,7 @@ class Circle extends Animator {
       Object.entries(this.options || {}).filter(([, v]) => v != null)
     );
 
-    const objString = JSON.stringify(cleanedObj, null, 4).replace(/"([^"]+)":/g, "$1:");
+    const objString = toObjectSource(cleanedObj, 4);
     return [`new Circle().set(${objString})`];
   }
 

package/layout/code.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -7,6 +7,7 @@
 import {Animator} from "./animator.js";
 
 
+import { keyPattern } from "../lib/codegen.js";
 class Code extends Animator {
     constructor(){
         super();
@@ -34,7 +35,7 @@ class Code extends Animator {
 
     // pretty JSON, but keep functions/nested objects readable
     const str = JSON.stringify(obj, null, 2)
-        .replace(/"([^"]+)":/g, '$1:')   // remove quotes from keys
+        .replace(keyPattern(), "$1:")   // remove quotes from identifier keys
         .replace(/"([^"]+)"/g, (m, p1) => {
             // keep colors and class names quoted, but escape code safely
             if (p1.includes("\n") || p1.includes("'") || p1.includes('"')) {

package/layout/container.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 Wrapper extends Animator { // 12:10:02 found grep 06/03
 	constructor(obj) {
         super();
@@ -40,9 +41,7 @@ code = `${pad}new Wrapper()`;
             Object.entries(this.obj).filter(([key, value]) => value !== null)
         );
 
-        const objString = JSON
-            .stringify(cleanedObj, null, 2)
-            .replace(/"([^"]+)":/g, '$1:');
+        const objString = toObjectSource(cleanedObj, 2);
 
         code += `\n${pad}  .set(${objString})`;
     }
@@ -497,10 +496,7 @@ code = `${pad}new Wrapper()`;
 		return this;
 	}
 
-	width(perc){
-		this.res.style.width = perc;
-		return this;
-	}
+
 
 	heightNoAuto(perc){
 		this.res.style.height = perc;

package/layout/dropdown-2025.js

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

package/layout/flex-card.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -132,15 +132,6 @@ this.options = obj;
 	}
 
 
-	
-	background(color){
-				// The shorthand, not backgroundColor: it also resets background-image,
-		// so setting a flat colour after a gradient clears the gradient. The
-		// longhand left it in place, so the same call behaved differently
-		// depending on which component you happened to hold.
-		this.res.style.background = color;
-		return this;
-	}
 
 
 	
@@ -164,12 +155,6 @@ this.options = obj;
 
 
 
-	//@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);
-	}
-
 	
 	render(div){
 		if (div){

package/layout/flex-grid.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -218,11 +218,8 @@ if (el != undefined){
 		this.code.push("\n ])");
 		return this;
 	}
-	
-	width(w){
-		this.res.style.width = w;
-		return this;
-	}
+
+
 	
 	
 	border(color, width){

package/layout/flex-row.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 { keyPattern } from "../lib/codegen.js";
 class FlexRow extends Animator {
 	constructor(frs, saveEl) {
 		super();
@@ -372,7 +373,7 @@ let stringified = JSON.stringify(options.borderObj);
 
     // stringify cleaned object
     const objString = JSON.stringify(clean, null, 4)
-        .replace(/"([^"]+)":/g, '$1:')  // unquote keys
+        .replace(keyPattern(), "$1:")  // unquote identifier keys
         .replace(/"([^"]*)"/g, (m, p1) => {
             // wrap multiline text/code in backticks
             if (p1.includes("\n")) return "`" + p1.replace(/`/g, "\\`") + "`";
@@ -491,11 +492,8 @@ let stringified = JSON.stringify(options.borderObj);
          
         return this;
     }
-    
-     background(color){
-        this.res.style.background = color;
-        return this;
-    }
+
+
     
     radius(val){
         this.res.style.borderRadius = `${val}px`;
@@ -506,11 +504,8 @@ let stringified = JSON.stringify(options.borderObj);
           this.res.style.boxShadow = "0px 1px 10px 0px rgb(145 145 145)"; //`${x}px ${y}px ${radius}px #000`;
         return this;
     }
-    
-    onTap(e){
-		this.res.addEventListener("click", e);
-		return this;
-	}
+
+
 	
 	
 	items(arr) {

package/layout/form-components/custom.js

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

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

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -182,5 +182,5 @@ import {Animator} from "../animator.js";
    DataList = function(...args) { return new _oldDataList(...args) };
     
     
-window.DataList = DataList;
+if (typeof window !== "undefined") window.DataList = DataList;
 export { DataList };

package/layout/form-components/floating-input.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -164,5 +164,5 @@ obj.name && input.setAttribute("name", obj.name);
     }
     
     // 31/01/25 22:06:50 works
-window.FloatingInput = FloatingInput;
+if (typeof window !== "undefined") window.FloatingInput = FloatingInput;
 export { FloatingInput };

package/layout/form-components/form-all.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -155,5 +155,5 @@ let dataList = DataList()
 }
 
 new Wrappera().mount("#res");
-window.Wrappera = Wrappera;
+if (typeof window !== "undefined") window.Wrappera = Wrappera;
 export { Wrappera };

package/layout/form-components/form.js

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

package/layout/form-components/image-picker.js

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

package/layout/form-components/picker.js

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

package/layout/form-components/radio.js

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

package/layout/form-components/radiogroup.js

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

package/layout/form-components/range.js

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

package/layout/free.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 Free extends Animator {
     constructor(){
         super();
@@ -152,9 +153,7 @@ class Free extends Animator {
                 return [""];
             }
     
-            const objString = JSON
-                .stringify(this.options, null, 4)
-                .replace(/"([^"]+)":/g, '$1:');
+            const objString = toObjectSource(this.options, 4);
     
 
                 var codeStr = "";

package/layout/grid-switcher.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class AreaSwitcher {
+import {Animator} from "./animator.js";
+class AreaSwitcher extends Animator{
     constructor() {
+		super();
+		// Converted from a standalone class; opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour.
+		this._noTheme = true;
       
       this.gridContainer = document.createElement("div");
       this.gridContainer.classList.add("grid-container");
@@ -120,9 +125,13 @@ for (var i = 0; i < arr.length - 1; i++){
   // Usage example:
   
   
-  class GridSwitcher {
+  class GridSwitcher extends Animator{
     constructor(){
-     this.el = document.createElement("div");
+		super();
+		// Converted from a standalone class; opting out of Theme keeps rendering
+		// byte-identical to the pre-conversion behaviour.
+		this._noTheme = true;
+     this.res = document.createElement("div");
      this.gridWrap = document.createElement("div");
     }
 
@@ -141,7 +150,7 @@ for (var i = 0; i < arr.length - 1; i++){
               let mq = window.matchMedia(`(max-width: ${val.at})`).matches;
               if ((mq || val.at == "default") && mq !== this.lastMq){
                   const update = new Simple().set(val.template, this.dynamicItems).render();
-                  this.el = update;
+                  this.res = update;
                   this.render(this.domStr);
                   this.lastMq = mq;
               }
@@ -154,7 +163,7 @@ for (var i = 0; i < arr.length - 1; i++){
   
     render(div){
       this.gridWrap.innerHTML = "";
-      this.gridWrap.appendChild(this.el);
+      this.gridWrap.appendChild(this.res);
 
   if (div){
     document.querySelector(div).appendChild(this.gridWrap);
@@ -162,7 +171,7 @@ for (var i = 0; i < arr.length - 1; i++){
 
   return this.gridWrap;
 
-      // Just return this.el it normally
+      // Just return this.res it normally
     }
   }
   

package/layout/grid.js

@@ -1,11 +1,16 @@
 /*!
- * nodality v1.0.220
+ * nodality v1.0.224
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-class Grid {
+import {Animator} from "./animator.js";
+class Grid 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/horizontal-scroller.js

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

package/layout/image.js

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