@tachui/core 0.8.16 → 0.8.18

package/dist/{factory-oMYyVSAY.js → factory-gqfMcmOy.js}

@@ -2,8 +2,8 @@ import "./scheduler-DppMK9mR.js";
 import "./theme-CRLPHryV.js";
 import "@tachui/types/reactive";
 import "@tachui/types/modifiers";
-import { p as z, h as _, d as M, c as L } from "./concatenated-component-BCrw_7cC.js";
-import { i as x, c as A } from "./proxy-gO-vDCUZ.js";
+import { p as z, h as _, d as M, c as L } from "./concatenated-component-2Gzy5e2c.js";
+import { i as T, c as x } from "./proxy-Cp0QUXME.js";
 import "./presets-B9x94uRn.js";
 import "@tachui/registry";
 import "./component-D-O9yq0P.js";
@@ -19,7 +19,7 @@ function j(e) {
 function I(e) {
   return e !== null && typeof e == "object" && e.type === "component" && typeof e.render == "function";
 }
-function S(e, t = {}) {
+function A(e, t = {}) {
   if (e == null)
     return e;
   const i = {};
@@ -56,15 +56,15 @@ function E(e) {
   const t = W();
   e.mounted = t.mounted, e.cleanup = t.cleanup, e.domElements = t.domElements, e.primaryElement = t.primaryElement, e.domReady = t.domReady;
 }
-var F = Object.defineProperty, H = (e, t, i) => t in e ? F(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, C = (e, t, i) => H(e, typeof t != "symbol" ? t + "" : t, i);
-const T = {
+var q = Object.defineProperty, F = (e, t, i) => t in e ? q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, C = (e, t, i) => F(e, typeof t != "symbol" ? t + "" : t, i);
+const S = {
   isEnabled: () => !1,
   logComponent: (...e) => {
   },
   addDebugAttributes: (...e) => {
   }
 };
-function q(e) {
+function H(e) {
   return e && typeof e.concat == "function" && typeof e.toSegment == "function" && typeof e.isConcatenatable == "function";
 }
 function h(e) {
@@ -73,8 +73,8 @@ function h(e) {
     configurable: !0,
     enumerable: !1,
     get: () => i
-  }), x())
-    return A(
+  }), T())
+    return x(
       e
     );
   const n = {
@@ -82,7 +82,7 @@ function h(e) {
     modifier: i,
     modifierBuilder: i
   };
-  return typeof i.build == "function" && (n.build = i.build.bind(i)), q(e) && (n.concat = function(r) {
+  return typeof i.build == "function" && (n.build = i.build.bind(i)), H(e) && (n.concat = function(r) {
     return e.concat(r);
   }, n.toSegment = function() {
     return e.toSegment();
@@ -110,12 +110,12 @@ function ie(e, t = {}) {
 class v extends $ {
   constructor(t, i, n = [], r = {}) {
     super(), this.props = t, this.layoutType = i, this.children = n, this.layoutProps = r, C(this, "type", "component"), C(this, "id"), C(this, "mounted", !1), C(this, "cleanup", []), C(this, "effectiveTag"), C(this, "validationResult"), this.id = t?.id?.toString() || `layout-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const o = this.layoutType === "hstack" ? "HStack" : this.layoutType === "vstack" ? "VStack" : "ZStack", u = z(
+    const o = this.layoutType === "hstack" ? "HStack" : this.layoutType === "vstack" ? "VStack" : "ZStack", a = z(
       o,
       "div",
       this.props.element
     );
-    if (this.effectiveTag = u.tag, this.validationResult = u.validation, process.env.NODE_ENV === "test" && this.effectiveTag !== "div" && !this.props.role) {
+    if (this.effectiveTag = a.tag, this.validationResult = a.validation, process.env.NODE_ENV === "test" && this.effectiveTag !== "div" && !this.props.role) {
       const d = {
         nav: "navigation",
         header: "banner",
@@ -128,8 +128,8 @@ class v extends $ {
     O(this, {
       onDOMReady: (b, d) => {
         this.children.forEach((s, m) => {
-          const a = s._enhancedLifecycle;
-          if (a && a.onDOMReady && !s.domReady)
+          const l = s._enhancedLifecycle;
+          if (l && l.onDOMReady && !s.domReady)
             try {
               if (d) {
                 const y = this.findChildDOMElements(
@@ -138,17 +138,17 @@ class v extends $ {
                   m
                 );
                 if (y.length > 0) {
-                  s.domElements = /* @__PURE__ */ new Map(), y.forEach((c, p) => {
-                    const f = c.id || `element-${p}`;
-                    s.domElements.set(f, c), s.primaryElement || (s.primaryElement = c);
+                  s.domElements = /* @__PURE__ */ new Map(), y.forEach((f, p) => {
+                    const u = f.id || `element-${p}`;
+                    s.domElements.set(u, f), s.primaryElement || (s.primaryElement = f);
                   }), s.domReady = !0;
-                  const l = a.onDOMReady(
+                  const c = l.onDOMReady(
                     s.domElements,
                     s.primaryElement
                   );
-                  if (typeof l == "function" && (s.cleanup = s.cleanup || [], s.cleanup.push(l)), a.onMount) {
-                    const c = a.onMount();
-                    typeof c == "function" && (s.cleanup = s.cleanup || [], s.cleanup.push(c));
+                  if (typeof c == "function" && (s.cleanup = s.cleanup || [], s.cleanup.push(c)), l.onMount) {
+                    const f = l.onMount();
+                    typeof f == "function" && (s.cleanup = s.cleanup || [], s.cleanup.push(f));
                   }
                 }
               }
@@ -166,26 +166,33 @@ class v extends $ {
    * Find DOM elements for a specific child component within the layout container
    */
   findChildDOMElements(t, i, n) {
+    const r = i.querySelectorAll(
+      `[data-component-id="${t.id}"]`
+    );
+    if (r.length > 0)
+      return Array.from(r);
     if (t.id.startsWith("image-")) {
-      const o = i.querySelectorAll("img.tachui-image");
-      return o[n] ? [o[n]] : Array.from(o);
+      const a = i.querySelectorAll(
+        "img.tachui-image, span.tachui-image-template"
+      );
+      return a[n] ? [a[n]] : Array.from(a);
     }
     if (t.id.startsWith("button-")) {
-      const o = i.querySelectorAll("button.tachui-button");
-      return o[n] ? [o[n]] : Array.from(o);
+      const a = i.querySelectorAll("button.tachui-button");
+      return a[n] ? [a[n]] : Array.from(a);
     }
     if (t.id.startsWith("text-")) {
-      const o = i.querySelectorAll(
+      const a = i.querySelectorAll(
         "span.tachui-text, .tachui-text"
       );
-      return o[n] ? [o[n]] : Array.from(o);
+      return a[n] ? [a[n]] : Array.from(a);
     }
-    const r = Array.from(i.children);
-    return r[n] ? [r[n]] : r;
+    const o = Array.from(i.children);
+    return o[n] ? [o[n]] : o;
   }
   render() {
     const { spacing: t = 0, debugLabel: i } = this.layoutProps, n = this.layoutProps.alignment !== void 0 ? this.layoutProps.alignment : "center";
-    T.logComponent(this.layoutType.toUpperCase(), i);
+    S.logComponent(this.layoutType.toUpperCase(), i);
     const r = [
       `tachui-${this.layoutType}`
     ], o = this.createClassString(this.props, r);
@@ -194,8 +201,8 @@ class v extends $ {
         const b = this.children.map((s) => {
           let m = s;
           "build" in s && typeof s.build == "function" && (m = s.build());
-          const a = m.render();
-          return Array.isArray(a) ? a : [a];
+          const l = m.render();
+          return Array.isArray(l) ? l : [l];
         }).flat();
         return [{
           type: "element",
@@ -209,7 +216,7 @@ class v extends $ {
               alignItems: n === "leading" ? "flex-start" : n === "trailing" ? "flex-end" : "center"
             },
             // Add debug attributes
-            ...T.isEnabled()
+            ...S.isEnabled()
           },
           children: b,
           // Add component metadata for semantic role processing
@@ -221,11 +228,11 @@ class v extends $ {
         }];
       }
       case "hstack": {
-        const b = this.children.map((a) => {
-          let y = a;
-          "build" in a && typeof a.build == "function" && (y = a.build());
-          const l = y.render();
-          return Array.isArray(l) ? l : [l];
+        const b = this.children.map((l) => {
+          let y = l;
+          "build" in l && typeof l.build == "function" && (y = l.build());
+          const c = y.render();
+          return Array.isArray(c) ? c : [c];
         }).flat(), d = n === "leading" || n === "left" ? "flex-start" : n === "trailing" || n === "right" ? "flex-end" : void 0, s = n === "top" ? "flex-start" : n === "bottom" ? "flex-end" : "center";
         return [{
           type: "element",
@@ -240,7 +247,7 @@ class v extends $ {
               ...d ? { justifyContent: d } : {}
             },
             // Add debug attributes
-            ...T.isEnabled()
+            ...S.isEnabled()
           },
           children: b,
           // Add component metadata for semantic role processing
@@ -252,21 +259,21 @@ class v extends $ {
         }];
       }
       case "zstack": {
-        const u = this.layoutProps.sizing && ["content", "priority", "explicit"].includes(this.layoutProps.sizing) ? this.layoutProps.sizing : "content", b = typeof this.layoutProps.sizingChildIndex == "number" && Number.isInteger(this.layoutProps.sizingChildIndex) ? this.layoutProps.sizingChildIndex : 0, d = this.children.length > 0 ? Math.min(Math.max(b, 0), this.children.length - 1) : -1;
+        const a = this.layoutProps.sizing && ["content", "priority", "explicit"].includes(this.layoutProps.sizing) ? this.layoutProps.sizing : "content", b = typeof this.layoutProps.sizingChildIndex == "number" && Number.isInteger(this.layoutProps.sizingChildIndex) ? this.layoutProps.sizingChildIndex : 0, d = this.children.length > 0 ? Math.min(Math.max(b, 0), this.children.length - 1) : -1;
         let s = -1 / 0, m = null;
-        u === "priority" && this.children.forEach((l) => {
-          let c = l;
-          if ("build" in l && typeof l.build == "function" && (c = l.build()), "modifiers" in c && Array.isArray(c.modifiers)) {
-            const p = c.modifiers.find(
-              (f) => f.type === "layout" && f.properties && "layoutPriority" in f.properties && typeof f.properties.layoutPriority == "number"
+        a === "priority" && this.children.forEach((c) => {
+          let f = c;
+          if ("build" in c && typeof c.build == "function" && (f = c.build()), "modifiers" in f && Array.isArray(f.modifiers)) {
+            const p = f.modifiers.find(
+              (u) => u.type === "layout" && u.properties && "layoutPriority" in u.properties && typeof u.properties.layoutPriority == "number"
             );
             if (p) {
-              const f = p.properties.layoutPriority;
-              f > s && (s = f, m = c);
+              const u = p.properties.layoutPriority;
+              u > s && (s = u, m = f);
             }
           }
         });
-        const a = _("div", {
+        const l = _("div", {
           className: o,
           style: {
             position: "relative",
@@ -274,18 +281,18 @@ class v extends $ {
             justifyContent: n.includes("Leading") ? "flex-start" : n.includes("Trailing") ? "flex-end" : "center",
             alignItems: n.includes("top") ? "flex-start" : n.includes("bottom") ? "flex-end" : "center",
             // Legacy priority mode sizes to the highest-priority child.
-            ...u === "priority" && m ? {
+            ...a === "priority" && m ? {
               minWidth: "fit-content",
               minHeight: "fit-content"
             } : {}
           },
           // Add debug attributes
-          ...T.isEnabled()
-        }), y = this.children.flatMap((l, c) => {
-          let p = l;
-          "build" in l && typeof l.build == "function" && (p = l.build());
-          const f = p.render(), w = Array.isArray(f) ? f : [f];
-          let R = c;
+          ...S.isEnabled()
+        }), y = this.children.flatMap((c, f) => {
+          let p = c;
+          "build" in c && typeof c.build == "function" && (p = c.build());
+          const u = p.render(), w = Array.isArray(u) ? u : [u];
+          let R = f;
           if ("modifiers" in p && Array.isArray(p.modifiers)) {
             const g = p.modifiers.find(
               (P) => P.type === "layout" && P.properties && "layoutPriority" in P.properties
@@ -294,7 +301,7 @@ class v extends $ {
           }
           return w.map((g) => {
             if (g.type === "element") {
-              const k = u === "content" ? c === d : u === "priority" ? u === "priority" && m !== null && p === m : !1;
+              const k = a === "content" ? f === d : a === "priority" ? a === "priority" && m !== null && p === m : !1;
               return {
                 ...g,
                 props: {
@@ -324,7 +331,7 @@ class v extends $ {
             type: "element",
             tag: this.effectiveTag,
             props: {
-              ...a.props,
+              ...l.props,
               className: o
             },
             children: y,
@@ -352,7 +359,7 @@ class v extends $ {
     return t.deep ? this.deepClone() : this.shallowClone();
   }
   shallowClone() {
-    const t = S(this.props), i = S(this.layoutProps), n = (this.children ?? []).slice(), r = new v(
+    const t = A(this.props), i = A(this.layoutProps), n = (this.children ?? []).slice(), r = new v(
       t,
       this.layoutType,
       n,
@@ -361,9 +368,9 @@ class v extends $ {
     return E(r), r;
   }
   deepClone() {
-    const t = S(this.props, {
+    const t = A(this.props, {
       deep: !0
-    }), i = S(this.layoutProps, {
+    }), i = A(this.layoutProps, {
       deep: !0
     }), n = (this.children ?? []).map((o) => typeof o?.clone == "function" ? o.clone({ deep: !0 }) : o), r = new v(
       t,
@@ -417,13 +424,13 @@ const re = {
       sizing: n = "content",
       sizingChildIndex: r = 0,
       debugLabel: o
-    } = e, u = new v(e, "zstack", t, {
+    } = e, a = new v(e, "zstack", t, {
       alignment: i,
       sizing: n,
       sizingChildIndex: r,
       debugLabel: o
     });
-    return h(u);
+    return h(a);
   }
 };
 function oe(e) {
@@ -434,7 +441,7 @@ function se(e) {
     constructor(t) {
       super(t), C(this, "_modifiableComponent");
       const i = h(this);
-      x() ? (this._modifiableComponent = M(this), A(this)) : (this._modifiableComponent = i, Object.defineProperty(this, "modifier", {
+      T() ? (this._modifiableComponent = M(this), x(this)) : (this._modifiableComponent = i, Object.defineProperty(this, "modifier", {
         configurable: !0,
         enumerable: !1,
         value: i.modifier,
@@ -447,8 +454,8 @@ function se(e) {
       }));
     }
     get modifier() {
-      if (x())
-        return A(this).modifier;
+      if (T())
+        return x(this).modifier;
       const t = this._modifiableComponent ?? h(this);
       return this._modifiableComponent = t, t.modifier;
     }
@@ -476,7 +483,7 @@ function ae(e) {
 }
 function le(e, t, i = {}, ...n) {
   const r = new e(t, ...n);
-  return x() && i.prewarmProxy !== !1 && A(r), r;
+  return T() && i.prewarmProxy !== !1 && x(r), r;
 }
 export {
   re as L,
@@ -486,7 +493,7 @@ export {
   h as d,
   oe as e,
   le as f,
-  S as g,
+  A as g,
   W as h,
   E as r,
   se as w