@tachui/core 0.7.0-alpha1

package/dist/components/Grid.js

@@ -0,0 +1,1045 @@
+import { withModifiers as z } from "./wrapper.js";
+import { processElementOverride as j } from "../runtime/element-override.js";
+import "../css-classes/css-class-manager.js";
+import { ComponentWithCSSClasses as L } from "../css-classes/component-base.js";
+import "../reactive/cleanup.js";
+import "../reactive/unified-scheduler.js";
+import "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import { useLifecycle as _ } from "../lifecycle/hooks.js";
+import { registerComponentWithLifecycleHooks as F } from "../runtime/dom-bridge.js";
+import { GridPerformanceMonitor as N, GridResponsiveUtils as H, GridDebugger as E, createResponsiveGridModifier as D } from "./GridResponsive.js";
+import { transition as P } from "../modifiers/transitions.js";
+var V = Object.defineProperty, Y = (f, e, t) => e in f ? V(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t, g = (f, e, t) => Y(f, typeof e != "symbol" ? e + "" : e, t);
+let G = null;
+const R = () => {
+  if (!G)
+    try {
+      G = require("../debug").debugManager;
+    } catch {
+      G = {
+        isEnabled: () => !1,
+        logComponent: () => {
+        }
+      };
+    }
+  return G;
+};
+class ce {
+  /**
+   * 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 m {
+  /**
+   * 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 n = t.minimum || 0, r = t.maximum ? `${t.maximum}px` : "1fr";
+          return n > 0 ? `minmax(${n}px, ${r})` : "1fr";
+        case "adaptive":
+          const a = t.minimum, i = t.maximum ? `${t.maximum}px` : "1fr";
+          return `minmax(${a}px, ${i})`;
+        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 n = {};
+    return e.base && (n[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(([a, i]) => {
+      const s = e[a];
+      if (s) {
+        const o = `@media (min-width: ${i})`, u = t === "grid-template-columns" ? this.generateColumns(s) : this.generateRows(s);
+        n[o] || (n[o] = {});
+        const d = n[o];
+        n[o] = {
+          ...d,
+          [t]: u
+        };
+      }
+    }), n;
+  }
+  /**
+   * 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, n) {
+    const r = {
+      gridColumn: `1 / span ${n}`,
+      display: "flex",
+      alignItems: "center"
+    };
+    switch (e) {
+      case "sticky":
+        r.position = "sticky", r.top = t === "header" ? "0" : "auto", r.bottom = t === "footer" ? "0" : "auto", r.zIndex = "10", r.backgroundColor = "var(--background-color, white)";
+        break;
+      case "grouped":
+        r.padding = "12px 16px", r.backgroundColor = "var(--section-bg, #f8f9fa)", r.borderRadius = t === "header" ? "8px 8px 0 0" : "0 0 8px 8px";
+        break;
+      case "plain":
+        r.padding = "8px 0";
+        break;
+      case "automatic":
+      default:
+        r.padding = "12px 0", r.fontWeight = "600", r.fontSize = "1.1em", t === "footer" && (r.fontSize = "0.9em", r.fontWeight = "400", r.color = "var(--text-secondary, #6b7280)");
+        break;
+    }
+    return r;
+  }
+  /**
+   * Generate CSS animations for grid layout changes (Phase 3)
+   */
+  static generateGridAnimationCSS(e) {
+    const t = {};
+    if (e.layoutChanges) {
+      const n = typeof e.layoutChanges == "boolean" ? {} : e.layoutChanges, r = n.duration || 300, a = n.easing || "ease-out", i = n.delay || 0;
+      t.transition = `grid-template-columns ${r}ms ${a}${i > 0 ? ` ${i}ms` : ""}, grid-template-rows ${r}ms ${a}${i > 0 ? ` ${i}ms` : ""}`;
+    }
+    if (e.responsive) {
+      const n = typeof e.responsive == "boolean" ? {} : e.responsive, r = n.duration || 250, a = n.easing || "ease-out", i = n.delay || 0, s = `grid-template-columns ${r}ms ${a}${i > 0 ? ` ${i}ms` : ""}, grid-template-rows ${r}ms ${a}${i > 0 ? ` ${i}ms` : ""}, gap ${r}ms ${a}${i > 0 ? ` ${i}ms` : ""}`;
+      t.transition ? t.transition += `, ${s}` : t.transition = s;
+    }
+    return t;
+  }
+  /**
+   * Generate item entrance/exit animation keyframes (Phase 3)
+   */
+  static generateItemAnimationKeyframes(e, t) {
+    const n = `grid-item-${e}-${t}`;
+    let r = "";
+    switch (t) {
+      case "fade":
+        r = e === "enter" ? "from { opacity: 0; } to { opacity: 1; }" : "from { opacity: 1; } to { opacity: 0; }";
+        break;
+      case "scale":
+        r = 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":
+        r = 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":
+        r = 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":
+        r = 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":
+        r = 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 ${n}`]: `{ ${r} }`,
+      [`--${n}-keyframes`]: n
+    };
+  }
+  /**
+   * Generate accessibility attributes for grid elements (Phase 3)
+   */
+  static generateAccessibilityAttributes(e, t, n, r) {
+    const a = {}, i = t === "grid" ? "grid" : "group", s = e.role || i;
+    if (a.role = s, e.label && (a["aria-label"] = e.label), e.description && (a["aria-describedby"] = e.description), e.screenReader !== !1) {
+      const o = typeof e.screenReader == "boolean" ? {} : e.screenReader || {};
+      o.announceStructure !== !1 && n !== void 0 && (a["aria-colcount"] = n), o.announceStructure !== !1 && r !== void 0 && (a["aria-rowcount"] = r);
+    }
+    if (e.keyboardNavigation !== !1) {
+      const o = typeof e.keyboardNavigation == "boolean" ? {} : e.keyboardNavigation || {};
+      o.enabled !== !1 && (a.tabIndex = 0, a["data-keyboard-navigation"] = o.mode || "grid", o.pageNavigation && (a["data-page-navigation"] = !0), o.homeEndNavigation && (a["data-home-end-navigation"] = !0));
+    }
+    if (e.focusManagement !== !1) {
+      const o = typeof e.focusManagement == "boolean" ? {} : e.focusManagement || {};
+      o.trapFocus && (a["data-focus-trap"] = !0), o.skipLinks && (a["data-skip-links"] = !0);
+    }
+    if (e.reducedMotion !== !1) {
+      const o = typeof e.reducedMotion == "boolean" ? {} : e.reducedMotion || {};
+      o.respectPreference !== !1 && (a["data-respect-reduced-motion"] = !0, a["data-reduced-motion-fallback"] = o.fallbackBehavior || "disable");
+    }
+    return a;
+  }
+  /**
+   * Generate reduced motion CSS based on user preferences (Phase 3)
+   */
+  static generateReducedMotionCSS(e) {
+    if (!e?.reducedMotion) return {};
+    const n = (typeof e.reducedMotion == "boolean" ? {} : e.reducedMotion).fallbackBehavior || "disable", r = {};
+    switch (n) {
+      case "disable":
+        r["@media (prefers-reduced-motion: reduce)"] = "{ transition: none !important; animation: none !important; }";
+        break;
+      case "reduce":
+        r["@media (prefers-reduced-motion: reduce)"] = "{ transition-duration: 0.1s !important; animation-duration: 0.1s !important; }";
+        break;
+      case "instant":
+        r["@media (prefers-reduced-motion: reduce)"] = "{ transition-duration: 0s !important; animation-duration: 0s !important; }";
+        break;
+    }
+    return r;
+  }
+  /**
+   * Generate advanced styling CSS for grid components (Phase 3)
+   */
+  static generateAdvancedStylingCSS(e) {
+    const t = {};
+    if (e.templateAreas && e.templateAreas.length > 0) {
+      const n = e.templateAreas.map((r) => `"${r}"`).join(" ");
+      t.gridTemplateAreas = n;
+    }
+    if (e.advancedGap && (e.advancedGap.row && (typeof e.advancedGap.row == "object" ? Object.entries(e.advancedGap.row).forEach(([n, r]) => {
+      const a = this.getMediaQueryForBreakpoint(n);
+      a && (t[a] = t[a] || "{}", t[a] = t[a].replace("}", ` row-gap: ${r}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(([n, r]) => {
+      const a = this.getMediaQueryForBreakpoint(n);
+      a && (t[a] = t[a] || "{}", t[a] = t[a].replace("}", ` column-gap: ${r}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 n = e.container.background;
+          switch (n.pattern) {
+            case "dots":
+              t.background = `radial-gradient(circle, ${n.color || "#e0e0e0"} 1px, transparent 1px)`, t.backgroundSize = "20px 20px", n.opacity && (t.opacity = n.opacity.toString());
+              break;
+            case "lines":
+              t.background = `linear-gradient(90deg, ${n.color || "#e0e0e0"} 1px, transparent 1px), linear-gradient(${n.color || "#e0e0e0"} 1px, transparent 1px)`, t.backgroundSize = "20px 20px";
+              break;
+            case "grid":
+              t.background = `linear-gradient(to right, ${n.color || "#e0e0e0"} 1px, transparent 1px), linear-gradient(to bottom, ${n.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 n = e.container.padding;
+          t.padding = `${n.top || 0} ${n.right || 0} ${n.bottom || 0} ${n.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 n = typeof e.debug == "boolean" ? {} : e.debug, r = n.lineColor || "#ff0000";
+      if (n.showLines !== !1) {
+        const a = `linear-gradient(to right, ${r} 1px, transparent 1px), linear-gradient(to bottom, ${r} 1px, transparent 1px)`;
+        t.background && !t.background.includes("linear-gradient") ? t.background = `${a}, ${t.background}` : t.background = a, t.backgroundSize = "var(--grid-debug-size, 20px) var(--grid-debug-size, 20px)";
+      }
+      n.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, ${r}22 10px, ${r}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 n = e.hover, r = [];
+      switch (n.transform) {
+        case "scale":
+          r.push("transform: scale(1.05)");
+          break;
+        case "lift":
+          r.push("transform: translateY(-2px)", "box-shadow: 0 4px 8px rgba(0,0,0,0.12)");
+          break;
+        case "glow":
+          r.push("box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4)");
+          break;
+        case "highlight":
+          r.push("background-color: rgba(59, 130, 246, 0.1)");
+          break;
+      }
+      n.transition ? r.push(`transition: ${n.transition}`) : r.push("transition: all 0.2s ease"), n.customCSS && Object.entries(n.customCSS).forEach(([a, i]) => {
+        r.push(`${a}: ${i}`);
+      }), t["& > *:hover"] = `{ ${r.join("; ")} }`;
+    }
+    if (e.focus && e.focus.enabled !== !1) {
+      const n = e.focus, r = [];
+      switch (n.style) {
+        case "ring":
+          r.push(`box-shadow: 0 0 0 2px ${n.color || "#3b82f6"}`);
+          break;
+        case "outline":
+          r.push(`outline: 2px solid ${n.color || "#3b82f6"}`, "outline-offset: 2px");
+          break;
+        case "background":
+          r.push(`background-color: ${n.color || "rgba(59, 130, 246, 0.1)"}`);
+          break;
+        case "border":
+          r.push(`border: 2px solid ${n.color || "#3b82f6"}`);
+          break;
+      }
+      n.customCSS && Object.entries(n.customCSS).forEach(([a, i]) => {
+        r.push(`${a}: ${i}`);
+      }), t["& > *:focus"] = `{ ${r.join("; ")} }`;
+    }
+    if (e.active && e.active.enabled !== !1) {
+      const n = e.active, r = [];
+      switch (n.transform) {
+        case "scale":
+          r.push("transform: scale(0.95)");
+          break;
+        case "inset":
+          r.push("box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)");
+          break;
+        case "darken":
+          r.push("filter: brightness(0.9)");
+          break;
+      }
+      n.customCSS && Object.entries(n.customCSS).forEach(([a, i]) => {
+        r.push(`${a}: ${i}`);
+      }), t["& > *:active"] = `{ ${r.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 T extends L {
+  constructor(e) {
+    super(), this.props = e, g(this, "type", "component"), g(this, "id"), g(this, "mounted", !1), g(this, "cleanup", []), g(this, "effectiveTag"), g(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"}`, n = j(t, "div", this.props.element);
+    this.effectiveTag = n.tag, this.validationResult = n.validation;
+  }
+  render() {
+    const { content: e, sectionId: t, type: n, style: r, debugLabel: a } = this.props, i = R();
+    i.logComponent(`GRID_SECTION_${n.toUpperCase()}`, a);
+    const s = [`tachui-grid-section-${n}`, ...i.isEnabled() ? ["tachui-debug"] : []], o = this.createClassString(this.props, s), d = m.generateSectionHeaderCSS(r, n, 12);
+    let c;
+    if (typeof e == "string")
+      c = [{
+        type: "element",
+        tag: "span",
+        props: {
+          className: `tachui-grid-section-${n}-text`,
+          children: [{ type: "text", text: e }]
+        }
+      }];
+    else {
+      const b = e.render();
+      c = Array.isArray(b) ? b : [b];
+    }
+    return [{
+      type: "element",
+      tag: this.effectiveTag,
+      props: {
+        className: o,
+        style: d,
+        "data-section-id": t,
+        "data-section-type": n,
+        // Add debug attributes
+        ...i.isEnabled() && {
+          "data-tachui-component": `GridSection${n === "header" ? "Header" : "Footer"}`,
+          ...a && { "data-tachui-label": a }
+        }
+      },
+      children: c,
+      // Add component metadata
+      componentMetadata: {
+        originalType: `GridSection${n === "header" ? "Header" : "Footer"}`,
+        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+        validationResult: this.validationResult
+      }
+    }];
+  }
+}
+class O extends L {
+  constructor(e, t, n = []) {
+    super(), this.props = e, this.gridType = t, this.children = n, g(this, "type", "component"), g(this, "id"), g(this, "mounted", !1), g(this, "cleanup", []), g(this, "effectiveTag"), g(this, "validationResult"), this.id = `${t}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const a = j(t === "grid" ? "Grid" : t === "lazy-vgrid" ? "LazyVGrid" : "LazyHGrid", "div", this.props.element);
+    this.effectiveTag = a.tag, this.validationResult = a.validation, this.setupLifecycleHooks(), F(this);
+  }
+  /**
+   * Generate animation styles for grid layout (Phase 3)
+   */
+  generateAnimationStyles(e) {
+    return e ? m.generateGridAnimationCSS(e) : {};
+  }
+  /**
+   * Apply item animations to child elements (Phase 3)
+   */
+  applyItemAnimations(e, t) {
+    if (!t?.itemChanges) return e;
+    const n = typeof t.itemChanges == "boolean" ? {} : t.itemChanges;
+    if (n.enter) {
+      const r = n.enter, a = r.duration || 250, i = r.easing || "ease-out", s = r.delay || 0;
+      return e.map((o, u) => {
+        if ("modifiers" in o && Array.isArray(o.modifiers)) {
+          const d = s + u * 50, c = P("all", a, i, d);
+          o.modifiers.push(c);
+        }
+        return o;
+      });
+    }
+    return e;
+  }
+  /**
+   * Generate accessibility attributes for grid (Phase 3)
+   */
+  generateAccessibilityAttributes(e, t, n) {
+    return e ? m.generateAccessibilityAttributes(e, this.gridType, t, n) : {};
+  }
+  /**
+   * Generate advanced styling CSS for grid (Phase 3)
+   */
+  generateStylingCSS(e) {
+    if (!e) return {};
+    const t = m.generateAdvancedStylingCSS(e);
+    if (e.itemStates) {
+      const n = m.generateItemStateCSS(e.itemStates);
+      Object.assign(t, n);
+    }
+    return t;
+  }
+  /**
+   * Handle keyboard navigation events (Phase 3)
+   */
+  setupKeyboardNavigation(e, t) {
+    if (!t?.keyboardNavigation) return;
+    const n = typeof t.keyboardNavigation == "boolean" ? {} : t.keyboardNavigation;
+    if (n.enabled === !1) return;
+    const r = n.mode || "grid", a = (i) => {
+      const s = i.target;
+      if (!e.contains(s)) return;
+      let o = !1;
+      switch (i.key) {
+        case "ArrowUp":
+          r === "grid" && (this.navigateGrid(e, "up"), o = !0);
+          break;
+        case "ArrowDown":
+          r === "grid" ? (this.navigateGrid(e, "down"), o = !0) : r === "list" && (this.navigateList(e, "next"), o = !0);
+          break;
+        case "ArrowLeft":
+          this.navigateGrid(e, "left"), o = !0;
+          break;
+        case "ArrowRight":
+          this.navigateGrid(e, "right"), o = !0;
+          break;
+        case "Home":
+          n.homeEndNavigation && (this.navigateToFirst(e), o = !0);
+          break;
+        case "End":
+          n.homeEndNavigation && (this.navigateToLast(e), o = !0);
+          break;
+        case "PageUp":
+          n.pageNavigation && (this.navigatePage(e, "up"), o = !0);
+          break;
+        case "PageDown":
+          n.pageNavigation && (this.navigatePage(e, "down"), o = !0);
+          break;
+      }
+      o && (i.preventDefault(), i.stopPropagation());
+    };
+    e.addEventListener("keydown", a), this.cleanup.push(() => {
+      e.removeEventListener("keydown", a);
+    });
+  }
+  /**
+   * Navigate within grid structure (Phase 3)
+   */
+  navigateGrid(e, t) {
+    const n = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]'), r = Array.from(n).indexOf(document.activeElement);
+    if (r === -1) return;
+    const i = getComputedStyle(e).gridTemplateColumns.split(" ").length;
+    let s = r;
+    switch (t) {
+      case "up":
+        s = Math.max(0, r - i);
+        break;
+      case "down":
+        s = Math.min(n.length - 1, r + i);
+        break;
+      case "left":
+        s = Math.max(0, r - 1);
+        break;
+      case "right":
+        s = Math.min(n.length - 1, r + 1);
+        break;
+    }
+    s !== r && n[s].focus();
+  }
+  /**
+   * Navigate in list mode (Phase 3)
+   */
+  navigateList(e, t) {
+    const n = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]'), r = Array.from(n).indexOf(document.activeElement);
+    if (r === -1) return;
+    const a = t === "next" ? Math.min(n.length - 1, r + 1) : Math.max(0, r - 1);
+    a !== r && n[a].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 n = e.querySelectorAll('[tabindex="0"], button, input, select, textarea, [contenteditable]'), r = Array.from(n).indexOf(document.activeElement);
+    if (r === -1) return;
+    const a = 10, i = t === "down" ? Math.min(n.length - 1, r + a) : Math.max(0, r - a);
+    i !== r && n[i].focus();
+  }
+  setupLifecycleHooks() {
+    _(this, {
+      onDOMReady: (e, t) => {
+        this.children.forEach((n, r) => {
+          const a = n._enhancedLifecycle;
+          if (a && a.onDOMReady && !n.domReady)
+            try {
+              if (t) {
+                const i = this.findChildDOMElements(n, t, r);
+                if (i.length > 0) {
+                  n.domElements = /* @__PURE__ */ new Map(), i.forEach((o, u) => {
+                    const d = o.id || `element-${u}`;
+                    n.domElements.set(d, o), n.primaryElement || (n.primaryElement = o);
+                  }), n.domReady = !0;
+                  const s = a.onDOMReady(
+                    n.domElements,
+                    n.primaryElement
+                  );
+                  if (typeof s == "function" && (n.cleanup = n.cleanup || [], n.cleanup.push(s)), a.onMount) {
+                    const o = a.onMount();
+                    typeof o == "function" && (n.cleanup = n.cleanup || [], n.cleanup.push(o));
+                  }
+                }
+              }
+            } catch (i) {
+              console.error(`Error processing lifecycle hooks for child ${n.id}:`, i);
+            }
+        });
+      }
+    });
+  }
+  /**
+   * Find DOM elements for child components (reusing pattern from LayoutComponent)
+   */
+  findChildDOMElements(e, t, n) {
+    if (e.id.startsWith("image-")) {
+      const a = t.querySelectorAll("img.tachui-image");
+      return a[n] ? [a[n]] : Array.from(a);
+    }
+    if (e.id.startsWith("button-")) {
+      const a = t.querySelectorAll("button.tachui-button");
+      return a[n] ? [a[n]] : Array.from(a);
+    }
+    if (e.id.startsWith("text-")) {
+      const a = t.querySelectorAll("span.tachui-text, .tachui-text");
+      return a[n] ? [a[n]] : Array.from(a);
+    }
+    const r = Array.from(t.children);
+    return r[n] ? [r[n]] : r;
+  }
+  render() {
+    throw new Error("BaseGridComponent.render() must be implemented by subclass");
+  }
+}
+class q extends O {
+  constructor(e, t = []) {
+    super(e, "grid", t), this.props = e;
+  }
+  render() {
+    const { alignment: e = "center", spacing: t, debugLabel: n, animations: r, accessibility: a, styling: i } = this.props, s = R();
+    s.logComponent("GRID", n);
+    const o = ["tachui-grid", ...s.isEnabled() ? ["tachui-debug"] : []], u = this.createClassString(this.props, o), c = this.applyItemAnimations(this.children, r).map((A) => {
+      const C = A.render();
+      return Array.isArray(C) ? C : [C];
+    }).flat(), $ = m.generateAlignment(e), b = m.generateSpacing(t), y = this.generateAnimationStyles(r), h = this.generateAccessibilityAttributes(a), l = m.generateReducedMotionCSS(a), w = this.generateStylingCSS(i), k = {
+      display: "grid",
+      gap: b,
+      ...$,
+      ...y,
+      ...l,
+      ...w
+    };
+    return [{
+      type: "element",
+      tag: this.effectiveTag,
+      props: {
+        className: u,
+        style: k,
+        ...h,
+        // Add debug attributes
+        ...s.isEnabled() && {
+          "data-tachui-component": "Grid",
+          ...n && { "data-tachui-label": n }
+        }
+      },
+      children: c,
+      // Add component metadata for semantic role processing
+      componentMetadata: {
+        originalType: "Grid",
+        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+        validationResult: this.validationResult
+      }
+    }];
+  }
+}
+class B extends L {
+  constructor(e, t = []) {
+    super(), this.props = e, this.children = t, g(this, "type", "component"), g(this, "id"), g(this, "mounted", !1), g(this, "cleanup", []), g(this, "effectiveTag"), g(this, "validationResult"), this.id = `gridrow-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const n = j("GridRow", "div", this.props.element);
+    this.effectiveTag = n.tag, this.validationResult = n.validation;
+  }
+  render() {
+    const { debugLabel: e } = this.props, t = R();
+    t.logComponent("GRIDROW", e);
+    const n = ["tachui-gridrow", ...t.isEnabled() ? ["tachui-debug"] : []], r = this.createClassString(this.props, n), a = this.children.map((s) => {
+      const o = s.render();
+      return Array.isArray(o) ? o : [o];
+    }).flat();
+    return [{
+      type: "element",
+      tag: this.effectiveTag,
+      props: {
+        className: r,
+        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: a,
+      // Add component metadata
+      componentMetadata: {
+        originalType: "GridRow",
+        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+        validationResult: this.validationResult
+      }
+    }];
+  }
+}
+class X extends O {
+  constructor(e, t = []) {
+    super(e, "lazy-vgrid", t), this.props = e;
+  }
+  render() {
+    const { columns: e, alignment: t = "center", spacing: n, debugLabel: r, responsive: a, sections: i, pinnedViews: s, animations: o, accessibility: u, styling: d } = this.props, c = R();
+    c.logComponent("LAZYVGRID", r);
+    const $ = ["tachui-lazy-vgrid", ...c.isEnabled() ? ["tachui-debug"] : []], b = this.createClassString(this.props, $);
+    let y;
+    i && i.length > 0 ? y = this.renderSections(i, s) : y = this.applyItemAnimations(this.children, o).map((S) => {
+      const p = S.render();
+      return Array.isArray(p) ? p : [p];
+    }).flat();
+    let h, l = {
+      display: "grid"
+    };
+    if (a) {
+      const v = N.startMeasurement("responsive-css-generation");
+      try {
+        const p = { ...H.createResponsiveGridConfig({
+          columns: e,
+          spacing: n,
+          alignment: t
+        }), ...a };
+        E.registerGrid(this.id, p, `#${this.id}`), E.visualizeBreakpoints(p);
+        const x = D(p);
+        p.columns && typeof p.columns == "object" && "base" in p.columns && p.columns.base ? h = this.generateColumnsFromConfig(p.columns.base) : Array.isArray(e) ? h = m.generateColumns(e) : h = "1fr", l._responsiveModifier = x;
+      } finally {
+        v();
+      }
+    } else {
+      const v = m.generateAlignment(t), S = m.generateSpacing(n);
+      if (Array.isArray(e))
+        h = m.generateColumns(e);
+      else {
+        const x = m.generateResponsiveGridCSS(e, "grid-template-columns")["grid-template-columns"];
+        h = typeof x == "string" ? x : "1fr";
+      }
+      l = {
+        ...l,
+        gap: S,
+        ...v
+      };
+    }
+    l.gridTemplateColumns = h;
+    const w = this.generateAnimationStyles(o);
+    Object.assign(l, w);
+    const k = this.getColumnCount(), M = this.generateAccessibilityAttributes(u, k), A = m.generateReducedMotionCSS(u);
+    Object.assign(l, A);
+    const C = this.generateStylingCSS(d);
+    Object.assign(l, C);
+    const I = {
+      type: "element",
+      tag: this.effectiveTag,
+      props: {
+        className: b,
+        style: l,
+        ...M,
+        // Add debug attributes
+        ...c.isEnabled() && {
+          "data-tachui-component": "LazyVGrid",
+          ...r && { "data-tachui-label": r }
+        }
+      },
+      children: y,
+      // Add component metadata
+      componentMetadata: {
+        originalType: "LazyVGrid",
+        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+        validationResult: this.validationResult,
+        // Phase 2: Include responsive modifier for processing
+        ...a && l._responsiveModifier && {
+          responsiveModifier: l._responsiveModifier
+        }
+      }
+    };
+    return l._responsiveModifier && delete l._responsiveModifier, [I];
+  }
+  /**
+   * Render sectioned data with headers and footers (Phase 3)
+   */
+  renderSections(e, t) {
+    const n = [], r = this.getColumnCount(), a = t?.includes("sectionHeaders"), i = t?.includes("sectionFooters");
+    return e.forEach((s) => {
+      if (s.header) {
+        const o = s.headerStyle || (a ? "sticky" : "automatic"), d = new T({
+          content: s.header,
+          sectionId: s.id,
+          type: "header",
+          style: o
+        }).render();
+        Array.isArray(d) && (d.forEach((c) => {
+          c.props && c.props.style && (c.props.style.gridColumn = `1 / span ${r}`);
+        }), n.push(...d));
+      }
+      if (s.items.forEach((o) => {
+        const u = o.render(), d = Array.isArray(u) ? u : [u];
+        n.push(...d);
+      }), s.footer) {
+        const o = s.footerStyle || (i ? "sticky" : "automatic"), d = new T({
+          content: s.footer,
+          sectionId: s.id,
+          type: "footer",
+          style: o
+        }).render();
+        Array.isArray(d) && (d.forEach((c) => {
+          c.props && c.props.style && (c.props.style.gridColumn = `1 / span ${r}`);
+        }), n.push(...d));
+      }
+    }), n;
+  }
+  /**
+   * 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, n = t.base || t.sm || t.md || t.lg || t.xl || t.xxl;
+      return Array.isArray(n) ? n.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 n = t.minimum || 0, r = t.maximum ? `${t.maximum}px` : "1fr";
+          return n > 0 ? `minmax(${n}px, ${r})` : "1fr";
+        case "adaptive":
+          const a = t.minimum, i = t.maximum ? `${t.maximum}px` : "1fr";
+          return `minmax(${a}px, ${i})`;
+        default:
+          return "1fr";
+      }
+    }).join(" ");
+  }
+}
+class W extends O {
+  constructor(e, t = []) {
+    super(e, "lazy-hgrid", t), this.props = e;
+  }
+  render() {
+    const { rows: e, alignment: t = "center", spacing: n, debugLabel: r, responsive: a, sections: i, pinnedViews: s, animations: o, accessibility: u, styling: d } = this.props, c = R();
+    c.logComponent("LAZYHGRID", r);
+    const $ = ["tachui-lazy-hgrid", ...c.isEnabled() ? ["tachui-debug"] : []], b = this.createClassString(this.props, $);
+    let y;
+    i && i.length > 0 ? y = this.renderSections(i, s) : y = this.applyItemAnimations(this.children, o).map((S) => {
+      const p = S.render();
+      return Array.isArray(p) ? p : [p];
+    }).flat();
+    let h, l = {
+      display: "grid",
+      gridAutoFlow: "column",
+      // Horizontal flow for LazyHGrid
+      overflowX: "auto"
+      // Enable horizontal scrolling
+    };
+    if (a) {
+      const v = N.startMeasurement("responsive-css-generation");
+      try {
+        const p = { ...H.createResponsiveGridConfig({
+          rows: e,
+          spacing: n,
+          alignment: t
+        }), ...a };
+        E.registerGrid(this.id, p, `#${this.id}`), E.visualizeBreakpoints(p);
+        const x = D(p);
+        p.rows && typeof p.rows == "object" && "base" in p.rows && p.rows.base ? h = this.generateRowsFromConfig(p.rows.base) : Array.isArray(e) ? h = m.generateRows(e) : h = "auto", l._responsiveModifier = x;
+      } finally {
+        v();
+      }
+    } else {
+      const v = m.generateAlignment(t), S = m.generateSpacing(n);
+      if (Array.isArray(e))
+        h = m.generateRows(e);
+      else {
+        const x = m.generateResponsiveGridCSS(e, "grid-template-rows")["grid-template-rows"];
+        h = typeof x == "string" ? x : "auto";
+      }
+      l = {
+        ...l,
+        gap: S,
+        ...v
+      };
+    }
+    l.gridTemplateRows = h;
+    const w = this.generateAnimationStyles(o);
+    Object.assign(l, w);
+    const k = this.getRowCount(), M = this.generateAccessibilityAttributes(u, void 0, k), A = m.generateReducedMotionCSS(u);
+    Object.assign(l, A);
+    const C = this.generateStylingCSS(d);
+    Object.assign(l, C);
+    const I = {
+      type: "element",
+      tag: this.effectiveTag,
+      props: {
+        className: b,
+        style: l,
+        ...M,
+        // Add debug attributes
+        ...c.isEnabled() && {
+          "data-tachui-component": "LazyHGrid",
+          ...r && { "data-tachui-label": r }
+        }
+      },
+      children: y,
+      // Add component metadata
+      componentMetadata: {
+        originalType: "LazyHGrid",
+        overriddenTo: this.effectiveTag !== "div" ? this.effectiveTag : void 0,
+        validationResult: this.validationResult,
+        // Phase 2: Include responsive modifier for processing
+        ...a && l._responsiveModifier && {
+          responsiveModifier: l._responsiveModifier
+        }
+      }
+    };
+    return l._responsiveModifier && delete l._responsiveModifier, [I];
+  }
+  /**
+   * Render sectioned data with headers and footers (Phase 3)
+   */
+  renderSections(e, t) {
+    const n = [], r = this.getRowCount(), a = t?.includes("sectionHeaders"), i = t?.includes("sectionFooters");
+    return e.forEach((s) => {
+      if (s.header) {
+        const o = s.headerStyle || (a ? "sticky" : "automatic"), d = new T({
+          content: s.header,
+          sectionId: s.id,
+          type: "header",
+          style: o
+        }).render();
+        Array.isArray(d) && (d.forEach((c) => {
+          c.props && c.props.style && (c.props.style.gridRow = `1 / span ${r}`, c.props.style.gridColumn = "auto");
+        }), n.push(...d));
+      }
+      if (s.items.forEach((o) => {
+        const u = o.render(), d = Array.isArray(u) ? u : [u];
+        n.push(...d);
+      }), s.footer) {
+        const o = s.footerStyle || (i ? "sticky" : "automatic"), d = new T({
+          content: s.footer,
+          sectionId: s.id,
+          type: "footer",
+          style: o
+        }).render();
+        Array.isArray(d) && (d.forEach((c) => {
+          c.props && c.props.style && (c.props.style.gridRow = `1 / span ${r}`, c.props.style.gridColumn = "auto");
+        }), n.push(...d));
+      }
+    }), n;
+  }
+  /**
+   * 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, n = t.base || t.sm || t.md || t.lg || t.xl || t.xxl;
+      return Array.isArray(n) ? n.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 n = t.minimum || 0, r = t.maximum ? `${t.maximum}px` : "1fr";
+          return n > 0 ? `minmax(${n}px, ${r})` : "1fr";
+        case "adaptive":
+          const a = t.minimum, i = t.maximum ? `${t.maximum}px` : "1fr";
+          return `minmax(${a}px, ${i})`;
+        default:
+          return "auto";
+      }
+    }).join(" ");
+  }
+}
+function de(f = {}) {
+  const { children: e = [], ...t } = f, n = new q(t, e);
+  return z(n);
+}
+function le(f = [], e = {}) {
+  const t = { ...e, children: f }, n = new B(t, f);
+  return z(n);
+}
+function pe(f) {
+  const { children: e = [], ...t } = f, n = new X({ ...t, children: e }, e);
+  return z(n);
+}
+function ue(f) {
+  const { children: e = [], ...t } = f, n = new W({ ...t, children: e }, e);
+  return z(n);
+}
+export {
+  O as BaseGridComponent,
+  q as EnhancedGrid,
+  B as EnhancedGridRow,
+  W as EnhancedLazyHGrid,
+  X as EnhancedLazyVGrid,
+  de as Grid,
+  m as GridCSSGenerator,
+  E as GridDebugger,
+  ce as GridItem,
+  N as GridPerformanceMonitor,
+  le as GridRow,
+  T as GridSectionHeaderComponent,
+  ue as LazyHGrid,
+  pe as LazyVGrid
+};
+//# sourceMappingURL=Grid.js.map