@kbach/react 0.6.30 → 0.6.32

package/dist/core/index.js

@@ -31,6 +31,7 @@ __export(index_exports, {
   defaultTheme: () => defaultTheme,
   disableRuntimeCSS: () => disableRuntimeCSS,
   escapeCSSSelector: () => escapeCSSSelector,
+  expandModeAwareColorClasses: () => expandModeAwareColorClasses,
   flatten: () => flatten,
   generateClassCSS: () => generateClassCSS,
   getActiveBreakpoints: () => getActiveBreakpoints,
@@ -50,6 +51,7 @@ __export(index_exports, {
   initConfig: () => initConfig,
   isKnownModifier: () => isKnownModifier,
   isKnownUtility: () => isKnownUtility,
+  isModeAwareColor: () => isModeAwareColor,
   isNative: () => isNative,
   isRuntimeCSSDisabled: () => isRuntimeCSSDisabled,
   isWeb: () => isWeb,
@@ -82,595 +84,41 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/core/theme.ts
-var defaultColors = {
-  transparent: "transparent",
-  current: "currentColor",
-  black: "#000000",
-  white: "#ffffff",
-  slate: {
-    1: "#f8fafc",
-    2: "#f1f5f9",
-    3: "#e2e8f0",
-    4: "#cbd5e1",
-    5: "#94a3b8",
-    6: "#64748b",
-    7: "#475569",
-    8: "#334155",
-    9: "#1e293b",
-    10: "#0f172a",
-    11: "#020617",
-    12: "#01020a"
-  },
-  gray: {
-    1: "#f9fafb",
-    2: "#f3f4f6",
-    3: "#e5e7eb",
-    4: "#d1d5db",
-    5: "#9ca3af",
-    6: "#6b7280",
-    7: "#4b5563",
-    8: "#374151",
-    9: "#1f2937",
-    10: "#111827",
-    11: "#030712",
-    12: "#020409"
-  },
-  zinc: {
-    1: "#fafafa",
-    2: "#f4f4f5",
-    3: "#e4e4e7",
-    4: "#d4d4d8",
-    5: "#a1a1aa",
-    6: "#71717a",
-    7: "#52525b",
-    8: "#3f3f46",
-    9: "#27272a",
-    10: "#18181b",
-    11: "#09090b",
-    12: "#050506"
-  },
-  neutral: {
-    1: "#fafafa",
-    2: "#f5f5f5",
-    3: "#e5e5e5",
-    4: "#d4d4d4",
-    5: "#a3a3a3",
-    6: "#737373",
-    7: "#525252",
-    8: "#404040",
-    9: "#262626",
-    10: "#171717",
-    11: "#0a0a0a",
-    12: "#050505"
-  },
-  stone: {
-    1: "#fafaf9",
-    2: "#f5f5f4",
-    3: "#e7e5e4",
-    4: "#d6d3d1",
-    5: "#a8a29e",
-    6: "#78716c",
-    7: "#57534e",
-    8: "#44403c",
-    9: "#292524",
-    10: "#1c1917",
-    11: "#0c0a09",
-    12: "#070605"
-  },
-  red: {
-    1: "#fef2f2",
-    2: "#fee2e2",
-    3: "#fecaca",
-    4: "#fca5a5",
-    5: "#f87171",
-    6: "#ef4444",
-    7: "#dc2626",
-    8: "#b91c1c",
-    9: "#991b1b",
-    10: "#7f1d1d",
-    11: "#450a0a",
-    12: "#280606"
-  },
-  orange: {
-    1: "#fff7ed",
-    2: "#ffedd5",
-    3: "#fed7aa",
-    4: "#fdba74",
-    5: "#fb923c",
-    6: "#f97316",
-    7: "#ea580c",
-    8: "#c2410c",
-    9: "#9a3412",
-    10: "#7c2d12",
-    11: "#431407",
-    12: "#270c04"
-  },
-  amber: {
-    1: "#fffbeb",
-    2: "#fef3c7",
-    3: "#fde68a",
-    4: "#fcd34d",
-    5: "#fbbf24",
-    6: "#f59e0b",
-    7: "#d97706",
-    8: "#b45309",
-    9: "#92400e",
-    10: "#78350f",
-    11: "#451a03",
-    12: "#291002"
-  },
-  yellow: {
-    1: "#fefce8",
-    2: "#fef9c3",
-    3: "#fef08a",
-    4: "#fde047",
-    5: "#facc15",
-    6: "#eab308",
-    7: "#ca8a04",
-    8: "#a16207",
-    9: "#854d0e",
-    10: "#713f12",
-    11: "#422006",
-    12: "#271304"
-  },
-  lime: {
-    1: "#f7fee7",
-    2: "#ecfccb",
-    3: "#d9f99d",
-    4: "#bef264",
-    5: "#a3e635",
-    6: "#84cc16",
-    7: "#65a30d",
-    8: "#4d7c0f",
-    9: "#3f6212",
-    10: "#365314",
-    11: "#1a2e05",
-    12: "#0f1b03"
-  },
-  green: {
-    1: "#f0fdf4",
-    2: "#dcfce7",
-    3: "#bbf7d0",
-    4: "#86efac",
-    5: "#4ade80",
-    6: "#22c55e",
-    7: "#16a34a",
-    8: "#15803d",
-    9: "#166534",
-    10: "#14532d",
-    11: "#052e16",
-    12: "#031b0d"
-  },
-  emerald: {
-    1: "#ecfdf5",
-    2: "#d1fae5",
-    3: "#a7f3d0",
-    4: "#6ee7b7",
-    5: "#34d399",
-    6: "#10b981",
-    7: "#059669",
-    8: "#047857",
-    9: "#065f46",
-    10: "#064e3b",
-    11: "#022c22",
-    12: "#011a14"
-  },
-  teal: {
-    1: "#f0fdfa",
-    2: "#ccfbf1",
-    3: "#99f6e4",
-    4: "#5eead4",
-    5: "#2dd4bf",
-    6: "#14b8a6",
-    7: "#0d9488",
-    8: "#0f766e",
-    9: "#115e59",
-    10: "#134e4a",
-    11: "#042f2e",
-    12: "#021c1b"
-  },
-  cyan: {
-    1: "#ecfeff",
-    2: "#cffafe",
-    3: "#a5f3fc",
-    4: "#67e8f9",
-    5: "#22d3ee",
-    6: "#06b6d4",
-    7: "#0891b2",
-    8: "#0e7490",
-    9: "#155e75",
-    10: "#164e63",
-    11: "#083344",
-    12: "#041e28"
-  },
-  sky: {
-    1: "#f0f9ff",
-    2: "#e0f2fe",
-    3: "#bae6fd",
-    4: "#7dd3fc",
-    5: "#38bdf8",
-    6: "#0ea5e9",
-    7: "#0284c7",
-    8: "#0369a1",
-    9: "#075985",
-    10: "#0c4a6e",
-    11: "#082f49",
-    12: "#041b2b"
-  },
-  blue: {
-    1: "#eff6ff",
-    2: "#dbeafe",
-    3: "#bfdbfe",
-    4: "#93c5fd",
-    5: "#60a5fa",
-    6: "#3b82f6",
-    7: "#2563eb",
-    8: "#1d4ed8",
-    9: "#1e40af",
-    10: "#1e3a8a",
-    11: "#172554",
-    12: "#0d1633"
-  },
-  indigo: {
-    1: "#eef2ff",
-    2: "#e0e7ff",
-    3: "#c7d2fe",
-    4: "#a5b4fc",
-    5: "#818cf8",
-    6: "#6366f1",
-    7: "#4f46e5",
-    8: "#4338ca",
-    9: "#3730a3",
-    10: "#312e81",
-    11: "#1e1b4b",
-    12: "#12102d"
-  },
-  violet: {
-    1: "#f5f3ff",
-    2: "#ede9fe",
-    3: "#ddd6fe",
-    4: "#c4b5fd",
-    5: "#a78bfa",
-    6: "#8b5cf6",
-    7: "#7c3aed",
-    8: "#6d28d9",
-    9: "#5b21b6",
-    10: "#4c1d95",
-    11: "#2e1065",
-    12: "#1c0a3d"
-  },
-  purple: {
-    1: "#faf5ff",
-    2: "#f3e8ff",
-    3: "#e9d5ff",
-    4: "#d8b4fe",
-    5: "#c084fc",
-    6: "#a855f7",
-    7: "#9333ea",
-    8: "#7e22ce",
-    9: "#6b21a8",
-    10: "#581c87",
-    11: "#3b0764",
-    12: "#23043c"
-  },
-  fuchsia: {
-    1: "#fdf4ff",
-    2: "#fae8ff",
-    3: "#f5d0fe",
-    4: "#f0abfc",
-    5: "#e879f9",
-    6: "#d946ef",
-    7: "#c026d3",
-    8: "#a21caf",
-    9: "#86198f",
-    10: "#701a75",
-    11: "#4a044e",
-    12: "#2d022f"
-  },
-  pink: {
-    1: "#fdf2f8",
-    2: "#fce7f3",
-    3: "#fbcfe8",
-    4: "#f9a8d4",
-    5: "#f472b6",
-    6: "#ec4899",
-    7: "#db2777",
-    8: "#be185d",
-    9: "#9d174d",
-    10: "#831843",
-    11: "#500724",
-    12: "#300415"
-  },
-  rose: {
-    1: "#fff1f2",
-    2: "#ffe4e6",
-    3: "#fecdd3",
-    4: "#fda4af",
-    5: "#fb7185",
-    6: "#f43f5e",
-    7: "#e11d48",
-    8: "#be123c",
-    9: "#9f1239",
-    10: "#881337",
-    11: "#4c0519",
-    12: "#2d030e"
-  }
-};
-var defaultTheme = {
-  colors: defaultColors,
-  // 1 unit = 4px
-  spacing: {
-    px: 1,
-    0: 0,
-    "0.5": 2,
-    1: 4,
-    "1.5": 6,
-    2: 8,
-    "2.5": 10,
-    3: 12,
-    "3.5": 14,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40,
-    11: 44,
-    12: 48,
-    14: 56,
-    16: 64,
-    20: 80,
-    24: 96,
-    28: 112,
-    32: 128,
-    36: 144,
-    40: 160,
-    44: 176,
-    48: 192,
-    52: 208,
-    56: 224,
-    60: 240,
-    64: 256,
-    72: 288,
-    80: 320,
-    96: 384,
-    auto: "auto",
-    full: "100%",
-    "1/2": "50%",
-    "1/3": "33.333333%",
-    "2/3": "66.666667%",
-    "1/4": "25%",
-    "3/4": "75%",
-    // Dynamic viewport unit — see the comment on the 'screen' standalone utilities
-    // in utilities.ts for why dvh beats vh on mobile. Used by h-screen (w-screen
-    // has its own standalone entry so it never reaches this spacing lookup).
-    screen: "100dvh",
-    min: "min-content",
-    max: "max-content",
-    fit: "fit-content"
-  },
-  fontSize: {
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 20,
-    "2xl": 24,
-    "3xl": 30,
-    "4xl": 36,
-    "5xl": 48,
-    "6xl": 60,
-    "7xl": 72,
-    "8xl": 96,
-    "9xl": 128
-  },
-  fontFamily: {
-    sans: "System",
-    mono: "Courier New",
-    serif: "Georgia"
-  },
-  fontWeight: {
-    thin: "100",
-    extralight: "200",
-    light: "300",
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700",
-    extrabold: "800",
-    black: "900"
-  },
-  borderRadius: {
-    none: 0,
-    sm: 2,
-    DEFAULT: 4,
-    md: 6,
-    lg: 8,
-    xl: 12,
-    "2xl": 16,
-    "3xl": 24,
-    full: 9999
-  },
-  borderWidth: {
-    DEFAULT: 1,
-    0: 0,
-    2: 2,
-    4: 4,
-    8: 8
-  },
-  opacity: {
-    0: 0,
-    5: 0.05,
-    10: 0.1,
-    15: 0.15,
-    20: 0.2,
-    25: 0.25,
-    30: 0.3,
-    40: 0.4,
-    50: 0.5,
-    60: 0.6,
-    70: 0.7,
-    75: 0.75,
-    80: 0.8,
-    90: 0.9,
-    95: 0.95,
-    100: 1
-  },
-  lineHeight: {
-    none: 1,
-    tight: 1.25,
-    snug: 1.375,
-    normal: 1.5,
-    relaxed: 1.625,
-    loose: 2,
-    // Pixel values stored as strings; styleValueToCSS passes them through, toNativeValue strips the unit
-    3: "12px",
-    4: "16px",
-    5: "20px",
-    6: "24px",
-    7: "28px",
-    8: "32px",
-    9: "36px",
-    10: "40px"
-  },
-  letterSpacing: {
-    tighter: -0.8,
-    tight: -0.4,
-    normal: 0,
-    wide: 0.4,
-    wider: 0.8,
-    widest: 1.6
-  },
-  zIndex: {
-    auto: "auto",
-    0: 0,
-    10: 10,
-    20: 20,
-    30: 30,
-    40: 40,
-    50: 50
-  },
-  flex: {
-    1: 1,
-    auto: "auto",
-    // CSS: flex: auto = 1 1 auto; native: mapped to 1 in resolver
-    initial: "initial",
-    // CSS: flex: initial = 0 1 auto; native: mapped to 1
-    none: "none"
-    // CSS: flex: none = 0 0 auto; native: mapped to 0
-  },
-  shadow: {
-    sm: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.05,
-      shadowRadius: 2,
-      elevation: 1
-    },
-    DEFAULT: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 4,
-      elevation: 2
-    },
-    md: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 3
-    },
-    lg: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 8 },
-      shadowOpacity: 0.1,
-      shadowRadius: 15,
-      elevation: 4
-    },
-    xl: {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 16 },
-      shadowOpacity: 0.1,
-      shadowRadius: 24,
-      elevation: 6
-    },
-    "2xl": {
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 24 },
-      shadowOpacity: 0.25,
-      shadowRadius: 48,
-      elevation: 8
-    },
-    none: {
-      shadowColor: "transparent",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0,
-      shadowRadius: 0,
-      elevation: 0
-    }
-  },
-  screens: {
-    sm: 576,
-    // small tablets / large phones (landscape)
-    md: 768,
-    // tablets (iPad and up)
-    lg: 1024,
-    // large tablets (iPad Pro)
-    xl: 1280,
-    // desktop
-    "2xl": 1536
-  },
-  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
-  // directly in the `animate` resolver, not through this theme table. This exists so
-  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
-  // alongside them without needing to redeclare the built-ins.
-  keyframes: {},
-  animation: {}
-};
+// src/core/colorValue.ts
+function isModeAwareColor(v) {
+  return typeof v === "object" && v !== null && "light" in v && "dark" in v;
+}
 
