nodality 1.0.221 → 1.1.0

package/layout/multiswitcher.js

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

package/layout/prerender.js

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

package/layout/progress.js

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

package/layout/row.js

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

package/layout/scroll-video.js

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

package/layout/side-bar.js

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

package/layout/side-nav-bar.js

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

package/layout/simple-bar.js

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

package/layout/slider-2025.js

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

package/layout/spacer.js

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

package/layout/stack.js

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

package/layout/svg.js

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

package/layout/table.js

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

package/layout/text-field.js

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

package/layout/text.js

@@ -1,11 +1,13 @@
 /*!
- * 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";
+import { keyPattern } from "../lib/codegen.js";
 // 13:28 07/04/2020 - BEGIN NOTHING GONNA STOP US NOW  Lets go!
 
 // 22:29:11
@@ -37,9 +39,7 @@ class Text extends Animator {
    		 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 Text("${this.text}").set(${objString})`];
 	}
@@ -99,7 +99,7 @@ class Text extends Animator {
 	}
 
 	 removeQuotesFromFirstWord(jsonString) {
-		const modifiedJSON = jsonString.replace(/"([^"]+)":/g, '$1:');
+		const modifiedJSON = jsonString.replace(keyPattern(), "$1:");
 		return modifiedJSON;
 	  }
 	  

package/layout/ulist.js

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

package/layout/video.js

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

package/layout/wrap.js

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

package/layout/zoom-card.js

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

package/lib/card-getter.js

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

package/lib/codegen.js

@@ -0,0 +1,62 @@
+/*!
+ * nodality v1.1.0
+ * (c) 2026 Filip Vabrousek
+ * License: MIT
+ */
+
+/*!
+ * codegen.js — options object -> JavaScript source, for toCode().
+ *
+ * Every toCode() in the library used to hand-roll the same two steps:
+ *
+ *     JSON.stringify(obj, null, 4).replace(/"([^"]+)":/g, '$1:')
+ *
+ * The replace unquotes EVERY key. That is correct for `radius` and wrong
+ * for any key that is not a bare identifier — and the library emits those
+ * now: `vars: { --nod-split: 0.9 }` from the morph expansion, and content
+ * slots like `"main.hero.title"`. Neither parses as JavaScript, so the
+ * emitted code could not be run, pasted, or ejected. Fourteen copies of
+ * the bad spelling had drifted across twelve files, while the correct one
+ * (`/"(\w+)"\s*:/g`) already sat in image.js, table.js, button.js and
+ * side-nav-bar.js — the same rule, written both ways, in one codebase.
+ *
+ * This module is the one place that rule lives now. It is pure: no DOM, no
+ * imports, safe to load anywhere (see __tests__/unit/import-inert).
+ *
+ *   toObjectSource(obj, 4)   // an object -> "{\n    radius: \"2px\"\n}"
+ *   unquoteKeys(jsonString)  // already have the JSON? just fix the keys
+ *   IDENT_KEY                // the pattern, for call sites that chain
+ *                            // further replaces onto the same string
+ */
+
+// A quoted JSON key whose bare form is a valid JS identifier. Anything
+// else — "--nod-split", "main.hero.title", "kebab-case", "0" — is left
+// quoted, because unquoting it would produce a syntax error.
+//
+// Not global-flagged at the source: a /g regex carries mutable lastIndex,
+// and a module-level constant shared by a dozen callers must not. Each
+// consumer gets a fresh copy via keyPattern().
+const IDENT_KEY_SOURCE = '"([A-Za-z_$][A-Za-z0-9_$]*)"\\s*:';
+
+/** A fresh global regex matching unquotable keys. */
+function keyPattern() {
+	return new RegExp(IDENT_KEY_SOURCE, "g");
+}
+
+/** Unquote the identifier-shaped keys of an already-stringified object. */
+function unquoteKeys(jsonString) {
+	if (typeof jsonString !== "string") return jsonString;
+	return jsonString.replace(keyPattern(), "$1:");
+}
+
+/**
+ * Serialize an options object as JavaScript source.
+ *
+ * `indent` matches JSON.stringify's third argument; call sites historically
+ * used 2 or 4 and both are kept so emitted code keeps its existing shape.
+ */
+function toObjectSource(value, indent = 4) {
+	return unquoteKeys(JSON.stringify(value, null, indent));
+}
+
+export { toObjectSource, unquoteKeys, keyPattern };

package/lib/data.js

@@ -1,9 +1,45 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
+/*!
+ * nodality/data — runtime/SSG-aware data loader
+ *
+ * `loadJson(name, opts?)` resolves JSON in whichever environment the
+ * page entry is currently executing:
+ *
+ *   • Browser  → relative `fetch("./<name>")` from the page's URL.
+ *   • Node     → ESM JSON import from `../<name>` relative to this
+ *                module (i.e. from the project's `upload/` directory).
+ *
+ * The two paths differ because under SSG (nodality prerender + jsdom)
+ * there is no dev server to fetch from — fetches silently fail and
+ * the page ships an empty mount. The ESM import path reads the JSON
+ * straight off disk, embedding the data into the prerendered HTML so
+ * crawlers see real content.
+ *
+ * Usage in a page entry:
+ *
+ *   import { loadJson } from "nodality/data";
+ *   const products = await loadJson("products.json");
+ *
+ * Conventions:
+ *   • At runtime the file must live next to the page HTML (so
+ *     `./products.json` resolves under the deployed origin).
+ *   • At build time the file must live in `upload/` (the project's
+ *     `uploadDir`) — which is the same place. Single source of truth.
+ *
+ * `fallback` is an opt-in escape hatch: pass `{ fallback: [] }` to
+ * return the supplied value instead of throwing when the file is
+ * missing. Useful for "team.json doesn't exist yet" stub pages.
+ *
+ * Add `{ quiet: true }` when that missing file is the EXPECTED state, so
+ * the build stays silent for a stub and still warns when a file that is
+ * supposed to be there fails to load.
+ */
+
 const IS_NODE = typeof process !== "undefined" && !!process.versions?.node;
 
 // `nodeImport` is a Function-constructor dynamic import that webpack

package/lib/designer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.221
+ * nodality v1.1.0
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -10,6 +10,7 @@ ElementMapper
 
 // CORE
 import { ElementMapper } from "../lib/element-mapper.js";
+import { applyMorphNodes } from "../lib/morph-node.js";
 import { Animator } from "../layout/animator.js";
 import { Base } from "../layout/base.js";
 import { Text } from "../layout/text.js";
@@ -429,6 +430,11 @@ new Text("row.").set({
 
     add(arr) {
 
+        // Kept for phase T: a morph node resolves `from`/`to` ids against
+        // the rendered children BY POSITION, so it needs the descriptor
+        // order — components do not all carry their id into the DOM.
+        this._elements = Array.isArray(arr) ? arr : [];
+
         this.css = [];
         this.elCSS = [];
         this.elHTML = [];
@@ -1388,6 +1394,17 @@ const components = {
             new Function(...Object.keys(components), sub)(...Object.values(components));
          //   eval(`${sub}`);
         }
+
+        // Morph nodes run LAST, and they run here rather than in the
+        // mapper because they need rendered geometry: a transition
+        // interpolates a box, and both ends are measured from real
+        // layout. Everything above only had descriptors.
+        try {
+            const host = document.querySelector((obj && obj.mount) || "#mount");
+            this._morphs = applyMorphNodes(host, this._elements, this.protoOptions);
+        } catch (e) {
+            console.warn("[nodality] morph node skipped:", e);
+        }
     }
 }