@tachui/core 0.7.1-alpha → 0.8.1-alpha

package/dist/components/index.js

@@ -1,4169 +1,9 @@
-import { b3 as ie, aX as le, aa as I, n as re, aW as ue, aN as he, aO as fe } from "../Spacer-BbteDQ9I.js";
-import { D as Lt, G as Mt, F as Ot, B as Tt, t as zt, s as Dt, u as Ft, a1 as Gt, a2 as Pt, a3 as Vt, a4 as _t, a5 as Ht, a6 as jt, H as Nt, a7 as Bt, v as Wt, y as Ut, x as qt, z as Yt, a8 as Xt, L as Kt, J as Qt, q as Zt, o as Jt, T as ei, U as ti, V as ii, W as si, Z as ni, $ as ri, a0 as oi, r as ai, a9 as li, ab as ci } from "../Spacer-BbteDQ9I.js";
-import { dg as me, dz as ge, d$ as se, bG as be, dR as d, dT as S, X as ye, dQ as Se } from "../concatenated-component-DPcl2TEO.js";
-import { a as $, i as f, b as xe, h as ve, q as Ce } from "../scheduler-7SvC3a21.js";
-import { r as we } from "../dom-bridge-Cx-s6Ihx.js";
-import { S as $e } from "../ScrollView-h-6wYMAm.js";
-import { D as pi, a as ui, b as hi, E as fi, c as mi, d as gi } from "../ScrollView-h-6wYMAm.js";
-import { c as D } from "../effect-CytAc9em.js";
-import "../context--zQFIImS.js";
-var Ie = Object.defineProperty, ke = (r, e, t) => e in r ? Ie(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, F = (r, e, t) => ke(r, typeof e != "symbol" ? e + "" : e, t);
-class Ee extends ge {
-  constructor(e) {
-    super({
-      selector: e,
-      mobileFirst: !0,
-      optimizeOutput: !0,
-      includeComments: !1,
-      generateMinified: !0
-    });
-  }
-  /**
-   * Generate responsive grid CSS that integrates with tachUI's modifier system
-   */
-  generateGridCSS(e) {
-    const t = {};
-    return Object.entries(e).forEach(([i, s]) => {
-      if (this.isResponsiveValue(s))
-        Object.entries(s).forEach(([n, o]) => {
-          t[n] || (t[n] = {});
-          const a = this.mapGridPropertyToCSS(i, o);
-          a && Object.assign(t[n], a);
-        });
-      else {
-        t.base || (t.base = {});
-        const n = this.mapGridPropertyToCSS(i, s);
-        n && Object.assign(t.base, n);
-      }
-    }), this.generateResponsiveCSS(t);
-  }
-  /**
-   * Map grid property names to CSS properties with appropriate value processing
-   */
-  mapGridPropertyToCSS(e, t) {
-    switch (e) {
-      case "columns":
-        return { "grid-template-columns": this.generateGridColumns(t) };
-      case "rows":
-        return { "grid-template-rows": this.generateGridRows(t) };
-      case "gap":
-        return { gap: this.normalizeSpacing(t) };
-      case "columnGap":
-        return { "column-gap": this.normalizeSpacing(t) };
-      case "rowGap":
-        return { "row-gap": this.normalizeSpacing(t) };
-      case "autoFlow":
-        return { "grid-auto-flow": t };
-      case "autoRows":
-        return { "grid-auto-rows": t };
-      case "autoColumns":
-        return { "grid-auto-columns": t };
-      case "templateAreas":
-        return { "grid-template-areas": t };
-      case "alignItems":
-        return { "align-items": t };
-      case "justifyItems":
-        return { "justify-items": t };
-      case "alignContent":
-        return { "align-content": t };
-      case "justifyContent":
-        return { "justify-content": t };
-      default:
-        return null;
-    }
-  }
-  /**
-   * Generate CSS grid-template-columns from GridItem configurations
-   */
-  generateGridColumns(e) {
-    return e.map((t) => {
-      switch (t.type) {
-        case "fixed":
-          return `${t.size}px`;
-        case "flexible":
-          const i = t.minimum || 0, s = t.maximum ? `${t.maximum}px` : "1fr";
-          return i > 0 ? `minmax(${i}px, ${s})` : "1fr";
-        case "adaptive":
-          const n = t.minimum, o = t.maximum ? `${t.maximum}px` : "1fr";
-          return `minmax(${n}px, ${o})`;
-        default:
-          return "1fr";
-      }
-    }).join(" ");
-  }
-  /**
-   * Generate CSS grid-template-rows from GridItem configurations
-   */
-  generateGridRows(e) {
-    return this.generateGridColumns(e);
-  }
-  /**
-   * Normalize spacing values to CSS
-   */
-  normalizeSpacing(e) {
-    return typeof e == "number" ? `${e}px` : e;
-  }
-  /**
-   * Check if a value is responsive (has breakpoint keys)
-   */
-  isResponsiveValue(e) {
-    return e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).some((t) => ["base", "sm", "md", "lg", "xl", "xxl"].includes(t));
-  }
-}
-function ce(r) {
-  return me((e) => {
-    const t = `#${e}`;
-    return T.getCachedCSS(r, t);
-  });
-}
-class T {
-  /**
-   * Generate cache key from configuration
-   */
-  static generateCacheKey(e) {
-    return JSON.stringify(e, (t, i) => typeof i == "function" ? "[Function]" : i);
-  }
-  /**
-   * Get cached CSS or generate new if not cached
-   */
-  static getCachedCSS(e, t) {
-    const i = this.generateCacheKey(e);
-    if (this.cache.has(i)) {
-      this.hitCount++;
-      const a = this.cache.get(i);
-      return {
-        ...a,
-        mediaQueries: a.mediaQueries.map((l) => ({
-          ...l,
-          selector: t
-        }))
-      };
-    }
-    this.missCount++;
-    const n = new Ee(t).generateGridCSS(e), o = {
-      ...n,
-      mediaQueries: n.mediaQueries.map((a) => ({
-        ...a,
-        selector: ".cached-selector"
-        // Placeholder selector for caching
-      }))
-    };
-    if (this.cache.size >= this.maxCacheSize) {
-      const a = this.cache.keys().next().value;
-      a !== void 0 && this.cache.delete(a);
-    }
-    return this.cache.set(i, o), n;
-  }
-  /**
-   * Get cache statistics for performance monitoring
-   */
-  static getStats() {
-    return {
-      cacheSize: this.cache.size,
-      hitCount: this.hitCount,
-      missCount: this.missCount,
-      hitRate: this.hitCount / (this.hitCount + this.missCount) || 0
-    };
-  }
-  /**
-   * Clear cache (useful for testing or memory management)
-   */
-  static clearCache() {
-    this.cache.clear(), this.hitCount = 0, this.missCount = 0;
-  }
-}
-F(T, "cache", /* @__PURE__ */ new Map());
-F(T, "maxCacheSize", 100);
-F(T, "hitCount", 0);
-F(T, "missCount", 0);
-class de {
-  /**
-   * Convert legacy ResponsiveGridItemConfig to enhanced format
-   */
-  static convertLegacyConfig(e) {
-    const t = {};
-    return Object.entries(e).forEach(([i, s]) => {
-      s && (t[i] = s);
-    }), t;
-  }
-  /**
-   * Create responsive grid configuration from simple column/row definitions
-   */
-  static createResponsiveGridConfig(e) {
-    const t = {};
-    if (e.columns && (this.isLegacyResponsiveGridConfig(e.columns) ? t.columns = this.convertLegacyConfig(e.columns) : t.columns = e.columns), e.rows && (this.isLegacyResponsiveGridConfig(e.rows) ? t.rows = this.convertLegacyConfig(e.rows) : t.rows = e.rows), e.spacing)
-      if (this.isResponsiveValue(e.spacing)) {
-        const i = {};
-        Object.entries(e.spacing).forEach(([s, n]) => {
-          i[s] = this.normalizeSpacing(n);
-        }), t.gap = i;
-      } else
-        t.gap = { base: this.normalizeSpacing(e.spacing) };
-    if (e.alignment)
-      if (this.isResponsiveValue(e.alignment)) {
-        const i = {}, s = {};
-        Object.entries(e.alignment).forEach(([n, o]) => {
-          const { alignItems: a, justifyItems: l } = this.convertAlignment(o);
-          i[n] = a, s[n] = l;
-        }), t.alignItems = i, t.justifyItems = s;
-      } else {
-        const { alignItems: i, justifyItems: s } = this.convertAlignment(e.alignment);
-        t.alignItems = { base: i }, t.justifyItems = { base: s };
-      }
-    return t;
-  }
-  /**
-   * Convert GridAlignment to CSS alignment properties
-   */
-  static convertAlignment(e) {
-    const t = {
-      topLeading: { alignItems: "start", justifyItems: "start" },
-      top: { alignItems: "start", justifyItems: "center" },
-      topTrailing: { alignItems: "start", justifyItems: "end" },
-      leading: { alignItems: "center", justifyItems: "start" },
-      center: { alignItems: "center", justifyItems: "center" },
-      trailing: { alignItems: "center", justifyItems: "end" },
-      bottomLeading: { alignItems: "end", justifyItems: "start" },
-      bottom: { alignItems: "end", justifyItems: "center" },
-      bottomTrailing: { alignItems: "end", justifyItems: "end" }
-    };
-    return t[e] || t.center;
-  }
-  /**
-   * Normalize spacing values to CSS
-   */
-  static normalizeSpacing(e) {
-    if (typeof e == "number")
-      return `${e}px`;
-    if (typeof e == "string")
-      return e;
-    if (e && typeof e == "object") {
-      const t = e.horizontal ?? 0;
-      return `${e.vertical ?? 0}px ${t}px`;
-    }
-    return "0";
-  }
-  /**
-   * Check if value is a responsive value
-   */
-  static isResponsiveValue(e) {
-    return e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).some((t) => ["base", "sm", "md", "lg", "xl", "xxl"].includes(t));
-  }
-  /**
-   * Check if value is legacy ResponsiveGridItemConfig
-   */
-  static isLegacyResponsiveGridConfig(e) {
-    return e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).some((t) => ["base", "sm", "md", "lg", "xl", "xxl"].includes(t)) && Object.values(e).every((t) => Array.isArray(t));
-  }
-}
-class _ {
-  /**
-   * Enable/disable grid debugging
-   */
-  static setDebugMode(e) {
-    this.debugMode = e, e && console.log("🔍 tachUI Grid debugging enabled");
-  }
-  /**
-   * Register a grid instance for debugging
-   */
-  static registerGrid(e, t, i) {
-    this.debugMode && (this.instances.set(e, {
-      config: t,
-      selector: i,
-      timestamp: Date.now()
-    }), console.group(`🏗️ Grid registered: ${e}`), console.log("Configuration:", t), console.log("Selector:", i), console.log("Cache stats:", T.getStats()), console.groupEnd());
-  }
-  /**
-   * Log responsive grid performance metrics
-   */
-  static logPerformanceMetrics() {
-    if (!this.debugMode) return;
-    console.group("📊 Grid Performance Metrics");
-    const e = T.getStats();
-    console.log(`Cache efficiency: ${(e.hitRate * 100).toFixed(1)}%`), console.log(`Cache size: ${e.cacheSize}/100`), console.log(`Cache hits: ${e.hitCount}, misses: ${e.missCount}`), console.log(`Active grid instances: ${this.instances.size}`), console.groupEnd();
-  }
-  /**
-   * Visualize breakpoint behavior in browser console
-   */
-  static visualizeBreakpoints(e) {
-    this.debugMode && (console.group("📱 Responsive Grid Breakpoints"), e.columns && (console.log("Column configuration:"), Object.entries(e.columns).forEach(([t, i]) => {
-      const s = Array.isArray(i) ? i.map((n) => `${n.type}(${n.size || n.minimum || "auto"})`).join(" ") : String(i || "auto");
-      console.log(`  ${t}: ${s}`);
-    })), e.gap && (console.log("Gap configuration:"), Object.entries(e.gap).forEach(([t, i]) => {
-      console.log(`  ${t}: ${i}`);
-    })), console.groupEnd());
-  }
-  /**
-   * Get debugging information for all registered grids
-   */
-  static getDebugInfo() {
-    return {
-      debugMode: this.debugMode,
-      instances: Array.from(this.instances.entries()).map(([e, t]) => ({
-        id: e,
-        ...t,
-        age: Date.now() - t.timestamp
-      })),
-      cacheStats: T.getStats()
-    };
-  }
-  /**
-   * Clear debugging data
-   */
-  static clear() {
-    this.instances.clear(), T.clearCache(), this.debugMode && console.log("🧹 Grid debugging data cleared");
-  }
-}
-F(_, "debugMode", !1);
-F(_, "instances", /* @__PURE__ */ new Map());
-class J {
-  /**
-   * Enable performance monitoring
-   */
-  static enable() {
-    this.enabled = !0, console.log("⏱️ Grid performance monitoring enabled");
-  }
-  /**
-   * Disable performance monitoring
-   */
-  static disable() {
-    this.enabled = !1;
-  }
-  /**
-   * Start measuring a performance metric
-   */
-  static startMeasurement(e) {
-    if (!this.enabled) return () => {
-    };
-    const t = performance.now();
-    return () => {
-      const i = performance.now() - t;
-      this.measurements.has(e) || this.measurements.set(e, []), this.measurements.get(e).push(i), i > 10 && console.warn(`🐌 Slow grid operation: ${e} took ${i.toFixed(2)}ms`);
-    };
-  }
-  /**
-   * Get performance statistics
-   */
-  static getStats() {
-    const e = {};
-    for (const [t, i] of this.measurements) {
-      const s = i.length, n = i.reduce((u, c) => u + c, 0), o = n / s, a = Math.min(...i), l = Math.max(...i);
-      e[t] = {
-        count: s,
-        averageTime: Number(o.toFixed(2)),
-        minTime: Number(a.toFixed(2)),
-        maxTime: Number(l.toFixed(2)),
-        totalTime: Number(n.toFixed(2))
-      };
-    }
-    return e;
-  }
-  /**
-   * Log performance report
-   */
-  static logReport() {
-    if (!this.enabled) return;
-    console.group("📈 Grid Performance Report");
-    const e = this.getStats();
-    for (const [t, i] of Object.entries(e))
-      console.log(`${t}:`, i);
-    console.groupEnd();
-  }
-  /**
-   * Clear performance data
-   */
-  static clear() {
-    this.measurements.clear(), this.enabled && console.log("🧹 Grid performance data cleared");
-  }
-}
-F(J, "measurements", /* @__PURE__ */ new Map());
-F(J, "enabled", !1);
-var Ae = Object.defineProperty, Re = (r, e, t) => e in r ? Ae(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, v = (r, e, t) => Re(r, typeof e != "symbol" ? e + "" : e, t);
-let Y = null;
-const U = () => {
-  if (!Y)
-    try {
-      Y = require("../debug").debugManager;
-    } catch {
-      Y = {
-        isEnabled: () => !1,
-        logComponent: () => {
-        }
-      };
-    }
-  return Y;
-};
-class at {
-  /**
-   * Fixed-size grid column/row
-   */
-  static fixed(e, t) {
-    return {
-      type: "fixed",
-      size: e,
-      spacing: t
-    };
-  }
-  /**
-   * Flexible grid column/row with optional constraints
-   */
-  static flexible(e = 0, t) {
-    return {
-      type: "flexible",
-      minimum: e,
-      maximum: t
-    };
-  }
-  /**
-   * Adaptive grid column/row with minimum size
-   */
-  static adaptive(e, t) {
-    return {
-      type: "adaptive",
-      minimum: e,
-      maximum: t
-    };
-  }
-  /**
-   * Create spanning configuration for grid items (Phase 3)
-   */
-  static spanning(e) {
-    return e;
-  }
-  /**
-   * Create enhanced grid item with spanning support (Phase 3)
-   */
-  static withSpan(e, t) {
-    return {
-      ...e,
-      span: t
-    };
-  }
-}
-class y {
-  /**
-   * Generate CSS grid-template-columns from GridItem configurations
-   */
-  static generateColumns(e) {
-    return e.map((t) => {
-      switch (t.type) {
-        case "fixed":
-          return `${t.size}px`;
-        case "flexible":
-          const i = t.minimum || 0, s = t.maximum ? `${t.maximum}px` : "1fr";
-          return i > 0 ? `minmax(${i}px, ${s})` : "1fr";
-        case "adaptive":
-          const n = t.minimum, o = t.maximum ? `${t.maximum}px` : "1fr";
-          return `minmax(${n}px, ${o})`;
-        default:
-          return "1fr";
-      }
-    }).join(" ");
-  }
-  /**
-   * Generate CSS grid-template-rows from GridItem configurations
-   */
-  static generateRows(e) {
-    return this.generateColumns(e);
-  }
-  /**
-   * Generate responsive CSS for grid layouts
-   */
-  static generateResponsiveGridCSS(e, t) {
-    const i = {};
-    return e.base && (i[t] = t === "grid-template-columns" ? this.generateColumns(e.base) : this.generateRows(e.base)), Object.entries({
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      xxl: "1536px"
-    }).forEach(([n, o]) => {
-      const a = e[n];
-      if (a) {
-        const l = `@media (min-width: ${o})`, u = t === "grid-template-columns" ? this.generateColumns(a) : this.generateRows(a);
-        i[l] || (i[l] = {});
-        const c = i[l];
-        i[l] = {
-          ...c,
-          [t]: u
-        };
-      }
-    }), i;
-  }
-  /**
-   * Convert spacing configuration to CSS gap values
-   */
-  static generateSpacing(e) {
-    if (typeof e == "number")
-      return `${e}px`;
-    if (e && typeof e == "object") {
-      const t = e.horizontal ?? 0;
-      return `${e.vertical ?? 0}px ${t}px`;
-    }
-    return "0";
-  }
-  /**
-   * Convert GridAlignment to CSS grid alignment properties
-   */
-  static generateAlignment(e) {
-    const t = {
-      topLeading: { justifyItems: "start", alignItems: "start" },
-      top: { justifyItems: "center", alignItems: "start" },
-      topTrailing: { justifyItems: "end", alignItems: "start" },
-      leading: { justifyItems: "start", alignItems: "center" },
-      center: { justifyItems: "center", alignItems: "center" },
-      trailing: { justifyItems: "end", alignItems: "center" },
-      bottomLeading: { justifyItems: "start", alignItems: "end" },
-      bottom: { justifyItems: "center", alignItems: "end" },
-      bottomTrailing: { justifyItems: "end", alignItems: "end" }
-    };
-    return t[e] || t.center;
-  }
-  /**
-   * Generate CSS for section header/footer styling (Phase 3)
-   */
-  static generateSectionHeaderCSS(e, t, i) {
-    const s = {
-      gridColumn: `1 / span ${i}`,
-      display: "flex",
-      alignItems: "center"
-    };
-    switch (e) {
-      case "sticky":
-        s.position = "sticky", s.top = t === "header" ? "0" : "auto", s.bottom = t === "footer" ? "0" : "auto", s.zIndex = "10", s.backgroundColor = "var(--background-color, white)";
-        break;
-      case "grouped":
-        s.padding = "12px 16px", s.backgroundColor = "var(--section-bg, #f8f9fa)", s.borderRadius = t === "header" ? "8px 8px 0 0" : "0 0 8px 8px";
-        break;
-      case "plain":
-        s.padding = "8px 0";
-        break;
-      case "automatic":
-      default:
-        s.padding = "12px 0", s.fontWeight = "600", s.fontSize = "1.1em", t === "footer" && (s.fontSize = "0.9em", s.fontWeight = "400", s.color = "var(--text-secondary, #6b7280)");
-        break;
-    }
-    return s;
-  }
-  /**
-   * Generate CSS animations for grid layout changes (Phase 3)
-   */
-  static generateGridAnimationCSS(e) {
-    const t = {};
-    if (e.layoutChanges) {
-      const i = typeof e.layoutChanges == "boolean" ? {} : e.layoutChanges, s = i.duration || 300, n = i.easing || "ease-out", o = i.delay || 0;
-      t.transition = `grid-template-columns ${s}ms ${n}${o > 0 ? ` ${o}ms` : ""}, grid-template-rows ${s}ms ${n}${o > 0 ? ` ${o}ms` : ""}`;
-    }
-    if (e.responsive) {
-      const i = typeof e.responsive == "boolean" ? {} : e.responsive, s = i.duration || 250, n = i.easing || "ease-out", o = i.delay || 0, a = `grid-template-columns ${s}ms ${n}${o > 0 ? ` ${o}ms` : ""}, grid-template-rows ${s}ms ${n}${o > 0 ? ` ${o}ms` : ""}, gap ${s}ms ${n}${o > 0 ? ` ${o}ms` : ""}`;
-      t.transition ? t.transition += `, ${a}` : t.transition = a;
-    }
-    return t;
-  }
-  /**
-   * Generate item entrance/exit animation keyframes (Phase 3)
-   */
-  static generateItemAnimationKeyframes(e, t) {
-    const i = `grid-item-${e}-${t}`;
-    let s = "";
-    switch (t) {
-      case "fade":
-        s = e === "enter" ? "from { opacity: 0; } to { opacity: 1; }" : "from { opacity: 1; } to { opacity: 0; }";
-        break;
-      case "scale":
-        s = e === "enter" ? "from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); }" : "from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); }";
-        break;
-      case "slide-up":
-        s = e === "enter" ? "from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }" : "from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); }";
-        break;
-      case "slide-down":
-        s = e === "enter" ? "from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }" : "from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); }";
-        break;
-      case "slide-left":
-        s = e === "enter" ? "from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); }" : "from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); }";
-        break;
-      case "slide-right":
-        s = e === "enter" ? "from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }" : "from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); }";
-        break;
-    }
-    return {
-      [`@keyframes ${i}`]: `{ ${s} }`,
-      [`--${i}-keyframes`]: i
-    };
-  }
-  /**
-   * Generate accessibility attributes for grid elements (Phase 3)
-   */
-  static generateAccessibilityAttributes(e, t, i, s) {
-    const n = {}, o = t === "grid" ? "grid" : "group", a = e.role || o;
-    if (n.role = a, e.label && (n["aria-label"] = e.label), e.description && (n["aria-describedby"] = e.description), e.screenReader !== !1) {
-      const l = typeof e.screenReader == "boolean" ? {} : e.screenReader || {};
-      l.announceStructure !== !1 && i !== void 0 && (n["aria-colcount"] = i), l.announceStructure !== !1 && s !== void 0 && (n["aria-rowcount"] = s);
-    }
-    if (e.keyboardNavigation !== !1) {
-      const l = typeof e.keyboardNavigation == "boolean" ? {} : e.keyboardNavigation || {};
-      l.enabled !== !1 && (n.tabIndex = 0, n["data-keyboard-navigation"] = l.mode || "grid", l.pageNavigation && (n["data-page-navigation"] = !0), l.homeEndNavigation && (n["data-home-end-navigation"] = !0));
-    }
-    if (e.focusManagement !== !1) {
-      const l = typeof e.focusManagement == "boolean" ? {} : e.focusManagement || {};
-      l.trapFocus && (n["data-focus-trap"] = !0), l.skipLinks && (n["data-skip-links"] = !0);
-    }
-    if (e.reducedMotion !== !1) {
-      const l = typeof e.reducedMotion == "boolean" ? {} : e.reducedMotion || {};
-      l.respectPreference !== !1 && (n["data-respect-reduced-motion"] = !0, n["data-reduced-motion-fallback"] = l.fallbackBehavior || "disable");
-    }
-    return n;
-  }
-  /**
-   * Generate reduced motion CSS based on user preferences (Phase 3)
-   */
-  static generateReducedMotionCSS(e) {
-    if (!e?.reducedMotion) return {};
-    const i = (typeof e.reducedMotion == "boolean" ? {} : e.reducedMotion).fallbackBehavior || "disable", s = {};
-    switch (i) {
-      case "disable":
-        s["@media (prefers-reduced-motion: reduce)"] = "{ transition: none !important; animation: none !important; }";
-        break;
-      case "reduce":
-        s["@media (prefers-reduced-motion: reduce)"] = "{ transition-duration: 0.1s !important; animation-duration: 0.1s !important; }";
-        break;
-      case "instant":
-        s["@media (prefers-reduced-motion: reduce)"] = "{ transition-duration: 0s !important; animation-duration: 0s !important; }";
-        break;
-    }
-    return s;
-  }
-  /**
-   * Generate advanced styling CSS for grid components (Phase 3)
-   */
-  static generateAdvancedStylingCSS(e) {
-    const t = {};
-    if (e.templateAreas && e.templateAreas.length > 0) {
-      const i = e.templateAreas.map((s) => `"${s}"`).join(" ");
-      t.gridTemplateAreas = i;
-    }
-    if (e.advancedGap && (e.advancedGap.row && (typeof e.advancedGap.row == "object" ? Object.entries(e.advancedGap.row).forEach(([i, s]) => {
-      const n = this.getMediaQueryForBreakpoint(i);
-      n && (t[n] = t[n] || "{}", t[n] = t[n].replace("}", ` row-gap: ${s}px; }`));
-    }) : t.rowGap = typeof e.advancedGap.row == "number" ? `${e.advancedGap.row}px` : e.advancedGap.row), e.advancedGap.column && (typeof e.advancedGap.column == "object" ? Object.entries(e.advancedGap.column).forEach(([i, s]) => {
-      const n = this.getMediaQueryForBreakpoint(i);
-      n && (t[n] = t[n] || "{}", t[n] = t[n].replace("}", ` column-gap: ${s}px; }`));
-    }) : t.columnGap = typeof e.advancedGap.column == "number" ? `${e.advancedGap.column}px` : e.advancedGap.column)), e.container) {
-      if (e.container.background)
-        if (typeof e.container.background == "string")
-          t.background = e.container.background;
-        else {
-          const i = e.container.background;
-          switch (i.pattern) {
-            case "dots":
-              t.background = `radial-gradient(circle, ${i.color || "#e0e0e0"} 1px, transparent 1px)`, t.backgroundSize = "20px 20px", i.opacity && (t.opacity = i.opacity.toString());
-              break;
-            case "lines":
-              t.background = `linear-gradient(90deg, ${i.color || "#e0e0e0"} 1px, transparent 1px), linear-gradient(${i.color || "#e0e0e0"} 1px, transparent 1px)`, t.backgroundSize = "20px 20px";
-              break;
-            case "grid":
-              t.background = `linear-gradient(to right, ${i.color || "#e0e0e0"} 1px, transparent 1px), linear-gradient(to bottom, ${i.color || "#e0e0e0"} 1px, transparent 1px)`, t.backgroundSize = "20px 20px";
-              break;
-          }
-        }
-      if (e.container.border && (t.border = e.container.border), e.container.borderRadius && (t.borderRadius = typeof e.container.borderRadius == "number" ? `${e.container.borderRadius}px` : e.container.borderRadius), e.container.boxShadow && (t.boxShadow = e.container.boxShadow), e.container.padding)
-        if (typeof e.container.padding == "object") {
-          const i = e.container.padding;
-          t.padding = `${i.top || 0} ${i.right || 0} ${i.bottom || 0} ${i.left || 0}`;
-        } else
-          t.padding = typeof e.container.padding == "number" ? `${e.container.padding}px` : e.container.padding;
-    }
-    if (e.debug && (e.debug === !0 || e.debug.enabled)) {
-      const i = typeof e.debug == "boolean" ? {} : e.debug, s = i.lineColor || "#ff0000";
-      if (i.showLines !== !1) {
-        const n = `linear-gradient(to right, ${s} 1px, transparent 1px), linear-gradient(to bottom, ${s} 1px, transparent 1px)`;
-        t.background && !t.background.includes("linear-gradient") ? t.background = `${n}, ${t.background}` : t.background = n, t.backgroundSize = "var(--grid-debug-size, 20px) var(--grid-debug-size, 20px)";
-      }
-      i.showAreas && (t.position = "relative", t["&::after"] = `{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 10px, ${s}22 10px, ${s}22 20px); pointer-events: none; }`);
-    }
-    return t;
-  }
-  /**
-   * Generate item state CSS (hover, focus, active) (Phase 3)
-   */
-  static generateItemStateCSS(e) {
-    const t = {};
-    if (e.hover && e.hover.enabled !== !1) {
-      const i = e.hover, s = [];
-      switch (i.transform) {
-        case "scale":
-          s.push("transform: scale(1.05)");
-          break;
-        case "lift":
-          s.push("transform: translateY(-2px)", "box-shadow: 0 4px 8px rgba(0,0,0,0.12)");
-          break;
-        case "glow":
-          s.push("box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4)");
-          break;
-        case "highlight":
-          s.push("background-color: rgba(59, 130, 246, 0.1)");
-          break;
-      }
-      i.transition ? s.push(`transition: ${i.transition}`) : s.push("transition: all 0.2s ease"), i.customCSS && Object.entries(i.customCSS).forEach(([n, o]) => {
-        s.push(`${n}: ${o}`);
-      }), t["& > *:hover"] = `{ ${s.join("; ")} }`;
-    }
-    if (e.focus && e.focus.enabled !== !1) {
-      const i = e.focus, s = [];
-      switch (i.style) {
-        case "ring":
-          s.push(`box-shadow: 0 0 0 2px ${i.color || "#3b82f6"}`);
-          break;
-        case "outline":
-          s.push(`outline: 2px solid ${i.color || "#3b82f6"}`, "outline-offset: 2px");
-          break;
-        case "background":
-          s.push(`background-color: ${i.color || "rgba(59, 130, 246, 0.1)"}`);
-          break;
-        case "border":
-          s.push(`border: 2px solid ${i.color || "#3b82f6"}`);
-          break;
-      }
-      i.customCSS && Object.entries(i.customCSS).forEach(([n, o]) => {
-        s.push(`${n}: ${o}`);
-      }), t["& > *:focus"] = `{ ${s.join("; ")} }`;
-    }
-    if (e.active && e.active.enabled !== !1) {
-      const i = e.active, s = [];
-      switch (i.transform) {
-        case "scale":
-          s.push("transform: scale(0.95)");
-          break;
-        case "inset":
-          s.push("box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)");
-          break;
-        case "darken":
-          s.push("filter: brightness(0.9)");
-          break;
-      }
-      i.customCSS && Object.entries(i.customCSS).forEach(([n, o]) => {
-        s.push(`${n}: ${o}`);
-      }), t["& > *:active"] = `{ ${s.join("; ")} }`;
-    }
-    return t;
-  }
-  /**
-   * Get media query for breakpoint (helper function)
-   */
-  static getMediaQueryForBreakpoint(e) {
-    return {
-      sm: "@media (min-width: 640px)",
-      md: "@media (min-width: 768px)",
-      lg: "@media (min-width: 1024px)",
-      xl: "@media (min-width: 1280px)",
-      xxl: "@media (min-width: 1536px)"
-    }[e] || null;
-  }
-}
-class Z extends ie {
-  constructor(e) {
-    super(), this.props = e, v(this, "type", "component"), v(this, "id"), v(this, "mounted", !1), v(this, "cleanup", []), v(this, "effectiveTag"), v(this, "validationResult"), this.id = `grid-section-${e.type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const t = `GridSection${e.type === "header" ? "Header" : "Footer"}`, i = se(t, "div", this.props.element);
-    this.effectiveTag = i.tag, this.validationResult = i.validation;
-  }
-  render() {
-    const { content: e, sectionId: t, type: i, style: s, debugLabel: n } = this.props, o = U();
-    o.logComponent(`GRID_SECTION_${i.toUpperCase()}`, n);
-    const a = [`tachui-grid-section-${i}`, ...o.isEnabled() ? ["tachui-debug"] : []], l = this.createClassString(this.props, a), c = y.generateSectionHeaderCSS(s, i, 12);
-    let p;
-    if (typeof e == "string")
-      p = [{
-        type: "element",
-        tag: "span",
-        props: {
-          className: `tachui-grid-section-${i}-text`,
-          children: [{ type: "text", text: e }]
-        }
-      }];
-    else {
-      const x = e.render();
-      p = Array.isArray(x) ? x : [x];
-    }
-    return [{
-      type: "element",
-      tag: this.effectiveTag,
-      props: {
-        className: l,
-        style: c,
-        "data-section-id": t,
-        "data-section-type": i,
-        // Add debug attributes
-        ...o.isEnabled() && {
-          "data-tachui-component": `GridSection${i === "header" ? "Header" : "Footer"}`,
-          ...n && { "data-tachui-label": n }
-        }
-      },
-      children: p,
-      // Add component metadata
-      componentMetadata: {
-        originalType: `GridSection${i === "header" ? "Header" : "Footer"}`,
-        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
-        validationResult: this.validationResult
-      }
-    }];
-  }
-}
-class ne extends ie {
-  constructor(e, t, i = []) {
-    super(), this.props = e, this.gridType = t, this.children = i, v(this, "type", "component"), v(this, "id"), v(this, "mounted", !1), v(this, "cleanup", []), v(this, "effectiveTag"), v(this, "validationResult"), this.id = `${t}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const n = se(t === "grid" ? "Grid" : t === "lazy-vgrid" ? "LazyVGrid" : "LazyHGrid", "div", this.props.element);
-    this.effectiveTag = n.tag, this.validationResult = n.validation, this.setupLifecycleHooks(), we(this);
-  }
-  /**
-   * Generate animation styles for grid layout (Phase 3)
-   */
-  generateAnimationStyles(e) {
-    return e ? y.generateGridAnimationCSS(e) : {};
-  }
-  /**
-   * Apply item animations to child elements (Phase 3)
-   */
-  applyItemAnimations(e, t) {
-    if (!t?.itemChanges) return e;
-    const i = typeof t.itemChanges == "boolean" ? {} : t.itemChanges;
-    if (i.enter) {
-      const s = i.enter, n = s.duration || 250, o = s.easing || "ease-out", a = s.delay || 0;
-      return e.map((l, u) => {
-        if ("modifiers" in l && Array.isArray(l.modifiers)) {
-          const c = a + u * 50, p = be("all", n, o, c);
-          l.modifiers.push(p);
-        }
-        return l;
-      });
-    }
-    return e;
-  }
-  /**
-   * Generate accessibility attributes for grid (Phase 3)
-   */
-  generateAccessibilityAttributes(e, t, i) {
-    return e ? y.generateAccessibilityAttributes(e, this.gridType, t, i) : {};
-  }
-  /**
-   * Generate advanced styling CSS for grid (Phase 3)
-   */
-  generateStylingCSS(e) {
-    if (!e) return {};
-    const t = y.generateAdvancedStylingCSS(e);
-    if (e.itemStates) {
-      const i = y.generateItemStateCSS(e.itemStates);
-      Object.assign(t, i);
-    }
-    return t;
-  }
-  /**
-   * Handle keyboard navigation events (Phase 3)
-   */
-  setupKeyboardNavigation(e, t) {
-    if (!t?.keyboardNavigation) return;
-    const i = typeof t.keyboardNavigation == "boolean" ? {} : t.keyboardNavigation;
-    if (i.enabled === !1) return;
-    const s = i.mode || "grid", n = (o) => {
-      const a = o.target;
-      if (!e.contains(a)) return;
-      let l = !1;
-      switch (o.key) {
-        case "ArrowUp":
-          s === "grid" && (this.navigateGrid(e, "up"), l = !0);
-          break;
-        case "ArrowDown":
-          s === "grid" ? (this.navigateGrid(e, "down"), l = !0) : s === "list" && (this.navigateList(e, "next"), l = !0);
-          break;
-        case "ArrowLeft":
-          this.navigateGrid(e, "left"), l = !0;
-          break;
-        case "ArrowRight":
-          this.navigateGrid(e, "right"), l = !0;
-          break;
-        case "Home":
-          i.homeEndNavigation && (this.navigateToFirst(e), l = !0);
-          break;
-        case "End":
-          i.homeEndNavigation && (this.navigateToLast(e), l = !0);
-          break;
-        case "PageUp":
-          i.pageNavigation && (this.navigatePage(e, "up"), l = !0);
-          break;
-        case "PageDown":
-          i.pageNavigation && (this.navigatePage(e, "down"), l = !0);
-          break;
-      }
-      l && (o.preventDefault(), o.stopPropagation());
-    };
-    e.addEventListener("keydown", n), this.cleanup.push(() => {
-      e.removeEventListener("keydown", n);
-    });
-  }
-  /**
-   * Navigate within grid structure (Phase 3)
-   */
-  navigateGrid(e, t) {
-    const i = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]'), s = Array.from(i).indexOf(document.activeElement);
-    if (s === -1) return;
-    const o = getComputedStyle(e).gridTemplateColumns.split(" ").length;
-    let a = s;
-    switch (t) {
-      case "up":
-        a = Math.max(0, s - o);
-        break;
-      case "down":
-        a = Math.min(i.length - 1, s + o);
-        break;
-      case "left":
-        a = Math.max(0, s - 1);
-        break;
-      case "right":
-        a = Math.min(i.length - 1, s + 1);
-        break;
-    }
-    a !== s && i[a].focus();
-  }
-  /**
-   * Navigate in list mode (Phase 3)
-   */
-  navigateList(e, t) {
-    const i = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]'), s = Array.from(i).indexOf(document.activeElement);
-    if (s === -1) return;
-    const n = t === "next" ? Math.min(i.length - 1, s + 1) : Math.max(0, s - 1);
-    n !== s && i[n].focus();
-  }
-  /**
-   * Navigate to first/last elements (Phase 3)
-   */
-  navigateToFirst(e) {
-    const t = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]');
-    t.length > 0 && t[0].focus();
-  }
-  navigateToLast(e) {
-    const t = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]');
-    t.length > 0 && t[t.length - 1].focus();
-  }
-  /**
-   * Navigate by page (Phase 3)
-   */
-  navigatePage(e, t) {
-    const i = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]'), s = Array.from(i).indexOf(document.activeElement);
-    if (s === -1) return;
-    const n = 10, o = t === "down" ? Math.min(i.length - 1, s + n) : Math.max(0, s - n);
-    o !== s && i[o].focus();
-  }
-  setupLifecycleHooks() {
-    le(this, {
-      onDOMReady: (e, t) => {
-        this.children.forEach((i, s) => {
-          const n = i._enhancedLifecycle;
-          if (n && n.onDOMReady && !i.domReady)
-            try {
-              if (t) {
-                const o = this.findChildDOMElements(i, t, s);
-                if (o.length > 0) {
-                  i.domElements = /* @__PURE__ */ new Map(), o.forEach((l, u) => {
-                    const c = l.id || `element-${u}`;
-                    i.domElements.set(c, l), i.primaryElement || (i.primaryElement = l);
-                  }), i.domReady = !0;
-                  const a = n.onDOMReady(
-                    i.domElements,
-                    i.primaryElement
-                  );
-                  if (typeof a == "function" && (i.cleanup = i.cleanup || [], i.cleanup.push(a)), n.onMount) {
-                    const l = n.onMount();
-                    typeof l == "function" && (i.cleanup = i.cleanup || [], i.cleanup.push(l));
-                  }
-                }
-              }
-            } catch (o) {
-              console.error(`Error processing lifecycle hooks for child ${i.id}:`, o);
-            }
-        });
-      }
-    });
-  }
-  /**
-   * Find DOM elements for child components (reusing pattern from LayoutComponent)
-   */
-  findChildDOMElements(e, t, i) {
-    if (e.id.startsWith("image-")) {
-      const n = t.querySelectorAll("img.tachui-image");
-      return n[i] ? [n[i]] : Array.from(n);
-    }
-    if (e.id.startsWith("button-")) {
-      const n = t.querySelectorAll("button.tachui-button");
-      return n[i] ? [n[i]] : Array.from(n);
-    }
-    if (e.id.startsWith("text-")) {
-      const n = t.querySelectorAll("span.tachui-text, .tachui-text");
-      return n[i] ? [n[i]] : Array.from(n);
-    }
-    const s = Array.from(t.children);
-    return s[i] ? [s[i]] : s;
-  }
-  render() {
-    throw new Error("BaseGridComponent.render() must be implemented by subclass");
-  }
-}
-class Le extends ne {
-  constructor(e, t = []) {
-    super(e, "grid", t), this.props = e;
-  }
-  render() {
-    const { alignment: e = "center", spacing: t, debugLabel: i, animations: s, accessibility: n, styling: o } = this.props, a = U();
-    a.logComponent("GRID", i);
-    const l = ["tachui-grid", ...a.isEnabled() ? ["tachui-debug"] : []], u = this.createClassString(this.props, l), p = this.applyItemAnimations(this.children, s).map((N) => {
-      const G = N.render();
-      return Array.isArray(G) ? G : [G];
-    }).flat(), h = y.generateAlignment(e), x = y.generateSpacing(t), k = this.generateAnimationStyles(s), C = this.generateAccessibilityAttributes(n), m = y.generateReducedMotionCSS(n), H = this.generateStylingCSS(o), j = {
-      display: "grid",
-      gap: x,
-      ...h,
-      ...k,
-      ...m,
-      ...H
-    };
-    return [{
-      type: "element",
-      tag: this.effectiveTag,
-      props: {
-        className: u,
-        style: j,
-        ...C,
-        // Add debug attributes
-        ...a.isEnabled() && {
-          "data-tachui-component": "Grid",
-          ...i && { "data-tachui-label": i }
-        }
-      },
-      children: p,
-      // Add component metadata for semantic role processing
-      componentMetadata: {
-        originalType: "Grid",
-        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
-        validationResult: this.validationResult
-      }
-    }];
-  }
-}
-class Me extends ie {
-  constructor(e, t = []) {
-    super(), this.props = e, this.children = t, v(this, "type", "component"), v(this, "id"), v(this, "mounted", !1), v(this, "cleanup", []), v(this, "effectiveTag"), v(this, "validationResult"), this.id = `gridrow-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const i = se("GridRow", "div", this.props.element);
-    this.effectiveTag = i.tag, this.validationResult = i.validation;
-  }
-  render() {
-    const { debugLabel: e } = this.props, t = U();
-    t.logComponent("GRIDROW", e);
-    const i = ["tachui-gridrow", ...t.isEnabled() ? ["tachui-debug"] : []], s = this.createClassString(this.props, i), n = this.children.map((a) => {
-      const l = a.render();
-      return Array.isArray(l) ? l : [l];
-    }).flat();
-    return [{
-      type: "element",
-      tag: this.effectiveTag,
-      props: {
-        className: s,
-        style: {
-          display: "contents"
-          // GridRow acts as a transparent container within CSS Grid
-        },
-        // Add debug attributes
-        ...t.isEnabled() && {
-          "data-tachui-component": "GridRow",
-          ...e && { "data-tachui-label": e }
-        }
-      },
-      children: n,
-      // Add component metadata
-      componentMetadata: {
-        originalType: "GridRow",
-        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
-        validationResult: this.validationResult
-      }
-    }];
-  }
-}
-class Oe extends ne {
-  constructor(e, t = []) {
-    super(e, "lazy-vgrid", t), this.props = e;
-  }
-  render() {
-    const { columns: e, alignment: t = "center", spacing: i, debugLabel: s, responsive: n, sections: o, pinnedViews: a, animations: l, accessibility: u, styling: c } = this.props, p = U();
-    p.logComponent("LAZYVGRID", s);
-    const h = ["tachui-lazy-vgrid", ...p.isEnabled() ? ["tachui-debug"] : []], x = this.createClassString(this.props, h);
-    let k;
-    o && o.length > 0 ? k = this.renderSections(o, a) : k = this.applyItemAnimations(this.children, l).map((L) => {
-      const g = L.render();
-      return Array.isArray(g) ? g : [g];
-    }).flat();
-    let C, m = {
-      display: "grid"
-    };
-    if (n) {
-      const R = J.startMeasurement("responsive-css-generation");
-      try {
-        const g = { ...de.createResponsiveGridConfig({
-          columns: e,
-          spacing: i,
-          alignment: t
-        }), ...n };
-        _.registerGrid(this.id, g, `#${this.id}`), _.visualizeBreakpoints(g);
-        const M = ce(g);
-        g.columns && typeof g.columns == "object" && "base" in g.columns && g.columns.base ? C = this.generateColumnsFromConfig(g.columns.base) : Array.isArray(e) ? C = y.generateColumns(e) : C = "1fr", m._responsiveModifier = M;
-      } finally {
-        R();
-      }
-    } else {
-      const R = y.generateAlignment(t), L = y.generateSpacing(i);
-      if (Array.isArray(e))
-        C = y.generateColumns(e);
-      else {
-        const M = y.generateResponsiveGridCSS(e, "grid-template-columns")["grid-template-columns"];
-        C = typeof M == "string" ? M : "1fr";
-      }
-      m = {
-        ...m,
-        gap: L,
-        ...R
-      };
-    }
-    m.gridTemplateColumns = C;
-    const H = this.generateAnimationStyles(l);
-    Object.assign(m, H);
-    const j = this.getColumnCount(), q = this.generateAccessibilityAttributes(u, j), N = y.generateReducedMotionCSS(u);
-    Object.assign(m, N);
-    const G = this.generateStylingCSS(c);
-    Object.assign(m, G);
-    const ee = {
-      type: "element",
-      tag: this.effectiveTag,
-      props: {
-        className: x,
-        style: m,
-        ...q,
-        // Add debug attributes
-        ...p.isEnabled() && {
-          "data-tachui-component": "LazyVGrid",
-          ...s && { "data-tachui-label": s }
-        }
-      },
-      children: k,
-      // Add component metadata
-      componentMetadata: {
-        originalType: "LazyVGrid",
-        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
-        validationResult: this.validationResult,
-        // Phase 2: Include responsive modifier for processing
-        ...n && m._responsiveModifier && {
-          responsiveModifier: m._responsiveModifier
-        }
-      }
-    };
-    return m._responsiveModifier && delete m._responsiveModifier, [ee];
-  }
-  /**
-   * Render sectioned data with headers and footers (Phase 3)
-   */
-  renderSections(e, t) {
-    const i = [], s = this.getColumnCount(), n = t?.includes("sectionHeaders"), o = t?.includes("sectionFooters");
-    return e.forEach((a) => {
-      if (a.header) {
-        const l = a.headerStyle || (n ? "sticky" : "automatic"), c = new Z({
-          content: a.header,
-          sectionId: a.id,
-          type: "header",
-          style: l
-        }).render();
-        Array.isArray(c) && (c.forEach((p) => {
-          p.props && p.props.style && (p.props.style.gridColumn = `1 / span ${s}`);
-        }), i.push(...c));
-      }
-      if (a.items.forEach((l) => {
-        const u = l.render(), c = Array.isArray(u) ? u : [u];
-        i.push(...c);
-      }), a.footer) {
-        const l = a.footerStyle || (o ? "sticky" : "automatic"), c = new Z({
-          content: a.footer,
-          sectionId: a.id,
-          type: "footer",
-          style: l
-        }).render();
-        Array.isArray(c) && (c.forEach((p) => {
-          p.props && p.props.style && (p.props.style.gridColumn = `1 / span ${s}`);
-        }), i.push(...c));
-      }
-    }), i;
-  }
-  /**
-   * Get the number of columns in the grid (Phase 3 helper)
-   */
-  getColumnCount() {
-    const { columns: e } = this.props;
-    if (Array.isArray(e))
-      return e.length;
-    if (typeof e == "object" && e !== null) {
-      const t = e, i = t.base || t.sm || t.md || t.lg || t.xl || t.xxl;
-      return Array.isArray(i) ? i.length : 1;
-    }
-    return 1;
-  }
-  /**
-   * Generate columns from GridItemConfig array (Phase 2 helper)
-   */
-  generateColumnsFromConfig(e) {
-    return e.map((t) => {
-      switch (t.type) {
-        case "fixed":
-          return `${t.size}px`;
-        case "flexible":
-          const i = t.minimum || 0, s = t.maximum ? `${t.maximum}px` : "1fr";
-          return i > 0 ? `minmax(${i}px, ${s})` : "1fr";
-        case "adaptive":
-          const n = t.minimum, o = t.maximum ? `${t.maximum}px` : "1fr";
-          return `minmax(${n}px, ${o})`;
-        default:
-          return "1fr";
-      }
-    }).join(" ");
-  }
-}
-class Te extends ne {
-  constructor(e, t = []) {
-    super(e, "lazy-hgrid", t), this.props = e;
-  }
-  render() {
-    const { rows: e, alignment: t = "center", spacing: i, debugLabel: s, responsive: n, sections: o, pinnedViews: a, animations: l, accessibility: u, styling: c } = this.props, p = U();
-    p.logComponent("LAZYHGRID", s);
-    const h = ["tachui-lazy-hgrid", ...p.isEnabled() ? ["tachui-debug"] : []], x = this.createClassString(this.props, h);
-    let k;
-    o && o.length > 0 ? k = this.renderSections(o, a) : k = this.applyItemAnimations(this.children, l).map((L) => {
-      const g = L.render();
-      return Array.isArray(g) ? g : [g];
-    }).flat();
-    let C, m = {
-      display: "grid",
-      gridAutoFlow: "column",
-      // Horizontal flow for LazyHGrid
-      overflowX: "auto"
-      // Enable horizontal scrolling
-    };
-    if (n) {
-      const R = J.startMeasurement("responsive-css-generation");
-      try {
-        const g = { ...de.createResponsiveGridConfig({
-          rows: e,
-          spacing: i,
-          alignment: t
-        }), ...n };
-        _.registerGrid(this.id, g, `#${this.id}`), _.visualizeBreakpoints(g);
-        const M = ce(g);
-        g.rows && typeof g.rows == "object" && "base" in g.rows && g.rows.base ? C = this.generateRowsFromConfig(g.rows.base) : Array.isArray(e) ? C = y.generateRows(e) : C = "auto", m._responsiveModifier = M;
-      } finally {
-        R();
-      }
-    } else {
-      const R = y.generateAlignment(t), L = y.generateSpacing(i);
-      if (Array.isArray(e))
-        C = y.generateRows(e);
-      else {
-        const M = y.generateResponsiveGridCSS(e, "grid-template-rows")["grid-template-rows"];
-        C = typeof M == "string" ? M : "auto";
-      }
-      m = {
-        ...m,
-        gap: L,
-        ...R
-      };
-    }
-    m.gridTemplateRows = C;
-    const H = this.generateAnimationStyles(l);
-    Object.assign(m, H);
-    const j = this.getRowCount(), q = this.generateAccessibilityAttributes(u, void 0, j), N = y.generateReducedMotionCSS(u);
-    Object.assign(m, N);
-    const G = this.generateStylingCSS(c);
-    Object.assign(m, G);
-    const ee = {
-      type: "element",
-      tag: this.effectiveTag,
-      props: {
-        className: x,
-        style: m,
-        ...q,
-        // Add debug attributes
-        ...p.isEnabled() && {
-          "data-tachui-component": "LazyHGrid",
-          ...s && { "data-tachui-label": s }
-        }
-      },
-      children: k,
-      // Add component metadata
-      componentMetadata: {
-        originalType: "LazyHGrid",
-        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
-        validationResult: this.validationResult,
-        // Phase 2: Include responsive modifier for processing
-        ...n && m._responsiveModifier && {
-          responsiveModifier: m._responsiveModifier
-        }
-      }
-    };
-    return m._responsiveModifier && delete m._responsiveModifier, [ee];
-  }
-  /**
-   * Render sectioned data with headers and footers (Phase 3)
-   */
-  renderSections(e, t) {
-    const i = [], s = this.getRowCount(), n = t?.includes("sectionHeaders"), o = t?.includes("sectionFooters");
-    return e.forEach((a) => {
-      if (a.header) {
-        const l = a.headerStyle || (n ? "sticky" : "automatic"), c = new Z({
-          content: a.header,
-          sectionId: a.id,
-          type: "header",
-          style: l
-        }).render();
-        Array.isArray(c) && (c.forEach((p) => {
-          p.props && p.props.style && (p.props.style.gridRow = `1 / span ${s}`, p.props.style.gridColumn = "auto");
-        }), i.push(...c));
-      }
-      if (a.items.forEach((l) => {
-        const u = l.render(), c = Array.isArray(u) ? u : [u];
-        i.push(...c);
-      }), a.footer) {
-        const l = a.footerStyle || (o ? "sticky" : "automatic"), c = new Z({
-          content: a.footer,
-          sectionId: a.id,
-          type: "footer",
-          style: l
-        }).render();
-        Array.isArray(c) && (c.forEach((p) => {
-          p.props && p.props.style && (p.props.style.gridRow = `1 / span ${s}`, p.props.style.gridColumn = "auto");
-        }), i.push(...c));
-      }
-    }), i;
-  }
-  /**
-   * Get the number of rows in the grid (Phase 3 helper)
-   */
-  getRowCount() {
-    const { rows: e } = this.props;
-    if (Array.isArray(e))
-      return e.length;
-    if (typeof e == "object" && e !== null) {
-      const t = e, i = t.base || t.sm || t.md || t.lg || t.xl || t.xxl;
-      return Array.isArray(i) ? i.length : 1;
-    }
-    return 1;
-  }
-  /**
-   * Generate rows from GridItemConfig array (Phase 2 helper)
-   */
-  generateRowsFromConfig(e) {
-    return e.map((t) => {
-      switch (t.type) {
-        case "fixed":
-          return `${t.size}px`;
-        case "flexible":
-          const i = t.minimum || 0, s = t.maximum ? `${t.maximum}px` : "1fr";
-          return i > 0 ? `minmax(${i}px, ${s})` : "1fr";
-        case "adaptive":
-          const n = t.minimum, o = t.maximum ? `${t.maximum}px` : "1fr";
-          return `minmax(${n}px, ${o})`;
-        default:
-          return "auto";
-      }
-    }).join(" ");
-  }
-}
-function lt(r = {}) {
-  const { children: e = [], ...t } = r, i = new Le(t, e);
-  return I(i);
-}
-function ct(r = [], e = {}) {
-  const t = { ...e, children: r }, i = new Me(t, r);
-  return I(i);
-}
-function dt(r) {
-  const { children: e = [], ...t } = r, i = new Oe({ ...t, children: e }, e);
-  return I(i);
-}
-function pt(r) {
-  const { children: e = [], ...t } = r, i = new Te({ ...t, children: e }, e);
-  return I(i);
-}
-var ze = Object.defineProperty, De = (r, e, t) => e in r ? ze(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, E = (r, e, t) => De(r, typeof e != "symbol" ? e + "" : e, t);
-class Fe {
-  constructor(e) {
-    this.props = e, E(this, "type", "component"), E(this, "id"), E(this, "mounted", !1), E(this, "cleanup", []), E(this, "formElement", null), E(this, "validationErrors"), E(this, "setValidationErrors"), E(this, "setIsValid"), E(this, "handleSubmit", async (n) => {
-      if (n.preventDefault(), this.props.validateOnSubmit !== !1) {
-        const o = this.validateForm();
-        if (this.setValidationErrors(o), o.length > 0)
-          return;
-      }
-      if (this.props.onSubmit) {
-        const o = this.extractFormData();
-        await this.props.onSubmit(o);
-      }
-    }), E(this, "handleChange", () => {
-      if (this.props.validateOnChange) {
-        const n = this.validateForm();
-        this.setValidationErrors(n);
-      }
-    }), this.id = `form-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, i] = $([]), [, s] = $(!0);
-    this.validationErrors = t, this.setValidationErrors = i, this.setIsValid = s, D(() => {
-      const n = this.validationErrors(), o = n.length === 0;
-      this.setIsValid(o), this.props.onValidationChange && this.props.onValidationChange(o, n);
-    });
-  }
-  /**
-   * Extract form data from form elements
-   */
-  extractFormData() {
-    if (!this.formElement) return {};
-    const e = new FormData(this.formElement), t = {};
-    for (const [i, s] of e.entries())
-      t[i] ? Array.isArray(t[i]) ? t[i].push(s) : t[i] = [t[i], s] : t[i] = s;
-    return t;
-  }
-  /**
-   * Validate all form fields
-   */
-  validateForm() {
-    if (!this.formElement) return [];
-    const e = [];
-    return this.formElement.querySelectorAll("input, select, textarea").forEach((i) => {
-      const s = i, n = s.name || s.id;
-      s.checkValidity() || e.push({
-        field: n,
-        message: s.validationMessage,
-        code: "html5_validation"
-      }), s.hasAttribute("required") && !s.value.trim() && e.push({
-        field: n,
-        message: `${n} is required`,
-        code: "required"
-      });
-    }), e;
-  }
-  /**
-   * Get form styling based on style prop
-   */
-  getFormStyles() {
-    const { style: e = "automatic", spacing: t = 16 } = this.props, i = {
-      display: "flex",
-      flexDirection: "column",
-      gap: `${t}px`
-    };
-    switch (e) {
-      case "grouped":
-        return {
-          ...i,
-          backgroundColor: "#ffffff",
-          border: "1px solid #e0e0e0",
-          borderRadius: "12px",
-          padding: "20px",
-          boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
-        };
-      case "inset":
-        return {
-          ...i,
-          backgroundColor: "#f8f9fa",
-          border: "1px solid #e9ecef",
-          borderRadius: "8px",
-          padding: "16px",
-          margin: "0 16px"
-        };
-      case "plain":
-        return i;
-      default:
-        return {
-          ...i,
-          backgroundColor: "#ffffff",
-          borderRadius: "8px",
-          padding: "16px"
-        };
-    }
-  }
-  /**
-   * Render validation summary
-   */
-  renderValidationSummary() {
-    const e = this.validationErrors();
-    return !this.props.showValidationSummary || e.length === 0 ? null : d(
-      "div",
-      {
-        style: {
-          backgroundColor: "#fff5f5",
-          border: "1px solid #fed7d7",
-          borderRadius: "6px",
-          padding: "12px 16px",
-          marginBottom: "16px"
-        }
-      },
-      d(
-        "div",
-        {
-          style: {
-            fontSize: "14px",
-            fontWeight: "600",
-            color: "#e53e3e",
-            marginBottom: "8px"
-          }
-        },
-        S("Please fix the following errors:")
-      ),
-      d(
-        "ul",
-        {
-          style: {
-            margin: "0",
-            paddingLeft: "20px",
-            fontSize: "14px",
-            color: "#c53030"
-          }
-        },
-        ...e.map((t) => d("li", { key: t.field }, S(t.message)))
-      )
-    );
-  }
-  render() {
-    const { children: e = [], accessibilityLabel: t, accessibilityRole: i = "form" } = this.props;
-    return [
-      d(
-        "form",
-        {
-          ref: (s) => {
-            this.formElement = s, s && !this.mounted && (s.addEventListener("submit", this.handleSubmit), s.addEventListener("change", this.handleChange), s.addEventListener("input", this.handleChange), this.cleanup.push(() => {
-              s.removeEventListener("submit", this.handleSubmit), s.removeEventListener("change", this.handleChange), s.removeEventListener("input", this.handleChange);
-            }), this.mounted = !0);
-          },
-          style: this.getFormStyles(),
-          "aria-label": t,
-          role: i,
-          noValidate: !0
-          // We handle validation manually
-        },
-        ...this.renderValidationSummary() !== null ? [this.renderValidationSummary()] : [],
-        ...e.flatMap((s) => s.render())
-      )
-    ];
-  }
-}
-function X(r, e = {}) {
-  const t = { ...e, children: r }, i = new Fe(t);
-  return I(i);
-}
-const ut = {
-  /**
-   * Automatic form styling (default)
-   */
-  Automatic(r, e = {}) {
-    return X(r, { ...e, style: "automatic" });
-  },
-  /**
-   * Grouped form with container styling
-   */
-  Grouped(r, e = {}) {
-    return X(r, { ...e, style: "grouped" });
-  },
-  /**
-   * Inset form styling
-   */
-  Inset(r, e = {}) {
-    return X(r, { ...e, style: "inset" });
-  },
-  /**
-   * Plain form without styling
-   */
-  Plain(r, e = {}) {
-    return X(r, { ...e, style: "plain" });
-  }
-}, ht = {
-  /**
-   * Common validation rules
-   */
-  rules: {
-    // biome-ignore lint/suspicious/noExplicitAny: Validation rules accept any input type
-    required: (r) => r != null && r !== "",
-    email: (r) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r),
-    minLength: (r) => (e) => e.length >= r,
-    maxLength: (r) => (e) => e.length <= r,
-    pattern: (r) => (e) => r.test(e),
-    number: (r) => !Number.isNaN(Number(r)),
-    integer: (r) => Number.isInteger(Number(r)),
-    min: (r) => (e) => Number(e) >= r,
-    max: (r) => (e) => Number(e) <= r
-  },
-  /**
-   * Validate a single field
-   */
-  validateField(r, e) {
-    for (const t of e) {
-      const i = t(r);
-      if (i !== !0)
-        return {
-          field: "field",
-          message: typeof i == "string" ? i : "Validation failed",
-          code: "custom_validation"
-        };
-    }
-    return null;
-  }
-};
-var Ge = Object.defineProperty, Pe = (r, e, t) => e in r ? Ge(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, te = (r, e, t) => Pe(r, typeof e != "symbol" ? e + "" : e, t);
-class oe {
-  constructor(e) {
-    te(this, "type", "component"), te(this, "id"), te(this, "props"), this.props = e, this.id = `enhanced-link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  resolveValue(e) {
-    return f(e) ? e() : e;
-  }
-  getDestination() {
-    const e = this.resolveValue(this.props.destination);
-    return e instanceof URL ? e.toString() : e;
-  }
-  getTarget() {
-    const e = this.resolveValue(this.props.target);
-    if (e)
-      return e;
-    const t = this.resolveValue(this.props.destination), i = t instanceof URL ? t.toString() : t;
-    return this.isExternalURL(i) ? "_blank" : "_self";
-  }
-  getRoutingMode() {
-    return this.resolveValue(this.props.routingMode) || "auto";
-  }
-  getRel() {
-    const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), n = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
-    return e && n ? `${e} ${n}`.trim() : e || n;
-  }
-  getDownload() {
-    return this.resolveValue(this.props.download);
-  }
-  isDisabled() {
-    return this.resolveValue(this.props.disabled) || !1;
-  }
-  getAccessibilityLabel() {
-    return this.resolveValue(this.props.accessibilityLabel);
-  }
-  getAccessibilityHint() {
-    return this.resolveValue(this.props.accessibilityHint);
-  }
-  getAccessibilityRole() {
-    return this.resolveValue(this.props.accessibilityRole);
-  }
-  shouldUseInternalRouting(e) {
-    const t = this.getRoutingMode();
-    return t === "internal" ? !0 : t === "external" ? !1 : t === "spa" ? !0 : !(this.isSpecialScheme(e) || this.isExternalURL(e));
-  }
-  isSpecialScheme(e) {
-    return /^(mailto|tel|sms|ftp|file):/.test(e);
-  }
-  async handleClick(e) {
-    if (this.isDisabled()) {
-      e.preventDefault();
-      return;
-    }
-    if (this.props.onPress)
-      try {
-        this.props.onPress(e);
-      } catch (n) {
-        console.error("Link onPress error:", n);
-      }
-    const t = this.getDestination();
-    if (this.isSpecialScheme(t) || (e.preventDefault(), this.props.openURLAction && this.props.openURLAction(t) === "handled"))
-      return;
-    if (this.props.onBeforeNavigation)
-      try {
-        if (!await this.props.onBeforeNavigation(t))
-          return;
-      } catch (n) {
-        throw console.error("Link onBeforeNavigation error:", n), n;
-      }
-    const i = this.getTarget(), s = this.getRoutingMode();
-    if (this.shouldUseInternalRouting(t)) {
-      if (this.props.onInternalNavigation)
-        try {
-          if (await this.props.onInternalNavigation(t))
-            return;
-        } catch (n) {
-          console.error("Link onInternalNavigation error:", n);
-        }
-      s === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
-    } else
-      i === "_blank" || i === "_top" || i === "_parent" ? window.open(t, i) : window.location.href = t;
-  }
-  handleSPANavigation(e) {
-    typeof window < "u" && window.history && window.history.pushState ? (window.history.pushState(null, "", e), window.dispatchEvent(new PopStateEvent("popstate"))) : window.location.href = e;
-  }
-  isExternalURL(e) {
-    try {
-      return new URL(e, window.location.href).hostname !== window.location.hostname;
-    } catch {
-      return !1;
-    }
-  }
-  renderContent() {
-    if (this.props.label) {
-      const n = this.props.label().render();
-      return Array.isArray(n) ? n : [n];
-    }
-    if (this.props.children)
-      return this.renderChildren();
-    let e;
-    this.props.text ? e = this.props.text : f(this.props.destination) ? e = xe(() => this.getDestination()) : e = this.getDestination();
-    const i = re(e).render();
-    return Array.isArray(i) ? i : [i];
-  }
-  renderChildren() {
-    const { children: e } = this.props;
-    return e ? Array.isArray(e) ? e.map((t) => this.renderChild(t)).flat() : this.renderChild(e) : [];
-  }
-  renderChild(e) {
-    if (typeof e == "string") {
-      const i = re(e).render();
-      return Array.isArray(i) ? i : [i];
-    } else {
-      const t = e.render();
-      return Array.isArray(t) ? t : [t];
-    }
-  }
-  render() {
-    const e = this.renderContent(), t = this.isDisabled(), i = {
-      id: this.id,
-      "data-component": "enhanced-link"
-    };
-    f(this.props.destination) ? i.href = () => this.getDestination() : i.href = this.getDestination(), this.props.target && (f(this.props.target) ? i.target = () => this.getTarget() : i.target = this.getTarget());
-    const s = this.getRel();
-    s && (f(this.props.rel) || f(this.props.target) ? i.rel = () => this.getRel() : i.rel = s);
-    const n = this.getDownload();
-    n !== void 0 && (f(this.props.download) ? i.download = () => this.getDownload() : n === !0 ? i.download = !0 : typeof n == "string" && (i.download = n));
-    const o = this.getAccessibilityLabel();
-    o && (f(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = o);
-    const a = this.getAccessibilityHint();
-    a && (f(this.props.accessibilityHint) ? i["aria-describedby"] = () => this.getAccessibilityHint() : i["aria-describedby"] = a);
-    const l = this.getAccessibilityRole();
-    return l && (f(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = l), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (c) => this.handleClick(c), i.style = {
-      textDecoration: "none",
-      color: "inherit",
-      cursor: t ? "not-allowed" : "pointer",
-      opacity: t ? 0.6 : 1
-    }, d("a", i, ...e);
-  }
-  // Concatenation support
-  concat(e) {
-    const t = this.toSegment(), i = e.toSegment(), s = {
-      totalSegments: 2,
-      accessibilityRole: "composite",
-      semanticStructure: "inline"
-    };
-    return new ye([t, i], s);
-  }
-  toSegment() {
-    return {
-      id: this.id,
-      component: this,
-      modifiers: [],
-      render: () => this.render()
-    };
-  }
-  isConcatenatable() {
-    return !0;
-  }
-}
-function ft(r, e) {
-  if (e !== void 0) {
-    const s = {
-      text: r,
-      destination: e
-    }, n = new oe(s);
-    return I(n);
-  }
-  const t = r, i = new oe(t);
-  return I(i);
-}
-const P = {
-  /**
-   * Create an external link that opens in a new tab
-   */
-  external(r, e, t = {}) {
-    return {
-      destination: r,
-      children: e,
-      target: "_blank",
-      routingMode: "external",
-      rel: "noopener noreferrer external",
-      accessibilityHint: "Opens in a new tab",
-      ...t
-    };
-  },
-  /**
-   * Create an internal link for same-domain navigation
-   */
-  internal(r, e, t = {}) {
-    return {
-      destination: r,
-      children: e,
-      routingMode: "internal",
-      target: "_self",
-      ...t
-    };
-  },
-  /**
-   * Create a SPA link using History API
-   */
-  spa(r, e, t = {}) {
-    return {
-      destination: r,
-      children: e,
-      routingMode: "spa",
-      target: "_self",
-      accessibilityHint: "Navigates within the app",
-      ...t
-    };
-  },
-  /**
-   * Create an email link with optional subject and body
-   */
-  email(r, e, t, i) {
-    let s = `mailto:${r}`;
-    const n = new URLSearchParams();
-    return e && n.append("subject", e), t && n.append("body", t), n.toString() && (s += `?${n.toString()}`), {
-      destination: s,
-      children: i || r,
-      accessibilityLabel: `Send email to ${r}`,
-      accessibilityHint: "Opens your email app"
-    };
-  },
-  /**
-   * Create a phone link with formatted display
-   */
-  phone(r, e) {
-    return {
-      destination: `tel:${r.replace(/[^\d+]/g, "")}`,
-      children: e || r,
-      accessibilityLabel: `Call ${r}`,
-      accessibilityHint: "Opens your phone app"
-    };
-  },
-  /**
-   * Create a download link
-   */
-  download(r, e, t) {
-    return {
-      destination: r,
-      children: t || `Download ${e || "file"}`,
-      download: e || !0,
-      accessibilityLabel: `Download ${e || "file"}`,
-      accessibilityHint: "Downloads file to your device"
-    };
-  },
-  /**
-   * Social media link utilities
-   */
-  social: {
-    twitter(r, e) {
-      return P.external(
-        `https://twitter.com/${r}`,
-        e || `@${r}`,
-        { accessibilityLabel: `Visit ${r} on Twitter` }
-      );
-    },
-    github(r, e) {
-      return P.external(
-        `https://github.com/${r}`,
-        e || r,
-        { accessibilityLabel: `Visit ${r} on GitHub` }
-      );
-    },
-    linkedin(r, e) {
-      return P.external(
-        `https://linkedin.com/in/${r}`,
-        e || r,
-        { accessibilityLabel: `Visit ${r} on LinkedIn` }
-      );
-    },
-    instagram(r, e) {
-      return P.external(
-        `https://instagram.com/${r}`,
-        e || `@${r}`,
-        { accessibilityLabel: `Visit ${r} on Instagram` }
-      );
-    },
-    facebook(r, e) {
-      return P.external(
-        `https://facebook.com/${r}`,
-        e || r,
-        { accessibilityLabel: `Visit ${r} on Facebook` }
-      );
-    }
-  },
-  /**
-   * App store link utilities
-   */
-  appStore: {
-    ios(r, e) {
-      return P.external(
-        `https://apps.apple.com/app/id${r}`,
-        e || "Download from App Store",
-        {
-          accessibilityLabel: "Download from the iOS App Store",
-          accessibilityHint: "Opens App Store app or website"
-        }
-      );
-    },
-    android(r, e) {
-      return P.external(
-        `https://play.google.com/store/apps/details?id=${r}`,
-        e || "Get it on Google Play",
-        {
-          accessibilityLabel: "Download from Google Play Store",
-          accessibilityHint: "Opens Google Play Store app or website"
-        }
-      );
-    }
-  },
-  /**
-   * Create a custom OpenURL action
-   */
-  openURLAction(r) {
-    return (e) => r(e) ? "handled" : "systemAction";
-  }
-};
-var Ve = Object.defineProperty, _e = (r, e, t) => e in r ? Ve(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, b = (r, e, t) => _e(r, typeof e != "symbol" ? e + "" : e, t);
-class He {
-  constructor(e) {
-    this.props = e, b(this, "type", "component"), b(this, "id"), b(this, "mounted", !1), b(this, "cleanup", []), b(this, "dataSignal"), b(this, "setData"), b(this, "sectionsSignal"), b(this, "setSections"), b(this, "selectedItemsSignal"), b(this, "setSelectedItems"), b(this, "isLoadingSignal"), b(this, "setIsLoading"), b(this, "virtualItems", []), b(this, "visibleStartIndex", 0), b(this, "visibleEndIndex", 0), b(this, "scrollOffset", 0), b(this, "containerHeight", 0), b(this, "totalHeight", 0), b(this, "handleListScroll", (p) => {
-      this.scrollOffset = p.offset.y, this.containerHeight = p.containerSize.height, this.props.virtualScrolling?.enabled && this.calculateVisibleRange(), this.props.onLoadMore && p.edges.bottom && (f(this.props.hasMore) ? this.props.hasMore() : this.props.hasMore) && !this.isLoadingSignal() && (this.setIsLoading(!0), this.props.onLoadMore().finally(() => {
-        this.setIsLoading(!1);
-      })), this.props.onScroll && this.props.onScroll(p);
-    }), this.id = `list-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, i] = $(this.resolveData());
-    this.dataSignal = t, this.setData = i;
-    const [s, n] = $(this.resolveSections());
-    this.sectionsSignal = s, this.setSections = n;
-    const o = /* @__PURE__ */ new Set(), [a, l] = $(o);
-    this.selectedItemsSignal = a, this.setSelectedItems = l;
-    const [u, c] = $(this.resolveIsLoading());
-    this.isLoadingSignal = u, this.setIsLoading = c, this.setupReactiveUpdates(), e.virtualScrolling?.enabled && this.initializeVirtualScrolling();
-  }
-  /**
-   * Helper to flatten render results
-   */
-  flattenRenderResult(e) {
-    return Array.isArray(e) ? e : [e];
-  }
-  /**
-   * Resolve data from various input types
-   */
-  resolveData() {
-    const { data: e } = this.props;
-    return Array.isArray(e) ? e : f(e) ? e() : [];
-  }
-  /**
-   * Resolve sections from various input types
-   */
-  resolveSections() {
-    const { sections: e } = this.props;
-    return Array.isArray(e) ? e : f(e) ? e() : [];
-  }
-  /**
-   * Resolve loading state
-   */
-  resolveIsLoading() {
-    const { isLoading: e } = this.props;
-    return typeof e == "boolean" ? e : f(e) ? e() : !1;
-  }
-  /**
-   * Set up reactive updates for data and state
-   */
-  setupReactiveUpdates() {
-    if (f(this.props.data)) {
-      const e = D(() => {
-        this.setData(this.resolveData()), this.updateVirtualScrolling();
-      });
-      this.cleanup.push(() => e.dispose());
-    }
-    if (f(this.props.sections)) {
-      const e = D(() => {
-        this.setSections(this.resolveSections()), this.updateVirtualScrolling();
-      });
-      this.cleanup.push(() => e.dispose());
-    }
-    if (f(this.props.isLoading)) {
-      const e = D(() => {
-        this.setIsLoading(this.resolveIsLoading());
-      });
-      this.cleanup.push(() => e.dispose());
-    }
-    if (this.props.selectedItems) {
-      const e = D(() => {
-        this.props.selectedItems && this.setSelectedItems(this.props.selectedItems());
-      });
-      this.cleanup.push(() => e.dispose());
-    }
-  }
-  /**
-   * Initialize virtual scrolling calculations
-   */
-  initializeVirtualScrolling() {
-    const e = this.dataSignal(), i = this.props.virtualScrolling.estimatedItemHeight || 50;
-    this.virtualItems = e.map((s, n) => ({
-      index: n,
-      height: i,
-      offset: n * i,
-      item: s
-    })), this.totalHeight = e.length * i;
-  }
-  /**
-   * Update virtual scrolling calculations
-   */
-  updateVirtualScrolling() {
-    this.props.virtualScrolling?.enabled && (this.initializeVirtualScrolling(), this.calculateVisibleRange());
-  }
-  /**
-   * Calculate visible item range for virtual scrolling
-   */
-  calculateVisibleRange() {
-    if (!this.props.virtualScrolling?.enabled) return;
-    const e = this.props.virtualScrolling, t = e.overscan || 5, i = e.threshold || 0;
-    let s = 0;
-    for (let o = 0; o < this.virtualItems.length; o++)
-      if (this.virtualItems[o].offset + this.virtualItems[o].height > this.scrollOffset - i) {
-        s = Math.max(0, o - t);
-        break;
-      }
-    let n = this.virtualItems.length - 1;
-    for (let o = s; o < this.virtualItems.length; o++)
-      if (this.virtualItems[o].offset > this.scrollOffset + this.containerHeight + i) {
-        n = Math.min(this.virtualItems.length - 1, o + t);
-        break;
-      }
-    this.visibleStartIndex = s, this.visibleEndIndex = n;
-  }
-  /**
-   * Handle item selection
-   */
-  handleItemSelection(e, t) {
-    const { selectionMode: i, getItemId: s, onSelectionChange: n } = this.props;
-    if (i === "none") return;
-    const o = s ? s(e, t) : t, a = new Set(this.selectedItemsSignal());
-    i === "single" ? (a.clear(), a.add(o)) : i === "multiple" && (a.has(o) ? a.delete(o) : a.add(o)), this.setSelectedItems(a), n && n(a);
-  }
-  /**
-   * Create list item component
-   */
-  createListItem(e, t, i) {
-    const { renderItem: s, style: n, onItemTap: o, onItemLongPress: a } = this.props, l = s(e, t);
-    return {
-      type: "component",
-      id: `${this.id}-item-${t}`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => {
-        const u = d(
-          "div",
-          {
-            class: `tachui-list-item tachui-list-item-${n || "plain"}`,
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              position: "relative",
-              backgroundColor: i ? "#e6f3ff" : "transparent",
-              transition: "background-color 0.2s ease",
-              cursor: o ? "pointer" : "default"
-            }
-          },
-          ...this.flattenRenderResult(l.render())
-        );
-        if (u.element) {
-          const c = u.element;
-          if (o && c.addEventListener("click", () => o(e, t)), a) {
-            let p;
-            const h = () => {
-              p = setTimeout(() => a(e, t), 500);
-            }, x = () => {
-              clearTimeout(p);
-            };
-            c.addEventListener("mousedown", h), c.addEventListener("mouseup", x), c.addEventListener("mouseleave", x), c.addEventListener("touchstart", h), c.addEventListener("touchend", x);
-          }
-          this.props.selectionMode !== "none" && c.addEventListener("click", (p) => {
-            (p.metaKey || p.ctrlKey || this.props.selectionMode === "multiple") && (p.preventDefault(), this.handleItemSelection(e, t));
-          });
-        }
-        return [u];
-      }
-    };
-  }
-  /**
-   * Create list separator
-   */
-  createSeparator() {
-    const { separator: e } = this.props;
-    return e ? typeof e == "object" && "render" in e ? e : {
-      type: "component",
-      id: `${this.id}-separator`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => [
-        d("div", {
-          class: "tachui-list-separator",
-          style: {
-            height: "1px",
-            backgroundColor: "#e0e0e0",
-            margin: "0 16px"
-          }
-        })
-      ]
-    } : null;
-  }
-  /**
-   * Create section header
-   */
-  createSectionHeader(e, t) {
-    return e.header ? typeof e.header == "string" ? {
-      type: "component",
-      id: `${this.id}-section-header-${t}`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => [
-        d(
-          "div",
-          {
-            class: "tachui-list-section-header",
-            style: {
-              padding: "8px 16px",
-              backgroundColor: "#f8f9fa",
-              fontWeight: "600",
-              fontSize: "14px",
-              color: "#666",
-              textTransform: "uppercase",
-              letterSpacing: "0.5px"
-            }
-          },
-          e.header
-        )
-      ]
-    } : this.props.renderSectionHeader ? this.props.renderSectionHeader(e, t) : e.header : null;
-  }
-  /**
-   * Create section footer
-   */
-  createSectionFooter(e, t) {
-    return e.footer ? typeof e.footer == "string" ? {
-      type: "component",
-      id: `${this.id}-section-footer-${t}`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => [
-        d(
-          "div",
-          {
-            class: "tachui-list-section-footer",
-            style: {
-              padding: "8px 16px",
-              fontSize: "12px",
-              color: "#999"
-            }
-          },
-          e.footer
-        )
-      ]
-    } : this.props.renderSectionFooter ? this.props.renderSectionFooter(e, t) : e.footer : null;
-  }
-  /**
-   * Create empty state component
-   */
-  createEmptyState() {
-    const { emptyState: e } = this.props;
-    return e || {
-      type: "component",
-      id: `${this.id}-empty`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => [
-        d(
-          "div",
-          {
-            class: "tachui-list-empty",
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "40px 20px",
-              color: "#999",
-              fontSize: "16px"
-            }
-          },
-          "No items to display"
-        )
-      ]
-    };
-  }
-  /**
-   * Create loading indicator
-   */
-  createLoadingIndicator() {
-    const { loadingIndicator: e } = this.props;
-    return e || {
-      type: "component",
-      id: `${this.id}-loading`,
-      mounted: !1,
-      cleanup: [],
-      props: {},
-      render: () => [
-        d(
-          "div",
-          {
-            class: "tachui-list-loading",
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "20px",
-              color: "#999"
-            }
-          },
-          "Loading..."
-        )
-      ]
-    };
-  }
-  /**
-   * Render virtual scrolling content
-   */
-  renderVirtualContent() {
-    if (!this.props.virtualScrolling?.enabled)
-      return this.renderRegularContent();
-    const e = this.dataSignal(), t = this.selectedItemsSignal(), i = this.createSeparator(), s = [];
-    if (this.visibleStartIndex > 0) {
-      const n = this.virtualItems[this.visibleStartIndex]?.offset || 0;
-      s.push({
-        type: "component",
-        id: `${this.id}-spacer-top`,
-        mounted: !1,
-        cleanup: [],
-        props: {},
-        render: () => [
-          d("div", {
-            style: { height: `${n}px` }
-          })
-        ]
-      });
-    }
-    for (let n = this.visibleStartIndex; n <= this.visibleEndIndex && n < e.length; n++) {
-      const o = e[n], a = this.props.getItemId ? this.props.getItemId(o, n) : n, l = t.has(a);
-      s.push(this.createListItem(o, n, l)), i && n < e.length - 1 && s.push(i);
-    }
-    if (this.visibleEndIndex < e.length - 1) {
-      const n = this.totalHeight - (this.virtualItems[this.visibleEndIndex + 1]?.offset || 0);
-      s.push({
-        type: "component",
-        id: `${this.id}-spacer-bottom`,
-        mounted: !1,
-        cleanup: [],
-        props: {},
-        render: () => [
-          d("div", {
-            style: { height: `${n}px` }
-          })
-        ]
-      });
-    }
-    return s;
-  }
-  /**
-   * Render regular (non-virtual) content
-   */
-  renderRegularContent() {
-    const e = this.dataSignal(), t = this.sectionsSignal(), i = this.selectedItemsSignal(), s = this.createSeparator(), n = [];
-    return t.length > 0 ? t.forEach((o, a) => {
-      const l = this.createSectionHeader(o, a);
-      l && n.push(l), o.items.forEach((c, p) => {
-        const h = a * 1e3 + p, x = this.props.getItemId ? this.props.getItemId(c, h) : h, k = i.has(x);
-        n.push(this.createListItem(c, h, k)), s && p < o.items.length - 1 && n.push(s);
-      });
-      const u = this.createSectionFooter(o, a);
-      u && n.push(u);
-    }) : e.forEach((o, a) => {
-      const l = this.props.getItemId ? this.props.getItemId(o, a) : a, u = i.has(l);
-      n.push(this.createListItem(o, a, u)), s && a < e.length - 1 && n.push(s);
-    }), n;
-  }
-  /**
-   * Render the list component
-   */
-  render() {
-    const e = this.dataSignal(), t = this.isLoadingSignal();
-    if (t && e.length === 0) {
-      const o = this.createLoadingIndicator();
-      return o ? o.render() : [];
-    }
-    if (e.length === 0 && !t) {
-      const o = this.createEmptyState();
-      return o ? o.render() : [];
-    }
-    const i = this.props.virtualScrolling?.enabled ? this.renderVirtualContent() : this.renderRegularContent();
-    if (t && e.length > 0) {
-      const o = this.createLoadingIndicator();
-      o && i.push(o);
-    }
-    const s = {
-      ...this.props,
-      children: i,
-      onScroll: this.handleListScroll
-    };
-    return new $e(s).render();
-  }
-}
-class pe {
-  constructor(e) {
-    b(this, "type", "component"), b(this, "id"), b(this, "mounted", !1), b(this, "cleanup", []), b(this, "props"), b(this, "dataSignal"), this.props = {
-      ...e,
-      renderItem: e.children,
-      children: void 0
-      // ComponentProps children
-    }, this.id = `foreach-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.dataSignal = f(e.data) ? e.data : () => e.data;
-  }
-  /**
-   * Helper to flatten render results
-   */
-  flattenRenderResult(e) {
-    return Array.isArray(e) ? e : [e];
-  }
-  /**
-   * Render children for current data
-   */
-  renderChildren() {
-    return this.dataSignal().flatMap((t, i) => {
-      const s = this.props.renderItem(t, i);
-      return (Array.isArray(s) ? s : [s]).flatMap((o) => this.flattenRenderResult(o.render()));
-    });
-  }
-  /**
-   * Render ForEach with reactive container pattern like Show component
-   */
-  render() {
-    if (!(f(this.props.data) || ve(this.props.data)))
-      return this.renderChildren();
-    const t = {
-      type: "element",
-      tag: "div",
-      props: {
-        style: { display: "contents" }
-        // Make container invisible
-      },
-      children: [],
-      dispose: void 0
-    }, i = Ce(() => {
-      const n = D(() => {
-        const o = this.renderChildren();
-        t.children = o, t.element && t.element instanceof HTMLElement && this.updateContainerDOM(t.element, o);
-      });
-      return () => n.dispose();
-    });
-    t.dispose = i;
-    const s = this.renderChildren();
-    return t.children = s, [t];
-  }
-  /**
-   * Update the container DOM element with new children using TachUI's renderer
-   */
-  updateContainerDOM(e, t) {
-    e.innerHTML = "";
-    const i = new Se();
-    t.forEach((s) => {
-      try {
-        const n = i.render(s);
-        n && e.appendChild(n);
-      } catch (n) {
-        console.error("Error rendering ForEach component child:", n);
-      }
-    });
-  }
-  /**
-   * Cleanup resources
-   */
-  dispose() {
-    this.cleanup.forEach((e) => {
-      try {
-        e();
-      } catch (t) {
-        console.error("ForEach component cleanup error:", t);
-      }
-    }), this.cleanup = [];
-  }
-}
-function K(r) {
-  const e = new He(r);
-  return I(e);
-}
-function mt(r) {
-  return new pe(r);
-}
-function gt(r) {
-  const e = {
-    data: r.each,
-    children: r.children,
-    key: r.key,
-    ref: r.ref
-  };
-  return new pe(e);
-}
-const bt = {
-  /**
-   * Create a simple list from array
-   */
-  simple(r, e, t = {}) {
-    return K({
-      ...t,
-      data: r,
-      renderItem: e
-    });
-  },
-  /**
-   * Create a sectioned list
-   */
-  sectioned(r, e, t = {}) {
-    return K({
-      ...t,
-      sections: r,
-      renderItem: e
-    });
-  },
-  /**
-   * Create a virtual scrolling list for large datasets
-   */
-  virtual(r, e, t, i = {}) {
-    return K({
-      ...i,
-      data: r,
-      renderItem: e,
-      virtualScrolling: t
-    });
-  },
-  /**
-   * Create an infinite scrolling list
-   */
-  infinite(r, e, t, i, s = {}) {
-    return K({
-      ...s,
-      data: r,
-      renderItem: e,
-      onLoadMore: t,
-      hasMore: i
-    });
-  }
-};
-var je = Object.defineProperty, Ne = (r, e, t) => e in r ? je(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, w = (r, e, t) => Ne(r, typeof e != "symbol" ? e + "" : e, t);
-const W = {
-  colors: {
-    background: "#FFFFFF",
-    surface: "#F8F9FA",
-    text: "#1A1A1A",
-    textSecondary: "#6B7280",
-    textDisabled: "#A0A0A0",
-    textDestructive: "#FF3B30",
-    border: "#E5E5E5",
-    hover: "#F0F0F0",
-    active: "#E3F2FD",
-    separator: "#E5E5E5",
-    shortcut: "#8E8E93",
-    backdrop: "rgba(0, 0, 0, 0.1)"
-  },
-  spacing: {
-    padding: 8,
-    itemPadding: 12,
-    gap: 4
-  },
-  borderRadius: 8,
-  minWidth: 200,
-  maxWidth: 320,
-  itemHeight: 36,
-  shadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-  backdropBlur: "blur(2px)"
-};
-class Be {
-  constructor(e) {
-    w(this, "type", "component"), w(this, "id"), w(this, "props"), w(this, "cleanup", []), w(this, "theme", W), w(this, "isOpenSignal", $(!1)), w(this, "focusedIndex", -1), w(this, "menuElement", null), w(this, "triggerElement", null), w(this, "handleKeyDown", (t) => {
-      if (!this.isOpen()) return;
-      const i = this.getVisibleItems();
-      switch (t.key) {
-        case "Escape":
-          (this.props.escapeKeyCloses ?? !0) && (t.preventDefault(), this.setIsOpenValue(!1));
-          break;
-        case "ArrowDown":
-          t.preventDefault(), this.focusedIndex = Math.min(this.focusedIndex + 1, i.length - 1), this.updateItemFocus();
-          break;
-        case "ArrowUp":
-          t.preventDefault(), this.focusedIndex = Math.max(this.focusedIndex - 1, 0), this.updateItemFocus();
-          break;
-        case "Enter":
-        case " ":
-          if (this.focusedIndex >= 0 && this.focusedIndex < i.length) {
-            t.preventDefault();
-            const s = this.menuElement?.querySelector(
-              `[data-menu-item-index="${this.focusedIndex}"]`
-            );
-            s && s.click();
-          }
-          break;
-        case "Home":
-          t.preventDefault(), this.focusedIndex = 0, this.updateItemFocus();
-          break;
-        case "End":
-          t.preventDefault(), this.focusedIndex = i.length - 1, this.updateItemFocus();
-          break;
-      }
-    }), w(this, "handleClickOutside", (t) => {
-      if (!(this.props.closeOnClickOutside ?? !0)) return;
-      const i = t.target, s = this.menuElement?.contains(i), n = this.triggerElement?.contains(i);
-      !s && !n && this.setIsOpenValue(!1);
-    }), w(this, "setIsOpenValue", (t) => {
-      this.props.isOpen ? typeof this.props.isOpen == "function" && this.props.isOpen(t) : this.setIsOpen(t);
-    }), this.props = e, this.id = `menu-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.props.isOpen && (this.isOpenSignal = [
-      this.props.isOpen,
-      ((t) => {
-        typeof this.props.isOpen == "function" && this.props.isOpen(
-          typeof t == "function" ? t(this.props.isOpen()) : t
-        );
-      })
-    ]), le(this, {
-      onDOMReady: (t, i) => {
-        i && (this.setupMenuPositioning(i), this.setupMenuAnimations(i));
-      }
-    });
-  }
-  get isOpen() {
-    return this.isOpenSignal[0];
-  }
-  get setIsOpen() {
-    return this.isOpenSignal[1];
-  }
-  resolveValue(e) {
-    return f(e) ? e() : e;
-  }
-  /**
-   * Set up menu positioning using enhanced lifecycle (ENHANCED Phase 3)
-   */
-  setupMenuPositioning(e) {
-    this.cleanup || (this.cleanup = []), ue(
-      this,
-      `[data-menu-trigger="${this.id}"]`,
-      `[data-menu-content="${this.id}"]`,
-      (t, i) => this.calculatePosition(t, i)
-    );
-  }
-  /**
-   * Set up menu animations using enhanced lifecycle (ENHANCED Phase 3)
-   */
-  setupMenuAnimations(e) {
-    this.cleanup || (this.cleanup = []);
-  }
-  getVisibleItems() {
-    return this.props.items.filter((e) => e.title !== "---");
-  }
-  createMenuItem(e, t) {
-    if (e.title === "---")
-      return d("div", {
-        role: "separator",
-        style: {
-          height: "1px",
-          backgroundColor: this.theme.colors.separator,
-          margin: `${this.theme.spacing.gap}px 0`
-        }
-      });
-    const i = this.resolveValue(e.disabled ?? !1), s = this.resolveValue(e.title), n = d("div", {
-      role: "menuitem",
-      tabindex: i ? "-1" : "0",
-      "aria-disabled": i,
-      "data-menu-item-index": t,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: `${this.theme.spacing.itemPadding}px`,
-        minHeight: `${this.theme.itemHeight}px`,
-        fontSize: "14px",
-        fontWeight: "400",
-        color: i ? this.theme.colors.textDisabled : e.destructive || e.role === "destructive" ? this.theme.colors.textDestructive : this.theme.colors.text,
-        cursor: i ? "default" : "pointer",
-        borderRadius: `${this.theme.borderRadius / 2}px`,
-        transition: "all 150ms ease-out",
-        userSelect: "none"
-      },
-      onclick: async (p) => {
-        if (!i) {
-          if (p.preventDefault(), p.stopPropagation(), e.action)
-            try {
-              await e.action();
-            } catch (h) {
-              console.error("Menu item action failed:", h);
-            }
-          (this.props.closeOnSelect ?? !0) && this.setIsOpenValue(!1);
-        }
-      },
-      onmouseenter: () => {
-        if (!i) {
-          this.focusedIndex = t, this.updateItemFocus();
-          const p = n.element;
-          p && (p.style.backgroundColor = this.theme.colors.hover);
-        }
-      },
-      onmouseleave: () => {
-        if (!i) {
-          const p = n.element;
-          p && (p.style.backgroundColor = "transparent");
-        }
-      }
-    }), o = d("div", {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: `${this.theme.spacing.gap * 2}px`
-      }
-    });
-    if (e.systemImage) {
-      const h = d("span", {
-        style: {
-          fontSize: "16px",
-          color: "inherit"
-        }
-      }).element;
-      h && (h.textContent = e.systemImage);
-      const x = o.element;
-      x && h && x.appendChild(h);
-    }
-    const l = d("span").element;
-    l && (l.textContent = s);
-    const u = o.element;
-    u && l && u.appendChild(l);
-    const c = n.element;
-    if (c && u && c.appendChild(u), e.shortcut) {
-      const h = d("span", {
-        style: {
-          fontSize: "12px",
-          color: this.theme.colors.shortcut,
-          fontFamily: "monospace"
-        }
-      }).element;
-      h && (h.textContent = e.shortcut), c && h && c.appendChild(h);
-    }
-    if (e.submenu && e.submenu.length > 0) {
-      const h = d("span", {
-        style: {
-          fontSize: "12px",
-          color: this.theme.colors.textSecondary
-        }
-      }).element;
-      h && (h.textContent = "▶"), c && h && c.appendChild(h);
-    }
-    return n;
-  }
-  updateItemFocus() {
-    if (!this.menuElement) return;
-    this.menuElement.querySelectorAll('[role="menuitem"]').forEach((t, i) => {
-      const s = t;
-      i === this.focusedIndex ? (s.style.backgroundColor = this.theme.colors.hover, s.focus()) : s.style.backgroundColor = "transparent";
-    });
-  }
-  calculatePosition(e, t) {
-    const i = e.getBoundingClientRect(), s = t.getBoundingClientRect(), n = {
-      width: window.innerWidth,
-      height: window.innerHeight
-    }, o = this.props.placement ?? "bottom", a = this.props.offset ?? { x: 0, y: 4 };
-    let l = 0, u = 0;
-    switch (o) {
-      case "bottom":
-      case "bottom-start":
-      case "bottom-end":
-        u = i.bottom + a.y;
-        break;
-      case "top":
-      case "top-start":
-      case "top-end":
-        u = i.top - s.height - a.y;
-        break;
-      case "right":
-      case "right-start":
-      case "right-end":
-        l = i.right + a.x;
-        break;
-      case "left":
-      case "left-start":
-      case "left-end":
-        l = i.left - s.width - a.x;
-        break;
-    }
-    switch (o) {
-      case "bottom":
-      case "top":
-        l = i.left + (i.width - s.width) / 2;
-        break;
-      case "bottom-start":
-      case "top-start":
-        l = i.left;
-        break;
-      case "bottom-end":
-      case "top-end":
-        l = i.right - s.width;
-        break;
-      case "right":
-      case "left":
-        u = i.top + (i.height - s.height) / 2;
-        break;
-      case "right-start":
-      case "left-start":
-        u = i.top;
-        break;
-      case "right-end":
-      case "left-end":
-        u = i.bottom - s.height;
-        break;
-    }
-    return (this.props.flip ?? !0) && (u + s.height > n.height && i.top > s.height && (u = i.top - s.height - a.y), l + s.width > n.width && i.left > s.width && (l = i.left - s.width - a.x)), (this.props.shift ?? !0) && (l = Math.max(8, Math.min(l, n.width - s.width - 8)), u = Math.max(8, Math.min(u, n.height - s.height - 8))), { x: l, y: u };
-  }
-  createMenuContent() {
-    const e = d("div", {
-      role: "menu",
-      "aria-labelledby": `${this.id}-trigger`,
-      "data-menu-id": this.id,
-      "data-menu-content": this.id,
-      // ENHANCED: Add data attribute for lifecycle hooks
-      style: {
-        position: "fixed",
-        backgroundColor: this.theme.colors.background,
-        border: `1px solid ${this.theme.colors.border}`,
-        borderRadius: `${this.theme.borderRadius}px`,
-        boxShadow: this.theme.shadow,
-        minWidth: `${this.theme.minWidth}px`,
-        maxWidth: `${this.theme.maxWidth}px`,
-        padding: `${this.theme.spacing.padding}px`,
-        zIndex: "9999",
-        opacity: "0",
-        transform: "scale(0.95)",
-        transformOrigin: "top",
-        transition: `all ${this.props.animationDuration || 150}ms cubic-bezier(0.16, 1, 0.3, 1)`
-      }
-    });
-    return this.props.items.forEach((t, i) => {
-      const s = this.createMenuItem(t, i), n = e.element, o = s.element;
-      n && o && n.appendChild(o);
-    }), this.menuElement = e.element, e;
-  }
-  setupTrigger() {
-    let e;
-    if (typeof this.props.trigger == "function") {
-      const t = this.props.trigger();
-      if ("render" in t) {
-        const i = t.render();
-        Array.isArray(i) ? e = i[0]?.element : e = i instanceof HTMLElement ? i : i?.element;
-      } else
-        e = t;
-    } else if ("render" in this.props.trigger) {
-      const t = this.props.trigger.render();
-      Array.isArray(t) ? e = t[0]?.element : e = t instanceof HTMLElement ? t : t?.element;
-    } else
-      e = this.props.trigger;
-    return e.id = e.id || `${this.id}-trigger`, e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", String(this.isOpen())), e.setAttribute("data-menu-trigger", this.id), e.addEventListener("click", (t) => {
-      t.preventDefault(), t.stopPropagation(), this.setIsOpenValue(!this.isOpen());
-    }), this.triggerElement = e, e;
-  }
-  render() {
-    const e = d("div", {
-      style: {
-        position: "relative",
-        display: "inline-block"
-      }
-    }), t = this.setupTrigger();
-    return e.element && t && e.element.appendChild(t), D(() => {
-      if (this.isOpen()) {
-        const n = this.createMenuContent().element;
-        if (n && (document.body.appendChild(n), this.menuElement = n), this.triggerElement && this.menuElement) {
-          const o = this.calculatePosition(this.triggerElement, this.menuElement);
-          this.menuElement.style.left = `${o.x}px`, this.menuElement.style.top = `${o.y}px`, he.scaleIn(this, this.menuElement, this.props.animationDuration || 150), this.focusedIndex = 0, fe.focusWhenReady(this, '[role="menuitem"]', this.menuElement);
-        }
-        document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleClickOutside), this.triggerElement?.setAttribute("aria-expanded", "true");
-      } else {
-        if (this.menuElement) {
-          this.menuElement.style.opacity = "0", this.menuElement.style.transform = "scale(0.95)";
-          const s = () => {
-            this.menuElement?.parentNode && (document.body.removeChild(this.menuElement), this.menuElement = null), this.menuElement?.removeEventListener("transitionend", s);
-          };
-          this.menuElement.addEventListener("transitionend", s);
-          const n = setTimeout(() => {
-            this.menuElement?.removeEventListener("transitionend", s), s();
-          }, this.props.animationDuration || 150);
-          this.cleanup || (this.cleanup = []), this.cleanup.push(() => {
-            n && clearTimeout(n);
-          });
-        }
-        document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleClickOutside), this.triggerElement?.setAttribute("aria-expanded", "false"), this.focusedIndex = -1;
-      }
-    }), e;
-  }
-}
-function yt(r) {
-  return I(new Be(r));
-}
-const St = {
-  /**
-   * Create a separator item
-   */
-  separator() {
-    return { title: "---" };
-  },
-  /**
-   * Create a destructive menu item
-   */
-  destructive(r, e, t) {
-    return {
-      title: r,
-      action: e,
-      destructive: !0,
-      systemImage: t
-    };
-  },
-  /**
-   * Create a menu item with keyboard shortcut
-   */
-  withShortcut(r, e, t, i) {
-    return {
-      title: r,
-      shortcut: e,
-      action: t,
-      systemImage: i
-    };
-  },
-  /**
-   * Create a context menu for right-click interactions
-   */
-  contextMenu(r, e) {
-    const [t, i] = $(!1), [s, n] = $({ x: 0, y: 0 });
-    r.addEventListener("contextmenu", (o) => {
-      o.preventDefault(), n({ x: o.clientX, y: o.clientY }), i(!0);
-    }), console.log("Context menu requested", { items: e, position: s(), isOpen: t() });
-  }
-}, xt = {
-  theme: W,
-  /**
-   * Create a custom menu theme
-   */
-  createTheme(r) {
-    return { ...W, ...r };
-  },
-  /**
-   * Dark theme preset
-   */
-  darkTheme() {
-    return {
-      ...W,
-      colors: {
-        ...W.colors,
-        background: "#2A2A2A",
-        surface: "#3A3A3A",
-        text: "#FFFFFF",
-        textSecondary: "#A0A0A0",
-        border: "#404040",
-        hover: "#404040",
-        active: "#0066CC"
-      }
-    };
-  }
-};
-var We = Object.defineProperty, Ue = (r, e, t) => e in r ? We(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, A = (r, e, t) => Ue(r, typeof e != "symbol" ? e + "" : e, t);
-class qe {
-  constructor(e) {
-    this.props = e, A(this, "type", "component"), A(this, "id"), A(this, "mounted", !1), A(this, "cleanup", []), A(this, "isOpen"), A(this, "setIsOpen"), A(this, "searchTerm"), A(this, "setSearchTerm"), A(this, "handleSelection", (o) => {
-      this.props.onSelectionChange && this.props.onSelectionChange(o), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
-    }), A(this, "toggleOpen", () => {
-      this.isDisabled() || this.setIsOpen(!this.isOpen());
-    }), this.id = `picker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, i] = $(!1), [s, n] = $("");
-    if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = s, this.setSearchTerm = n, typeof window < "u") {
-      const o = (a) => {
-        const l = document.getElementById(this.id);
-        l && !l.contains(a.target) && this.setIsOpen(!1);
-      };
-      document.addEventListener("click", o), this.cleanup.push(() => {
-        document.removeEventListener("click", o);
-      });
-    }
-  }
-  /**
-   * Get current selection value
-   */
-  getSelection() {
-    const { selection: e } = this.props;
-    return f(e) ? e() : e;
-  }
-  /**
-   * Get current options
-   */
-  getOptions() {
-    const { options: e } = this.props;
-    return f(e) ? e() : e;
-  }
-  /**
-   * Filter options based on search term
-   */
-  getFilteredOptions() {
-    const e = this.getOptions(), t = this.searchTerm().toLowerCase();
-    return !t || !this.props.searchable ? e : e.filter(
-      (i) => i.label.toLowerCase().includes(t) || i.description?.toLowerCase().includes(t)
-    );
-  }
-  /**
-   * Check if picker is disabled
-   */
-  isDisabled() {
-    const { disabled: e } = this.props;
-    return typeof e == "boolean" ? e : f(e) ? e() : !1;
-  }
-  /**
-   * Get selected option
-   */
-  getSelectedOption() {
-    const e = this.getSelection();
-    return this.getOptions().find((i) => i.value === e) || null;
-  }
-  /**
-   * Get picker size styles
-   */
-  getSizeStyles() {
-    const { size: e = "medium" } = this.props;
-    switch (e) {
-      case "small":
-        return {
-          fontSize: "14px",
-          padding: "6px 12px",
-          minHeight: "32px"
-        };
-      case "large":
-        return {
-          fontSize: "18px",
-          padding: "12px 16px",
-          minHeight: "48px"
-        };
-      default:
-        return {
-          fontSize: "16px",
-          padding: "8px 12px",
-          minHeight: "40px"
-        };
-    }
-  }
-  /**
-   * Render dropdown variant
-   */
-  renderDropdown() {
-    const e = this.getSelectedOption(), t = this.getFilteredOptions(), i = this.getSizeStyles(), s = this.isOpen();
-    return d(
-      "div",
-      {
-        id: this.id,
-        style: {
-          position: "relative",
-          display: "inline-block",
-          minWidth: "200px"
-        }
-      },
-      // Trigger button
-      d(
-        "button",
-        {
-          type: "button",
-          onClick: this.toggleOpen,
-          disabled: this.isDisabled(),
-          style: {
-            ...i,
-            width: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            backgroundColor: "#ffffff",
-            border: "1px solid #d1d5db",
-            borderRadius: "6px",
-            cursor: this.isDisabled() ? "not-allowed" : "pointer",
-            opacity: this.isDisabled() ? 0.6 : 1,
-            ...s && {
-              borderColor: this.props.tint || "#007AFF",
-              boxShadow: `0 0 0 1px ${this.props.tint || "#007AFF"}`
-            }
-          }
-        },
-        d(
-          "span",
-          {
-            style: {
-              color: e ? "#1a1a1a" : "#6b7280"
-            }
-          },
-          S(e?.label || this.props.placeholder || "Select an option")
-        ),
-        d(
-          "span",
-          {
-            style: {
-              fontSize: "12px",
-              color: "#6b7280",
-              transform: s ? "rotate(180deg)" : "rotate(0deg)",
-              transition: "transform 0.2s"
-            }
-          },
-          S("▼")
-        )
-      ),
-      ...s ? [
-        d(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "100%",
-              left: "0",
-              right: "0",
-              zIndex: 1e3,
-              backgroundColor: "#ffffff",
-              border: "1px solid #d1d5db",
-              borderRadius: "6px",
-              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-              maxHeight: "200px",
-              overflowY: "auto",
-              marginTop: "2px"
-            }
-          },
-          ...this.props.searchable ? [
-            d(
-              "div",
-              {
-                style: {
-                  padding: "8px",
-                  borderBottom: "1px solid #e5e7eb"
-                }
-              },
-              d("input", {
-                type: "text",
-                placeholder: "Search options...",
-                value: this.searchTerm(),
-                onInput: (n) => {
-                  const o = n.target;
-                  this.setSearchTerm(o.value);
-                },
-                style: {
-                  width: "100%",
-                  padding: "6px 8px",
-                  border: "1px solid #d1d5db",
-                  borderRadius: "4px",
-                  fontSize: "14px"
-                }
-              })
-            )
-          ] : [],
-          ...t.map(
-            (n) => d(
-              "button",
-              {
-                type: "button",
-                key: String(n.value),
-                onClick: () => this.handleSelection(n.value),
-                disabled: n.disabled,
-                style: {
-                  width: "100%",
-                  padding: "8px 12px",
-                  textAlign: "left",
-                  backgroundColor: n.value === this.getSelection() ? "#f3f4f6" : "transparent",
-                  border: "none",
-                  cursor: n.disabled ? "not-allowed" : "pointer",
-                  opacity: n.disabled ? 0.5 : 1,
-                  fontSize: "14px",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  ":hover": {
-                    backgroundColor: "#f9fafb"
-                  }
-                }
-              },
-              ...n.icon ? [d("span", { style: { fontSize: "16px" } }, S(n.icon))] : [],
-              d(
-                "div",
-                {},
-                d("div", {}, S(n.label)),
-                ...n.description ? [
-                  d(
-                    "div",
-                    {
-                      style: {
-                        fontSize: "12px",
-                        color: "#6b7280",
-                        marginTop: "2px"
-                      }
-                    },
-                    S(n.description)
-                  )
-                ] : []
-              )
-            )
-          ),
-          ...t.length === 0 ? [
-            d(
-              "div",
-              {
-                style: {
-                  padding: "12px",
-                  textAlign: "center",
-                  color: "#6b7280",
-                  fontSize: "14px"
-                }
-              },
-              S("No options found")
-            )
-          ] : []
-        )
-      ] : []
-    );
-  }
-  /**
-   * Render segmented variant
-   */
-  renderSegmented() {
-    const e = this.getOptions(), t = this.getSelection(), i = this.getSizeStyles();
-    return d(
-      "div",
-      {
-        style: {
-          display: "flex",
-          backgroundColor: "#f3f4f6",
-          borderRadius: "8px",
-          padding: "2px"
-        },
-        role: "radiogroup",
-        "aria-label": this.props.accessibilityLabel
-      },
-      ...e.map(
-        (s, n) => d(
-          "button",
-          {
-            type: "button",
-            key: String(s.value),
-            onClick: () => this.handleSelection(s.value),
-            disabled: s.disabled || this.isDisabled(),
-            role: "radio",
-            "aria-checked": s.value === t,
-            style: {
-              ...i,
-              flex: 1,
-              border: "none",
-              borderRadius: "6px",
-              backgroundColor: s.value === t ? "#ffffff" : "transparent",
-              color: s.value === t ? "#1a1a1a" : "#6b7280",
-              fontWeight: s.value === t ? "600" : "400",
-              cursor: s.disabled || this.isDisabled() ? "not-allowed" : "pointer",
-              opacity: s.disabled || this.isDisabled() ? 0.5 : 1,
-              boxShadow: s.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
-              transition: "all 0.2s",
-              margin: "0",
-              ...n === 0 && { marginRight: "1px" },
-              ...n === e.length - 1 && { marginLeft: "1px" }
-            }
-          },
-          ...s.icon ? [
-            d(
-              "span",
-              {
-                style: {
-                  marginRight: "6px",
-                  fontSize: "14px"
-                }
-              },
-              S(s.icon)
-            )
-          ] : [],
-          S(s.label)
-        )
-      )
-    );
-  }
-  /**
-   * Render wheel variant (simplified)
-   */
-  renderWheel() {
-    const e = this.getOptions(), t = this.getSelection();
-    return d(
-      "select",
-      {
-        value: String(t),
-        onChange: (i) => {
-          const s = i.target, n = e.find((o) => String(o.value) === s.value);
-          n && this.handleSelection(n.value);
-        },
-        disabled: this.isDisabled(),
-        style: {
-          ...this.getSizeStyles(),
-          minWidth: "200px",
-          backgroundColor: "#ffffff",
-          border: "1px solid #d1d5db",
-          borderRadius: "6px",
-          cursor: this.isDisabled() ? "not-allowed" : "pointer",
-          opacity: this.isDisabled() ? 0.6 : 1
-        }
-      },
-      ...e.map(
-        (i) => d(
-          "option",
-          {
-            key: String(i.value),
-            value: String(i.value),
-            disabled: i.disabled
-          },
-          S(i.label)
-        )
-      )
-    );
-  }
-  render() {
-    const { variant: e = "dropdown", accessibilityLabel: t, accessibilityHint: i } = this.props, s = {
-      "aria-label": t,
-      "aria-describedby": i ? `${this.id}-hint` : void 0
-    };
-    let n;
-    switch (e) {
-      case "segmented":
-        n = this.renderSegmented();
-        break;
-      case "wheel":
-        n = this.renderWheel();
-        break;
-      default:
-        n = this.renderDropdown();
-        break;
-    }
-    return d(
-      "div",
-      s,
-      n,
-      ...i ? [
-        d(
-          "div",
-          {
-            id: `${this.id}-hint`,
-            style: {
-              fontSize: "12px",
-              color: "#6b7280",
-              marginTop: "4px"
-            }
-          },
-          S(i)
-        )
-      ] : []
-    );
-  }
-}
-function Q(r, e, t = {}) {
-  const i = { ...t, selection: r, options: e }, s = new qe(i);
-  return I(s);
-}
-const vt = {
-  /**
-   * Dropdown picker (default)
-   */
-  // biome-ignore lint/suspicious/noExplicitAny: Generic dropdown picker requires flexible type
-  Dropdown(r, e, t = {}) {
-    return Q(r, e, { ...t, variant: "dropdown" });
-  },
-  /**
-   * Segmented picker
-   */
-  // biome-ignore lint/suspicious/noExplicitAny: Generic segmented picker requires flexible type
-  Segmented(r, e, t = {}) {
-    return Q(r, e, { ...t, variant: "segmented" });
-  },
-  /**
-   * Wheel picker (native select)
-   */
-  // biome-ignore lint/suspicious/noExplicitAny: Generic wheel picker requires flexible type
-  Wheel(r, e, t = {}) {
-    return Q(r, e, { ...t, variant: "wheel" });
-  },
-  /**
-   * Menu picker
-   */
-  // biome-ignore lint/suspicious/noExplicitAny: Generic menu picker requires flexible type
-  Menu(r, e, t = {}) {
-    return Q(r, e, { ...t, variant: "menu" });
-  }
-}, Ct = {
-  /**
-   * Create options from simple array
-   */
-  fromArray(r, e) {
-    return r.map((t) => ({
-      value: t,
-      label: String(e && typeof t == "object" && t !== null ? t[e] : t)
-    }));
-  },
-  /**
-   * Create options from enum
-   */
-  fromEnum(r) {
-    return Object.entries(r).map(([e, t]) => ({
-      value: t,
-      label: e.replace(/([A-Z])/g, " $1").trim()
-    }));
-  },
-  /**
-   * Group options by category
-   */
-  grouped(r) {
-    return r.reduce(
-      (e, t) => {
-        const i = t.category || "Other";
-        return e[i] || (e[i] = []), e[i].push(t), e;
-      },
-      {}
-    );
-  }
-};
-var Ye = Object.defineProperty, Xe = (r, e, t) => e in r ? Ye(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, B = (r, e, t) => Xe(r, typeof e != "symbol" ? e + "" : e, t);
-class Ke {
-  constructor(e) {
-    this.props = e, B(this, "type", "component"), B(this, "id"), B(this, "mounted", !1), B(this, "cleanup", []), B(this, "handleToggle", () => {
-      this.props.onToggle && this.props.onToggle(!this.isCollapsed());
-    }), this.id = `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  /**
-   * Resolve dynamic content
-   */
-  resolveContent(e) {
-    return e ? typeof e == "string" ? e : typeof e == "function" || f(e) ? e() : e : null;
-  }
-  /**
-   * Check if section is collapsed
-   */
-  isCollapsed() {
-    const { collapsed: e } = this.props;
-    return typeof e == "boolean" ? e : f(e) ? e() : !1;
-  }
-  /**
-   * Helper to render component content safely
-   */
-  renderComponentContent(e) {
-    const t = e.render();
-    return Array.isArray(t) ? t : [t];
-  }
-  /**
-   * Get section styles based on style prop
-   */
-  getSectionStyles() {
-    const { style: e = "automatic" } = this.props, t = {
-      marginBottom: "20px"
-    };
-    switch (e) {
-      case "grouped":
-        return {
-          ...t,
-          backgroundColor: "#ffffff",
-          border: "1px solid #e0e0e0",
-          borderRadius: "12px",
-          overflow: "hidden"
-        };
-      case "inset":
-        return {
-          ...t,
-          backgroundColor: "#f8f9fa",
-          border: "1px solid #e9ecef",
-          borderRadius: "8px",
-          margin: "0 16px 20px 16px"
-        };
-      case "sidebar":
-        return {
-          ...t,
-          borderLeft: "3px solid #007AFF",
-          paddingLeft: "16px",
-          backgroundColor: "#f8f9fa",
-          borderRadius: "0 8px 8px 0"
-        };
-      case "plain":
-        return t;
-      default:
-        return {
-          ...t,
-          backgroundColor: "#ffffff",
-          border: "1px solid #f0f0f0",
-          borderRadius: "8px"
-        };
-    }
-  }
-  /**
-   * Get header styles
-   */
-  getHeaderStyles() {
-    const { style: e = "automatic" } = this.props, t = {
-      fontSize: "16px",
-      fontWeight: "600",
-      color: "#1a1a1a",
-      margin: "0 0 12px 0"
-    };
-    switch (e) {
-      case "grouped":
-      case "inset":
-        return {
-          ...t,
-          padding: "12px 16px 0 16px",
-          backgroundColor: "#f8f9fa",
-          borderBottom: "1px solid #e9ecef"
-        };
-      case "sidebar":
-        return {
-          ...t,
-          fontSize: "14px",
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
-          color: "#666",
-          marginBottom: "8px"
-        };
-      default:
-        return {
-          ...t,
-          padding: "0 0 8px 0"
-        };
-    }
-  }
-  /**
-   * Get content styles
-   */
-  getContentStyles() {
-    const { style: e = "automatic", spacing: t = 12 } = this.props, i = {
-      display: "flex",
-      flexDirection: "column",
-      gap: `${t}px`
-    };
-    switch (e) {
-      case "grouped":
-      case "inset":
-        return {
-          ...i,
-          padding: "16px"
-        };
-      case "sidebar":
-        return {
-          ...i,
-          padding: "8px 0"
-        };
-      default:
-        return {
-          ...i,
-          padding: "12px"
-        };
-    }
-  }
-  /**
-   * Get footer styles
-   */
-  getFooterStyles() {
-    const { style: e = "automatic" } = this.props, t = {
-      fontSize: "14px",
-      color: "#666",
-      margin: "8px 0 0 0"
-    };
-    switch (e) {
-      case "grouped":
-      case "inset":
-        return {
-          ...t,
-          padding: "0 16px 12px 16px",
-          backgroundColor: "#f8f9fa",
-          borderTop: "1px solid #e9ecef"
-        };
-      default:
-        return {
-          ...t,
-          padding: "0 0 4px 0"
-        };
-    }
-  }
-  /**
-   * Render header content
-   */
-  renderHeader() {
-    const e = this.resolveContent(this.props.header);
-    if (!e) return null;
-    const t = this.getHeaderStyles();
-    if (this.props.collapsible) {
-      const i = this.isCollapsed() ? "▶" : "▼";
-      return d(
-        "div",
-        {
-          style: {
-            ...t,
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: "8px"
-          },
-          onClick: this.handleToggle
-        },
-        d(
-          "span",
-          {
-            style: {
-              fontSize: "12px",
-              color: "#666"
-            }
-          },
-          S(i)
-        ),
-        ...typeof e == "string" ? [S(e)] : this.renderComponentContent(e)
-      );
-    }
-    return d(
-      "div",
-      { style: t },
-      ...typeof e == "string" ? [S(e)] : this.renderComponentContent(e)
-    );
-  }
-  /**
-   * Render content
-   */
-  renderContent() {
-    const { children: e = [] } = this.props;
-    return this.props.collapsible && this.isCollapsed() || e.length === 0 ? null : d(
-      "div",
-      {
-        style: this.getContentStyles()
-      },
-      ...e.flatMap((t) => {
-        const i = t.render();
-        return Array.isArray(i) ? i : [i];
-      })
-    );
-  }
-  /**
-   * Render footer content
-   */
-  renderFooter() {
-    const e = this.resolveContent(this.props.footer);
-    return e ? d(
-      "div",
-      {
-        style: this.getFooterStyles()
-      },
-      ...typeof e == "string" ? [S(e)] : this.renderComponentContent(e)
-    ) : null;
-  }
-  render() {
-    const { accessibilityLabel: e, accessibilityRole: t = "group" } = this.props;
-    return d(
-      "div",
-      {
-        style: this.getSectionStyles(),
-        "aria-label": e,
-        role: t
-      },
-      ...[this.renderHeader(), this.renderContent(), this.renderFooter()].filter(
-        (i) => i !== null
-      )
-    );
-  }
-}
-function z(r, e = {}) {
-  console.warn(
-    "Section from @tachui/core is deprecated. Use FormSection from @tachui/forms for form contexts, or VStack for general layout grouping."
-  );
-  const t = { ...e, children: r }, i = new Ke(t);
-  return I(i);
-}
-function wt(r, e, t = {}) {
-  return z(e, { ...t, header: r });
-}
-function $t(r, e, t, i = {}) {
-  return z(t, { ...i, header: r, footer: e });
-}
-const It = {
-  /**
-   * Automatic section styling (default)
-   */
-  Automatic(r, e = {}) {
-    return z(r, { ...e, style: "automatic" });
-  },
-  /**
-   * Grouped section with container styling
-   */
-  Grouped(r, e = {}) {
-    return z(r, { ...e, style: "grouped" });
-  },
-  /**
-   * Inset section styling
-   */
-  Inset(r, e = {}) {
-    return z(r, { ...e, style: "inset" });
-  },
-  /**
-   * Sidebar-style section
-   */
-  Sidebar(r, e = {}) {
-    return z(r, { ...e, style: "sidebar" });
-  },
-  /**
-   * Plain section without styling
-   */
-  Plain(r, e = {}) {
-    return z(r, { ...e, style: "plain" });
-  },
-  /**
-   * Collapsible section
-   */
-  Collapsible(r, e, t = !1, i = {}) {
-    return z(e, {
-      ...i,
-      header: r,
-      collapsible: !0,
-      collapsed: t
-    });
-  }
-};
-var Qe = Object.defineProperty, Ze = (r, e, t) => e in r ? Qe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, V = (r, e, t) => Ze(r, typeof e != "symbol" ? e + "" : e, t);
-class Je {
-  constructor(e) {
-    this.props = e, V(this, "type", "component"), V(this, "id"), V(this, "mounted", !1), V(this, "cleanup", []), V(this, "toggleElement", null), V(this, "setIsAnimating"), V(this, "handleToggle", async (i) => {
-      if (i.preventDefault(), this.isDisabled()) return;
-      const s = !this.getIsOn();
-      this.props.animated !== !1 && (this.setIsAnimating(!0), setTimeout(() => {
-        this.setIsAnimating(!1);
-      }, 200)), this.props.onToggle && this.props.onToggle(s);
-    }), this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [, t] = $(!1);
-    this.setIsAnimating = t, D(() => {
-      const i = this.getIsOn();
-      this.toggleElement && this.toggleElement.checked !== i && (this.toggleElement.checked = i);
-    });
-  }
-  /**
-   * Get current toggle state
-   */
-  getIsOn() {
-    const { isOn: e } = this.props;
-    return f(e) ? e() : e;
-  }
-  // /**
-  //  * Get toggle state as signal or static value for DOM renderer
-  //  */
-  // private getIsOnForDOM(): boolean | (() => boolean) {
-  //   const { isOn } = this.props
-  //   if (isSignal(isOn)) {
-  //     return isOn as () => boolean
-  //   }
-  //   return isOn as boolean
-  // }
-  /**
-   * Check if toggle is disabled
-   */
-  isDisabled() {
-    const { disabled: e } = this.props;
-    return typeof e == "boolean" ? e : f(e) ? e() : !1;
-  }
-  // /**
-  //  * Get disabled state as signal or static value for DOM renderer
-  //  */
-  // private getDisabledForDOM(): boolean | (() => boolean) {
-  //   const { disabled } = this.props
-  //   if (typeof disabled === 'boolean') return disabled
-  //   if (isSignal(disabled)) return disabled as () => boolean
-  //   return false
-  // }
-  /**
-   * Resolve label content
-   */
-  resolveLabel() {
-    const { label: e } = this.props;
-    return e ? typeof e == "string" ? e : typeof e == "function" || f(e) ? e() : e : null;
-  }
-  /**
-   * Helper to render component content safely
-   */
-  renderComponentContent(e) {
-    const t = e.render();
-    return Array.isArray(t) ? t : [t];
-  }
-  /**
-   * Get toggle size styles
-   */
-  getSizeStyles() {
-    const { size: e = "medium" } = this.props;
-    switch (e) {
-      case "small":
-        return {
-          width: "36px",
-          height: "20px",
-          thumbSize: "16px",
-          fontSize: "14px"
-        };
-      case "large":
-        return {
-          width: "56px",
-          height: "32px",
-          thumbSize: "28px",
-          fontSize: "18px"
-        };
-      default:
-        return {
-          width: "46px",
-          height: "26px",
-          thumbSize: "22px",
-          fontSize: "16px"
-        };
-    }
-  }
-  /**
-   * Render switch variant
-   */
-  renderSwitch() {
-    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), {
-      color: s = "#007AFF",
-      offColor: n = "#e2e8f0",
-      thumbColor: o = "#ffffff",
-      animated: a = !0
-    } = this.props, l = e ? s : n, u = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)";
-    return d(
-      "div",
-      {
-        style: {
-          position: "relative",
-          display: "inline-block"
-        }
-      },
-      // Hidden input for form integration
-      d("input", {
-        ref: (c) => {
-          this.toggleElement = c, c && !this.mounted && (c.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            c.removeEventListener("change", this.handleToggle);
-          }));
-        },
-        type: "checkbox",
-        checked: e,
-        disabled: t,
-        style: {
-          position: "absolute",
-          opacity: 0,
-          width: "100%",
-          height: "100%",
-          margin: 0,
-          cursor: t ? "not-allowed" : "pointer"
-        },
-        "aria-label": this.props.accessibilityLabel,
-        "aria-describedby": this.props.accessibilityHint ? `${this.id}-hint` : void 0
-      }),
-      // Switch track
-      d(
-        "div",
-        {
-          style: {
-            width: i.width,
-            height: i.height,
-            backgroundColor: l,
-            borderRadius: i.height,
-            position: "relative",
-            cursor: t ? "not-allowed" : "pointer",
-            opacity: t ? 0.5 : 1,
-            transition: a ? "background-color 0.2s ease" : "none",
-            border: "1px solid rgba(0,0,0,0.1)",
-            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.1)"
-          },
-          onClick: this.handleToggle
-        },
-        // Switch thumb
-        d("div", {
-          style: {
-            width: i.thumbSize,
-            height: i.thumbSize,
-            backgroundColor: o,
-            borderRadius: "50%",
-            position: "absolute",
-            top: "50%",
-            transform: `translateY(-50%) ${u}`,
-            transition: a ? "transform 0.2s ease" : "none",
-            boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-            border: "1px solid rgba(0,0,0,0.1)"
-          }
-        })
-      )
-    );
-  }
-  /**
-   * Render checkbox variant
-   */
-  renderCheckbox() {
-    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: s = "#007AFF" } = this.props;
-    return d(
-      "div",
-      {
-        style: {
-          position: "relative",
-          display: "inline-block"
-        }
-      },
-      // Hidden input
-      d("input", {
-        ref: (n) => {
-          this.toggleElement = n, n && !this.mounted && (n.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            n.removeEventListener("change", this.handleToggle);
-          }));
-        },
-        type: "checkbox",
-        checked: e,
-        disabled: t,
-        style: {
-          position: "absolute",
-          opacity: 0,
-          width: "100%",
-          height: "100%",
-          margin: 0,
-          cursor: t ? "not-allowed" : "pointer"
-        }
-      }),
-      // Checkbox visual
-      d(
-        "div",
-        {
-          style: {
-            width: i.thumbSize,
-            height: i.thumbSize,
-            border: `2px solid ${e ? s : "#d1d5db"}`,
-            borderRadius: "4px",
-            backgroundColor: e ? s : "#ffffff",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            cursor: t ? "not-allowed" : "pointer",
-            opacity: t ? 0.5 : 1,
-            transition: "all 0.2s ease"
-          },
-          onClick: this.handleToggle
-        },
-        ...e ? [
-          // Checkmark
-          d("div", {
-            style: {
-              width: "6px",
-              height: "10px",
-              border: "2px solid white",
-              borderTop: "none",
-              borderLeft: "none",
-              transform: "rotate(45deg) translateY(-1px)",
-              opacity: e ? 1 : 0,
-              transition: "opacity 0.1s ease"
-            }
-          })
-        ] : []
-      )
-    );
-  }
-  /**
-   * Render button variant
-   */
-  renderButton() {
-    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: s = "#007AFF", offColor: n = "#f3f4f6" } = this.props;
-    return d(
-      "button",
-      {
-        ref: (o) => {
-          o && !this.mounted && (o.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
-            o.removeEventListener("click", this.handleToggle);
-          }));
-        },
-        type: "button",
-        disabled: t,
-        style: {
-          padding: "8px 16px",
-          backgroundColor: e ? s : n,
-          color: e ? "#ffffff" : "#374151",
-          border: `1px solid ${e ? s : "#d1d5db"}`,
-          borderRadius: "6px",
-          fontSize: i.fontSize,
-          fontWeight: "500",
-          cursor: t ? "not-allowed" : "pointer",
-          opacity: t ? 0.5 : 1,
-          transition: "all 0.2s ease",
-          outline: "none"
-        },
-        "aria-pressed": e,
-        "aria-label": this.props.accessibilityLabel
-      },
-      S(e ? "ON" : "OFF")
-    );
-  }
-  /**
-   * Render toggle control based on variant
-   */
-  renderToggleControl() {
-    const { variant: e = "switch" } = this.props;
-    switch (e) {
-      case "checkbox":
-        return this.renderCheckbox();
-      case "button":
-        return this.renderButton();
-      default:
-        return this.renderSwitch();
-    }
-  }
-  /**
-   * Render label content
-   */
-  renderLabel() {
-    const e = this.resolveLabel();
-    if (!e) return null;
-    const t = this.getSizeStyles();
-    return d(
-      "span",
-      {
-        style: {
-          fontSize: t.fontSize,
-          color: this.isDisabled() ? "#9ca3af" : "#374151",
-          cursor: this.isDisabled() ? "not-allowed" : "pointer"
-        },
-        onClick: this.isDisabled() ? void 0 : this.handleToggle
-      },
-      ...typeof e == "string" ? [S(e)] : this.renderComponentContent(e)
-    );
-  }
-  render() {
-    const { labelPosition: e = "trailing", spacing: t = 8, accessibilityHint: i } = this.props, s = this.renderLabel(), n = this.renderToggleControl(), o = e === "leading" && s ? [s, n] : s ? [n, s] : [n];
-    return d(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: s ? `${t}px` : "0",
-          cursor: this.isDisabled() ? "not-allowed" : "pointer"
-        },
-        "aria-describedby": i ? `${this.id}-hint` : void 0
-      },
-      ...o,
-      ...i ? [
-        d(
-          "div",
-          {
-            id: `${this.id}-hint`,
-            style: {
-              fontSize: "12px",
-              color: "#6b7280",
-              marginTop: "4px",
-              display: "block",
-              width: "100%"
-            }
-          },
-          S(i)
-        )
-      ] : []
-    );
-  }
-}
-function O(r, e = {}) {
-  const t = { ...e, isOn: r }, i = new Je(t);
-  return I(i);
-}
-function ae(r, e, t = {}) {
-  return O(e, { ...t, label: r });
-}
-const kt = {
-  /**
-   * Switch toggle (default)
-   */
-  Switch(r, e = {}) {
-    return O(r, { ...e, variant: "switch" });
-  },
-  /**
-   * Checkbox toggle
-   */
-  Checkbox(r, e = {}) {
-    return O(r, { ...e, variant: "checkbox" });
-  },
-  /**
-   * Button toggle
-   */
-  Button(r, e = {}) {
-    return O(r, { ...e, variant: "button" });
-  },
-  /**
-   * Small toggle
-   */
-  Small(r, e = {}) {
-    return O(r, { ...e, size: "small" });
-  },
-  /**
-   * Large toggle
-   */
-  Large(r, e = {}) {
-    return O(r, { ...e, size: "large" });
-  },
-  /**
-   * Custom color toggle
-   */
-  CustomColor(r, e, t = {}) {
-    return O(r, { ...t, color: e });
-  },
-  /**
-   * Toggle with leading label
-   */
-  WithLeadingLabel(r, e, t = {}) {
-    return O(e, { ...t, label: r, labelPosition: "leading" });
-  },
-  /**
-   * Toggle with trailing label (default)
-   */
-  WithTrailingLabel(r, e, t = {}) {
-    return O(e, { ...t, label: r, labelPosition: "trailing" });
-  }
-}, Et = {
-  /**
-   * Create a toggle group with multiple options
-   */
-  createGroup(r, e = {}) {
-    return r.map(
-      (t) => ae(t.label, t.isOn, {
-        ...e,
-        onToggle: t.onToggle
-      })
-    );
-  },
-  /**
-   * Create exclusive toggle group (radio-like behavior)
-   */
-  createExclusiveGroup(r, e, t, i = {}) {
-    const s = () => f(e) ? e() : e;
-    return r.map(
-      (n) => ae(n.label, s() === n.key, {
-        ...i,
-        onToggle: (o) => {
-          o && t && t(n.key);
-        }
-      })
-    );
-  },
-  /**
-   * Batch toggle operations
-   */
-  batch: {
-    /**
-     * Toggle all items in a group
-     */
-    toggleAll(r, e) {
-      r.forEach((t) => {
-        t.onToggle && t.onToggle(e);
-      });
-    },
-    /**
-     * Get state of all toggles in a group
-     */
-    getStates(r) {
-      return r.map((e) => f(e.isOn) ? e.isOn() : e.isOn);
-    },
-    /**
-     * Check if all toggles are on
-     */
-    allOn(r) {
-      return this.getStates(r).every((e) => e);
-    },
-    /**
-     * Check if any toggle is on
-     */
-    anyOn(r) {
-      return this.getStates(r).some((e) => e);
-    }
-  }
-};
+import { L as o, c as r, a as t, w as i, b as p, d as s } from "../index-vdsiw6gQ.js";
 export {
-  ne as BaseGridComponent,
-  X as BasicForm,
-  Fe as BasicFormImplementation,
-  ut as BasicFormStyles,
-  ht as BasicFormValidation,
-  Lt as BasicInput,
-  Mt as BasicInputStyles,
-  Ot as BasicInputUtils,
-  Tt as Button,
-  zt as ButtonStyles,
-  pi as Divider,
-  ui as DividerStyles,
-  hi as DividerUtils,
-  Dt as EnhancedButton,
-  Le as EnhancedGrid,
-  Me as EnhancedGridRow,
-  Ft as EnhancedImage,
-  Te as EnhancedLazyHGrid,
-  Oe as EnhancedLazyVGrid,
-  He as EnhancedList,
-  qe as EnhancedPicker,
-  fi as EnhancedScrollView,
-  Ke as EnhancedSection,
-  Je as EnhancedToggle,
-  gt as For,
-  pe as ForEach,
-  mt as ForEachComponent,
-  lt as Grid,
-  y as GridCSSGenerator,
-  at as GridItem,
-  ct as GridRow,
-  Gt as H1,
-  Pt as H2,
-  Vt as H3,
-  _t as H4,
-  Ht as H5,
-  jt as H6,
-  Nt as HStack,
-  Bt as HTML,
-  Wt as Image,
-  Ut as ImageContentModes,
-  qt as ImageStates,
-  Yt as ImageUtils,
-  Xt as Layout,
-  pt as LazyHGrid,
-  dt as LazyVGrid,
-  ft as Link,
-  P as LinkUtils,
-  K as List,
-  bt as ListUtils,
-  yt as Menu,
-  xt as MenuStyles,
-  St as MenuUtils,
-  Q as Picker,
-  vt as PickerStyles,
-  Ct as PickerUtils,
-  $e as ScrollView,
-  mi as ScrollViewUtils,
-  z as Section,
-  It as SectionStyles,
-  wt as SectionWithHeader,
-  $t as SectionWithHeaderFooter,
-  Kt as Show,
-  Qt as Spacer,
-  re as Text,
-  Zt as TextFormat,
-  Jt as TextStyles,
-  O as Toggle,
-  kt as ToggleStyles,
-  Et as ToggleUtils,
-  ae as ToggleWithLabel,
-  ei as Typography,
-  ti as Unless,
-  ii as VStack,
-  si as When,
-  ni as ZStack,
-  ri as createModifiableComponentFactory,
-  oi as createReactiveWrapper,
-  ai as defaultButtonTheme,
-  gi as defaultDividerTheme,
-  W as defaultMenuTheme,
-  li as withModifierSupport,
-  I as withModifiers,
-  ci as wrapComponent
+  o as Layout,
+  r as createModifiableComponentFactory,
+  t as createReactiveWrapper,
+  i as withModifierSupport,
+  p as withModifiers,
+  s as wrapComponent
 };