@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

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

@@ -1 +0,0 @@
-{"version":3,"file":"dev-tools.js","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/layout-patterns.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./responsive-modifier.cjs");class p{static autoFit(e){const t={};if(typeof e.minColumnWidth=="object"){t.gridTemplateColumns={};for(const[a,r]of Object.entries(e.minColumnWidth)){const s=typeof r=="number"?`${r}px`:r,o=e.maxColumns&&typeof e.maxColumns=="object"?e.maxColumns[a]||"auto":e.maxColumns||"auto";t.gridTemplateColumns[a]=o==="auto"?`repeat(auto-fit, minmax(${s}, 1fr))`:`repeat(${o}, minmax(${s}, 1fr))`}}else{const a=typeof e.minColumnWidth=="number"?`${e.minColumnWidth}px`:e.minColumnWidth,r=e.maxColumns||"auto";t.gridTemplateColumns=r==="auto"?`repeat(auto-fit, minmax(${a}, 1fr))`:`repeat(${r}, minmax(${a}, 1fr))`}return e.gap&&(t.gap=e.gap),t.display="grid",i.createResponsiveModifier(t)}static columns(e,t){const a={display:"grid",gridTemplateColumns:typeof e=="object"?Object.fromEntries(Object.entries(e).map(([r,s])=>[r,`repeat(${s}, 1fr)`])):`repeat(${e}, 1fr)`};return t?.gap&&(a.gap=t.gap),t?.rowGap&&(a.rowGap=t.rowGap),t?.autoRows&&(a.gridAutoRows=t.autoRows),i.createResponsiveModifier(a)}static masonry(e){const t={display:"grid",gridTemplateColumns:typeof e.columns=="object"?Object.fromEntries(Object.entries(e.columns).map(([a,r])=>[a,`repeat(${r}, 1fr)`])):`repeat(${e.columns}, 1fr)`,gridAutoRows:"max-content"};return e.gap&&(t.gap=e.gap),i.createResponsiveModifier(t)}}class l{static stackToRow(e){const a={display:"flex",flexDirection:{base:"column",[e?.stackBreakpoint||"md"]:"row"}};return e?.gap&&(a.gap=e.gap),e?.align&&(a.alignItems=e.align),e?.justify&&(a.justifyContent=e.justify),i.createResponsiveModifier(a)}static wrap(e){const t={display:"flex",flexWrap:"wrap",...e};return i.createResponsiveModifier(t)}static center(e="row"){const t={display:"flex",flexDirection:e,justifyContent:"center",alignItems:"center"};return i.createResponsiveModifier(t)}static spaceBetween(e="row"){const t={display:"flex",flexDirection:e,justifyContent:"space-between",alignItems:"center"};return i.createResponsiveModifier(t)}}class d{static container(e){const t={width:"100%",marginLeft:"auto",marginRight:"auto"};return e?.maxWidth?t.maxWidth=e.maxWidth:t.maxWidth={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},e?.padding&&(t.paddingLeft=e.padding,t.paddingRight=e.padding),e?.margin&&(t.marginTop=e.margin,t.marginBottom=e.margin),i.createResponsiveModifier(t)}static fullWidth(){return i.createResponsiveModifier({width:"100vw",marginLeft:"calc(-50vw + 50%)",marginRight:"calc(-50vw + 50%)"})}static section(e){const t={};return e?.paddingY&&(t.paddingTop=e.paddingY,t.paddingBottom=e.paddingY),e?.paddingX&&(t.paddingLeft=e.paddingX,t.paddingRight=e.paddingX),e?.maxWidth&&(t.maxWidth=e.maxWidth,t.marginLeft="auto",t.marginRight="auto"),i.createResponsiveModifier(t)}}class m{static showOn(e){const t={display:{}};for(const a of e)t.display[a]="block";return i.createResponsiveModifier(t)}static hideOn(e){const t={display:{}};for(const a of e)t.display[a]="none";return i.createResponsiveModifier(t)}static mobileOnly(){return i.createResponsiveModifier({display:{base:"block",md:"none"}})}static desktopOnly(){return i.createResponsiveModifier({display:{base:"none",md:"block"}})}static tabletOnly(){return i.createResponsiveModifier({display:{base:"none",md:"block",lg:"none"}})}}class u{static padding(e){const t={};return e.all&&(t.padding=e.all),e.horizontal&&(t.paddingLeft=e.horizontal,t.paddingRight=e.horizontal),e.vertical&&(t.paddingTop=e.vertical,t.paddingBottom=e.vertical),e.top&&(t.paddingTop=e.top),e.right&&(t.paddingRight=e.right),e.bottom&&(t.paddingBottom=e.bottom),e.left&&(t.paddingLeft=e.left),i.createResponsiveModifier(t)}static margin(e){const t={};return e.all&&(t.margin=e.all),e.horizontal&&(t.marginLeft=e.horizontal,t.marginRight=e.horizontal),e.vertical&&(t.marginTop=e.vertical,t.marginBottom=e.vertical),e.top&&(t.marginTop=e.top),e.right&&(t.marginRight=e.right),e.bottom&&(t.marginBottom=e.bottom),e.left&&(t.marginLeft=e.left),i.createResponsiveModifier(t)}static gap(e){const t={};return e.all&&(t.gap=e.all),e.column&&(t.columnGap=e.column),e.row&&(t.rowGap=e.row),i.createResponsiveModifier(t)}}class x{static scale(e){const t={fontSize:e.base};if(e.scale&&typeof e.scale=="object"){t.fontSize={};for(const[a,r]of Object.entries(e.scale)){const s=typeof e.base=="number"?e.base:parseFloat(e.base);t.fontSize[a]=`${s*r}px`}}return e.lineHeight&&(t.lineHeight=e.lineHeight),i.createResponsiveModifier(t)}static fluid(e){const t=e.minBreakpoint||"320px",a=e.maxBreakpoint||"1200px",r=typeof e.minSize=="number"?`${e.minSize}px`:e.minSize,s=typeof e.maxSize=="number"?`${e.maxSize}px`:e.maxSize;return i.createResponsiveModifier({fontSize:`clamp(${r}, calc(${r} + (${s} - ${r}) * ((100vw - ${t}) / (${a} - ${t}))), ${s})`})}}exports.Container=d;exports.Flex=l;exports.ResponsiveContainerPatterns=d;exports.ResponsiveFlexPatterns=l;exports.ResponsiveGrid=p;exports.ResponsiveGridPatterns=p;exports.ResponsiveSpacingPatterns=u;exports.ResponsiveTypography=x;exports.ResponsiveTypographyPatterns=x;exports.ResponsiveVisibilityPatterns=m;exports.Spacing=u;exports.Visibility=m;
-//# sourceMappingURL=layout-patterns.cjs.map

