@tachui/responsive 0.8.1-alpha → 0.8.8

package/dist/index.mjs

@@ -0,0 +1,2881 @@
+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";
+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 = {
+  get currentComputation() {
+    return K;
+  },
+  set currentComputation(s) {
+    K = s;
+  },
+  get currentOwner() {
+    return Z;
+  },
+  set currentOwner(s) {
+    Z = s;
+  }
+};
+function ne() {
+  return D.currentComputation;
+}
+function xe() {
+  return D.currentOwner;
+}
+class we {
+  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 = ++be, 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 = D.currentComputation;
+    D.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;
+    }
+  }
+  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 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 {
+  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;
+  }
+  /**
+   * Get the computed value, tracking dependency and lazily computing
+   */
+  getValue() {
+    const e = ne();
+    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: F[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 $e(s, e) {
+  const t = new Ce(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 {
+  id;
+  observers = /* @__PURE__ */ new Set();
+  _value;
+  constructor(e) {
+    this.id = ++Be, this._value = e;
+  }
+  /**
+   * Get the current value and track dependency
+   */
+  getValue() {
+    const e = ne();
+    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, Re(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 q = /* @__PURE__ */ new Set();
+let L = !1;
+function Re(s) {
+  q.add(s), L || queueMicrotask(Me);
+}
+function Me() {
+  if (!L) {
+    L = !0;
+    try {
+      for (; q.size > 0; ) {
+        const s = Array.from(q).sort((e, t) => e.id - t.id);
+        q.clear();
+        for (const e of s)
+          e.state === g.Dirty && e.execute();
+      }
+    } finally {
+      L = !1;
+    }
+  }
+}
+function Oe(s) {
+  const e = new ke(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 [Ve, st] = Oe("light");
+$e(() => {
+  const s = Ve();
+  return s === "system" ? Ee() : s;
+});
+function Ee() {
+  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
+});
+const Ie = "0.8.8", Te = Ie, Y = /* @__PURE__ */ new WeakSet(), X = /* @__PURE__ */ new WeakMap(), je = {
+  name: "@tachui/core",
+  version: Te,
+  author: "TachUI Team",
+  verified: !0
+};
+function De(s) {
+  Y.has(s) || (s.setFeatureFlags({
+    metadataRegistration: !0
+  }), Y.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 _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({
+    ...t,
+    name: s,
+    plugin: r.name
+  });
+}
+const ze = "0.8.8", Ne = ze, oe = {
+  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 J(s) {
+  return ["base", "sm", "md", "lg", "xl", "2xl"].includes(s);
+}
+let z = {
+  ...oe
+};
+const [ae, ee] = E("base"), [ce, qe] = E({
+  width: 0,
+  height: 0
+});
+function nt(s) {
+  Ae(s), z = {
+    ...oe,
+    ...s
+  }, _(), typeof window < "u" && window.addEventListener("resize", _);
+}
+function P() {
+  return { ...z };
+}
+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 S() {
+  const s = ae(), e = ce();
+  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),
+    matches: (t) => window.matchMedia(t).matches
+  };
+}
+function G(s) {
+  const e = z[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) {
+  return y(s) > y(e);
+}
+function ie(s, e) {
+  return y(s) < y(e);
+}
+function Le(s) {
+  return s === "base" ? "" : `(min-width: ${z[s]})`;
+}
+function ct(s, e) {
+  const t = [];
+  if (s !== "base" && t.push(`(min-width: ${z[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`;
+      t.push(`(max-width: ${n})`);
+    }
+  }
+  return t.length > 0 ? t.join(" and ") : "";
+}
+function Q() {
+  return ["base", "sm", "md", "lg", "xl", "2xl"];
+}
+function dt(s) {
+  const e = Q(), t = e.indexOf(s);
+  return t >= 0 ? e.slice(t + 1) : [];
+}
+function ut(s) {
+  const e = Q(), t = e.indexOf(s);
+  return t > 0 ? e.slice(0, t) : [];
+}
+function _() {
+  if (typeof window > "u")
+    return;
+  const s = window.innerWidth, e = Q().reverse();
+  for (const t of e)
+    if (t === "base" || s >= G(t)) {
+      ee(t);
+      return;
+    }
+  ee("base");
+}
+function H() {
+  typeof window < "u" && qe({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+}
+function Ae(s) {
+  for (const [t, i] of Object.entries(s)) {
+    if (!J(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(J).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))
+      throw new Error(
+        `Breakpoint "${r}" (${n}) must be larger than "${i}" (${o})`
+      );
+  }
+}
+const lt = {
+  // 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 de {
+  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 = Q();
+    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 = Le(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 = P();
+    for (const [i, r] of Object.entries(t))
+      if (e.includes(r))
+        return i;
+    return "custom";
+  }
+}
+function pt(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 de({ selector: s, ...i }), o = { [e]: t };
+  return r.generateResponsiveCSS(o).cssRules;
+}
+function ht(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 ue {
+  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 Qe {
+  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 Qe();
+class ft {
+  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), 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));
+        }
+    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 le = 250;
+class U extends se {
+  type = "responsive";
+  priority = le;
+  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 de({
+        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);
+    } finally {
+      e();
+    }
+  }
+  /**
+   * Set up reactive updates for dynamic responsive values
+   */
+  setupReactiveUpdates() {
+    this.hasReactiveValues(this.config) && V(() => {
+      this.trackReactiveDependencies(this.config);
+      const t = this.resolveReactiveConfig(this.config);
+      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))
+        T(r) || j(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()();
+  }
+  /**
+   * 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 !!(T(e) || j(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))
+        T(r) || j(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;
+        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 U(s);
+}
+class He extends se {
+  type = "media-query";
+  priority = le + 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}`, ue.injectCSS([n]);
+  }
+  generateUniqueSelector(e) {
+    return `.${`tachui-mq-${Math.random().toString(36).substr(2, 9)}`}`;
+  }
+  getClassFromSelector(e) {
+    return e.replace(/^\./, "");
+  }
+}
+function $(s, e) {
+  return new He(s, e);
+}
+function u(s, e) {
+  const t = { [s]: e };
+  return new U(t);
+}
+function pe(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);
+}
+class he {
+  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 = pe(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 mt(s) {
+  return new he(s);
+}
+function gt(s) {
+  return new he(s);
+}
+function bt() {
+  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] = E(!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 vt(s) {
+  const [e, t] = E(!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 yt(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 xt(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 wt(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 St(...s) {
+  return s.filter((e) => e).join(" and ");
+}
+function Ct(...s) {
+  return s.filter((e) => e).join(", ");
+}
+function $t(s) {
+  const e = x();
+  return m(() => {
+    const t = e();
+    return !(s.hideOn && s.hideOn.includes(t) || s.showOn && !s.showOn.includes(t));
+  });
+}
+function We() {
+  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 Bt(s = {}) {
+  if (typeof window > "u" || process.env.NODE_ENV === "production")
+    return;
+  const {
+    position: e = "top-right",
+    showDimensions: t = !0,
+    showBreakpoint: i = !0
+  } = s, r = document.createElement("div");
+  r.id = "tachui-responsive-debug", r.style.cssText = `
+    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), We();
+}
+class Fe {
+  /**
+   * 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 kt {
+  /**
+   * 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 Rt {
+  /**
+   * 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 Mt {
+  /**
+   * 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 Ot {
+  /**
+   * 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 Vt {
+  /**
+   * 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 Et = {
+  /**
+   * 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) => Fe.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 = P(), 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 Ge {
+  /**
+   * 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] = E(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 ge(() => {
+      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 Ue {
+  /**
+   * 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 Ke {
+  /**
+   * Create responsive pagination
+   */
+  static createResponsivePagination(e, t) {
+    const [i, r] = E(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);
+    }), 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 It = {
+  Breakpoints: B,
+  Hooks: Ge,
+  Targeting: Ue,
+  Data: Ke
+};
+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 = P();
+    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 = P();
+    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 = P(), 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 Ze(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 Ye {
+  /**
+   * 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: Ze,
+  compatibility: Ye,
+  logState: () => M.logResponsiveState(),
+  export: () => M.exportConfiguration()
+});
+const Xe = {
+  name: "@tachui/responsive",
+  version: Ne,
+  author: "TachUI Team",
+  verified: !0
+}, N = 80, Je = [
+  [
+    "responsive",
+    h,
+    {
+      category: "layout",
+      priority: N,
+      signature: "(config: ResponsiveStyleConfig) => Modifier",
+      description: "Applies responsive style mappings across configured breakpoints."
+    }
+  ],
+  [
+    "mediaQuery",
+    $,
+    {
+      category: "layout",
+      priority: N,
+      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: N,
+      signature: "(property: string, value: ResponsiveValue<any>) => Modifier",
+      description: "Creates a responsive modifier from a single style property/value map."
+    }
+  ],
+  [
+    "responsiveLayout",
+    pe,
+    {
+      category: "layout",
+      priority: N,
+      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(
+      o,
+      n,
+      a,
+      e,
+      t
+    );
+  }), r || (re = !0));
+}
+et();
+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,
+  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,
+  M as ResponsiveDevTools,
+  kt as ResponsiveFlexPatterns,
+  Fe as ResponsiveGrid,
+  Fe as ResponsiveGridPatterns,
+  Ge as ResponsiveHooks,
+  U as ResponsiveModifier,
+  he 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,
+  S as createBreakpointContext,
+  $ as createMediaQueryModifier,
+  gt as createResponsiveBuilder,
+  wt as createResponsiveCSSVariables,
+  pe as createResponsiveLayoutModifier,
+  h as createResponsiveModifier,
+  u as createResponsivePropertyModifier,
+  $t as createResponsiveVisibility,
+  R as cssRuleCache,
+  Bt as enableResponsiveDebugOverlay,
+  ht as generateCustomMediaQuery,
+  Le as generateMediaQuery,
+  ct as generateRangeMediaQuery,
+  pt as generateResponsiveProperty,
+  y as getBreakpointIndex,
+  dt as getBreakpointsAbove,
+  ut as getBreakpointsBelow,
+  x as getCurrentBreakpoint,
+  P as getCurrentBreakpointConfig,
+  Q as getSortedBreakpoints,
+  ot as getViewportDimensions,
+  at as initializeResponsiveSystem,
+  te as isBreakpointAbove,
+  ie 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
+};