@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/dist/components/Grid.js

@@ -1,1045 +0,0 @@
-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