nodality 1.3.7 → 1.3.9

package/layout/new-nav-bar.js

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

package/layout/polygon.js

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

package/layout/prerender-site.js

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

package/layout/prerender.js

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

package/layout/progress.js

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

package/layout/row.js

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

package/layout/scroll-video.js

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

package/layout/side-bar.js

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

package/layout/side-nav-bar.js

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

package/layout/simple-bar.js

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

package/layout/slider-2025.js

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

package/layout/spacer.js

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

package/layout/stack.js

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

package/layout/svg.js

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

package/layout/switcher.js

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

package/layout/table.js

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

package/layout/text-field.js

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

package/layout/text.js

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

package/layout/ulist.js

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

package/layout/video.js

@@ -1,65 +1,230 @@
 /*!
- * nodality v1.3.7
+ * nodality v1.3.9
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-import {Animator} from "./animator.js";
+import { Animator } from "./animator.js";
+import { toObjectSource } from "../lib/codegen.js";
 
+// Video — a <video> element as data.
+//
+// Two shapes, because the web has two:
+//
+//   a player      { url, controls: true }            — the default, unchanged
+//   an ambient loop
+//                 { sources: [...], autoplay: true, loop: true,
+//                   muted: true, playsinline: true, controls: false }
+//
+// The loop shape is the one this component grew for. It carries the things a
+// muted background clip cannot work without and that a page should not have to
+// reach into the DOM to set: the playback attributes, several encodings behind
+// one element, a poster to hold the layout while bytes arrive, playback that
+// only runs while the element is on screen, and a still image instead of
+// motion for anyone who has asked for less of it.
+//
+// Three behaviours are automatic, because getting them wrong is the norm:
+//
+//   • `autoplay` implies `muted`. Every browser blocks an unmuted autoplay,
+//     and a clip that silently refuses to start is the hardest kind of bug to
+//     see. Pass `muted: false` explicitly to override and accept the block.
+//   • An autoplaying clip is paused while off screen and while the tab is
+//     hidden, and resumes when it comes back. Decoding video nobody is looking
+//     at is the single most expensive thing an ambient loop can do.
+//   • `prefers-reduced-motion: reduce` cancels autoplay and leaves the poster
+//     showing. The clip is still playable if it has controls.
+
+const isPlayable = (v) => v && typeof v.play === "function";
+
+// Enough to save callers writing the MIME type for the formats a site ships.
+const MIME = {
+	mp4: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+	m4v: "video/mp4",
+	mov: "video/quicktime",
+	webm: "video/webm",
+	ogv: "video/ogg",
+	ogg: "video/ogg",
+};
+
+const typeFor = (url) => {
+	const ext = String(url || "").split("?")[0].split("#")[0].split(".").pop().toLowerCase();
+	return MIME[ext] || "";
+};
 
-	
-	
 class Video extends Animator {
-	constructor(url, /*obj*/) {
+	constructor(url) {
 		super();
 		this.url = url;
+		this.options = {};
 		this.res = null;
-		
 		this.setup();
 	}
-		
-		
-		
-		setup(){
-			this.res = document.createElement("video");
-			this.res.setAttribute("src", this.url);
-			this.res.setAttribute("controls", "controls");
+
+	setup() {
+		const el = document.createElement("video");
+		if (this.url != null) el.setAttribute("src", this.url);
+		// Controls stay on by default: a bare `new Video(url)` has always been
+		// a player, and pages depend on that. `controls: false` opts out.
+		el.setAttribute("controls", "controls");
+		this.res = el;
+		return this;
+	}
+
+	set(obj = {}) {
+		this.options = obj;
+		const v = this.res;
+
+		//@ video.sources: Several encodings of the same clip: [{url, type}] or plain url strings. The browser picks the first it can play, so order best-first (AV1, then HEVC, then H.264). `type` is inferred from the extension when omitted.
+		if (Array.isArray(obj.sources) && obj.sources.length) {
+			// A `src` attribute wins over <source> children, so it has to go.
+			v.removeAttribute("src");
+			for (const child of [...v.querySelectorAll("source")]) child.remove();
+			const list = obj.sources.concat(this.url != null ? [this.url] : []);
+			const seen = new Set();
+			for (const entry of list) {
+				const url = typeof entry === "string" ? entry : entry && entry.url;
+				if (!url || seen.has(url)) continue;
+				seen.add(url);
+				const source = document.createElement("source");
+				source.setAttribute("src", url);
+				const type = (typeof entry === "object" && entry.type) || typeFor(url);
+				if (type) source.setAttribute("type", type);
+				v.appendChild(source);
+			}
+		}
+
+		//@ video.poster: Image shown before the first frame decodes. Give one on any autoplaying clip: it is what holds the layout still and what reduced-motion visitors see instead of the video.
+		obj.poster && v.setAttribute("poster", obj.poster);
+
+		//@ video.preload: "none", "metadata" (a good default for a loop) or "auto".
+		obj.preload && v.setAttribute("preload", obj.preload);
+
+		//@ video.controls: Show the browser's playback controls. Default true — pass false for an ambient loop.
+		if (obj.controls === false) v.removeAttribute("controls");
+		else if (obj.controls === true) v.setAttribute("controls", "controls");
+
+		//@ video.loop: Restart when the clip ends.
+		obj.loop && (v.loop = true, v.setAttribute("loop", "loop"));
+
+		//@ video.playsinline: Play in place on iPhone instead of taking over the screen. Implied by `autoplay`; there is no reason to refuse it on a background loop.
+		const playsinline = obj.playsinline ?? obj.autoplay;
+		if (playsinline) {
+			v.setAttribute("playsinline", "");
+			v.setAttribute("webkit-playsinline", "");
+		}
+
+		//@ video.muted: Mute the audio track. Forced on by `autoplay`, because browsers block an unmuted autoplay; pass false only if you mean to accept that.
+		const muted = obj.muted ?? (obj.autoplay ? true : undefined);
+		if (muted === true) {
+			v.muted = true;
+			v.setAttribute("muted", "");
+		} else if (muted === false) {
+			v.muted = false;
+			v.removeAttribute("muted");
+		}
+
+		//@ video.autoplay: Start on its own. Implies muted and playsinline, pauses off screen and in a hidden tab, and is cancelled by prefers-reduced-motion (the poster stays).
+		//@ video.lazy: Only play while on screen. On by default whenever `autoplay` is set; pass false to keep an autoplaying clip running off screen.
+		if (obj.autoplay) this._autoplay(obj.lazy !== false);
+
+		//@ video.objectFit: How the frame fills the element box: "cover", "contain", "fill", "none".
+		obj.objectFit && (v.style.objectFit = obj.objectFit);
+
+		//@ video.aspectRatio: Box proportion held before the video loads, e.g. "16 / 9". Prevents the page shifting when the first frame arrives.
+		obj.aspectRatio && (v.style.aspectRatio = obj.aspectRatio);
+
+		//@ video.label: Accessible name, for a clip that carries meaning.
+		obj.label && v.setAttribute("aria-label", obj.label);
+
+		//@ video.decorative: Hide from assistive technology. For an ambient loop that repeats what the page already says in text.
+		if (obj.decorative) v.setAttribute("aria-hidden", "true");
+
+		//@ video.background: CSS background behind the frame — visible while the poster loads.
+		obj.background && (v.style.background = obj.background);
+		//@ video.height: CSS height of the element.
+		obj.height && (v.style.height = obj.height);
+		//@ video.maxWidth: CSS max-width of the element.
+		obj.maxWidth && (v.style.maxWidth = obj.maxWidth);
+		//@ video.radius: Corner radius. A CSS length; a bare number is read as pixels.
+		obj.radius && (v.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : obj.radius);
+		//@ video.width: CSS width of the element.
+		obj.width && (v.style.width = `${obj.width}`);
+		//@ video.opacity: 0–1.
+		obj.opacity && (v.style.opacity = obj.opacity);
+
+		//@ video.raster: Raster op nodes to run over this element.
+		obj.raster && this.rasterize(obj.raster);
+
+		return this;
+	}
+
+	// Start playing, but only when it is reasonable to: motion is wanted, the
+	// element is on screen, and the tab is in front.
+	_autoplay(lazy) {
+		const v = this.res;
+		if (typeof window === "undefined" || !isPlayable(v)) return this;
+
+		const reduced = typeof window.matchMedia === "function" &&
+			window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		if (reduced) {
+			// Deliberately NOT an autoplay attribute: the poster stays, and the
+			// clip remains playable by anyone who wants it.
+			v.removeAttribute("autoplay");
+			return this;
 		}
 
+		v.setAttribute("autoplay", "");
+		// play() rejects when a policy blocks it. That is not an error worth
+		// throwing into a page — the poster is still there.
+		const play = () => { const p = v.play(); p && p.catch && p.catch(() => {}); };
 
-		set(obj){
-			this.options = obj;
-			obj.radius && (this.res.style.borderRadius = obj.radius);
-			obj.width && (this.res.style.width = `${obj.width}`);
-			obj.opacity && (this.res.style.opacity = obj.opacity);
+		if (!lazy || typeof window.IntersectionObserver !== "function") {
+			play();
 			return this;
 		}
-		
-		
-		
-		size(w/*, h*/) {
-			
-			this.res.style.width = w;
-			
-			
 
+		this._visible = false;
+		const io = new window.IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				this._visible = entry.isIntersecting;
+				if (entry.isIntersecting && !this._hidden) play();
+				else v.pause();
+			}
+		}, { threshold: 0.2 });
+		io.observe(v);
+		this._track(() => io.disconnect());
+
+		this._hidden = false;
+		this._on(document, "visibilitychange", () => {
+			this._hidden = document.hidden;
+			if (document.hidden) v.pause();
+			else if (this._visible) play();
+		});
+		return this;
+	}
+
+	play() { isPlayable(this.res) && this.res.play()?.catch?.(() => {}); return this; }
+	pause() { isPlayable(this.res) && this.res.pause(); return this; }
+
+	size(w) {
+		this.res.style.width = w;
 		return this;
 	}
-		
+
 	toCode() {
-        const objString = JSON.stringify(this.options, null, 4);
-        return [`new Video("${this.url}").set(${objString})`];
-    }
-	
-		render(el) {
+		const cleaned = Object.fromEntries(
+			Object.entries(this.options || {}).filter(([, v]) => v != null)
+		);
+		return [`new Video("${this.url}").set(${toObjectSource(cleaned, 4)})`];
+	}
+
+	render(el) {
 		if (el) {
-			document.querySelector(el).appendChild(this.res);
-		} else {
+			document.querySelector(el)?.appendChild(this.res);
 			return this.res;
 		}
+		return this.res;
 	}
-	}
-	
-	
-	
+}
+
 export { Video };

