@tachui/core 0.7.0-alpha1

package/dist/modifiers/responsive/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../src/modifiers/responsive/breakpoints.ts"],"sourcesContent":["/**\n * Breakpoint Configuration System\n * \n * Manages responsive breakpoint configuration, validation, and utilities.\n * Supports both default Tailwind-inspired breakpoints and custom configurations.\n */\n\nimport { \n  BreakpointKey, \n  BreakpointConfig, \n  DEFAULT_BREAKPOINTS,\n  BreakpointContext,\n  isValidBreakpointKey\n} from './types'\nimport { createSignal, Signal } from '../../reactive'\n\n/**\n * Global breakpoint configuration state\n */\nlet currentBreakpointConfig: Required<BreakpointConfig> = { ...DEFAULT_BREAKPOINTS }\n\n/**\n * Current active breakpoint signal\n */\nconst [currentBreakpoint, setCurrentBreakpoint] = createSignal<BreakpointKey>('base')\n\n/**\n * Current viewport dimensions signal\n */\nconst [viewportDimensions, setViewportDimensions] = createSignal({ width: 0, height: 0 })\n\n/**\n * Configure global breakpoints for the application\n */\nexport function configureBreakpoints(config: Partial<BreakpointConfig>): void {\n  // Validate breakpoint configuration\n  validateBreakpointConfig(config)\n  \n  // Update global configuration\n  currentBreakpointConfig = {\n    ...DEFAULT_BREAKPOINTS,\n    ...config\n  }\n  \n  // Re-evaluate current breakpoint\n  updateCurrentBreakpoint()\n  \n  if (typeof window !== 'undefined') {\n    // Update breakpoint on window resize\n    window.addEventListener('resize', updateCurrentBreakpoint)\n  }\n}\n\n/**\n * Get the current breakpoint configuration\n */\nexport function getCurrentBreakpointConfig(): Required<BreakpointConfig> {\n  return { ...currentBreakpointConfig }\n}\n\n/**\n * Get the current active breakpoint\n */\nexport function getCurrentBreakpoint(): Signal<BreakpointKey> {\n  return currentBreakpoint as Signal<BreakpointKey>\n}\n\n/**\n * Get current viewport dimensions\n */\nexport function getViewportDimensions(): Signal<{ width: number; height: number }> {\n  return viewportDimensions as Signal<{ width: number; height: number }>\n}\n\n/**\n * Initialize the responsive system (should be called once on app startup)\n */\nexport function initializeResponsiveSystem(): void {\n  if (typeof window === 'undefined') {\n    return // Skip on server-side\n  }\n  \n  // Set initial viewport dimensions\n  updateViewportDimensions()\n  updateCurrentBreakpoint()\n  \n  // Listen for window resize events\n  window.addEventListener('resize', () => {\n    updateViewportDimensions()\n    updateCurrentBreakpoint()\n  })\n  \n  // Listen for orientation changes\n  window.addEventListener('orientationchange', () => {\n    // Delay to ensure accurate dimensions after orientation change\n    setTimeout(() => {\n      updateViewportDimensions()\n      updateCurrentBreakpoint()\n    }, 100)\n  })\n}\n\n/**\n * Create a breakpoint context for utilities\n */\nexport function createBreakpointContext(): BreakpointContext {\n  const current = currentBreakpoint()\n  const dimensions = viewportDimensions()\n  \n  return {\n    current,\n    width: dimensions.width,\n    height: dimensions.height,\n    isAbove: (breakpoint: BreakpointKey) => isBreakpointAbove(current, breakpoint),\n    isBelow: (breakpoint: BreakpointKey) => isBreakpointBelow(current, breakpoint),\n    isBetween: (min: BreakpointKey, max: BreakpointKey) => \n      isBreakpointAbove(current, min) && isBreakpointBelow(current, max),\n    matches: (query: string) => window.matchMedia(query).matches\n  }\n}\n\n/**\n * Convert breakpoint value to numeric pixels for comparison\n */\nexport function breakpointToPixels(breakpoint: BreakpointKey): number {\n  const value = currentBreakpointConfig[breakpoint]\n  \n  // Handle different CSS units\n  if (value.endsWith('px')) {\n    return parseInt(value, 10)\n  } else if (value.endsWith('em')) {\n    return parseInt(value, 10) * 16 // Assume 16px base font size\n  } else if (value.endsWith('rem')) {\n    return parseInt(value, 10) * 16 // Assume 16px base font size\n  }\n  \n  // Fallback to direct number conversion\n  return parseInt(value, 10) || 0\n}\n\n/**\n * Get breakpoint index for comparison (base = 0, sm = 1, etc.)\n */\nexport function getBreakpointIndex(breakpoint: BreakpointKey): number {\n  const order: BreakpointKey[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n  return order.indexOf(breakpoint)\n}\n\n/**\n * Check if breakpoint A is above breakpoint B\n */\nexport function isBreakpointAbove(a: BreakpointKey, b: BreakpointKey): boolean {\n  return getBreakpointIndex(a) > getBreakpointIndex(b)\n}\n\n/**\n * Check if breakpoint A is below breakpoint B\n */\nexport function isBreakpointBelow(a: BreakpointKey, b: BreakpointKey): boolean {\n  return getBreakpointIndex(a) < getBreakpointIndex(b)\n}\n\n/**\n * Generate CSS media query string for a breakpoint\n */\nexport function generateMediaQuery(breakpoint: BreakpointKey): string {\n  if (breakpoint === 'base') {\n    return '' // No media query for base (mobile-first)\n  }\n  \n  const minWidth = currentBreakpointConfig[breakpoint]\n  return `(min-width: ${minWidth})`\n}\n\n/**\n * Generate CSS media query for a range of breakpoints\n */\nexport function generateRangeMediaQuery(min: BreakpointKey, max?: BreakpointKey): string {\n  const queries: string[] = []\n  \n  if (min !== 'base') {\n    queries.push(`(min-width: ${currentBreakpointConfig[min]})`)\n  }\n  \n  if (max && max !== '2xl') {\n    const maxBreakpoints: BreakpointKey[] = ['sm', 'md', 'lg', 'xl', '2xl']\n    const maxIndex = maxBreakpoints.indexOf(max)\n    if (maxIndex >= 0 && maxIndex < maxBreakpoints.length - 1) {\n      const nextBreakpoint = maxBreakpoints[maxIndex + 1]\n      const maxWidth = `${breakpointToPixels(nextBreakpoint) - 1}px`\n      queries.push(`(max-width: ${maxWidth})`)\n    }\n  }\n  \n  return queries.length > 0 ? queries.join(' and ') : ''\n}\n\n/**\n * Get all breakpoints sorted by size\n */\nexport function getSortedBreakpoints(): BreakpointKey[] {\n  return ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n}\n\n/**\n * Get breakpoints above a given breakpoint\n */\nexport function getBreakpointsAbove(breakpoint: BreakpointKey): BreakpointKey[] {\n  const sorted = getSortedBreakpoints()\n  const index = sorted.indexOf(breakpoint)\n  return index >= 0 ? sorted.slice(index + 1) : []\n}\n\n/**\n * Get breakpoints below a given breakpoint\n */\nexport function getBreakpointsBelow(breakpoint: BreakpointKey): BreakpointKey[] {\n  const sorted = getSortedBreakpoints()\n  const index = sorted.indexOf(breakpoint)\n  return index > 0 ? sorted.slice(0, index) : []\n}\n\n/**\n * Resolve current breakpoint based on viewport width\n */\nfunction updateCurrentBreakpoint(): void {\n  if (typeof window === 'undefined') {\n    return\n  }\n  \n  const width = window.innerWidth\n  const breakpoints = getSortedBreakpoints().reverse() // Start from largest\n  \n  for (const breakpoint of breakpoints) {\n    if (breakpoint === 'base' || width >= breakpointToPixels(breakpoint)) {\n      setCurrentBreakpoint(breakpoint)\n      return\n    }\n  }\n  \n  setCurrentBreakpoint('base')\n}\n\n/**\n * Update viewport dimensions\n */\nfunction updateViewportDimensions(): void {\n  if (typeof window !== 'undefined') {\n    setViewportDimensions({\n      width: window.innerWidth,\n      height: window.innerHeight\n    })\n  }\n}\n\n/**\n * Validate breakpoint configuration\n */\nfunction validateBreakpointConfig(config: Partial<BreakpointConfig>): void {\n  for (const [key, value] of Object.entries(config)) {\n    if (!isValidBreakpointKey(key)) {\n      throw new Error(`Invalid breakpoint key: \"${key}\". Valid keys are: base, sm, md, lg, xl, 2xl`)\n    }\n    \n    if (typeof value !== 'string') {\n      throw new Error(`Breakpoint value for \"${key}\" must be a string (e.g., \"768px\")`)\n    }\n    \n    if (!value.match(/^\\d+(\\.\\d+)?(px|em|rem|%)$/)) {\n      throw new Error(`Invalid breakpoint value for \"${key}\": \"${value}\". Must be a valid CSS length (e.g., \"768px\", \"48em\")`)\n    }\n  }\n  \n  // Validate that breakpoints are in ascending order\n  const sortedKeys = Object.keys(config).filter(isValidBreakpointKey).sort((a, b) => {\n    return getBreakpointIndex(a as BreakpointKey) - getBreakpointIndex(b as BreakpointKey)\n  })\n  \n  for (let i = 1; i < sortedKeys.length; i++) {\n    const prev = sortedKeys[i - 1] as BreakpointKey\n    const current = sortedKeys[i] as BreakpointKey\n    const prevValue = config[prev]!\n    const currentValue = config[current]!\n    \n    if (breakpointToPixels(prev) >= parseInt(currentValue, 10)) {\n      throw new Error(`Breakpoint \"${current}\" (${currentValue}) must be larger than \"${prev}\" (${prevValue})`)\n    }\n  }\n}\n\n/**\n * Create common breakpoint configurations\n */\nexport const BreakpointPresets = {\n  // Tailwind CSS (default)\n  tailwind: {\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px'\n  } as BreakpointConfig,\n  \n  // Bootstrap\n  bootstrap: {\n    sm: '576px',\n    md: '768px',\n    lg: '992px',\n    xl: '1200px',\n    '2xl': '1400px'\n  } as BreakpointConfig,\n  \n  // Material Design\n  material: {\n    sm: '600px',\n    md: '960px',\n    lg: '1280px',\n    xl: '1920px',\n    '2xl': '2560px'\n  } as BreakpointConfig,\n  \n  // Custom mobile-first\n  mobileFocus: {\n    sm: '480px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1200px',\n    '2xl': '1440px'\n  } as BreakpointConfig\n} as const"],"names":["currentBreakpointConfig","DEFAULT_BREAKPOINTS","currentBreakpoint","setCurrentBreakpoint","createSignal","viewportDimensions","setViewportDimensions","configureBreakpoints","config","validateBreakpointConfig","updateCurrentBreakpoint","getCurrentBreakpointConfig","getCurrentBreakpoint","getViewportDimensions","initializeResponsiveSystem","updateViewportDimensions","createBreakpointContext","current","dimensions","breakpoint","isBreakpointAbove","isBreakpointBelow","min","max","query","breakpointToPixels","value","getBreakpointIndex","a","b","generateMediaQuery","generateRangeMediaQuery","queries","maxBreakpoints","maxIndex","nextBreakpoint","maxWidth","getSortedBreakpoints","getBreakpointsAbove","sorted","index","getBreakpointsBelow","width","breakpoints","key","isValidBreakpointKey","sortedKeys","i","prev","prevValue","currentValue","BreakpointPresets"],"mappings":"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"}

package/dist/modifiers/responsive/css-generator.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("./types.cjs"),h=require("./breakpoints.cjs");var m=Object.defineProperty,$=(l,e,t)=>e in l?m(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t,f=(l,e,t)=>$(l,typeof e!="symbol"?e+"":e,t);class g{constructor(e){f(this,"options"),this.options={generateMinified:!1,includeComments:!0,optimizeOutput:!0,mobileFirst:!0,...e}}generateResponsiveCSS(e){const t=[],s=[],r={};let o=!1;for(const[n,c]of Object.entries(e))if(y.isResponsiveValue(c)){o=!0;const i=this.generatePropertyMediaQueries(n,c);t.push(...i.mediaQueries),i.baseStyles&&Object.assign(r,i.baseStyles)}else r[this.toCSSPropertyName(n)]=this.formatCSSValue(n,c);return s.push(...this.generateCSSRules(t,r)),{cssRules:s,mediaQueries:t,fallbackStyles:r,hasResponsiveStyles:o}}generatePropertyMediaQueries(e,t){const s=[],r={},o=h.getSortedBreakpoints();for(const n of o){const c=t[n];if(c===void 0)continue;const i=this.toCSSPropertyName(e),u=this.formatCSSValue(e,c);if(n==="base")r[i]=u;else{const a=h.generateMediaQuery(n),d={[i]:u};s.push({breakpoint:n,query:a,styles:d,selector:this.options.selector})}}return{mediaQueries:s,baseStyles:Object.keys(r).length>0?r:void 0}}generateCSSRules(e,t){const s=[];if(Object.keys(t).length>0){const o=this.generateCSSRule(this.options.selector,t);s.push(o)}const r=this.groupQueriesByMediaQuery(e);for(const[o,n]of Object.entries(r)){if(o==="")continue;const c={};for(const u of n)Object.assign(c,u.styles);const i=this.generateMediaQueryRule(o,this.options.selector,c);s.push(i)}return s}groupQueriesByMediaQuery(e){const t={};for(const s of e)t[s.query]||(t[s.query]=[]),t[s.query].push(s);return t}generateCSSRule(e,t){const{generateMinified:s,includeComments:r}=this.options,o=s?"":"  ",n=s?"":`
+`,c=s?"":" ";let i=`${e}${c}{${n}`;for(const[u,a]of Object.entries(t))i+=`${o}${u}:${c}${a};${n}`;return i+=`}${n}`,r&&!s&&(i=`/* Base styles (mobile-first) */${n}${i}`),i}generateMediaQueryRule(e,t,s){const{generateMinified:r,includeComments:o}=this.options,n=r?"":"  ",c=r?"":"    ",i=r?"":`
+`,u=r?"":" ";let a=`@media ${e}${u}{${i}`;a+=`${n}${t}${u}{${i}`;for(const[d,p]of Object.entries(s))a+=`${c}${d}:${u}${p};${i}`;return a+=`${n}}${i}`,a+=`}${i}`,o&&!r&&(a=`/* ${this.getBreakpointFromQuery(e)} styles */${i}${a}`),a}toCSSProperty(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}formatCSSValue(e,t){if(t==null)return"inherit";if(typeof t=="number"){const s=["opacity","z-index","font-weight","line-height","flex-grow","flex-shrink","order","grid-column-start","grid-column-end","grid-row-start","grid-row-end"],r=this.toCSSProperty(e);if(s.includes(r))return this.addImportantIfNeeded(e,t.toString());if(["width","height","min-width","max-width","min-height","max-height","padding","margin","border-width","border-radius","top","right","bottom","left","font-size","letter-spacing","text-indent"].some(n=>r.includes(n)))return this.addImportantIfNeeded(e,`${t}px`)}return this.addImportantIfNeeded(e,t.toString())}addImportantIfNeeded(e,t){const s=["flexDirection","flex-direction","justifyContent","justify-content","alignItems","align-items","display"],r=this.toCSSProperty(e);return s.includes(e)||s.includes(r)?`${t} !important`:t}toCSSPropertyName(e){return this.toCSSProperty(e)}getBreakpointFromQuery(e){const t=h.getCurrentBreakpointConfig();for(const[s,r]of Object.entries(t))if(e.includes(r))return s;return"custom"}}function b(l,e,t,s){if(!y.isResponsiveValue(t)){const c=e.replace(/[A-Z]/g,u=>`-${u.toLowerCase()}`),i=typeof t=="number"?`${t}px`:t.toString();return[`${l} { ${c}: ${i}; }`]}const r=new g({selector:l,...s}),o={[e]:t};return r.generateResponsiveCSS(o).cssRules}function C(l,e,t){const{generateMinified:s=!1}=t||{},r=s?"":"  ",o=s?"":`
+`,n=s?"":" ";let c=`@media ${e.query}${n}{${o}`;c+=`${r}${l}${n}{${o}`;for(const[i,u]of Object.entries(e.styles)){const a=i.replace(/[A-Z]/g,p=>`-${p.toLowerCase()}`),d=typeof u=="number"?`${u}px`:u.toString();c+=`${r}${r}${a}:${n}${d};${o}`}return c+=`${r}}${o}`,c+=`}${o}`,c}class S{static getStyleSheet(){if(this.styleSheet)return this.styleSheet;const e=document.createElement("style");return e.setAttribute("data-tachui-responsive","true"),document.head.appendChild(e),this.styleSheet=e.sheet,this.styleSheet}static injectCSS(e){if(typeof document>"u")return;const t=this.getStyleSheet();for(const s of e)if(!this.injectedRules.has(s))try{t.insertRule(s,t.cssRules.length),this.injectedRules.add(s)}catch(r){console.warn("Failed to inject CSS rule:",s,r)}}static clearCSS(){if(this.styleSheet){for(;this.styleSheet.cssRules.length>0;)this.styleSheet.deleteRule(0);this.injectedRules.clear()}}static hasRule(e){return this.injectedRules.has(e)}}f(S,"styleSheet",null);f(S,"injectedRules",new Set);exports.CSSInjector=S;exports.ResponsiveCSSGenerator=g;exports.generateCustomMediaQuery=C;exports.generateResponsiveProperty=b;
+//# sourceMappingURL=css-generator.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.cjs","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":"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"}

package/dist/modifiers/responsive/css-generator.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Responsive CSS Generation Engine
+ *
+ * Generates optimized CSS media queries from responsive modifier configurations.
+ * Supports mobile-first design patterns and advanced media query features.
+ */
+import { ResponsiveValue, ResponsiveStyleConfig, MediaQueryConfig, ResponsiveModifierResult } from './types';
+/**
+ * CSS generation options
+ */
+export interface CSSGenerationOptions {
+    selector: string;
+    generateMinified?: boolean;
+    includeComments?: boolean;
+    optimizeOutput?: boolean;
+    mobileFirst?: boolean;
+}
+/**
+ * Main CSS generation class
+ */
+export declare class ResponsiveCSSGenerator {
+    private options;
+    constructor(options: CSSGenerationOptions);
+    /**
+     * Generate complete responsive CSS from a style configuration
+     */
+    generateResponsiveCSS(config: ResponsiveStyleConfig): ResponsiveModifierResult;
+    /**
+     * Generate media queries for a single property
+     */
+    private generatePropertyMediaQueries;
+    /**
+     * Generate CSS rules from media queries and base styles
+     */
+    private generateCSSRules;
+    /**
+     * Group media queries by their query string for optimization
+     */
+    private groupQueriesByMediaQuery;
+    /**
+     * Generate a single CSS rule
+     */
+    private generateCSSRule;
+    /**
+     * Generate a CSS media query rule
+     */
+    private generateMediaQueryRule;
+    /**
+     * Convert camelCase property to CSS kebab-case
+     */
+    private toCSSProperty;
+    /**
+     * Format CSS value with appropriate units and validation
+     */
+    private formatCSSValue;
+    /**
+     * Add !important for properties that need to override base component styles
+     */
+    private addImportantIfNeeded;
+    /**
+     * Convert property name to appropriate CSS property (including custom properties)
+     */
+    private toCSSPropertyName;
+    /**
+     * Extract breakpoint name from media query for comments
+     */
+    private getBreakpointFromQuery;
+}
+/**
+ * Utility function to generate responsive CSS for a single property
+ */
+export declare function generateResponsiveProperty(selector: string, property: string, value: ResponsiveValue<any>, options?: Partial<CSSGenerationOptions>): string[];
+/**
+ * Utility function to generate media query for custom conditions
+ */
+export declare function generateCustomMediaQuery(selector: string, mediaQueryConfig: MediaQueryConfig, options?: Partial<CSSGenerationOptions>): string;
+/**
+ * CSS injection utilities for runtime application
+ */
+export declare class CSSInjector {
+    private static styleSheet;
+    private static injectedRules;
+    /**
+     * Get or create the tachUI responsive stylesheet
+     */
+    private static getStyleSheet;
+    /**
+     * Inject CSS rules into the document
+     */
+    static injectCSS(rules: string[]): void;
+    /**
+     * Clear all injected responsive CSS
+     */
+    static clearCSS(): void;
+    /**
+     * Check if a rule has been injected
+     */
+    static hasRule(rule: string): boolean;
+}
+//# sourceMappingURL=css-generator.d.ts.map

package/dist/modifiers/responsive/css-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAEL,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAEhB,wBAAwB,EAEzB,MAAM,SAAS,CAAA;AAOhB;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;GAEG;AACH,qBAAa,sBAAsB;IACjC,OAAO,CAAC,OAAO,CAAgC;gBAEnC,OAAO,EAAE,oBAAoB;IAUzC;;OAEG;IACH,qBAAqB,CAAC,MAAM,EAAE,qBAAqB,GAAG,wBAAwB;IAkC9E;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAmCpC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IA+BxB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAahC;;OAEG;IACH,OAAO,CAAC,eAAe;IAqBvB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IA6B9B;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;IACH,OAAO,CAAC,cAAc;IAiCtB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgB5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;IACH,OAAO,CAAC,sBAAsB;CAW/B;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,EAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACtC,MAAM,EAAE,CAaV;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,MAAM,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACtC,MAAM,CAmBR;AAED;;GAEG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,UAAU,CAA6B;IACtD,OAAO,CAAC,MAAM,CAAC,aAAa,CAAoB;IAEhD;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAa5B;;OAEG;IACH,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IAqBvC;;OAEG;IACH,MAAM,CAAC,QAAQ,IAAI,IAAI;IASvB;;OAEG;IACH,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;CAGtC"}

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

@@ -0,0 +1,261 @@
+import { isResponsiveValue as h } from "./types.js";
+import { getSortedBreakpoints as y, generateMediaQuery as g, getCurrentBreakpointConfig as m } from "./breakpoints.js";
+var $ = Object.defineProperty, b = (a, e, t) => e in a ? $(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t, f = (a, e, t) => b(a, typeof e != "symbol" ? e + "" : e, t);
+class C {
+  constructor(e) {
+    f(this, "options"), this.options = {
+      generateMinified: !1,
+      includeComments: !0,
+      optimizeOutput: !0,
+      mobileFirst: !0,
+      ...e
+    };
+  }
+  /**
+   * Generate complete responsive CSS from a style configuration
+   */
+  generateResponsiveCSS(e) {
+    const t = [], s = [], r = {};
+    let o = !1;
+    for (const [n, c] of Object.entries(e))
+      if (h(c)) {
+        o = !0;
+        const i = this.generatePropertyMediaQueries(n, c);
+        t.push(...i.mediaQueries), i.baseStyles && Object.assign(r, i.baseStyles);
+      } else
+        r[this.toCSSPropertyName(n)] = this.formatCSSValue(n, c);
+    return s.push(...this.generateCSSRules(t, r)), {
+      cssRules: s,
+      mediaQueries: t,
+      fallbackStyles: r,
+      hasResponsiveStyles: o
+    };
+  }
+  /**
+   * Generate media queries for a single property
+   */
+  generatePropertyMediaQueries(e, t) {
+    const s = [], r = {}, o = y();
+    for (const n of o) {
+      const c = t[n];
+      if (c === void 0) continue;
+      const i = this.toCSSPropertyName(e), u = this.formatCSSValue(e, c);
+      if (n === "base")
+        r[i] = u;
+      else {
+        const l = g(n), d = { [i]: u };
+        s.push({
+          breakpoint: n,
+          query: l,
+          styles: d,
+          selector: this.options.selector
+        });
+      }
+    }
+    return { mediaQueries: s, baseStyles: Object.keys(r).length > 0 ? r : void 0 };
+  }
+  /**
+   * Generate CSS rules from media queries and base styles
+   */
+  generateCSSRules(e, t) {
+    const s = [];
+    if (Object.keys(t).length > 0) {
+      const o = this.generateCSSRule(this.options.selector, t);
+      s.push(o);
+    }
+    const r = this.groupQueriesByMediaQuery(e);
+    for (const [o, n] of Object.entries(r)) {
+      if (o === "") continue;
+      const c = {};
+      for (const u of n)
+        Object.assign(c, u.styles);
+      const i = this.generateMediaQueryRule(o, this.options.selector, c);
+      s.push(i);
+    }
+    return s;
+  }
+  /**
+   * Group media queries by their query string for optimization
+   */
+  groupQueriesByMediaQuery(e) {
+    const t = {};
+    for (const s of e)
+      t[s.query] || (t[s.query] = []), t[s.query].push(s);
+    return t;
+  }
+  /**
+   * Generate a single CSS rule
+   */
+  generateCSSRule(e, t) {
+    const { generateMinified: s, includeComments: r } = this.options, o = s ? "" : "  ", n = s ? "" : `
+`, c = s ? "" : " ";
+    let i = `${e}${c}{${n}`;
+    for (const [u, l] of Object.entries(t))
+      i += `${o}${u}:${c}${l};${n}`;
+    return i += `}${n}`, r && !s && (i = `/* Base styles (mobile-first) */${n}${i}`), i;
+  }
+  /**
+   * Generate a CSS media query rule
+   */
+  generateMediaQueryRule(e, t, s) {
+    const { generateMinified: r, includeComments: o } = this.options, n = r ? "" : "  ", c = r ? "" : "    ", i = r ? "" : `
+`, u = r ? "" : " ";
+    let l = `@media ${e}${u}{${i}`;
+    l += `${n}${t}${u}{${i}`;
+    for (const [d, p] of Object.entries(s))
+      l += `${c}${d}:${u}${p};${i}`;
+    return l += `${n}}${i}`, l += `}${i}`, o && !r && (l = `/* ${this.getBreakpointFromQuery(e)} styles */${i}${l}`), l;
+  }
+  /**
+   * Convert camelCase property to CSS kebab-case
+   */
+  toCSSProperty(e) {
+    return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
+  }
+  /**
+   * Format CSS value with appropriate units and validation
+   */
+  formatCSSValue(e, t) {
+    if (t == null)
+      return "inherit";
+    if (typeof t == "number") {
+      const s = [
+        "opacity",
+        "z-index",
+        "font-weight",
+        "line-height",
+        "flex-grow",
+        "flex-shrink",
+        "order",
+        "grid-column-start",
+        "grid-column-end",
+        "grid-row-start",
+        "grid-row-end"
+      ], r = this.toCSSProperty(e);
+      if (s.includes(r))
+        return this.addImportantIfNeeded(e, t.toString());
+      if ([
+        "width",
+        "height",
+        "min-width",
+        "max-width",
+        "min-height",
+        "max-height",
+        "padding",
+        "margin",
+        "border-width",
+        "border-radius",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "font-size",
+        "letter-spacing",
+        "text-indent"
+      ].some((n) => r.includes(n)))
+        return this.addImportantIfNeeded(e, `${t}px`);
+    }
+    return this.addImportantIfNeeded(e, t.toString());
+  }
+  /**
+   * Add !important for properties that need to override base component styles
+   */
+  addImportantIfNeeded(e, t) {
+    const s = [
+      "flexDirection",
+      "flex-direction",
+      "justifyContent",
+      "justify-content",
+      "alignItems",
+      "align-items",
+      "display"
+    ], r = this.toCSSProperty(e);
+    return s.includes(e) || s.includes(r) ? `${t} !important` : t;
+  }
+  /**
+   * Convert property name to appropriate CSS property (including custom properties)
+   */
+  toCSSPropertyName(e) {
+    return this.toCSSProperty(e);
+  }
+  /**
+   * Extract breakpoint name from media query for comments
+   */
+  getBreakpointFromQuery(e) {
+    const t = m();
+    for (const [s, r] of Object.entries(t))
+      if (e.includes(r))
+        return s;
+    return "custom";
+  }
+}
+function j(a, e, t, s) {
+  if (!h(t)) {
+    const c = e.replace(/[A-Z]/g, (u) => `-${u.toLowerCase()}`), i = typeof t == "number" ? `${t}px` : t.toString();
+    return [`${a} { ${c}: ${i}; }`];
+  }
+  const r = new C({ selector: a, ...s }), o = { [e]: t };
+  return r.generateResponsiveCSS(o).cssRules;
+}
+function w(a, e, t) {
+  const { generateMinified: s = !1 } = t || {}, r = s ? "" : "  ", o = s ? "" : `
+`, n = s ? "" : " ";
+  let c = `@media ${e.query}${n}{${o}`;
+  c += `${r}${a}${n}{${o}`;
+  for (const [i, u] of Object.entries(e.styles)) {
+    const l = i.replace(/[A-Z]/g, (p) => `-${p.toLowerCase()}`), d = typeof u == "number" ? `${u}px` : u.toString();
+    c += `${r}${r}${l}:${n}${d};${o}`;
+  }
+  return c += `${r}}${o}`, c += `}${o}`, c;
+}
+class S {
+  /**
+   * Get or create the tachUI responsive stylesheet
+   */
+  static getStyleSheet() {
+    if (this.styleSheet)
+      return this.styleSheet;
+    const e = document.createElement("style");
+    return e.setAttribute("data-tachui-responsive", "true"), document.head.appendChild(e), this.styleSheet = e.sheet, this.styleSheet;
+  }
+  /**
+   * Inject CSS rules into the document
+   */
+  static injectCSS(e) {
+    if (typeof document > "u")
+      return;
+    const t = this.getStyleSheet();
+    for (const s of e)
+      if (!this.injectedRules.has(s))
+        try {
+          t.insertRule(s, t.cssRules.length), this.injectedRules.add(s);
+        } catch (r) {
+          console.warn("Failed to inject CSS rule:", s, r);
+        }
+  }
+  /**
+   * Clear all injected responsive CSS
+   */
+  static clearCSS() {
+    if (this.styleSheet) {
+      for (; this.styleSheet.cssRules.length > 0; )
+        this.styleSheet.deleteRule(0);
+      this.injectedRules.clear();
+    }
+  }
+  /**
+   * Check if a rule has been injected
+   */
+  static hasRule(e) {
+    return this.injectedRules.has(e);
+  }
+}
+f(S, "styleSheet", null);
+f(S, "injectedRules", /* @__PURE__ */ new Set());
+export {
+  S as CSSInjector,
+  C as ResponsiveCSSGenerator,
+  w as generateCustomMediaQuery,
+  j as generateResponsiveProperty
+};
+//# sourceMappingURL=css-generator.js.map

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

@@ -0,0 +1 @@
+{"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":"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"}

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

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