@tachui/core 0.7.0-alpha1

package/dist/modifiers/responsive/utilities.cjs

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

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

package/dist/modifiers/responsive/utilities.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Responsive Design Utilities
+ *
+ * Provides utility functions and hooks for working with responsive design
+ * in tachUI applications. Includes breakpoint detection, media query helpers,
+ * and responsive value resolution.
+ */
+import { BreakpointKey, BreakpointContext, ResponsiveValue } from './types';
+import { Signal } from '../../reactive';
+/**
+ * Hook to get current breakpoint information
+ */
+export declare function useBreakpoint(): {
+    current: Signal<BreakpointKey>;
+    context: Signal<BreakpointContext>;
+    isAbove: (breakpoint: BreakpointKey) => Signal<boolean>;
+    isBelow: (breakpoint: BreakpointKey) => Signal<boolean>;
+    isBetween: (min: BreakpointKey, max: BreakpointKey) => Signal<boolean>;
+    matches: (query: string) => Signal<boolean>;
+};
+/**
+ * Hook to create a reactive media query
+ */
+export declare function useMediaQuery(query: string): Signal<boolean>;
+/**
+ * Resolve a responsive value to its current value based on the current breakpoint
+ */
+export declare function useResponsiveValue<T>(value: ResponsiveValue<T>): Signal<T>;
+/**
+ * Create a responsive value resolver for static resolution
+ */
+export declare function resolveResponsiveValue<T>(value: ResponsiveValue<T>, targetBreakpoint?: BreakpointKey): T;
+/**
+ * Create responsive CSS custom properties (CSS variables)
+ */
+export declare function createResponsiveCSSVariables(prefix: string, values: Record<string, ResponsiveValue<string | number>>): Record<string, string>;
+/**
+ * Generate CSS media query string for common patterns
+ */
+export declare const MediaQueries: {
+    readonly mobile: "(max-width: 767px)";
+    readonly tablet: "(min-width: 768px) and (max-width: 1023px)";
+    readonly desktop: "(min-width: 1024px)";
+    readonly landscape: "(orientation: landscape)";
+    readonly portrait: "(orientation: portrait)";
+    readonly highDPI: "(min-resolution: 2dppx)";
+    readonly lowDPI: "(max-resolution: 1dppx)";
+    readonly retinaDisplay: "(min-resolution: 2dppx)";
+    readonly standardDisplay: "(max-resolution: 1.9dppx)";
+    readonly darkMode: "(prefers-color-scheme: dark)";
+    readonly lightMode: "(prefers-color-scheme: light)";
+    readonly noColorSchemePreference: "(prefers-color-scheme: no-preference)";
+    readonly reducedMotion: "(prefers-reduced-motion: reduce)";
+    readonly allowMotion: "(prefers-reduced-motion: no-preference)";
+    readonly highContrast: "(prefers-contrast: high)";
+    readonly lowContrast: "(prefers-contrast: low)";
+    readonly normalContrast: "(prefers-contrast: no-preference)";
+    readonly reduceData: "(prefers-reduced-data: reduce)";
+    readonly allowData: "(prefers-reduced-data: no-preference)";
+    readonly reduceTransparency: "(prefers-reduced-transparency: reduce)";
+    readonly allowTransparency: "(prefers-reduced-transparency: no-preference)";
+    readonly canHover: "(hover: hover)";
+    readonly noHover: "(hover: none)";
+    readonly finePointer: "(pointer: fine)";
+    readonly coarsePointer: "(pointer: coarse)";
+    readonly anyCanHover: "(any-hover: hover)";
+    readonly anyNoHover: "(any-hover: none)";
+    readonly anyFinePointer: "(any-pointer: fine)";
+    readonly anyCoarsePointer: "(any-pointer: coarse)";
+    readonly slowUpdate: "(update: slow)";
+    readonly fastUpdate: "(update: fast)";
+    readonly blockScrolling: "(overflow-block: scroll)";
+    readonly blockPaged: "(overflow-block: paged)";
+    readonly inlineScrolling: "(overflow-inline: scroll)";
+    readonly forcedColors: "(forced-colors: active)";
+    readonly normalColors: "(forced-colors: none)";
+    readonly invertedColors: "(inverted-colors: inverted)";
+    readonly normalInvertedColors: "(inverted-colors: none)";
+    readonly scriptingEnabled: "(scripting: enabled)";
+    readonly scriptingDisabled: "(scripting: none)";
+    readonly scriptingInitialOnly: "(scripting: initial-only)";
+    readonly containerSmall: "(max-width: 400px)";
+    readonly containerMedium: "(min-width: 401px) and (max-width: 800px)";
+    readonly containerLarge: "(min-width: 801px)";
+    readonly minWidth: (width: number | string) => string;
+    readonly maxWidth: (width: number | string) => string;
+    readonly between: (min: number | string, max: number | string) => string;
+    readonly minHeight: (height: number | string) => string;
+    readonly maxHeight: (height: number | string) => string;
+    readonly heightBetween: (min: number | string, max: number | string) => string;
+    readonly square: "(aspect-ratio: 1/1)";
+    readonly landscape16_9: "(aspect-ratio: 16/9)";
+    readonly portrait9_16: "(aspect-ratio: 9/16)";
+    readonly widescreen: "(min-aspect-ratio: 16/9)";
+    readonly tallscreen: "(max-aspect-ratio: 9/16)";
+    readonly customAspectRatio: (ratio: string) => string;
+    readonly minAspectRatio: (ratio: string) => string;
+    readonly maxAspectRatio: (ratio: string) => string;
+    readonly lowRes: "(max-resolution: 120dpi)";
+    readonly standardRes: "(min-resolution: 120dpi) and (max-resolution: 192dpi)";
+    readonly highRes: "(min-resolution: 192dpi)";
+    readonly customResolution: (dpi: number) => string;
+    readonly print: "print";
+    readonly screen: "screen";
+    readonly speech: "speech";
+    readonly iPhone: "(max-width: 428px)";
+    readonly iPad: "(min-width: 768px) and (max-width: 1024px)";
+    readonly desktopSmall: "(min-width: 1024px) and (max-width: 1440px)";
+    readonly desktopLarge: "(min-width: 1440px)";
+    readonly touchDevice: "(pointer: coarse)";
+    readonly mouseDevice: "(pointer: fine)";
+    readonly keyboardNavigation: "(hover: none) and (pointer: coarse)";
+    readonly wideColorGamut: "(color-gamut: p3)";
+    readonly standardColorGamut: "(color-gamut: srgb)";
+    readonly hdr: "(dynamic-range: high)";
+    readonly sdr: "(dynamic-range: standard)";
+};
+/**
+ * Utility to combine multiple media queries
+ */
+export declare function combineMediaQueries(...queries: string[]): string;
+/**
+ * Utility to create OR media queries
+ */
+export declare function orMediaQueries(...queries: string[]): string;
+/**
+ * Create a responsive show/hide utility
+ */
+export declare function createResponsiveVisibility(config: {
+    showOn?: BreakpointKey[];
+    hideOn?: BreakpointKey[];
+}): Signal<boolean>;
+/**
+ * Debug utility to log current responsive state
+ */
+export declare function logResponsiveState(): void;
+/**
+ * Utility function to wrap existing modifier builder with responsive capabilities
+ */
+export declare function withResponsive<T>(value: T): T;
+/**
+ * Development-only responsive debugging overlay
+ */
+export declare function enableResponsiveDebugOverlay(options?: {
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showDimensions?: boolean;
+    showBreakpoint?: boolean;
+}): void;
+//# sourceMappingURL=utilities.d.ts.map

