@tachui/core 0.7.0-alpha1

package/dist/components/GridResponsive.js

@@ -0,0 +1,382 @@
+import { ResponsiveCSSGenerator as f } from "../modifiers/responsive/css-generator.js";
+import { createResponsiveModifier as p } from "../modifiers/responsive/responsive-modifier.js";
+var b = Object.defineProperty, y = (a, e, t) => e in a ? b(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t, m = (a, e, t) => y(a, typeof e != "symbol" ? e + "" : e, t);
+class C extends f {
+  constructor(e) {
+    super({
+      selector: e,
+      mobileFirst: !0,
+      optimizeOutput: !0,
+      includeComments: !1,
+      generateMinified: !0
+    });
+  }
+  /**
+   * Generate responsive grid CSS that integrates with tachUI's modifier system
+   */
+  generateGridCSS(e) {
+    const t = {};
+    return Object.entries(e).forEach(([s, r]) => {
+      if (this.isResponsiveValue(r))
+        Object.entries(r).forEach(([i, o]) => {
+          t[i] || (t[i] = {});
+          const n = this.mapGridPropertyToCSS(s, o);
+          n && Object.assign(t[i], n);
+        });
+      else {
+        t.base || (t.base = {});
+        const i = this.mapGridPropertyToCSS(s, r);
+        i && Object.assign(t.base, i);
+      }
+    }), this.generateResponsiveCSS(t);
+  }
+  /**
+   * Map grid property names to CSS properties with appropriate value processing
+   */
+  mapGridPropertyToCSS(e, t) {
+    switch (e) {
+      case "columns":
+        return { "grid-template-columns": this.generateGridColumns(t) };
+      case "rows":
+        return { "grid-template-rows": this.generateGridRows(t) };
+      case "gap":
+        return { gap: this.normalizeSpacing(t) };
+      case "columnGap":
+        return { "column-gap": this.normalizeSpacing(t) };
+      case "rowGap":
+        return { "row-gap": this.normalizeSpacing(t) };
+      case "autoFlow":
+        return { "grid-auto-flow": t };
+      case "autoRows":
+        return { "grid-auto-rows": t };
+      case "autoColumns":
+        return { "grid-auto-columns": t };
+      case "templateAreas":
+        return { "grid-template-areas": t };
+      case "alignItems":
+        return { "align-items": t };
+      case "justifyItems":
+        return { "justify-items": t };
+      case "alignContent":
+        return { "align-content": t };
+      case "justifyContent":
+        return { "justify-content": t };
+      default:
+        return null;
+    }
+  }
+  /**
+   * Generate CSS grid-template-columns from GridItem configurations
+   */
+  generateGridColumns(e) {
+    return e.map((t) => {
+      switch (t.type) {
+        case "fixed":
+          return `${t.size}px`;
+        case "flexible":
+          const s = t.minimum || 0, r = t.maximum ? `${t.maximum}px` : "1fr";
+          return s > 0 ? `minmax(${s}px, ${r})` : "1fr";
+        case "adaptive":
+          const i = t.minimum, o = t.maximum ? `${t.maximum}px` : "1fr";
+          return `minmax(${i}px, ${o})`;
+        default:
+          return "1fr";
+      }
+    }).join(" ");
+  }
+  /**
+   * Generate CSS grid-template-rows from GridItem configurations
+   */
+  generateGridRows(e) {
+    return this.generateGridColumns(e);
+  }
+  /**
+   * Normalize spacing values to CSS
+   */
+  normalizeSpacing(e) {
+    return typeof e == "number" ? `${e}px` : e;
+  }
+  /**
+   * Check if a value is responsive (has breakpoint keys)
+   */
+  isResponsiveValue(e) {
+    return e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).some((t) => ["base", "sm", "md", "lg", "xl", "xxl"].includes(t));
+  }
+}
+function j(a) {
+  return p((e) => {
+    const t = `#${e}`;
+    return c.getCachedCSS(a, t);
+  });
+}
+class c {
+  /**
+   * Generate cache key from configuration
+   */
+  static generateCacheKey(e) {
+    return JSON.stringify(e, (t, s) => typeof s == "function" ? "[Function]" : s);
+  }
+  /**
+   * Get cached CSS or generate new if not cached
+   */
+  static getCachedCSS(e, t) {
+    const s = this.generateCacheKey(e);
+    if (this.cache.has(s)) {
+      this.hitCount++;
+      const n = this.cache.get(s);
+      return {
+        ...n,
+        mediaQueries: n.mediaQueries.map((u) => ({
+          ...u,
+          selector: t
+        }))
+      };
+    }
+    this.missCount++;
+    const i = new C(t).generateGridCSS(e), o = {
+      ...i,
+      mediaQueries: i.mediaQueries.map((n) => ({
+        ...n,
+        selector: ".cached-selector"
+        // Placeholder selector for caching
+      }))
+    };
+    if (this.cache.size >= this.maxCacheSize) {
+      const n = this.cache.keys().next().value;
+      n !== void 0 && this.cache.delete(n);
+    }
+    return this.cache.set(s, o), i;
+  }
+  /**
+   * Get cache statistics for performance monitoring
+   */
+  static getStats() {
+    return {
+      cacheSize: this.cache.size,
+      hitCount: this.hitCount,
+      missCount: this.missCount,
+      hitRate: this.hitCount / (this.hitCount + this.missCount) || 0
+    };
+  }
+  /**
+   * Clear cache (useful for testing or memory management)
+   */
+  static clearCache() {
+    this.cache.clear(), this.hitCount = 0, this.missCount = 0;
+  }
+}
+m(c, "cache", /* @__PURE__ */ new Map());
+m(c, "maxCacheSize", 100);
+m(c, "hitCount", 0);
+m(c, "missCount", 0);
+class G {
+  /**
+   * Convert legacy ResponsiveGridItemConfig to enhanced format
+   */
+  static convertLegacyConfig(e) {
+    const t = {};
+    return Object.entries(e).forEach(([s, r]) => {
+      r && (t[s] = r);
+    }), t;
+  }
+  /**
+   * Create responsive grid configuration from simple column/row definitions
+   */
+  static createResponsiveGridConfig(e) {
+    const t = {};
+    if (e.columns && (this.isLegacyResponsiveGridConfig(e.columns) ? t.columns = this.convertLegacyConfig(e.columns) : t.columns = e.columns), e.rows && (this.isLegacyResponsiveGridConfig(e.rows) ? t.rows = this.convertLegacyConfig(e.rows) : t.rows = e.rows), e.spacing)
+      if (this.isResponsiveValue(e.spacing)) {
+        const s = {};
+        Object.entries(e.spacing).forEach(([r, i]) => {
+          s[r] = this.normalizeSpacing(i);
+        }), t.gap = s;
+      } else
+        t.gap = { base: this.normalizeSpacing(e.spacing) };
+    if (e.alignment)
+      if (this.isResponsiveValue(e.alignment)) {
+        const s = {}, r = {};
+        Object.entries(e.alignment).forEach(([i, o]) => {
+          const { alignItems: n, justifyItems: u } = this.convertAlignment(o);
+          s[i] = n, r[i] = u;
+        }), t.alignItems = s, t.justifyItems = r;
+      } else {
+        const { alignItems: s, justifyItems: r } = this.convertAlignment(e.alignment);
+        t.alignItems = { base: s }, t.justifyItems = { base: r };
+      }
+    return t;
+  }
+  /**
+   * Convert GridAlignment to CSS alignment properties
+   */
+  static convertAlignment(e) {
+    const t = {
+      topLeading: { alignItems: "start", justifyItems: "start" },
+      top: { alignItems: "start", justifyItems: "center" },
+      topTrailing: { alignItems: "start", justifyItems: "end" },
+      leading: { alignItems: "center", justifyItems: "start" },
+      center: { alignItems: "center", justifyItems: "center" },
+      trailing: { alignItems: "center", justifyItems: "end" },
+      bottomLeading: { alignItems: "end", justifyItems: "start" },
+      bottom: { alignItems: "end", justifyItems: "center" },
+      bottomTrailing: { alignItems: "end", justifyItems: "end" }
+    };
+    return t[e] || t.center;
+  }
+  /**
+   * Normalize spacing values to CSS
+   */
+  static normalizeSpacing(e) {
+    if (typeof e == "number")
+      return `${e}px`;
+    if (typeof e == "string")
+      return e;
+    if (e && typeof e == "object") {
+      const t = e.horizontal ?? 0;
+      return `${e.vertical ?? 0}px ${t}px`;
+    }
+    return "0";
+  }
+  /**
+   * Check if value is a responsive value
+   */
+  static isResponsiveValue(e) {
+    return e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).some((t) => ["base", "sm", "md", "lg", "xl", "xxl"].includes(t));
+  }
+  /**
+   * Check if value is legacy ResponsiveGridItemConfig
+   */
+  static isLegacyResponsiveGridConfig(e) {
+    return e && typeof e == "object" && !Array.isArray(e) && Object.keys(e).some((t) => ["base", "sm", "md", "lg", "xl", "xxl"].includes(t)) && Object.values(e).every((t) => Array.isArray(t));
+  }
+}
+class g {
+  /**
+   * Enable/disable grid debugging
+   */
+  static setDebugMode(e) {
+    this.debugMode = e, e && console.log("🔍 tachUI Grid debugging enabled");
+  }
+  /**
+   * Register a grid instance for debugging
+   */
+  static registerGrid(e, t, s) {
+    this.debugMode && (this.instances.set(e, {
+      config: t,
+      selector: s,
+      timestamp: Date.now()
+    }), console.group(`🏗️ Grid registered: ${e}`), console.log("Configuration:", t), console.log("Selector:", s), console.log("Cache stats:", c.getStats()), console.groupEnd());
+  }
+  /**
+   * Log responsive grid performance metrics
+   */
+  static logPerformanceMetrics() {
+    if (!this.debugMode) return;
+    console.group("📊 Grid Performance Metrics");
+    const e = c.getStats();
+    console.log(`Cache efficiency: ${(e.hitRate * 100).toFixed(1)}%`), console.log(`Cache size: ${e.cacheSize}/100`), console.log(`Cache hits: ${e.hitCount}, misses: ${e.missCount}`), console.log(`Active grid instances: ${this.instances.size}`), console.groupEnd();
+  }
+  /**
+   * Visualize breakpoint behavior in browser console
+   */
+  static visualizeBreakpoints(e) {
+    this.debugMode && (console.group("📱 Responsive Grid Breakpoints"), e.columns && (console.log("Column configuration:"), Object.entries(e.columns).forEach(([t, s]) => {
+      const r = Array.isArray(s) ? s.map((i) => `${i.type}(${i.size || i.minimum || "auto"})`).join(" ") : String(s || "auto");
+      console.log(`  ${t}: ${r}`);
+    })), e.gap && (console.log("Gap configuration:"), Object.entries(e.gap).forEach(([t, s]) => {
+      console.log(`  ${t}: ${s}`);
+    })), console.groupEnd());
+  }
+  /**
+   * Get debugging information for all registered grids
+   */
+  static getDebugInfo() {
+    return {
+      debugMode: this.debugMode,
+      instances: Array.from(this.instances.entries()).map(([e, t]) => ({
+        id: e,
+        ...t,
+        age: Date.now() - t.timestamp
+      })),
+      cacheStats: c.getStats()
+    };
+  }
+  /**
+   * Clear debugging data
+   */
+  static clear() {
+    this.instances.clear(), c.clearCache(), this.debugMode && console.log("🧹 Grid debugging data cleared");
+  }
+}
+m(g, "debugMode", !1);
+m(g, "instances", /* @__PURE__ */ new Map());
+class l {
+  /**
+   * Enable performance monitoring
+   */
+  static enable() {
+    this.enabled = !0, console.log("⏱️ Grid performance monitoring enabled");
+  }
+  /**
+   * Disable performance monitoring
+   */
+  static disable() {
+    this.enabled = !1;
+  }
+  /**
+   * Start measuring a performance metric
+   */
+  static startMeasurement(e) {
+    if (!this.enabled) return () => {
+    };
+    const t = performance.now();
+    return () => {
+      const s = performance.now() - t;
+      this.measurements.has(e) || this.measurements.set(e, []), this.measurements.get(e).push(s), s > 10 && console.warn(`🐌 Slow grid operation: ${e} took ${s.toFixed(2)}ms`);
+    };
+  }
+  /**
+   * Get performance statistics
+   */
+  static getStats() {
+    const e = {};
+    for (const [t, s] of this.measurements) {
+      const r = s.length, i = s.reduce((d, h) => d + h, 0), o = i / r, n = Math.min(...s), u = Math.max(...s);
+      e[t] = {
+        count: r,
+        averageTime: Number(o.toFixed(2)),
+        minTime: Number(n.toFixed(2)),
+        maxTime: Number(u.toFixed(2)),
+        totalTime: Number(i.toFixed(2))
+      };
+    }
+    return e;
+  }
+  /**
+   * Log performance report
+   */
+  static logReport() {
+    if (!this.enabled) return;
+    console.group("📈 Grid Performance Report");
+    const e = this.getStats();
+    for (const [t, s] of Object.entries(e))
+      console.log(`${t}:`, s);
+    console.groupEnd();
+  }
+  /**
+   * Clear performance data
+   */
+  static clear() {
+    this.measurements.clear(), this.enabled && console.log("🧹 Grid performance data cleared");
+  }
+}
+m(l, "measurements", /* @__PURE__ */ new Map());
+m(l, "enabled", !1);
+export {
+  c as GridCSSCache,
+  g as GridDebugger,
+  l as GridPerformanceMonitor,
+  G as GridResponsiveUtils,
+  C as ResponsiveGridCSSGenerator,
+  j as createResponsiveGridModifier
+};
+//# sourceMappingURL=GridResponsive.js.map

