@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/dist/modifiers/responsive/css-generator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-generator.js","sources":["../../../src/modifiers/responsive/css-generator.ts"],"sourcesContent":["/**\n * Responsive CSS Generation Engine\n * \n * Generates optimized CSS media queries from responsive modifier configurations.\n * Supports mobile-first design patterns and advanced media query features.\n */\n\nimport {\n  BreakpointKey,\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  MediaQueryConfig,\n  GeneratedMediaQuery,\n  ResponsiveModifierResult,\n  isResponsiveValue\n} from './types'\nimport {\n  generateMediaQuery,\n  getCurrentBreakpointConfig,\n  getSortedBreakpoints\n} from './breakpoints'\n\n/**\n * CSS generation options\n */\nexport interface CSSGenerationOptions {\n  selector: string              // CSS selector for the element\n  generateMinified?: boolean    // Generate minified CSS\n  includeComments?: boolean     // Include helpful comments\n  optimizeOutput?: boolean      // Optimize and deduplicate CSS\n  mobileFirst?: boolean         // Use mobile-first approach (default: true)\n}\n\n/**\n * Main CSS generation class\n */\nexport class ResponsiveCSSGenerator {\n  private options: Required<CSSGenerationOptions>\n  \n  constructor(options: CSSGenerationOptions) {\n    this.options = {\n      generateMinified: false,\n      includeComments: true,\n      optimizeOutput: true,\n      mobileFirst: true,\n      ...options\n    }\n  }\n  \n  /**\n   * Generate complete responsive CSS from a style configuration\n   */\n  generateResponsiveCSS(config: ResponsiveStyleConfig): ResponsiveModifierResult {\n    const mediaQueries: GeneratedMediaQuery[] = []\n    const cssRules: string[] = []\n    const fallbackStyles: Record<string, string | number> = {}\n    let hasResponsiveStyles = false\n    \n    // Process each property in the configuration\n    for (const [property, value] of Object.entries(config)) {\n      if (isResponsiveValue(value)) {\n        hasResponsiveStyles = true\n        const result = this.generatePropertyMediaQueries(property, value)\n        mediaQueries.push(...result.mediaQueries)\n        \n        // Add base styles to fallback\n        if (result.baseStyles) {\n          Object.assign(fallbackStyles, result.baseStyles)\n        }\n      } else {\n        // Non-responsive property - add to fallback styles\n        fallbackStyles[this.toCSSPropertyName(property)] = this.formatCSSValue(property, value)\n      }\n    }\n    \n    // Generate CSS rules from media queries\n    cssRules.push(...this.generateCSSRules(mediaQueries, fallbackStyles))\n    \n    return {\n      cssRules,\n      mediaQueries,\n      fallbackStyles,\n      hasResponsiveStyles\n    }\n  }\n  \n  /**\n   * Generate media queries for a single property\n   */\n  private generatePropertyMediaQueries(\n    property: string, \n    value: Partial<Record<BreakpointKey, any>>\n  ): { mediaQueries: GeneratedMediaQuery[]; baseStyles?: Record<string, string | number> } {\n    const mediaQueries: GeneratedMediaQuery[] = []\n    const baseStyles: Record<string, string | number> = {}\n    const sortedBreakpoints = getSortedBreakpoints()\n    \n    for (const breakpoint of sortedBreakpoints) {\n      const breakpointValue = value[breakpoint]\n      if (breakpointValue === undefined) continue\n      \n      const cssProperty = this.toCSSPropertyName(property)\n      const cssValue = this.formatCSSValue(property, breakpointValue)\n      \n      if (breakpoint === 'base') {\n        // Base styles (no media query needed for mobile-first)\n        baseStyles[cssProperty] = cssValue\n      } else {\n        // Generate media query for this breakpoint\n        const query = generateMediaQuery(breakpoint)\n        const styles = { [cssProperty]: cssValue }\n        \n        mediaQueries.push({\n          breakpoint,\n          query,\n          styles,\n          selector: this.options.selector\n        })\n      }\n    }\n    \n    return { mediaQueries, baseStyles: Object.keys(baseStyles).length > 0 ? baseStyles : undefined }\n  }\n  \n  /**\n   * Generate CSS rules from media queries and base styles\n   */\n  private generateCSSRules(\n    mediaQueries: GeneratedMediaQuery[], \n    baseStyles: Record<string, string | number>\n  ): string[] {\n    const rules: string[] = []\n    \n    // Generate base styles rule (mobile-first)\n    if (Object.keys(baseStyles).length > 0) {\n      const baseRule = this.generateCSSRule(this.options.selector, baseStyles)\n      rules.push(baseRule)\n    }\n    \n    // Generate media query rules\n    const groupedQueries = this.groupQueriesByMediaQuery(mediaQueries)\n    \n    for (const [query, queryMediaQueries] of Object.entries(groupedQueries)) {\n      if (query === '') continue // Skip empty queries (base styles)\n      \n      // Combine all styles for this media query\n      const combinedStyles: Record<string, string | number> = {}\n      for (const mq of queryMediaQueries) {\n        Object.assign(combinedStyles, mq.styles)\n      }\n      \n      const mediaRule = this.generateMediaQueryRule(query, this.options.selector, combinedStyles)\n      rules.push(mediaRule)\n    }\n    \n    return rules\n  }\n  \n  /**\n   * Group media queries by their query string for optimization\n   */\n  private groupQueriesByMediaQuery(mediaQueries: GeneratedMediaQuery[]): Record<string, GeneratedMediaQuery[]> {\n    const grouped: Record<string, GeneratedMediaQuery[]> = {}\n    \n    for (const mq of mediaQueries) {\n      if (!grouped[mq.query]) {\n        grouped[mq.query] = []\n      }\n      grouped[mq.query].push(mq)\n    }\n    \n    return grouped\n  }\n  \n  /**\n   * Generate a single CSS rule\n   */\n  private generateCSSRule(selector: string, styles: Record<string, string | number>): string {\n    const { generateMinified, includeComments } = this.options\n    const indent = generateMinified ? '' : '  '\n    const newline = generateMinified ? '' : '\\n'\n    const space = generateMinified ? '' : ' '\n    \n    let rule = `${selector}${space}{${newline}`\n    \n    for (const [property, value] of Object.entries(styles)) {\n      rule += `${indent}${property}:${space}${value};${newline}`\n    }\n    \n    rule += `}${newline}`\n    \n    if (includeComments && !generateMinified) {\n      rule = `/* Base styles (mobile-first) */${newline}${rule}`\n    }\n    \n    return rule\n  }\n  \n  /**\n   * Generate a CSS media query rule\n   */\n  private generateMediaQueryRule(\n    query: string, \n    selector: string, \n    styles: Record<string, string | number>\n  ): string {\n    const { generateMinified, includeComments } = this.options\n    const indent = generateMinified ? '' : '  '\n    const doubleIndent = generateMinified ? '' : '    '\n    const newline = generateMinified ? '' : '\\n'\n    const space = generateMinified ? '' : ' '\n    \n    let rule = `@media ${query}${space}{${newline}`\n    rule += `${indent}${selector}${space}{${newline}`\n    \n    for (const [property, value] of Object.entries(styles)) {\n      rule += `${doubleIndent}${property}:${space}${value};${newline}`\n    }\n    \n    rule += `${indent}}${newline}`\n    rule += `}${newline}`\n    \n    if (includeComments && !generateMinified) {\n      const breakpoint = this.getBreakpointFromQuery(query)\n      rule = `/* ${breakpoint} styles */${newline}${rule}`\n    }\n    \n    return rule\n  }\n  \n  /**\n   * Convert camelCase property to CSS kebab-case\n   */\n  private toCSSProperty(property: string): string {\n    return property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n  }\n  \n  /**\n   * Format CSS value with appropriate units and validation\n   */\n  private formatCSSValue(property: string, value: any): string {\n    if (value === null || value === undefined) {\n      return 'inherit'\n    }\n    \n    // Handle numeric values that need units\n    if (typeof value === 'number') {\n      const unitlessProperties = [\n        'opacity', 'z-index', 'font-weight', 'line-height', \n        'flex-grow', 'flex-shrink', 'order', 'grid-column-start',\n        'grid-column-end', 'grid-row-start', 'grid-row-end'\n      ]\n      \n      const cssProperty = this.toCSSProperty(property)\n      if (unitlessProperties.includes(cssProperty)) {\n        return this.addImportantIfNeeded(property, value.toString())\n      }\n      \n      // Add px unit for dimension properties\n      const dimensionProperties = [\n        'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',\n        'padding', 'margin', 'border-width', 'border-radius', 'top', 'right', \n        'bottom', 'left', 'font-size', 'letter-spacing', 'text-indent'\n      ]\n      \n      if (dimensionProperties.some(prop => cssProperty.includes(prop))) {\n        return this.addImportantIfNeeded(property, `${value}px`)\n      }\n    }\n    \n    return this.addImportantIfNeeded(property, value.toString())\n  }\n\n  /**\n   * Add !important for properties that need to override base component styles\n   */\n  private addImportantIfNeeded(property: string, value: string): string {\n    const conflictingProperties = [\n      'flexDirection', 'flex-direction',\n      'justifyContent', 'justify-content', \n      'alignItems', 'align-items',\n      'display'\n    ]\n    \n    const cssProperty = this.toCSSProperty(property)\n    if (conflictingProperties.includes(property) || conflictingProperties.includes(cssProperty)) {\n      return `${value} !important`\n    }\n    \n    return value\n  }\n\n  /**\n   * Convert property name to appropriate CSS property (including custom properties)\n   */\n  private toCSSPropertyName(property: string): string {\n    return this.toCSSProperty(property)\n  }\n  \n  /**\n   * Extract breakpoint name from media query for comments\n   */\n  private getBreakpointFromQuery(query: string): string {\n    const breakpointConfig = getCurrentBreakpointConfig()\n    \n    for (const [breakpoint, value] of Object.entries(breakpointConfig)) {\n      if (query.includes(value)) {\n        return breakpoint\n      }\n    }\n    \n    return 'custom'\n  }\n}\n\n/**\n * Utility function to generate responsive CSS for a single property\n */\nexport function generateResponsiveProperty(\n  selector: string,\n  property: string,\n  value: ResponsiveValue<any>,\n  options?: Partial<CSSGenerationOptions>\n): string[] {\n  if (!isResponsiveValue(value)) {\n    // Non-responsive value - return simple CSS rule\n    const cssProperty = property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n    const cssValue = typeof value === 'number' ? `${value}px` : value.toString()\n    return [`${selector} { ${cssProperty}: ${cssValue}; }`]\n  }\n  \n  const generator = new ResponsiveCSSGenerator({ selector, ...options })\n  const config = { [property]: value }\n  const result = generator.generateResponsiveCSS(config)\n  \n  return result.cssRules\n}\n\n/**\n * Utility function to generate media query for custom conditions\n */\nexport function generateCustomMediaQuery(\n  selector: string,\n  mediaQueryConfig: MediaQueryConfig,\n  options?: Partial<CSSGenerationOptions>\n): string {\n  const { generateMinified = false } = options || {}\n  const indent = generateMinified ? '' : '  '\n  const newline = generateMinified ? '' : '\\n'\n  const space = generateMinified ? '' : ' '\n  \n  let rule = `@media ${mediaQueryConfig.query}${space}{${newline}`\n  rule += `${indent}${selector}${space}{${newline}`\n  \n  for (const [property, value] of Object.entries(mediaQueryConfig.styles)) {\n    const cssProperty = property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n    const cssValue = typeof value === 'number' ? `${value}px` : value.toString()\n    rule += `${indent}${indent}${cssProperty}:${space}${cssValue};${newline}`\n  }\n  \n  rule += `${indent}}${newline}`\n  rule += `}${newline}`\n  \n  return rule\n}\n\n/**\n * CSS injection utilities for runtime application\n */\nexport class CSSInjector {\n  private static styleSheet: CSSStyleSheet | null = null\n  private static injectedRules = new Set<string>()\n  \n  /**\n   * Get or create the tachUI responsive stylesheet\n   */\n  private static getStyleSheet(): CSSStyleSheet {\n    if (this.styleSheet) {\n      return this.styleSheet\n    }\n    \n    const style = document.createElement('style')\n    style.setAttribute('data-tachui-responsive', 'true')\n    document.head.appendChild(style)\n    \n    this.styleSheet = style.sheet as CSSStyleSheet\n    return this.styleSheet\n  }\n\n  /**\n   * Inject CSS rules into the document\n   */\n  static injectCSS(rules: string[]): void {\n    if (typeof document === 'undefined') {\n      return // Skip on server-side\n    }\n    \n    const styleSheet = this.getStyleSheet()\n    \n    for (const rule of rules) {\n      if (this.injectedRules.has(rule)) {\n        continue // Skip duplicate rules\n      }\n      \n      try {\n        styleSheet.insertRule(rule, styleSheet.cssRules.length)\n        this.injectedRules.add(rule)\n      } catch (error) {\n        console.warn('Failed to inject CSS rule:', rule, error)\n      }\n    }\n  }\n  \n  /**\n   * Clear all injected responsive CSS\n   */\n  static clearCSS(): void {\n    if (this.styleSheet) {\n      while (this.styleSheet.cssRules.length > 0) {\n        this.styleSheet.deleteRule(0)\n      }\n      this.injectedRules.clear()\n    }\n  }\n  \n  /**\n   * Check if a rule has been injected\n   */\n  static hasRule(rule: string): boolean {\n    return this.injectedRules.has(rule)\n  }\n}"],"names":["ResponsiveCSSGenerator","options","__publicField","config","mediaQueries","cssRules","fallbackStyles","hasResponsiveStyles","property","value","isResponsiveValue","result","baseStyles","sortedBreakpoints","getSortedBreakpoints","breakpoint","breakpointValue","cssProperty","cssValue","query","generateMediaQuery","styles","rules","baseRule","groupedQueries","queryMediaQueries","combinedStyles","mq","mediaRule","grouped","selector","generateMinified","includeComments","indent","newline","space","rule","doubleIndent","match","unitlessProperties","prop","conflictingProperties","breakpointConfig","getCurrentBreakpointConfig","generateResponsiveProperty","generator","generateCustomMediaQuery","mediaQueryConfig","CSSInjector","style","styleSheet","error"],"mappings":";;;AAoCO,MAAMA,EAAuB;AAAA,EAGlC,YAAYC,GAA+B;AAF3C,IAAAC,EAAA,MAAQ,SAAA,GAGN,KAAK,UAAU;AAAA,MACb,kBAAkB;AAAA,MAClB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,GAAGD;AAAA,IAAA;AAAA,EAEP;AAAA;AAAA;AAAA;AAAA,EAKA,sBAAsBE,GAAyD;AAC7E,UAAMC,IAAsC,CAAA,GACtCC,IAAqB,CAAA,GACrBC,IAAkD,CAAA;AACxD,QAAIC,IAAsB;AAG1B,eAAW,CAACC,GAAUC,CAAK,KAAK,OAAO,QAAQN,CAAM;AACnD,UAAIO,EAAkBD,CAAK,GAAG;AAC5B,QAAAF,IAAsB;AACtB,cAAMI,IAAS,KAAK,6BAA6BH,GAAUC,CAAK;AAChE,QAAAL,EAAa,KAAK,GAAGO,EAAO,YAAY,GAGpCA,EAAO,cACT,OAAO,OAAOL,GAAgBK,EAAO,UAAU;AAAA,MAEnD;AAEE,QAAAL,EAAe,KAAK,kBAAkBE,CAAQ,CAAC,IAAI,KAAK,eAAeA,GAAUC,CAAK;AAK1F,WAAAJ,EAAS,KAAK,GAAG,KAAK,iBAAiBD,GAAcE,CAAc,CAAC,GAE7D;AAAA,MACL,UAAAD;AAAA,MACA,cAAAD;AAAA,MACA,gBAAAE;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA;AAAA,EAKQ,6BACNC,GACAC,GACuF;AACvF,UAAML,IAAsC,CAAA,GACtCQ,IAA8C,CAAA,GAC9CC,IAAoBC,EAAA;AAE1B,eAAWC,KAAcF,GAAmB;AAC1C,YAAMG,IAAkBP,EAAMM,CAAU;AACxC,UAAIC,MAAoB,OAAW;AAEnC,YAAMC,IAAc,KAAK,kBAAkBT,CAAQ,GAC7CU,IAAW,KAAK,eAAeV,GAAUQ,CAAe;AAE9D,UAAID,MAAe;AAEjB,QAAAH,EAAWK,CAAW,IAAIC;AAAA,WACrB;AAEL,cAAMC,IAAQC,EAAmBL,CAAU,GACrCM,IAAS,EAAE,CAACJ,CAAW,GAAGC,EAAA;AAEhC,QAAAd,EAAa,KAAK;AAAA,UAChB,YAAAW;AAAA,UACA,OAAAI;AAAA,UACA,QAAAE;AAAA,UACA,UAAU,KAAK,QAAQ;AAAA,QAAA,CACxB;AAAA,MACH;AAAA,IACF;AAEA,WAAO,EAAE,cAAAjB,GAAc,YAAY,OAAO,KAAKQ,CAAU,EAAE,SAAS,IAAIA,IAAa,OAAA;AAAA,EACvF;AAAA;AAAA;AAAA;AAAA,EAKQ,iBACNR,GACAQ,GACU;AACV,UAAMU,IAAkB,CAAA;AAGxB,QAAI,OAAO,KAAKV,CAAU,EAAE,SAAS,GAAG;AACtC,YAAMW,IAAW,KAAK,gBAAgB,KAAK,QAAQ,UAAUX,CAAU;AACvE,MAAAU,EAAM,KAAKC,CAAQ;AAAA,IACrB;AAGA,UAAMC,IAAiB,KAAK,yBAAyBpB,CAAY;AAEjE,eAAW,CAACe,GAAOM,CAAiB,KAAK,OAAO,QAAQD,CAAc,GAAG;AACvE,UAAIL,MAAU,GAAI;AAGlB,YAAMO,IAAkD,CAAA;AACxD,iBAAWC,KAAMF;AACf,eAAO,OAAOC,GAAgBC,EAAG,MAAM;AAGzC,YAAMC,IAAY,KAAK,uBAAuBT,GAAO,KAAK,QAAQ,UAAUO,CAAc;AAC1F,MAAAJ,EAAM,KAAKM,CAAS;AAAA,IACtB;AAEA,WAAON;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKQ,yBAAyBlB,GAA4E;AAC3G,UAAMyB,IAAiD,CAAA;AAEvD,eAAWF,KAAMvB;AACf,MAAKyB,EAAQF,EAAG,KAAK,MACnBE,EAAQF,EAAG,KAAK,IAAI,CAAA,IAEtBE,EAAQF,EAAG,KAAK,EAAE,KAAKA,CAAE;AAG3B,WAAOE;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKQ,gBAAgBC,GAAkBT,GAAiD;AACzF,UAAM,EAAE,kBAAAU,GAAkB,iBAAAC,EAAA,IAAoB,KAAK,SAC7CC,IAASF,IAAmB,KAAK,MACjCG,IAAUH,IAAmB,KAAK;AAAA,GAClCI,IAAQJ,IAAmB,KAAK;AAEtC,QAAIK,IAAO,GAAGN,CAAQ,GAAGK,CAAK,IAAID,CAAO;AAEzC,eAAW,CAAC1B,GAAUC,CAAK,KAAK,OAAO,QAAQY,CAAM;AACnD,MAAAe,KAAQ,GAAGH,CAAM,GAAGzB,CAAQ,IAAI2B,CAAK,GAAG1B,CAAK,IAAIyB,CAAO;AAG1D,WAAAE,KAAQ,IAAIF,CAAO,IAEfF,KAAmB,CAACD,MACtBK,IAAO,mCAAmCF,CAAO,GAAGE,CAAI,KAGnDA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKQ,uBACNjB,GACAW,GACAT,GACQ;AACR,UAAM,EAAE,kBAAAU,GAAkB,iBAAAC,EAAA,IAAoB,KAAK,SAC7CC,IAASF,IAAmB,KAAK,MACjCM,IAAeN,IAAmB,KAAK,QACvCG,IAAUH,IAAmB,KAAK;AAAA,GAClCI,IAAQJ,IAAmB,KAAK;AAEtC,QAAIK,IAAO,UAAUjB,CAAK,GAAGgB,CAAK,IAAID,CAAO;AAC7C,IAAAE,KAAQ,GAAGH,CAAM,GAAGH,CAAQ,GAAGK,CAAK,IAAID,CAAO;AAE/C,eAAW,CAAC1B,GAAUC,CAAK,KAAK,OAAO,QAAQY,CAAM;AACnD,MAAAe,KAAQ,GAAGC,CAAY,GAAG7B,CAAQ,IAAI2B,CAAK,GAAG1B,CAAK,IAAIyB,CAAO;AAGhE,WAAAE,KAAQ,GAAGH,CAAM,IAAIC,CAAO,IAC5BE,KAAQ,IAAIF,CAAO,IAEfF,KAAmB,CAACD,MAEtBK,IAAO,MADY,KAAK,uBAAuBjB,CAAK,CAC7B,aAAae,CAAO,GAAGE,CAAI,KAG7CA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKQ,cAAc5B,GAA0B;AAC9C,WAAOA,EAAS,QAAQ,UAAU,CAAA8B,MAAS,IAAIA,EAAM,YAAA,CAAa,EAAE;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA,EAKQ,eAAe9B,GAAkBC,GAAoB;AAC3D,QAAIA,KAAU;AACZ,aAAO;AAIT,QAAI,OAAOA,KAAU,UAAU;AAC7B,YAAM8B,IAAqB;AAAA,QACzB;AAAA,QAAW;AAAA,QAAW;AAAA,QAAe;AAAA,QACrC;AAAA,QAAa;AAAA,QAAe;AAAA,QAAS;AAAA,QACrC;AAAA,QAAmB;AAAA,QAAkB;AAAA,MAAA,GAGjCtB,IAAc,KAAK,cAAcT,CAAQ;AAC/C,UAAI+B,EAAmB,SAAStB,CAAW;AACzC,eAAO,KAAK,qBAAqBT,GAAUC,EAAM,UAAU;AAU7D,UAN4B;AAAA,QAC1B;AAAA,QAAS;AAAA,QAAU;AAAA,QAAa;AAAA,QAAa;AAAA,QAAc;AAAA,QAC3D;AAAA,QAAW;AAAA,QAAU;AAAA,QAAgB;AAAA,QAAiB;AAAA,QAAO;AAAA,QAC7D;AAAA,QAAU;AAAA,QAAQ;AAAA,QAAa;AAAA,QAAkB;AAAA,MAAA,EAG3B,KAAK,CAAA+B,MAAQvB,EAAY,SAASuB,CAAI,CAAC;AAC7D,eAAO,KAAK,qBAAqBhC,GAAU,GAAGC,CAAK,IAAI;AAAA,IAE3D;AAEA,WAAO,KAAK,qBAAqBD,GAAUC,EAAM,UAAU;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKQ,qBAAqBD,GAAkBC,GAAuB;AACpE,UAAMgC,IAAwB;AAAA,MAC5B;AAAA,MAAiB;AAAA,MACjB;AAAA,MAAkB;AAAA,MAClB;AAAA,MAAc;AAAA,MACd;AAAA,IAAA,GAGIxB,IAAc,KAAK,cAAcT,CAAQ;AAC/C,WAAIiC,EAAsB,SAASjC,CAAQ,KAAKiC,EAAsB,SAASxB,CAAW,IACjF,GAAGR,CAAK,gBAGVA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKQ,kBAAkBD,GAA0B;AAClD,WAAO,KAAK,cAAcA,CAAQ;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKQ,uBAAuBW,GAAuB;AACpD,UAAMuB,IAAmBC,EAAA;AAEzB,eAAW,CAAC5B,GAAYN,CAAK,KAAK,OAAO,QAAQiC,CAAgB;AAC/D,UAAIvB,EAAM,SAASV,CAAK;AACtB,eAAOM;AAIX,WAAO;AAAA,EACT;AACF;AAKO,SAAS6B,EACdd,GACAtB,GACAC,GACAR,GACU;AACV,MAAI,CAACS,EAAkBD,CAAK,GAAG;AAE7B,UAAMQ,IAAcT,EAAS,QAAQ,UAAU,OAAS,IAAI8B,EAAM,YAAA,CAAa,EAAE,GAC3EpB,IAAW,OAAOT,KAAU,WAAW,GAAGA,CAAK,OAAOA,EAAM,SAAA;AAClE,WAAO,CAAC,GAAGqB,CAAQ,MAAMb,CAAW,KAAKC,CAAQ,KAAK;AAAA,EACxD;AAEA,QAAM2B,IAAY,IAAI7C,EAAuB,EAAE,UAAA8B,GAAU,GAAG7B,GAAS,GAC/DE,IAAS,EAAE,CAACK,CAAQ,GAAGC,EAAA;AAG7B,SAFeoC,EAAU,sBAAsB1C,CAAM,EAEvC;AAChB;AAKO,SAAS2C,EACdhB,GACAiB,GACA9C,GACQ;AACR,QAAM,EAAE,kBAAA8B,IAAmB,GAAA,IAAU9B,KAAW,CAAA,GAC1CgC,IAASF,IAAmB,KAAK,MACjCG,IAAUH,IAAmB,KAAK;AAAA,GAClCI,IAAQJ,IAAmB,KAAK;AAEtC,MAAIK,IAAO,UAAUW,EAAiB,KAAK,GAAGZ,CAAK,IAAID,CAAO;AAC9D,EAAAE,KAAQ,GAAGH,CAAM,GAAGH,CAAQ,GAAGK,CAAK,IAAID,CAAO;AAE/C,aAAW,CAAC1B,GAAUC,CAAK,KAAK,OAAO,QAAQsC,EAAiB,MAAM,GAAG;AACvE,UAAM9B,IAAcT,EAAS,QAAQ,UAAU,OAAS,IAAI8B,EAAM,YAAA,CAAa,EAAE,GAC3EpB,IAAW,OAAOT,KAAU,WAAW,GAAGA,CAAK,OAAOA,EAAM,SAAA;AAClE,IAAA2B,KAAQ,GAAGH,CAAM,GAAGA,CAAM,GAAGhB,CAAW,IAAIkB,CAAK,GAAGjB,CAAQ,IAAIgB,CAAO;AAAA,EACzE;AAEA,SAAAE,KAAQ,GAAGH,CAAM,IAAIC,CAAO,IAC5BE,KAAQ,IAAIF,CAAO,IAEZE;AACT;AAKO,MAAMY,EAAY;AAAA;AAAA;AAAA;AAAA,EAOvB,OAAe,gBAA+B;AAC5C,QAAI,KAAK;AACP,aAAO,KAAK;AAGd,UAAMC,IAAQ,SAAS,cAAc,OAAO;AAC5C,WAAAA,EAAM,aAAa,0BAA0B,MAAM,GACnD,SAAS,KAAK,YAAYA,CAAK,GAE/B,KAAK,aAAaA,EAAM,OACjB,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,UAAU3B,GAAuB;AACtC,QAAI,OAAO,WAAa;AACtB;AAGF,UAAM4B,IAAa,KAAK,cAAA;AAExB,eAAWd,KAAQd;AACjB,UAAI,MAAK,cAAc,IAAIc,CAAI;AAI/B,YAAI;AACF,UAAAc,EAAW,WAAWd,GAAMc,EAAW,SAAS,MAAM,GACtD,KAAK,cAAc,IAAId,CAAI;AAAA,QAC7B,SAASe,GAAO;AACd,kBAAQ,KAAK,8BAA8Bf,GAAMe,CAAK;AAAA,QACxD;AAAA,EAEJ;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,WAAiB;AACtB,QAAI,KAAK,YAAY;AACnB,aAAO,KAAK,WAAW,SAAS,SAAS;AACvC,aAAK,WAAW,WAAW,CAAC;AAE9B,WAAK,cAAc,MAAA;AAAA,IACrB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,QAAQf,GAAuB;AACpC,WAAO,KAAK,cAAc,IAAIA,CAAI;AAAA,EACpC;AACF;AA7DElC,EADW8C,GACI,cAAmC,IAAA;AAClD9C,EAFW8C,GAEI,iBAAgB,oBAAI,KAAY;"}

package/dist/modifiers/responsive/dev-tools.cjs

@@ -1,77 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../reactive/cleanup.cjs");const x=require("../../reactive/computed.cjs");require("../../reactive/unified-scheduler.cjs");require("../../reactive/signal.cjs");require("../../reactive/scheduler.cjs");require("../../reactive/theme.cjs");const v=require("./types.cjs"),p=require("./breakpoints.cjs"),h=require("./performance.cjs"),d=require("./utilities.cjs");var w=Object.defineProperty,S=(c,e,t)=>e in c?w(c,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[e]=t,f=(c,e,t)=>S(c,typeof e!="symbol"?e+"":e,t);class u{static enable(e={}){if(process.env.NODE_ENV==="production"){console.warn("ResponsiveDevTools: Not enabling in production mode");return}this.isEnabled=!0,this.logLevel=e.logLevel||"info",this.log("info","ResponsiveDevTools: Enabled"),e.showOverlay&&this.createDebugOverlay(e),e.highlightResponsiveElements&&this.enableElementHighlighting(),e.showPerformance&&this.enablePerformanceMonitoring(),this.logResponsiveState()}static disable(){this.isEnabled=!1,this.debugOverlay&&(this.debugOverlay.remove(),this.debugOverlay=null),this.disableElementHighlighting(),this.log("info","ResponsiveDevTools: Disabled")}static get enabled(){return this.isEnabled&&process.env.NODE_ENV!=="production"}static log(e,...t){if(!this.enabled)return;const i=["error","warn","info","debug"],o=i.indexOf(this.logLevel);i.indexOf(e)<=o&&console[e]("[ResponsiveDevTools]",...t)}static createDebugOverlay(e){if(typeof document>"u")return;const t=e.position||"top-right";this.debugOverlay=document.createElement("div"),this.debugOverlay.id="tachui-responsive-debug",this.debugOverlay.style.cssText=`
-      position: fixed;
-      ${t.includes("top")?"top: 10px":"bottom: 10px"};
-      ${t.includes("right")?"right: 10px":"left: 10px"};
-      background: rgba(0, 0, 0, 0.9);
-      color: white;
-      padding: 12px;
-      border-radius: 8px;
-      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-      font-size: 12px;
-      z-index: 10000;
-      pointer-events: auto;
-      cursor: pointer;
-      max-width: 300px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    `;const i=document.createElement("div");i.textContent="×",i.style.cssText=`
-      position: absolute;
-      top: 4px;
-      right: 8px;
-      cursor: pointer;
-      font-size: 16px;
-      color: #ff6b6b;
-    `,i.onclick=()=>this.disable(),this.debugOverlay.appendChild(i),document.body.appendChild(this.debugOverlay),this.updateDebugOverlay(e);let o;window.addEventListener("resize",()=>{clearTimeout(o),o=window.setTimeout(()=>{this.updateDebugOverlay(e)},100)})}static updateDebugOverlay(e){if(!this.debugOverlay)return;const t=p.createBreakpointContext(),i=p.getCurrentBreakpointConfig();let o=`
-      <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
-        📱 Responsive Debug
-      </div>
-    `;if(o+=`
-      <div style="margin-bottom: 6px;">
-        <strong>Current:</strong> <span style="color: #66bb6a;">${t.current}</span>
-      </div>
-      <div style="margin-bottom: 6px;">
-        <strong>Size:</strong> ${t.width}×${t.height}
-      </div>
-    `,e.showBreakpoints){o+='<div style="margin: 8px 0; font-weight: bold; color: #ffb74d;">Breakpoints:</div>';for(const[s,a]of Object.entries(i)){const n=s===t.current;o+=`
-          <div style="color: ${n?"#66bb6a":"#999"}; margin-bottom: 2px;">
-            ${n?"▶":"▷"} ${s}: ${a}
-          </div>
-        `}}if(e.showPerformance){const s=h.ResponsivePerformanceMonitor.getStats(),a=h.cssRuleCache.getStats();if(o+='<div style="margin: 8px 0; font-weight: bold; color: #f06292;">Performance:</div>',o+=`
-        <div style="margin-bottom: 2px;">
-          Cache: ${a.size} rules (${(a.hitRate*100).toFixed(1)}% hit rate)
-        </div>
-      `,Object.keys(s).length>0)for(const[n,l]of Object.entries(s))o+=`
-            <div style="margin-bottom: 2px;">
-              ${n}: ${l.average.toFixed(2)}ms avg
-            </div>
-          `}o+='<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';const r={Touch:d.MediaQueries.touchDevice,Dark:d.MediaQueries.darkMode,"Reduced Motion":d.MediaQueries.reducedMotion,"High Contrast":d.MediaQueries.highContrast};for(const[s,a]of Object.entries(r)){const n=window.matchMedia(a).matches;o+=`
-        <div style="color: ${n?"#66bb6a":"#666"}; margin-bottom: 2px;">
-          ${n?"✓":"✗"} ${s}
-        </div>
-      `}this.debugOverlay.innerHTML=o+this.debugOverlay.querySelector("div:last-child")?.outerHTML||""}static enableElementHighlighting(){if(typeof document>"u")return;const e=document.createElement("style");e.id="tachui-responsive-highlight",e.textContent=`
-      .tachui-responsive-element {
-        outline: 2px dashed #4fc3f7 !important;
-        outline-offset: 2px !important;
-        position: relative !important;
-      }
-
-      .tachui-responsive-element::before {
-        content: 'R';
-        position: absolute !important;
-        top: -8px !important;
-        right: -8px !important;
-        background: #4fc3f7 !important;
-        color: white !important;
-        width: 16px !important;
-        height: 16px !important;
-        border-radius: 50% !important;
-        font-size: 10px !important;
-        font-weight: bold !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        z-index: 10001 !important;
-        font-family: monospace !important;
-      }
-    `,document.head.appendChild(e),new MutationObserver(()=>{this.highlightResponsiveElements()}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),this.highlightResponsiveElements()}static disableElementHighlighting(){if(typeof document>"u")return;const e=document.getElementById("tachui-responsive-highlight");e&&e.remove(),document.querySelectorAll(".tachui-responsive-element").forEach(t=>{t.classList.remove("tachui-responsive-element")})}static highlightResponsiveElements(){if(typeof document>"u")return;['[class*="tachui-responsive-"]','[class*="tachui-mq-"]'].forEach(t=>{document.querySelectorAll(t).forEach(i=>{i.classList.contains("tachui-responsive-element")||i.classList.add("tachui-responsive-element")})})}static enablePerformanceMonitoring(){setInterval(()=>{if(!this.enabled)return;const e=h.ResponsivePerformanceMonitor.getStats(),t=h.cssRuleCache.getStats();this.log("debug","Performance Stats:",{cache:t,performance:e})},5e3)}static logResponsiveState(){if(!this.enabled)return;const e=p.createBreakpointContext(),t=p.getCurrentBreakpointConfig();if(console.group("🔍 TachUI Responsive State"),console.log("Current breakpoint:",e.current),console.log("Viewport:",`${e.width}×${e.height}`),console.log("Configuration:",t),typeof window<"u"&&window.matchMedia){const i={Mobile:d.MediaQueries.mobile,Tablet:d.MediaQueries.tablet,Desktop:d.MediaQueries.desktop,"Touch Device":d.MediaQueries.touchDevice,"Dark Mode":d.MediaQueries.darkMode,"Reduced Motion":d.MediaQueries.reducedMotion};console.log("Media Query Results:");for(const[o,r]of Object.entries(i))try{console.log(`  ${o}: ${window.matchMedia(r).matches}`)}catch{console.log(`  ${o}: Error testing query`)}}console.groupEnd()}static inspectResponsiveValue(e,t){if(!this.enabled)return;const i=p.getCurrentBreakpoint();if(console.group(`🔍 Responsive Value${t?` - ${t}`:""}`),v.isResponsiveValue(e)){const o=e;console.log("Responsive object:",o);const r=["base","sm","md","lg","xl","2xl"],s=r.indexOf(i());let a;for(let n=s;n>=0;n--){const l=r[n];if(o[l]!==void 0){a=o[l],console.log(`Resolved value (${l}):`,a);break}}console.log("Defined breakpoints:");for(const[n,l]of Object.entries(o))if(l!==void 0){const g=n===i();console.log(`  ${g?"→":" "} ${n}:`,l)}}else console.log("Static value:",e);console.groupEnd()}static testResponsiveBehavior(e,t=["base","sm","md","lg","xl","2xl"]){if(!this.enabled)return{};const i={};return t.forEach(o=>{this.log("debug",`Testing breakpoint ${o}:`,e)}),i}static exportConfiguration(){const e=p.createBreakpointContext(),t=p.getCurrentBreakpointConfig(),i=h.ResponsivePerformanceMonitor.getStats(),o=h.cssRuleCache.getStats(),r={};if(typeof window<"u"&&window.matchMedia){for(const[s,a]of Object.entries(d.MediaQueries))if(typeof a=="string")try{r[s]=window.matchMedia(a).matches}catch{r[s]=!1}}return{breakpoints:t,currentContext:e,performance:{cache:o,timings:i},mediaQueries:r}}}f(u,"isEnabled",!1);f(u,"debugOverlay",null);f(u,"logLevel","info");function b(c,e){const t=p.getCurrentBreakpoint();return x.createComputed(()=>{const i=t(),o=v.isResponsiveValue(c);let r,s={};if(o){const a=c;s=a;const n=["base","sm","md","lg","xl","2xl"],l=n.indexOf(i);for(let g=l;g>=0;g--){const m=n[g];if(a[m]!==void 0){r=a[m];break}}}else r=c,s={[i]:r};return u.enabled&&e&&u.inspectResponsiveValue(c,e),{resolvedValue:r,activeBreakpoint:i,allValues:s,isResponsive:o}})}class y{static testCSSFeatures(){if(typeof window>"u"||typeof CSS>"u"||!CSS.supports)return{};const e={};try{e.cssGrid=CSS.supports("display","grid"),e.flexbox=CSS.supports("display","flex"),e.customProperties=CSS.supports("--test","value"),e.viewportUnits=CSS.supports("width","100vw"),e.mediaQueries=typeof window.matchMedia=="function",e.containerQueries=CSS.supports("container-type","inline-size"),e.logicalProperties=CSS.supports("margin-inline-start","1rem")}catch{}return e}static testViewportSizes(e){if(typeof window>"u")return;const t=[{width:320,height:568,name:"iPhone SE"},{width:375,height:667,name:"iPhone 8"},{width:768,height:1024,name:"iPad Portrait"},{width:1024,height:768,name:"iPad Landscape"},{width:1280,height:720,name:"Desktop Small"},{width:1920,height:1080,name:"Desktop Large"}];u.enabled&&u.log("info","Testing viewport sizes:",t),t.forEach(i=>{e(i.width,i.height)})}}typeof window<"u"&&process.env.NODE_ENV!=="production"&&(window.tachUIResponsive={devTools:u,inspector:b,compatibility:y,logState:()=>u.logResponsiveState(),export:()=>u.exportConfiguration()});exports.BrowserCompatibility=y;exports.ResponsiveDevTools=u;exports.useResponsiveInspector=b;
-//# sourceMappingURL=dev-tools.cjs.map

package/dist/modifiers/responsive/dev-tools.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"dev-tools.cjs","sources":["../../../src/modifiers/responsive/dev-tools.ts"],"sourcesContent":["/**\n * Responsive Development Tools and Debugging Features\n *\n * Provides comprehensive debugging, inspection, and development tools\n * for the responsive design system.\n */\n\nimport { createComputed, Signal } from '../../reactive'\nimport {\n  ResponsiveValue,\n  BreakpointKey,\n  BreakpointContext,\n  isResponsiveValue\n} from './types'\nimport {\n  getCurrentBreakpoint,\n  createBreakpointContext,\n  getCurrentBreakpointConfig\n} from './breakpoints'\nimport { ResponsivePerformanceMonitor, cssRuleCache } from './performance'\nimport { MediaQueries } from './utilities'\n\n/**\n * Development mode responsive debugging\n */\nexport class ResponsiveDevTools {\n  private static isEnabled = false\n  private static debugOverlay: HTMLElement | null = null\n  private static logLevel: 'error' | 'warn' | 'info' | 'debug' = 'info'\n\n  /**\n   * Enable responsive development tools\n   */\n  static enable(options: {\n    showOverlay?: boolean\n    showBreakpoints?: boolean\n    showPerformance?: boolean\n    logLevel?: 'error' | 'warn' | 'info' | 'debug'\n    highlightResponsiveElements?: boolean\n    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  } = {}): void {\n    if (process.env.NODE_ENV === 'production') {\n      console.warn('ResponsiveDevTools: Not enabling in production mode')\n      return\n    }\n\n    this.isEnabled = true\n    this.logLevel = options.logLevel || 'info'\n\n    this.log('info', 'ResponsiveDevTools: Enabled')\n\n    if (options.showOverlay) {\n      this.createDebugOverlay(options)\n    }\n\n    if (options.highlightResponsiveElements) {\n      this.enableElementHighlighting()\n    }\n\n    if (options.showPerformance) {\n      this.enablePerformanceMonitoring()\n    }\n\n    // Log initial state\n    this.logResponsiveState()\n  }\n\n  /**\n   * Disable responsive development tools\n   */\n  static disable(): void {\n    this.isEnabled = false\n\n    if (this.debugOverlay) {\n      this.debugOverlay.remove()\n      this.debugOverlay = null\n    }\n\n    this.disableElementHighlighting()\n    this.log('info', 'ResponsiveDevTools: Disabled')\n  }\n\n  /**\n   * Check if development tools are enabled\n   */\n  static get enabled(): boolean {\n    return this.isEnabled && process.env.NODE_ENV !== 'production'\n  }\n\n  /**\n   * Log responsive information\n   */\n  private static log(level: 'error' | 'warn' | 'info' | 'debug', ...args: any[]): void {\n    if (!this.enabled) return\n\n    const levels = ['error', 'warn', 'info', 'debug']\n    const currentLevel = levels.indexOf(this.logLevel)\n    const messageLevel = levels.indexOf(level)\n\n    if (messageLevel <= currentLevel) {\n      console[level]('[ResponsiveDevTools]', ...args)\n    }\n  }\n\n  /**\n   * Create visual debug overlay\n   */\n  private static createDebugOverlay(options: {\n    showBreakpoints?: boolean\n    showPerformance?: boolean\n    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  }): void {\n    if (typeof document === 'undefined') return\n\n    const position = options.position || 'top-right'\n\n    this.debugOverlay = document.createElement('div')\n    this.debugOverlay.id = 'tachui-responsive-debug'\n    this.debugOverlay.style.cssText = `\n      position: fixed;\n      ${position.includes('top') ? 'top: 10px' : 'bottom: 10px'};\n      ${position.includes('right') ? 'right: 10px' : 'left: 10px'};\n      background: rgba(0, 0, 0, 0.9);\n      color: white;\n      padding: 12px;\n      border-radius: 8px;\n      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n      font-size: 12px;\n      z-index: 10000;\n      pointer-events: auto;\n      cursor: pointer;\n      max-width: 300px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n      border: 1px solid rgba(255, 255, 255, 0.1);\n    `\n\n    // Add close button\n    const closeButton = document.createElement('div')\n    closeButton.textContent = '×'\n    closeButton.style.cssText = `\n      position: absolute;\n      top: 4px;\n      right: 8px;\n      cursor: pointer;\n      font-size: 16px;\n      color: #ff6b6b;\n    `\n    closeButton.onclick = () => this.disable()\n    this.debugOverlay.appendChild(closeButton)\n\n    document.body.appendChild(this.debugOverlay)\n\n    // Update overlay content reactively\n    this.updateDebugOverlay(options)\n\n    // Update on resize\n    let resizeTimer: number\n    window.addEventListener('resize', () => {\n      clearTimeout(resizeTimer)\n      resizeTimer = window.setTimeout(() => {\n        this.updateDebugOverlay(options)\n      }, 100)\n    })\n  }\n\n  /**\n   * Update debug overlay content\n   */\n  private static updateDebugOverlay(options: {\n    showBreakpoints?: boolean\n    showPerformance?: boolean\n  }): void {\n    if (!this.debugOverlay) return\n\n    const context = createBreakpointContext()\n    const breakpointConfig = getCurrentBreakpointConfig()\n\n    let content = `\n      <div style=\"margin-bottom: 8px; font-weight: bold; color: #4fc3f7;\">\n        📱 Responsive Debug\n      </div>\n    `\n\n    // Current breakpoint info\n    content += `\n      <div style=\"margin-bottom: 6px;\">\n        <strong>Current:</strong> <span style=\"color: #66bb6a;\">${context.current}</span>\n      </div>\n      <div style=\"margin-bottom: 6px;\">\n        <strong>Size:</strong> ${context.width}×${context.height}\n      </div>\n    `\n\n    // Breakpoint ranges\n    if (options.showBreakpoints) {\n      content += `<div style=\"margin: 8px 0; font-weight: bold; color: #ffb74d;\">Breakpoints:</div>`\n\n      for (const [name, value] of Object.entries(breakpointConfig)) {\n        const isActive = name === context.current\n        const color = isActive ? '#66bb6a' : '#999'\n        content += `\n          <div style=\"color: ${color}; margin-bottom: 2px;\">\n            ${isActive ? '▶' : '▷'} ${name}: ${value}\n          </div>\n        `\n      }\n    }\n\n    // Performance info\n    if (options.showPerformance) {\n      const perfStats = ResponsivePerformanceMonitor.getStats()\n      const cacheStats = cssRuleCache.getStats()\n\n      content += `<div style=\"margin: 8px 0; font-weight: bold; color: #f06292;\">Performance:</div>`\n      content += `\n        <div style=\"margin-bottom: 2px;\">\n          Cache: ${cacheStats.size} rules (${(cacheStats.hitRate * 100).toFixed(1)}% hit rate)\n        </div>\n      `\n\n      if (Object.keys(perfStats).length > 0) {\n        for (const [name, stats] of Object.entries(perfStats)) {\n          content += `\n            <div style=\"margin-bottom: 2px;\">\n              ${name}: ${stats.average.toFixed(2)}ms avg\n            </div>\n          `\n        }\n      }\n    }\n\n    // Media query test results\n    content += `<div style=\"margin: 8px 0; font-weight: bold; color: #ba68c8;\">Media Queries:</div>`\n\n    const testQueries = {\n      'Touch': MediaQueries.touchDevice,\n      'Dark': MediaQueries.darkMode,\n      'Reduced Motion': MediaQueries.reducedMotion,\n      'High Contrast': MediaQueries.highContrast\n    }\n\n    for (const [name, query] of Object.entries(testQueries)) {\n      const matches = window.matchMedia(query).matches\n      const color = matches ? '#66bb6a' : '#666'\n      content += `\n        <div style=\"color: ${color}; margin-bottom: 2px;\">\n          ${matches ? '✓' : '✗'} ${name}\n        </div>\n      `\n    }\n\n    this.debugOverlay.innerHTML = content + this.debugOverlay.querySelector('div:last-child')?.outerHTML || ''\n  }\n\n  /**\n   * Enable element highlighting for responsive elements\n   */\n  private static enableElementHighlighting(): void {\n    if (typeof document === 'undefined') return\n\n    const style = document.createElement('style')\n    style.id = 'tachui-responsive-highlight'\n    style.textContent = `\n      .tachui-responsive-element {\n        outline: 2px dashed #4fc3f7 !important;\n        outline-offset: 2px !important;\n        position: relative !important;\n      }\n\n      .tachui-responsive-element::before {\n        content: 'R';\n        position: absolute !important;\n        top: -8px !important;\n        right: -8px !important;\n        background: #4fc3f7 !important;\n        color: white !important;\n        width: 16px !important;\n        height: 16px !important;\n        border-radius: 50% !important;\n        font-size: 10px !important;\n        font-weight: bold !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        z-index: 10001 !important;\n        font-family: monospace !important;\n      }\n    `\n\n    document.head.appendChild(style)\n\n    // Find and mark responsive elements\n    const observer = new MutationObserver(() => {\n      this.highlightResponsiveElements()\n    })\n\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['class']\n    })\n\n    // Initial highlighting\n    this.highlightResponsiveElements()\n  }\n\n  /**\n   * Disable element highlighting\n   */\n  private static disableElementHighlighting(): void {\n    if (typeof document === 'undefined') return\n\n    const style = document.getElementById('tachui-responsive-highlight')\n    if (style) {\n      style.remove()\n    }\n\n    document.querySelectorAll('.tachui-responsive-element').forEach(el => {\n      el.classList.remove('tachui-responsive-element')\n    })\n  }\n\n  /**\n   * Highlight elements with responsive classes\n   */\n  private static highlightResponsiveElements(): void {\n    if (typeof document === 'undefined') return\n\n    // Find elements with tachui responsive classes\n    const responsiveSelectors = [\n      '[class*=\"tachui-responsive-\"]',\n      '[class*=\"tachui-mq-\"]'\n    ]\n\n    responsiveSelectors.forEach(selector => {\n      document.querySelectorAll(selector).forEach(el => {\n        if (!el.classList.contains('tachui-responsive-element')) {\n          el.classList.add('tachui-responsive-element')\n        }\n      })\n    })\n  }\n\n  /**\n   * Enable performance monitoring display\n   */\n  private static enablePerformanceMonitoring(): void {\n    // Log performance stats periodically\n    setInterval(() => {\n      if (!this.enabled) return\n\n      const perfStats = ResponsivePerformanceMonitor.getStats()\n      const cacheStats = cssRuleCache.getStats()\n\n      this.log('debug', 'Performance Stats:', {\n        cache: cacheStats,\n        performance: perfStats\n      })\n    }, 5000)\n  }\n\n  /**\n   * Log current responsive state\n   */\n  static logResponsiveState(): void {\n    if (!this.enabled) return\n\n    const context = createBreakpointContext()\n    const config = getCurrentBreakpointConfig()\n\n    console.group('🔍 TachUI Responsive State')\n    console.log('Current breakpoint:', context.current)\n    console.log('Viewport:', `${context.width}×${context.height}`)\n    console.log('Configuration:', config)\n\n    // Test media queries only in browser environment\n    if (typeof window !== 'undefined' && window.matchMedia) {\n      const queries = {\n        'Mobile': MediaQueries.mobile,\n        'Tablet': MediaQueries.tablet,\n        'Desktop': MediaQueries.desktop,\n        'Touch Device': MediaQueries.touchDevice,\n        'Dark Mode': MediaQueries.darkMode,\n        'Reduced Motion': MediaQueries.reducedMotion\n      }\n\n      console.log('Media Query Results:')\n      for (const [name, query] of Object.entries(queries)) {\n        try {\n          console.log(`  ${name}: ${window.matchMedia(query).matches}`)\n        } catch (_error) {\n          console.log(`  ${name}: Error testing query`)\n        }\n      }\n    }\n\n    console.groupEnd()\n  }\n\n  /**\n   * Inspect a responsive value\n   */\n  static inspectResponsiveValue<T>(\n    value: ResponsiveValue<T>,\n    label?: string\n  ): void {\n    if (!this.enabled) return\n\n    const currentBreakpoint = getCurrentBreakpoint()\n\n    console.group(`🔍 Responsive Value${label ? ` - ${label}` : ''}`)\n\n    if (isResponsiveValue(value)) {\n      const responsiveObj = value as Partial<Record<BreakpointKey, T>>\n      console.log('Responsive object:', responsiveObj)\n\n      // Show resolved value for current breakpoint\n      const breakpointOrder: BreakpointKey[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n      const currentIndex = breakpointOrder.indexOf(currentBreakpoint())\n\n      let resolvedValue: T | undefined\n      for (let i = currentIndex; i >= 0; i--) {\n        const bp = breakpointOrder[i]\n        if (responsiveObj[bp] !== undefined) {\n          resolvedValue = responsiveObj[bp]\n          console.log(`Resolved value (${bp}):`, resolvedValue)\n          break\n        }\n      }\n\n      // Show all defined breakpoints\n      console.log('Defined breakpoints:')\n      for (const [bp, val] of Object.entries(responsiveObj)) {\n        if (val !== undefined) {\n          const isCurrent = bp === currentBreakpoint()\n          console.log(`  ${isCurrent ? '→' : ' '} ${bp}:`, val)\n        }\n      }\n    } else {\n      console.log('Static value:', value)\n    }\n\n    console.groupEnd()\n  }\n\n  /**\n   * Test responsive behavior\n   */\n  static testResponsiveBehavior(\n    responsiveValue: ResponsiveValue<any>,\n    testBreakpoints: BreakpointKey[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n  ): Partial<Record<BreakpointKey, any>> {\n    if (!this.enabled) return {}\n\n    const results: Partial<Record<BreakpointKey, any>> = {}\n\n    // Mock different breakpoints and test resolution\n    testBreakpoints.forEach(bp => {\n      // This would require breakpoint mocking functionality\n      // For now, just log what would happen\n      this.log('debug', `Testing breakpoint ${bp}:`, responsiveValue)\n    })\n\n    return results\n  }\n\n  /**\n   * Export responsive configuration for debugging\n   */\n  static exportConfiguration(): {\n    breakpoints: Record<BreakpointKey, string>\n    currentContext: BreakpointContext\n    performance: any\n    mediaQueries: Record<string, boolean>\n  } {\n    const context = createBreakpointContext()\n    const config = getCurrentBreakpointConfig()\n    const perfStats = ResponsivePerformanceMonitor.getStats()\n    const cacheStats = cssRuleCache.getStats()\n\n    const mediaQueryResults: Record<string, boolean> = {}\n    if (typeof window !== 'undefined' && window.matchMedia) {\n      for (const [name, query] of Object.entries(MediaQueries)) {\n        if (typeof query === 'string') {\n          try {\n            mediaQueryResults[name] = window.matchMedia(query).matches\n          } catch (_error) {\n            mediaQueryResults[name] = false\n          }\n        }\n      }\n    }\n\n    return {\n      breakpoints: config,\n      currentContext: context,\n      performance: {\n        cache: cacheStats,\n        timings: perfStats\n      },\n      mediaQueries: mediaQueryResults\n    }\n  }\n}\n\n/**\n * Responsive value inspector hook\n */\nexport function useResponsiveInspector<T>(\n  value: ResponsiveValue<T>,\n  label?: string\n): Signal<{\n  resolvedValue: T | undefined\n  activeBreakpoint: BreakpointKey\n  allValues: Partial<Record<BreakpointKey, T>>\n  isResponsive: boolean\n}> {\n  const currentBreakpoint = getCurrentBreakpoint()\n\n  return createComputed(() => {\n    const breakpoint = currentBreakpoint()\n    const isResponsive = isResponsiveValue(value)\n\n    let resolvedValue: T | undefined\n    let allValues: Partial<Record<BreakpointKey, T>> = {}\n\n    if (isResponsive) {\n      const responsiveObj = value as Partial<Record<BreakpointKey, T>>\n      allValues = responsiveObj\n\n      // Resolve value for current breakpoint\n      const breakpointOrder: BreakpointKey[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n      const currentIndex = breakpointOrder.indexOf(breakpoint)\n\n      for (let i = currentIndex; i >= 0; i--) {\n        const bp = breakpointOrder[i]\n        if (responsiveObj[bp] !== undefined) {\n          resolvedValue = responsiveObj[bp]\n          break\n        }\n      }\n    } else {\n      resolvedValue = value as T\n      allValues = { [breakpoint]: resolvedValue }\n    }\n\n    // Log in development mode\n    if (ResponsiveDevTools.enabled && label) {\n      ResponsiveDevTools.inspectResponsiveValue(value, label)\n    }\n\n    return {\n      resolvedValue,\n      activeBreakpoint: breakpoint,\n      allValues,\n      isResponsive\n    }\n  }) as Signal<{\n    resolvedValue: T | undefined\n    activeBreakpoint: BreakpointKey\n    allValues: Partial<Record<BreakpointKey, T>>\n    isResponsive: boolean\n  }>\n}\n\n/**\n * Browser compatibility testing utilities\n */\nexport class BrowserCompatibility {\n  /**\n   * Test CSS features support\n   */\n  static testCSSFeatures(): Record<string, boolean> {\n    if (typeof window === 'undefined' || typeof CSS === 'undefined' || !CSS.supports) {\n      return {}\n    }\n\n    const features: Record<string, boolean> = {}\n\n    try {\n      // Test CSS Grid\n      features.cssGrid = CSS.supports('display', 'grid')\n\n      // Test CSS Flexbox\n      features.flexbox = CSS.supports('display', 'flex')\n\n      // Test CSS Custom Properties\n      features.customProperties = CSS.supports('--test', 'value')\n\n      // Test viewport units\n      features.viewportUnits = CSS.supports('width', '100vw')\n\n      // Test media queries\n      features.mediaQueries = typeof window.matchMedia === 'function'\n\n      // Test container queries (modern feature)\n      features.containerQueries = CSS.supports('container-type', 'inline-size')\n\n      // Test CSS logical properties\n      features.logicalProperties = CSS.supports('margin-inline-start', '1rem')\n    } catch (_error) {\n      // If any test fails, just return what we have so far\n    }\n\n    return features\n  }\n\n  /**\n   * Test responsive behavior across different viewport sizes\n   */\n  static testViewportSizes(\n    callback: (width: number, height: number) => void\n  ): void {\n    if (typeof window === 'undefined') return\n\n    const testSizes = [\n      { width: 320, height: 568, name: 'iPhone SE' },\n      { width: 375, height: 667, name: 'iPhone 8' },\n      { width: 768, height: 1024, name: 'iPad Portrait' },\n      { width: 1024, height: 768, name: 'iPad Landscape' },\n      { width: 1280, height: 720, name: 'Desktop Small' },\n      { width: 1920, height: 1080, name: 'Desktop Large' }\n    ]\n\n    // This would require a testing environment or dev tools integration\n    if (ResponsiveDevTools.enabled) {\n      ResponsiveDevTools['log']('info', 'Testing viewport sizes:', testSizes)\n    }\n\n    testSizes.forEach(size => {\n      // In a real implementation, this would simulate the viewport size\n      callback(size.width, size.height)\n    })\n  }\n}\n\n/**\n * Development-only global helpers\n */\nif (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {\n  // Add global helpers for development\n  ;(window as any).tachUIResponsive = {\n    devTools: ResponsiveDevTools,\n    inspector: useResponsiveInspector,\n    compatibility: BrowserCompatibility,\n    logState: () => ResponsiveDevTools.logResponsiveState(),\n    export: () => ResponsiveDevTools.exportConfiguration()\n  }\n}\n"],"names":["ResponsiveDevTools","options","level","args","levels","currentLevel","position","closeButton","resizeTimer","context","createBreakpointContext","breakpointConfig","getCurrentBreakpointConfig","content","name","value","isActive","perfStats","ResponsivePerformanceMonitor","cacheStats","cssRuleCache","stats","testQueries","MediaQueries","query","matches","style","el","selector","config","queries","label","currentBreakpoint","getCurrentBreakpoint","isResponsiveValue","responsiveObj","breakpointOrder","currentIndex","resolvedValue","i","bp","val","isCurrent","responsiveValue","testBreakpoints","results","mediaQueryResults","__publicField","useResponsiveInspector","createComputed","breakpoint","isResponsive","allValues","BrowserCompatibility","features","callback","testSizes","size"],"mappings":"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"}

package/dist/modifiers/responsive/dev-tools.js

@@ -1,380 +0,0 @@
-import "../../reactive/cleanup.js";
-import { createComputed as w } from "../../reactive/computed.js";
-import "../../reactive/unified-scheduler.js";
-import "../../reactive/signal.js";
-import "../../reactive/scheduler.js";
-import "../../reactive/theme.js";
-import { isResponsiveValue as y } from "./types.js";
-import { createBreakpointContext as h, getCurrentBreakpointConfig as g, getCurrentBreakpoint as x } from "./breakpoints.js";
-import { ResponsivePerformanceMonitor as f, cssRuleCache as m } from "./performance.js";
-import { MediaQueries as d } from "./utilities.js";
-var S = Object.defineProperty, O = (c, e, t) => e in c ? S(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t, b = (c, e, t) => O(c, typeof e != "symbol" ? e + "" : e, t);
-class p {
-  /**
-   * Enable responsive development tools
-   */
-  static enable(e = {}) {
-    if (process.env.NODE_ENV === "production") {
-      console.warn("ResponsiveDevTools: Not enabling in production mode");
-      return;
-    }
-    this.isEnabled = !0, this.logLevel = e.logLevel || "info", this.log("info", "ResponsiveDevTools: Enabled"), e.showOverlay && this.createDebugOverlay(e), e.highlightResponsiveElements && this.enableElementHighlighting(), e.showPerformance && this.enablePerformanceMonitoring(), this.logResponsiveState();
-  }
-  /**
-   * Disable responsive development tools
-   */
-  static disable() {
-    this.isEnabled = !1, this.debugOverlay && (this.debugOverlay.remove(), this.debugOverlay = null), this.disableElementHighlighting(), this.log("info", "ResponsiveDevTools: Disabled");
-  }
-  /**
-   * Check if development tools are enabled
-   */
-  static get enabled() {
-    return this.isEnabled && process.env.NODE_ENV !== "production";
-  }
-  /**
-   * Log responsive information
-   */
-  static log(e, ...t) {
-    if (!this.enabled) return;
-    const i = ["error", "warn", "info", "debug"], o = i.indexOf(this.logLevel);
-    i.indexOf(e) <= o && console[e]("[ResponsiveDevTools]", ...t);
-  }
-  /**
-   * Create visual debug overlay
-   */
-  static createDebugOverlay(e) {
-    if (typeof document > "u") return;
-    const t = e.position || "top-right";
-    this.debugOverlay = document.createElement("div"), this.debugOverlay.id = "tachui-responsive-debug", this.debugOverlay.style.cssText = `
-      position: fixed;
-      ${t.includes("top") ? "top: 10px" : "bottom: 10px"};
-      ${t.includes("right") ? "right: 10px" : "left: 10px"};
-      background: rgba(0, 0, 0, 0.9);
-      color: white;
-      padding: 12px;
-      border-radius: 8px;
-      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-      font-size: 12px;
-      z-index: 10000;
-      pointer-events: auto;
-      cursor: pointer;
-      max-width: 300px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    `;
-    const i = document.createElement("div");
-    i.textContent = "×", i.style.cssText = `
-      position: absolute;
-      top: 4px;
-      right: 8px;
-      cursor: pointer;
-      font-size: 16px;
-      color: #ff6b6b;
-    `, i.onclick = () => this.disable(), this.debugOverlay.appendChild(i), document.body.appendChild(this.debugOverlay), this.updateDebugOverlay(e);
-    let o;
-    window.addEventListener("resize", () => {
-      clearTimeout(o), o = window.setTimeout(() => {
-        this.updateDebugOverlay(e);
-      }, 100);
-    });
-  }
-  /**
-   * Update debug overlay content
-   */
-  static updateDebugOverlay(e) {
-    if (!this.debugOverlay) return;
-    const t = h(), i = g();
-    let o = `
-      <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
-        📱 Responsive Debug
-      </div>
-    `;
-    if (o += `
-      <div style="margin-bottom: 6px;">
-        <strong>Current:</strong> <span style="color: #66bb6a;">${t.current}</span>
-      </div>
-      <div style="margin-bottom: 6px;">
-        <strong>Size:</strong> ${t.width}×${t.height}
-      </div>
-    `, e.showBreakpoints) {
-      o += '<div style="margin: 8px 0; font-weight: bold; color: #ffb74d;">Breakpoints:</div>';
-      for (const [s, a] of Object.entries(i)) {
-        const n = s === t.current;
-        o += `
-          <div style="color: ${n ? "#66bb6a" : "#999"}; margin-bottom: 2px;">
-            ${n ? "▶" : "▷"} ${s}: ${a}
-          </div>
-        `;
-      }
-    }
-    if (e.showPerformance) {
-      const s = f.getStats(), a = m.getStats();
-      if (o += '<div style="margin: 8px 0; font-weight: bold; color: #f06292;">Performance:</div>', o += `
-        <div style="margin-bottom: 2px;">
-          Cache: ${a.size} rules (${(a.hitRate * 100).toFixed(1)}% hit rate)
-        </div>
-      `, Object.keys(s).length > 0)
-        for (const [n, l] of Object.entries(s))
-          o += `
-            <div style="margin-bottom: 2px;">
-              ${n}: ${l.average.toFixed(2)}ms avg
-            </div>
-          `;
-    }
-    o += '<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';
-    const r = {
-      Touch: d.touchDevice,
-      Dark: d.darkMode,
-      "Reduced Motion": d.reducedMotion,
-      "High Contrast": d.highContrast
-    };
-    for (const [s, a] of Object.entries(r)) {
-      const n = window.matchMedia(a).matches;
-      o += `
-        <div style="color: ${n ? "#66bb6a" : "#666"}; margin-bottom: 2px;">
-          ${n ? "✓" : "✗"} ${s}
-        </div>
-      `;
-    }
-    this.debugOverlay.innerHTML = o + this.debugOverlay.querySelector("div:last-child")?.outerHTML || "";
-  }
-  /**
-   * Enable element highlighting for responsive elements
-   */
-  static enableElementHighlighting() {
-    if (typeof document > "u") return;
-    const e = document.createElement("style");
-    e.id = "tachui-responsive-highlight", e.textContent = `
-      .tachui-responsive-element {
-        outline: 2px dashed #4fc3f7 !important;
-        outline-offset: 2px !important;
-        position: relative !important;
-      }
-
-      .tachui-responsive-element::before {
-        content: 'R';
-        position: absolute !important;
-        top: -8px !important;
-        right: -8px !important;
-        background: #4fc3f7 !important;
-        color: white !important;
-        width: 16px !important;
-        height: 16px !important;
-        border-radius: 50% !important;
-        font-size: 10px !important;
-        font-weight: bold !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        z-index: 10001 !important;
-        font-family: monospace !important;
-      }
-    `, document.head.appendChild(e), new MutationObserver(() => {
-      this.highlightResponsiveElements();
-    }).observe(document.body, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0,
-      attributeFilter: ["class"]
-    }), this.highlightResponsiveElements();
-  }
-  /**
-   * Disable element highlighting
-   */
-  static disableElementHighlighting() {
-    if (typeof document > "u") return;
-    const e = document.getElementById("tachui-responsive-highlight");
-    e && e.remove(), document.querySelectorAll(".tachui-responsive-element").forEach((t) => {
-      t.classList.remove("tachui-responsive-element");
-    });
-  }
-  /**
-   * Highlight elements with responsive classes
-   */
-  static highlightResponsiveElements() {
-    if (typeof document > "u") return;
-    [
-      '[class*="tachui-responsive-"]',
-      '[class*="tachui-mq-"]'
-    ].forEach((t) => {
-      document.querySelectorAll(t).forEach((i) => {
-        i.classList.contains("tachui-responsive-element") || i.classList.add("tachui-responsive-element");
-      });
-    });
-  }
-  /**
-   * Enable performance monitoring display
-   */
-  static enablePerformanceMonitoring() {
-    setInterval(() => {
-      if (!this.enabled) return;
-      const e = f.getStats(), t = m.getStats();
-      this.log("debug", "Performance Stats:", {
-        cache: t,
-        performance: e
-      });
-    }, 5e3);
-  }
-  /**
-   * Log current responsive state
-   */
-  static logResponsiveState() {
-    if (!this.enabled) return;
-    const e = h(), t = g();
-    if (console.group("🔍 TachUI Responsive State"), console.log("Current breakpoint:", e.current), console.log("Viewport:", `${e.width}×${e.height}`), console.log("Configuration:", t), typeof window < "u" && window.matchMedia) {
-      const i = {
-        Mobile: d.mobile,
-        Tablet: d.tablet,
-        Desktop: d.desktop,
-        "Touch Device": d.touchDevice,
-        "Dark Mode": d.darkMode,
-        "Reduced Motion": d.reducedMotion
-      };
-      console.log("Media Query Results:");
-      for (const [o, r] of Object.entries(i))
-        try {
-          console.log(`  ${o}: ${window.matchMedia(r).matches}`);
-        } catch {
-          console.log(`  ${o}: Error testing query`);
-        }
-    }
-    console.groupEnd();
-  }
-  /**
-   * Inspect a responsive value
-   */
-  static inspectResponsiveValue(e, t) {
-    if (!this.enabled) return;
-    const i = x();
-    if (console.group(`🔍 Responsive Value${t ? ` - ${t}` : ""}`), y(e)) {
-      const o = e;
-      console.log("Responsive object:", o);
-      const r = ["base", "sm", "md", "lg", "xl", "2xl"], s = r.indexOf(i());
-      let a;
-      for (let n = s; n >= 0; n--) {
-        const l = r[n];
-        if (o[l] !== void 0) {
-          a = o[l], console.log(`Resolved value (${l}):`, a);
-          break;
-        }
-      }
-      console.log("Defined breakpoints:");
-      for (const [n, l] of Object.entries(o))
-        if (l !== void 0) {
-          const u = n === i();
-          console.log(`  ${u ? "→" : " "} ${n}:`, l);
-        }
-    } else
-      console.log("Static value:", e);
-    console.groupEnd();
-  }
-  /**
-   * Test responsive behavior
-   */
-  static testResponsiveBehavior(e, t = ["base", "sm", "md", "lg", "xl", "2xl"]) {
-    if (!this.enabled) return {};
-    const i = {};
-    return t.forEach((o) => {
-      this.log("debug", `Testing breakpoint ${o}:`, e);
-    }), i;
-  }
-  /**
-   * Export responsive configuration for debugging
-   */
-  static exportConfiguration() {
-    const e = h(), t = g(), i = f.getStats(), o = m.getStats(), r = {};
-    if (typeof window < "u" && window.matchMedia) {
-      for (const [s, a] of Object.entries(d))
-        if (typeof a == "string")
-          try {
-            r[s] = window.matchMedia(a).matches;
-          } catch {
-            r[s] = !1;
-          }
-    }
-    return {
-      breakpoints: t,
-      currentContext: e,
-      performance: {
-        cache: o,
-        timings: i
-      },
-      mediaQueries: r
-    };
-  }
-}
-b(p, "isEnabled", !1);
-b(p, "debugOverlay", null);
-b(p, "logLevel", "info");
-function C(c, e) {
-  const t = x();
-  return w(() => {
-    const i = t(), o = y(c);
-    let r, s = {};
-    if (o) {
-      const a = c;
-      s = a;
-      const n = ["base", "sm", "md", "lg", "xl", "2xl"], l = n.indexOf(i);
-      for (let u = l; u >= 0; u--) {
-        const v = n[u];
-        if (a[v] !== void 0) {
-          r = a[v];
-          break;
-        }
-      }
-    } else
-      r = c, s = { [i]: r };
-    return p.enabled && e && p.inspectResponsiveValue(c, e), {
-      resolvedValue: r,
-      activeBreakpoint: i,
-      allValues: s,
-      isResponsive: o
-    };
-  });
-}
-class E {
-  /**
-   * Test CSS features support
-   */
-  static testCSSFeatures() {
-    if (typeof window > "u" || typeof CSS > "u" || !CSS.supports)
-      return {};
-    const e = {};
-    try {
-      e.cssGrid = CSS.supports("display", "grid"), e.flexbox = CSS.supports("display", "flex"), e.customProperties = CSS.supports("--test", "value"), e.viewportUnits = CSS.supports("width", "100vw"), e.mediaQueries = typeof window.matchMedia == "function", e.containerQueries = CSS.supports("container-type", "inline-size"), e.logicalProperties = CSS.supports("margin-inline-start", "1rem");
-    } catch {
-    }
-    return e;
-  }
-  /**
-   * Test responsive behavior across different viewport sizes
-   */
-  static testViewportSizes(e) {
-    if (typeof window > "u") return;
-    const t = [
-      { width: 320, height: 568, name: "iPhone SE" },
-      { width: 375, height: 667, name: "iPhone 8" },
-      { width: 768, height: 1024, name: "iPad Portrait" },
-      { width: 1024, height: 768, name: "iPad Landscape" },
-      { width: 1280, height: 720, name: "Desktop Small" },
-      { width: 1920, height: 1080, name: "Desktop Large" }
-    ];
-    p.enabled && p.log("info", "Testing viewport sizes:", t), t.forEach((i) => {
-      e(i.width, i.height);
-    });
-  }
-}
-typeof window < "u" && process.env.NODE_ENV !== "production" && (window.tachUIResponsive = {
-  devTools: p,
-  inspector: C,
-  compatibility: E,
-  logState: () => p.logResponsiveState(),
-  export: () => p.exportConfiguration()
-});
-export {
-  E as BrowserCompatibility,
-  p as ResponsiveDevTools,
-  C as useResponsiveInspector
-};
-//# sourceMappingURL=dev-tools.js.map