package/dist/modifiers/responsive/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/utilities.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EAEhB,MAAM,SAAS,CAAA;AAMhB,OAAO,EAAgC,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAErE;;GAEG;AACH,wBAAgB,aAAa,IAAI;IAC/B,OAAO,EAAE,MAAM,CAAC,aAAa,CAAC,CAAA;IAC9B,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAA;IAClC,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;IACvD,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;IACvD,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;IACtE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;CAC5C,CA2CA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAc5D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAiC1E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,gBAAgB,CAAC,EAAE,aAAa,GAC/B,CAAC,CA4BH;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,GACvD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAsBxB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAoFL,MAAM,GAAG,MAAM;+BACf,MAAM,GAAG,MAAM;4BAClB,MAAM,GAAG,MAAM,OAAO,MAAM,GAAG,MAAM;iCAIhC,MAAM,GAAG,MAAM;iCACf,MAAM,GAAG,MAAM;kCACd,MAAM,GAAG,MAAM,OAAO,MAAM,GAAG,MAAM;;;;;;wCAS/B,MAAM;qCACT,MAAM;qCACN,MAAM;;;;qCAMN,MAAM;;;;;;;;;;;;;;;CAuBtB,CAAA;AAEV;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAEhE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAE3D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE;IACjD,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;CACzB,GAAG,MAAM,CAAC,OAAO,CAAC,CAgBlB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CA0BzC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAI7C;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,GAAE;IACpD,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IACpE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,IAAI,CAwDZ"}

