@tachui/responsive 0.8.17 → 0.8.19

package/dist/index.mjs

@@ -1,38 +1,38 @@
-import { globalModifierRegistry as W } from "@tachui/registry";
-import { BaseModifier as se } from "@tachui/modifiers";
-import { createSignal as E, createEffect as V, isSignal as T, isComputed as j, getThemeSignal as me, createComputed as m, createMemo as ge } from "@tachui/core";
+import { globalModifierRegistry as F } from "@tachui/registry";
+import { BaseModifier as oe } from "@tachui/modifiers";
+import { createSignal as I, createEffect as V, isSignal as D, isComputed as P, getThemeSignal as ye, createComputed as m, createMemo as xe } from "@tachui/core";
 const g = {
   Clean: 0,
   Check: 1,
   Dirty: 2,
   Disposed: 3
 };
-let be = 0;
-const ve = Math.random().toString(36).substr(2, 6);
-let K = null, Z = null;
-const ye = /* @__PURE__ */ new Set();
-ye.add(ve);
-const D = {
+let we = 0;
+const Se = Math.random().toString(36).substr(2, 6);
+let X = null, J = null;
+const Ce = /* @__PURE__ */ new Set();
+Ce.add(Se);
+const _ = {
   get currentComputation() {
-    return K;
+    return X;
   },
   set currentComputation(s) {
-    K = s;
+    X = s;
   },
   get currentOwner() {
-    return Z;
+    return J;
   },
   set currentOwner(s) {
-    Z = s;
+    J = s;
   }
 };
-function ne() {
-  return D.currentComputation;
+function ae() {
+  return _.currentComputation;
 }
-function xe() {
-  return D.currentOwner;
+function $e() {
+  return _.currentOwner;
 }
-class we {
+class Be {
   id;
   owner;
   fn;
@@ -43,7 +43,7 @@ class we {
   state = g.Dirty;
   value = void 0;
   constructor(e, t = null) {
-    this.id = ++be, this.fn = e, this.owner = t, t && !t.disposed && t.sources.add(this);
+    this.id = ++we, this.fn = e, this.owner = t, t && !t.disposed && t.sources.add(this);
   }
   execute() {
     if (this.state === g.Disposed)
@@ -51,14 +51,14 @@ class we {
     for (const t of this.sources)
       t && typeof t == "object" && "removeObserver" in t && t.removeObserver(this);
     this.sources.clear();
-    const e = D.currentComputation;
-    D.currentComputation = this;
+    const e = _.currentComputation;
+    _.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 {
-      D.currentComputation = e;
+      _.currentComputation = e;
     }
   }
   dispose() {
@@ -74,23 +74,23 @@ class we {
   }
 }
 typeof globalThis.__DEV__ > "u" && (globalThis.__DEV__ = process.env.NODE_ENV !== "production");
-const Se = (s, e) => s === e;
-var F = /* @__PURE__ */ ((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))(F || {});
-class Ce extends we {
+const ke = (s, e) => s === e;
+var G = /* @__PURE__ */ ((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))(G || {});
+class Re extends Be {
   type = "computed";
   priority;
   _hasValue = !1;
   _error = null;
   equalsFn;
   options;
-  constructor(e, t = {}, i = xe()) {
-    super(e, i), this.priority = t.priority ?? F.Normal, this.equalsFn = t.equals ?? Se, this.options = t;
+  constructor(e, t = {}, i = $e()) {
+    super(e, i), this.priority = t.priority ?? G.Normal, this.equalsFn = t.equals ?? ke, this.options = t;
   }
   /**
    * Get the computed value, tracking dependency and lazily computing
    */
   getValue() {
-    const e = ne();
+    const e = ae();
     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;
   }
   /**
@@ -158,7 +158,7 @@ class Ce extends we {
       state: this.state,
       sourceCount: this.sources.size,
       observerCount: this.observers.size,
-      priority: F[this.priority],
+      priority: G[this.priority],
       debugName: this.options.debugName,
       equalsFn: this.equalsFn.name || "anonymous"
     };
@@ -167,26 +167,26 @@ class Ce extends we {
     return `Computed(${this.options.debugName || this.id}): ${this._hasValue ? this.value : "no value"}`;
   }
 }
-function $e(s, e) {
-  const t = new Ce(s, e), i = t.getValue.bind(t);
+function Me(s, e) {
+  const t = new Re(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 Be = 0;
-class ke {
+let Oe = 0;
+class Ve {
   id;
   observers = /* @__PURE__ */ new Set();
   _value;
   constructor(e) {
-    this.id = ++Be, this._value = e;
+    this.id = ++Oe, this._value = e;
   }
   /**
    * Get the current value and track dependency
    */
   getValue() {
-    const e = ne();
+    const e = ae();
     return e && e.state !== g.Disposed && (this.observers.add(e), e.sources.add(this)), this._value;
   }
   /**
@@ -207,7 +207,7 @@ class ke {
    */
   notify() {
     for (const e of this.observers)
-      e.state !== g.Disposed && (e.state = g.Dirty, Re(e));
+      e.state !== g.Disposed && (e.state = g.Dirty, Ee(e));
   }
   /**
    * Remove an observer (cleanup)
@@ -227,28 +227,28 @@ class ke {
     };
   }
 }
-const q = /* @__PURE__ */ new Set();
-let L = !1;
-function Re(s) {
-  q.add(s), L || queueMicrotask(Me);
+const N = /* @__PURE__ */ new Set();
+let q = !1;
+function Ee(s) {
+  N.add(s), q || queueMicrotask(Ie);
 }
-function Me() {
-  if (!L) {
-    L = !0;
+function Ie() {
+  if (!q) {
+    q = !0;
     try {
-      for (; q.size > 0; ) {
-        const s = Array.from(q).sort((e, t) => e.id - t.id);
-        q.clear();
+      for (; N.size > 0; ) {
+        const s = Array.from(N).sort((e, t) => e.id - t.id);
+        N.clear();
         for (const e of s)
           e.state === g.Dirty && e.execute();
       }
     } finally {
-      L = !1;
+      q = !1;
     }
   }
 }
-function Oe(s) {
-  const e = new ke(s), t = e.getValue.bind(e);
+function Te(s) {
+  const e = new Ve(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"), {
@@ -256,42 +256,42 @@ function Oe(s) {
     enumerable: !1
   }), [t, i];
 }
-const [Ve, st] = Oe("light");
-$e(() => {
-  const s = Ve();
-  return s === "system" ? Ee() : s;
+const [je, at] = Te("light");
+Me(() => {
+  const s = je();
+  return s === "system" ? De() : s;
 });
-function Ee() {
+function De() {
   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: W.instanceId,
-  currentSize: W.list().length
+  registryId: F.instanceId,
+  currentSize: F.list().length
 });
-const Ie = "0.8.17", Te = Ie, Y = /* @__PURE__ */ new WeakSet(), X = /* @__PURE__ */ new WeakMap(), je = {
+const Pe = "0.8.19", _e = Pe, ee = /* @__PURE__ */ new WeakSet(), te = /* @__PURE__ */ new WeakMap(), ze = {
   name: "@tachui/core",
-  version: Te,
+  version: _e,
   author: "TachUI Team",
   verified: !0
 };
-function De(s) {
-  Y.has(s) || (s.setFeatureFlags({
+function Le(s) {
+  ee.has(s) || (s.setFeatureFlags({
     metadataRegistration: !0
-  }), Y.add(s));
+  }), ee.add(s));
 }
-function Pe(s, e) {
-  let t = X.get(s);
-  t || (t = /* @__PURE__ */ new Set(), X.set(s, t)), !t.has(e.name) && (s.registerPlugin(e), t.add(e.name));
+function Ne(s, e) {
+  let t = te.get(s);
+  t || (t = /* @__PURE__ */ new Set(), te.set(s, t)), !t.has(e.name) && (s.registerPlugin(e), t.add(e.name));
 }
-function _e(s, e, t, i = W, r = je) {
-  De(i), Pe(i, r), i.has(s) || i.register(s, e), i.getMetadata(s) || i.registerMetadata({
+function qe(s, e, t, i = F, r = ze) {
+  Le(i), Ne(i, r), i.has(s) || i.register(s, e), i.getMetadata(s) || i.registerMetadata({
     ...t,
     name: s,
     plugin: r.name
   });
 }
-const ze = "0.8.17", Ne = ze, oe = {
+const Ae = "0.8.19", Qe = Ae, K = {
   base: "0px",
   // Mobile-first base
   sm: "640px",
@@ -310,110 +310,123 @@ function w(s) {
     (e) => ["base", "sm", "md", "lg", "xl", "2xl"].includes(e)
   );
 }
-function J(s) {
+function ie(s) {
   return ["base", "sm", "md", "lg", "xl", "2xl"].includes(s);
 }
-let z = {
-  ...oe
+let T = {
+  ...K
 };
-const [ae, ee] = E("base"), [ce, qe] = E({
+const [ce, U] = I("base"), [de, ue] = I({
   width: 0,
   height: 0
 });
-function nt(s) {
-  Ae(s), z = {
-    ...oe,
+let Q = !1;
+const le = () => {
+  W(), E();
+}, pe = () => {
+  setTimeout(() => {
+    W(), E();
+  }, 100);
+};
+function ct(s) {
+  We(s), T = {
+    ...K,
     ...s
-  }, _(), typeof window < "u" && window.addEventListener("resize", _);
+  }, E(), typeof window < "u" && window.addEventListener("resize", E);
 }
-function P() {
-  return { ...z };
+function z() {
+  return { ...T };
 }
 function x() {
-  return ae;
-}
-function ot() {
   return ce;
 }
-function at() {
-  typeof window > "u" || (H(), _(), window.addEventListener("resize", () => {
-    H(), _();
-  }), window.addEventListener("orientationchange", () => {
-    setTimeout(() => {
-      H(), _();
-    }, 100);
-  }));
+function dt() {
+  return de;
+}
+function ut() {
+  typeof window > "u" || Q || (W(), E(), window.addEventListener("resize", le), window.addEventListener("orientationchange", pe), Q = !0);
+}
+function lt() {
+  typeof window > "u" || (W(), E());
+}
+function pt() {
+  T = {
+    ...K
+  }, U("base"), ue({
+    width: 0,
+    height: 0
+  }), typeof window < "u" && Q && (window.removeEventListener("resize", le), window.removeEventListener("orientationchange", pe)), Q = !1;
 }
 function S() {
-  const s = ae(), e = ce();
+  const s = ce(), e = de();
   return {
     current: s,
     width: e.width,
     height: e.height,
-    isAbove: (t) => te(s, t),
-    isBelow: (t) => ie(s, t),
-    isBetween: (t, i) => te(s, t) && ie(s, i),
+    isAbove: (t) => re(s, t),
+    isBelow: (t) => se(s, t),
+    isBetween: (t, i) => re(s, t) && se(s, i),
     matches: (t) => window.matchMedia(t).matches
   };
 }
-function G(s) {
-  const e = z[s];
+function Z(s) {
+  const e = T[s];
   return e.endsWith("px") ? parseInt(e, 10) : e.endsWith("em") || e.endsWith("rem") ? parseInt(e, 10) * 16 : parseInt(e, 10) || 0;
 }
 function y(s) {
   return ["base", "sm", "md", "lg", "xl", "2xl"].indexOf(s);
 }
-function te(s, e) {
+function re(s, e) {
   return y(s) > y(e);
 }
-function ie(s, e) {
+function se(s, e) {
   return y(s) < y(e);
 }
-function Le(s) {
-  return s === "base" ? "" : `(min-width: ${z[s]})`;
+function He(s) {
+  return s === "base" ? "" : `(min-width: ${T[s]})`;
 }
-function ct(s, e) {
+function ht(s, e) {
   const t = [];
-  if (s !== "base" && t.push(`(min-width: ${z[s]})`), e && e !== "2xl") {
+  if (s !== "base" && t.push(`(min-width: ${T[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 = `${G(o) - 1}px`;
+      const o = i[r + 1], n = `${Z(o) - 1}px`;
       t.push(`(max-width: ${n})`);
     }
   }
   return t.length > 0 ? t.join(" and ") : "";
 }
-function Q() {
+function H() {
   return ["base", "sm", "md", "lg", "xl", "2xl"];
 }
-function dt(s) {
-  const e = Q(), t = e.indexOf(s);
+function ft(s) {
+  const e = H(), t = e.indexOf(s);
   return t >= 0 ? e.slice(t + 1) : [];
 }
-function ut(s) {
-  const e = Q(), t = e.indexOf(s);
+function mt(s) {
+  const e = H(), t = e.indexOf(s);
   return t > 0 ? e.slice(0, t) : [];
 }
-function _() {
+function E() {
   if (typeof window > "u")
     return;
-  const s = window.innerWidth, e = Q().reverse();
+  const s = window.innerWidth, e = H().reverse();
   for (const t of e)
-    if (t === "base" || s >= G(t)) {
-      ee(t);
+    if (t === "base" || s >= Z(t)) {
+      U(t);
       return;
     }
-  ee("base");
+  U("base");
 }
-function H() {
-  typeof window < "u" && qe({
+function W() {
+  typeof window < "u" && ue({
     width: window.innerWidth,
     height: window.innerHeight
   });
 }
-function Ae(s) {
+function We(s) {
   for (const [t, i] of Object.entries(s)) {
-    if (!J(t))
+    if (!ie(t))
       throw new Error(
         `Invalid breakpoint key: "${t}". Valid keys are: base, sm, md, lg, xl, 2xl`
       );
@@ -426,16 +439,16 @@ function Ae(s) {
         `Invalid breakpoint value for "${t}": "${i}". Must be a valid CSS length (e.g., "768px", "48em")`
       );
   }
-  const e = Object.keys(s).filter(J).sort((t, i) => y(t) - y(i));
+  const e = Object.keys(s).filter(ie).sort((t, i) => y(t) - y(i));
   for (let t = 1; t < e.length; t++) {
     const i = e[t - 1], r = e[t], o = s[i], n = s[r];
-    if (G(i) >= parseInt(n, 10))
+    if (Z(i) >= parseInt(n, 10))
       throw new Error(
         `Breakpoint "${r}" (${n}) must be larger than "${i}" (${o})`
       );
   }
 }
-const lt = {
+const gt = {
   // Tailwind CSS (default)
   tailwind: {
     sm: "640px",
@@ -469,7 +482,7 @@ const lt = {
     "2xl": "1440px"
   }
 };
-class de {
+class he {
   options;
   constructor(e) {
     this.options = {
@@ -507,7 +520,7 @@ class de {
    * Generate media queries for a single property
    */
   generatePropertyMediaQueries(e, t) {
-    const i = [], r = {}, o = Q();
+    const i = [], r = {}, o = H();
     for (const n of o) {
       const a = t[n];
       if (a === void 0) continue;
@@ -515,7 +528,7 @@ class de {
       if (n === "base")
         r[c] = d;
       else {
-        const l = Le(n), p = { [c]: d };
+        const l = He(n), p = { [c]: d };
         i.push({
           breakpoint: n,
           query: l,
@@ -661,14 +674,14 @@ class de {
    * Extract breakpoint name from media query for comments
    */
   getBreakpointFromQuery(e) {
-    const t = P();
+    const t = z();
     for (const [i, r] of Object.entries(t))
       if (e.includes(r))
         return i;
     return "custom";
   }
 }
-function pt(s, e, t, i) {
+function bt(s, e, t, i) {
   if (!w(t)) {
     const a = e.replace(
       /[A-Z]/g,
@@ -676,10 +689,10 @@ function pt(s, e, t, i) {
     ), c = typeof t == "number" ? `${t}px` : t.toString();
     return [`${s} { ${a}: ${c}; }`];
   }
-  const r = new de({ selector: s, ...i }), o = { [e]: t };
+  const r = new he({ selector: s, ...i }), o = { [e]: t };
   return r.generateResponsiveCSS(o).cssRules;
 }
-function ht(s, e, t) {
+function vt(s, e, t) {
   const { generateMinified: i = !1 } = t || {}, r = i ? "" : "  ", o = i ? "" : `
 `, n = i ? "" : " ";
   let a = `@media ${e.query}${n}{${o}`;
@@ -693,7 +706,7 @@ function ht(s, e, t) {
   }
   return a += `${r}}${o}`, a += `}${o}`, a;
 }
-class ue {
+class fe {
   static styleSheet = null;
   static injectedRules = /* @__PURE__ */ new Set();
   /**
@@ -737,7 +750,7 @@ class ue {
     return this.injectedRules.has(e);
   }
 }
-class Qe {
+class Fe {
   cache = /* @__PURE__ */ new Map();
   hitCount = 0;
   missCount = 0;
@@ -760,8 +773,8 @@ class Qe {
     };
   }
 }
-const R = new Qe();
-class ft {
+const R = new Fe();
+class yt {
   static BATCH_SIZE = 50;
   static ruleQueue = [];
   static flushTimer = null;
@@ -801,8 +814,8 @@ class ft {
       if (typeof f == "object" && f !== null)
         for (const [v, C] of Object.entries(f)) {
           if (v === "base") continue;
-          const k = this.getMediaQuery(v), I = `${k}:${p}`;
-          d.has(I) || (c += `@media ${k}${a}{${n}`, c += `${o}${e}${a}{${n}`, c += `${o}${o}${this.propertyToCSS(p)}:${a}${this.valueToCSS(C)};${n}`, c += `${o}}${n}`, c += `}${n}`, d.add(I));
+          const k = this.getMediaQuery(v), j = `${k}:${p}`;
+          d.has(j) || (c += `@media ${k}${a}{${n}`, c += `${o}${e}${a}{${n}`, c += `${o}${o}${this.propertyToCSS(p)}:${a}${this.valueToCSS(C)};${n}`, c += `${o}}${n}`, c += `}${n}`, d.add(j));
         }
     return c;
   }
@@ -944,10 +957,10 @@ class A {
     this.measurements.clear();
   }
 }
-const le = 250;
-class U extends se {
+const me = 250;
+class Y extends oe {
   type = "responsive";
-  priority = le;
+  priority = me;
   generatedCSS = null;
   elementSelector = "";
   _config;
@@ -970,13 +983,13 @@ class U extends se {
   generateAndInjectCSS() {
     const e = A.startMeasurement("css-generation");
     try {
-      const t = new de({
+      const t = new he({
         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 && ue.injectCSS(this.generatedCSS.cssRules);
+      this.generatedCSS = t.generateResponsiveCSS(this.config), this.generatedCSS.cssRules.length > 0 && fe.injectCSS(this.generatedCSS.cssRules);
     } finally {
       e();
     }
@@ -998,11 +1011,11 @@ class U extends se {
     let t = !1;
     for (const [i, r] of Object.entries(e))
       if (this.isReactiveValue(r))
-        T(r) || j(r) ? r() : this.isAsset(r) && (t = !0, r.resolve());
+        D(r) || P(r) ? r() : this.isAsset(r) && (t = !0, r.resolve());
       else if (w(r))
         for (const [o, n] of Object.entries(r))
-          this.isReactiveValue(n) && (T(n) || j(n) ? n() : this.isAsset(n) && (t = !0, n.resolve()));
-    t && me()();
+          this.isReactiveValue(n) && (D(n) || P(n) ? n() : this.isAsset(n) && (t = !0, n.resolve()));
+    t && ye()();
   }
   /**
    * Update configuration and regenerate CSS
@@ -1047,7 +1060,7 @@ class U extends se {
    * Check if a value is a reactive signal, computed, or Asset
    */
   isReactiveValue(e) {
-    return !!(T(e) || j(e) || this.isAsset(e));
+    return !!(D(e) || P(e) || this.isAsset(e));
   }
   /**
    * Check if a value is an Asset object
@@ -1062,11 +1075,11 @@ class U extends se {
     const t = {};
     for (const [i, r] of Object.entries(e))
       if (this.isReactiveValue(r))
-        T(r) || j(r) ? t[i] = r() : this.isAsset(r) && (t[i] = r.resolve());
+        D(r) || P(r) ? t[i] = r() : this.isAsset(r) && (t[i] = r.resolve());
       else if (w(r)) {
         const o = {};
         for (const [n, a] of Object.entries(r))
-          this.isReactiveValue(a) ? T(a) || j(a) ? o[n] = a() : this.isAsset(a) && (o[n] = a.resolve()) : o[n] = a;
+          this.isReactiveValue(a) ? D(a) || P(a) ? o[n] = a() : this.isAsset(a) && (o[n] = a.resolve()) : o[n] = a;
         t[i] = o;
       } else
         t[i] = r;
@@ -1086,11 +1099,11 @@ class U extends se {
   }
 }
 function h(s) {
-  return new U(s);
+  return new Y(s);
 }
-class He extends se {
+class Ge extends oe {
   type = "media-query";
-  priority = le + 1;
+  priority = me + 1;
   // Slightly higher than responsive
   elementSelector = "";
   constructor(e, t) {
@@ -1118,7 +1131,7 @@ class He extends se {
       ), l = typeof c == "number" ? `${c}px` : c.toString();
       n += `${i}${d}:${o}${l};${r}`;
     }
-    n += `${t}}${r}`, n += `}${r}`, ue.injectCSS([n]);
+    n += `${t}}${r}`, n += `}${r}`, fe.injectCSS([n]);
   }
   generateUniqueSelector(e) {
     return `.${`tachui-mq-${Math.random().toString(36).substr(2, 9)}`}`;
@@ -1128,17 +1141,17 @@ class He extends se {
   }
 }
 function $(s, e) {
-  return new He(s, e);
+  return new Ge(s, e);
 }
 function u(s, e) {
   const t = { [s]: e };
-  return new U(t);
+  return new Y(t);
 }
-function pe(s) {
+function ge(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 U(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 Y(e);
 }
-class he {
+class be {
   constructor(e) {
     return this.baseBuilder = e, new Proxy(this, {
       get(t, i) {
@@ -1203,7 +1216,7 @@ class he {
   }
   // Responsive layout methods
   responsiveLayout(e) {
-    const t = pe(e);
+    const t = ge(e);
     return this.baseBuilder.addModifier(t), this;
   }
   // Responsive dimension methods
@@ -1496,13 +1509,13 @@ class O {
     return this.parentBuilder.addModifier(i), this.parentBuilder;
   }
 }
-function mt(s) {
-  return new he(s);
+function xt(s) {
+  return new be(s);
 }
-function gt(s) {
-  return new he(s);
+function wt(s) {
+  return new be(s);
 }
-function bt() {
+function St() {
   const s = x(), e = m(() => S());
   return {
     current: s,
@@ -1518,7 +1531,7 @@ function bt() {
       return c >= d && c <= l;
     }),
     matches: (n) => {
-      const [a, c] = E(!1);
+      const [a, c] = I(!1);
       if (typeof window < "u") {
         const d = window.matchMedia(n);
         c(d.matches);
@@ -1529,8 +1542,8 @@ function bt() {
     }
   };
 }
-function vt(s) {
-  const [e, t] = E(!1);
+function Ct(s) {
+  const [e, t] = I(!1);
   if (typeof window < "u") {
     const i = window.matchMedia(s);
     t(i.matches);
@@ -1539,7 +1552,7 @@ function vt(s) {
   }
   return e;
 }
-function yt(s) {
+function $t(s) {
   const e = x();
   return m(() => {
     if (!w(s))
@@ -1563,7 +1576,7 @@ function yt(s) {
     throw new Error("No responsive value found for any breakpoint");
   });
 }
-function xt(s, e) {
+function Bt(s, e) {
   if (!w(s))
     return s;
   const t = s, i = e || x()(), r = [
@@ -1584,7 +1597,7 @@ function xt(s, e) {
       return t[n];
   throw new Error("No responsive value found for any breakpoint");
 }
-function wt(s, e) {
+function kt(s, e) {
   const t = {};
   for (const [i, r] of Object.entries(e))
     if (w(r)) {
@@ -1707,20 +1720,20 @@ const b = {
   hdr: "(dynamic-range: high)",
   sdr: "(dynamic-range: standard)"
 };
-function St(...s) {
+function Rt(...s) {
   return s.filter((e) => e).join(" and ");
 }
-function Ct(...s) {
+function Mt(...s) {
   return s.filter((e) => e).join(", ");
 }
-function $t(s) {
+function Ot(s) {
   const e = x();
   return m(() => {
     const t = e();
     return !(s.hideOn && s.hideOn.includes(t) || s.showOn && !s.showOn.includes(t));
   });
 }
-function We() {
+function Ue() {
   if (typeof window > "u") return;
   const s = S();
   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"]);
@@ -1737,7 +1750,7 @@ function We() {
     console.log(`  ${t}: ${window.matchMedia(i).matches}`);
   console.groupEnd();
 }
-function Bt(s = {}) {
+function Vt(s = {}) {
   if (typeof window > "u" || process.env.NODE_ENV === "production")
     return;
   const {
@@ -1765,9 +1778,9 @@ function Bt(s = {}) {
     i && (a += `Breakpoint: ${n.current}`), t && (a && (a += `
 `), a += `Size: ${n.width}×${n.height}`), r.textContent = a;
   }
-  o(), window.addEventListener("resize", o), We();
+  o(), window.addEventListener("resize", o), Ue();
 }
-class Fe {
+class Ke {
   /**
    * Create a responsive grid with automatic column sizing
    */
@@ -1817,7 +1830,7 @@ class Fe {
     return e.gap && (t.gap = e.gap), h(t);
   }
 }
-class kt {
+class Et {
   /**
    * Create a responsive flex container that stacks on mobile, flows horizontally on desktop
    */
@@ -1865,7 +1878,7 @@ class kt {
     });
   }
 }
-class Rt {
+class It {
   /**
    * Create a responsive container with max-width constraints
    */
@@ -1901,7 +1914,7 @@ class Rt {
     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"), h(t);
   }
 }
-class Mt {
+class Tt {
   /**
    * Show element only on specific breakpoints
    */
@@ -1961,7 +1974,7 @@ class Mt {
     });
   }
 }
-class Ot {
+class jt {
   /**
    * Create responsive padding
    */
@@ -1984,7 +1997,7 @@ class Ot {
     return e.all && (t.gap = e.all), e.column && (t.columnGap = e.column), e.row && (t.rowGap = e.row), h(t);
   }
 }
-class Vt {
+class Dt {
   /**
    * Create responsive font scale
    */
@@ -2011,7 +2024,7 @@ class Vt {
     });
   }
 }
-const Et = {
+const Pt = {
   /**
    * Sidebar layout that collapses on mobile
    */
@@ -2051,7 +2064,7 @@ const Et = {
   /**
    * Card grid layout
    */
-  cardGrid: (s) => Fe.autoFit({
+  cardGrid: (s) => Ke.autoFit({
     minColumnWidth: s?.minCardWidth || "300px",
     gap: s?.gap || "1rem",
     maxColumns: s?.maxColumns
@@ -2087,7 +2100,7 @@ class B {
   static createInterpolatedValue(e, t = {}) {
     const { smoothing: i = "linear", clamp: r = !0 } = t;
     return m(() => {
-      const n = S().width, a = P(), c = [];
+      const n = S().width, a = z(), c = [];
       for (const [v, C] of Object.entries(e))
         if (C !== void 0) {
           const k = v === "base" ? 0 : parseInt(a[v] || "0");
@@ -2160,7 +2173,7 @@ class B {
     throw new Error("No responsive value found");
   }
 }
-class Ge {
+class Ze {
   /**
    * Hook for responsive arrays (e.g., responsive grid columns data)
    */
@@ -2209,7 +2222,7 @@ class Ge {
    * Hook for responsive state management
    */
   static useResponsiveState(e) {
-    const [t, i] = E(e), r = x();
+    const [t, i] = I(e), r = x();
     return [m(() => {
       const a = t(), c = r();
       try {
@@ -2228,7 +2241,7 @@ class Ge {
    * Hook for responsive computations with memoization
    */
   static useResponsiveComputation(e, t = []) {
-    return ge(() => {
+    return xe(() => {
       t.forEach((r) => r());
       const i = S();
       return e(i);
@@ -2248,7 +2261,7 @@ class Ge {
     });
   }
 }
-class Ue {
+class Ye {
   /**
    * Execute callback only on specific breakpoints
    */
@@ -2300,20 +2313,20 @@ class Ue {
     };
   }
 }
-class Ke {
+class Xe {
   /**
    * Create responsive pagination
    */
   static createResponsivePagination(e, t) {
-    const [i, r] = E(1), o = x(), n = m(() => {
+    const [i, r] = I(1), o = x(), n = m(() => {
       const C = o();
       return B.resolveResponsiveValue(
         t,
         C
       );
     }), a = m(() => Math.ceil(e.length / n())), c = m(() => {
-      const C = n(), I = (i() - 1) * C, fe = I + C;
-      return e.slice(I, fe);
+      const C = n(), j = (i() - 1) * C, ve = j + C;
+      return e.slice(j, ve);
     }), d = m(
       () => i() < a()
     ), l = m(() => i() > 1), p = (C) => {
@@ -2364,11 +2377,11 @@ class Ke {
     });
   }
 }
-const It = {
+const _t = {
   Breakpoints: B,
-  Hooks: Ge,
-  Targeting: Ue,
-  Data: Ke
+  Hooks: Ze,
+  Targeting: Ye,
+  Data: Xe
 };
 class M {
   static isEnabled = !1;
@@ -2448,7 +2461,7 @@ class M {
    */
   static updateDebugOverlay(e) {
     if (!this.debugOverlay) return;
-    const t = S(), i = P();
+    const t = S(), i = z();
     let r = `
       <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
         📱 Responsive Debug
@@ -2585,7 +2598,7 @@ class M {
    */
   static logResponsiveState() {
     if (!this.enabled) return;
-    const e = S(), t = P();
+    const e = S(), t = z();
     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: b.mobile,
@@ -2654,7 +2667,7 @@ class M {
    * Export responsive configuration for debugging
    */
   static exportConfiguration() {
-    const e = S(), t = P(), i = A.getStats(), r = R.getStats(), o = {};
+    const e = S(), t = z(), i = A.getStats(), r = R.getStats(), o = {};
     if (typeof window < "u" && window.matchMedia) {
       for (const [n, a] of Object.entries(b))
         if (typeof a == "string")
@@ -2675,7 +2688,7 @@ class M {
     };
   }
 }
-function Ze(s, e) {
+function Je(s, e) {
   const t = x();
   return m(() => {
     const i = t(), r = w(s);
@@ -2708,7 +2721,7 @@ function Ze(s, e) {
     };
   });
 }
-class Ye {
+class et {
   /**
    * Test CSS features support
    */
@@ -2742,23 +2755,23 @@ class Ye {
 }
 typeof window < "u" && process.env.NODE_ENV !== "production" && (window.tachUIResponsive = {
   devTools: M,
-  inspector: Ze,
-  compatibility: Ye,
+  inspector: Je,
+  compatibility: et,
   logState: () => M.logResponsiveState(),
   export: () => M.exportConfiguration()
 });
-const Xe = {
+const tt = {
   name: "@tachui/responsive",
-  version: Ne,
+  version: Qe,
   author: "TachUI Team",
   verified: !0
-}, N = 80, Je = [
+}, L = 80, it = [
   [
     "responsive",
     h,
     {
       category: "layout",
-      priority: N,
+      priority: L,
       signature: "(config: ResponsiveStyleConfig) => Modifier",
       description: "Applies responsive style mappings across configured breakpoints."
     }
@@ -2768,7 +2781,7 @@ const Xe = {
     $,
     {
       category: "layout",
-      priority: N,
+      priority: L,
       signature: "(query: string, styles: Record<string, any>) => Modifier",
       description: "Attaches custom CSS rules for a media query to a component."
     }
@@ -2778,104 +2791,106 @@ const Xe = {
     u,
     {
       category: "layout",
-      priority: N,
+      priority: L,
       signature: "(property: string, value: ResponsiveValue<any>) => Modifier",
       description: "Creates a responsive modifier from a single style property/value map."
     }
   ],
   [
     "responsiveLayout",
-    pe,
+    ge,
     {
       category: "layout",
-      priority: N,
+      priority: L,
       signature: "(config: ResponsiveLayoutConfig) => Modifier",
       description: "Configures responsive flexbox layout properties such as direction, wrap, and gap."
     }
   ]
 ];
-let re = !1;
-function et(s) {
-  const e = s?.registry, t = s?.plugin ?? Xe, i = s?.force === !0, r = !!(e || s?.plugin);
-  !r && re && !i || (Je.forEach(([o, n, a]) => {
-    _e(
+let ne = !1;
+function rt(s) {
+  const e = s?.registry, t = s?.plugin ?? tt, i = s?.force === !0, r = !!(e || s?.plugin);
+  !r && ne && !i || (it.forEach(([o, n, a]) => {
+    qe(
       o,
       n,
       a,
       e,
       t
     );
-  }), r || (re = !0));
+  }), r || (ne = !0));
 }
-et();
+rt();
 export {
   B as AdvancedBreakpointUtils,
-  lt as BreakpointPresets,
-  Ye as BrowserCompatibility,
-  ue as CSSInjector,
-  Rt as Container,
-  oe as DEFAULT_BREAKPOINTS,
-  kt as Flex,
-  Et as LayoutPatterns,
+  gt as BreakpointPresets,
+  et as BrowserCompatibility,
+  fe as CSSInjector,
+  It as Container,
+  K as DEFAULT_BREAKPOINTS,
+  Et as Flex,
+  Pt as LayoutPatterns,
   b as MediaQueries,
-  He as MediaQueryModifier,
-  ft as OptimizedCSSGenerator,
-  le as RESPONSIVE_MODIFIER_PRIORITY,
-  It as ResponsiveAdvanced,
-  de as ResponsiveCSSGenerator,
-  Rt as ResponsiveContainerPatterns,
-  Ke as ResponsiveDataUtils,
+  Ge as MediaQueryModifier,
+  yt as OptimizedCSSGenerator,
+  me as RESPONSIVE_MODIFIER_PRIORITY,
+  _t as ResponsiveAdvanced,
+  he as ResponsiveCSSGenerator,
+  It as ResponsiveContainerPatterns,
+  Xe as ResponsiveDataUtils,
   M as ResponsiveDevTools,
-  kt as ResponsiveFlexPatterns,
-  Fe as ResponsiveGrid,
-  Fe as ResponsiveGridPatterns,
-  Ge as ResponsiveHooks,
-  U as ResponsiveModifier,
-  he as ResponsiveModifierBuilderImpl,
+  Et as ResponsiveFlexPatterns,
+  Ke as ResponsiveGrid,
+  Ke as ResponsiveGridPatterns,
+  Ze as ResponsiveHooks,
+  Y as ResponsiveModifier,
+  be as ResponsiveModifierBuilderImpl,
   A as ResponsivePerformanceMonitor,
-  Ot as ResponsiveSpacingPatterns,
-  Ue as ResponsiveTargeting,
-  Vt as ResponsiveTypography,
-  Vt as ResponsiveTypographyPatterns,
-  Mt as ResponsiveVisibilityPatterns,
-  Ot as Spacing,
-  Mt as Visibility,
-  G as breakpointToPixels,
-  St as combineMediaQueries,
-  nt as configureBreakpoints,
+  jt as ResponsiveSpacingPatterns,
+  Ye as ResponsiveTargeting,
+  Dt as ResponsiveTypography,
+  Dt as ResponsiveTypographyPatterns,
+  Tt as ResponsiveVisibilityPatterns,
+  jt as Spacing,
+  Tt as Visibility,
+  pt as __resetResponsiveSystemForTests,
+  lt as __syncResponsiveSignalsForTests,
+  Z as breakpointToPixels,
+  Rt as combineMediaQueries,
+  ct as configureBreakpoints,
   S as createBreakpointContext,
   $ as createMediaQueryModifier,
-  gt as createResponsiveBuilder,
-  wt as createResponsiveCSSVariables,
-  pe as createResponsiveLayoutModifier,
+  wt as createResponsiveBuilder,
+  kt as createResponsiveCSSVariables,
+  ge as createResponsiveLayoutModifier,
   h as createResponsiveModifier,
   u as createResponsivePropertyModifier,
-  $t as createResponsiveVisibility,
+  Ot as createResponsiveVisibility,
   R as cssRuleCache,
-  Bt as enableResponsiveDebugOverlay,
-  ht as generateCustomMediaQuery,
-  Le as generateMediaQuery,
-  ct as generateRangeMediaQuery,
-  pt as generateResponsiveProperty,
+  Vt as enableResponsiveDebugOverlay,
+  vt as generateCustomMediaQuery,
+  He as generateMediaQuery,
+  ht as generateRangeMediaQuery,
+  bt as generateResponsiveProperty,
   y as getBreakpointIndex,
-  dt as getBreakpointsAbove,
-  ut as getBreakpointsBelow,
+  ft as getBreakpointsAbove,
+  mt as getBreakpointsBelow,
   x as getCurrentBreakpoint,
-  P as getCurrentBreakpointConfig,
-  Q as getSortedBreakpoints,
-  ot as getViewportDimensions,
-  at as initializeResponsiveSystem,
-  te as isBreakpointAbove,
-  ie as isBreakpointBelow,
+  z as getCurrentBreakpointConfig,
+  H as getSortedBreakpoints,
+  dt as getViewportDimensions,
+  ut as initializeResponsiveSystem,
+  re as isBreakpointAbove,
+  se as isBreakpointBelow,
   w as isResponsiveValue,
-  J as isValidBreakpointKey,
-  We as logResponsiveState,
-  Ct as orMediaQueries,
-  et as registerResponsiveModifiers,
-  xt as resolveResponsiveValue,
-  bt as useBreakpoint,
-  vt as useMediaQuery,
-  Ze as useResponsiveInspector,
-  yt as useResponsiveValue,
-  mt as withResponsive
+  ie as isValidBreakpointKey,
+  Ue as logResponsiveState,
+  Mt as orMediaQueries,
+  rt as registerResponsiveModifiers,
+  Bt as resolveResponsiveValue,
+  St as useBreakpoint,
+  Ct as useMediaQuery,
+  Je as useResponsiveInspector,
+  $t as useResponsiveValue,
+  xt as withResponsive
 };