@tachui/responsive 0.8.23 → 0.8.25

package/dist/index.mjs

@@ -1,2896 +1,76 @@
-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 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 X;
-  },
-  set currentComputation(s) {
-    X = s;
-  },
-  get currentOwner() {
-    return J;
-  },
-  set currentOwner(s) {
-    J = s;
-  }
-};
-function ae() {
-  return _.currentComputation;
-}
-function $e() {
-  return _.currentOwner;
-}
-class Be {
-  id;
-  owner;
-  fn;
-  sources = /* @__PURE__ */ new Set();
-  // Signals this computation depends on
-  observers = /* @__PURE__ */ new Set();
-  // Computations that depend on this
-  state = g.Dirty;
-  value = void 0;
-  constructor(e, t = null) {
-    this.id = ++we, 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 = _.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 {
-      _.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 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 = $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 = 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;
-  }
-  /**
-   * Get the current value without tracking dependency
-   */
-  peek() {
-    return (this.state === g.Dirty || !this._hasValue) && (this.execute(), this._hasValue = !0), this.value;
-  }
-  /**
-   * Remove an observer (cleanup)
-   */
-  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 the computation and notify observers
-   */
-  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 method for ReactiveNode compatibility
-   */
-  notify() {
-    this.execute();
-  }
-  /**
-   * Complete cleanup for memory management
-   */
-  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 the computed value
-   */
-  dispose() {
-    this.cleanup(), super.dispose();
-  }
-  /**
-   * Debug information
-   */
-  [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: G[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 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 Oe = 0;
-class Ve {
-  id;
-  observers = /* @__PURE__ */ new Set();
-  _value;
-  constructor(e) {
-    this.id = ++Oe, this._value = e;
-  }
-  /**
-   * Get the current value and track dependency
-   */
-  getValue() {
-    const e = ae();
-    return e && e.state !== g.Disposed && (this.observers.add(e), e.sources.add(this)), this._value;
-  }
-  /**
-   * Get the current value without tracking dependency
-   */
-  peek() {
-    return this._value;
-  }
-  /**
-   * Set a new value and notify observers
-   */
-  set(e) {
-    const t = typeof e == "function" ? e(this._value) : e;
-    return t !== this._value && (this._value = t, this.notify()), t;
-  }
-  /**
-   * Notify all observers that this signal has changed
-   */
-  notify() {
-    for (const e of this.observers)
-      e.state !== g.Disposed && (e.state = g.Dirty, Ee(e));
-  }
-  /**
-   * Remove an observer (cleanup)
-   */
-  removeObserver(e) {
-    this.observers.delete(e);
-  }
-  /**
-   * Get debug information about this signal
-   */
-  [Symbol.for("tachui.debug")]() {
-    return {
-      id: this.id,
-      value: this._value,
-      observerCount: this.observers.size,
-      type: "Signal"
-    };
-  }
-}
-const N = /* @__PURE__ */ new Set();
-let q = !1;
-function Ee(s) {
-  N.add(s), q || queueMicrotask(Ie);
-}
-function Ie() {
-  if (!q) {
-    q = !0;
-    try {
-      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 {
-      q = !1;
-    }
-  }
-}
-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"), {
-    value: e,
-    enumerable: !1
-  }), [t, i];
-}
-const [je, at] = Te("light");
-Me(() => {
-  const s = je();
-  return s === "system" ? De() : s;
-});
-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: F.instanceId,
-  currentSize: F.list().length
-});
-const Pe = "0.8.23", _e = Pe, ee = /* @__PURE__ */ new WeakSet(), te = /* @__PURE__ */ new WeakMap(), ze = {
-  name: "@tachui/core",
-  version: _e,
-  author: "TachUI Team",
-  verified: !0
-};
-function Le(s) {
-  ee.has(s) || (s.setFeatureFlags({
-    metadataRegistration: !0
-  }), ee.add(s));
-}
-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 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 Ae = "0.8.23", Qe = Ae, K = {
-  base: "0px",
-  // Mobile-first base
-  sm: "640px",
-  // Small tablets and large phones
-  md: "768px",
-  // Tablets
-  lg: "1024px",
-  // Laptops and small desktops
-  xl: "1280px",
-  // Large desktops
-  "2xl": "1536px"
-  // Extra large screens
-};
-function w(s) {
-  return typeof s == "object" && s !== null && !Array.isArray(s) && Object.keys(s).some(
-    (e) => ["base", "sm", "md", "lg", "xl", "2xl"].includes(e)
-  );
-}
-function ie(s) {
-  return ["base", "sm", "md", "lg", "xl", "2xl"].includes(s);
-}
-let T = {
-  ...K
-};
-const [ce, U] = I("base"), [de, ue] = I({
-  width: 0,
-  height: 0
-});
-let Q = !1;
-const le = () => {
-  W(), E();
-}, pe = () => {
-  setTimeout(() => {
-    W(), E();
-  }, 100);
-};
-function ct(s) {
-  We(s), T = {
-    ...K,
-    ...s
-  }, E(), typeof window < "u" && window.addEventListener("resize", E);
-}
-function z() {
-  return { ...T };
-}
-function x() {
-  return ce;
-}
-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 = ce(), e = de();
-  return {
-    current: s,
-    width: e.width,
-    height: e.height,
-    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 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 re(s, e) {
-  return y(s) > y(e);
-}
-function se(s, e) {
-  return y(s) < y(e);
-}
-function He(s) {
-  return s === "base" ? "" : `(min-width: ${T[s]})`;
-}
-function ht(s, e) {
-  const t = [];
-  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 = `${Z(o) - 1}px`;
-      t.push(`(max-width: ${n})`);
-    }
-  }
-  return t.length > 0 ? t.join(" and ") : "";
-}
-function H() {
-  return ["base", "sm", "md", "lg", "xl", "2xl"];
-}
-function ft(s) {
-  const e = H(), t = e.indexOf(s);
-  return t >= 0 ? e.slice(t + 1) : [];
-}
-function mt(s) {
-  const e = H(), t = e.indexOf(s);
-  return t > 0 ? e.slice(0, t) : [];
-}
-function E() {
-  if (typeof window > "u")
-    return;
-  const s = window.innerWidth, e = H().reverse();
-  for (const t of e)
-    if (t === "base" || s >= Z(t)) {
-      U(t);
-      return;
-    }
-  U("base");
-}
-function W() {
-  typeof window < "u" && ue({
-    width: window.innerWidth,
-    height: window.innerHeight
-  });
-}
-function We(s) {
-  for (const [t, i] of Object.entries(s)) {
-    if (!ie(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(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 (Z(i) >= parseInt(n, 10))
-      throw new Error(
-        `Breakpoint "${r}" (${n}) must be larger than "${i}" (${o})`
-      );
-  }
-}
-const gt = {
-  // Tailwind CSS (default)
-  tailwind: {
-    sm: "640px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1280px",
-    "2xl": "1536px"
-  },
-  // Bootstrap
-  bootstrap: {
-    sm: "576px",
-    md: "768px",
-    lg: "992px",
-    xl: "1200px",
-    "2xl": "1400px"
-  },
-  // Material Design
-  material: {
-    sm: "600px",
-    md: "960px",
-    lg: "1280px",
-    xl: "1920px",
-    "2xl": "2560px"
-  },
-  // Custom mobile-first
-  mobileFocus: {
-    sm: "480px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1200px",
-    "2xl": "1440px"
-  }
-};
-class he {
-  options;
-  constructor(e) {
-    this.options = {
-      generateMinified: !1,
-      includeComments: !0,
-      optimizeOutput: !0,
-      mobileFirst: !0,
-      ...e
-    };
-  }
-  /**
-   * Generate complete responsive CSS from a style configuration
-   */
-  generateResponsiveCSS(e) {
-    const t = [], i = [], r = {};
-    let o = !1;
-    for (const [n, a] of Object.entries(e))
-      if (w(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
-    };
-  }
-  /**
-   * Generate media queries for a single property
-   */
-  generatePropertyMediaQueries(e, t) {
-    const i = [], r = {}, o = H();
-    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 l = He(n), p = { [c]: d };
-        i.push({
-          breakpoint: n,
-          query: l,
-          styles: p,
-          selector: this.options.selector
-        });
-      }
-    }
-    return {
-      mediaQueries: i,
-      baseStyles: Object.keys(r).length > 0 ? r : void 0
-    };
-  }
-  /**
-   * Generate CSS rules from media queries and base styles
-   */
-  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;
-  }
-  /**
-   * Group media queries by their query string for optimization
-   */
-  groupQueriesByMediaQuery(e) {
-    const t = {};
-    for (const i of e)
-      t[i.query] || (t[i.query] = []), t[i.query].push(i);
-    return t;
-  }
-  /**
-   * Generate a single CSS rule
-   */
-  generateCSSRule(e, t) {
-    const { generateMinified: i, includeComments: r } = this.options, o = i ? "" : "  ", n = i ? "" : `
-`, a = i ? "" : " ";
-    let c = `${e}${a}{${n}`;
-    for (const [d, l] of Object.entries(t))
-      c += `${o}${d}:${a}${l};${n}`;
-    return c += `}${n}`, r && !i && (c = `/* Base styles (mobile-first) */${n}${c}`), c;
-  }
-  /**
-   * Generate a CSS media query rule
-   */
-  generateMediaQueryRule(e, t, i) {
-    const { generateMinified: r, includeComments: o } = this.options, n = r ? "" : "  ", a = r ? "" : "    ", c = r ? "" : `
-`, d = r ? "" : " ";
-    let l = `@media ${e}${d}{${c}`;
-    l += `${n}${t}${d}{${c}`;
-    for (const [p, f] of Object.entries(i))
-      l += `${a}${p}:${d}${f};${c}`;
-    return l += `${n}}${c}`, l += `}${c}`, o && !r && (l = `/* ${this.getBreakpointFromQuery(e)} styles */${c}${l}`), l;
-  }
-  /**
-   * Convert camelCase property to CSS kebab-case
-   */
-  toCSSProperty(e) {
-    return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
-  }
-  /**
-   * Format CSS value with appropriate units and validation
-   */
-  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());
-  }
-  /**
-   * Add !important for properties that need to override base component styles
-   */
-  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;
-  }
-  /**
-   * Convert property name to appropriate CSS property (including custom properties)
-   */
-  toCSSPropertyName(e) {
-    return this.toCSSProperty(e);
-  }
-  /**
-   * Extract breakpoint name from media query for comments
-   */
-  getBreakpointFromQuery(e) {
-    const t = z();
-    for (const [i, r] of Object.entries(t))
-      if (e.includes(r))
-        return i;
-    return "custom";
-  }
-}
-function bt(s, e, t, i) {
-  if (!w(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 he({ selector: s, ...i }), o = { [e]: t };
-  return r.generateResponsiveCSS(o).cssRules;
-}
-function vt(s, e, t) {
-  const { generateMinified: i = !1 } = t || {}, r = i ? "" : "  ", o = i ? "" : `
-`, n = i ? "" : " ";
-  let a = `@media ${e.query}${n}{${o}`;
-  a += `${r}${s}${n}{${o}`;
-  for (const [c, d] of Object.entries(e.styles)) {
-    const l = c.replace(
-      /[A-Z]/g,
-      (f) => `-${f.toLowerCase()}`
-    ), p = typeof d == "number" ? `${d}px` : d.toString();
-    a += `${r}${r}${l}:${n}${p};${o}`;
-  }
-  return a += `${r}}${o}`, a += `}${o}`, a;
-}
-class fe {
-  static styleSheet = null;
-  static injectedRules = /* @__PURE__ */ new Set();
-  /**
-   * Get or create the tachUI responsive stylesheet
-   */
-  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;
-  }
-  /**
-   * Inject CSS rules into the document
-   */
-  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);
-        }
-  }
-  /**
-   * Clear all injected responsive CSS
-   */
-  static clearCSS() {
-    if (this.styleSheet) {
-      for (; this.styleSheet.cssRules.length > 0; )
-        this.styleSheet.deleteRule(0);
-      this.injectedRules.clear();
-    }
-  }
-  /**
-   * Check if a rule has been injected
-   */
-  static hasRule(e) {
-    return this.injectedRules.has(e);
-  }
-}
-class Fe {
-  cache = /* @__PURE__ */ 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 R = new Fe();
-class yt {
-  static BATCH_SIZE = 50;
-  static ruleQueue = [];
-  static flushTimer = null;
-  /**
-   * Generate CSS with caching and batching
-   */
-  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 = R.get(a);
-      if (d)
-        return d;
-    }
-    const c = this.generateCSS(e, t, { minify: r });
-    return n && R.set(a, c), o && c.trim() ? (this.addToBatch(c), "") : c;
-  }
-  /**
-   * Create cache key for CSS rule
-   */
-  static createCacheKey(e, t, i) {
-    return JSON.stringify({ selector: e, config: t, options: i });
-  }
-  /**
-   * Generate CSS without optimizations (for comparison)
-   */
-  static generateCSS(e, t, i) {
-    const { minify: r = !1 } = i, o = r ? "" : "  ", n = r ? "" : `
-`, a = r ? "" : " ";
-    let c = "";
-    const d = /* @__PURE__ */ new Set(), l = this.extractBaseStyles(t);
-    Object.keys(l).length > 0 && (c += `${e}${a}{${n}`, c += this.generateProperties(l, o, n, a), c += `}${n}`);
-    for (const [p, f] of Object.entries(t))
-      if (typeof f == "object" && f !== null)
-        for (const [v, C] of Object.entries(f)) {
-          if (v === "base") continue;
-          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;
-  }
-  /**
-   * Add CSS to batch queue
-   */
-  static addToBatch(e) {
-    this.ruleQueue.push(e), this.ruleQueue.length >= this.BATCH_SIZE ? this.flushBatch() : this.flushTimer || (this.flushTimer = window.setTimeout(() => this.flushBatch(), 16));
-  }
-  /**
-   * Flush batched CSS rules
-   */
-  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);
-  }
-  /**
-   * Inject CSS into document
-   */
-  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));
-  }
-  /**
-   * Extract base (non-responsive) styles
-   */
-  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;
-  }
-  /**
-   * Generate CSS properties
-   */
-  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;
-  }
-  /**
-   * Convert property name to CSS
-   */
-  static propertyToCSS(e) {
-    return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
-  }
-  /**
-   * Convert value to CSS
-   */
-  static valueToCSS(e) {
-    return typeof e == "number" ? `${e}px` : e.toString();
-  }
-  /**
-   * Get media query for breakpoint
-   */
-  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;
-  }
-  /**
-   * Force flush any pending batched CSS
-   */
-  static flush() {
-    this.flushBatch();
-  }
-  /**
-   * Get performance statistics
-   */
-  static getStats() {
-    return {
-      cache: R.getStats(),
-      batch: {
-        queueSize: this.ruleQueue.length,
-        batchSize: this.BATCH_SIZE
-      }
-    };
-  }
-  /**
-   * Clear all caches and reset performance counters
-   */
-  static reset() {
-    R.clear(), this.ruleQueue = [], this.flushTimer && (clearTimeout(this.flushTimer), this.flushTimer = null);
-  }
-}
-class A {
-  static measurements = /* @__PURE__ */ new Map();
-  /**
-   * Start performance measurement
-   */
-  static startMeasurement(e) {
-    const t = performance.now();
-    return () => {
-      const i = performance.now() - t;
-      return this.recordMeasurement(e, i), i;
-    };
-  }
-  /**
-   * Record measurement
-   */
-  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();
-  }
-  /**
-   * Get performance statistics
-   */
-  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 * 0.5)],
-        p95: r[Math.floor(r.length * 0.95)],
-        p99: r[Math.floor(r.length * 0.99)]
-      };
-    }
-    return e;
-  }
-  /**
-   * Clear all performance data
-   */
-  static reset() {
-    this.measurements.clear();
-  }
-}
-const me = 250;
-class Y extends oe {
-  type = "responsive";
-  priority = me;
-  generatedCSS = null;
-  elementSelector = "";
-  _config;
-  constructor(e) {
-    super(e), this._config = e;
-  }
-  get config() {
-    return this._config;
-  }
-  /**
-   * Apply responsive styles to the element
-   */
-  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());
-  }
-  /**
-   * Generate and inject responsive CSS
-   */
-  generateAndInjectCSS() {
-    const e = A.startMeasurement("css-generation");
-    try {
-      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 && fe.injectCSS(this.generatedCSS.cssRules);
-    } finally {
-      e();
-    }
-  }
-  /**
-   * Set up reactive updates for dynamic responsive values
-   */
-  setupReactiveUpdates() {
-    this.hasReactiveValues(this.properties) && V(() => {
-      this.trackReactiveDependencies(this.properties);
-      const t = this.resolveReactiveConfig(this.properties);
-      this.updateConfig(t);
-    });
-  }
-  /**
-   * Track reactive dependencies by accessing all reactive values
-   */
-  trackReactiveDependencies(e) {
-    let t = !1;
-    for (const [i, r] of Object.entries(e))
-      if (this.isReactiveValue(r))
-        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) && (D(n) || P(n) ? n() : this.isAsset(n) && (t = !0, n.resolve()));
-    t && ye()();
-  }
-  /**
-   * Update configuration and regenerate CSS
-   */
-  updateConfig(e) {
-    this._config = e, this.generateAndInjectCSS();
-  }
-  /**
-   * Generate unique CSS selector for this element
-   */
-  generateUniqueSelector(e) {
-    return `.${`tachui-responsive-${this.generateUniqueId()}`}`;
-  }
-  /**
-   * Extract class name from CSS selector
-   */
-  getClassFromSelector(e) {
-    return e.replace(/^\./, "");
-  }
-  /**
-   * Generate unique ID for CSS class names
-   */
-  generateUniqueId() {
-    return Math.random().toString(36).substr(2, 9);
-  }
-  /**
-   * Check if configuration contains reactive values (signals)
-   */
-  hasReactiveValues(e) {
-    for (const t of Object.values(e)) {
-      if (this.isReactiveValue(t))
-        return !0;
-      if (w(t)) {
-        for (const i of Object.values(t))
-          if (this.isReactiveValue(i))
-            return !0;
-      }
-    }
-    return !1;
-  }
-  /**
-   * Check if a value is a reactive signal, computed, or Asset
-   */
-  isReactiveValue(e) {
-    return !!(D(e) || P(e) || this.isAsset(e));
-  }
-  /**
-   * Check if a value is an Asset object
-   */
-  isAsset(e) {
-    return e != null && typeof e == "object" && "resolve" in e && typeof e.resolve == "function";
-  }
-  /**
-   * Resolve configuration with current signal values
-   */
-  resolveReactiveConfig(e) {
-    const t = {};
-    for (const [i, r] of Object.entries(e))
-      if (this.isReactiveValue(r))
-        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) ? D(a) || P(a) ? o[n] = a() : this.isAsset(a) && (o[n] = a.resolve()) : o[n] = a;
-        t[i] = o;
-      } else
-        t[i] = r;
-    return t;
-  }
-  /**
-   * Get generated CSS information (for debugging)
-   */
-  getGeneratedCSS() {
-    return this.generatedCSS;
-  }
-  /**
-   * Get configuration (for debugging)
-   */
-  getConfig() {
-    return this.config;
-  }
-}
-function h(s) {
-  return new Y(s);
-}
-class Ge extends oe {
-  type = "media-query";
-  priority = me + 1;
-  // Slightly higher than responsive
-  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 ? "" : `
-`, 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,
-        (p) => `-${p.toLowerCase()}`
-      ), l = typeof c == "number" ? `${c}px` : c.toString();
-      n += `${i}${d}:${o}${l};${r}`;
-    }
-    n += `${t}}${r}`, n += `}${r}`, fe.injectCSS([n]);
-  }
-  generateUniqueSelector(e) {
-    return `.${`tachui-mq-${Math.random().toString(36).substr(2, 9)}`}`;
-  }
-  getClassFromSelector(e) {
-    return e.replace(/^\./, "");
-  }
-}
-function $(s, e) {
-  return new Ge(s, e);
-}
-function u(s, e) {
-  const t = { [s]: e };
-  return new Y(t);
-}
-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 Y(e);
-}
-class be {
-  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;
-      }
-    });
-  }
-  // Delegate essential builder methods
-  addModifier(e) {
-    this.baseBuilder.addModifier(e);
-  }
-  build() {
-    return this.baseBuilder.build();
-  }
-  // Core responsive methods
-  responsive(e) {
-    const t = h(e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  mediaQuery(e, t) {
-    const i = $(e, t);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  // Advanced media query methods
-  orientation(e, t) {
-    const i = `(orientation: ${e})`, r = $(i, t);
-    return this.baseBuilder.addModifier(r), this;
-  }
-  colorScheme(e, t) {
-    const i = `(prefers-color-scheme: ${e})`, r = $(i, t);
-    return this.baseBuilder.addModifier(r), this;
-  }
-  reducedMotion(e) {
-    const i = $("(prefers-reduced-motion: reduce)", e);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  highContrast(e) {
-    const i = $("(prefers-contrast: high)", e);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  touchDevice(e) {
-    const i = $("(pointer: coarse)", e);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  mouseDevice(e) {
-    const i = $("(pointer: fine)", e);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  retina(e) {
-    const i = $("(min-resolution: 2dppx)", e);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  print(e) {
-    const i = $("print", e);
-    return this.baseBuilder.addModifier(i), this;
-  }
-  // Responsive layout methods
-  responsiveLayout(e) {
-    const t = ge(e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  // Responsive dimension methods
-  responsiveWidth(e) {
-    const t = u("width", e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  responsiveHeight(e) {
-    const t = u("height", e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  responsiveSize(e) {
-    const t = h(e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  // Responsive spacing methods
-  responsivePadding(e) {
-    if (w(e) || typeof e == "string" || typeof e == "number") {
-      const t = u(
-        "padding",
-        e
-      );
-      this.baseBuilder.addModifier(t);
-    } else {
-      const t = {}, i = e;
-      i.all && (t.padding = i.all), i.horizontal && (t.paddingLeft = i.horizontal, t.paddingRight = i.horizontal), i.vertical && (t.paddingTop = i.vertical, t.paddingBottom = i.vertical), i.top && (t.paddingTop = i.top), i.right && (t.paddingRight = i.right), i.bottom && (t.paddingBottom = i.bottom), i.left && (t.paddingLeft = i.left);
-      const r = h(t);
-      this.baseBuilder.addModifier(r);
-    }
-    return this;
-  }
-  responsiveMargin(e) {
-    if (w(e) || typeof e == "string" || typeof e == "number") {
-      const t = u(
-        "margin",
-        e
-      );
-      this.baseBuilder.addModifier(t);
-    } else {
-      const t = {}, i = e;
-      i.all && (t.margin = i.all), i.horizontal && (t.marginLeft = i.horizontal, t.marginRight = i.horizontal), i.vertical && (t.marginTop = i.vertical, t.marginBottom = i.vertical), i.top && (t.marginTop = i.top), i.right && (t.marginRight = i.right), i.bottom && (t.marginBottom = i.bottom), i.left && (t.marginLeft = i.left);
-      const r = h(t);
-      this.baseBuilder.addModifier(r);
-    }
-    return this;
-  }
-  // Responsive typography methods
-  responsiveFont(e) {
-    const t = h(e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  responsiveFontSize(e) {
-    const t = u("fontSize", e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  responsiveTextAlign(e) {
-    const t = u("textAlign", e);
-    return this.baseBuilder.addModifier(t), this;
-  }
-  // Breakpoint shorthand methods
-  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;
-  }
-  // Layout properties
-  width(e) {
-    const t = { [this.breakpoint]: e }, i = u("width", t);
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  height(e) {
-    const t = { [this.breakpoint]: e }, i = u("height", t);
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  minWidth(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "minWidth",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  maxWidth(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "maxWidth",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  minHeight(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "minHeight",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  maxHeight(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "maxHeight",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  padding(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "padding",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  paddingHorizontal(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "paddingLeft",
-      t
-    ), r = u(
-      "paddingRight",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(r), this.parentBuilder;
-  }
-  paddingVertical(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "paddingTop",
-      t
-    ), r = u(
-      "paddingBottom",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(r), this.parentBuilder;
-  }
-  paddingTop(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "paddingTop",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  paddingBottom(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "paddingBottom",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  paddingLeft(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "paddingLeft",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  paddingRight(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "paddingRight",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  margin(e) {
-    const t = { [this.breakpoint]: e }, i = u("margin", t);
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  marginHorizontal(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "marginLeft",
-      t
-    ), r = u(
-      "marginRight",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(r), this.parentBuilder;
-  }
-  marginVertical(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "marginTop",
-      t
-    ), r = u(
-      "marginBottom",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(r), this.parentBuilder;
-  }
-  marginTop(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "marginTop",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  marginBottom(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "marginBottom",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  marginLeft(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "marginLeft",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  marginRight(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "marginRight",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  // Typography properties
-  fontSize(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "fontSize",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  textAlign(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "textAlign",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  // Display properties
-  display(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "display",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  // Flexbox properties
-  flexDirection(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "flexDirection",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  justifyContent(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "justifyContent",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  alignItems(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "alignItems",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  // Visual properties
-  backgroundColor(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "backgroundColor",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  color(e) {
-    const t = { [this.breakpoint]: e }, i = u("color", t);
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-  opacity(e) {
-    const t = { [this.breakpoint]: e }, i = u(
-      "opacity",
-      t
-    );
-    return this.parentBuilder.addModifier(i), this.parentBuilder;
-  }
-}
-function xt(s) {
-  return new be(s);
-}
-function wt(s) {
-  return new be(s);
-}
-function St() {
-  const s = x(), e = m(() => S());
-  return {
-    current: s,
-    context: e,
-    isAbove: (n) => m(
-      () => y(s()) > y(n)
-    ),
-    isBelow: (n) => m(
-      () => y(s()) < y(n)
-    ),
-    isBetween: (n, a) => m(() => {
-      const c = y(s()), d = y(n), l = y(a);
-      return c >= d && c <= l;
-    }),
-    matches: (n) => {
-      const [a, c] = I(!1);
-      if (typeof window < "u") {
-        const d = window.matchMedia(n);
-        c(d.matches);
-        const l = (p) => c(p.matches);
-        d.addEventListener("change", l);
-      }
-      return a;
-    }
-  };
-}
-function Ct(s) {
-  const [e, t] = I(!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 $t(s) {
-  const e = x();
-  return m(() => {
-    if (!w(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 Bt(s, e) {
-  if (!w(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 kt(s, e) {
-  const t = {};
-  for (const [i, r] of Object.entries(e))
-    if (w(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 b = {
-  // Viewport size queries
-  mobile: "(max-width: 767px)",
-  tablet: "(min-width: 768px) and (max-width: 1023px)",
-  desktop: "(min-width: 1024px)",
-  // Device orientation
-  landscape: "(orientation: landscape)",
-  portrait: "(orientation: portrait)",
-  // Device pixel density
-  highDPI: "(min-resolution: 2dppx)",
-  lowDPI: "(max-resolution: 1dppx)",
-  retinaDisplay: "(min-resolution: 2dppx)",
-  standardDisplay: "(max-resolution: 1.9dppx)",
-  // Color scheme preference
-  darkMode: "(prefers-color-scheme: dark)",
-  lightMode: "(prefers-color-scheme: light)",
-  noColorSchemePreference: "(prefers-color-scheme: no-preference)",
-  // Reduced motion preference
-  reducedMotion: "(prefers-reduced-motion: reduce)",
-  allowMotion: "(prefers-reduced-motion: no-preference)",
-  // Contrast preference (accessibility)
-  highContrast: "(prefers-contrast: high)",
-  lowContrast: "(prefers-contrast: low)",
-  normalContrast: "(prefers-contrast: no-preference)",
-  // Data usage preference
-  reduceData: "(prefers-reduced-data: reduce)",
-  allowData: "(prefers-reduced-data: no-preference)",
-  // Transparency preference
-  reduceTransparency: "(prefers-reduced-transparency: reduce)",
-  allowTransparency: "(prefers-reduced-transparency: no-preference)",
-  // Hover capability
-  canHover: "(hover: hover)",
-  noHover: "(hover: none)",
-  // Pointer capability
-  finePointer: "(pointer: fine)",
-  // Mouse, trackpad
-  coarsePointer: "(pointer: coarse)",
-  // Touch
-  // Any-hover (any input can hover)
-  anyCanHover: "(any-hover: hover)",
-  anyNoHover: "(any-hover: none)",
-  // Any-pointer (any input type)
-  anyFinePointer: "(any-pointer: fine)",
-  anyCoarsePointer: "(any-pointer: coarse)",
-  // Update preference
-  slowUpdate: "(update: slow)",
-  // E-ink displays
-  fastUpdate: "(update: fast)",
-  // Standard displays
-  // Overflow-block capability
-  blockScrolling: "(overflow-block: scroll)",
-  blockPaged: "(overflow-block: paged)",
-  // Overflow-inline capability
-  inlineScrolling: "(overflow-inline: scroll)",
-  // Forced colors (high contrast mode)
-  forcedColors: "(forced-colors: active)",
-  normalColors: "(forced-colors: none)",
-  // Inverted colors
-  invertedColors: "(inverted-colors: inverted)",
-  normalInvertedColors: "(inverted-colors: none)",
-  // Scripting capability
-  scriptingEnabled: "(scripting: enabled)",
-  scriptingDisabled: "(scripting: none)",
-  scriptingInitialOnly: "(scripting: initial-only)",
-  // Container queries (future)
-  containerSmall: "(max-width: 400px)",
-  containerMedium: "(min-width: 401px) and (max-width: 800px)",
-  containerLarge: "(min-width: 801px)",
-  // Custom breakpoint builders
-  minWidth: (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" : ""})`,
-  // Height-based queries
-  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" : ""})`,
-  // Aspect ratio queries
-  square: "(aspect-ratio: 1/1)",
-  landscape16_9: "(aspect-ratio: 16/9)",
-  portrait9_16: "(aspect-ratio: 9/16)",
-  widescreen: "(min-aspect-ratio: 16/9)",
-  tallscreen: "(max-aspect-ratio: 9/16)",
-  customAspectRatio: (s) => `(aspect-ratio: ${s})`,
-  minAspectRatio: (s) => `(min-aspect-ratio: ${s})`,
-  maxAspectRatio: (s) => `(max-aspect-ratio: ${s})`,
-  // Resolution queries
-  lowRes: "(max-resolution: 120dpi)",
-  standardRes: "(min-resolution: 120dpi) and (max-resolution: 192dpi)",
-  highRes: "(min-resolution: 192dpi)",
-  customResolution: (s) => `(min-resolution: ${s}dpi)`,
-  // Print media
-  print: "print",
-  screen: "screen",
-  speech: "speech",
-  // Device-specific queries (common patterns)
-  iPhone: "(max-width: 428px)",
-  iPad: "(min-width: 768px) and (max-width: 1024px)",
-  desktopSmall: "(min-width: 1024px) and (max-width: 1440px)",
-  desktopLarge: "(min-width: 1440px)",
-  // Special conditions
-  touchDevice: "(pointer: coarse)",
-  mouseDevice: "(pointer: fine)",
-  keyboardNavigation: "(hover: none) and (pointer: coarse)",
-  // Modern display features
-  wideColorGamut: "(color-gamut: p3)",
-  standardColorGamut: "(color-gamut: srgb)",
-  hdr: "(dynamic-range: high)",
-  sdr: "(dynamic-range: standard)"
-};
-function Rt(...s) {
-  return s.filter((e) => e).join(" and ");
-}
-function Mt(...s) {
-  return s.filter((e) => e).join(", ");
-}
-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 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"]);
-  const e = {
-    Mobile: b.mobile,
-    Tablet: b.tablet,
-    Desktop: b.desktop,
-    "Dark mode": b.darkMode,
-    "Reduced motion": b.reducedMotion,
-    "Can hover": b.canHover
-  };
-  console.log("Media query matches:");
-  for (const [t, i] of Object.entries(e))
-    console.log(`  ${t}: ${window.matchMedia(i).matches}`);
-  console.groupEnd();
-}
-function Vt(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 = `
-    position: fixed;
-    ${e.includes("top") ? "top: 10px" : "bottom: 10px"};
-    ${e.includes("right") ? "right: 10px" : "left: 10px"};
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 8px 12px;
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: 12px;
-    z-index: 9999;
-    pointer-events: none;
-    white-space: pre-line;
-  `, document.body.appendChild(r);
-  function o() {
-    const n = S();
-    let a = "";
-    i && (a += `Breakpoint: ${n.current}`), t && (a && (a += `
-`), a += `Size: ${n.width}×${n.height}`), r.textContent = a;
-  }
-  o(), window.addEventListener("resize", o), Ue();
-}
-class Ke {
-  /**
-   * Create a responsive grid with automatic column sizing
-   */
-  static autoFit(e) {
-    const t = {};
-    if (typeof e.minColumnWidth == "object") {
-      t.gridTemplateColumns = {};
-      for (const [i, r] of Object.entries(e.minColumnWidth)) {
-        const o = typeof r == "number" ? `${r}px` : r, n = e.maxColumns && typeof e.maxColumns == "object" ? e.maxColumns[i] || "auto" : e.maxColumns || "auto";
-        t.gridTemplateColumns[i] = n === "auto" ? `repeat(auto-fit, minmax(${o}, 1fr))` : `repeat(${n}, minmax(${o}, 1fr))`;
-      }
-    } else {
-      const i = typeof e.minColumnWidth == "number" ? `${e.minColumnWidth}px` : e.minColumnWidth, r = e.maxColumns || "auto";
-      t.gridTemplateColumns = r === "auto" ? `repeat(auto-fit, minmax(${i}, 1fr))` : `repeat(${r}, minmax(${i}, 1fr))`;
-    }
-    return e.gap && (t.gap = e.gap), t.display = "grid", h(t);
-  }
-  /**
-   * Create a responsive grid with explicit column counts
-   */
-  static columns(e, t) {
-    const i = {
-      display: "grid",
-      gridTemplateColumns: typeof e == "object" ? Object.fromEntries(
-        Object.entries(e).map(([r, o]) => [
-          r,
-          `repeat(${o}, 1fr)`
-        ])
-      ) : `repeat(${e}, 1fr)`
-    };
-    return t?.gap && (i.gap = t.gap), t?.rowGap && (i.rowGap = t.rowGap), t?.autoRows && (i.gridAutoRows = t.autoRows), h(i);
-  }
-  /**
-   * Create responsive masonry-style grid
-   */
-  static masonry(e) {
-    const t = {
-      display: "grid",
-      gridTemplateColumns: typeof e.columns == "object" ? Object.fromEntries(
-        Object.entries(e.columns).map(([i, r]) => [
-          i,
-          `repeat(${r}, 1fr)`
-        ])
-      ) : `repeat(${e.columns}, 1fr)`,
-      gridAutoRows: "max-content"
-    };
-    return e.gap && (t.gap = e.gap), h(t);
-  }
-}
-class Et {
-  /**
-   * Create a responsive flex container that stacks on mobile, flows horizontally on desktop
-   */
-  static stackToRow(e) {
-    const i = {
-      display: "flex",
-      flexDirection: {
-        base: "column",
-        [e?.stackBreakpoint || "md"]: "row"
-      }
-    };
-    return e?.gap && (i.gap = e.gap), e?.align && (i.alignItems = e.align), e?.justify && (i.justifyContent = e.justify), h(i);
-  }
-  /**
-   * Create a responsive flex container with wrapping behavior
-   */
-  static wrap(e) {
-    const t = {
-      display: "flex",
-      flexWrap: "wrap",
-      ...e
-    };
-    return h(t);
-  }
-  /**
-   * Create centered flex layout
-   */
-  static center(e = "row") {
-    return h({
-      display: "flex",
-      flexDirection: e,
-      justifyContent: "center",
-      alignItems: "center"
-    });
-  }
-  /**
-   * Create space-between flex layout
-   */
-  static spaceBetween(e = "row") {
-    return h({
-      display: "flex",
-      flexDirection: e,
-      justifyContent: "space-between",
-      alignItems: "center"
-    });
-  }
-}
-class It {
-  /**
-   * Create a responsive container with max-width constraints
-   */
-  static container(e) {
-    const t = {
-      width: "100%",
-      marginLeft: "auto",
-      marginRight: "auto"
-    };
-    return e?.maxWidth ? t.maxWidth = e.maxWidth : t.maxWidth = {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px"
-    }, e?.padding && (t.paddingLeft = e.padding, t.paddingRight = e.padding), e?.margin && (t.marginTop = e.margin, t.marginBottom = e.margin), h(t);
-  }
-  /**
-   * Create a full-width container that breaks out of constraints
-   */
-  static fullWidth() {
-    return h({
-      width: "100vw",
-      marginLeft: "calc(-50vw + 50%)",
-      marginRight: "calc(-50vw + 50%)"
-    });
-  }
-  /**
-   * Create a section container with responsive padding
-   */
-  static section(e) {
-    const t = {};
-    return e?.paddingY && (t.paddingTop = e.paddingY, t.paddingBottom = e.paddingY), e?.paddingX && (t.paddingLeft = e.paddingX, t.paddingRight = e.paddingX), e?.maxWidth && (t.maxWidth = e.maxWidth, t.marginLeft = "auto", t.marginRight = "auto"), h(t);
-  }
-}
-class Tt {
-  /**
-   * Show element only on specific breakpoints
-   */
-  static showOn(e) {
-    const t = {
-      display: {}
-      // Start with empty object
-    };
-    for (const i of e)
-      t.display[i] = "block";
-    return h(t);
-  }
-  /**
-   * Hide element only on specific breakpoints
-   */
-  static hideOn(e) {
-    const t = {
-      display: {}
-      // Start with empty object
-    };
-    for (const i of e)
-      t.display[i] = "none";
-    return h(t);
-  }
-  /**
-   * Show on mobile, hide on desktop
-   */
-  static mobileOnly() {
-    return h({
-      display: {
-        base: "block",
-        md: "none"
-      }
-    });
-  }
-  /**
-   * Hide on mobile, show on desktop
-   */
-  static desktopOnly() {
-    return h({
-      display: {
-        base: "none",
-        md: "block"
-      }
-    });
-  }
-  /**
-   * Show only on tablet breakpoint
-   */
-  static tabletOnly() {
-    return h({
-      display: {
-        base: "none",
-        md: "block",
-        lg: "none"
-      }
-    });
-  }
-}
-class jt {
-  /**
-   * Create responsive padding
-   */
-  static padding(e) {
-    const t = {};
-    return e.all && (t.padding = e.all), e.horizontal && (t.paddingLeft = e.horizontal, t.paddingRight = e.horizontal), e.vertical && (t.paddingTop = e.vertical, t.paddingBottom = e.vertical), e.top && (t.paddingTop = e.top), e.right && (t.paddingRight = e.right), e.bottom && (t.paddingBottom = e.bottom), e.left && (t.paddingLeft = e.left), h(t);
-  }
-  /**
-   * Create responsive margin
-   */
-  static margin(e) {
-    const t = {};
-    return e.all && (t.margin = e.all), e.horizontal && (t.marginLeft = e.horizontal, t.marginRight = e.horizontal), e.vertical && (t.marginTop = e.vertical, t.marginBottom = e.vertical), e.top && (t.marginTop = e.top), e.right && (t.marginRight = e.right), e.bottom && (t.marginBottom = e.bottom), e.left && (t.marginLeft = e.left), h(t);
-  }
-  /**
-   * Create responsive gap (for flexbox and grid)
-   */
-  static gap(e) {
-    const t = {};
-    return e.all && (t.gap = e.all), e.column && (t.columnGap = e.column), e.row && (t.rowGap = e.row), h(t);
-  }
-}
-class Dt {
-  /**
-   * Create responsive font scale
-   */
-  static scale(e) {
-    const t = {
-      fontSize: e.base
-    };
-    if (e.scale && typeof e.scale == "object") {
-      t.fontSize = {};
-      for (const [i, r] of Object.entries(e.scale)) {
-        const o = typeof e.base == "number" ? e.base : parseFloat(e.base);
-        t.fontSize[i] = `${o * r}px`;
-      }
-    }
-    return e.lineHeight && (t.lineHeight = e.lineHeight), h(t);
-  }
-  /**
-   * Create fluid typography that scales smoothly
-   */
-  static fluid(e) {
-    const t = e.minBreakpoint || "320px", i = e.maxBreakpoint || "1200px", r = typeof e.minSize == "number" ? `${e.minSize}px` : e.minSize, o = typeof e.maxSize == "number" ? `${e.maxSize}px` : e.maxSize;
-    return h({
-      fontSize: `clamp(${r}, calc(${r} + (${o} - ${r}) * ((100vw - ${t}) / (${i} - ${t}))), ${o})`
-    });
-  }
-}
-const Pt = {
-  /**
-   * Sidebar layout that collapses on mobile
-   */
-  sidebar: (s) => {
-    const e = s?.collapseBreakpoint || "md", t = s?.sidebarWidth || "250px";
-    return h({
-      display: "grid",
-      gridTemplateColumns: {
-        base: "1fr",
-        [e]: `${t} 1fr`
-      },
-      gap: s?.gap || "1rem"
-    });
-  },
-  /**
-   * Holy grail layout (header, footer, sidebar, main content)
-   */
-  holyGrail: (s) => {
-    const e = s?.collapseBreakpoint || "lg";
-    return h({
-      display: "grid",
-      gridTemplateAreas: {
-        base: '"header" "main" "footer"',
-        [e]: '"header header" "sidebar main" "footer footer"'
-      },
-      gridTemplateRows: {
-        base: `${s?.headerHeight || "auto"} 1fr ${s?.footerHeight || "auto"}`,
-        [e]: `${s?.headerHeight || "auto"} 1fr ${s?.footerHeight || "auto"}`
-      },
-      gridTemplateColumns: {
-        base: "1fr",
-        [e]: `${s?.sidebarWidth || "250px"} 1fr`
-      },
-      minHeight: "100vh"
-    });
-  },
-  /**
-   * Card grid layout
-   */
-  cardGrid: (s) => Ke.autoFit({
-    minColumnWidth: s?.minCardWidth || "300px",
-    gap: s?.gap || "1rem",
-    maxColumns: s?.maxColumns
-  }),
-  /**
-   * Hero section layout
-   */
-  hero: (s) => h({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    textAlign: s?.textAlign || "center",
-    minHeight: s?.minHeight || "50vh",
-    padding: s?.padding || "2rem"
-  })
-};
-class B {
-  /**
-   * Create a responsive value resolver with custom logic
-   */
-  static createResponsiveResolver(e, t = []) {
-    const i = x();
-    return m(() => {
-      t.forEach((n) => n());
-      const r = i(), o = S();
-      return e(r, o);
-    });
-  }
-  /**
-   * Create responsive value that interpolates between breakpoints
-   */
-  static createInterpolatedValue(e, t = {}) {
-    const { smoothing: i = "linear", clamp: r = !0 } = t;
-    return m(() => {
-      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");
-          c.push({ width: k, value: C });
-        }
-      if (c.sort((v, C) => v.width - C.width), c.length === 0) return 0;
-      if (c.length === 1) return c[0].value;
-      let d = c[0], l = c[c.length - 1];
-      for (let v = 0; v < c.length - 1; v++)
-        if (n >= c[v].width && n <= c[v + 1].width) {
-          d = c[v], l = c[v + 1];
-          break;
-        }
-      if (r) {
-        if (n <= d.width) return d.value;
-        if (n >= l.width) return l.value;
-      }
-      const p = (n - d.width) / (l.width - d.width);
-      let f = p;
-      switch (i) {
-        case "ease":
-          f = 0.5 - 0.5 * Math.cos(p * Math.PI);
-          break;
-        case "ease-in":
-          f = p * p;
-          break;
-        case "ease-out":
-          f = 1 - (1 - p) * (1 - p);
-          break;
-        case "linear":
-        default:
-          f = p;
-          break;
-      }
-      return d.value + (l.value - d.value) * f;
-    });
-  }
-  /**
-   * Create conditional responsive behavior
-   */
-  static createConditionalResponsive(e, t, i) {
-    const r = x();
-    return m(() => {
-      const o = S(), a = e(o) ? t : i;
-      return this.resolveResponsiveValue(a, r());
-    });
-  }
-  /**
-   * Resolve responsive value at specific breakpoint
-   */
-  static resolveResponsiveValue(e, t) {
-    if (!w(e))
-      return e;
-    const i = e, 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");
-  }
-}
-class Ze {
-  /**
-   * Hook for responsive arrays (e.g., responsive grid columns data)
-   */
-  static useResponsiveArray(e) {
-    const t = x();
-    return m(() => {
-      const i = t();
-      return B.resolveResponsiveValue(e, i) || [];
-    });
-  }
-  /**
-   * Hook for responsive object selection
-   */
-  static useResponsiveObject(e) {
-    const t = x();
-    return m(() => {
-      const i = t();
-      try {
-        return B.resolveResponsiveValue(
-          e,
-          i
-        );
-      } catch {
-        return null;
-      }
-    });
-  }
-  /**
-   * Hook for responsive function selection and execution
-   */
-  static useResponsiveFunction(e) {
-    const t = x();
-    return m(() => {
-      const i = t();
-      try {
-        return B.resolveResponsiveValue(
-          e,
-          i
-        );
-      } catch {
-        return null;
-      }
-    });
-  }
-  /**
-   * Hook for responsive state management
-   */
-  static useResponsiveState(e) {
-    const [t, i] = I(e), r = x();
-    return [m(() => {
-      const a = t(), c = r();
-      try {
-        return B.resolveResponsiveValue(
-          a,
-          c
-        );
-      } catch {
-        return;
-      }
-    }), (a) => {
-      w(a) ? i(a) : i({ [r()]: a });
-    }];
-  }
-  /**
-   * Hook for responsive computations with memoization
-   */
-  static useResponsiveComputation(e, t = []) {
-    return xe(() => {
-      t.forEach((r) => r());
-      const i = S();
-      return e(i);
-    });
-  }
-  /**
-   * Hook for responsive side effects
-   */
-  static useResponsiveEffect(e, t = []) {
-    let i, r;
-    V(() => {
-      t.forEach((a) => a());
-      const o = S();
-      i && (i(), i = void 0);
-      const n = e(o, r);
-      typeof n == "function" && (i = n), r = o;
-    });
-  }
-}
-class Ye {
-  /**
-   * Execute callback only on specific breakpoints
-   */
-  static onBreakpoints(e, t) {
-    let i;
-    return V(() => {
-      const r = S();
-      if (e.includes(r.current)) {
-        i && (i(), i = void 0);
-        const o = t(r);
-        typeof o == "function" && (i = o);
-      }
-    }), () => {
-      i && i();
-    };
-  }
-  /**
-   * Execute callback when breakpoint changes
-   */
-  static onBreakpointChange(e) {
-    let t;
-    return V(() => {
-      const i = S(), r = i.current;
-      t && t !== r && e(r, t, i), t = r;
-    }), () => {
-    };
-  }
-  /**
-   * Execute callback when entering/leaving specific breakpoint ranges
-   */
-  static onBreakpointRange(e, t, i) {
-    let r = !1, o, n;
-    return V(() => {
-      const a = S(), c = y(a.current), d = y(e), l = y(t), p = c >= d && c <= l;
-      if (p && !r) {
-        if (i.onEnter) {
-          const f = i.onEnter(a);
-          typeof f == "function" && (n = f);
-        }
-        r = !0;
-      } else !p && r && (n && (n(), n = void 0), o && (o(), o = void 0), i.onLeave && i.onLeave(a), r = !1);
-      if (p && i.onWithin) {
-        o && (o(), o = void 0);
-        const f = i.onWithin(a);
-        typeof f == "function" && (o = f);
-      }
-    }), () => {
-      n && n(), o && o();
-    };
-  }
-}
-class Xe {
-  /**
-   * Create responsive pagination
-   */
-  static createResponsivePagination(e, t) {
-    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(), j = (i() - 1) * C, ve = j + C;
-      return e.slice(j, ve);
-    }), d = m(
-      () => i() < a()
-    ), l = m(() => i() > 1), p = (C) => {
-      const k = a();
-      r(Math.max(1, Math.min(C, k)));
-    }, f = () => {
-      d() && r(i() + 1);
-    }, v = () => {
-      l() && r(i() - 1);
-    };
-    return V(() => {
-      n(), r(1);
-    }), {
-      currentPage: i,
-      totalPages: a,
-      currentItems: c,
-      setPage: p,
-      nextPage: f,
-      prevPage: v,
-      hasNext: d,
-      hasPrev: l
-    };
-  }
-  /**
-   * Create responsive filtering
-   */
-  static createResponsiveFilter(e, t) {
-    const i = x();
-    return m(() => {
-      const r = i(), o = B.resolveResponsiveValue(
-        t,
-        r
-      );
-      return o ? e.filter(o) : e;
-    });
-  }
-  /**
-   * Create responsive sorting
-   */
-  static createResponsiveSort(e, t) {
-    const i = x();
-    return m(() => {
-      const r = i(), o = B.resolveResponsiveValue(
-        t,
-        r
-      );
-      return o ? [...e].sort(o) : e;
-    });
-  }
-}
-const _t = {
-  Breakpoints: B,
-  Hooks: Ze,
-  Targeting: Ye,
-  Data: Xe
-};
-class M {
-  static isEnabled = !1;
-  static debugOverlay = null;
-  static logLevel = "info";
-  /**
-   * Enable responsive development tools
-   */
-  static enable(e = {}) {
-    if (process.env.NODE_ENV === "production") {
-      console.warn("ResponsiveDevTools: Not enabling in production mode");
-      return;
-    }
-    this.isEnabled = !0, this.logLevel = e.logLevel || "info", this.log("info", "ResponsiveDevTools: Enabled"), e.showOverlay && this.createDebugOverlay(e), e.highlightResponsiveElements && this.enableElementHighlighting(), e.showPerformance && this.enablePerformanceMonitoring(), this.logResponsiveState();
-  }
-  /**
-   * Disable responsive development tools
-   */
-  static disable() {
-    this.isEnabled = !1, this.debugOverlay && (this.debugOverlay.remove(), this.debugOverlay = null), this.disableElementHighlighting(), this.log("info", "ResponsiveDevTools: Disabled");
-  }
-  /**
-   * Check if development tools are enabled
-   */
-  static get enabled() {
-    return this.isEnabled && process.env.NODE_ENV !== "production";
-  }
-  /**
-   * Log responsive information
-   */
-  static log(e, ...t) {
-    if (!this.enabled) return;
-    const i = ["error", "warn", "info", "debug"], r = i.indexOf(this.logLevel);
-    i.indexOf(e) <= r && console[e]("[ResponsiveDevTools]", ...t);
-  }
-  /**
-   * Create visual debug overlay
-   */
-  static createDebugOverlay(e) {
-    if (typeof document > "u") return;
-    const t = e.position || "top-right";
-    this.debugOverlay = document.createElement("div"), this.debugOverlay.id = "tachui-responsive-debug", this.debugOverlay.style.cssText = `
-      position: fixed;
-      ${t.includes("top") ? "top: 10px" : "bottom: 10px"};
-      ${t.includes("right") ? "right: 10px" : "left: 10px"};
-      background: rgba(0, 0, 0, 0.9);
-      color: white;
-      padding: 12px;
-      border-radius: 8px;
-      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-      font-size: 12px;
-      z-index: 10000;
-      pointer-events: auto;
-      cursor: pointer;
-      max-width: 300px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    `;
-    const i = document.createElement("div");
-    i.textContent = "×", i.style.cssText = `
-      position: absolute;
-      top: 4px;
-      right: 8px;
-      cursor: pointer;
-      font-size: 16px;
-      color: #ff6b6b;
-    `, i.onclick = () => this.disable(), this.debugOverlay.appendChild(i), document.body.appendChild(this.debugOverlay), this.updateDebugOverlay(e);
-    let r;
-    window.addEventListener("resize", () => {
-      clearTimeout(r), r = window.setTimeout(() => {
-        this.updateDebugOverlay(e);
-      }, 100);
-    });
-  }
-  /**
-   * Update debug overlay content
-   */
-  static updateDebugOverlay(e) {
-    if (!this.debugOverlay) return;
-    const t = S(), i = z();
-    let r = `
-      <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
-        📱 Responsive Debug
-      </div>
-    `;
-    if (r += `
-      <div style="margin-bottom: 6px;">
-        <strong>Current:</strong> <span style="color: #66bb6a;">${t.current}</span>
-      </div>
-      <div style="margin-bottom: 6px;">
-        <strong>Size:</strong> ${t.width}×${t.height}
-      </div>
-    `, e.showBreakpoints) {
-      r += '<div style="margin: 8px 0; font-weight: bold; color: #ffb74d;">Breakpoints:</div>';
-      for (const [n, a] of Object.entries(i)) {
-        const c = n === t.current;
-        r += `
-          <div style="color: ${c ? "#66bb6a" : "#999"}; margin-bottom: 2px;">
-            ${c ? "▶" : "▷"} ${n}: ${a}
-          </div>
-        `;
-      }
-    }
-    if (e.showPerformance) {
-      const n = A.getStats(), a = R.getStats();
-      if (r += '<div style="margin: 8px 0; font-weight: bold; color: #f06292;">Performance:</div>', r += `
-        <div style="margin-bottom: 2px;">
-          Cache: ${a.size} rules (${(a.hitRate * 100).toFixed(1)}% hit rate)
-        </div>
-      `, Object.keys(n).length > 0)
-        for (const [c, d] of Object.entries(n))
-          r += `
-            <div style="margin-bottom: 2px;">
-              ${c}: ${d.average.toFixed(2)}ms avg
-            </div>
-          `;
-    }
-    r += '<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';
-    const o = {
-      Touch: b.touchDevice,
-      Dark: b.darkMode,
-      "Reduced Motion": b.reducedMotion,
-      "High Contrast": b.highContrast
-    };
-    for (const [n, a] of Object.entries(o)) {
-      const c = window.matchMedia(a).matches;
-      r += `
-        <div style="color: ${c ? "#66bb6a" : "#666"}; margin-bottom: 2px;">
-          ${c ? "✓" : "✗"} ${n}
-        </div>
-      `;
-    }
-    this.debugOverlay.innerHTML = r + this.debugOverlay.querySelector("div:last-child")?.outerHTML || "";
-  }
-  /**
-   * Enable element highlighting for responsive elements
-   */
-  static enableElementHighlighting() {
-    if (typeof document > "u") return;
-    const e = document.createElement("style");
-    e.id = "tachui-responsive-highlight", e.textContent = `
-      .tachui-responsive-element {
-        outline: 2px dashed #4fc3f7 !important;
-        outline-offset: 2px !important;
-        position: relative !important;
-      }
-
-      .tachui-responsive-element::before {
-        content: 'R';
-        position: absolute !important;
-        top: -8px !important;
-        right: -8px !important;
-        background: #4fc3f7 !important;
-        color: white !important;
-        width: 16px !important;
-        height: 16px !important;
-        border-radius: 50% !important;
-        font-size: 10px !important;
-        font-weight: bold !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        z-index: 10001 !important;
-        font-family: monospace !important;
-      }
-    `, document.head.appendChild(e), new MutationObserver(() => {
-      this.highlightResponsiveElements();
-    }).observe(document.body, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0,
-      attributeFilter: ["class"]
-    }), this.highlightResponsiveElements();
-  }
-  /**
-   * Disable element highlighting
-   */
-  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");
-    });
-  }
-  /**
-   * Highlight elements with responsive classes
-   */
-  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");
-      });
-    });
-  }
-  /**
-   * Enable performance monitoring display
-   */
-  static enablePerformanceMonitoring() {
-    setInterval(() => {
-      if (!this.enabled) return;
-      const e = A.getStats(), t = R.getStats();
-      this.log("debug", "Performance Stats:", {
-        cache: t,
-        performance: e
-      });
-    }, 5e3);
-  }
-  /**
-   * Log current responsive state
-   */
-  static logResponsiveState() {
-    if (!this.enabled) return;
-    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,
-        Tablet: b.tablet,
-        Desktop: b.desktop,
-        "Touch Device": b.touchDevice,
-        "Dark Mode": b.darkMode,
-        "Reduced Motion": b.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();
-  }
-  /**
-   * Inspect a responsive value
-   */
-  static inspectResponsiveValue(e, t) {
-    if (!this.enabled) return;
-    const i = x();
-    if (console.group(`🔍 Responsive Value${t ? ` - ${t}` : ""}`), w(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 l = c === i();
-          console.log(`  ${l ? "→" : " "} ${c}:`, d);
-        }
-    } else
-      console.log("Static value:", e);
-    console.groupEnd();
-  }
-  /**
-   * Test responsive behavior
-   */
-  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;
-  }
-  /**
-   * Export responsive configuration for debugging
-   */
-  static exportConfiguration() {
-    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")
-          try {
-            o[n] = window.matchMedia(a).matches;
-          } catch {
-            o[n] = !1;
-          }
-    }
-    return {
-      breakpoints: t,
-      currentContext: e,
-      performance: {
-        cache: r,
-        timings: i
-      },
-      mediaQueries: o
-    };
-  }
-}
-function Je(s, e) {
-  const t = x();
-  return m(() => {
-    const i = t(), r = w(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 l = d; l >= 0; l--) {
-        const p = c[l];
-        if (a[p] !== void 0) {
-          o = a[p];
-          break;
-        }
-      }
-    } else
-      o = s, n = { [i]: o };
-    return M.enabled && e && M.inspectResponsiveValue(s, e), {
-      resolvedValue: o,
-      activeBreakpoint: i,
-      allValues: n,
-      isResponsive: r
-    };
-  });
-}
-class et {
-  /**
-   * Test CSS features support
-   */
-  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;
-  }
-  /**
-   * Test responsive behavior across different viewport sizes
-   */
-  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" }
-    ];
-    M.enabled && M.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: M,
-  inspector: Je,
-  compatibility: et,
-  logState: () => M.logResponsiveState(),
-  export: () => M.exportConfiguration()
-});
-const tt = {
-  name: "@tachui/responsive",
-  version: Qe,
-  author: "TachUI Team",
-  verified: !0
-}, L = 80, it = [
-  [
-    "responsive",
-    h,
-    {
-      category: "layout",
-      priority: L,
-      signature: "(config: ResponsiveStyleConfig) => Modifier",
-      description: "Applies responsive style mappings across configured breakpoints."
-    }
-  ],
-  [
-    "mediaQuery",
-    $,
-    {
-      category: "layout",
-      priority: L,
-      signature: "(query: string, styles: Record<string, any>) => Modifier",
-      description: "Attaches custom CSS rules for a media query to a component."
-    }
-  ],
-  [
-    "responsiveProperty",
-    u,
-    {
-      category: "layout",
-      priority: L,
-      signature: "(property: string, value: ResponsiveValue<any>) => Modifier",
-      description: "Creates a responsive modifier from a single style property/value map."
-    }
-  ],
-  [
-    "responsiveLayout",
-    ge,
-    {
-      category: "layout",
-      priority: L,
-      signature: "(config: ResponsiveLayoutConfig) => Modifier",
-      description: "Configures responsive flexbox layout properties such as direction, wrap, and gap."
-    }
-  ]
-];
-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 || (ne = !0));
-}
-rt();
+import { r as e } from "./index-GFNh0I50.mjs";
+import { A as o, B as r, J as t, a2 as n, t as p, D as v, s as R, L as d, M as l, a5 as u, O as g, a3 as y, F as c, $ as B, t as M, E as S, I as k, s as P, q as f, q as C, z as m, a4 as b, R as I, G as T, x as V, C as Q, y as x, y as _, v as A, x as D, v as F, Q as O, _ as w, S as E, a8 as h, a as G, e as L, j as U, c as z, a7 as K, l as N, h as j, k as q, aa as H, H as Y, o as J, a1 as W, f as X, W as Z, a0 as $, T as ee, Y as se, Z as ae, b as ie, g as oe, X as re, d as te, i as ne, U as pe, V as ve, N as Re, P as de, p as le, a9 as ue, a6 as ge, u as ye, m as ce, K as Be, n as Me, w as Se } from "./index-GFNh0I50.mjs";
+e();
 export {
-  B as AdvancedBreakpointUtils,
-  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,
-  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,
-  Et as ResponsiveFlexPatterns,
-  Ke as ResponsiveGrid,
-  Ke as ResponsiveGridPatterns,
-  Ze as ResponsiveHooks,
-  Y as ResponsiveModifier,
-  be as ResponsiveModifierBuilderImpl,
-  A as ResponsivePerformanceMonitor,
-  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,
-  wt as createResponsiveBuilder,
-  kt as createResponsiveCSSVariables,
-  ge as createResponsiveLayoutModifier,
-  h as createResponsiveModifier,
-  u as createResponsivePropertyModifier,
-  Ot as createResponsiveVisibility,
-  R as cssRuleCache,
-  Vt as enableResponsiveDebugOverlay,
-  vt as generateCustomMediaQuery,
-  He as generateMediaQuery,
-  ht as generateRangeMediaQuery,
-  bt as generateResponsiveProperty,
-  y as getBreakpointIndex,
-  ft as getBreakpointsAbove,
-  mt as getBreakpointsBelow,
-  x as getCurrentBreakpoint,
-  z as getCurrentBreakpointConfig,
-  H as getSortedBreakpoints,
-  dt as getViewportDimensions,
-  ut as initializeResponsiveSystem,
-  re as isBreakpointAbove,
-  se as isBreakpointBelow,
-  w as isResponsiveValue,
-  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
+  o as AdvancedBreakpointUtils,
+  r as BreakpointPresets,
+  t as BrowserCompatibility,
+  n as CSSInjector,
+  p as Container,
+  v as DEFAULT_BREAKPOINTS,
+  R as Flex,
+  d as LayoutPatterns,
+  l as MediaQueries,
+  u as MediaQueryModifier,
+  g as OptimizedCSSGenerator,
+  y as RESPONSIVE_MODIFIER_PRIORITY,
+  c as ResponsiveAdvanced,
+  B as ResponsiveCSSGenerator,
+  M as ResponsiveContainerPatterns,
+  S as ResponsiveDataUtils,
+  k as ResponsiveDevTools,
+  P as ResponsiveFlexPatterns,
+  f as ResponsiveGrid,
+  C as ResponsiveGridPatterns,
+  m as ResponsiveHooks,
+  b as ResponsiveModifier,
+  I as ResponsiveModifierBuilderImpl,
+  T as ResponsivePerformanceMonitor,
+  V as ResponsiveSpacingPatterns,
+  Q as ResponsiveTargeting,
+  x as ResponsiveTypography,
+  _ as ResponsiveTypographyPatterns,
+  A as ResponsiveVisibilityPatterns,
+  D as Spacing,
+  F as Visibility,
+  O as __resetResponsiveSystemForTests,
+  w as __syncResponsiveSignalsForTests,
+  E as breakpointToPixels,
+  h as combineMediaQueries,
+  G as configureBreakpoints,
+  L as createBreakpointContext,
+  U as createMediaQueryModifier,
+  z as createResponsiveBuilder,
+  K as createResponsiveCSSVariables,
+  N as createResponsiveLayoutModifier,
+  j as createResponsiveModifier,
+  q as createResponsivePropertyModifier,
+  H as createResponsiveVisibility,
+  Y as cssRuleCache,
+  J as enableResponsiveDebugOverlay,
+  W as generateCustomMediaQuery,
+  X as generateMediaQuery,
+  Z as generateRangeMediaQuery,
+  $ as generateResponsiveProperty,
+  ee as getBreakpointIndex,
+  se as getBreakpointsAbove,
+  ae as getBreakpointsBelow,
+  ie as getCurrentBreakpoint,
+  oe as getCurrentBreakpointConfig,
+  re as getSortedBreakpoints,
+  te as getViewportDimensions,
+  ne as initializeResponsiveSystem,
+  pe as isBreakpointAbove,
+  ve as isBreakpointBelow,
+  Re as isResponsiveValue,
+  de as isValidBreakpointKey,
+  le as logResponsiveState,
+  ue as orMediaQueries,
+  e as registerResponsiveModifiers,
+  ge as resolveResponsiveValue,
+  ye as useBreakpoint,
+  ce as useMediaQuery,
+  Be as useResponsiveInspector,
+  Me as useResponsiveValue,
+  Se as withResponsive
 };