@tachui/core 0.7.1-alpha → 0.8.0-alpha

package/dist/index-DCPJFUm9.js

@@ -0,0 +1,1407 @@
+import { infinity as c } from "./constants/layout.js";
+import { LayoutModifier as d } from "./modifiers/base.js";
+import { C as y, u as U } from "./concatenated-component-ByPl3_FF.js";
+import { a as D, j as R, R as B, L as W, v as H } from "./production-minimal-BY_gMc-l.js";
+import { G as I, W as z } from "./scheduler-BKeqwrYE.js";
+import { c as A } from "./effect-B9Knft0b.js";
+import { d as S, g as L, p as F, c as q } from "./dom-bridge-CAa1N2zX.js";
+import "./component-XAzF1xqs.js";
+import "./index-vdsiw6gQ.js";
+import "./component-base-x2XmHFjy.js";
+import "./plugins/index.js";
+import "./validation/index.js";
+function Pe() {
+  return new d({
+    frame: {
+      maxWidth: c
+    }
+  });
+}
+function De() {
+  return new d({
+    frame: {
+      maxHeight: c
+    }
+  });
+}
+function Ie() {
+  return new d({
+    frame: {
+      maxWidth: c,
+      maxHeight: c
+    }
+  });
+}
+function ze() {
+  return new d({
+    frame: {
+      width: c,
+      height: c
+    }
+  });
+}
+function Ae(n) {
+  return new d({
+    frame: {
+      width: n,
+      maxHeight: c
+    }
+  });
+}
+function $e(n) {
+  return new d({
+    frame: {
+      height: n,
+      maxWidth: c
+    }
+  });
+}
+function ke(n, e) {
+  return new d({
+    frame: {
+      width: c,
+      height: c,
+      maxWidth: n,
+      maxHeight: e
+    }
+  });
+}
+function Ge(n, e, t, r) {
+  return new d({
+    frame: {
+      width: c,
+      height: c,
+      minWidth: n,
+      maxWidth: e,
+      minHeight: t,
+      maxHeight: r
+    }
+  });
+}
+function Ue() {
+  return new d({
+    frame: {
+      maxWidth: c,
+      maxHeight: c
+    }
+  });
+}
+function Re() {
+  return new d({
+    frame: {
+      width: "100vw",
+      height: "100vh"
+    }
+  });
+}
+function Be() {
+  return new d({
+    frame: {
+      width: c,
+      height: c
+    }
+  });
+}
+function We() {
+  return new d({
+    frame: {
+      width: c
+    }
+  });
+}
+const He = Symbol.for("tachui.concat");
+function Le(n) {
+  return n && typeof n == "object" && typeof n.isConcatenatable == "function" && n.isConcatenatable();
+}
+function Fe(n) {
+  return n && typeof n == "object" && n.constructor.name === "ConcatenatedComponent";
+}
+const qe = Symbol.for("tachui.concat");
+class Ke {
+  /**
+   * Concatenate this component with another concatenatable component
+   */
+  concat(e) {
+    const t = this.toSegment(), r = e.toSegment();
+    return e instanceof y ? new y(
+      [t, ...e.segments],
+      this.mergeMetadata(e.metadata, e.segments.length + 1)
+    ) : new y(
+      [t, r],
+      this.createMetadata(2)
+    );
+  }
+  /**
+   * Check if this component supports concatenation
+   */
+  isConcatenatable() {
+    return !0;
+  }
+  /**
+   * Create metadata for a new concatenated component
+   */
+  createMetadata(e) {
+    return {
+      totalSegments: e,
+      accessibilityRole: this.determineAccessibilityRole(),
+      semanticStructure: this.determineSemanticStructure()
+    };
+  }
+  /**
+   * Merge metadata when concatenating with existing concatenated component
+   */
+  mergeMetadata(e, t) {
+    return {
+      totalSegments: t,
+      accessibilityRole: this.mergeAccessibilityRoles(e.accessibilityRole),
+      semanticStructure: this.mergeSemanticStructures(e.semanticStructure)
+    };
+  }
+  /**
+   * Determine the accessibility role for this component
+   */
+  determineAccessibilityRole() {
+    const e = this.constructor.name;
+    return e === "EnhancedText" ? "text" : e === "EnhancedImage" || e === "EnhancedButton" || e === "EnhancedLink" ? "group" : "composite";
+  }
+  /**
+   * Determine the semantic structure for this component
+   */
+  determineSemanticStructure() {
+    const e = this.constructor.name;
+    return e === "EnhancedText" || e === "EnhancedImage" ? "inline" : "mixed";
+  }
+  /**
+   * Merge accessibility roles when combining components
+   */
+  mergeAccessibilityRoles(e) {
+    const t = this.determineAccessibilityRole();
+    return t === "text" && e === "text" ? "text" : t === "composite" || e === "composite" ? "composite" : "group";
+  }
+  /**
+   * Merge semantic structures when combining components
+   */
+  mergeSemanticStructures(e) {
+    const t = this.determineSemanticStructure();
+    return t === "inline" && e === "inline" ? "inline" : t === "block" && e === "block" ? "block" : "mixed";
+  }
+}
+function Je(n) {
+  const e = n;
+  return e.concat = function(t) {
+    const r = {
+      id: this.id,
+      component: this,
+      modifiers: this.modifiers || [],
+      render: () => {
+        const s = this.render();
+        return Array.isArray(s) ? s[0] : s;
+      }
+    }, i = t.toSegment();
+    return t instanceof y ? new y(
+      [r, ...t.segments],
+      {
+        totalSegments: t.segments.length + 1,
+        accessibilityRole: "group",
+        semanticStructure: "mixed"
+      }
+    ) : new y(
+      [r, i],
+      {
+        totalSegments: 2,
+        accessibilityRole: "group",
+        semanticStructure: "mixed"
+      }
+    );
+  }, e.toSegment = function() {
+    return {
+      id: this.id,
+      component: this,
+      modifiers: this.modifiers || [],
+      render: () => {
+        const t = this.render();
+        return Array.isArray(t) ? t[0] : t;
+      }
+    };
+  }, e.isConcatenatable = function() {
+    return !0;
+  }, e;
+}
+const h = /* @__PURE__ */ new Map(), K = 300 * 1e3, T = 100;
+class Xe {
+  /**
+   * Optimize an array of segments by merging compatible adjacent text segments
+   * Enhanced with caching and performance monitoring
+   */
+  static optimize(e) {
+    const t = performance.now();
+    if (e.length < 2) return e;
+    const r = this.generateCacheKey(e), i = this.getCachedOptimization(r);
+    if (i)
+      return i.optimizedSegments;
+    const s = this.performOptimization(e), a = performance.now() - t, o = {
+      ...this.getOptimizationStats(e, s),
+      processingTimeMs: a
+    };
+    return this.cacheOptimization(r, s, o), process.env.NODE_ENV === "development" && a > 5 && console.log(`TachUI Concatenation: Optimization took ${a.toFixed(2)}ms for ${e.length} segments`), s;
+  }
+  /**
+   * Core optimization algorithm separated for clarity
+   */
+  static performOptimization(e) {
+    const t = [];
+    for (const r of e) {
+      const i = t[t.length - 1];
+      i && this.canMergeTextSegments(i, r) ? t[t.length - 1] = this.mergeTextSegments(i, r) : t.push(r);
+    }
+    return t;
+  }
+  /**
+   * Generate a cache key from segments
+   */
+  static generateCacheKey(e) {
+    return e.map((r) => {
+      const i = r.component, s = this.extractTextContent(i), a = this.hashModifiers(r.modifiers);
+      return `${i.constructor.name}:${s}:${a}`;
+    }).join("|");
+  }
+  /**
+   * Hash modifiers for cache key generation
+   */
+  static hashModifiers(e) {
+    if (e.length === 0) return "none";
+    try {
+      const t = e.map((i) => ({
+        type: i.type,
+        props: i.properties
+      })), r = JSON.stringify(t);
+      return typeof btoa == "function" ? btoa(r).substring(0, 8) : this.simpleHash(r).toString(16).substring(0, 8);
+    } catch {
+      return "hash-error";
+    }
+  }
+  /**
+   * Simple hash function fallback for environments without btoa
+   */
+  static simpleHash(e) {
+    let t = 0;
+    for (let r = 0; r < e.length; r++) {
+      const i = e.charCodeAt(r);
+      t = (t << 5) - t + i, t = t & t;
+    }
+    return Math.abs(t);
+  }
+  /**
+   * Get cached optimization result
+   */
+  static getCachedOptimization(e) {
+    const t = h.get(e);
+    return t ? Date.now() - t.timestamp > K ? (h.delete(e), null) : t : null;
+  }
+  /**
+   * Cache optimization result
+   */
+  static cacheOptimization(e, t, r) {
+    if (h.size >= T) {
+      const i = h.keys().next().value;
+      i && h.delete(i);
+    }
+    h.set(e, {
+      optimizedSegments: t,
+      stats: r,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Clear optimization cache (useful for testing)
+   */
+  static clearCache() {
+    h.clear();
+  }
+  /**
+   * Get cache statistics
+   */
+  static getCacheStats() {
+    return {
+      size: h.size,
+      maxSize: T,
+      hitRate: 0
+      // Would need to track hits/misses to calculate this
+    };
+  }
+  /**
+   * Check if two segments can be merged
+   */
+  static canMergeTextSegments(e, t) {
+    return e.component.constructor.name !== "EnhancedText" || t.component.constructor.name !== "EnhancedText" ? !1 : this.modifiersCompatible(e.modifiers, t.modifiers);
+  }
+  /**
+   * Check if two modifier arrays are compatible for merging
+   */
+  static modifiersCompatible(e, t) {
+    if (e.length !== t.length) return !1;
+    for (let r = 0; r < e.length; r++)
+      if (!this.modifierEqual(e[r], t[r]))
+        return !1;
+    return !0;
+  }
+  /**
+   * Check if two modifiers are equal (simplified comparison)
+   */
+  static modifierEqual(e, t) {
+    if (e.type !== t.type) return !1;
+    try {
+      return JSON.stringify(e.properties) === JSON.stringify(t.properties);
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Merge two text segments into a single segment
+   */
+  static mergeTextSegments(e, t) {
+    const r = e.component, i = t.component, s = this.extractTextContent(r), a = this.extractTextContent(i), o = s + a;
+    return {
+      id: `merged-${e.id}-${t.id}`,
+      component: this.createMergedTextComponent(o, r.props, e.modifiers),
+      modifiers: e.modifiers,
+      // Use modifiers from first segment (they're identical)
+      render: () => this.createMergedTextComponent(o, r.props, e.modifiers).render()[0]
+    };
+  }
+  /**
+   * Extract text content from a text component
+   */
+  static extractTextContent(e) {
+    const t = e.props?.content;
+    return typeof t == "string" ? t : typeof t == "function" ? t() : t && typeof t == "object" && "peek" in t && t.peek() || "";
+  }
+  /**
+   * Create a new merged text component
+   */
+  static createMergedTextComponent(e, t, r) {
+    const i = {
+      ...t,
+      content: e
+    };
+    return {
+      type: "Text",
+      id: `merged-text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      props: i,
+      mounted: !1,
+      cleanup: [],
+      modifiers: r,
+      render() {
+        const s = globalThis.__tachui_runtime;
+        if (s && s.h && s.text) {
+          const a = s.text(e);
+          return [s.h("span", {}, [a])];
+        }
+        return [];
+      }
+    };
+  }
+  /**
+   * Analyze segments and determine if optimization would be beneficial
+   */
+  static shouldOptimize(e) {
+    if (e.length < 2) return !1;
+    let t = 0;
+    for (let r = 0; r < e.length - 1; r++) {
+      const i = e[r], s = e[r + 1];
+      i.component.constructor.name === "EnhancedText" && s.component.constructor.name === "EnhancedText" && t++;
+    }
+    return t > 0;
+  }
+  /**
+   * Get optimization statistics (enhanced for Phase 4.1)
+   */
+  static getOptimizationStats(e, t) {
+    const r = e.length - t.length, i = e.length > 0 ? Math.round(r / e.length * 100) : 0;
+    return {
+      originalCount: e.length,
+      optimizedCount: t.length,
+      reductionPercent: i,
+      textSegmentsMerged: r
+    };
+  }
+  /**
+   * Advanced optimization analysis for performance monitoring
+   */
+  static analyzeOptimizationOpportunities(e) {
+    let t = 0, r = 0, i = 0, s = 0;
+    for (let o = 0; o < e.length; o++) {
+      const u = e[o];
+      switch (u.component.constructor.name) {
+        case "EnhancedText":
+          if (t++, o < e.length - 1) {
+            const b = e[o + 1];
+            this.canMergeTextSegments(u, b) && s++;
+          }
+          break;
+        case "EnhancedImage":
+          r++;
+          break;
+        case "EnhancedButton":
+        case "EnhancedLinkComponent":
+          i++;
+          break;
+      }
+    }
+    const a = e.length > 0 ? Math.round(s / e.length * 100) : 0;
+    return {
+      totalSegments: e.length,
+      textSegments: t,
+      imageSegments: r,
+      interactiveSegments: i,
+      optimizableTextPairs: s,
+      estimatedReductionPercent: a
+    };
+  }
+}
+class Ye {
+  // Placeholder implementation
+}
+function Ze() {
+}
+function Qe() {
+}
+function et() {
+}
+function tt() {
+}
+class J extends D {
+  constructor(e, t) {
+    super(e), this.definitions = t;
+  }
+  resolve() {
+    const e = this.getCurrentTheme(), t = this.definitions[e] || this.definitions.light;
+    return U(t);
+  }
+  getCurrentTheme() {
+    return typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+}
+function nt(n) {
+  return new J("gradient-asset", n);
+}
+var X = Object.defineProperty, Y = (n, e, t) => e in n ? X(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, j = (n, e, t) => Y(n, typeof e != "symbol" ? e + "" : e, t);
+class E extends D {
+  constructor(e, t, r) {
+    super(e), this.reactiveDefinition = t, j(this, "currentGradient"), j(this, "subscriptions", []), j(this, "updateCallback"), this.updateCallback = r, this.currentGradient = this.resolveStaticGradient(), this.setupSignalSubscriptions();
+  }
+  /**
+   * Resolve current gradient to CSS
+   */
+  resolve() {
+    return this.gradientToCSS(this.currentGradient);
+  }
+  /**
+   * Get current static gradient (resolved from signals)
+   */
+  getCurrentGradient() {
+    return this.currentGradient;
+  }
+  /**
+   * Update the reactive definition and re-subscribe to signals
+   */
+  updateDefinition(e) {
+    this.cleanup(), this.reactiveDefinition = e, this.currentGradient = this.resolveStaticGradient(), this.setupSignalSubscriptions(), this.notifyUpdate();
+  }
+  /**
+   * Clean up signal subscriptions
+   */
+  cleanup() {
+    this.subscriptions.forEach((e) => e()), this.subscriptions = [];
+  }
+  resolveStaticGradient() {
+    const { type: e, options: t } = this.reactiveDefinition;
+    switch (e) {
+      case "linear":
+        return W(this.resolveLinearOptions(t));
+      case "radial":
+        return B(this.resolveRadialOptions(t));
+      case "angular":
+      case "conic":
+        return R(this.resolveAngularOptions(t));
+      default:
+        throw new Error(`Unsupported reactive gradient type: ${e}`);
+    }
+  }
+  resolveLinearOptions(e) {
+    return {
+      colors: e.colors.map((t) => this.resolveValue(t)),
+      stops: e.stops?.map((t) => this.resolveValue(t)),
+      startPoint: this.resolveValue(e.startPoint),
+      endPoint: this.resolveValue(e.endPoint),
+      angle: e.angle ? this.resolveValue(e.angle) : void 0
+    };
+  }
+  resolveRadialOptions(e) {
+    return {
+      colors: e.colors.map((t) => this.resolveValue(t)),
+      stops: e.stops?.map((t) => this.resolveValue(t)),
+      center: this.resolveValue(e.center),
+      startRadius: this.resolveValue(e.startRadius),
+      endRadius: this.resolveValue(e.endRadius),
+      shape: e.shape ? this.resolveValue(e.shape) : void 0
+    };
+  }
+  resolveAngularOptions(e) {
+    return {
+      colors: e.colors.map((t) => this.resolveValue(t)),
+      stops: e.stops?.map((t) => this.resolveValue(t)),
+      center: this.resolveValue(e.center),
+      startAngle: this.resolveValue(e.startAngle),
+      endAngle: this.resolveValue(e.endAngle)
+    };
+  }
+  resolveValue(e) {
+    return this.isSignal(e) ? e.value : e;
+  }
+  isSignal(e) {
+    return e !== null && typeof e == "object" && "value" in e && "subscribe" in e;
+  }
+  setupSignalSubscriptions() {
+    this.subscribeToSignalsInOptions(this.reactiveDefinition.options);
+  }
+  subscribeToSignalsInOptions(e) {
+    for (const [t, r] of Object.entries(e))
+      if (Array.isArray(r))
+        r.forEach((i) => {
+          if (this.isSignal(i)) {
+            const s = i.subscribe(() => this.handleSignalChange());
+            this.subscriptions.push(s);
+          }
+        });
+      else if (this.isSignal(r)) {
+        const i = r.subscribe(() => this.handleSignalChange());
+        this.subscriptions.push(i);
+      }
+  }
+  handleSignalChange() {
+    this.currentGradient = this.resolveStaticGradient(), this.notifyUpdate();
+  }
+  notifyUpdate() {
+    this.updateCallback && this.updateCallback();
+  }
+  gradientToCSS(e) {
+    const { gradientToCSS: t } = require("./css-generator");
+    return t(e);
+  }
+}
+class l extends H {
+  constructor(e, t, r) {
+    const i = l.resolveStateOptions(t);
+    super(e, i), this.reactiveStateGradients = t, this.updateCallback = r, j(this, "reactiveSubscriptions", []), this.setupStateSignalSubscriptions();
+  }
+  /**
+   * Update reactive state configuration
+   */
+  updateReactiveState(e) {
+    this.cleanupStateSubscriptions(), this.reactiveStateGradients = e;
+    const t = l.resolveStateOptions(e);
+    this.updateStateGradients(t), this.setupStateSignalSubscriptions(), this.notifyStateUpdate();
+  }
+  /**
+   * Clean up signal subscriptions
+   */
+  cleanupStateSubscriptions() {
+    this.reactiveSubscriptions.forEach((e) => e()), this.reactiveSubscriptions = [];
+  }
+  static resolveStateOptions(e) {
+    const t = {
+      default: l.resolveValue(e.default),
+      animation: e.animation
+    };
+    return e.hover && (t.hover = l.resolveValue(e.hover)), e.active && (t.active = l.resolveValue(e.active)), e.focus && (t.focus = l.resolveValue(e.focus)), e.disabled && (t.disabled = l.resolveValue(e.disabled)), t;
+  }
+  static resolveValue(e) {
+    return e !== null && typeof e == "object" && "value" in e && "subscribe" in e ? e.value : e;
+  }
+  static isSignal(e) {
+    return e !== null && typeof e == "object" && "value" in e && "subscribe" in e;
+  }
+  setupStateSignalSubscriptions() {
+    Object.entries(this.reactiveStateGradients).forEach(([e, t]) => {
+      if (e !== "animation" && l.isSignal(t)) {
+        const r = t.subscribe(() => this.handleStateSignalChange());
+        this.reactiveSubscriptions.push(r);
+      }
+    });
+  }
+  handleStateSignalChange() {
+    const e = l.resolveStateOptions(this.reactiveStateGradients);
+    this.updateStateGradients(e), this.notifyStateUpdate();
+  }
+  notifyStateUpdate() {
+    this.updateCallback && this.updateCallback();
+  }
+}
+const V = {
+  /**
+   * Create a reactive linear gradient
+   */
+  linear: (n, e) => new E(
+    "reactive-linear",
+    { type: "linear", options: n, __reactive: !0 },
+    e
+  ),
+  /**
+   * Create a reactive radial gradient
+   */
+  radial: (n, e) => new E(
+    "reactive-radial",
+    { type: "radial", options: n, __reactive: !0 },
+    e
+  ),
+  /**
+   * Create a reactive angular gradient
+   */
+  angular: (n, e) => new E(
+    "reactive-angular",
+    { type: "angular", options: n, __reactive: !0 },
+    e
+  ),
+  /**
+   * Create a reactive state gradient
+   */
+  state: (n, e, t) => new l(n, e, t)
+}, rt = {
+  /**
+   * Create an animated gradient that cycles through colors
+   */
+  createAnimatedGradient: (n, e = 3e3) => {
+    const t = {
+      value: n[0],
+      subscribe: (r) => () => {
+      }
+    };
+    return V.linear({
+      colors: [t, n[1]],
+      startPoint: "top",
+      endPoint: "bottom"
+    });
+  },
+  /**
+   * Create a progress gradient that fills based on a signal
+   */
+  createProgressGradient: (n, e = "#007AFF") => V.linear({
+    colors: [e, "transparent"],
+    stops: [n, n],
+    // Both stops use the same signal
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  /**
+   * Create a data-driven gradient that reflects numeric values
+   */
+  createDataGradient: (n, e, t, r = ["#ff0000", "#ffff00", "#00ff00"]) => V.linear({
+    colors: r,
+    startPoint: "top",
+    endPoint: "bottom"
+  })
+}, it = {
+  /**
+   * Check if a background value is reactive
+   */
+  isReactiveBackground: (n) => n instanceof E || n instanceof l,
+  /**
+   * Create a reactive background from a signal
+   */
+  fromSignal: (n) => V.state("signal-background", {
+    default: n
+  })
+};
+function M(n, e = {}) {
+  const { fallback: t, errorFallback: r, timeout: i = 1e4, preload: s = "never" } = e;
+  let a = !1, o = null, u = !1, m = null, b = null;
+  const O = async () => {
+    a || u || o || b || (a = !0, u = !0, m = null, b = (async () => {
+      try {
+        const f = await Promise.race([
+          n(),
+          new Promise(
+            (_, x) => setTimeout(() => x(new Error("Component load timeout")), i)
+          )
+        ]);
+        o = "default" in f ? f.default : f;
+      } catch (f) {
+        const _ = f;
+        (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Failed to load lazy component:", _), m = _;
+      } finally {
+        u = !1, b = null;
+      }
+    })(), await b);
+  };
+  return s === "idle" && typeof requestIdleCallback < "u" ? requestIdleCallback(() => {
+    O().catch(() => {
+    });
+  }) : s === "idle" ? setTimeout(() => {
+    O().catch(() => {
+    });
+  }, 100) : s === "immediate" && O().catch(() => {
+  }), (f) => {
+    if (!a && !u && !o && O().catch(() => {
+    }), m)
+      return r ? r(m) : N(m);
+    if (u || !o)
+      return t || Q();
+    try {
+      return typeof o == "function" ? o(f) : o;
+    } catch (_) {
+      const x = _;
+      return (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Error rendering lazy component:", x), N(x);
+    }
+  };
+}
+function st(n) {
+  return {
+    type: "component",
+    render: () => ({
+      type: "element",
+      tag: "div",
+      props: { class: "tachui-suspense" },
+      children: n.children.map(() => ({
+        type: "element",
+        tag: "div",
+        children: []
+      }))
+    }),
+    props: n,
+    id: `suspense-${Math.random().toString(36).substr(2, 9)}`
+  };
+}
+function Z(n) {
+  return n().then((e) => e && typeof e == "object" && "default" in e ? e.default : e);
+}
+function at(n, e = {}) {
+  const t = {};
+  for (const [r, i] of Object.entries(n))
+    t[r] = M(i, e);
+  return t;
+}
+function ot(n) {
+  const e = Object.entries(n).map(
+    async ([t, r]) => [t, await Z(r)]
+  );
+  return Promise.all(e).then((t) => {
+    const r = {};
+    for (const [i, s] of t)
+      r[i] = s;
+    return r;
+  });
+}
+function Q() {
+  return {
+    type: "element",
+    tag: "div",
+    props: {
+      class: "tachui-lazy-loading",
+      style: "padding: 16px; color: #666; text-align: center;"
+    },
+    children: [
+      {
+        type: "text",
+        text: "Loading component..."
+      }
+    ]
+  };
+}
+function N(n) {
+  return {
+    type: "element",
+    tag: "div",
+    props: {
+      class: "tachui-lazy-error",
+      style: "padding: 16px; color: #d32f2f; border: 1px solid #d32f2f; border-radius: 4px; background: #ffeaea;"
+    },
+    children: [
+      {
+        type: "text",
+        text: `Failed to load component: ${n.message}`
+      }
+    ]
+  };
+}
+function ct(n, e = {}) {
+  const { rootMargin: t = "50px", threshold: r = 0.1, ...i } = e;
+  return i.preload === "visible" && typeof IntersectionObserver < "u" ? (s) => {
+    const a = M(n, { ...i, preload: "never" });
+    return setTimeout(() => {
+      a(s);
+    }, 100), a(s);
+  } : M(n, i);
+}
+var ee = Object.defineProperty, te = (n, e, t) => e in n ? ee(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, g = (n, e, t) => te(n, typeof e != "symbol" ? e + "" : e, t);
+class ne {
+  constructor(e) {
+    g(this, "_signal"), g(this, "_setter"), g(this, "_subscribers", /* @__PURE__ */ new Set());
+    const [t, r] = I(e);
+    this._signal = t, this._setter = r;
+  }
+  get value() {
+    return this._signal();
+  }
+  set value(e) {
+    this._setter(e), this.notifySubscribers();
+  }
+  /**
+   * Update a property of the environment object
+   */
+  updateProperty(e, t) {
+    const i = { ...this._signal(), [e]: t };
+    this._setter(i), this.notifySubscribers();
+  }
+  /**
+   * Subscribe to changes
+   */
+  subscribe(e) {
+    return this._subscribers.add(e), () => this._subscribers.delete(e);
+  }
+  notifySubscribers() {
+    for (const e of this._subscribers)
+      try {
+        e();
+      } catch (t) {
+        console.error("Error in environment object subscriber:", t);
+      }
+  }
+  /**
+   * Create a reactive effect that runs when this object changes
+   */
+  onChange(e) {
+    const t = A(() => {
+      e(this._signal());
+    });
+    return () => t.dispose();
+  }
+}
+class $ {
+  constructor(e, t) {
+    g(this, "key"), g(this, "componentContext"), g(this, "_cachedValue"), g(this, "_subscriptionCleanup"), this.key = e, this.componentContext = t, t.onCleanup(() => {
+      this._subscriptionCleanup && this._subscriptionCleanup();
+    });
+  }
+  get wrappedValue() {
+    if (this._cachedValue === void 0 && (this._cachedValue = q(this.key), this._cachedValue && typeof this._cachedValue == "object" && "subscribe" in this._cachedValue)) {
+      const e = this._cachedValue;
+      typeof e.subscribe == "function" && (this._subscriptionCleanup = e.subscribe(() => {
+        this.componentContext.setState(`_env_${this.key.name}_trigger`, Date.now());
+      }));
+    }
+    return this._cachedValue;
+  }
+  get projectedValue() {
+    return this;
+  }
+}
+function re(n) {
+  const e = L();
+  return new $(n, e);
+}
+function ie(n, e) {
+  F(n, e);
+}
+function ut(n, e) {
+  return new ne(e);
+}
+function lt(n) {
+  return n && typeof n == "object" && "wrappedValue" in n && "key" in n && "componentContext" in n && n instanceof $;
+}
+const dt = {
+  /**
+   * Application theme
+   */
+  Theme: S("Theme", {
+    mode: "light",
+    primaryColor: "#007AFF",
+    secondaryColor: "#5856D6"
+  }),
+  /**
+   * Localization service
+   */
+  Localization: S("Localization"),
+  /**
+   * Navigation service
+   */
+  Navigation: S("Navigation"),
+  /**
+   * Application configuration
+   */
+  Config: S("Config"),
+  /**
+   * User authentication
+   */
+  Auth: S("Auth")
+};
+var se = Object.defineProperty, ae = (n, e, t) => e in n ? se(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, C = (n, e, t) => ae(n, typeof e != "symbol" ? e + "" : e, t);
+class k {
+  constructor() {
+    C(this, "_objectWillChange"), C(this, "_notifyCount", 0);
+    const [e, t] = I(void 0);
+    this._objectWillChange = {
+      getValue: e,
+      peek: e
+    }, this._notifySetter = t;
+  }
+  get objectWillChange() {
+    return this._objectWillChange;
+  }
+  /**
+   * Notify observers that the object has changed
+   * Call this method whenever properties of the object change
+   */
+  notifyChange() {
+    this._notifyCount++;
+    const e = this._notifySetter;
+    e && e(void 0);
+  }
+  /**
+   * Get the current notification count (for debugging)
+   */
+  get notificationCount() {
+    return this._notifyCount;
+  }
+}
+class oe {
+  constructor(e, t, r, i = {}) {
+    C(this, "_object"), C(this, "_metadata"), C(this, "_effectCleanup"), this._object = e, this._metadata = {
+      type: "ObservedObject",
+      propertyName: r,
+      componentId: t.id,
+      options: i
+    }, this.setupObservation();
+    const s = z();
+    s && s.cleanups.push(() => {
+      this.cleanup();
+    });
+  }
+  get wrappedValue() {
+    return this._object;
+  }
+  get projectedValue() {
+    return this;
+  }
+  /**
+   * Get property wrapper metadata
+   */
+  get metadata() {
+    return this._metadata;
+  }
+  /**
+   * Set up reactive observation of the object
+   */
+  setupObservation() {
+    const e = A(() => {
+      this._object.objectWillChange();
+    });
+    this._effectCleanup = () => e.dispose();
+  }
+  /**
+   * Cleanup observation
+   */
+  cleanup() {
+    this._effectCleanup && (this._effectCleanup(), this._effectCleanup = void 0);
+  }
+  /**
+   * Replace the observed object (advanced usage)
+   */
+  updateObject(e) {
+    this.cleanup(), this._object = e, this.setupObservation();
+  }
+}
+const ce = (n, e = {}) => {
+  const t = le(), r = de() || "observedObject";
+  return new oe(n, t, r, e);
+};
+function ue(n, e = {}) {
+  const t = new k();
+  return new Proxy(n, {
+    set(i, s, a) {
+      const o = i[s], u = Reflect.set(i, s, a);
+      return u && o !== a && e.autoNotify !== !1 && t.notifyChange(), u;
+    },
+    get(i, s) {
+      return s === "objectWillChange" ? t.objectWillChange : s === "notifyChange" ? () => t.notifyChange() : s === "notificationCount" ? t.notificationCount : Reflect.get(i, s);
+    }
+  });
+}
+function ht(n = {}) {
+  return (e) => class extends e {
+    constructor(...t) {
+      super(...t), C(this, "_observableBase", new k()), n.autoNotify !== !1 && this.setupAutoNotification();
+    }
+    get objectWillChange() {
+      return this._observableBase.objectWillChange;
+    }
+    get notificationCount() {
+      return this._observableBase.notificationCount;
+    }
+    notifyChange() {
+      this._observableBase.notifyChange();
+    }
+    setupAutoNotification() {
+      const t = Object.getOwnPropertyNames(this);
+      for (const r of t) {
+        if (r.startsWith("_") || typeof this[r] == "function")
+          continue;
+        let i = this[r];
+        Object.defineProperty(this, r, {
+          get: () => i,
+          set: (s) => {
+            i !== s && (i = s, this.notifyChange());
+          },
+          enumerable: !0,
+          configurable: !0
+        });
+      }
+    }
+  };
+}
+function le() {
+  const n = z();
+  if (!n?.context.has(P))
+    throw new Error("@ObservedObject can only be used within a component context");
+  return n.context.get(P);
+}
+function de() {
+  try {
+    const n = new Error().stack;
+    if (n)
+      return n.match(/at (\w+)\./)?.[1] || null;
+  } catch {
+  }
+  return null;
+}
+const P = Symbol("TachUI.ComponentContext");
+function he(n) {
+  return n && typeof n == "object" && "objectWillChange" in n && "notifyChange" in n;
+}
+function pt(n) {
+  return n && typeof n == "object" && "wrappedValue" in n && "projectedValue" in n && he(n.wrappedValue);
+}
+function ft(n, e = {}) {
+  return ue({ ...n }, e);
+}
+const gt = ce;
+var pe = Object.defineProperty, fe = (n, e, t) => e in n ? pe(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, p = (n, e, t) => fe(n, typeof e != "symbol" ? e + "" : e, t);
+class ge {
+  constructor(e) {
+    this.componentContext = e, p(this, "states", /* @__PURE__ */ new Map()), p(this, "bindings", /* @__PURE__ */ new Map()), p(this, "observedObjects", /* @__PURE__ */ new Map()), p(this, "environmentObjects", /* @__PURE__ */ new Map()), p(this, "registry"), this.registry = new me();
+  }
+  /**
+   * Register a @State property wrapper
+   */
+  registerState(e, t = {}) {
+    const r = e.metadata;
+    if (r) {
+      const i = `${r.componentId}_${r.propertyName}`;
+      this.states.set(i, e), this.registry.register(r), process.env.NODE_ENV === "development" && this.setupStateDebugging(e, r);
+    }
+  }
+  /**
+   * Register a @Binding property wrapper
+   */
+  registerBinding(e, t = {}) {
+    const r = `${this.componentContext.id}_${t.name || "binding"}_${Date.now()}`;
+    this.bindings.set(r, e);
+    const i = {
+      type: "Binding",
+      propertyName: t.name || "binding",
+      componentId: this.componentContext.id,
+      options: t
+    };
+    this.registry.register(i);
+  }
+  /**
+   * Register an @ObservedObject property wrapper
+   */
+  registerObservedObject(e, t = {}) {
+    const r = e.metadata;
+    if (r) {
+      const i = `${r.componentId}_${r.propertyName}`;
+      this.observedObjects.set(i, e), this.registry.register(r), process.env.NODE_ENV === "development" && this.setupObservedObjectDebugging(e, r);
+    }
+  }
+  /**
+   * Register an @EnvironmentObject property wrapper
+   */
+  registerEnvironmentObject(e, t) {
+    const r = e.metadata;
+    if (r) {
+      const i = `${r.componentId}_${r.propertyName}`;
+      this.environmentObjects.set(i, e), this.registry.register(r);
+    }
+  }
+  /**
+   * Clean up all property wrappers for this component
+   */
+  cleanup() {
+    this.states.clear(), this.bindings.clear(), this.observedObjects.clear(), this.environmentObjects.clear(), this.registry.cleanup(this.componentContext.id);
+  }
+  /**
+   * Get all registered states (for debugging)
+   */
+  getStates() {
+    return new Map(this.states);
+  }
+  /**
+   * Get all registered bindings (for debugging)
+   */
+  getBindings() {
+    return new Map(this.bindings);
+  }
+  /**
+   * Get all registered observed objects (for debugging)
+   */
+  getObservedObjects() {
+    return new Map(this.observedObjects);
+  }
+  /**
+   * Get all registered environment objects (for debugging)
+   */
+  getEnvironmentObjects() {
+    return new Map(this.environmentObjects);
+  }
+  /**
+   * Get property wrapper registry
+   */
+  getRegistry() {
+    return this.registry;
+  }
+  /**
+   * Set up debugging for @State property wrappers
+   */
+  setupStateDebugging(e, t) {
+    if (typeof window < "u") {
+      const r = window.__TACHUI_DEBUG__ || {};
+      r.states || (r.states = {}), r.states[`${t.componentId}_${t.propertyName}`] = {
+        state: e,
+        metadata: t,
+        getValue: () => e.wrappedValue,
+        setValue: (i) => {
+          e.projectedValue.set(i);
+        },
+        getBinding: () => e.projectedValue
+      }, window.__TACHUI_DEBUG__ = r;
+    }
+  }
+  /**
+   * Set up debugging for @ObservedObject property wrappers
+   */
+  setupObservedObjectDebugging(e, t) {
+    if (typeof window < "u") {
+      const r = window.__TACHUI_DEBUG__ || {};
+      r.observedObjects || (r.observedObjects = {}), r.observedObjects[`${t.componentId}_${t.propertyName}`] = {
+        observedObject: e,
+        metadata: t,
+        getObject: () => e.wrappedValue,
+        getNotificationCount: () => e.wrappedValue.notificationCount || 0,
+        triggerChange: () => e.wrappedValue.notifyChange()
+      }, window.__TACHUI_DEBUG__ = r;
+    }
+  }
+}
+class me {
+  constructor() {
+    p(this, "metadata", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Register property wrapper metadata
+   */
+  register(e) {
+    const t = e.componentId, r = this.metadata.get(t) || [];
+    r.push(e), this.metadata.set(t, r);
+  }
+  /**
+   * Unregister a specific property wrapper
+   */
+  unregister(e, t) {
+    const i = (this.metadata.get(e) || []).filter((s) => s.propertyName !== t);
+    i.length > 0 ? this.metadata.set(e, i) : this.metadata.delete(e);
+  }
+  /**
+   * Clean up all metadata for a component
+   */
+  cleanup(e) {
+    this.metadata.delete(e);
+  }
+  /**
+   * Get all metadata for a component
+   */
+  getMetadata(e) {
+    return this.metadata.get(e) || [];
+  }
+  /**
+   * Get all registered metadata (for debugging)
+   */
+  getAllMetadata() {
+    return new Map(this.metadata);
+  }
+}
+function mt(n) {
+  return new ge(n);
+}
+const G = class v {
+  constructor() {
+    p(this, "managers", /* @__PURE__ */ new Map());
+  }
+  static getInstance() {
+    return v.instance || (v.instance = new v()), v.instance;
+  }
+  register(e, t) {
+    this.managers.set(e, t);
+  }
+  unregister(e) {
+    this.managers.delete(e);
+  }
+  getManager(e) {
+    return this.managers.get(e);
+  }
+  getAllManagers() {
+    return new Map(this.managers);
+  }
+  /**
+   * Get debugging information for all components
+   */
+  getDebugInfo() {
+    const e = {};
+    for (const [t, r] of this.managers)
+      e[t] = {
+        states: r.getStates().size,
+        bindings: r.getBindings().size,
+        observedObjects: r.getObservedObjects().size,
+        environmentObjects: r.getEnvironmentObjects().size,
+        metadata: r.getRegistry().getMetadata(t)
+      };
+    return e;
+  }
+};
+p(G, "instance");
+let w = G;
+function bt(n, e) {
+  w.getInstance().register(n, e);
+}
+function yt(n) {
+  w.getInstance().unregister(n);
+}
+function be(n) {
+  return w.getInstance().getManager(n);
+}
+function ye() {
+  return w.getInstance().getAllManagers();
+}
+function Ce() {
+  return w.getInstance().getDebugInfo();
+}
+function Ct() {
+  if (typeof window < "u" && process.env.NODE_ENV === "development") {
+    const n = window.__TACHUI_DEBUG__ || {};
+    n.stateManagers = {
+      getAll: ye,
+      getDebugInfo: Ce,
+      getManager: be
+    }, window.__TACHUI_DEBUG__ = n, console.log(
+      "TachUI State Management debugging enabled. Use window.__TACHUI_DEBUG__.stateManagers"
+    );
+  }
+}
+const _t = ie;
+function St(n) {
+  return console.warn("useEnvironmentObject is deprecated, use EnvironmentObject instead"), re(n);
+}
+const vt = {
+  /**
+   * Check if a value is any kind of property wrapper
+   */
+  isPropertyWrapper(n) {
+    return n && typeof n == "object" && "wrappedValue" in n && "projectedValue" in n;
+  },
+  /**
+   * Extract the wrapped value from any property wrapper
+   */
+  unwrap(n) {
+    return this.isPropertyWrapper(n) ? n.wrappedValue : n;
+  },
+  /**
+   * Create a debug snapshot of all property wrappers in a component
+   */
+  createDebugSnapshot(n) {
+    if (typeof window < "u") {
+      const e = window.__TACHUI_DEBUG__;
+      if (e)
+        return {
+          states: e.states ? Object.keys(e.states).filter((t) => t.startsWith(n)).reduce((t, r) => (t[r] = e.states[r].getValue(), t), {}) : {},
+          observedObjects: e.observedObjects ? Object.keys(e.observedObjects).filter((t) => t.startsWith(n)).reduce((t, r) => (t[r] = {
+            notificationCount: e.observedObjects[r].getNotificationCount(),
+            object: e.observedObjects[r].getObject()
+          }, t), {}) : {}
+        };
+    }
+    return null;
+  }
+}, wt = "0.1.0";
+export {
+  mt as $,
+  it as A,
+  Ze as B,
+  He as C,
+  Qe as D,
+  et as E,
+  tt as F,
+  J as G,
+  _t as H,
+  St as I,
+  vt as J,
+  dt as K,
+  Ye as L,
+  ut as M,
+  re as N,
+  lt as O,
+  ie as P,
+  ft as Q,
+  E as R,
+  st as S,
+  Xe as T,
+  he as U,
+  wt as V,
+  pt as W,
+  ue as X,
+  k as Y,
+  gt as Z,
+  ht as _,
+  Fe as a,
+  ye as a0,
+  be as a1,
+  Ce as a2,
+  Ct as a3,
+  bt as a4,
+  ge as a5,
+  yt as a6,
+  Ke as b,
+  qe as c,
+  De as d,
+  Ie as e,
+  Pe as f,
+  ze as g,
+  Ae as h,
+  Le as i,
+  $e as j,
+  ke as k,
+  Ue as l,
+  Je as m,
+  Re as n,
+  Be as o,
+  We as p,
+  at as q,
+  Ge as r,
+  ct as s,
+  M as t,
+  Z as u,
+  ot as v,
+  nt as w,
+  l as x,
+  V as y,
+  rt as z
+};