@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/dist/index-vdsiw6gQ.js

@@ -0,0 +1,777 @@
+import { G as R, g as $ } from "./scheduler-BKeqwrYE.js";
+import { c as P, d as k, F as O, v as I } from "./concatenated-component-ByPl3_FF.js";
+import "./component-XAzF1xqs.js";
+import { b as V, r as F } from "./dom-bridge-CAa1N2zX.js";
+import { b as L } from "./component-base-x2XmHFjy.js";
+var N = Object.defineProperty, W = (n, e, r) => e in n ? N(n, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[e] = r, m = (n, e, r) => W(n, typeof e != "symbol" ? e + "" : e, r);
+const _ = class x {
+  constructor() {
+    m(this, "contexts", /* @__PURE__ */ new Map()), m(this, "providerStack", /* @__PURE__ */ new Map()), m(this, "currentComponent", null);
+  }
+  static getInstance() {
+    return x.instance || (x.instance = new x()), x.instance;
+  }
+  /**
+   * Set the current component context for provider resolution
+   */
+  setCurrentComponent(e) {
+    this.currentComponent = e;
+  }
+  /**
+   * Get the current component context
+   */
+  getCurrentComponent() {
+    return this.currentComponent;
+  }
+  /**
+   * Register a context provider
+   */
+  registerProvider(e, r, t) {
+    this.providerStack.has(e) || this.providerStack.set(e, []);
+    const s = this.providerStack.get(e), [i, c] = R(r), o = {
+      value: r,
+      signal: [i, c],
+      subscribers: /* @__PURE__ */ new Set(),
+      providers: /* @__PURE__ */ new Set([t])
+    };
+    return s.push(o), t.providers.set(e, o), () => {
+      const d = s.indexOf(o);
+      d !== -1 && s.splice(d, 1), t.providers.delete(e), o.subscribers.clear(), o.providers.clear();
+    };
+  }
+  /**
+   * Get context value with reactive subscription
+   */
+  getContextValue(e, r) {
+    const t = this.providerStack.get(e), s = t && t.length > 0 ? t[t.length - 1] : null;
+    if (s)
+      return this.currentComponent && (s.subscribers.add(this.currentComponent.id), this.currentComponent.consumers.add(e)), [s.signal[0], !0];
+    const [i] = R(r);
+    return [i, !1];
+  }
+  /**
+   * Update context value and notify subscribers
+   */
+  updateContextValue(e, r) {
+    const t = this.providerStack.get(e), s = t && t.length > 0 ? t[t.length - 1] : null;
+    return s ? (s.value = r, s.signal[1](r), !0) : !1;
+  }
+  /**
+   * Get all registered contexts (for debugging)
+   */
+  getAllContexts() {
+    const e = /* @__PURE__ */ new Map();
+    for (const [r, t] of this.providerStack.entries())
+      t.length > 0 && e.set(r, t[t.length - 1]);
+    return e;
+  }
+  /**
+   * Clear all contexts (for testing)
+   */
+  clear() {
+    this.contexts.clear(), this.providerStack.clear(), this.currentComponent = null;
+  }
+};
+m(_, "instance");
+let T = _;
+class A {
+  constructor() {
+    m(this, "registry", T.getInstance());
+  }
+  /**
+   * Create a context provider component
+   */
+  createProvider(e, r, t) {
+    return {
+      type: "component",
+      render: () => {
+        const s = this.registry.registerProvider(
+          e.symbol,
+          r,
+          V(`provider_${e.symbol.toString()}`)
+        ), i = t.flatMap((c) => {
+          const o = c.render();
+          return Array.isArray(o) ? o : [o];
+        });
+        return [
+          {
+            type: "element",
+            tag: "div",
+            props: { "data-context-provider": e.displayName || "provider" },
+            children: i,
+            dispose: s
+          }
+        ];
+      },
+      props: { children: t },
+      id: `provider_${Date.now()}`,
+      children: t
+    };
+  }
+  /**
+   * Set current component for context resolution
+   */
+  setCurrentComponent(e) {
+    this.registry.setCurrentComponent(e);
+  }
+  /**
+   * Update a context value
+   */
+  updateContext(e, r) {
+    return this.registry.updateContextValue(e.symbol, r);
+  }
+  /**
+   * Get all active contexts (for debugging)
+   */
+  getAllContexts() {
+    return this.registry.getAllContexts();
+  }
+  /**
+   * Clear all contexts
+   */
+  clear() {
+    this.registry.clear();
+  }
+}
+function E(n, e = {}) {
+  return {
+    symbol: Symbol(e.displayName || "TachUIContext"),
+    defaultValue: n,
+    displayName: e.displayName
+  };
+}
+function q(n) {
+  const e = T.getInstance(), [r, t] = e.getContextValue(n.symbol, n.defaultValue);
+  return t || console.warn(
+    `Context ${n.displayName || "unnamed"} used without a Provider. Using default value.`
+  ), r;
+}
+function Y(n, e) {
+  return (r) => function(s) {
+    return new A().createProvider(n, e, [r(s)]);
+  };
+}
+function ee(n, e) {
+  return {
+    type: "component",
+    render: () => {
+      const r = q(n), s = $(() => {
+        const i = r();
+        return e(i);
+      })().render();
+      return Array.isArray(s) ? s : [s];
+    },
+    props: {},
+    id: `consumer_${Date.now()}`
+  };
+}
+class H {
+  constructor() {
+    m(this, "services", /* @__PURE__ */ new Map()), m(this, "factories", /* @__PURE__ */ new Map()), m(this, "singletons", /* @__PURE__ */ new Map()), m(this, "scoped", /* @__PURE__ */ new Map()), m(this, "dependencies", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Register a service with the container
+   */
+  register(e, r, t = {}) {
+    this.services.set(e, r), t.dependencies && this.dependencies.set(e, t.dependencies), t.singleton && this.singletons.set(e, null), t.scoped && this.scoped.set(e, null);
+  }
+  /**
+   * Resolve a service from the container
+   */
+  resolve(e) {
+    if (this.singletons.has(e)) {
+      let r = this.singletons.get(e);
+      return r === null && (r = this.createInstance(e), this.singletons.set(e, r)), r;
+    }
+    if (this.scoped.has(e)) {
+      let r = this.scoped.get(e);
+      return r === null && (r = this.createInstance(e), this.scoped.set(e, r)), r;
+    }
+    return this.createInstance(e);
+  }
+  /**
+   * Create instance with dependency injection
+   */
+  createInstance(e) {
+    const t = (this.dependencies.get(e) || []).map((c) => this.resolve(c)), s = this.factories.get(e);
+    if (s)
+      return s(...t);
+    const i = this.services.get(e);
+    if (i) {
+      if (typeof i == "function")
+        try {
+          return new i(...t);
+        } catch {
+          return i(...t);
+        }
+      return i;
+    }
+    throw new Error(`Service ${String(e)} not found in DI container`);
+  }
+  /**
+   * Check if service is registered
+   */
+  has(e) {
+    return this.services.has(e) || this.factories.has(e);
+  }
+  /**
+   * Clear the container
+   */
+  clear() {
+    this.services.clear(), this.factories.clear(), this.singletons.clear(), this.scoped.clear(), this.dependencies.clear();
+  }
+  /**
+   * Get all registered services (for debugging)
+   */
+  getRegistered() {
+    return [...this.services.keys(), ...this.factories.keys()];
+  }
+}
+const D = new H();
+function te(n) {
+  return D.resolve(n);
+}
+function ne(n) {
+  return (e) => {
+    const r = n || e.name;
+    return D.register(r, e), e;
+  };
+}
+const re = {
+  /**
+   * Create multiple contexts at once
+   */
+  createContextGroup(n, e = {}) {
+    const r = {};
+    for (const [t, s] of Object.entries(n))
+      r[t] = E(s, {
+        displayName: e.prefix ? `${e.prefix}.${t}` : t
+      });
+    return r;
+  },
+  /**
+   * Combine multiple context providers
+   */
+  combineProviders(n, e, r) {
+    const t = new A();
+    let s = r;
+    for (const [i, c] of Object.entries(n)) {
+      const o = e[i];
+      s = [t.createProvider(c, o, s)];
+    }
+    return s[0];
+  },
+  /**
+   * Create context with validation
+   */
+  createValidatedContext(n, e, r = {}) {
+    return {
+      ...E(n, r),
+      validate: e
+    };
+  }
+}, se = new A();
+function b(n, e) {
+  n._enhancedLifecycle = {
+    ...n._enhancedLifecycle,
+    ...e
+  };
+}
+function ie(n, e) {
+  b(n, { onMount: e });
+}
+function C(n, e) {
+  b(n, { onDOMReady: e });
+}
+function U(n, e) {
+  b(n, { onUnmount: e });
+}
+function oe(n, e) {
+  b(n, { onError: e });
+}
+function ae(n, e) {
+  b(n, { onDOMError: e });
+}
+function ce(n, e) {
+  return b(n, {
+    onError: (r) => e(r),
+    onDOMError: (r, t) => e(r, `DOM:${t}`)
+  }), n;
+}
+function j(n, e) {
+  C(n, (r, t) => {
+    if (t)
+      return e(t);
+  });
+}
+function le(n, e, r) {
+  j(n, (t) => {
+    if (typeof e?.resolve == "function") {
+      const s = e.resolve();
+      r(t, s);
+    }
+  });
+}
+function ue(n, e) {
+  console.warn("⚠️ setTimeout workaround detected. Consider migrating to onDOMReady."), C(n, () => {
+    e();
+  });
+}
+const de = {
+  /**
+   * Focus element when DOM is ready (replaces setTimeout focus hacks)
+   */
+  focusWhenReady(n, e, r) {
+    C(n, (t, s) => {
+      let i = null;
+      r ? i = r : e ? i = s?.querySelector(e) || null : i = s || null, i instanceof HTMLElement && typeof i.focus == "function" && requestAnimationFrame(() => {
+        try {
+          i.focus();
+        } catch (c) {
+          console.warn("Focus failed:", c);
+        }
+      });
+    });
+  },
+  /**
+   * Focus first focusable element in component
+   */
+  focusFirstFocusable(n) {
+    C(n, (e, r) => {
+      if (r) {
+        const t = r.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        t && this.focusWhenReady(n, void 0, t);
+      }
+    });
+  }
+}, fe = {
+  /**
+   * Coordinate animations with DOM readiness
+   */
+  animateWhenReady(n, e) {
+    C(n, (r, t) => {
+      let s = null;
+      e.element ? s = e.element : e.selector ? s = t?.querySelector(e.selector) || null : s = t || null, s && (e.setup(s), requestAnimationFrame(() => {
+        e.animate(s);
+      }));
+    });
+  },
+  /**
+   * Fade in animation (common pattern)
+   */
+  fadeIn(n, e, r = 300) {
+    this.animateWhenReady(n, {
+      element: e,
+      setup: (t) => {
+        const s = t;
+        s.style.opacity = "0", s.style.transition = `opacity ${r}ms ease-out`;
+      },
+      animate: (t) => {
+        const s = t;
+        s.style.opacity = "1";
+      }
+    });
+  },
+  /**
+   * Scale in animation (common for modals/alerts)
+   */
+  scaleIn(n, e, r = 300) {
+    this.animateWhenReady(n, {
+      element: e,
+      setup: (t) => {
+        const s = t;
+        s.style.transform = "scale(0.8)", s.style.opacity = "0", s.style.transition = `all ${r}ms ease-out`;
+      },
+      animate: (t) => {
+        const s = t;
+        s.style.transform = "scale(1)", s.style.opacity = "1";
+      }
+    });
+  }
+};
+function pe(n, e, r) {
+  C(n, (t, s) => {
+    const i = r ? s?.querySelector(r) : s;
+    if (i) {
+      const c = (o) => {
+        i.contains(o.target) || e();
+      };
+      document.addEventListener("click", c), U(n, () => {
+        document.removeEventListener("click", c);
+      });
+    }
+  });
+}
+function he(n, e, r, t) {
+  C(n, (s, i) => {
+    const c = i?.querySelector(e), o = i?.querySelector(r);
+    if (c && o) {
+      const d = t(c, o), a = o;
+      a.style.left = `${d.x}px`, a.style.top = `${d.y}px`;
+    }
+  });
+}
+var z = Object.defineProperty, B = (n, e, r) => e in n ? z(n, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[e] = r, v = (n, e, r) => B(n, typeof e != "symbol" ? e + "" : e, r);
+const w = {
+  isEnabled: () => !1,
+  logComponent: (...n) => {
+  },
+  addDebugAttributes: (...n) => {
+  }
+};
+function Z(n) {
+  return n && typeof n.concat == "function" && typeof n.toSegment == "function" && typeof n.isConcatenatable == "function";
+}
+function y(n) {
+  const e = k(n), r = P(e), t = {
+    ...e,
+    modifier: r,
+    modifierBuilder: r
+  };
+  return Z(n) && (t.concat = function(s) {
+    return n.concat(s);
+  }, t.toSegment = function() {
+    return n.toSegment();
+  }, t.isConcatenatable = function() {
+    return n.isConcatenatable();
+  }), t;
+}
+function me(n, e = {}) {
+  const { enableModifiers: r = !0 } = e;
+  return (t) => {
+    const s = {
+      type: "component",
+      id: `wrapper-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      props: t,
+      mounted: !1,
+      cleanup: [],
+      render() {
+        const i = n(t);
+        return Array.isArray(i) ? i : [i];
+      }
+    };
+    return y(s);
+  };
+}
+class S extends L {
+  constructor(e, r, t = [], s = {}) {
+    super(), this.props = e, this.layoutType = r, this.children = t, this.layoutProps = s, v(this, "type", "component"), v(this, "id"), v(this, "mounted", !1), v(this, "cleanup", []), v(this, "effectiveTag"), v(this, "validationResult"), this.id = `layout-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const i = this.layoutType === "hstack" ? "HStack" : this.layoutType === "vstack" ? "VStack" : "ZStack", c = O(
+      i,
+      "div",
+      this.props.element
+    );
+    this.effectiveTag = c.tag, this.validationResult = c.validation, b(this, {
+      onDOMReady: (o, d) => {
+        this.children.forEach((a, l) => {
+          const f = a._enhancedLifecycle;
+          if (f && f.onDOMReady && !a.domReady)
+            try {
+              if (d) {
+                const u = this.findChildDOMElements(
+                  a,
+                  d,
+                  l
+                );
+                if (u.length > 0) {
+                  a.domElements = /* @__PURE__ */ new Map(), u.forEach((h, p) => {
+                    const g = h.id || `element-${p}`;
+                    a.domElements.set(g, h), a.primaryElement || (a.primaryElement = h);
+                  }), a.domReady = !0;
+                  const M = f.onDOMReady(
+                    a.domElements,
+                    a.primaryElement
+                  );
+                  if (typeof M == "function" && (a.cleanup = a.cleanup || [], a.cleanup.push(M)), f.onMount) {
+                    const h = f.onMount();
+                    typeof h == "function" && (a.cleanup = a.cleanup || [], a.cleanup.push(h));
+                  }
+                }
+              }
+            } catch (u) {
+              console.error(
+                `Error processing lifecycle hooks for child ${a.id}:`,
+                u
+              );
+            }
+        });
+      }
+    }), F(this);
+  }
+  /**
+   * Find DOM elements for a specific child component within the layout container
+   */
+  findChildDOMElements(e, r, t) {
+    if (e.id.startsWith("image-")) {
+      const i = r.querySelectorAll("img.tachui-image");
+      return i[t] ? [i[t]] : Array.from(i);
+    }
+    if (e.id.startsWith("button-")) {
+      const i = r.querySelectorAll("button.tachui-button");
+      return i[t] ? [i[t]] : Array.from(i);
+    }
+    if (e.id.startsWith("text-")) {
+      const i = r.querySelectorAll(
+        "span.tachui-text, .tachui-text"
+      );
+      return i[t] ? [i[t]] : Array.from(i);
+    }
+    const s = Array.from(r.children);
+    return s[t] ? [s[t]] : s;
+  }
+  render() {
+    const { spacing: e = 0, debugLabel: r } = this.layoutProps, t = this.layoutProps.alignment !== void 0 ? this.layoutProps.alignment : "center";
+    w.logComponent(this.layoutType.toUpperCase(), r);
+    const s = [
+      `tachui-${this.layoutType}`
+    ], i = this.createClassString(this.props, s);
+    switch (this.layoutType) {
+      case "vstack": {
+        const o = this.children.map((a) => {
+          const l = a.render();
+          return Array.isArray(l) ? l : [l];
+        }).flat();
+        return [{
+          type: "element",
+          tag: this.effectiveTag,
+          props: {
+            className: i,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: e ? `${e}px` : "0",
+              alignItems: t === "leading" ? "flex-start" : t === "trailing" ? "flex-end" : "center"
+            },
+            // Add debug attributes
+            ...w.isEnabled()
+          },
+          children: o,
+          // Add component metadata for semantic role processing
+          componentMetadata: {
+            originalType: "VStack",
+            overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+            validationResult: this.validationResult
+          }
+        }];
+      }
+      case "hstack": {
+        const o = this.children.map((a) => {
+          const l = a.render();
+          return Array.isArray(l) ? l : [l];
+        }).flat();
+        return [{
+          type: "element",
+          tag: this.effectiveTag,
+          props: {
+            className: i,
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              gap: e ? `${e}px` : "0",
+              alignItems: t === "top" ? "flex-start" : t === "bottom" ? "flex-end" : "center"
+            },
+            // Add debug attributes
+            ...w.isEnabled()
+          },
+          children: o,
+          // Add component metadata for semantic role processing
+          componentMetadata: {
+            originalType: "HStack",
+            overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+            validationResult: this.validationResult
+          }
+        }];
+      }
+      case "zstack": {
+        let c = -1 / 0, o = null;
+        this.children.forEach((l) => {
+          if ("modifiers" in l && Array.isArray(l.modifiers)) {
+            const f = l.modifiers.find(
+              (u) => u.type === "layout" && u.properties && "layoutPriority" in u.properties && typeof u.properties.layoutPriority == "number"
+            );
+            if (f) {
+              const u = f.properties.layoutPriority;
+              u > c && (c = u, o = l);
+            }
+          }
+        });
+        const d = I("div", {
+          className: i,
+          style: {
+            position: "relative",
+            display: "flex",
+            justifyContent: t.includes("Leading") ? "flex-start" : t.includes("Trailing") ? "flex-end" : "center",
+            alignItems: t.includes("top") ? "flex-start" : t.includes("bottom") ? "flex-end" : "center",
+            // Container sizes to the highest priority child
+            ...o ? {
+              minWidth: "fit-content",
+              minHeight: "fit-content"
+            } : {}
+          },
+          // Add debug attributes
+          ...w.isEnabled()
+        }), a = this.children.flatMap((l, f) => {
+          const u = l.render(), M = Array.isArray(u) ? u : [u];
+          let h = f;
+          if ("modifiers" in l && Array.isArray(l.modifiers)) {
+            const p = l.modifiers.find(
+              (g) => g.type === "layout" && g.properties && "layoutPriority" in g.properties
+            );
+            p && typeof p.properties.layoutPriority == "number" && (h = p.properties.layoutPriority);
+          }
+          return M.map((p) => {
+            if (p.type === "element") {
+              const g = l === o;
+              return {
+                ...p,
+                props: {
+                  ...p.props,
+                  style: {
+                    ...p.props?.style,
+                    // Highest priority child determines container size
+                    ...g ? {
+                      position: "relative",
+                      zIndex: h
+                    } : {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      zIndex: h
+                    }
+                  }
+                }
+              };
+            }
+            return p;
+          });
+        });
+        return [
+          {
+            type: "element",
+            tag: this.effectiveTag,
+            props: {
+              ...d.props,
+              className: i
+            },
+            children: a,
+            // Add component metadata for semantic role processing
+            componentMetadata: {
+              originalType: "ZStack",
+              overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+              validationResult: this.validationResult
+            }
+          }
+        ];
+      }
+      default:
+        return [
+          {
+            type: "element",
+            tag: "div",
+            props: {},
+            children: []
+          }
+        ];
+    }
+  }
+}
+const ye = {
+  /**
+   * Vertical stack container (flexbox column)
+   */
+  VStack: (n = {}) => {
+    const { children: e = [], spacing: r = 0, alignment: t = "center" } = n, s = new S(n, "vstack", e, {
+      spacing: r,
+      alignment: t
+    });
+    return y(s);
+  },
+  /**
+   * Horizontal stack container (flexbox row)
+   */
+  HStack: (n = {}) => {
+    const { children: e = [], spacing: r = 0, alignment: t = "center" } = n, s = new S(n, "hstack", e, {
+      spacing: r,
+      alignment: t
+    });
+    return y(s);
+  },
+  /**
+   * Z-index stack container (absolute positioning)
+   */
+  ZStack: (n = {}) => {
+    const { children: e = [], alignment: r = "center" } = n, t = new S(n, "zstack", e, {
+      alignment: r
+    });
+    return y(t);
+  }
+};
+function ge(n) {
+  return y(n);
+}
+function ve(n) {
+  return class extends n {
+    constructor(e) {
+      super(e), v(this, "_modifiableComponent"), this._modifiableComponent = y(this);
+    }
+    get modifier() {
+      return P(this._modifiableComponent);
+    }
+    get modifiers() {
+      return this._modifiableComponent.modifiers;
+    }
+  };
+}
+function Ce(n) {
+  return (e) => {
+    const r = {
+      type: "component",
+      id: `factory-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      props: e,
+      mounted: !1,
+      cleanup: [],
+      render() {
+        const t = n(e);
+        return Array.isArray(t) ? t : [t];
+      }
+    };
+    return y(r);
+  };
+}
+export {
+  fe as A,
+  A as C,
+  H as D,
+  de as F,
+  ne as I,
+  ye as L,
+  me as a,
+  y as b,
+  Ce as c,
+  ge as d,
+  re as e,
+  E as f,
+  ee as g,
+  se as h,
+  D as i,
+  te as j,
+  Y as k,
+  C as l,
+  ue as m,
+  oe as n,
+  ae as o,
+  ie as p,
+  U as q,
+  he as r,
+  pe as s,
+  b as t,
+  q as u,
+  j as v,
+  ve as w,
+  ce as x,
+  le as y
+};