@kbach/react 0.6.51 → 1.0.0-beta.0

package/dist/vite-plugin.mjs

@@ -1,3363 +1,150 @@
-// src/vite-plugin.ts
-import { readFileSync, writeFileSync, unlinkSync, readdirSync, statSync } from "fs";
-import { join, relative } from "path";
-import processImport from "process";
+import {
+  buildResetCSS,
+  defaultTheme
+} from "./chunk-AFY36PRX.mjs";
 
-// src/core/platform.ts
-var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined" || typeof globalThis.nativeFabricUIManager !== "undefined" || typeof globalThis.__turboModuleProxy !== "undefined" || typeof globalThis.RN$Bridgeless !== "undefined" || typeof globalThis.nativePerformanceNow !== "undefined");
-var _resolveTargetOverride = null;
-function setCSSGenMode(on) {
-  _resolveTargetOverride = on ? "web" : null;
-}
-function getEffectiveIsWeb() {
-  if (_resolveTargetOverride) return _resolveTargetOverride === "web";
-  return isWeb || !isNative;
-}
-function toNativeValue(raw) {
-  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
-  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
-  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
-  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
-  return raw;
-}
-function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-}
-
-// src/core/reset.ts
-var RESET_STYLE_ID = "kbach-reset";
-var BASE_RESET = [
-  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
-  // border-width: 0 keeps all elements borderless by default.
-  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
-  "body { margin: 0; padding: 0; }",
-  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
-  "p { margin: 0; }",
-  "a { color: inherit; text-decoration: none; }",
-  "ul, ol { margin: 0; padding: 0; list-style: none; }",
-  "img, video, svg { display: block; max-width: 100%; }",
-  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
-  // stripping it hides their native checkmark/arrow with nothing rendered in its
-  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
-  // plain text. Text-like inputs, textarea, and button don't have that problem
-  // (their native chrome is just a skin around content utilities can fully
-  // restyle), so they keep the blank-canvas treatment.
-  // :where() wraps the :not() exclusions so they contribute ZERO specificity
-  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
-  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
-  // total, MORE than any single utility class (0,1,0)). Without :where(), this
-  // reset's `color: inherit` always won the cascade over a text-* color
-  // utility applied directly to a <input>/<textarea> regardless of source
-  // order, since author rules only override on a tie or higher specificity —
-  // confirmed on a real app: a TextInput's own text color utility resolved
-  // and injected correctly, class and all, but silently never painted.
-  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  // Native checkbox/radio/range still get typography + spacing normalized, and
-  // accent-color re-themes their native indicator to the current text color
-  // instead of the browser/OS default blue, so they stay on-brand without
-  // needing to be rebuilt from scratch.
-  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
-  // select keeps its native chrome (border/background/arrow are all part of the
-  // same OS-drawn widget that appearance: none would blank out) — only typography
-  // and spacing are normalized so it still matches surrounding text.
-  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
-  "button, [role='button'] { cursor: pointer; }",
-  ":disabled { cursor: default; }",
-  "textarea { resize: vertical; }",
-  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
-  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
-  "::placeholder { opacity: 1; }",
-  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
-  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
-  "fieldset { padding: 0; margin: 0; }",
-  "table { border-collapse: collapse; border-spacing: 0; }"
-].join("\n");
-
-// src/core/theme.ts
-var defaultColors = {
-  transparent: "transparent",
-  current: "currentColor",
-  black: "#000000",
-  white: "#ffffff",
-  slate: {
-    1: "#f8fafc",
-    2: "#f1f5f9",
-    3: "#e2e8f0",
-    4: "#cbd5e1",
-    5: "#94a3b8",
-    6: "#64748b",
-    7: "#475569",
-    8: "#334155",
-    9: "#1e293b",
-    10: "#0f172a",
-    11: "#020617",
-    12: "#01020a"
-  },
-  gray: {
-    1: "#f9fafb",
-    2: "#f3f4f6",
-    3: "#e5e7eb",
-    4: "#d1d5db",
-    5: "#9ca3af",
-    6: "#6b7280",
-    7: "#4b5563",
-    8: "#374151",
-    9: "#1f2937",
-    10: "#111827",
-    11: "#030712",
-    12: "#020409"
-  },
-  zinc: {
-    1: "#fafafa",
-    2: "#f4f4f5",
-    3: "#e4e4e7",
-    4: "#d4d4d8",
-    5: "#a1a1aa",
-    6: "#71717a",
-    7: "#52525b",
-    8: "#3f3f46",
-    9: "#27272a",
-    10: "#18181b",
-    11: "#09090b",
-    12: "#050506"
-  },
-  neutral: {
-    1: "#fafafa",
-    2: "#f5f5f5",
-    3: "#e5e5e5",
-    4: "#d4d4d4",
-    5: "#a3a3a3",
-    6: "#737373",
-    7: "#525252",
-    8: "#404040",
-    9: "#262626",
-    10: "#171717",
-    11: "#0a0a0a",
-    12: "#050505"
-  },
-  stone: {
-    1: "#fafaf9",
-    2: "#f5f5f4",
-    3: "#e7e5e4",
-    4: "#d6d3d1",
-    5: "#a8a29e",
-    6: "#78716c",
-    7: "#57534e",
-    8: "#44403c",
-    9: "#292524",
-    10: "#1c1917",
-    11: "#0c0a09",
-    12: "#070605"
-  },
-  red: {
-    1: "#fef2f2",
-    2: "#fee2e2",
-    3: "#fecaca",
-    4: "#fca5a5",
-    5: "#f87171",
-    6: "#ef4444",
-    7: "#dc2626",
-    8: "#b91c1c",
-    9: "#991b1b",
-    10: "#7f1d1d",
-    11: "#450a0a",
-    12: "#280606"
-  },
-  orange: {
-    1: "#fff7ed",
-    2: "#ffedd5",
-    3: "#fed7aa",
-    4: "#fdba74",
-    5: "#fb923c",
-    6: "#f97316",
-    7: "#ea580c",
-    8: "#c2410c",
-    9: "#9a3412",
-    10: "#7c2d12",
-    11: "#431407",
-    12: "#270c04"
-  },
-  amber: {
-    1: "#fffbeb",
-    2: "#fef3c7",
-    3: "#fde68a",
-    4: "#fcd34d",
-    5: "#fbbf24",
-    6: "#f59e0b",
-    7: "#d97706",
-    8: "#b45309",
-    9: "#92400e",
-    10: "#78350f",
-    11: "#451a03",
-    12: "#291002"
-  },
-  yellow: {
-    1: "#fefce8",
-    2: "#fef9c3",
-    3: "#fef08a",
-    4: "#fde047",
-    5: "#facc15",
-    6: "#eab308",
-    7: "#ca8a04",
-    8: "#a16207",
-    9: "#854d0e",
-    10: "#713f12",
-    11: "#422006",
-    12: "#271304"
-  },
-  lime: {
-    1: "#f7fee7",
-    2: "#ecfccb",
-    3: "#d9f99d",
-    4: "#bef264",
-    5: "#a3e635",
-    6: "#84cc16",
-    7: "#65a30d",
-    8: "#4d7c0f",
-    9: "#3f6212",
-    10: "#365314",
-    11: "#1a2e05",
-    12: "#0f1b03"
-  },
-  green: {
-    1: "#f0fdf4",
-    2: "#dcfce7",
-    3: "#bbf7d0",
-    4: "#86efac",
-    5: "#4ade80",
-    6: "#22c55e",
-    7: "#16a34a",
-    8: "#15803d",
-    9: "#166534",
-    10: "#14532d",
-    11: "#052e16",
-    12: "#031b0d"
-  },
-  emerald: {
-    1: "#ecfdf5",
-    2: "#d1fae5",
-    3: "#a7f3d0",
-    4: "#6ee7b7",
-    5: "#34d399",
-    6: "#10b981",
-    7: "#059669",
-    8: "#047857",
-    9: "#065f46",
-    10: "#064e3b",
-    11: "#022c22",
-    12: "#011a14"
-  },
-  teal: {
-    1: "#f0fdfa",
-    2: "#ccfbf1",
-    3: "#99f6e4",
-    4: "#5eead4",
-    5: "#2dd4bf",
-    6: "#14b8a6",
-    7: "#0d9488",
-    8: "#0f766e",
-    9: "#115e59",
-    10: "#134e4a",
-    11: "#042f2e",
-    12: "#021c1b"
-  },
-  cyan: {
-    1: "#ecfeff",
-    2: "#cffafe",
-    3: "#a5f3fc",
-    4: "#67e8f9",
-    5: "#22d3ee",
-    6: "#06b6d4",
-    7: "#0891b2",
-    8: "#0e7490",
-    9: "#155e75",
-    10: "#164e63",
-    11: "#083344",
-    12: "#041e28"
-  },
-  sky: {
-    1: "#f0f9ff",
-    2: "#e0f2fe",
-    3: "#bae6fd",
-    4: "#7dd3fc",
-    5: "#38bdf8",
-    6: "#0ea5e9",
-    7: "#0284c7",
-    8: "#0369a1",
-    9: "#075985",
-    10: "#0c4a6e",
-    11: "#082f49",
-    12: "#041b2b"
-  },
-  blue: {
-    1: "#eff6ff",
-    2: "#dbeafe",
-    3: "#bfdbfe",
-    4: "#93c5fd",
-    5: "#60a5fa",
-    6: "#3b82f6",
-    7: "#2563eb",
-    8: "#1d4ed8",
-    9: "#1e40af",
-    10: "#1e3a8a",
-    11: "#172554",
-    12: "#0d1633"
-  },
-  indigo: {
-    1: "#eef2ff",
-    2: "#e0e7ff",
-    3: "#c7d2fe",
-    4: "#a5b4fc",
-    5: "#818cf8",
-    6: "#6366f1",
-    7: "#4f46e5",
-    8: "#4338ca",
-    9: "#3730a3",
-    10: "#312e81",
-    11: "#1e1b4b",
-    12: "#12102d"
-  },
-  violet: {
-    1: "#f5f3ff",
-    2: "#ede9fe",
-    3: "#ddd6fe",
-    4: "#c4b5fd",
-    5: "#a78bfa",
-    6: "#8b5cf6",
-    7: "#7c3aed",
-    8: "#6d28d9",
-    9: "#5b21b6",
-    10: "#4c1d95",
-    11: "#2e1065",
-    12: "#1c0a3d"
-  },
-  purple: {
-    1: "#faf5ff",
-    2: "#f3e8ff",
-    3: "#e9d5ff",
-    4: "#d8b4fe",
-    5: "#c084fc",
-    6: "#a855f7",
-    7: "#9333ea",
-    8: "#7e22ce",
-    9: "#6b21a8",
-    10: "#581c87",
-    11: "#3b0764",
-    12: "#23043c"
-  },
-  fuchsia: {
-    1: "#fdf4ff",
-    2: "#fae8ff",
-    3: "#f5d0fe",
-    4: "#f0abfc",
-    5: "#e879f9",
-    6: "#d946ef",
-    7: "#c026d3",
-    8: "#a21caf",
-    9: "#86198f",
-    10: "#701a75",
-    11: "#4a044e",
-    12: "#2d022f"
-  },
-  pink: {
-    1: "#fdf2f8",
-    2: "#fce7f3",
-    3: "#fbcfe8",
-    4: "#f9a8d4",
-    5: "#f472b6",
-    6: "#ec4899",
-    7: "#db2777",
-    8: "#be185d",
-    9: "#9d174d",
-    10: "#831843",
-    11: "#500724",
-    12: "#300415"
-  },
-  rose: {
-    1: "#fff1f2",
-    2: "#ffe4e6",
-    3: "#fecdd3",
-    4: "#fda4af",
-    5: "#fb7185",
-    6: "#f43f5e",
-    7: "#e11d48",
-    8: "#be123c",
-    9: "#9f1239",
-    10: "#881337",
-    11: "#4c0519",
-    12: "#2d030e"
-  }
-};
-var defaultTheme = {
-  colors: defaultColors,
-  // 1 unit = 4px
-  spacing: {
-    px: 1,
-    0: 0,
-    "0.5": 2,
-    1: 4,
-    "1.5": 6,
-    2: 8,
-    "2.5": 10,
-    3: 12,
-    "3.5": 14,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40,
-    11: 44,
-    12: 48,
-    14: 56,
-    16: 64,
-    20: 80,
-    24: 96,
-    28: 112,
-    32: 128,
-    36: 144,
-    40: 160,
-    44: 176,
-    48: 192,
-    52: 208,
-    56: 224,
-    60: 240,
-    64: 256,
-    72: 288,
-    80: 320,
-    96: 384,
-    auto: "auto",
-    full: "100%",
-    "1/2": "50%",
-    "1/3": "33.333333%",
-    "2/3": "66.666667%",
-    "1/4": "25%",
-    "3/4": "75%",
-    // Dynamic viewport unit — see the comment on the 'screen' standalone utilities
-    // in utilities.ts for why dvh beats vh on mobile. Used by h-screen (w-screen
-    // has its own standalone entry so it never reaches this spacing lookup).
-    screen: "100dvh",
-    min: "min-content",
-    max: "max-content",
-    fit: "fit-content"
-  },
-  fontSize: {
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 20,
-    "2xl": 24,
-    "3xl": 30,
-    "4xl": 36,
-    "5xl": 48,
-    "6xl": 60,
-    "7xl": 72,
-    "8xl": 96,
-    "9xl": 128
-  },
-  fontFamily: {
-    sans: "System",
-    mono: "Courier New",
-    serif: "Georgia"
-  },
-  fontWeight: {
-    thin: "100",
-    extralight: "200",
-    light: "300",
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700",
-    extrabold: "800",
-    black: "900"
-  },
-  borderRadius: {
-    none: 0,
-    sm: 2,
-    DEFAULT: 4,
-    md: 6,
-    lg: 8,
-    xl: 12,
-    "2xl": 16,
-    "3xl": 24,
-    full: 9999
-  },
-  borderWidth: {
-    DEFAULT: 1,
-    0: 0,
-    2: 2,
-    4: 4,
-    8: 8
-  },
-  opacity: {
-    0: 0,
-    5: 0.05,
-    10: 0.1,
-    15: 0.15,
-    20: 0.2,
-    25: 0.25,
-    30: 0.3,
-    40: 0.4,
-    50: 0.5,
-    60: 0.6,
-    70: 0.7,
-    75: 0.75,
-    80: 0.8,
-    90: 0.9,
-    95: 0.95,
-    100: 1
-  },
-  lineHeight: {
-    none: 1,
-    tight: 1.25,
-    snug: 1.375,
-    normal: 1.5,
-    relaxed: 1.625,
-    loose: 2,
-    // Pixel values stored as strings; styleValueToCSS passes them through, toNativeValue strips the unit
-    3: "12px",
-    4: "16px",
-    5: "20px",
-    6: "24px",
-    7: "28px",
-    8: "32px",
-    9: "36px",
-    10: "40px"
-  },
-  letterSpacing: {
-    tighter: -0.8,
-    tight: -0.4,
-    normal: 0,
-    wide: 0.4,
-    wider: 0.8,
-    widest: 1.6
-  },
-  zIndex: {
-    auto: "auto",
-    0: 0,
-    10: 10,
-    20: 20,
-    30: 30,
-    40: 40,
-    50: 50
-  },
-  flex: {
-    1: 1,
-    auto: "auto",
-    // CSS: flex: auto = 1 1 auto; native: mapped to 1 in resolver
-    initial: "initial",
-    // CSS: flex: initial = 0 1 auto; native: mapped to 1
-    none: "none"
-    // CSS: flex: none = 0 0 auto; native: mapped to 0
-  },
-  shadow: {
-    sm: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
-      shadowRadius: 2,
-      elevation: 1
-    },
-    DEFAULT: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 4,
-      elevation: 2
-    },
-    md: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 3
-    },
-    lg: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 8 },
-      shadowOpacity: 0.1,
-      shadowRadius: 15,
-      elevation: 4
-    },
-    xl: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 16 },
-      shadowOpacity: 0.1,
-      shadowRadius: 24,
-      elevation: 6
-    },
-    "2xl": {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 24 },
-      shadowOpacity: 0.25,
-      shadowRadius: 48,
-      elevation: 8
-    },
-    none: {
-      shadowColor: "transparent",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0,
-      shadowRadius: 0,
-      elevation: 0
-    }
-  },
-  screens: {
-    sm: 576,
-    // small tablets / large phones (landscape)
-    md: 768,
-    // tablets (iPad and up)
-    lg: 1024,
-    // large tablets (iPad Pro)
-    xl: 1280,
-    // desktop
-    "2xl": 1536
-  },
-  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
-  // directly in the `animate` resolver, not through this theme table. This exists so
-  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
-  // alongside them without needing to redeclare the built-ins.
-  keyframes: {},
-  animation: {}
-};
-
-// src/core/colorValue.ts
-function isModeAwareColor(v) {
-  return typeof v === "object" && v !== null && "light" in v && "dark" in v;
-}
-function splitColorShadeRef(ref) {
-  const lastDash = ref.lastIndexOf("-");
-  if (lastDash <= 0) return null;
-  return { name: ref.slice(0, lastDash), shade: ref.slice(lastDash + 1) };
-}
-
-// src/core/resolvers/color.ts
-function pickModeAwareFallback(v) {
-  return isModeAwareColor(v) ? v.light : v;
-}
-function resolveColor(value, colors, isArbitrary) {
-  if (isArbitrary) return value;
-  const slashIdx = value.indexOf("/");
-  const colorPart = slashIdx > 0 ? value.slice(0, slashIdx) : value;
-  const opacityPart = slashIdx > 0 ? value.slice(slashIdx + 1) : null;
-  let hex = null;
-  if (colorPart.startsWith("[") && colorPart.endsWith("]")) {
-    hex = colorPart.slice(1, -1);
-  } else if (colorPart in colors) {
-    const entry = colors[colorPart];
-    if (typeof entry === "string") hex = entry;
-    else if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
-    else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(entry["6"]);
-  } else {
-    const split = splitColorShadeRef(colorPart);
-    if (split) {
-      const scale = colors[split.name];
-      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && split.shade in scale) {
-        const shadeVal = scale[split.shade];
-        hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
-      }
-    }
-  }
-  if (!hex) return null;
-  if (!opacityPart) {
-    if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
-      return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
-    }
-    return hex;
-  }
-  let alpha;
-  if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
-    const v = parseFloat(opacityPart.slice(1, -1));
-    alpha = v > 1 ? v / 100 : v;
-  } else {
-    alpha = parseFloat(opacityPart) / 100;
-  }
-  if (isNaN(alpha)) return hex;
-  if (alpha < 0) alpha = 0;
-  else if (alpha > 1) alpha = 1;
-  return hexToRgba(hex, alpha);
-}
-function parseHexRgb(hex) {
-  const h = hex.replace("#", "");
-  if (h.length === 3 || h.length === 4) {
-    return [
-      parseInt(h[0] + h[0], 16),
-      parseInt(h[1] + h[1], 16),
-      parseInt(h[2] + h[2], 16)
-    ];
-  }
-  if (h.length === 6 || h.length === 8) {
-    return [
-      parseInt(h.slice(0, 2), 16),
-      parseInt(h.slice(2, 4), 16),
-      parseInt(h.slice(4, 6), 16)
-    ];
-  }
-  return null;
-}
-function hexToRgba(hex, alpha) {
-  const rgb = parseHexRgb(hex);
-  if (!rgb) return hex;
-  const [r, g, b] = rgb;
-  return `rgba(${r},${g},${b},${alpha})`;
-}
-function withOpacityVar(color, varName) {
-  if (!color.startsWith("#")) return color;
-  const rgb = parseHexRgb(color);
-  if (!rgb) return color;
-  const [r, g, b] = rgb;
-  return `rgba(${r},${g},${b},var(${varName},1))`;
-}
-var colorResolvers = {
-  // ── Background ─────────────────────────────────────────────────────────────
-  bg: ({ value, isArbitrary }, { colors }) => {
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
-  },
-  "bg-opacity": ({ value, isArbitrary }, _) => {
-    if (!getEffectiveIsWeb()) return null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
-    return { "--bg-opacity": v };
-  },
-  // ── Background gradient (CSS variable gradient stops, web-only) ──────────
-  "bg-gradient-to": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const directions = {
-      t: "to top",
-      tr: "to top right",
-      r: "to right",
-      br: "to bottom right",
-      b: "to bottom",
-      bl: "to bottom left",
-      l: "to left",
-      tl: "to top left"
-    };
-    const dir = directions[value];
-    if (!dir) return null;
-    return {
-      backgroundImage: `linear-gradient(${dir}, var(--kb-gradient-from, transparent), var(--kb-gradient-stops, transparent))`
-    };
-  },
-  from: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return {
-      "--kb-gradient-from": color,
-      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-to, transparent)`
-    };
-  },
-  via: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return {
-      "--kb-gradient-via": color,
-      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-via), var(--kb-gradient-to, transparent)`
-    };
-  },
-  to: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return { "--kb-gradient-to": color };
-  },
-  // ── Tint color (native-only, for Image and icon components) ──────────────
-  tint: ({ value, isArbitrary }, { colors }) => {
-    if (getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { tintColor: color } : null;
-  },
-  // ── Caret color (web-only) ────────────────────────────────────────────────
-  caret: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto" || value === "transparent") return { caretColor: value };
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { caretColor: color } : null;
-  },
-  // ── Accent color (web-only) ───────────────────────────────────────────────
-  accent: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { accentColor: "auto" };
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { accentColor: color } : null;
-  }
-};
-
-// src/core/resolvers/spacing.ts
-function resolveSpacing(value, negative, spacing, isArbitrary) {
-  if (isArbitrary) {
-    const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
-    if (negative) {
-      if (typeof resolved === "number") return -resolved;
-      if (typeof resolved === "string") {
-        if (resolved.startsWith("-")) return resolved.slice(1);
-        if (/^\d/.test(resolved)) return `-${resolved}`;
-        if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
-      }
-    }
-    return resolved;
-  }
-  const raw = spacing[value];
-  if (raw === void 0) return null;
-  if (typeof raw === "number") return negative ? -raw : raw;
-  if (raw === "auto") return "auto";
-  if (negative && typeof raw === "string" && raw.endsWith("%")) {
-    return `-${raw}`;
-  }
-  return raw;
-}
-function resolveSizing(value, spacing, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  const raw = spacing[value];
-  if (raw !== void 0) return raw;
-  if (/^\d+\/\d+$/.test(value)) {
-    const [num, den] = value.split("/").map(Number);
-    if (!den) return null;
-    return `${(num / den * 100).toFixed(6)}%`;
-  }
-  return null;
-}
-function makeSpacingResolver(prop) {
-  return ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { [prop]: v } : null;
-  };
-}
-var PADDING_MARGIN_PROPS = {
-  p: "padding",
-  px: "paddingHorizontal",
-  py: "paddingVertical",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  m: "margin",
-  mx: "marginHorizontal",
-  my: "marginVertical",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft"
-};
-var spacingResolvers = {
-  // ── Sizing ─────────────────────────────────────────────────────────────────
-  w: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { width: v } : null;
-  },
-  h: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { height: v } : null;
-  },
-  "min-w": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { minWidth: v } : null;
-  },
-  "min-h": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { minHeight: v } : null;
-  },
-  "max-w": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { maxWidth: v } : null;
-  },
-  "max-h": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { maxHeight: v } : null;
-  },
-  // ── Size shorthand (sets width AND height in one utility) ────────────────
-  size: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { width: v, height: v } : null;
-  },
-  // ── Flex basis ─────────────────────────────────────────────────────────────
-  basis: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { flexBasis: v } : null;
-  },
-  // ── Gap ────────────────────────────────────────────────────────────────────
-  gap: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { gap: v } : null;
-  },
-  "gap-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { columnGap: v } : null;
-  },
-  "gap-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { rowGap: v } : null;
-  },
-  // ── Position ───────────────────────────────────────────────────────────────
-  top: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v } : null;
-  },
-  right: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { right: v } : null;
-  },
-  bottom: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { bottom: v } : null;
-  },
-  left: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { left: v } : null;
-  },
-  inset: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v, right: v, bottom: v, left: v } : null;
-  },
-  "inset-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { left: v, right: v } : null;
-  },
-  "inset-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v, bottom: v } : null;
-  },
-  // ── Translate ──────────────────────────────────────────────────────────────
-  "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateX(${typeof v === "number" ? `${v}px` : v})` };
-    if (typeof v === "string") {
-      const n = parseFloat(v);
-      return isNaN(n) ? null : { transform: [{ translateX: n }] };
-    }
-    return { transform: [{ translateX: v }] };
-  },
-  "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateY(${typeof v === "number" ? `${v}px` : v})` };
-    if (typeof v === "string") {
-      const n = parseFloat(v);
-      return isNaN(n) ? null : { transform: [{ translateY: n }] };
-    }
-    return { transform: [{ translateY: v }] };
-  },
-  // ── Space between ─────────────────────────────────────────────────────────
-  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
-  // On native (RN 0.71+): uses columnGap/rowGap directly.
-  "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { __spaceX: v };
-    return { columnGap: v };
-  },
-  "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { __spaceY: v };
-    return { rowGap: v };
-  }
-};
-for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
-  spacingResolvers[utility] = makeSpacingResolver(prop);
-}
-
-// src/core/resolvers/border.ts
-function resolveRadius(value, radii, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  const key = value === "" ? "DEFAULT" : value;
-  return radii[key] ?? null;
-}
-function makeBorderSideResolver(widthProp, colorProp) {
-  return ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { [widthProp]: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { [widthProp]: getEffectiveIsWeb() ? value : w2 };
-      return { [colorProp]: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { [colorProp]: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { [widthProp]: w } : null;
-  };
-}
-var BORDER_SIDE_PROPS = {
-  "border-t": ["borderTopWidth", "borderTopColor"],
-  "border-r": ["borderRightWidth", "borderRightColor"],
-  "border-b": ["borderBottomWidth", "borderBottomColor"],
-  "border-l": ["borderLeftWidth", "borderLeftColor"]
-};
-var borderResolvers = {
-  // ── Border width ───────────────────────────────────────────────────────────
-  border: ({ value, isArbitrary }, { colors, borderWidth, spacing }) => {
-    if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderWidth: getEffectiveIsWeb() ? value : w2 };
-      return { borderColor: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { borderColor: color };
-    const w = borderWidth[value] ?? spacing[value];
-    if (w !== void 0) {
-      const numW = typeof w === "number" ? w : parseFloat(String(w));
-      if (isNaN(numW)) return null;
-      return { borderWidth: numW };
-    }
-    return null;
-  },
-  // border-t/-r/-b/-l generated below via makeBorderSideResolver() — see BORDER_SIDE_PROPS.
-  // ── Border radius ──────────────────────────────────────────────────────────
-  rounded: ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderRadius: r } : null;
-  },
-  "rounded-t": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopLeftRadius: r, borderTopRightRadius: r } : null;
-  },
-  "rounded-r": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopRightRadius: r, borderBottomRightRadius: r } : null;
-  },
-  "rounded-b": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderBottomLeftRadius: r, borderBottomRightRadius: r } : null;
-  },
-  "rounded-l": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopLeftRadius: r, borderBottomLeftRadius: r } : null;
-  },
-  "rounded-tl": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopLeftRadius: r } : null;
-  },
-  "rounded-tr": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopRightRadius: r } : null;
-  },
-  "rounded-bl": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderBottomLeftRadius: r } : null;
-  },
-  "rounded-br": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderBottomRightRadius: r } : null;
-  },
-  // ── Outline extended (web-only) ───────────────────────────────────────────
-  outline: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
-    if (value === "none") return { outline: "none", outlineOffset: "0" };
-    if (isArbitrary) {
-      if (/^\d/.test(value) || value.startsWith("calc(")) return { outlineWidth: value };
-      return { outlineColor: value };
-    }
-    const widths = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
-    if (value in widths) return { outlineWidth: widths[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { outlineColor: color } : null;
-  },
-  "outline-offset": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { outlineOffset: value };
-    const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
-    return offsets[value] ? { outlineOffset: offsets[value] } : null;
-  },
-  // ── Divide (child combinator CSS, web-only) ───────────────────────────────
-  // These return special __divide* markers that resolver.ts converts to
-  // .cls > * + * { border-... } CSS rules. No inline style is applied.
-  "divide-x": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "reverse") return null;
-    if (!value) return { __divideX: 1 };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { __divideX: n };
-  },
-  "divide-y": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "reverse") return null;
-    if (!value) return { __divideY: 1 };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { __divideY: n };
-  },
-  divide: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { __divideColor: value };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      none: "none"
-    };
-    if (value in styleTokens) return { __divideStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { __divideColor: color } : null;
-  },
-  // ── Ring ───────────────────────────────────────────────────────────────────
-  // Web: box-shadow outline ring (doesn't affect layout).
-  // Native: React Native has no box-shadow, so this falls back to borderWidth/
-  // borderColor — the closest visual approximation (used by other RN Tailwind-
-  // likes for the same reason). Unlike the web ring, this DOES affect layout,
-  // and it shares its properties with the `border` utility — combining
-  // `border-*` and `ring-*` on the same native element means whichever class
-  // comes later wins, since both ultimately set borderWidth/borderColor.
-  ring: ({ value, isArbitrary }, { colors }) => {
-    const onWeb = getEffectiveIsWeb();
-    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
-    const DEFAULT_WIDTH = 3;
-    const asNative = (w, color2) => w === 0 ? { borderWidth: 0 } : { borderWidth: w, borderColor: color2 };
-    if (!value) {
-      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
-    }
-    if (value === "inset") {
-      return onWeb ? { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
-    }
-    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    if (!isArbitrary && value in widthTokens) {
-      const w = widthTokens[value];
-      return onWeb ? { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` } : asNative(w, DEFAULT_COLOR);
-    }
-    if (isArbitrary) {
-      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
-      if (numMatch) {
-        const unit = numMatch[2] ?? "px";
-        if (onWeb) return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
-        return unit === "px" ? asNative(parseFloat(numMatch[1]), DEFAULT_COLOR) : null;
-      }
-      return onWeb ? { boxShadow: value.replace(/_/g, " ") } : null;
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) {
-      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` } : asNative(DEFAULT_WIDTH, color);
-    }
-    return null;
-  },
-  // Web-only, unlike `ring` above: this stacks a second box-shadow layer to
-  // create a gap between the element and the ring. There's no native
-  // equivalent to approximate that with (a border can't create a gap outside
-  // its own element without an extra wrapper view), so this stays a no-op
-  // on native rather than rendering a misleading half-translation.
-  "ring-offset": ({ value, isArbitrary }, _theme) => {
-    if (!getEffectiveIsWeb()) return null;
-    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
-    const DEFAULT_RING_WIDTH = 3;
-    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    let offsetWidth;
-    if (!isArbitrary) {
-      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
-    } else {
-      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
-    }
-    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
-    const isZero = offsetWidth === 0 || offsetWidth === "0";
-    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
-    return {
-      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
-    };
-  }
-};
-for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
-  borderResolvers[utility] = makeBorderSideResolver(widthProp, colorProp);
-}
-
-// src/core/resolvers/filters.ts
-var FILTER_COMPOSE = "var(--kb-blur,) var(--kb-brightness,) var(--kb-contrast,) var(--kb-grayscale,) var(--kb-hue-rotate,) var(--kb-invert,) var(--kb-saturate,) var(--kb-sepia,) var(--kb-drop-shadow,)";
-var BACKDROP_FILTER_COMPOSE = "var(--kb-backdrop-blur,) var(--kb-backdrop-brightness,) var(--kb-backdrop-contrast,) var(--kb-backdrop-grayscale,) var(--kb-backdrop-hue-rotate,) var(--kb-backdrop-invert,) var(--kb-backdrop-opacity,) var(--kb-backdrop-saturate,) var(--kb-backdrop-sepia,)";
-var filterResolvers = {
-  // ── CSS Filters (composable via CSS variables, web-only) ─────────────────
-  blur: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const sizes = {
-      "": "blur(8px)",
-      sm: "blur(4px)",
-      md: "blur(12px)",
-      lg: "blur(16px)",
-      xl: "blur(24px)",
-      "2xl": "blur(40px)",
-      "3xl": "blur(64px)"
-    };
-    if (value === "none") return { "--kb-blur": "", filter: FILTER_COMPOSE };
-    const v = isArbitrary ? `blur(${value})` : sizes[value];
-    return v !== void 0 ? { "--kb-blur": v, filter: FILTER_COMPOSE } : null;
-  },
-  brightness: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-brightness": v, filter: FILTER_COMPOSE };
-  },
-  contrast: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-contrast": v, filter: FILTER_COMPOSE };
-  },
-  grayscale: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
-    return { "--kb-grayscale": v, filter: FILTER_COMPOSE };
-  },
-  "hue-rotate": ({ value, negative, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
-    return { "--kb-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
-  },
-  invert: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
-    return { "--kb-invert": v, filter: FILTER_COMPOSE };
-  },
-  saturate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-saturate": v, filter: FILTER_COMPOSE };
-  },
-  sepia: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
-    return { "--kb-sepia": v, filter: FILTER_COMPOSE };
-  },
-  "drop-shadow": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { "--kb-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
-    const presets = {
-      "": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
-      sm: "drop-shadow(0 1px 1px rgb(0 0 0/0.05))",
-      md: "drop-shadow(0 4px 3px rgb(0 0 0/0.07)) drop-shadow(0 2px 2px rgb(0 0 0/0.06))",
-      lg: "drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1))",
-      xl: "drop-shadow(0 20px 13px rgb(0 0 0/0.03)) drop-shadow(0 8px 5px rgb(0 0 0/0.08))",
-      "2xl": "drop-shadow(0 25px 25px rgb(0 0 0/0.15))",
-      none: "drop-shadow(0 0 #0000)"
-    };
-    const v = presets[value];
-    return v !== void 0 ? { "--kb-drop-shadow": v, filter: FILTER_COMPOSE } : null;
-  },
-  // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
-  filter: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { filter: value.replace(/_/g, " ") };
-    if (value === "none") return { filter: "none" };
-    return null;
-  },
-  // ── Backdrop Filters (composable via CSS variables, web-only) ────────────
-  "backdrop-blur": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const sizes = {
-      "": "blur(8px)",
-      sm: "blur(4px)",
-      md: "blur(12px)",
-      lg: "blur(16px)",
-      xl: "blur(24px)",
-      "2xl": "blur(40px)",
-      "3xl": "blur(64px)"
-    };
-    if (value === "none") return { "--kb-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
-    const v = isArbitrary ? `blur(${value})` : sizes[value];
-    return v !== void 0 ? { "--kb-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
-  },
-  "backdrop-brightness": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-contrast": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-grayscale": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
-    return { "--kb-backdrop-grayscale": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
-    return { "--kb-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-invert": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
-    return { "--kb-backdrop-invert": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-opacity": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-saturate": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-sepia": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
-    return { "--kb-backdrop-sepia": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-filter": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
-    if (value === "none") return { backdropFilter: "none" };
-    return null;
-  },
-  // ── Mix / background blend mode (web-only) ───────────────────────────────
-  "mix-blend": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const modes = [
-      "normal",
-      "multiply",
-      "screen",
-      "overlay",
-      "darken",
-      "lighten",
-      "color-dodge",
-      "color-burn",
-      "hard-light",
-      "soft-light",
-      "difference",
-      "exclusion",
-      "hue",
-      "saturation",
-      "color",
-      "luminosity",
-      "plus-lighter"
-    ];
-    return modes.includes(value) ? { mixBlendMode: value } : null;
-  },
-  "bg-blend": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const modes = [
-      "normal",
-      "multiply",
-      "screen",
-      "overlay",
-      "darken",
-      "lighten",
-      "color-dodge",
-      "color-burn",
-      "hard-light",
-      "soft-light",
-      "difference",
-      "exclusion",
-      "hue",
-      "saturation",
-      "color",
-      "luminosity"
-    ];
-    return modes.includes(value) ? { backgroundBlendMode: value } : null;
-  },
-  // ── Will-change (web-only) ─────────────────────────────────────────────────
-  "will-change": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
-    const presets = {
-      auto: "auto",
-      scroll: "scroll-position",
-      contents: "contents",
-      transform: "transform"
-    };
-    return presets[value] ? { willChange: presets[value] } : null;
-  }
-};
-
-// src/core/resolvers/layout.ts
-var _standalone = null;
-var _standaloneWeb = null;
-function buildStandalone(web) {
-  return {
-    // Display
-    // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
-    // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
-    // `grid`, `contents`, `flow-root` have no native equivalent and stay null there.
-    // The inline-* family (inline, inline-block, inline-flex, inline-grid) falls back
-    // to 'flex' on native instead — like plain `flex`, this is a no-op most of the
-    // time, but without it these utilities couldn't re-show a `hidden` element on
-    // native either (null → no style applied → still display:'none').
-    flex: { display: "flex" },
-    block: web ? { display: "block" } : null,
-    "inline-block": { display: web ? "inline-block" : "flex" },
-    inline: { display: web ? "inline" : "flex" },
-    grid: web ? { display: "grid" } : null,
-    "inline-flex": { display: web ? "inline-flex" : "flex" },
-    "inline-grid": { display: web ? "inline-grid" : "flex" },
-    hidden: { display: "none" },
-    contents: web ? { display: "contents" } : null,
-    "flow-root": web ? { display: "flow-root" } : null,
-    // Flex direction, wrap, grow/shrink, and alignment (both web and native) —
-    // every one of these is meaningless without the element also being a flex
-    // container. React Native Views are ALWAYS flex containers by default, so
-    // on native this was already true for free; on web a plain <div> defaults
-    // to display:block, so e.g. `items-center` alone silently did nothing.
-    // Folding `display: 'flex'` into these on web closes that native/web gap —
-    // `flex-1 items-center justify-center` now behaves the same on both,
-    // without also needing a separate `flex` class.
-    "flex-row": { flexDirection: "row", ...web ? { display: "flex" } : {} },
-    "flex-col": { flexDirection: "column", ...web ? { display: "flex" } : {} },
-    "flex-row-reverse": { flexDirection: "row-reverse", ...web ? { display: "flex" } : {} },
-    "flex-col-reverse": { flexDirection: "column-reverse", ...web ? { display: "flex" } : {} },
-    // Flex wrap (both)
-    "flex-wrap": { flexWrap: "wrap", ...web ? { display: "flex" } : {} },
-    "flex-wrap-reverse": { flexWrap: "wrap-reverse", ...web ? { display: "flex" } : {} },
-    "flex-nowrap": { flexWrap: "nowrap", ...web ? { display: "flex" } : {} },
-    // Flex grow / shrink (both) — deliberately NOT folding in display:flex
-    // like the container-level properties above. flex-grow/flex-shrink are
-    // item-level: they already take effect purely via the PARENT already
-    // being a flex container, with zero dependency on this element's own
-    // display. Forcing display:flex here would instead be an unrelated side
-    // effect on THIS element's own children (turning what may be an ordinary
-    // block stack into a flex row) — exactly the kind of surprise the
-    // container-level properties above can never cause, since those are
-    // no-ops without display:flex to begin with.
-    "flex-grow": { flexGrow: 1 },
-    "flex-grow-0": { flexGrow: 0 },
-    "flex-shrink": { flexShrink: 1 },
-    "flex-shrink-0": { flexShrink: 0 },
-    // Align items (both)
-    "items-start": { alignItems: "flex-start", ...web ? { display: "flex" } : {} },
-    "items-end": { alignItems: "flex-end", ...web ? { display: "flex" } : {} },
-    "items-center": { alignItems: "center", ...web ? { display: "flex" } : {} },
-    "items-baseline": { alignItems: "baseline", ...web ? { display: "flex" } : {} },
-    "items-stretch": { alignItems: "stretch", ...web ? { display: "flex" } : {} },
-    // Justify content (both)
-    "justify-start": { justifyContent: "flex-start", ...web ? { display: "flex" } : {} },
-    "justify-end": { justifyContent: "flex-end", ...web ? { display: "flex" } : {} },
-    "justify-center": { justifyContent: "center", ...web ? { display: "flex" } : {} },
-    "justify-between": { justifyContent: "space-between", ...web ? { display: "flex" } : {} },
-    "justify-around": { justifyContent: "space-around", ...web ? { display: "flex" } : {} },
-    "justify-evenly": { justifyContent: "space-evenly", ...web ? { display: "flex" } : {} },
-    // Align content (both)
-    "content-start": { alignContent: "flex-start", ...web ? { display: "flex" } : {} },
-    "content-end": { alignContent: "flex-end", ...web ? { display: "flex" } : {} },
-    "content-center": { alignContent: "center", ...web ? { display: "flex" } : {} },
-    "content-between": { alignContent: "space-between", ...web ? { display: "flex" } : {} },
-    "content-around": { alignContent: "space-around", ...web ? { display: "flex" } : {} },
-    "content-evenly": { alignContent: "space-evenly", ...web ? { display: "flex" } : {} },
-    "content-stretch": { alignContent: "stretch", ...web ? { display: "flex" } : {} },
-    // Align self (both)
-    "self-auto": { alignSelf: "auto" },
-    "self-start": { alignSelf: "flex-start" },
-    "self-end": { alignSelf: "flex-end" },
-    "self-center": { alignSelf: "center" },
-    "self-stretch": { alignSelf: "stretch" },
-    "self-baseline": { alignSelf: "baseline" },
-    // Text align (both)
-    "text-left": { textAlign: "left" },
-    "text-right": { textAlign: "right" },
-    "text-center": { textAlign: "center" },
-    "text-justify": { textAlign: "justify" },
-    // Font weight shortcuts (both)
-    "font-thin": { fontWeight: "100" },
-    "font-extralight": { fontWeight: "200" },
-    "font-light": { fontWeight: "300" },
-    "font-normal": { fontWeight: "400" },
-    "font-medium": { fontWeight: "500" },
-    "font-semibold": { fontWeight: "600" },
-    "font-bold": { fontWeight: "700" },
-    "font-extrabold": { fontWeight: "800" },
-    "font-black": { fontWeight: "900" },
-    // Text decoration (overline is web-only)
-    underline: { textDecorationLine: "underline" },
-    overline: web ? { textDecorationLine: "overline" } : null,
-    "line-through": { textDecorationLine: "line-through" },
-    "no-underline": { textDecorationLine: "none" },
-    // Text transform (both)
-    uppercase: { textTransform: "uppercase" },
-    lowercase: { textTransform: "lowercase" },
-    capitalize: { textTransform: "capitalize" },
-    "normal-case": { textTransform: "none" },
-    // Font style (both)
-    italic: { fontStyle: "italic" },
-    "non-italic": { fontStyle: "normal" },
-    // Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
-    relative: { position: "relative" },
-    absolute: { position: "absolute" },
-    fixed: web ? { position: "fixed" } : null,
-    sticky: web ? { position: "sticky" } : null,
-    static: web ? { position: "static" } : null,
-    // Visibility (no `visibility` prop on native; use opacity instead)
-    visible: web ? { visibility: "visible" } : null,
-    invisible: web ? { visibility: "hidden" } : { opacity: 0 },
-    // Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
-    "overflow-hidden": { overflow: "hidden" },
-    "overflow-visible": { overflow: "visible" },
-    "overflow-scroll": { overflow: "scroll" },
-    "overflow-auto": web ? { overflow: "auto" } : { overflow: "scroll" },
-    // overflowX / overflowY are web-only
-    "overflow-x-hidden": web ? { overflowX: "hidden" } : null,
-    "overflow-x-scroll": web ? { overflowX: "scroll" } : null,
-    "overflow-x-auto": web ? { overflowX: "auto" } : null,
-    "overflow-y-hidden": web ? { overflowY: "hidden" } : null,
-    "overflow-y-scroll": web ? { overflowY: "scroll" } : null,
-    "overflow-y-auto": web ? { overflowY: "auto" } : null,
-    // Object fit (web-only; use resizeMode prop on RN Image)
-    "object-contain": web ? { objectFit: "contain" } : null,
-    "object-cover": web ? { objectFit: "cover" } : null,
-    "object-fill": web ? { objectFit: "fill" } : null,
-    "object-none": web ? { objectFit: "none" } : null,
-    "object-scale-down": web ? { objectFit: "scale-down" } : null,
-    // Border style (both)
-    "border-solid": { borderStyle: "solid" },
-    "border-dashed": { borderStyle: "dashed" },
-    "border-dotted": { borderStyle: "dotted" },
-    "border-none": { borderWidth: 0 },
-    // Border sides default width (both)
-    "border-t": { borderTopWidth: 1 },
-    "border-r": { borderRightWidth: 1 },
-    "border-b": { borderBottomWidth: 1 },
-    "border-l": { borderLeftWidth: 1 },
-    // Cursor (web-only)
-    "cursor-auto": web ? { cursor: "auto" } : null,
-    "cursor-default": web ? { cursor: "default" } : null,
-    "cursor-pointer": web ? { cursor: "pointer" } : null,
-    "cursor-wait": web ? { cursor: "wait" } : null,
-    "cursor-text": web ? { cursor: "text" } : null,
-    "cursor-move": web ? { cursor: "move" } : null,
-    "cursor-not-allowed": web ? { cursor: "not-allowed" } : null,
-    // User select (web-only)
-    "select-none": web ? { userSelect: "none" } : null,
-    "select-text": web ? { userSelect: "text" } : null,
-    "select-all": web ? { userSelect: "all" } : null,
-    "select-auto": web ? { userSelect: "auto" } : null,
-    // Pointer events (both)
-    "pointer-events-none": { pointerEvents: "none" },
-    "pointer-events-auto": { pointerEvents: "auto" },
-    // Whitespace (web-only; RN Text uses numberOfLines prop instead)
-    "whitespace-normal": web ? { whiteSpace: "normal" } : null,
-    "whitespace-nowrap": web ? { whiteSpace: "nowrap" } : null,
-    "whitespace-pre": web ? { whiteSpace: "pre" } : null,
-    "whitespace-pre-wrap": web ? { whiteSpace: "pre-wrap" } : null,
-    "whitespace-pre-line": web ? { whiteSpace: "pre-line" } : null,
-    // Word break (web-only)
-    "break-normal": web ? { overflowWrap: "normal", wordBreak: "normal" } : null,
-    "break-words": web ? { overflowWrap: "break-word" } : null,
-    "break-all": web ? { wordBreak: "break-all" } : null,
-    // Misc web-only
-    truncate: web ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
-    "box-border": web ? { boxSizing: "border-box" } : null,
-    "box-content": web ? { boxSizing: "content-box" } : null,
-    "appearance-none": web ? { appearance: "none" } : null,
-    "outline-none": web ? { outline: "none", outlineOffset: "0" } : null,
-    outline: web ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
-    resize: web ? { resize: "both" } : null,
-    "resize-none": web ? { resize: "none" } : null,
-    "resize-y": web ? { resize: "vertical" } : null,
-    "resize-x": web ? { resize: "horizontal" } : null,
-    antialiased: web ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
-    "subpixel-antialiased": web ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
-    "overflow-ellipsis": web ? { textOverflow: "ellipsis" } : null,
-    "sr-only": web ? {
-      position: "absolute",
-      width: 1,
-      height: 1,
-      padding: 0,
-      margin: -1,
-      overflow: "hidden",
-      clip: "rect(0,0,0,0)",
-      whiteSpace: "nowrap",
-      border: 0
-    } : null,
-    "not-sr-only": web ? {
-      position: "static",
-      width: "auto",
-      height: "auto",
-      padding: 0,
-      margin: 0,
-      overflow: "visible",
-      clip: "auto",
-      whiteSpace: "normal"
-    } : null,
-    // Lists (web-only)
-    "list-none": web ? { listStyleType: "none" } : null,
-    "list-disc": web ? { listStyleType: "disc" } : null,
-    "list-decimal": web ? { listStyleType: "decimal" } : null,
-    // Background clip (web-only)
-    "bg-clip-border": web ? { backgroundClip: "border-box" } : null,
-    "bg-clip-padding": web ? { backgroundClip: "padding-box" } : null,
-    "bg-clip-content": web ? { backgroundClip: "content-box" } : null,
-    "bg-clip-text": web ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
-    // Background image
-    "bg-none": web ? { backgroundImage: "none" } : null,
-    // Background size (web-only)
-    "bg-auto": web ? { backgroundSize: "auto" } : null,
-    "bg-cover": web ? { backgroundSize: "cover" } : null,
-    "bg-contain": web ? { backgroundSize: "contain" } : null,
-    // Background position (web-only)
-    "bg-center": web ? { backgroundPosition: "center" } : null,
-    "bg-top": web ? { backgroundPosition: "top" } : null,
-    "bg-bottom": web ? { backgroundPosition: "bottom" } : null,
-    "bg-left": web ? { backgroundPosition: "left" } : null,
-    "bg-right": web ? { backgroundPosition: "right" } : null,
-    "bg-left-top": web ? { backgroundPosition: "left top" } : null,
-    "bg-left-bottom": web ? { backgroundPosition: "left bottom" } : null,
-    "bg-right-top": web ? { backgroundPosition: "right top" } : null,
-    "bg-right-bottom": web ? { backgroundPosition: "right bottom" } : null,
-    // Background repeat (web-only)
-    "bg-repeat": web ? { backgroundRepeat: "repeat" } : null,
-    "bg-no-repeat": web ? { backgroundRepeat: "no-repeat" } : null,
-    "bg-repeat-x": web ? { backgroundRepeat: "repeat-x" } : null,
-    "bg-repeat-y": web ? { backgroundRepeat: "repeat-y" } : null,
-    "bg-repeat-round": web ? { backgroundRepeat: "round" } : null,
-    "bg-repeat-space": web ? { backgroundRepeat: "space" } : null,
-    // Background attachment (web-only)
-    "bg-fixed": web ? { backgroundAttachment: "fixed" } : null,
-    "bg-local": web ? { backgroundAttachment: "local" } : null,
-    "bg-scroll": web ? { backgroundAttachment: "scroll" } : null,
-    // Object position (web-only)
-    "object-center": web ? { objectPosition: "center" } : null,
-    "object-top": web ? { objectPosition: "top" } : null,
-    "object-bottom": web ? { objectPosition: "bottom" } : null,
-    "object-left": web ? { objectPosition: "left" } : null,
-    "object-right": web ? { objectPosition: "right" } : null,
-    "object-left-top": web ? { objectPosition: "left top" } : null,
-    "object-left-bottom": web ? { objectPosition: "left bottom" } : null,
-    "object-right-top": web ? { objectPosition: "right top" } : null,
-    "object-right-bottom": web ? { objectPosition: "right bottom" } : null,
-    // Table (web-only)
-    table: web ? { display: "table" } : null,
-    "table-auto": web ? { tableLayout: "auto" } : null,
-    "table-fixed": web ? { tableLayout: "fixed" } : null,
-    "caption-top": web ? { captionSide: "top" } : null,
-    "caption-bottom": web ? { captionSide: "bottom" } : null,
-    "border-collapse": web ? { borderCollapse: "collapse" } : null,
-    "border-separate": web ? { borderCollapse: "separate" } : null,
-    // List style position (web-only)
-    "list-inside": web ? { listStylePosition: "inside" } : null,
-    "list-outside": web ? { listStylePosition: "outside" } : null,
-    // Font variant numeric (web-only)
-    "normal-nums": web ? { fontVariantNumeric: "normal" } : null,
-    ordinal: web ? { fontVariantNumeric: "ordinal" } : null,
-    "slashed-zero": web ? { fontVariantNumeric: "slashed-zero" } : null,
-    "lining-nums": web ? { fontVariantNumeric: "lining-nums" } : null,
-    "oldstyle-nums": web ? { fontVariantNumeric: "oldstyle-nums" } : null,
-    "proportional-nums": web ? { fontVariantNumeric: "proportional-nums" } : null,
-    "tabular-nums": web ? { fontVariantNumeric: "tabular-nums" } : null,
-    "diagonal-fractions": web ? { fontVariantNumeric: "diagonal-fractions" } : null,
-    "stacked-fractions": web ? { fontVariantNumeric: "stacked-fractions" } : null,
-    // Isolation (web-only)
-    isolate: web ? { isolation: "isolate" } : null,
-    "isolation-auto": web ? { isolation: "auto" } : null,
-    // Backface visibility (both iOS and Android)
-    "backface-visible": { backfaceVisibility: "visible" },
-    "backface-hidden": { backfaceVisibility: "hidden" },
-    // CSS filters — standalone = default/full effect (web-only)
-    grayscale: web ? { "--kb-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
-    invert: web ? { "--kb-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
-    sepia: web ? { "--kb-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
-    // Divide none
-    "divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
-    // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
-    group: web ? {} : null,
-    peer: web ? {} : null,
-    // Text-wrap (web-only)
-    "text-wrap": web ? { textWrap: "wrap" } : null,
-    "text-nowrap": web ? { textWrap: "nowrap" } : null,
-    "text-balance": web ? { textWrap: "balance" } : null,
-    "text-pretty": web ? { textWrap: "pretty" } : null,
-    // Screen sizing — dvw/dvh (dynamic viewport units) instead of vw/vh: on mobile
-    // browsers, vh/vw are pinned to the LARGEST viewport size (address bar hidden),
-    // so `h-screen` overflows behind the address bar when it's shown. dvh/dvw track
-    // the actual visible viewport as browser chrome shows/hides. Desktop behavior
-    // is unchanged since there's no dynamic chrome to account for.
-    // (vw/dvw values are web-only; vh/dvh values work cross-platform via spacing scale for h-*)
-    "w-screen": web ? { width: "100dvw" } : null,
-    "min-h-screen": { minHeight: "100dvh" },
-    "max-h-screen": { maxHeight: "100dvh" },
-    "min-w-screen": web ? { minWidth: "100dvw" } : null,
-    "max-w-screen": web ? { maxWidth: "100dvw" } : null,
-    // max-w named container sizes (mirrors Tailwind's container scale)
-    "max-w-none": { maxWidth: "none" },
-    "max-w-xs": { maxWidth: 320 },
-    "max-w-sm": { maxWidth: 384 },
-    "max-w-md": { maxWidth: 448 },
-    "max-w-lg": { maxWidth: 512 },
-    "max-w-xl": { maxWidth: 576 },
-    "max-w-2xl": { maxWidth: 672 },
-    "max-w-3xl": { maxWidth: 768 },
-    "max-w-4xl": { maxWidth: 896 },
-    "max-w-5xl": { maxWidth: 1024 },
-    "max-w-6xl": { maxWidth: 1152 },
-    "max-w-7xl": { maxWidth: 1280 },
-    "max-w-prose": web ? { maxWidth: "65ch" } : null,
-    // Extended cursors (web-only)
-    "cursor-grab": web ? { cursor: "grab" } : null,
-    "cursor-grabbing": web ? { cursor: "grabbing" } : null,
-    "cursor-zoom-in": web ? { cursor: "zoom-in" } : null,
-    "cursor-zoom-out": web ? { cursor: "zoom-out" } : null,
-    "cursor-crosshair": web ? { cursor: "crosshair" } : null,
-    "cursor-help": web ? { cursor: "help" } : null,
-    "cursor-none": web ? { cursor: "none" } : null,
-    // Overflow clip (web-only)
-    "overflow-clip": web ? { overflow: "clip" } : null,
-    "overflow-x-clip": web ? { overflowX: "clip" } : null,
-    "overflow-y-clip": web ? { overflowY: "clip" } : null,
-    // Scroll behavior (web-only)
-    "scroll-smooth": web ? { scrollBehavior: "smooth" } : null,
-    "scroll-auto": web ? { scrollBehavior: "auto" } : null,
-    // Float (web-only)
-    "float-left": web ? { float: "left" } : null,
-    "float-right": web ? { float: "right" } : null,
-    "float-start": web ? { float: "inline-start" } : null,
-    "float-end": web ? { float: "inline-end" } : null,
-    "float-none": web ? { float: "none" } : null,
-    // Clear (web-only)
-    "clear-left": web ? { clear: "left" } : null,
-    "clear-right": web ? { clear: "right" } : null,
-    "clear-both": web ? { clear: "both" } : null,
-    "clear-start": web ? { clear: "inline-start" } : null,
-    "clear-end": web ? { clear: "inline-end" } : null,
-    "clear-none": web ? { clear: "none" } : null,
-    // Vertical align (web-only)
-    "align-baseline": web ? { verticalAlign: "baseline" } : null,
-    "align-top": web ? { verticalAlign: "top" } : null,
-    "align-middle": web ? { verticalAlign: "middle" } : null,
-    "align-bottom": web ? { verticalAlign: "bottom" } : null,
-    "align-text-top": web ? { verticalAlign: "text-top" } : null,
-    "align-text-bottom": web ? { verticalAlign: "text-bottom" } : null,
-    "align-sub": web ? { verticalAlign: "sub" } : null,
-    "align-super": web ? { verticalAlign: "super" } : null,
-    // Touch action (web-only)
-    "touch-auto": web ? { touchAction: "auto" } : null,
-    "touch-none": web ? { touchAction: "none" } : null,
-    "touch-pan-x": web ? { touchAction: "pan-x" } : null,
-    "touch-pan-y": web ? { touchAction: "pan-y" } : null,
-    "touch-pan-left": web ? { touchAction: "pan-left" } : null,
-    "touch-pan-right": web ? { touchAction: "pan-right" } : null,
-    "touch-pan-up": web ? { touchAction: "pan-up" } : null,
-    "touch-pan-down": web ? { touchAction: "pan-down" } : null,
-    "touch-pinch-zoom": web ? { touchAction: "pinch-zoom" } : null,
-    "touch-manipulation": web ? { touchAction: "manipulation" } : null
-  };
-}
-function getStandalone() {
-  const web = getEffectiveIsWeb();
-  if (!_standalone || _standaloneWeb !== web) {
-    _standalone = buildStandalone(web);
-    _standaloneWeb = web;
-  }
-  return _standalone;
-}
-var layoutResolvers = {
-  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
-  grid: ({ value, isArbitrary }) => {
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
-  "grid-cols": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  "grid-rows": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { gridTemplateRows: value };
-    if (value === "none") return { gridTemplateRows: "none" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
-  "grid-flow": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const flows = {
-      row: "row",
-      col: "column",
-      dense: "dense",
-      "row-dense": "row dense",
-      "col-dense": "column dense"
-    };
-    const flow = flows[value];
-    return flow ? { gridAutoFlow: flow } : null;
-  },
-  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
-  "auto-cols": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoColumns: value };
-    const presets = {
-      auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    };
-    const v = presets[value];
-    return v ? { gridAutoColumns: v } : null;
-  },
-  "auto-rows": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoRows: value };
-    const presets = {
-      auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    };
-    const v = presets[value];
-    return v ? { gridAutoRows: v } : null;
-  },
-  // ── Grid column placement (web-only) ──────────────────────────────────────
-  "col-span": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridColumn: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
-  },
-  "col-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnStart: "auto" };
-    if (isArbitrary) return { gridColumnStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnStart: n };
-  },
-  "col-end": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnEnd: "auto" };
-    if (isArbitrary) return { gridColumnEnd: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnEnd: n };
-  },
-  col: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridColumn: "auto" };
-    if (isArbitrary) return { gridColumn: value };
-    return null;
-  },
-  // ── Grid row placement (web-only) ─────────────────────────────────────────
-  "row-span": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridRow: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
-  },
-  "row-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowStart: "auto" };
-    if (isArbitrary) return { gridRowStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowStart: n };
-  },
-  "row-end": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowEnd: "auto" };
-    if (isArbitrary) return { gridRowEnd: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowEnd: n };
-  },
-  row: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridRow: "auto" };
-    if (isArbitrary) return { gridRow: value };
-    return null;
-  },
-  // ── Grid alignment (web-only) ──────────────────────────────────────────────
-  // place-items is shorthand for align-items + justify-items on a grid container
-  "place-items": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeItems: map[value] } : null;
-  },
-  // place-content is shorthand for align-content + justify-content on a grid container
-  "place-content": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      between: "space-between",
-      around: "space-around",
-      evenly: "space-evenly",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeContent: map[value] } : null;
-  },
-  // justify-items controls inline-axis alignment of grid items within their cells
-  "justify-items": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { justifyItems: map[value] } : null;
-  },
-  // place-self is shorthand for align-self + justify-self on a grid item
-  "place-self": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { placeSelf: map[value] } : null;
-  },
-  // justify-self controls inline-axis self-alignment of a grid item
-  "justify-self": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { justifySelf: map[value] } : null;
-  },
-  // ── Flex ───────────────────────────────────────────────────────────────────
-  // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
-  // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
-  // comment in the standalone table above for why: these already work via the
-  // PARENT's flex context regardless of this element's own display, so
-  // forcing display:flex here would only be a surprising, unrelated side
-  // effect on this element's OWN children.
-  flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return { display: "flex" };
-    if (isArbitrary) {
-      const v = parseFloat(value);
-      return isNaN(v) ? null : { flex: v };
-    }
-    if (value in flex) {
-      const v = flex[value];
-      if (typeof v === "string" && !getEffectiveIsWeb()) {
-        if (v === "auto" || v === "initial") return { flex: 1 };
-        if (v === "none") return { flex: 0 };
-        return null;
-      }
-      return { flex: v };
-    }
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { flex: n };
-  },
-  grow: ({ value }, _) => {
-    if (!value) return { flexGrow: 1 };
-    const n = parseFloat(value);
-    return { flexGrow: isNaN(n) ? 1 : n };
-  },
-  shrink: ({ value }, _) => {
-    if (!value) return { flexShrink: 1 };
-    const n = parseFloat(value);
-    return { flexShrink: isNaN(n) ? 1 : n };
-  },
-  order: ({ value, negative }, _) => {
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { order: negative ? -n : n };
-  },
-  // ── Z-index ────────────────────────────────────────────────────────────────
-  z: ({ value, isArbitrary }, { zIndex }) => {
-    if (isArbitrary) {
-      const n2 = parseInt(value);
-      return isNaN(n2) ? null : { zIndex: n2 };
-    }
-    const v = zIndex[value];
-    if (v !== void 0) {
-      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
-      return { zIndex: v };
-    }
-    const n = parseInt(value);
-    return isNaN(n) ? null : { zIndex: n };
-  },
-  // ── Aspect ratio ───────────────────────────────────────────────────────────
-  aspect: ({ value, isArbitrary }) => {
-    if (isArbitrary) return { aspectRatio: value };
-    const presets = { auto: "auto", square: 1, video: 16 / 9 };
-    if (!(value in presets)) return null;
-    const v = presets[value];
-    if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
-    return { aspectRatio: v };
-  },
-  // ── Columns (web-only) ─────────────────────────────────────────────────────
-  columns: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { columnCount: value };
-    if (value === "auto") return { columnCount: "auto" };
-    const n = parseInt(value, 10);
-    if (!isNaN(n)) return { columnCount: n };
-    const widths = {
-      "3xs": "16rem",
-      "2xs": "18rem",
-      xs: "20rem",
-      sm: "24rem",
-      md: "28rem",
-      lg: "32rem",
-      xl: "36rem",
-      "2xl": "42rem",
-      "3xl": "48rem",
-      "4xl": "56rem",
-      "5xl": "64rem",
-      "6xl": "72rem",
-      "7xl": "80rem"
-    };
-    return widths[value] ? { columnWidth: widths[value] } : null;
-  }
-};
-
-// src/core/resolvers/typography.ts
-function resolveFontSize(value, fontSizes, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  return fontSizes[value] ?? null;
-}
-var typographyResolvers = {
-  // ── Text ───────────────────────────────────────────────────────────────────
-  text: ({ value, isArbitrary }, { colors, fontSize }) => {
-    const size = resolveFontSize(value, fontSize, false);
-    if (!isArbitrary && size !== null) return { fontSize: size };
-    if (isArbitrary) {
-      if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
-        return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
-      }
-      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (!color) return null;
-    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
-  },
-  "text-opacity": ({ value, isArbitrary }, _) => {
-    if (!getEffectiveIsWeb()) return null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
-    return { "--text-opacity": v };
-  },
-  // ── Text decoration advanced (web-only) ───────────────────────────────────
-  decoration: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) {
-      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
-      return { textDecorationColor: value };
-    }
-    const thickTokens = {
-      auto: "auto",
-      "from-font": "from-font",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      wavy: "wavy"
-    };
-    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { textDecorationColor: color } : null;
-  },
-  "underline-offset": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { textUnderlineOffset: value };
-    const offsets = {
-      auto: "auto",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
-  },
-  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
-  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
-  // the literal string 'you can see it' quotes included), so it passes straight through as a
-  // valid `content: '*'` CSS value with no extra wrapping needed.
-  content: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { content: value };
-    const presets = { none: "none" };
-    return value in presets ? { content: presets[value] } : null;
-  },
-  // ── Font ───────────────────────────────────────────────────────────────────
-  font: ({ value, isArbitrary }, { fontFamily, fontWeight }) => {
-    if (isArbitrary) return { fontFamily: value };
-    if (value in fontFamily) {
-      const ff = fontFamily[value];
-      return { fontFamily: Array.isArray(ff) ? ff.join(", ") : ff };
-    }
-    if (value in fontWeight) return { fontWeight: String(fontWeight[value]) };
-    return null;
-  },
-  // ── Line height ────────────────────────────────────────────────────────────
-  leading: ({ value, isArbitrary }, { lineHeight }) => {
-    if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
-    const v = lineHeight[value];
-    if (v === void 0) return null;
-    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
-    return { lineHeight: v };
-  },
-  // ── Letter spacing ─────────────────────────────────────────────────────────
-  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
-    if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
-    const v = letterSpacing[value];
-    return v !== void 0 ? { letterSpacing: v } : null;
-  },
-  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
-  "line-clamp": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return {
-      overflow: "hidden",
-      display: "-webkit-box",
-      WebkitBoxOrient: "vertical",
-      WebkitLineClamp: n
-    };
-  }
-};
-
-// src/core/resolvers/transform.ts
-var transformResolvers = {
-  // ── Transform extras (web-only) ───────────────────────────────────────────
-  "skew-x": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
-  },
-  "skew-y": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
-  },
-  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
-  transform: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
-    if (value === "none") return { transform: "none" };
-    return null;
-  },
-  // Transform origin
-  origin: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
-    const origins = {
-      center: "center",
-      top: "top",
-      "top-right": "top right",
-      right: "right",
-      "bottom-right": "bottom right",
-      bottom: "bottom",
-      "bottom-left": "bottom left",
-      left: "left",
-      "top-left": "top left"
-    };
-    return origins[value] ? { transformOrigin: origins[value] } : null;
-  },
-  // ── Scale ──────────────────────────────────────────────────────────────────
-  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
-  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
-  scale: ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
-  },
-  "scale-x": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
-  },
-  "scale-y": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
-  },
-  // ── Rotate ─────────────────────────────────────────────────────────────────
-  rotate: ({ value, negative, isArbitrary }) => {
-    if (isArbitrary) {
-      const finalValue = negative ? `-${value}` : value;
-      return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
-    }
-    const deg = parseFloat(value);
-    if (isNaN(deg)) return null;
-    const finalDeg = negative ? -deg : deg;
-    return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
-  },
-  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
-  perspective: ({ value, isArbitrary }) => {
-    if (isArbitrary) {
-      const numPx = parseFloat(value);
-      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
-      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
-    }
-    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
-  }
-};
-
-// src/core/resolvers/effects.ts
-function keyframeDeclToCSS(decl) {
-  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
-}
-function buildKeyframeCSS(name, steps) {
-  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
-  return `@keyframes ${name} { ${body} }`;
-}
-var BUILTIN_ANIMATIONS = {
-  none: { animation: "none" },
-  spin: {
-    animation: "kb-spin 1s linear infinite",
-    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-  },
-  ping: {
-    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-  },
-  pulse: {
-    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-  },
-  bounce: {
-    animation: "kb-bounce 1s infinite",
-    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-  }
-};
-function buildAnimationValue(animation, keyframes) {
-  const words = animation.trim().split(/\s+/);
-  const name = words[0];
-  if (!name) return { animation };
-  const builtin = BUILTIN_ANIMATIONS[name];
-  if (builtin?.__keyframe) {
-    const kbName = builtin.animation.split(/\s+/, 1)[0];
-    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
-  }
-  const steps = keyframes?.[name];
-  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
-}
-var effectResolvers = {
-  // ── Opacity ────────────────────────────────────────────────────────────────
-  opacity: ({ value, isArbitrary }, { opacity }) => {
-    if (isArbitrary) {
-      const v2 = parseFloat(value);
-      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
-    }
-    const v = opacity[value];
-    if (v !== void 0) return { opacity: v };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
-  },
-  // ── Shadow ─────────────────────────────────────────────────────────────────
-  shadow: ({ value }, { shadow }) => {
-    const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
-  },
-  // ── Animations (CSS keyframe animations, web-only) ────────────────────────
-  // Each variant injects a @keyframes rule once via the __keyframe marker.
-  // resolver.ts detects __keyframe, injects the rule, then strips the marker
-  // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }, theme) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
-    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
-    const custom = theme.animation?.[value];
-    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
-  },
-  // ── Transition (web-only; use Animated API on native) ─────────────────────
-  transition: ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const presets = {
-      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
-      all: "all 150ms",
-      none: "none",
-      colors: "color 150ms, background-color 150ms, border-color 150ms",
-      opacity: "opacity 150ms",
-      shadow: "box-shadow 150ms",
-      transform: "transform 150ms"
-    };
-    const v = presets[value];
-    return v !== void 0 ? { transition: v } : null;
-  },
-  duration: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    const ms = isArbitrary ? value : `${value}ms`;
-    return { transitionDuration: ms };
-  },
-  delay: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    const ms = isArbitrary ? value : `${value}ms`;
-    return { transitionDelay: ms };
-  },
-  ease: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transitionTimingFunction: value };
-    const presets = {
-      linear: "linear",
-      in: "cubic-bezier(0.4, 0, 1, 1)",
-      out: "cubic-bezier(0, 0, 0.2, 1)",
-      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
-    };
-    const v = presets[value];
-    return v !== void 0 ? { transitionTimingFunction: v } : null;
-  }
-};
-
-// src/core/resolvers/misc.ts
-var miscResolvers = {
-  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
-  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
-  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
-  // presumably a typo) parses, which is why this only fires when the arbitrary value
-  // itself contains a "property:value" pair; anything else (no colon) still resolves
-  // to null exactly as before this resolver existed, rather than guessing a property.
-  //
-  // Only the FIRST colon splits property from value — the value itself may contain
-  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
-  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
-  // custom property) key, so it can be used as the style object key as-written with no
-  // extra case conversion — it only needs to look like a plausible CSS property name.
-  "": ({ value, isArbitrary, negative }) => {
-    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
-    if (negative) return null;
-    const colonIdx = value.indexOf(":");
-    if (colonIdx <= 0) return null;
-    const prop = value.slice(0, colonIdx).trim();
-    const cssValue = value.slice(colonIdx + 1).trim();
-    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
-    return { [prop]: cssValue };
-  },
-  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
-  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
-  // take stroke/fill as component PROPS, not style entries, so there's no
-  // reliable way to apply a resolved color through the `style` prop there.
-  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
-  // color-first-then-numeric-fallback disambiguation `border` uses above.
-  stroke: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (value === "none") return { stroke: "none" };
-    if (isArbitrary) {
-      const w = toNativeValue(value);
-      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { stroke: color };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { strokeWidth: n };
-  },
-  fill: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (value === "none") return { fill: "none" };
-    if (isArbitrary) return { fill: value };
-    const color = resolveColor(value, colors, false);
-    return color ? { fill: color } : null;
-  },
-  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
-  // Named presets give cross-platform shadow; arbitrary is web-only.
-  "text-shadow": ({ value, isArbitrary }, { colors }) => {
-    if (value === "none") {
-      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
-    }
-    const webPresets = {
-      "": "0 2px 4px rgba(0,0,0,0.3)",
-      sm: "0 1px 2px rgba(0,0,0,0.3)",
-      md: "0 4px 6px rgba(0,0,0,0.3)",
-      lg: "0 8px 16px rgba(0,0,0,0.5)",
-      xl: "0 16px 32px rgba(0,0,0,0.5)"
-    };
-    const nativePresets = {
-      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
-      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
-      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
-      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
-      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
-    };
-    if (value in webPresets) {
-      if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
-      return nativePresets[value] ?? null;
-    }
-    if (isArbitrary) {
-      return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) {
-      return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
-    }
-    return null;
-  }
-};
-
-// src/core/utilities.ts
-var RESOLVERS = {
-  ...colorResolvers,
-  ...spacingResolvers,
-  ...borderResolvers,
-  ...layoutResolvers,
-  ...typographyResolvers,
-  ...filterResolvers,
-  ...transformResolvers,
-  ...effectResolvers,
-  ...miscResolvers
-};
-var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
-function resolveUtility(parsed, theme) {
-  if (!parsed.value) {
-    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
-    if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
-    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
-  }
-  const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
-  if (resolver) return resolver(parsed, theme);
-  return null;
-}
-var PLUGIN_STANDALONE = {};
-var PLUGIN_RESOLVERS = {};
-function clearPluginUtilities() {
-  for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
-  for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
-  _sortedPrefixes = null;
-  _standaloneNames = null;
-}
-function getPluginStandaloneMap() {
-  return PLUGIN_STANDALONE;
-}
-var _sortedPrefixes = null;
-var _standaloneNames = null;
-function getBuiltinUtilityPrefixes() {
-  if (!_sortedPrefixes) {
-    const all = [.../* @__PURE__ */ new Set([...Object.keys(RESOLVERS), ...Object.keys(PLUGIN_RESOLVERS)])];
-    _sortedPrefixes = all.sort((a, b) => b.length - a.length);
-  }
-  return _sortedPrefixes;
-}
-function getBuiltinStandaloneNames() {
-  if (!_standaloneNames) {
-    _standaloneNames = /* @__PURE__ */ new Set([...Object.keys(getStandalone()), ...Object.keys(PLUGIN_STANDALONE)]);
-  }
-  return _standaloneNames;
-}
-
-// src/core/devWarn.ts
-function kbachWarn(message) {
-  console.warn(
-    "%c[kbach]%c " + message,
-    "color:#8b5cf6;font-weight:700",
-    "color:inherit;font-weight:400"
-  );
-}
-
-// src/core/cache.ts
-var LRUCache = class {
-  constructor(capacity = 1e4, onEvict) {
-    this.capacity = capacity;
-    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
-    this.cache = /* @__PURE__ */ new Map();
-    this.onEvict = onEvict;
-  }
-  get(key) {
-    if (!this.cache.has(key)) return void 0;
-    const value = this.cache.get(key);
-    this.cache.delete(key);
-    this.cache.set(key, value);
-    return value;
-  }
-  set(key, value) {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.capacity) {
-      const oldestKey = this.cache.keys().next().value;
-      const oldestValue = this.cache.get(oldestKey);
-      this.cache.delete(oldestKey);
-      this.onEvict?.(oldestKey, oldestValue);
-    }
-    this.cache.set(key, value);
-    return this;
-  }
-  has(key) {
-    return this.cache.has(key);
-  }
-  delete(key) {
-    return this.cache.delete(key);
-  }
-  clear() {
-    this.cache.clear();
-  }
-  get size() {
-    return this.cache.size;
-  }
-};
-
-// src/core/registry.ts
-var BUILTIN_MODIFIERS = {
-  // ── Mode ─────────────────────────────────────────────────────────────────
-  dark: { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
-  "not-light": { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
-  light: { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
-  "not-dark": { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
-  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
-  hover: { order: 10, pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
-  "not-hover": { order: 10, pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
-  focus: { order: 20, pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
-  "not-focus": { order: 20, pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
-  active: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
-  "not-active": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
-  pressed: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
-  "not-pressed": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
-  disabled: { order: 40, pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
-  "not-disabled": { order: 40, pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
-  checked: { order: 35, pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
-  "not-checked": { order: 35, pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
-  visited: { order: 5, pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
-  "not-visited": { order: 5, pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
-  placeholder: { order: 0, pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
-  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
-  first: { order: 0, pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
-  last: { order: 0, pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
-  odd: { order: 0, pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
-  even: { order: 0, pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
-  only: { order: 0, pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
-  "focus-within": { order: 15, pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
-  "focus-visible": { order: 25, pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
-  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
-  before: { order: 0, pseudo: "::before", jsBehavior: "css-only" },
-  after: { order: 0, pseudo: "::after", jsBehavior: "css-only" },
-  selection: { order: 0, pseudo: "::selection", jsBehavior: "css-only" },
-  "first-letter": { order: 0, pseudo: "::first-letter", jsBehavior: "css-only" },
-  "first-line": { order: 0, pseudo: "::first-line", jsBehavior: "css-only" },
-  marker: { order: 0, pseudo: "::marker", jsBehavior: "css-only" },
-  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
-  "group-hover": { order: 10, ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
-  "group-focus": { order: 20, ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
-  "peer-hover": { order: 10, ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
-  "peer-focus": { order: 20, ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
-  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
-  sm: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
-  md: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
-  lg: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
-  xl: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
-  "2xl": { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
-  // ── Print media (CSS-only) ─────────────────────────────────────────────────
-  print: { order: 70, mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
-  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
-  landscape: { order: 70, mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
-  portrait: { order: 70, mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
-  "motion-reduce": { order: 70, mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
-  "motion-safe": { order: 70, mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
-  "contrast-more": { order: 70, mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
-  "contrast-less": { order: 70, mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
-  // ── Directionality (CSS-only) ──────────────────────────────────────────────
-  rtl: { order: 80, dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
-  ltr: { order: 80, dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
-};
-var _pluginModifiers = {};
-var _allNames = null;
-var _interactiveNames = null;
-var _modeNames = null;
-var _responsiveNames = null;
-function _invalidate() {
-  _allNames = null;
-  _interactiveNames = null;
-  _modeNames = null;
-  _responsiveNames = null;
-}
-function registerModifier(name, def) {
-  if (process.env.NODE_ENV !== "production" && name in BUILTIN_MODIFIERS) {
-    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
-    return;
-  }
-  _pluginModifiers[name] = def;
-  _invalidate();
-}
-function clearPluginModifiers() {
-  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
-  _invalidate();
-}
-var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
-var _namedModifierCache = new LRUCache(1e4);
-function getNamedGroupPeerModifier(name) {
-  const cached = _namedModifierCache.get(name);
-  if (cached) return cached;
-  const m = NAMED_GROUP_PEER_RE.exec(name);
-  if (!m) return void 0;
-  const [, kind, trigger, groupName] = m;
-  const escapedName = escapeCSSSelector(groupName);
-  const pseudo = trigger === "hover" ? ":hover" : ":focus";
-  const combinator = kind === "group" ? " " : " ~ ";
-  const def = {
-    // Matches the plain group-hover/group-focus/peer-hover/peer-focus order below.
-    order: trigger === "hover" ? 10 : 20,
-    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
-    jsBehavior: "css-only",
-    forcesImportant: true
-  };
-  _namedModifierCache.set(name, def);
-  return def;
-}
-function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
-}
-function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
-}
-function getModifierOrder(bucketKey) {
-  if (bucketKey === "base") return -1;
-  let max = 0;
-  for (const mod of bucketKey.split(":")) {
-    const order = getModifier(mod)?.order ?? 0;
-    if (order > max) max = order;
-  }
-  return max;
-}
-
-// src/core/parser.ts
-var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
-function isSafeArbitraryValue(value) {
-  if (!UNSAFE_ARBITRARY_VALUE.test(value)) return true;
-  if (process.env.NODE_ENV !== "production") {
-    kbachWarn(`Unsafe arbitrary value rejected: "${value}"`);
-  }
-  return false;
-}
-function parseClass(className) {
-  const trimmed = className.trim();
-  if (!trimmed) return null;
-  const modifiers = [];
-  let remaining = trimmed;
-  while (true) {
-    const colonIdx = findOuterColon(remaining);
-    if (colonIdx === -1) break;
-    const candidate = remaining.slice(0, colonIdx);
-    if (!isKnownModifier(candidate)) break;
-    modifiers.push(candidate);
-    remaining = remaining.slice(colonIdx + 1);
-  }
-  let important = false;
-  if (remaining.startsWith("!") && remaining.length > 1) {
-    important = true;
-    remaining = remaining.slice(1);
-  }
-  let negative = false;
-  if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
-    negative = true;
-    remaining = remaining.slice(1);
-  }
-  let bracketDepth = 0;
-  let bracketStart = -1;
-  for (let i = remaining.length - 1; i >= 0; i--) {
-    if (remaining[i] === "]") bracketDepth++;
-    else if (remaining[i] === "[") {
-      bracketDepth--;
-      if (bracketDepth === 0) {
-        bracketStart = i;
-        break;
-      }
-    }
-  }
-  if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
-    const utility = remaining.slice(0, bracketStart - 1);
-    const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
-    if (!isSafeArbitraryValue(value)) return null;
-    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
-  }
-  if (remaining.endsWith("]") && bracketStart === -1) {
-    if (process.env.NODE_ENV !== "production") {
-      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
-    }
-  }
-  if (remaining.startsWith("[") && remaining.endsWith("]")) {
-    const value = remaining.slice(1, -1).replace(/_/g, " ");
-    if (!isSafeArbitraryValue(value)) return null;
-    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
-  }
-  if (getBuiltinStandaloneNames().has(remaining)) {
-    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
-  }
-  for (const prefix of getBuiltinUtilityPrefixes()) {
-    if (remaining === prefix) {
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
-    }
-    if (remaining.startsWith(prefix + "-")) {
-      const value = remaining.slice(prefix.length + 1);
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
-    }
-  }
-  const firstDash = remaining.indexOf("-");
-  if (firstDash > 0) {
-    return {
-      original: trimmed,
-      modifiers,
-      negative,
-      important,
-      utility: remaining.slice(0, firstDash),
-      value: remaining.slice(firstDash + 1),
-      isArbitrary: false
-    };
-  }
-  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
-}
-function splitClassTokens(classString) {
-  const tokens = [];
-  let current = "";
-  let depth = 0;
-  let parenDepth = 0;
-  for (let i = 0; i < classString.length; i++) {
-    const ch = classString[i];
-    if (ch === "[") {
-      depth++;
-      current += ch;
-      continue;
-    }
-    if (ch === "]") {
-      depth--;
-      current += ch;
-      continue;
-    }
-    if (ch === "(") {
-      parenDepth++;
-      current += ch;
-      continue;
-    }
-    if (ch === ")") {
-      parenDepth--;
-      current += ch;
-      continue;
-    }
-    if (/\s/.test(ch)) {
-      if (depth === 0 && parenDepth === 0) {
-        if (current) {
-          tokens.push(current);
-          current = "";
-        }
-      }
-    } else {
-      current += ch;
-    }
-  }
-  if (current) tokens.push(current);
-  return tokens;
-}
-function parseClasses(classString) {
-  const results = [];
-  for (const token of splitClassTokens(classString)) {
-    const parsed = parseClass(token);
-    if (parsed) results.push(parsed);
-  }
-  return results;
-}
-function findOuterColon(s) {
-  let depth = 0;
-  for (let i = 0; i < s.length; i++) {
-    const ch = s[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    else if (ch === ":" && depth === 0) return i;
-  }
-  return -1;
-}
+// src/vite-plugin/index.ts
+import { readFileSync as readFileSync2, writeFileSync, mkdirSync } from "fs";
+import { join as join3, dirname } from "path";
 
-// src/core/modeAwareColors.ts
-var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
-function buildModeAwareMap(colors) {
-  const map = /* @__PURE__ */ new Map();
-  for (const [name, entry] of Object.entries(colors)) {
-    if (isModeAwareColor(entry)) {
-      map.set(name, entry);
-    } else if (entry && typeof entry === "object") {
-      for (const [shade, val] of Object.entries(entry)) {
-        if (isModeAwareColor(val)) map.set(`${name}-${shade}`, val);
-      }
-    }
-  }
-  return map;
-}
-function getModeAwareMap(colors) {
-  let map = _modeAwareMapCache.get(colors);
-  if (!map) {
-    map = buildModeAwareMap(colors);
-    _modeAwareMapCache.set(colors, map);
-  }
-  return map;
-}
-function expandModeAwareColorClasses(classString, colors) {
-  const map = getModeAwareMap(colors);
-  if (map.size === 0) return classString;
-  const tokens = splitClassTokens(classString);
-  let changed = false;
-  const out = [];
-  for (const token of tokens) {
-    const parsed = parseClass(token);
-    if (!parsed || parsed.isArbitrary) {
-      out.push(token);
-      continue;
-    }
-    const slashIdx = parsed.value.indexOf("/");
-    const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
-    const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
-    const pair = map.get(colorPart);
-    if (!pair) {
-      out.push(token);
-      continue;
-    }
-    changed = true;
-    const bang = parsed.important ? "!" : "";
-    const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
-    const explicitScheme = parsed.modifiers.map((m) => getModifier(m)?.darkScheme).find((s) => s);
-    if (explicitScheme) {
-      const side = explicitScheme === "dark" ? pair.dark : pair.light;
-      out.push(`${bang}${modPrefix}${parsed.utility}-[${side}]${opacitySuffix}`);
-      continue;
-    }
-    out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
-    out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
-  }
-  return changed ? out.join(" ") : classString;
+// src/vite-plugin/wasmNode.ts
+import { generate_css } from "@kbach/core-engine/node";
+function generateCssForToken(token, themeJson) {
+  return JSON.parse(generate_css(token, themeJson));
 }
 
-// src/core/resolver.ts
-var _defaultFontFamily;
-function setDefaultFontFamily(font) {
-  _defaultFontFamily = font;
-}
-var _styleEl = null;
-var _ruleIndexByKey = /* @__PURE__ */ new Map();
-var _sheetKeys = [];
-var _ruleOrderByKey = /* @__PURE__ */ new Map();
-function evictInjectedRule(rule) {
-  const idx = _ruleIndexByKey.get(rule);
-  _ruleIndexByKey.delete(rule);
-  _ruleOrderByKey.delete(rule);
-  if (idx === void 0) return;
-  const sheet = _styleEl?.sheet;
-  if (!sheet) return;
-  try {
-    sheet.deleteRule(idx);
-  } catch {
-    return;
-  }
-  _sheetKeys.splice(idx, 1);
-  for (const [key, i] of _ruleIndexByKey) {
-    if (i > idx) _ruleIndexByKey.set(key, i - 1);
-  }
-}
-var _injectedRules = new LRUCache(5e4, evictInjectedRule);
-var _runtimeCSSDisabled = false;
-function isRuntimeCSSDisabled() {
-  return _runtimeCSSDisabled;
-}
-function getStyleEl() {
-  if (_styleEl) return _styleEl;
-  _styleEl = document.createElement("style");
-  _styleEl.setAttribute("data-kbach", "");
-  document.head.appendChild(_styleEl);
-  return _styleEl;
-}
-var _globalStyleEl = null;
-function getGlobalStyleEl() {
-  if (_globalStyleEl) return _globalStyleEl;
-  _globalStyleEl = document.createElement("style");
-  _globalStyleEl.setAttribute("data-kbach-global", "");
-  document.head.insertBefore(_globalStyleEl, getStyleEl());
-  return _globalStyleEl;
-}
-function injectGlobalStyles(theme) {
-  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
-  const ff = theme.fontFamily;
-  if (ff?.sans && ff.sans !== "System") {
-    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-    rules.push(`body { font-family: ${family}; }`);
-  }
-  getGlobalStyleEl().textContent = rules.join("\n");
-}
-function buildDivideDecls(styles, forceImportant) {
-  const imp = forceImportant ? " !important" : "";
-  const parts = [];
-  if ("__divideX" in styles) {
-    const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px${imp}`, `border-right-width: 0px${imp}`);
-  }
-  if ("__divideY" in styles) {
-    const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px${imp}`, `border-bottom-width: 0px${imp}`);
-  }
-  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}${imp}`);
-  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}${imp}`);
-  return parts.join("; ");
+// src/vite-plugin/scan.ts
+import { readdirSync, readFileSync, statSync } from "fs";
+import { join } from "path";
+function splitClassTokens(str) {
+  return str.split(/\s+/).filter(Boolean);
 }
-function buildSpaceDecls(styles, forceImportant) {
-  const imp = forceImportant ? " !important" : "";
-  const parts = [];
-  if ("__spaceX" in styles) {
-    const v = styles.__spaceX;
-    const val = typeof v === "number" ? `${v}px` : String(v);
-    parts.push(`margin-left: ${val}${imp}`);
-  }
-  if ("__spaceY" in styles) {
-    const v = styles.__spaceY;
-    const val = typeof v === "number" ? `${v}px` : String(v);
-    parts.push(`margin-top: ${val}${imp}`);
-  }
-  return parts.join("; ");
-}
-var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
-  "shadowColor",
-  "shadowOffset",
-  "shadowOpacity",
-  "shadowRadius",
-  "elevation",
-  "includeFontPadding",
-  "textAlignVertical",
-  "writingDirection",
-  "textShadowColor",
-  "textShadowOffset",
-  "textShadowRadius",
-  "tintColor",
-  "__divideX",
-  "__divideY",
-  "__divideColor",
-  "__divideStyle",
-  "__keyframe",
-  "__spaceX",
-  "__spaceY"
-]);
-var CSS_UNITLESS = /* @__PURE__ */ new Set([
-  "opacity",
-  "fontWeight",
-  "flex",
-  "flexGrow",
-  "flexShrink",
-  "order",
-  "zIndex",
-  "aspectRatio",
-  "columnCount",
-  "lineHeight",
-  "gridColumnStart",
-  "gridColumnEnd",
-  "gridRowStart",
-  "gridRowEnd"
-]);
-var RN_SHORTHAND_EXPAND = {
-  marginHorizontal: ["margin-left", "margin-right"],
-  marginVertical: ["margin-top", "margin-bottom"],
-  paddingHorizontal: ["padding-left", "padding-right"],
-  paddingVertical: ["padding-top", "padding-bottom"]
-};
-function styleValueToCSS(styles, forceImportant = false) {
-  const parts = [];
-  for (const [prop, val] of Object.entries(styles)) {
-    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
-    let cssVal;
-    if (typeof val === "number") {
-      const isCustomProp = prop.startsWith("--");
-      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
-    } else {
-      cssVal = String(val);
-    }
-    const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    if (prop in RN_SHORTHAND_EXPAND) {
-      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
-      parts.push(`${p1}: ${cssVal}${imp}`, `${p2}: ${cssVal}${imp}`);
-      continue;
-    }
-    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
-  }
-  return parts.join("; ");
-}
-function camelToKebab(str) {
-  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
-function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
-  const rules = [];
-  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
-    rules.push(styles.__keyframe);
-  }
-  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const isSpace = "__spaceX" in styles || "__spaceY" in styles;
-  const isChildCombinator = isDivide || isSpace;
-  const escaped = escapeCSSSelector(cls);
-  const childSuffix = isChildCombinator ? " > * + *" : "";
-  if (bucketKey === "base") {
-    const decls2 = isDivide ? buildDivideDecls(styles, important) : isSpace ? buildSpaceDecls(styles, important) : styleValueToCSS(styles, important);
-    if (!decls2) return rules;
-    rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
-    return rules;
-  }
-  const mods = bucketKey.split(":");
-  let darkScheme;
-  let needsImportant = important;
-  const pseudoParts = [];
-  const ancestorParts = [];
-  const dirParts = [];
-  const mediaWrappers = [];
-  let minWidth = 0;
-  for (const mod of mods) {
-    const def = getModifier(mod);
-    if (!def) continue;
-    if (def.darkScheme) darkScheme = def.darkScheme;
-    if (def.pseudo) pseudoParts.push(def.pseudo);
-    if (def.ancestorSelector) {
-      ancestorParts.push(def.ancestorSelector);
-      needsImportant = true;
-    }
-    if (def.dirSelector) {
-      dirParts.push(def.dirSelector);
-      needsImportant = true;
-    }
-    if (def.mediaQuery) {
-      mediaWrappers.push(`@media ${def.mediaQuery}`);
-      needsImportant = true;
-    }
-    if (def.isResponsive) {
-      const w = screens[mod] ?? 0;
-      if (w > minWidth) minWidth = w;
-    }
-    if (def.forcesImportant) needsImportant = true;
-  }
-  const pseudoSuffix = pseudoParts.join("");
-  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
-  const ancestorPrefix = ancestorParts.join("");
-  const dirPrefix = dirParts.join("");
-  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const decls = isDivide ? buildDivideDecls(styles, needsImportant) : isSpace ? buildSpaceDecls(styles, needsImportant) : styleValueToCSS(styles, needsImportant);
-  if (!decls) return rules;
-  let rule;
-  if (darkScheme === "dark") {
-    if (darkMode === "media") rule = `@media (prefers-color-scheme: dark) { ${selector} { ${decls} } }`;
-    else if (darkMode === "class") rule = `.dark ${selector} { ${decls} }`;
-    else rule = `[data-theme="dark"] ${selector} { ${decls} }`;
-  } else if (darkScheme === "light") {
-    if (darkMode === "media") rule = `@media (prefers-color-scheme: light) { ${selector} { ${decls} } }`;
-    else if (darkMode === "class") rule = `.light ${selector} { ${decls} }`;
-    else rule = `[data-theme="light"] ${selector} { ${decls} }`;
-  } else {
-    rule = `${selector} { ${decls} }`;
+var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
+function pushTokens(str, into) {
+  for (const tok of splitClassTokens(str)) {
+    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
   }
-  for (const mw of mediaWrappers) rule = `${mw} { ${rule} }`;
-  if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
-  rules.push(rule);
-  return rules;
 }
-function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
-  const rules = [];
-  for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
-    const styles = resolveUtility(parsed, theme);
-    if (!styles) continue;
-    const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
-    rules.push(...buildClassCSSRules(parsed.original, bucketKey, styles, darkMode, parsed.important, screens));
+function pushTemplateLiteralBody(body, into) {
+  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
+  let im;
+  while ((im = interpolationRe.exec(body)) !== null) {
+    pushClassLikeStrings(im[0], into);
   }
-  return rules.join("\n");
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
 }
-
-// src/core/config.ts
-function deepMerge(base, override) {
-  const result = { ...base };
-  for (const key of Object.keys(override)) {
-    const baseVal = base[key];
-    const overVal = override[key];
-    if (baseVal !== null && typeof baseVal === "object" && !Array.isArray(baseVal) && overVal !== null && typeof overVal === "object" && !Array.isArray(overVal)) {
-      result[key] = deepMerge(
-        baseVal,
-        overVal
-      );
-    } else if (overVal !== void 0) {
-      result[key] = overVal;
-    }
+function pushClassLikeStrings(text, into) {
+  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
+  let qm;
+  while ((qm = quotedStringRe.exec(text)) !== null) {
+    const [, quote, content] = qm;
+    if (quote === "`") pushTemplateLiteralBody(content, into);
+    else pushTokens(content, into);
   }
-  return result;
 }
-function resolveColorRefs(colors) {
-  const MAX_DEPTH = 5;
-  function resolveChain(raw, side) {
-    let current = raw;
-    for (let i = 0; i < MAX_DEPTH; i++) {
-      const next = resolveOneRef(current, side);
-      if (!next || next === current) break;
-      current = next;
-    }
-    return current;
-  }
-  function resolveOneRef(ref, side) {
-    const slashIdx = ref.indexOf("/");
-    if (slashIdx > 0) {
-      const baseName = ref.slice(0, slashIdx);
-      const opacity = Number(ref.slice(slashIdx + 1));
-      if (!Number.isFinite(opacity)) return null;
-      let baseRef;
-      const entry2 = colors[baseName];
-      if (typeof entry2 === "string") {
-        baseRef = entry2;
-      } else if (isModeAwareColor(entry2)) {
-        if (!side) return null;
-        baseRef = entry2[side];
-      } else if (entry2 && typeof entry2 === "object" && "6" in entry2) {
-        const v = entry2["6"];
-        baseRef = typeof v === "string" ? v : void 0;
-      }
-      if (baseRef === void 0) return null;
-      const baseHex = resolveChain(baseRef, side);
-      const a = opacity > 1 ? opacity / 100 : opacity;
-      return hexToRgba(baseHex, a);
-    }
-    const split = splitColorShadeRef(ref);
-    if (!split) return null;
-    const { name, shade } = split;
-    if (!/^\d+$/.test(shade)) return null;
-    const entry = colors[name];
-    if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
-    const target = entry[shade];
-    return typeof target === "string" ? target : null;
-  }
-  function resolveValue(val) {
-    return typeof val === "string" ? resolveChain(val, null) : { light: resolveChain(val.light, "light"), dark: resolveChain(val.dark, "dark") };
-  }
-  const out = {};
-  for (const [key, val] of Object.entries(colors)) {
-    if (typeof val === "string" || isModeAwareColor(val)) {
-      out[key] = resolveValue(val);
-    } else {
-      const shades = {};
-      for (const [shade, v] of Object.entries(val)) {
-        shades[shade] = resolveValue(v);
-      }
-      out[key] = shades;
-    }
-  }
-  return out;
+var JSX_TAG_RE = /<([a-z][a-zA-Z0-9]*)[\s/>]/g;
+function scanUsedTags(code) {
+  const tags = /* @__PURE__ */ new Set();
+  let m;
+  JSX_TAG_RE.lastIndex = 0;
+  while ((m = JSX_TAG_RE.exec(code)) !== null) tags.add(m[1]);
+  return tags;
 }
-function buildConfig(userConfig) {
-  let theme = { ...defaultTheme };
-  if (userConfig.theme) {
-    theme = { ...theme, ...userConfig.theme };
-  }
-  if (userConfig.extend) {
-    const extendConfig = userConfig.extend;
-    const { theme: nestedTheme, ...directKeys } = extendConfig;
-    const extSources = [];
-    if (nestedTheme) extSources.push(nestedTheme);
-    if (Object.keys(directKeys).length) extSources.push(directKeys);
-    for (const ext of extSources) {
-      for (const [key, value] of Object.entries(ext)) {
-        if (typeof value !== "object" || value === null || Array.isArray(value)) {
-          if (process.env.NODE_ENV !== "production") {
-            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
-          }
-          continue;
-        }
-        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-          theme[key] = deepMerge(
-            theme[key] ?? {},
-            value
-          );
-        }
+function extractClassStrings(code) {
+  const found = /* @__PURE__ */ new Set();
+  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
+  let m;
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
+  const jsxExprRe = /(?:className|kb)=\{/g;
+  while ((m = jsxExprRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "{") depth++;
+      else if (ch === "}") {
+        if (--depth === 0) break;
       }
+      block += ch;
+      i++;
     }
+    jsxExprRe.lastIndex = i + 1;
+    pushClassLikeStrings(block, found);
   }
-  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
-  const resolved = {
-    darkMode: userConfig.darkMode ?? "attribute",
-    theme,
-    plugins: userConfig.plugins ?? []
-  };
-  if (userConfig.plugins !== void 0) {
-    clearPluginUtilities();
-    clearPluginModifiers();
-  }
-  const pluginAPI = makePluginAPI(resolved.theme);
-  for (const plugin of resolved.plugins) {
-    plugin(pluginAPI);
-  }
-  const rawSans = theme.fontFamily?.sans;
-  const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
-  const nativeSansFont = sansFontValue?.split(",")[0]?.trim().replace(/^['"]|['"]$/g, "");
-  setDefaultFontFamily(nativeSansFont && nativeSansFont !== "System" ? nativeSansFont : void 0);
-  injectGlobalStyles(resolved.theme);
-  return resolved;
-}
-function _selectorToModifierDef(selector) {
-  const s = selector.trim();
-  if (s.startsWith("@media ")) {
-    return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
-  }
-  if (s.startsWith("::") || s.startsWith(":") && !s.includes(" ") && !s.includes("&") && !s.includes("(")) {
-    return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
-  }
-  return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
-}
-function makePluginAPI(theme) {
-  const standalone = getPluginStandaloneMap();
-  return {
-    addUtility(name, styles) {
-      standalone[name] = styles;
-    },
-    addVariant(name, selectorOrDef) {
-      const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      registerModifier(name, def);
-    },
-    theme(path, defaultValue) {
-      const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
-      let current = theme;
-      for (const part of parts) {
-        if (current === null || typeof current !== "object") return defaultValue;
-        current = current[part];
+  const classComposerCallRe = /(?:clsx|cn|classnames|cx|kb)\(/g;
+  while ((m = classComposerCallRe.exec(code)) !== null) {
+    let depth = 1;
+    let i = m.index + m[0].length;
+    let block = "";
+    while (i < code.length && depth > 0) {
+      const ch = code[i];
+      if (ch === "(") depth++;
+      else if (ch === ")") {
+        if (--depth === 0) break;
       }
-      return current ?? defaultValue;
-    },
-    e(className) {
-      return className.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+      block += ch;
+      i++;
     }
-  };
-}
-
-// src/core/generateTypesDts.ts
-var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
-// Regenerated automatically every time your dev server / Metro picks up a
-// change to that file. Safe (and recommended) to add to .gitignore.
-//
-// Gives useColors()/useSpacing() full autocomplete and typo-catching for your
-// custom colors/spacing keys with zero manual setup \u2014 see KbachCustomColors'
-// doc comment in @kbach/react if you'd rather hand-author this instead.
-import '@kbach/react';
-`;
-var IDENT_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
-function propKey(name) {
-  return IDENT_RE.test(name) ? name : JSON.stringify(name);
-}
-function generateKbachTypesDts(theme) {
-  const colorLines = [];
-  for (const [name, value] of Object.entries(theme.colors)) {
-    if (name in defaultColors) continue;
-    const isFlat = typeof value === "string" || isModeAwareColor(value);
-    colorLines.push(`    ${propKey(name)}: ${isFlat ? "string" : "ColorScale"};`);
-  }
-  const spacingLines = [];
-  for (const key of Object.keys(theme.spacing)) {
-    if (key in defaultTheme.spacing) continue;
-    spacingLines.push(`    ${propKey(key)}: true;`);
+    classComposerCallRe.lastIndex = i + 1;
+    pushClassLikeStrings(block, found);
   }
-  if (colorLines.length === 0 && spacingLines.length === 0) return "";
-  const body = [
-    colorLines.length > 0 ? `  interface KbachCustomColors {
-${colorLines.join("\n")}
-  }` : null,
-    spacingLines.length > 0 ? `  interface KbachCustomSpacing {
-${spacingLines.join("\n")}
-  }` : null
-  ].filter((s) => s !== null).join("\n\n");
-  return `${HEADER}
-declare module '@kbach/react' {
-${body}
-}
-`;
-}
-
-// src/vite-plugin.ts
-var process2 = processImport;
-function normPath(p) {
-  const fwd = p.replace(/\\/g, "/");
-  return process2.platform === "win32" ? fwd.toLowerCase() : fwd;
-}
-setCSSGenMode(true);
-var useColor = !!process2.stdout?.isTTY && !process2.env.NO_COLOR;
-var paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
-var purple = (s) => paint("35", s);
-var yellow = (s) => paint("33", s);
-var dim = (s) => paint("2", s);
-var bold = (s) => paint("1", s);
-var TAG = () => `${bold(purple("[kbach]"))}`;
-function warn(message) {
-  console.warn(`${TAG()} ${yellow(message)}`);
-}
-function warnBlock(header, ...lines) {
-  console.warn([`${TAG()} ${yellow(header)}`, ...lines].join("\n"));
-}
-function log(message) {
-  console.log(`${TAG()} ${message}`);
+  const templateRe = /`([^`]{1,2000})`/g;
+  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
+  return [...found];
 }
-function findLineCol(code, needle) {
-  const index = code.indexOf(needle);
-  if (index === -1) return null;
-  let line = 1;
-  let lastNewline = -1;
-  for (let i = 0; i < index; i++) {
-    if (code.charCodeAt(i) === 10) {
-      line++;
-      lastNewline = i;
-    }
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", "dist", "build", "out", ".next", ".output", ".git", ".svn", ".cache", "coverage"]);
+var MAX_SCAN_DEPTH = 10;
+var DEFAULT_FILE_MATCH = /\.(tsx?|jsx?)$/;
+function scanDir(dir, onFile, depth = 0, fileMatch = DEFAULT_FILE_MATCH) {
+  if (depth > MAX_SCAN_DEPTH) return;
+  let entries;
+  try {
+    entries = readdirSync(dir);
+  } catch {
+    return;
   }
-  return { line, column: index - lastNewline };
-}
-function warnAt(message, root, filePath, code, needle) {
-  const pos = findLineCol(code, needle);
-  const relPath = relative(root, filePath).replace(/\\/g, "/");
-  const location = pos ? `${relPath}:${pos.line}:${pos.column}` : relPath;
-  console.warn(`${TAG()} ${yellow(message)}
-  ${dim("at")} ${location}`);
-}
-var KBACH_START = "/* kbach:start */";
-var KBACH_END = "/* kbach:end */";
-var GROUPS = [
-  ["Layout", /^(flex(?!-\d|-auto|-none|-initial|-1)|flex-(col|row|wrap|nowrap)|grid|block|inline|hidden|table|contents|overflow|items-|justify-|self-|place-|grow|shrink|float-|clear-|static|fixed|absolute|relative|sticky|z-|top-|right-|bottom-|left-|inset|aspect)/],
-  ["Sizing", /^(w-|h-|min-w-|max-w-|min-h-|max-h-|size-|flex-1|flex-auto|flex-none|flex-initial|basis-)/],
-  ["Spacing", /^(p-|px-|py-|pt-|pb-|pl-|pr-|m-|mx-|my-|mt-|mb-|ml-|mr-|gap-|space-)/],
-  ["Typography", /^(text-(xs|sm|base|lg|\dxl)|font-|leading-|tracking-|uppercase|lowercase|capitalize|normal-case|italic|not-italic|underline|overline|line-through|no-underline|truncate|whitespace-|text-(left|center|right|justify|start|end)|list-|align-|line-clamp)/],
-  ["Colors", /^(bg-|text-|color-|fill-|stroke-|caret-|accent-)/],
-  ["Borders", /^(border|rounded|ring|outline|divide)/],
-  ["Effects", /^(shadow|opacity|blur|brightness|contrast|grayscale|transition|duration|ease|delay|animate|scale|rotate|translate|transform|cursor|pointer|select-)/]
-];
-var GROUP_ORDER = ["Layout", "Sizing", "Spacing", "Typography", "Colors", "Borders", "Effects", "Utilities", "Dark Mode", "Responsive"];
-function classifyToken(token, responsiveRe) {
-  if (/^dark:/.test(token)) return "Dark Mode";
-  if (responsiveRe.test(token)) return "Responsive";
-  const parsed = parseClass(token);
-  const base = parsed ? parsed.value ? `${parsed.utility}-${parsed.value}` : parsed.utility : token;
-  for (const [label, re] of GROUPS) {
-    if (re.test(base)) return label;
+  for (const entry of entries) {
+    if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
+    const full = join(dir, entry);
+    try {
+      const st = statSync(full);
+      if (st.isDirectory()) scanDir(full, onFile, depth + 1, fileMatch);
+      else if (fileMatch.test(entry)) onFile(full, readFileSync(full, "utf-8"));
+    } catch {
+    }
   }
-  return "Utilities";
 }
-function buildColorVarMap(theme, usedCSS) {
-  const usedHexValues = /* @__PURE__ */ new Set();
-  const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
-  let hm;
-  while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
+
+// src/vite-plugin/cssVars.ts
+function hexToRgbTriplet(hex) {
+  const h = hex.replace("#", "");
+  const expand = (s) => s.length === 3 ? s.split("").map((c) => c + c).join("") : s;
+  const full = expand(h);
+  if (full.length !== 6) return null;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+  return `${r},${g},${b}`;
+}
+function buildColorVarMap(theme, cssText) {
   const replacements = /* @__PURE__ */ new Map();
   const declarations = /* @__PURE__ */ new Map();
-  for (const [name, shades] of Object.entries(theme.colors ?? {})) {
-    const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
-    for (const [fullName, val] of entries) {
-      if (typeof val !== "string" || !/^#[0-9a-fA-F]{3,8}$/.test(val)) continue;
-      if (usedHexValues.has(val.toLowerCase())) {
-        const varName = `--color-${fullName}`;
-        replacements.set(val, `var(${varName})`);
-        declarations.set(varName, val);
-      }
-      const rgb = parseHexRgb(val);
-      if (!rgb) continue;
-      const triplet = `${rgb[0]},${rgb[1]},${rgb[2]}`;
-      const rgbaPrefix = `rgba(${triplet},`;
-      if (usedCSS.includes(rgbaPrefix)) {
-        const rgbVarName = `--color-${fullName}-rgb`;
-        replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
-        declarations.set(rgbVarName, triplet);
-      }
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (typeof value !== "string") continue;
+    const varName = `--color-${name}`;
+    if (cssText.includes(value)) {
+      replacements.set(value, `var(${varName})`);
+      declarations.set(varName, value);
+    }
+    const triplet = hexToRgbTriplet(value);
+    if (!triplet) continue;
+    const rgbaPrefix = `rgba(${triplet},`;
+    if (cssText.includes(rgbaPrefix)) {
+      const rgbVarName = `--color-${name}-rgb`;
+      replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
+      declarations.set(rgbVarName, triplet);
     }
   }
   return { replacements, declarations };
@@ -3385,20 +172,19 @@ var SPACING_PROPS = /* @__PURE__ */ new Set([
   "top",
   "right",
   "bottom",
-  "left",
-  "flex-basis"
+  "left"
 ]);
-function buildSpacingVarMap(theme, usedCSS) {
-  const pxToKey = /* @__PURE__ */ new Map();
-  for (const [key, val] of Object.entries(theme.spacing ?? {})) {
-    if (typeof val === "number" && !pxToKey.has(val)) pxToKey.set(val, key);
-  }
+function buildSpacingVarMap(theme, cssText) {
   const replacements = /* @__PURE__ */ new Map();
   const declarations = /* @__PURE__ */ new Map();
+  const pxToKey = /* @__PURE__ */ new Map();
+  for (const [key, val] of Object.entries(theme.spacing)) {
+    if (!pxToKey.has(val)) pxToKey.set(val, key);
+  }
   const varNameFor = (key) => `--spacing-${key.replace(/\./g, "_")}`;
   const declRe = /([a-z-]+): (\d+(?:\.\d+)?)px/g;
   let m;
-  while ((m = declRe.exec(usedCSS)) !== null) {
+  while ((m = declRe.exec(cssText)) !== null) {
     const [, prop, numStr] = m;
     if (!SPACING_PROPS.has(prop)) continue;
     const key = pxToKey.get(parseFloat(numStr));
@@ -3407,17 +193,53 @@ function buildSpacingVarMap(theme, usedCSS) {
     replacements.set(`${prop}: ${numStr}px`, `${prop}: var(${varName})`);
     declarations.set(varName, `${numStr}px`);
   }
-  const transformRe = /(translateX|translateY)\((\d+(?:\.\d+)?)px\)/g;
-  while ((m = transformRe.exec(usedCSS)) !== null) {
-    const [, fn, numStr] = m;
-    const key = pxToKey.get(parseFloat(numStr));
-    if (key === void 0) continue;
-    const varName = varNameFor(key);
-    replacements.set(`${fn}(${numStr}px)`, `${fn}(var(${varName}))`);
-    declarations.set(varName, `${numStr}px`);
-  }
   return { replacements, declarations };
 }
+function applyVarMap(cssText, ...maps) {
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
+  for (const map of maps) {
+    for (const [k, v] of map.replacements) replacements.set(k, v);
+    for (const [k, v] of map.declarations) declarations.set(k, v);
+  }
+  const sorted = [...replacements].sort(([a], [b]) => b.length - a.length);
+  const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const patterns = sorted.map(([pattern, replacement]) => [new RegExp(escapeRegex(pattern), "g"), replacement]);
+  const text = cssText.replace(/\{([^{}]*)\}/g, (_whole, inner) => {
+    let replaced = inner;
+    for (const [re, replacement] of patterns) {
+      replaced = replaced.replace(re, () => replacement);
+    }
+    return `{${replaced}}`;
+  });
+  return { text, declarations };
+}
+
+// src/vite-plugin/mediaMerge.ts
+var RESPONSIVE_MEDIA_RE = /^@media \(min-width: (\d+)px\) \{ (.+) \}$/;
+function mergeResponsiveMediaBlocks(rules) {
+  const byWidth = /* @__PURE__ */ new Map();
+  const widthOrder = [];
+  const unwrapped = [];
+  for (const rule of rules) {
+    const m = RESPONSIVE_MEDIA_RE.exec(rule);
+    if (!m) {
+      unwrapped.push(rule);
+      continue;
+    }
+    const width = Number(m[1]);
+    if (!byWidth.has(width)) {
+      byWidth.set(width, []);
+      widthOrder.push(width);
+    }
+    byWidth.get(width).push(m[2]);
+  }
+  widthOrder.sort((a, b) => a - b);
+  const merged = widthOrder.map((w) => `@media (min-width: ${w}px) { ${byWidth.get(w).join(" ")} }`);
+  return [...unwrapped, ...merged];
+}
+
+// src/vite-plugin/prettify.ts
 function prettifyCSS(css) {
   const out = [];
   let depth = 0;
@@ -3446,106 +268,35 @@ function prettifyCSS(css) {
   if (trailing) out.push(trailing);
   return out.join("\n");
 }
-function formatKbachCSS(tokenCSS, theme, responsiveRe) {
-  const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
-  const colorVars = buildColorVarMap(theme, allRaw);
-  const spacingVars = buildSpacingVarMap(theme, allRaw);
-  const replacements = new Map([...colorVars.replacements, ...spacingVars.replacements]);
-  const declarations = new Map([...colorVars.declarations, ...spacingVars.declarations]);
-  const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
-  function applyVars(css) {
-    for (const [pattern, replacement] of sortedReplacements)
-      css = css.split(pattern).join(replacement);
-    return css;
-  }
-  const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
-  for (const [token, css] of tokenCSS) {
-    if (!css) continue;
-    const label = classifyToken(token, responsiveRe);
-    if (!groups.has(label)) groups.set(label, []);
-    const parsedToken = parseClass(token);
-    const bucketKey = parsedToken && parsedToken.modifiers.length > 0 ? parsedToken.modifiers.join(":") : "base";
-    groups.get(label).push({ order: getModifierOrder(bucketKey), css: prettifyCSS(applyVars(css)) });
-  }
-  const out = ["/* Generated by Kbach \u2014 do not edit */"];
+
+// src/vite-plugin/format.ts
+var KBACH_START = "/* kbach:start */";
+var KBACH_END = "/* kbach:end */";
+function formatKbachCSS(tokenRules, theme, usedTags) {
+  const allEntries = [];
+  for (const rules of tokenRules.values()) {
+    for (const entry of rules) allEntries.push(entry);
+  }
+  allEntries.sort((a, b) => a.order - b.order);
+  const allRules = allEntries.map((e) => e.rule);
+  const merged = mergeResponsiveMediaBlocks(allRules);
+  const compact = merged.join("\n");
+  const colorMap = buildColorVarMap(theme, compact);
+  const spacingMap = buildSpacingVarMap(theme, compact);
+  const { text, declarations } = applyVarMap(compact, colorMap, spacingMap);
+  const lines = ["/* Generated by Kbach \u2014 do not edit */", "", buildResetCSS(usedTags)];
   if (declarations.size > 0) {
-    out.push("\n:root {");
-    for (const [varName, val] of declarations) out.push(`  ${varName}: ${val};`);
-    out.push("}");
-  }
-  const globalCSS = buildThemeGlobal(theme);
-  if (globalCSS) out.push(`
-/* Global */
-${prettifyCSS(globalCSS)}`);
-  for (const label of GROUP_ORDER) {
-    const items = groups.get(label) ?? [];
-    if (!items.length) continue;
-    const sorted = [...items].sort((a, b) => a.order - b.order);
-    out.push(`
-/* ${label} */`);
-    out.push(sorted.map((it) => it.css).join("\n\n"));
-  }
-  return out.join("\n");
-}
-function buildThemeGlobal(theme) {
-  const lines = [BASE_RESET];
-  const ff = theme.fontFamily;
-  if (ff?.sans && ff.sans !== "System") {
-    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-    lines.push(`body { font-family: ${family}; }`);
+    lines.push("", ":root {");
+    for (const [varName, val] of declarations) lines.push(`  ${varName}: ${val};`);
+    lines.push("}");
   }
+  lines.push("", prettifyCSS(text));
   return lines.join("\n");
 }
-var SKIP_DIRS = /* @__PURE__ */ new Set([
-  "node_modules",
-  "dist",
-  "build",
-  "out",
-  ".next",
-  ".nuxt",
-  ".output",
-  ".git",
-  ".svn",
-  ".cache",
-  "coverage",
-  "__pycache__"
-]);
-function findKbachCSS(root) {
-  const found = [];
-  function scan(dir, depth) {
-    if (depth > 10) return;
-    let entries;
-    try {
-      entries = readdirSync(dir);
-    } catch {
-      return;
-    }
-    for (const entry of entries) {
-      if (entry.startsWith(".") || SKIP_DIRS.has(entry)) continue;
-      const full = join(dir, entry);
-      try {
-        const st = statSync(full);
-        if (st.isDirectory()) scan(full, depth + 1);
-        else if (entry === "kbach.css") found.push(full);
-      } catch {
-      }
-    }
-  }
-  scan(root, 0);
-  if (found.length === 0) return null;
-  found.sort((a, b) => a.split(/[\\/]/g).length - b.split(/[\\/]/g).length);
-  if (found.length > 1) {
-    warnBlock(
-      `Multiple kbach.css found, using the shallowest \u2014 remove the rest:`,
-      ...found.map((f) => dim(`  ${f}`))
-    );
-  }
-  return found[0];
-}
-function writeKbachToFile(filePath, css) {
+function writeKbachToFile(filePath, css, readFile2, writeFile2) {
   let existing = "";
   try {
-    existing = readFileSync(filePath, "utf-8");
+    existing = readFile2(filePath);
   } catch {
   }
   const block = `${KBACH_START}
@@ -3557,322 +308,857 @@ ${KBACH_END}`;
 
 ${block}` : block;
   if (next === existing) return false;
-  writeFileSync(filePath, next, "utf-8");
+  writeFile2(filePath, next);
   return true;
 }
-function writeKbachTypesDts(root, theme) {
-  const filePath = join(root, "kbach-types.d.ts");
-  const content = generateKbachTypesDts(theme);
-  let existing = null;
-  try {
-    existing = readFileSync(filePath, "utf-8");
-  } catch {
-  }
-  if (content === (existing ?? "")) return;
-  try {
-    if (content === "") {
-      unlinkSync(filePath);
-    } else {
-      const isNew = existing === null;
-      writeFileSync(filePath, content, "utf-8");
-      if (isNew) {
-        log(`Generated kbach-types.d.ts \u2014 gives useColors()/useSpacing() autocomplete for your custom colors/spacing keys. Safe to add to .gitignore.`);
-      }
+
+// src/vite-plugin/unknownClassWarnings.ts
+import { join as join2 } from "path";
+var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
+var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
+var useColor = !!process.stdout?.isTTY && !process.env.NO_COLOR;
+var paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
+var green = (s) => paint("32", s);
+var blue = (s) => paint("34", s);
+var white = (s) => paint("97", s);
+var gray = (s) => paint("90", s);
+var bold = (s) => paint("1", s);
+var ARROW = () => green("\u2192");
+var TAG = () => bold(green("[kbach]"));
+var highlight = (s) => bold(white(s));
+function findLineCol(code, needle) {
+  const index = code.indexOf(needle);
+  if (index === -1) return null;
+  let line = 1;
+  let lastNewline = -1;
+  for (let i = 0; i < index; i++) {
+    if (code.charCodeAt(i) === 10) {
+      line++;
+      lastNewline = i;
     }
-  } catch {
   }
+  return { line, column: index - lastNewline };
 }
-function toNumericScreens(screens) {
-  const out = {};
-  for (const [k, v] of Object.entries(screens)) {
-    out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
-  }
-  return out;
+function scanCssFileInto(code, into) {
+  const re = new RegExp(CSS_CLASS_SELECTOR_RE.source, "g");
+  let m;
+  while ((m = re.exec(code)) !== null) into.add(m[1]);
 }
-function pushTemplateLiteralBody(body, into) {
-  const interpolationRe = /\$\{(?:[^{}]|\{[^{}]*\})*\}/g;
-  let im;
-  while ((im = interpolationRe.exec(body)) !== null) {
-    pushClassLikeStrings(im[0], into);
+function scanProjectCssSelectors(root, includeDirs) {
+  const projectCssClasses = /* @__PURE__ */ new Set();
+  for (const dir of includeDirs) {
+    scanDir(join2(root, dir), (_filePath, code) => scanCssFileInto(code, projectCssClasses), 0, CSS_FILE_RE);
   }
-  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
+  return projectCssClasses;
 }
-function pushClassLikeStrings(text, into) {
-  const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
-  let qm;
-  while ((qm = quotedStringRe.exec(text)) !== null) {
-    const [, quote, content] = qm;
-    if (quote === "`") pushTemplateLiteralBody(content, into);
-    else pushTokens(content, into);
-  }
+function stripModifierPrefix(token) {
+  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
 }
-function extractClassStrings(code) {
-  const found = /* @__PURE__ */ new Set();
-  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
-  let m;
-  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
-  const jsxExprRe = /(?:className|kb)=\{/g;
-  while ((m = jsxExprRe.exec(code)) !== null) {
-    let depth = 1;
-    let i = m.index + m[0].length;
-    let block = "";
-    while (i < code.length && depth > 0) {
-      const ch = code[i];
-      if (ch === "{") depth++;
-      else if (ch === "}") {
-        if (--depth === 0) break;
-      }
-      block += ch;
-      i++;
-    }
-    jsxExprRe.lastIndex = i + 1;
-    pushClassLikeStrings(block, found);
-  }
-  const clsxCallRe = /(?:clsx|cn|classnames|cx)\(/g;
-  while ((m = clsxCallRe.exec(code)) !== null) {
-    let depth = 1;
-    let i = m.index + m[0].length;
-    let block = "";
-    while (i < code.length && depth > 0) {
-      const ch = code[i];
-      if (ch === "(") depth++;
-      else if (ch === ")") {
-        if (--depth === 0) break;
-      }
-      block += ch;
-      i++;
-    }
-    clsxCallRe.lastIndex = i + 1;
-    pushClassLikeStrings(block, found);
-  }
-  const templateRe = /`([^`]{1,2000})`/g;
-  while ((m = templateRe.exec(code)) !== null) pushTemplateLiteralBody(m[1], found);
-  return [...found];
+var MARKER_CLASSES = /* @__PURE__ */ new Set(["group", "peer"]);
+function warnIfUnknownClass(token, filePath, code, isResolvable, projectCssClasses, warnedTokens) {
+  if (isResolvable || warnedTokens.has(token)) return;
+  const base = stripModifierPrefix(token);
+  if (!base || projectCssClasses.has(base) || MARKER_CLASSES.has(base)) return;
+  warnedTokens.add(token);
+  const pos = findLineCol(code, token);
+  const location = pos ? `${blue(filePath)}${green(`:${pos.line}:${pos.column}`)}` : blue(filePath);
+  console.warn(
+    `${ARROW()} ${TAG()} ${gray("Unknown class")} ${highlight(token)} ${gray("\u2014 no Kbach utility or project CSS rule matches it. Typo?")}
+  ${bold("at")} ${location}`
+  );
 }
-var NOT_A_CLASS_NAME_RE = /[${}]|-$|^[?:&|!"'=<>]+$/;
-function pushTokens(str, into) {
-  for (const tok of splitClassTokens(str)) {
-    if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
-  }
+
+// src/vite-plugin/classNameHints.ts
+var STRUCTURAL_TOKENS = [
+  // layout.rs
+  "flex",
+  "flex-row",
+  "flex-col",
+  "flex-row-reverse",
+  "flex-col-reverse",
+  "flex-wrap",
+  "flex-wrap-reverse",
+  "flex-nowrap",
+  "flex-1",
+  "flex-auto",
+  "flex-initial",
+  "flex-none",
+  "flex-grow",
+  "flex-grow-0",
+  "flex-shrink",
+  "flex-shrink-0",
+  "grow",
+  "grow-0",
+  "shrink",
+  "shrink-0",
+  "grid",
+  "block",
+  "inline-block",
+  "inline",
+  "inline-flex",
+  "inline-grid",
+  "contents",
+  "flow-root",
+  "hidden",
+  "items-center",
+  "items-start",
+  "items-end",
+  "items-baseline",
+  "items-stretch",
+  "justify-center",
+  "justify-start",
+  "justify-end",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "content-start",
+  "content-end",
+  "content-center",
+  "content-between",
+  "content-around",
+  "content-evenly",
+  "content-stretch",
+  "self-auto",
+  "self-center",
+  "self-start",
+  "self-end",
+  "self-stretch",
+  "self-baseline",
+  "overflow-hidden",
+  "overflow-auto",
+  "overflow-scroll",
+  "overflow-visible",
+  "static",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "aspect-square",
+  "aspect-video",
+  "w-full",
+  "h-full",
+  "min-w-full",
+  "max-w-full",
+  "min-h-full",
+  "max-h-full",
+  "w-screen",
+  "h-screen",
+  "min-w-screen",
+  "max-w-screen",
+  "min-h-screen",
+  "max-h-screen",
+  "w-auto",
+  "h-auto",
+  "m-auto",
+  "mx-auto",
+  "my-auto",
+  // grid.rs — web-only (see the module's own doc comment for why)
+  "grid-cols-none",
+  "grid-rows-none",
+  "grid-flow-row",
+  "grid-flow-col",
+  "grid-flow-dense",
+  "grid-flow-row-dense",
+  "grid-flow-col-dense",
+  "auto-cols-auto",
+  "auto-cols-min",
+  "auto-cols-max",
+  "auto-cols-fr",
+  "auto-rows-auto",
+  "auto-rows-min",
+  "auto-rows-max",
+  "auto-rows-fr",
+  "col-span-full",
+  "row-span-full",
+  "col-start-auto",
+  "col-end-auto",
+  "row-start-auto",
+  "row-end-auto",
+  "col",
+  "col-auto",
+  "row",
+  "row-auto",
+  "place-items-start",
+  "place-items-end",
+  "place-items-center",
+  "place-items-stretch",
+  "place-items-baseline",
+  "place-content-start",
+  "place-content-end",
+  "place-content-center",
+  "place-content-stretch",
+  "place-content-between",
+  "place-content-around",
+  "place-content-evenly",
+  "place-content-baseline",
+  "place-self-auto",
+  "place-self-start",
+  "place-self-end",
+  "place-self-center",
+  "place-self-stretch",
+  "justify-items-start",
+  "justify-items-end",
+  "justify-items-center",
+  "justify-items-stretch",
+  "justify-self-auto",
+  "justify-self-start",
+  "justify-self-end",
+  "justify-self-center",
+  "justify-self-stretch",
+  // transform.rs — web-only (see the module's own doc comment for why)
+  "transform-none",
+  "origin-center",
+  "origin-top",
+  "origin-top-right",
+  "origin-right",
+  "origin-bottom-right",
+  "origin-bottom",
+  "origin-bottom-left",
+  "origin-left",
+  "origin-top-left",
+  // filters.rs — web-only (see the module's own doc comment for why)
+  "blur",
+  "blur-sm",
+  "blur-md",
+  "blur-lg",
+  "blur-xl",
+  "blur-2xl",
+  "blur-3xl",
+  "blur-none",
+  "grayscale",
+  "grayscale-0",
+  "invert",
+  "invert-0",
+  "sepia",
+  "sepia-0",
+  "drop-shadow",
+  "drop-shadow-sm",
+  "drop-shadow-md",
+  "drop-shadow-lg",
+  "drop-shadow-xl",
+  "drop-shadow-2xl",
+  "drop-shadow-none",
+  "filter-none",
+  "backdrop-filter-none",
+  "backdrop-blur",
+  "backdrop-blur-sm",
+  "backdrop-blur-md",
+  "backdrop-blur-lg",
+  "backdrop-blur-xl",
+  "backdrop-blur-2xl",
+  "backdrop-blur-3xl",
+  "backdrop-blur-none",
+  "backdrop-grayscale",
+  "backdrop-grayscale-0",
+  "backdrop-invert",
+  "backdrop-invert-0",
+  "backdrop-sepia",
+  "backdrop-sepia-0",
+  // border.rs
+  "border",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "rounded",
+  "rounded-none",
+  "rounded-sm",
+  "rounded-md",
+  "rounded-lg",
+  "rounded-xl",
+  "rounded-2xl",
+  "rounded-3xl",
+  "rounded-full",
+  "ring",
+  "ring-0",
+  "ring-1",
+  "ring-2",
+  "ring-4",
+  "ring-8",
+  "ring-inset",
+  "ring-offset-0",
+  "ring-offset-1",
+  "ring-offset-2",
+  "ring-offset-4",
+  "ring-offset-8",
+  "outline",
+  "outline-none",
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "border-none",
+  // typography.rs
+  "font-thin",
+  "font-normal",
+  "font-medium",
+  "font-semibold",
+  "font-bold",
+  "font-extrabold",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "underline",
+  "line-through",
+  "no-underline",
+  "truncate",
+  "text-xs",
+  "text-sm",
+  "text-base",
+  "text-lg",
+  "text-xl",
+  "text-2xl",
+  "text-3xl",
+  "text-4xl",
+  "text-left",
+  "text-center",
+  "text-right",
+  "text-justify",
+  // typography.rs — Phase 20 (typography completeness)
+  "italic",
+  "not-italic",
+  "leading-none",
+  "leading-tight",
+  "leading-snug",
+  "leading-normal",
+  "leading-relaxed",
+  "leading-loose",
+  "tracking-tighter",
+  "tracking-tight",
+  "tracking-normal",
+  "tracking-wide",
+  "tracking-wider",
+  "tracking-widest",
+  "decoration-auto",
+  "decoration-from-font",
+  "decoration-solid",
+  "decoration-dashed",
+  "decoration-dotted",
+  "decoration-double",
+  "decoration-wavy",
+  "underline-offset-auto",
+  "underline-offset-0",
+  "underline-offset-1",
+  "underline-offset-2",
+  "underline-offset-4",
+  "underline-offset-8",
+  "text-wrap",
+  "text-nowrap",
+  "text-balance",
+  "text-pretty",
+  "whitespace-normal",
+  "whitespace-nowrap",
+  "whitespace-pre",
+  "whitespace-pre-wrap",
+  "whitespace-pre-line",
+  "break-normal",
+  "break-words",
+  "break-all",
+  "align-baseline",
+  "align-top",
+  "align-middle",
+  "align-bottom",
+  "align-text-top",
+  "align-text-bottom",
+  "align-sub",
+  "align-super",
+  "list-none",
+  "list-disc",
+  "list-decimal",
+  "list-inside",
+  "list-outside",
+  "hyphens-none",
+  "hyphens-manual",
+  "hyphens-auto",
+  // effects.rs
+  "shadow",
+  "shadow-sm",
+  "shadow-md",
+  "shadow-lg",
+  "shadow-xl",
+  "shadow-2xl",
+  "shadow-inner",
+  "shadow-none",
+  "transition",
+  "transition-none",
+  "ease-linear",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "cursor-pointer",
+  "cursor-default",
+  "cursor-not-allowed",
+  "cursor-wait",
+  "select-none",
+  "select-text",
+  "select-all",
+  "pointer-events-none",
+  "pointer-events-auto",
+  // effects.rs — Phase 22 (effects completeness)
+  "text-shadow",
+  "text-shadow-sm",
+  "text-shadow-lg",
+  "text-shadow-none",
+  "mix-blend-normal",
+  "mix-blend-multiply",
+  "mix-blend-screen",
+  "mix-blend-overlay",
+  "mix-blend-darken",
+  "mix-blend-lighten",
+  "mix-blend-color-dodge",
+  "mix-blend-color-burn",
+  "mix-blend-hard-light",
+  "mix-blend-soft-light",
+  "mix-blend-difference",
+  "mix-blend-exclusion",
+  "mix-blend-hue",
+  "mix-blend-saturation",
+  "mix-blend-color",
+  "mix-blend-luminosity",
+  "mix-blend-plus-lighter",
+  "bg-blend-normal",
+  "bg-blend-multiply",
+  "bg-blend-screen",
+  "bg-blend-overlay",
+  "bg-blend-darken",
+  "bg-blend-lighten",
+  "bg-blend-color-dodge",
+  "bg-blend-color-burn",
+  "bg-blend-hard-light",
+  "bg-blend-soft-light",
+  "bg-blend-difference",
+  "bg-blend-exclusion",
+  "bg-blend-hue",
+  "bg-blend-saturation",
+  "bg-blend-color",
+  "bg-blend-luminosity",
+  "bg-blend-plus-lighter",
+  "animate-spin",
+  "animate-ping",
+  "animate-pulse",
+  "animate-bounce",
+  "animate-none",
+  // interactivity.rs — Phase 23 (interactivity & sizing rest)
+  "resize",
+  "resize-none",
+  "resize-y",
+  "resize-x",
+  "touch-auto",
+  "touch-none",
+  "touch-pan-x",
+  "touch-pan-left",
+  "touch-pan-right",
+  "touch-pan-y",
+  "touch-pan-up",
+  "touch-pan-down",
+  "touch-pinch-zoom",
+  "touch-manipulation",
+  "will-change-auto",
+  "will-change-scroll",
+  "will-change-contents",
+  "will-change-transform",
+  "sr-only",
+  "not-sr-only",
+  "border-collapse",
+  "border-separate",
+  "table-auto",
+  "table-fixed",
+  "caption-top",
+  "caption-bottom",
+  "stroke-width-0",
+  "stroke-width-1",
+  "stroke-width-2",
+  // spacing.rs — Phase 23 (size-* shorthand + fraction-based width/height)
+  "size-full",
+  "size-auto",
+  "size-px",
+  "w-1/2",
+  "w-1/3",
+  "w-2/3",
+  "w-1/4",
+  "w-2/4",
+  "w-3/4",
+  "w-1/5",
+  "w-2/5",
+  "w-3/5",
+  "w-4/5",
+  "w-1/6",
+  "w-5/6",
+  "w-1/12",
+  "w-5/12",
+  "w-7/12",
+  "w-11/12",
+  "h-1/2",
+  "h-1/3",
+  "h-2/3",
+  "h-1/4",
+  "h-2/4",
+  "h-3/4",
+  "h-1/5",
+  "h-2/5",
+  "h-3/5",
+  "h-4/5",
+  "h-1/6",
+  "h-5/6",
+  // scroll.rs — Phase 23 (scroll-behavior/-margin/-padding, scroll-snap)
+  "scroll-auto",
+  "scroll-smooth",
+  "snap-start",
+  "snap-end",
+  "snap-center",
+  "snap-align-none",
+  "snap-normal",
+  "snap-always",
+  "snap-none",
+  "snap-x",
+  "snap-y",
+  "snap-both",
+  "snap-mandatory",
+  "snap-proximity",
+  // divide.rs
+  "divide-x",
+  "divide-y",
+  // background.rs — web-only (see the module's own doc comment for why)
+  "bg-top",
+  "bg-bottom",
+  "bg-left",
+  "bg-right",
+  "bg-center",
+  "bg-left-top",
+  "bg-left-bottom",
+  "bg-right-top",
+  "bg-right-bottom",
+  "bg-auto",
+  "bg-cover",
+  "bg-contain",
+  "bg-repeat",
+  "bg-no-repeat",
+  "bg-repeat-x",
+  "bg-repeat-y",
+  "bg-repeat-round",
+  "bg-repeat-space",
+  "bg-fixed",
+  "bg-local",
+  "bg-scroll",
+  "bg-clip-border",
+  "bg-clip-padding",
+  "bg-clip-content",
+  "bg-clip-text",
+  "bg-origin-border",
+  "bg-origin-padding",
+  "bg-origin-content",
+  "bg-none",
+  "bg-linear-to-t",
+  "bg-linear-to-tr",
+  "bg-linear-to-r",
+  "bg-linear-to-br",
+  "bg-linear-to-b",
+  "bg-linear-to-bl",
+  "bg-linear-to-l",
+  "bg-linear-to-tl",
+  "bg-radial",
+  "bg-conic",
+  // Ancestor/sibling-state marker classes — carry no styles of their own,
+  // just a selector target for group-hover:/peer-hover:/etc. below (see
+  // unknownClassWarnings.ts's MARKER_CLASSES for why they need special
+  // handling there too).
+  "group",
+  "peer",
+  // registry.rs modifiers — bare tokens only, not composed with a
+  // following utility (see this module's doc header / the Phase 15 plan).
+  "hover:",
+  "focus:",
+  "focus-visible:",
+  "focus-within:",
+  "active:",
+  "visited:",
+  "disabled:",
+  "checked:",
+  "group-hover:",
+  "group-focus:",
+  "peer-hover:",
+  "peer-focus:",
+  "peer-checked:",
+  "dark:",
+  "motion-safe:",
+  "motion-reduce:",
+  "print:",
+  "sm:",
+  "md:",
+  "lg:",
+  "xl:",
+  "2xl:",
+  // registry.rs modifiers — Phase 24 (expanded variant system), the
+  // FIXED/static additions only. Deliberately excluded: every genuinely
+  // parameterized modifier (has-[...]/group-has-[...]/peer-has-[...]/
+  // data-[...]/aria-[...]/not-[...]/min-[...]/max-[...], and the
+  // generalized group-<pseudo>/peer-<pseudo> beyond the five hardcoded
+  // combos above) — these have no finite enumerable set (their whole point
+  // is arbitrary user-supplied content), so there's nothing meaningful to
+  // suggest beyond the bare prefix, same reasoning as every other
+  // arbitrary-value exclusion in this file. `not-hover:`/`not-disabled:`/
+  // etc. (wrapping a KNOWN static modifier) are excluded for the same
+  // reason — enumerable in principle, but a full cross-product with every
+  // modifier above would be more noise than signal for an editor hint list.
+  "first:",
+  "last:",
+  "only:",
+  "odd:",
+  "even:",
+  "open:",
+  "inert:",
+  "aria-checked:",
+  "aria-disabled:",
+  "aria-expanded:",
+  "aria-hidden:",
+  "aria-pressed:",
+  "aria-readonly:",
+  "aria-required:",
+  "aria-selected:",
+  "aria-busy:",
+  // Phase 25 (container queries & arbitrary properties). "@container" is a
+  // real UTILITY (container-type: inline-size), not a modifier — included
+  // as a bare token like "flex"/"hidden" above, not with the trailing ":"
+  // the modifier tokens below get. "@sm:"/"@md:"/"@lg:"/"@xl:"/"@2xl:" are
+  // container-responsive modifiers (registry.rs's `is_container_responsive`),
+  // and "starting:" wraps in @starting-style. Deliberately excluded, same
+  // "no finite enumerable set" reasoning as Phase 24's exclusions:
+  // "@min-[...]:"/"@max-[...]:" (arbitrary container breakpoints) and every
+  // `[property:value]` arbitrary property — both are open-ended by design.
+  "@container",
+  "@sm:",
+  "@md:",
+  "@lg:",
+  "@xl:",
+  "@2xl:",
+  "starting:"
+];
+var COLOR_PREFIXES = [
+  "bg-",
+  "text-",
+  "border-",
+  "divide-",
+  "decoration-",
+  "from-",
+  "via-",
+  "to-",
+  "text-shadow-",
+  "ring-",
+  "ring-offset-",
+  "caret-",
+  "accent-",
+  "fill-",
+  "stroke-"
+];
+var SPACING_PREFIXES = [
+  "p-",
+  "px-",
+  "py-",
+  "pt-",
+  "pr-",
+  "pb-",
+  "pl-",
+  "m-",
+  "mx-",
+  "my-",
+  "mt-",
+  "mr-",
+  "mb-",
+  "ml-",
+  "gap-",
+  "gap-x-",
+  "gap-y-",
+  "w-",
+  "h-",
+  "min-w-",
+  "max-w-",
+  "min-h-",
+  "max-h-",
+  "size-",
+  "top-",
+  "right-",
+  "bottom-",
+  "left-",
+  "inset-",
+  "space-x-",
+  "space-y-",
+  "indent-",
+  "scroll-m-",
+  "scroll-mx-",
+  "scroll-my-",
+  "scroll-mt-",
+  "scroll-mr-",
+  "scroll-mb-",
+  "scroll-ml-",
+  "scroll-p-",
+  "scroll-px-",
+  "scroll-py-",
+  "scroll-pt-",
+  "scroll-pr-",
+  "scroll-pb-",
+  "scroll-pl-"
+];
+var SIZE_PREFIXES = ["w-", "h-", "min-w-", "max-w-", "min-h-", "max-h-", "size-"];
+var NAMED_SIZES = ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"];
+function buildClassTokens(theme) {
+  const tokens = new Set(STRUCTURAL_TOKENS);
+  for (const colorKey of Object.keys(theme.colors)) {
+    for (const prefix of COLOR_PREFIXES) tokens.add(`${prefix}${colorKey}`);
+  }
+  for (const spacingKey of Object.keys(theme.spacing)) {
+    for (const prefix of SPACING_PREFIXES) tokens.add(`${prefix}${spacingKey}`);
+  }
+  for (const size of NAMED_SIZES) {
+    for (const prefix of SIZE_PREFIXES) tokens.add(`${prefix}${size}`);
+  }
+  return Array.from(tokens).sort();
+}
+function buildClassNameHintsDts(tokens) {
+  const literals = tokens.map((t) => `  | '${t}'`).join("\n");
+  return [
+    "// Generated by Kbach \u2014 do not edit",
+    "// Editor autocomplete for className \u2014 see packages/react/src/vite-plugin/classNameHints.ts",
+    "",
+    "type KbachClassToken =",
+    literals,
+    ";",
+    "",
+    "export type KbachClassName = KbachClassToken | `${string} ${KbachClassToken}` | (string & {});",
+    "",
+    "declare module 'react' {",
+    "  interface HTMLAttributes<T> {",
+    "    className?: KbachClassName | undefined;",
+    "  }",
+    "  interface SVGAttributes<T> {",
+    "    className?: KbachClassName | undefined;",
+    "  }",
+    "}",
+    ""
+  ].join("\n");
 }
-var MAX_SCAN_DEPTH = 10;
-function scanDir(dir, onFile, depth = 0) {
-  if (depth > MAX_SCAN_DEPTH) return;
-  let entries;
-  try {
-    entries = readdirSync(dir);
-  } catch (err) {
-    if (err.code !== "ENOENT") {
-      warn(`Can't read ${dir}: ${err.message}`);
-    }
-    return;
-  }
-  for (const entry of entries) {
-    if (entry.startsWith(".") || entry === "node_modules") continue;
-    const full = join(dir, entry);
-    try {
-      const st = statSync(full);
-      if (st.isDirectory()) scanDir(full, onFile, depth + 1);
-      else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
-    } catch (err) {
-      warn(`Can't process ${full}: ${err.message}`);
-    }
-  }
+
+// src/vite-plugin/index.ts
+var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components"];
+function normPath(p) {
+  const fwd = p.replace(/\\/g, "/");
+  return process.platform === "win32" ? fwd.toLowerCase() : fwd;
 }
-var CSS_CLASS_SELECTOR_RE = /\.(-?[a-zA-Z_][a-zA-Z0-9_-]*)/g;
-var CSS_FILE_RE = /\.(css|scss|sass|less)$/;
-function scanCssFileInto(filePath, into) {
-  try {
-    const text = readFileSync(filePath, "utf-8");
-    let m;
-    CSS_CLASS_SELECTOR_RE.lastIndex = 0;
-    while ((m = CSS_CLASS_SELECTOR_RE.exec(text)) !== null) into.add(m[1]);
-  } catch {
-  }
+var SAFELIST_KEY = "\0kbach-safelist";
+function readFile(path) {
+  return readFileSync2(path, "utf-8");
 }
-function scanCssSelectorsInto(dir, into, depth = 0) {
-  if (depth > MAX_SCAN_DEPTH) return;
-  let entries;
-  try {
-    entries = readdirSync(dir);
-  } catch {
-    return;
-  }
-  for (const entry of entries) {
-    if (entry.startsWith(".") || entry === "node_modules") continue;
-    const full = join(dir, entry);
-    try {
-      const st = statSync(full);
-      if (st.isDirectory()) scanCssSelectorsInto(full, into, depth + 1);
-      else if (CSS_FILE_RE.test(entry)) scanCssFileInto(full, into);
-    } catch {
-    }
-  }
+function writeFile(path, content) {
+  writeFileSync(path, content, "utf-8");
 }
-function stripModifierPrefix(token) {
-  return token.replace(/^(?:[a-zA-Z0-9_/-]+:)+/, "");
+function writeFileEnsuringDir(path, content) {
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, content, "utf-8");
 }
-var DEFAULT_SCAN_DIRS = ["src", "app", "pages", "components", "views", "layouts"];
-function kbach(userConfigOrOptions) {
-  const isOptions = userConfigOrOptions != null && ("framework" in userConfigOrOptions || "include" in userConfigOrOptions);
-  const userConfig = isOptions ? userConfigOrOptions.framework : userConfigOrOptions;
-  const includeDirs = (isOptions ? userConfigOrOptions.include : void 0) ?? DEFAULT_SCAN_DIRS;
-  const cfg = buildConfig(userConfig ?? {});
-  const screens = toNumericScreens(cfg.theme.screens ?? {});
-  const screenKeys = Object.keys(cfg.theme.screens ?? {});
-  const responsivePattern = screenKeys.length ? screenKeys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") : "sm|md|lg|xl|2xl";
-  const responsiveRe = new RegExp(`^(${responsivePattern}):`);
-  let root = process2.cwd();
-  let mainCSSFile = null;
+function kbach(options = {}) {
+  const theme = options.theme ?? defaultTheme;
+  const themeJson = JSON.stringify(theme);
+  const includeDirs = options.include ?? DEFAULT_SCAN_DIRS;
+  const safelist = options.safelist ?? [];
+  let root = process.cwd();
   const fileTokens = /* @__PURE__ */ new Map();
-  const tokenCSS = /* @__PURE__ */ new Map();
-  const projectCssClasses = /* @__PURE__ */ new Set();
+  const tokenRules = /* @__PURE__ */ new Map();
+  const fileTags = /* @__PURE__ */ new Map();
+  let projectCssClasses = /* @__PURE__ */ new Set();
   const warnedTokens = /* @__PURE__ */ new Set();
-  function checkUnknownToken(tok, filePath, code) {
-    if (process2.env.NODE_ENV === "production" || warnedTokens.has(tok) || tok.startsWith("__")) return;
-    const parsed = parseClass(tok);
-    if (parsed && resolveUtility(parsed, cfg.theme) !== null) return;
-    const base = stripModifierPrefix(tok);
-    if (!base || projectCssClasses.has(base)) return;
-    warnedTokens.add(tok);
-    warnAt(`Unknown class "${tok}" \u2014 no Kbach utility or project CSS rule matches it. Typo?`, root, filePath, code, tok);
+  function resolveToken(tok) {
+    if (!tokenRules.has(tok)) {
+      tokenRules.set(tok, generateCssForToken(tok, themeJson).rules);
+    }
+    return tokenRules.get(tok);
   }
   function processFile(filePath, code) {
-    const key = normPath(filePath);
     const tokens = /* @__PURE__ */ new Set();
     for (const tok of extractClassStrings(code)) {
       tokens.add(tok);
-      if (!tokenCSS.has(tok)) {
-        tokenCSS.set(tok, generateClassCSS(tok, cfg.theme, cfg.darkMode, screens));
+      const rules = resolveToken(tok);
+      if (process.env.NODE_ENV !== "production") {
+        warnIfUnknownClass(tok, filePath, code, rules.length > 0, projectCssClasses, warnedTokens);
       }
-      checkUnknownToken(tok, filePath, code);
     }
-    fileTokens.set(key, tokens);
-  }
-  function scanProjectCssSelectors() {
-    for (const dir of includeDirs) scanCssSelectorsInto(join(root, dir), projectCssClasses);
+    fileTokens.set(normPath(filePath), tokens);
+    fileTags.set(normPath(filePath), scanUsedTags(code));
   }
-  function isWithinIncludeDirs(file) {
-    const nf = normPath(file);
-    return includeDirs.some((dir) => {
-      const base = normPath(join(root, dir));
-      return nf === base || nf.startsWith(base.endsWith("/") ? base : `${base}/`);
-    });
+  function processSafelist() {
+    if (safelist.length === 0) return;
+    const tokens = new Set(safelist);
+    for (const tok of tokens) resolveToken(tok);
+    fileTokens.set(SAFELIST_KEY, tokens);
   }
-  function buildTokenCSSView() {
+  function activeTokens() {
     const active = /* @__PURE__ */ new Set();
     for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+    return active;
+  }
+  function activeTags() {
+    const active = /* @__PURE__ */ new Set();
+    for (const tags of fileTags.values()) for (const t of tags) active.add(t);
+    return active;
+  }
+  function generateCSS() {
+    const active = activeTokens();
     const view = /* @__PURE__ */ new Map();
     for (const tok of active) {
-      const css = tokenCSS.get(tok);
-      if (css !== void 0) view.set(tok, css);
+      const rules = tokenRules.get(tok);
+      if (rules) view.set(tok, rules);
     }
-    return view;
+    return formatKbachCSS(view, theme, activeTags());
   }
-  function initialScan() {
-    for (const dir of includeDirs) {
-      scanDir(join(root, dir), processFile);
-    }
+  function mainCSSFile() {
+    return join3(root, "src", "kbach.css");
   }
-  function generateCSS() {
-    return formatKbachCSS(buildTokenCSSView(), cfg.theme, responsiveRe);
+  function classNameHintsFile() {
+    return join3(root, ".kbach", "kbach-classnames.d.ts");
+  }
+  function writeClassNameHints() {
+    const dts = buildClassNameHintsDts(buildClassTokens(theme));
+    writeFileEnsuringDir(classNameHintsFile(), dts);
   }
   function syncMainCSSFile(server) {
-    const active = /* @__PURE__ */ new Set();
-    for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
-    for (const tok of tokenCSS.keys()) {
-      if (!active.has(tok)) tokenCSS.delete(tok);
+    const active = activeTokens();
+    for (const tok of tokenRules.keys()) {
+      if (!active.has(tok)) tokenRules.delete(tok);
     }
-    if (mainCSSFile) {
-      const changed = writeKbachToFile(mainCSSFile, generateCSS());
-      if (changed) server.watcher.emit("change", mainCSSFile);
+    const changed = writeKbachToFile(mainCSSFile(), generateCSS(), readFile, writeFile);
+    if (changed && server) server.watcher.emit("change", mainCSSFile());
+  }
+  function initialScan() {
+    for (const dir of includeDirs) {
+      scanDir(join3(root, dir), processFile);
     }
   }
   return {
     name: "kbach",
     enforce: "pre",
-    // Without this, Vite only discovers @kbach/react needs pre-bundling once it
-    // actually crawls into an import of it — typically the FIRST page load — and
-    // has to stop, optimize it, and force a full reload mid-render. That reload
-    // can land in the middle of a render pass (React hooks resolving against a
-    // module graph that's being swapped out from under it), which is what an
-    // "Invalid hook call" / hook-related crash on first load only usually is.
-    // Declaring it here upfront means Vite pre-bundles it during its initial
-    // dependency scan, before any page ever requests it — no mid-render reload.
-    config() {
-      return {
-        optimizeDeps: {
-          include: ["@kbach/react", "@kbach/react/jsx-runtime", "@kbach/react/jsx-dev-runtime"]
-        }
-      };
-    },
     configResolved(resolved) {
       root = resolved.root;
-      writeKbachTypesDts(root, cfg.theme);
-      const names = new Set(resolved.plugins.map((p) => p.name));
-      if (names.has("react-router") && names.has("vite:react-refresh")) {
-        warnBlock(
-          "@vitejs/plugin-react + reactRouter() conflict \u2014 page will crash before styles apply.",
-          dim('  Both inject Fast Refresh ("RefreshRuntime already declared").'),
-          dim("  Fix: remove react() from vite.config.ts \u2014 tsconfig jsxImportSource is enough.")
-        );
-      }
-    },
-    // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
-    // so styles come solely from the static stylesheet — no duplicate injection.
-    //
-    // Anchored to the START of a source line (^\s*, with the m flag) rather than a
-    // bare \bimport\b anywhere in the file — disableRuntimeCSS() sets a globalThis
-    // flag with no way to re-enable it, so a false match here doesn't just misfire
-    // once, it silently kills ALL runtime CSS injection for the rest of that page's
-    // JS lifetime, including on completely unrelated components. A real import
-    // statement is always the first token on its line (give or take whitespace);
-    // this same text appearing as part of a STRING — e.g. a docs site's own code
-    // sample literally showing `import "./kbach.css";` as example text, which is
-    // exactly what happened here — is never positioned that way, since something
-    // always precedes it syntactically (a quote, JSX braces, an array bracket, …).
-    transform(code, id) {
-      if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
-      if (!/^\s*import\b[^;]*['"][^'"]*kbach\.css['"]/im.test(code)) return;
-      warn(`disableRuntimeCSS() auto-triggered by an import in ${id.replace(/\\/g, "/")}`);
-      return {
-        code: `import { disableRuntimeCSS } from '@kbach/react';
-disableRuntimeCSS();
-${code}`,
-        map: null
-      };
     },
     buildStart() {
-      mainCSSFile = findKbachCSS(root);
-      scanProjectCssSelectors();
+      projectCssClasses = scanProjectCssSelectors(root, includeDirs);
       initialScan();
-      if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
+      processSafelist();
+      writeKbachToFile(mainCSSFile(), generateCSS(), readFile, writeFile);
+      writeClassNameHints();
     },
-    // Vite's `handleHotUpdate` hook only fires for `type === "update"` (plain
-    // file edits) — it's never called for file create/delete, which land on
-    // the watcher's own 'add'/'unlink' events instead (confirmed against
-    // vite's own onHMRUpdate/handleHMRUpdate: the hook loop is gated on
-    // `type === "update"`). Without also listening on those two events here,
-    // creating a new file with new Kbach classes never adds them to
-    // kbach.css, and deleting a file never removes its classes, until a full
-    // dev-server restart. configureServer gives access to the raw watcher so
-    // both cases can share the same sync logic as a plain edit.
+    // handleHotUpdate covers edits; add/unlink (create/delete) land on the
+    // raw watcher instead — Vite's handleHotUpdate hook only fires for
+    // type === "update".
     configureServer(server) {
       const onAddOrUnlink = (file, isUnlink) => {
         if (file.includes("node_modules")) return;
-        if (!isWithinIncludeDirs(file)) return;
-        if (CSS_FILE_RE.test(file)) {
-          if (!isUnlink) scanCssFileInto(file, projectCssClasses);
-          return;
-        }
         if (!/\.(tsx?|jsx?)$/.test(file)) return;
         if (isUnlink) {
           fileTokens.delete(normPath(file));
+          fileTags.delete(normPath(file));
         } else {
           try {
-            processFile(file, readFileSync(file, "utf-8"));
+            processFile(file, readFile(file));
           } catch {
             fileTokens.delete(normPath(file));
+            fileTags.delete(normPath(file));
           }
         }
         syncMainCSSFile(server);
@@ -3882,22 +1168,17 @@ ${code}`,
     },
     handleHotUpdate({ file, server }) {
       if (file.includes("node_modules")) return;
-      if (!isWithinIncludeDirs(file)) return;
-      if (CSS_FILE_RE.test(file)) {
-        scanCssFileInto(file, projectCssClasses);
-        return;
-      }
       if (!/\.(tsx?|jsx?)$/.test(file)) return;
       try {
-        processFile(file, readFileSync(file, "utf-8"));
+        processFile(file, readFile(file));
       } catch {
         fileTokens.delete(normPath(file));
+        fileTags.delete(normPath(file));
       }
       syncMainCSSFile(server);
     }
   };
 }
 export {
-  formatKbachCSS,
   kbach
 };