@tachui/core 0.7.0-alpha1

package/dist/components/Form.js

@@ -0,0 +1,244 @@
+import "../reactive/cleanup.js";
+import "../reactive/unified-scheduler.js";
+import { createEffect as p } from "../reactive/effect.js";
+import { createSignal as m } from "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import "../runtime/component.js";
+import "../runtime/context.js";
+import "../runtime/dev-tools.js";
+import "../runtime/dom-bridge.js";
+import "../runtime/error-boundary.js";
+import "../runtime/error-reporting.js";
+import "../runtime/performance.js";
+import { h as l, text as u } from "../runtime/renderer.js";
+import "../runtime/element-override.js";
+import "../runtime/semantic-role-manager.js";
+import "../runtime/development-warnings.js";
+import { withModifiers as h } from "./wrapper.js";
+var f = Object.defineProperty, c = (e, t, r) => t in e ? f(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, n = (e, t, r) => c(e, typeof t != "symbol" ? t + "" : t, r);
+class g {
+  constructor(t) {
+    this.props = t, n(this, "type", "component"), n(this, "id"), n(this, "mounted", !1), n(this, "cleanup", []), n(this, "formElement", null), n(this, "validationErrors"), n(this, "setValidationErrors"), n(this, "setIsValid"), n(this, "handleSubmit", async (o) => {
+      if (o.preventDefault(), this.props.validateOnSubmit !== !1) {
+        const a = this.validateForm();
+        if (this.setValidationErrors(a), a.length > 0)
+          return;
+      }
+      if (this.props.onSubmit) {
+        const a = this.extractFormData();
+        await this.props.onSubmit(a);
+      }
+    }), n(this, "handleChange", () => {
+      if (this.props.validateOnChange) {
+        const o = this.validateForm();
+        this.setValidationErrors(o);
+      }
+    }), this.id = `form-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const [r, i] = m([]), [, s] = m(!0);
+    this.validationErrors = r, this.setValidationErrors = i, this.setIsValid = s, p(() => {
+      const o = this.validationErrors(), a = o.length === 0;
+      this.setIsValid(a), this.props.onValidationChange && this.props.onValidationChange(a, o);
+    });
+  }
+  /**
+   * Extract form data from form elements
+   */
+  extractFormData() {
+    if (!this.formElement) return {};
+    const t = new FormData(this.formElement), r = {};
+    for (const [i, s] of t.entries())
+      r[i] ? Array.isArray(r[i]) ? r[i].push(s) : r[i] = [r[i], s] : r[i] = s;
+    return r;
+  }
+  /**
+   * Validate all form fields
+   */
+  validateForm() {
+    if (!this.formElement) return [];
+    const t = [];
+    return this.formElement.querySelectorAll("input, select, textarea").forEach((i) => {
+      const s = i, o = s.name || s.id;
+      s.checkValidity() || t.push({
+        field: o,
+        message: s.validationMessage,
+        code: "html5_validation"
+      }), s.hasAttribute("required") && !s.value.trim() && t.push({
+        field: o,
+        message: `${o} is required`,
+        code: "required"
+      });
+    }), t;
+  }
+  /**
+   * Get form styling based on style prop
+   */
+  getFormStyles() {
+    const { style: t = "automatic", spacing: r = 16 } = this.props, i = {
+      display: "flex",
+      flexDirection: "column",
+      gap: `${r}px`
+    };
+    switch (t) {
+      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 t = this.validationErrors();
+    return !this.props.showValidationSummary || t.length === 0 ? null : l(
+      "div",
+      {
+        style: {
+          backgroundColor: "#fff5f5",
+          border: "1px solid #fed7d7",
+          borderRadius: "6px",
+          padding: "12px 16px",
+          marginBottom: "16px"
+        }
+      },
+      l(
+        "div",
+        {
+          style: {
+            fontSize: "14px",
+            fontWeight: "600",
+            color: "#e53e3e",
+            marginBottom: "8px"
+          }
+        },
+        u("Please fix the following errors:")
+      ),
+      l(
+        "ul",
+        {
+          style: {
+            margin: "0",
+            paddingLeft: "20px",
+            fontSize: "14px",
+            color: "#c53030"
+          }
+        },
+        ...t.map((r) => l("li", { key: r.field }, u(r.message)))
+      )
+    );
+  }
+  render() {
+    const { children: t = [], accessibilityLabel: r, accessibilityRole: i = "form" } = this.props;
+    return [
+      l(
+        "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": r,
+          role: i,
+          noValidate: !0
+          // We handle validation manually
+        },
+        ...this.renderValidationSummary() !== null ? [this.renderValidationSummary()] : [],
+        ...t.flatMap((s) => s.render())
+      )
+    ];
+  }
+}
+function d(e, t = {}) {
+  const r = { ...t, children: e }, i = new g(r);
+  return h(i);
+}
+const A = {
+  /**
+   * Automatic form styling (default)
+   */
+  Automatic(e, t = {}) {
+    return d(e, { ...t, style: "automatic" });
+  },
+  /**
+   * Grouped form with container styling
+   */
+  Grouped(e, t = {}) {
+    return d(e, { ...t, style: "grouped" });
+  },
+  /**
+   * Inset form styling
+   */
+  Inset(e, t = {}) {
+    return d(e, { ...t, style: "inset" });
+  },
+  /**
+   * Plain form without styling
+   */
+  Plain(e, t = {}) {
+    return d(e, { ...t, style: "plain" });
+  }
+}, R = {
+  /**
+   * Common validation rules
+   */
+  rules: {
+    // biome-ignore lint/suspicious/noExplicitAny: Validation rules accept any input type
+    required: (e) => e != null && e !== "",
+    email: (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),
+    minLength: (e) => (t) => t.length >= e,
+    maxLength: (e) => (t) => t.length <= e,
+    pattern: (e) => (t) => e.test(t),
+    number: (e) => !Number.isNaN(Number(e)),
+    integer: (e) => Number.isInteger(Number(e)),
+    min: (e) => (t) => Number(t) >= e,
+    max: (e) => (t) => Number(t) <= e
+  },
+  /**
+   * Validate a single field
+   */
+  validateField(e, t) {
+    for (const r of t) {
+      const i = r(e);
+      if (i !== !0)
+        return {
+          field: "field",
+          message: typeof i == "string" ? i : "Validation failed",
+          code: "custom_validation"
+        };
+    }
+    return null;
+  }
+};
+export {
+  d as BasicForm,
+  g as BasicFormImplementation,
+  A as BasicFormStyles,
+  R as BasicFormValidation
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../src/components/Form.ts"],"sourcesContent":["/**\n * BasicForm Component (Phase 6.4.1)\n *\n * Lightweight SwiftUI-inspired Form component for Core-only applications.\n * Provides essential form functionality with automatic styling and basic validation\n * without the complexity of the full Forms plugin. Perfect for simple forms,\n * contact forms, and login pages where minimal bundle size is important.\n *\n * For advanced form features (comprehensive validation, state management,\n * multi-step forms), use the Form component from @tachui/forms.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { createEffect, createSignal } from '../reactive'\n// Signal type import removed - using function signatures instead\nimport { h, text } from '../runtime'\nimport type { ComponentInstance, ComponentProps } from '../runtime/types'\nimport { withModifiers } from './wrapper'\n\n/**\n * BasicForm component properties\n */\nexport interface BasicFormProps extends ComponentProps {\n  children?: ComponentInstance[]\n\n  // Form behavior\n  onSubmit?: (data: FormData) => void | Promise<void>\n  onValidationChange?: (isValid: boolean, errors: ValidationError[]) => void\n\n  // Validation\n  validateOnChange?: boolean\n  validateOnSubmit?: boolean\n  showValidationSummary?: boolean\n\n  // Styling\n  style?: 'automatic' | 'grouped' | 'inset' | 'plain'\n  spacing?: number\n\n  // Accessibility\n  accessibilityLabel?: string\n  accessibilityRole?: string\n}\n\n/**\n * Validation error structure\n */\nexport interface ValidationError {\n  field: string\n  message: string\n  code?: string\n}\n\n/**\n * Form data structure\n */\nexport interface FormData {\n  // biome-ignore lint/suspicious/noExplicitAny: Form data requires flexible value types\n  [key: string]: any\n}\n\n/**\n * BasicForm component class\n */\nexport class BasicFormImplementation implements ComponentInstance<BasicFormProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n  private formElement: HTMLFormElement | null = null\n  private validationErrors: () => ValidationError[]\n  private setValidationErrors: (errors: ValidationError[]) => ValidationError[]\n  // isValid accessor removed - value tracked internally\n  private setIsValid: (valid: boolean) => boolean\n\n  constructor(public props: BasicFormProps) {\n    this.id = `form-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n\n    // Initialize validation signals\n    const [errors, setErrors] = createSignal<ValidationError[]>([])\n    const [, setValid] = createSignal(true)\n    this.validationErrors = errors\n    this.setValidationErrors = setErrors\n    // this.isValid = valid - removed unused accessor\n    this.setIsValid = setValid\n\n    // Setup validation change effect\n    createEffect(() => {\n      const currentErrors = this.validationErrors()\n      const currentValid = currentErrors.length === 0\n      this.setIsValid(currentValid)\n\n      if (this.props.onValidationChange) {\n        this.props.onValidationChange(currentValid, currentErrors)\n      }\n    })\n  }\n\n  /**\n   * Extract form data from form elements\n   */\n  private extractFormData(): FormData {\n    if (!this.formElement) return {}\n\n    const formData = new FormData(this.formElement)\n    const data: FormData = {}\n\n    // Convert FormData to plain object\n    for (const [key, value] of formData.entries()) {\n      if (data[key]) {\n        // Handle multiple values (checkboxes, multi-select)\n        if (Array.isArray(data[key])) {\n          // biome-ignore lint/suspicious/noExplicitAny: Form data array manipulation requires dynamic typing\n          ;(data[key] as any[]).push(value)\n        } else {\n          data[key] = [data[key], value]\n        }\n      } else {\n        data[key] = value\n      }\n    }\n\n    return data\n  }\n\n  /**\n   * Validate all form fields\n   */\n  private validateForm(): ValidationError[] {\n    if (!this.formElement) return []\n\n    const errors: ValidationError[] = []\n    const inputs = this.formElement.querySelectorAll('input, select, textarea')\n\n    inputs.forEach((input) => {\n      const element = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n      const name = element.name || element.id\n\n      // Check HTML5 validation\n      if (!element.checkValidity()) {\n        errors.push({\n          field: name,\n          message: element.validationMessage,\n          code: 'html5_validation',\n        })\n      }\n\n      // Check required fields\n      if (element.hasAttribute('required') && !element.value.trim()) {\n        errors.push({\n          field: name,\n          message: `${name} is required`,\n          code: 'required',\n        })\n      }\n    })\n\n    return errors\n  }\n\n  /**\n   * Handle form submission\n   */\n  private handleSubmit = async (event: Event) => {\n    event.preventDefault()\n\n    if (this.props.validateOnSubmit !== false) {\n      const errors = this.validateForm()\n      this.setValidationErrors(errors)\n\n      if (errors.length > 0) {\n        return\n      }\n    }\n\n    if (this.props.onSubmit) {\n      const data = this.extractFormData()\n      await this.props.onSubmit(data)\n    }\n  }\n\n  /**\n   * Handle form input changes\n   */\n  private handleChange = () => {\n    if (this.props.validateOnChange) {\n      const errors = this.validateForm()\n      this.setValidationErrors(errors)\n    }\n  }\n\n  /**\n   * Get form styling based on style prop\n   */\n  private getFormStyles() {\n    const { style = 'automatic', spacing = 16 } = this.props\n\n    const baseStyles = {\n      display: 'flex',\n      flexDirection: 'column' as const,\n      gap: `${spacing}px`,\n    }\n\n    switch (style) {\n      case 'grouped':\n        return {\n          ...baseStyles,\n          backgroundColor: '#ffffff',\n          border: '1px solid #e0e0e0',\n          borderRadius: '12px',\n          padding: '20px',\n          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',\n        }\n\n      case 'inset':\n        return {\n          ...baseStyles,\n          backgroundColor: '#f8f9fa',\n          border: '1px solid #e9ecef',\n          borderRadius: '8px',\n          padding: '16px',\n          margin: '0 16px',\n        }\n\n      case 'plain':\n        return baseStyles\n      default:\n        return {\n          ...baseStyles,\n          backgroundColor: '#ffffff',\n          borderRadius: '8px',\n          padding: '16px',\n        }\n    }\n  }\n\n  /**\n   * Render validation summary\n   */\n  private renderValidationSummary() {\n    const errors = this.validationErrors()\n\n    if (!this.props.showValidationSummary || errors.length === 0) {\n      return null\n    }\n\n    return h(\n      'div',\n      {\n        style: {\n          backgroundColor: '#fff5f5',\n          border: '1px solid #fed7d7',\n          borderRadius: '6px',\n          padding: '12px 16px',\n          marginBottom: '16px',\n        },\n      },\n      h(\n        'div',\n        {\n          style: {\n            fontSize: '14px',\n            fontWeight: '600',\n            color: '#e53e3e',\n            marginBottom: '8px',\n          },\n        },\n        text('Please fix the following errors:')\n      ),\n\n      h(\n        'ul',\n        {\n          style: {\n            margin: '0',\n            paddingLeft: '20px',\n            fontSize: '14px',\n            color: '#c53030',\n          },\n        },\n        ...errors.map((error) => h('li', { key: error.field }, text(error.message)))\n      )\n    )\n  }\n\n  render() {\n    const { children = [], accessibilityLabel, accessibilityRole = 'form' } = this.props\n\n    return [\n      h(\n        'form',\n        {\n          ref: (el: HTMLFormElement) => {\n            this.formElement = el\n\n            // Add event listeners when mounted\n            if (el && !this.mounted) {\n              el.addEventListener('submit', this.handleSubmit)\n              el.addEventListener('change', this.handleChange)\n              el.addEventListener('input', this.handleChange)\n\n              this.cleanup.push(() => {\n                el.removeEventListener('submit', this.handleSubmit)\n                el.removeEventListener('change', this.handleChange)\n                el.removeEventListener('input', this.handleChange)\n              })\n\n              this.mounted = true\n            }\n          },\n          style: this.getFormStyles(),\n          'aria-label': accessibilityLabel,\n          role: accessibilityRole,\n          noValidate: true, // We handle validation manually\n        },\n        // Validation summary\n        ...(this.renderValidationSummary() !== null ? [this.renderValidationSummary()!] : []),\n\n        // Form content\n        ...children.flatMap((child) => child.render())\n      ),\n    ]\n  }\n}\n\n/**\n * BasicForm component function\n */\nexport function BasicForm(\n  children: ComponentInstance[],\n  props: Omit<BasicFormProps, 'children'> = {}\n): ModifiableComponent<BasicFormProps> & { modifier: ModifierBuilder<ModifiableComponent<BasicFormProps>> } {\n  const formProps: BasicFormProps = { ...props, children }\n  const component = new BasicFormImplementation(formProps)\n  return withModifiers(component)\n}\n\n\n/**\n * BasicForm style variants\n */\nexport const BasicFormStyles = {\n  /**\n   * Automatic form styling (default)\n   */\n  Automatic(children: ComponentInstance[], props: Omit<BasicFormProps, 'children' | 'style'> = {}) {\n    return BasicForm(children, { ...props, style: 'automatic' })\n  },\n\n  /**\n   * Grouped form with container styling\n   */\n  Grouped(children: ComponentInstance[], props: Omit<BasicFormProps, 'children' | 'style'> = {}) {\n    return BasicForm(children, { ...props, style: 'grouped' })\n  },\n\n  /**\n   * Inset form styling\n   */\n  Inset(children: ComponentInstance[], props: Omit<BasicFormProps, 'children' | 'style'> = {}) {\n    return BasicForm(children, { ...props, style: 'inset' })\n  },\n\n  /**\n   * Plain form without styling\n   */\n  Plain(children: ComponentInstance[], props: Omit<BasicFormProps, 'children' | 'style'> = {}) {\n    return BasicForm(children, { ...props, style: 'plain' })\n  },\n}\n\n\n/**\n * BasicForm validation utilities\n */\nexport const BasicFormValidation = {\n  /**\n   * Common validation rules\n   */\n  rules: {\n    // biome-ignore lint/suspicious/noExplicitAny: Validation rules accept any input type\n    required: (value: any) => value != null && value !== '',\n    email: (value: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n    minLength: (min: number) => (value: string) => value.length >= min,\n    maxLength: (max: number) => (value: string) => value.length <= max,\n    pattern: (regex: RegExp) => (value: string) => regex.test(value),\n    number: (value: string) => !Number.isNaN(Number(value)),\n    integer: (value: string) => Number.isInteger(Number(value)),\n    min: (min: number) => (value: string) => Number(value) >= min,\n    max: (max: number) => (value: string) => Number(value) <= max,\n  },\n\n  /**\n   * Validate a single field\n   */\n  validateField(\n    // biome-ignore lint/suspicious/noExplicitAny: Validation accepts any field value\n    value: any,\n    // biome-ignore lint/suspicious/noExplicitAny: Validation rules accept any input type\n    rules: Array<(value: any) => boolean | string>\n  ): ValidationError | null {\n    for (const rule of rules) {\n      const result = rule(value)\n      if (result !== true) {\n        return {\n          field: 'field',\n          message: typeof result === 'string' ? result : 'Validation failed',\n          code: 'custom_validation',\n        }\n      }\n    }\n    return null\n  },\n}\n\n"],"names":["BasicFormImplementation","props","__publicField","event","errors","data","setErrors","createSignal","setValid","createEffect","currentErrors","currentValid","formData","key","value","input","element","name","style","spacing","baseStyles","h","text","error","children","accessibilityLabel","accessibilityRole","el","child","BasicForm","formProps","component","withModifiers","BasicFormStyles","BasicFormValidation","min","max","regex","rules","rule","result"],"mappings":"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"}

package/dist/components/Grid.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("./wrapper.cjs"),j=require("../runtime/element-override.cjs");require("../css-classes/css-class-manager.cjs");const O=require("../css-classes/component-base.cjs");require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");const N=require("../lifecycle/hooks.cjs"),_=require("../runtime/dom-bridge.cjs"),b=require("./GridResponsive.cjs"),F=require("../modifiers/transitions.cjs");var V=Object.defineProperty,B=(f,e,t)=>e in f?V(f,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):f[e]=t,g=(f,e,t)=>B(f,typeof e!="symbol"?e+"":e,t);let T=null;const M=()=>{if(!T)try{T=require("../debug").debugManager}catch{T={isEnabled:()=>!1,logComponent:()=>{}}}return T};class Y{static fixed(e,t){return{type:"fixed",size:e,spacing:t}}static flexible(e=0,t){return{type:"flexible",minimum:e,maximum:t}}static adaptive(e,t){return{type:"adaptive",minimum:e,maximum:t}}static spanning(e){return e}static withSpan(e,t){return{...e,span:t}}}class m{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(" ")}static generateRows(e){return this.generateColumns(e)}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}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"}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}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}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}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}}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}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}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}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}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 R extends O.ComponentWithCSSClasses{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.processElementOverride(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=M();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 y=e.render();c=Array.isArray(y)?y:[y]}return[{type:"element",tag:this.effectiveTag,props:{className:o,style:d,"data-section-id":t,"data-section-type":n,...i.isEnabled()&&{"data-tachui-component":`GridSection${n==="header"?"Header":"Footer"}`,...a&&{"data-tachui-label":a}}},children:c,componentMetadata:{originalType:`GridSection${n==="header"?"Header":"Footer"}`,overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult}}]}}class I extends O.ComponentWithCSSClasses{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 r=t==="grid"?"Grid":t==="lazy-vgrid"?"LazyVGrid":"LazyHGrid",a=j.processElementOverride(r,"div",this.props.element);this.effectiveTag=a.tag,this.validationResult=a.validation,this.setupLifecycleHooks(),_.registerComponentWithLifecycleHooks(this)}generateAnimationStyles(e){return e?m.generateGridAnimationCSS(e):{}}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=F.transition("all",a,i,d);o.modifiers.push(c)}return o})}return e}generateAccessibilityAttributes(e,t,n){return e?m.generateAccessibilityAttributes(e,this.gridType,t,n):{}}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}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)})}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()}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()}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()}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(){N.useLifecycle(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=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)}})}})}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 D extends I{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=M();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(G=>{const w=G.render();return Array.isArray(w)?w:[w]}).flat(),$=m.generateAlignment(e),y=m.generateSpacing(t),v=this.generateAnimationStyles(r),h=this.generateAccessibilityAttributes(a),l=m.generateReducedMotionCSS(a),k=this.generateStylingCSS(i),A={display:"grid",gap:y,...$,...v,...l,...k};return[{type:"element",tag:this.effectiveTag,props:{className:u,style:A,...h,...s.isEnabled()&&{"data-tachui-component":"Grid",...n&&{"data-tachui-label":n}}},children:c,componentMetadata:{originalType:"Grid",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult}}]}}class H extends O.ComponentWithCSSClasses{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.processElementOverride("GridRow","div",this.props.element);this.effectiveTag=n.tag,this.validationResult=n.validation}render(){const{debugLabel:e}=this.props,t=M();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"},...t.isEnabled()&&{"data-tachui-component":"GridRow",...e&&{"data-tachui-label":e}}},children:a,componentMetadata:{originalType:"GridRow",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult}}]}}class P extends I{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=M();c.logComponent("LAZYVGRID",r);const $=["tachui-lazy-vgrid",...c.isEnabled()?["tachui-debug"]:[]],y=this.createClassString(this.props,$);let v;i&&i.length>0?v=this.renderSections(i,s):v=this.applyItemAnimations(this.children,o).map(x=>{const p=x.render();return Array.isArray(p)?p:[p]}).flat();let h,l={display:"grid"};if(a){const S=b.GridPerformanceMonitor.startMeasurement("responsive-css-generation");try{const p={...b.GridResponsiveUtils.createResponsiveGridConfig({columns:e,spacing:n,alignment:t}),...a};b.GridDebugger.registerGrid(this.id,p,`#${this.id}`),b.GridDebugger.visualizeBreakpoints(p);const C=b.createResponsiveGridModifier(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=C}finally{S()}}else{const S=m.generateAlignment(t),x=m.generateSpacing(n);if(Array.isArray(e))h=m.generateColumns(e);else{const C=m.generateResponsiveGridCSS(e,"grid-template-columns")["grid-template-columns"];h=typeof C=="string"?C:"1fr"}l={...l,gap:x,...S}}l.gridTemplateColumns=h;const k=this.generateAnimationStyles(o);Object.assign(l,k);const A=this.getColumnCount(),E=this.generateAccessibilityAttributes(u,A),G=m.generateReducedMotionCSS(u);Object.assign(l,G);const w=this.generateStylingCSS(d);Object.assign(l,w);const L={type:"element",tag:this.effectiveTag,props:{className:y,style:l,...E,...c.isEnabled()&&{"data-tachui-component":"LazyVGrid",...r&&{"data-tachui-label":r}}},children:v,componentMetadata:{originalType:"LazyVGrid",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult,...a&&l._responsiveModifier&&{responsiveModifier:l._responsiveModifier}}};return l._responsiveModifier&&delete l._responsiveModifier,[L]}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 R({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 R({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}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}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 q extends I{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=M();c.logComponent("LAZYHGRID",r);const $=["tachui-lazy-hgrid",...c.isEnabled()?["tachui-debug"]:[]],y=this.createClassString(this.props,$);let v;i&&i.length>0?v=this.renderSections(i,s):v=this.applyItemAnimations(this.children,o).map(x=>{const p=x.render();return Array.isArray(p)?p:[p]}).flat();let h,l={display:"grid",gridAutoFlow:"column",overflowX:"auto"};if(a){const S=b.GridPerformanceMonitor.startMeasurement("responsive-css-generation");try{const p={...b.GridResponsiveUtils.createResponsiveGridConfig({rows:e,spacing:n,alignment:t}),...a};b.GridDebugger.registerGrid(this.id,p,`#${this.id}`),b.GridDebugger.visualizeBreakpoints(p);const C=b.createResponsiveGridModifier(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=C}finally{S()}}else{const S=m.generateAlignment(t),x=m.generateSpacing(n);if(Array.isArray(e))h=m.generateRows(e);else{const C=m.generateResponsiveGridCSS(e,"grid-template-rows")["grid-template-rows"];h=typeof C=="string"?C:"auto"}l={...l,gap:x,...S}}l.gridTemplateRows=h;const k=this.generateAnimationStyles(o);Object.assign(l,k);const A=this.getRowCount(),E=this.generateAccessibilityAttributes(u,void 0,A),G=m.generateReducedMotionCSS(u);Object.assign(l,G);const w=this.generateStylingCSS(d);Object.assign(l,w);const L={type:"element",tag:this.effectiveTag,props:{className:y,style:l,...E,...c.isEnabled()&&{"data-tachui-component":"LazyHGrid",...r&&{"data-tachui-label":r}}},children:v,componentMetadata:{originalType:"LazyHGrid",overriddenTo:this.effectiveTag!=="div"?this.effectiveTag:void 0,validationResult:this.validationResult,...a&&l._responsiveModifier&&{responsiveModifier:l._responsiveModifier}}};return l._responsiveModifier&&delete l._responsiveModifier,[L]}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 R({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 R({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}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}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 W(f={}){const{children:e=[],...t}=f,n=new D(t,e);return z.withModifiers(n)}function X(f=[],e={}){const t={...e,children:f},n=new H(t,f);return z.withModifiers(n)}function Q(f){const{children:e=[],...t}=f,n=new P({...t,children:e},e);return z.withModifiers(n)}function U(f){const{children:e=[],...t}=f,n=new q({...t,children:e},e);return z.withModifiers(n)}exports.GridDebugger=b.GridDebugger;exports.GridPerformanceMonitor=b.GridPerformanceMonitor;exports.BaseGridComponent=I;exports.EnhancedGrid=D;exports.EnhancedGridRow=H;exports.EnhancedLazyHGrid=q;exports.EnhancedLazyVGrid=P;exports.Grid=W;exports.GridCSSGenerator=m;exports.GridItem=Y;exports.GridRow=X;exports.GridSectionHeaderComponent=R;exports.LazyHGrid=U;exports.LazyVGrid=Q;
+//# sourceMappingURL=Grid.cjs.map