nodality 1.0.221 → 1.1.0

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (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.
@@ -2034,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.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/audionew.js

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

package/layout/base.js

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

package/layout/beta-desktop-bar.js

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

package/layout/beta-mobile-bar.js

@@ -1,10 +1,11 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/center.js

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

package/layout/checkbox.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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})`;
     }

package/layout/dropdown-2025.js

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

package/layout/flex-card.js

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

package/layout/flex-grid.js

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

package/layout/flex-row.js

@@ -1,11 +1,12 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (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, "\\`") + "`";

package/layout/form-components/custom.js

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

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

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

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

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

package/layout/form-components/picker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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.221
+ * nodality v1.1.0
  * (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,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/grid.js

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

package/layout/horizontal-scroller.js

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

package/layout/image.js

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

package/layout/index.js

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

package/layout/link.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -7,6 +7,8 @@
 import {Animator} from "./animator.js";
 
 
+import { toObjectSource } from "../lib/codegen.js";
+import { keyPattern } from "../lib/codegen.js";
 class Link extends Animator {
 	constructor(text, link, stopEM){
 		super();
@@ -80,9 +82,7 @@ if (isExternal || isAnchor || url.endsWith(".html") || isScheme) {
    		 Object.entries(this.options).filter(([key, value]) => value !== null)
 		);
 
-		const objString = JSON
-			.stringify(cleanedObj, null, 4)
-			.replace(/"([^"]+)":/g, '$1:');
+		const objString = toObjectSource(cleanedObj, 4);
 
         return [`new Link().set(${objString})`];
 	}
@@ -162,7 +162,7 @@ if (isExternal || isAnchor || url.endsWith(".html") || isScheme) {
 		if (!jsonString){
 			return;
 		}
-		const modifiedJSON = jsonString.replace(/"([^"]+)":/g, '$1:');
+		const modifiedJSON = jsonString.replace(keyPattern(), "$1:");
 		return modifiedJSON;
 	  }
 

package/layout/list.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -128,7 +128,6 @@ class Cell extends Animator{
 		return this.res;
 	}
 }
-window.List = List;
-window.Cell = Cell;
-
+if (typeof window !== "undefined") window.List = List;
+if (typeof window !== "undefined") window.Cell = Cell;
 export { List, Cell };

package/layout/meta-adder.js

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

package/layout/modal-2025.js

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