package/dist/components/GridResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridResponsive.js","sources":["../../src/components/GridResponsive.ts"],"sourcesContent":["/**\n * Grid Responsive Integration (Phase 2)\n *\n * Enhanced responsive integration for Grid components that deeply integrates\n * with tachUI's responsive modifier system for optimal performance and capabilities.\n */\n\nimport type { \n  ResponsiveValue, \n  BreakpointKey, \n  ResponsiveStyleConfig,\n  ResponsiveModifierResult\n} from '../modifiers/responsive/types'\nimport { ResponsiveCSSGenerator } from '../modifiers/responsive/css-generator'\nimport { createResponsiveModifier } from '../modifiers/responsive/responsive-modifier'\nimport type { GridItemConfig, ResponsiveGridItemConfig } from './Grid'\n\n/**\n * Enhanced responsive grid configuration with full modifier integration\n */\nexport interface EnhancedResponsiveGridConfig {\n  columns?: ResponsiveValue<GridItemConfig[]>\n  rows?: ResponsiveValue<GridItemConfig[]>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n  autoFlow?: ResponsiveValue<'row' | 'column' | 'row dense' | 'column dense'>\n  autoRows?: ResponsiveValue<string>\n  autoColumns?: ResponsiveValue<string>\n  templateAreas?: ResponsiveValue<string>\n  alignItems?: ResponsiveValue<'start' | 'end' | 'center' | 'stretch' | 'baseline'>\n  justifyItems?: ResponsiveValue<'start' | 'end' | 'center' | 'stretch'>\n  alignContent?: ResponsiveValue<'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly'>\n  justifyContent?: ResponsiveValue<'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly'>\n}\n\n/**\n * Enhanced GridItem CSS Generator with responsive modifier integration\n */\nexport class ResponsiveGridCSSGenerator extends ResponsiveCSSGenerator {\n  constructor(selector: string) {\n    super({\n      selector,\n      mobileFirst: true,\n      optimizeOutput: true,\n      includeComments: false,\n      generateMinified: true\n    })\n  }\n\n  /**\n   * Generate responsive grid CSS that integrates with tachUI's modifier system\n   */\n  generateGridCSS(config: EnhancedResponsiveGridConfig): ResponsiveModifierResult {\n    const responsiveStyles: ResponsiveStyleConfig = {}\n    \n    // Process each responsive property\n    Object.entries(config).forEach(([property, value]) => {\n      if (this.isResponsiveValue(value)) {\n        // Handle responsive values\n        Object.entries(value).forEach(([breakpoint, breakpointValue]) => {\n          if (!responsiveStyles[breakpoint as BreakpointKey]) {\n            responsiveStyles[breakpoint as BreakpointKey] = {}\n          }\n          \n          const cssProperty = this.mapGridPropertyToCSS(property, breakpointValue)\n          if (cssProperty) {\n            Object.assign(responsiveStyles[breakpoint as BreakpointKey]!, cssProperty)\n          }\n        })\n      } else {\n        // Handle non-responsive values - add to base styles\n        if (!responsiveStyles.base) {\n          responsiveStyles.base = {}\n        }\n        \n        const cssProperty = this.mapGridPropertyToCSS(property, value)\n        if (cssProperty) {\n          Object.assign(responsiveStyles.base, cssProperty)\n        }\n      }\n    })\n\n    return this.generateResponsiveCSS(responsiveStyles)\n  }\n\n  /**\n   * Map grid property names to CSS properties with appropriate value processing\n   */\n  private mapGridPropertyToCSS(property: string, value: any): Record<string, string> | null {\n    switch (property) {\n      case 'columns':\n        return { 'grid-template-columns': this.generateGridColumns(value) }\n      case 'rows':\n        return { 'grid-template-rows': this.generateGridRows(value) }\n      case 'gap':\n        return { 'gap': this.normalizeSpacing(value) }\n      case 'columnGap':\n        return { 'column-gap': this.normalizeSpacing(value) }\n      case 'rowGap':\n        return { 'row-gap': this.normalizeSpacing(value) }\n      case 'autoFlow':\n        return { 'grid-auto-flow': value }\n      case 'autoRows':\n        return { 'grid-auto-rows': value }\n      case 'autoColumns':\n        return { 'grid-auto-columns': value }\n      case 'templateAreas':\n        return { 'grid-template-areas': value }\n      case 'alignItems':\n        return { 'align-items': value }\n      case 'justifyItems':\n        return { 'justify-items': value }\n      case 'alignContent':\n        return { 'align-content': value }\n      case 'justifyContent':\n        return { 'justify-content': value }\n      default:\n        return null\n    }\n  }\n\n  /**\n   * Generate CSS grid-template-columns from GridItem configurations\n   */\n  private generateGridColumns(items: GridItemConfig[]): string {\n    return items.map(item => {\n      switch (item.type) {\n        case 'fixed':\n          return `${item.size}px`\n        case 'flexible':\n          const minSize = item.minimum || 0\n          const maxSize = item.maximum ? `${item.maximum}px` : '1fr'\n          return minSize > 0 ? `minmax(${minSize}px, ${maxSize})` : '1fr'\n        case 'adaptive':\n          const adaptiveMin = item.minimum\n          const adaptiveMax = item.maximum ? `${item.maximum}px` : '1fr'\n          return `minmax(${adaptiveMin}px, ${adaptiveMax})`\n        default:\n          return '1fr'\n      }\n    }).join(' ')\n  }\n\n  /**\n   * Generate CSS grid-template-rows from GridItem configurations\n   */\n  private generateGridRows(items: GridItemConfig[]): string {\n    return this.generateGridColumns(items) // Same logic applies\n  }\n\n  /**\n   * Normalize spacing values to CSS\n   */\n  private normalizeSpacing(value: string | number): string {\n    if (typeof value === 'number') {\n      return `${value}px`\n    }\n    return value\n  }\n\n  /**\n   * Check if a value is responsive (has breakpoint keys)\n   */\n  private isResponsiveValue(value: any): value is ResponsiveValue<any> {\n    return value && typeof value === 'object' && !Array.isArray(value) &&\n           Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))\n  }\n}\n\n/**\n * Create responsive grid modifier for LazyVGrid components with caching\n */\nexport function createResponsiveGridModifier(config: EnhancedResponsiveGridConfig) {\n  return createResponsiveModifier((elementId: string) => {\n    const selector = `#${elementId}`\n    // Use cached CSS generation for improved performance\n    return GridCSSCache.getCachedCSS(config, selector)\n  })\n}\n\n/**\n * CSS caching system for responsive grids (Phase 2)\n */\nclass GridCSSCache {\n  private static cache = new Map<string, ResponsiveModifierResult>()\n  private static maxCacheSize = 100\n  private static hitCount = 0\n  private static missCount = 0\n\n  /**\n   * Generate cache key from configuration\n   */\n  private static generateCacheKey(config: EnhancedResponsiveGridConfig): string {\n    return JSON.stringify(config, (_key, value) => {\n      // Normalize function references and ensure consistent ordering\n      if (typeof value === 'function') {\n        return '[Function]'\n      }\n      return value\n    })\n  }\n\n  /**\n   * Get cached CSS or generate new if not cached\n   */\n  static getCachedCSS(\n    config: EnhancedResponsiveGridConfig,\n    selector: string\n  ): ResponsiveModifierResult {\n    const cacheKey = this.generateCacheKey(config)\n    \n    if (this.cache.has(cacheKey)) {\n      this.hitCount++\n      const cachedResult = this.cache.get(cacheKey)!\n      \n      // Update selector in cached result (selectors may differ between instances)\n      return {\n        ...cachedResult,\n        mediaQueries: cachedResult.mediaQueries.map(mq => ({\n          ...mq,\n          selector\n        }))\n      }\n    }\n\n    this.missCount++\n    \n    // Generate new CSS\n    const generator = new ResponsiveGridCSSGenerator(selector)\n    const result = generator.generateGridCSS(config)\n    \n    // Cache the result (with generic selector that will be replaced)\n    const cacheableResult = {\n      ...result,\n      mediaQueries: result.mediaQueries.map(mq => ({\n        ...mq,\n        selector: '.cached-selector' // Placeholder selector for caching\n      }))\n    }\n    \n    // Implement LRU cache eviction\n    if (this.cache.size >= this.maxCacheSize) {\n      const firstKey = this.cache.keys().next().value\n      if (firstKey !== undefined) {\n        this.cache.delete(firstKey)\n      }\n    }\n    \n    this.cache.set(cacheKey, cacheableResult)\n    return result\n  }\n\n  /**\n   * Get cache statistics for performance monitoring\n   */\n  static getStats() {\n    return {\n      cacheSize: this.cache.size,\n      hitCount: this.hitCount,\n      missCount: this.missCount,\n      hitRate: this.hitCount / (this.hitCount + this.missCount) || 0\n    }\n  }\n\n  /**\n   * Clear cache (useful for testing or memory management)\n   */\n  static clearCache() {\n    this.cache.clear()\n    this.hitCount = 0\n    this.missCount = 0\n  }\n}\n\n/**\n * Enhanced responsive utilities for grid components\n */\nexport class GridResponsiveUtils {\n  /**\n   * Convert legacy ResponsiveGridItemConfig to enhanced format\n   */\n  static convertLegacyConfig(\n    legacyConfig: ResponsiveGridItemConfig\n  ): ResponsiveValue<GridItemConfig[]> {\n    const responsiveValue: ResponsiveValue<GridItemConfig[]> = {}\n    \n    Object.entries(legacyConfig).forEach(([breakpoint, items]) => {\n      if (items) {\n        responsiveValue[breakpoint as BreakpointKey] = items\n      }\n    })\n    \n    return responsiveValue\n  }\n\n  /**\n   * Create responsive grid configuration from simple column/row definitions\n   */\n  static createResponsiveGridConfig(options: {\n    columns?: ResponsiveValue<GridItemConfig[]> | ResponsiveGridItemConfig\n    rows?: ResponsiveValue<GridItemConfig[]> | ResponsiveGridItemConfig\n    spacing?: ResponsiveValue<string | number | { horizontal?: number; vertical?: number }>\n    alignment?: ResponsiveValue<'topLeading' | 'top' | 'topTrailing' | 'leading' | 'center' | 'trailing' | 'bottomLeading' | 'bottom' | 'bottomTrailing'>\n  }): EnhancedResponsiveGridConfig {\n    const config: EnhancedResponsiveGridConfig = {}\n\n    // Handle columns\n    if (options.columns) {\n      if (this.isLegacyResponsiveGridConfig(options.columns)) {\n        config.columns = this.convertLegacyConfig(options.columns)\n      } else {\n        config.columns = options.columns\n      }\n    }\n\n    // Handle rows\n    if (options.rows) {\n      if (this.isLegacyResponsiveGridConfig(options.rows)) {\n        config.rows = this.convertLegacyConfig(options.rows)\n      } else {\n        config.rows = options.rows\n      }\n    }\n\n    // Handle spacing\n    if (options.spacing) {\n      if (this.isResponsiveValue(options.spacing)) {\n        const processedSpacing: ResponsiveValue<string> = {}\n        Object.entries(options.spacing).forEach(([breakpoint, value]) => {\n          processedSpacing[breakpoint as BreakpointKey] = this.normalizeSpacing(value)\n        })\n        config.gap = processedSpacing\n      } else {\n        config.gap = { base: this.normalizeSpacing(options.spacing) }\n      }\n    }\n\n    // Handle alignment\n    if (options.alignment) {\n      if (this.isResponsiveValue(options.alignment)) {\n        const alignItems: ResponsiveValue<'start' | 'end' | 'center' | 'stretch'> = {}\n        const justifyItems: ResponsiveValue<'start' | 'end' | 'center' | 'stretch'> = {}\n        \n        Object.entries(options.alignment).forEach(([breakpoint, alignment]) => {\n          const { alignItems: ai, justifyItems: ji } = this.convertAlignment(alignment)\n          alignItems[breakpoint as BreakpointKey] = ai\n          justifyItems[breakpoint as BreakpointKey] = ji\n        })\n        \n        config.alignItems = alignItems\n        config.justifyItems = justifyItems\n      } else {\n        const { alignItems, justifyItems } = this.convertAlignment(options.alignment)\n        config.alignItems = { base: alignItems }\n        config.justifyItems = { base: justifyItems }\n      }\n    }\n\n    return config\n  }\n\n  /**\n   * Convert GridAlignment to CSS alignment properties\n   */\n  private static convertAlignment(alignment: string): { alignItems: 'start' | 'end' | 'center' | 'stretch'; justifyItems: 'start' | 'end' | 'center' | 'stretch' } {\n    const alignmentMap: Record<string, { alignItems: 'start' | 'end' | 'center' | 'stretch'; justifyItems: 'start' | 'end' | 'center' | 'stretch' }> = {\n      'topLeading': { alignItems: 'start', justifyItems: 'start' },\n      'top': { alignItems: 'start', justifyItems: 'center' },\n      'topTrailing': { alignItems: 'start', justifyItems: 'end' },\n      'leading': { alignItems: 'center', justifyItems: 'start' },\n      'center': { alignItems: 'center', justifyItems: 'center' },\n      'trailing': { alignItems: 'center', justifyItems: 'end' },\n      'bottomLeading': { alignItems: 'end', justifyItems: 'start' },\n      'bottom': { alignItems: 'end', justifyItems: 'center' },\n      'bottomTrailing': { alignItems: 'end', justifyItems: 'end' }\n    }\n    \n    return alignmentMap[alignment] || alignmentMap.center\n  }\n\n  /**\n   * Normalize spacing values to CSS\n   */\n  private static normalizeSpacing(value: string | number | { horizontal?: number; vertical?: number }): string {\n    if (typeof value === 'number') {\n      return `${value}px`\n    }\n    if (typeof value === 'string') {\n      return value\n    }\n    if (value && typeof value === 'object') {\n      const horizontal = value.horizontal ?? 0\n      const vertical = value.vertical ?? 0\n      return `${vertical}px ${horizontal}px`\n    }\n    return '0'\n  }\n\n  /**\n   * Check if value is a responsive value\n   */\n  private static isResponsiveValue(value: any): value is ResponsiveValue<any> {\n    return value && typeof value === 'object' && !Array.isArray(value) &&\n           Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key))\n  }\n\n  /**\n   * Check if value is legacy ResponsiveGridItemConfig\n   */\n  private static isLegacyResponsiveGridConfig(value: any): value is ResponsiveGridItemConfig {\n    return value && typeof value === 'object' && !Array.isArray(value) &&\n           Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key)) &&\n           Object.values(value).every(v => Array.isArray(v))\n  }\n}\n\n/**\n * Enhanced debugging tools for responsive grids (Phase 2)\n */\nexport class GridDebugger {\n  private static debugMode = false\n  private static instances = new Map<string, {\n    config: EnhancedResponsiveGridConfig\n    selector: string\n    timestamp: number\n  }>()\n\n  /**\n   * Enable/disable grid debugging\n   */\n  static setDebugMode(enabled: boolean) {\n    this.debugMode = enabled\n    if (enabled) {\n      console.log('🔍 tachUI Grid debugging enabled')\n    }\n  }\n\n  /**\n   * Register a grid instance for debugging\n   */\n  static registerGrid(elementId: string, config: EnhancedResponsiveGridConfig, selector: string) {\n    if (!this.debugMode) return\n\n    this.instances.set(elementId, {\n      config,\n      selector,\n      timestamp: Date.now()\n    })\n\n    console.group(`🏗️ Grid registered: ${elementId}`)\n    console.log('Configuration:', config)\n    console.log('Selector:', selector)\n    console.log('Cache stats:', GridCSSCache.getStats())\n    console.groupEnd()\n  }\n\n  /**\n   * Log responsive grid performance metrics\n   */\n  static logPerformanceMetrics() {\n    if (!this.debugMode) return\n\n    console.group('📊 Grid Performance Metrics')\n    \n    const cacheStats = GridCSSCache.getStats()\n    console.log(`Cache efficiency: ${(cacheStats.hitRate * 100).toFixed(1)}%`)\n    console.log(`Cache size: ${cacheStats.cacheSize}/${100}`)\n    console.log(`Cache hits: ${cacheStats.hitCount}, misses: ${cacheStats.missCount}`)\n    \n    console.log(`Active grid instances: ${this.instances.size}`)\n    console.groupEnd()\n  }\n\n  /**\n   * Visualize breakpoint behavior in browser console\n   */\n  static visualizeBreakpoints(config: EnhancedResponsiveGridConfig) {\n    if (!this.debugMode) return\n\n    console.group('📱 Responsive Grid Breakpoints')\n    \n    if (config.columns) {\n      console.log('Column configuration:')\n      Object.entries(config.columns).forEach(([breakpoint, cols]) => {\n        const description = Array.isArray(cols) \n          ? cols.map(c => `${c.type}(${c.size || c.minimum || 'auto'})`).join(' ')\n          : String(cols || 'auto')\n        console.log(`  ${breakpoint}: ${description}`)\n      })\n    }\n    \n    if (config.gap) {\n      console.log('Gap configuration:')\n      Object.entries(config.gap).forEach(([breakpoint, gap]) => {\n        console.log(`  ${breakpoint}: ${gap}`)\n      })\n    }\n    \n    console.groupEnd()\n  }\n\n  /**\n   * Get debugging information for all registered grids\n   */\n  static getDebugInfo() {\n    return {\n      debugMode: this.debugMode,\n      instances: Array.from(this.instances.entries()).map(([id, info]) => ({\n        id,\n        ...info,\n        age: Date.now() - info.timestamp\n      })),\n      cacheStats: GridCSSCache.getStats()\n    }\n  }\n\n  /**\n   * Clear debugging data\n   */\n  static clear() {\n    this.instances.clear()\n    GridCSSCache.clearCache()\n    if (this.debugMode) {\n      console.log('🧹 Grid debugging data cleared')\n    }\n  }\n}\n\n/**\n * Performance monitoring for responsive grid layouts (Phase 2)\n */\nexport class GridPerformanceMonitor {\n  private static measurements = new Map<string, number[]>()\n  private static enabled = false\n\n  /**\n   * Enable performance monitoring\n   */\n  static enable() {\n    this.enabled = true\n    console.log('⏱️ Grid performance monitoring enabled')\n  }\n\n  /**\n   * Disable performance monitoring\n   */\n  static disable() {\n    this.enabled = false\n  }\n\n  /**\n   * Start measuring a performance metric\n   */\n  static startMeasurement(operation: string): () => void {\n    if (!this.enabled) return () => {}\n\n    const startTime = performance.now()\n    \n    return () => {\n      const duration = performance.now() - startTime\n      \n      if (!this.measurements.has(operation)) {\n        this.measurements.set(operation, [])\n      }\n      \n      this.measurements.get(operation)!.push(duration)\n      \n      // Log slow operations (>10ms)\n      if (duration > 10) {\n        console.warn(`🐌 Slow grid operation: ${operation} took ${duration.toFixed(2)}ms`)\n      }\n    }\n  }\n\n  /**\n   * Get performance statistics\n   */\n  static getStats() {\n    const stats: Record<string, {\n      count: number\n      averageTime: number\n      minTime: number\n      maxTime: number\n      totalTime: number\n    }> = {}\n\n    for (const [operation, times] of this.measurements) {\n      const count = times.length\n      const totalTime = times.reduce((sum, time) => sum + time, 0)\n      const averageTime = totalTime / count\n      const minTime = Math.min(...times)\n      const maxTime = Math.max(...times)\n\n      stats[operation] = {\n        count,\n        averageTime: Number(averageTime.toFixed(2)),\n        minTime: Number(minTime.toFixed(2)),\n        maxTime: Number(maxTime.toFixed(2)),\n        totalTime: Number(totalTime.toFixed(2))\n      }\n    }\n\n    return stats\n  }\n\n  /**\n   * Log performance report\n   */\n  static logReport() {\n    if (!this.enabled) return\n\n    console.group('📈 Grid Performance Report')\n    const stats = this.getStats()\n    \n    for (const [operation, data] of Object.entries(stats)) {\n      console.log(`${operation}:`, data)\n    }\n    \n    console.groupEnd()\n  }\n\n  /**\n   * Clear performance data\n   */\n  static clear() {\n    this.measurements.clear()\n    if (this.enabled) {\n      console.log('🧹 Grid performance data cleared')\n    }\n  }\n}\n\nexport type { ResponsiveGridItemConfig }\n\n// Export debugging and performance utilities (declared above as classes)\nexport { GridCSSCache }"],"names":["ResponsiveGridCSSGenerator","ResponsiveCSSGenerator","selector","config","responsiveStyles","property","value","breakpoint","breakpointValue","cssProperty","items","item","minSize","maxSize","adaptiveMin","adaptiveMax","key","createResponsiveGridModifier","createResponsiveModifier","elementId","GridCSSCache","_key","cacheKey","cachedResult","mq","result","cacheableResult","firstKey","__publicField","GridResponsiveUtils","legacyConfig","responsiveValue","options","processedSpacing","alignItems","justifyItems","alignment","ai","ji","alignmentMap","horizontal","v","GridDebugger","enabled","cacheStats","cols","description","c","gap","id","info","GridPerformanceMonitor","operation","startTime","duration","stats","times","count","totalTime","sum","time","averageTime","minTime","maxTime","data"],"mappings":"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"}

package/dist/components/Image.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");const m=require("../reactive/effect.cjs"),u=require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");require("../runtime/component.cjs");require("../runtime/context.cjs");require("../runtime/dev-tools.cjs");const f=require("../runtime/dom-bridge.cjs");require("../runtime/error-boundary.cjs");require("../runtime/error-reporting.cjs");require("../runtime/performance.cjs");const c=require("../runtime/renderer.cjs"),S=require("../runtime/element-override.cjs");require("../runtime/semantic-role-manager.cjs");require("../runtime/development-warnings.cjs");const y=require("../lifecycle/hooks.cjs"),v=require("./wrapper.cjs"),h=require("../assets/ImageAsset.cjs"),l=require("../concatenation/concatenated-component.cjs");require("../css-classes/css-class-manager.cjs");const q=require("../css-classes/component-base.cjs");var C=Object.defineProperty,I=(r,e,t)=>e in r?C(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,o=(r,e,t)=>I(r,typeof e!="symbol"?e+"":e,t);class g extends q.ComponentWithCSSClasses{constructor(e){super(),this.props=e,o(this,"type","component"),o(this,"id"),o(this,"mounted",!1),o(this,"cleanup",[]),o(this,"effectiveTag"),o(this,"validationResult"),o(this,"loadingStateSignal"),o(this,"setLoadingState"),this.id=`image-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;const t=S.processElementOverride("Image","img",this.props.element);this.effectiveTag=t.tag,this.validationResult=t.validation;const i=this.props.src?"idle":"error",[s,n]=u.createSignal(i);this.loadingStateSignal=s,this.setLoadingState=n,y.useLifecycle(this,{onDOMReady:(p,d)=>{this.props.src instanceof h.ImageAsset&&d instanceof HTMLImageElement&&this.setupImageAssetReactivityForDOMElement(this.props.src,d)}}),f.registerComponentWithLifecycleHooks(this)}setLoadingStateWithCallback(e){this.setLoadingState(e),this.props.onLoadingStateChange&&this.props.onLoadingStateChange(e)}render(){const e=this.loadingStateSignal();if(e==="loading"&&this.props.placeholder){if(typeof this.props.placeholder=="string")return[c.h("img",{class:"tachui-image-placeholder",src:this.props.placeholder,alt:"Loading..."})];if(this.props.placeholder&&typeof this.props.placeholder=="object")return this.props.placeholder.render()}if(e==="error"&&this.props.errorPlaceholder){if(typeof this.props.errorPlaceholder=="string")return[c.h("img",{class:"tachui-image-error",src:this.props.errorPlaceholder,alt:"Error loading image"})];if(this.props.errorPlaceholder&&typeof this.props.errorPlaceholder=="object")return this.props.errorPlaceholder.render()}const t=this.props.src instanceof h.ImageAsset?this.props.src.resolve():this.props.src,i=["tachui-image"],s=this.createClassString(this.props,i),n=c.h(this.effectiveTag,{className:s,src:t,alt:this.props.alt,loading:this.props.loadingStrategy||"lazy",crossorigin:this.props.crossOrigin,decoding:this.props.decoding||"async",fetchpriority:this.props.fetchPriority});return n.componentMetadata={id:this.id,type:"Image",originalType:"Image",overriddenTo:this.effectiveTag!=="img"?this.effectiveTag:void 0,validationResult:this.validationResult},[n]}setupImageAssetReactivityForDOMElement(e,t){const i=m.createEffect(()=>{const s=e.resolve();t.src=s,this.setLoadingStateWithCallback("loading")});this.cleanup.push(()=>i.dispose())}concat(e){const t=this.toSegment(),i=e.toSegment(),s={totalSegments:e instanceof l.ConcatenatedComponent?e.segments.length+1:2,accessibilityRole:e instanceof l.ConcatenatedComponent?this.mergeAccessibilityRoles("group",e.metadata.accessibilityRole):this.determineAccessibilityRole(e),semanticStructure:"inline"};return new l.ConcatenatedComponent([t,i],s)}toSegment(){return{id:this.id,component:this,modifiers:[],render:()=>{const e=this.render();return Array.isArray(e)?e[0]:e}}}isConcatenatable(){return!0}determineAccessibilityRole(e){switch(e.constructor.name){case"EnhancedText":return"group";case"EnhancedImage":return"group";case"EnhancedButton":case"EnhancedLink":return"composite";default:return"composite"}}mergeAccessibilityRoles(e,t){return e==="composite"||t==="composite"?"composite":"group"}}function a(r,e={}){const t={...e,src:r},i=new g(t);return v.withModifiers(i)}const b={idle:"idle",loading:"loading",loaded:"loaded",error:"error"},E={fit:"fit",fill:"fill",stretch:"stretch",center:"center",scaleDown:"scaleDown"},L={responsive(r,e,t={}){const i=r.map(s=>{const n=[s.src];return s.width&&n.push(`${s.width}w`),n.join(" ")}).join(", ");return a(e,{...t,srcSet:i})},progressive(r,e,t={}){return a(r,{...t,lowQualitySrc:r,highQualitySrc:e})},withPlaceholder(r,e,t={}){return a(r,{...t,placeholder:e})}};exports.EnhancedImage=g;exports.Image=a;exports.ImageContentModes=E;exports.ImageStates=b;exports.ImageUtils=L;
+//# sourceMappingURL=Image.cjs.map

package/dist/components/Image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.cjs","sources":["../../src/components/Image.ts"],"sourcesContent":["/**\n * Enhanced Image Component (Phase 5.4)\n *\n * SwiftUI-inspired Image component with loading states, error handling,\n * responsive sizing, and advanced image handling capabilities.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { createEffect, createSignal } from '../reactive'\nimport type { Signal } from '../reactive/types'\nimport { h } from '../runtime'\nimport type { ComponentInstance, ComponentProps } from '../runtime/types'\nimport { withModifiers } from './wrapper'\nimport { ImageAsset } from '../assets/ImageAsset'\n// import { getThemeSignal } from '../reactive/theme'\nimport { useLifecycle } from '../lifecycle/hooks'\nimport { registerComponentWithLifecycleHooks } from '../runtime/dom-bridge'\nimport type { Concatenatable, ComponentSegment, ConcatenationMetadata } from '../concatenation/types'\nimport { ConcatenatedComponent } from '../concatenation/concatenated-component'\nimport { \n  processElementOverride, \n  type ElementOverrideProps \n} from '../runtime/element-override'\nimport {\n  ComponentWithCSSClasses,\n  type CSSClassesProps\n} from '../css-classes'\n\n\n/**\n * Image loading state\n */\nexport type ImageLoadingState = 'idle' | 'loading' | 'loaded' | 'error'\n\n/**\n * Image content mode (how image fits within bounds)\n */\nexport type ImageContentMode =\n  | 'fit' // Aspect fit - scale to fit while maintaining aspect ratio\n  | 'fill' // Aspect fill - scale to fill while maintaining aspect ratio\n  | 'stretch' // Fill bounds exactly, may distort aspect ratio\n  | 'center' // Center image without scaling\n  | 'scaleDown' // Scale down if needed, never scale up\n\n/**\n * Image resize mode for different screen densities\n */\nexport type ImageResizeMode = 'cover' | 'contain' | 'fill' | 'none'\n\n/**\n * Image loading strategy\n */\nexport type ImageLoadingStrategy = 'eager' | 'lazy'\n\n/**\n * Image component properties with element override support and CSS classes\n */\nexport interface ImageProps extends ComponentProps, ElementOverrideProps, CSSClassesProps {\n  // Source\n  src?: string | Signal<string> | ImageAsset\n  srcSet?: string | Signal<string>\n  alt?: string | Signal<string>\n\n  // Dimensions\n  width?: number | string | Signal<number | string>\n  height?: number | string | Signal<number | string>\n  aspectRatio?: number | Signal<number>\n\n  // Content mode\n  contentMode?: ImageContentMode\n  resizeMode?: ImageResizeMode\n\n  // Loading\n  loadingStrategy?: ImageLoadingStrategy\n  placeholder?: string | ComponentInstance // URL or component to show while loading\n  errorPlaceholder?: string | ComponentInstance // URL or component to show on error\n\n  // State management\n  loadingState?: Signal<ImageLoadingState>\n  onLoadingStateChange?: (state: ImageLoadingState) => void\n\n  // Events\n  onLoad?: (event: Event) => void\n  onError?: (event: Event) => void\n  onLoadStart?: () => void\n\n  // Performance\n  crossOrigin?: 'anonymous' | 'use-credentials'\n  decoding?: 'sync' | 'async' | 'auto'\n  fetchPriority?: 'high' | 'low' | 'auto'\n\n  // Accessibility\n  accessibilityLabel?: string\n  accessibilityRole?: string\n\n  // Advanced\n  blur?: number | Signal<number>\n  opacity?: number | Signal<number>\n  grayscale?: boolean | Signal<boolean>\n  sepia?: boolean | Signal<boolean>\n\n  // Progressive loading\n  lowQualitySrc?: string // Low quality placeholder for progressive loading\n  highQualitySrc?: string // High quality version\n}\n\n/**\n * Enhanced Image component class with element override support and CSS classes\n */\nexport class EnhancedImage extends ComponentWithCSSClasses implements ComponentInstance<ImageProps>, Concatenatable<ImageProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n  private effectiveTag: string\n  private validationResult: any\n\n  // Reactive state for loading\n  private loadingStateSignal: () => ImageLoadingState\n  private setLoadingState: (state: ImageLoadingState) => void\n\n  /**\n   * Set loading state and notify callback\n   */\n  private setLoadingStateWithCallback(state: ImageLoadingState): void {\n    this.setLoadingState(state)\n\n    if (this.props.onLoadingStateChange) {\n      this.props.onLoadingStateChange(state)\n    }\n  }\n\n  constructor(public props: ImageProps) {\n    super()\n    this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n    \n    // Process element override for tag specification enhancement\n    // Note: Image components overriding to non-img tags may break functionality\n    const override = processElementOverride('Image', 'img', this.props.element)\n    this.effectiveTag = override.tag\n    this.validationResult = override.validation\n\n    // Create loading state signal\n    const initialState: ImageLoadingState = this.props.src ? 'idle' : 'error'\n    const [loadingStateSignal, setLoadingState] = createSignal<ImageLoadingState>(initialState)\n    this.loadingStateSignal = loadingStateSignal\n    this.setLoadingState = setLoadingState\n\n    // ENHANCED: Set up lifecycle hooks for reliable DOM access\n    useLifecycle(this, {\n      onDOMReady: (_elements, primaryElement) => {\n        // Set up ImageAsset reactivity when DOM is ready\n        if (this.props.src instanceof ImageAsset && primaryElement instanceof HTMLImageElement) {\n          this.setupImageAssetReactivityForDOMElement(this.props.src, primaryElement)\n        }\n      }\n    })\n    \n    // Register this component for lifecycle processing\n    registerComponentWithLifecycleHooks(this)\n  }\n\n\n\n\n\n\n\n\n\n  /**\n   * Render the image component with reactive content handling\n   */\n  render() {\n\n    // Use reactive loading state\n    const loadingState = this.loadingStateSignal()\n\n    // Handle different loading states\n    if (loadingState === 'loading' && this.props.placeholder) {\n      if (typeof this.props.placeholder === 'string') {\n        // Show placeholder image\n        const placeholderElement = h('img', {\n          class: 'tachui-image-placeholder',\n          src: this.props.placeholder,\n          alt: 'Loading...',\n        })\n        return [placeholderElement]\n      } else if (this.props.placeholder && typeof this.props.placeholder === 'object') {\n        // Show placeholder component\n        return this.props.placeholder.render()\n      }\n    }\n\n    if (loadingState === 'error' && this.props.errorPlaceholder) {\n      if (typeof this.props.errorPlaceholder === 'string') {\n        const errorElement = h('img', {\n          class: 'tachui-image-error',\n          src: this.props.errorPlaceholder,\n          alt: 'Error loading image',\n        })\n        return [errorElement]\n      } else if (this.props.errorPlaceholder && typeof this.props.errorPlaceholder === 'object') {\n        return this.props.errorPlaceholder.render()\n      }\n    }\n\n    // Resolve ImageAsset to initial src value, reactive updates handled separately\n    const initialSrc = this.props.src instanceof ImageAsset\n      ? this.props.src.resolve()\n      : this.props.src\n\n    // Process CSS classes for this component\n    const baseClasses = ['tachui-image']\n    const classString = this.createClassString(this.props, baseClasses)\n    \n    // Create main image element - pass reactive props directly to DOM renderer\n    const element = h(this.effectiveTag, {\n      className: classString,\n      src: initialSrc, // Pass resolved src for initial render\n      alt: this.props.alt, // Pass reactive alt directly\n      loading: this.props.loadingStrategy || 'lazy',\n      crossorigin: this.props.crossOrigin,\n      decoding: this.props.decoding || 'async',\n      fetchpriority: this.props.fetchPriority,\n    })\n\n    // Add component metadata for semantic role processing\n    ;(element as any).componentMetadata = {\n      id: this.id,\n      type: 'Image',\n      originalType: 'Image',\n      overriddenTo: this.effectiveTag !== 'img' ? this.effectiveTag : undefined,\n      validationResult: this.validationResult\n    }\n\n    return [element]\n  }\n\n  /**\n   * Set up ImageAsset reactivity for a real DOM element (called from onDOMReady)\n   */\n  private setupImageAssetReactivityForDOMElement(imageAsset: ImageAsset, domElement: HTMLImageElement): void {\n    // Create the reactive effect that watches for theme changes\n    // ImageAsset.resolve() now internally calls getThemeSignal() which establishes the reactive dependency\n    const effect = createEffect(() => {\n      const resolvedSrc = imageAsset.resolve() // This will track the theme signal reactively\n\n      // Direct DOM element access - no need for fallbacks since we have the real element\n      domElement.src = resolvedSrc\n      this.setLoadingStateWithCallback('loading')\n    })\n\n    // Add cleanup\n    this.cleanup.push(() => effect.dispose())\n  }\n\n  // ============================================================================\n  // Concatenation Support (Phase 3.1)\n  // ============================================================================\n\n  /**\n   * Concatenate this image with another concatenatable component\n   */\n  concat<U extends Concatenatable<any>>(other: U): ConcatenatedComponent<ImageProps | U> {\n    const thisSegment = this.toSegment()\n    const otherSegment = other.toSegment()\n    \n    const metadata: ConcatenationMetadata = {\n      totalSegments: other instanceof ConcatenatedComponent ? other.segments.length + 1 : 2,\n      accessibilityRole: other instanceof ConcatenatedComponent\n        ? this.mergeAccessibilityRoles('group', other.metadata.accessibilityRole)\n        : this.determineAccessibilityRole(other),\n      semanticStructure: 'inline' // Images are typically inline in concatenation\n    }\n    \n    return new ConcatenatedComponent([thisSegment, otherSegment], metadata)\n  }\n  \n  /**\n   * Convert this image to a segment for concatenation\n   */\n  toSegment(): ComponentSegment {\n    return {\n      id: this.id,\n      component: this,\n      modifiers: [], // Images don't typically have concatenation-specific modifiers\n      render: () => {\n        const rendered = this.render()\n        return Array.isArray(rendered) ? rendered[0] : rendered\n      }\n    }\n  }\n  \n  /**\n   * Check if this component supports concatenation\n   */\n  isConcatenatable(): boolean {\n    return true\n  }\n\n  /**\n   * Determine accessibility role for concatenation\n   */\n  private determineAccessibilityRole(other: Concatenatable): 'text' | 'group' | 'composite' {\n    const componentType = (other as any).constructor.name\n    \n    switch (componentType) {\n      case 'EnhancedText':\n        return 'group' // Image + Text = group\n      case 'EnhancedImage':\n        return 'group' // Image + Image = group  \n      case 'EnhancedButton':\n      case 'EnhancedLink':\n        return 'composite' // Image + Interactive = composite\n      default:\n        return 'composite'\n    }\n  }\n\n  /**\n   * Merge accessibility roles when combining components\n   */\n  private mergeAccessibilityRoles(\n    thisRole: 'text' | 'group' | 'composite',\n    existingRole: 'text' | 'group' | 'composite'\n  ): 'text' | 'group' | 'composite' {\n    // Images always contribute as 'group', so combining with anything results in group or higher\n    if (thisRole === 'composite' || existingRole === 'composite') return 'composite'\n    return 'group'\n  }\n}\n\n/**\n * Create enhanced Image component with modifier support\n */\nexport function Image(\n  src: string | Signal<string> | ImageAsset,\n  props: Omit<ImageProps, 'src'> = {}\n): ModifiableComponent<ImageProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<ImageProps>>\n} {\n  const imageProps: ImageProps = { ...props, src }\n  const component = new EnhancedImage(imageProps)\n  return withModifiers(component)\n}\n\n/**\n * Image loading states for external use\n */\nexport const ImageStates = {\n  idle: 'idle' as const,\n  loading: 'loading' as const,\n  loaded: 'loaded' as const,\n  error: 'error' as const,\n}\n\n/**\n * Image content modes for external use\n */\nexport const ImageContentModes = {\n  fit: 'fit' as const,\n  fill: 'fill' as const,\n  stretch: 'stretch' as const,\n  center: 'center' as const,\n  scaleDown: 'scaleDown' as const,\n}\n\n/**\n * Image utility functions\n */\nexport const ImageUtils = {\n  /**\n   * Create a responsive image with multiple sources\n   */\n  responsive(\n    sources: { src: string; width?: number; media?: string }[],\n    fallbackSrc: string,\n    props: Omit<ImageProps, 'src' | 'srcSet'> = {}\n  ): ModifiableComponent<ImageProps> & {\n    modifier: ModifierBuilder<ModifiableComponent<ImageProps>>\n  } {\n    const srcSet = sources\n      .map((source) => {\n        const parts = [source.src]\n        if (source.width) parts.push(`${source.width}w`)\n        return parts.join(' ')\n      })\n      .join(', ')\n\n    return Image(fallbackSrc, { ...props, srcSet })\n  },\n\n  /**\n   * Create an image with progressive loading\n   */\n  progressive(\n    lowQualitySrc: string,\n    highQualitySrc: string,\n    props: Omit<ImageProps, 'src' | 'lowQualitySrc' | 'highQualitySrc'> = {}\n  ): ModifiableComponent<ImageProps> & {\n    modifier: ModifierBuilder<ModifiableComponent<ImageProps>>\n  } {\n    return Image(lowQualitySrc, {\n      ...props,\n      lowQualitySrc,\n      highQualitySrc,\n    })\n  },\n\n  /**\n   * Create an image with loading placeholder\n   */\n  withPlaceholder(\n    src: string | Signal<string>,\n    placeholderSrc: string,\n    props: Omit<ImageProps, 'src' | 'placeholder'> = {}\n  ): ModifiableComponent<ImageProps> & {\n    modifier: ModifierBuilder<ModifiableComponent<ImageProps>>\n  } {\n    return Image(src, {\n      ...props,\n      placeholder: placeholderSrc,\n    })\n  },\n}\n"],"names":["EnhancedImage","ComponentWithCSSClasses","props","__publicField","override","processElementOverride","initialState","loadingStateSignal","setLoadingState","createSignal","useLifecycle","_elements","primaryElement","ImageAsset","registerComponentWithLifecycleHooks","state","loadingState","h","initialSrc","baseClasses","classString","element","imageAsset","domElement","effect","createEffect","resolvedSrc","other","thisSegment","otherSegment","metadata","ConcatenatedComponent","rendered","thisRole","existingRole","Image","src","imageProps","component","withModifiers","ImageStates","ImageContentModes","ImageUtils","sources","fallbackSrc","srcSet","source","parts","lowQualitySrc","highQualitySrc","placeholderSrc"],"mappings":"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"}