-// src/core/reset.ts
-var RESET_STYLE_ID = "kbach-reset";
-var BASE_RESET = [
-  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
-  // border-width: 0 keeps all elements borderless by default.
-  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
-  "body { margin: 0; padding: 0; }",
-  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
-  "p { margin: 0; }",
-  "a { color: inherit; text-decoration: none; }",
-  "ul, ol { margin: 0; padding: 0; list-style: none; }",
-  "img, video, svg { display: block; max-width: 100%; }",
-  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
-  // stripping it hides their native checkmark/arrow with nothing rendered in its
-  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
-  // plain text. Text-like inputs, textarea, and button don't have that problem
-  // (their native chrome is just a skin around content utilities can fully
-  // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  // Native checkbox/radio/range still get typography + spacing normalized, and
-  // accent-color re-themes their native indicator to the current text color
-  // instead of the browser/OS default blue, so they stay on-brand without
-  // needing to be rebuilt from scratch.
-  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
-  // select keeps its native chrome (border/background/arrow are all part of the
-  // same OS-drawn widget that appearance: none would blank out) — only typography
-  // and spacing are normalized so it still matches surrounding text.
-  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
-  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
-  "button, [role='button'] { cursor: pointer; }",
-  ":disabled { cursor: default; }",
-  "textarea { resize: vertical; }",
-  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
-  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
-  "::placeholder { opacity: 1; }",
-  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
-  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
-  "fieldset { padding: 0; margin: 0; }",
-  "table { border-collapse: collapse; border-spacing: 0; }"
-].join("\n");
+// src/core/platform.ts
+var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined");
+var _resolveTargetOverride = null;
+function setResolveTarget(target) {
+  _resolveTargetOverride = target;
+}
+function getEffectiveIsWeb() {
+  if (_resolveTargetOverride) return _resolveTargetOverride === "web";
+  return isWeb || !isNative;
+}
+function toNativeValue(raw) {
+  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
+  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
+  return raw;
+}
+function escapeCSSSelector(cls) {
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+}
+
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
 
 // src/core/cache.ts
 var LRUCache = class {
@@ -713,37 +161,6 @@ var LRUCache = class {
   }
 };
 
