nodality 1.0.212 → 1.0.214

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.212
+ * nodality v1.0.214
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -355,11 +355,11 @@ class Animator {
     }
 //alert(obj.respad);
     // Special methods
-    //@ pad: Padding. Array of side objects — [{t:14},{b:14},{l:30},{r:30}], or [{a:24}] for all sides.
+    //@ pad: Padding. An array of side objects: `pad: [{a: 40}]`. Keys are `a` all, `t` top, `r` right, `b` bottom, `l` left. Keys combine, so `{tb: 12}` sets top and bottom. A bare number is treated as px; any string is passed through, so `{a: "2rem"}` works.
     obj.pad && this.pad(obj.pad);
-    //@ mar: Margin. Same array-of-sides form as `pad`; `mar: "center"` is shorthand for 0 auto.
+    //@ mar: Margin. The same array-of-side-objects form as `pad`: `mar: [{a: 40}]`, keys `a t r b l`, combinable. Additionally `mar: "center"` sets left and right to auto, as does `{a: "auto"}` or `{center: true}`.
     obj.mar && this.mar(obj.mar);
-    //@ respad: Responsive padding — per-breakpoint overrides of `pad`.
+    //@ respad: Responsive padding — per-breakpoint overrides of `pad`, in the same form.
     obj.respad && this.respad(obj.respad);
 
     // `borderObj` was never dispatched from here, so a component with no
