@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/dist/components/index.js

@@ -1,104 +1,4169 @@
-import { BasicInput as o, BasicInputStyles as r, BasicInputUtils as i } from "./BasicInput.js";
-import { BaseGridComponent as a, EnhancedGrid as c, EnhancedGridRow as l, EnhancedLazyHGrid as m, EnhancedLazyVGrid as d, Grid as s, GridCSSGenerator as p, GridItem as S, GridRow as h, LazyHGrid as f, LazyVGrid as x } from "./Grid.js";
-import { Button as g, ButtonStyles as u, EnhancedButton as E, defaultButtonTheme as T } from "./Button.js";
-import { Divider as G, DividerStyles as H, DividerUtils as L, defaultDividerTheme as F } from "./Divider.js";
-import { BasicForm as U, BasicFormImplementation as k, BasicFormStyles as w, BasicFormValidation as M } from "./Form.js";
-import { EnhancedImage as C, Image as v, ImageContentModes as W, ImageStates as z, ImageUtils as D } from "./Image.js";
-import { Link as R, LinkUtils as b } from "./EnhancedLink.js";
-import { EnhancedList as j, For as q, ForEach as A, ForEachComponent as J, List as K, ListUtils as N } from "./List.js";
-import { Menu as Q, MenuStyles as X, MenuUtils as Y, defaultMenuTheme as _ } from "./Menu.js";
-import { EnhancedPicker as ee, Picker as te, PickerStyles as oe, PickerUtils as re } from "./Picker.js";
-import { EnhancedScrollView as ne, ScrollView as ae, ScrollViewUtils as ce } from "./ScrollView.js";
-import { EnhancedSection as me, Section as de, SectionStyles as se, SectionWithHeader as pe, SectionWithHeaderFooter as Se } from "./Section.js";
-import { Show as fe, Unless as xe, When as ye } from "./Show.js";
-import { Spacer as ue } from "./Spacer.js";
-import { Text as Te, TextFormat as Be, TextStyles as Ge, Typography as He } from "./Text.js";
-import { EnhancedToggle as Fe, Toggle as Ie, ToggleStyles as Ue, ToggleUtils as ke, ToggleWithLabel as we } from "./Toggle.js";
-import { H1 as Ve, H2 as Ce, H3 as ve, H4 as We, H5 as ze, H6 as De, HStack as Pe, HTML as Re, Layout as be, VStack as Ze, ZStack as je, createModifiableComponentFactory as qe, createReactiveWrapper as Ae, withModifierSupport as Je, withModifiers as Ke, wrapComponent as Ne } from "./wrapper.js";
+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);
+    }
+  }
+};
 export {
-  a as BaseGridComponent,
-  U as BasicForm,
-  k as BasicFormImplementation,
-  w as BasicFormStyles,
-  M as BasicFormValidation,
-  o as BasicInput,
-  r as BasicInputStyles,
-  i as BasicInputUtils,
-  g as Button,
-  u as ButtonStyles,
-  G as Divider,
-  H as DividerStyles,
-  L as DividerUtils,
-  E as EnhancedButton,
-  c as EnhancedGrid,
-  l as EnhancedGridRow,
-  C as EnhancedImage,
-  m as EnhancedLazyHGrid,
-  d as EnhancedLazyVGrid,
-  j as EnhancedList,
-  ee as EnhancedPicker,
-  ne as EnhancedScrollView,
-  me as EnhancedSection,
-  Fe as EnhancedToggle,
-  q as For,
-  A as ForEach,
-  J as ForEachComponent,
-  s as Grid,
-  p as GridCSSGenerator,
-  S as GridItem,
-  h as GridRow,
-  Ve as H1,
-  Ce as H2,
-  ve as H3,
-  We as H4,
-  ze as H5,
-  De as H6,
-  Pe as HStack,
-  Re as HTML,
-  v as Image,
-  W as ImageContentModes,
-  z as ImageStates,
-  D as ImageUtils,
-  be as Layout,
-  f as LazyHGrid,
-  x as LazyVGrid,
-  R as Link,
-  b as LinkUtils,
+  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,
-  N as ListUtils,
-  Q as Menu,
-  X as MenuStyles,
-  Y as MenuUtils,
-  te as Picker,
-  oe as PickerStyles,
-  re as PickerUtils,
-  ae as ScrollView,
-  ce as ScrollViewUtils,
-  de as Section,
-  se as SectionStyles,
-  pe as SectionWithHeader,
-  Se as SectionWithHeaderFooter,
-  fe as Show,
-  ue as Spacer,
-  Te as Text,
-  Be as TextFormat,
-  Ge as TextStyles,
-  Ie as Toggle,
-  Ue as ToggleStyles,
-  ke as ToggleUtils,
-  we as ToggleWithLabel,
-  He as Typography,
-  xe as Unless,
-  Ze as VStack,
-  ye as When,
-  je as ZStack,
-  qe as createModifiableComponentFactory,
-  Ae as createReactiveWrapper,
-  T as defaultButtonTheme,
-  F as defaultDividerTheme,
-  _ as defaultMenuTheme,
-  Je as withModifierSupport,
-  Ke as withModifiers,
-  Ne as wrapComponent
+  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
 };
-//# sourceMappingURL=index.js.map