-// src/core/platform.ts
-var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined");
-var _resolveTargetOverride = null;
-function setResolveTarget(target) {
-  _resolveTargetOverride = target;
-}
-function getEffectiveIsWeb() {
-  if (_resolveTargetOverride) return _resolveTargetOverride === "web";
-  return isWeb || !isNative;
-}
-function toNativeValue(raw) {
-  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
-  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
-  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
-  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
-  return raw;
-}
-function escapeCSSSelector(cls) {
-  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-}
-
-// src/core/devWarn.ts
-function kbachWarn(message) {
-  console.warn(
-    "%c[kbach]%c " + message,
-    "color:#8b5cf6;font-weight:700",
-    "color:inherit;font-weight:400"
-  );
-}
-
 // src/core/registry.ts
 var BUILTIN_MODIFIERS = {
   // ── Mode ─────────────────────────────────────────────────────────────────
@@ -884,6 +301,9 @@ function matchModifier(name, isDark, state, breakpoints) {
 }
 
 // src/core/resolvers/color.ts
+function pickModeAwareFallback(v) {
+  return isModeAwareColor(v) ? v.light : v;
+}
 function resolveColor(value, colors, isArbitrary) {
   if (isArbitrary) return value;
   const slashIdx = value.indexOf("/");
@@ -895,15 +315,17 @@ function resolveColor(value, colors, isArbitrary) {
   } else 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 if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
+    else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(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 (scale && typeof scale === "object" && !isModeAwareColor(scale) && shade in scale) {
+        const shadeVal = scale[shade];
+        hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
       }
     }
   }
@@ -1988,851 +1410,1497 @@ var layoutResolvers = {
     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))` };
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  "grid-rows": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (isArbitrary) return { gridTemplateRows: value };
+    if (value === "none") return { gridTemplateRows: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const flows = {
+      row: "row",
+      col: "column",
+      dense: "dense",
+      "row-dense": "row dense",
+      "col-dense": "column dense"
+    };
+    const flow = flows[value];
+    return flow ? { gridAutoFlow: flow } : null;
+  },
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { gridAutoColumns: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
+  },
+  "auto-rows": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
+  },
+  // ── Grid column placement (web-only) ──────────────────────────────────────
+  "col-span": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "full") return { gridColumn: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+  },
+  "col-start": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { gridColumnStart: "auto" };
+    if (isArbitrary) return { gridColumnStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnStart: n };
+  },
+  "col-end": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { gridColumnEnd: "auto" };
+    if (isArbitrary) return { gridColumnEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnEnd: n };
+  },
+  col: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
+  },
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "full") return { gridRow: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
   },
-  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
-  "grid-cols": ({ value, isArbitrary }) => {
+  "row-start": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    if (value === "auto") return { gridRowStart: "auto" };
+    if (isArbitrary) return { gridRowStart: value };
     const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+    return isNaN(n) ? null : { gridRowStart: n };
   },
-  "grid-rows": ({ value, isArbitrary }) => {
+  "row-end": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { gridTemplateRows: value };
-    if (value === "none") return { gridTemplateRows: "none" };
+    if (value === "auto") return { gridRowEnd: "auto" };
+    if (isArbitrary) return { gridRowEnd: value };
     const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+    return isNaN(n) ? null : { gridRowEnd: n };
   },
-  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
-  "grid-flow": ({ value }) => {
+  row: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const flows = {
-      row: "row",
-      col: "column",
-      dense: "dense",
-      "row-dense": "row dense",
-      "col-dense": "column dense"
+    if (!value || value === "auto") return { gridRow: "auto" };
+    if (isArbitrary) return { gridRow: value };
+    return null;
+  },
+  // ── Grid alignment (web-only) ──────────────────────────────────────────────
+  // place-items is shorthand for align-items + justify-items on a grid container
+  "place-items": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch",
+      baseline: "baseline"
     };
-    const flow = flows[value];
-    return flow ? { gridAutoFlow: flow } : null;
+    return map[value] ? { placeItems: map[value] } : null;
   },
-  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
-  "auto-cols": ({ value, isArbitrary }) => {
+  // place-content is shorthand for align-content + justify-content on a grid container
+  "place-content": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoColumns: value };
-    const presets = {
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+      baseline: "baseline"
+    };
+    return map[value] ? { placeContent: map[value] } : null;
+  },
+  // justify-items controls inline-axis alignment of grid items within their cells
+  "justify-items": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { justifyItems: map[value] } : null;
+  },
+  // place-self is shorthand for align-self + justify-self on a grid item
+  "place-self": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
       auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { placeSelf: map[value] } : null;
+  },
+  // justify-self controls inline-axis self-alignment of a grid item
+  "justify-self": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      auto: "auto",
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
     };
+    return map[value] ? { justifySelf: map[value] } : null;
+  },
+  // ── Flex ───────────────────────────────────────────────────────────────────
+  // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
+  // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
+  // comment in the standalone table above for why: these already work via the
+  // PARENT's flex context regardless of this element's own display, so
+  // forcing display:flex here would only be a surprising, unrelated side
+  // effect on this element's OWN children.
+  flex: ({ value, isArbitrary }, { flex }) => {
+    if (!value) return { display: "flex" };
+    if (isArbitrary) {
+      const v = parseFloat(value);
+      return isNaN(v) ? null : { flex: v };
+    }
+    if (value in flex) {
+      const v = flex[value];
+      if (typeof v === "string" && !getEffectiveIsWeb()) {
+        if (v === "auto" || v === "initial") return { flex: 1 };
+        if (v === "none") return { flex: 0 };
+        return null;
+      }
+      return { flex: v };
+    }
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { flex: n };
+  },
+  grow: ({ value }, _) => {
+    if (!value) return { flexGrow: 1 };
+    const n = parseFloat(value);
+    return { flexGrow: isNaN(n) ? 1 : n };
+  },
+  shrink: ({ value }, _) => {
+    if (!value) return { flexShrink: 1 };
+    const n = parseFloat(value);
+    return { flexShrink: isNaN(n) ? 1 : n };
+  },
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
+  },
+  // ── Z-index ────────────────────────────────────────────────────────────────
+  z: ({ value, isArbitrary }, { zIndex }) => {
+    if (isArbitrary) {
+      const n2 = parseInt(value);
+      return isNaN(n2) ? null : { zIndex: n2 };
+    }
+    const v = zIndex[value];
+    if (v !== void 0) {
+      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
+      return { zIndex: v };
+    }
+    const n = parseInt(value);
+    return isNaN(n) ? null : { zIndex: n };
+  },
+  // ── Aspect ratio ───────────────────────────────────────────────────────────
+  aspect: ({ value, isArbitrary }) => {
+    if (isArbitrary) return { aspectRatio: value };
+    const presets = { auto: "auto", square: 1, video: 16 / 9 };
+    if (!(value in presets)) return null;
     const v = presets[value];
-    return v ? { gridAutoColumns: v } : null;
+    if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
+    return { aspectRatio: v };
+  },
+  // ── Columns (web-only) ─────────────────────────────────────────────────────
+  columns: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { columnCount: value };
+    if (value === "auto") return { columnCount: "auto" };
+    const n = parseInt(value, 10);
+    if (!isNaN(n)) return { columnCount: n };
+    const widths = {
+      "3xs": "16rem",
+      "2xs": "18rem",
+      xs: "20rem",
+      sm: "24rem",
+      md: "28rem",
+      lg: "32rem",
+      xl: "36rem",
+      "2xl": "42rem",
+      "3xl": "48rem",
+      "4xl": "56rem",
+      "5xl": "64rem",
+      "6xl": "72rem",
+      "7xl": "80rem"
+    };
+    return widths[value] ? { columnWidth: widths[value] } : null;
+  }
+};
+
+// src/core/resolvers/typography.ts
+function resolveFontSize(value, fontSizes, isArbitrary) {
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
+  return fontSizes[value] ?? null;
+}
+var typographyResolvers = {
+  // ── Text ───────────────────────────────────────────────────────────────────
+  text: ({ value, isArbitrary }, { colors, fontSize }) => {
+    const size = resolveFontSize(value, fontSize, false);
+    if (!isArbitrary && size !== null) return { fontSize: size };
+    if (isArbitrary) {
+      if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
+        return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
+      }
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
+  },
+  "text-opacity": ({ value, isArbitrary }, _) => {
+    if (!getEffectiveIsWeb()) return null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
+  },
+  // ── Text decoration advanced (web-only) ───────────────────────────────────
+  decoration: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) {
+      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
+      return { textDecorationColor: value };
+    }
+    const thickTokens = {
+      auto: "auto",
+      "from-font": "from-font",
+      "0": "0px",
+      "1": "1px",
+      "2": "2px",
+      "4": "4px",
+      "8": "8px"
+    };
+    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
+    const styleTokens = {
+      solid: "solid",
+      dashed: "dashed",
+      dotted: "dotted",
+      double: "double",
+      wavy: "wavy"
+    };
+    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { textDecorationColor: color } : null;
   },
-  "auto-rows": ({ value, isArbitrary }) => {
+  "underline-offset": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoRows: value };
-    const presets = {
+    if (isArbitrary) return { textUnderlineOffset: value };
+    const offsets = {
       auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
+      "0": "0px",
+      "1": "1px",
+      "2": "2px",
+      "4": "4px",
+      "8": "8px"
     };
-    const v = presets[value];
-    return v ? { gridAutoRows: v } : null;
+    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
-  // ── Grid column placement (web-only) ──────────────────────────────────────
-  "col-span": ({ value }) => {
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridColumn: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
   },
-  "col-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnStart: "auto" };
-    if (isArbitrary) return { gridColumnStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnStart: n };
+  // ── 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;
   },
-  "col-end": ({ value, isArbitrary }) => {
+  // ── Line height ────────────────────────────────────────────────────────────
+  leading: ({ value, isArbitrary }, { lineHeight }) => {
+    if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
+    const v = lineHeight[value];
+    if (v === void 0) return null;
+    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
+    return { lineHeight: v };
+  },
+  // ── Letter spacing ─────────────────────────────────────────────────────────
+  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
+    if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
+    const v = letterSpacing[value];
+    return v !== void 0 ? { letterSpacing: v } : null;
+  },
+  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
+  "line-clamp": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnEnd: "auto" };
-    if (isArbitrary) return { gridColumnEnd: value };
+    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
     const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnEnd: n };
+    if (isNaN(n) || n < 1) return null;
+    return {
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: n
+    };
+  }
+};
+
+// src/core/resolvers/transform.ts
+var transformResolvers = {
+  // ── Transform extras (web-only) ───────────────────────────────────────────
+  "skew-x": ({ value, negative, isArbitrary }) => {
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
   },
-  col: ({ value, isArbitrary }) => {
+  "skew-y": ({ value, negative, isArbitrary }) => {
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
+  },
+  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
+  transform: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridColumn: "auto" };
-    if (isArbitrary) return { gridColumn: value };
+    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
+    if (value === "none") return { transform: "none" };
     return null;
   },
-  // ── Grid row placement (web-only) ─────────────────────────────────────────
-  "row-span": ({ value }) => {
+  // Transform origin
+  origin: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridRow: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
+    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;
   },
-  "row-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowStart: "auto" };
-    if (isArbitrary) return { gridRowStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowStart: n };
+  // ── Scale ──────────────────────────────────────────────────────────────────
+  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
+  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
+  scale: ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
   },
-  "row-end": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowEnd: "auto" };
-    if (isArbitrary) return { gridRowEnd: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowEnd: n };
+  "scale-x": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
   },
-  row: ({ value, isArbitrary }) => {
+  "scale-y": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
+  },
+  // ── Rotate ─────────────────────────────────────────────────────────────────
+  rotate: ({ value, negative, isArbitrary }) => {
+    if (isArbitrary) {
+      const finalValue = negative ? `-${value}` : value;
+      return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
+    }
+    const deg = parseFloat(value);
+    if (isNaN(deg)) return null;
+    const finalDeg = negative ? -deg : deg;
+    return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
+  },
+  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
+  perspective: ({ value, isArbitrary }) => {
+    if (isArbitrary) {
+      const numPx = parseFloat(value);
+      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
+      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
+    }
+    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+  }
+};
+
+// src/core/resolvers/effects.ts
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
+var effectResolvers = {
+  // ── Opacity ────────────────────────────────────────────────────────────────
+  opacity: ({ value, isArbitrary }, { opacity }) => {
+    if (isArbitrary) {
+      const v2 = parseFloat(value);
+      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
+    }
+    const v = opacity[value];
+    if (v !== void 0) return { opacity: v };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
+  },
+  // ── Shadow ─────────────────────────────────────────────────────────────────
+  shadow: ({ value }, { shadow }) => {
+    const key = value === "" ? "DEFAULT" : value;
+    return shadow[key] ?? null;
+  },
+  // ── Animations (CSS keyframe animations, web-only) ────────────────────────
+  // Each variant injects a @keyframes rule once via the __keyframe marker.
+  // resolver.ts detects __keyframe, injects the rule, then strips the marker
+  // so it never reaches element inline styles.
+  animate: ({ value, isArbitrary }, theme) => {
     if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridRow: "auto" };
-    if (isArbitrary) return { gridRow: value };
-    return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
-  // ── Grid alignment (web-only) ──────────────────────────────────────────────
-  // place-items is shorthand for align-items + justify-items on a grid container
-  "place-items": ({ value }) => {
+  // ── Transition (web-only; use Animated API on native) ─────────────────────
+  transition: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      baseline: "baseline"
+    const presets = {
+      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
+      all: "all 150ms",
+      none: "none",
+      colors: "color 150ms, background-color 150ms, border-color 150ms",
+      opacity: "opacity 150ms",
+      shadow: "box-shadow 150ms",
+      transform: "transform 150ms"
     };
-    return map[value] ? { placeItems: map[value] } : null;
+    const v = presets[value];
+    return v !== void 0 ? { transition: v } : null;
   },
-  // place-content is shorthand for align-content + justify-content on a grid container
-  "place-content": ({ value }) => {
+  duration: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      between: "space-between",
-      around: "space-around",
-      evenly: "space-evenly",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeContent: map[value] } : null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDuration: ms };
   },
-  // justify-items controls inline-axis alignment of grid items within their cells
-  "justify-items": ({ value }) => {
+  delay: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { justifyItems: map[value] } : null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDelay: ms };
+  }
+};
+
+// src/core/resolvers/misc.ts
+var miscResolvers = {
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
   },
-  // place-self is shorthand for align-self + justify-self on a grid item
-  "place-self": ({ value }) => {
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { placeSelf: map[value] } : null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
   },
-  // justify-self controls inline-axis self-alignment of a grid item
-  "justify-self": ({ value }) => {
+  fill: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
+  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
+  // Named presets give cross-platform shadow; arbitrary is web-only.
+  "text-shadow": ({ value, isArbitrary }, { colors }) => {
+    if (value === "none") {
+      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
+    }
+    const webPresets = {
+      "": "0 2px 4px rgba(0,0,0,0.3)",
+      sm: "0 1px 2px rgba(0,0,0,0.3)",
+      md: "0 4px 6px rgba(0,0,0,0.3)",
+      lg: "0 8px 16px rgba(0,0,0,0.5)",
+      xl: "0 16px 32px rgba(0,0,0,0.5)"
+    };
+    const nativePresets = {
+      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
+      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
+      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
+      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
+      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
+    };
+    if (value in webPresets) {
+      if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
+      return nativePresets[value] ?? null;
+    }
+    if (isArbitrary) {
+      return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) {
+      return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
+    }
+    return null;
+  }
+};
+
+// src/core/utilities.ts
+var RESOLVERS = {
+  ...colorResolvers,
+  ...spacingResolvers,
+  ...borderResolvers,
+  ...layoutResolvers,
+  ...typographyResolvers,
+  ...filterResolvers,
+  ...transformResolvers,
+  ...effectResolvers,
+  ...miscResolvers
+};
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
+function resolveUtility(parsed, theme) {
+  if (!parsed.value) {
+    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
+  }
+  const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
+  if (resolver) return resolver(parsed, theme);
+  return null;
+}
+var PLUGIN_STANDALONE = {};
+var PLUGIN_RESOLVERS = {};
+function clearPluginUtilities() {
+  for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
+  for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
+  _sortedPrefixes = null;
+  _standaloneNames = null;
+}
+function getPluginStandaloneMap() {
+  return PLUGIN_STANDALONE;
+}
+function isKnownUtility(utility) {
+  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
+}
+var _sortedPrefixes = null;
+var _standaloneNames = null;
+function getBuiltinUtilityPrefixes() {
+  if (!_sortedPrefixes) {
+    const all = [.../* @__PURE__ */ new Set([...Object.keys(RESOLVERS), ...Object.keys(PLUGIN_RESOLVERS)])];
+    _sortedPrefixes = all.sort((a, b) => b.length - a.length);
+  }
+  return _sortedPrefixes;
+}
+function getBuiltinStandaloneNames() {
+  if (!_standaloneNames) {
+    _standaloneNames = /* @__PURE__ */ new Set([...Object.keys(getStandalone()), ...Object.keys(PLUGIN_STANDALONE)]);
+  }
+  return _standaloneNames;
+}
+
+// src/core/parser.ts
+var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
+function isSafeArbitraryValue(value) {
+  if (!UNSAFE_ARBITRARY_VALUE.test(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    kbachWarn(`Unsafe arbitrary value rejected: "${value}"`);
+  }
+  return false;
+}
+function parseClass(className) {
+  const trimmed = className.trim();
+  if (!trimmed) return null;
+  const modifiers = [];
+  let remaining = trimmed;
+  while (true) {
+    const colonIdx = findOuterColon(remaining);
+    if (colonIdx === -1) break;
+    const candidate = remaining.slice(0, colonIdx);
+    if (!isKnownModifier(candidate)) break;
+    modifiers.push(candidate);
+    remaining = remaining.slice(colonIdx + 1);
+  }
+  let important = false;
+  if (remaining.startsWith("!") && remaining.length > 1) {
+    important = true;
+    remaining = remaining.slice(1);
+  }
+  let negative = false;
+  if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
+    negative = true;
+    remaining = remaining.slice(1);
+  }
+  let bracketDepth = 0;
+  let bracketStart = -1;
+  for (let i = remaining.length - 1; i >= 0; i--) {
+    if (remaining[i] === "]") bracketDepth++;
+    else if (remaining[i] === "[") {
+      bracketDepth--;
+      if (bracketDepth === 0) {
+        bracketStart = i;
+        break;
+      }
+    }
+  }
+  if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart - 1);
+    const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
+    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
+  }
+  if (remaining.endsWith("]") && bracketStart === -1) {
+    if (process.env.NODE_ENV !== "production") {
+      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
+    }
+  }
+  if (remaining.startsWith("[") && remaining.endsWith("]")) {
+    const value = remaining.slice(1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
+    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
+  }
+  if (getBuiltinStandaloneNames().has(remaining)) {
+    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+  }
+  for (const prefix of getBuiltinUtilityPrefixes()) {
+    if (remaining === prefix) {
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
+    }
+    if (remaining.startsWith(prefix + "-")) {
+      const value = remaining.slice(prefix.length + 1);
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
+    }
+  }
+  const firstDash = remaining.indexOf("-");
+  if (firstDash > 0) {
+    return {
+      original: trimmed,
+      modifiers,
+      negative,
+      important,
+      utility: remaining.slice(0, firstDash),
+      value: remaining.slice(firstDash + 1),
+      isArbitrary: false
     };
-    return map[value] ? { justifySelf: map[value] } : null;
-  },
-  // ── Flex ───────────────────────────────────────────────────────────────────
-  // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
-  // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
-  // comment in the standalone table above for why: these already work via the
-  // PARENT's flex context regardless of this element's own display, so
-  // forcing display:flex here would only be a surprising, unrelated side
-  // effect on this element's OWN children.
-  flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return { display: "flex" };
-    if (isArbitrary) {
-      const v = parseFloat(value);
-      return isNaN(v) ? null : { flex: v };
+  }
+  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+}
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  let parenDepth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
     }
-    if (value in flex) {
-      const v = flex[value];
-      if (typeof v === "string" && !getEffectiveIsWeb()) {
-        if (v === "auto" || v === "initial") return { flex: 1 };
-        if (v === "none") return { flex: 0 };
-        return null;
-      }
-      return { flex: v };
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
     }
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { flex: n };
-  },
-  grow: ({ value }, _) => {
-    if (!value) return { flexGrow: 1 };
-    const n = parseFloat(value);
-    return { flexGrow: isNaN(n) ? 1 : n };
-  },
-  shrink: ({ value }, _) => {
-    if (!value) return { flexShrink: 1 };
-    const n = parseFloat(value);
-    return { flexShrink: isNaN(n) ? 1 : n };
-  },
-  order: ({ value, negative }, _) => {
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { order: negative ? -n : n };
-  },
-  // ── Z-index ────────────────────────────────────────────────────────────────
-  z: ({ value, isArbitrary }, { zIndex }) => {
-    if (isArbitrary) {
-      const n2 = parseInt(value);
-      return isNaN(n2) ? null : { zIndex: n2 };
+    if (ch === "(") {
+      parenDepth++;
+      current += ch;
+      continue;
     }
-    const v = zIndex[value];
-    if (v !== void 0) {
-      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
-      return { zIndex: v };
+    if (ch === ")") {
+      parenDepth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0 && parenDepth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
     }
-    const n = parseInt(value);
-    return isNaN(n) ? null : { zIndex: n };
-  },
-  // ── Aspect ratio ───────────────────────────────────────────────────────────
-  aspect: ({ value, isArbitrary }) => {
-    if (isArbitrary) return { aspectRatio: value };
-    const presets = { auto: "auto", square: 1, video: 16 / 9 };
-    if (!(value in presets)) return null;
-    const v = presets[value];
-    if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
-    return { aspectRatio: v };
-  },
-  // ── Columns (web-only) ─────────────────────────────────────────────────────
-  columns: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { columnCount: value };
-    if (value === "auto") return { columnCount: "auto" };
-    const n = parseInt(value, 10);
-    if (!isNaN(n)) return { columnCount: n };
-    const widths = {
-      "3xs": "16rem",
-      "2xs": "18rem",
-      xs: "20rem",
-      sm: "24rem",
-      md: "28rem",
-      lg: "32rem",
-      xl: "36rem",
-      "2xl": "42rem",
-      "3xl": "48rem",
-      "4xl": "56rem",
-      "5xl": "64rem",
-      "6xl": "72rem",
-      "7xl": "80rem"
-    };
-    return widths[value] ? { columnWidth: widths[value] } : null;
   }
-};
-
-// src/core/resolvers/typography.ts
-function resolveFontSize(value, fontSizes, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  return fontSizes[value] ?? null;
+  if (current) tokens.push(current);
+  return tokens;
 }
-var typographyResolvers = {
-  // ── Text ───────────────────────────────────────────────────────────────────
-  text: ({ value, isArbitrary }, { colors, fontSize }) => {
-    const size = resolveFontSize(value, fontSize, false);
-    if (!isArbitrary && size !== null) return { fontSize: size };
-    if (isArbitrary) {
-      if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
-        return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
+function parseClasses(classString) {
+  const results = [];
+  for (const token of splitClassTokens(classString)) {
+    const parsed = parseClass(token);
+    if (parsed) results.push(parsed);
+  }
+  return results;
+}
+function findOuterColon(s) {
+  let depth = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    else if (ch === ":" && depth === 0) return i;
+  }
+  return -1;
+}
+
+// src/core/modeAwareColors.ts
+var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
+function buildModeAwareMap(colors) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, entry] of Object.entries(colors)) {
+    if (isModeAwareColor(entry)) {
+      map.set(name, entry);
+    } else if (entry && typeof entry === "object") {
+      for (const [shade, val] of Object.entries(entry)) {
+        if (isModeAwareColor(val)) map.set(`${name}-${shade}`, val);
       }
-      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
     }
-    const color = resolveColor(value, colors, false);
-    if (!color) return null;
-    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
+  }
+  return map;
+}
+function getModeAwareMap(colors) {
+  let map = _modeAwareMapCache.get(colors);
+  if (!map) {
+    map = buildModeAwareMap(colors);
+    _modeAwareMapCache.set(colors, map);
+  }
+  return map;
+}
+function expandModeAwareColorClasses(classString, colors) {
+  const map = getModeAwareMap(colors);
+  if (map.size === 0) return classString;
+  const tokens = splitClassTokens(classString);
+  let changed = false;
+  const out = [];
+  for (const token of tokens) {
+    const parsed = parseClass(token);
+    if (!parsed || parsed.isArbitrary) {
+      out.push(token);
+      continue;
+    }
+    if (parsed.modifiers.includes("dark") || parsed.modifiers.includes("light")) {
+      out.push(token);
+      continue;
+    }
+    const slashIdx = parsed.value.indexOf("/");
+    const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
+    const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
+    const pair = map.get(colorPart);
+    if (!pair) {
+      out.push(token);
+      continue;
+    }
+    changed = true;
+    const bang = parsed.important ? "!" : "";
+    const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
+    out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
+  }
+  return changed ? out.join(" ") : classString;
+}
+
+// src/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"
   },
-  "text-opacity": ({ value, isArbitrary }, _) => {
-    if (!getEffectiveIsWeb()) return null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
-    return { "--text-opacity": v };
+  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"
   },
-  // ── Text decoration advanced (web-only) ───────────────────────────────────
-  decoration: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) {
-      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
-      return { textDecorationColor: value };
-    }
-    const thickTokens = {
-      auto: "auto",
-      "from-font": "from-font",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      wavy: "wavy"
-    };
-    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { textDecorationColor: color } : null;
+  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"
   },
-  "underline-offset": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { textUnderlineOffset: value };
-    const offsets = {
-      auto: "auto",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
+  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"
   },
-  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
-  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
-  // the literal string 'you can see it' quotes included), so it passes straight through as a
-  // valid `content: '*'` CSS value with no extra wrapping needed.
-  content: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { content: value };
-    const presets = { none: "none" };
-    return value in presets ? { content: presets[value] } : null;
+  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"
   },
-  // ── 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;
+  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"
   },
-  // ── Line height ────────────────────────────────────────────────────────────
-  leading: ({ value, isArbitrary }, { lineHeight }) => {
-    if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
-    const v = lineHeight[value];
-    if (v === void 0) return null;
-    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
-    return { lineHeight: v };
+  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"
   },
-  // ── Letter spacing ─────────────────────────────────────────────────────────
-  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
-    if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
-    const v = letterSpacing[value];
-    return v !== void 0 ? { letterSpacing: v } : null;
+  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"
   },
-  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
-  "line-clamp": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return {
-      overflow: "hidden",
-      display: "-webkit-box",
-      WebkitBoxOrient: "vertical",
-      WebkitLineClamp: n
-    };
-  }
-};
-
-// src/core/resolvers/transform.ts
-var transformResolvers = {
-  // ── Transform extras (web-only) ───────────────────────────────────────────
-  "skew-x": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
+  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"
   },
-  "skew-y": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
+  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"
   },
-  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
-  transform: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
-    if (value === "none") return { transform: "none" };
-    return null;
+  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"
   },
-  // Transform origin
-  origin: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
-    const origins = {
-      center: "center",
-      top: "top",
-      "top-right": "top right",
-      right: "right",
-      "bottom-right": "bottom right",
-      bottom: "bottom",
-      "bottom-left": "bottom left",
-      left: "left",
-      "top-left": "top left"
-    };
-    return origins[value] ? { transformOrigin: origins[value] } : null;
+  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"
   },
-  // ── Scale ──────────────────────────────────────────────────────────────────
-  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
-  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
-  scale: ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
+  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"
   },
-  "scale-x": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
+  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"
   },
-  "scale-y": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
+  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"
   },
-  // ── Rotate ─────────────────────────────────────────────────────────────────
-  rotate: ({ value, negative, isArbitrary }) => {
-    if (isArbitrary) {
-      const finalValue = negative ? `-${value}` : value;
-      return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
-    }
-    const deg = parseFloat(value);
-    if (isNaN(deg)) return null;
-    const finalDeg = negative ? -deg : deg;
-    return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
+  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"
   },
-  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
-  perspective: ({ value, isArbitrary }) => {
-    if (isArbitrary) {
-      const numPx = parseFloat(value);
-      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
-      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
-    }
-    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+  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"
   }
 };
-
-// src/core/resolvers/effects.ts
-function keyframeDeclToCSS(decl) {
-  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
-}
-function buildKeyframeCSS(name, steps) {
-  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
-  return `@keyframes ${name} { ${body} }`;
-}
-var BUILTIN_ANIMATIONS = {
-  none: { animation: "none" },
-  spin: {
-    animation: "kb-spin 1s linear infinite",
-    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+var defaultTheme = {
+  colors: defaultColors,
+  // 1 unit = 4px
+  spacing: {
+    px: 1,
+    0: 0,
+    "0.5": 2,
+    1: 4,
+    "1.5": 6,
+    2: 8,
+    "2.5": 10,
+    3: 12,
+    "3.5": 14,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    28: 112,
+    32: 128,
+    36: 144,
+    40: 160,
+    44: 176,
+    48: 192,
+    52: 208,
+    56: 224,
+    60: 240,
+    64: 256,
+    72: 288,
+    80: 320,
+    96: 384,
+    auto: "auto",
+    full: "100%",
+    "1/2": "50%",
+    "1/3": "33.333333%",
+    "2/3": "66.666667%",
+    "1/4": "25%",
+    "3/4": "75%",
+    // Dynamic viewport unit — see the comment on the 'screen' standalone utilities
+    // in utilities.ts for why dvh beats vh on mobile. Used by h-screen (w-screen
+    // has its own standalone entry so it never reaches this spacing lookup).
+    screen: "100dvh",
+    min: "min-content",
+    max: "max-content",
+    fit: "fit-content"
   },
-  ping: {
-    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  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
   },
-  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 } }"
+  fontFamily: {
+    sans: "System",
+    mono: "Courier New",
+    serif: "Georgia"
   },
-  bounce: {
-    animation: "kb-bounce 1s infinite",
-    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-  }
-};
-function buildAnimationValue(animation, keyframes) {
-  const words = animation.trim().split(/\s+/);
-  const name = words[0];
-  if (!name) return { animation };
-  const builtin = BUILTIN_ANIMATIONS[name];
-  if (builtin?.__keyframe) {
-    const kbName = builtin.animation.split(/\s+/, 1)[0];
-    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
-  }
-  const steps = keyframes?.[name];
-  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
-}
-var effectResolvers = {
-  // ── Opacity ────────────────────────────────────────────────────────────────
-  opacity: ({ value, isArbitrary }, { opacity }) => {
-    if (isArbitrary) {
-      const v2 = parseFloat(value);
-      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
-    }
-    const v = opacity[value];
-    if (v !== void 0) return { opacity: v };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
+  fontWeight: {
+    thin: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900"
   },
-  // ── Shadow ─────────────────────────────────────────────────────────────────
-  shadow: ({ value }, { shadow }) => {
-    const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
+  borderRadius: {
+    none: 0,
+    sm: 2,
+    DEFAULT: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    "2xl": 16,
+    "3xl": 24,
+    full: 9999
   },
-  // ── Animations (CSS keyframe animations, web-only) ────────────────────────
-  // Each variant injects a @keyframes rule once via the __keyframe marker.
-  // resolver.ts detects __keyframe, injects the rule, then strips the marker
-  // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }, theme) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
-    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
-    const custom = theme.animation?.[value];
-    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
+  borderWidth: {
+    DEFAULT: 1,
+    0: 0,
+    2: 2,
+    4: 4,
+    8: 8
   },
-  // ── Transition (web-only; use Animated API on native) ─────────────────────
-  transition: ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const presets = {
-      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
-      all: "all 150ms",
-      none: "none",
-      colors: "color 150ms, background-color 150ms, border-color 150ms",
-      opacity: "opacity 150ms",
-      shadow: "box-shadow 150ms",
-      transform: "transform 150ms"
-    };
-    const v = presets[value];
-    return v !== void 0 ? { transition: v } : null;
+  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
   },
-  duration: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    const ms = isArbitrary ? value : `${value}ms`;
-    return { transitionDuration: ms };
+  lineHeight: {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+    // Pixel values stored as strings; styleValueToCSS passes them through, toNativeValue strips the unit
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    8: "32px",
+    9: "36px",
+    10: "40px"
   },
-  delay: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    const ms = isArbitrary ? value : `${value}ms`;
-    return { transitionDelay: ms };
-  }
-};
-
-// src/core/resolvers/misc.ts
-var miscResolvers = {
-  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
-  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
-  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
-  // presumably a typo) parses, which is why this only fires when the arbitrary value
-  // itself contains a "property:value" pair; anything else (no colon) still resolves
-  // to null exactly as before this resolver existed, rather than guessing a property.
-  //
-  // Only the FIRST colon splits property from value — the value itself may contain
-  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
-  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
-  // custom property) key, so it can be used as the style object key as-written with no
-  // extra case conversion — it only needs to look like a plausible CSS property name.
-  "": ({ value, isArbitrary, negative }) => {
-    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
-    if (negative) return null;
-    const colonIdx = value.indexOf(":");
-    if (colonIdx <= 0) return null;
-    const prop = value.slice(0, colonIdx).trim();
-    const cssValue = value.slice(colonIdx + 1).trim();
-    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
-    return { [prop]: cssValue };
+  letterSpacing: {
+    tighter: -0.8,
+    tight: -0.4,
+    normal: 0,
+    wide: 0.4,
+    wider: 0.8,
+    widest: 1.6
   },
-  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
-  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
-  // take stroke/fill as component PROPS, not style entries, so there's no
-  // reliable way to apply a resolved color through the `style` prop there.
-  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
-  // color-first-then-numeric-fallback disambiguation `border` uses above.
-  stroke: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (value === "none") return { stroke: "none" };
-    if (isArbitrary) {
-      const w = toNativeValue(value);
-      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { stroke: color };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { strokeWidth: n };
+  zIndex: {
+    auto: "auto",
+    0: 0,
+    10: 10,
+    20: 20,
+    30: 30,
+    40: 40,
+    50: 50
   },
-  fill: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (value === "none") return { fill: "none" };
-    if (isArbitrary) return { fill: value };
-    const color = resolveColor(value, colors, false);
-    return color ? { fill: color } : null;
+  flex: {
+    1: 1,
+    auto: "auto",
+    // CSS: flex: auto = 1 1 auto; native: mapped to 1 in resolver
+    initial: "initial",
+    // CSS: flex: initial = 0 1 auto; native: mapped to 1
+    none: "none"
+    // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
-  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
-  // Named presets give cross-platform shadow; arbitrary is web-only.
-  "text-shadow": ({ value, isArbitrary }, { colors }) => {
-    if (value === "none") {
-      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
-    }
-    const webPresets = {
-      "": "0 2px 4px rgba(0,0,0,0.3)",
-      sm: "0 1px 2px rgba(0,0,0,0.3)",
-      md: "0 4px 6px rgba(0,0,0,0.3)",
-      lg: "0 8px 16px rgba(0,0,0,0.5)",
-      xl: "0 16px 32px rgba(0,0,0,0.5)"
-    };
-    const nativePresets = {
-      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
-      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
-      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
-      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
-      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
-    };
-    if (value in webPresets) {
-      if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
-      return nativePresets[value] ?? null;
-    }
-    if (isArbitrary) {
-      return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) {
-      return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
-    }
-    return null;
-  }
-};
-
-// src/core/utilities.ts
-var RESOLVERS = {
-  ...colorResolvers,
-  ...spacingResolvers,
-  ...borderResolvers,
-  ...layoutResolvers,
-  ...typographyResolvers,
-  ...filterResolvers,
-  ...transformResolvers,
-  ...effectResolvers,
-  ...miscResolvers
+  shadow: {
+    sm: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1
+    },
+    DEFAULT: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 2
+    },
+    md: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 3
+    },
+    lg: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.1,
+      shadowRadius: 15,
+      elevation: 4
+    },
+    xl: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 16 },
+      shadowOpacity: 0.1,
+      shadowRadius: 24,
+      elevation: 6
+    },
+    "2xl": {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 24 },
+      shadowOpacity: 0.25,
+      shadowRadius: 48,
+      elevation: 8
+    },
+    none: {
+      shadowColor: "transparent",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0
+    }
+  },
+  screens: {
+    sm: 576,
+    // small tablets / large phones (landscape)
+    md: 768,
+    // tablets (iPad and up)
+    lg: 1024,
+    // large tablets (iPad Pro)
+    xl: 1280,
+    // desktop
+    "2xl": 1536
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
-var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
-function resolveUtility(parsed, theme) {
-  if (!parsed.value) {
-    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
-    if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
-    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
-  }
-  const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
-  if (resolver) return resolver(parsed, theme);
-  return null;
-}
-var PLUGIN_STANDALONE = {};
-var PLUGIN_RESOLVERS = {};
-function clearPluginUtilities() {
-  for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
-  for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
-  _sortedPrefixes = null;
-  _standaloneNames = null;
-}
-function getPluginStandaloneMap() {
-  return PLUGIN_STANDALONE;
-}
-function isKnownUtility(utility) {
-  return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS || NAMED_GROUP_PEER_MARKER_RE.test(utility);
-}
-var _sortedPrefixes = null;
-var _standaloneNames = null;
-function getBuiltinUtilityPrefixes() {
-  if (!_sortedPrefixes) {
-    const all = [.../* @__PURE__ */ new Set([...Object.keys(RESOLVERS), ...Object.keys(PLUGIN_RESOLVERS)])];
-    _sortedPrefixes = all.sort((a, b) => b.length - a.length);
-  }
-  return _sortedPrefixes;
-}
-function getBuiltinStandaloneNames() {
-  if (!_standaloneNames) {
-    _standaloneNames = /* @__PURE__ */ new Set([...Object.keys(getStandalone()), ...Object.keys(PLUGIN_STANDALONE)]);
-  }
-  return _standaloneNames;
-}
 
-// src/core/parser.ts
-var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
-function isSafeArbitraryValue(value) {
-  if (!UNSAFE_ARBITRARY_VALUE.test(value)) return true;
-  if (process.env.NODE_ENV !== "production") {
-    kbachWarn(`Unsafe arbitrary value rejected: "${value}"`);
-  }
-  return false;
-}
-function parseClass(className) {
-  const trimmed = className.trim();
-  if (!trimmed) return null;
-  const modifiers = [];
-  let remaining = trimmed;
-  while (true) {
-    const colonIdx = findOuterColon(remaining);
-    if (colonIdx === -1) break;
-    const candidate = remaining.slice(0, colonIdx);
-    if (!isKnownModifier(candidate)) break;
-    modifiers.push(candidate);
-    remaining = remaining.slice(colonIdx + 1);
-  }
-  let important = false;
-  if (remaining.startsWith("!") && remaining.length > 1) {
-    important = true;
-    remaining = remaining.slice(1);
-  }
-  let negative = false;
-  if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
-    negative = true;
-    remaining = remaining.slice(1);
-  }
-  let bracketDepth = 0;
-  let bracketStart = -1;
-  for (let i = remaining.length - 1; i >= 0; i--) {
-    if (remaining[i] === "]") bracketDepth++;
-    else if (remaining[i] === "[") {
-      bracketDepth--;
-      if (bracketDepth === 0) {
-        bracketStart = i;
-        break;
-      }
-    }
-  }
-  if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
-    const utility = remaining.slice(0, bracketStart - 1);
-    const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
-    if (!isSafeArbitraryValue(value)) return null;
-    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
-  }
-  if (remaining.endsWith("]") && bracketStart === -1) {
-    if (process.env.NODE_ENV !== "production") {
-      kbachWarn(`Unbalanced brackets: "${trimmed}"`);
-    }
-  }
-  if (remaining.startsWith("[") && remaining.endsWith("]")) {
-    const value = remaining.slice(1, -1).replace(/_/g, " ");
-    if (!isSafeArbitraryValue(value)) return null;
-    return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
-  }
-  if (getBuiltinStandaloneNames().has(remaining)) {
-    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
-  }
-  for (const prefix of getBuiltinUtilityPrefixes()) {
-    if (remaining === prefix) {
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
-    }
-    if (remaining.startsWith(prefix + "-")) {
-      const value = remaining.slice(prefix.length + 1);
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
-    }
-  }
-  const firstDash = remaining.indexOf("-");
-  if (firstDash > 0) {
-    return {
-      original: trimmed,
-      modifiers,
-      negative,
-      important,
-      utility: remaining.slice(0, firstDash),
-      value: remaining.slice(firstDash + 1),
-      isArbitrary: false
-    };
-  }
-  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
-}
-function splitClassTokens(classString) {
-  const tokens = [];
-  let current = "";
-  let depth = 0;
-  let parenDepth = 0;
-  for (let i = 0; i < classString.length; i++) {
-    const ch = classString[i];
-    if (ch === "[") {
-      depth++;
-      current += ch;
-      continue;
-    }
-    if (ch === "]") {
-      depth--;
-      current += ch;
-      continue;
-    }
-    if (ch === "(") {
-      parenDepth++;
-      current += ch;
-      continue;
-    }
-    if (ch === ")") {
-      parenDepth--;
-      current += ch;
-      continue;
-    }
-    if (/\s/.test(ch)) {
-      if (depth === 0 && parenDepth === 0) {
-        if (current) {
-          tokens.push(current);
-          current = "";
-        }
-      }
-    } else {
-      current += ch;
-    }
-  }
-  if (current) tokens.push(current);
-  return tokens;
-}
-function normalizeClassString(classString) {
-  return splitClassTokens(classString).join(" ");
-}
-function parseClasses(classString) {
-  const results = [];
-  for (const token of splitClassTokens(classString)) {
-    const parsed = parseClass(token);
-    if (parsed) results.push(parsed);
-  }
-  return results;
-}
-function findOuterColon(s) {
-  let depth = 0;
-  for (let i = 0; i < s.length; i++) {
-    const ch = s[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    else if (ch === ":" && depth === 0) return i;
-  }
-  return -1;
-}
+// src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
+var BASE_RESET = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
+  "fieldset { padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
 
 // src/core/responsiveStore.ts
 var store = { width: 0, notifiedWidth: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
@@ -3138,7 +3206,7 @@ function injectClassRule(cls, bucketKey, styles, darkMode, important) {
 }
 function generateClassCSS(classString, theme, darkMode = "attribute", screens = {}) {
   const rules = [];
-  for (const parsed of parseClasses(classString)) {
+  for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) continue;
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
@@ -3153,7 +3221,7 @@ function resolve(classString, theme, darkMode = "attribute") {
   if (cached) return cached;
   const result = {};
   const onWeb = isWeb;
-  for (const parsed of parseClasses(classString)) {
+  for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
@@ -3265,8 +3333,9 @@ function resolveOneRef(ref, colors) {
   const shade = ref.slice(lastDash + 1);
   if (!/^\d+$/.test(shade)) return null;
   const entry = colors[name];
-  if (!entry || typeof entry !== "object") return null;
-  return entry[shade] ?? null;
+  if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+  const target = entry[shade];
+  return typeof target === "string" ? target : null;
 }
 function resolveColorRefs(colors) {
   const MAX_DEPTH = 5;
@@ -3279,14 +3348,17 @@ function resolveColorRefs(colors) {
     }
     return current;
   }
+  function resolveValue(val) {
+    return typeof val === "string" ? resolveChain(val) : { light: resolveChain(val.light), dark: resolveChain(val.dark) };
+  }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {
-    if (typeof val === "string") {
-      out[key] = resolveChain(val);
+    if (typeof val === "string" || isModeAwareColor(val)) {
+      out[key] = resolveValue(val);
     } else {
       const shades = {};
-      for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveChain(hex);
+      for (const [shade, v] of Object.entries(val)) {
+        shades[shade] = resolveValue(v);
       }
       out[key] = shades;
     }
@@ -3427,6 +3499,7 @@ function subscribeGlobalDarkMode(callback) {
   defaultTheme,
   disableRuntimeCSS,
   escapeCSSSelector,
+  expandModeAwareColorClasses,
   flatten,
   generateClassCSS,
   getActiveBreakpoints,
@@ -3446,6 +3519,7 @@ function subscribeGlobalDarkMode(callback) {
   initConfig,
   isKnownModifier,
   isKnownUtility,
+  isModeAwareColor,
   isNative,
   isRuntimeCSSDisabled,
   isWeb,