@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/dist/modifiers/responsive/responsive-builder.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsive-builder.js","sources":["../../../src/modifiers/responsive/responsive-builder.ts"],"sourcesContent":["/**\n * Responsive Modifier Builder\n *\n * Extends the existing ModifierBuilder with responsive capabilities.\n * Provides a fluent API for creating responsive modifiers that integrate\n * seamlessly with the existing modifier system.\n */\n\nimport type { ModifierBuilder, Modifier } from '../types'\nimport type { ComponentInstance } from '../../runtime/types'\nimport {\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  ResponsiveSpacingConfig,\n  ResponsiveDimensionConfig,\n  ResponsiveTypographyConfig,\n  BreakpointKey,\n  isResponsiveValue\n} from './types'\nimport {\n  createResponsiveModifier,\n  createMediaQueryModifier,\n  createResponsivePropertyModifier,\n  createResponsiveLayoutModifier\n} from './responsive-modifier'\n\n/**\n * Responsive modifier builder interface\n */\nexport interface ResponsiveModifierBuilder<T extends ComponentInstance = ComponentInstance> {\n  // Core responsive methods\n  responsive(config: ResponsiveStyleConfig): ResponsiveModifierBuilder<T>\n  mediaQuery(query: string, styles: Record<string, any>): ResponsiveModifierBuilder<T>\n\n  // Advanced media query methods\n  orientation(orientation: 'portrait' | 'landscape', styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  colorScheme(scheme: 'light' | 'dark', styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  reducedMotion(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  highContrast(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  touchDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  mouseDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  retina(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n  print(styles: Record<string, any>): ResponsiveModifierBuilder<T>\n\n  // Responsive layout methods\n  responsiveLayout(config: {\n    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | '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    gap?: ResponsiveValue<number | string>\n  }): ResponsiveModifierBuilder<T>\n\n  // Responsive dimension methods\n  responsiveWidth(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>\n  responsiveHeight(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>\n  responsiveSize(config: ResponsiveDimensionConfig): ResponsiveModifierBuilder<T>\n\n  // Responsive spacing methods\n  responsivePadding(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>\n  responsiveMargin(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T>\n\n  // Responsive typography methods\n  responsiveFont(config: ResponsiveTypographyConfig): ResponsiveModifierBuilder<T>\n  responsiveFontSize(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T>\n  responsiveTextAlign(value: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>): ResponsiveModifierBuilder<T>\n\n  // Breakpoint shorthand methods\n  base: ResponsiveBreakpointBuilder<T>\n  sm: ResponsiveBreakpointBuilder<T>\n  md: ResponsiveBreakpointBuilder<T>\n  lg: ResponsiveBreakpointBuilder<T>\n  xl: ResponsiveBreakpointBuilder<T>\n  '2xl': ResponsiveBreakpointBuilder<T>\n\n  // Builder methods\n  addModifier(modifier: Modifier): void\n  build(): T\n}\n\n/**\n * Breakpoint-specific builder for shorthand syntax\n * Returns ModifierBuilder to allow chaining with regular modifiers after responsive ones\n */\nexport interface ResponsiveBreakpointBuilder<T extends ComponentInstance = ComponentInstance> {\n  // Layout properties\n  width(value: number | string): ModifierBuilder<T>\n  height(value: number | string): ModifierBuilder<T>\n  minWidth(value: number | string): ModifierBuilder<T>\n  maxWidth(value: number | string): ModifierBuilder<T>\n  minHeight(value: number | string): ModifierBuilder<T>\n  maxHeight(value: number | string): ModifierBuilder<T>\n  \n  // Padding properties\n  padding(value: number | string): ModifierBuilder<T>\n  paddingHorizontal(value: number | string): ModifierBuilder<T>\n  paddingVertical(value: number | string): ModifierBuilder<T>\n  paddingTop(value: number | string): ModifierBuilder<T>\n  paddingBottom(value: number | string): ModifierBuilder<T>\n  paddingLeft(value: number | string): ModifierBuilder<T>\n  paddingRight(value: number | string): ModifierBuilder<T>\n  \n  // Margin properties\n  margin(value: number | string): ModifierBuilder<T>\n  marginHorizontal(value: number | string): ModifierBuilder<T>\n  marginVertical(value: number | string): ModifierBuilder<T>\n  marginTop(value: number | string): ModifierBuilder<T>\n  marginBottom(value: number | string): ModifierBuilder<T>\n  marginLeft(value: number | string): ModifierBuilder<T>\n  marginRight(value: number | string): ModifierBuilder<T>\n\n  // Typography properties\n  fontSize(value: number | string): ModifierBuilder<T>\n  textAlign(value: 'left' | 'center' | 'right' | 'justify'): ModifierBuilder<T>\n\n  // Display properties\n  display(value: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid'): ModifierBuilder<T>\n\n  // Flexbox properties\n  flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): ModifierBuilder<T>\n  justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): ModifierBuilder<T>\n  alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'): ModifierBuilder<T>\n\n  // Visual properties\n  backgroundColor(value: string): ModifierBuilder<T>\n  color(value: string): ModifierBuilder<T>\n  opacity(value: number): ModifierBuilder<T>\n}\n\n/**\n * Implementation of responsive modifier builder using Proxy delegation\n */\nexport class ResponsiveModifierBuilderImpl<T extends ComponentInstance = ComponentInstance> implements ResponsiveModifierBuilder<T> {\n  constructor(private baseBuilder: ModifierBuilder<T>) {\n    // Return a Proxy that delegates unknown methods to baseBuilder\n    return new Proxy(this, {\n      get(target, prop) {\n        // If the method exists on this class, use it\n        if (prop in target) {\n          return target[prop as keyof ResponsiveModifierBuilderImpl<T>]\n        }\n\n        // Special handling for responsive breakpoint getters\n        if (prop === 'base' || prop === 'sm' || prop === 'md' || prop === 'lg' || prop === 'xl' || prop === '2xl') {\n          return target[prop as keyof ResponsiveModifierBuilderImpl<T>]\n        }\n\n        // Delegate everything else to baseBuilder\n        const baseProp = (target.baseBuilder as any)[prop]\n        if (typeof baseProp === 'function') {\n          return (...args: any[]) => {\n            baseProp.apply(target.baseBuilder, args)\n            // Return baseBuilder to maintain fluent chain\n            return target.baseBuilder\n          }\n        }\n\n        return baseProp\n      }\n    }) as ResponsiveModifierBuilderImpl<T>\n  }\n\n  // Delegate essential builder methods\n  addModifier(modifier: Modifier): void {\n    this.baseBuilder.addModifier(modifier)\n  }\n\n  build(): T {\n    return this.baseBuilder.build()\n  }\n\n  // Core responsive methods\n  responsive(config: ResponsiveStyleConfig): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  mediaQuery(query: string, styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Advanced media query methods\n  orientation(orientation: 'portrait' | 'landscape', styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = `(orientation: ${orientation})`\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  colorScheme(scheme: 'light' | 'dark', styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = `(prefers-color-scheme: ${scheme})`\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  reducedMotion(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(prefers-reduced-motion: reduce)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  highContrast(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(prefers-contrast: high)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  touchDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(pointer: coarse)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  mouseDevice(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(pointer: fine)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  retina(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = '(min-resolution: 2dppx)'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  print(styles: Record<string, any>): ResponsiveModifierBuilder<T> {\n    const query = 'print'\n    const modifier = createMediaQueryModifier(query, styles)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Responsive layout methods\n  responsiveLayout(config: {\n    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | '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    gap?: ResponsiveValue<number | string>\n  }): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveLayoutModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Responsive dimension methods\n  responsiveWidth(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('width', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveHeight(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('height', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveSize(config: ResponsiveDimensionConfig): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Responsive spacing methods\n  responsivePadding(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T> {\n    if (isResponsiveValue(value) || typeof value === 'string' || typeof value === 'number') {\n      const modifier = createResponsivePropertyModifier('padding', value as ResponsiveValue<number | string>)\n      this.baseBuilder.addModifier(modifier)\n    } else {\n      // Handle spacing config\n      const styleConfig: ResponsiveStyleConfig = {}\n      const config = value as ResponsiveSpacingConfig\n\n      if (config.all) styleConfig.padding = config.all\n      if (config.horizontal) {\n        styleConfig.paddingLeft = config.horizontal\n        styleConfig.paddingRight = config.horizontal\n      }\n      if (config.vertical) {\n        styleConfig.paddingTop = config.vertical\n        styleConfig.paddingBottom = config.vertical\n      }\n      if (config.top) styleConfig.paddingTop = config.top\n      if (config.right) styleConfig.paddingRight = config.right\n      if (config.bottom) styleConfig.paddingBottom = config.bottom\n      if (config.left) styleConfig.paddingLeft = config.left\n\n      const modifier = createResponsiveModifier(styleConfig)\n      this.baseBuilder.addModifier(modifier)\n    }\n    return this\n  }\n\n  responsiveMargin(value: ResponsiveValue<number | string> | ResponsiveSpacingConfig): ResponsiveModifierBuilder<T> {\n    if (isResponsiveValue(value) || typeof value === 'string' || typeof value === 'number') {\n      const modifier = createResponsivePropertyModifier('margin', value as ResponsiveValue<number | string>)\n      this.baseBuilder.addModifier(modifier)\n    } else {\n      // Handle spacing config\n      const styleConfig: ResponsiveStyleConfig = {}\n      const config = value as ResponsiveSpacingConfig\n\n      if (config.all) styleConfig.margin = config.all\n      if (config.horizontal) {\n        styleConfig.marginLeft = config.horizontal\n        styleConfig.marginRight = config.horizontal\n      }\n      if (config.vertical) {\n        styleConfig.marginTop = config.vertical\n        styleConfig.marginBottom = config.vertical\n      }\n      if (config.top) styleConfig.marginTop = config.top\n      if (config.right) styleConfig.marginRight = config.right\n      if (config.bottom) styleConfig.marginBottom = config.bottom\n      if (config.left) styleConfig.marginLeft = config.left\n\n      const modifier = createResponsiveModifier(styleConfig)\n      this.baseBuilder.addModifier(modifier)\n    }\n    return this\n  }\n\n  // Responsive typography methods\n  responsiveFont(config: ResponsiveTypographyConfig): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsiveModifier(config)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveFontSize(value: ResponsiveValue<number | string>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('fontSize', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  responsiveTextAlign(value: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>): ResponsiveModifierBuilder<T> {\n    const modifier = createResponsivePropertyModifier('textAlign', value)\n    this.baseBuilder.addModifier(modifier)\n    return this\n  }\n\n  // Breakpoint shorthand methods\n  get base(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('base', this, this.baseBuilder)\n  }\n\n  get sm(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('sm', this, this.baseBuilder)\n  }\n\n  get md(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('md', this, this.baseBuilder)\n  }\n\n  get lg(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('lg', this, this.baseBuilder)\n  }\n\n  get xl(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('xl', this, this.baseBuilder)\n  }\n\n  get '2xl'(): ResponsiveBreakpointBuilder<T> {\n    return new ResponsiveBreakpointBuilderImpl('2xl', this, this.baseBuilder)\n  }\n\n  // Delegate to base builder methods\n  [key: string]: any\n}\n\n/**\n * Implementation of breakpoint-specific builder\n */\nclass ResponsiveBreakpointBuilderImpl<T extends ComponentInstance = ComponentInstance> implements ResponsiveBreakpointBuilder<T> {\n  constructor(\n    private breakpoint: BreakpointKey,\n    private parentBuilder: ResponsiveModifierBuilder<T>,\n    private baseBuilder: ModifierBuilder<T>\n  ) {}\n\n  // Layout properties\n  width(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('width', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  height(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('height', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  minWidth(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('minWidth', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  maxWidth(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('maxWidth', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  minHeight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('minHeight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  maxHeight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('maxHeight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  padding(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('padding', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingHorizontal(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const leftModifier = createResponsivePropertyModifier('paddingLeft', responsiveValue)\n    const rightModifier = createResponsivePropertyModifier('paddingRight', responsiveValue)\n    this.parentBuilder.addModifier(leftModifier)\n    this.parentBuilder.addModifier(rightModifier)\n    return this.baseBuilder\n  }\n\n  paddingVertical(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const topModifier = createResponsivePropertyModifier('paddingTop', responsiveValue)\n    const bottomModifier = createResponsivePropertyModifier('paddingBottom', responsiveValue)\n    this.parentBuilder.addModifier(topModifier)\n    this.parentBuilder.addModifier(bottomModifier)\n    return this.baseBuilder\n  }\n\n  paddingTop(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingTop', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingBottom(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingBottom', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingLeft(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingLeft', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  paddingRight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('paddingRight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  margin(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('margin', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginHorizontal(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const leftModifier = createResponsivePropertyModifier('marginLeft', responsiveValue)\n    const rightModifier = createResponsivePropertyModifier('marginRight', responsiveValue)\n    this.parentBuilder.addModifier(leftModifier)\n    this.parentBuilder.addModifier(rightModifier)\n    return this.baseBuilder\n  }\n\n  marginVertical(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const topModifier = createResponsivePropertyModifier('marginTop', responsiveValue)\n    const bottomModifier = createResponsivePropertyModifier('marginBottom', responsiveValue)\n    this.parentBuilder.addModifier(topModifier)\n    this.parentBuilder.addModifier(bottomModifier)\n    return this.baseBuilder\n  }\n\n  marginTop(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginTop', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginBottom(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginBottom', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginLeft(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginLeft', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  marginRight(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('marginRight', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Typography properties\n  fontSize(value: number | string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('fontSize', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  textAlign(value: 'left' | 'center' | 'right' | 'justify'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('textAlign', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Display properties\n  display(value: 'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('display', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Flexbox properties\n  flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('flexDirection', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('justifyContent', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('alignItems', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  // Visual properties\n  backgroundColor(value: string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('backgroundColor', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  color(value: string): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('color', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n\n  opacity(value: number): ModifierBuilder<T> {\n    const responsiveValue = { [this.breakpoint]: value }\n    const modifier = createResponsivePropertyModifier('opacity', responsiveValue)\n    this.parentBuilder.addModifier(modifier)\n    return this.baseBuilder\n  }\n}\n\n/**\n * Utility function to wrap existing modifier builder with responsive capabilities\n */\nexport function withResponsive<T extends ComponentInstance = ComponentInstance>(builder: ModifierBuilder<T>): ResponsiveModifierBuilder<T> {\n  return new ResponsiveModifierBuilderImpl(builder)\n}\n\n/**\n * Create a responsive modifier builder from scratch\n */\nexport function createResponsiveBuilder<T extends ComponentInstance = ComponentInstance>(baseBuilder: ModifierBuilder<T>): ResponsiveModifierBuilder<T> {\n  return new ResponsiveModifierBuilderImpl(baseBuilder)\n}\n"],"names":["ResponsiveModifierBuilderImpl","baseBuilder","target","prop","baseProp","args","modifier","config","createResponsiveModifier","query","styles","createMediaQueryModifier","orientation","scheme","createResponsiveLayoutModifier","value","createResponsivePropertyModifier","isResponsiveValue","styleConfig","ResponsiveBreakpointBuilderImpl","breakpoint","parentBuilder","responsiveValue","leftModifier","rightModifier","topModifier","bottomModifier","createResponsiveBuilder"],"mappings":"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"}

package/dist/modifiers/responsive/responsive-modifier.cjs

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../base.cjs"),d=require("./types.cjs"),h=require("./css-generator.cjs"),C=require("./performance.cjs");require("../../reactive/cleanup.cjs");const u=require("../../reactive/computed.cjs"),M=require("../../reactive/effect.cjs");require("../../reactive/unified-scheduler.cjs");const l=require("../../reactive/signal.cjs");require("../../reactive/scheduler.cjs");const q=require("../../reactive/theme.cjs");var b=Object.defineProperty,I=(i,e,t)=>e in i?b(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,c=(i,e,t)=>I(i,typeof e!="symbol"?e+"":e,t);const S=250;class f extends g.BaseModifier{constructor(e){super(e),c(this,"type","responsive"),c(this,"priority",S),c(this,"generatedCSS",null),c(this,"elementSelector",""),c(this,"_config"),this._config=e}get config(){return this._config}apply(e,t){const r=e.element;!r||!(r instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(r),r.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateAndInjectCSS(),this.setupReactiveUpdates())}generateAndInjectCSS(){const e=C.ResponsivePerformanceMonitor.startMeasurement("css-generation");try{const t=new h.ResponsiveCSSGenerator({selector:this.elementSelector,generateMinified:process.env.NODE_ENV==="production",includeComments:process.env.NODE_ENV!=="production",optimizeOutput:!0});this.generatedCSS=t.generateResponsiveCSS(this.config),this.generatedCSS.cssRules.length>0&&h.CSSInjector.injectCSS(this.generatedCSS.cssRules)}finally{e()}}setupReactiveUpdates(){this.hasReactiveValues(this.config)&&M.createEffect(()=>{this.trackReactiveDependencies(this.config);const t=this.resolveReactiveConfig(this.config);this.updateConfig(t)})}trackReactiveDependencies(e){let t=!1;for(const[r,s]of Object.entries(e))if(this.isReactiveValue(s))l.isSignal(s)||u.isComputed(s)?s():this.isAsset(s)&&(t=!0,s.resolve());else if(d.isResponsiveValue(s))for(const[o,n]of Object.entries(s))this.isReactiveValue(n)&&(l.isSignal(n)||u.isComputed(n)?n():this.isAsset(n)&&(t=!0,n.resolve()));t&&q.getThemeSignal()()}updateConfig(e){this._config=e,this.generateAndInjectCSS()}generateUniqueSelector(e){return`.${`tachui-responsive-${this.generateUniqueId()}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}generateUniqueId(){return Math.random().toString(36).substr(2,9)}hasReactiveValues(e){for(const t of Object.values(e)){if(this.isReactiveValue(t))return!0;if(d.isResponsiveValue(t)){for(const r of Object.values(t))if(this.isReactiveValue(r))return!0}}return!1}isReactiveValue(e){return!!(l.isSignal(e)||u.isComputed(e)||this.isAsset(e))}isAsset(e){return e!=null&&typeof e=="object"&&"resolve"in e&&typeof e.resolve=="function"}resolveReactiveConfig(e){const t={};for(const[r,s]of Object.entries(e))if(this.isReactiveValue(s))l.isSignal(s)||u.isComputed(s)?t[r]=s():this.isAsset(s)&&(t[r]=s.resolve());else if(d.isResponsiveValue(s)){const o={};for(const[n,a]of Object.entries(s))this.isReactiveValue(a)?l.isSignal(a)||u.isComputed(a)?o[n]=a():this.isAsset(a)&&(o[n]=a.resolve()):o[n]=a;t[r]=o}else t[r]=s;return t}getGeneratedCSS(){return this.generatedCSS}getConfig(){return this.config}}function V(i){return new f(i)}class v extends g.BaseModifier{constructor(e,t){super({query:e,styles:t}),c(this,"type","media-query"),c(this,"priority",S+1),c(this,"elementSelector","")}get query(){return this.properties.query}get styles(){return this.properties.styles}apply(e,t){const r=e.element;!r||!(r instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(r),r.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateMediaQueryCSS())}generateMediaQueryCSS(){const{generateMinified:e=process.env.NODE_ENV==="production"}={},t=e?"":"  ",r=e?"":"    ",s=e?"":`
-`,o=e?"":" ";let n=`@media ${this.query}${o}{${s}`;n+=`${t}${this.elementSelector}${o}{${s}`;for(const[a,p]of Object.entries(this.styles)){const m=a.replace(/[A-Z]/g,y=>`-${y.toLowerCase()}`),R=typeof p=="number"?`${p}px`:p.toString();n+=`${r}${m}:${o}${R};${s}`}n+=`${t}}${s}`,n+=`}${s}`,h.CSSInjector.injectCSS([n])}generateUniqueSelector(e){return`.${`tachui-mq-${Math.random().toString(36).substr(2,9)}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}}function _(i,e){return new v(i,e)}function $(i,e){const t={[i]:e};return new f(t)}function O(i){const e={};return i.direction&&(e.flexDirection=i.direction),i.wrap&&(e.flexWrap=i.wrap),i.justify&&(e.justifyContent=i.justify),i.align&&(e.alignItems=i.align),i.gap&&(e.gap=i.gap),new f(e)}exports.MediaQueryModifier=v;exports.RESPONSIVE_MODIFIER_PRIORITY=S;exports.ResponsiveModifier=f;exports.createMediaQueryModifier=_;exports.createResponsiveLayoutModifier=O;exports.createResponsiveModifier=V;exports.createResponsivePropertyModifier=$;
-//# sourceMappingURL=responsive-modifier.cjs.map

package/dist/modifiers/responsive/responsive-modifier.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsive-modifier.cjs","sources":["../../../src/modifiers/responsive/responsive-modifier.ts"],"sourcesContent":["/**\n * Responsive Modifier Implementation\n * \n * Core responsive modifier that integrates with the existing tachUI modifier system.\n * Provides CSS-native media query generation with backward compatibility.\n */\n\nimport { BaseModifier } from '../base'\nimport type { ModifierContext } from '../types'\nimport type { DOMNode } from '../../runtime/types'\nimport {\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  ResponsiveModifierResult,\n  isResponsiveValue,\n  BreakpointKey\n} from './types'\nimport { ResponsiveCSSGenerator, CSSInjector } from './css-generator'\nimport { ResponsivePerformanceMonitor } from './performance'\nimport { createEffect, isSignal, isComputed } from '../../reactive'\nimport { getThemeSignal } from '../../reactive/theme'\n\n/**\n * Responsive modifier priority (between appearance and interaction)\n */\nexport const RESPONSIVE_MODIFIER_PRIORITY = 250\n\n/**\n * Core responsive modifier class\n */\nexport class ResponsiveModifier extends BaseModifier<ResponsiveStyleConfig> {\n  readonly type = 'responsive'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY\n  private generatedCSS: ResponsiveModifierResult | null = null\n  private elementSelector: string = ''\n  private _config: ResponsiveStyleConfig\n  \n  constructor(config: ResponsiveStyleConfig) {\n    super(config)\n    this._config = config\n  }\n  \n  get config(): ResponsiveStyleConfig {\n    return this._config\n  }\n  \n  /**\n   * Apply responsive styles to the element\n   */\n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector for this element\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate responsive CSS\n    this.generateAndInjectCSS()\n    \n    // Set up reactive updates for dynamic responsive values\n    this.setupReactiveUpdates()\n    \n    return undefined // No DOM modifications needed\n  }\n  \n  /**\n   * Generate and inject responsive CSS\n   */\n  private generateAndInjectCSS(): void {\n    const endMeasurement = ResponsivePerformanceMonitor.startMeasurement('css-generation')\n    \n    try {\n      // Always use immediate CSS generation for responsive modifiers\n      // Batching can cause FOUC and layout issues when components need responsive styles immediately\n      const generator = new ResponsiveCSSGenerator({\n        selector: this.elementSelector,\n        generateMinified: process.env.NODE_ENV === 'production',\n        includeComments: process.env.NODE_ENV !== 'production',\n        optimizeOutput: true\n      })\n      \n      this.generatedCSS = generator.generateResponsiveCSS(this.config)\n      \n      // Inject CSS rules into the document immediately\n      if (this.generatedCSS.cssRules.length > 0) {\n        CSSInjector.injectCSS(this.generatedCSS.cssRules)\n      }\n    } finally {\n      endMeasurement()\n    }\n  }\n  \n  /**\n   * Set up reactive updates for dynamic responsive values\n   */\n  private setupReactiveUpdates(): void {\n    // Check if any values are reactive signals\n    const hasReactiveValues = this.hasReactiveValues(this.config)\n    \n    if (hasReactiveValues) {\n      // Create reactive effect to regenerate CSS when values change\n      createEffect(() => {\n        // Track all reactive dependencies by accessing them\n        this.trackReactiveDependencies(this.config)\n        \n        // Re-evaluate config with current signal values\n        const currentConfig = this.resolveReactiveConfig(this.config)\n        \n        // Update CSS if config changed\n        this.updateConfig(currentConfig)\n      })\n    }\n  }\n  \n  /**\n   * Track reactive dependencies by accessing all reactive values\n   */\n  private trackReactiveDependencies(config: ResponsiveStyleConfig): void {\n    // Track theme signal for any Assets that might be present\n    let hasAssets = false\n    \n    for (const [_key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        if (isSignal(value) || isComputed(value)) {\n          value() // Access to establish dependency tracking\n        } else if (this.isAsset(value)) {\n          hasAssets = true\n          value.resolve() // Access to establish theme dependency tracking\n        }\n      } else if (isResponsiveValue(value)) {\n        for (const [_breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              breakpointValue() // Access to establish dependency tracking\n            } else if (this.isAsset(breakpointValue)) {\n              hasAssets = true\n              breakpointValue.resolve() // Access to establish theme dependency tracking\n            }\n          }\n        }\n      }\n    }\n    \n    // If we have Assets, explicitly track the theme signal to ensure theme changes trigger updates\n    if (hasAssets) {\n      const themeSignal = getThemeSignal()\n      themeSignal() // Access theme signal to establish dependency\n    }\n  }\n  \n  /**\n   * Update configuration and regenerate CSS\n   */\n  private updateConfig(newConfig: ResponsiveStyleConfig): void {\n    this._config = newConfig\n    \n    // Clear old CSS rules (if we had a way to track them individually)\n    // For now, we'll rely on CSS override behavior\n    \n    // Generate new CSS\n    this.generateAndInjectCSS()\n  }\n  \n  /**\n   * Generate unique CSS selector for this element\n   */\n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = this.generateUniqueId()\n    const className = `tachui-responsive-${uniqueId}`\n    return `.${className}`\n  }\n  \n  /**\n   * Extract class name from CSS selector\n   */\n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '') // Remove leading dot\n  }\n  \n  /**\n   * Generate unique ID for CSS class names\n   */\n  private generateUniqueId(): string {\n    return Math.random().toString(36).substr(2, 9)\n  }\n  \n  /**\n   * Check if configuration contains reactive values (signals)\n   */\n  private hasReactiveValues(config: ResponsiveStyleConfig): boolean {\n    for (const value of Object.values(config)) {\n      if (this.isReactiveValue(value)) {\n        return true\n      }\n      \n      if (isResponsiveValue(value)) {\n        for (const breakpointValue of Object.values(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            return true\n          }\n        }\n      }\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is a reactive signal, computed, or Asset\n   */\n  private isReactiveValue(value: any): boolean {\n    // Check for TachUI signals and computed values\n    if (isSignal(value) || isComputed(value)) {\n      return true\n    }\n    \n    // Check for Assets (have a resolve method and are theme-reactive)\n    if (this.isAsset(value)) {\n      return true\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is an Asset object\n   */\n  private isAsset(value: any): boolean {\n    return (\n      value !== null &&\n      value !== undefined &&\n      typeof value === 'object' &&\n      'resolve' in value &&\n      typeof value.resolve === 'function'\n    )\n  }\n  \n  /**\n   * Resolve configuration with current signal values\n   */\n  private resolveReactiveConfig(config: ResponsiveStyleConfig): ResponsiveStyleConfig {\n    const resolved: ResponsiveStyleConfig = {}\n    \n    for (const [key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        // Handle different types of reactive values\n        if (isSignal(value) || isComputed(value)) {\n          resolved[key] = value() // Call signal/computed to get current value\n        } else if (this.isAsset(value)) {\n          resolved[key] = value.resolve() // Resolve Asset to current theme value\n        }\n      } else if (isResponsiveValue(value)) {\n        const resolvedBreakpoints: Partial<Record<BreakpointKey, any>> = {}\n        \n        for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            // Handle different types of reactive values at breakpoint level\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue()\n            } else if (this.isAsset(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue.resolve()\n            }\n          } else {\n            resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue\n          }\n        }\n        \n        resolved[key] = resolvedBreakpoints\n      } else {\n        resolved[key] = value\n      }\n    }\n    \n    return resolved\n  }\n  \n  /**\n   * Get generated CSS information (for debugging)\n   */\n  getGeneratedCSS(): ResponsiveModifierResult | null {\n    return this.generatedCSS\n  }\n  \n  /**\n   * Get configuration (for debugging)\n   */\n  getConfig(): ResponsiveStyleConfig {\n    return this.config\n  }\n}\n\n/**\n * Factory function to create responsive modifiers\n */\nexport function createResponsiveModifier(config: ResponsiveStyleConfig): ResponsiveModifier {\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Media query modifier for custom media queries\n */\nexport class MediaQueryModifier extends BaseModifier<{ query: string; styles: Record<string, any> }> {\n  readonly type = 'media-query'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY + 1 // Slightly higher than responsive\n  private elementSelector: string = ''\n  \n  constructor(query: string, styles: Record<string, any>) {\n    super({ query, styles })\n  }\n  \n  get query(): string {\n    return this.properties.query\n  }\n  \n  get styles(): Record<string, any> {\n    return this.properties.styles\n  }\n  \n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate and inject media query CSS\n    this.generateMediaQueryCSS()\n    \n    return undefined\n  }\n  \n  private generateMediaQueryCSS(): void {\n    const { generateMinified = process.env.NODE_ENV === 'production' } = {}\n    const indent = generateMinified ? '' : '  '\n    const doubleIndent = generateMinified ? '' : '    '\n    const newline = generateMinified ? '' : '\\n'\n    const space = generateMinified ? '' : ' '\n    \n    let rule = `@media ${this.query}${space}{${newline}`\n    rule += `${indent}${this.elementSelector}${space}{${newline}`\n    \n    for (const [property, value] of Object.entries(this.styles)) {\n      const cssProperty = property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n      const cssValue = typeof value === 'number' ? `${value}px` : value.toString()\n      rule += `${doubleIndent}${cssProperty}:${space}${cssValue};${newline}`\n    }\n    \n    rule += `${indent}}${newline}`\n    rule += `}${newline}`\n    \n    CSSInjector.injectCSS([rule])\n  }\n  \n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = Math.random().toString(36).substr(2, 9)\n    const className = `tachui-mq-${uniqueId}`\n    return `.${className}`\n  }\n  \n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '')\n  }\n}\n\n/**\n * Factory function to create media query modifiers\n */\nexport function createMediaQueryModifier(query: string, styles: Record<string, any>): MediaQueryModifier {\n  return new MediaQueryModifier(query, styles)\n}\n\n/**\n * Utility to create responsive property modifier\n */\nexport function createResponsivePropertyModifier<T>(\n  property: string, \n  value: ResponsiveValue<T>\n): ResponsiveModifier {\n  const config = { [property]: value } as ResponsiveStyleConfig\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Create a responsive layout modifier\n */\nexport function createResponsiveLayoutModifier(config: {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | '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  gap?: ResponsiveValue<number | string>\n}): ResponsiveModifier {\n  const styleConfig: ResponsiveStyleConfig = {}\n  \n  if (config.direction) styleConfig.flexDirection = config.direction\n  if (config.wrap) styleConfig.flexWrap = config.wrap\n  if (config.justify) styleConfig.justifyContent = config.justify\n  if (config.align) styleConfig.alignItems = config.align\n  if (config.gap) styleConfig.gap = config.gap\n  \n  return new ResponsiveModifier(styleConfig)\n}"],"names":["RESPONSIVE_MODIFIER_PRIORITY","ResponsiveModifier","BaseModifier","config","__publicField","node","_context","element","endMeasurement","ResponsivePerformanceMonitor","generator","ResponsiveCSSGenerator","CSSInjector","createEffect","currentConfig","hasAssets","_key","value","isSignal","isComputed","isResponsiveValue","_breakpoint","breakpointValue","getThemeSignal","newConfig","_element","selector","resolved","key","resolvedBreakpoints","breakpoint","createResponsiveModifier","MediaQueryModifier","query","styles","generateMinified","indent","doubleIndent","newline","space","rule","property","cssProperty","match","cssValue","createMediaQueryModifier","createResponsivePropertyModifier","createResponsiveLayoutModifier","styleConfig"],"mappings":"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"}

package/dist/modifiers/responsive/responsive-modifier.js

@@ -1,204 +0,0 @@
-import { BaseModifier as d } from "../base.js";
-import { isResponsiveValue as p } from "./types.js";
-import { ResponsiveCSSGenerator as C, CSSInjector as m } from "./css-generator.js";
-import { ResponsivePerformanceMonitor as R } from "./performance.js";
-import "../../reactive/cleanup.js";
-import { isComputed as l } from "../../reactive/computed.js";
-import { createEffect as b } from "../../reactive/effect.js";
-import "../../reactive/unified-scheduler.js";
-import { isSignal as u } from "../../reactive/signal.js";
-import "../../reactive/scheduler.js";
-import { getThemeSignal as M } from "../../reactive/theme.js";
-var _ = Object.defineProperty, $ = (s, e, t) => e in s ? _(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, c = (s, e, t) => $(s, typeof e != "symbol" ? e + "" : e, t);
-const S = 250;
-class h extends d {
-  constructor(e) {
-    super(e), c(this, "type", "responsive"), c(this, "priority", S), c(this, "generatedCSS", null), c(this, "elementSelector", ""), c(this, "_config"), this._config = e;
-  }
-  get config() {
-    return this._config;
-  }
-  /**
-   * Apply responsive styles to the element
-   */
-  apply(e, t) {
-    const r = e.element;
-    !r || !(r instanceof HTMLElement) || (this.elementSelector = this.generateUniqueSelector(r), r.classList.add(this.getClassFromSelector(this.elementSelector)), this.generateAndInjectCSS(), this.setupReactiveUpdates());
-  }
-  /**
-   * Generate and inject responsive CSS
-   */
-  generateAndInjectCSS() {
-    const e = R.startMeasurement("css-generation");
-    try {
-      const t = new C({
-        selector: this.elementSelector,
-        generateMinified: process.env.NODE_ENV === "production",
-        includeComments: process.env.NODE_ENV !== "production",
-        optimizeOutput: !0
-      });
-      this.generatedCSS = t.generateResponsiveCSS(this.config), this.generatedCSS.cssRules.length > 0 && m.injectCSS(this.generatedCSS.cssRules);
-    } finally {
-      e();
-    }
-  }
-  /**
-   * Set up reactive updates for dynamic responsive values
-   */
-  setupReactiveUpdates() {
-    this.hasReactiveValues(this.config) && b(() => {
-      this.trackReactiveDependencies(this.config);
-      const t = this.resolveReactiveConfig(this.config);
-      this.updateConfig(t);
-    });
-  }
-  /**
-   * Track reactive dependencies by accessing all reactive values
-   */
-  trackReactiveDependencies(e) {
-    let t = !1;
-    for (const [r, i] of Object.entries(e))
-      if (this.isReactiveValue(i))
-        u(i) || l(i) ? i() : this.isAsset(i) && (t = !0, i.resolve());
-      else if (p(i))
-        for (const [o, n] of Object.entries(i))
-          this.isReactiveValue(n) && (u(n) || l(n) ? n() : this.isAsset(n) && (t = !0, n.resolve()));
-    t && M()();
-  }
-  /**
-   * Update configuration and regenerate CSS
-   */
-  updateConfig(e) {
-    this._config = e, this.generateAndInjectCSS();
-  }
-  /**
-   * Generate unique CSS selector for this element
-   */
-  generateUniqueSelector(e) {
-    return `.${`tachui-responsive-${this.generateUniqueId()}`}`;
-  }
-  /**
-   * Extract class name from CSS selector
-   */
-  getClassFromSelector(e) {
-    return e.replace(/^\./, "");
-  }
-  /**
-   * Generate unique ID for CSS class names
-   */
-  generateUniqueId() {
-    return Math.random().toString(36).substr(2, 9);
-  }
-  /**
-   * Check if configuration contains reactive values (signals)
-   */
-  hasReactiveValues(e) {
-    for (const t of Object.values(e)) {
-      if (this.isReactiveValue(t))
-        return !0;
-      if (p(t)) {
-        for (const r of Object.values(t))
-          if (this.isReactiveValue(r))
-            return !0;
-      }
-    }
-    return !1;
-  }
-  /**
-   * Check if a value is a reactive signal, computed, or Asset
-   */
-  isReactiveValue(e) {
-    return !!(u(e) || l(e) || this.isAsset(e));
-  }
-  /**
-   * Check if a value is an Asset object
-   */
-  isAsset(e) {
-    return e != null && typeof e == "object" && "resolve" in e && typeof e.resolve == "function";
-  }
-  /**
-   * Resolve configuration with current signal values
-   */
-  resolveReactiveConfig(e) {
-    const t = {};
-    for (const [r, i] of Object.entries(e))
-      if (this.isReactiveValue(i))
-        u(i) || l(i) ? t[r] = i() : this.isAsset(i) && (t[r] = i.resolve());
-      else if (p(i)) {
-        const o = {};
-        for (const [n, a] of Object.entries(i))
-          this.isReactiveValue(a) ? u(a) || l(a) ? o[n] = a() : this.isAsset(a) && (o[n] = a.resolve()) : o[n] = a;
-        t[r] = o;
-      } else
-        t[r] = i;
-    return t;
-  }
-  /**
-   * Get generated CSS information (for debugging)
-   */
-  getGeneratedCSS() {
-    return this.generatedCSS;
-  }
-  /**
-   * Get configuration (for debugging)
-   */
-  getConfig() {
-    return this.config;
-  }
-}
-function D(s) {
-  return new h(s);
-}
-class V extends d {
-  constructor(e, t) {
-    super({ query: e, styles: t }), c(this, "type", "media-query"), c(this, "priority", S + 1), c(this, "elementSelector", "");
-  }
-  get query() {
-    return this.properties.query;
-  }
-  get styles() {
-    return this.properties.styles;
-  }
-  apply(e, t) {
-    const r = e.element;
-    !r || !(r instanceof HTMLElement) || (this.elementSelector = this.generateUniqueSelector(r), r.classList.add(this.getClassFromSelector(this.elementSelector)), this.generateMediaQueryCSS());
-  }
-  generateMediaQueryCSS() {
-    const { generateMinified: e = process.env.NODE_ENV === "production" } = {}, t = e ? "" : "  ", r = e ? "" : "    ", i = e ? "" : `
-`, o = e ? "" : " ";
-    let n = `@media ${this.query}${o}{${i}`;
-    n += `${t}${this.elementSelector}${o}{${i}`;
-    for (const [a, f] of Object.entries(this.styles)) {
-      const g = a.replace(/[A-Z]/g, (y) => `-${y.toLowerCase()}`), v = typeof f == "number" ? `${f}px` : f.toString();
-      n += `${r}${g}:${o}${v};${i}`;
-    }
-    n += `${t}}${i}`, n += `}${i}`, m.injectCSS([n]);
-  }
-  generateUniqueSelector(e) {
-    return `.${`tachui-mq-${Math.random().toString(36).substr(2, 9)}`}`;
-  }
-  getClassFromSelector(e) {
-    return e.replace(/^\./, "");
-  }
-}
-function k(s, e) {
-  return new V(s, e);
-}
-function F(s, e) {
-  const t = { [s]: e };
-  return new h(t);
-}
-function L(s) {
-  const e = {};
-  return s.direction && (e.flexDirection = s.direction), s.wrap && (e.flexWrap = s.wrap), s.justify && (e.justifyContent = s.justify), s.align && (e.alignItems = s.align), s.gap && (e.gap = s.gap), new h(e);
-}
-export {
-  V as MediaQueryModifier,
-  S as RESPONSIVE_MODIFIER_PRIORITY,
-  h as ResponsiveModifier,
-  k as createMediaQueryModifier,
-  L as createResponsiveLayoutModifier,
-  D as createResponsiveModifier,
-  F as createResponsivePropertyModifier
-};
-//# sourceMappingURL=responsive-modifier.js.map

package/dist/modifiers/responsive/responsive-modifier.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"responsive-modifier.js","sources":["../../../src/modifiers/responsive/responsive-modifier.ts"],"sourcesContent":["/**\n * Responsive Modifier Implementation\n * \n * Core responsive modifier that integrates with the existing tachUI modifier system.\n * Provides CSS-native media query generation with backward compatibility.\n */\n\nimport { BaseModifier } from '../base'\nimport type { ModifierContext } from '../types'\nimport type { DOMNode } from '../../runtime/types'\nimport {\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  ResponsiveModifierResult,\n  isResponsiveValue,\n  BreakpointKey\n} from './types'\nimport { ResponsiveCSSGenerator, CSSInjector } from './css-generator'\nimport { ResponsivePerformanceMonitor } from './performance'\nimport { createEffect, isSignal, isComputed } from '../../reactive'\nimport { getThemeSignal } from '../../reactive/theme'\n\n/**\n * Responsive modifier priority (between appearance and interaction)\n */\nexport const RESPONSIVE_MODIFIER_PRIORITY = 250\n\n/**\n * Core responsive modifier class\n */\nexport class ResponsiveModifier extends BaseModifier<ResponsiveStyleConfig> {\n  readonly type = 'responsive'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY\n  private generatedCSS: ResponsiveModifierResult | null = null\n  private elementSelector: string = ''\n  private _config: ResponsiveStyleConfig\n  \n  constructor(config: ResponsiveStyleConfig) {\n    super(config)\n    this._config = config\n  }\n  \n  get config(): ResponsiveStyleConfig {\n    return this._config\n  }\n  \n  /**\n   * Apply responsive styles to the element\n   */\n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector for this element\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate responsive CSS\n    this.generateAndInjectCSS()\n    \n    // Set up reactive updates for dynamic responsive values\n    this.setupReactiveUpdates()\n    \n    return undefined // No DOM modifications needed\n  }\n  \n  /**\n   * Generate and inject responsive CSS\n   */\n  private generateAndInjectCSS(): void {\n    const endMeasurement = ResponsivePerformanceMonitor.startMeasurement('css-generation')\n    \n    try {\n      // Always use immediate CSS generation for responsive modifiers\n      // Batching can cause FOUC and layout issues when components need responsive styles immediately\n      const generator = new ResponsiveCSSGenerator({\n        selector: this.elementSelector,\n        generateMinified: process.env.NODE_ENV === 'production',\n        includeComments: process.env.NODE_ENV !== 'production',\n        optimizeOutput: true\n      })\n      \n      this.generatedCSS = generator.generateResponsiveCSS(this.config)\n      \n      // Inject CSS rules into the document immediately\n      if (this.generatedCSS.cssRules.length > 0) {\n        CSSInjector.injectCSS(this.generatedCSS.cssRules)\n      }\n    } finally {\n      endMeasurement()\n    }\n  }\n  \n  /**\n   * Set up reactive updates for dynamic responsive values\n   */\n  private setupReactiveUpdates(): void {\n    // Check if any values are reactive signals\n    const hasReactiveValues = this.hasReactiveValues(this.config)\n    \n    if (hasReactiveValues) {\n      // Create reactive effect to regenerate CSS when values change\n      createEffect(() => {\n        // Track all reactive dependencies by accessing them\n        this.trackReactiveDependencies(this.config)\n        \n        // Re-evaluate config with current signal values\n        const currentConfig = this.resolveReactiveConfig(this.config)\n        \n        // Update CSS if config changed\n        this.updateConfig(currentConfig)\n      })\n    }\n  }\n  \n  /**\n   * Track reactive dependencies by accessing all reactive values\n   */\n  private trackReactiveDependencies(config: ResponsiveStyleConfig): void {\n    // Track theme signal for any Assets that might be present\n    let hasAssets = false\n    \n    for (const [_key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        if (isSignal(value) || isComputed(value)) {\n          value() // Access to establish dependency tracking\n        } else if (this.isAsset(value)) {\n          hasAssets = true\n          value.resolve() // Access to establish theme dependency tracking\n        }\n      } else if (isResponsiveValue(value)) {\n        for (const [_breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              breakpointValue() // Access to establish dependency tracking\n            } else if (this.isAsset(breakpointValue)) {\n              hasAssets = true\n              breakpointValue.resolve() // Access to establish theme dependency tracking\n            }\n          }\n        }\n      }\n    }\n    \n    // If we have Assets, explicitly track the theme signal to ensure theme changes trigger updates\n    if (hasAssets) {\n      const themeSignal = getThemeSignal()\n      themeSignal() // Access theme signal to establish dependency\n    }\n  }\n  \n  /**\n   * Update configuration and regenerate CSS\n   */\n  private updateConfig(newConfig: ResponsiveStyleConfig): void {\n    this._config = newConfig\n    \n    // Clear old CSS rules (if we had a way to track them individually)\n    // For now, we'll rely on CSS override behavior\n    \n    // Generate new CSS\n    this.generateAndInjectCSS()\n  }\n  \n  /**\n   * Generate unique CSS selector for this element\n   */\n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = this.generateUniqueId()\n    const className = `tachui-responsive-${uniqueId}`\n    return `.${className}`\n  }\n  \n  /**\n   * Extract class name from CSS selector\n   */\n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '') // Remove leading dot\n  }\n  \n  /**\n   * Generate unique ID for CSS class names\n   */\n  private generateUniqueId(): string {\n    return Math.random().toString(36).substr(2, 9)\n  }\n  \n  /**\n   * Check if configuration contains reactive values (signals)\n   */\n  private hasReactiveValues(config: ResponsiveStyleConfig): boolean {\n    for (const value of Object.values(config)) {\n      if (this.isReactiveValue(value)) {\n        return true\n      }\n      \n      if (isResponsiveValue(value)) {\n        for (const breakpointValue of Object.values(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            return true\n          }\n        }\n      }\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is a reactive signal, computed, or Asset\n   */\n  private isReactiveValue(value: any): boolean {\n    // Check for TachUI signals and computed values\n    if (isSignal(value) || isComputed(value)) {\n      return true\n    }\n    \n    // Check for Assets (have a resolve method and are theme-reactive)\n    if (this.isAsset(value)) {\n      return true\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is an Asset object\n   */\n  private isAsset(value: any): boolean {\n    return (\n      value !== null &&\n      value !== undefined &&\n      typeof value === 'object' &&\n      'resolve' in value &&\n      typeof value.resolve === 'function'\n    )\n  }\n  \n  /**\n   * Resolve configuration with current signal values\n   */\n  private resolveReactiveConfig(config: ResponsiveStyleConfig): ResponsiveStyleConfig {\n    const resolved: ResponsiveStyleConfig = {}\n    \n    for (const [key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        // Handle different types of reactive values\n        if (isSignal(value) || isComputed(value)) {\n          resolved[key] = value() // Call signal/computed to get current value\n        } else if (this.isAsset(value)) {\n          resolved[key] = value.resolve() // Resolve Asset to current theme value\n        }\n      } else if (isResponsiveValue(value)) {\n        const resolvedBreakpoints: Partial<Record<BreakpointKey, any>> = {}\n        \n        for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            // Handle different types of reactive values at breakpoint level\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue()\n            } else if (this.isAsset(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue.resolve()\n            }\n          } else {\n            resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue\n          }\n        }\n        \n        resolved[key] = resolvedBreakpoints\n      } else {\n        resolved[key] = value\n      }\n    }\n    \n    return resolved\n  }\n  \n  /**\n   * Get generated CSS information (for debugging)\n   */\n  getGeneratedCSS(): ResponsiveModifierResult | null {\n    return this.generatedCSS\n  }\n  \n  /**\n   * Get configuration (for debugging)\n   */\n  getConfig(): ResponsiveStyleConfig {\n    return this.config\n  }\n}\n\n/**\n * Factory function to create responsive modifiers\n */\nexport function createResponsiveModifier(config: ResponsiveStyleConfig): ResponsiveModifier {\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Media query modifier for custom media queries\n */\nexport class MediaQueryModifier extends BaseModifier<{ query: string; styles: Record<string, any> }> {\n  readonly type = 'media-query'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY + 1 // Slightly higher than responsive\n  private elementSelector: string = ''\n  \n  constructor(query: string, styles: Record<string, any>) {\n    super({ query, styles })\n  }\n  \n  get query(): string {\n    return this.properties.query\n  }\n  \n  get styles(): Record<string, any> {\n    return this.properties.styles\n  }\n  \n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate and inject media query CSS\n    this.generateMediaQueryCSS()\n    \n    return undefined\n  }\n  \n  private generateMediaQueryCSS(): void {\n    const { generateMinified = process.env.NODE_ENV === 'production' } = {}\n    const indent = generateMinified ? '' : '  '\n    const doubleIndent = generateMinified ? '' : '    '\n    const newline = generateMinified ? '' : '\\n'\n    const space = generateMinified ? '' : ' '\n    \n    let rule = `@media ${this.query}${space}{${newline}`\n    rule += `${indent}${this.elementSelector}${space}{${newline}`\n    \n    for (const [property, value] of Object.entries(this.styles)) {\n      const cssProperty = property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n      const cssValue = typeof value === 'number' ? `${value}px` : value.toString()\n      rule += `${doubleIndent}${cssProperty}:${space}${cssValue};${newline}`\n    }\n    \n    rule += `${indent}}${newline}`\n    rule += `}${newline}`\n    \n    CSSInjector.injectCSS([rule])\n  }\n  \n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = Math.random().toString(36).substr(2, 9)\n    const className = `tachui-mq-${uniqueId}`\n    return `.${className}`\n  }\n  \n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '')\n  }\n}\n\n/**\n * Factory function to create media query modifiers\n */\nexport function createMediaQueryModifier(query: string, styles: Record<string, any>): MediaQueryModifier {\n  return new MediaQueryModifier(query, styles)\n}\n\n/**\n * Utility to create responsive property modifier\n */\nexport function createResponsivePropertyModifier<T>(\n  property: string, \n  value: ResponsiveValue<T>\n): ResponsiveModifier {\n  const config = { [property]: value } as ResponsiveStyleConfig\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Create a responsive layout modifier\n */\nexport function createResponsiveLayoutModifier(config: {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | '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  gap?: ResponsiveValue<number | string>\n}): ResponsiveModifier {\n  const styleConfig: ResponsiveStyleConfig = {}\n  \n  if (config.direction) styleConfig.flexDirection = config.direction\n  if (config.wrap) styleConfig.flexWrap = config.wrap\n  if (config.justify) styleConfig.justifyContent = config.justify\n  if (config.align) styleConfig.alignItems = config.align\n  if (config.gap) styleConfig.gap = config.gap\n  \n  return new ResponsiveModifier(styleConfig)\n}"],"names":["RESPONSIVE_MODIFIER_PRIORITY","ResponsiveModifier","BaseModifier","config","__publicField","node","_context","element","endMeasurement","ResponsivePerformanceMonitor","generator","ResponsiveCSSGenerator","CSSInjector","createEffect","currentConfig","hasAssets","_key","value","isSignal","isComputed","isResponsiveValue","_breakpoint","breakpointValue","getThemeSignal","newConfig","_element","selector","resolved","key","resolvedBreakpoints","breakpoint","createResponsiveModifier","MediaQueryModifier","query","styles","generateMinified","indent","doubleIndent","newline","space","rule","property","cssProperty","match","cssValue","createMediaQueryModifier","createResponsivePropertyModifier","createResponsiveLayoutModifier","styleConfig"],"mappings":"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"}

package/dist/modifiers/responsive/types.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i={base:"0px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};function l(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)&&Object.keys(e).some(s=>["base","sm","md","lg","xl","2xl"].includes(s))}function n(e){return["base","sm","md","lg","xl","2xl"].includes(e)}exports.DEFAULT_BREAKPOINTS=i;exports.isResponsiveValue=l;exports.isValidBreakpointKey=n;
-//# sourceMappingURL=types.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/modifiers/responsive/types.ts"],"sourcesContent":["/**\n * Responsive Design System Types\n * \n * CSS-Native media query and responsive design type definitions for tachUI.\n * Provides comprehensive type safety for responsive modifiers while maintaining\n * backward compatibility with existing modifier system.\n */\n\n/**\n * Standard breakpoint identifiers following Tailwind conventions\n */\nexport type BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\n/**\n * Breakpoint configuration mapping breakpoint keys to CSS values\n */\nexport interface BreakpointConfig {\n  base?: string    // Mobile-first base (no media query)\n  sm?: string      // 640px+ (small tablets and large phones)\n  md?: string      // 768px+ (tablets)\n  lg?: string      // 1024px+ (laptops and small desktops)\n  xl?: string      // 1280px+ (large desktops)\n  '2xl'?: string   // 1536px+ (extra large screens)\n}\n\n/**\n * Default breakpoint values (Tailwind-inspired)\n */\nexport const DEFAULT_BREAKPOINTS: Required<BreakpointConfig> = {\n  base: '0px',      // Mobile-first base\n  sm: '640px',      // Small tablets and large phones\n  md: '768px',      // Tablets\n  lg: '1024px',     // Laptops and small desktops\n  xl: '1280px',     // Large desktops\n  '2xl': '1536px'   // Extra large screens\n} as const\n\n/**\n * Responsive value type that accepts either a single value or breakpoint-specific values\n */\nexport type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>\n\n/**\n * CSS property values that can be responsive\n */\nexport type ResponsiveCSSValue = ResponsiveValue<string | number>\n\n/**\n * Advanced media query configuration for custom responsive behavior\n */\nexport interface MediaQueryConfig {\n  query: string                    // Raw CSS media query\n  styles: Record<string, string | number>  // CSS properties to apply\n}\n\n/**\n * Responsive modifier configuration combining breakpoints and custom media queries\n */\nexport interface ResponsiveModifierConfig<T = any> {\n  breakpoints?: Partial<Record<BreakpointKey, T>>\n  mediaQueries?: MediaQueryConfig[]\n  fallback?: T  // Fallback value if no conditions match\n}\n\n/**\n * Responsive layout configuration for common responsive patterns\n */\nexport interface ResponsiveLayoutConfig {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | '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  gap?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive typography configuration\n */\nexport interface ResponsiveTypographyConfig {\n  fontSize?: ResponsiveValue<number | string>\n  lineHeight?: ResponsiveValue<number | string>\n  letterSpacing?: ResponsiveValue<number | string>\n  fontWeight?: ResponsiveValue<number | string>\n  textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n  textTransform?: ResponsiveValue<'none' | 'uppercase' | 'lowercase' | 'capitalize'>\n}\n\n/**\n * Responsive spacing configuration\n */\nexport interface ResponsiveSpacingConfig {\n  top?: ResponsiveValue<number | string>\n  right?: ResponsiveValue<number | string>\n  bottom?: ResponsiveValue<number | string>\n  left?: ResponsiveValue<number | string>\n  horizontal?: ResponsiveValue<number | string>  // left + right\n  vertical?: ResponsiveValue<number | string>    // top + bottom\n  all?: ResponsiveValue<number | string>         // all sides\n}\n\n/**\n * Responsive dimension configuration\n */\nexport interface ResponsiveDimensionConfig {\n  width?: ResponsiveValue<number | string>\n  height?: ResponsiveValue<number | string>\n  minWidth?: ResponsiveValue<number | string>\n  maxWidth?: ResponsiveValue<number | string>\n  minHeight?: ResponsiveValue<number | string>\n  maxHeight?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive visibility configuration\n */\nexport interface ResponsiveVisibilityConfig {\n  display?: ResponsiveValue<'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid'>\n  visibility?: ResponsiveValue<'visible' | 'hidden' | 'collapse'>\n  opacity?: ResponsiveValue<number>\n}\n\n/**\n * Comprehensive responsive style configuration\n */\nexport interface ResponsiveStyleConfig extends \n  ResponsiveLayoutConfig,\n  ResponsiveTypographyConfig,\n  ResponsiveDimensionConfig,\n  ResponsiveVisibilityConfig {\n  \n  // Additional CSS properties that can be responsive\n  backgroundColor?: ResponsiveValue<string>\n  color?: ResponsiveValue<string>\n  border?: ResponsiveValue<string>\n  borderRadius?: ResponsiveValue<number | string>\n  boxShadow?: ResponsiveValue<string>\n  transform?: ResponsiveValue<string>\n  transition?: ResponsiveValue<string>\n  \n  // Spacing\n  padding?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  margin?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  \n  // Custom CSS properties\n  [key: string]: any\n}\n\n/**\n * Breakpoint context information for responsive utilities\n */\nexport interface BreakpointContext {\n  current: BreakpointKey\n  width: number\n  height: number\n  isAbove: (breakpoint: BreakpointKey) => boolean\n  isBelow: (breakpoint: BreakpointKey) => boolean\n  isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean\n  matches: (query: string) => boolean\n}\n\n/**\n * Responsive modifier factory configuration\n */\nexport interface ResponsiveModifierFactoryConfig {\n  breakpoints?: BreakpointConfig\n  generateCSS?: boolean          // Generate CSS media queries vs JavaScript\n  fallbackToJS?: boolean         // Fallback to JavaScript if CSS not supported\n  optimizeOutput?: boolean       // Optimize generated CSS\n  debugMode?: boolean           // Enable responsive debugging\n}\n\n/**\n * CSS media query generation result\n */\nexport interface GeneratedMediaQuery {\n  breakpoint: BreakpointKey\n  query: string                 // CSS media query string\n  styles: Record<string, string | number>  // CSS properties\n  selector: string              // CSS selector\n}\n\n/**\n * Responsive modifier application result\n */\nexport interface ResponsiveModifierResult {\n  cssRules: string[]            // Generated CSS rules\n  mediaQueries: GeneratedMediaQuery[]  // Generated media queries\n  fallbackStyles: Record<string, string | number>  // Fallback styles for base\n  hasResponsiveStyles: boolean  // Whether responsive styles were applied\n}\n\n/**\n * Type guard to check if a value is responsive\n */\nexport function isResponsiveValue<T>(value: ResponsiveValue<T>): value is Partial<Record<BreakpointKey, T>> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value) && \n         Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key))\n}\n\n/**\n * Type guard to check if a breakpoint key is valid\n */\nexport function isValidBreakpointKey(key: string): key is BreakpointKey {\n  return ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key)\n}\n\n/**\n * Utility type to make any property responsive\n */\nexport type MakeResponsive<T> = {\n  [K in keyof T]: ResponsiveValue<T[K]>\n}\n\n/**\n * Extract responsive properties from a configuration object\n */\nexport type ResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? K : never]: T[K]\n}\n\n/**\n * Extract non-responsive properties from a configuration object\n */\nexport type NonResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? never : K]: T[K]\n}"],"names":["DEFAULT_BREAKPOINTS","isResponsiveValue","value","key","isValidBreakpointKey"],"mappings":"gFA4BO,MAAMA,EAAkD,CAC7D,KAAM,MACN,GAAI,QACJ,GAAI,QACJ,GAAI,SACJ,GAAI,SACJ,MAAO,QACT,EA+JO,SAASC,EAAqBC,EAAuE,CAC1G,OAAO,OAAOA,GAAU,UAAYA,IAAU,MAAQ,CAAC,MAAM,QAAQA,CAAK,GACnE,OAAO,KAAKA,CAAK,EAAE,KAAKC,GAAO,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAK,EAAE,SAASA,CAAG,CAAC,CAC7F,CAKO,SAASC,EAAqBD,EAAmC,CACtE,MAAO,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAK,EAAE,SAASA,CAAG,CAC7D"}

package/dist/modifiers/responsive/types.js

@@ -1,26 +0,0 @@
-const x = {
-  base: "0px",
-  // Mobile-first base
-  sm: "640px",
-  // Small tablets and large phones
-  md: "768px",
-  // Tablets
-  lg: "1024px",
-  // Laptops and small desktops
-  xl: "1280px",
-  // Large desktops
-  "2xl": "1536px"
-  // Extra large screens
-};
-function l(s) {
-  return typeof s == "object" && s !== null && !Array.isArray(s) && Object.keys(s).some((e) => ["base", "sm", "md", "lg", "xl", "2xl"].includes(e));
-}
-function n(s) {
-  return ["base", "sm", "md", "lg", "xl", "2xl"].includes(s);
-}
-export {
-  x as DEFAULT_BREAKPOINTS,
-  l as isResponsiveValue,
-  n as isValidBreakpointKey
-};
-//# sourceMappingURL=types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":["../../../src/modifiers/responsive/types.ts"],"sourcesContent":["/**\n * Responsive Design System Types\n * \n * CSS-Native media query and responsive design type definitions for tachUI.\n * Provides comprehensive type safety for responsive modifiers while maintaining\n * backward compatibility with existing modifier system.\n */\n\n/**\n * Standard breakpoint identifiers following Tailwind conventions\n */\nexport type BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\n/**\n * Breakpoint configuration mapping breakpoint keys to CSS values\n */\nexport interface BreakpointConfig {\n  base?: string    // Mobile-first base (no media query)\n  sm?: string      // 640px+ (small tablets and large phones)\n  md?: string      // 768px+ (tablets)\n  lg?: string      // 1024px+ (laptops and small desktops)\n  xl?: string      // 1280px+ (large desktops)\n  '2xl'?: string   // 1536px+ (extra large screens)\n}\n\n/**\n * Default breakpoint values (Tailwind-inspired)\n */\nexport const DEFAULT_BREAKPOINTS: Required<BreakpointConfig> = {\n  base: '0px',      // Mobile-first base\n  sm: '640px',      // Small tablets and large phones\n  md: '768px',      // Tablets\n  lg: '1024px',     // Laptops and small desktops\n  xl: '1280px',     // Large desktops\n  '2xl': '1536px'   // Extra large screens\n} as const\n\n/**\n * Responsive value type that accepts either a single value or breakpoint-specific values\n */\nexport type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>\n\n/**\n * CSS property values that can be responsive\n */\nexport type ResponsiveCSSValue = ResponsiveValue<string | number>\n\n/**\n * Advanced media query configuration for custom responsive behavior\n */\nexport interface MediaQueryConfig {\n  query: string                    // Raw CSS media query\n  styles: Record<string, string | number>  // CSS properties to apply\n}\n\n/**\n * Responsive modifier configuration combining breakpoints and custom media queries\n */\nexport interface ResponsiveModifierConfig<T = any> {\n  breakpoints?: Partial<Record<BreakpointKey, T>>\n  mediaQueries?: MediaQueryConfig[]\n  fallback?: T  // Fallback value if no conditions match\n}\n\n/**\n * Responsive layout configuration for common responsive patterns\n */\nexport interface ResponsiveLayoutConfig {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | '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  gap?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive typography configuration\n */\nexport interface ResponsiveTypographyConfig {\n  fontSize?: ResponsiveValue<number | string>\n  lineHeight?: ResponsiveValue<number | string>\n  letterSpacing?: ResponsiveValue<number | string>\n  fontWeight?: ResponsiveValue<number | string>\n  textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n  textTransform?: ResponsiveValue<'none' | 'uppercase' | 'lowercase' | 'capitalize'>\n}\n\n/**\n * Responsive spacing configuration\n */\nexport interface ResponsiveSpacingConfig {\n  top?: ResponsiveValue<number | string>\n  right?: ResponsiveValue<number | string>\n  bottom?: ResponsiveValue<number | string>\n  left?: ResponsiveValue<number | string>\n  horizontal?: ResponsiveValue<number | string>  // left + right\n  vertical?: ResponsiveValue<number | string>    // top + bottom\n  all?: ResponsiveValue<number | string>         // all sides\n}\n\n/**\n * Responsive dimension configuration\n */\nexport interface ResponsiveDimensionConfig {\n  width?: ResponsiveValue<number | string>\n  height?: ResponsiveValue<number | string>\n  minWidth?: ResponsiveValue<number | string>\n  maxWidth?: ResponsiveValue<number | string>\n  minHeight?: ResponsiveValue<number | string>\n  maxHeight?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive visibility configuration\n */\nexport interface ResponsiveVisibilityConfig {\n  display?: ResponsiveValue<'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid'>\n  visibility?: ResponsiveValue<'visible' | 'hidden' | 'collapse'>\n  opacity?: ResponsiveValue<number>\n}\n\n/**\n * Comprehensive responsive style configuration\n */\nexport interface ResponsiveStyleConfig extends \n  ResponsiveLayoutConfig,\n  ResponsiveTypographyConfig,\n  ResponsiveDimensionConfig,\n  ResponsiveVisibilityConfig {\n  \n  // Additional CSS properties that can be responsive\n  backgroundColor?: ResponsiveValue<string>\n  color?: ResponsiveValue<string>\n  border?: ResponsiveValue<string>\n  borderRadius?: ResponsiveValue<number | string>\n  boxShadow?: ResponsiveValue<string>\n  transform?: ResponsiveValue<string>\n  transition?: ResponsiveValue<string>\n  \n  // Spacing\n  padding?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  margin?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  \n  // Custom CSS properties\n  [key: string]: any\n}\n\n/**\n * Breakpoint context information for responsive utilities\n */\nexport interface BreakpointContext {\n  current: BreakpointKey\n  width: number\n  height: number\n  isAbove: (breakpoint: BreakpointKey) => boolean\n  isBelow: (breakpoint: BreakpointKey) => boolean\n  isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean\n  matches: (query: string) => boolean\n}\n\n/**\n * Responsive modifier factory configuration\n */\nexport interface ResponsiveModifierFactoryConfig {\n  breakpoints?: BreakpointConfig\n  generateCSS?: boolean          // Generate CSS media queries vs JavaScript\n  fallbackToJS?: boolean         // Fallback to JavaScript if CSS not supported\n  optimizeOutput?: boolean       // Optimize generated CSS\n  debugMode?: boolean           // Enable responsive debugging\n}\n\n/**\n * CSS media query generation result\n */\nexport interface GeneratedMediaQuery {\n  breakpoint: BreakpointKey\n  query: string                 // CSS media query string\n  styles: Record<string, string | number>  // CSS properties\n  selector: string              // CSS selector\n}\n\n/**\n * Responsive modifier application result\n */\nexport interface ResponsiveModifierResult {\n  cssRules: string[]            // Generated CSS rules\n  mediaQueries: GeneratedMediaQuery[]  // Generated media queries\n  fallbackStyles: Record<string, string | number>  // Fallback styles for base\n  hasResponsiveStyles: boolean  // Whether responsive styles were applied\n}\n\n/**\n * Type guard to check if a value is responsive\n */\nexport function isResponsiveValue<T>(value: ResponsiveValue<T>): value is Partial<Record<BreakpointKey, T>> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value) && \n         Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key))\n}\n\n/**\n * Type guard to check if a breakpoint key is valid\n */\nexport function isValidBreakpointKey(key: string): key is BreakpointKey {\n  return ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key)\n}\n\n/**\n * Utility type to make any property responsive\n */\nexport type MakeResponsive<T> = {\n  [K in keyof T]: ResponsiveValue<T[K]>\n}\n\n/**\n * Extract responsive properties from a configuration object\n */\nexport type ResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? K : never]: T[K]\n}\n\n/**\n * Extract non-responsive properties from a configuration object\n */\nexport type NonResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? never : K]: T[K]\n}"],"names":["DEFAULT_BREAKPOINTS","isResponsiveValue","value","key","isValidBreakpointKey"],"mappings":"AA4BO,MAAMA,IAAkD;AAAA,EAC7D,MAAM;AAAA;AAAA,EACN,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,OAAO;AAAA;AACT;AA+JO,SAASC,EAAqBC,GAAuE;AAC1G,SAAO,OAAOA,KAAU,YAAYA,MAAU,QAAQ,CAAC,MAAM,QAAQA,CAAK,KACnE,OAAO,KAAKA,CAAK,EAAE,KAAK,CAAAC,MAAO,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK,EAAE,SAASA,CAAG,CAAC;AAC7F;AAKO,SAASC,EAAqBD,GAAmC;AACtE,SAAO,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK,EAAE,SAASA,CAAG;AAC7D;"}

package/dist/modifiers/responsive/utilities.cjs

@@ -1,16 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./types.cjs"),a=require("./breakpoints.cjs");require("../../reactive/cleanup.cjs");const l=require("../../reactive/computed.cjs");require("../../reactive/unified-scheduler.cjs");const h=require("../../reactive/signal.cjs");require("../../reactive/scheduler.cjs");require("../../reactive/theme.cjs");function v(){const e=a.getCurrentBreakpoint(),t=l.createComputed(()=>a.createBreakpointContext());return{current:e,context:t,isAbove:n=>l.createComputed(()=>a.getBreakpointIndex(e())>a.getBreakpointIndex(n)),isBelow:n=>l.createComputed(()=>a.getBreakpointIndex(e())<a.getBreakpointIndex(n)),isBetween:(n,s)=>l.createComputed(()=>{const d=a.getBreakpointIndex(e()),u=a.getBreakpointIndex(n),m=a.getBreakpointIndex(s);return d>=u&&d<=m}),matches:n=>{const[s,d]=h.createSignal(!1);if(typeof window<"u"){const u=window.matchMedia(n);d(u.matches);const m=g=>d(g.matches);u.addEventListener("change",m)}return s}}}function b(e){const[t,o]=h.createSignal(!1);if(typeof window<"u"){const i=window.matchMedia(e);o(i.matches);const r=c=>o(c.matches);i.addEventListener("change",r)}return t}function w(e){const t=a.getCurrentBreakpoint();return l.createComputed(()=>{if(!f.isResponsiveValue(e))return e;const o=t(),i=e,r=["base","sm","md","lg","xl","2xl"],c=r.indexOf(o);for(let n=c;n>=0;n--){const s=r[n];if(i[s]!==void 0)return i[s]}for(const n of r)if(i[n]!==void 0)return i[n];throw new Error("No responsive value found for any breakpoint")})}function y(e,t){if(!f.isResponsiveValue(e))return e;const o=e,i=t||a.getCurrentBreakpoint()(),r=["base","sm","md","lg","xl","2xl"],c=r.indexOf(i);for(let n=c;n>=0;n--){const s=r[n];if(o[s]!==void 0)return o[s]}for(const n of r)if(o[n]!==void 0)return o[n];throw new Error("No responsive value found for any breakpoint")}function k(e,t){const o={};for(const[i,r]of Object.entries(t))if(f.isResponsiveValue(r)){const c=r;for(const[n,s]of Object.entries(c))if(s!==void 0){const d=n==="base"?`--${e}-${i}`:`--${e}-${i}-${n}`;o[d]=s.toString()}}else o[`--${e}-${i}`]=r.toString();return o}const p={mobile:"(max-width: 767px)",tablet:"(min-width: 768px) and (max-width: 1023px)",desktop:"(min-width: 1024px)",landscape:"(orientation: landscape)",portrait:"(orientation: portrait)",highDPI:"(min-resolution: 2dppx)",lowDPI:"(max-resolution: 1dppx)",retinaDisplay:"(min-resolution: 2dppx)",standardDisplay:"(max-resolution: 1.9dppx)",darkMode:"(prefers-color-scheme: dark)",lightMode:"(prefers-color-scheme: light)",noColorSchemePreference:"(prefers-color-scheme: no-preference)",reducedMotion:"(prefers-reduced-motion: reduce)",allowMotion:"(prefers-reduced-motion: no-preference)",highContrast:"(prefers-contrast: high)",lowContrast:"(prefers-contrast: low)",normalContrast:"(prefers-contrast: no-preference)",reduceData:"(prefers-reduced-data: reduce)",allowData:"(prefers-reduced-data: no-preference)",reduceTransparency:"(prefers-reduced-transparency: reduce)",allowTransparency:"(prefers-reduced-transparency: no-preference)",canHover:"(hover: hover)",noHover:"(hover: none)",finePointer:"(pointer: fine)",coarsePointer:"(pointer: coarse)",anyCanHover:"(any-hover: hover)",anyNoHover:"(any-hover: none)",anyFinePointer:"(any-pointer: fine)",anyCoarsePointer:"(any-pointer: coarse)",slowUpdate:"(update: slow)",fastUpdate:"(update: fast)",blockScrolling:"(overflow-block: scroll)",blockPaged:"(overflow-block: paged)",inlineScrolling:"(overflow-inline: scroll)",forcedColors:"(forced-colors: active)",normalColors:"(forced-colors: none)",invertedColors:"(inverted-colors: inverted)",normalInvertedColors:"(inverted-colors: none)",scriptingEnabled:"(scripting: enabled)",scriptingDisabled:"(scripting: none)",scriptingInitialOnly:"(scripting: initial-only)",containerSmall:"(max-width: 400px)",containerMedium:"(min-width: 401px) and (max-width: 800px)",containerLarge:"(min-width: 801px)",minWidth:e=>`(min-width: ${e}${typeof e=="number"?"px":""})`,maxWidth:e=>`(max-width: ${e}${typeof e=="number"?"px":""})`,between:(e,t)=>`(min-width: ${e}${typeof e=="number"?"px":""}) and (max-width: ${t}${typeof t=="number"?"px":""})`,minHeight:e=>`(min-height: ${e}${typeof e=="number"?"px":""})`,maxHeight:e=>`(max-height: ${e}${typeof e=="number"?"px":""})`,heightBetween:(e,t)=>`(min-height: ${e}${typeof e=="number"?"px":""}) and (max-height: ${t}${typeof t=="number"?"px":""})`,square:"(aspect-ratio: 1/1)",landscape16_9:"(aspect-ratio: 16/9)",portrait9_16:"(aspect-ratio: 9/16)",widescreen:"(min-aspect-ratio: 16/9)",tallscreen:"(max-aspect-ratio: 9/16)",customAspectRatio:e=>`(aspect-ratio: ${e})`,minAspectRatio:e=>`(min-aspect-ratio: ${e})`,maxAspectRatio:e=>`(max-aspect-ratio: ${e})`,lowRes:"(max-resolution: 120dpi)",standardRes:"(min-resolution: 120dpi) and (max-resolution: 192dpi)",highRes:"(min-resolution: 192dpi)",customResolution:e=>`(min-resolution: ${e}dpi)`,print:"print",screen:"screen",speech:"speech",iPhone:"(max-width: 428px)",iPad:"(min-width: 768px) and (max-width: 1024px)",desktopSmall:"(min-width: 1024px) and (max-width: 1440px)",desktopLarge:"(min-width: 1440px)",touchDevice:"(pointer: coarse)",mouseDevice:"(pointer: fine)",keyboardNavigation:"(hover: none) and (pointer: coarse)",wideColorGamut:"(color-gamut: p3)",standardColorGamut:"(color-gamut: srgb)",hdr:"(dynamic-range: high)",sdr:"(dynamic-range: standard)"};function $(...e){return e.filter(t=>t).join(" and ")}function C(...e){return e.filter(t=>t).join(", ")}function R(e){const t=a.getCurrentBreakpoint();return l.createComputed(()=>{const o=t();return!(e.hideOn&&e.hideOn.includes(o)||e.showOn&&!e.showOn.includes(o))})}function x(){if(typeof window>"u")return;const e=a.createBreakpointContext();console.group("🔍 tachUI Responsive State"),console.log("Current breakpoint:",e.current),console.log("Viewport dimensions:",`${e.width}x${e.height}`),console.log("Available breakpoints:",["base","sm","md","lg","xl","2xl"]);const t={Mobile:p.mobile,Tablet:p.tablet,Desktop:p.desktop,"Dark mode":p.darkMode,"Reduced motion":p.reducedMotion,"Can hover":p.canHover};console.log("Media query matches:");for(const[o,i]of Object.entries(t))console.log(`  ${o}: ${window.matchMedia(i).matches}`);console.groupEnd()}function B(e){return e}function M(e={}){if(typeof window>"u"||process.env.NODE_ENV==="production")return;const{position:t="top-right",showDimensions:o=!0,showBreakpoint:i=!0}=e,r=document.createElement("div");r.id="tachui-responsive-debug",r.style.cssText=`
-    position: fixed;
-    ${t.includes("top")?"top: 10px":"bottom: 10px"};
-    ${t.includes("right")?"right: 10px":"left: 10px"};
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 8px 12px;
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: 12px;
-    z-index: 9999;
-    pointer-events: none;
-    white-space: pre-line;
-  `,document.body.appendChild(r);function c(){const n=a.createBreakpointContext();let s="";i&&(s+=`Breakpoint: ${n.current}`),o&&(s&&(s+=`
-`),s+=`Size: ${n.width}×${n.height}`),r.textContent=s}c(),window.addEventListener("resize",c),x()}exports.MediaQueries=p;exports.combineMediaQueries=$;exports.createResponsiveCSSVariables=k;exports.createResponsiveVisibility=R;exports.enableResponsiveDebugOverlay=M;exports.logResponsiveState=x;exports.orMediaQueries=C;exports.resolveResponsiveValue=y;exports.useBreakpoint=v;exports.useMediaQuery=b;exports.useResponsiveValue=w;exports.withResponsive=B;
-//# sourceMappingURL=utilities.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utilities.cjs","sources":["../../../src/modifiers/responsive/utilities.ts"],"sourcesContent":["/**\n * Responsive Design Utilities\n * \n * Provides utility functions and hooks for working with responsive design\n * in tachUI applications. Includes breakpoint detection, media query helpers,\n * and responsive value resolution.\n */\n\nimport { \n  BreakpointKey, \n  BreakpointContext, \n  ResponsiveValue,\n  isResponsiveValue \n} from './types'\nimport { \n  getCurrentBreakpoint,\n  createBreakpointContext,\n  getBreakpointIndex\n} from './breakpoints'\nimport { createSignal, createComputed, Signal } from '../../reactive'\n\n/**\n * Hook to get current breakpoint information\n */\nexport function useBreakpoint(): {\n  current: Signal<BreakpointKey>\n  context: Signal<BreakpointContext>\n  isAbove: (breakpoint: BreakpointKey) => Signal<boolean>\n  isBelow: (breakpoint: BreakpointKey) => Signal<boolean>\n  isBetween: (min: BreakpointKey, max: BreakpointKey) => Signal<boolean>\n  matches: (query: string) => Signal<boolean>\n} {\n  const current = getCurrentBreakpoint()\n  \n  const context = createComputed(() => createBreakpointContext())\n  \n  const isAbove = (breakpoint: BreakpointKey) => \n    createComputed(() => getBreakpointIndex(current()) > getBreakpointIndex(breakpoint))\n  \n  const isBelow = (breakpoint: BreakpointKey) => \n    createComputed(() => getBreakpointIndex(current()) < getBreakpointIndex(breakpoint))\n  \n  const isBetween = (min: BreakpointKey, max: BreakpointKey) => \n    createComputed(() => {\n      const currentIndex = getBreakpointIndex(current())\n      const minIndex = getBreakpointIndex(min)\n      const maxIndex = getBreakpointIndex(max)\n      return currentIndex >= minIndex && currentIndex <= maxIndex\n    })\n  \n  const matches = (query: string) => {\n    const [matchesSignal, setMatches] = createSignal(false)\n    \n    if (typeof window !== 'undefined') {\n      const mediaQuery = window.matchMedia(query)\n      setMatches(mediaQuery.matches)\n      \n      const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n      mediaQuery.addEventListener('change', handler)\n      \n      // Cleanup would need to be handled by caller\n    }\n    \n    return matchesSignal as Signal<boolean>\n  }\n  \n  return {\n    current,\n    context,\n    isAbove,\n    isBelow,\n    isBetween,\n    matches\n  }\n}\n\n/**\n * Hook to create a reactive media query\n */\nexport function useMediaQuery(query: string): Signal<boolean> {\n  const [matches, setMatches] = createSignal(false)\n  \n  if (typeof window !== 'undefined') {\n    const mediaQuery = window.matchMedia(query)\n    setMatches(mediaQuery.matches)\n    \n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n    mediaQuery.addEventListener('change', handler)\n    \n    // TODO: Implement cleanup mechanism\n  }\n  \n  return matches as Signal<boolean>\n}\n\n/**\n * Resolve a responsive value to its current value based on the current breakpoint\n */\nexport function useResponsiveValue<T>(value: ResponsiveValue<T>): Signal<T> {\n  const currentBreakpoint = getCurrentBreakpoint()\n  \n  return createComputed(() => {\n    if (!isResponsiveValue(value)) {\n      return value as T\n    }\n    \n    const breakpoint = currentBreakpoint()\n    const responsiveObj = value as Partial<Record<BreakpointKey, T>>\n    \n    // Try to find value for current breakpoint or closest smaller breakpoint\n    const breakpointOrder: BreakpointKey[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n    const currentIndex = breakpointOrder.indexOf(breakpoint)\n    \n    // Search backwards from current breakpoint to find defined value\n    for (let i = currentIndex; i >= 0; i--) {\n      const bp = breakpointOrder[i]\n      if (responsiveObj[bp] !== undefined) {\n        return responsiveObj[bp]!\n      }\n    }\n    \n    // Fallback to any defined value\n    for (const bp of breakpointOrder) {\n      if (responsiveObj[bp] !== undefined) {\n        return responsiveObj[bp]!\n      }\n    }\n    \n    // This shouldn't happen with proper TypeScript usage\n    throw new Error('No responsive value found for any breakpoint')\n  })\n}\n\n/**\n * Create a responsive value resolver for static resolution\n */\nexport function resolveResponsiveValue<T>(\n  value: ResponsiveValue<T>, \n  targetBreakpoint?: BreakpointKey\n): T {\n  if (!isResponsiveValue(value)) {\n    return value as T\n  }\n  \n  const responsiveObj = value as Partial<Record<BreakpointKey, T>>\n  const breakpoint = targetBreakpoint || getCurrentBreakpoint()()\n  \n  // Find value for target breakpoint or closest smaller breakpoint\n  const breakpointOrder: BreakpointKey[] = ['base', 'sm', 'md', 'lg', 'xl', '2xl']\n  const targetIndex = breakpointOrder.indexOf(breakpoint)\n  \n  // Search backwards from target breakpoint\n  for (let i = targetIndex; i >= 0; i--) {\n    const bp = breakpointOrder[i]\n    if (responsiveObj[bp] !== undefined) {\n      return responsiveObj[bp]!\n    }\n  }\n  \n  // Fallback to any defined value\n  for (const bp of breakpointOrder) {\n    if (responsiveObj[bp] !== undefined) {\n      return responsiveObj[bp]!\n    }\n  }\n  \n  throw new Error('No responsive value found for any breakpoint')\n}\n\n/**\n * Create responsive CSS custom properties (CSS variables)\n */\nexport function createResponsiveCSSVariables(\n  prefix: string,\n  values: Record<string, ResponsiveValue<string | number>>\n): Record<string, string> {\n  const cssVariables: Record<string, string> = {}\n  \n  for (const [key, value] of Object.entries(values)) {\n    if (isResponsiveValue(value)) {\n      const responsiveObj = value as Partial<Record<BreakpointKey, string | number>>\n      \n      // Create CSS variables for each breakpoint\n      for (const [breakpoint, val] of Object.entries(responsiveObj)) {\n        if (val !== undefined) {\n          const varName = breakpoint === 'base' \n            ? `--${prefix}-${key}`\n            : `--${prefix}-${key}-${breakpoint}`\n          cssVariables[varName] = val.toString()\n        }\n      }\n    } else {\n      cssVariables[`--${prefix}-${key}`] = value.toString()\n    }\n  }\n  \n  return cssVariables\n}\n\n/**\n * Generate CSS media query string for common patterns\n */\nexport const MediaQueries = {\n  // Viewport size queries\n  mobile: '(max-width: 767px)',\n  tablet: '(min-width: 768px) and (max-width: 1023px)', \n  desktop: '(min-width: 1024px)',\n  \n  // Device orientation\n  landscape: '(orientation: landscape)',\n  portrait: '(orientation: portrait)',\n  \n  // Device pixel density\n  highDPI: '(min-resolution: 2dppx)',\n  lowDPI: '(max-resolution: 1dppx)',\n  retinaDisplay: '(min-resolution: 2dppx)',\n  standardDisplay: '(max-resolution: 1.9dppx)',\n  \n  // Color scheme preference\n  darkMode: '(prefers-color-scheme: dark)',\n  lightMode: '(prefers-color-scheme: light)',\n  noColorSchemePreference: '(prefers-color-scheme: no-preference)',\n  \n  // Reduced motion preference\n  reducedMotion: '(prefers-reduced-motion: reduce)',\n  allowMotion: '(prefers-reduced-motion: no-preference)',\n  \n  // Contrast preference (accessibility)\n  highContrast: '(prefers-contrast: high)',\n  lowContrast: '(prefers-contrast: low)',\n  normalContrast: '(prefers-contrast: no-preference)',\n  \n  // Data usage preference\n  reduceData: '(prefers-reduced-data: reduce)',\n  allowData: '(prefers-reduced-data: no-preference)',\n  \n  // Transparency preference\n  reduceTransparency: '(prefers-reduced-transparency: reduce)',\n  allowTransparency: '(prefers-reduced-transparency: no-preference)',\n  \n  // Hover capability\n  canHover: '(hover: hover)',\n  noHover: '(hover: none)',\n  \n  // Pointer capability\n  finePointer: '(pointer: fine)',   // Mouse, trackpad\n  coarsePointer: '(pointer: coarse)', // Touch\n  \n  // Any-hover (any input can hover)\n  anyCanHover: '(any-hover: hover)',\n  anyNoHover: '(any-hover: none)',\n  \n  // Any-pointer (any input type)\n  anyFinePointer: '(any-pointer: fine)',\n  anyCoarsePointer: '(any-pointer: coarse)',\n  \n  // Update preference\n  slowUpdate: '(update: slow)',    // E-ink displays\n  fastUpdate: '(update: fast)',    // Standard displays\n  \n  // Overflow-block capability\n  blockScrolling: '(overflow-block: scroll)',\n  blockPaged: '(overflow-block: paged)',\n  \n  // Overflow-inline capability\n  inlineScrolling: '(overflow-inline: scroll)',\n  \n  // Forced colors (high contrast mode)\n  forcedColors: '(forced-colors: active)',\n  normalColors: '(forced-colors: none)',\n  \n  // Inverted colors\n  invertedColors: '(inverted-colors: inverted)',\n  normalInvertedColors: '(inverted-colors: none)',\n  \n  // Scripting capability\n  scriptingEnabled: '(scripting: enabled)',\n  scriptingDisabled: '(scripting: none)',\n  scriptingInitialOnly: '(scripting: initial-only)',\n  \n  // Container queries (future)\n  containerSmall: '(max-width: 400px)',\n  containerMedium: '(min-width: 401px) and (max-width: 800px)',\n  containerLarge: '(min-width: 801px)',\n  \n  // Custom breakpoint builders\n  minWidth: (width: number | string) => `(min-width: ${width}${typeof width === 'number' ? 'px' : ''})`,\n  maxWidth: (width: number | string) => `(max-width: ${width}${typeof width === 'number' ? 'px' : ''})`,\n  between: (min: number | string, max: number | string) => \n    `(min-width: ${min}${typeof min === 'number' ? 'px' : ''}) and (max-width: ${max}${typeof max === 'number' ? 'px' : ''})`,\n  \n  // Height-based queries\n  minHeight: (height: number | string) => `(min-height: ${height}${typeof height === 'number' ? 'px' : ''})`,\n  maxHeight: (height: number | string) => `(max-height: ${height}${typeof height === 'number' ? 'px' : ''})`,\n  heightBetween: (min: number | string, max: number | string) => \n    `(min-height: ${min}${typeof min === 'number' ? 'px' : ''}) and (max-height: ${max}${typeof max === 'number' ? 'px' : ''})`,\n  \n  // Aspect ratio queries\n  square: '(aspect-ratio: 1/1)',\n  landscape16_9: '(aspect-ratio: 16/9)',\n  portrait9_16: '(aspect-ratio: 9/16)',\n  widescreen: '(min-aspect-ratio: 16/9)',\n  tallscreen: '(max-aspect-ratio: 9/16)',\n  customAspectRatio: (ratio: string) => `(aspect-ratio: ${ratio})`,\n  minAspectRatio: (ratio: string) => `(min-aspect-ratio: ${ratio})`,\n  maxAspectRatio: (ratio: string) => `(max-aspect-ratio: ${ratio})`,\n  \n  // Resolution queries  \n  lowRes: '(max-resolution: 120dpi)',\n  standardRes: '(min-resolution: 120dpi) and (max-resolution: 192dpi)',\n  highRes: '(min-resolution: 192dpi)',\n  customResolution: (dpi: number) => `(min-resolution: ${dpi}dpi)`,\n  \n  // Print media\n  print: 'print',\n  screen: 'screen',\n  speech: 'speech',\n  \n  // Device-specific queries (common patterns)\n  iPhone: '(max-width: 428px)',\n  iPad: '(min-width: 768px) and (max-width: 1024px)',\n  desktopSmall: '(min-width: 1024px) and (max-width: 1440px)',\n  desktopLarge: '(min-width: 1440px)',\n  \n  // Special conditions\n  touchDevice: '(pointer: coarse)',\n  mouseDevice: '(pointer: fine)',\n  keyboardNavigation: '(hover: none) and (pointer: coarse)',\n  \n  // Modern display features\n  wideColorGamut: '(color-gamut: p3)',\n  standardColorGamut: '(color-gamut: srgb)',\n  hdr: '(dynamic-range: high)',\n  sdr: '(dynamic-range: standard)'\n} as const\n\n/**\n * Utility to combine multiple media queries\n */\nexport function combineMediaQueries(...queries: string[]): string {\n  return queries.filter(q => q).join(' and ')\n}\n\n/**\n * Utility to create OR media queries\n */\nexport function orMediaQueries(...queries: string[]): string {\n  return queries.filter(q => q).join(', ')\n}\n\n/**\n * Create a responsive show/hide utility\n */\nexport function createResponsiveVisibility(config: {\n  showOn?: BreakpointKey[]\n  hideOn?: BreakpointKey[]\n}): Signal<boolean> {\n  const currentBreakpoint = getCurrentBreakpoint()\n  \n  return createComputed(() => {\n    const current = currentBreakpoint()\n    \n    if (config.hideOn && config.hideOn.includes(current)) {\n      return false\n    }\n    \n    if (config.showOn && !config.showOn.includes(current)) {\n      return false\n    }\n    \n    return true\n  })\n}\n\n/**\n * Debug utility to log current responsive state\n */\nexport function logResponsiveState(): void {\n  if (typeof window === 'undefined') return\n  \n  const context = createBreakpointContext()\n  \n  console.group('🔍 tachUI Responsive State')\n  console.log('Current breakpoint:', context.current)\n  console.log('Viewport dimensions:', `${context.width}x${context.height}`)\n  console.log('Available breakpoints:', ['base', 'sm', 'md', 'lg', 'xl', '2xl'])\n  \n  // Test common media queries\n  const commonQueries = {\n    'Mobile': MediaQueries.mobile,\n    'Tablet': MediaQueries.tablet,\n    'Desktop': MediaQueries.desktop,\n    'Dark mode': MediaQueries.darkMode,\n    'Reduced motion': MediaQueries.reducedMotion,\n    'Can hover': MediaQueries.canHover\n  }\n  \n  console.log('Media query matches:')\n  for (const [name, query] of Object.entries(commonQueries)) {\n    console.log(`  ${name}: ${window.matchMedia(query).matches}`)\n  }\n  \n  console.groupEnd()\n}\n\n/**\n * Utility function to wrap existing modifier builder with responsive capabilities\n */\nexport function withResponsive<T>(value: T): T {\n  // For now, just return the value as-is\n  // This would be enhanced to work with actual modifier builders\n  return value\n}\n\n/**\n * Development-only responsive debugging overlay\n */\nexport function enableResponsiveDebugOverlay(options: {\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  showDimensions?: boolean\n  showBreakpoint?: boolean\n} = {}): void {\n  if (typeof window === 'undefined' || process.env.NODE_ENV === 'production') {\n    return\n  }\n  \n  const { \n    position = 'top-right',\n    showDimensions = true,\n    showBreakpoint = true\n  } = options\n  \n  // Create debug overlay element\n  const overlay = document.createElement('div')\n  overlay.id = 'tachui-responsive-debug'\n  overlay.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.8);\n    color: white;\n    padding: 8px 12px;\n    border-radius: 4px;\n    font-family: monospace;\n    font-size: 12px;\n    z-index: 9999;\n    pointer-events: none;\n    white-space: pre-line;\n  `\n  \n  document.body.appendChild(overlay)\n  \n  // Update overlay content\n  function updateOverlay() {\n    const context = createBreakpointContext()\n    let content = ''\n    \n    if (showBreakpoint) {\n      content += `Breakpoint: ${context.current}`\n    }\n    \n    if (showDimensions) {\n      if (content) content += '\\n'\n      content += `Size: ${context.width}×${context.height}`\n    }\n    \n    overlay.textContent = content\n  }\n  \n  // Initial update\n  updateOverlay()\n  \n  // Update on resize\n  window.addEventListener('resize', updateOverlay)\n  \n  // Log initial state\n  logResponsiveState()\n}"],"names":["useBreakpoint","current","getCurrentBreakpoint","context","createComputed","createBreakpointContext","breakpoint","getBreakpointIndex","min","max","currentIndex","minIndex","maxIndex","query","matchesSignal","setMatches","createSignal","mediaQuery","handler","e","useMediaQuery","matches","useResponsiveValue","value","currentBreakpoint","isResponsiveValue","responsiveObj","breakpointOrder","i","bp","resolveResponsiveValue","targetBreakpoint","targetIndex","createResponsiveCSSVariables","prefix","values","cssVariables","key","val","varName","MediaQueries","width","height","ratio","dpi","combineMediaQueries","queries","q","orMediaQueries","createResponsiveVisibility","config","logResponsiveState","commonQueries","name","withResponsive","enableResponsiveDebugOverlay","options","position","showDimensions","showBreakpoint","overlay","updateOverlay","content"],"mappings":"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"}