package/dist/modifiers/responsive/layout-patterns.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-patterns.cjs","sources":["../../../src/modifiers/responsive/layout-patterns.ts"],"sourcesContent":["/**\n * Responsive Layout Utility Patterns\n * \n * Provides common responsive layout patterns and utilities that make it easy\n * to create responsive designs without writing custom CSS for every use case.\n */\n\nimport { \n  ResponsiveValue, \n  BreakpointKey, \n  ResponsiveSpacingConfig\n} from './types'\nimport { createResponsiveModifier } from './responsive-modifier'\n\n/**\n * Configuration for responsive grid layout\n */\nexport interface ResponsiveGridConfig {\n  columns?: ResponsiveValue<number>\n  rows?: ResponsiveValue<number>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n  autoFlow?: ResponsiveValue<'row' | 'column' | 'row dense' | 'column dense'>\n  autoRows?: ResponsiveValue<string>\n  autoColumns?: ResponsiveValue<string>\n  templateAreas?: ResponsiveValue<string>\n}\n\n/**\n * Configuration for responsive flexbox layout\n */\nexport interface ResponsiveFlexConfig {\n  direction?: ResponsiveValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n  alignContent?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n}\n\n/**\n * Configuration for responsive container layout\n */\nexport interface ResponsiveContainerConfig {\n  maxWidth?: ResponsiveValue<string | number>\n  width?: ResponsiveValue<string | number>\n  padding?: ResponsiveValue<string | number>\n  margin?: ResponsiveValue<string | number>\n  centerContent?: ResponsiveValue<boolean>\n}\n\n\n/**\n * Responsive Grid Layout Utilities\n */\nexport class ResponsiveGridPatterns {\n  /**\n   * Create a responsive grid with automatic column sizing\n   */\n  static autoFit(config: {\n    minColumnWidth: ResponsiveValue<string | number>\n    gap?: ResponsiveValue<string | number>\n    maxColumns?: ResponsiveValue<number>\n  }) {\n    const gridConfig: any = {}\n    \n    if (typeof config.minColumnWidth === 'object') {\n      // Handle responsive minColumnWidth\n      gridConfig.gridTemplateColumns = {}\n      for (const [breakpoint, width] of Object.entries(config.minColumnWidth)) {\n        const widthValue = typeof width === 'number' ? `${width}px` : width\n        const maxCols = config.maxColumns && typeof config.maxColumns === 'object' \n          ? config.maxColumns[breakpoint as BreakpointKey] || 'auto'\n          : config.maxColumns || 'auto'\n        \n        gridConfig.gridTemplateColumns[breakpoint] = maxCols === 'auto' \n          ? `repeat(auto-fit, minmax(${widthValue}, 1fr))`\n          : `repeat(${maxCols}, minmax(${widthValue}, 1fr))`\n      }\n    } else {\n      const widthValue = typeof config.minColumnWidth === 'number' ? `${config.minColumnWidth}px` : config.minColumnWidth\n      const maxCols = config.maxColumns || 'auto'\n      gridConfig.gridTemplateColumns = maxCols === 'auto'\n        ? `repeat(auto-fit, minmax(${widthValue}, 1fr))`\n        : `repeat(${maxCols}, minmax(${widthValue}, 1fr))`\n    }\n    \n    if (config.gap) {\n      gridConfig.gap = config.gap\n    }\n    \n    gridConfig.display = 'grid'\n    \n    return createResponsiveModifier(gridConfig)\n  }\n  \n  /**\n   * Create a responsive grid with explicit column counts\n   */\n  static columns(columns: ResponsiveValue<number>, config?: {\n    gap?: ResponsiveValue<string | number>\n    rowGap?: ResponsiveValue<string | number>\n    autoRows?: ResponsiveValue<string>\n  }) {\n    const gridConfig: any = {\n      display: 'grid',\n      gridTemplateColumns: typeof columns === 'object' \n        ? Object.fromEntries(\n            Object.entries(columns).map(([bp, cols]) => [bp, `repeat(${cols}, 1fr)`])\n          )\n        : `repeat(${columns}, 1fr)`\n    }\n    \n    if (config?.gap) gridConfig.gap = config.gap\n    if (config?.rowGap) gridConfig.rowGap = config.rowGap\n    if (config?.autoRows) gridConfig.gridAutoRows = config.autoRows\n    \n    return createResponsiveModifier(gridConfig)\n  }\n  \n  /**\n   * Create responsive masonry-style grid\n   */\n  static masonry(config: {\n    columns: ResponsiveValue<number>\n    gap?: ResponsiveValue<string | number>\n  }) {\n    const gridConfig: any = {\n      display: 'grid',\n      gridTemplateColumns: typeof config.columns === 'object'\n        ? Object.fromEntries(\n            Object.entries(config.columns).map(([bp, cols]) => [bp, `repeat(${cols}, 1fr)`])\n          )\n        : `repeat(${config.columns}, 1fr)`,\n      gridAutoRows: 'max-content'\n    }\n    \n    if (config.gap) gridConfig.gap = config.gap\n    \n    return createResponsiveModifier(gridConfig)\n  }\n}\n\n/**\n * Responsive Flexbox Layout Utilities\n */\nexport class ResponsiveFlexPatterns {\n  /**\n   * Create a responsive flex container that stacks on mobile, flows horizontally on desktop\n   */\n  static stackToRow(config?: {\n    stackBreakpoint?: BreakpointKey\n    gap?: ResponsiveValue<string | number>\n    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  }) {\n    const stackBreakpoint = config?.stackBreakpoint || 'md'\n    \n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: {\n        base: 'column',\n        [stackBreakpoint]: 'row'\n      }\n    }\n    \n    if (config?.gap) flexConfig.gap = config.gap\n    if (config?.align) flexConfig.alignItems = config.align\n    if (config?.justify) flexConfig.justifyContent = config.justify\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create a responsive flex container with wrapping behavior\n   */\n  static wrap(config?: ResponsiveFlexConfig) {\n    const flexConfig: any = {\n      display: 'flex',\n      flexWrap: 'wrap',\n      ...config\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create centered flex layout\n   */\n  static center(direction: ResponsiveValue<'row' | 'column'> = 'row') {\n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: direction,\n      justifyContent: 'center',\n      alignItems: 'center'\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create space-between flex layout\n   */\n  static spaceBetween(direction: ResponsiveValue<'row' | 'column'> = 'row') {\n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: direction,\n      justifyContent: 'space-between',\n      alignItems: 'center'\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n}\n\n/**\n * Responsive Container Utilities\n */\nexport class ResponsiveContainerPatterns {\n  /**\n   * Create a responsive container with max-width constraints\n   */\n  static container(config?: ResponsiveContainerConfig) {\n    const containerConfig: any = {\n      width: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n    \n    if (config?.maxWidth) {\n      containerConfig.maxWidth = config.maxWidth\n    } else {\n      // Default responsive max-widths\n      containerConfig.maxWidth = {\n        sm: '640px',\n        md: '768px',\n        lg: '1024px',\n        xl: '1280px',\n        '2xl': '1536px'\n      }\n    }\n    \n    if (config?.padding) {\n      containerConfig.paddingLeft = config.padding\n      containerConfig.paddingRight = config.padding\n    }\n    \n    if (config?.margin) {\n      containerConfig.marginTop = config.margin\n      containerConfig.marginBottom = config.margin\n    }\n    \n    return createResponsiveModifier(containerConfig)\n  }\n  \n  /**\n   * Create a full-width container that breaks out of constraints\n   */\n  static fullWidth() {\n    return createResponsiveModifier({\n      width: '100vw',\n      marginLeft: 'calc(-50vw + 50%)',\n      marginRight: 'calc(-50vw + 50%)'\n    })\n  }\n  \n  /**\n   * Create a section container with responsive padding\n   */\n  static section(config?: {\n    paddingY?: ResponsiveValue<string | number>\n    paddingX?: ResponsiveValue<string | number>\n    maxWidth?: ResponsiveValue<string | number>\n  }) {\n    const sectionConfig: any = {}\n    \n    if (config?.paddingY) {\n      sectionConfig.paddingTop = config.paddingY\n      sectionConfig.paddingBottom = config.paddingY\n    }\n    \n    if (config?.paddingX) {\n      sectionConfig.paddingLeft = config.paddingX\n      sectionConfig.paddingRight = config.paddingX\n    }\n    \n    if (config?.maxWidth) {\n      sectionConfig.maxWidth = config.maxWidth\n      sectionConfig.marginLeft = 'auto'\n      sectionConfig.marginRight = 'auto'\n    }\n    \n    return createResponsiveModifier(sectionConfig)\n  }\n}\n\n/**\n * Responsive Visibility Utilities\n */\nexport class ResponsiveVisibilityPatterns {\n  /**\n   * Show element only on specific breakpoints\n   */\n  static showOn(breakpoints: BreakpointKey[]) {\n    const displayConfig: any = {\n      display: {} // Start with empty object\n    }\n    \n    // Show on specified breakpoints\n    for (const breakpoint of breakpoints) {\n      displayConfig.display[breakpoint] = 'block'\n    }\n    \n    return createResponsiveModifier(displayConfig)\n  }\n  \n  /**\n   * Hide element only on specific breakpoints\n   */\n  static hideOn(breakpoints: BreakpointKey[]) {\n    const displayConfig: any = {\n      display: {} // Start with empty object\n    }\n    \n    // Hide on specified breakpoints\n    for (const breakpoint of breakpoints) {\n      displayConfig.display[breakpoint] = 'none'\n    }\n    \n    return createResponsiveModifier(displayConfig)\n  }\n  \n  /**\n   * Show on mobile, hide on desktop\n   */\n  static mobileOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'block',\n        md: 'none'\n      }\n    })\n  }\n  \n  /**\n   * Hide on mobile, show on desktop\n   */\n  static desktopOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'none',\n        md: 'block'\n      }\n    })\n  }\n  \n  /**\n   * Show only on tablet breakpoint\n   */\n  static tabletOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'none',\n        md: 'block',\n        lg: 'none'\n      }\n    })\n  }\n}\n\n/**\n * Responsive Spacing Utilities\n */\nexport class ResponsiveSpacingPatterns {\n  /**\n   * Create responsive padding\n   */\n  static padding(config: ResponsiveSpacingConfig) {\n    const paddingConfig: any = {}\n    \n    if (config.all) paddingConfig.padding = config.all\n    if (config.horizontal) {\n      paddingConfig.paddingLeft = config.horizontal\n      paddingConfig.paddingRight = config.horizontal\n    }\n    if (config.vertical) {\n      paddingConfig.paddingTop = config.vertical\n      paddingConfig.paddingBottom = config.vertical\n    }\n    if (config.top) paddingConfig.paddingTop = config.top\n    if (config.right) paddingConfig.paddingRight = config.right\n    if (config.bottom) paddingConfig.paddingBottom = config.bottom\n    if (config.left) paddingConfig.paddingLeft = config.left\n    \n    return createResponsiveModifier(paddingConfig)\n  }\n  \n  /**\n   * Create responsive margin\n   */\n  static margin(config: ResponsiveSpacingConfig) {\n    const marginConfig: any = {}\n    \n    if (config.all) marginConfig.margin = config.all\n    if (config.horizontal) {\n      marginConfig.marginLeft = config.horizontal\n      marginConfig.marginRight = config.horizontal\n    }\n    if (config.vertical) {\n      marginConfig.marginTop = config.vertical\n      marginConfig.marginBottom = config.vertical\n    }\n    if (config.top) marginConfig.marginTop = config.top\n    if (config.right) marginConfig.marginRight = config.right\n    if (config.bottom) marginConfig.marginBottom = config.bottom\n    if (config.left) marginConfig.marginLeft = config.left\n    \n    return createResponsiveModifier(marginConfig)\n  }\n  \n  /**\n   * Create responsive gap (for flexbox and grid)\n   */\n  static gap(config: {\n    all?: ResponsiveValue<string | number>\n    column?: ResponsiveValue<string | number>\n    row?: ResponsiveValue<string | number>\n  }) {\n    const gapConfig: any = {}\n    \n    if (config.all) gapConfig.gap = config.all\n    if (config.column) gapConfig.columnGap = config.column\n    if (config.row) gapConfig.rowGap = config.row\n    \n    return createResponsiveModifier(gapConfig)\n  }\n}\n\n/**\n * Responsive Typography Utilities\n */\nexport class ResponsiveTypographyPatterns {\n  /**\n   * Create responsive font scale\n   */\n  static scale(config: {\n    base: string | number\n    scale?: ResponsiveValue<number>\n    lineHeight?: ResponsiveValue<number | string>\n  }) {\n    const typographyConfig: any = {\n      fontSize: config.base\n    }\n    \n    if (config.scale && typeof config.scale === 'object') {\n      typographyConfig.fontSize = {}\n      for (const [breakpoint, scaleValue] of Object.entries(config.scale)) {\n        const baseSize = typeof config.base === 'number' ? config.base : parseFloat(config.base)\n        typographyConfig.fontSize[breakpoint] = `${baseSize * scaleValue}px`\n      }\n    }\n    \n    if (config.lineHeight) {\n      typographyConfig.lineHeight = config.lineHeight\n    }\n    \n    return createResponsiveModifier(typographyConfig)\n  }\n  \n  /**\n   * Create fluid typography that scales smoothly\n   */\n  static fluid(config: {\n    minSize: string | number\n    maxSize: string | number\n    minBreakpoint?: string\n    maxBreakpoint?: string\n  }) {\n    const minBp = config.minBreakpoint || '320px'\n    const maxBp = config.maxBreakpoint || '1200px'\n    const minSize = typeof config.minSize === 'number' ? `${config.minSize}px` : config.minSize\n    const maxSize = typeof config.maxSize === 'number' ? `${config.maxSize}px` : config.maxSize\n    \n    return createResponsiveModifier({\n      fontSize: `clamp(${minSize}, calc(${minSize} + (${maxSize} - ${minSize}) * ((100vw - ${minBp}) / (${maxBp} - ${minBp}))), ${maxSize})`\n    })\n  }\n}\n\n/**\n * Common Layout Patterns\n */\nexport const LayoutPatterns = {\n  /**\n   * Sidebar layout that collapses on mobile\n   */\n  sidebar: (config?: {\n    sidebarWidth?: ResponsiveValue<string | number>\n    collapseBreakpoint?: BreakpointKey\n    gap?: ResponsiveValue<string | number>\n  }) => {\n    const collapseBreakpoint = config?.collapseBreakpoint || 'md'\n    const sidebarWidth = config?.sidebarWidth || '250px'\n    \n    return createResponsiveModifier({\n      display: 'grid',\n      gridTemplateColumns: {\n        base: '1fr',\n        [collapseBreakpoint]: `${sidebarWidth} 1fr`\n      },\n      gap: config?.gap || '1rem'\n    })\n  },\n  \n  /**\n   * Holy grail layout (header, footer, sidebar, main content)\n   */\n  holyGrail: (config?: {\n    headerHeight?: ResponsiveValue<string | number>\n    footerHeight?: ResponsiveValue<string | number>\n    sidebarWidth?: ResponsiveValue<string | number>\n    collapseBreakpoint?: BreakpointKey\n  }) => {\n    const collapseBreakpoint = config?.collapseBreakpoint || 'lg'\n    \n    return createResponsiveModifier({\n      display: 'grid',\n      gridTemplateAreas: {\n        base: '\"header\" \"main\" \"footer\"',\n        [collapseBreakpoint]: '\"header header\" \"sidebar main\" \"footer footer\"'\n      },\n      gridTemplateRows: {\n        base: `${config?.headerHeight || 'auto'} 1fr ${config?.footerHeight || 'auto'}`,\n        [collapseBreakpoint]: `${config?.headerHeight || 'auto'} 1fr ${config?.footerHeight || 'auto'}`\n      },\n      gridTemplateColumns: {\n        base: '1fr',\n        [collapseBreakpoint]: `${config?.sidebarWidth || '250px'} 1fr`\n      },\n      minHeight: '100vh'\n    })\n  },\n  \n  /**\n   * Card grid layout\n   */\n  cardGrid: (config?: {\n    minCardWidth?: ResponsiveValue<string | number>\n    gap?: ResponsiveValue<string | number>\n    maxColumns?: ResponsiveValue<number>\n  }) => {\n    return ResponsiveGridPatterns.autoFit({\n      minColumnWidth: config?.minCardWidth || '300px',\n      gap: config?.gap || '1rem',\n      maxColumns: config?.maxColumns\n    })\n  },\n  \n  /**\n   * Hero section layout\n   */\n  hero: (config?: {\n    minHeight?: ResponsiveValue<string | number>\n    textAlign?: ResponsiveValue<'left' | 'center' | 'right'>\n    padding?: ResponsiveValue<string | number>\n  }) => {\n    return createResponsiveModifier({\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      alignItems: 'center',\n      textAlign: config?.textAlign || 'center',\n      minHeight: config?.minHeight || '50vh',\n      padding: config?.padding || '2rem'\n    })\n  }\n}\n\n/**\n * Export all layout patterns for easy access\n */\nexport {\n  ResponsiveGridPatterns as ResponsiveGrid,\n  ResponsiveFlexPatterns as Flex,\n  ResponsiveContainerPatterns as Container,\n  ResponsiveVisibilityPatterns as Visibility,\n  ResponsiveSpacingPatterns as Spacing,\n  ResponsiveTypographyPatterns as ResponsiveTypography\n}"],"names":["ResponsiveGridPatterns","config","gridConfig","breakpoint","width","widthValue","maxCols","createResponsiveModifier","columns","bp","cols","ResponsiveFlexPatterns","flexConfig","direction","ResponsiveContainerPatterns","containerConfig","sectionConfig","ResponsiveVisibilityPatterns","breakpoints","displayConfig","ResponsiveSpacingPatterns","paddingConfig","marginConfig","gapConfig","ResponsiveTypographyPatterns","typographyConfig","scaleValue","baseSize","minBp","maxBp","minSize","maxSize"],"mappings":"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"}

package/dist/modifiers/responsive/layout-patterns.js

@@ -1,254 +0,0 @@
-import { createResponsiveModifier as i } from "./responsive-modifier.js";
-class o {
-  /**
-   * Create a responsive grid with automatic column sizing
-   */
-  static autoFit(t) {
-    const a = {};
-    if (typeof t.minColumnWidth == "object") {
-      a.gridTemplateColumns = {};
-      for (const [e, r] of Object.entries(t.minColumnWidth)) {
-        const s = typeof r == "number" ? `${r}px` : r, p = t.maxColumns && typeof t.maxColumns == "object" ? t.maxColumns[e] || "auto" : t.maxColumns || "auto";
-        a.gridTemplateColumns[e] = p === "auto" ? `repeat(auto-fit, minmax(${s}, 1fr))` : `repeat(${p}, minmax(${s}, 1fr))`;
-      }
-    } else {
-      const e = typeof t.minColumnWidth == "number" ? `${t.minColumnWidth}px` : t.minColumnWidth, r = t.maxColumns || "auto";
-      a.gridTemplateColumns = r === "auto" ? `repeat(auto-fit, minmax(${e}, 1fr))` : `repeat(${r}, minmax(${e}, 1fr))`;
-    }
-    return t.gap && (a.gap = t.gap), a.display = "grid", i(a);
-  }
-  /**
-   * Create a responsive grid with explicit column counts
-   */
-  static columns(t, a) {
-    const e = {
-      display: "grid",
-      gridTemplateColumns: typeof t == "object" ? Object.fromEntries(
-        Object.entries(t).map(([r, s]) => [r, `repeat(${s}, 1fr)`])
-      ) : `repeat(${t}, 1fr)`
-    };
-    return a?.gap && (e.gap = a.gap), a?.rowGap && (e.rowGap = a.rowGap), a?.autoRows && (e.gridAutoRows = a.autoRows), i(e);
-  }
-  /**
-   * Create responsive masonry-style grid
-   */
-  static masonry(t) {
-    const a = {
-      display: "grid",
-      gridTemplateColumns: typeof t.columns == "object" ? Object.fromEntries(
-        Object.entries(t.columns).map(([e, r]) => [e, `repeat(${r}, 1fr)`])
-      ) : `repeat(${t.columns}, 1fr)`,
-      gridAutoRows: "max-content"
-    };
-    return t.gap && (a.gap = t.gap), i(a);
-  }
-}
-class m {
-  /**
-   * Create a responsive flex container that stacks on mobile, flows horizontally on desktop
-   */
-  static stackToRow(t) {
-    const e = {
-      display: "flex",
-      flexDirection: {
-        base: "column",
-        [t?.stackBreakpoint || "md"]: "row"
-      }
-    };
-    return t?.gap && (e.gap = t.gap), t?.align && (e.alignItems = t.align), t?.justify && (e.justifyContent = t.justify), i(e);
-  }
-  /**
-   * Create a responsive flex container with wrapping behavior
-   */
-  static wrap(t) {
-    const a = {
-      display: "flex",
-      flexWrap: "wrap",
-      ...t
-    };
-    return i(a);
-  }
-  /**
-   * Create centered flex layout
-   */
-  static center(t = "row") {
-    return i({
-      display: "flex",
-      flexDirection: t,
-      justifyContent: "center",
-      alignItems: "center"
-    });
-  }
-  /**
-   * Create space-between flex layout
-   */
-  static spaceBetween(t = "row") {
-    return i({
-      display: "flex",
-      flexDirection: t,
-      justifyContent: "space-between",
-      alignItems: "center"
-    });
-  }
-}
-class d {
-  /**
-   * Create a responsive container with max-width constraints
-   */
-  static container(t) {
-    const a = {
-      width: "100%",
-      marginLeft: "auto",
-      marginRight: "auto"
-    };
-    return t?.maxWidth ? a.maxWidth = t.maxWidth : a.maxWidth = {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px"
-    }, t?.padding && (a.paddingLeft = t.padding, a.paddingRight = t.padding), t?.margin && (a.marginTop = t.margin, a.marginBottom = t.margin), i(a);
-  }
-  /**
-   * Create a full-width container that breaks out of constraints
-   */
-  static fullWidth() {
-    return i({
-      width: "100vw",
-      marginLeft: "calc(-50vw + 50%)",
-      marginRight: "calc(-50vw + 50%)"
-    });
-  }
-  /**
-   * Create a section container with responsive padding
-   */
-  static section(t) {
-    const a = {};
-    return t?.paddingY && (a.paddingTop = t.paddingY, a.paddingBottom = t.paddingY), t?.paddingX && (a.paddingLeft = t.paddingX, a.paddingRight = t.paddingX), t?.maxWidth && (a.maxWidth = t.maxWidth, a.marginLeft = "auto", a.marginRight = "auto"), i(a);
-  }
-}
-class u {
-  /**
-   * Show element only on specific breakpoints
-   */
-  static showOn(t) {
-    const a = {
-      display: {}
-      // Start with empty object
-    };
-    for (const e of t)
-      a.display[e] = "block";
-    return i(a);
-  }
-  /**
-   * Hide element only on specific breakpoints
-   */
-  static hideOn(t) {
-    const a = {
-      display: {}
-      // Start with empty object
-    };
-    for (const e of t)
-      a.display[e] = "none";
-    return i(a);
-  }
-  /**
-   * Show on mobile, hide on desktop
-   */
-  static mobileOnly() {
-    return i({
-      display: {
-        base: "block",
-        md: "none"
-      }
-    });
-  }
-  /**
-   * Hide on mobile, show on desktop
-   */
-  static desktopOnly() {
-    return i({
-      display: {
-        base: "none",
-        md: "block"
-      }
-    });
-  }
-  /**
-   * Show only on tablet breakpoint
-   */
-  static tabletOnly() {
-    return i({
-      display: {
-        base: "none",
-        md: "block",
-        lg: "none"
-      }
-    });
-  }
-}
-class x {
-  /**
-   * Create responsive padding
-   */
-  static padding(t) {
-    const a = {};
-    return t.all && (a.padding = t.all), t.horizontal && (a.paddingLeft = t.horizontal, a.paddingRight = t.horizontal), t.vertical && (a.paddingTop = t.vertical, a.paddingBottom = t.vertical), t.top && (a.paddingTop = t.top), t.right && (a.paddingRight = t.right), t.bottom && (a.paddingBottom = t.bottom), t.left && (a.paddingLeft = t.left), i(a);
-  }
-  /**
-   * Create responsive margin
-   */
-  static margin(t) {
-    const a = {};
-    return t.all && (a.margin = t.all), t.horizontal && (a.marginLeft = t.horizontal, a.marginRight = t.horizontal), t.vertical && (a.marginTop = t.vertical, a.marginBottom = t.vertical), t.top && (a.marginTop = t.top), t.right && (a.marginRight = t.right), t.bottom && (a.marginBottom = t.bottom), t.left && (a.marginLeft = t.left), i(a);
-  }
-  /**
-   * Create responsive gap (for flexbox and grid)
-   */
-  static gap(t) {
-    const a = {};
-    return t.all && (a.gap = t.all), t.column && (a.columnGap = t.column), t.row && (a.rowGap = t.row), i(a);
-  }
-}
-class h {
-  /**
-   * Create responsive font scale
-   */
-  static scale(t) {
-    const a = {
-      fontSize: t.base
-    };
-    if (t.scale && typeof t.scale == "object") {
-      a.fontSize = {};
-      for (const [e, r] of Object.entries(t.scale)) {
-        const s = typeof t.base == "number" ? t.base : parseFloat(t.base);
-        a.fontSize[e] = `${s * r}px`;
-      }
-    }
-    return t.lineHeight && (a.lineHeight = t.lineHeight), i(a);
-  }
-  /**
-   * Create fluid typography that scales smoothly
-   */
-  static fluid(t) {
-    const a = t.minBreakpoint || "320px", e = t.maxBreakpoint || "1200px", r = typeof t.minSize == "number" ? `${t.minSize}px` : t.minSize, s = typeof t.maxSize == "number" ? `${t.maxSize}px` : t.maxSize;
-    return i({
-      fontSize: `clamp(${r}, calc(${r} + (${s} - ${r}) * ((100vw - ${a}) / (${e} - ${a}))), ${s})`
-    });
-  }
-}
-export {
-  d as Container,
-  m as Flex,
-  d as ResponsiveContainerPatterns,
-  m as ResponsiveFlexPatterns,
-  o as ResponsiveGrid,
-  o as ResponsiveGridPatterns,
-  x as ResponsiveSpacingPatterns,
-  h as ResponsiveTypography,
-  h as ResponsiveTypographyPatterns,
-  u as ResponsiveVisibilityPatterns,
-  x as Spacing,
-  u as Visibility
-};
-//# sourceMappingURL=layout-patterns.js.map

package/dist/modifiers/responsive/layout-patterns.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout-patterns.js","sources":["../../../src/modifiers/responsive/layout-patterns.ts"],"sourcesContent":["/**\n * Responsive Layout Utility Patterns\n * \n * Provides common responsive layout patterns and utilities that make it easy\n * to create responsive designs without writing custom CSS for every use case.\n */\n\nimport { \n  ResponsiveValue, \n  BreakpointKey, \n  ResponsiveSpacingConfig\n} from './types'\nimport { createResponsiveModifier } from './responsive-modifier'\n\n/**\n * Configuration for responsive grid layout\n */\nexport interface ResponsiveGridConfig {\n  columns?: ResponsiveValue<number>\n  rows?: ResponsiveValue<number>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n  autoFlow?: ResponsiveValue<'row' | 'column' | 'row dense' | 'column dense'>\n  autoRows?: ResponsiveValue<string>\n  autoColumns?: ResponsiveValue<string>\n  templateAreas?: ResponsiveValue<string>\n}\n\n/**\n * Configuration for responsive flexbox layout\n */\nexport interface ResponsiveFlexConfig {\n  direction?: ResponsiveValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n  alignContent?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n}\n\n/**\n * Configuration for responsive container layout\n */\nexport interface ResponsiveContainerConfig {\n  maxWidth?: ResponsiveValue<string | number>\n  width?: ResponsiveValue<string | number>\n  padding?: ResponsiveValue<string | number>\n  margin?: ResponsiveValue<string | number>\n  centerContent?: ResponsiveValue<boolean>\n}\n\n\n/**\n * Responsive Grid Layout Utilities\n */\nexport class ResponsiveGridPatterns {\n  /**\n   * Create a responsive grid with automatic column sizing\n   */\n  static autoFit(config: {\n    minColumnWidth: ResponsiveValue<string | number>\n    gap?: ResponsiveValue<string | number>\n    maxColumns?: ResponsiveValue<number>\n  }) {\n    const gridConfig: any = {}\n    \n    if (typeof config.minColumnWidth === 'object') {\n      // Handle responsive minColumnWidth\n      gridConfig.gridTemplateColumns = {}\n      for (const [breakpoint, width] of Object.entries(config.minColumnWidth)) {\n        const widthValue = typeof width === 'number' ? `${width}px` : width\n        const maxCols = config.maxColumns && typeof config.maxColumns === 'object' \n          ? config.maxColumns[breakpoint as BreakpointKey] || 'auto'\n          : config.maxColumns || 'auto'\n        \n        gridConfig.gridTemplateColumns[breakpoint] = maxCols === 'auto' \n          ? `repeat(auto-fit, minmax(${widthValue}, 1fr))`\n          : `repeat(${maxCols}, minmax(${widthValue}, 1fr))`\n      }\n    } else {\n      const widthValue = typeof config.minColumnWidth === 'number' ? `${config.minColumnWidth}px` : config.minColumnWidth\n      const maxCols = config.maxColumns || 'auto'\n      gridConfig.gridTemplateColumns = maxCols === 'auto'\n        ? `repeat(auto-fit, minmax(${widthValue}, 1fr))`\n        : `repeat(${maxCols}, minmax(${widthValue}, 1fr))`\n    }\n    \n    if (config.gap) {\n      gridConfig.gap = config.gap\n    }\n    \n    gridConfig.display = 'grid'\n    \n    return createResponsiveModifier(gridConfig)\n  }\n  \n  /**\n   * Create a responsive grid with explicit column counts\n   */\n  static columns(columns: ResponsiveValue<number>, config?: {\n    gap?: ResponsiveValue<string | number>\n    rowGap?: ResponsiveValue<string | number>\n    autoRows?: ResponsiveValue<string>\n  }) {\n    const gridConfig: any = {\n      display: 'grid',\n      gridTemplateColumns: typeof columns === 'object' \n        ? Object.fromEntries(\n            Object.entries(columns).map(([bp, cols]) => [bp, `repeat(${cols}, 1fr)`])\n          )\n        : `repeat(${columns}, 1fr)`\n    }\n    \n    if (config?.gap) gridConfig.gap = config.gap\n    if (config?.rowGap) gridConfig.rowGap = config.rowGap\n    if (config?.autoRows) gridConfig.gridAutoRows = config.autoRows\n    \n    return createResponsiveModifier(gridConfig)\n  }\n  \n  /**\n   * Create responsive masonry-style grid\n   */\n  static masonry(config: {\n    columns: ResponsiveValue<number>\n    gap?: ResponsiveValue<string | number>\n  }) {\n    const gridConfig: any = {\n      display: 'grid',\n      gridTemplateColumns: typeof config.columns === 'object'\n        ? Object.fromEntries(\n            Object.entries(config.columns).map(([bp, cols]) => [bp, `repeat(${cols}, 1fr)`])\n          )\n        : `repeat(${config.columns}, 1fr)`,\n      gridAutoRows: 'max-content'\n    }\n    \n    if (config.gap) gridConfig.gap = config.gap\n    \n    return createResponsiveModifier(gridConfig)\n  }\n}\n\n/**\n * Responsive Flexbox Layout Utilities\n */\nexport class ResponsiveFlexPatterns {\n  /**\n   * Create a responsive flex container that stacks on mobile, flows horizontally on desktop\n   */\n  static stackToRow(config?: {\n    stackBreakpoint?: BreakpointKey\n    gap?: ResponsiveValue<string | number>\n    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  }) {\n    const stackBreakpoint = config?.stackBreakpoint || 'md'\n    \n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: {\n        base: 'column',\n        [stackBreakpoint]: 'row'\n      }\n    }\n    \n    if (config?.gap) flexConfig.gap = config.gap\n    if (config?.align) flexConfig.alignItems = config.align\n    if (config?.justify) flexConfig.justifyContent = config.justify\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create a responsive flex container with wrapping behavior\n   */\n  static wrap(config?: ResponsiveFlexConfig) {\n    const flexConfig: any = {\n      display: 'flex',\n      flexWrap: 'wrap',\n      ...config\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create centered flex layout\n   */\n  static center(direction: ResponsiveValue<'row' | 'column'> = 'row') {\n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: direction,\n      justifyContent: 'center',\n      alignItems: 'center'\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create space-between flex layout\n   */\n  static spaceBetween(direction: ResponsiveValue<'row' | 'column'> = 'row') {\n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: direction,\n      justifyContent: 'space-between',\n      alignItems: 'center'\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n}\n\n/**\n * Responsive Container Utilities\n */\nexport class ResponsiveContainerPatterns {\n  /**\n   * Create a responsive container with max-width constraints\n   */\n  static container(config?: ResponsiveContainerConfig) {\n    const containerConfig: any = {\n      width: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n    \n    if (config?.maxWidth) {\n      containerConfig.maxWidth = config.maxWidth\n    } else {\n      // Default responsive max-widths\n      containerConfig.maxWidth = {\n        sm: '640px',\n        md: '768px',\n        lg: '1024px',\n        xl: '1280px',\n        '2xl': '1536px'\n      }\n    }\n    \n    if (config?.padding) {\n      containerConfig.paddingLeft = config.padding\n      containerConfig.paddingRight = config.padding\n    }\n    \n    if (config?.margin) {\n      containerConfig.marginTop = config.margin\n      containerConfig.marginBottom = config.margin\n    }\n    \n    return createResponsiveModifier(containerConfig)\n  }\n  \n  /**\n   * Create a full-width container that breaks out of constraints\n   */\n  static fullWidth() {\n    return createResponsiveModifier({\n      width: '100vw',\n      marginLeft: 'calc(-50vw + 50%)',\n      marginRight: 'calc(-50vw + 50%)'\n    })\n  }\n  \n  /**\n   * Create a section container with responsive padding\n   */\n  static section(config?: {\n    paddingY?: ResponsiveValue<string | number>\n    paddingX?: ResponsiveValue<string | number>\n    maxWidth?: ResponsiveValue<string | number>\n  }) {\n    const sectionConfig: any = {}\n    \n    if (config?.paddingY) {\n      sectionConfig.paddingTop = config.paddingY\n      sectionConfig.paddingBottom = config.paddingY\n    }\n    \n    if (config?.paddingX) {\n      sectionConfig.paddingLeft = config.paddingX\n      sectionConfig.paddingRight = config.paddingX\n    }\n    \n    if (config?.maxWidth) {\n      sectionConfig.maxWidth = config.maxWidth\n      sectionConfig.marginLeft = 'auto'\n      sectionConfig.marginRight = 'auto'\n    }\n    \n    return createResponsiveModifier(sectionConfig)\n  }\n}\n\n/**\n * Responsive Visibility Utilities\n */\nexport class ResponsiveVisibilityPatterns {\n  /**\n   * Show element only on specific breakpoints\n   */\n  static showOn(breakpoints: BreakpointKey[]) {\n    const displayConfig: any = {\n      display: {} // Start with empty object\n    }\n    \n    // Show on specified breakpoints\n    for (const breakpoint of breakpoints) {\n      displayConfig.display[breakpoint] = 'block'\n    }\n    \n    return createResponsiveModifier(displayConfig)\n  }\n  \n  /**\n   * Hide element only on specific breakpoints\n   */\n  static hideOn(breakpoints: BreakpointKey[]) {\n    const displayConfig: any = {\n      display: {} // Start with empty object\n    }\n    \n    // Hide on specified breakpoints\n    for (const breakpoint of breakpoints) {\n      displayConfig.display[breakpoint] = 'none'\n    }\n    \n    return createResponsiveModifier(displayConfig)\n  }\n  \n  /**\n   * Show on mobile, hide on desktop\n   */\n  static mobileOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'block',\n        md: 'none'\n      }\n    })\n  }\n  \n  /**\n   * Hide on mobile, show on desktop\n   */\n  static desktopOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'none',\n        md: 'block'\n      }\n    })\n  }\n  \n  /**\n   * Show only on tablet breakpoint\n   */\n  static tabletOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'none',\n        md: 'block',\n        lg: 'none'\n      }\n    })\n  }\n}\n\n/**\n * Responsive Spacing Utilities\n */\nexport class ResponsiveSpacingPatterns {\n  /**\n   * Create responsive padding\n   */\n  static padding(config: ResponsiveSpacingConfig) {\n    const paddingConfig: any = {}\n    \n    if (config.all) paddingConfig.padding = config.all\n    if (config.horizontal) {\n      paddingConfig.paddingLeft = config.horizontal\n      paddingConfig.paddingRight = config.horizontal\n    }\n    if (config.vertical) {\n      paddingConfig.paddingTop = config.vertical\n      paddingConfig.paddingBottom = config.vertical\n    }\n    if (config.top) paddingConfig.paddingTop = config.top\n    if (config.right) paddingConfig.paddingRight = config.right\n    if (config.bottom) paddingConfig.paddingBottom = config.bottom\n    if (config.left) paddingConfig.paddingLeft = config.left\n    \n    return createResponsiveModifier(paddingConfig)\n  }\n  \n  /**\n   * Create responsive margin\n   */\n  static margin(config: ResponsiveSpacingConfig) {\n    const marginConfig: any = {}\n    \n    if (config.all) marginConfig.margin = config.all\n    if (config.horizontal) {\n      marginConfig.marginLeft = config.horizontal\n      marginConfig.marginRight = config.horizontal\n    }\n    if (config.vertical) {\n      marginConfig.marginTop = config.vertical\n      marginConfig.marginBottom = config.vertical\n    }\n    if (config.top) marginConfig.marginTop = config.top\n    if (config.right) marginConfig.marginRight = config.right\n    if (config.bottom) marginConfig.marginBottom = config.bottom\n    if (config.left) marginConfig.marginLeft = config.left\n    \n    return createResponsiveModifier(marginConfig)\n  }\n  \n  /**\n   * Create responsive gap (for flexbox and grid)\n   */\n  static gap(config: {\n    all?: ResponsiveValue<string | number>\n    column?: ResponsiveValue<string | number>\n    row?: ResponsiveValue<string | number>\n  }) {\n    const gapConfig: any = {}\n    \n    if (config.all) gapConfig.gap = config.all\n    if (config.column) gapConfig.columnGap = config.column\n    if (config.row) gapConfig.rowGap = config.row\n    \n    return createResponsiveModifier(gapConfig)\n  }\n}\n\n/**\n * Responsive Typography Utilities\n */\nexport class ResponsiveTypographyPatterns {\n  /**\n   * Create responsive font scale\n   */\n  static scale(config: {\n    base: string | number\n    scale?: ResponsiveValue<number>\n    lineHeight?: ResponsiveValue<number | string>\n  }) {\n    const typographyConfig: any = {\n      fontSize: config.base\n    }\n    \n    if (config.scale && typeof config.scale === 'object') {\n      typographyConfig.fontSize = {}\n      for (const [breakpoint, scaleValue] of Object.entries(config.scale)) {\n        const baseSize = typeof config.base === 'number' ? config.base : parseFloat(config.base)\n        typographyConfig.fontSize[breakpoint] = `${baseSize * scaleValue}px`\n      }\n    }\n    \n    if (config.lineHeight) {\n      typographyConfig.lineHeight = config.lineHeight\n    }\n    \n    return createResponsiveModifier(typographyConfig)\n  }\n  \n  /**\n   * Create fluid typography that scales smoothly\n   */\n  static fluid(config: {\n    minSize: string | number\n    maxSize: string | number\n    minBreakpoint?: string\n    maxBreakpoint?: string\n  }) {\n    const minBp = config.minBreakpoint || '320px'\n    const maxBp = config.maxBreakpoint || '1200px'\n    const minSize = typeof config.minSize === 'number' ? `${config.minSize}px` : config.minSize\n    const maxSize = typeof config.maxSize === 'number' ? `${config.maxSize}px` : config.maxSize\n    \n    return createResponsiveModifier({\n      fontSize: `clamp(${minSize}, calc(${minSize} + (${maxSize} - ${minSize}) * ((100vw - ${minBp}) / (${maxBp} - ${minBp}))), ${maxSize})`\n    })\n  }\n}\n\n/**\n * Common Layout Patterns\n */\nexport const LayoutPatterns = {\n  /**\n   * Sidebar layout that collapses on mobile\n   */\n  sidebar: (config?: {\n    sidebarWidth?: ResponsiveValue<string | number>\n    collapseBreakpoint?: BreakpointKey\n    gap?: ResponsiveValue<string | number>\n  }) => {\n    const collapseBreakpoint = config?.collapseBreakpoint || 'md'\n    const sidebarWidth = config?.sidebarWidth || '250px'\n    \n    return createResponsiveModifier({\n      display: 'grid',\n      gridTemplateColumns: {\n        base: '1fr',\n        [collapseBreakpoint]: `${sidebarWidth} 1fr`\n      },\n      gap: config?.gap || '1rem'\n    })\n  },\n  \n  /**\n   * Holy grail layout (header, footer, sidebar, main content)\n   */\n  holyGrail: (config?: {\n    headerHeight?: ResponsiveValue<string | number>\n    footerHeight?: ResponsiveValue<string | number>\n    sidebarWidth?: ResponsiveValue<string | number>\n    collapseBreakpoint?: BreakpointKey\n  }) => {\n    const collapseBreakpoint = config?.collapseBreakpoint || 'lg'\n    \n    return createResponsiveModifier({\n      display: 'grid',\n      gridTemplateAreas: {\n        base: '\"header\" \"main\" \"footer\"',\n        [collapseBreakpoint]: '\"header header\" \"sidebar main\" \"footer footer\"'\n      },\n      gridTemplateRows: {\n        base: `${config?.headerHeight || 'auto'} 1fr ${config?.footerHeight || 'auto'}`,\n        [collapseBreakpoint]: `${config?.headerHeight || 'auto'} 1fr ${config?.footerHeight || 'auto'}`\n      },\n      gridTemplateColumns: {\n        base: '1fr',\n        [collapseBreakpoint]: `${config?.sidebarWidth || '250px'} 1fr`\n      },\n      minHeight: '100vh'\n    })\n  },\n  \n  /**\n   * Card grid layout\n   */\n  cardGrid: (config?: {\n    minCardWidth?: ResponsiveValue<string | number>\n    gap?: ResponsiveValue<string | number>\n    maxColumns?: ResponsiveValue<number>\n  }) => {\n    return ResponsiveGridPatterns.autoFit({\n      minColumnWidth: config?.minCardWidth || '300px',\n      gap: config?.gap || '1rem',\n      maxColumns: config?.maxColumns\n    })\n  },\n  \n  /**\n   * Hero section layout\n   */\n  hero: (config?: {\n    minHeight?: ResponsiveValue<string | number>\n    textAlign?: ResponsiveValue<'left' | 'center' | 'right'>\n    padding?: ResponsiveValue<string | number>\n  }) => {\n    return createResponsiveModifier({\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      alignItems: 'center',\n      textAlign: config?.textAlign || 'center',\n      minHeight: config?.minHeight || '50vh',\n      padding: config?.padding || '2rem'\n    })\n  }\n}\n\n/**\n * Export all layout patterns for easy access\n */\nexport {\n  ResponsiveGridPatterns as ResponsiveGrid,\n  ResponsiveFlexPatterns as Flex,\n  ResponsiveContainerPatterns as Container,\n  ResponsiveVisibilityPatterns as Visibility,\n  ResponsiveSpacingPatterns as Spacing,\n  ResponsiveTypographyPatterns as ResponsiveTypography\n}"],"names":["ResponsiveGridPatterns","config","gridConfig","breakpoint","width","widthValue","maxCols","createResponsiveModifier","columns","bp","cols","ResponsiveFlexPatterns","flexConfig","direction","ResponsiveContainerPatterns","containerConfig","sectionConfig","ResponsiveVisibilityPatterns","breakpoints","displayConfig","ResponsiveSpacingPatterns","paddingConfig","marginConfig","gapConfig","ResponsiveTypographyPatterns","typographyConfig","scaleValue","baseSize","minBp","maxBp","minSize","maxSize"],"mappings":"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"}

package/dist/modifiers/responsive/performance.cjs

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var b=Object.defineProperty,T=(u,e,t)=>e in u?b(u,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):u[e]=t,o=(u,e,t)=>T(u,typeof e!="symbol"?e+"":e,t);class w{constructor(){o(this,"cache",new Map),o(this,"hitCount",0),o(this,"missCount",0)}get(e){const t=this.cache.get(e);return t?this.hitCount++:this.missCount++,t}set(e,t){this.cache.set(e,t)}clear(){this.cache.clear(),this.hitCount=0,this.missCount=0}getStats(){return{size:this.cache.size,hitRate:this.hitCount/(this.hitCount+this.missCount)||0,hits:this.hitCount,misses:this.missCount}}}const l=new w;class m{static generateOptimizedCSS(e,t,i={}){const{minify:s=process.env.NODE_ENV==="production",batch:c=!0,deduplicate:r=!0}=i,n=this.createCacheKey(e,t,{minify:s});if(r){const h=l.get(n);if(h)return h}const a=this.generateCSS(e,t,{minify:s});return r&&l.set(n,a),c&&a.trim()?(this.addToBatch(a),""):a}static createCacheKey(e,t,i){return JSON.stringify({selector:e,config:t,options:i})}static generateCSS(e,t,i){const{minify:s=!1}=i,c=s?"":"  ",r=s?"":`
-`,n=s?"":" ";let a="";const h=new Set,p=this.extractBaseStyles(t);Object.keys(p).length>0&&(a+=`${e}${n}{${r}`,a+=this.generateProperties(p,c,r,n),a+=`}${r}`);for(const[d,f]of Object.entries(t))if(typeof f=="object"&&f!==null)for(const[S,$]of Object.entries(f)){if(S==="base")continue;const C=this.getMediaQuery(S),g=`${C}:${d}`;h.has(g)||(a+=`@media ${C}${n}{${r}`,a+=`${c}${e}${n}{${r}`,a+=`${c}${c}${this.propertyToCSS(d)}:${n}${this.valueToCSS($)};${r}`,a+=`${c}}${r}`,a+=`}${r}`,h.add(g))}return a}static addToBatch(e){this.ruleQueue.push(e),this.ruleQueue.length>=this.BATCH_SIZE?this.flushBatch():this.flushTimer||(this.flushTimer=window.setTimeout(()=>this.flushBatch(),16))}static flushBatch(){if(this.ruleQueue.length===0)return;const e=this.ruleQueue.join("");this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null),this.injectCSS(e)}static injectCSS(e){if(typeof document>"u")return;let t=document.getElementById("tachui-responsive-styles");t||(t=document.createElement("style"),t.id="tachui-responsive-styles",t.type="text/css",document.head.appendChild(t)),t.appendChild(document.createTextNode(e))}static extractBaseStyles(e){const t={};for(const[i,s]of Object.entries(e))typeof s!="object"||s===null?t[i]=s:"base"in s&&(t[i]=s.base);return t}static generateProperties(e,t,i,s){let c="";for(const[r,n]of Object.entries(e))n!==void 0&&(c+=`${t}${this.propertyToCSS(r)}:${s}${this.valueToCSS(n)};${i}`);return c}static propertyToCSS(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}static valueToCSS(e){return typeof e=="number"?`${e}px`:e.toString()}static getMediaQuery(e){return{base:"",sm:"(min-width: 640px)",md:"(min-width: 768px)",lg:"(min-width: 1024px)",xl:"(min-width: 1280px)","2xl":"(min-width: 1536px)"}[e]||e}static flush(){this.flushBatch()}static getStats(){return{cache:l.getStats(),batch:{queueSize:this.ruleQueue.length,batchSize:this.BATCH_SIZE}}}static reset(){l.clear(),this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null)}}o(m,"BATCH_SIZE",50);o(m,"ruleQueue",[]);o(m,"flushTimer",null);class y{static startMeasurement(e){const t=performance.now();return()=>{const i=performance.now()-t;return this.recordMeasurement(e,i),i}}static recordMeasurement(e,t){this.measurements.has(e)||this.measurements.set(e,[]);const i=this.measurements.get(e);i.push(t),i.length>100&&i.shift()}static getStats(){const e={};for(const[t,i]of this.measurements){const s=[...i].sort((r,n)=>r-n),c=i.reduce((r,n)=>r+n,0)/i.length;e[t]={count:i.length,average:c,min:s[0],max:s[s.length-1],p50:s[Math.floor(s.length*.5)],p95:s[Math.floor(s.length*.95)],p99:s[Math.floor(s.length*.99)]}}return e}static reset(){this.measurements.clear()}}o(y,"measurements",new Map);exports.OptimizedCSSGenerator=m;exports.ResponsivePerformanceMonitor=y;exports.cssRuleCache=l;
-//# sourceMappingURL=performance.cjs.map

package/dist/modifiers/responsive/performance.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"performance.cjs","sources":["../../../src/modifiers/responsive/performance.ts"],"sourcesContent":["/**\n * Responsive System Performance Optimizations\n * \n * Optimizes CSS generation, caching, and runtime performance for the responsive system.\n */\n\nimport { ResponsiveStyleConfig, BreakpointKey } from './types'\n\n/**\n * CSS rule cache for deduplication\n */\nclass CSSRuleCache {\n  private cache = new Map<string, string>()\n  private hitCount = 0\n  private missCount = 0\n  \n  get(key: string): string | undefined {\n    const result = this.cache.get(key)\n    if (result) {\n      this.hitCount++\n    } else {\n      this.missCount++\n    }\n    return result\n  }\n  \n  set(key: string, value: string): void {\n    this.cache.set(key, value)\n  }\n  \n  clear(): void {\n    this.cache.clear()\n    this.hitCount = 0\n    this.missCount = 0\n  }\n  \n  getStats() {\n    return {\n      size: this.cache.size,\n      hitRate: this.hitCount / (this.hitCount + this.missCount) || 0,\n      hits: this.hitCount,\n      misses: this.missCount\n    }\n  }\n}\n\n/**\n * Global CSS rule cache instance\n */\nexport const cssRuleCache = new CSSRuleCache()\n\n/**\n * Performance-optimized CSS generation\n */\nexport class OptimizedCSSGenerator {\n  private static readonly BATCH_SIZE = 50\n  private static ruleQueue: string[] = []\n  private static flushTimer: number | null = null\n  \n  /**\n   * Generate CSS with caching and batching\n   */\n  static generateOptimizedCSS(\n    selector: string,\n    config: ResponsiveStyleConfig,\n    options: {\n      minify?: boolean\n      batch?: boolean\n      deduplicate?: boolean\n    } = {}\n  ): string {\n    const {\n      minify = process.env.NODE_ENV === 'production',\n      batch = true,\n      deduplicate = true\n    } = options\n    \n    // Create cache key\n    const cacheKey = this.createCacheKey(selector, config, { minify })\n    \n    // Check cache first\n    if (deduplicate) {\n      const cached = cssRuleCache.get(cacheKey)\n      if (cached) {\n        return cached\n      }\n    }\n    \n    // Generate CSS\n    const css = this.generateCSS(selector, config, { minify })\n    \n    // Cache result\n    if (deduplicate) {\n      cssRuleCache.set(cacheKey, css)\n    }\n    \n    // Handle batching\n    if (batch && css.trim()) {\n      this.addToBatch(css)\n      return '' // Return empty since we're batching\n    }\n    \n    return css\n  }\n  \n  /**\n   * Create cache key for CSS rule\n   */\n  private static createCacheKey(\n    selector: string,\n    config: ResponsiveStyleConfig,\n    options: { minify?: boolean }\n  ): string {\n    return JSON.stringify({ selector, config, options })\n  }\n  \n  /**\n   * Generate CSS without optimizations (for comparison)\n   */\n  private static generateCSS(\n    selector: string,\n    config: ResponsiveStyleConfig,\n    options: { minify?: boolean }\n  ): string {\n    const { minify = false } = options\n    const indent = minify ? '' : '  '\n    const newline = minify ? '' : '\\n'\n    const space = minify ? '' : ' '\n    \n    let css = ''\n    const processedBreakpoints = new Set<string>()\n    \n    // Base styles first\n    const baseStyles = this.extractBaseStyles(config)\n    if (Object.keys(baseStyles).length > 0) {\n      css += `${selector}${space}{${newline}`\n      css += this.generateProperties(baseStyles, indent, newline, space)\n      css += `}${newline}`\n    }\n    \n    // Responsive styles\n    for (const [property, value] of Object.entries(config)) {\n      if (typeof value === 'object' && value !== null) {\n        for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n          if (breakpoint === 'base') continue\n          \n          const mediaQuery = this.getMediaQuery(breakpoint as BreakpointKey)\n          const breakpointKey = `${mediaQuery}:${property}`\n          \n          if (!processedBreakpoints.has(breakpointKey)) {\n            css += `@media ${mediaQuery}${space}{${newline}`\n            css += `${indent}${selector}${space}{${newline}`\n            css += `${indent}${indent}${this.propertyToCSS(property)}:${space}${this.valueToCSS(breakpointValue)};${newline}`\n            css += `${indent}}${newline}`\n            css += `}${newline}`\n            \n            processedBreakpoints.add(breakpointKey)\n          }\n        }\n      }\n    }\n    \n    return css\n  }\n  \n  /**\n   * Add CSS to batch queue\n   */\n  private static addToBatch(css: string): void {\n    this.ruleQueue.push(css)\n    \n    if (this.ruleQueue.length >= this.BATCH_SIZE) {\n      this.flushBatch()\n    } else if (!this.flushTimer) {\n      this.flushTimer = window.setTimeout(() => this.flushBatch(), 16) // Next frame\n    }\n  }\n  \n  /**\n   * Flush batched CSS rules\n   */\n  private static flushBatch(): void {\n    if (this.ruleQueue.length === 0) return\n    \n    const batchedCSS = this.ruleQueue.join('')\n    this.ruleQueue = []\n    \n    if (this.flushTimer) {\n      clearTimeout(this.flushTimer)\n      this.flushTimer = null\n    }\n    \n    // Inject batched CSS\n    this.injectCSS(batchedCSS)\n  }\n  \n  /**\n   * Inject CSS into document\n   */\n  private static injectCSS(css: string): void {\n    if (typeof document === 'undefined') return\n    \n    let styleElement = document.getElementById('tachui-responsive-styles') as HTMLStyleElement\n    \n    if (!styleElement) {\n      styleElement = document.createElement('style')\n      styleElement.id = 'tachui-responsive-styles'\n      styleElement.type = 'text/css'\n      document.head.appendChild(styleElement)\n    }\n    \n    // Use standard approach (legacy IE support removed)\n    styleElement.appendChild(document.createTextNode(css))\n  }\n  \n  /**\n   * Extract base (non-responsive) styles\n   */\n  private static extractBaseStyles(config: ResponsiveStyleConfig): Record<string, any> {\n    const baseStyles: Record<string, any> = {}\n    \n    for (const [property, value] of Object.entries(config)) {\n      if (typeof value !== 'object' || value === null) {\n        baseStyles[property] = value\n      } else if ('base' in value) {\n        baseStyles[property] = value.base\n      }\n    }\n    \n    return baseStyles\n  }\n  \n  /**\n   * Generate CSS properties\n   */\n  private static generateProperties(\n    styles: Record<string, any>,\n    indent: string,\n    newline: string,\n    space: string\n  ): string {\n    let css = ''\n    \n    for (const [property, value] of Object.entries(styles)) {\n      if (value !== undefined) {\n        css += `${indent}${this.propertyToCSS(property)}:${space}${this.valueToCSS(value)};${newline}`\n      }\n    }\n    \n    return css\n  }\n  \n  /**\n   * Convert property name to CSS\n   */\n  private static propertyToCSS(property: string): string {\n    return property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n  }\n  \n  /**\n   * Convert value to CSS\n   */\n  private static valueToCSS(value: any): string {\n    if (typeof value === 'number') {\n      return `${value}px`\n    }\n    return value.toString()\n  }\n  \n  /**\n   * Get media query for breakpoint\n   */\n  private static getMediaQuery(breakpoint: BreakpointKey): string {\n    const queries: Record<BreakpointKey, string> = {\n      base: '',\n      sm: '(min-width: 640px)',\n      md: '(min-width: 768px)',\n      lg: '(min-width: 1024px)',\n      xl: '(min-width: 1280px)',\n      '2xl': '(min-width: 1536px)'\n    }\n    \n    return queries[breakpoint] || breakpoint\n  }\n  \n  /**\n   * Force flush any pending batched CSS\n   */\n  static flush(): void {\n    this.flushBatch()\n  }\n  \n  /**\n   * Get performance statistics\n   */\n  static getStats() {\n    return {\n      cache: cssRuleCache.getStats(),\n      batch: {\n        queueSize: this.ruleQueue.length,\n        batchSize: this.BATCH_SIZE\n      }\n    }\n  }\n  \n  /**\n   * Clear all caches and reset performance counters\n   */\n  static reset(): void {\n    cssRuleCache.clear()\n    this.ruleQueue = []\n    if (this.flushTimer) {\n      clearTimeout(this.flushTimer)\n      this.flushTimer = null\n    }\n  }\n}\n\n/**\n * Performance monitoring for responsive system\n */\nexport class ResponsivePerformanceMonitor {\n  private static measurements = new Map<string, number[]>()\n  \n  /**\n   * Start performance measurement\n   */\n  static startMeasurement(name: string): () => number {\n    const startTime = performance.now()\n    \n    return () => {\n      const duration = performance.now() - startTime\n      this.recordMeasurement(name, duration)\n      return duration\n    }\n  }\n  \n  /**\n   * Record measurement\n   */\n  private static recordMeasurement(name: string, duration: number): void {\n    if (!this.measurements.has(name)) {\n      this.measurements.set(name, [])\n    }\n    \n    const measurements = this.measurements.get(name)!\n    measurements.push(duration)\n    \n    // Keep only last 100 measurements\n    if (measurements.length > 100) {\n      measurements.shift()\n    }\n  }\n  \n  /**\n   * Get performance statistics\n   */\n  static getStats() {\n    const stats: Record<string, any> = {}\n    \n    for (const [name, measurements] of this.measurements) {\n      const sorted = [...measurements].sort((a, b) => a - b)\n      const avg = measurements.reduce((sum, val) => sum + val, 0) / measurements.length\n      \n      stats[name] = {\n        count: measurements.length,\n        average: avg,\n        min: sorted[0],\n        max: sorted[sorted.length - 1],\n        p50: sorted[Math.floor(sorted.length * 0.5)],\n        p95: sorted[Math.floor(sorted.length * 0.95)],\n        p99: sorted[Math.floor(sorted.length * 0.99)]\n      }\n    }\n    \n    return stats\n  }\n  \n  /**\n   * Clear all performance data\n   */\n  static reset(): void {\n    this.measurements.clear()\n  }\n}"],"names":["CSSRuleCache","__publicField","key","result","value","cssRuleCache","OptimizedCSSGenerator","selector","config","options","minify","batch","deduplicate","cacheKey","cached","css","indent","newline","space","processedBreakpoints","baseStyles","property","breakpoint","breakpointValue","mediaQuery","breakpointKey","batchedCSS","styleElement","styles","match","ResponsivePerformanceMonitor","name","startTime","duration","measurements","stats","sorted","a","b","avg","sum","val"],"mappings":"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"}