package/layout/wrap.js

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

package/layout/zoom-card.js

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

package/lib/agent-surface.js

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

package/lib/card-getter.js

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

package/lib/check-page.js

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

package/lib/codegen.js

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

package/lib/data.js

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

package/lib/designer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.7
+ * nodality v1.3.9
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -75,6 +75,7 @@ import { ScrollVideo } from "../lib/scroll-video.js";
 import { AreaSwitcher } from "../layout/grid-switcher.js";
 import { Polygon } from "../layout/polygon.js";
 import { Circle } from "../layout/circle.js";
+import { GridOverlay } from "../layout/grid-overlay.js";
 
 
 
@@ -1444,7 +1445,8 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
         const layout = {
   Text, Image, Link, FlexRow, UINavBar, Free, Audio, Progress, Center, Code,
   Stack, Wrapper, MetaAdder, Table, Dropdown, Modal, TextField, Card,
-  Wrap, FlexGrid, ZoomCard, Switcher, MobileBar, DesktopBar, SideNav, Spacer, HScroller, Polygon, Circle, UList
+  Wrap, FlexGrid, ZoomCard, Switcher, MobileBar, DesktopBar, SideNav, Spacer, HScroller, Polygon, Circle, UList,
+  GridOverlay
 };
 
 const formComponents = {

package/lib/element-mapper.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.7
+ * nodality v1.3.9
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -70,6 +70,7 @@ import { ScrollVideo } from "../lib/scroll-video.js";
 import { AreaSwitcher } from "../layout/grid-switcher.js";
 import { Polygon } from "../layout/polygon.js";
 import { Circle } from "../layout/circle.js";
+import { GridOverlay } from "../layout/grid-overlay.js";
 
 
 // The closed set of `type:` values mapType understands, in the order it
@@ -81,6 +82,7 @@ const ELEMENT_TYPES = [
     "radio", "input", "labelInput", "filePicker", "picker", "video",
     "audio", "multiswitcher", "button", "form", "checkbox", "stack",
     "simple", "copy", "wrap", "circle", "polygon", "code", "table", "ulist",
+    "gridOverlay",
 ];
 
 // A nav entry is {title, link}. A bare string is accepted as the title: that
@@ -248,6 +250,8 @@ class ElementMapper { // 22:09:58 04/11/2024
             return this.mapTable(obj);
          } else if (obj.el.type === "ulist"){
             return this.mapUList(obj);
+         } else if (obj.el.type === "gridOverlay"){
+            return this.mapGridOverlay(obj);
          }
 
         // Everything above returned. Falling through used to return
@@ -692,6 +696,37 @@ animation: {
    
 
 
+    // A blueprint grid over the page. Only the keys a spec actually set are
+    // passed on: GridOverlay supplies its own defaults for the rest, and an
+    // explicit `undefined` would also surface in toCode().
+    //
+    // Kept ABOVE `dropdown` on purpose. scripts/generate-schema.mjs finds a
+    // method's body by counting braces after stripping `//` comments, and the
+    // strip also cuts `//` inside URL strings, dropping their closing braces.
+    // The bodies of dropdown, protoNav and sideNav therefore run to the end of
+    // the class, so a mapper placed below them has its parameters credited to
+    // those three types as well.
+    static mapGridOverlay(obj){
+        const el = obj.el;
+        const options = {
+            id: el.id,
+            columns: el.columns, rows: el.rows, inset: el.inset, color: el.color,
+            lineWidth: el.lineWidth, lineOpacity: el.lineOpacity,
+            marks: el.marks, markSize: el.markSize,
+            position: el.position, zIndex: el.zIndex,
+            font: el.font, fontSize: el.fontSize, letterSpacing: el.letterSpacing,
+            uppercase: el.uppercase, breakpoint: el.breakpoint,
+            mobile: el.mobile, readouts: el.readouts,
+            raster: this.filteroRaster(el.id, obj.customOptions),
+        };
+        for (const key of Object.keys(options)) {
+            if (options[key] == null) delete options[key];
+        }
+        return new GridOverlay().set(options);
+    }
+
+
+
     static dropdown(obj){
         // A label for the trigger, which is what makes every declared option
         // selectable. Without one the first item becomes the label and is
@@ -1648,8 +1683,6 @@ let elo = new Polygon({ id: "hex" })
 
   return elo;
  }
-
-
     static mapText(obj) {
       //  console.log(obj.el.type);
 

package/lib/element-params.generated.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.7
+ * nodality v1.3.9
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -8,4 +8,4 @@
 // Every parameter name any element type reads, recovered from source.
 // Used for near-miss typo detection in validate-nodes.js. A drift test
 // regenerates this and fails if it differs, so it cannot rot silently.
-export const ELEMENT_PARAM_NAMES = ["absolute","accept","action","align","alignIts","alignTo","aligns","alt","animate","animation","area","arrayMargin","arrayPadding","as","at","auto","backTo","background","backgroundCard","backgroundColor","backgroundOp","behaviour","blast","blastData","block","bold","border","borderObj","borderObja","borderRadius","brand","breakWord","breakpoints","cellAlign","cellPadding","center","centerColumn","centerSelf","centered","checkedBackgroundColor","child","children","clampc","class","clipPath","code","colat","color","column","contentWidth","cursor","customAlign","customJustify","customStyle","data","decoding","diameter","disp","dropdown","em","exact","fetchPriority","filter","filtera","fitContent","fixMobileTap","fixed","flex","flexCenter","flexDir","fluid","fluidc","font","frame","ga","gap","gpos","gradient","hamColour","hamburgerColour","headStyle","height","hideField","hideOverflow","hover","icon","id","img","index","initLetter","inline","inpad","inputType","isBackground","isFull","isHidden","isLink","isNavA","italic","items","justifo","justify","keySet","kind","label","layout","left","length","link","loading","map","mar","margin","marginOp","maxHeight","maxWidth","mboth","method","minHeight","mobile","multiple","name","new","nowrap","objectFit","objectPosition","offcanvas","okayColor","onScroll","onTap","opacity","overflow","owrap","pad","padding","placeholder","position","positions","preffersId","radius","ranges","raster","react","removeDecoration","required","resmar","respad","responsive","resprop","rounded","scale","sequence","shadow","sides","simpleBorder","simpleCenter","size","sizes","span","srcset","sticky","stretch","stroke","style","stype","svg","tag","tags","templateCols","text","theme","tint","title","toColumn","top","transform","transition","type","url","useBrightness","value","vtn","weight","width","wrap","x","y","zIndex"];
+export const ELEMENT_PARAM_NAMES = ["absolute","accept","action","align","alignIts","alignTo","aligns","alt","animate","animation","area","arrayMargin","arrayPadding","as","aspectRatio","at","auto","autoplay","backTo","background","backgroundCard","backgroundColor","backgroundOp","behaviour","blast","blastData","block","bold","border","borderObj","borderObja","borderRadius","brand","breakWord","breakpoint","breakpoints","cellAlign","cellPadding","center","centerColumn","centerSelf","centered","checkedBackgroundColor","child","children","clampc","class","clipPath","code","colat","color","column","columns","contentWidth","controls","cursor","customAlign","customJustify","customStyle","data","decoding","decorative","diameter","disp","dropdown","em","exact","fetchPriority","filter","filtera","fitContent","fixMobileTap","fixed","flex","flexCenter","flexDir","fluid","fluidc","font","fontSize","frame","ga","gap","gpos","gradient","hamColour","hamburgerColour","headStyle","height","hideField","hideOverflow","hover","icon","id","img","index","initLetter","inline","inpad","inputType","inset","isBackground","isFull","isHidden","isLink","isNavA","italic","items","justifo","justify","keySet","kind","label","layout","lazy","left","length","letterSpacing","lineOpacity","lineWidth","link","loading","loop","map","mar","margin","marginOp","markSize","marks","maxHeight","maxWidth","mboth","method","minHeight","mobile","multiple","muted","name","new","nowrap","objectFit","objectPosition","offcanvas","okayColor","onScroll","onTap","opacity","overflow","owrap","pad","padding","placeholder","playsinline","position","positions","poster","preffersId","preload","radius","ranges","raster","react","readouts","removeDecoration","required","resmar","respad","responsive","resprop","rounded","rows","scale","sequence","shadow","sides","simpleBorder","simpleCenter","size","sizes","sources","span","srcset","sticky","stretch","stroke","style","stype","svg","tag","tags","templateCols","text","theme","tint","title","toColumn","top","transform","transition","type","uppercase","url","useBrightness","value","vtn","weight","width","wrap","x","y","zIndex"];