@tachui/responsive 0.8.1-alpha → 0.8.5-alpha

package/dist/index.js

@@ -1,1460 +1,12 @@
-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 = `
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("@tachui/registry"),ae=require("@tachui/modifiers"),u=require("@tachui/core"),v={Clean:0,Check:1,Dirty:2,Disposed:3};let ke=0;const $e=Math.random().toString(36).substr(2,6);let te=null,ie=null;const Me=new Set;Me.add($e);const I={get currentComputation(){return te},set currentComputation(s){te=s},get currentOwner(){return ie},set currentOwner(s){ie=s}};function ce(){return I.currentComputation}function Oe(){return I.currentOwner}class Ve{id;owner;fn;sources=new Set;observers=new Set;state=v.Dirty;value=void 0;constructor(e,t=null){this.id=++ke,this.fn=e,this.owner=t,t&&!t.disposed&&t.sources.add(this)}execute(){if(this.state===v.Disposed)return this.value;for(const t of this.sources)t&&typeof t=="object"&&"removeObserver"in t&&t.removeObserver(this);this.sources.clear();const e=I.currentComputation;I.currentComputation=this;try{return this.state=v.Clean,this.value=this.fn(),this.value}catch(t){throw this.state=v.Disposed,(typeof process>"u"||process.env.NODE_ENV!=="test")&&console.error("Error in computation:",t),t}finally{I.currentComputation=e}}dispose(){if(this.state!==v.Disposed){this.state=v.Disposed;for(const e of this.sources)e&&typeof e=="object"&&"removeObserver"in e&&e.removeObserver(this);this.sources.clear();for(const e of this.observers)e.sources.delete(this);this.observers.clear(),this.owner&&!this.owner.disposed&&this.owner.sources.delete(this)}}}typeof globalThis.__DEV__>"u"&&(globalThis.__DEV__=process.env.NODE_ENV!=="production");const Ee=(s,e)=>s===e;var H=(s=>(s[s.Immediate=0]="Immediate",s[s.High=1]="High",s[s.Normal=2]="Normal",s[s.Low=3]="Low",s[s.Idle=4]="Idle",s))(H||{});class Ie extends Ve{type="computed";priority;_hasValue=!1;_error=null;equalsFn;options;constructor(e,t={},i=Oe()){super(e,i),this.priority=t.priority??H.Normal,this.equalsFn=t.equals??Ee,this.options=t}getValue(){const e=ce();return e&&e.state!==v.Disposed&&(this.observers.add(e),e.sources.add(this)),(this.state===v.Dirty||!this._hasValue)&&(this.execute(),this._hasValue=!0),this.value}peek(){return(this.state===v.Dirty||!this._hasValue)&&(this.execute(),this._hasValue=!0),this.value}removeObserver(e){this.observers.delete(e)}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!==v.Disposed&&(i.state=v.Dirty,"execute"in i&&typeof i.execute=="function"&&queueMicrotask(()=>{i.state===v.Dirty&&i.execute()}));return t}notify(){this.execute()}cleanup(){for(const e of this.sources)"removeObserver"in e&&e.removeObserver(this);this.sources.clear();for(const e of this.observers)e.sources.delete(this);this.observers.clear(),this._hasValue=!1,this._error=null,this.state=v.Disposed}dispose(){this.cleanup(),super.dispose()}[Symbol.for("tachui.debug")](){return{id:this.id,type:this.type,value:this._hasValue?this.value:void 0,hasValue:this._hasValue,error:this._error?.message,state:this.state,sourceCount:this.sources.size,observerCount:this.observers.size,priority:H[this.priority],debugName:this.options.debugName,equalsFn:this.equalsFn.name||"anonymous"}}toString(){return`Computed(${this.options.debugName||this.id}): ${this._hasValue?this.value:"no value"}`}}function Te(s,e){const t=new Ie(s,e),i=t.getValue.bind(t);return i.peek=t.peek.bind(t),Object.defineProperty(i,Symbol.for("tachui.computed"),{value:t,enumerable:!1}),i}let je=0;class Pe{id;observers=new Set;_value;constructor(e){this.id=++je,this._value=e}getValue(){const e=ce();return e&&e.state!==v.Disposed&&(this.observers.add(e),e.sources.add(this)),this._value}peek(){return this._value}set(e){const t=typeof e=="function"?e(this._value):e;return t!==this._value&&(this._value=t,this.notify()),t}notify(){for(const e of this.observers)e.state!==v.Disposed&&(e.state=v.Dirty,De(e))}removeObserver(e){this.observers.delete(e)}[Symbol.for("tachui.debug")](){return{id:this.id,value:this._value,observerCount:this.observers.size,type:"Signal"}}}const z=new Set;let q=!1;function De(s){z.add(s),q||queueMicrotask(_e)}function _e(){if(!q){q=!0;try{for(;z.size>0;){const s=Array.from(z).sort((e,t)=>e.id-t.id);z.clear();for(const e of s)e.state===v.Dirty&&e.execute()}}finally{q=!1}}}function ze(s){const e=new Pe(s),t=e.getValue.bind(e);t.peek=e.peek.bind(e);const i=e.set.bind(e);return Object.defineProperty(t,Symbol.for("tachui.signal"),{value:e,enumerable:!1}),[t,i]}const[qe,Ct]=ze("light");Te(()=>{const s=qe();return s==="system"?Le():s});function Le(){return typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}process.env.NODE_ENV,process.env.NODE_ENV;process.env.NODE_ENV==="development"&&console.log("📤 Created RegistryAdapter for globalModifierRegistry",{registryId:Q.globalModifierRegistry.instanceId,currentSize:Q.globalModifierRegistry.list().length});const Ne="0.8.1-alpha",Ae=Ne,re=new WeakSet,se=new WeakMap,Qe={name:"@tachui/core",version:Ae,author:"TachUI Team",verified:!0};function He(s){re.has(s)||(s.setFeatureFlags({metadataRegistration:!0}),re.add(s))}function We(s,e){let t=se.get(s);t||(t=new Set,se.set(s,t)),!t.has(e.name)&&(s.registerPlugin(e),t.add(e.name))}function Fe(s,e,t,i=Q.globalModifierRegistry,r=Qe){He(i),We(i,r),i.has(s)||i.register(s,e),i.getMetadata(s)||i.registerMetadata({...t,name:s,plugin:r.name})}const Ge="0.8.0-alpha",Ue=Ge,U={base:"0px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};function S(s){return typeof s=="object"&&s!==null&&!Array.isArray(s)&&Object.keys(s).some(e=>["base","sm","md","lg","xl","2xl"].includes(e))}function W(s){return["base","sm","md","lg","xl","2xl"].includes(s)}let P={...U};const[de,ne]=u.createSignal("base"),[ue,Ke]=u.createSignal({width:0,height:0});function Ze(s){it(s),P={...U,...s},T(),typeof window<"u"&&window.addEventListener("resize",T)}function V(){return{...P}}function x(){return de}function Ye(){return ue}function Xe(){typeof window>"u"||(A(),T(),window.addEventListener("resize",()=>{A(),T()}),window.addEventListener("orientationchange",()=>{setTimeout(()=>{A(),T()},100)}))}function w(){const s=de(),e=ue();return{current:s,width:e.width,height:e.height,isAbove:t=>F(s,t),isBelow:t=>G(s,t),isBetween:(t,i)=>F(s,t)&&G(s,i),matches:t=>window.matchMedia(t).matches}}function L(s){const e=P[s];return e.endsWith("px")?parseInt(e,10):e.endsWith("em")||e.endsWith("rem")?parseInt(e,10)*16:parseInt(e,10)||0}function b(s){return["base","sm","md","lg","xl","2xl"].indexOf(s)}function F(s,e){return b(s)>b(e)}function G(s,e){return b(s)<b(e)}function le(s){return s==="base"?"":`(min-width: ${P[s]})`}function Je(s,e){const t=[];if(s!=="base"&&t.push(`(min-width: ${P[s]})`),e&&e!=="2xl"){const i=["sm","md","lg","xl","2xl"],r=i.indexOf(e);if(r>=0&&r<i.length-1){const o=i[r+1],n=`${L(o)-1}px`;t.push(`(max-width: ${n})`)}}return t.length>0?t.join(" and "):""}function D(){return["base","sm","md","lg","xl","2xl"]}function et(s){const e=D(),t=e.indexOf(s);return t>=0?e.slice(t+1):[]}function tt(s){const e=D(),t=e.indexOf(s);return t>0?e.slice(0,t):[]}function T(){if(typeof window>"u")return;const s=window.innerWidth,e=D().reverse();for(const t of e)if(t==="base"||s>=L(t)){ne(t);return}ne("base")}function A(){typeof window<"u"&&Ke({width:window.innerWidth,height:window.innerHeight})}function it(s){for(const[t,i]of Object.entries(s)){if(!W(t))throw new Error(`Invalid breakpoint key: "${t}". Valid keys are: base, sm, md, lg, xl, 2xl`);if(typeof i!="string")throw new Error(`Breakpoint value for "${t}" must be a string (e.g., "768px")`);if(!i.match(/^\d+(\.\d+)?(px|em|rem|%)$/))throw new Error(`Invalid breakpoint value for "${t}": "${i}". Must be a valid CSS length (e.g., "768px", "48em")`)}const e=Object.keys(s).filter(W).sort((t,i)=>b(t)-b(i));for(let t=1;t<e.length;t++){const i=e[t-1],r=e[t],o=s[i],n=s[r];if(L(i)>=parseInt(n,10))throw new Error(`Breakpoint "${r}" (${n}) must be larger than "${i}" (${o})`)}}const rt={tailwind:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},bootstrap:{sm:"576px",md:"768px",lg:"992px",xl:"1200px","2xl":"1400px"},material:{sm:"600px",md:"960px",lg:"1280px",xl:"1920px","2xl":"2560px"},mobileFocus:{sm:"480px",md:"768px",lg:"1024px",xl:"1200px","2xl":"1440px"}};class K{options;constructor(e){this.options={generateMinified:!1,includeComments:!0,optimizeOutput:!0,mobileFirst:!0,...e}}generateResponsiveCSS(e){const t=[],i=[],r={};let o=!1;for(const[n,a]of Object.entries(e))if(S(a)){o=!0;const c=this.generatePropertyMediaQueries(n,a);t.push(...c.mediaQueries),c.baseStyles&&Object.assign(r,c.baseStyles)}else r[this.toCSSPropertyName(n)]=this.formatCSSValue(n,a);return i.push(...this.generateCSSRules(t,r)),{cssRules:i,mediaQueries:t,fallbackStyles:r,hasResponsiveStyles:o}}generatePropertyMediaQueries(e,t){const i=[],r={},o=D();for(const n of o){const a=t[n];if(a===void 0)continue;const c=this.toCSSPropertyName(e),d=this.formatCSSValue(e,a);if(n==="base")r[c]=d;else{const p=le(n),h={[c]:d};i.push({breakpoint:n,query:p,styles:h,selector:this.options.selector})}}return{mediaQueries:i,baseStyles:Object.keys(r).length>0?r:void 0}}generateCSSRules(e,t){const i=[];if(Object.keys(t).length>0){const o=this.generateCSSRule(this.options.selector,t);i.push(o)}const r=this.groupQueriesByMediaQuery(e);for(const[o,n]of Object.entries(r)){if(o==="")continue;const a={};for(const d of n)Object.assign(a,d.styles);const c=this.generateMediaQueryRule(o,this.options.selector,a);i.push(c)}return i}groupQueriesByMediaQuery(e){const t={};for(const i of e)t[i.query]||(t[i.query]=[]),t[i.query].push(i);return t}generateCSSRule(e,t){const{generateMinified:i,includeComments:r}=this.options,o=i?"":"  ",n=i?"":`
+`,a=i?"":" ";let c=`${e}${a}{${n}`;for(const[d,p]of Object.entries(t))c+=`${o}${d}:${a}${p};${n}`;return c+=`}${n}`,r&&!i&&(c=`/* Base styles (mobile-first) */${n}${c}`),c}generateMediaQueryRule(e,t,i){const{generateMinified:r,includeComments:o}=this.options,n=r?"":"  ",a=r?"":"    ",c=r?"":`
+`,d=r?"":" ";let p=`@media ${e}${d}{${c}`;p+=`${n}${t}${d}{${c}`;for(const[h,m]of Object.entries(i))p+=`${a}${h}:${d}${m};${c}`;return p+=`${n}}${c}`,p+=`}${c}`,o&&!r&&(p=`/* ${this.getBreakpointFromQuery(e)} styles */${c}${p}`),p}toCSSProperty(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}formatCSSValue(e,t){if(t==null)return"inherit";if(typeof t=="number"){const i=["opacity","z-index","font-weight","line-height","flex-grow","flex-shrink","order","grid-column-start","grid-column-end","grid-row-start","grid-row-end"],r=this.toCSSProperty(e);if(i.includes(r))return this.addImportantIfNeeded(e,t.toString());if(["width","height","min-width","max-width","min-height","max-height","padding","margin","border-width","border-radius","top","right","bottom","left","font-size","letter-spacing","text-indent"].some(n=>r.includes(n)))return this.addImportantIfNeeded(e,`${t}px`)}return this.addImportantIfNeeded(e,t.toString())}addImportantIfNeeded(e,t){const i=["flexDirection","flex-direction","justifyContent","justify-content","alignItems","align-items","display"],r=this.toCSSProperty(e);return i.includes(e)||i.includes(r)?`${t} !important`:t}toCSSPropertyName(e){return this.toCSSProperty(e)}getBreakpointFromQuery(e){const t=V();for(const[i,r]of Object.entries(t))if(e.includes(r))return i;return"custom"}}function st(s,e,t,i){if(!S(t)){const a=e.replace(/[A-Z]/g,d=>`-${d.toLowerCase()}`),c=typeof t=="number"?`${t}px`:t.toString();return[`${s} { ${a}: ${c}; }`]}const r=new K({selector:s,...i}),o={[e]:t};return r.generateResponsiveCSS(o).cssRules}function nt(s,e,t){const{generateMinified:i=!1}=t||{},r=i?"":"  ",o=i?"":`
+`,n=i?"":" ";let a=`@media ${e.query}${n}{${o}`;a+=`${r}${s}${n}{${o}`;for(const[c,d]of Object.entries(e.styles)){const p=c.replace(/[A-Z]/g,m=>`-${m.toLowerCase()}`),h=typeof d=="number"?`${d}px`:d.toString();a+=`${r}${r}${p}:${n}${h};${o}`}return a+=`${r}}${o}`,a+=`}${o}`,a}class Z{static styleSheet=null;static injectedRules=new Set;static getStyleSheet(){if(this.styleSheet)return this.styleSheet;const e=document.createElement("style");return e.setAttribute("data-tachui-responsive","true"),document.head.appendChild(e),this.styleSheet=e.sheet,this.styleSheet}static injectCSS(e){if(typeof document>"u")return;const t=this.getStyleSheet();for(const i of e)if(!this.injectedRules.has(i))try{t.insertRule(i,t.cssRules.length),this.injectedRules.add(i)}catch(r){console.warn("Failed to inject CSS rule:",i,r)}}static clearCSS(){if(this.styleSheet){for(;this.styleSheet.cssRules.length>0;)this.styleSheet.deleteRule(0);this.injectedRules.clear()}}static hasRule(e){return this.injectedRules.has(e)}}class ot{cache=new Map;hitCount=0;missCount=0;get(e){const t=this.cache.get(e);return t?this.hitCount++:this.missCount++,t}set(e,t){this.cache.set(e,t)}clear(){this.cache.clear(),this.hitCount=0,this.missCount=0}getStats(){return{size:this.cache.size,hitRate:this.hitCount/(this.hitCount+this.missCount)||0,hits:this.hitCount,misses:this.missCount}}}const k=new ot;class at{static BATCH_SIZE=50;static ruleQueue=[];static flushTimer=null;static generateOptimizedCSS(e,t,i={}){const{minify:r=process.env.NODE_ENV==="production",batch:o=!0,deduplicate:n=!0}=i,a=this.createCacheKey(e,t,{minify:r});if(n){const d=k.get(a);if(d)return d}const c=this.generateCSS(e,t,{minify:r});return n&&k.set(a,c),o&&c.trim()?(this.addToBatch(c),""):c}static createCacheKey(e,t,i){return JSON.stringify({selector:e,config:t,options:i})}static generateCSS(e,t,i){const{minify:r=!1}=i,o=r?"":"  ",n=r?"":`
+`,a=r?"":" ";let c="";const d=new Set,p=this.extractBaseStyles(t);Object.keys(p).length>0&&(c+=`${e}${a}{${n}`,c+=this.generateProperties(p,o,n,a),c+=`}${n}`);for(const[h,m]of Object.entries(t))if(typeof m=="object"&&m!==null)for(const[y,C]of Object.entries(m)){if(y==="base")continue;const M=this.getMediaQuery(y),E=`${M}:${h}`;d.has(E)||(c+=`@media ${M}${a}{${n}`,c+=`${o}${e}${a}{${n}`,c+=`${o}${o}${this.propertyToCSS(h)}:${a}${this.valueToCSS(C)};${n}`,c+=`${o}}${n}`,c+=`}${n}`,d.add(E))}return c}static addToBatch(e){this.ruleQueue.push(e),this.ruleQueue.length>=this.BATCH_SIZE?this.flushBatch():this.flushTimer||(this.flushTimer=window.setTimeout(()=>this.flushBatch(),16))}static flushBatch(){if(this.ruleQueue.length===0)return;const e=this.ruleQueue.join("");this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null),this.injectCSS(e)}static injectCSS(e){if(typeof document>"u")return;let t=document.getElementById("tachui-responsive-styles");t||(t=document.createElement("style"),t.id="tachui-responsive-styles",t.type="text/css",document.head.appendChild(t)),t.appendChild(document.createTextNode(e))}static extractBaseStyles(e){const t={};for(const[i,r]of Object.entries(e))typeof r!="object"||r===null?t[i]=r:"base"in r&&(t[i]=r.base);return t}static generateProperties(e,t,i,r){let o="";for(const[n,a]of Object.entries(e))a!==void 0&&(o+=`${t}${this.propertyToCSS(n)}:${r}${this.valueToCSS(a)};${i}`);return o}static propertyToCSS(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}static valueToCSS(e){return typeof e=="number"?`${e}px`:e.toString()}static getMediaQuery(e){return{base:"",sm:"(min-width: 640px)",md:"(min-width: 768px)",lg:"(min-width: 1024px)",xl:"(min-width: 1280px)","2xl":"(min-width: 1536px)"}[e]||e}static flush(){this.flushBatch()}static getStats(){return{cache:k.getStats(),batch:{queueSize:this.ruleQueue.length,batchSize:this.BATCH_SIZE}}}static reset(){k.clear(),this.ruleQueue=[],this.flushTimer&&(clearTimeout(this.flushTimer),this.flushTimer=null)}}class j{static measurements=new Map;static startMeasurement(e){const t=performance.now();return()=>{const i=performance.now()-t;return this.recordMeasurement(e,i),i}}static recordMeasurement(e,t){this.measurements.has(e)||this.measurements.set(e,[]);const i=this.measurements.get(e);i.push(t),i.length>100&&i.shift()}static getStats(){const e={};for(const[t,i]of this.measurements){const r=[...i].sort((n,a)=>n-a),o=i.reduce((n,a)=>n+a,0)/i.length;e[t]={count:i.length,average:o,min:r[0],max:r[r.length-1],p50:r[Math.floor(r.length*.5)],p95:r[Math.floor(r.length*.95)],p99:r[Math.floor(r.length*.99)]}}return e}static reset(){this.measurements.clear()}}const Y=250;class N extends ae.BaseModifier{type="responsive";priority=Y;generatedCSS=null;elementSelector="";_config;constructor(e){super(e),this._config=e}get config(){return this._config}apply(e,t){const i=e.element;!i||!(i instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(i),i.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateAndInjectCSS(),this.setupReactiveUpdates())}generateAndInjectCSS(){const e=j.startMeasurement("css-generation");try{const t=new K({selector:this.elementSelector,generateMinified:process.env.NODE_ENV==="production",includeComments:process.env.NODE_ENV!=="production",optimizeOutput:!0});this.generatedCSS=t.generateResponsiveCSS(this.config),this.generatedCSS.cssRules.length>0&&Z.injectCSS(this.generatedCSS.cssRules)}finally{e()}}setupReactiveUpdates(){this.hasReactiveValues(this.config)&&u.createEffect(()=>{this.trackReactiveDependencies(this.config);const t=this.resolveReactiveConfig(this.config);this.updateConfig(t)})}trackReactiveDependencies(e){let t=!1;for(const[i,r]of Object.entries(e))if(this.isReactiveValue(r))u.isSignal(r)||u.isComputed(r)?r():this.isAsset(r)&&(t=!0,r.resolve());else if(S(r))for(const[o,n]of Object.entries(r))this.isReactiveValue(n)&&(u.isSignal(n)||u.isComputed(n)?n():this.isAsset(n)&&(t=!0,n.resolve()));t&&u.getThemeSignal()()}updateConfig(e){this._config=e,this.generateAndInjectCSS()}generateUniqueSelector(e){return`.${`tachui-responsive-${this.generateUniqueId()}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}generateUniqueId(){return Math.random().toString(36).substr(2,9)}hasReactiveValues(e){for(const t of Object.values(e)){if(this.isReactiveValue(t))return!0;if(S(t)){for(const i of Object.values(t))if(this.isReactiveValue(i))return!0}}return!1}isReactiveValue(e){return!!(u.isSignal(e)||u.isComputed(e)||this.isAsset(e))}isAsset(e){return e!=null&&typeof e=="object"&&"resolve"in e&&typeof e.resolve=="function"}resolveReactiveConfig(e){const t={};for(const[i,r]of Object.entries(e))if(this.isReactiveValue(r))u.isSignal(r)||u.isComputed(r)?t[i]=r():this.isAsset(r)&&(t[i]=r.resolve());else if(S(r)){const o={};for(const[n,a]of Object.entries(r))this.isReactiveValue(a)?u.isSignal(a)||u.isComputed(a)?o[n]=a():this.isAsset(a)&&(o[n]=a.resolve()):o[n]=a;t[i]=o}else t[i]=r;return t}getGeneratedCSS(){return this.generatedCSS}getConfig(){return this.config}}function f(s){return new N(s)}class pe extends ae.BaseModifier{type="media-query";priority=Y+1;elementSelector="";constructor(e,t){super({query:e,styles:t})}get query(){return this.properties.query}get styles(){return this.properties.styles}apply(e,t){const i=e.element;!i||!(i instanceof HTMLElement)||(this.elementSelector=this.generateUniqueSelector(i),i.classList.add(this.getClassFromSelector(this.elementSelector)),this.generateMediaQueryCSS())}generateMediaQueryCSS(){const{generateMinified:e=process.env.NODE_ENV==="production"}={},t=e?"":"  ",i=e?"":"    ",r=e?"":`
+`,o=e?"":" ";let n=`@media ${this.query}${o}{${r}`;n+=`${t}${this.elementSelector}${o}{${r}`;for(const[a,c]of Object.entries(this.styles)){const d=a.replace(/[A-Z]/g,h=>`-${h.toLowerCase()}`),p=typeof c=="number"?`${c}px`:c.toString();n+=`${i}${d}:${o}${p};${r}`}n+=`${t}}${r}`,n+=`}${r}`,Z.injectCSS([n])}generateUniqueSelector(e){return`.${`tachui-mq-${Math.random().toString(36).substr(2,9)}`}`}getClassFromSelector(e){return e.replace(/^\./,"")}}function R(s,e){return new pe(s,e)}function l(s,e){const t={[s]:e};return new N(t)}function X(s){const e={};return s.direction&&(e.flexDirection=s.direction),s.wrap&&(e.flexWrap=s.wrap),s.justify&&(e.justifyContent=s.justify),s.align&&(e.alignItems=s.align),s.gap&&(e.gap=s.gap),new N(e)}class J{constructor(e){return this.baseBuilder=e,new Proxy(this,{get(t,i){if(i==="base"||i==="sm"||i==="md"||i==="lg"||i==="xl"||i==="2xl"||i in t)return t[i];const r=t.baseBuilder[i];return typeof r=="function"?(...o)=>{const n=r.apply(t.baseBuilder,o);return n===t.baseBuilder?t:n}:r}})}addModifier(e){this.baseBuilder.addModifier(e)}build(){return this.baseBuilder.build()}responsive(e){const t=f(e);return this.baseBuilder.addModifier(t),this}mediaQuery(e,t){const i=R(e,t);return this.baseBuilder.addModifier(i),this}orientation(e,t){const i=`(orientation: ${e})`,r=R(i,t);return this.baseBuilder.addModifier(r),this}colorScheme(e,t){const i=`(prefers-color-scheme: ${e})`,r=R(i,t);return this.baseBuilder.addModifier(r),this}reducedMotion(e){const i=R("(prefers-reduced-motion: reduce)",e);return this.baseBuilder.addModifier(i),this}highContrast(e){const i=R("(prefers-contrast: high)",e);return this.baseBuilder.addModifier(i),this}touchDevice(e){const i=R("(pointer: coarse)",e);return this.baseBuilder.addModifier(i),this}mouseDevice(e){const i=R("(pointer: fine)",e);return this.baseBuilder.addModifier(i),this}retina(e){const i=R("(min-resolution: 2dppx)",e);return this.baseBuilder.addModifier(i),this}print(e){const i=R("print",e);return this.baseBuilder.addModifier(i),this}responsiveLayout(e){const t=X(e);return this.baseBuilder.addModifier(t),this}responsiveWidth(e){const t=l("width",e);return this.baseBuilder.addModifier(t),this}responsiveHeight(e){const t=l("height",e);return this.baseBuilder.addModifier(t),this}responsiveSize(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsivePadding(e){if(S(e)||typeof e=="string"||typeof e=="number"){const t=l("padding",e);this.baseBuilder.addModifier(t)}else{const t={},i=e;i.all&&(t.padding=i.all),i.horizontal&&(t.paddingLeft=i.horizontal,t.paddingRight=i.horizontal),i.vertical&&(t.paddingTop=i.vertical,t.paddingBottom=i.vertical),i.top&&(t.paddingTop=i.top),i.right&&(t.paddingRight=i.right),i.bottom&&(t.paddingBottom=i.bottom),i.left&&(t.paddingLeft=i.left);const r=f(t);this.baseBuilder.addModifier(r)}return this}responsiveMargin(e){if(S(e)||typeof e=="string"||typeof e=="number"){const t=l("margin",e);this.baseBuilder.addModifier(t)}else{const t={},i=e;i.all&&(t.margin=i.all),i.horizontal&&(t.marginLeft=i.horizontal,t.marginRight=i.horizontal),i.vertical&&(t.marginTop=i.vertical,t.marginBottom=i.vertical),i.top&&(t.marginTop=i.top),i.right&&(t.marginRight=i.right),i.bottom&&(t.marginBottom=i.bottom),i.left&&(t.marginLeft=i.left);const r=f(t);this.baseBuilder.addModifier(r)}return this}responsiveFont(e){const t=f(e);return this.baseBuilder.addModifier(t),this}responsiveFontSize(e){const t=l("fontSize",e);return this.baseBuilder.addModifier(t),this}responsiveTextAlign(e){const t=l("textAlign",e);return this.baseBuilder.addModifier(t),this}get base(){return new O("base",this,this.baseBuilder)}get sm(){return new O("sm",this,this.baseBuilder)}get md(){return new O("md",this,this.baseBuilder)}get lg(){return new O("lg",this,this.baseBuilder)}get xl(){return new O("xl",this,this.baseBuilder)}get"2xl"(){return new O("2xl",this,this.baseBuilder)}}class O{constructor(e,t,i){this.breakpoint=e,this.parentBuilder=t,this.baseBuilder=i}width(e){const t={[this.breakpoint]:e},i=l("width",t);return this.parentBuilder.addModifier(i),this.parentBuilder}height(e){const t={[this.breakpoint]:e},i=l("height",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minWidth(e){const t={[this.breakpoint]:e},i=l("minWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxWidth(e){const t={[this.breakpoint]:e},i=l("maxWidth",t);return this.parentBuilder.addModifier(i),this.parentBuilder}minHeight(e){const t={[this.breakpoint]:e},i=l("minHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}maxHeight(e){const t={[this.breakpoint]:e},i=l("maxHeight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}padding(e){const t={[this.breakpoint]:e},i=l("padding",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingHorizontal(e){const t={[this.breakpoint]:e},i=l("paddingLeft",t),r=l("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}paddingVertical(e){const t={[this.breakpoint]:e},i=l("paddingTop",t),r=l("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}paddingTop(e){const t={[this.breakpoint]:e},i=l("paddingTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingBottom(e){const t={[this.breakpoint]:e},i=l("paddingBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingLeft(e){const t={[this.breakpoint]:e},i=l("paddingLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}paddingRight(e){const t={[this.breakpoint]:e},i=l("paddingRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}margin(e){const t={[this.breakpoint]:e},i=l("margin",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginHorizontal(e){const t={[this.breakpoint]:e},i=l("marginLeft",t),r=l("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}marginVertical(e){const t={[this.breakpoint]:e},i=l("marginTop",t),r=l("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder.addModifier(r),this.parentBuilder}marginTop(e){const t={[this.breakpoint]:e},i=l("marginTop",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginBottom(e){const t={[this.breakpoint]:e},i=l("marginBottom",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginLeft(e){const t={[this.breakpoint]:e},i=l("marginLeft",t);return this.parentBuilder.addModifier(i),this.parentBuilder}marginRight(e){const t={[this.breakpoint]:e},i=l("marginRight",t);return this.parentBuilder.addModifier(i),this.parentBuilder}fontSize(e){const t={[this.breakpoint]:e},i=l("fontSize",t);return this.parentBuilder.addModifier(i),this.parentBuilder}textAlign(e){const t={[this.breakpoint]:e},i=l("textAlign",t);return this.parentBuilder.addModifier(i),this.parentBuilder}display(e){const t={[this.breakpoint]:e},i=l("display",t);return this.parentBuilder.addModifier(i),this.parentBuilder}flexDirection(e){const t={[this.breakpoint]:e},i=l("flexDirection",t);return this.parentBuilder.addModifier(i),this.parentBuilder}justifyContent(e){const t={[this.breakpoint]:e},i=l("justifyContent",t);return this.parentBuilder.addModifier(i),this.parentBuilder}alignItems(e){const t={[this.breakpoint]:e},i=l("alignItems",t);return this.parentBuilder.addModifier(i),this.parentBuilder}backgroundColor(e){const t={[this.breakpoint]:e},i=l("backgroundColor",t);return this.parentBuilder.addModifier(i),this.parentBuilder}color(e){const t={[this.breakpoint]:e},i=l("color",t);return this.parentBuilder.addModifier(i),this.parentBuilder}opacity(e){const t={[this.breakpoint]:e},i=l("opacity",t);return this.parentBuilder.addModifier(i),this.parentBuilder}}function ct(s){return new J(s)}function dt(s){return new J(s)}function ut(){const s=x(),e=u.createComputed(()=>w());return{current:s,context:e,isAbove:n=>u.createComputed(()=>b(s())>b(n)),isBelow:n=>u.createComputed(()=>b(s())<b(n)),isBetween:(n,a)=>u.createComputed(()=>{const c=b(s()),d=b(n),p=b(a);return c>=d&&c<=p}),matches:n=>{const[a,c]=u.createSignal(!1);if(typeof window<"u"){const d=window.matchMedia(n);c(d.matches);const p=h=>c(h.matches);d.addEventListener("change",p)}return a}}}function lt(s){const[e,t]=u.createSignal(!1);if(typeof window<"u"){const i=window.matchMedia(s);t(i.matches);const r=o=>t(o.matches);i.addEventListener("change",r)}return e}function pt(s){const e=x();return u.createComputed(()=>{if(!S(s))return s;const t=e(),i=s,r=["base","sm","md","lg","xl","2xl"],o=r.indexOf(t);for(let n=o;n>=0;n--){const a=r[n];if(i[a]!==void 0)return i[a]}for(const n of r)if(i[n]!==void 0)return i[n];throw new Error("No responsive value found for any breakpoint")})}function ht(s,e){if(!S(s))return s;const t=s,i=e||x()(),r=["base","sm","md","lg","xl","2xl"],o=r.indexOf(i);for(let n=o;n>=0;n--){const a=r[n];if(t[a]!==void 0)return t[a]}for(const n of r)if(t[n]!==void 0)return t[n];throw new Error("No responsive value found for any breakpoint")}function ft(s,e){const t={};for(const[i,r]of Object.entries(e))if(S(r)){const o=r;for(const[n,a]of Object.entries(o))if(a!==void 0){const c=n==="base"?`--${s}-${i}`:`--${s}-${i}-${n}`;t[c]=a.toString()}}else t[`--${s}-${i}`]=r.toString();return t}const g={mobile:"(max-width: 767px)",tablet:"(min-width: 768px) and (max-width: 1023px)",desktop:"(min-width: 1024px)",landscape:"(orientation: landscape)",portrait:"(orientation: portrait)",highDPI:"(min-resolution: 2dppx)",lowDPI:"(max-resolution: 1dppx)",retinaDisplay:"(min-resolution: 2dppx)",standardDisplay:"(max-resolution: 1.9dppx)",darkMode:"(prefers-color-scheme: dark)",lightMode:"(prefers-color-scheme: light)",noColorSchemePreference:"(prefers-color-scheme: no-preference)",reducedMotion:"(prefers-reduced-motion: reduce)",allowMotion:"(prefers-reduced-motion: no-preference)",highContrast:"(prefers-contrast: high)",lowContrast:"(prefers-contrast: low)",normalContrast:"(prefers-contrast: no-preference)",reduceData:"(prefers-reduced-data: reduce)",allowData:"(prefers-reduced-data: no-preference)",reduceTransparency:"(prefers-reduced-transparency: reduce)",allowTransparency:"(prefers-reduced-transparency: no-preference)",canHover:"(hover: hover)",noHover:"(hover: none)",finePointer:"(pointer: fine)",coarsePointer:"(pointer: coarse)",anyCanHover:"(any-hover: hover)",anyNoHover:"(any-hover: none)",anyFinePointer:"(any-pointer: fine)",anyCoarsePointer:"(any-pointer: coarse)",slowUpdate:"(update: slow)",fastUpdate:"(update: fast)",blockScrolling:"(overflow-block: scroll)",blockPaged:"(overflow-block: paged)",inlineScrolling:"(overflow-inline: scroll)",forcedColors:"(forced-colors: active)",normalColors:"(forced-colors: none)",invertedColors:"(inverted-colors: inverted)",normalInvertedColors:"(inverted-colors: none)",scriptingEnabled:"(scripting: enabled)",scriptingDisabled:"(scripting: none)",scriptingInitialOnly:"(scripting: initial-only)",containerSmall:"(max-width: 400px)",containerMedium:"(min-width: 401px) and (max-width: 800px)",containerLarge:"(min-width: 801px)",minWidth:s=>`(min-width: ${s}${typeof s=="number"?"px":""})`,maxWidth:s=>`(max-width: ${s}${typeof s=="number"?"px":""})`,between:(s,e)=>`(min-width: ${s}${typeof s=="number"?"px":""}) and (max-width: ${e}${typeof e=="number"?"px":""})`,minHeight:s=>`(min-height: ${s}${typeof s=="number"?"px":""})`,maxHeight:s=>`(max-height: ${s}${typeof s=="number"?"px":""})`,heightBetween:(s,e)=>`(min-height: ${s}${typeof s=="number"?"px":""}) and (max-height: ${e}${typeof e=="number"?"px":""})`,square:"(aspect-ratio: 1/1)",landscape16_9:"(aspect-ratio: 16/9)",portrait9_16:"(aspect-ratio: 9/16)",widescreen:"(min-aspect-ratio: 16/9)",tallscreen:"(max-aspect-ratio: 9/16)",customAspectRatio:s=>`(aspect-ratio: ${s})`,minAspectRatio:s=>`(min-aspect-ratio: ${s})`,maxAspectRatio:s=>`(max-aspect-ratio: ${s})`,lowRes:"(max-resolution: 120dpi)",standardRes:"(min-resolution: 120dpi) and (max-resolution: 192dpi)",highRes:"(min-resolution: 192dpi)",customResolution:s=>`(min-resolution: ${s}dpi)`,print:"print",screen:"screen",speech:"speech",iPhone:"(max-width: 428px)",iPad:"(min-width: 768px) and (max-width: 1024px)",desktopSmall:"(min-width: 1024px) and (max-width: 1440px)",desktopLarge:"(min-width: 1440px)",touchDevice:"(pointer: coarse)",mouseDevice:"(pointer: fine)",keyboardNavigation:"(hover: none) and (pointer: coarse)",wideColorGamut:"(color-gamut: p3)",standardColorGamut:"(color-gamut: srgb)",hdr:"(dynamic-range: high)",sdr:"(dynamic-range: standard)"};function mt(...s){return s.filter(e=>e).join(" and ")}function gt(...s){return s.filter(e=>e).join(", ")}function vt(s){const e=x();return u.createComputed(()=>{const t=e();return!(s.hideOn&&s.hideOn.includes(t)||s.showOn&&!s.showOn.includes(t))})}function he(){if(typeof window>"u")return;const s=w();console.group("🔍 tachUI Responsive State"),console.log("Current breakpoint:",s.current),console.log("Viewport dimensions:",`${s.width}x${s.height}`),console.log("Available breakpoints:",["base","sm","md","lg","xl","2xl"]);const e={Mobile:g.mobile,Tablet:g.tablet,Desktop:g.desktop,"Dark mode":g.darkMode,"Reduced motion":g.reducedMotion,"Can hover":g.canHover};console.log("Media query matches:");for(const[t,i]of Object.entries(e))console.log(`  ${t}: ${window.matchMedia(i).matches}`);console.groupEnd()}function bt(s={}){if(typeof window>"u"||process.env.NODE_ENV==="production")return;const{position:e="top-right",showDimensions:t=!0,showBreakpoint:i=!0}=s,r=document.createElement("div");r.id="tachui-responsive-debug",r.style.cssText=`
     position: fixed;
-    ${e.includes("top") ? "top: 10px" : "bottom: 10px"};
-    ${e.includes("right") ? "right: 10px" : "left: 10px"};
+    ${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;
@@ -1464,662 +16,11 @@ function Qe(r = {}) {
     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 = `
+  `,document.body.appendChild(r);function o(){const n=w();let a="";i&&(a+=`Breakpoint: ${n.current}`),t&&(a&&(a+=`
+`),a+=`Size: ${n.width}×${n.height}`),r.textContent=a}o(),window.addEventListener("resize",o),he()}class ee{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",f(t)}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),f(i)}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),f(t)}}class fe{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),f(i)}static wrap(e){const t={display:"flex",flexWrap:"wrap",...e};return f(t)}static center(e="row"){return f({display:"flex",flexDirection:e,justifyContent:"center",alignItems:"center"})}static spaceBetween(e="row"){return f({display:"flex",flexDirection:e,justifyContent:"space-between",alignItems:"center"})}}class me{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),f(t)}static fullWidth(){return f({width:"100vw",marginLeft:"calc(-50vw + 50%)",marginRight:"calc(-50vw + 50%)"})}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"),f(t)}}class ge{static showOn(e){const t={display:{}};for(const i of e)t.display[i]="block";return f(t)}static hideOn(e){const t={display:{}};for(const i of e)t.display[i]="none";return f(t)}static mobileOnly(){return f({display:{base:"block",md:"none"}})}static desktopOnly(){return f({display:{base:"none",md:"block"}})}static tabletOnly(){return f({display:{base:"none",md:"block",lg:"none"}})}}class ve{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),f(t)}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),f(t)}static gap(e){const t={};return e.all&&(t.gap=e.all),e.column&&(t.columnGap=e.column),e.row&&(t.rowGap=e.row),f(t)}}class be{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),f(t)}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 f({fontSize:`clamp(${r}, calc(${r} + (${o} - ${r}) * ((100vw - ${t}) / (${i} - ${t}))), ${o})`})}}const yt={sidebar:s=>{const e=s?.collapseBreakpoint||"md",t=s?.sidebarWidth||"250px";return f({display:"grid",gridTemplateColumns:{base:"1fr",[e]:`${t} 1fr`},gap:s?.gap||"1rem"})},holyGrail:s=>{const e=s?.collapseBreakpoint||"lg";return f({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"})},cardGrid:s=>ee.autoFit({minColumnWidth:s?.minCardWidth||"300px",gap:s?.gap||"1rem",maxColumns:s?.maxColumns}),hero:s=>f({display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:s?.textAlign||"center",minHeight:s?.minHeight||"50vh",padding:s?.padding||"2rem"})};class B{static createResponsiveResolver(e,t=[]){const i=x();return u.createComputed(()=>{t.forEach(n=>n());const r=i(),o=w();return e(r,o)})}static createInterpolatedValue(e,t={}){const{smoothing:i="linear",clamp:r=!0}=t;return u.createComputed(()=>{const n=w().width,a=V(),c=[];for(const[y,C]of Object.entries(e))if(C!==void 0){const M=y==="base"?0:parseInt(a[y]||"0");c.push({width:M,value:C})}if(c.sort((y,C)=>y.width-C.width),c.length===0)return 0;if(c.length===1)return c[0].value;let d=c[0],p=c[c.length-1];for(let y=0;y<c.length-1;y++)if(n>=c[y].width&&n<=c[y+1].width){d=c[y],p=c[y+1];break}if(r){if(n<=d.width)return d.value;if(n>=p.width)return p.value}const h=(n-d.width)/(p.width-d.width);let m=h;switch(i){case"ease":m=.5-.5*Math.cos(h*Math.PI);break;case"ease-in":m=h*h;break;case"ease-out":m=1-(1-h)*(1-h);break;case"linear":default:m=h;break}return d.value+(p.value-d.value)*m})}static createConditionalResponsive(e,t,i){const r=x();return u.createComputed(()=>{const o=w(),a=e(o)?t:i;return this.resolveResponsiveValue(a,r())})}static resolveResponsiveValue(e,t){if(!S(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 ye{static useResponsiveArray(e){const t=x();return u.createComputed(()=>{const i=t();return B.resolveResponsiveValue(e,i)||[]})}static useResponsiveObject(e){const t=x();return u.createComputed(()=>{const i=t();try{return B.resolveResponsiveValue(e,i)}catch{return null}})}static useResponsiveFunction(e){const t=x();return u.createComputed(()=>{const i=t();try{return B.resolveResponsiveValue(e,i)}catch{return null}})}static useResponsiveState(e){const[t,i]=u.createSignal(e),r=x();return[u.createComputed(()=>{const a=t(),c=r();try{return B.resolveResponsiveValue(a,c)}catch{return}}),a=>{S(a)?i(a):i({[r()]:a})}]}static useResponsiveComputation(e,t=[]){return u.createMemo(()=>{t.forEach(r=>r());const i=w();return e(i)})}static useResponsiveEffect(e,t=[]){let i,r;u.createEffect(()=>{t.forEach(a=>a());const o=w();i&&(i(),i=void 0);const n=e(o,r);typeof n=="function"&&(i=n),r=o})}}class xe{static onBreakpoints(e,t){let i;return u.createEffect(()=>{const r=w();if(e.includes(r.current)){i&&(i(),i=void 0);const o=t(r);typeof o=="function"&&(i=o)}}),()=>{i&&i()}}static onBreakpointChange(e){let t;return u.createEffect(()=>{const i=w(),r=i.current;t&&t!==r&&e(r,t,i),t=r}),()=>{}}static onBreakpointRange(e,t,i){let r=!1,o,n;return u.createEffect(()=>{const a=w(),c=b(a.current),d=b(e),p=b(t),h=c>=d&&c<=p;if(h&&!r){if(i.onEnter){const m=i.onEnter(a);typeof m=="function"&&(n=m)}r=!0}else!h&&r&&(n&&(n(),n=void 0),o&&(o(),o=void 0),i.onLeave&&i.onLeave(a),r=!1);if(h&&i.onWithin){o&&(o(),o=void 0);const m=i.onWithin(a);typeof m=="function"&&(o=m)}}),()=>{n&&n(),o&&o()}}}class Se{static createResponsivePagination(e,t){const[i,r]=u.createSignal(1),o=x(),n=u.createComputed(()=>{const C=o();return B.resolveResponsiveValue(t,C)}),a=u.createComputed(()=>Math.ceil(e.length/n())),c=u.createComputed(()=>{const C=n(),E=(i()-1)*C,Be=E+C;return e.slice(E,Be)}),d=u.createComputed(()=>i()<a()),p=u.createComputed(()=>i()>1),h=C=>{const M=a();r(Math.max(1,Math.min(C,M)))},m=()=>{d()&&r(i()+1)},y=()=>{p()&&r(i()-1)};return u.createEffect(()=>{n(),r(1)}),{currentPage:i,totalPages:a,currentItems:c,setPage:h,nextPage:m,prevPage:y,hasNext:d,hasPrev:p}}static createResponsiveFilter(e,t){const i=x();return u.createComputed(()=>{const r=i(),o=B.resolveResponsiveValue(t,r);return o?e.filter(o):e})}static createResponsiveSort(e,t){const i=x();return u.createComputed(()=>{const r=i(),o=B.resolveResponsiveValue(t,r);return o?[...e].sort(o):e})}}const xt={Breakpoints:B,Hooks:ye,Targeting:xe,Data:Se};class ${static isEnabled=!1;static debugOverlay=null;static logLevel="info";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()}static disable(){this.isEnabled=!1,this.debugOverlay&&(this.debugOverlay.remove(),this.debugOverlay=null),this.disableElementHighlighting(),this.log("info","ResponsiveDevTools: Disabled")}static get enabled(){return this.isEnabled&&process.env.NODE_ENV!=="production"}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)}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"};
+      ${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;
@@ -2132,90 +33,41 @@ class R {
       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 = `
+    `;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 = `
+    `,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)})}static updateDebugOverlay(e){if(!this.debugOverlay)return;const t=w(),i=V();let r=`
       <div style="margin-bottom: 8px; font-weight: bold; color: #4fc3f7;">
         📱 Responsive Debug
       </div>
-    `;
-    if (n += `
+    `;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) {
-      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}
+    `,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 s = z.getStats(), a = k.getStats();
-      if (n += '<div style="margin: 8px 0; font-weight: bold; color: #f06292;">Performance:</div>', n += `
+        `}}if(e.showPerformance){const n=j.getStats(),a=k.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)
+          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 += `
+      `,Object.keys(n).length>0)for(const[c,d]of Object.entries(n))r+=`
             <div style="margin-bottom: 2px;">
-              ${d}: ${c.average.toFixed(2)}ms avg
+              ${c}: ${d.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}
+          `}r+='<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[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 = 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 = `
+      `}this.debugOverlay.innerHTML=r+this.debugOverlay.querySelector("div:last-child")?.outerHTML||""}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;
@@ -2240,299 +92,5 @@ class R {
         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
-};
+    `,document.head.appendChild(e),new MutationObserver(()=>{this.highlightResponsiveElements()}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),this.highlightResponsiveElements()}static disableElementHighlighting(){if(typeof document>"u")return;const e=document.getElementById("tachui-responsive-highlight");e&&e.remove(),document.querySelectorAll(".tachui-responsive-element").forEach(t=>{t.classList.remove("tachui-responsive-element")})}static highlightResponsiveElements(){if(typeof document>"u")return;['[class*="tachui-responsive-"]','[class*="tachui-mq-"]'].forEach(t=>{document.querySelectorAll(t).forEach(i=>{i.classList.contains("tachui-responsive-element")||i.classList.add("tachui-responsive-element")})})}static enablePerformanceMonitoring(){setInterval(()=>{if(!this.enabled)return;const e=j.getStats(),t=k.getStats();this.log("debug","Performance Stats:",{cache:t,performance:e})},5e3)}static logResponsiveState(){if(!this.enabled)return;const e=w(),t=V();if(console.group("🔍 TachUI Responsive State"),console.log("Current breakpoint:",e.current),console.log("Viewport:",`${e.width}×${e.height}`),console.log("Configuration:",t),typeof window<"u"&&window.matchMedia){const i={Mobile: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[r,o]of Object.entries(i))try{console.log(`  ${r}: ${window.matchMedia(o).matches}`)}catch{console.log(`  ${r}: Error testing query`)}}console.groupEnd()}static inspectResponsiveValue(e,t){if(!this.enabled)return;const i=x();if(console.group(`🔍 Responsive Value${t?` - ${t}`:""}`),S(e)){const r=e;console.log("Responsive object:",r);const o=["base","sm","md","lg","xl","2xl"],n=o.indexOf(i());let a;for(let c=n;c>=0;c--){const d=o[c];if(r[d]!==void 0){a=r[d],console.log(`Resolved value (${d}):`,a);break}}console.log("Defined breakpoints:");for(const[c,d]of Object.entries(r))if(d!==void 0){const p=c===i();console.log(`  ${p?"→":" "} ${c}:`,d)}}else console.log("Static value:",e);console.groupEnd()}static testResponsiveBehavior(e,t=["base","sm","md","lg","xl","2xl"]){if(!this.enabled)return{};const i={};return t.forEach(r=>{this.log("debug",`Testing breakpoint ${r}:`,e)}),i}static exportConfiguration(){const e=w(),t=V(),i=j.getStats(),r=k.getStats(),o={};if(typeof window<"u"&&window.matchMedia){for(const[n,a]of Object.entries(g))if(typeof a=="string")try{o[n]=window.matchMedia(a).matches}catch{o[n]=!1}}return{breakpoints:t,currentContext:e,performance:{cache:r,timings:i},mediaQueries:o}}}function we(s,e){const t=x();return u.createComputed(()=>{const i=t(),r=S(s);let o,n={};if(r){const a=s;n=a;const c=["base","sm","md","lg","xl","2xl"],d=c.indexOf(i);for(let p=d;p>=0;p--){const h=c[p];if(a[h]!==void 0){o=a[h];break}}}else o=s,n={[i]:o};return $.enabled&&e&&$.inspectResponsiveValue(s,e),{resolvedValue:o,activeBreakpoint:i,allValues:n,isResponsive:r}})}class Ce{static testCSSFeatures(){if(typeof window>"u"||typeof CSS>"u"||!CSS.supports)return{};const e={};try{e.cssGrid=CSS.supports("display","grid"),e.flexbox=CSS.supports("display","flex"),e.customProperties=CSS.supports("--test","value"),e.viewportUnits=CSS.supports("width","100vw"),e.mediaQueries=typeof window.matchMedia=="function",e.containerQueries=CSS.supports("container-type","inline-size"),e.logicalProperties=CSS.supports("margin-inline-start","1rem")}catch{}return e}static testViewportSizes(e){if(typeof window>"u")return;const t=[{width:320,height:568,name:"iPhone SE"},{width:375,height:667,name:"iPhone 8"},{width:768,height:1024,name:"iPad Portrait"},{width:1024,height:768,name:"iPad Landscape"},{width:1280,height:720,name:"Desktop Small"},{width:1920,height:1080,name:"Desktop Large"}];$.enabled&&$.log("info","Testing viewport sizes:",t),t.forEach(i=>{e(i.width,i.height)})}}typeof window<"u"&&process.env.NODE_ENV!=="production"&&(window.tachUIResponsive={devTools:$,inspector:we,compatibility:Ce,logState:()=>$.logResponsiveState(),export:()=>$.exportConfiguration()});const St={name:"@tachui/responsive",version:Ue,author:"TachUI Team",verified:!0},_=80,wt=[["responsive",f,{category:"layout",priority:_,signature:"(config: ResponsiveStyleConfig) => Modifier",description:"Applies responsive style mappings across configured breakpoints."}],["mediaQuery",R,{category:"layout",priority:_,signature:"(query: string, styles: Record<string, any>) => Modifier",description:"Attaches custom CSS rules for a media query to a component."}],["responsiveProperty",l,{category:"layout",priority:_,signature:"(property: string, value: ResponsiveValue<any>) => Modifier",description:"Creates a responsive modifier from a single style property/value map."}],["responsiveLayout",X,{category:"layout",priority:_,signature:"(config: ResponsiveLayoutConfig) => Modifier",description:"Configures responsive flexbox layout properties such as direction, wrap, and gap."}]];let oe=!1;function Re(s){const e=s?.registry,t=s?.plugin??St,i=s?.force===!0,r=!!(e||s?.plugin);!r&&oe&&!i||(wt.forEach(([o,n,a])=>{Fe(o,n,a,e,t)}),r||(oe=!0))}Re();exports.AdvancedBreakpointUtils=B;exports.BreakpointPresets=rt;exports.BrowserCompatibility=Ce;exports.CSSInjector=Z;exports.Container=me;exports.DEFAULT_BREAKPOINTS=U;exports.Flex=fe;exports.LayoutPatterns=yt;exports.MediaQueries=g;exports.MediaQueryModifier=pe;exports.OptimizedCSSGenerator=at;exports.RESPONSIVE_MODIFIER_PRIORITY=Y;exports.ResponsiveAdvanced=xt;exports.ResponsiveCSSGenerator=K;exports.ResponsiveContainerPatterns=me;exports.ResponsiveDataUtils=Se;exports.ResponsiveDevTools=$;exports.ResponsiveFlexPatterns=fe;exports.ResponsiveGrid=ee;exports.ResponsiveGridPatterns=ee;exports.ResponsiveHooks=ye;exports.ResponsiveModifier=N;exports.ResponsiveModifierBuilderImpl=J;exports.ResponsivePerformanceMonitor=j;exports.ResponsiveSpacingPatterns=ve;exports.ResponsiveTargeting=xe;exports.ResponsiveTypography=be;exports.ResponsiveTypographyPatterns=be;exports.ResponsiveVisibilityPatterns=ge;exports.Spacing=ve;exports.Visibility=ge;exports.breakpointToPixels=L;exports.combineMediaQueries=mt;exports.configureBreakpoints=Ze;exports.createBreakpointContext=w;exports.createMediaQueryModifier=R;exports.createResponsiveBuilder=dt;exports.createResponsiveCSSVariables=ft;exports.createResponsiveLayoutModifier=X;exports.createResponsiveModifier=f;exports.createResponsivePropertyModifier=l;exports.createResponsiveVisibility=vt;exports.cssRuleCache=k;exports.enableResponsiveDebugOverlay=bt;exports.generateCustomMediaQuery=nt;exports.generateMediaQuery=le;exports.generateRangeMediaQuery=Je;exports.generateResponsiveProperty=st;exports.getBreakpointIndex=b;exports.getBreakpointsAbove=et;exports.getBreakpointsBelow=tt;exports.getCurrentBreakpoint=x;exports.getCurrentBreakpointConfig=V;exports.getSortedBreakpoints=D;exports.getViewportDimensions=Ye;exports.initializeResponsiveSystem=Xe;exports.isBreakpointAbove=F;exports.isBreakpointBelow=G;exports.isResponsiveValue=S;exports.isValidBreakpointKey=W;exports.logResponsiveState=he;exports.orMediaQueries=gt;exports.registerResponsiveModifiers=Re;exports.resolveResponsiveValue=ht;exports.useBreakpoint=ut;exports.useMediaQuery=lt;exports.useResponsiveInspector=we;exports.useResponsiveValue=pt;exports.withResponsive=ct;
 //# sourceMappingURL=index.js.map