nodality 1.3.11 → 1.3.13

package/layout/image.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.11
+ * nodality v1.3.13
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -154,7 +154,7 @@ let obj = options;
 		options.index && (this.index = options.index);
 		options.index && (stra += `\n index: "${options.index}",`);
 
-		options.resprop && this.resprop(options.resprop);
+		options.resprop && this.resprop(options.resprop, options);
 		
 		if (options.centerSelf){
 			this.res.style.marginRight = "auto";
@@ -272,6 +272,9 @@ let obj = options;
 	options.clipPath && this.clipPath(options.clipPath);
 	options.clipPath && (stra += `clipPath: "${options.clipPath}", \n`);
 
+	//@ img.reveal {object}: Reveal the image through a mask as it scrolls into view: {mask: "square", size: 0.3, duration: "1.2s", easing, zoom: 1.12, offset: 0.2, delay: "0s", once: true}. It starts as a centred square `size` × its shorter side and opens to the full frame once the square rises `offset` of the viewport height above the bottom edge. Owns clip-path and scale while it runs; reduced-motion visitors, and pages with no IntersectionObserver (the prerender), get the image unmasked.
+	options.reveal && this.reveal(options.reveal);
+
 
 // console.log("261");
 // console.warn(obj);
@@ -674,6 +677,94 @@ if (mqa.matches){
 		return this;
 	}
 
+	/**
+	 * Scroll reveal through a mask. The masked state is applied only where it
+	 * can be undone: with no window, no IntersectionObserver (the jsdom
+	 * prerender) or a reduced-motion preference the image stays unmasked,
+	 * because a mask that never opens hides the content for good.
+	 *
+	 * The square is a true square: clip-path's inset() percentages resolve
+	 * per axis, so on a portrait or wide frame a percentage inset draws a
+	 * rectangle. The insets are measured in px instead and re-measured when
+	 * the frame resizes; the percentage form is only the pre-layout guess.
+	 *
+	 * The zoom uses the `scale` property, not `transform`, so it composes with
+	 * any transform the page sets instead of overwriting it.
+	 */
+	reveal(opts) {
+		const el = this.res;
+		const o = opts && typeof opts === "object" ? opts : {};
+		const mask = o.mask ?? "square";
+		if (mask !== "square") {
+			console.warn(`nodality: img.reveal mask "${mask}" is not supported — use "square".`);
+			return this;
+		}
+		if (typeof window === "undefined" || typeof window.IntersectionObserver !== "function") return this;
+		const reduced = typeof window.matchMedia === "function" &&
+			window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		if (reduced) return this;
+
+		const size = Math.min(1, Math.max(0, Number(o.size ?? 0.3)));
+		const duration = o.duration ?? "1.2s";
+		const easing = o.easing ?? "cubic-bezier(0.76, 0, 0.24, 1)";
+		const delay = o.delay ?? "0s";
+		const zoom = Number(o.zoom ?? 1.12);
+		const once = o.once !== false;
+		const transition = ["clip-path", "scale"].map((p) => `${p} ${duration} ${easing} ${delay}`).join(", ");
+
+		let open = false;
+		const closed = () => {
+			const w = el.clientWidth, h = el.clientHeight;
+			if (!w || !h) return `inset(${(1 - size) * 50}% ${(1 - size) * 50}%)`;
+			const s = Math.min(w, h) * size;
+			return `inset(${(h - s) / 2}px ${(w - s) / 2}px)`;
+		};
+		// Re-measuring a closed mask must not animate: the frame's first
+		// layout would otherwise play as a 1.2s morph from the guess.
+		const settle = () => {
+			el.style.transition = "none";
+			el.style.clipPath = closed();
+			void el.offsetWidth;
+			el.style.transition = transition;
+		};
+
+		el.style.clipPath = closed();
+		el.style.scale = String(zoom);
+		el.style.willChange = "clip-path, scale";
+		el.style.transition = transition;
+
+		const ro = typeof window.ResizeObserver === "function"
+			? new window.ResizeObserver(() => { if (!open) settle(); })
+			: null;
+		ro && ro.observe(el);
+
+		// Triggered by a LINE, not an area ratio: the browser clips the target
+		// by its own clip-path when it measures the intersection, so a closed
+		// square never shows more than its own share of the frame (about 8% at
+		// size 0.3) and a `threshold` of 0.35 would never be reached. Instead
+		// the square opens once it rises `offset` of the viewport above the
+		// bottom edge.
+		const offset = Math.min(0.9, Math.max(0, Number(o.offset ?? 0.2)));
+		const io = new window.IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting && !open) {
+					open = true;
+					el.style.clipPath = "inset(0px 0px)";
+					el.style.scale = "1";
+					if (once) { io.disconnect(); ro && ro.disconnect(); }
+				} else if (!entry.isIntersecting && open && !once) {
+					open = false;
+					el.style.clipPath = closed();
+					el.style.scale = String(zoom);
+				}
+			}
+		}, { threshold: 0, rootMargin: `0px 0px ${-offset * 100}% 0px` });
+		io.observe(el);
+
+		el.addEventListener("transitionend", () => { if (open && once) el.style.willChange = "auto"; });
+		return this;
+	}
+
 	clipPath(pathData) {
         // Create a unique ID for the clip path
        

package/layout/index.js

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

package/layout/link.js

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

package/layout/list.js

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

package/layout/meta-adder.js

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

package/layout/modal-2025.js

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

package/layout/morph.js

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

package/layout/multiswitcher.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.11
+ * nodality v1.3.13
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -57,7 +57,11 @@ str += `{ at: "${this.options.breakpoints[i].at}", view: ${this.options.breakpoi
 
    //   console.log(str);
 
-      return [`new Switcher().set({
+      // The id is applied in render(), but only if the generated code carries
+      // it — and this used to leave it out, so every nav, sideNav and
+      // multiswitcher rendered without the id its element declared.
+      const idLine = this._id ? `\n        id: ${JSON.stringify(String(this._id))},` : "";
+      return [`new Switcher().set({${idLine}
         breakpoints: [
         ${str}
         ]

package/layout/nav-bar.js

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

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

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

package/layout/new-nav-bar.js

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

package/layout/polygon.js

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

package/layout/prerender-site.js

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

package/layout/prerender.js

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

package/layout/progress.js

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

package/layout/row.js

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

package/layout/scroll-video.js

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

package/layout/side-bar.js

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

package/layout/side-nav-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.11
+ * nodality v1.3.13
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -16,6 +16,11 @@ class SideNav extends Animator {
        this.setTags(this.obj.tags);
         this.animate = this.obj.animate !== undefined ? this.obj.animate : true; // could be never false
         this.res = this.createSideNav(obj);
+        // SideNav is configured through setup(), not set(), so the base
+        // class that applies an element's id after set() never runs here.
+        if (obj && obj.id != null && obj.id !== "" && this.res && this.res.setAttribute) {
+            this.res.setAttribute("id", String(obj.id));
+        }
         this.res.style.position = "relative";
         this.res.style.zIndex = 3;
         this.closed = true; // Set to true initially, so it's closed by default

package/layout/simple-bar.js

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

package/layout/slider-2025.js

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

package/layout/spacer.js

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

package/layout/stack.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.11
+ * nodality v1.3.13
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -30,6 +30,7 @@ class Stack extends Animator {
     }
     
     set(obj){
+        this.options = obj || {};
         this.setup();
         obj.height && (this.res.style.height = obj.height);
         obj.sticky && this.sticky();
@@ -57,7 +58,9 @@ class Stack extends Animator {
 
     toCode() {
         // Initialize the code string with the Stack setup
-        let code = `new Stack().set({})`;
+        // Was a hardcoded `set({})`, which dropped the element's id.
+        const id = this.options && this.options.id;
+        let code = `new Stack().set(${id ? `{ id: ${JSON.stringify(String(id))} }` : "{}"})`;
         
         // Add child elements
         if (this.children.length > 0) {

package/layout/svg.js

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

package/layout/switcher.js

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

package/layout/table.js

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

package/layout/text-field.js

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

package/layout/text.js

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

package/layout/ulist.js

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

package/layout/video.js

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

package/layout/wrap.js

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

package/layout/zoom-card.js

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

package/lib/agent-surface.js

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

package/lib/card-getter.js

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

package/lib/check-page.js

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

package/lib/codegen.js

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

package/lib/data.js

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

package/lib/designer.js

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

package/lib/element-mapper.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.11
+ * nodality v1.3.13
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -196,15 +196,28 @@ class ElementMapper { // 22:09:58 04/11/2024
             // FilePickera, `container` on Switcher. A mapper that returns
             // emitted CODE rather than an instance (cards, copy) carries the
             // id in the source it emits, and there is no node here to write.
+            // The generated code is what Des actually runs, so the id has to
+            // be IN it. Most components serialise `this.options` in toCode();
+            // a mapper that builds its own options object (table, circle,
+            // polygon…) leaves the id out of them, and the rendered element
+            // loses it. Put it back before the code is taken.
+            //
+            // The element's declared id also WINS over one a mapper hardcoded:
+            // `free` emitted `id: "#3"` for every free element on a page.
+            // SideNav keeps its config in `obj` rather than `options`.
+            const declared = String(id);
+            if (built && typeof built === "object") {
+                if (built.options && typeof built.options === "object") built.options.id = declared;
+                if (built.obj && typeof built.obj === "object") built.obj.id = declared;
+            }
             const node = built && (built.res || built.formElement || built.el || built.container);
             if (node && typeof node.setAttribute === "function") {
                 const current = node.getAttribute("id");
-                // `#hero` and `hero` name the same element everywhere else, so
-                // the attribute is written without the hash whether the id
-                // arrived here or was set by the component itself. An
-                // attribute spelled "#hero" matches no selector.
-                if (!current) node.setAttribute("id", String(id).replace(/^#/, ""));
-                else if (current.startsWith("#")) node.setAttribute("id", current.slice(1));
+                // Written exactly as declared, hash and all. Ids are compared in
+                // normalised form everywhere (see sameId), and the DOM keeps the
+                // author's spelling so that a page selecting [id="#hero"] keeps
+                // working — normalising here broke exactly such pages.
+                if (!current) node.setAttribute("id", String(id));
             }
         }
         return built;
@@ -515,7 +528,7 @@ animation: {
   justifyContent: "center",
   alignItems: "center",
   position: "absolute",
-  id: "${obj.el.id ? String(obj.el.id).replace(/^#/, "") : "first"}",
+  id: "${obj.el.id ? String(obj.el.id) : "#first"}",
   scale: 0.3,
   ${ft?.animation ? animation : ""}${
     // Wrapper routes its options through commonMethods(), so a raster
@@ -1713,7 +1726,7 @@ return new Circle()
 
 // Was `{ id: "hex" }` hardcoded, so every polygon on a page rendered the
   // same id and none could be targeted individually.
-  let elo = new Polygon({ id: el.id ? String(el.id).replace(/^#/, "") : "hex" })
+  let elo = new Polygon({ id: el.id ? String(el.id) : "hex" })
   .set({
     sides: count,
     size: 300,
@@ -1870,7 +1883,11 @@ return new Circle()
 
                    
 
-                    re["font"] = "Arial";
+                    // Arial is the default, not an override: this used to discard
+                    // the element's own font, so a link could never match the
+                    // page's typography — a nav in the page's mono rendered in
+                    // Arial with nothing reported.
+                    re["font"] = obj.el.font ?? "Arial";
                     re["fluidc"] = obj.el.fluidc;
                   //  re["index"] = obj.i + "", // add other options here
 
@@ -1887,7 +1904,8 @@ return new Circle()
                     // mapWrap. Link takes `raster` through commonMethods like
                     // every other component; only the wiring was missing.
                     re["raster"] = this.filteroRaster(obj.el.id, obj.customOptions);
-                    re["pad"] = [{ "a": 10 }];
+                    // Same pattern: the element's padding wins over the default.
+                    re["pad"] = obj.el.pad ?? [{ "a": 10 }];
 
                 if (bst.length > 0) {
                         ela = LinkStyler.style({