nodality 1.0.199 → 1.0.201

package/lib/designer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -361,18 +361,52 @@ new Text("row.").set({
      
     
 
+    // Deep copy so the caller's node objects are never written to. add()
+    // rewrites entries in place (op replacement, `medium`/`fast` expansion,
+    // deletion of keys valued "default"), which used to mutate the array the
+    // user passed in — making a nodes array unusable for a second Des, or
+    // corrupting it when it came from framework state.
+    static cloneNodes(arr) {
+        if (!Array.isArray(arr)) return [];
+        try {
+            if (typeof structuredClone === "function") return structuredClone(arr);
+        } catch (e) {
+            // Node objects may carry functions (e.g. onTap) which
+            // structuredClone rejects; fall through to the manual copy.
+        }
+        const copy = (v) => {
+            if (Array.isArray(v)) return v.map(copy);
+            if (v && typeof v === "object") {
+                const o = {};
+                for (const k in v) o[k] = copy(v[k]);
+                return o;
+            }
+            return v;
+        };
+        return arr.map(copy);
+    }
+
     at(opts) {
-        this.options.push(opts);
+        // Keep options/protoOptions in lockstep — add() indexes into
+        // protoOptions by the same q, so pushing to only one of them
+        // threw on the first .at() used without .nodes().
+        if (!Array.isArray(this.options)) this.options = [];
+        if (!Array.isArray(this.protoOptions)) this.protoOptions = [];
+        const one = Des.cloneNodes([opts])[0];
+        this.options.push(one);
+        this.protoOptions.push(one);
         return this;
     }
 
     nodes(arr) {
-        this.options = arr;
-        this.protoOptions = [...arr];
+        this.options = Des.cloneNodes(arr);
+        this.protoOptions = Des.cloneNodes(arr);
         return this;
     }
 
+    // Kept in sync with ElementMapper.getElType — see the note there about `p`.
     getElType(type) {
+        if (type === "p") return "S6";
         return `S${type.substr(1)}`;
     }
 
@@ -575,7 +609,13 @@ customOptions.forEach(item => {
                         let color = customOptions[index].color;
                         let width = customOptions[index].width;
 
-                        let as = replacementObjects[q];
+                        // Clone per index. This used to assign the SAME
+                        // replacementObjects[q] object to every node of the
+                        // same op kind, so two `blast` nodes with different
+                        // targets/colors collapsed into one — each iteration
+                        // overwrote the previous one's target and the last
+                        // write won for all of them.
+                        let as = Des.cloneNodes([replacementObjects[q]])[0];
                         as.target = target;
 
                         if (range != null) {
@@ -860,7 +900,6 @@ if (/*q == i*/ true){ // 23:07.20 Nice!!!! 23:04 bef
     }  else if (obj[key] === "slow") {
       obj[key] = "9s-ease-in-out";
     } else if (obj[key] === "default"){
-        alert("PP")
        delete obj[key];
     }
   }*/
@@ -1015,10 +1054,10 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
 
                 import {Animator} from "../layout/animator.js";
                 import {Text} from "../layout/text.js";
-                import {Modal} from "../layout/modal2025.js";
+                import {Modal} from "../layout/modal-2025.js";
                 import {Stack} from "../layout/stack.js";
                 import {Image} from "../layout/image.js";
-                import {FlexRow} from "../layout/flexrow.js";
+                import {FlexRow} from "../layout/flex-row.js";
                 import {Button} from "../layout/button.js";
                 import {Spacer} from "../layout/spacer.js";
                 import {Wrapper} from "../layout/container.js";
@@ -1253,7 +1292,11 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
         return this;
     }
 
-    toTextArea() {
+    // `mount` is the selector every generated element renders into. It used
+    // to be the hard-coded literal "#mount", so set({mount: "#other"}) was
+    // silently ignored and a second Des rendered into the first one's mount.
+    toTextArea(mount) {
+        const target = mount || "#mount";
         let code = document.createElement("textarea");
         // It is necessary to have it to generate UI
         code.style.width = 300;
@@ -1266,7 +1309,7 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
         let codea = document.createElement("code");
 
 
-        const prepare = this.code.map(c => `${c}.render("#mount"); \n \n`);
+        const prepare = this.code.map(c => `${c}.render("${target}"); \n \n`);
         this.code = prepare;
        
         codea.textContent = this.code;//.replaceAll(",.", ".").replaceAll(",, new", "new").replaceAll(/\[\s*\n*,\s*\n*/g, "["); // replace with your code
@@ -1275,9 +1318,12 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
         document.body.appendChild(pre); // append to the body or any other container
         document.body.appendChild(code);
 
-        let preo = document.createElement("pre");
-        preo.style.marginTop = "100px";
-        preo.style.overflow = "scroll";
+        // Hold on to the nodes this instance created so set() can style them
+        // directly instead of querying the page for the first #elements /
+        // <pre> it finds, which could belong to the user's markup or to
+        // another Des instance.
+        this._codeEl = code;
+        this._preEl = pre;
         return this;
     }
 
@@ -1290,18 +1336,18 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
         // when run from the CLI — no rendering side effects.
         if (typeof globalThis !== "undefined" && globalThis.NODALITY_EMIT === true) {
             // Populate this.code without triggering DOM work.
-            const prepare = this.code.map((c) => `${c}.render("#mount")`);
+            const prepare = this.code.map((c) => `${c}.render("${(obj && obj.mount) || "#mount"}")`);
             globalThis.__NODALITY_EMITTED__ = prepare;
             return this;
         }
 
-        this.toTextArea();
+        this.toTextArea(obj && obj.mount);
 
-        document.querySelector("#elements").style.display = "none";
-        document.querySelector("pre").style.display = "block";
+        this._codeEl.style.display = "none";
+        this._preEl.style.display = "block";
 
         if (obj.elements === false) {
-            document.querySelector(".nonLayout").style.display = "none";
+            this._preEl.style.display = "none";
         }
 
         if (obj.layout === false) {
@@ -1312,7 +1358,7 @@ new Slider(texts, null, { tintColor: "#e74c3c", inactiveColor: "#ccc" })
         }
 
         if (obj.code === false){
-             document.querySelector(".nonLayout").style.display = "none";
+             this._preEl.style.display = "none";
         }
 
         const layout = {

package/lib/element-mapper.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -55,7 +55,9 @@ import { Form } from "../layout/form-components/form.js";
 import { Button } from "../layout/button.js";
 
 // LIBRARY HELPERS / ANIMATIONS
-import { Des } from "../lib/designer.js";
+// NOTE: no `import { Des }` here. It was unused and formed a circular import
+// (designer -> element-mapper -> designer), which ES modules tolerate but which
+// leaves one module partially initialised under some bundlers.
 import { LinkStyler } from "../lib/link-getter.js";
 import { CardGen } from "../lib/card-getter.js";
 import { KeyframeAnim } from "../lib/keyframe-animation.js";
@@ -379,45 +381,9 @@ animation: {
 }
 
 
-    static mapCopya(){
-
-        
-          return `\n
-        new Wrapper()
-    .set({
-      width: "600px",
-      height: "300px",
-      justifyContent: "center",
-      alignItems: "center",
-      display: "flex",
-      position: "relative",
-    })
-    .add(
-      Array.from({ length: 3 }).map((_, i) => {
-        const angle = i * 120;
-        return new Text("Hello")
-          .set({
-            size: "S1",
-            color: "green",
-            position: "absolute",
-            transform: {
-              op: {
-                name: "transform",
-    
-                  static: true,
-                  keep: true,
-                  hardCSS: \`translate(-50%, -50%) rotate(\${angle}deg) translate(${radius}px) rotate(\${-angle}deg)\`
-                  values: [
-                    \`translate(-50%, -50%) rotate(\${angle}deg) translate(120px) rotate(\${-angle}deg)\`,
-                  ],
-       
-              }
-            }
-          });
-      })
-    )
-          `;
-    }
+    // REMOVED: static mapCopya() — unreachable from mapType() and it
+    // referenced an undefined `radius`, so any call was a guaranteed
+    // ReferenceError. Kept in git history if the ring layout is wanted back.
 
     static button(){
        return new Button("Submit")
@@ -427,7 +393,7 @@ animation: {
             background: "#1abc9c",
             arrpad: {sides: ["all"], value: ".3rem"},
             radius: ".3rem",
-            onTap: () => {alert("Nice")},
+            onTap: () => { console.log("[nodality] demo button tapped"); },
             keySet: {key: "border", value: "3px solid green"}
         });
     }
@@ -465,7 +431,7 @@ animation: {
       //  alert("PP")
         return new RadioGroup()
         .set({
-            items: ["Male", "Female", "Third shit"],
+            items: ["Male", "Female", "Other"],
             multiple: true // wrnóng
         });
     }
@@ -1605,35 +1571,9 @@ const blast    = this.filtero("blast", el.id, obj.customOptions);
     }
 
 
-    static mapCDiv(obj){
-
-        let customOptions = obj.customOptions;
-
-      
-      
-        if (rta) {
-
-            let re = el;
-            re["makeResponsiveBehaviour"] = rta.op.hash[0].l;
-            re["index"] = i;
-
-            let childRe = {};
-            childRe["width"] = "200px";
-            childRe["height"] = "100px";
-
-            ela = new Wrapper().set(re)
-            if (rta.op.hash[0].child) {
-
-                childRe["makeResponsiveBehaviour"] = rta.op.hash[0].child.l;
-
-                let child = new Wrapper().set(childRe).add([
-                    new Text("Hello")
-                ]);
-
-                ela = new Wrapper().set(re).add([child]);
-            }
-    }
-}
+    // REMOVED: static mapCDiv(obj) — its dispatch in mapType() has been
+    // commented out for a long time and the body referenced undefined
+    // `rta`, `el` and `i`, so wiring it back up would have thrown.
 
 static checkbox(obj){
     return new Checkbox().set({
@@ -1693,7 +1633,7 @@ static form(obj){
        new RadioGroup()
         .set({
             name: "gender",
-            items: ["Male", "Female", "Third shit"],
+            items: ["Male", "Female", "Other"],
             multiple: false,
             tint: "#1abc9c",
             font: "Arial",
@@ -1877,7 +1817,11 @@ return `new AreaSwitcher()
 }*/
 
 
+    // h1..h6 -> S1..S6. `p` has no digit to slice, so this used to produce the
+    // string "S", and fluidCopy() (which only branches on S1..S6) then silently
+    // applied no fluid sizing at all to every paragraph.
     static getElType(type) {
+        if (type === "p") return "S6";
         return `S${type.substr(1)}`;
     }
 

package/lib/keyframe-animation.js

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

package/lib/link-getter.js

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

package/lib/raster-ops.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.199
+ * nodality v1.0.201
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -1965,8 +1965,26 @@ function applyRasterPipeline(el, rasterNodes) {
         // canvasWidth/contentWidth, so the drawn glyphs no longer sit
         // where the DOM text does and selection lands on the wrong
         // characters.
+        //
+        // The wrapper must also CARRY THE HOST'S OWN LAYOUT. Hardcoding
+        // `display:block` here silently dropped it: a host centring its
+        // child with `align: "center"` (display:flex, flex-direction:
+        // column, align-items:center) handed that child to a block
+        // wrapper, so the child fell back to the left edge of the box.
+        // On a 212px CTA host holding a ~164px pill that reads as ~24px
+        // off centre — visible only in live mode, because in snapshot
+        // mode the children never leave the host.
+        const hostCS = getComputedStyle(el);
+        const hostIsFlex = hostCS.display === "flex" || hostCS.display === "inline-flex";
         wrap.style.cssText =
-            `display:block;width:${rect.width}px;height:${rect.height}px;`;
+            `display:${hostIsFlex ? "flex" : "block"};` +
+            `width:${rect.width}px;height:${rect.height}px;`;
+        if (hostIsFlex) {
+            wrap.style.flexDirection  = hostCS.flexDirection;
+            wrap.style.alignItems     = hostCS.alignItems;
+            wrap.style.justifyContent = hostCS.justifyContent;
+            wrap.style.gap            = hostCS.gap;
+        }
         while (el.firstChild) wrap.appendChild(el.firstChild);
         canvas.appendChild(wrap);
         sourceEl = wrap;

package/lib/scroll-video.js

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

package/lib/seo.js

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

package/lib/stacker.js

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

package/lib/theme.js

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

package/lib/transform-anim.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.0.199",
+  "version": "1.0.201",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",