@tachui/responsive 0.8.0-alpha

package/dist/index.js

@@ -0,0 +1,2538 @@
+import { createSignal as V, createEffect as O, isSignal as T, isComputed as E, getThemeSignal as ne, createComputed as m, createMemo as re, globalModifierRegistry as se } from "@tachui/core";
+import { BaseModifier as F } from "@tachui/modifiers";
+const U = {
+  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 x(r) {
+  return typeof r == "object" && r !== null && !Array.isArray(r) && Object.keys(r).some(
+    (e) => ["base", "sm", "md", "lg", "xl", "2xl"].includes(e)
+  );
+}
+function N(r) {
+  return ["base", "sm", "md", "lg", "xl", "2xl"].includes(r);
+}
+let D = {
+  ...U
+};
+const [G, W] = V("base"), [Z, oe] = V({
+  width: 0,
+  height: 0
+});
+function xe(r) {
+  de(r), D = {
+    ...U,
+    ...r
+  }, I(), typeof window < "u" && window.addEventListener("resize", I);
+}
+function P() {
+  return { ...D };
+}
+function y() {
+  return G;
+}
+function we() {
+  return Z;
+}
+function Se() {
+  typeof window > "u" || (q(), I(), window.addEventListener("resize", () => {
+    q(), I();
+  }), window.addEventListener("orientationchange", () => {
+    setTimeout(() => {
+      q(), I();
+    }, 100);
+  }));
+}
+function w() {
+  const r = G(), e = Z();
+  return {
+    current: r,
+    width: e.width,
+    height: e.height,
+    isAbove: (t) => H(r, t),
+    isBelow: (t) => _(r, t),
+    isBetween: (t, i) => H(r, t) && _(r, i),
+    matches: (t) => window.matchMedia(t).matches
+  };
+}
+function Q(r) {
+  const e = D[r];
+  return e.endsWith("px") ? parseInt(e, 10) : e.endsWith("em") || e.endsWith("rem") ? parseInt(e, 10) * 16 : parseInt(e, 10) || 0;
+}
+function v(r) {
+  return ["base", "sm", "md", "lg", "xl", "2xl"].indexOf(r);
+}
+function H(r, e) {
+  return v(r) > v(e);
+}
+function _(r, e) {
+  return v(r) < v(e);
+}
+function ae(r) {
+  return r === "base" ? "" : `(min-width: ${D[r]})`;
+}
+function Ce(r, e) {
+  const t = [];
+  if (r !== "base" && t.push(`(min-width: ${D[r]})`), e && e !== "2xl") {
+    const i = ["sm", "md", "lg", "xl", "2xl"], n = i.indexOf(e);
+    if (n >= 0 && n < i.length - 1) {
+      const o = i[n + 1], s = `${Q(o) - 1}px`;
+      t.push(`(max-width: ${s})`);
+    }
+  }
+  return t.length > 0 ? t.join(" and ") : "";
+}
+function L() {
+  return ["base", "sm", "md", "lg", "xl", "2xl"];
+}
+function $e(r) {
+  const e = L(), t = e.indexOf(r);
+  return t >= 0 ? e.slice(t + 1) : [];
+}
+function Be(r) {
+  const e = L(), t = e.indexOf(r);
+  return t > 0 ? e.slice(0, t) : [];
+}
+function I() {
+  if (typeof window > "u")
+    return;
+  const r = window.innerWidth, e = L().reverse();
+  for (const t of e)
+    if (t === "base" || r >= Q(t)) {
+      W(t);
+      return;
+    }
+  W("base");
+}
+function q() {
+  typeof window < "u" && oe({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+}
+function de(r) {
+  for (const [t, i] of Object.entries(r)) {
+    if (!N(t))
+      throw new Error(
+        `Invalid breakpoint key: "${t}". Valid keys are: base, sm, md, lg, xl, 2xl`
+      );
+    if (typeof i != "string")
+      throw new Error(
+        `Breakpoint value for "${t}" must be a string (e.g., "768px")`
+      );
+    if (!i.match(/^\d+(\.\d+)?(px|em|rem|%)$/))
+      throw new Error(
+        `Invalid breakpoint value for "${t}": "${i}". Must be a valid CSS length (e.g., "768px", "48em")`
+      );
+  }
+  const e = Object.keys(r).filter(N).sort((t, i) => v(t) - v(i));
+  for (let t = 1; t < e.length; t++) {
+    const i = e[t - 1], n = e[t], o = r[i], s = r[n];
+    if (Q(i) >= parseInt(s, 10))
+      throw new Error(
+        `Breakpoint "${n}" (${s}) must be larger than "${i}" (${o})`
+      );
+  }
+}
+const ke = {
+  // 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 K {
+  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 = [], n = {};
+    let o = !1;
+    for (const [s, a] of Object.entries(e))
+      if (x(a)) {
+        o = !0;
+        const d = this.generatePropertyMediaQueries(s, a);
+        t.push(...d.mediaQueries), d.baseStyles && Object.assign(n, d.baseStyles);
+      } else
+        n[this.toCSSPropertyName(s)] = this.formatCSSValue(
+          s,
+          a
+        );
+    return i.push(...this.generateCSSRules(t, n)), {
+      cssRules: i,
+      mediaQueries: t,
+      fallbackStyles: n,
+      hasResponsiveStyles: o
+    };
+  }
+  /**
+   * Generate media queries for a single property
+   */
+  generatePropertyMediaQueries(e, t) {
+    const i = [], n = {}, o = L();
+    for (const s of o) {
+      const a = t[s];
+      if (a === void 0) continue;
+      const d = this.toCSSPropertyName(e), c = this.formatCSSValue(e, a);
+      if (s === "base")
+        n[d] = c;
+      else {
+        const u = ae(s), p = { [d]: c };
+        i.push({
+          breakpoint: s,
+          query: u,
+          styles: p,
+          selector: this.options.selector
+        });
+      }
+    }
+    return {
+      mediaQueries: i,
+      baseStyles: Object.keys(n).length > 0 ? n : 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 n = this.groupQueriesByMediaQuery(e);
+    for (const [o, s] of Object.entries(n)) {
+      if (o === "") continue;
+      const a = {};
+      for (const c of s)
+        Object.assign(a, c.styles);
+      const d = this.generateMediaQueryRule(
+        o,
+        this.options.selector,
+        a
+      );
+      i.push(d);
+    }
+    return i;
+  }
+  /**
+   * 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: n } = this.options, o = i ? "" : "  ", s = i ? "" : `
+`, a = i ? "" : " ";
+    let d = `${e}${a}{${s}`;
+    for (const [c, u] of Object.entries(t))
+      d += `${o}${c}:${a}${u};${s}`;
+    return d += `}${s}`, n && !i && (d = `/* Base styles (mobile-first) */${s}${d}`), d;
+  }
+  /**
+   * Generate a CSS media query rule
+   */
+  generateMediaQueryRule(e, t, i) {
+    const { generateMinified: n, includeComments: o } = this.options, s = n ? "" : "  ", a = n ? "" : "    ", d = n ? "" : `
+`, c = n ? "" : " ";
+    let u = `@media ${e}${c}{${d}`;
+    u += `${s}${t}${c}{${d}`;
+    for (const [p, f] of Object.entries(i))
+      u += `${a}${p}:${c}${f};${d}`;
+    return u += `${s}}${d}`, u += `}${d}`, o && !n && (u = `/* ${this.getBreakpointFromQuery(e)} styles */${d}${u}`), u;
+  }
+  /**
+   * 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"
+      ], n = this.toCSSProperty(e);
+      if (i.includes(n))
+        return this.addImportantIfNeeded(e, t.toString());
+      if ([
+        "width",
+        "height",
+        "min-width",
+        "max-width",
+        "min-height",
+        "max-height",
+        "padding",
+        "margin",
+        "border-width",
+        "border-radius",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "font-size",
+        "letter-spacing",
+        "text-indent"
+      ].some((s) => n.includes(s)))
+        return this.addImportantIfNeeded(e, `${t}px`);
+    }
+    return this.addImportantIfNeeded(e, t.toString());
+  }
+  /**
+   * 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"
+    ], n = this.toCSSProperty(e);
+    return i.includes(e) || i.includes(n) ? `${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, n] of Object.entries(t))
+      if (e.includes(n))
+        return i;
+    return "custom";
+  }
+}
+function Re(r, e, t, i) {
+  if (!x(t)) {
+    const a = e.replace(
+      /[A-Z]/g,
+      (c) => `-${c.toLowerCase()}`
+    ), d = typeof t == "number" ? `${t}px` : t.toString();
+    return [`${r} { ${a}: ${d}; }`];
+  }
+  const n = new K({ selector: r, ...i }), o = { [e]: t };
+  return n.generateResponsiveCSS(o).cssRules;
+}
+function Me(r, e, t) {
+  const { generateMinified: i = !1 } = t || {}, n = i ? "" : "  ", o = i ? "" : `
+`, s = i ? "" : " ";
+  let a = `@media ${e.query}${s}{${o}`;
+  a += `${n}${r}${s}{${o}`;
+  for (const [d, c] of Object.entries(e.styles)) {
+    const u = d.replace(
+      /[A-Z]/g,
+      (f) => `-${f.toLowerCase()}`
+    ), p = typeof c == "number" ? `${c}px` : c.toString();
+    a += `${n}${n}${u}:${s}${p};${o}`;
+  }
+  return a += `${n}}${o}`, a += `}${o}`, a;
+}
+class Y {
+  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 (n) {
+          console.warn("Failed to inject CSS rule:", i, n);
+        }
+  }
+  /**
+   * 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 ce {
+  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 k = new ce();
+class Oe {
+  static BATCH_SIZE = 50;
+  static ruleQueue = [];
+  static flushTimer = null;
+  /**
+   * Generate CSS with caching and batching
+   */
+  static generateOptimizedCSS(e, t, i = {}) {
+    const {
+      minify: n = process.env.NODE_ENV === "production",
+      batch: o = !0,
+      deduplicate: s = !0
+    } = i, a = this.createCacheKey(e, t, { minify: n });
+    if (s) {
+      const c = k.get(a);
+      if (c)
+        return c;
+    }
+    const d = this.generateCSS(e, t, { minify: n });
+    return s && k.set(a, d), o && d.trim() ? (this.addToBatch(d), "") : d;
+  }
+  /**
+   * 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: n = !1 } = i, o = n ? "" : "  ", s = n ? "" : `
+`, a = n ? "" : " ";
+    let d = "";
+    const c = /* @__PURE__ */ new Set(), u = this.extractBaseStyles(t);
+    Object.keys(u).length > 0 && (d += `${e}${a}{${s}`, d += this.generateProperties(u, o, s, a), d += `}${s}`);
+    for (const [p, f] of Object.entries(t))
+      if (typeof f == "object" && f !== null)
+        for (const [b, S] of Object.entries(f)) {
+          if (b === "base") continue;
+          const B = this.getMediaQuery(b), j = `${B}:${p}`;
+          c.has(j) || (d += `@media ${B}${a}{${s}`, d += `${o}${e}${a}{${s}`, d += `${o}${o}${this.propertyToCSS(p)}:${a}${this.valueToCSS(S)};${s}`, d += `${o}}${s}`, d += `}${s}`, c.add(j));
+        }
+    return d;
+  }
+  /**
+   * 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, n] of Object.entries(e))
+      typeof n != "object" || n === null ? t[i] = n : "base" in n && (t[i] = n.base);
+    return t;
+  }
+  /**
+   * Generate CSS properties
+   */
+  static generateProperties(e, t, i, n) {
+    let o = "";
+    for (const [s, a] of Object.entries(e))
+      a !== void 0 && (o += `${t}${this.propertyToCSS(s)}:${n}${this.valueToCSS(a)};${i}`);
+    return o;
+  }
+  /**
+   * 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: k.getStats(),
+      batch: {
+        queueSize: this.ruleQueue.length,
+        batchSize: this.BATCH_SIZE
+      }
+    };
+  }
+  /**
+   * Clear all caches and reset performance counters
+   */
+  static reset() {
+    k.clear(), this.ruleQueue = [], this.flushTimer && (clearTimeout(this.flushTimer), this.flushTimer = null);
+  }
+}
+class z {
+  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 n = [...i].sort((s, a) => s - a), o = i.reduce((s, a) => s + a, 0) / i.length;
+      e[t] = {
+        count: i.length,
+        average: o,
+        min: n[0],
+        max: n[n.length - 1],
+        p50: n[Math.floor(n.length * 0.5)],
+        p95: n[Math.floor(n.length * 0.95)],
+        p99: n[Math.floor(n.length * 0.99)]
+      };
+    }
+    return e;
+  }
+  /**
+   * Clear all performance data
+   */
+  static reset() {
+    this.measurements.clear();
+  }
+}
+const X = 250;
+class A extends F {
+  type = "responsive";
+  priority = X;
+  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 = z.startMeasurement("css-generation");
+    try {
+      const t = new K({
+        selector: this.elementSelector,
+        generateMinified: process.env.NODE_ENV === "production",
+        includeComments: process.env.NODE_ENV !== "production",
+        optimizeOutput: !0
+      });
+      this.generatedCSS = t.generateResponsiveCSS(this.config), this.generatedCSS.cssRules.length > 0 && Y.injectCSS(this.generatedCSS.cssRules);
+    } finally {
+      e();
+    }
+  }
+  /**
+   * Set up reactive updates for dynamic responsive values
+   */
+  setupReactiveUpdates() {
+    this.hasReactiveValues(this.config) && O(() => {
+      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, n] of Object.entries(e))
+      if (this.isReactiveValue(n))
+        T(n) || E(n) ? n() : this.isAsset(n) && (t = !0, n.resolve());
+      else if (x(n))
+        for (const [o, s] of Object.entries(n))
+          this.isReactiveValue(s) && (T(s) || E(s) ? s() : this.isAsset(s) && (t = !0, s.resolve()));
+    t && ne()();
+  }
+  /**
+   * 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 (x(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) || E(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, n] of Object.entries(e))
+      if (this.isReactiveValue(n))
+        T(n) || E(n) ? t[i] = n() : this.isAsset(n) && (t[i] = n.resolve());
+      else if (x(n)) {
+        const o = {};
+        for (const [s, a] of Object.entries(n))
+          this.isReactiveValue(a) ? T(a) || E(a) ? o[s] = a() : this.isAsset(a) && (o[s] = a.resolve()) : o[s] = a;
+        t[i] = o;
+      } else
+        t[i] = n;
+    return t;
+  }
+  /**
+   * Get generated CSS information (for debugging)
+   */
+  getGeneratedCSS() {
+    return this.generatedCSS;
+  }
+  /**
+   * Get configuration (for debugging)
+   */
+  getConfig() {
+    return this.config;
+  }
+}
+function h(r) {
+  return new A(r);
+}
+class le extends F {
+  type = "media-query";
+  priority = X + 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 ? "" : "    ", n = e ? "" : `
+`, o = e ? "" : " ";
+    let s = `@media ${this.query}${o}{${n}`;
+    s += `${t}${this.elementSelector}${o}{${n}`;
+    for (const [a, d] of Object.entries(this.styles)) {
+      const c = a.replace(
+        /[A-Z]/g,
+        (p) => `-${p.toLowerCase()}`
+      ), u = typeof d == "number" ? `${d}px` : d.toString();
+      s += `${i}${c}:${o}${u};${n}`;
+    }
+    s += `${t}}${n}`, s += `}${n}`, Y.injectCSS([s]);
+  }
+  generateUniqueSelector(e) {
+    return `.${`tachui-mq-${Math.random().toString(36).substr(2, 9)}`}`;
+  }
+  getClassFromSelector(e) {
+    return e.replace(/^\./, "");
+  }
+}
+function C(r, e) {
+  return new le(r, e);
+}
+function l(r, e) {
+  const t = { [r]: e };
+  return new A(t);
+}
+function J(r) {
+  const e = {};
+  return r.direction && (e.flexDirection = r.direction), r.wrap && (e.flexWrap = r.wrap), r.justify && (e.justifyContent = r.justify), r.align && (e.alignItems = r.align), r.gap && (e.gap = r.gap), new A(e);
+}
+class ee {
+  constructor(e) {
+    return this.baseBuilder = e, new Proxy(this, {
+      get(t, i) {
+        if (i in t || i === "base" || i === "sm" || i === "md" || i === "lg" || i === "xl" || i === "2xl")
+          return t[i];
+        const n = t.baseBuilder[i];
+        return typeof n == "function" ? (...o) => (n.apply(t.baseBuilder, o), t.baseBuilder) : n;
+      }
+    });
+  }
+  // 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 = C(e, t);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  // Advanced media query methods
+  orientation(e, t) {
+    const i = `(orientation: ${e})`, n = C(i, t);
+    return this.baseBuilder.addModifier(n), this;
+  }
+  colorScheme(e, t) {
+    const i = `(prefers-color-scheme: ${e})`, n = C(i, t);
+    return this.baseBuilder.addModifier(n), this;
+  }
+  reducedMotion(e) {
+    const i = C("(prefers-reduced-motion: reduce)", e);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  highContrast(e) {
+    const i = C("(prefers-contrast: high)", e);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  touchDevice(e) {
+    const i = C("(pointer: coarse)", e);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  mouseDevice(e) {
+    const i = C("(pointer: fine)", e);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  retina(e) {
+    const i = C("(min-resolution: 2dppx)", e);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  print(e) {
+    const i = C("print", e);
+    return this.baseBuilder.addModifier(i), this;
+  }
+  // Responsive layout methods
+  responsiveLayout(e) {
+    const t = J(e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  // Responsive dimension methods
+  responsiveWidth(e) {
+    const t = l("width", e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  responsiveHeight(e) {
+    const t = l("height", e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  responsiveSize(e) {
+    const t = h(e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  // Responsive spacing methods
+  responsivePadding(e) {
+    if (x(e) || typeof e == "string" || typeof e == "number") {
+      const t = l(
+        "padding",
+        e
+      );
+      this.baseBuilder.addModifier(t);
+    } else {
+      const t = {}, i = e;
+      i.all && (t.padding = i.all), i.horizontal && (t.paddingLeft = i.horizontal, t.paddingRight = i.horizontal), i.vertical && (t.paddingTop = i.vertical, t.paddingBottom = i.vertical), i.top && (t.paddingTop = i.top), i.right && (t.paddingRight = i.right), i.bottom && (t.paddingBottom = i.bottom), i.left && (t.paddingLeft = i.left);
+      const n = h(t);
+      this.baseBuilder.addModifier(n);
+    }
+    return this;
+  }
+  responsiveMargin(e) {
+    if (x(e) || typeof e == "string" || typeof e == "number") {
+      const t = l(
+        "margin",
+        e
+      );
+      this.baseBuilder.addModifier(t);
+    } else {
+      const t = {}, i = e;
+      i.all && (t.margin = i.all), i.horizontal && (t.marginLeft = i.horizontal, t.marginRight = i.horizontal), i.vertical && (t.marginTop = i.vertical, t.marginBottom = i.vertical), i.top && (t.marginTop = i.top), i.right && (t.marginRight = i.right), i.bottom && (t.marginBottom = i.bottom), i.left && (t.marginLeft = i.left);
+      const n = h(t);
+      this.baseBuilder.addModifier(n);
+    }
+    return this;
+  }
+  // Responsive typography methods
+  responsiveFont(e) {
+    const t = h(e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  responsiveFontSize(e) {
+    const t = l("fontSize", e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  responsiveTextAlign(e) {
+    const t = l("textAlign", e);
+    return this.baseBuilder.addModifier(t), this;
+  }
+  // Breakpoint shorthand methods
+  get base() {
+    return new M("base", this, this.baseBuilder);
+  }
+  get sm() {
+    return new M("sm", this, this.baseBuilder);
+  }
+  get md() {
+    return new M("md", this, this.baseBuilder);
+  }
+  get lg() {
+    return new M("lg", this, this.baseBuilder);
+  }
+  get xl() {
+    return new M("xl", this, this.baseBuilder);
+  }
+  get "2xl"() {
+    return new M("2xl", this, this.baseBuilder);
+  }
+}
+class M {
+  constructor(e, t, i) {
+    this.breakpoint = e, this.parentBuilder = t, this.baseBuilder = i;
+  }
+  // Layout properties
+  width(e) {
+    const t = { [this.breakpoint]: e }, i = l("width", t);
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  height(e) {
+    const t = { [this.breakpoint]: e }, i = l("height", t);
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  minWidth(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "minWidth",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  maxWidth(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "maxWidth",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  minHeight(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "minHeight",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  maxHeight(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "maxHeight",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  padding(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "padding",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  paddingHorizontal(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "paddingLeft",
+      t
+    ), n = l(
+      "paddingRight",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(n), this.baseBuilder;
+  }
+  paddingVertical(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "paddingTop",
+      t
+    ), n = l(
+      "paddingBottom",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(n), this.baseBuilder;
+  }
+  paddingTop(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "paddingTop",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  paddingBottom(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "paddingBottom",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  paddingLeft(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "paddingLeft",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  paddingRight(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "paddingRight",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  margin(e) {
+    const t = { [this.breakpoint]: e }, i = l("margin", t);
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  marginHorizontal(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "marginLeft",
+      t
+    ), n = l(
+      "marginRight",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(n), this.baseBuilder;
+  }
+  marginVertical(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "marginTop",
+      t
+    ), n = l(
+      "marginBottom",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.parentBuilder.addModifier(n), this.baseBuilder;
+  }
+  marginTop(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "marginTop",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  marginBottom(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "marginBottom",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  marginLeft(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "marginLeft",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  marginRight(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "marginRight",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  // Typography properties
+  fontSize(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "fontSize",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  textAlign(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "textAlign",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  // Display properties
+  display(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "display",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  // Flexbox properties
+  flexDirection(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "flexDirection",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  justifyContent(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "justifyContent",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  alignItems(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "alignItems",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  // Visual properties
+  backgroundColor(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "backgroundColor",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  color(e) {
+    const t = { [this.breakpoint]: e }, i = l("color", t);
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+  opacity(e) {
+    const t = { [this.breakpoint]: e }, i = l(
+      "opacity",
+      t
+    );
+    return this.parentBuilder.addModifier(i), this.baseBuilder;
+  }
+}
+function Ve(r) {
+  return new ee(r);
+}
+function je(r) {
+  return new ee(r);
+}
+function Te() {
+  const r = y(), e = m(() => w());
+  return {
+    current: r,
+    context: e,
+    isAbove: (s) => m(
+      () => v(r()) > v(s)
+    ),
+    isBelow: (s) => m(
+      () => v(r()) < v(s)
+    ),
+    isBetween: (s, a) => m(() => {
+      const d = v(r()), c = v(s), u = v(a);
+      return d >= c && d <= u;
+    }),
+    matches: (s) => {
+      const [a, d] = V(!1);
+      if (typeof window < "u") {
+        const c = window.matchMedia(s);
+        d(c.matches);
+        const u = (p) => d(p.matches);
+        c.addEventListener("change", u);
+      }
+      return a;
+    }
+  };
+}
+function Ee(r) {
+  const [e, t] = V(!1);
+  if (typeof window < "u") {
+    const i = window.matchMedia(r);
+    t(i.matches);
+    const n = (o) => t(o.matches);
+    i.addEventListener("change", n);
+  }
+  return e;
+}
+function Pe(r) {
+  const e = y();
+  return m(() => {
+    if (!x(r))
+      return r;
+    const t = e(), i = r, n = [
+      "base",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "2xl"
+    ], o = n.indexOf(t);
+    for (let s = o; s >= 0; s--) {
+      const a = n[s];
+      if (i[a] !== void 0)
+        return i[a];
+    }
+    for (const s of n)
+      if (i[s] !== void 0)
+        return i[s];
+    throw new Error("No responsive value found for any breakpoint");
+  });
+}
+function Ie(r, e) {
+  if (!x(r))
+    return r;
+  const t = r, i = e || y()(), n = [
+    "base",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl"
+  ], o = n.indexOf(i);
+  for (let s = o; s >= 0; s--) {
+    const a = n[s];
+    if (t[a] !== void 0)
+      return t[a];
+  }
+  for (const s of n)
+    if (t[s] !== void 0)
+      return t[s];
+  throw new Error("No responsive value found for any breakpoint");
+}
+function De(r, e) {
+  const t = {};
+  for (const [i, n] of Object.entries(e))
+    if (x(n)) {
+      const o = n;
+      for (const [s, a] of Object.entries(o))
+        if (a !== void 0) {
+          const d = s === "base" ? `--${r}-${i}` : `--${r}-${i}-${s}`;
+          t[d] = a.toString();
+        }
+    } else
+      t[`--${r}-${i}`] = n.toString();
+  return t;
+}
+const g = {
+  // 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: (r) => `(min-width: ${r}${typeof r == "number" ? "px" : ""})`,
+  maxWidth: (r) => `(max-width: ${r}${typeof r == "number" ? "px" : ""})`,
+  between: (r, e) => `(min-width: ${r}${typeof r == "number" ? "px" : ""}) and (max-width: ${e}${typeof e == "number" ? "px" : ""})`,
+  // Height-based queries
+  minHeight: (r) => `(min-height: ${r}${typeof r == "number" ? "px" : ""})`,
+  maxHeight: (r) => `(max-height: ${r}${typeof r == "number" ? "px" : ""})`,
+  heightBetween: (r, e) => `(min-height: ${r}${typeof r == "number" ? "px" : ""}) and (max-height: ${e}${typeof e == "number" ? "px" : ""})`,
+  // 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: (r) => `(aspect-ratio: ${r})`,
+  minAspectRatio: (r) => `(min-aspect-ratio: ${r})`,
+  maxAspectRatio: (r) => `(max-aspect-ratio: ${r})`,
+  // Resolution queries
+  lowRes: "(max-resolution: 120dpi)",
+  standardRes: "(min-resolution: 120dpi) and (max-resolution: 192dpi)",
+  highRes: "(min-resolution: 192dpi)",
+  customResolution: (r) => `(min-resolution: ${r}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 ze(...r) {
+  return r.filter((e) => e).join(" and ");
+}
+function Le(...r) {
+  return r.filter((e) => e).join(", ");
+}
+function qe(r) {
+  const e = y();
+  return m(() => {
+    const t = e();
+    return !(r.hideOn && r.hideOn.includes(t) || r.showOn && !r.showOn.includes(t));
+  });
+}
+function ue() {
+  if (typeof window > "u") return;
+  const r = w();
+  console.group("🔍 tachUI Responsive State"), console.log("Current breakpoint:", r.current), console.log("Viewport dimensions:", `${r.width}x${r.height}`), console.log("Available breakpoints:", ["base", "sm", "md", "lg", "xl", "2xl"]);
+  const e = {
+    Mobile: g.mobile,
+    Tablet: g.tablet,
+    Desktop: g.desktop,
+    "Dark mode": g.darkMode,
+    "Reduced motion": g.reducedMotion,
+    "Can hover": g.canHover
+  };
+  console.log("Media query matches:");
+  for (const [t, i] of Object.entries(e))
+    console.log(`  ${t}: ${window.matchMedia(i).matches}`);
+  console.groupEnd();
+}
+function Qe(r = {}) {
+  if (typeof window > "u" || process.env.NODE_ENV === "production")
+    return;
+  const {
+    position: e = "top-right",
+    showDimensions: t = !0,
+    showBreakpoint: i = !0
+  } = r, n = document.createElement("div");
+  n.id = "tachui-responsive-debug", n.style.cssText = `
+    position: fixed;
+    ${e.includes("top") ? "top: 10px" : "bottom: 10px"};
+    ${e.includes("right") ? "right: 10px" : "left: 10px"};
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 12px;
+    z-index: 9999;
+    pointer-events: none;
+    white-space: pre-line;
+  `, document.body.appendChild(n);
+  function o() {
+    const s = w();
+    let a = "";
+    i && (a += `Breakpoint: ${s.current}`), t && (a && (a += `
+`), a += `Size: ${s.width}×${s.height}`), n.textContent = a;
+  }
+  o(), window.addEventListener("resize", o), ue();
+}
+class pe {
+  /**
+   * Create a responsive grid with automatic column sizing
+   */
+  static autoFit(e) {
+    const t = {};
+    if (typeof e.minColumnWidth == "object") {
+      t.gridTemplateColumns = {};
+      for (const [i, n] of Object.entries(e.minColumnWidth)) {
+        const o = typeof n == "number" ? `${n}px` : n, s = e.maxColumns && typeof e.maxColumns == "object" ? e.maxColumns[i] || "auto" : e.maxColumns || "auto";
+        t.gridTemplateColumns[i] = s === "auto" ? `repeat(auto-fit, minmax(${o}, 1fr))` : `repeat(${s}, minmax(${o}, 1fr))`;
+      }
+    } else {
+      const i = typeof e.minColumnWidth == "number" ? `${e.minColumnWidth}px` : e.minColumnWidth, n = e.maxColumns || "auto";
+      t.gridTemplateColumns = n === "auto" ? `repeat(auto-fit, minmax(${i}, 1fr))` : `repeat(${n}, minmax(${i}, 1fr))`;
+    }
+    return e.gap && (t.gap = e.gap), t.display = "grid", 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(([n, o]) => [
+          n,
+          `repeat(${o}, 1fr)`
+        ])
+      ) : `repeat(${e}, 1fr)`
+    };
+    return t?.gap && (i.gap = t.gap), t?.rowGap && (i.rowGap = t.rowGap), t?.autoRows && (i.gridAutoRows = t.autoRows), 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, n]) => [
+          i,
+          `repeat(${n}, 1fr)`
+        ])
+      ) : `repeat(${e.columns}, 1fr)`,
+      gridAutoRows: "max-content"
+    };
+    return e.gap && (t.gap = e.gap), h(t);
+  }
+}
+class Ae {
+  /**
+   * 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 Ne {
+  /**
+   * 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 We {
+  /**
+   * 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 He {
+  /**
+   * 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 _e {
+  /**
+   * Create responsive font scale
+   */
+  static scale(e) {
+    const t = {
+      fontSize: e.base
+    };
+    if (e.scale && typeof e.scale == "object") {
+      t.fontSize = {};
+      for (const [i, n] of Object.entries(e.scale)) {
+        const o = typeof e.base == "number" ? e.base : parseFloat(e.base);
+        t.fontSize[i] = `${o * n}px`;
+      }
+    }
+    return e.lineHeight && (t.lineHeight = e.lineHeight), h(t);
+  }
+  /**
+   * Create fluid typography that scales smoothly
+   */
+  static fluid(e) {
+    const t = e.minBreakpoint || "320px", i = e.maxBreakpoint || "1200px", n = typeof e.minSize == "number" ? `${e.minSize}px` : e.minSize, o = typeof e.maxSize == "number" ? `${e.maxSize}px` : e.maxSize;
+    return h({
+      fontSize: `clamp(${n}, calc(${n} + (${o} - ${n}) * ((100vw - ${t}) / (${i} - ${t}))), ${o})`
+    });
+  }
+}
+const Fe = {
+  /**
+   * Sidebar layout that collapses on mobile
+   */
+  sidebar: (r) => {
+    const e = r?.collapseBreakpoint || "md", t = r?.sidebarWidth || "250px";
+    return h({
+      display: "grid",
+      gridTemplateColumns: {
+        base: "1fr",
+        [e]: `${t} 1fr`
+      },
+      gap: r?.gap || "1rem"
+    });
+  },
+  /**
+   * Holy grail layout (header, footer, sidebar, main content)
+   */
+  holyGrail: (r) => {
+    const e = r?.collapseBreakpoint || "lg";
+    return h({
+      display: "grid",
+      gridTemplateAreas: {
+        base: '"header" "main" "footer"',
+        [e]: '"header header" "sidebar main" "footer footer"'
+      },
+      gridTemplateRows: {
+        base: `${r?.headerHeight || "auto"} 1fr ${r?.footerHeight || "auto"}`,
+        [e]: `${r?.headerHeight || "auto"} 1fr ${r?.footerHeight || "auto"}`
+      },
+      gridTemplateColumns: {
+        base: "1fr",
+        [e]: `${r?.sidebarWidth || "250px"} 1fr`
+      },
+      minHeight: "100vh"
+    });
+  },
+  /**
+   * Card grid layout
+   */
+  cardGrid: (r) => pe.autoFit({
+    minColumnWidth: r?.minCardWidth || "300px",
+    gap: r?.gap || "1rem",
+    maxColumns: r?.maxColumns
+  }),
+  /**
+   * Hero section layout
+   */
+  hero: (r) => h({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: r?.textAlign || "center",
+    minHeight: r?.minHeight || "50vh",
+    padding: r?.padding || "2rem"
+  })
+};
+class $ {
+  /**
+   * Create a responsive value resolver with custom logic
+   */
+  static createResponsiveResolver(e, t = []) {
+    const i = y();
+    return m(() => {
+      t.forEach((s) => s());
+      const n = i(), o = w();
+      return e(n, o);
+    });
+  }
+  /**
+   * Create responsive value that interpolates between breakpoints
+   */
+  static createInterpolatedValue(e, t = {}) {
+    const { smoothing: i = "linear", clamp: n = !0 } = t;
+    return m(() => {
+      const s = w().width, a = P(), d = [];
+      for (const [b, S] of Object.entries(e))
+        if (S !== void 0) {
+          const B = b === "base" ? 0 : parseInt(a[b] || "0");
+          d.push({ width: B, value: S });
+        }
+      if (d.sort((b, S) => b.width - S.width), d.length === 0) return 0;
+      if (d.length === 1) return d[0].value;
+      let c = d[0], u = d[d.length - 1];
+      for (let b = 0; b < d.length - 1; b++)
+        if (s >= d[b].width && s <= d[b + 1].width) {
+          c = d[b], u = d[b + 1];
+          break;
+        }
+      if (n) {
+        if (s <= c.width) return c.value;
+        if (s >= u.width) return u.value;
+      }
+      const p = (s - c.width) / (u.width - c.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 c.value + (u.value - c.value) * f;
+    });
+  }
+  /**
+   * Create conditional responsive behavior
+   */
+  static createConditionalResponsive(e, t, i) {
+    const n = y();
+    return m(() => {
+      const o = w(), a = e(o) ? t : i;
+      return this.resolveResponsiveValue(a, n());
+    });
+  }
+  /**
+   * Resolve responsive value at specific breakpoint
+   */
+  static resolveResponsiveValue(e, t) {
+    if (!x(e))
+      return e;
+    const i = e, n = [
+      "base",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "2xl"
+    ], o = n.indexOf(t);
+    for (let s = o; s >= 0; s--) {
+      const a = n[s];
+      if (i[a] !== void 0)
+        return i[a];
+    }
+    for (const s of n)
+      if (i[s] !== void 0)
+        return i[s];
+    throw new Error("No responsive value found");
+  }
+}
+class he {
+  /**
+   * Hook for responsive arrays (e.g., responsive grid columns data)
+   */
+  static useResponsiveArray(e) {
+    const t = y();
+    return m(() => {
+      const i = t();
+      return $.resolveResponsiveValue(e, i) || [];
+    });
+  }
+  /**
+   * Hook for responsive object selection
+   */
+  static useResponsiveObject(e) {
+    const t = y();
+    return m(() => {
+      const i = t();
+      try {
+        return $.resolveResponsiveValue(
+          e,
+          i
+        );
+      } catch {
+        return null;
+      }
+    });
+  }
+  /**
+   * Hook for responsive function selection and execution
+   */
+  static useResponsiveFunction(e) {
+    const t = y();
+    return m(() => {
+      const i = t();
+      try {
+        return $.resolveResponsiveValue(
+          e,
+          i
+        );
+      } catch {
+        return null;
+      }
+    });
+  }
+  /**
+   * Hook for responsive state management
+   */
+  static useResponsiveState(e) {
+    const [t, i] = V(e), n = y();
+    return [m(() => {
+      const a = t(), d = n();
+      try {
+        return $.resolveResponsiveValue(
+          a,
+          d
+        );
+      } catch {
+        return;
+      }
+    }), (a) => {
+      x(a) ? i(a) : i({ [n()]: a });
+    }];
+  }
+  /**
+   * Hook for responsive computations with memoization
+   */
+  static useResponsiveComputation(e, t = []) {
+    return re(() => {
+      t.forEach((n) => n());
+      const i = w();
+      return e(i);
+    });
+  }
+  /**
+   * Hook for responsive side effects
+   */
+  static useResponsiveEffect(e, t = []) {
+    let i, n;
+    O(() => {
+      t.forEach((a) => a());
+      const o = w();
+      i && (i(), i = void 0);
+      const s = e(o, n);
+      typeof s == "function" && (i = s), n = o;
+    });
+  }
+}
+class fe {
+  /**
+   * Execute callback only on specific breakpoints
+   */
+  static onBreakpoints(e, t) {
+    let i;
+    return O(() => {
+      const n = w();
+      if (e.includes(n.current)) {
+        i && (i(), i = void 0);
+        const o = t(n);
+        typeof o == "function" && (i = o);
+      }
+    }), () => {
+      i && i();
+    };
+  }
+  /**
+   * Execute callback when breakpoint changes
+   */
+  static onBreakpointChange(e) {
+    let t;
+    return O(() => {
+      const i = w(), n = i.current;
+      t && t !== n && e(n, t, i), t = n;
+    }), () => {
+    };
+  }
+  /**
+   * Execute callback when entering/leaving specific breakpoint ranges
+   */
+  static onBreakpointRange(e, t, i) {
+    let n = !1, o, s;
+    return O(() => {
+      const a = w(), d = v(a.current), c = v(e), u = v(t), p = d >= c && d <= u;
+      if (p && !n) {
+        if (i.onEnter) {
+          const f = i.onEnter(a);
+          typeof f == "function" && (s = f);
+        }
+        n = !0;
+      } else !p && n && (s && (s(), s = void 0), o && (o(), o = void 0), i.onLeave && i.onLeave(a), n = !1);
+      if (p && i.onWithin) {
+        o && (o(), o = void 0);
+        const f = i.onWithin(a);
+        typeof f == "function" && (o = f);
+      }
+    }), () => {
+      s && s(), o && o();
+    };
+  }
+}
+class me {
+  /**
+   * Create responsive pagination
+   */
+  static createResponsivePagination(e, t) {
+    const [i, n] = V(1), o = y(), s = m(() => {
+      const S = o();
+      return $.resolveResponsiveValue(
+        t,
+        S
+      );
+    }), a = m(() => Math.ceil(e.length / s())), d = m(() => {
+      const S = s(), j = (i() - 1) * S, ie = j + S;
+      return e.slice(j, ie);
+    }), c = m(
+      () => i() < a()
+    ), u = m(() => i() > 1), p = (S) => {
+      const B = a();
+      n(Math.max(1, Math.min(S, B)));
+    }, f = () => {
+      c() && n(i() + 1);
+    }, b = () => {
+      u() && n(i() - 1);
+    };
+    return O(() => {
+      s(), n(1);
+    }), {
+      currentPage: i,
+      totalPages: a,
+      currentItems: d,
+      setPage: p,
+      nextPage: f,
+      prevPage: b,
+      hasNext: c,
+      hasPrev: u
+    };
+  }
+  /**
+   * Create responsive filtering
+   */
+  static createResponsiveFilter(e, t) {
+    const i = y();
+    return m(() => {
+      const n = i(), o = $.resolveResponsiveValue(
+        t,
+        n
+      );
+      return o ? e.filter(o) : e;
+    });
+  }
+  /**
+   * Create responsive sorting
+   */
+  static createResponsiveSort(e, t) {
+    const i = y();
+    return m(() => {
+      const n = i(), o = $.resolveResponsiveValue(
+        t,
+        n
+      );
+      return o ? [...e].sort(o) : e;
+    });
+  }
+}
+const Ue = {
+  Breakpoints: $,
+  Hooks: he,
+  Targeting: fe,
+  Data: me
+};
+class R {
+  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"], n = i.indexOf(this.logLevel);
+    i.indexOf(e) <= n && 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 n;
+    window.addEventListener("resize", () => {
+      clearTimeout(n), n = window.setTimeout(() => {
+        this.updateDebugOverlay(e);
+      }, 100);
+    });
+  }
+  /**
+   * Update debug overlay content
+   */
+  static updateDebugOverlay(e) {
+    if (!this.debugOverlay) return;
+    const t = w(), i = P();
+    let n = `
+      <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
+        📱 Responsive Debug
+      </div>
+    `;
+    if (n += `
+      <div style="margin-bottom: 6px;">
+        <strong>Current:</strong> <span style="color: #66bb6a;">${t.current}</span>
+      </div>
+      <div style="margin-bottom: 6px;">
+        <strong>Size:</strong> ${t.width}×${t.height}
+      </div>
+    `, e.showBreakpoints) {
+      n += '<div style="margin: 8px 0; font-weight: bold; color: #ffb74d;">Breakpoints:</div>';
+      for (const [s, a] of Object.entries(i)) {
+        const d = s === t.current;
+        n += `
+          <div style="color: ${d ? "#66bb6a" : "#999"}; margin-bottom: 2px;">
+            ${d ? "▶" : "▷"} ${s}: ${a}
+          </div>
+        `;
+      }
+    }
+    if (e.showPerformance) {
+      const s = z.getStats(), a = k.getStats();
+      if (n += '<div style="margin: 8px 0; font-weight: bold; color: #f06292;">Performance:</div>', n += `
+        <div style="margin-bottom: 2px;">
+          Cache: ${a.size} rules (${(a.hitRate * 100).toFixed(1)}% hit rate)
+        </div>
+      `, Object.keys(s).length > 0)
+        for (const [d, c] of Object.entries(s))
+          n += `
+            <div style="margin-bottom: 2px;">
+              ${d}: ${c.average.toFixed(2)}ms avg
+            </div>
+          `;
+    }
+    n += '<div style="margin: 8px 0; font-weight: bold; color: #ba68c8;">Media Queries:</div>';
+    const o = {
+      Touch: g.touchDevice,
+      Dark: g.darkMode,
+      "Reduced Motion": g.reducedMotion,
+      "High Contrast": g.highContrast
+    };
+    for (const [s, a] of Object.entries(o)) {
+      const d = window.matchMedia(a).matches;
+      n += `
+        <div style="color: ${d ? "#66bb6a" : "#666"}; margin-bottom: 2px;">
+          ${d ? "✓" : "✗"} ${s}
+        </div>
+      `;
+    }
+    this.debugOverlay.innerHTML = n + this.debugOverlay.querySelector("div:last-child")?.outerHTML || "";
+  }
+  /**
+   * 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 = z.getStats(), t = k.getStats();
+      this.log("debug", "Performance Stats:", {
+        cache: t,
+        performance: e
+      });
+    }, 5e3);
+  }
+  /**
+   * Log current responsive state
+   */
+  static logResponsiveState() {
+    if (!this.enabled) return;
+    const e = w(), 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: g.mobile,
+        Tablet: g.tablet,
+        Desktop: g.desktop,
+        "Touch Device": g.touchDevice,
+        "Dark Mode": g.darkMode,
+        "Reduced Motion": g.reducedMotion
+      };
+      console.log("Media Query Results:");
+      for (const [n, o] of Object.entries(i))
+        try {
+          console.log(`  ${n}: ${window.matchMedia(o).matches}`);
+        } catch {
+          console.log(`  ${n}: Error testing query`);
+        }
+    }
+    console.groupEnd();
+  }
+  /**
+   * Inspect a responsive value
+   */
+  static inspectResponsiveValue(e, t) {
+    if (!this.enabled) return;
+    const i = y();
+    if (console.group(`🔍 Responsive Value${t ? ` - ${t}` : ""}`), x(e)) {
+      const n = e;
+      console.log("Responsive object:", n);
+      const o = [
+        "base",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "2xl"
+      ], s = o.indexOf(i());
+      let a;
+      for (let d = s; d >= 0; d--) {
+        const c = o[d];
+        if (n[c] !== void 0) {
+          a = n[c], console.log(`Resolved value (${c}):`, a);
+          break;
+        }
+      }
+      console.log("Defined breakpoints:");
+      for (const [d, c] of Object.entries(n))
+        if (c !== void 0) {
+          const u = d === i();
+          console.log(`  ${u ? "→" : " "} ${d}:`, c);
+        }
+    } 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((n) => {
+      this.log("debug", `Testing breakpoint ${n}:`, e);
+    }), i;
+  }
+  /**
+   * Export responsive configuration for debugging
+   */
+  static exportConfiguration() {
+    const e = w(), t = P(), i = z.getStats(), n = k.getStats(), o = {};
+    if (typeof window < "u" && window.matchMedia) {
+      for (const [s, a] of Object.entries(g))
+        if (typeof a == "string")
+          try {
+            o[s] = window.matchMedia(a).matches;
+          } catch {
+            o[s] = !1;
+          }
+    }
+    return {
+      breakpoints: t,
+      currentContext: e,
+      performance: {
+        cache: n,
+        timings: i
+      },
+      mediaQueries: o
+    };
+  }
+}
+function ge(r, e) {
+  const t = y();
+  return m(() => {
+    const i = t(), n = x(r);
+    let o, s = {};
+    if (n) {
+      const a = r;
+      s = a;
+      const d = [
+        "base",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "2xl"
+      ], c = d.indexOf(i);
+      for (let u = c; u >= 0; u--) {
+        const p = d[u];
+        if (a[p] !== void 0) {
+          o = a[p];
+          break;
+        }
+      }
+    } else
+      o = r, s = { [i]: o };
+    return R.enabled && e && R.inspectResponsiveValue(r, e), {
+      resolvedValue: o,
+      activeBreakpoint: i,
+      allValues: s,
+      isResponsive: n
+    };
+  });
+}
+class be {
+  /**
+   * 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" }
+    ];
+    R.enabled && R.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: R,
+  inspector: ge,
+  compatibility: be,
+  logState: () => R.logResponsiveState(),
+  export: () => R.exportConfiguration()
+});
+const te = [
+  ["responsive", h],
+  ["mediaQuery", C],
+  ["responsiveProperty", l],
+  ["responsiveLayout", J]
+];
+te.forEach(([r, e]) => {
+  se.register(r, e);
+});
+process.env.NODE_ENV !== "production" && console.info(
+  `🔍 [@tachui/responsive] Registered ${te.length} responsive modifiers with global registry`
+);
+export {
+  $ as AdvancedBreakpointUtils,
+  ke as BreakpointPresets,
+  be as BrowserCompatibility,
+  Y as CSSInjector,
+  Ne as Container,
+  U as DEFAULT_BREAKPOINTS,
+  Ae as Flex,
+  Fe as LayoutPatterns,
+  g as MediaQueries,
+  le as MediaQueryModifier,
+  Oe as OptimizedCSSGenerator,
+  X as RESPONSIVE_MODIFIER_PRIORITY,
+  Ue as ResponsiveAdvanced,
+  K as ResponsiveCSSGenerator,
+  Ne as ResponsiveContainerPatterns,
+  me as ResponsiveDataUtils,
+  R as ResponsiveDevTools,
+  Ae as ResponsiveFlexPatterns,
+  pe as ResponsiveGrid,
+  pe as ResponsiveGridPatterns,
+  he as ResponsiveHooks,
+  A as ResponsiveModifier,
+  ee as ResponsiveModifierBuilderImpl,
+  z as ResponsivePerformanceMonitor,
+  He as ResponsiveSpacingPatterns,
+  fe as ResponsiveTargeting,
+  _e as ResponsiveTypography,
+  _e as ResponsiveTypographyPatterns,
+  We as ResponsiveVisibilityPatterns,
+  He as Spacing,
+  We as Visibility,
+  Q as breakpointToPixels,
+  ze as combineMediaQueries,
+  xe as configureBreakpoints,
+  w as createBreakpointContext,
+  C as createMediaQueryModifier,
+  je as createResponsiveBuilder,
+  De as createResponsiveCSSVariables,
+  J as createResponsiveLayoutModifier,
+  h as createResponsiveModifier,
+  l as createResponsivePropertyModifier,
+  qe as createResponsiveVisibility,
+  k as cssRuleCache,
+  Qe as enableResponsiveDebugOverlay,
+  Me as generateCustomMediaQuery,
+  ae as generateMediaQuery,
+  Ce as generateRangeMediaQuery,
+  Re as generateResponsiveProperty,
+  v as getBreakpointIndex,
+  $e as getBreakpointsAbove,
+  Be as getBreakpointsBelow,
+  y as getCurrentBreakpoint,
+  P as getCurrentBreakpointConfig,
+  L as getSortedBreakpoints,
+  we as getViewportDimensions,
+  Se as initializeResponsiveSystem,
+  H as isBreakpointAbove,
+  _ as isBreakpointBelow,
+  x as isResponsiveValue,
+  N as isValidBreakpointKey,
+  ue as logResponsiveState,
+  Le as orMediaQueries,
+  Ie as resolveResponsiveValue,
+  Te as useBreakpoint,
+  Ee as useMediaQuery,
+  ge as useResponsiveInspector,
+  Pe as useResponsiveValue,
+  Ve as withResponsive
+};
+//# sourceMappingURL=index.js.map