@kbach/react 0.6.0 → 0.6.2

package/dist/vite-plugin.mjs

@@ -1,19 +1,2889 @@
-import {
-  BASE_RESET,
-  buildConfig,
-  generateClassCSS,
-  setCSSGenMode,
-  splitClassTokens
-} from "./chunk-6NED62DB.mjs";
-
 // src/vite-plugin.ts
 import { readFileSync, writeFileSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 import processImport from "process";
-var process = processImport;
+
+// 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");
+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 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%; }",
+  "input, textarea, select { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; 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; }",
+  "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%",
+    screen: "100vh",
+    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
+  }
+};
+
+// src/core/utilities.ts
+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 in colors) {
+    const entry = colors[colorPart];
+    if (typeof entry === "string") hex = entry;
+    else if (typeof entry === "object" && "6" in entry) hex = entry["6"];
+  } else {
+    const lastDash = colorPart.lastIndexOf("-");
+    if (lastDash > 0) {
+      const colorName = colorPart.slice(0, lastDash);
+      const shade = colorPart.slice(lastDash + 1);
+      const scale = colors[colorName];
+      if (scale && typeof scale === "object" && shade in scale) {
+        hex = scale[shade] ?? null;
+      }
+    }
+  }
+  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
+    if (hex in colors) {
+      const alias = colors[hex];
+      if (typeof alias === "string") hex = alias;
+      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
+    } else {
+      const aliasLastDash = hex.lastIndexOf("-");
+      if (aliasLastDash > 0) {
+        const aliasColorName = hex.slice(0, aliasLastDash);
+        const aliasShade = hex.slice(aliasLastDash + 1);
+        const aliasScale = colors[aliasColorName];
+        if (aliasScale && typeof aliasScale === "object") {
+          hex = aliasScale[aliasShade] ?? null;
+        } else if (typeof aliasScale === "string") {
+          hex = aliasScale;
+        }
+      }
+    }
+  }
+  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;
+  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 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 (/^\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 resolveRadius(value, radii, isArbitrary) {
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
+  const key = value === "" ? "DEFAULT" : value;
+  return radii[key] ?? null;
+}
+function resolveFontSize(value, fontSizes, isArbitrary) {
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
+  return fontSizes[value] ?? null;
+}
+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 _standalone = null;
+function buildStandalone() {
+  const web = getEffectiveIsWeb();
+  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`, `inline-*`, `contents`, `flow-root` have no native equivalent.
+    flex: { display: "flex" },
+    block: web ? { display: "block" } : null,
+    "inline-block": web ? { display: "inline-block" } : null,
+    inline: web ? { display: "inline" } : null,
+    grid: web ? { display: "grid" } : null,
+    grd: web ? { display: "grid" } : null,
+    "inline-flex": { display: web ? "inline-flex" : "flex" },
+    "inline-grid": web ? { display: "inline-grid" } : null,
+    hidden: { display: "none" },
+    contents: web ? { display: "contents" } : null,
+    "flow-root": web ? { display: "flow-root" } : null,
+    // Flex direction (both web and native)
+    "flex-row": { flexDirection: "row" },
+    "flex-col": { flexDirection: "column" },
+    "flex-row-reverse": { flexDirection: "row-reverse" },
+    "flex-col-reverse": { flexDirection: "column-reverse" },
+    // Flex wrap (both)
+    "flex-wrap": { flexWrap: "wrap" },
+    "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
+    "flex-nowrap": { flexWrap: "nowrap" },
+    // Flex grow / shrink (both)
+    "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" },
+    "items-end": { alignItems: "flex-end" },
+    "items-center": { alignItems: "center" },
+    "items-baseline": { alignItems: "baseline" },
+    "items-stretch": { alignItems: "stretch" },
+    // Justify content (both)
+    "justify-start": { justifyContent: "flex-start" },
+    "justify-end": { justifyContent: "flex-end" },
+    "justify-center": { justifyContent: "center" },
+    "justify-between": { justifyContent: "space-between" },
+    "justify-around": { justifyContent: "space-around" },
+    "justify-evenly": { justifyContent: "space-evenly" },
+    // Align content (both)
+    "content-start": { alignContent: "flex-start" },
+    "content-end": { alignContent: "flex-end" },
+    "content-center": { alignContent: "center" },
+    "content-between": { alignContent: "space-between" },
+    "content-around": { alignContent: "space-around" },
+    "content-evenly": { alignContent: "space-evenly" },
+    "content-stretch": { alignContent: "stretch" },
+    // 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 (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
+    "w-screen": web ? { width: "100vw" } : null,
+    "min-h-screen": { minHeight: "100vh" },
+    "max-h-screen": { maxHeight: "100vh" },
+    "min-w-screen": web ? { minWidth: "100vw" } : null,
+    "max-w-screen": web ? { maxWidth: "100vw" } : 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() {
+  if (!_standalone) _standalone = buildStandalone();
+  return _standalone;
+}
+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"
+};
+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]: 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 RESOLVERS = {
+  // ── Background ─────────────────────────────────────────────────────────────
+  bg: ({ value, isArbitrary }, { colors }) => {
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { backgroundColor: color } : null;
+  },
+  "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 };
+  },
+  // ── 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: value };
+    }
+    const color = resolveColor(value, colors, false);
+    return color ? { color } : null;
+  },
+  "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 };
+  },
+  // ── Padding & margin ───────────────────────────────────────────────────────
+  // Generated below via makeSpacingResolver() — see PADDING_MARGIN_PROPS.
+  // ── 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;
+  },
+  // ── 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: 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;
+  },
+  // ── 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;
+  },
+  // ── 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    return { "--kb-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    return { "--kb-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    return { "--kb-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", 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;
+  },
+  // ── 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 };
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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 }] };
+  },
+  // ── 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;
+  },
+  // ── 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;
+  },
+  // ── 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 }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
+    const defs = {
+      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) } }"
+      }
+    };
+    const def = defs[value];
+    return def ? def : 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
+    };
+  },
+  // ── 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;
+  },
+  // ── Flex ───────────────────────────────────────────────────────────────────
+  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 };
+  },
+  basis: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { flexBasis: v } : null;
+  },
+  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 };
+  },
+  // ── 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;
+  },
+  // ── 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 };
+  },
+  // ── 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 };
+  },
+  // ── 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;
+  },
+  // ── Shadow ─────────────────────────────────────────────────────────────────
+  shadow: ({ value }, { shadow }) => {
+    const key = value === "" ? "DEFAULT" : value;
+    return shadow[key] ?? 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` }] };
+  },
+  // ── Translate ──────────────────────────────────────────────────────────────
+  "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { transform: `translateX(${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(${v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateY: n }] };
+    }
+    return { transform: [{ translateY: v }] };
+  },
+  // ── 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 };
+  },
+  // ── 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 };
+  },
+  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  ring: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_WIDTH = 3;
+    if (!value) {
+      return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    if (value === "inset") {
+      return { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` };
+    }
+    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    if (!isArbitrary && value in widthTokens) {
+      const w = widthTokens[value];
+      return { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` };
+    }
+    if (isArbitrary) {
+      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
+      if (numMatch) {
+        const unit = numMatch[2] ?? "px";
+        return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+      }
+      return { boxShadow: value.replace(/_/g, " ") };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` };
+    return null;
+  },
+  "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}`
+    };
+  },
+  // ── 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)) {
+  RESOLVERS[utility] = makeSpacingResolver(prop);
+}
+for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
+  RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
+}
+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;
+  }
+  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/registry.ts
+var BUILTIN_MODIFIERS = {
+  // ── Mode ─────────────────────────────────────────────────────────────────
+  dark: { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
+  hover: { pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
+  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
+  first: { pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
+  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
+  before: { pseudo: "::before", jsBehavior: "css-only" },
+  after: { pseudo: "::after", jsBehavior: "css-only" },
+  selection: { pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { pseudo: "::marker", jsBehavior: "css-only" },
+  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
+  "group-hover": { ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
+  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
+  sm: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
+  // ── Print media (CSS-only) ─────────────────────────────────────────────────
+  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
+  landscape: { mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
+  // ── Directionality (CSS-only) ──────────────────────────────────────────────
+  rtl: { dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { 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) {
+    console.warn(`[kbach] registerModifier: "${name}" is a built-in modifier and cannot be overridden. Use a different name.`);
+    return;
+  }
+  _pluginModifiers[name] = def;
+  _invalidate();
+}
+function clearPluginModifiers() {
+  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
+  _invalidate();
+}
+function getModifier(name) {
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
+}
+function isKnownModifier(name) {
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
+}
+
+// src/core/parser.ts
+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, " ");
+    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
+  }
+  if (remaining.endsWith("]") && bracketStart === -1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+    }
+  }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    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/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/resolver.ts
+var FONT_KEY = "__kbach_default_font__";
+function setDefaultFontFamily(font) {
+  globalThis[FONT_KEY] = font;
+}
+var _styleEl = null;
+function evictInjectedRule(rule) {
+  const sheet = _styleEl?.sheet;
+  if (!sheet) return;
+  for (let i = 0; i < sheet.cssRules.length; i++) {
+    if (sheet.cssRules[i].cssText === rule) {
+      try {
+        sheet.deleteRule(i);
+      } catch {
+      }
+      return;
+    }
+  }
+}
+var _injectedRules = new LRUCache(5e4, evictInjectedRule);
+var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+function isRuntimeCSSDisabled() {
+  return !!globalThis[_CSS_DISABLED_KEY];
+}
+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 = [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("; ");
+}
+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") {
+      cssVal = val === 0 || 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} }`;
+  }
+  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(classString)) {
+    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));
+  }
+  return rules.join("\n");
+}
+
+// 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;
+    }
+  }
+  return result;
+}
+var CONFIG_KEY = "__kbach_config_store__";
+function getConfigStore() {
+  const g = globalThis;
+  if (!g[CONFIG_KEY]) {
+    g[CONFIG_KEY] = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
+  }
+  return g[CONFIG_KEY];
+}
+function resolveOneRef(ref, colors) {
+  const lastDash = ref.lastIndexOf("-");
+  if (lastDash <= 0) return null;
+  const name = ref.slice(0, lastDash);
+  const shade = ref.slice(lastDash + 1);
+  if (!/^\d+$/.test(shade)) return null;
+  const entry = colors[name];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[shade] ?? null;
+}
+function resolveColorRefs(colors) {
+  const MAX_DEPTH = 5;
+  function resolveChain(raw) {
+    let current = raw;
+    for (let i = 0; i < MAX_DEPTH; i++) {
+      const next = resolveOneRef(current, colors);
+      if (!next || next === current) break;
+      current = next;
+    }
+    return current;
+  }
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveChain(val);
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveChain(hex);
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
+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") {
+            console.warn(`[kbach] config.extend.${key} must be a plain object, got ${typeof value}. Skipping.`);
+          }
+          continue;
+        }
+        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          theme[key] = deepMerge(
+            theme[key] ?? {},
+            value
+          );
+        }
+      }
+    }
+  }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
+  const resolved = {
+    darkMode: userConfig.darkMode ?? "attribute",
+    theme,
+    plugins: userConfig.plugins ?? []
+  };
+  if (userConfig.plugins !== void 0) {
+    clearPluginUtilities();
+    clearPluginModifiers();
+  }
+  const _store = getConfigStore();
+  for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
+  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;
+  setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : 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;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
+      if (selector !== null && selector !== name) customVariants[name] = selector;
+      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];
+      }
+      return current ?? defaultValue;
+    },
+    e(className) {
+      return className.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+    }
+  };
+}
+var customVariants = new Proxy(
+  {},
+  {
+    get(_t, p) {
+      return typeof p === "string" ? getConfigStore().customVariants[p] : void 0;
+    },
+    set(_t, p, v) {
+      if (typeof p === "string") getConfigStore().customVariants[p] = v;
+      return true;
+    },
+    ownKeys() {
+      return Object.keys(getConfigStore().customVariants);
+    },
+    getOwnPropertyDescriptor(_t, p) {
+      if (typeof p !== "string") return void 0;
+      const v = getConfigStore().customVariants[p];
+      return v !== void 0 ? { value: v, writable: true, enumerable: true, configurable: true } : void 0;
+    }
+  }
+);
+
+// src/vite-plugin.ts
+var process2 = processImport;
 function normPath(p) {
   const fwd = p.replace(/\\/g, "/");
-  return process.platform === "win32" ? fwd.toLowerCase() : fwd;
+  return process2.platform === "win32" ? fwd.toLowerCase() : fwd;
 }
 setCSSGenMode(true);
 var KBACH_START = "/* kbach:start */";
@@ -58,8 +2928,9 @@ function buildColorVarMap(theme, usedCSS) {
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
   const colorVars = buildColorVarMap(theme, allRaw);
+  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of colorVars)
+    for (const [val, varName] of sortedColorVars)
       css = css.split(val).join(`var(${varName})`);
     return css;
   }
@@ -253,7 +3124,7 @@ function kbach(userConfigOrOptions) {
   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 = process.cwd();
+  let root = process2.cwd();
   let mainCSSFile = null;
   const fileTokens = /* @__PURE__ */ new Map();
   const tokenCSS = /* @__PURE__ */ new Map();