@@ -383,19 +383,34 @@ class Animator {
     // idempotent for them.
     //@ borderObj: Border as {width, color, type?, radius?}. Width carries its unit, e.g. "1px".
     obj.borderObj && obj.borderObj.width && this.borderObj(obj.borderObj);
+    //@ resmar: Responsive margin — per-breakpoint overrides of `mar`, in the same form.
     obj.resmar && this.resmar(obj.resmar);
+    //@ hover: Styles applied on hover, e.g. {color, background, animation: "0.2s ease"}.
     obj.hover && this.hover(obj.hover);
+    //@ size: Fluid type scale step (S1…S6) — font size that scales with the viewport.
     obj.size && this.fluidCopy(obj.size);
+    //@ resprop: Per-breakpoint style overrides — [{breakpoint, ...css}]. `exact` is font size.
     obj.resprop && this.resprop(obj.resprop, obj);
     //@ 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.
     obj.noTheme && (this._noTheme = true);
+    //@ theme: Explicit light/dark overrides — {light: {...}, dark: {...}}.
     obj.theme && this.theme(obj.theme);
+    //@ hide: Hide the element without removing it from the tree.
     obj.hide && this.isHidden(obj.hide);
     //@ raster: Attach a WebGL raster pipeline. Array of op nodes; see the Raster section.
     obj.raster && this.rasterize(obj.raster);
+
+  //@ center: Centres this element's CHILDREN. `true` for both axes, `"x"` horizontal, `"y"` vertical. Axis-aware: in a flex column `"y"` is justify-content, in a row it is align-items; a grid uses justify-items/align-items. To centre the element itself inside its parent, use `mar: "center"`.
+    // Dispatched here rather than per component, so it means the same thing
+    // on all of them. It was wired only into Wrapper before, while other
+    // components either had their own copy with a different meaning or no
+    // centring at all.
+    obj.center && this.center(obj.center, {display: obj.disp || obj.display, flexDirection: obj.flexDir || obj.flexDirection});
 	// Only route to the animation system for object-shaped transforms.
 	// String transforms are applied above via the styleMap path.
+ //@ transform: A CSS transform string applied verbatim, or an object handled by reactOnTransform(). Composed with `scale` when both are given.
 	(obj.transform && typeof obj.transform === "object") && this.reactOnTransform(obj.transform);
 
 	(obj.opacity !== undefined) && (this.res.style.opacity = obj.opacity);
@@ -1579,6 +1594,75 @@ resmar(arr) {
 		react();
 	}*/
 
+	/**
+	 * Tells the caller they passed an option that no longer exists as the
+	 * way to do this, and what to use instead.
+	 *
+	 * console.error only, deliberately. alert() is banned in live modules
+	 * (see the "no live module calls alert()" invariant): alerts had sat in
+	 * ordinary paths and blocked the page for every visitor, and the ban is
+	 * worth more than making this one warning louder.
+	 */
+	deprecatedOption(name, replacement) {
+		console.error(`nodality: \`${name}\` is deprecated — use \`${replacement}\` instead.`);
+		return this;
+	}
+
+	/**
+		 * Centres this element's CHILDREN.
+		 *
+		 *   center: true    both axes
+		 *   center: "x"     horizontally only
+		 *   center: "y"     vertically only
+		 *
+		 * Replaces six overlapping methods — toCenter(), toCenter("both"),
+		 * flexc(), toCol(), centerColumn and simpleCenter(). flexc() was
+		 * byte-identical to toCenter() and toCol() to toCenter("both"), so the
+		 * same behaviour had four names and the two that differed did so by
+		 * one property each.
+		 *
+		 * To centre the element ITSELF inside its parent, that is `mar:
+		 * "center"` — a different thing, and the reason the old names were so
+		 * easy to confuse.
+		 *
+		 * Axis-aware rather than fixed. justify-content runs along the main
+		 * axis, so in a flex column it is the VERTICAL one and align-items is
+		 * horizontal — the opposite of a flex row. The old methods hardcoded
+		 * flex-direction: column and so only ever worked one way round; this
+		 * reads the direction already set and centres the axis you asked for.
+		 * A grid gets justify-items/align-items instead, which is what
+		 * simpleCenter() was reaching for without setting a display at all.
+		 */
+		center(axis = true, hint = {}){
+			const s = this.res.style;
+			// The hints matter because this runs from commonMethods, before a
+			// component applies its own `disp`/`flexDir` aliases. Without them
+			// center() sees a bare element, assumes a flex column, and puts the
+			// centring on the wrong property for every row and grid.
+			const display = s.display || hint.display || "";
+			const direction = s.flexDirection || hint.flexDirection || "";
+			const grid = display.includes("grid");
+	
+			const x = axis === true || axis === "both" || axis === "x";
+			const y = axis === true || axis === "both" || axis === "y";
+	
+			if (grid){
+				if (x){ s.justifyItems = "center"; s.justifyContent = "center"; }
+				if (y){ s.alignItems = "center"; s.alignContent = "center"; }
+				return this;
+			}
+	
+			if (!display.includes("flex")) s.display = "flex";
+			if (!s.flexDirection) s.flexDirection = direction || "column";
+	
+			const column = (s.flexDirection || "column").startsWith("column");
+			const mainIsY = column;
+	
+			if (mainIsY ? y : x) s.justifyContent = "center";
+			if (mainIsY ? x : y) s.alignItems = "center";
+			return this;
+		}
+
 	isNumber(value) {
 		return typeof value === 'number' && !isNaN(value);
 	}
@@ -3314,35 +3398,18 @@ removeQuotesFromFirstWord(jsonString) {
   }
   
 
-arrayMargin(arr, value) { // 224857 redefined earlier
 
-	// // console.log(arr);
-	if (arr.includes("left")){
-		this.res.style.marginLeft = value;
-	}
-	
-	if (arr.includes("right")){
-		this.res.style.marginRight = value;
-	}
-	
-	if (arr.includes("top")){
-		this.res.style.marginTop = value;
-	}
-	
-	if (arr.includes("bottom")){
-		this.res.style.marginBottom = value;
-	}
 
-	if (arr.includes("all")){
-		this.res.style.margin = value;
-	}
 
-	if (!value){
-		this.res.style.marginBottom = arr;
-	}
-	
-	return this;
-}
+
+
+
+
+
+
+
+
+
 /*
 
     navBarExpand(){

package/layout/audio.js

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

package/layout/audionew.js

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

package/layout/base-2.js

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

package/layout/base.js

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

package/layout/beta-desktop-bar.js

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

package/layout/beta-mobile-bar.js

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

package/layout/box.js

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

package/layout/button.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.212
+ * nodality v1.0.214
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -187,11 +187,7 @@ this.options = obj;
 		obj.frame  && this.frame(obj.frame);
 		obj.frame && (stra += `\n frame: "${obj.frame}",`);
 
-		obj.arrpad && this.arrayPadding(obj.arrpad.sides, obj.arrpad.value);
-		obj.arrpad && (stra += `\n arrpad: {sides: ["${obj.arrpad.sides}"], value: "${obj.arrpad.value}"},`); // 2345 06/03
 
-		obj.arrayMargin && this.arrayMargin(obj.arrayMargin.sides, obj.arrayMargin.value);
-		obj.arrayMargin && (stra += `\n arrayMargin: {sides: ["${obj.arrayMargin.sides}"], value: "${obj.arrayMargin.value}"},`); // 2345 06/03
 
 		obj.keySet && this.keySet(obj.keySet); // 165411 22/01/25 Nice!
 		
@@ -218,86 +214,7 @@ this.options = obj;
     
 
 	
-	arrayPadding(arr, value) {
-	
-		if (arr.includes("left")){
-			this.res.style.paddingLeft = value;
-		}
-
-		// console.log("PAD");
-		// console.log(this.res.style.paddingLeft);
-		// console.log(arr);
-		// console.log(value);
-		
-		if (arr.includes("right")){
-			this.res.style.paddingRight = value;
-		}
-		
-		if (arr.includes("top")){
-			this.res.style.paddingTop = value;
-		}
-		
-		if (arr.includes("bottom")){
-			this.res.style.paddingBottom = value;
-		}
-
-		if (arr.includes("all")){
-			this.res.style.padding = value;
-		}
-
-		if (!value){
-			this.res.style.paddingBottom = arr;
-				}
-			
-		
-		return this;
-	}
-
-	arrayMargin(arr, value) { // 224857 redefined earlier
-
-		if (!value){ // LTRB
-			this.res.style.marginLeft = `${arr[0]}px`;
-			this.res.style.marginTop = `${arr[1]}px`;
-			this.res.style.marginRight = `${arr[2]}px`;
-			this.res.style.marginBottom = `${arr[3]}px`;
-		}
 
-		
-		if (value === "7rem"){
-			// The text does not react to margin changes
-			// alert(arr);
-			// alert(value);
-		}
-		
-		
-		
-		// // console.log(arr);
-		if (arr.includes("left")){
-			this.res.style.marginLeft = value;
-		}
-		
-		if (arr.includes("right")){
-			this.res.style.marginRight = value;
-		}
-		
-		if (arr.includes("top")){
-			this.res.style.marginTop = value;
-		}
-		
-		if (arr.includes("bottom")){
-			this.res.style.marginBottom = value;
-		}
-
-		if (arr.includes("all")){
-			this.res.style.margin = value;
-		}
-
-		if (!value){
-			this.res.style.marginBottom = arr;
-		}
-		
-		return this;
-	}
     
 
 	fluidButtonCopy(name){

package/layout/cards.js

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

package/layout/center.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.212
+ * nodality v1.0.214
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -100,26 +100,6 @@ return this;
 		return this;
 	}
 	
-	arrayPadding(arr, value) {
-		if (arr.includes("left")){
-			this.res.style.paddingLeft = value;
-		}
-		
-		if (arr.includes("right")){
-			this.res.style.paddingRight = value;
-		}
-		
-		if (arr.includes("top")){
-			this.res.style.paddingTop = value;
-		}
-		
-		if (arr.includes("bottom")){
-			this.res.style.paddingBottom = value;
-		}
-			
-		
-		return this;
-	}
     
     itemWidth(w){
 		for (var i = 0; i < this.res.childNodes.length; i++){

package/layout/checkbox.js

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

package/layout/circle.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.212
+ * nodality v1.0.214
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -51,7 +51,6 @@ class Circle extends Animator {
   // --- Circle-specific API ---
   diameter(px) { this.res.style.width = this.res.style.height = typeof px === "number" ? px + "px" : px; this.res.style.borderRadius = "50%"; return this; }
   size(w, h = w) { this.res.style.width = typeof w === "number" ? w + "px" : w; this.res.style.height = typeof h === "number" ? h + "px" : h; this.res.style.borderRadius = "50%"; return this; }
-  center() { this.res.style.marginLeft = this.res.style.marginRight = "auto"; return this; }
   color(c) { this.res.style.backgroundColor = c; return this; }
   border(spec) { this.res.style.border = typeof spec === "string" ? spec : `${spec?.width || 1}px solid ${spec?.color || "black"}`; return this; }
   radius(r) { this.res.style.borderRadius = typeof r === "number" ? r + "px" : r; return this; }

package/layout/clean-row.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.212
+ * nodality v1.0.214
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -183,16 +183,11 @@ class CleanRow extends Animator {
                      
             
                     //alert(options.arrpad);
-                    options.arrayPadding && this.arrayPadding(options.arrayPadding.sides, options.arrayPadding.value);
             
             
-                    options.arrayMargin && this.arrayMargin(options.arrayMargin.sides, options.arrayMargin.value);
-                    this.arrayMarginValue = options.arrayMargin;
-                    options.arrayMargin && this.code.push(`\n arrayMargin: {sides: [${options.arrayMargin.sides.map(m => `"${m}"`).join(", ")}], value: "${options.arrayMargin.value}"},`); // 2345 06/03
             
                 //	alert(options.multipad);
             
-                    options.multipad && this.makeMultiPad(options.multipad);
             
                     if (options.align){
                         //alert("K")
@@ -335,27 +330,6 @@ class CleanRow extends Animator {
 		return this.code; // 21:40:09
 	}
 
-	arrayPadding(arr, value) {
-		if (arr.includes("left")){
-			this.res.style.paddingLeft = value;
-		}
-		
-		if (arr.includes("right")){
-			//alert("P")
-			this.res.style.paddingRight = value;
-		}
-		
-		if (arr.includes("top")){
-			this.res.style.paddingTop = value;
-		}
-		
-		if (arr.includes("bottom")){
-			this.res.style.paddingBottom = value;
-		}
-			
-		
-		return this;
-	}
 
 	borderAround(data){
 		this.res.style.border = data;
@@ -412,21 +386,6 @@ class CleanRow extends Animator {
  }
 
 
-	makeMultiPad(obj){
-	
-		for (var i = 0; i < obj.length; i++){
-			if (obj[i].side === "left"){
-				
-				this.res.style.paddingLeft = obj[i].value;
-			}
-
-			if (obj[i].side === "right"){
-				this.res.style.paddingRight = obj[i].value;
-			}
-		}
-		
-		return this;
-	}
 
 
 
@@ -435,10 +394,6 @@ class CleanRow extends Animator {
 		return this;
 	}
 	
-	center() {
-	//	this.res.style.justifyItems = "center";
-		return this;
-	}
     
     toColumn(){
         this.res.style.flexDirection = "column";
@@ -452,12 +407,6 @@ class CleanRow extends Animator {
         return this;
     }
     
-    toCenter(classa) {
-        this.res.style.marginLeft = "auto";
-        this.res.style.marginRight = "auto";
-         this.res.setAttribute("class", classa);
-        return this;
-    }
 
 	setup() {
 		let flex = document.createElement("div");
@@ -502,41 +451,6 @@ class CleanRow extends Animator {
 	
 	*/
     
-    arrayMargin(arr, value) {
-
-		//alert(arr);
-		//alert(value);
-
-		// alert(window.matchMedia("(max-device-width: 415px)").matches) 
-//alert("K")
-		if (!value){ // LTRB
-			this.res.style.marginLeft = `${arr[0]}px`;
-			this.res.style.marginTop = `${arr[1]}px`;
-			this.res.style.marginRight = `${arr[2]}px`;
-			this.res.style.marginBottom = `${arr[3]}px`;
-		}
-
-
-	//	alert("ROW.js 452"); //003337
-		//alert(value);
-		if (arr.includes("left")){
-			this.res.style.marginLeft = `${value}px`;
-		}
-		
-		if (arr.includes("right")){
-			this.res.style.marginRight = `${value}px`;
-		} // 161357 Surovikin line
-		
-		if (arr.includes("top")){
-			// alert(value)
-			this.res.style.marginTop = `${value}px`;
-		}
-		
-		if (arr.includes("bottom")){
-			this.res.style.marginBottom = `${value}px`;
-        }
-		return this;
-	}
     
     
     

package/layout/code.js

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