@tachui/core 0.7.1-alpha → 0.8.1-alpha

package/dist/index-DEBd8cq7.js

@@ -0,0 +1,1144 @@
+import { infinity as c } from "./constants/layout.js";
+import { LayoutModifier as l } from "./modifiers/base.js";
+import { C as b, u as D } from "./concatenated-component-ByPl3_FF.js";
+import { a as j, j as z, R as I, L as A, v as G } from "./production-minimal-BY_gMc-l.js";
+import { p as P, E as k } from "./observed-object-Cos-FtjP.js";
+import "./scheduler-BKeqwrYE.js";
+import "typescript";
+import "./component-XAzF1xqs.js";
+import "./index-vdsiw6gQ.js";
+import "./dom-bridge-CAa1N2zX.js";
+import "./component-base-x2XmHFjy.js";
+import "./plugins/index.js";
+import "./validation/index.js";
+function le() {
+  return new l({
+    frame: {
+      maxWidth: c
+    }
+  });
+}
+function de() {
+  return new l({
+    frame: {
+      maxHeight: c
+    }
+  });
+}
+function pe() {
+  return new l({
+    frame: {
+      maxWidth: c,
+      maxHeight: c
+    }
+  });
+}
+function he() {
+  return new l({
+    frame: {
+      width: c,
+      height: c
+    }
+  });
+}
+function ge(r) {
+  return new l({
+    frame: {
+      width: r,
+      maxHeight: c
+    }
+  });
+}
+function me(r) {
+  return new l({
+    frame: {
+      height: r,
+      maxWidth: c
+    }
+  });
+}
+function fe(r, e) {
+  return new l({
+    frame: {
+      width: c,
+      height: c,
+      maxWidth: r,
+      maxHeight: e
+    }
+  });
+}
+function be(r, e, t, n) {
+  return new l({
+    frame: {
+      width: c,
+      height: c,
+      minWidth: r,
+      maxWidth: e,
+      minHeight: t,
+      maxHeight: n
+    }
+  });
+}
+function ye() {
+  return new l({
+    frame: {
+      maxWidth: c,
+      maxHeight: c
+    }
+  });
+}
+function Se() {
+  return new l({
+    frame: {
+      width: "100vw",
+      height: "100vh"
+    }
+  });
+}
+function ve() {
+  return new l({
+    frame: {
+      width: c,
+      height: c
+    }
+  });
+}
+function we() {
+  return new l({
+    frame: {
+      width: c
+    }
+  });
+}
+const Ce = Symbol.for("tachui.concat");
+function xe(r) {
+  return r && typeof r == "object" && typeof r.isConcatenatable == "function" && r.isConcatenatable();
+}
+function Oe(r) {
+  return r && typeof r == "object" && r.constructor.name === "ConcatenatedComponent";
+}
+const _e = Symbol.for("tachui.concat");
+class Me {
+  /**
+   * Concatenate this component with another concatenatable component
+   */
+  concat(e) {
+    const t = this.toSegment(), n = e.toSegment();
+    return e instanceof b ? new b(
+      [t, ...e.segments],
+      this.mergeMetadata(e.metadata, e.segments.length + 1)
+    ) : new b(
+      [t, n],
+      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 Ee(r) {
+  const e = r;
+  return e.concat = function(t) {
+    const n = {
+      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 b ? new b(
+      [n, ...t.segments],
+      {
+        totalSegments: t.segments.length + 1,
+        accessibilityRole: "group",
+        semanticStructure: "mixed"
+      }
+    ) : new b(
+      [n, 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 p = /* @__PURE__ */ new Map(), N = 300 * 1e3, E = 100;
+class Te {
+  /**
+   * 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 n = this.generateCacheKey(e), i = this.getCachedOptimization(n);
+    if (i)
+      return i.optimizedSegments;
+    const s = this.performOptimization(e), a = performance.now() - t, o = {
+      ...this.getOptimizationStats(e, s),
+      processingTimeMs: a
+    };
+    return this.cacheOptimization(n, 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 n of e) {
+      const i = t[t.length - 1];
+      i && this.canMergeTextSegments(i, n) ? t[t.length - 1] = this.mergeTextSegments(i, n) : t.push(n);
+    }
+    return t;
+  }
+  /**
+   * Generate a cache key from segments
+   */
+  static generateCacheKey(e) {
+    return e.map((n) => {
+      const i = n.component, s = this.extractTextContent(i), a = this.hashModifiers(n.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
+      })), n = JSON.stringify(t);
+      return typeof btoa == "function" ? btoa(n).substring(0, 8) : this.simpleHash(n).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 n = 0; n < e.length; n++) {
+      const i = e.charCodeAt(n);
+      t = (t << 5) - t + i, t = t & t;
+    }
+    return Math.abs(t);
+  }
+  /**
+   * Get cached optimization result
+   */
+  static getCachedOptimization(e) {
+    const t = p.get(e);
+    return t ? Date.now() - t.timestamp > N ? (p.delete(e), null) : t : null;
+  }
+  /**
+   * Cache optimization result
+   */
+  static cacheOptimization(e, t, n) {
+    if (p.size >= E) {
+      const i = p.keys().next().value;
+      i && p.delete(i);
+    }
+    p.set(e, {
+      optimizedSegments: t,
+      stats: n,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Clear optimization cache (useful for testing)
+   */
+  static clearCache() {
+    p.clear();
+  }
+  /**
+   * Get cache statistics
+   */
+  static getCacheStats() {
+    return {
+      size: p.size,
+      maxSize: E,
+      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 n = 0; n < e.length; n++)
+      if (!this.modifierEqual(e[n], t[n]))
+        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 n = e.component, i = t.component, s = this.extractTextContent(n), a = this.extractTextContent(i), o = s + a;
+    return {
+      id: `merged-${e.id}-${t.id}`,
+      component: this.createMergedTextComponent(o, n.props, e.modifiers),
+      modifiers: e.modifiers,
+      // Use modifiers from first segment (they're identical)
+      render: () => this.createMergedTextComponent(o, n.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, n) {
+    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: n,
+      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 n = 0; n < e.length - 1; n++) {
+      const i = e[n], s = e[n + 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 n = e.length - t.length, i = e.length > 0 ? Math.round(n / e.length * 100) : 0;
+    return {
+      originalCount: e.length,
+      optimizedCount: t.length,
+      reductionPercent: i,
+      textSegmentsMerged: n
+    };
+  }
+  /**
+   * Advanced optimization analysis for performance monitoring
+   */
+  static analyzeOptimizationOpportunities(e) {
+    let t = 0, n = 0, i = 0, s = 0;
+    for (let o = 0; o < e.length; o++) {
+      const d = e[o];
+      switch (d.component.constructor.name) {
+        case "EnhancedText":
+          if (t++, o < e.length - 1) {
+            const f = e[o + 1];
+            this.canMergeTextSegments(d, f) && s++;
+          }
+          break;
+        case "EnhancedImage":
+          n++;
+          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: n,
+      interactiveSegments: i,
+      optimizableTextPairs: s,
+      estimatedReductionPercent: a
+    };
+  }
+}
+class je {
+  // Placeholder implementation
+}
+function Ve() {
+}
+function De() {
+}
+function ze() {
+}
+function Ie() {
+}
+class U extends j {
+  constructor(e, t) {
+    super(e), this.definitions = t;
+  }
+  resolve() {
+    const e = this.getCurrentTheme(), t = this.definitions[e] || this.definitions.light;
+    return D(t);
+  }
+  getCurrentTheme() {
+    return typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+}
+function Ae(r) {
+  return new U("gradient-asset", r);
+}
+var $ = Object.defineProperty, R = (r, e, t) => e in r ? $(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, x = (r, e, t) => R(r, typeof e != "symbol" ? e + "" : e, t);
+class O extends j {
+  constructor(e, t, n) {
+    super(e), this.reactiveDefinition = t, x(this, "currentGradient"), x(this, "subscriptions", []), x(this, "updateCallback"), this.updateCallback = n, 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 A(this.resolveLinearOptions(t));
+      case "radial":
+        return I(this.resolveRadialOptions(t));
+      case "angular":
+      case "conic":
+        return z(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, n] of Object.entries(e))
+      if (Array.isArray(n))
+        n.forEach((i) => {
+          if (this.isSignal(i)) {
+            const s = i.subscribe(() => this.handleSignalChange());
+            this.subscriptions.push(s);
+          }
+        });
+      else if (this.isSignal(n)) {
+        const i = n.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 u extends G {
+  constructor(e, t, n) {
+    const i = u.resolveStateOptions(t);
+    super(e, i), this.reactiveStateGradients = t, this.updateCallback = n, x(this, "reactiveSubscriptions", []), this.setupStateSignalSubscriptions();
+  }
+  /**
+   * Update reactive state configuration
+   */
+  updateReactiveState(e) {
+    this.cleanupStateSubscriptions(), this.reactiveStateGradients = e;
+    const t = u.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: u.resolveValue(e.default),
+      animation: e.animation
+    };
+    return e.hover && (t.hover = u.resolveValue(e.hover)), e.active && (t.active = u.resolveValue(e.active)), e.focus && (t.focus = u.resolveValue(e.focus)), e.disabled && (t.disabled = u.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" && u.isSignal(t)) {
+        const n = t.subscribe(() => this.handleStateSignalChange());
+        this.reactiveSubscriptions.push(n);
+      }
+    });
+  }
+  handleStateSignalChange() {
+    const e = u.resolveStateOptions(this.reactiveStateGradients);
+    this.updateStateGradients(e), this.notifyStateUpdate();
+  }
+  notifyStateUpdate() {
+    this.updateCallback && this.updateCallback();
+  }
+}
+const _ = {
+  /**
+   * Create a reactive linear gradient
+   */
+  linear: (r, e) => new O(
+    "reactive-linear",
+    { type: "linear", options: r, __reactive: !0 },
+    e
+  ),
+  /**
+   * Create a reactive radial gradient
+   */
+  radial: (r, e) => new O(
+    "reactive-radial",
+    { type: "radial", options: r, __reactive: !0 },
+    e
+  ),
+  /**
+   * Create a reactive angular gradient
+   */
+  angular: (r, e) => new O(
+    "reactive-angular",
+    { type: "angular", options: r, __reactive: !0 },
+    e
+  ),
+  /**
+   * Create a reactive state gradient
+   */
+  state: (r, e, t) => new u(r, e, t)
+}, Ge = {
+  /**
+   * Create an animated gradient that cycles through colors
+   */
+  createAnimatedGradient: (r, e = 3e3) => {
+    const t = {
+      value: r[0],
+      subscribe: (n) => () => {
+      }
+    };
+    return _.linear({
+      colors: [t, r[1]],
+      startPoint: "top",
+      endPoint: "bottom"
+    });
+  },
+  /**
+   * Create a progress gradient that fills based on a signal
+   */
+  createProgressGradient: (r, e = "#007AFF") => _.linear({
+    colors: [e, "transparent"],
+    stops: [r, r],
+    // Both stops use the same signal
+    startPoint: "leading",
+    endPoint: "trailing"
+  }),
+  /**
+   * Create a data-driven gradient that reflects numeric values
+   */
+  createDataGradient: (r, e, t, n = ["#ff0000", "#ffff00", "#00ff00"]) => _.linear({
+    colors: n,
+    startPoint: "top",
+    endPoint: "bottom"
+  })
+}, Pe = {
+  /**
+   * Check if a background value is reactive
+   */
+  isReactiveBackground: (r) => r instanceof O || r instanceof u,
+  /**
+   * Create a reactive background from a signal
+   */
+  fromSignal: (r) => _.state("signal-background", {
+    default: r
+  })
+};
+function M(r, e = {}) {
+  const { fallback: t, errorFallback: n, timeout: i = 1e4, preload: s = "never" } = e;
+  let a = !1, o = null, d = !1, m = null, f = null;
+  const w = async () => {
+    a || d || o || f || (a = !0, d = !0, m = null, f = (async () => {
+      try {
+        const g = await Promise.race([
+          r(),
+          new Promise(
+            (y, C) => setTimeout(() => C(new Error("Component load timeout")), i)
+          )
+        ]);
+        o = "default" in g ? g.default : g;
+      } catch (g) {
+        const y = g;
+        (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Failed to load lazy component:", y), m = y;
+      } finally {
+        d = !1, f = null;
+      }
+    })(), await f);
+  };
+  return s === "idle" && typeof requestIdleCallback < "u" ? requestIdleCallback(() => {
+    w().catch(() => {
+    });
+  }) : s === "idle" ? setTimeout(() => {
+    w().catch(() => {
+    });
+  }, 100) : s === "immediate" && w().catch(() => {
+  }), (g) => {
+    if (!a && !d && !o && w().catch(() => {
+    }), m)
+      return n ? n(m) : T(m);
+    if (d || !o)
+      return t || H();
+    try {
+      return typeof o == "function" ? o(g) : o;
+    } catch (y) {
+      const C = y;
+      return (typeof process > "u" || process.env.NODE_ENV !== "test") && console.error("Error rendering lazy component:", C), T(C);
+    }
+  };
+}
+function ke(r) {
+  return {
+    type: "component",
+    render: () => ({
+      type: "element",
+      tag: "div",
+      props: { class: "tachui-suspense" },
+      children: r.children.map(() => ({
+        type: "element",
+        tag: "div",
+        children: []
+      }))
+    }),
+    props: r,
+    id: `suspense-${Math.random().toString(36).substr(2, 9)}`
+  };
+}
+function B(r) {
+  return r().then((e) => e && typeof e == "object" && "default" in e ? e.default : e);
+}
+function Ne(r, e = {}) {
+  const t = {};
+  for (const [n, i] of Object.entries(r))
+    t[n] = M(i, e);
+  return t;
+}
+function Ue(r) {
+  const e = Object.entries(r).map(
+    async ([t, n]) => [t, await B(n)]
+  );
+  return Promise.all(e).then((t) => {
+    const n = {};
+    for (const [i, s] of t)
+      n[i] = s;
+    return n;
+  });
+}
+function H() {
+  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 T(r) {
+  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: ${r.message}`
+      }
+    ]
+  };
+}
+function $e(r, e = {}) {
+  const { rootMargin: t = "50px", threshold: n = 0.1, ...i } = e;
+  return i.preload === "visible" && typeof IntersectionObserver < "u" ? (s) => {
+    const a = M(r, { ...i, preload: "never" });
+    return setTimeout(() => {
+      a(s);
+    }, 100), a(s);
+  } : M(r, i);
+}
+var L = Object.defineProperty, W = (r, e, t) => e in r ? L(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, h = (r, e, t) => W(r, typeof e != "symbol" ? e + "" : e, t);
+class F {
+  constructor(e) {
+    this.componentContext = e, h(this, "states", /* @__PURE__ */ new Map()), h(this, "bindings", /* @__PURE__ */ new Map()), h(this, "observedObjects", /* @__PURE__ */ new Map()), h(this, "environmentObjects", /* @__PURE__ */ new Map()), h(this, "registry"), this.registry = new q();
+  }
+  /**
+   * Register a @State property wrapper
+   */
+  registerState(e, t = {}) {
+    const n = e.metadata;
+    if (n) {
+      const i = `${n.componentId}_${n.propertyName}`;
+      this.states.set(i, e), this.registry.register(n), process.env.NODE_ENV === "development" && this.setupStateDebugging(e, n);
+    }
+  }
+  /**
+   * Register a @Binding property wrapper
+   */
+  registerBinding(e, t = {}) {
+    const n = `${this.componentContext.id}_${t.name || "binding"}_${Date.now()}`;
+    this.bindings.set(n, 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 n = e.metadata;
+    if (n) {
+      const i = `${n.componentId}_${n.propertyName}`;
+      this.observedObjects.set(i, e), this.registry.register(n), process.env.NODE_ENV === "development" && this.setupObservedObjectDebugging(e, n);
+    }
+  }
+  /**
+   * Register an @EnvironmentObject property wrapper
+   */
+  registerEnvironmentObject(e, t) {
+    const n = e.metadata;
+    if (n) {
+      const i = `${n.componentId}_${n.propertyName}`;
+      this.environmentObjects.set(i, e), this.registry.register(n);
+    }
+  }
+  /**
+   * 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 n = window.__TACHUI_DEBUG__ || {};
+      n.states || (n.states = {}), n.states[`${t.componentId}_${t.propertyName}`] = {
+        state: e,
+        metadata: t,
+        getValue: () => e.wrappedValue,
+        setValue: (i) => {
+          e.projectedValue.set(i);
+        },
+        getBinding: () => e.projectedValue
+      }, window.__TACHUI_DEBUG__ = n;
+    }
+  }
+  /**
+   * Set up debugging for @ObservedObject property wrappers
+   */
+  setupObservedObjectDebugging(e, t) {
+    if (typeof window < "u") {
+      const n = window.__TACHUI_DEBUG__ || {};
+      n.observedObjects || (n.observedObjects = {}), n.observedObjects[`${t.componentId}_${t.propertyName}`] = {
+        observedObject: e,
+        metadata: t,
+        getObject: () => e.wrappedValue,
+        getNotificationCount: () => e.wrappedValue.notificationCount || 0,
+        triggerChange: () => e.wrappedValue.notifyChange()
+      }, window.__TACHUI_DEBUG__ = n;
+    }
+  }
+}
+class q {
+  constructor() {
+    h(this, "metadata", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Register property wrapper metadata
+   */
+  register(e) {
+    const t = e.componentId, n = this.metadata.get(t) || [];
+    n.push(e), this.metadata.set(t, n);
+  }
+  /**
+   * 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 Re(r) {
+  return new F(r);
+}
+const V = class S {
+  constructor() {
+    h(this, "managers", /* @__PURE__ */ new Map());
+  }
+  static getInstance() {
+    return S.instance || (S.instance = new S()), S.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, n] of this.managers)
+      e[t] = {
+        states: n.getStates().size,
+        bindings: n.getBindings().size,
+        observedObjects: n.getObservedObjects().size,
+        environmentObjects: n.getEnvironmentObjects().size,
+        metadata: n.getRegistry().getMetadata(t)
+      };
+    return e;
+  }
+};
+h(V, "instance");
+let v = V;
+function Be(r, e) {
+  v.getInstance().register(r, e);
+}
+function He(r) {
+  v.getInstance().unregister(r);
+}
+function J(r) {
+  return v.getInstance().getManager(r);
+}
+function K() {
+  return v.getInstance().getAllManagers();
+}
+function Q() {
+  return v.getInstance().getDebugInfo();
+}
+function Le() {
+  if (typeof window < "u" && process.env.NODE_ENV === "development") {
+    const r = window.__TACHUI_DEBUG__ || {};
+    r.stateManagers = {
+      getAll: K,
+      getDebugInfo: Q,
+      getManager: J
+    }, window.__TACHUI_DEBUG__ = r, console.log(
+      "TachUI State Management debugging enabled. Use window.__TACHUI_DEBUG__.stateManagers"
+    );
+  }
+}
+const We = P;
+function Fe(r) {
+  return console.warn("useEnvironmentObject is deprecated, use EnvironmentObject instead"), k(r);
+}
+const qe = {
+  /**
+   * Check if a value is any kind of property wrapper
+   */
+  isPropertyWrapper(r) {
+    return r && typeof r == "object" && "wrappedValue" in r && "projectedValue" in r;
+  },
+  /**
+   * Extract the wrapped value from any property wrapper
+   */
+  unwrap(r) {
+    return this.isPropertyWrapper(r) ? r.wrappedValue : r;
+  },
+  /**
+   * Create a debug snapshot of all property wrappers in a component
+   */
+  createDebugSnapshot(r) {
+    if (typeof window < "u") {
+      const e = window.__TACHUI_DEBUG__;
+      if (e)
+        return {
+          states: e.states ? Object.keys(e.states).filter((t) => t.startsWith(r)).reduce((t, n) => (t[n] = e.states[n].getValue(), t), {}) : {},
+          observedObjects: e.observedObjects ? Object.keys(e.observedObjects).filter((t) => t.startsWith(r)).reduce((t, n) => (t[n] = {
+            notificationCount: e.observedObjects[n].getNotificationCount(),
+            object: e.observedObjects[n].getObject()
+          }, t), {}) : {}
+        };
+    }
+    return null;
+  }
+}, Je = "0.1.0";
+export {
+  Pe as A,
+  Ve as B,
+  Ce as C,
+  De as D,
+  ze as E,
+  Ie as F,
+  U as G,
+  We as H,
+  Fe as I,
+  qe as J,
+  Re as K,
+  je as L,
+  K as M,
+  J as N,
+  Q as O,
+  Le as P,
+  Be as Q,
+  O as R,
+  ke as S,
+  Te as T,
+  F as U,
+  Je as V,
+  He as W,
+  Oe as a,
+  Me as b,
+  _e as c,
+  de as d,
+  pe as e,
+  le as f,
+  he as g,
+  ge as h,
+  xe as i,
+  me as j,
+  fe as k,
+  ye as l,
+  Ee as m,
+  Se as n,
+  ve as o,
+  we as p,
+  Ne as q,
+  be as r,
+  $e as s,
+  M as t,
+  B as u,
+  Ue as v,
+  Ae as w,
+  u as x,
+  _ as y,
+  Ge as z
+};