@tachui/core 0.8.1-alpha → 0.8.5-alpha

package/dist/index-vdsiw6gQ.js

@@ -1,777 +0,0 @@
-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
-};