@kbach/react 0.5.15 → 0.5.16

package/dist/vite-plugin.js

@@ -0,0 +1,3458 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vite-plugin.ts
+var vite_plugin_exports = {};
+__export(vite_plugin_exports, {
+  VIRTUAL_ID: () => VIRTUAL_ID,
+  kbach: () => kbach
+});
+module.exports = __toCommonJS(vite_plugin_exports);
+var import_fs = require("fs");
+var import_path = require("path");
+
+// 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,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40
+  },
+  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: 1,
+    initial: 0,
+    none: 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/platform.ts
+var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+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/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) 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 hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  let r, g, b;
+  if (h.length === 3) {
+    r = parseInt(h[0] + h[0], 16);
+    g = parseInt(h[1] + h[1], 16);
+    b = parseInt(h[2] + h[2], 16);
+  } else {
+    r = parseInt(h.slice(0, 2), 16);
+    g = parseInt(h.slice(2, 4), 16);
+    b = parseInt(h.slice(4, 6), 16);
+  }
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function resolveSpacing(value, negative, spacing, isArbitrary) {
+  if (isArbitrary) {
+    const resolved = isWeb ? value : toNativeValue(value);
+    return negative && typeof resolved === "number" ? -resolved : 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 isWeb ? 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);
+    return `${(num / den * 100).toFixed(6)}%`;
+  }
+  return null;
+}
+function resolveRadius(value, radii, isArbitrary) {
+  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  const key = value === "" ? "DEFAULT" : value;
+  return radii[key] ?? null;
+}
+function resolveFontSize(value, fontSizes, isArbitrary) {
+  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  return fontSizes[value] ?? null;
+}
+var FILTER_COMPOSE = "var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)";
+var BACKDROP_FILTER_COMPOSE = "var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)";
+var STANDALONE = {
+  // 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: isWeb ? { display: "block" } : null,
+  "inline-block": isWeb ? { display: "inline-block" } : null,
+  inline: isWeb ? { display: "inline" } : null,
+  grid: isWeb ? { display: "grid" } : null,
+  grd: isWeb ? { display: "grid" } : null,
+  "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
+  "inline-grid": isWeb ? { display: "inline-grid" } : null,
+  hidden: { display: "none" },
+  contents: isWeb ? { display: "contents" } : null,
+  "flow-root": isWeb ? { 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: isWeb ? { 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: isWeb ? { position: "fixed" } : null,
+  sticky: isWeb ? { position: "sticky" } : null,
+  static: isWeb ? { position: "static" } : null,
+  // Visibility (no `visibility` prop on native; use opacity instead)
+  visible: isWeb ? { visibility: "visible" } : null,
+  invisible: isWeb ? { 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": isWeb ? { overflow: "auto" } : { overflow: "scroll" },
+  // overflowX / overflowY are web-only
+  "overflow-x-hidden": isWeb ? { overflowX: "hidden" } : null,
+  "overflow-x-scroll": isWeb ? { overflowX: "scroll" } : null,
+  "overflow-x-auto": isWeb ? { overflowX: "auto" } : null,
+  "overflow-y-hidden": isWeb ? { overflowY: "hidden" } : null,
+  "overflow-y-scroll": isWeb ? { overflowY: "scroll" } : null,
+  "overflow-y-auto": isWeb ? { overflowY: "auto" } : null,
+  // Object fit (web-only; use resizeMode prop on RN Image)
+  "object-contain": isWeb ? { objectFit: "contain" } : null,
+  "object-cover": isWeb ? { objectFit: "cover" } : null,
+  "object-fill": isWeb ? { objectFit: "fill" } : null,
+  "object-none": isWeb ? { objectFit: "none" } : null,
+  "object-scale-down": isWeb ? { 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": isWeb ? { cursor: "auto" } : null,
+  "cursor-default": isWeb ? { cursor: "default" } : null,
+  "cursor-pointer": isWeb ? { cursor: "pointer" } : null,
+  "cursor-wait": isWeb ? { cursor: "wait" } : null,
+  "cursor-text": isWeb ? { cursor: "text" } : null,
+  "cursor-move": isWeb ? { cursor: "move" } : null,
+  "cursor-not-allowed": isWeb ? { cursor: "not-allowed" } : null,
+  // User select (web-only)
+  "select-none": isWeb ? { userSelect: "none" } : null,
+  "select-text": isWeb ? { userSelect: "text" } : null,
+  "select-all": isWeb ? { userSelect: "all" } : null,
+  "select-auto": isWeb ? { 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": isWeb ? { whiteSpace: "normal" } : null,
+  "whitespace-nowrap": isWeb ? { whiteSpace: "nowrap" } : null,
+  "whitespace-pre": isWeb ? { whiteSpace: "pre" } : null,
+  "whitespace-pre-wrap": isWeb ? { whiteSpace: "pre-wrap" } : null,
+  "whitespace-pre-line": isWeb ? { whiteSpace: "pre-line" } : null,
+  // Word break (web-only)
+  "break-normal": isWeb ? { overflowWrap: "normal", wordBreak: "normal" } : null,
+  "break-words": isWeb ? { overflowWrap: "break-word" } : null,
+  "break-all": isWeb ? { wordBreak: "break-all" } : null,
+  // Misc web-only
+  truncate: isWeb ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
+  "box-border": isWeb ? { boxSizing: "border-box" } : null,
+  "box-content": isWeb ? { boxSizing: "content-box" } : null,
+  "appearance-none": isWeb ? { appearance: "none" } : null,
+  "outline-none": isWeb ? { outline: "none", outlineOffset: "0" } : null,
+  outline: isWeb ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
+  resize: isWeb ? { resize: "both" } : null,
+  "resize-none": isWeb ? { resize: "none" } : null,
+  "resize-y": isWeb ? { resize: "vertical" } : null,
+  "resize-x": isWeb ? { resize: "horizontal" } : null,
+  antialiased: isWeb ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
+  "subpixel-antialiased": isWeb ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
+  "overflow-ellipsis": isWeb ? { textOverflow: "ellipsis" } : null,
+  "sr-only": isWeb ? {
+    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": isWeb ? {
+    position: "static",
+    width: "auto",
+    height: "auto",
+    padding: 0,
+    margin: 0,
+    overflow: "visible",
+    clip: "auto",
+    whiteSpace: "normal"
+  } : null,
+  // Lists (web-only)
+  "list-none": isWeb ? { listStyleType: "none" } : null,
+  "list-disc": isWeb ? { listStyleType: "disc" } : null,
+  "list-decimal": isWeb ? { listStyleType: "decimal" } : null,
+  // Background clip (web-only)
+  "bg-clip-border": isWeb ? { backgroundClip: "border-box" } : null,
+  "bg-clip-padding": isWeb ? { backgroundClip: "padding-box" } : null,
+  "bg-clip-content": isWeb ? { backgroundClip: "content-box" } : null,
+  "bg-clip-text": isWeb ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
+  // Background image
+  "bg-none": isWeb ? { backgroundImage: "none" } : null,
+  // Background size (web-only)
+  "bg-auto": isWeb ? { backgroundSize: "auto" } : null,
+  "bg-cover": isWeb ? { backgroundSize: "cover" } : null,
+  "bg-contain": isWeb ? { backgroundSize: "contain" } : null,
+  // Background position (web-only)
+  "bg-center": isWeb ? { backgroundPosition: "center" } : null,
+  "bg-top": isWeb ? { backgroundPosition: "top" } : null,
+  "bg-bottom": isWeb ? { backgroundPosition: "bottom" } : null,
+  "bg-left": isWeb ? { backgroundPosition: "left" } : null,
+  "bg-right": isWeb ? { backgroundPosition: "right" } : null,
+  "bg-left-top": isWeb ? { backgroundPosition: "left top" } : null,
+  "bg-left-bottom": isWeb ? { backgroundPosition: "left bottom" } : null,
+  "bg-right-top": isWeb ? { backgroundPosition: "right top" } : null,
+  "bg-right-bottom": isWeb ? { backgroundPosition: "right bottom" } : null,
+  // Background repeat (web-only)
+  "bg-repeat": isWeb ? { backgroundRepeat: "repeat" } : null,
+  "bg-no-repeat": isWeb ? { backgroundRepeat: "no-repeat" } : null,
+  "bg-repeat-x": isWeb ? { backgroundRepeat: "repeat-x" } : null,
+  "bg-repeat-y": isWeb ? { backgroundRepeat: "repeat-y" } : null,
+  "bg-repeat-round": isWeb ? { backgroundRepeat: "round" } : null,
+  "bg-repeat-space": isWeb ? { backgroundRepeat: "space" } : null,
+  // Background attachment (web-only)
+  "bg-fixed": isWeb ? { backgroundAttachment: "fixed" } : null,
+  "bg-local": isWeb ? { backgroundAttachment: "local" } : null,
+  "bg-scroll": isWeb ? { backgroundAttachment: "scroll" } : null,
+  // Object position (web-only)
+  "object-center": isWeb ? { objectPosition: "center" } : null,
+  "object-top": isWeb ? { objectPosition: "top" } : null,
+  "object-bottom": isWeb ? { objectPosition: "bottom" } : null,
+  "object-left": isWeb ? { objectPosition: "left" } : null,
+  "object-right": isWeb ? { objectPosition: "right" } : null,
+  "object-left-top": isWeb ? { objectPosition: "left top" } : null,
+  "object-left-bottom": isWeb ? { objectPosition: "left bottom" } : null,
+  "object-right-top": isWeb ? { objectPosition: "right top" } : null,
+  "object-right-bottom": isWeb ? { objectPosition: "right bottom" } : null,
+  // Table (web-only)
+  table: isWeb ? { display: "table" } : null,
+  "table-auto": isWeb ? { tableLayout: "auto" } : null,
+  "table-fixed": isWeb ? { tableLayout: "fixed" } : null,
+  "caption-top": isWeb ? { captionSide: "top" } : null,
+  "caption-bottom": isWeb ? { captionSide: "bottom" } : null,
+  "border-collapse": isWeb ? { borderCollapse: "collapse" } : null,
+  "border-separate": isWeb ? { borderCollapse: "separate" } : null,
+  // List style position (web-only)
+  "list-inside": isWeb ? { listStylePosition: "inside" } : null,
+  "list-outside": isWeb ? { listStylePosition: "outside" } : null,
+  // Font variant numeric (web-only)
+  "normal-nums": isWeb ? { fontVariantNumeric: "normal" } : null,
+  ordinal: isWeb ? { fontVariantNumeric: "ordinal" } : null,
+  "slashed-zero": isWeb ? { fontVariantNumeric: "slashed-zero" } : null,
+  "lining-nums": isWeb ? { fontVariantNumeric: "lining-nums" } : null,
+  "oldstyle-nums": isWeb ? { fontVariantNumeric: "oldstyle-nums" } : null,
+  "proportional-nums": isWeb ? { fontVariantNumeric: "proportional-nums" } : null,
+  "tabular-nums": isWeb ? { fontVariantNumeric: "tabular-nums" } : null,
+  "diagonal-fractions": isWeb ? { fontVariantNumeric: "diagonal-fractions" } : null,
+  "stacked-fractions": isWeb ? { fontVariantNumeric: "stacked-fractions" } : null,
+  // Isolation (web-only)
+  isolate: isWeb ? { isolation: "isolate" } : null,
+  "isolation-auto": isWeb ? { 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: isWeb ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
+  invert: isWeb ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
+  sepia: isWeb ? { "--tw-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
+  // Divide none
+  "divide-none": isWeb ? { __divideX: 0, __divideY: 0 } : null,
+  // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
+  group: isWeb ? {} : null,
+  peer: isWeb ? {} : null,
+  // Text-wrap (web-only)
+  "text-wrap": isWeb ? { textWrap: "wrap" } : null,
+  "text-nowrap": isWeb ? { textWrap: "nowrap" } : null,
+  "text-balance": isWeb ? { textWrap: "balance" } : null,
+  "text-pretty": isWeb ? { textWrap: "pretty" } : null,
+  // Screen sizing (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
+  "w-screen": isWeb ? { width: "100vw" } : null,
+  "min-h-screen": { minHeight: "100vh" },
+  "max-h-screen": { maxHeight: "100vh" },
+  "min-w-screen": isWeb ? { minWidth: "100vw" } : null,
+  "max-w-screen": isWeb ? { 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": isWeb ? { maxWidth: "65ch" } : null,
+  // Extended cursors (web-only)
+  "cursor-grab": isWeb ? { cursor: "grab" } : null,
+  "cursor-grabbing": isWeb ? { cursor: "grabbing" } : null,
+  "cursor-zoom-in": isWeb ? { cursor: "zoom-in" } : null,
+  "cursor-zoom-out": isWeb ? { cursor: "zoom-out" } : null,
+  "cursor-crosshair": isWeb ? { cursor: "crosshair" } : null,
+  "cursor-help": isWeb ? { cursor: "help" } : null,
+  "cursor-none": isWeb ? { cursor: "none" } : null,
+  // Overflow clip (web-only)
+  "overflow-clip": isWeb ? { overflow: "clip" } : null,
+  "overflow-x-clip": isWeb ? { overflowX: "clip" } : null,
+  "overflow-y-clip": isWeb ? { overflowY: "clip" } : null,
+  // Scroll behavior (web-only)
+  "scroll-smooth": isWeb ? { scrollBehavior: "smooth" } : null,
+  "scroll-auto": isWeb ? { scrollBehavior: "auto" } : null,
+  // Float (web-only)
+  "float-left": isWeb ? { float: "left" } : null,
+  "float-right": isWeb ? { float: "right" } : null,
+  "float-start": isWeb ? { float: "inline-start" } : null,
+  "float-end": isWeb ? { float: "inline-end" } : null,
+  "float-none": isWeb ? { float: "none" } : null,
+  // Clear (web-only)
+  "clear-left": isWeb ? { clear: "left" } : null,
+  "clear-right": isWeb ? { clear: "right" } : null,
+  "clear-both": isWeb ? { clear: "both" } : null,
+  "clear-start": isWeb ? { clear: "inline-start" } : null,
+  "clear-end": isWeb ? { clear: "inline-end" } : null,
+  "clear-none": isWeb ? { clear: "none" } : null,
+  // Vertical align (web-only)
+  "align-baseline": isWeb ? { verticalAlign: "baseline" } : null,
+  "align-top": isWeb ? { verticalAlign: "top" } : null,
+  "align-middle": isWeb ? { verticalAlign: "middle" } : null,
+  "align-bottom": isWeb ? { verticalAlign: "bottom" } : null,
+  "align-text-top": isWeb ? { verticalAlign: "text-top" } : null,
+  "align-text-bottom": isWeb ? { verticalAlign: "text-bottom" } : null,
+  "align-sub": isWeb ? { verticalAlign: "sub" } : null,
+  "align-super": isWeb ? { verticalAlign: "super" } : null,
+  // Touch action (web-only)
+  "touch-auto": isWeb ? { touchAction: "auto" } : null,
+  "touch-none": isWeb ? { touchAction: "none" } : null,
+  "touch-pan-x": isWeb ? { touchAction: "pan-x" } : null,
+  "touch-pan-y": isWeb ? { touchAction: "pan-y" } : null,
+  "touch-pan-left": isWeb ? { touchAction: "pan-left" } : null,
+  "touch-pan-right": isWeb ? { touchAction: "pan-right" } : null,
+  "touch-pan-up": isWeb ? { touchAction: "pan-up" } : null,
+  "touch-pan-down": isWeb ? { touchAction: "pan-down" } : null,
+  "touch-pinch-zoom": isWeb ? { touchAction: "pinch-zoom" } : null,
+  "touch-manipulation": isWeb ? { touchAction: "manipulation" } : null
+};
+var RESOLVERS = {
+  // ── Background ─────────────────────────────────────────────────────────────
+  bg: ({ value, isArbitrary }, { colors }) => {
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { backgroundColor: color } : null;
+  },
+  "bg-opacity": ({ value }, _) => {
+    if (!isWeb) return null;
+    const v = parseFloat(value) / 100;
+    return isNaN(v) ? null : { "--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: isWeb ? value : toNativeValue(value) };
+      }
+      return { color: value };
+    }
+    const color = resolveColor(value, colors, false);
+    return color ? { color } : null;
+  },
+  "text-opacity": ({ value }, _) => {
+    if (!isWeb) return null;
+    const v = parseFloat(value) / 100;
+    return isNaN(v) ? null : { "--text-opacity": v };
+  },
+  // ── Padding ────────────────────────────────────────────────────────────────
+  p: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { padding: v } : null;
+  },
+  px: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingHorizontal: v } : null;
+  },
+  py: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingVertical: v } : null;
+  },
+  pt: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingTop: v } : null;
+  },
+  pr: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingRight: v } : null;
+  },
+  pb: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingBottom: v } : null;
+  },
+  pl: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { paddingLeft: v } : null;
+  },
+  // ── Margin ─────────────────────────────────────────────────────────────────
+  m: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { margin: v } : null;
+  },
+  mx: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginHorizontal: v } : null;
+  },
+  my: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginVertical: v } : null;
+  },
+  mt: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginTop: v } : null;
+  },
+  mr: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginRight: v } : null;
+  },
+  mb: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginBottom: v } : null;
+  },
+  ml: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { marginLeft: v } : null;
+  },
+  // ── 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) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
+    return null;
+  },
+  "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderTopWidth: 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderTopWidth: w2 };
+      return { borderTopColor: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderTopColor: color };
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderTopWidth: w } : null;
+  },
+  "border-r": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderRightWidth: 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderRightWidth: w2 };
+      return { borderRightColor: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderRightColor: color };
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderRightWidth: w } : null;
+  },
+  "border-b": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderBottomWidth: 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderBottomWidth: w2 };
+      return { borderBottomColor: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderBottomColor: color };
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderBottomWidth: w } : null;
+  },
+  "border-l": ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { borderLeftWidth: 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderLeftWidth: w2 };
+      return { borderLeftColor: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderLeftColor: color };
+    const w = borderWidth[value];
+    return w !== void 0 ? { borderLeftWidth: w } : null;
+  },
+  // ── 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 { "--tw-blur": "", filter: FILTER_COMPOSE };
+    const v = isArbitrary ? `blur(${value})` : sizes[value];
+    return v !== void 0 ? { "--tw-blur": v, filter: FILTER_COMPOSE } : null;
+  },
+  brightness: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-brightness": v, filter: FILTER_COMPOSE };
+  },
+  contrast: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-contrast": v, filter: FILTER_COMPOSE };
+  },
+  grayscale: ({ value }) => {
+    if (!isWeb) return null;
+    const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    return { "--tw-grayscale": v, filter: FILTER_COMPOSE };
+  },
+  "hue-rotate": ({ value, negative, isArbitrary }) => {
+    if (!isWeb) return null;
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
+    return { "--tw-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
+  },
+  invert: ({ value }) => {
+    if (!isWeb) return null;
+    const v = value === "0" ? "invert(0)" : "invert(100%)";
+    return { "--tw-invert": v, filter: FILTER_COMPOSE };
+  },
+  saturate: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-saturate": v, filter: FILTER_COMPOSE };
+  },
+  sepia: ({ value }) => {
+    if (!isWeb) return null;
+    const v = value === "0" ? "sepia(0)" : "sepia(100%)";
+    return { "--tw-sepia": v, filter: FILTER_COMPOSE };
+  },
+  "drop-shadow": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { "--tw-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 ? { "--tw-drop-shadow": v, filter: FILTER_COMPOSE } : null;
+  },
+  // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
+  filter: ({ value, isArbitrary }) => {
+    if (!isWeb) 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 (!isWeb) 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 { "--tw-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `blur(${value})` : sizes[value];
+    return v !== void 0 ? { "--tw-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
+  },
+  "backdrop-brightness": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-contrast": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-grayscale": ({ value }) => {
+    if (!isWeb) return null;
+    return { "--tw-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
+    if (!isWeb) return null;
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
+    return { "--tw-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-invert": ({ value }) => {
+    if (!isWeb) return null;
+    return { "--tw-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-opacity": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-saturate": ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-sepia": ({ value }) => {
+    if (!isWeb) return null;
+    return { "--tw-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-filter": ({ value, isArbitrary }) => {
+    if (!isWeb) 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 (!isWeb) 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(--tw-gradient-from, transparent), var(--tw-gradient-stops, transparent))`
+    };
+  },
+  from: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return {
+      "--tw-gradient-from": color,
+      "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, transparent)`
+    };
+  },
+  via: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return {
+      "--tw-gradient-via": color,
+      "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent)`
+    };
+  },
+  to: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return { "--tw-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 isWeb ? { 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 isWeb ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
+  },
+  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
+  transform: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
+    if (value === "none") return { transform: "none" };
+    return null;
+  },
+  // Transform origin
+  origin: ({ value, isArbitrary }) => {
+    if (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 isWeb ? { 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 (isWeb) return { textShadow: webPresets[value] };
+      return nativePresets[value] ?? null;
+    }
+    if (isArbitrary) {
+      return isWeb ? { textShadow: value.replace(/_/g, " ") } : null;
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) {
+      return isWeb ? { 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 (isWeb) return { transform: `perspective(${value})` };
+      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
+    }
+    if (value === "none") return isWeb ? { transform: "none" } : null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+  },
+  // ── Tint color (native-only, for Image and icon components) ──────────────
+  tint: ({ value, isArbitrary }, { colors }) => {
+    if (isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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 (!isWeb) 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) return { flex: flex[value] };
+    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, isArbitrary }, _) => {
+    const n = parseInt(value);
+    return isNaN(n) ? null : { order: 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 isWeb ? { 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: isWeb ? value : toNativeValue(value) };
+    const v = lineHeight[value];
+    return v !== void 0 ? { lineHeight: v } : null;
+  },
+  // ── Letter spacing ─────────────────────────────────────────────────────────
+  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
+    if (isArbitrary) return { letterSpacing: isWeb ? 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 isWeb ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
+  },
+  "scale-x": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
+  },
+  "scale-y": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return isWeb ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
+  },
+  // ── Rotate ─────────────────────────────────────────────────────────────────
+  rotate: ({ value, negative, isArbitrary }) => {
+    if (isArbitrary) {
+      const finalValue = negative ? `-${value}` : value;
+      return isWeb ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
+    }
+    const deg = parseFloat(value);
+    if (isNaN(deg)) return null;
+    const finalDeg = negative ? -deg : deg;
+    return isWeb ? { 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 (isWeb) 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 (isWeb) 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 isWeb ? { aspectRatio: "auto" } : null;
+    return { aspectRatio: v };
+  },
+  // ── Transition (web-only; use Animated API on native) ─────────────────────
+  transition: ({ value }) => {
+    if (!isWeb) return null;
+    const presets = {
+      "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 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 (!isWeb) return null;
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDuration: ms };
+  },
+  delay: ({ value, isArbitrary }) => {
+    if (!isWeb) return null;
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDelay: ms };
+  },
+  // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
+  ring: ({ value, isArbitrary }, { colors }) => {
+    if (!isWeb) 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 (!isWeb) 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 };
+    const offsetWidth = !isArbitrary ? value in offsetTokens ? offsetTokens[value] : null : parseFloat(value);
+    if (offsetWidth === null || isNaN(offsetWidth)) return null;
+    return {
+      boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
+    };
+  },
+  // ── Space between (uses CSS gap or margin fallback) ────────────────────────
+  "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { columnGap: v } : null;
+  },
+  "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { rowGap: v } : null;
+  }
+};
+function resolveUtility(parsed, theme) {
+  if (!parsed.value) {
+    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility === "grd" || parsed.utility === "grid") {
+      return { display: "grid" };
+    }
+    if (parsed.utility === "inline-grid") {
+      return { display: "inline-grid" };
+    }
+    if (parsed.utility in STANDALONE) return STANDALONE[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];
+}
+function getPluginStandaloneMap() {
+  return PLUGIN_STANDALONE;
+}
+
+// src/core/parser.ts
+var PLUGIN_MODIFIERS = /* @__PURE__ */ new Set();
+function registerModifier(name) {
+  PLUGIN_MODIFIERS.add(name);
+}
+function clearPluginModifiers() {
+  PLUGIN_MODIFIERS.clear();
+}
+var MODIFIERS = /* @__PURE__ */ new Set([
+  // Theme
+  "dark",
+  "light",
+  "not-dark",
+  "not-light",
+  // Interaction
+  "hover",
+  "focus",
+  "active",
+  "visited",
+  "disabled",
+  "checked",
+  "pressed",
+  "placeholder",
+  "focus-within",
+  "focus-visible",
+  // Negated interaction
+  "not-hover",
+  "not-focus",
+  "not-active",
+  "not-visited",
+  "not-disabled",
+  "not-checked",
+  "not-pressed",
+  // Structural
+  "first",
+  "last",
+  "odd",
+  "even",
+  "only",
+  // Group / peer
+  "group-hover",
+  "group-focus",
+  "peer-hover",
+  "peer-focus",
+  // Responsive (handled separately but accepted)
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  // Pseudo-elements (CSS-injection only; matchesMods returns false for these)
+  "before",
+  "after",
+  "selection",
+  "first-letter",
+  "first-line",
+  "marker",
+  // Print media modifier
+  "print",
+  // Orientation media modifiers (CSS-injection only)
+  "landscape",
+  "portrait",
+  // Accessibility media modifiers (CSS-injection only)
+  "motion-reduce",
+  "motion-safe",
+  "contrast-more",
+  "contrast-less",
+  // Directionality modifiers (CSS-injection only)
+  "rtl",
+  "ltr"
+]);
+var UTILITY_PREFIXES = [
+  // Multi-word flex
+  "flex-row-reverse",
+  "flex-col-reverse",
+  "flex-row",
+  "flex-col",
+  "flex-wrap-reverse",
+  "flex-wrap",
+  "flex-nowrap",
+  "flex-shrink-0",
+  "flex-shrink",
+  "flex-grow-0",
+  "flex-grow",
+  "items-start",
+  "items-end",
+  "items-center",
+  "items-baseline",
+  "items-stretch",
+  "justify-start",
+  "justify-end",
+  "justify-center",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "content-start",
+  "content-end",
+  "content-center",
+  "content-between",
+  "content-around",
+  "content-evenly",
+  "self-start",
+  "self-end",
+  "self-center",
+  "self-auto",
+  "self-stretch",
+  "text-left",
+  "text-right",
+  "text-center",
+  "text-justify",
+  "font-thin",
+  "font-extralight",
+  "font-light",
+  "font-normal",
+  "font-medium",
+  "font-semibold",
+  "font-bold",
+  "font-extrabold",
+  "font-black",
+  "overflow-hidden",
+  "overflow-visible",
+  "overflow-scroll",
+  "overflow-auto",
+  "overflow-x-hidden",
+  "overflow-x-scroll",
+  "overflow-x-auto",
+  "overflow-y-hidden",
+  "overflow-y-scroll",
+  "overflow-y-auto",
+  "object-contain",
+  "object-cover",
+  "object-fill",
+  "object-none",
+  "object-scale-down",
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "border-none",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "rounded-tl",
+  "rounded-tr",
+  "rounded-bl",
+  "rounded-br",
+  "rounded-t",
+  "rounded-r",
+  "rounded-b",
+  "rounded-l",
+  "list-none",
+  "list-disc",
+  "list-decimal",
+  "cursor-auto",
+  "cursor-default",
+  "cursor-pointer",
+  "cursor-wait",
+  "cursor-text",
+  "cursor-move",
+  "cursor-not-allowed",
+  "select-none",
+  "select-text",
+  "select-all",
+  "select-auto",
+  "pointer-events-none",
+  "pointer-events-auto",
+  "whitespace-normal",
+  "whitespace-nowrap",
+  "whitespace-pre-wrap",
+  "whitespace-pre-line",
+  "whitespace-pre",
+  "break-normal",
+  "break-words",
+  "break-all",
+  "break-keep",
+  "bg-clip-border",
+  "bg-clip-padding",
+  "bg-clip-content",
+  "bg-clip-text",
+  "bg-gradient-to",
+  "resize-none",
+  "resize-y",
+  "resize-x",
+  "box-border",
+  "box-content",
+  "gap-x",
+  "gap-y",
+  "inset-x",
+  "inset-y",
+  "divide-x",
+  "divide-y",
+  "space-x",
+  "space-y",
+  "translate-x",
+  "translate-y",
+  "scale-x",
+  "scale-y",
+  "skew-x",
+  "skew-y",
+  // Transform origin (single prefix, value carries direction)
+  "origin",
+  "min-w",
+  "min-h",
+  "max-w",
+  "max-h",
+  "ring-offset",
+  "bg-opacity",
+  "text-opacity",
+  "border-opacity",
+  // Grid placement
+  "col-span",
+  "col-start",
+  "col-end",
+  "row-span",
+  "row-start",
+  "row-end",
+  "grid-cols",
+  "grid-rows",
+  "grid-flow",
+  "auto-cols",
+  "auto-rows",
+  // Grid alignment
+  "place-items",
+  "place-content",
+  "place-self",
+  "justify-items",
+  "justify-self",
+  // Backdrop filters (longer than 'backdrop' alone)
+  "backdrop-blur",
+  "backdrop-brightness",
+  "backdrop-contrast",
+  "backdrop-grayscale",
+  "backdrop-hue-rotate",
+  "backdrop-invert",
+  "backdrop-opacity",
+  "backdrop-saturate",
+  "backdrop-sepia",
+  "backdrop-filter",
+  // Filters
+  "drop-shadow",
+  "hue-rotate",
+  "text-shadow",
+  "underline-offset",
+  "outline-offset",
+  "will-change",
+  "mix-blend",
+  "bg-blend",
+  "decoration",
+  "perspective",
+  "tint",
+  "animate",
+  // Single-word prefixes last
+  "appearance-none",
+  "outline-none",
+  "outline",
+  "inline-flex",
+  "inline-block",
+  "inline-grid",
+  "italic",
+  "non-italic",
+  "underline",
+  "overline",
+  "line-through",
+  "no-underline",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case",
+  "antialiased",
+  "subpixel-antialiased",
+  "overflow-ellipsis",
+  "truncate",
+  "sr-only",
+  "not-sr-only",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  "visible",
+  "invisible",
+  "hidden",
+  "contents",
+  "flow-root",
+  "block",
+  "inline",
+  "flex",
+  "grid",
+  "resize",
+  "appearance",
+  "border",
+  "rounded",
+  "shadow",
+  "size",
+  "opacity",
+  "leading",
+  "tracking",
+  "line-clamp",
+  "basis",
+  "grow",
+  "shrink",
+  "order",
+  "delay",
+  "duration",
+  "scale",
+  "rotate",
+  "aspect",
+  "columns",
+  "ring",
+  "gap",
+  "inset",
+  "filter",
+  "transform",
+  "blur",
+  "brightness",
+  "contrast",
+  "grayscale",
+  "invert",
+  "saturate",
+  "sepia",
+  "bg",
+  "text",
+  "font",
+  "caret",
+  "accent",
+  "from",
+  "via",
+  "to",
+  "divide",
+  "space",
+  "transition",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "p",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "m",
+  "w",
+  "h",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "z",
+  "col",
+  "row"
+];
+var SORTED_PREFIXES = [...new Set(UTILITY_PREFIXES)].sort((a, b) => b.length - a.length);
+var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
+  // Display
+  "flex",
+  "block",
+  "inline-block",
+  "inline",
+  "grid",
+  "inline-flex",
+  "inline-grid",
+  "grd",
+  "hidden",
+  "contents",
+  "flow-root",
+  // Position
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  // Visibility
+  "visible",
+  "invisible",
+  // Typography
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case",
+  "italic",
+  "non-italic",
+  "underline",
+  "overline",
+  "line-through",
+  "no-underline",
+  "truncate",
+  "antialiased",
+  "sr-only",
+  "not-sr-only",
+  // Font variant numeric
+  "normal-nums",
+  "ordinal",
+  "slashed-zero",
+  "lining-nums",
+  "oldstyle-nums",
+  "proportional-nums",
+  "tabular-nums",
+  "diagonal-fractions",
+  "stacked-fractions",
+  // Flexbox
+  "flex-row",
+  "flex-col",
+  "flex-row-reverse",
+  "flex-col-reverse",
+  "flex-wrap",
+  "flex-wrap-reverse",
+  "flex-nowrap",
+  "flex-shrink",
+  "flex-shrink-0",
+  "flex-grow",
+  "flex-grow-0",
+  "items-start",
+  "items-end",
+  "items-center",
+  "items-baseline",
+  "items-stretch",
+  "justify-start",
+  "justify-end",
+  "justify-center",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "content-start",
+  "content-end",
+  "content-center",
+  "content-between",
+  "content-around",
+  "content-evenly",
+  "content-stretch",
+  "self-start",
+  "self-end",
+  "self-center",
+  "self-auto",
+  "self-stretch",
+  "self-baseline",
+  // Text align
+  "text-left",
+  "text-right",
+  "text-center",
+  "text-justify",
+  // Font weight shortcuts
+  "font-thin",
+  "font-extralight",
+  "font-light",
+  "font-normal",
+  "font-medium",
+  "font-semibold",
+  "font-bold",
+  "font-extrabold",
+  "font-black",
+  // Overflow
+  "overflow-hidden",
+  "overflow-visible",
+  "overflow-scroll",
+  "overflow-auto",
+  "overflow-x-hidden",
+  "overflow-x-scroll",
+  "overflow-x-auto",
+  "overflow-y-hidden",
+  "overflow-y-scroll",
+  "overflow-y-auto",
+  // Object fit
+  "object-contain",
+  "object-cover",
+  "object-fill",
+  "object-none",
+  "object-scale-down",
+  // Object position
+  "object-center",
+  "object-top",
+  "object-bottom",
+  "object-left",
+  "object-right",
+  "object-left-top",
+  "object-left-bottom",
+  "object-right-top",
+  "object-right-bottom",
+  // Border
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "border-none",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "border-collapse",
+  "border-separate",
+  // Lists
+  "list-none",
+  "list-disc",
+  "list-decimal",
+  "list-inside",
+  "list-outside",
+  // Cursor / select
+  "cursor-auto",
+  "cursor-default",
+  "cursor-pointer",
+  "cursor-wait",
+  "cursor-text",
+  "cursor-move",
+  "cursor-not-allowed",
+  "select-none",
+  "select-text",
+  "select-all",
+  "select-auto",
+  "pointer-events-none",
+  "pointer-events-auto",
+  // Whitespace / word break
+  "whitespace-normal",
+  "whitespace-nowrap",
+  "whitespace-pre",
+  "whitespace-pre-wrap",
+  "whitespace-pre-line",
+  "break-normal",
+  "break-words",
+  "break-all",
+  // Background clip
+  "bg-clip-border",
+  "bg-clip-padding",
+  "bg-clip-content",
+  "bg-clip-text",
+  // Background size
+  "bg-auto",
+  "bg-cover",
+  "bg-contain",
+  // Background position
+  "bg-center",
+  "bg-top",
+  "bg-bottom",
+  "bg-left",
+  "bg-right",
+  "bg-left-top",
+  "bg-left-bottom",
+  "bg-right-top",
+  "bg-right-bottom",
+  // Background repeat
+  "bg-repeat",
+  "bg-no-repeat",
+  "bg-repeat-x",
+  "bg-repeat-y",
+  "bg-repeat-round",
+  "bg-repeat-space",
+  // Background attachment
+  "bg-fixed",
+  "bg-local",
+  "bg-scroll",
+  // Background image
+  "bg-none",
+  // Box sizing
+  "box-border",
+  "box-content",
+  // Resize
+  "resize",
+  "resize-none",
+  "resize-y",
+  "resize-x",
+  // Outline
+  "appearance-none",
+  "outline-none",
+  "outline",
+  // Table
+  "table",
+  "table-auto",
+  "table-fixed",
+  "caption-top",
+  "caption-bottom",
+  // CSS filters (standalone = default/full effect)
+  "grayscale",
+  "invert",
+  "sepia",
+  // Isolation
+  "isolate",
+  "isolation-auto",
+  // Backface visibility (both platforms)
+  "backface-visible",
+  "backface-hidden",
+  // Divide none
+  "divide-none",
+  // Group / peer markers (no-op style; needed so isKnownUtility recognises them)
+  "group",
+  "peer",
+  // Text-wrap (web-only)
+  "text-wrap",
+  "text-nowrap",
+  "text-balance",
+  "text-pretty",
+  // Screen sizing
+  "w-screen",
+  "min-h-screen",
+  "max-h-screen",
+  "min-w-screen",
+  "max-w-screen",
+  // max-w named container sizes (Tailwind compat)
+  "max-w-none",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+  "max-w-prose",
+  // Extended cursors (web-only)
+  "cursor-grab",
+  "cursor-grabbing",
+  "cursor-zoom-in",
+  "cursor-zoom-out",
+  "cursor-crosshair",
+  "cursor-help",
+  "cursor-none",
+  // Overflow clip (web-only)
+  "overflow-clip",
+  "overflow-x-clip",
+  "overflow-y-clip",
+  // Scroll behavior (web-only)
+  "scroll-smooth",
+  "scroll-auto",
+  // Float & clear (web-only)
+  "float-left",
+  "float-right",
+  "float-start",
+  "float-end",
+  "float-none",
+  "clear-left",
+  "clear-right",
+  "clear-both",
+  "clear-start",
+  "clear-end",
+  "clear-none",
+  // Vertical align (web-only)
+  "align-baseline",
+  "align-top",
+  "align-middle",
+  "align-bottom",
+  "align-text-top",
+  "align-text-bottom",
+  "align-sub",
+  "align-super",
+  // Touch action (web-only)
+  "touch-auto",
+  "touch-none",
+  "touch-pan-x",
+  "touch-pan-y",
+  "touch-pan-left",
+  "touch-pan-right",
+  "touch-pan-up",
+  "touch-pan-down",
+  "touch-pinch-zoom",
+  "touch-manipulation"
+]);
+function parseClass(className) {
+  const trimmed = className.trim();
+  if (!trimmed) return null;
+  const modifiers = [];
+  let remaining = trimmed;
+  for (let i = 0; i < 3; i++) {
+    const colonIdx = findOuterColon(remaining);
+    if (colonIdx === -1) break;
+    const candidate = remaining.slice(0, colonIdx);
+    if (MODIFIERS.has(candidate) || PLUGIN_MODIFIERS.has(candidate)) {
+      modifiers.push(candidate);
+      remaining = remaining.slice(colonIdx + 1);
+    } else {
+      break;
+    }
+  }
+  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);
+  }
+  const bracketStart = remaining.lastIndexOf("-[");
+  if (bracketStart > 0 && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart);
+    const value = remaining.slice(bracketStart + 2, -1);
+    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
+  }
+  if (STANDALONE_UTILITIES.has(remaining)) {
+    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+  }
+  for (const prefix of SORTED_PREFIXES) {
+    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 parseClasses(classString) {
+  const results = [];
+  for (const token of classString.split(/\s+/)) {
+    if (!token) continue;
+    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) {
+    this.capacity = capacity;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  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) {
+      this.cache.delete(this.cache.keys().next().value);
+    }
+    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 styleCache = new LRUCache(1e4);
+var FONT_KEY = "__kbach_default_font__";
+function setDefaultFontFamily(font) {
+  globalThis[FONT_KEY] = font;
+}
+var _styleEl = null;
+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") return;
+  const rules = [];
+  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");
+}
+var MODIFIER_TO_PSEUDO = {
+  hover: ":hover",
+  focus: ":focus",
+  "focus-within": ":focus-within",
+  "focus-visible": ":focus-visible",
+  active: ":active",
+  pressed: ":active",
+  disabled: ":disabled",
+  checked: ":checked",
+  visited: ":visited",
+  placeholder: "::placeholder",
+  first: ":first-child",
+  last: ":last-child",
+  odd: ":nth-child(odd)",
+  even: ":nth-child(even)",
+  only: ":only-child",
+  "not-hover": ":not(:hover)",
+  "not-focus": ":not(:focus)",
+  "not-active": ":not(:active)",
+  "not-pressed": ":not(:active)",
+  "not-disabled": ":not(:disabled)",
+  "not-checked": ":not(:checked)",
+  "not-visited": ":not(:visited)",
+  // Pseudo-elements (CSS-injection only; never applied as inline styles)
+  before: "::before",
+  after: "::after",
+  selection: "::selection",
+  "first-letter": "::first-letter",
+  "first-line": "::first-line",
+  marker: "::marker"
+};
+var GROUP_PEER_PREFIX = {
+  "group-hover": ".group:hover",
+  "group-focus": ".group:focus",
+  "peer-hover": ".peer:hover ~",
+  "peer-focus": ".peer:focus ~"
+};
+var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
+var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+var PRINT_MODS = /* @__PURE__ */ new Set(["print"]);
+var MEDIA_MODS = {
+  landscape: "(orientation: landscape)",
+  portrait: "(orientation: portrait)",
+  "motion-reduce": "(prefers-reduced-motion: reduce)",
+  "motion-safe": "(prefers-reduced-motion: no-preference)",
+  "contrast-more": "(prefers-contrast: more)",
+  "contrast-less": "(prefers-contrast: less)"
+};
+var DIR_MODS = {
+  rtl: '[dir="rtl"]',
+  ltr: '[dir="ltr"]'
+};
+function buildDivideDecls(styles) {
+  const parts = [];
+  if ("__divideX" in styles) {
+    const w = Number(styles.__divideX);
+    parts.push(`border-left-width: ${w}px`);
+    parts.push("border-right-width: 0px");
+  }
+  if ("__divideY" in styles) {
+    const w = Number(styles.__divideY);
+    parts.push(`border-top-width: ${w}px`);
+    parts.push("border-bottom-width: 0px");
+  }
+  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
+  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
+  return parts.join("; ");
+}
+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 escaped = escapeCSSSelector(cls);
+  const childSuffix = isDivide ? " > * + *" : "";
+  if (bucketKey === "base") {
+    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!baseCssDecls) return rules;
+    rules.push(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
+    return rules;
+  }
+  const mods = bucketKey.split(":");
+  const responsiveMods = mods.filter((m) => RESPONSIVE_MODS.has(m));
+  const nonResponsiveMods = mods.filter((m) => !RESPONSIVE_MODS.has(m));
+  const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
+  const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
+  const hasPrint = nonResponsiveMods.includes("print");
+  const mediaMods = nonResponsiveMods.filter((m) => m in MEDIA_MODS);
+  const dirMods = nonResponsiveMods.filter((m) => m in DIR_MODS);
+  const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
+  const pseudoMods = nonResponsiveMods.filter(
+    (m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m) && !(m in MEDIA_MODS) && !(m in DIR_MODS)
+  );
+  const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
+  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
+  const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
+  const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
+  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
+    "first",
+    "last",
+    "odd",
+    "even",
+    "only",
+    "focus-within",
+    "focus-visible"
+  ]);
+  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
+  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!cssDecls) return rules;
+  let rule;
+  if (hasDark) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `.dark ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
+    }
+  } else if (hasLight) {
+    if (darkMode === "media") {
+      rule = `@media (prefers-color-scheme: light) { ${selector} { ${cssDecls} } }`;
+    } else if (darkMode === "class") {
+      rule = `:not(.dark) ${selector} { ${cssDecls} }`;
+    } else {
+      rule = `[data-theme="light"] ${selector} { ${cssDecls} }`;
+    }
+  } else {
+    rule = `${selector} { ${cssDecls} }`;
+  }
+  if (hasPrint) rule = `@media print { ${rule} }`;
+  for (const m of mediaMods) rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
+  if (responsiveMods.length > 0) {
+    const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
+    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");
+}
+var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  "elevation",
+  "includeFontPadding",
+  "textAlignVertical",
+  "writingDirection",
+  // Text shadow native props — web uses the textShadow CSS shorthand instead
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  // tintColor is native-only (Image/icon tinting)
+  "tintColor",
+  // Internal markers — handled specially, never serialized as CSS props
+  "__divideX",
+  "__divideY",
+  "__divideColor",
+  "__divideStyle",
+  "__keyframe"
+]);
+var CSS_UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "fontWeight",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "zIndex",
+  "aspectRatio",
+  "columnCount",
+  "lineHeight",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd"
+]);
+function styleValueToCSS(styles, forceImportant = false) {
+  return Object.entries(styles).filter(
+    ([prop, v]) => v !== void 0 && v !== null && typeof v !== "object" && !RN_ONLY_PROPS.has(prop)
+  ).map(([prop, val]) => {
+    const cssProp = camelToKebab(prop);
+    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" : "";
+    return `${cssProp}: ${cssVal}${imp}`;
+  }).join("; ");
+}
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+// 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 m = /^([a-z][a-z0-9]*)-(\d+)$/.exec(ref);
+  if (!m) return null;
+  const entry = colors[m[1]];
+  if (!entry || typeof entry !== "object") return null;
+  return entry[m[2]] ?? null;
+}
+function resolveColorRefs(colors) {
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string") {
+      out[key] = resolveOneRef(val, colors) ?? val;
+    } else {
+      const shades = {};
+      for (const [shade, hex] of Object.entries(val)) {
+        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
+function buildConfig(userConfig) {
+  let theme = { ...defaultTheme };
+  if (userConfig.theme) {
+    theme = deepMerge(theme, userConfig.theme);
+  }
+  if (userConfig.extend) {
+    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    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 (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          theme[key] = deepMerge(
+            theme[key] ?? {},
+            value
+          );
+        } else if (value !== void 0) {
+          theme[key] = value;
+        }
+      }
+    }
+  }
+  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
+  const resolved = {
+    darkMode: userConfig.darkMode ?? "attribute",
+    theme,
+    plugins: userConfig.plugins ?? []
+  };
+  clearPluginUtilities();
+  clearPluginModifiers();
+  const pluginAPI = makePluginAPI(resolved.theme);
+  for (const plugin of resolved.plugins) {
+    plugin(pluginAPI);
+  }
+  const rawSans = theme.fontFamily.sans;
+  const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
+  setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
+  injectGlobalStyles(resolved.theme);
+  return resolved;
+}
+function makePluginAPI(theme) {
+  const standalone = getPluginStandaloneMap();
+  return {
+    addUtility(name, styles) {
+      standalone[name] = styles;
+    },
+    addVariant(name, selector) {
+      customVariants[name] = selector;
+      registerModifier(name);
+    },
+    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 VIRTUAL_ID = "virtual:kbach/styles.css";
+var RESOLVED_ID = "\0" + VIRTUAL_ID;
+function toNumericScreens(screens) {
+  const out = {};
+  for (const [k, v] of Object.entries(screens)) {
+    out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
+  }
+  return out;
+}
+function scanDir(dir, onFile) {
+  try {
+    for (const entry of (0, import_fs.readdirSync)(dir)) {
+      if (entry.startsWith(".") || entry === "node_modules") continue;
+      const full = (0, import_path.join)(dir, entry);
+      try {
+        const st = (0, import_fs.statSync)(full);
+        if (st.isDirectory()) {
+          scanDir(full, onFile);
+        } else if (/\.(tsx?|jsx?)$/.test(entry)) {
+          onFile((0, import_fs.readFileSync)(full, "utf-8"));
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+}
+function extractClassStrings(code) {
+  const found = [];
+  const re = /(?:className|kb)=(?:["']([^"']+)["']|\{["']([^"']+)["']\})/g;
+  let m;
+  while ((m = re.exec(code)) !== null) {
+    const val = m[1] ?? m[2];
+    if (val) found.push(val);
+  }
+  return found;
+}
+function buildGlobalCSS(theme) {
+  const ff = theme.fontFamily;
+  if (!ff?.sans || ff.sans === "System") return "";
+  const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
+  return `body { font-family: ${family}; }`;
+}
+function kbach(userConfig) {
+  const cfg = buildConfig(userConfig ?? {});
+  const screens = toNumericScreens(cfg.theme.screens ?? {});
+  const cssMap = /* @__PURE__ */ new Map();
+  let root = process.cwd();
+  let isDev = false;
+  function processClassString(classStr) {
+    if (cssMap.has(classStr)) return;
+    cssMap.set(classStr, generateClassCSS(classStr, cfg.theme, cfg.darkMode, screens));
+  }
+  function extractFromCode(code) {
+    let added = false;
+    for (const cls of extractClassStrings(code)) {
+      if (!cssMap.has(cls)) {
+        processClassString(cls);
+        added = true;
+      }
+    }
+    return added;
+  }
+  function getAllCSS() {
+    const parts = [];
+    const global = buildGlobalCSS(cfg.theme);
+    if (global) parts.push(global);
+    for (const css of cssMap.values()) {
+      if (css) parts.push(css);
+    }
+    return parts.join("\n");
+  }
+  return {
+    name: "kbach",
+    enforce: "pre",
+    config(_c, env) {
+      isDev = env.command === "serve";
+    },
+    configResolved(resolved) {
+      root = resolved.root;
+    },
+    buildStart() {
+      for (const dir of ["src", "app", "pages", "components"]) {
+        scanDir((0, import_path.join)(root, dir), (code) => extractFromCode(code));
+      }
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_ID;
+    },
+    load(id) {
+      if (id === RESOLVED_ID) return getAllCSS();
+    },
+    transform(code, id) {
+      if (id.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(id)) return;
+      const added = extractFromCode(code);
+      if (isDev && added) {
+      }
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.includes("node_modules") || !/\.(tsx?|jsx?)$/.test(file)) return;
+      try {
+        const code = (0, import_fs.readFileSync)(file, "utf-8");
+        const added = extractFromCode(code);
+        if (added) {
+          const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
+          if (mod) {
+            server.moduleGraph.invalidateModule(mod);
+            return [mod];
+          }
+        }
+      } catch {
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VIRTUAL_ID,
+  kbach
+});