package/dist/modifiers/responsive/utilities.js

@@ -0,0 +1,273 @@
+import { isResponsiveValue as h } from "./types.js";
+import { createBreakpointContext as x, getCurrentBreakpoint as m, getBreakpointIndex as d } from "./breakpoints.js";
+import "../../reactive/cleanup.js";
+import { createComputed as l } from "../../reactive/computed.js";
+import "../../reactive/unified-scheduler.js";
+import { createSignal as w } from "../../reactive/signal.js";
+import "../../reactive/scheduler.js";
+import "../../reactive/theme.js";
+function D() {
+  const e = m(), o = l(() => x());
+  return {
+    current: e,
+    context: o,
+    isAbove: (n) => l(() => d(e()) > d(n)),
+    isBelow: (n) => l(() => d(e()) < d(n)),
+    isBetween: (n, s) => l(() => {
+      const c = d(e()), u = d(n), f = d(s);
+      return c >= u && c <= f;
+    }),
+    matches: (n) => {
+      const [s, c] = w(!1);
+      if (typeof window < "u") {
+        const u = window.matchMedia(n);
+        c(u.matches);
+        const f = (b) => c(b.matches);
+        u.addEventListener("change", f);
+      }
+      return s;
+    }
+  };
+}
+function S(e) {
+  const [o, t] = w(!1);
+  if (typeof window < "u") {
+    const i = window.matchMedia(e);
+    t(i.matches);
+    const r = (a) => t(a.matches);
+    i.addEventListener("change", r);
+  }
+  return o;
+}
+function B(e) {
+  const o = m();
+  return l(() => {
+    if (!h(e))
+      return e;
+    const t = o(), i = e, r = ["base", "sm", "md", "lg", "xl", "2xl"], a = r.indexOf(t);
+    for (let n = a; 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 I(e, o) {
+  if (!h(e))
+    return e;
+  const t = e, i = o || m()(), r = ["base", "sm", "md", "lg", "xl", "2xl"], a = r.indexOf(i);
+  for (let n = a; n >= 0; n--) {
+    const s = r[n];
+    if (t[s] !== void 0)
+      return t[s];
+  }
+  for (const n of r)
+    if (t[n] !== void 0)
+      return t[n];
+  throw new Error("No responsive value found for any breakpoint");
+}
+function E(e, o) {
+  const t = {};
+  for (const [i, r] of Object.entries(o))
+    if (h(r)) {
+      const a = r;
+      for (const [n, s] of Object.entries(a))
+        if (s !== void 0) {
+          const c = n === "base" ? `--${e}-${i}` : `--${e}-${i}-${n}`;
+          t[c] = s.toString();
+        }
+    } else
+      t[`--${e}-${i}`] = r.toString();
+  return t;
+}
+const p = {
+  // Viewport size queries
+  mobile: "(max-width: 767px)",
+  tablet: "(min-width: 768px) and (max-width: 1023px)",
+  desktop: "(min-width: 1024px)",
+  // Device orientation
+  landscape: "(orientation: landscape)",
+  portrait: "(orientation: portrait)",
+  // Device pixel density
+  highDPI: "(min-resolution: 2dppx)",
+  lowDPI: "(max-resolution: 1dppx)",
+  retinaDisplay: "(min-resolution: 2dppx)",
+  standardDisplay: "(max-resolution: 1.9dppx)",
+  // Color scheme preference
+  darkMode: "(prefers-color-scheme: dark)",
+  lightMode: "(prefers-color-scheme: light)",
+  noColorSchemePreference: "(prefers-color-scheme: no-preference)",
+  // Reduced motion preference
+  reducedMotion: "(prefers-reduced-motion: reduce)",
+  allowMotion: "(prefers-reduced-motion: no-preference)",
+  // Contrast preference (accessibility)
+  highContrast: "(prefers-contrast: high)",
+  lowContrast: "(prefers-contrast: low)",
+  normalContrast: "(prefers-contrast: no-preference)",
+  // Data usage preference
+  reduceData: "(prefers-reduced-data: reduce)",
+  allowData: "(prefers-reduced-data: no-preference)",
+  // Transparency preference
+  reduceTransparency: "(prefers-reduced-transparency: reduce)",
+  allowTransparency: "(prefers-reduced-transparency: no-preference)",
+  // Hover capability
+  canHover: "(hover: hover)",
+  noHover: "(hover: none)",
+  // Pointer capability
+  finePointer: "(pointer: fine)",
+  // Mouse, trackpad
+  coarsePointer: "(pointer: coarse)",
+  // Touch
+  // Any-hover (any input can hover)
+  anyCanHover: "(any-hover: hover)",
+  anyNoHover: "(any-hover: none)",
+  // Any-pointer (any input type)
+  anyFinePointer: "(any-pointer: fine)",
+  anyCoarsePointer: "(any-pointer: coarse)",
+  // Update preference
+  slowUpdate: "(update: slow)",
+  // E-ink displays
+  fastUpdate: "(update: fast)",
+  // Standard displays
+  // Overflow-block capability
+  blockScrolling: "(overflow-block: scroll)",
+  blockPaged: "(overflow-block: paged)",
+  // Overflow-inline capability
+  inlineScrolling: "(overflow-inline: scroll)",
+  // Forced colors (high contrast mode)
+  forcedColors: "(forced-colors: active)",
+  normalColors: "(forced-colors: none)",
+  // Inverted colors
+  invertedColors: "(inverted-colors: inverted)",
+  normalInvertedColors: "(inverted-colors: none)",
+  // Scripting capability
+  scriptingEnabled: "(scripting: enabled)",
+  scriptingDisabled: "(scripting: none)",
+  scriptingInitialOnly: "(scripting: initial-only)",
+  // Container queries (future)
+  containerSmall: "(max-width: 400px)",
+  containerMedium: "(min-width: 401px) and (max-width: 800px)",
+  containerLarge: "(min-width: 801px)",
+  // Custom breakpoint builders
+  minWidth: (e) => `(min-width: ${e}${typeof e == "number" ? "px" : ""})`,
+  maxWidth: (e) => `(max-width: ${e}${typeof e == "number" ? "px" : ""})`,
+  between: (e, o) => `(min-width: ${e}${typeof e == "number" ? "px" : ""}) and (max-width: ${o}${typeof o == "number" ? "px" : ""})`,
+  // Height-based queries
+  minHeight: (e) => `(min-height: ${e}${typeof e == "number" ? "px" : ""})`,
+  maxHeight: (e) => `(max-height: ${e}${typeof e == "number" ? "px" : ""})`,
+  heightBetween: (e, o) => `(min-height: ${e}${typeof e == "number" ? "px" : ""}) and (max-height: ${o}${typeof o == "number" ? "px" : ""})`,
+  // Aspect ratio queries
+  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})`,
+  // Resolution queries  
+  lowRes: "(max-resolution: 120dpi)",
+  standardRes: "(min-resolution: 120dpi) and (max-resolution: 192dpi)",
+  highRes: "(min-resolution: 192dpi)",
+  customResolution: (e) => `(min-resolution: ${e}dpi)`,
+  // Print media
+  print: "print",
+  screen: "screen",
+  speech: "speech",
+  // Device-specific queries (common patterns)
+  iPhone: "(max-width: 428px)",
+  iPad: "(min-width: 768px) and (max-width: 1024px)",
+  desktopSmall: "(min-width: 1024px) and (max-width: 1440px)",
+  desktopLarge: "(min-width: 1440px)",
+  // Special conditions
+  touchDevice: "(pointer: coarse)",
+  mouseDevice: "(pointer: fine)",
+  keyboardNavigation: "(hover: none) and (pointer: coarse)",
+  // Modern display features
+  wideColorGamut: "(color-gamut: p3)",
+  standardColorGamut: "(color-gamut: srgb)",
+  hdr: "(dynamic-range: high)",
+  sdr: "(dynamic-range: standard)"
+};
+function P(...e) {
+  return e.filter((o) => o).join(" and ");
+}
+function j(...e) {
+  return e.filter((o) => o).join(", ");
+}
+function V(e) {
+  const o = m();
+  return l(() => {
+    const t = o();
+    return !(e.hideOn && e.hideOn.includes(t) || e.showOn && !e.showOn.includes(t));
+  });
+}
+function v() {
+  if (typeof window > "u") return;
+  const e = x();
+  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 o = {
+    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 [t, i] of Object.entries(o))
+    console.log(`  ${t}: ${window.matchMedia(i).matches}`);
+  console.groupEnd();
+}
+function H(e) {
+  return e;
+}
+function N(e = {}) {
+  if (typeof window > "u" || process.env.NODE_ENV === "production")
+    return;
+  const {
+    position: o = "top-right",
+    showDimensions: t = !0,
+    showBreakpoint: i = !0
+  } = e, r = document.createElement("div");
+  r.id = "tachui-responsive-debug", r.style.cssText = `
+    position: fixed;
+    ${o.includes("top") ? "top: 10px" : "bottom: 10px"};
+    ${o.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 a() {
+    const n = x();
+    let s = "";
+    i && (s += `Breakpoint: ${n.current}`), t && (s && (s += `
+`), s += `Size: ${n.width}×${n.height}`), r.textContent = s;
+  }
+  a(), window.addEventListener("resize", a), v();
+}
+export {
+  p as MediaQueries,
+  P as combineMediaQueries,
+  E as createResponsiveCSSVariables,
+  V as createResponsiveVisibility,
+  N as enableResponsiveDebugOverlay,
+  v as logResponsiveState,
+  j as orMediaQueries,
+  I as resolveResponsiveValue,
+  D as useBreakpoint,
+  S as useMediaQuery,
+  B as useResponsiveValue,
+  H as withResponsive
+};
+//# sourceMappingURL=utilities.js.map

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

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

package/dist/modifiers/scroll.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./base.cjs");var n=Object.defineProperty,a=(e,r,o)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,s=(e,r,o)=>a(e,typeof r!="symbol"?r+"":r,o);class l extends c.BaseModifier{constructor(r){const o={};for(const[t,i]of Object.entries(r))typeof i=="function"&&"peek"in i?o[t]=i.peek():o[t]=i;super(o),s(this,"type","scroll"),s(this,"priority",20)}apply(r,o){if(!o.element)return;const t=this.computeScrollStyles(this.properties);this.applyStyles(o.element,t)}computeScrollStyles(r){const o={};return r.scroll&&Object.assign(o,this.generateScrollCSS(r.scroll)),r.scrollBehavior&&(o.scrollBehavior=r.scrollBehavior),r.overscrollBehavior&&(o.overscrollBehavior=r.overscrollBehavior),r.overscrollBehaviorX&&(o.overscrollBehaviorX=r.overscrollBehaviorX),r.overscrollBehaviorY&&(o.overscrollBehaviorY=r.overscrollBehaviorY),o}generateScrollCSS(r){const o={};return r.behavior&&(o.scrollBehavior=r.behavior),r.margin&&Object.assign(o,this.generateScrollMarginCSS(r.margin)),r.padding&&Object.assign(o,this.generateScrollPaddingCSS(r.padding)),r.snap&&Object.assign(o,this.generateScrollSnapCSS(r.snap)),o}generateScrollMarginCSS(r){if(typeof r=="number"||typeof r=="string")return{scrollMargin:this.formatSpacing(r)};const o={};return r.top!==void 0&&(o.scrollMarginTop=this.formatSpacing(r.top)),r.right!==void 0&&(o.scrollMarginRight=this.formatSpacing(r.right)),r.bottom!==void 0&&(o.scrollMarginBottom=this.formatSpacing(r.bottom)),r.left!==void 0&&(o.scrollMarginLeft=this.formatSpacing(r.left)),o}generateScrollPaddingCSS(r){if(typeof r=="number"||typeof r=="string")return{scrollPadding:this.formatSpacing(r)};const o={};return r.top!==void 0&&(o.scrollPaddingTop=this.formatSpacing(r.top)),r.right!==void 0&&(o.scrollPaddingRight=this.formatSpacing(r.right)),r.bottom!==void 0&&(o.scrollPaddingBottom=this.formatSpacing(r.bottom)),r.left!==void 0&&(o.scrollPaddingLeft=this.formatSpacing(r.left)),o}generateScrollSnapCSS(r){const o={};return r?.type&&(o.scrollSnapType=r.type),r?.align&&(o.scrollSnapAlign=r.align),r?.stop&&(o.scrollSnapStop=r.stop),o}formatSpacing(r){return typeof r=="number"?`${r}px`:r}}function f(e){return new l({scroll:e})}function v(e){return new l({scrollBehavior:e})}function h(e){return new l({overscrollBehavior:e})}function S(e){return new l({overscrollBehaviorX:e})}function u(e){return new l({overscrollBehaviorY:e})}function g(e){return new l({scroll:{margin:e}})}function p(e){return new l({scroll:{padding:e}})}function B(e,r,o){return new l({scroll:{snap:{type:e,align:r,stop:o}}})}exports.ScrollModifier=l;exports.overscrollBehavior=h;exports.overscrollBehaviorX=S;exports.overscrollBehaviorY=u;exports.scroll=f;exports.scrollBehavior=v;exports.scrollMargin=g;exports.scrollPadding=p;exports.scrollSnap=B;
+//# sourceMappingURL=scroll.cjs.map

package/dist/modifiers/scroll.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.cjs","sources":["../../src/modifiers/scroll.ts"],"sourcesContent":["/**\n * Scroll Modifiers - Modern scroll behaviors\n *\n * Provides scroll snap, smooth scrolling, overscroll control,\n * scroll margin, and scroll padding capabilities.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface ScrollConfig {\n  // Scroll behavior\n  behavior?: 'auto' | 'smooth'\n  \n  // Scroll margin (spacing around scroll targets)  \n  margin?: number | string | {\n    top?: number | string\n    right?: number | string\n    bottom?: number | string\n    left?: number | string\n  }\n  \n  // Scroll padding (inner spacing for scroll containers)\n  padding?: number | string | {\n    top?: number | string\n    right?: number | string  \n    bottom?: number | string\n    left?: number | string\n  }\n  \n  // Scroll snap behavior\n  snap?: {\n    type?: 'none' | 'x mandatory' | 'y mandatory' | 'x proximity' | 'y proximity' | 'both mandatory' | 'both proximity'\n    align?: 'start' | 'end' | 'center'\n    stop?: 'normal' | 'always'\n  }\n}\n\nexport type OverscrollBehaviorValue = 'auto' | 'contain' | 'none'\n\nexport interface ScrollOptions {\n  scroll?: ScrollConfig\n  scrollBehavior?: 'auto' | 'smooth'\n  overscrollBehavior?: OverscrollBehaviorValue\n  overscrollBehaviorX?: OverscrollBehaviorValue\n  overscrollBehaviorY?: OverscrollBehaviorValue\n}\n\nexport type ReactiveScrollOptions = ReactiveModifierProps<ScrollOptions>\n\nexport class ScrollModifier extends BaseModifier<ScrollOptions> {\n  readonly type = 'scroll'\n  readonly priority = 20\n\n  constructor(options: ReactiveScrollOptions) {\n    const resolvedOptions: ScrollOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeScrollStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeScrollStyles(props: ScrollOptions) {\n    const styles: Record<string, string> = {}\n\n    // Handle scroll configuration\n    if (props.scroll) {\n      Object.assign(styles, this.generateScrollCSS(props.scroll))\n    }\n\n    // Individual scroll properties\n    if (props.scrollBehavior) {\n      styles.scrollBehavior = props.scrollBehavior\n    }\n\n    if (props.overscrollBehavior) {\n      styles.overscrollBehavior = props.overscrollBehavior\n    }\n\n    if (props.overscrollBehaviorX) {\n      styles.overscrollBehaviorX = props.overscrollBehaviorX\n    }\n\n    if (props.overscrollBehaviorY) {\n      styles.overscrollBehaviorY = props.overscrollBehaviorY\n    }\n\n    return styles\n  }\n\n  private generateScrollCSS(config: ScrollConfig): Record<string, string> {\n    const styles: Record<string, string> = {}\n    \n    // Scroll behavior\n    if (config.behavior) {\n      styles.scrollBehavior = config.behavior\n    }\n    \n    // Scroll margin\n    if (config.margin) {\n      Object.assign(styles, this.generateScrollMarginCSS(config.margin))\n    }\n    \n    // Scroll padding  \n    if (config.padding) {\n      Object.assign(styles, this.generateScrollPaddingCSS(config.padding))\n    }\n    \n    // Scroll snap\n    if (config.snap) {\n      Object.assign(styles, this.generateScrollSnapCSS(config.snap))\n    }\n    \n    return styles\n  }\n\n  private generateScrollMarginCSS(margin: number | string | Record<string, number | string>): Record<string, string> {\n    if (typeof margin === 'number' || typeof margin === 'string') {\n      return { scrollMargin: this.formatSpacing(margin) }\n    }\n    \n    const styles: Record<string, string> = {}\n    if (margin.top !== undefined) styles.scrollMarginTop = this.formatSpacing(margin.top)\n    if (margin.right !== undefined) styles.scrollMarginRight = this.formatSpacing(margin.right)\n    if (margin.bottom !== undefined) styles.scrollMarginBottom = this.formatSpacing(margin.bottom)\n    if (margin.left !== undefined) styles.scrollMarginLeft = this.formatSpacing(margin.left)\n    \n    return styles\n  }\n\n  private generateScrollPaddingCSS(padding: number | string | Record<string, number | string>): Record<string, string> {\n    if (typeof padding === 'number' || typeof padding === 'string') {\n      return { scrollPadding: this.formatSpacing(padding) }\n    }\n    \n    const styles: Record<string, string> = {}\n    if (padding.top !== undefined) styles.scrollPaddingTop = this.formatSpacing(padding.top)\n    if (padding.right !== undefined) styles.scrollPaddingRight = this.formatSpacing(padding.right)\n    if (padding.bottom !== undefined) styles.scrollPaddingBottom = this.formatSpacing(padding.bottom)\n    if (padding.left !== undefined) styles.scrollPaddingLeft = this.formatSpacing(padding.left)\n    \n    return styles\n  }\n\n  private generateScrollSnapCSS(snap: ScrollConfig['snap']): Record<string, string> {\n    const styles: Record<string, string> = {}\n    \n    if (snap?.type) {\n      styles.scrollSnapType = snap.type\n    }\n    \n    if (snap?.align) {\n      styles.scrollSnapAlign = snap.align\n    }\n    \n    if (snap?.stop) {\n      styles.scrollSnapStop = snap.stop\n    }\n    \n    return styles\n  }\n\n  private formatSpacing(value: number | string): string {\n    if (typeof value === 'number') {\n      return `${value}px`\n    }\n    return value\n  }\n}\n\n/**\n * Enhanced scroll modifier with scroll snap and smooth scrolling\n *\n * @example\n * ```typescript\n * .scroll({\n *   behavior: 'smooth',\n *   margin: { top: 20, bottom: 20 },\n *   snap: { type: 'y mandatory', align: 'start' }\n * })\n * ```\n */\nexport function scroll(config: ScrollConfig): ScrollModifier {\n  return new ScrollModifier({ scroll: config })\n}\n\n/**\n * Scroll behavior modifier\n *\n * @example\n * ```typescript\n * .scrollBehavior('smooth')  // Smooth scrolling\n * .scrollBehavior('auto')    // Default browser scrolling\n * ```\n */\nexport function scrollBehavior(value: 'auto' | 'smooth'): ScrollModifier {\n  return new ScrollModifier({ scrollBehavior: value })\n}\n\n/**\n * Overscroll behavior modifier - controls bounce/rubber band effects\n *\n * @example\n * ```typescript\n * .overscrollBehavior('contain')  // Prevent scroll chaining\n * .overscrollBehavior('none')     // Disable overscroll effects\n * .overscrollBehavior('auto')     // Default behavior\n * ```\n */\nexport function overscrollBehavior(value: OverscrollBehaviorValue): ScrollModifier {\n  return new ScrollModifier({ overscrollBehavior: value })\n}\n\n/**\n * Overscroll behavior X modifier - horizontal overscroll control\n *\n * @example\n * ```typescript\n * .overscrollBehaviorX('contain')  // Prevent horizontal overscroll\n * ```\n */\nexport function overscrollBehaviorX(value: OverscrollBehaviorValue): ScrollModifier {\n  return new ScrollModifier({ overscrollBehaviorX: value })\n}\n\n/**\n * Overscroll behavior Y modifier - vertical overscroll control\n *\n * @example\n * ```typescript\n * .overscrollBehaviorY('none')  // Disable vertical rubber band effect\n * ```\n */\nexport function overscrollBehaviorY(value: OverscrollBehaviorValue): ScrollModifier {\n  return new ScrollModifier({ overscrollBehaviorY: value })\n}\n\n/**\n * Scroll margin shorthand - sets spacing around scroll targets\n *\n * @example\n * ```typescript\n * .scrollMargin(20)  // All sides\n * .scrollMargin({ top: 80, bottom: 20 })  // Navigation offset\n * ```\n */\nexport function scrollMargin(margin: number | string | { top?: number | string, right?: number | string, bottom?: number | string, left?: number | string }): ScrollModifier {\n  return new ScrollModifier({ scroll: { margin } })\n}\n\n/**\n * Scroll padding shorthand - sets inner spacing for scroll containers\n *\n * @example\n * ```typescript\n * .scrollPadding(16)  // All sides\n * .scrollPadding({ top: 60, bottom: 20 })  // Header/footer padding\n * ```\n */\nexport function scrollPadding(padding: number | string | { top?: number | string, right?: number | string, bottom?: number | string, left?: number | string }): ScrollModifier {\n  return new ScrollModifier({ scroll: { padding } })\n}\n\n/**\n * Scroll snap shorthand - quick scroll snap configuration\n *\n * @example\n * ```typescript\n * .scrollSnap('y mandatory', 'start')  // Vertical mandatory snapping to start\n * .scrollSnap('x proximity', 'center') // Horizontal proximity snapping to center\n * ```\n */\nexport function scrollSnap(\n  type: 'none' | 'x mandatory' | 'y mandatory' | 'x proximity' | 'y proximity' | 'both mandatory' | 'both proximity',\n  align?: 'start' | 'end' | 'center',\n  stop?: 'normal' | 'always'\n): ScrollModifier {\n  return new ScrollModifier({ \n    scroll: { \n      snap: { type, align, stop } \n    } \n  })\n}"],"names":["ScrollModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","config","margin","padding","snap","scroll","scrollBehavior","overscrollBehavior","overscrollBehaviorX","overscrollBehaviorY","scrollMargin","scrollPadding","scrollSnap","type","align","stop"],"mappings":"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"}