@tachui/responsive 0.8.5-alpha → 0.8.10-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +62 -57
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -9,9 +9,9 @@ The `@tachui/responsive` package provides comprehensive responsive design capabi
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
npm install @tachui/responsive
|
|
12
|
+
npm install @tachui/responsive
|
|
13
13
|
# or
|
|
14
|
-
pnpm add @tachui/responsive
|
|
14
|
+
pnpm add @tachui/responsive
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## Core Features
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("@tachui/registry"),ae=require("@tachui/modifiers"),u=require("@tachui/core"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("@tachui/registry"),ae=require("@tachui/modifiers"),u=require("@tachui/core"),g={Clean:0,Check:1,Dirty:2,Disposed:3};let ke=0;const $e=Math.random().toString(36).substr(2,6);let te=null,ie=null;const Me=new Set;Me.add($e);const I={get currentComputation(){return te},set currentComputation(s){te=s},get currentOwner(){return ie},set currentOwner(s){ie=s}};function ce(){return I.currentComputation}function Oe(){return I.currentOwner}class Ve{id;owner;fn;sources=new Set;observers=new Set;state=g.Dirty;value=void 0;constructor(e,t=null){this.id=++ke,this.fn=e,this.owner=t,t&&!t.disposed&&t.sources.add(this)}execute(){if(this.state===g.Disposed)return this.value;for(const t of this.sources)t&&typeof t=="object"&&"removeObserver"in t&&t.removeObserver(this);this.sources.clear();const e=I.currentComputation;I.currentComputation=this;try{return this.state=g.Clean,this.value=this.fn(),this.value}catch(t){throw this.state=g.Disposed,(typeof process>"u"||process.env.NODE_ENV!=="test")&&console.error("Error in computation:",t),t}finally{I.currentComputation=e}}dispose(){if(this.state!==g.Disposed){this.state=g.Disposed;for(const e of this.sources)e&&typeof e=="object"&&"removeObserver"in e&&e.removeObserver(this);this.sources.clear();for(const e of this.observers)e.sources.delete(this);this.observers.clear(),this.owner&&!this.owner.disposed&&this.owner.sources.delete(this)}}}typeof globalThis.__DEV__>"u"&&(globalThis.__DEV__=process.env.NODE_ENV!=="production");const Ee=(s,e)=>s===e;var H=(s=>(s[s.Immediate=0]="Immediate",s[s.High=1]="High",s[s.Normal=2]="Normal",s[s.Low=3]="Low",s[s.Idle=4]="Idle",s))(H||{});class Ie extends Ve{type="computed";priority;_hasValue=!1;_error=null;equalsFn;options;constructor(e,t={},i=Oe()){super(e,i),this.priority=t.priority??H.Normal,this.equalsFn=t.equals??Ee,this.options=t}getValue(){const e=ce();return e&&e.state!==g.Disposed&&(this.observers.add(e),e.sources.add(this)),(this.state===g.Dirty||!this._hasValue)&&(this.execute(),this._hasValue=!0),this.value}peek(){return(this.state===g.Dirty||!this._hasValue)&&(this.execute(),this._hasValue=!0),this.value}removeObserver(e){this.observers.delete(e),this.options.releaseOnNoObservers===!0&&this.observers.size===0&&e.state===g.Disposed&&this.releaseSources()}releaseSources(){for(const e of this.sources)"removeObserver"in e&&e.removeObserver(this);this.sources.clear(),this._hasValue=!1,this.state=g.Dirty}execute(){const e=this._hasValue?this.value:void 0,t=super.execute();if(!this._hasValue||!this.equalsFn(e,t))for(const i of this.observers)i.state!==g.Disposed&&(i.state=g.Dirty,"execute"in i&&typeof i.execute=="function"&&queueMicrotask(()=>{i.state===g.Dirty&&i.execute()}));return t}notify(){this.execute()}cleanup(){for(const e of this.sources)"removeObserver"in e&&e.removeObserver(this);this.sources.clear();for(const e of this.observers)e.sources.delete(this);this.observers.clear(),this._hasValue=!1,this._error=null,this.state=g.Disposed}dispose(){this.cleanup(),super.dispose()}[Symbol.for("tachui.debug")](){return{id:this.id,type:this.type,value:this._hasValue?this.value:void 0,hasValue:this._hasValue,error:this._error?.message,state:this.state,sourceCount:this.sources.size,observerCount:this.observers.size,priority:H[this.priority],debugName:this.options.debugName,equalsFn:this.equalsFn.name||"anonymous"}}toString(){return`Computed(${this.options.debugName||this.id}): ${this._hasValue?this.value:"no value"}`}}function Te(s,e){const t=new Ie(s,e),i=t.getValue.bind(t);return i.peek=t.peek.bind(t),Object.defineProperty(i,Symbol.for("tachui.computed"),{value:t,enumerable:!1}),i}let je=0;class Pe{id;observers=new Set;_value;constructor(e){this.id=++je,this._value=e}getValue(){const e=ce();return e&&e.state!==g.Disposed&&(this.observers.add(e),e.sources.add(this)),this._value}peek(){return this._value}set(e){const t=typeof e=="function"?e(this._value):e;return t!==this._value&&(this._value=t,this.notify()),t}notify(){for(const e of this.observers)e.state!==g.Disposed&&(e.state=g.Dirty,De(e))}removeObserver(e){this.observers.delete(e)}[Symbol.for("tachui.debug")](){return{id:this.id,value:this._value,observerCount:this.observers.size,type:"Signal"}}}const z=new Set;let N=!1;function De(s){z.add(s),N||queueMicrotask(_e)}function _e(){if(!N){N=!0;try{for(;z.size>0;){const s=Array.from(z).sort((e,t)=>e.id-t.id);z.clear();for(const e of s)e.state===g.Dirty&&e.execute()}}finally{N=!1}}}function ze(s){const e=new Pe(s),t=e.getValue.bind(e);t.peek=e.peek.bind(e);const i=e.set.bind(e);return Object.defineProperty(t,Symbol.for("tachui.signal"),{value:e,enumerable:!1}),[t,i]}const[Ne,Ct]=ze("light");Te(()=>{const s=Ne();return s==="system"?qe():s});function qe(){return typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}process.env.NODE_ENV,process.env.NODE_ENV;process.env.NODE_ENV==="development"&&console.log("📤 Created RegistryAdapter for globalModifierRegistry",{registryId:Q.globalModifierRegistry.instanceId,currentSize:Q.globalModifierRegistry.list().length});const Le="0.8.10-alpha.0",Ae=Le,re=new WeakSet,se=new WeakMap,Qe={name:"@tachui/core",version:Ae,author:"TachUI Team",verified:!0};function He(s){re.has(s)||(s.setFeatureFlags({metadataRegistration:!0}),re.add(s))}function We(s,e){let t=se.get(s);t||(t=new Set,se.set(s,t)),!t.has(e.name)&&(s.registerPlugin(e),t.add(e.name))}function Fe(s,e,t,i=Q.globalModifierRegistry,r=Qe){He(i),We(i,r),i.has(s)||i.register(s,e),i.getMetadata(s)||i.registerMetadata({...t,name:s,plugin:r.name})}const Ge="0.8.10-alpha.0",Ue=Ge,U={base:"0px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};function S(s){return typeof s=="object"&&s!==null&&!Array.isArray(s)&&Object.keys(s).some(e=>["base","sm","md","lg","xl","2xl"].includes(e))}function W(s){return["base","sm","md","lg","xl","2xl"].includes(s)}let P={...U};const[de,ne]=u.createSignal("base"),[ue,Ke]=u.createSignal({width:0,height:0});function Ze(s){it(s),P={...U,...s},T(),typeof window<"u"&&window.addEventListener("resize",T)}function V(){return{...P}}function x(){return de}function Ye(){return ue}function Xe(){typeof window>"u"||(A(),T(),window.addEventListener("resize",()=>{A(),T()}),window.addEventListener("orientationchange",()=>{setTimeout(()=>{A(),T()},100)}))}function w(){const s=de(),e=ue();return{current:s,width:e.width,height:e.height,isAbove:t=>F(s,t),isBelow:t=>G(s,t),isBetween:(t,i)=>F(s,t)&&G(s,i),matches:t=>window.matchMedia(t).matches}}function q(s){const e=P[s];return e.endsWith("px")?parseInt(e,10):e.endsWith("em")||e.endsWith("rem")?parseInt(e,10)*16:parseInt(e,10)||0}function b(s){return["base","sm","md","lg","xl","2xl"].indexOf(s)}function F(s,e){return b(s)>b(e)}function G(s,e){return b(s)<b(e)}function le(s){return s==="base"?"":`(min-width: ${P[s]})`}function Je(s,e){const t=[];if(s!=="base"&&t.push(`(min-width: ${P[s]})`),e&&e!=="2xl"){const i=["sm","md","lg","xl","2xl"],r=i.indexOf(e);if(r>=0&&r<i.length-1){const o=i[r+1],n=`${q(o)-1}px`;t.push(`(max-width: ${n})`)}}return t.length>0?t.join(" and "):""}function D(){return["base","sm","md","lg","xl","2xl"]}function et(s){const e=D(),t=e.indexOf(s);return t>=0?e.slice(t+1):[]}function tt(s){const e=D(),t=e.indexOf(s);return t>0?e.slice(0,t):[]}function T(){if(typeof window>"u")return;const s=window.innerWidth,e=D().reverse();for(const t of e)if(t==="base"||s>=q(t)){ne(t);return}ne("base")}function A(){typeof window<"u"&&Ke({width:window.innerWidth,height:window.innerHeight})}function it(s){for(const[t,i]of Object.entries(s)){if(!W(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(s).filter(W).sort((t,i)=>b(t)-b(i));for(let t=1;t<e.length;t++){const i=e[t-1],r=e[t],o=s[i],n=s[r];if(q(i)>=parseInt(n,10))throw new Error(`Breakpoint "${r}" (${n}) must be larger than "${i}" (${o})`)}}const rt={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 K{options;constructor(e){this.options={generateMinified:!1,includeComments:!0,optimizeOutput:!0,mobileFirst:!0,...e}}generateResponsiveCSS(e){const t=[],i=[],r={};let o=!1;for(const[n,a]of Object.entries(e))if(S(a)){o=!0;const c=this.generatePropertyMediaQueries(n,a);t.push(...c.mediaQueries),c.baseStyles&&Object.assign(r,c.baseStyles)}else r[this.toCSSPropertyName(n)]=this.formatCSSValue(n,a);return i.push(...this.generateCSSRules(t,r)),{cssRules:i,mediaQueries:t,fallbackStyles:r,hasResponsiveStyles:o}}generatePropertyMediaQueries(e,t){const i=[],r={},o=D();for(const n of o){const a=t[n];if(a===void 0)continue;const c=this.toCSSPropertyName(e),d=this.formatCSSValue(e,a);if(n==="base")r[c]=d;else{const p=le(n),h={[c]:d};i.push({breakpoint:n,query:p,styles:h,selector:this.options.selector})}}return{mediaQueries:i,baseStyles:Object.keys(r).length>0?r: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 r=this.groupQueriesByMediaQuery(e);for(const[o,n]of Object.entries(r)){if(o==="")continue;const a={};for(const d of n)Object.assign(a,d.styles);const c=this.generateMediaQueryRule(o,this.options.selector,a);i.push(c)}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:r}=this.options,o=i?"":" ",n=i?"":`
|
|
2
2
|
`,a=i?"":" ";let c=`${e}${a}{${n}`;for(const[d,p]of Object.entries(t))c+=`${o}${d}:${a}${p};${n}`;return c+=`}${n}`,r&&!i&&(c=`/* Base styles (mobile-first) */${n}${c}`),c}generateMediaQueryRule(e,t,i){const{generateMinified:r,includeComments:o}=this.options,n=r?"":" ",a=r?"":" ",c=r?"":`
|
|
3
3
|
`,d=r?"":" ";let p=`@media ${e}${d}{${c}`;p+=`${n}${t}${d}{${c}`;for(const[h,m]of Object.entries(i))p+=`${a}${h}:${d}${m};${c}`;return p+=`${n}}${c}`,p+=`}${c}`,o&&!r&&(p=`/* ${this.getBreakpointFromQuery(e)} styles */${c}${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"],r=this.toCSSProperty(e);if(i.includes(r))return this.addImportantIfNeeded(e,t.toString());if(["width","height","min-width","max-width","min-height","max-height","padding","margin","border-width","border-radius","top","right","bottom","left","font-size","letter-spacing","text-indent"].some(n=>r.includes(n)))return this.addImportantIfNeeded(e,`${t}px`)}return this.addImportantIfNeeded(e,t.toString())}addImportantIfNeeded(e,t){const i=["flexDirection","flex-direction","justifyContent","justify-content","alignItems","align-items","display"],r=this.toCSSProperty(e);return i.includes(e)||i.includes(r)?`${t} !important`:t}toCSSPropertyName(e){return this.toCSSProperty(e)}getBreakpointFromQuery(e){const t=V();for(const[i,r]of Object.entries(t))if(e.includes(r))return i;return"custom"}}function st(s,e,t,i){if(!S(t)){const a=e.replace(/[A-Z]/g,d=>`-${d.toLowerCase()}`),c=typeof t=="number"?`${t}px`:t.toString();return[`${s} { ${a}: ${c}; }`]}const r=new K({selector:s,...i}),o={[e]:t};return r.generateResponsiveCSS(o).cssRules}function nt(s,e,t){const{generateMinified:i=!1}=t||{},r=i?"":" ",o=i?"":`
|
|
4
4
|
`,n=i?"":" ";let a=`@media ${e.query}${n}{${o}`;a+=`${r}${s}${n}{${o}`;for(const[c,d]of Object.entries(e.styles)){const p=c.replace(/[A-Z]/g,m=>`-${m.toLowerCase()}`),h=typeof d=="number"?`${d}px`:d.toString();a+=`${r}${r}${p}:${n}${h};${o}`}return a+=`${r}}${o}`,a+=`}${o}`,a}class Z{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(r){console.warn("Failed to inject CSS rule:",i,r)}}static clearCSS(){if(this.styleSheet){for(;this.styleSheet.cssRules.length>0;)this.styleSheet.deleteRule(0);this.injectedRules.clear()}}static hasRule(e){return this.injectedRules.has(e)}}class ot{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 k=new ot;class at{static BATCH_SIZE=50;static ruleQueue=[];static flushTimer=null;static generateOptimizedCSS(e,t,i={}){const{minify:r=process.env.NODE_ENV==="production",batch:o=!0,deduplicate:n=!0}=i,a=this.createCacheKey(e,t,{minify:r});if(n){const d=k.get(a);if(d)return d}const c=this.generateCSS(e,t,{minify:r});return n&&k.set(a,c),o&&c.trim()?(this.addToBatch(c),""):c}static createCacheKey(e,t,i){return JSON.stringify({selector:e,config:t,options:i})}static generateCSS(e,t,i){const{minify:r=!1}=i,o=r?"":" ",n=r?"":`
|
|
5
|
-
`,a=r?"":" ";let c="";const d=new Set,p=this.extractBaseStyles(t);Object.keys(p).length>0&&(c+=`${e}${a}{${n}`,c+=this.generateProperties(p,o,n,a),c+=`}${n}`);for(const[h,m]of Object.entries(t))if(typeof m=="object"&&m!==null)for(const[y,C]of Object.entries(m)){if(y==="base")continue;const M=this.getMediaQuery(y),E=`${M}:${h}`;d.has(E)||(c+=`@media ${M}${a}{${n}`,c+=`${o}${e}${a}{${n}`,c+=`${o}${o}${this.propertyToCSS(h)}:${a}${this.valueToCSS(C)};${n}`,c+=`${o}}${n}`,c+=`}${n}`,d.add(E))}return c}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,r]of Object.entries(e))typeof r!="object"||r===null?t[i]=r:"base"in r&&(t[i]=r.base);return t}static generateProperties(e,t,i,r){let o="";for(const[n,a]of Object.entries(e))a!==void 0&&(o+=`${t}${this.propertyToCSS(n)}:${r}${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:k.getStats(),batch:{queueSize:this.ruleQueue.length,batchSize:this.BATCH_SIZE}}}static reset(){k.clear(),this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null)}}class j{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 r=[...i].sort((n,a)=>n-a),o=i.reduce((n,a)=>n+a,0)/i.length;e[t]={count:i.length,average:o,min:r[0],max:r[r.length-1],p50:r[Math.floor(r.length*.5)],p95:r[Math.floor(r.length*.95)],p99:r[Math.floor(r.length*.99)]}}return e}static reset(){this.measurements.clear()}}const Y=250;class
|
|
6
|
-
`,o=e?"":" ";let n=`@media ${this.query}${o}{${r}`;n+=`${t}${this.elementSelector}${o}{${r}`;for(const[a,c]of Object.entries(this.styles)){const d=a.replace(/[A-Z]/g,h=>`-${h.toLowerCase()}`),p=typeof c=="number"?`${c}px`:c.toString();n+=`${i}${d}:${o}${p};${r}`}n+=`${t}}${r}`,n+=`}${r}`,Z.injectCSS([n])}generateUniqueSelector(e){return`.${`tachui-mq-${Math.random().toString(36).substr(2,9)}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}}function R(s,e){return new pe(s,e)}function l(s,e){const t={[s]:e};return new N(t)}function X(s){const e={};return s.direction&&(e.flexDirection=s.direction),s.wrap&&(e.flexWrap=s.wrap),s.justify&&(e.justifyContent=s.justify),s.align&&(e.alignItems=s.align),s.gap&&(e.gap=s.gap),new N(e)}class J{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 r=t.baseBuilder[i];return typeof r=="function"?(...o)=>{const n=r.apply(t.baseBuilder,o);return n===t.baseBuilder?t:n}:r}})}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=R(e,t);return this.baseBuilder.addModifier(i),this}orientation(e,t){const i=`(orientation: ${e})`,r=R(i,t);return this.baseBuilder.addModifier(r),this}colorScheme(e,t){const i=`(prefers-color-scheme: ${e})`,r=R(i,t);return this.baseBuilder.addModifier(r),this}reducedMotion(e){const i=R("(prefers-reduced-motion: reduce)",e);return this.baseBuilder.addModifier(i),this}highContrast(e){const i=R("(prefers-contrast: high)",e);return this.baseBuilder.addModifier(i),this}touchDevice(e){const i=R("(pointer: coarse)",e);return this.baseBuilder.addModifier(i),this}mouseDevice(e){const i=R("(pointer: fine)",e);return this.baseBuilder.addModifier(i),this}retina(e){const i=R("(min-resolution: 2dppx)",e);return this.baseBuilder.addModifier(i),this}print(e){const i=R("print",e);return this.baseBuilder.addModifier(i),this}responsiveLayout(e){const t=X(e);return this.baseBuilder.addModifier(t),this}responsiveWidth(e){const t=l("width",e);return this.baseBuilder.addModifier(t),this}responsiveHeight(e){const t=l("height",e);return this.baseBuilder.addModifier(t),this}responsiveSize(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsivePadding(e){if(S(e)||typeof e=="string"||typeof e=="number"){const t=l("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 r=f(t);this.baseBuilder.addModifier(r)}return this}responsiveMargin(e){if(S(e)||typeof e=="string"||typeof e=="number"){const t=l("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 r=f(t);this.baseBuilder.addModifier(r)}return this}responsiveFont(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsiveFontSize(e){const t=l("fontSize",e);return this.baseBuilder.addModifier(t),this}responsiveTextAlign(e){const t=l("textAlign",e);return this.baseBuilder.addModifier(t),this}get base(){return new O("base",this,this.baseBuilder)}get sm(){return new O("sm",this,this.baseBuilder)}get md(){return new O("md",this,this.baseBuilder)}get lg(){return new O("lg",this,this.baseBuilder)}get xl(){return new O("xl",this,this.baseBuilder)}get"2xl"(){return new O("2xl",this,this.baseBuilder)}}class O{constructor(e,t,i){this.breakpoint=e,this.parentBuilder=t,this.baseBuilder=i}width(e){const t={[this.breakpoint]:e},i=l("width",t);return this.parentBuilder.addModifier(i),this.parentBuilder}height(e){const t={[this.breakpoint]:e},i=l("height",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minWidth(e){const t={[this.breakpoint]:e},i=l("minWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxWidth(e){const t={[this.breakpoint]:e},i=l("maxWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minHeight(e){const t={[this.breakpoint]:e},i=l("minHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxHeight(e){const t={[this.breakpoint]:e},i=l("maxHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}padding(e){const t={[this.breakpoint]:e},i=l("padding",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingHorizontal(e){const t={[this.breakpoint]:e},i=l("paddingLeft",t),r=l("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}paddingVertical(e){const t={[this.breakpoint]:e},i=l("paddingTop",t),r=l("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}paddingTop(e){const t={[this.breakpoint]:e},i=l("paddingTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingBottom(e){const t={[this.breakpoint]:e},i=l("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingLeft(e){const t={[this.breakpoint]:e},i=l("paddingLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingRight(e){const t={[this.breakpoint]:e},i=l("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}margin(e){const t={[this.breakpoint]:e},i=l("margin",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginHorizontal(e){const t={[this.breakpoint]:e},i=l("marginLeft",t),r=l("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}marginVertical(e){const t={[this.breakpoint]:e},i=l("marginTop",t),r=l("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}marginTop(e){const t={[this.breakpoint]:e},i=l("marginTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginBottom(e){const t={[this.breakpoint]:e},i=l("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginLeft(e){const t={[this.breakpoint]:e},i=l("marginLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginRight(e){const t={[this.breakpoint]:e},i=l("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}fontSize(e){const t={[this.breakpoint]:e},i=l("fontSize",t);return this.parentBuilder.addModifier(i),this.parentBuilder}textAlign(e){const t={[this.breakpoint]:e},i=l("textAlign",t);return this.parentBuilder.addModifier(i),this.parentBuilder}display(e){const t={[this.breakpoint]:e},i=l("display",t);return this.parentBuilder.addModifier(i),this.parentBuilder}flexDirection(e){const t={[this.breakpoint]:e},i=l("flexDirection",t);return this.parentBuilder.addModifier(i),this.parentBuilder}justifyContent(e){const t={[this.breakpoint]:e},i=l("justifyContent",t);return this.parentBuilder.addModifier(i),this.parentBuilder}alignItems(e){const t={[this.breakpoint]:e},i=l("alignItems",t);return this.parentBuilder.addModifier(i),this.parentBuilder}backgroundColor(e){const t={[this.breakpoint]:e},i=l("backgroundColor",t);return this.parentBuilder.addModifier(i),this.parentBuilder}color(e){const t={[this.breakpoint]:e},i=l("color",t);return this.parentBuilder.addModifier(i),this.parentBuilder}opacity(e){const t={[this.breakpoint]:e},i=l("opacity",t);return this.parentBuilder.addModifier(i),this.parentBuilder}}function ct(s){return new J(s)}function dt(s){return new J(s)}function ut(){const s=x(),e=u.createComputed(()=>w());return{current:s,context:e,isAbove:n=>u.createComputed(()=>b(s())>b(n)),isBelow:n=>u.createComputed(()=>b(s())<b(n)),isBetween:(n,a)=>u.createComputed(()=>{const c=b(s()),d=b(n),p=b(a);return c>=d&&c<=p}),matches:n=>{const[a,c]=u.createSignal(!1);if(typeof window<"u"){const d=window.matchMedia(n);c(d.matches);const p=h=>c(h.matches);d.addEventListener("change",p)}return a}}}function lt(s){const[e,t]=u.createSignal(!1);if(typeof window<"u"){const i=window.matchMedia(s);t(i.matches);const r=o=>t(o.matches);i.addEventListener("change",r)}return e}function pt(s){const e=x();return u.createComputed(()=>{if(!S(s))return s;const t=e(),i=s,r=["base","sm","md","lg","xl","2xl"],o=r.indexOf(t);for(let n=o;n>=0;n--){const a=r[n];if(i[a]!==void 0)return i[a]}for(const n of r)if(i[n]!==void 0)return i[n];throw new Error("No responsive value found for any breakpoint")})}function ht(s,e){if(!S(s))return s;const t=s,i=e||x()(),r=["base","sm","md","lg","xl","2xl"],o=r.indexOf(i);for(let n=o;n>=0;n--){const a=r[n];if(t[a]!==void 0)return t[a]}for(const n of r)if(t[n]!==void 0)return t[n];throw new Error("No responsive value found for any breakpoint")}function ft(s,e){const t={};for(const[i,r]of Object.entries(e))if(S(r)){const o=r;for(const[n,a]of Object.entries(o))if(a!==void 0){const c=n==="base"?`--${s}-${i}`:`--${s}-${i}-${n}`;t[c]=a.toString()}}else t[`--${s}-${i}`]=r.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:s=>`(min-width: ${s}${typeof s=="number"?"px":""})`,maxWidth:s=>`(max-width: ${s}${typeof s=="number"?"px":""})`,between:(s,e)=>`(min-width: ${s}${typeof s=="number"?"px":""}) and (max-width: ${e}${typeof e=="number"?"px":""})`,minHeight:s=>`(min-height: ${s}${typeof s=="number"?"px":""})`,maxHeight:s=>`(max-height: ${s}${typeof s=="number"?"px":""})`,heightBetween:(s,e)=>`(min-height: ${s}${typeof s=="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:s=>`(aspect-ratio: ${s})`,minAspectRatio:s=>`(min-aspect-ratio: ${s})`,maxAspectRatio:s=>`(max-aspect-ratio: ${s})`,lowRes:"(max-resolution: 120dpi)",standardRes:"(min-resolution: 120dpi) and (max-resolution: 192dpi)",highRes:"(min-resolution: 192dpi)",customResolution:s=>`(min-resolution: ${s}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 mt(...s){return s.filter(e=>e).join(" and ")}function gt(...s){return s.filter(e=>e).join(", ")}function vt(s){const e=x();return u.createComputed(()=>{const t=e();return!(s.hideOn&&s.hideOn.includes(t)||s.showOn&&!s.showOn.includes(t))})}function he(){if(typeof window>"u")return;const s=w();console.group("🔍 tachUI Responsive State"),console.log("Current breakpoint:",s.current),console.log("Viewport dimensions:",`${s.width}x${s.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 bt(s={}){if(typeof window>"u"||process.env.NODE_ENV==="production")return;const{position:e="top-right",showDimensions:t=!0,showBreakpoint:i=!0}=s,r=document.createElement("div");r.id="tachui-responsive-debug",r.style.cssText=`
|
|
5
|
+
`,a=r?"":" ";let c="";const d=new Set,p=this.extractBaseStyles(t);Object.keys(p).length>0&&(c+=`${e}${a}{${n}`,c+=this.generateProperties(p,o,n,a),c+=`}${n}`);for(const[h,m]of Object.entries(t))if(typeof m=="object"&&m!==null)for(const[y,C]of Object.entries(m)){if(y==="base")continue;const M=this.getMediaQuery(y),E=`${M}:${h}`;d.has(E)||(c+=`@media ${M}${a}{${n}`,c+=`${o}${e}${a}{${n}`,c+=`${o}${o}${this.propertyToCSS(h)}:${a}${this.valueToCSS(C)};${n}`,c+=`${o}}${n}`,c+=`}${n}`,d.add(E))}return c}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,r]of Object.entries(e))typeof r!="object"||r===null?t[i]=r:"base"in r&&(t[i]=r.base);return t}static generateProperties(e,t,i,r){let o="";for(const[n,a]of Object.entries(e))a!==void 0&&(o+=`${t}${this.propertyToCSS(n)}:${r}${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:k.getStats(),batch:{queueSize:this.ruleQueue.length,batchSize:this.BATCH_SIZE}}}static reset(){k.clear(),this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null)}}class j{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 r=[...i].sort((n,a)=>n-a),o=i.reduce((n,a)=>n+a,0)/i.length;e[t]={count:i.length,average:o,min:r[0],max:r[r.length-1],p50:r[Math.floor(r.length*.5)],p95:r[Math.floor(r.length*.95)],p99:r[Math.floor(r.length*.99)]}}return e}static reset(){this.measurements.clear()}}const Y=250;class L extends ae.BaseModifier{type="responsive";priority=Y;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=j.startMeasurement("css-generation");try{const t=new K({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&&Z.injectCSS(this.generatedCSS.cssRules)}finally{e()}}setupReactiveUpdates(){this.hasReactiveValues(this.config)&&u.createEffect(()=>{this.trackReactiveDependencies(this.config);const t=this.resolveReactiveConfig(this.config);this.updateConfig(t)})}trackReactiveDependencies(e){let t=!1;for(const[i,r]of Object.entries(e))if(this.isReactiveValue(r))u.isSignal(r)||u.isComputed(r)?r():this.isAsset(r)&&(t=!0,r.resolve());else if(S(r))for(const[o,n]of Object.entries(r))this.isReactiveValue(n)&&(u.isSignal(n)||u.isComputed(n)?n():this.isAsset(n)&&(t=!0,n.resolve()));t&&u.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(S(t)){for(const i of Object.values(t))if(this.isReactiveValue(i))return!0}}return!1}isReactiveValue(e){return!!(u.isSignal(e)||u.isComputed(e)||this.isAsset(e))}isAsset(e){return e!=null&&typeof e=="object"&&"resolve"in e&&typeof e.resolve=="function"}resolveReactiveConfig(e){const t={};for(const[i,r]of Object.entries(e))if(this.isReactiveValue(r))u.isSignal(r)||u.isComputed(r)?t[i]=r():this.isAsset(r)&&(t[i]=r.resolve());else if(S(r)){const o={};for(const[n,a]of Object.entries(r))this.isReactiveValue(a)?u.isSignal(a)||u.isComputed(a)?o[n]=a():this.isAsset(a)&&(o[n]=a.resolve()):o[n]=a;t[i]=o}else t[i]=r;return t}getGeneratedCSS(){return this.generatedCSS}getConfig(){return this.config}}function f(s){return new L(s)}class pe extends ae.BaseModifier{type="media-query";priority=Y+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?"":" ",r=e?"":`
|
|
6
|
+
`,o=e?"":" ";let n=`@media ${this.query}${o}{${r}`;n+=`${t}${this.elementSelector}${o}{${r}`;for(const[a,c]of Object.entries(this.styles)){const d=a.replace(/[A-Z]/g,h=>`-${h.toLowerCase()}`),p=typeof c=="number"?`${c}px`:c.toString();n+=`${i}${d}:${o}${p};${r}`}n+=`${t}}${r}`,n+=`}${r}`,Z.injectCSS([n])}generateUniqueSelector(e){return`.${`tachui-mq-${Math.random().toString(36).substr(2,9)}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}}function R(s,e){return new pe(s,e)}function l(s,e){const t={[s]:e};return new L(t)}function X(s){const e={};return s.direction&&(e.flexDirection=s.direction),s.wrap&&(e.flexWrap=s.wrap),s.justify&&(e.justifyContent=s.justify),s.align&&(e.alignItems=s.align),s.gap&&(e.gap=s.gap),new L(e)}class J{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 r=t.baseBuilder[i];return typeof r=="function"?(...o)=>{const n=r.apply(t.baseBuilder,o);return n===t.baseBuilder?t:n}:r}})}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=R(e,t);return this.baseBuilder.addModifier(i),this}orientation(e,t){const i=`(orientation: ${e})`,r=R(i,t);return this.baseBuilder.addModifier(r),this}colorScheme(e,t){const i=`(prefers-color-scheme: ${e})`,r=R(i,t);return this.baseBuilder.addModifier(r),this}reducedMotion(e){const i=R("(prefers-reduced-motion: reduce)",e);return this.baseBuilder.addModifier(i),this}highContrast(e){const i=R("(prefers-contrast: high)",e);return this.baseBuilder.addModifier(i),this}touchDevice(e){const i=R("(pointer: coarse)",e);return this.baseBuilder.addModifier(i),this}mouseDevice(e){const i=R("(pointer: fine)",e);return this.baseBuilder.addModifier(i),this}retina(e){const i=R("(min-resolution: 2dppx)",e);return this.baseBuilder.addModifier(i),this}print(e){const i=R("print",e);return this.baseBuilder.addModifier(i),this}responsiveLayout(e){const t=X(e);return this.baseBuilder.addModifier(t),this}responsiveWidth(e){const t=l("width",e);return this.baseBuilder.addModifier(t),this}responsiveHeight(e){const t=l("height",e);return this.baseBuilder.addModifier(t),this}responsiveSize(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsivePadding(e){if(S(e)||typeof e=="string"||typeof e=="number"){const t=l("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 r=f(t);this.baseBuilder.addModifier(r)}return this}responsiveMargin(e){if(S(e)||typeof e=="string"||typeof e=="number"){const t=l("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 r=f(t);this.baseBuilder.addModifier(r)}return this}responsiveFont(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsiveFontSize(e){const t=l("fontSize",e);return this.baseBuilder.addModifier(t),this}responsiveTextAlign(e){const t=l("textAlign",e);return this.baseBuilder.addModifier(t),this}get base(){return new O("base",this,this.baseBuilder)}get sm(){return new O("sm",this,this.baseBuilder)}get md(){return new O("md",this,this.baseBuilder)}get lg(){return new O("lg",this,this.baseBuilder)}get xl(){return new O("xl",this,this.baseBuilder)}get"2xl"(){return new O("2xl",this,this.baseBuilder)}}class O{constructor(e,t,i){this.breakpoint=e,this.parentBuilder=t,this.baseBuilder=i}width(e){const t={[this.breakpoint]:e},i=l("width",t);return this.parentBuilder.addModifier(i),this.parentBuilder}height(e){const t={[this.breakpoint]:e},i=l("height",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minWidth(e){const t={[this.breakpoint]:e},i=l("minWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxWidth(e){const t={[this.breakpoint]:e},i=l("maxWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minHeight(e){const t={[this.breakpoint]:e},i=l("minHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxHeight(e){const t={[this.breakpoint]:e},i=l("maxHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}padding(e){const t={[this.breakpoint]:e},i=l("padding",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingHorizontal(e){const t={[this.breakpoint]:e},i=l("paddingLeft",t),r=l("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}paddingVertical(e){const t={[this.breakpoint]:e},i=l("paddingTop",t),r=l("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}paddingTop(e){const t={[this.breakpoint]:e},i=l("paddingTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingBottom(e){const t={[this.breakpoint]:e},i=l("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingLeft(e){const t={[this.breakpoint]:e},i=l("paddingLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingRight(e){const t={[this.breakpoint]:e},i=l("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}margin(e){const t={[this.breakpoint]:e},i=l("margin",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginHorizontal(e){const t={[this.breakpoint]:e},i=l("marginLeft",t),r=l("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}marginVertical(e){const t={[this.breakpoint]:e},i=l("marginTop",t),r=l("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}marginTop(e){const t={[this.breakpoint]:e},i=l("marginTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginBottom(e){const t={[this.breakpoint]:e},i=l("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginLeft(e){const t={[this.breakpoint]:e},i=l("marginLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginRight(e){const t={[this.breakpoint]:e},i=l("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}fontSize(e){const t={[this.breakpoint]:e},i=l("fontSize",t);return this.parentBuilder.addModifier(i),this.parentBuilder}textAlign(e){const t={[this.breakpoint]:e},i=l("textAlign",t);return this.parentBuilder.addModifier(i),this.parentBuilder}display(e){const t={[this.breakpoint]:e},i=l("display",t);return this.parentBuilder.addModifier(i),this.parentBuilder}flexDirection(e){const t={[this.breakpoint]:e},i=l("flexDirection",t);return this.parentBuilder.addModifier(i),this.parentBuilder}justifyContent(e){const t={[this.breakpoint]:e},i=l("justifyContent",t);return this.parentBuilder.addModifier(i),this.parentBuilder}alignItems(e){const t={[this.breakpoint]:e},i=l("alignItems",t);return this.parentBuilder.addModifier(i),this.parentBuilder}backgroundColor(e){const t={[this.breakpoint]:e},i=l("backgroundColor",t);return this.parentBuilder.addModifier(i),this.parentBuilder}color(e){const t={[this.breakpoint]:e},i=l("color",t);return this.parentBuilder.addModifier(i),this.parentBuilder}opacity(e){const t={[this.breakpoint]:e},i=l("opacity",t);return this.parentBuilder.addModifier(i),this.parentBuilder}}function ct(s){return new J(s)}function dt(s){return new J(s)}function ut(){const s=x(),e=u.createComputed(()=>w());return{current:s,context:e,isAbove:n=>u.createComputed(()=>b(s())>b(n)),isBelow:n=>u.createComputed(()=>b(s())<b(n)),isBetween:(n,a)=>u.createComputed(()=>{const c=b(s()),d=b(n),p=b(a);return c>=d&&c<=p}),matches:n=>{const[a,c]=u.createSignal(!1);if(typeof window<"u"){const d=window.matchMedia(n);c(d.matches);const p=h=>c(h.matches);d.addEventListener("change",p)}return a}}}function lt(s){const[e,t]=u.createSignal(!1);if(typeof window<"u"){const i=window.matchMedia(s);t(i.matches);const r=o=>t(o.matches);i.addEventListener("change",r)}return e}function pt(s){const e=x();return u.createComputed(()=>{if(!S(s))return s;const t=e(),i=s,r=["base","sm","md","lg","xl","2xl"],o=r.indexOf(t);for(let n=o;n>=0;n--){const a=r[n];if(i[a]!==void 0)return i[a]}for(const n of r)if(i[n]!==void 0)return i[n];throw new Error("No responsive value found for any breakpoint")})}function ht(s,e){if(!S(s))return s;const t=s,i=e||x()(),r=["base","sm","md","lg","xl","2xl"],o=r.indexOf(i);for(let n=o;n>=0;n--){const a=r[n];if(t[a]!==void 0)return t[a]}for(const n of r)if(t[n]!==void 0)return t[n];throw new Error("No responsive value found for any breakpoint")}function ft(s,e){const t={};for(const[i,r]of Object.entries(e))if(S(r)){const o=r;for(const[n,a]of Object.entries(o))if(a!==void 0){const c=n==="base"?`--${s}-${i}`:`--${s}-${i}-${n}`;t[c]=a.toString()}}else t[`--${s}-${i}`]=r.toString();return t}const v={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:s=>`(min-width: ${s}${typeof s=="number"?"px":""})`,maxWidth:s=>`(max-width: ${s}${typeof s=="number"?"px":""})`,between:(s,e)=>`(min-width: ${s}${typeof s=="number"?"px":""}) and (max-width: ${e}${typeof e=="number"?"px":""})`,minHeight:s=>`(min-height: ${s}${typeof s=="number"?"px":""})`,maxHeight:s=>`(max-height: ${s}${typeof s=="number"?"px":""})`,heightBetween:(s,e)=>`(min-height: ${s}${typeof s=="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:s=>`(aspect-ratio: ${s})`,minAspectRatio:s=>`(min-aspect-ratio: ${s})`,maxAspectRatio:s=>`(max-aspect-ratio: ${s})`,lowRes:"(max-resolution: 120dpi)",standardRes:"(min-resolution: 120dpi) and (max-resolution: 192dpi)",highRes:"(min-resolution: 192dpi)",customResolution:s=>`(min-resolution: ${s}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 mt(...s){return s.filter(e=>e).join(" and ")}function gt(...s){return s.filter(e=>e).join(", ")}function vt(s){const e=x();return u.createComputed(()=>{const t=e();return!(s.hideOn&&s.hideOn.includes(t)||s.showOn&&!s.showOn.includes(t))})}function he(){if(typeof window>"u")return;const s=w();console.group("🔍 tachUI Responsive State"),console.log("Current breakpoint:",s.current),console.log("Viewport dimensions:",`${s.width}x${s.height}`),console.log("Available breakpoints:",["base","sm","md","lg","xl","2xl"]);const e={Mobile:v.mobile,Tablet:v.tablet,Desktop:v.desktop,"Dark mode":v.darkMode,"Reduced motion":v.reducedMotion,"Can hover":v.canHover};console.log("Media query matches:");for(const[t,i]of Object.entries(e))console.log(` ${t}: ${window.matchMedia(i).matches}`);console.groupEnd()}function bt(s={}){if(typeof window>"u"||process.env.NODE_ENV==="production")return;const{position:e="top-right",showDimensions:t=!0,showBreakpoint:i=!0}=s,r=document.createElement("div");r.id="tachui-responsive-debug",r.style.cssText=`
|
|
7
7
|
position: fixed;
|
|
8
8
|
${e.includes("top")?"top: 10px":"bottom: 10px"};
|
|
9
9
|
${e.includes("right")?"right: 10px":"left: 10px"};
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
<div style="margin-bottom: 2px;">
|
|
64
64
|
${c}: ${d.average.toFixed(2)}ms avg
|
|
65
65
|
</div>
|
|
66
|
-
`}r+='<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';const o={Touch:
|
|
66
|
+
`}r+='<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';const o={Touch:v.touchDevice,Dark:v.darkMode,"Reduced Motion":v.reducedMotion,"High Contrast":v.highContrast};for(const[n,a]of Object.entries(o)){const c=window.matchMedia(a).matches;r+=`
|
|
67
67
|
<div style="color: ${c?"#66bb6a":"#666"}; margin-bottom: 2px;">
|
|
68
68
|
${c?"✓":"✗"} ${n}
|
|
69
69
|
</div>
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
z-index: 10001 !important;
|
|
93
93
|
font-family: monospace !important;
|
|
94
94
|
}
|
|
95
|
-
`,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=j.getStats(),t=k.getStats();this.log("debug","Performance Stats:",{cache:t,performance:e})},5e3)}static logResponsiveState(){if(!this.enabled)return;const e=w(),t=V();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:
|
|
95
|
+
`,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=j.getStats(),t=k.getStats();this.log("debug","Performance Stats:",{cache:t,performance:e})},5e3)}static logResponsiveState(){if(!this.enabled)return;const e=w(),t=V();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:v.mobile,Tablet:v.tablet,Desktop:v.desktop,"Touch Device":v.touchDevice,"Dark Mode":v.darkMode,"Reduced Motion":v.reducedMotion};console.log("Media Query Results:");for(const[r,o]of Object.entries(i))try{console.log(` ${r}: ${window.matchMedia(o).matches}`)}catch{console.log(` ${r}: Error testing query`)}}console.groupEnd()}static inspectResponsiveValue(e,t){if(!this.enabled)return;const i=x();if(console.group(`🔍 Responsive Value${t?` - ${t}`:""}`),S(e)){const r=e;console.log("Responsive object:",r);const o=["base","sm","md","lg","xl","2xl"],n=o.indexOf(i());let a;for(let c=n;c>=0;c--){const d=o[c];if(r[d]!==void 0){a=r[d],console.log(`Resolved value (${d}):`,a);break}}console.log("Defined breakpoints:");for(const[c,d]of Object.entries(r))if(d!==void 0){const p=c===i();console.log(` ${p?"→":" "} ${c}:`,d)}}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(r=>{this.log("debug",`Testing breakpoint ${r}:`,e)}),i}static exportConfiguration(){const e=w(),t=V(),i=j.getStats(),r=k.getStats(),o={};if(typeof window<"u"&&window.matchMedia){for(const[n,a]of Object.entries(v))if(typeof a=="string")try{o[n]=window.matchMedia(a).matches}catch{o[n]=!1}}return{breakpoints:t,currentContext:e,performance:{cache:r,timings:i},mediaQueries:o}}}function we(s,e){const t=x();return u.createComputed(()=>{const i=t(),r=S(s);let o,n={};if(r){const a=s;n=a;const c=["base","sm","md","lg","xl","2xl"],d=c.indexOf(i);for(let p=d;p>=0;p--){const h=c[p];if(a[h]!==void 0){o=a[h];break}}}else o=s,n={[i]:o};return $.enabled&&e&&$.inspectResponsiveValue(s,e),{resolvedValue:o,activeBreakpoint:i,allValues:n,isResponsive:r}})}class Ce{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"}];$.enabled&&$.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:$,inspector:we,compatibility:Ce,logState:()=>$.logResponsiveState(),export:()=>$.exportConfiguration()});const St={name:"@tachui/responsive",version:Ue,author:"TachUI Team",verified:!0},_=80,wt=[["responsive",f,{category:"layout",priority:_,signature:"(config: ResponsiveStyleConfig) => Modifier",description:"Applies responsive style mappings across configured breakpoints."}],["mediaQuery",R,{category:"layout",priority:_,signature:"(query: string, styles: Record<string, any>) => Modifier",description:"Attaches custom CSS rules for a media query to a component."}],["responsiveProperty",l,{category:"layout",priority:_,signature:"(property: string, value: ResponsiveValue<any>) => Modifier",description:"Creates a responsive modifier from a single style property/value map."}],["responsiveLayout",X,{category:"layout",priority:_,signature:"(config: ResponsiveLayoutConfig) => Modifier",description:"Configures responsive flexbox layout properties such as direction, wrap, and gap."}]];let oe=!1;function Re(s){const e=s?.registry,t=s?.plugin??St,i=s?.force===!0,r=!!(e||s?.plugin);!r&&oe&&!i||(wt.forEach(([o,n,a])=>{Fe(o,n,a,e,t)}),r||(oe=!0))}Re();exports.AdvancedBreakpointUtils=B;exports.BreakpointPresets=rt;exports.BrowserCompatibility=Ce;exports.CSSInjector=Z;exports.Container=me;exports.DEFAULT_BREAKPOINTS=U;exports.Flex=fe;exports.LayoutPatterns=yt;exports.MediaQueries=v;exports.MediaQueryModifier=pe;exports.OptimizedCSSGenerator=at;exports.RESPONSIVE_MODIFIER_PRIORITY=Y;exports.ResponsiveAdvanced=xt;exports.ResponsiveCSSGenerator=K;exports.ResponsiveContainerPatterns=me;exports.ResponsiveDataUtils=Se;exports.ResponsiveDevTools=$;exports.ResponsiveFlexPatterns=fe;exports.ResponsiveGrid=ee;exports.ResponsiveGridPatterns=ee;exports.ResponsiveHooks=ye;exports.ResponsiveModifier=L;exports.ResponsiveModifierBuilderImpl=J;exports.ResponsivePerformanceMonitor=j;exports.ResponsiveSpacingPatterns=ve;exports.ResponsiveTargeting=xe;exports.ResponsiveTypography=be;exports.ResponsiveTypographyPatterns=be;exports.ResponsiveVisibilityPatterns=ge;exports.Spacing=ve;exports.Visibility=ge;exports.breakpointToPixels=q;exports.combineMediaQueries=mt;exports.configureBreakpoints=Ze;exports.createBreakpointContext=w;exports.createMediaQueryModifier=R;exports.createResponsiveBuilder=dt;exports.createResponsiveCSSVariables=ft;exports.createResponsiveLayoutModifier=X;exports.createResponsiveModifier=f;exports.createResponsivePropertyModifier=l;exports.createResponsiveVisibility=vt;exports.cssRuleCache=k;exports.enableResponsiveDebugOverlay=bt;exports.generateCustomMediaQuery=nt;exports.generateMediaQuery=le;exports.generateRangeMediaQuery=Je;exports.generateResponsiveProperty=st;exports.getBreakpointIndex=b;exports.getBreakpointsAbove=et;exports.getBreakpointsBelow=tt;exports.getCurrentBreakpoint=x;exports.getCurrentBreakpointConfig=V;exports.getSortedBreakpoints=D;exports.getViewportDimensions=Ye;exports.initializeResponsiveSystem=Xe;exports.isBreakpointAbove=F;exports.isBreakpointBelow=G;exports.isResponsiveValue=S;exports.isValidBreakpointKey=W;exports.logResponsiveState=he;exports.orMediaQueries=gt;exports.registerResponsiveModifiers=Re;exports.resolveResponsiveValue=ht;exports.useBreakpoint=ut;exports.useMediaQuery=lt;exports.useResponsiveInspector=we;exports.useResponsiveValue=pt;exports.withResponsive=ct;
|
|
96
96
|
//# sourceMappingURL=index.js.map
|