@tachui/responsive 0.8.23 → 0.8.24

package/dist/index-BpVUtEG4.js

@@ -0,0 +1,96 @@
+"use strict";const l=require("@tachui/core"),me=require("@tachui/registry"),J=require("@tachui/modifiers"),ge="0.8.24",be=ge,Z=new WeakSet,Y=new WeakMap,ve={name:"@tachui/core",version:be,author:"TachUI Team",verified:!0};function ye(r){Z.has(r)||(r.setFeatureFlags({metadataRegistration:!0}),Z.add(r))}function xe(r,e){let t=Y.get(r);t||(t=new Set,Y.set(r,t)),!t.has(e.name)&&(r.registerPlugin(e),t.add(e.name))}function we(r,e,t,i=me.globalModifierRegistry,n=ve){ye(i),xe(i,n),i.has(r)||i.register(r,e),i.getMetadata(r)||i.registerMetadata({...t,name:r,plugin:n.name})}const Se="0.8.24",Ce=Se,D={base:"0px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};function x(r){return typeof r=="object"&&r!==null&&!Array.isArray(r)&&Object.keys(r).some(e=>["base","sm","md","lg","xl","2xl"].includes(e))}function Q(r){return["base","sm","md","lg","xl","2xl"].includes(r)}let T={...D};const[ee,N]=l.createSignal("base"),[te,ie]=l.createSignal({width:0,height:0});let L=!1;const ne=()=>{A(),V()},re=()=>{setTimeout(()=>{A(),V()},100)};function Re(r){Ee(r),T={...D,...r},V(),typeof window<"u"&&window.addEventListener("resize",V)}function O(){return{...T}}function y(){return ee}function Be(){return te}function ke(){typeof window>"u"||L||(A(),V(),window.addEventListener("resize",ne),window.addEventListener("orientationchange",re),L=!0)}function $e(){typeof window>"u"||(A(),V())}function Me(){T={...D},N("base"),ie({width:0,height:0}),typeof window<"u"&&L&&(window.removeEventListener("resize",ne),window.removeEventListener("orientationchange",re)),L=!1}function w(){const r=ee(),e=te();return{current:r,width:e.width,height:e.height,isAbove:t=>_(r,t),isBelow:t=>W(r,t),isBetween:(t,i)=>_(r,t)&&W(r,i),matches:t=>window.matchMedia(t).matches}}function z(r){const e=T[r];return e.endsWith("px")?parseInt(e,10):e.endsWith("em")||e.endsWith("rem")?parseInt(e,10)*16:parseInt(e,10)||0}function b(r){return["base","sm","md","lg","xl","2xl"].indexOf(r)}function _(r,e){return b(r)>b(e)}function W(r,e){return b(r)<b(e)}function se(r){return r==="base"?"":`(min-width: ${T[r]})`}function Oe(r,e){const t=[];if(r!=="base"&&t.push(`(min-width: ${T[r]})`),e&&e!=="2xl"){const i=["sm","md","lg","xl","2xl"],n=i.indexOf(e);if(n>=0&&n<i.length-1){const o=i[n+1],s=`${z(o)-1}px`;t.push(`(max-width: ${s})`)}}return t.length>0?t.join(" and "):""}function I(){return["base","sm","md","lg","xl","2xl"]}function Ve(r){const e=I(),t=e.indexOf(r);return t>=0?e.slice(t+1):[]}function Te(r){const e=I(),t=e.indexOf(r);return t>0?e.slice(0,t):[]}function V(){if(typeof window>"u")return;const r=window.innerWidth,e=I().reverse();for(const t of e)if(t==="base"||r>=z(t)){N(t);return}N("base")}function A(){typeof window<"u"&&ie({width:window.innerWidth,height:window.innerHeight})}function Ee(r){for(const[t,i]of Object.entries(r)){if(!Q(t))throw new Error(`Invalid breakpoint key: "${t}". Valid keys are: base, sm, md, lg, xl, 2xl`);if(typeof i!="string")throw new Error(`Breakpoint value for "${t}" must be a string (e.g., "768px")`);if(!i.match(/^\d+(\.\d+)?(px|em|rem|%)$/))throw new Error(`Invalid breakpoint value for "${t}": "${i}". Must be a valid CSS length (e.g., "768px", "48em")`)}const e=Object.keys(r).filter(Q).sort((t,i)=>b(t)-b(i));for(let t=1;t<e.length;t++){const i=e[t-1],n=e[t],o=r[i],s=r[n];if(z(i)>=parseInt(s,10))throw new Error(`Breakpoint "${n}" (${s}) must be larger than "${i}" (${o})`)}}const Pe={tailwind:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},bootstrap:{sm:"576px",md:"768px",lg:"992px",xl:"1200px","2xl":"1400px"},material:{sm:"600px",md:"960px",lg:"1280px",xl:"1920px","2xl":"2560px"},mobileFocus:{sm:"480px",md:"768px",lg:"1024px",xl:"1200px","2xl":"1440px"}};class H{options;constructor(e){this.options={generateMinified:!1,includeComments:!0,optimizeOutput:!0,mobileFirst:!0,...e}}generateResponsiveCSS(e){const t=[],i=[],n={};let o=!1;for(const[s,a]of Object.entries(e))if(x(a)){o=!0;const d=this.generatePropertyMediaQueries(s,a);t.push(...d.mediaQueries),d.baseStyles&&Object.assign(n,d.baseStyles)}else n[this.toCSSPropertyName(s)]=this.formatCSSValue(s,a);return i.push(...this.generateCSSRules(t,n)),{cssRules:i,mediaQueries:t,fallbackStyles:n,hasResponsiveStyles:o}}generatePropertyMediaQueries(e,t){const i=[],n={},o=I();for(const s of o){const a=t[s];if(a===void 0)continue;const d=this.toCSSPropertyName(e),c=this.formatCSSValue(e,a);if(s==="base")n[d]=c;else{const p=se(s),h={[d]:c};i.push({breakpoint:s,query:p,styles:h,selector:this.options.selector})}}return{mediaQueries:i,baseStyles:Object.keys(n).length>0?n:void 0}}generateCSSRules(e,t){const i=[];if(Object.keys(t).length>0){const o=this.generateCSSRule(this.options.selector,t);i.push(o)}const n=this.groupQueriesByMediaQuery(e);for(const[o,s]of Object.entries(n)){if(o==="")continue;const a={};for(const c of s)Object.assign(a,c.styles);const d=this.generateMediaQueryRule(o,this.options.selector,a);i.push(d)}return i}groupQueriesByMediaQuery(e){const t={};for(const i of e)t[i.query]||(t[i.query]=[]),t[i.query].push(i);return t}generateCSSRule(e,t){const{generateMinified:i,includeComments:n}=this.options,o=i?"":"  ",s=i?"":`
+`,a=i?"":" ";let d=`${e}${a}{${s}`;for(const[c,p]of Object.entries(t))d+=`${o}${c}:${a}${p};${s}`;return d+=`}${s}`,n&&!i&&(d=`/* Base styles (mobile-first) */${s}${d}`),d}generateMediaQueryRule(e,t,i){const{generateMinified:n,includeComments:o}=this.options,s=n?"":"  ",a=n?"":"    ",d=n?"":`
+`,c=n?"":" ";let p=`@media ${e}${c}{${d}`;p+=`${s}${t}${c}{${d}`;for(const[h,m]of Object.entries(i))p+=`${a}${h}:${c}${m};${d}`;return p+=`${s}}${d}`,p+=`}${d}`,o&&!n&&(p=`/* ${this.getBreakpointFromQuery(e)} styles */${d}${p}`),p}toCSSProperty(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}formatCSSValue(e,t){if(t==null)return"inherit";if(typeof t=="number"){const i=["opacity","z-index","font-weight","line-height","flex-grow","flex-shrink","order","grid-column-start","grid-column-end","grid-row-start","grid-row-end"],n=this.toCSSProperty(e);if(i.includes(n))return this.addImportantIfNeeded(e,t.toString());if(["width","height","min-width","max-width","min-height","max-height","padding","margin","border-width","border-radius","top","right","bottom","left","font-size","letter-spacing","text-indent"].some(s=>n.includes(s)))return this.addImportantIfNeeded(e,`${t}px`)}return this.addImportantIfNeeded(e,t.toString())}addImportantIfNeeded(e,t){const i=["flexDirection","flex-direction","justifyContent","justify-content","alignItems","align-items","display"],n=this.toCSSProperty(e);return i.includes(e)||i.includes(n)?`${t} !important`:t}toCSSPropertyName(e){return this.toCSSProperty(e)}getBreakpointFromQuery(e){const t=O();for(const[i,n]of Object.entries(t))if(e.includes(n))return i;return"custom"}}function Ie(r,e,t,i){if(!x(t)){const a=e.replace(/[A-Z]/g,c=>`-${c.toLowerCase()}`),d=typeof t=="number"?`${t}px`:t.toString();return[`${r} { ${a}: ${d}; }`]}const n=new H({selector:r,...i}),o={[e]:t};return n.generateResponsiveCSS(o).cssRules}function je(r,e,t){const{generateMinified:i=!1}=t||{},n=i?"":"  ",o=i?"":`
+`,s=i?"":" ";let a=`@media ${e.query}${s}{${o}`;a+=`${n}${r}${s}{${o}`;for(const[d,c]of Object.entries(e.styles)){const p=d.replace(/[A-Z]/g,m=>`-${m.toLowerCase()}`),h=typeof c=="number"?`${c}px`:c.toString();a+=`${n}${n}${p}:${s}${h};${o}`}return a+=`${n}}${o}`,a+=`}${o}`,a}class F{static styleSheet=null;static injectedRules=new Set;static getStyleSheet(){if(this.styleSheet)return this.styleSheet;const e=document.createElement("style");return e.setAttribute("data-tachui-responsive","true"),document.head.appendChild(e),this.styleSheet=e.sheet,this.styleSheet}static injectCSS(e){if(typeof document>"u")return;const t=this.getStyleSheet();for(const i of e)if(!this.injectedRules.has(i))try{t.insertRule(i,t.cssRules.length),this.injectedRules.add(i)}catch(n){console.warn("Failed to inject CSS rule:",i,n)}}static clearCSS(){if(this.styleSheet){for(;this.styleSheet.cssRules.length>0;)this.styleSheet.deleteRule(0);this.injectedRules.clear()}}static hasRule(e){return this.injectedRules.has(e)}}class Le{cache=new Map;hitCount=0;missCount=0;get(e){const t=this.cache.get(e);return t?this.hitCount++:this.missCount++,t}set(e,t){this.cache.set(e,t)}clear(){this.cache.clear(),this.hitCount=0,this.missCount=0}getStats(){return{size:this.cache.size,hitRate:this.hitCount/(this.hitCount+this.missCount)||0,hits:this.hitCount,misses:this.missCount}}}const B=new Le;class De{static BATCH_SIZE=50;static ruleQueue=[];static flushTimer=null;static generateOptimizedCSS(e,t,i={}){const{minify:n=process.env.NODE_ENV==="production",batch:o=!0,deduplicate:s=!0}=i,a=this.createCacheKey(e,t,{minify:n});if(s){const c=B.get(a);if(c)return c}const d=this.generateCSS(e,t,{minify:n});return s&&B.set(a,d),o&&d.trim()?(this.addToBatch(d),""):d}static createCacheKey(e,t,i){return JSON.stringify({selector:e,config:t,options:i})}static generateCSS(e,t,i){const{minify:n=!1}=i,o=n?"":"  ",s=n?"":`
+`,a=n?"":" ";let d="";const c=new Set,p=this.extractBaseStyles(t);Object.keys(p).length>0&&(d+=`${e}${a}{${s}`,d+=this.generateProperties(p,o,s,a),d+=`}${s}`);for(const[h,m]of Object.entries(t))if(typeof m=="object"&&m!==null)for(const[v,S]of Object.entries(m)){if(v==="base")continue;const $=this.getMediaQuery(v),E=`${$}:${h}`;c.has(E)||(d+=`@media ${$}${a}{${s}`,d+=`${o}${e}${a}{${s}`,d+=`${o}${o}${this.propertyToCSS(h)}:${a}${this.valueToCSS(S)};${s}`,d+=`${o}}${s}`,d+=`}${s}`,c.add(E))}return d}static addToBatch(e){this.ruleQueue.push(e),this.ruleQueue.length>=this.BATCH_SIZE?this.flushBatch():this.flushTimer||(this.flushTimer=window.setTimeout(()=>this.flushBatch(),16))}static flushBatch(){if(this.ruleQueue.length===0)return;const e=this.ruleQueue.join("");this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null),this.injectCSS(e)}static injectCSS(e){if(typeof document>"u")return;let t=document.getElementById("tachui-responsive-styles");t||(t=document.createElement("style"),t.id="tachui-responsive-styles",t.type="text/css",document.head.appendChild(t)),t.appendChild(document.createTextNode(e))}static extractBaseStyles(e){const t={};for(const[i,n]of Object.entries(e))typeof n!="object"||n===null?t[i]=n:"base"in n&&(t[i]=n.base);return t}static generateProperties(e,t,i,n){let o="";for(const[s,a]of Object.entries(e))a!==void 0&&(o+=`${t}${this.propertyToCSS(s)}:${n}${this.valueToCSS(a)};${i}`);return o}static propertyToCSS(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}static valueToCSS(e){return typeof e=="number"?`${e}px`:e.toString()}static getMediaQuery(e){return{base:"",sm:"(min-width: 640px)",md:"(min-width: 768px)",lg:"(min-width: 1024px)",xl:"(min-width: 1280px)","2xl":"(min-width: 1536px)"}[e]||e}static flush(){this.flushBatch()}static getStats(){return{cache:B.getStats(),batch:{queueSize:this.ruleQueue.length,batchSize:this.BATCH_SIZE}}}static reset(){B.clear(),this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null)}}class P{static measurements=new Map;static startMeasurement(e){const t=performance.now();return()=>{const i=performance.now()-t;return this.recordMeasurement(e,i),i}}static recordMeasurement(e,t){this.measurements.has(e)||this.measurements.set(e,[]);const i=this.measurements.get(e);i.push(t),i.length>100&&i.shift()}static getStats(){const e={};for(const[t,i]of this.measurements){const n=[...i].sort((s,a)=>s-a),o=i.reduce((s,a)=>s+a,0)/i.length;e[t]={count:i.length,average:o,min:n[0],max:n[n.length-1],p50:n[Math.floor(n.length*.5)],p95:n[Math.floor(n.length*.95)],p99:n[Math.floor(n.length*.99)]}}return e}static reset(){this.measurements.clear()}}const U=250;class q extends J.BaseModifier{type="responsive";priority=U;generatedCSS=null;elementSelector="";_config;constructor(e){super(e),this._config=e}get config(){return this._config}apply(e,t){const i=e.element;!i||!(i instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(i),i.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateAndInjectCSS(),this.setupReactiveUpdates())}generateAndInjectCSS(){const e=P.startMeasurement("css-generation");try{const t=new H({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&&F.injectCSS(this.generatedCSS.cssRules)}finally{e()}}setupReactiveUpdates(){this.hasReactiveValues(this.properties)&&l.createEffect(()=>{this.trackReactiveDependencies(this.properties);const t=this.resolveReactiveConfig(this.properties);this.updateConfig(t)})}trackReactiveDependencies(e){let t=!1;for(const[i,n]of Object.entries(e))if(this.isReactiveValue(n))l.isSignal(n)||l.isComputed(n)?n():this.isAsset(n)&&(t=!0,n.resolve());else if(x(n))for(const[o,s]of Object.entries(n))this.isReactiveValue(s)&&(l.isSignal(s)||l.isComputed(s)?s():this.isAsset(s)&&(t=!0,s.resolve()));t&&l.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(x(t)){for(const i of Object.values(t))if(this.isReactiveValue(i))return!0}}return!1}isReactiveValue(e){return!!(l.isSignal(e)||l.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[i,n]of Object.entries(e))if(this.isReactiveValue(n))l.isSignal(n)||l.isComputed(n)?t[i]=n():this.isAsset(n)&&(t[i]=n.resolve());else if(x(n)){const o={};for(const[s,a]of Object.entries(n))this.isReactiveValue(a)?l.isSignal(a)||l.isComputed(a)?o[s]=a():this.isAsset(a)&&(o[s]=a.resolve()):o[s]=a;t[i]=o}else t[i]=n;return t}getGeneratedCSS(){return this.generatedCSS}getConfig(){return this.config}}function f(r){return new q(r)}class oe extends J.BaseModifier{type="media-query";priority=U+1;elementSelector="";constructor(e,t){super({query:e,styles:t})}get query(){return this.properties.query}get styles(){return this.properties.styles}apply(e,t){const i=e.element;!i||!(i instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(i),i.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateMediaQueryCSS())}generateMediaQueryCSS(){const{generateMinified:e=process.env.NODE_ENV==="production"}={},t=e?"":"  ",i=e?"":"    ",n=e?"":`
+`,o=e?"":" ";let s=`@media ${this.query}${o}{${n}`;s+=`${t}${this.elementSelector}${o}{${n}`;for(const[a,d]of Object.entries(this.styles)){const c=a.replace(/[A-Z]/g,h=>`-${h.toLowerCase()}`),p=typeof d=="number"?`${d}px`:d.toString();s+=`${i}${c}:${o}${p};${n}`}s+=`${t}}${n}`,s+=`}${n}`,F.injectCSS([s])}generateUniqueSelector(e){return`.${`tachui-mq-${Math.random().toString(36).substr(2,9)}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}}function C(r,e){return new oe(r,e)}function u(r,e){const t={[r]:e};return new q(t)}function G(r){const e={};return r.direction&&(e.flexDirection=r.direction),r.wrap&&(e.flexWrap=r.wrap),r.justify&&(e.justifyContent=r.justify),r.align&&(e.alignItems=r.align),r.gap&&(e.gap=r.gap),new q(e)}class K{constructor(e){return this.baseBuilder=e,new Proxy(this,{get(t,i){if(i==="base"||i==="sm"||i==="md"||i==="lg"||i==="xl"||i==="2xl"||i in t)return t[i];const n=t.baseBuilder[i];return typeof n=="function"?(...o)=>{const s=n.apply(t.baseBuilder,o);return s===t.baseBuilder?t:s}:n}})}addModifier(e){this.baseBuilder.addModifier(e)}build(){return this.baseBuilder.build()}responsive(e){const t=f(e);return this.baseBuilder.addModifier(t),this}mediaQuery(e,t){const i=C(e,t);return this.baseBuilder.addModifier(i),this}orientation(e,t){const i=`(orientation: ${e})`,n=C(i,t);return this.baseBuilder.addModifier(n),this}colorScheme(e,t){const i=`(prefers-color-scheme: ${e})`,n=C(i,t);return this.baseBuilder.addModifier(n),this}reducedMotion(e){const i=C("(prefers-reduced-motion: reduce)",e);return this.baseBuilder.addModifier(i),this}highContrast(e){const i=C("(prefers-contrast: high)",e);return this.baseBuilder.addModifier(i),this}touchDevice(e){const i=C("(pointer: coarse)",e);return this.baseBuilder.addModifier(i),this}mouseDevice(e){const i=C("(pointer: fine)",e);return this.baseBuilder.addModifier(i),this}retina(e){const i=C("(min-resolution: 2dppx)",e);return this.baseBuilder.addModifier(i),this}print(e){const i=C("print",e);return this.baseBuilder.addModifier(i),this}responsiveLayout(e){const t=G(e);return this.baseBuilder.addModifier(t),this}responsiveWidth(e){const t=u("width",e);return this.baseBuilder.addModifier(t),this}responsiveHeight(e){const t=u("height",e);return this.baseBuilder.addModifier(t),this}responsiveSize(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsivePadding(e){if(x(e)||typeof e=="string"||typeof e=="number"){const t=u("padding",e);this.baseBuilder.addModifier(t)}else{const t={},i=e;i.all&&(t.padding=i.all),i.horizontal&&(t.paddingLeft=i.horizontal,t.paddingRight=i.horizontal),i.vertical&&(t.paddingTop=i.vertical,t.paddingBottom=i.vertical),i.top&&(t.paddingTop=i.top),i.right&&(t.paddingRight=i.right),i.bottom&&(t.paddingBottom=i.bottom),i.left&&(t.paddingLeft=i.left);const n=f(t);this.baseBuilder.addModifier(n)}return this}responsiveMargin(e){if(x(e)||typeof e=="string"||typeof e=="number"){const t=u("margin",e);this.baseBuilder.addModifier(t)}else{const t={},i=e;i.all&&(t.margin=i.all),i.horizontal&&(t.marginLeft=i.horizontal,t.marginRight=i.horizontal),i.vertical&&(t.marginTop=i.vertical,t.marginBottom=i.vertical),i.top&&(t.marginTop=i.top),i.right&&(t.marginRight=i.right),i.bottom&&(t.marginBottom=i.bottom),i.left&&(t.marginLeft=i.left);const n=f(t);this.baseBuilder.addModifier(n)}return this}responsiveFont(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsiveFontSize(e){const t=u("fontSize",e);return this.baseBuilder.addModifier(t),this}responsiveTextAlign(e){const t=u("textAlign",e);return this.baseBuilder.addModifier(t),this}get base(){return new M("base",this,this.baseBuilder)}get sm(){return new M("sm",this,this.baseBuilder)}get md(){return new M("md",this,this.baseBuilder)}get lg(){return new M("lg",this,this.baseBuilder)}get xl(){return new M("xl",this,this.baseBuilder)}get"2xl"(){return new M("2xl",this,this.baseBuilder)}}class M{constructor(e,t,i){this.breakpoint=e,this.parentBuilder=t,this.baseBuilder=i}width(e){const t={[this.breakpoint]:e},i=u("width",t);return this.parentBuilder.addModifier(i),this.parentBuilder}height(e){const t={[this.breakpoint]:e},i=u("height",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minWidth(e){const t={[this.breakpoint]:e},i=u("minWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxWidth(e){const t={[this.breakpoint]:e},i=u("maxWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minHeight(e){const t={[this.breakpoint]:e},i=u("minHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxHeight(e){const t={[this.breakpoint]:e},i=u("maxHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}padding(e){const t={[this.breakpoint]:e},i=u("padding",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingHorizontal(e){const t={[this.breakpoint]:e},i=u("paddingLeft",t),n=u("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(n),this.parentBuilder}paddingVertical(e){const t={[this.breakpoint]:e},i=u("paddingTop",t),n=u("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(n),this.parentBuilder}paddingTop(e){const t={[this.breakpoint]:e},i=u("paddingTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingBottom(e){const t={[this.breakpoint]:e},i=u("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingLeft(e){const t={[this.breakpoint]:e},i=u("paddingLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingRight(e){const t={[this.breakpoint]:e},i=u("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}margin(e){const t={[this.breakpoint]:e},i=u("margin",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginHorizontal(e){const t={[this.breakpoint]:e},i=u("marginLeft",t),n=u("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(n),this.parentBuilder}marginVertical(e){const t={[this.breakpoint]:e},i=u("marginTop",t),n=u("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(n),this.parentBuilder}marginTop(e){const t={[this.breakpoint]:e},i=u("marginTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginBottom(e){const t={[this.breakpoint]:e},i=u("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginLeft(e){const t={[this.breakpoint]:e},i=u("marginLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginRight(e){const t={[this.breakpoint]:e},i=u("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}fontSize(e){const t={[this.breakpoint]:e},i=u("fontSize",t);return this.parentBuilder.addModifier(i),this.parentBuilder}textAlign(e){const t={[this.breakpoint]:e},i=u("textAlign",t);return this.parentBuilder.addModifier(i),this.parentBuilder}display(e){const t={[this.breakpoint]:e},i=u("display",t);return this.parentBuilder.addModifier(i),this.parentBuilder}flexDirection(e){const t={[this.breakpoint]:e},i=u("flexDirection",t);return this.parentBuilder.addModifier(i),this.parentBuilder}justifyContent(e){const t={[this.breakpoint]:e},i=u("justifyContent",t);return this.parentBuilder.addModifier(i),this.parentBuilder}alignItems(e){const t={[this.breakpoint]:e},i=u("alignItems",t);return this.parentBuilder.addModifier(i),this.parentBuilder}backgroundColor(e){const t={[this.breakpoint]:e},i=u("backgroundColor",t);return this.parentBuilder.addModifier(i),this.parentBuilder}color(e){const t={[this.breakpoint]:e},i=u("color",t);return this.parentBuilder.addModifier(i),this.parentBuilder}opacity(e){const t={[this.breakpoint]:e},i=u("opacity",t);return this.parentBuilder.addModifier(i),this.parentBuilder}}function ze(r){return new K(r)}function Ae(r){return new K(r)}function qe(){const r=y(),e=l.createComputed(()=>w());return{current:r,context:e,isAbove:s=>l.createComputed(()=>b(r())>b(s)),isBelow:s=>l.createComputed(()=>b(r())<b(s)),isBetween:(s,a)=>l.createComputed(()=>{const d=b(r()),c=b(s),p=b(a);return d>=c&&d<=p}),matches:s=>{const[a,d]=l.createSignal(!1);if(typeof window<"u"){const c=window.matchMedia(s);d(c.matches);const p=h=>d(h.matches);c.addEventListener("change",p)}return a}}}function Qe(r){const[e,t]=l.createSignal(!1);if(typeof window<"u"){const i=window.matchMedia(r);t(i.matches);const n=o=>t(o.matches);i.addEventListener("change",n)}return e}function Ne(r){const e=y();return l.createComputed(()=>{if(!x(r))return r;const t=e(),i=r,n=["base","sm","md","lg","xl","2xl"],o=n.indexOf(t);for(let s=o;s>=0;s--){const a=n[s];if(i[a]!==void 0)return i[a]}for(const s of n)if(i[s]!==void 0)return i[s];throw new Error("No responsive value found for any breakpoint")})}function _e(r,e){if(!x(r))return r;const t=r,i=e||y()(),n=["base","sm","md","lg","xl","2xl"],o=n.indexOf(i);for(let s=o;s>=0;s--){const a=n[s];if(t[a]!==void 0)return t[a]}for(const s of n)if(t[s]!==void 0)return t[s];throw new Error("No responsive value found for any breakpoint")}function We(r,e){const t={};for(const[i,n]of Object.entries(e))if(x(n)){const o=n;for(const[s,a]of Object.entries(o))if(a!==void 0){const d=s==="base"?`--${r}-${i}`:`--${r}-${i}-${s}`;t[d]=a.toString()}}else t[`--${r}-${i}`]=n.toString();return t}const g={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:r=>`(min-width: ${r}${typeof r=="number"?"px":""})`,maxWidth:r=>`(max-width: ${r}${typeof r=="number"?"px":""})`,between:(r,e)=>`(min-width: ${r}${typeof r=="number"?"px":""}) and (max-width: ${e}${typeof e=="number"?"px":""})`,minHeight:r=>`(min-height: ${r}${typeof r=="number"?"px":""})`,maxHeight:r=>`(max-height: ${r}${typeof r=="number"?"px":""})`,heightBetween:(r,e)=>`(min-height: ${r}${typeof r=="number"?"px":""}) and (max-height: ${e}${typeof e=="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:r=>`(aspect-ratio: ${r})`,minAspectRatio:r=>`(min-aspect-ratio: ${r})`,maxAspectRatio:r=>`(max-aspect-ratio: ${r})`,lowRes:"(max-resolution: 120dpi)",standardRes:"(min-resolution: 120dpi) and (max-resolution: 192dpi)",highRes:"(min-resolution: 192dpi)",customResolution:r=>`(min-resolution: ${r}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 He(...r){return r.filter(e=>e).join(" and ")}function Fe(...r){return r.filter(e=>e).join(", ")}function Ue(r){const e=y();return l.createComputed(()=>{const t=e();return!(r.hideOn&&r.hideOn.includes(t)||r.showOn&&!r.showOn.includes(t))})}function ae(){if(typeof window>"u")return;const r=w();console.group("🔍 tachUI Responsive State"),console.log("Current breakpoint:",r.current),console.log("Viewport dimensions:",`${r.width}x${r.height}`),console.log("Available breakpoints:",["base","sm","md","lg","xl","2xl"]);const e={Mobile:g.mobile,Tablet:g.tablet,Desktop:g.desktop,"Dark mode":g.darkMode,"Reduced motion":g.reducedMotion,"Can hover":g.canHover};console.log("Media query matches:");for(const[t,i]of Object.entries(e))console.log(`  ${t}: ${window.matchMedia(i).matches}`);console.groupEnd()}function Ge(r={}){if(typeof window>"u"||process.env.NODE_ENV==="production")return;const{position:e="top-right",showDimensions:t=!0,showBreakpoint:i=!0}=r,n=document.createElement("div");n.id="tachui-responsive-debug",n.style.cssText=`
+    position: fixed;
+    ${e.includes("top")?"top: 10px":"bottom: 10px"};
+    ${e.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(n);function o(){const s=w();let a="";i&&(a+=`Breakpoint: ${s.current}`),t&&(a&&(a+=`
+`),a+=`Size: ${s.width}×${s.height}`),n.textContent=a}o(),window.addEventListener("resize",o),ae()}class de{static autoFit(e){const t={};if(typeof e.minColumnWidth=="object"){t.gridTemplateColumns={};for(const[i,n]of Object.entries(e.minColumnWidth)){const o=typeof n=="number"?`${n}px`:n,s=e.maxColumns&&typeof e.maxColumns=="object"?e.maxColumns[i]||"auto":e.maxColumns||"auto";t.gridTemplateColumns[i]=s==="auto"?`repeat(auto-fit, minmax(${o}, 1fr))`:`repeat(${s}, minmax(${o}, 1fr))`}}else{const i=typeof e.minColumnWidth=="number"?`${e.minColumnWidth}px`:e.minColumnWidth,n=e.maxColumns||"auto";t.gridTemplateColumns=n==="auto"?`repeat(auto-fit, minmax(${i}, 1fr))`:`repeat(${n}, minmax(${i}, 1fr))`}return e.gap&&(t.gap=e.gap),t.display="grid",f(t)}static columns(e,t){const i={display:"grid",gridTemplateColumns:typeof e=="object"?Object.fromEntries(Object.entries(e).map(([n,o])=>[n,`repeat(${o}, 1fr)`])):`repeat(${e}, 1fr)`};return t?.gap&&(i.gap=t.gap),t?.rowGap&&(i.rowGap=t.rowGap),t?.autoRows&&(i.gridAutoRows=t.autoRows),f(i)}static masonry(e){const t={display:"grid",gridTemplateColumns:typeof e.columns=="object"?Object.fromEntries(Object.entries(e.columns).map(([i,n])=>[i,`repeat(${n}, 1fr)`])):`repeat(${e.columns}, 1fr)`,gridAutoRows:"max-content"};return e.gap&&(t.gap=e.gap),f(t)}}class Ke{static stackToRow(e){const i={display:"flex",flexDirection:{base:"column",[e?.stackBreakpoint||"md"]:"row"}};return e?.gap&&(i.gap=e.gap),e?.align&&(i.alignItems=e.align),e?.justify&&(i.justifyContent=e.justify),f(i)}static wrap(e){const t={display:"flex",flexWrap:"wrap",...e};return f(t)}static center(e="row"){return f({display:"flex",flexDirection:e,justifyContent:"center",alignItems:"center"})}static spaceBetween(e="row"){return f({display:"flex",flexDirection:e,justifyContent:"space-between",alignItems:"center"})}}class Ze{static container(e){const t={width:"100%",marginLeft:"auto",marginRight:"auto"};return e?.maxWidth?t.maxWidth=e.maxWidth:t.maxWidth={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},e?.padding&&(t.paddingLeft=e.padding,t.paddingRight=e.padding),e?.margin&&(t.marginTop=e.margin,t.marginBottom=e.margin),f(t)}static fullWidth(){return f({width:"100vw",marginLeft:"calc(-50vw + 50%)",marginRight:"calc(-50vw + 50%)"})}static section(e){const t={};return e?.paddingY&&(t.paddingTop=e.paddingY,t.paddingBottom=e.paddingY),e?.paddingX&&(t.paddingLeft=e.paddingX,t.paddingRight=e.paddingX),e?.maxWidth&&(t.maxWidth=e.maxWidth,t.marginLeft="auto",t.marginRight="auto"),f(t)}}class Ye{static showOn(e){const t={display:{}};for(const i of e)t.display[i]="block";return f(t)}static hideOn(e){const t={display:{}};for(const i of e)t.display[i]="none";return f(t)}static mobileOnly(){return f({display:{base:"block",md:"none"}})}static desktopOnly(){return f({display:{base:"none",md:"block"}})}static tabletOnly(){return f({display:{base:"none",md:"block",lg:"none"}})}}class Xe{static padding(e){const t={};return e.all&&(t.padding=e.all),e.horizontal&&(t.paddingLeft=e.horizontal,t.paddingRight=e.horizontal),e.vertical&&(t.paddingTop=e.vertical,t.paddingBottom=e.vertical),e.top&&(t.paddingTop=e.top),e.right&&(t.paddingRight=e.right),e.bottom&&(t.paddingBottom=e.bottom),e.left&&(t.paddingLeft=e.left),f(t)}static margin(e){const t={};return e.all&&(t.margin=e.all),e.horizontal&&(t.marginLeft=e.horizontal,t.marginRight=e.horizontal),e.vertical&&(t.marginTop=e.vertical,t.marginBottom=e.vertical),e.top&&(t.marginTop=e.top),e.right&&(t.marginRight=e.right),e.bottom&&(t.marginBottom=e.bottom),e.left&&(t.marginLeft=e.left),f(t)}static gap(e){const t={};return e.all&&(t.gap=e.all),e.column&&(t.columnGap=e.column),e.row&&(t.rowGap=e.row),f(t)}}class Je{static scale(e){const t={fontSize:e.base};if(e.scale&&typeof e.scale=="object"){t.fontSize={};for(const[i,n]of Object.entries(e.scale)){const o=typeof e.base=="number"?e.base:parseFloat(e.base);t.fontSize[i]=`${o*n}px`}}return e.lineHeight&&(t.lineHeight=e.lineHeight),f(t)}static fluid(e){const t=e.minBreakpoint||"320px",i=e.maxBreakpoint||"1200px",n=typeof e.minSize=="number"?`${e.minSize}px`:e.minSize,o=typeof e.maxSize=="number"?`${e.maxSize}px`:e.maxSize;return f({fontSize:`clamp(${n}, calc(${n} + (${o} - ${n}) * ((100vw - ${t}) / (${i} - ${t}))), ${o})`})}}const et={sidebar:r=>{const e=r?.collapseBreakpoint||"md",t=r?.sidebarWidth||"250px";return f({display:"grid",gridTemplateColumns:{base:"1fr",[e]:`${t} 1fr`},gap:r?.gap||"1rem"})},holyGrail:r=>{const e=r?.collapseBreakpoint||"lg";return f({display:"grid",gridTemplateAreas:{base:'"header" "main" "footer"',[e]:'"header header" "sidebar main" "footer footer"'},gridTemplateRows:{base:`${r?.headerHeight||"auto"} 1fr ${r?.footerHeight||"auto"}`,[e]:`${r?.headerHeight||"auto"} 1fr ${r?.footerHeight||"auto"}`},gridTemplateColumns:{base:"1fr",[e]:`${r?.sidebarWidth||"250px"} 1fr`},minHeight:"100vh"})},cardGrid:r=>de.autoFit({minColumnWidth:r?.minCardWidth||"300px",gap:r?.gap||"1rem",maxColumns:r?.maxColumns}),hero:r=>f({display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:r?.textAlign||"center",minHeight:r?.minHeight||"50vh",padding:r?.padding||"2rem"})};class R{static createResponsiveResolver(e,t=[]){const i=y();return l.createComputed(()=>{t.forEach(s=>s());const n=i(),o=w();return e(n,o)})}static createInterpolatedValue(e,t={}){const{smoothing:i="linear",clamp:n=!0}=t;return l.createComputed(()=>{const s=w().width,a=O(),d=[];for(const[v,S]of Object.entries(e))if(S!==void 0){const $=v==="base"?0:parseInt(a[v]||"0");d.push({width:$,value:S})}if(d.sort((v,S)=>v.width-S.width),d.length===0)return 0;if(d.length===1)return d[0].value;let c=d[0],p=d[d.length-1];for(let v=0;v<d.length-1;v++)if(s>=d[v].width&&s<=d[v+1].width){c=d[v],p=d[v+1];break}if(n){if(s<=c.width)return c.value;if(s>=p.width)return p.value}const h=(s-c.width)/(p.width-c.width);let m=h;switch(i){case"ease":m=.5-.5*Math.cos(h*Math.PI);break;case"ease-in":m=h*h;break;case"ease-out":m=1-(1-h)*(1-h);break;case"linear":default:m=h;break}return c.value+(p.value-c.value)*m})}static createConditionalResponsive(e,t,i){const n=y();return l.createComputed(()=>{const o=w(),a=e(o)?t:i;return this.resolveResponsiveValue(a,n())})}static resolveResponsiveValue(e,t){if(!x(e))return e;const i=e,n=["base","sm","md","lg","xl","2xl"],o=n.indexOf(t);for(let s=o;s>=0;s--){const a=n[s];if(i[a]!==void 0)return i[a]}for(const s of n)if(i[s]!==void 0)return i[s];throw new Error("No responsive value found")}}class ce{static useResponsiveArray(e){const t=y();return l.createComputed(()=>{const i=t();return R.resolveResponsiveValue(e,i)||[]})}static useResponsiveObject(e){const t=y();return l.createComputed(()=>{const i=t();try{return R.resolveResponsiveValue(e,i)}catch{return null}})}static useResponsiveFunction(e){const t=y();return l.createComputed(()=>{const i=t();try{return R.resolveResponsiveValue(e,i)}catch{return null}})}static useResponsiveState(e){const[t,i]=l.createSignal(e),n=y();return[l.createComputed(()=>{const a=t(),d=n();try{return R.resolveResponsiveValue(a,d)}catch{return}}),a=>{x(a)?i(a):i({[n()]:a})}]}static useResponsiveComputation(e,t=[]){return l.createMemo(()=>{t.forEach(n=>n());const i=w();return e(i)})}static useResponsiveEffect(e,t=[]){let i,n;l.createEffect(()=>{t.forEach(a=>a());const o=w();i&&(i(),i=void 0);const s=e(o,n);typeof s=="function"&&(i=s),n=o})}}class le{static onBreakpoints(e,t){let i;return l.createEffect(()=>{const n=w();if(e.includes(n.current)){i&&(i(),i=void 0);const o=t(n);typeof o=="function"&&(i=o)}}),()=>{i&&i()}}static onBreakpointChange(e){let t;return l.createEffect(()=>{const i=w(),n=i.current;t&&t!==n&&e(n,t,i),t=n}),()=>{}}static onBreakpointRange(e,t,i){let n=!1,o,s;return l.createEffect(()=>{const a=w(),d=b(a.current),c=b(e),p=b(t),h=d>=c&&d<=p;if(h&&!n){if(i.onEnter){const m=i.onEnter(a);typeof m=="function"&&(s=m)}n=!0}else!h&&n&&(s&&(s(),s=void 0),o&&(o(),o=void 0),i.onLeave&&i.onLeave(a),n=!1);if(h&&i.onWithin){o&&(o(),o=void 0);const m=i.onWithin(a);typeof m=="function"&&(o=m)}}),()=>{s&&s(),o&&o()}}}class ue{static createResponsivePagination(e,t){const[i,n]=l.createSignal(1),o=y(),s=l.createComputed(()=>{const S=o();return R.resolveResponsiveValue(t,S)}),a=l.createComputed(()=>Math.ceil(e.length/s())),d=l.createComputed(()=>{const S=s(),E=(i()-1)*S,fe=E+S;return e.slice(E,fe)}),c=l.createComputed(()=>i()<a()),p=l.createComputed(()=>i()>1),h=S=>{const $=a();n(Math.max(1,Math.min(S,$)))},m=()=>{c()&&n(i()+1)},v=()=>{p()&&n(i()-1)};return l.createEffect(()=>{s(),n(1)}),{currentPage:i,totalPages:a,currentItems:d,setPage:h,nextPage:m,prevPage:v,hasNext:c,hasPrev:p}}static createResponsiveFilter(e,t){const i=y();return l.createComputed(()=>{const n=i(),o=R.resolveResponsiveValue(t,n);return o?e.filter(o):e})}static createResponsiveSort(e,t){const i=y();return l.createComputed(()=>{const n=i(),o=R.resolveResponsiveValue(t,n);return o?[...e].sort(o):e})}}const tt={Breakpoints:R,Hooks:ce,Targeting:le,Data:ue};class k{static isEnabled=!1;static debugOverlay=null;static logLevel="info";static enable(e={}){if(process.env.NODE_ENV==="production"){console.warn("ResponsiveDevTools: Not enabling in production mode");return}this.isEnabled=!0,this.logLevel=e.logLevel||"info",this.log("info","ResponsiveDevTools: Enabled"),e.showOverlay&&this.createDebugOverlay(e),e.highlightResponsiveElements&&this.enableElementHighlighting(),e.showPerformance&&this.enablePerformanceMonitoring(),this.logResponsiveState()}static disable(){this.isEnabled=!1,this.debugOverlay&&(this.debugOverlay.remove(),this.debugOverlay=null),this.disableElementHighlighting(),this.log("info","ResponsiveDevTools: Disabled")}static get enabled(){return this.isEnabled&&process.env.NODE_ENV!=="production"}static log(e,...t){if(!this.enabled)return;const i=["error","warn","info","debug"],n=i.indexOf(this.logLevel);i.indexOf(e)<=n&&console[e]("[ResponsiveDevTools]",...t)}static createDebugOverlay(e){if(typeof document>"u")return;const t=e.position||"top-right";this.debugOverlay=document.createElement("div"),this.debugOverlay.id="tachui-responsive-debug",this.debugOverlay.style.cssText=`
+      position: fixed;
+      ${t.includes("top")?"top: 10px":"bottom: 10px"};
+      ${t.includes("right")?"right: 10px":"left: 10px"};
+      background: rgba(0, 0, 0, 0.9);
+      color: white;
+      padding: 12px;
+      border-radius: 8px;
+      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+      font-size: 12px;
+      z-index: 10000;
+      pointer-events: auto;
+      cursor: pointer;
+      max-width: 300px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    `;const i=document.createElement("div");i.textContent="×",i.style.cssText=`
+      position: absolute;
+      top: 4px;
+      right: 8px;
+      cursor: pointer;
+      font-size: 16px;
+      color: #ff6b6b;
+    `,i.onclick=()=>this.disable(),this.debugOverlay.appendChild(i),document.body.appendChild(this.debugOverlay),this.updateDebugOverlay(e);let n;window.addEventListener("resize",()=>{clearTimeout(n),n=window.setTimeout(()=>{this.updateDebugOverlay(e)},100)})}static updateDebugOverlay(e){if(!this.debugOverlay)return;const t=w(),i=O();let n=`
+      <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
+        📱 Responsive Debug
+      </div>
+    `;if(n+=`
+      <div style="margin-bottom: 6px;">
+        <strong>Current:</strong> <span style="color: #66bb6a;">${t.current}</span>
+      </div>
+      <div style="margin-bottom: 6px;">
+        <strong>Size:</strong> ${t.width}×${t.height}
+      </div>
+    `,e.showBreakpoints){n+='<div style="margin: 8px 0; font-weight: bold; color: #ffb74d;">Breakpoints:</div>';for(const[s,a]of Object.entries(i)){const d=s===t.current;n+=`
+          <div style="color: ${d?"#66bb6a":"#999"}; margin-bottom: 2px;">
+            ${d?"▶":"▷"} ${s}: ${a}
+          </div>
+        `}}if(e.showPerformance){const s=P.getStats(),a=B.getStats();if(n+='<div style="margin: 8px 0; font-weight: bold; color: #f06292;">Performance:</div>',n+=`
+        <div style="margin-bottom: 2px;">
+          Cache: ${a.size} rules (${(a.hitRate*100).toFixed(1)}% hit rate)
+        </div>
+      `,Object.keys(s).length>0)for(const[d,c]of Object.entries(s))n+=`
+            <div style="margin-bottom: 2px;">
+              ${d}: ${c.average.toFixed(2)}ms avg
+            </div>
+          `}n+='<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';const o={Touch:g.touchDevice,Dark:g.darkMode,"Reduced Motion":g.reducedMotion,"High Contrast":g.highContrast};for(const[s,a]of Object.entries(o)){const d=window.matchMedia(a).matches;n+=`
+        <div style="color: ${d?"#66bb6a":"#666"}; margin-bottom: 2px;">
+          ${d?"✓":"✗"} ${s}
+        </div>
+      `}this.debugOverlay.innerHTML=n+this.debugOverlay.querySelector("div:last-child")?.outerHTML||""}static enableElementHighlighting(){if(typeof document>"u")return;const e=document.createElement("style");e.id="tachui-responsive-highlight",e.textContent=`
+      .tachui-responsive-element {
+        outline: 2px dashed #4fc3f7 !important;
+        outline-offset: 2px !important;
+        position: relative !important;
+      }
+
+      .tachui-responsive-element::before {
+        content: 'R';
+        position: absolute !important;
+        top: -8px !important;
+        right: -8px !important;
+        background: #4fc3f7 !important;
+        color: white !important;
+        width: 16px !important;
+        height: 16px !important;
+        border-radius: 50% !important;
+        font-size: 10px !important;
+        font-weight: bold !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        z-index: 10001 !important;
+        font-family: monospace !important;
+      }
+    `,document.head.appendChild(e),new MutationObserver(()=>{this.highlightResponsiveElements()}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),this.highlightResponsiveElements()}static disableElementHighlighting(){if(typeof document>"u")return;const e=document.getElementById("tachui-responsive-highlight");e&&e.remove(),document.querySelectorAll(".tachui-responsive-element").forEach(t=>{t.classList.remove("tachui-responsive-element")})}static highlightResponsiveElements(){if(typeof document>"u")return;['[class*="tachui-responsive-"]','[class*="tachui-mq-"]'].forEach(t=>{document.querySelectorAll(t).forEach(i=>{i.classList.contains("tachui-responsive-element")||i.classList.add("tachui-responsive-element")})})}static enablePerformanceMonitoring(){setInterval(()=>{if(!this.enabled)return;const e=P.getStats(),t=B.getStats();this.log("debug","Performance Stats:",{cache:t,performance:e})},5e3)}static logResponsiveState(){if(!this.enabled)return;const e=w(),t=O();if(console.group("🔍 TachUI Responsive State"),console.log("Current breakpoint:",e.current),console.log("Viewport:",`${e.width}×${e.height}`),console.log("Configuration:",t),typeof window<"u"&&window.matchMedia){const i={Mobile:g.mobile,Tablet:g.tablet,Desktop:g.desktop,"Touch Device":g.touchDevice,"Dark Mode":g.darkMode,"Reduced Motion":g.reducedMotion};console.log("Media Query Results:");for(const[n,o]of Object.entries(i))try{console.log(`  ${n}: ${window.matchMedia(o).matches}`)}catch{console.log(`  ${n}: Error testing query`)}}console.groupEnd()}static inspectResponsiveValue(e,t){if(!this.enabled)return;const i=y();if(console.group(`🔍 Responsive Value${t?` - ${t}`:""}`),x(e)){const n=e;console.log("Responsive object:",n);const o=["base","sm","md","lg","xl","2xl"],s=o.indexOf(i());let a;for(let d=s;d>=0;d--){const c=o[d];if(n[c]!==void 0){a=n[c],console.log(`Resolved value (${c}):`,a);break}}console.log("Defined breakpoints:");for(const[d,c]of Object.entries(n))if(c!==void 0){const p=d===i();console.log(`  ${p?"→":" "} ${d}:`,c)}}else console.log("Static value:",e);console.groupEnd()}static testResponsiveBehavior(e,t=["base","sm","md","lg","xl","2xl"]){if(!this.enabled)return{};const i={};return t.forEach(n=>{this.log("debug",`Testing breakpoint ${n}:`,e)}),i}static exportConfiguration(){const e=w(),t=O(),i=P.getStats(),n=B.getStats(),o={};if(typeof window<"u"&&window.matchMedia){for(const[s,a]of Object.entries(g))if(typeof a=="string")try{o[s]=window.matchMedia(a).matches}catch{o[s]=!1}}return{breakpoints:t,currentContext:e,performance:{cache:n,timings:i},mediaQueries:o}}}function pe(r,e){const t=y();return l.createComputed(()=>{const i=t(),n=x(r);let o,s={};if(n){const a=r;s=a;const d=["base","sm","md","lg","xl","2xl"],c=d.indexOf(i);for(let p=c;p>=0;p--){const h=d[p];if(a[h]!==void 0){o=a[h];break}}}else o=r,s={[i]:o};return k.enabled&&e&&k.inspectResponsiveValue(r,e),{resolvedValue:o,activeBreakpoint:i,allValues:s,isResponsive:n}})}class he{static testCSSFeatures(){if(typeof window>"u"||typeof CSS>"u"||!CSS.supports)return{};const e={};try{e.cssGrid=CSS.supports("display","grid"),e.flexbox=CSS.supports("display","flex"),e.customProperties=CSS.supports("--test","value"),e.viewportUnits=CSS.supports("width","100vw"),e.mediaQueries=typeof window.matchMedia=="function",e.containerQueries=CSS.supports("container-type","inline-size"),e.logicalProperties=CSS.supports("margin-inline-start","1rem")}catch{}return e}static testViewportSizes(e){if(typeof window>"u")return;const t=[{width:320,height:568,name:"iPhone SE"},{width:375,height:667,name:"iPhone 8"},{width:768,height:1024,name:"iPad Portrait"},{width:1024,height:768,name:"iPad Landscape"},{width:1280,height:720,name:"Desktop Small"},{width:1920,height:1080,name:"Desktop Large"}];k.enabled&&k.log("info","Testing viewport sizes:",t),t.forEach(i=>{e(i.width,i.height)})}}typeof window<"u"&&process.env.NODE_ENV!=="production"&&(window.tachUIResponsive={devTools:k,inspector:pe,compatibility:he,logState:()=>k.logResponsiveState(),export:()=>k.exportConfiguration()});const it={name:"@tachui/responsive",version:Ce,author:"TachUI Team",verified:!0},j=80,nt=[["responsive",f,{category:"layout",priority:j,signature:"(config: ResponsiveStyleConfig) => Modifier",description:"Applies responsive style mappings across configured breakpoints."}],["mediaQuery",C,{category:"layout",priority:j,signature:"(query: string, styles: Record<string, any>) => Modifier",description:"Attaches custom CSS rules for a media query to a component."}],["responsiveProperty",u,{category:"layout",priority:j,signature:"(property: string, value: ResponsiveValue<any>) => Modifier",description:"Creates a responsive modifier from a single style property/value map."}],["responsiveLayout",G,{category:"layout",priority:j,signature:"(config: ResponsiveLayoutConfig) => Modifier",description:"Configures responsive flexbox layout properties such as direction, wrap, and gap."}]];let X=!1;function rt(r){const e=r?.registry,t=r?.plugin??it,i=r?.force===!0,n=!!(e||r?.plugin);!n&&X&&!i||(nt.forEach(([o,s,a])=>{we(o,s,a,e,t)}),n||(X=!0))}exports.AdvancedBreakpointUtils=R;exports.BreakpointPresets=Pe;exports.BrowserCompatibility=he;exports.CSSInjector=F;exports.DEFAULT_BREAKPOINTS=D;exports.LayoutPatterns=et;exports.MediaQueries=g;exports.MediaQueryModifier=oe;exports.OptimizedCSSGenerator=De;exports.RESPONSIVE_MODIFIER_PRIORITY=U;exports.ResponsiveAdvanced=tt;exports.ResponsiveCSSGenerator=H;exports.ResponsiveContainerPatterns=Ze;exports.ResponsiveDataUtils=ue;exports.ResponsiveDevTools=k;exports.ResponsiveFlexPatterns=Ke;exports.ResponsiveGridPatterns=de;exports.ResponsiveHooks=ce;exports.ResponsiveModifier=q;exports.ResponsiveModifierBuilderImpl=K;exports.ResponsivePerformanceMonitor=P;exports.ResponsiveSpacingPatterns=Xe;exports.ResponsiveTargeting=le;exports.ResponsiveTypographyPatterns=Je;exports.ResponsiveVisibilityPatterns=Ye;exports.__resetResponsiveSystemForTests=Me;exports.__syncResponsiveSignalsForTests=$e;exports.breakpointToPixels=z;exports.combineMediaQueries=He;exports.configureBreakpoints=Re;exports.createBreakpointContext=w;exports.createMediaQueryModifier=C;exports.createResponsiveBuilder=Ae;exports.createResponsiveCSSVariables=We;exports.createResponsiveLayoutModifier=G;exports.createResponsiveModifier=f;exports.createResponsivePropertyModifier=u;exports.createResponsiveVisibility=Ue;exports.cssRuleCache=B;exports.enableResponsiveDebugOverlay=Ge;exports.generateCustomMediaQuery=je;exports.generateMediaQuery=se;exports.generateRangeMediaQuery=Oe;exports.generateResponsiveProperty=Ie;exports.getBreakpointIndex=b;exports.getBreakpointsAbove=Ve;exports.getBreakpointsBelow=Te;exports.getCurrentBreakpoint=y;exports.getCurrentBreakpointConfig=O;exports.getSortedBreakpoints=I;exports.getViewportDimensions=Be;exports.initializeResponsiveSystem=ke;exports.isBreakpointAbove=_;exports.isBreakpointBelow=W;exports.isResponsiveValue=x;exports.isValidBreakpointKey=Q;exports.logResponsiveState=ae;exports.orMediaQueries=Fe;exports.registerResponsiveModifiers=rt;exports.resolveResponsiveValue=_e;exports.useBreakpoint=qe;exports.useMediaQuery=Qe;exports.useResponsiveInspector=pe;exports.useResponsiveValue=Ne;exports.withResponsive=ze;
+//# sourceMappingURL=index-BpVUtEG4.js.map