@kbach/react 0.6.24 → 0.6.26

package/dist/index.js

@@ -35,34 +35,36 @@ __export(index_exports, {
   KbachReset: () => KbachReset,
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
-  buildConfig: () => buildConfig,
-  clearCache: () => clearCache,
+  buildConfig: () => import_core12.buildConfig,
+  clearCache: () => import_core12.clearCache,
   cx: () => cx,
-  defaultColors: () => defaultColors,
-  defaultTheme: () => defaultTheme,
-  disableRuntimeCSS: () => disableRuntimeCSS,
-  flatten: () => flatten,
-  getConfig: () => getConfig,
-  initConfig: () => initConfig,
+  defaultColors: () => import_core12.defaultColors,
+  defaultTheme: () => import_core12.defaultTheme,
+  disableRuntimeCSS: () => import_core12.disableRuntimeCSS,
+  flatten: () => import_core12.flatten,
+  getConfig: () => import_core12.getConfig,
+  initConfig: () => import_core12.initConfig,
   kb: () => kb,
-  normalizeClassString: () => normalizeClassString,
-  parseClass: () => parseClass,
-  parseClasses: () => parseClasses,
+  normalizeClassString: () => import_core12.normalizeClassString,
+  parseClass: () => import_core12.parseClass,
+  parseClasses: () => import_core12.parseClasses,
   registerWebElement: () => registerWebElement,
-  resolve: () => resolve,
-  setResolveTarget: () => setResolveTarget,
-  splitClassTokens: () => splitClassTokens,
+  resolve: () => import_core12.resolve,
+  setResolveTarget: () => import_core12.setResolveTarget,
+  splitClassTokens: () => import_core12.splitClassTokens,
   styled: () => styled,
-  updateConfig: () => updateConfig,
+  updateConfig: () => import_core12.updateConfig,
   useBreakpoint: () => useBreakpoint,
   useColors: () => useColors,
   useGlobalDarkMode: () => useGlobalDarkMode,
   useIsDark: () => useIsDark,
   useResolvedStyle: () => useResolvedStyle,
   useResponsive: () => useResponsive,
+  useSpacing: () => useSpacing,
   useStyles: () => useStyles,
   useTheme: () => useTheme,
-  wrapColors: () => wrapColors
+  wrapColors: () => wrapColors,
+  wrapSpacing: () => wrapSpacing
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -84,3301 +86,11 @@ function useIsDark() {
 
 // src/useColors.ts
 var import_react2 = require("react");
-
-// 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/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/cache.ts
-var LRUCache = class {
-  constructor(capacity = 1e4, onEvict) {
-    this.capacity = capacity;
-    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
-    this.cache = /* @__PURE__ */ new Map();
-    this.onEvict = onEvict;
-  }
-  get(key) {
-    if (!this.cache.has(key)) return void 0;
-    const value = this.cache.get(key);
-    this.cache.delete(key);
-    this.cache.set(key, value);
-    return value;
-  }
-  set(key, value) {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.capacity) {
-      const oldestKey = this.cache.keys().next().value;
-      const oldestValue = this.cache.get(oldestKey);
-      this.cache.delete(oldestKey);
-      this.onEvict?.(oldestKey, oldestValue);
-    }
-    this.cache.set(key, value);
-    return this;
-  }
-  has(key) {
-    return this.cache.has(key);
-  }
-  delete(key) {
-    return this.cache.delete(key);
-  }
-  clear() {
-    this.cache.clear();
-  }
-  get size() {
-    return this.cache.size;
-  }
-};
-
-// src/core/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 ─────────────────────────────────────────────────────────────────
-  dark: { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
-  "not-light": { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
-  light: { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
-  "not-dark": { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
-  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
-  hover: { pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
-  "not-hover": { pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
-  focus: { pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
-  "not-focus": { pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
-  active: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
-  "not-active": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
-  pressed: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
-  "not-pressed": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
-  disabled: { pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
-  "not-disabled": { pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
-  checked: { pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
-  "not-checked": { pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
-  visited: { pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
-  "not-visited": { pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
-  placeholder: { pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
-  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
-  first: { pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
-  last: { pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
-  odd: { pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
-  even: { pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
-  only: { pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
-  "focus-within": { pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
-  "focus-visible": { pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
-  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
-  before: { pseudo: "::before", jsBehavior: "css-only" },
-  after: { pseudo: "::after", jsBehavior: "css-only" },
-  selection: { pseudo: "::selection", jsBehavior: "css-only" },
-  "first-letter": { pseudo: "::first-letter", jsBehavior: "css-only" },
-  "first-line": { pseudo: "::first-line", jsBehavior: "css-only" },
-  marker: { pseudo: "::marker", jsBehavior: "css-only" },
-  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
-  "group-hover": { ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
-  "group-focus": { ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
-  "peer-hover": { ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
-  "peer-focus": { ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
-  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
-  sm: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
-  md: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
-  lg: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
-  xl: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
-  "2xl": { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
-  // ── Print media (CSS-only) ─────────────────────────────────────────────────
-  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
-  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
-  landscape: { mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
-  portrait: { mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
-  "motion-reduce": { mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
-  "motion-safe": { mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
-  "contrast-more": { mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
-  "contrast-less": { mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
-  // ── Directionality (CSS-only) ──────────────────────────────────────────────
-  rtl: { dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
-  ltr: { dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
-};
-var _pluginModifiers = {};
-var _allNames = null;
-var _interactiveNames = null;
-var _modeNames = null;
-var _responsiveNames = null;
-function _invalidate() {
-  _allNames = null;
-  _interactiveNames = null;
-  _modeNames = null;
-  _responsiveNames = null;
-}
-function registerModifier(name, def) {
-  if (process.env.NODE_ENV !== "production" && name in BUILTIN_MODIFIERS) {
-    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
-    return;
-  }
-  _pluginModifiers[name] = def;
-  _invalidate();
-}
-function clearPluginModifiers() {
-  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
-  _invalidate();
-}
-var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
-var _namedModifierCache = /* @__PURE__ */ new Map();
-function getNamedGroupPeerModifier(name) {
-  const cached = _namedModifierCache.get(name);
-  if (cached) return cached;
-  const m = NAMED_GROUP_PEER_RE.exec(name);
-  if (!m) return void 0;
-  const [, kind, trigger, groupName] = m;
-  const escapedName = escapeCSSSelector(groupName);
-  const pseudo = trigger === "hover" ? ":hover" : ":focus";
-  const combinator = kind === "group" ? " " : " ~ ";
-  const def = {
-    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
-    jsBehavior: "css-only",
-    forcesImportant: true
-  };
-  _namedModifierCache.set(name, def);
-  return def;
-}
-function getModifier(name) {
-  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
-}
-function isKnownModifier(name) {
-  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
-}
-function _allEntries() {
-  return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
-}
-function getInteractiveModifiers() {
-  if (!_interactiveNames) {
-    _interactiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "interactive").map(([k]) => k));
-  }
-  return _interactiveNames;
-}
-function getResponsiveModifiers() {
-  if (!_responsiveNames) {
-    _responsiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "responsive").map(([k]) => k));
-  }
-  return _responsiveNames;
-}
-function matchModifier(name, isDark, state, breakpoints) {
-  return getModifier(name)?.jsMatch?.(isDark, state, breakpoints) ?? false;
-}
-
-// src/core/utilities.ts
-function resolveColor(value, colors, isArbitrary) {
-  if (isArbitrary) return value;
-  const slashIdx = value.indexOf("/");
-  const colorPart = slashIdx > 0 ? value.slice(0, slashIdx) : value;
-  const opacityPart = slashIdx > 0 ? value.slice(slashIdx + 1) : null;
-  let hex = null;
-  if (colorPart in colors) {
-    const entry = colors[colorPart];
-    if (typeof entry === "string") hex = entry;
-    else if (typeof entry === "object" && "6" in entry) hex = entry["6"];
-  } else {
-    const lastDash = colorPart.lastIndexOf("-");
-    if (lastDash > 0) {
-      const colorName = colorPart.slice(0, lastDash);
-      const shade = colorPart.slice(lastDash + 1);
-      const scale = colors[colorName];
-      if (scale && typeof scale === "object" && shade in scale) {
-        hex = scale[shade] ?? null;
-      }
-    }
-  }
-  if (!hex) return null;
-  if (!opacityPart) {
-    if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
-      return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
-    }
-    return hex;
-  }
-  let alpha;
-  if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
-    const v = parseFloat(opacityPart.slice(1, -1));
-    alpha = v > 1 ? v / 100 : v;
-  } else {
-    alpha = parseFloat(opacityPart) / 100;
-  }
-  if (isNaN(alpha)) return hex;
-  if (alpha < 0) alpha = 0;
-  else if (alpha > 1) alpha = 1;
-  return hexToRgba(hex, alpha);
-}
-function parseHexRgb(hex) {
-  const h = hex.replace("#", "");
-  if (h.length === 3 || h.length === 4) {
-    return [
-      parseInt(h[0] + h[0], 16),
-      parseInt(h[1] + h[1], 16),
-      parseInt(h[2] + h[2], 16)
-    ];
-  }
-  if (h.length === 6 || h.length === 8) {
-    return [
-      parseInt(h.slice(0, 2), 16),
-      parseInt(h.slice(2, 4), 16),
-      parseInt(h.slice(4, 6), 16)
-    ];
-  }
-  return null;
-}
-function hexToRgba(hex, alpha) {
-  const rgb = parseHexRgb(hex);
-  if (!rgb) return hex;
-  const [r, g, b] = rgb;
-  return `rgba(${r},${g},${b},${alpha})`;
-}
-function withOpacityVar(color, varName) {
-  if (!color.startsWith("#")) return color;
-  const rgb = parseHexRgb(color);
-  if (!rgb) return color;
-  const [r, g, b] = rgb;
-  return `rgba(${r},${g},${b},var(${varName},1))`;
-}
-function resolveSpacing(value, negative, spacing, isArbitrary) {
-  if (isArbitrary) {
-    const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
-    if (negative) {
-      if (typeof resolved === "number") return -resolved;
-      if (typeof resolved === "string") {
-        if (/^\d/.test(resolved)) return `-${resolved}`;
-        if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
-      }
-    }
-    return resolved;
-  }
-  const raw = spacing[value];
-  if (raw === void 0) return null;
-  if (typeof raw === "number") return negative ? -raw : raw;
-  if (raw === "auto") return "auto";
-  if (negative && typeof raw === "string" && raw.endsWith("%")) {
-    return `-${raw}`;
-  }
-  return raw;
-}
-function resolveSizing(value, spacing, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  const raw = spacing[value];
-  if (raw !== void 0) return raw;
-  if (/^\d+\/\d+$/.test(value)) {
-    const [num, den] = value.split("/").map(Number);
-    if (!den) return null;
-    return `${(num / den * 100).toFixed(6)}%`;
-  }
-  return null;
-}
-function resolveRadius(value, radii, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  const key = value === "" ? "DEFAULT" : value;
-  return radii[key] ?? null;
-}
-function resolveFontSize(value, fontSizes, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  return fontSizes[value] ?? null;
-}
-var FILTER_COMPOSE = "var(--kb-blur,) var(--kb-brightness,) var(--kb-contrast,) var(--kb-grayscale,) var(--kb-hue-rotate,) var(--kb-invert,) var(--kb-saturate,) var(--kb-sepia,) var(--kb-drop-shadow,)";
-var BACKDROP_FILTER_COMPOSE = "var(--kb-backdrop-blur,) var(--kb-backdrop-brightness,) var(--kb-backdrop-contrast,) var(--kb-backdrop-grayscale,) var(--kb-backdrop-hue-rotate,) var(--kb-backdrop-invert,) var(--kb-backdrop-opacity,) var(--kb-backdrop-saturate,) var(--kb-backdrop-sepia,)";
-var _standalone = null;
-function buildStandalone() {
-  const web = getEffectiveIsWeb();
-  return {
-    // Display
-    // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
-    // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
-    // `grid`, `contents`, `flow-root` have no native equivalent and stay null there.
-    // The inline-* family (inline, inline-block, inline-flex, inline-grid) falls back
-    // to 'flex' on native instead — like plain `flex`, this is a no-op most of the
-    // time, but without it these utilities couldn't re-show a `hidden` element on
-    // native either (null → no style applied → still display:'none').
-    flex: { display: "flex" },
-    block: web ? { display: "block" } : null,
-    "inline-block": { display: web ? "inline-block" : "flex" },
-    inline: { display: web ? "inline" : "flex" },
-    grid: web ? { display: "grid" } : null,
-    grd: web ? { display: "grid" } : null,
-    "inline-flex": { display: web ? "inline-flex" : "flex" },
-    "inline-grid": { display: web ? "inline-grid" : "flex" },
-    hidden: { display: "none" },
-    contents: web ? { display: "contents" } : null,
-    "flow-root": web ? { display: "flow-root" } : null,
-    // Flex direction (both web and native)
-    "flex-row": { flexDirection: "row" },
-    "flex-col": { flexDirection: "column" },
-    "flex-row-reverse": { flexDirection: "row-reverse" },
-    "flex-col-reverse": { flexDirection: "column-reverse" },
-    // Flex wrap (both)
-    "flex-wrap": { flexWrap: "wrap" },
-    "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
-    "flex-nowrap": { flexWrap: "nowrap" },
-    // Flex grow / shrink (both)
-    "flex-grow": { flexGrow: 1 },
-    "flex-grow-0": { flexGrow: 0 },
-    "flex-shrink": { flexShrink: 1 },
-    "flex-shrink-0": { flexShrink: 0 },
-    // Align items (both)
-    "items-start": { alignItems: "flex-start" },
-    "items-end": { alignItems: "flex-end" },
-    "items-center": { alignItems: "center" },
-    "items-baseline": { alignItems: "baseline" },
-    "items-stretch": { alignItems: "stretch" },
-    // Justify content (both)
-    "justify-start": { justifyContent: "flex-start" },
-    "justify-end": { justifyContent: "flex-end" },
-    "justify-center": { justifyContent: "center" },
-    "justify-between": { justifyContent: "space-between" },
-    "justify-around": { justifyContent: "space-around" },
-    "justify-evenly": { justifyContent: "space-evenly" },
-    // Align content (both)
-    "content-start": { alignContent: "flex-start" },
-    "content-end": { alignContent: "flex-end" },
-    "content-center": { alignContent: "center" },
-    "content-between": { alignContent: "space-between" },
-    "content-around": { alignContent: "space-around" },
-    "content-evenly": { alignContent: "space-evenly" },
-    "content-stretch": { alignContent: "stretch" },
-    // Align self (both)
-    "self-auto": { alignSelf: "auto" },
-    "self-start": { alignSelf: "flex-start" },
-    "self-end": { alignSelf: "flex-end" },
-    "self-center": { alignSelf: "center" },
-    "self-stretch": { alignSelf: "stretch" },
-    "self-baseline": { alignSelf: "baseline" },
-    // Text align (both)
-    "text-left": { textAlign: "left" },
-    "text-right": { textAlign: "right" },
-    "text-center": { textAlign: "center" },
-    "text-justify": { textAlign: "justify" },
-    // Font weight shortcuts (both)
-    "font-thin": { fontWeight: "100" },
-    "font-extralight": { fontWeight: "200" },
-    "font-light": { fontWeight: "300" },
-    "font-normal": { fontWeight: "400" },
-    "font-medium": { fontWeight: "500" },
-    "font-semibold": { fontWeight: "600" },
-    "font-bold": { fontWeight: "700" },
-    "font-extrabold": { fontWeight: "800" },
-    "font-black": { fontWeight: "900" },
-    // Text decoration (overline is web-only)
-    underline: { textDecorationLine: "underline" },
-    overline: web ? { textDecorationLine: "overline" } : null,
-    "line-through": { textDecorationLine: "line-through" },
-    "no-underline": { textDecorationLine: "none" },
-    // Text transform (both)
-    uppercase: { textTransform: "uppercase" },
-    lowercase: { textTransform: "lowercase" },
-    capitalize: { textTransform: "capitalize" },
-    "normal-case": { textTransform: "none" },
-    // Font style (both)
-    italic: { fontStyle: "italic" },
-    "non-italic": { fontStyle: "normal" },
-    // Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
-    relative: { position: "relative" },
-    absolute: { position: "absolute" },
-    fixed: web ? { position: "fixed" } : null,
-    sticky: web ? { position: "sticky" } : null,
-    static: web ? { position: "static" } : null,
-    // Visibility (no `visibility` prop on native; use opacity instead)
-    visible: web ? { visibility: "visible" } : null,
-    invisible: web ? { visibility: "hidden" } : { opacity: 0 },
-    // Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
-    "overflow-hidden": { overflow: "hidden" },
-    "overflow-visible": { overflow: "visible" },
-    "overflow-scroll": { overflow: "scroll" },
-    "overflow-auto": web ? { overflow: "auto" } : { overflow: "scroll" },
-    // overflowX / overflowY are web-only
-    "overflow-x-hidden": web ? { overflowX: "hidden" } : null,
-    "overflow-x-scroll": web ? { overflowX: "scroll" } : null,
-    "overflow-x-auto": web ? { overflowX: "auto" } : null,
-    "overflow-y-hidden": web ? { overflowY: "hidden" } : null,
-    "overflow-y-scroll": web ? { overflowY: "scroll" } : null,
-    "overflow-y-auto": web ? { overflowY: "auto" } : null,
-    // Object fit (web-only; use resizeMode prop on RN Image)
-    "object-contain": web ? { objectFit: "contain" } : null,
-    "object-cover": web ? { objectFit: "cover" } : null,
-    "object-fill": web ? { objectFit: "fill" } : null,
-    "object-none": web ? { objectFit: "none" } : null,
-    "object-scale-down": web ? { objectFit: "scale-down" } : null,
-    // Border style (both)
-    "border-solid": { borderStyle: "solid" },
-    "border-dashed": { borderStyle: "dashed" },
-    "border-dotted": { borderStyle: "dotted" },
-    "border-none": { borderWidth: 0 },
-    // Border sides default width (both)
-    "border-t": { borderTopWidth: 1 },
-    "border-r": { borderRightWidth: 1 },
-    "border-b": { borderBottomWidth: 1 },
-    "border-l": { borderLeftWidth: 1 },
-    // Cursor (web-only)
-    "cursor-auto": web ? { cursor: "auto" } : null,
-    "cursor-default": web ? { cursor: "default" } : null,
-    "cursor-pointer": web ? { cursor: "pointer" } : null,
-    "cursor-wait": web ? { cursor: "wait" } : null,
-    "cursor-text": web ? { cursor: "text" } : null,
-    "cursor-move": web ? { cursor: "move" } : null,
-    "cursor-not-allowed": web ? { cursor: "not-allowed" } : null,
-    // User select (web-only)
-    "select-none": web ? { userSelect: "none" } : null,
-    "select-text": web ? { userSelect: "text" } : null,
-    "select-all": web ? { userSelect: "all" } : null,
-    "select-auto": web ? { userSelect: "auto" } : null,
-    // Pointer events (both)
-    "pointer-events-none": { pointerEvents: "none" },
-    "pointer-events-auto": { pointerEvents: "auto" },
-    // Whitespace (web-only; RN Text uses numberOfLines prop instead)
-    "whitespace-normal": web ? { whiteSpace: "normal" } : null,
-    "whitespace-nowrap": web ? { whiteSpace: "nowrap" } : null,
-    "whitespace-pre": web ? { whiteSpace: "pre" } : null,
-    "whitespace-pre-wrap": web ? { whiteSpace: "pre-wrap" } : null,
-    "whitespace-pre-line": web ? { whiteSpace: "pre-line" } : null,
-    // Word break (web-only)
-    "break-normal": web ? { overflowWrap: "normal", wordBreak: "normal" } : null,
-    "break-words": web ? { overflowWrap: "break-word" } : null,
-    "break-all": web ? { wordBreak: "break-all" } : null,
-    // Misc web-only
-    truncate: web ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
-    "box-border": web ? { boxSizing: "border-box" } : null,
-    "box-content": web ? { boxSizing: "content-box" } : null,
-    "appearance-none": web ? { appearance: "none" } : null,
-    "outline-none": web ? { outline: "none", outlineOffset: "0" } : null,
-    outline: web ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
-    resize: web ? { resize: "both" } : null,
-    "resize-none": web ? { resize: "none" } : null,
-    "resize-y": web ? { resize: "vertical" } : null,
-    "resize-x": web ? { resize: "horizontal" } : null,
-    antialiased: web ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
-    "subpixel-antialiased": web ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
-    "overflow-ellipsis": web ? { textOverflow: "ellipsis" } : null,
-    "sr-only": web ? {
-      position: "absolute",
-      width: 1,
-      height: 1,
-      padding: 0,
-      margin: -1,
-      overflow: "hidden",
-      clip: "rect(0,0,0,0)",
-      whiteSpace: "nowrap",
-      border: 0
-    } : null,
-    "not-sr-only": web ? {
-      position: "static",
-      width: "auto",
-      height: "auto",
-      padding: 0,
-      margin: 0,
-      overflow: "visible",
-      clip: "auto",
-      whiteSpace: "normal"
-    } : null,
-    // Lists (web-only)
-    "list-none": web ? { listStyleType: "none" } : null,
-    "list-disc": web ? { listStyleType: "disc" } : null,
-    "list-decimal": web ? { listStyleType: "decimal" } : null,
-    // Background clip (web-only)
-    "bg-clip-border": web ? { backgroundClip: "border-box" } : null,
-    "bg-clip-padding": web ? { backgroundClip: "padding-box" } : null,
-    "bg-clip-content": web ? { backgroundClip: "content-box" } : null,
-    "bg-clip-text": web ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
-    // Background image
-    "bg-none": web ? { backgroundImage: "none" } : null,
-    // Background size (web-only)
-    "bg-auto": web ? { backgroundSize: "auto" } : null,
-    "bg-cover": web ? { backgroundSize: "cover" } : null,
-    "bg-contain": web ? { backgroundSize: "contain" } : null,
-    // Background position (web-only)
-    "bg-center": web ? { backgroundPosition: "center" } : null,
-    "bg-top": web ? { backgroundPosition: "top" } : null,
-    "bg-bottom": web ? { backgroundPosition: "bottom" } : null,
-    "bg-left": web ? { backgroundPosition: "left" } : null,
-    "bg-right": web ? { backgroundPosition: "right" } : null,
-    "bg-left-top": web ? { backgroundPosition: "left top" } : null,
-    "bg-left-bottom": web ? { backgroundPosition: "left bottom" } : null,
-    "bg-right-top": web ? { backgroundPosition: "right top" } : null,
-    "bg-right-bottom": web ? { backgroundPosition: "right bottom" } : null,
-    // Background repeat (web-only)
-    "bg-repeat": web ? { backgroundRepeat: "repeat" } : null,
-    "bg-no-repeat": web ? { backgroundRepeat: "no-repeat" } : null,
-    "bg-repeat-x": web ? { backgroundRepeat: "repeat-x" } : null,
-    "bg-repeat-y": web ? { backgroundRepeat: "repeat-y" } : null,
-    "bg-repeat-round": web ? { backgroundRepeat: "round" } : null,
-    "bg-repeat-space": web ? { backgroundRepeat: "space" } : null,
-    // Background attachment (web-only)
-    "bg-fixed": web ? { backgroundAttachment: "fixed" } : null,
-    "bg-local": web ? { backgroundAttachment: "local" } : null,
-    "bg-scroll": web ? { backgroundAttachment: "scroll" } : null,
-    // Object position (web-only)
-    "object-center": web ? { objectPosition: "center" } : null,
-    "object-top": web ? { objectPosition: "top" } : null,
-    "object-bottom": web ? { objectPosition: "bottom" } : null,
-    "object-left": web ? { objectPosition: "left" } : null,
-    "object-right": web ? { objectPosition: "right" } : null,
-    "object-left-top": web ? { objectPosition: "left top" } : null,
-    "object-left-bottom": web ? { objectPosition: "left bottom" } : null,
-    "object-right-top": web ? { objectPosition: "right top" } : null,
-    "object-right-bottom": web ? { objectPosition: "right bottom" } : null,
-    // Table (web-only)
-    table: web ? { display: "table" } : null,
-    "table-auto": web ? { tableLayout: "auto" } : null,
-    "table-fixed": web ? { tableLayout: "fixed" } : null,
-    "caption-top": web ? { captionSide: "top" } : null,
-    "caption-bottom": web ? { captionSide: "bottom" } : null,
-    "border-collapse": web ? { borderCollapse: "collapse" } : null,
-    "border-separate": web ? { borderCollapse: "separate" } : null,
-    // List style position (web-only)
-    "list-inside": web ? { listStylePosition: "inside" } : null,
-    "list-outside": web ? { listStylePosition: "outside" } : null,
-    // Font variant numeric (web-only)
-    "normal-nums": web ? { fontVariantNumeric: "normal" } : null,
-    ordinal: web ? { fontVariantNumeric: "ordinal" } : null,
-    "slashed-zero": web ? { fontVariantNumeric: "slashed-zero" } : null,
-    "lining-nums": web ? { fontVariantNumeric: "lining-nums" } : null,
-    "oldstyle-nums": web ? { fontVariantNumeric: "oldstyle-nums" } : null,
-    "proportional-nums": web ? { fontVariantNumeric: "proportional-nums" } : null,
-    "tabular-nums": web ? { fontVariantNumeric: "tabular-nums" } : null,
-    "diagonal-fractions": web ? { fontVariantNumeric: "diagonal-fractions" } : null,
-    "stacked-fractions": web ? { fontVariantNumeric: "stacked-fractions" } : null,
-    // Isolation (web-only)
-    isolate: web ? { isolation: "isolate" } : null,
-    "isolation-auto": web ? { isolation: "auto" } : null,
-    // Backface visibility (both iOS and Android)
-    "backface-visible": { backfaceVisibility: "visible" },
-    "backface-hidden": { backfaceVisibility: "hidden" },
-    // CSS filters — standalone = default/full effect (web-only)
-    grayscale: web ? { "--kb-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
-    invert: web ? { "--kb-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
-    sepia: web ? { "--kb-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
-    // Divide none
-    "divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
-    // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
-    group: web ? {} : null,
-    peer: web ? {} : null,
-    // Text-wrap (web-only)
-    "text-wrap": web ? { textWrap: "wrap" } : null,
-    "text-nowrap": web ? { textWrap: "nowrap" } : null,
-    "text-balance": web ? { textWrap: "balance" } : null,
-    "text-pretty": web ? { textWrap: "pretty" } : null,
-    // Screen sizing — dvw/dvh (dynamic viewport units) instead of vw/vh: on mobile
-    // browsers, vh/vw are pinned to the LARGEST viewport size (address bar hidden),
-    // so `h-screen` overflows behind the address bar when it's shown. dvh/dvw track
-    // the actual visible viewport as browser chrome shows/hides. Desktop behavior
-    // is unchanged since there's no dynamic chrome to account for.
-    // (vw/dvw values are web-only; vh/dvh values work cross-platform via spacing scale for h-*)
-    "w-screen": web ? { width: "100dvw" } : null,
-    "min-h-screen": { minHeight: "100dvh" },
-    "max-h-screen": { maxHeight: "100dvh" },
-    "min-w-screen": web ? { minWidth: "100dvw" } : null,
-    "max-w-screen": web ? { maxWidth: "100dvw" } : null,
-    // max-w named container sizes (mirrors Tailwind's container scale)
-    "max-w-none": { maxWidth: "none" },
-    "max-w-xs": { maxWidth: 320 },
-    "max-w-sm": { maxWidth: 384 },
-    "max-w-md": { maxWidth: 448 },
-    "max-w-lg": { maxWidth: 512 },
-    "max-w-xl": { maxWidth: 576 },
-    "max-w-2xl": { maxWidth: 672 },
-    "max-w-3xl": { maxWidth: 768 },
-    "max-w-4xl": { maxWidth: 896 },
-    "max-w-5xl": { maxWidth: 1024 },
-    "max-w-6xl": { maxWidth: 1152 },
-    "max-w-7xl": { maxWidth: 1280 },
-    "max-w-prose": web ? { maxWidth: "65ch" } : null,
-    // Extended cursors (web-only)
-    "cursor-grab": web ? { cursor: "grab" } : null,
-    "cursor-grabbing": web ? { cursor: "grabbing" } : null,
-    "cursor-zoom-in": web ? { cursor: "zoom-in" } : null,
-    "cursor-zoom-out": web ? { cursor: "zoom-out" } : null,
-    "cursor-crosshair": web ? { cursor: "crosshair" } : null,
-    "cursor-help": web ? { cursor: "help" } : null,
-    "cursor-none": web ? { cursor: "none" } : null,
-    // Overflow clip (web-only)
-    "overflow-clip": web ? { overflow: "clip" } : null,
-    "overflow-x-clip": web ? { overflowX: "clip" } : null,
-    "overflow-y-clip": web ? { overflowY: "clip" } : null,
-    // Scroll behavior (web-only)
-    "scroll-smooth": web ? { scrollBehavior: "smooth" } : null,
-    "scroll-auto": web ? { scrollBehavior: "auto" } : null,
-    // Float (web-only)
-    "float-left": web ? { float: "left" } : null,
-    "float-right": web ? { float: "right" } : null,
-    "float-start": web ? { float: "inline-start" } : null,
-    "float-end": web ? { float: "inline-end" } : null,
-    "float-none": web ? { float: "none" } : null,
-    // Clear (web-only)
-    "clear-left": web ? { clear: "left" } : null,
-    "clear-right": web ? { clear: "right" } : null,
-    "clear-both": web ? { clear: "both" } : null,
-    "clear-start": web ? { clear: "inline-start" } : null,
-    "clear-end": web ? { clear: "inline-end" } : null,
-    "clear-none": web ? { clear: "none" } : null,
-    // Vertical align (web-only)
-    "align-baseline": web ? { verticalAlign: "baseline" } : null,
-    "align-top": web ? { verticalAlign: "top" } : null,
-    "align-middle": web ? { verticalAlign: "middle" } : null,
-    "align-bottom": web ? { verticalAlign: "bottom" } : null,
-    "align-text-top": web ? { verticalAlign: "text-top" } : null,
-    "align-text-bottom": web ? { verticalAlign: "text-bottom" } : null,
-    "align-sub": web ? { verticalAlign: "sub" } : null,
-    "align-super": web ? { verticalAlign: "super" } : null,
-    // Touch action (web-only)
-    "touch-auto": web ? { touchAction: "auto" } : null,
-    "touch-none": web ? { touchAction: "none" } : null,
-    "touch-pan-x": web ? { touchAction: "pan-x" } : null,
-    "touch-pan-y": web ? { touchAction: "pan-y" } : null,
-    "touch-pan-left": web ? { touchAction: "pan-left" } : null,
-    "touch-pan-right": web ? { touchAction: "pan-right" } : null,
-    "touch-pan-up": web ? { touchAction: "pan-up" } : null,
-    "touch-pan-down": web ? { touchAction: "pan-down" } : null,
-    "touch-pinch-zoom": web ? { touchAction: "pinch-zoom" } : null,
-    "touch-manipulation": web ? { touchAction: "manipulation" } : null
-  };
-}
-function getStandalone() {
-  if (!_standalone) _standalone = buildStandalone();
-  return _standalone;
-}
-function makeSpacingResolver(prop) {
-  return ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { [prop]: v } : null;
-  };
-}
-var PADDING_MARGIN_PROPS = {
-  p: "padding",
-  px: "paddingHorizontal",
-  py: "paddingVertical",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  m: "margin",
-  mx: "marginHorizontal",
-  my: "marginVertical",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft"
-};
-function makeBorderSideResolver(widthProp, colorProp) {
-  return ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { [widthProp]: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { [widthProp]: w2 };
-      return { [colorProp]: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { [colorProp]: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { [widthProp]: w } : null;
-  };
-}
-var BORDER_SIDE_PROPS = {
-  "border-t": ["borderTopWidth", "borderTopColor"],
-  "border-r": ["borderRightWidth", "borderRightColor"],
-  "border-b": ["borderBottomWidth", "borderBottomColor"],
-  "border-l": ["borderLeftWidth", "borderLeftColor"]
-};
-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 RESOLVERS = {
-  // ── Background ─────────────────────────────────────────────────────────────
-  bg: ({ value, isArbitrary }, { colors }) => {
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
-  },
-  "bg-opacity": ({ value, isArbitrary }, _) => {
-    if (!getEffectiveIsWeb()) return null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
-    return { "--bg-opacity": v };
-  },
-  // ── 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 };
-  },
-  // ── Padding & margin ───────────────────────────────────────────────────────
-  // Generated below via makeSpacingResolver() — see PADDING_MARGIN_PROPS.
-  // ── Sizing ─────────────────────────────────────────────────────────────────
-  w: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { width: v } : null;
-  },
-  h: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { height: v } : null;
-  },
-  "min-w": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { minWidth: v } : null;
-  },
-  "min-h": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { minHeight: v } : null;
-  },
-  "max-w": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { maxWidth: v } : null;
-  },
-  "max-h": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { maxHeight: v } : null;
-  },
-  // ── Border width ───────────────────────────────────────────────────────────
-  border: ({ value, isArbitrary }, { colors, borderWidth, spacing }) => {
-    if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { borderWidth: w2 };
-      return { borderColor: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { borderColor: color };
-    const w = borderWidth[value] ?? spacing[value];
-    if (w !== void 0) {
-      const numW = typeof w === "number" ? w : parseFloat(String(w));
-      if (isNaN(numW)) return null;
-      return { borderWidth: numW };
-    }
-    return null;
-  },
-  // border-t/-r/-b/-l generated below via makeBorderSideResolver() — see BORDER_SIDE_PROPS.
-  // ── Border radius ──────────────────────────────────────────────────────────
-  rounded: ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderRadius: r } : null;
-  },
-  "rounded-t": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopLeftRadius: r, borderTopRightRadius: r } : null;
-  },
-  "rounded-r": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopRightRadius: r, borderBottomRightRadius: r } : null;
-  },
-  "rounded-b": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderBottomLeftRadius: r, borderBottomRightRadius: r } : null;
-  },
-  "rounded-l": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopLeftRadius: r, borderBottomLeftRadius: r } : null;
-  },
-  "rounded-tl": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopLeftRadius: r } : null;
-  },
-  "rounded-tr": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderTopRightRadius: r } : null;
-  },
-  "rounded-bl": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderBottomLeftRadius: r } : null;
-  },
-  "rounded-br": ({ value, isArbitrary }, { borderRadius }) => {
-    const r = resolveRadius(value, borderRadius, isArbitrary);
-    return r !== null ? { borderBottomRightRadius: r } : null;
-  },
-  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
-  grid: ({ value, isArbitrary }) => {
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
-  "grid-cols": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  "grid-rows": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { gridTemplateRows: value };
-    if (value === "none") return { gridTemplateRows: "none" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
-  "grid-flow": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const flows = {
-      row: "row",
-      col: "column",
-      dense: "dense",
-      "row-dense": "row dense",
-      "col-dense": "column dense"
-    };
-    const flow = flows[value];
-    return flow ? { gridAutoFlow: flow } : null;
-  },
-  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
-  "auto-cols": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoColumns: value };
-    const presets = {
-      auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    };
-    const v = presets[value];
-    return v ? { gridAutoColumns: v } : null;
-  },
-  "auto-rows": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoRows: value };
-    const presets = {
-      auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    };
-    const v = presets[value];
-    return v ? { gridAutoRows: v } : null;
-  },
-  // ── Grid column placement (web-only) ──────────────────────────────────────
-  "col-span": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridColumn: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
-  },
-  "col-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnStart: "auto" };
-    if (isArbitrary) return { gridColumnStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnStart: n };
-  },
-  "col-end": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnEnd: "auto" };
-    if (isArbitrary) return { gridColumnEnd: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnEnd: n };
-  },
-  col: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridColumn: "auto" };
-    if (isArbitrary) return { gridColumn: value };
-    return null;
-  },
-  // ── Grid row placement (web-only) ─────────────────────────────────────────
-  "row-span": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridRow: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
-  },
-  "row-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowStart: "auto" };
-    if (isArbitrary) return { gridRowStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowStart: n };
-  },
-  "row-end": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowEnd: "auto" };
-    if (isArbitrary) return { gridRowEnd: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowEnd: n };
-  },
-  row: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridRow: "auto" };
-    if (isArbitrary) return { gridRow: value };
-    return null;
-  },
-  // ── Grid alignment (web-only) ──────────────────────────────────────────────
-  // place-items is shorthand for align-items + justify-items on a grid container
-  "place-items": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeItems: map[value] } : null;
-  },
-  // place-content is shorthand for align-content + justify-content on a grid container
-  "place-content": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      between: "space-between",
-      around: "space-around",
-      evenly: "space-evenly",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeContent: map[value] } : null;
-  },
-  // justify-items controls inline-axis alignment of grid items within their cells
-  "justify-items": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { justifyItems: map[value] } : null;
-  },
-  // place-self is shorthand for align-self + justify-self on a grid item
-  "place-self": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { placeSelf: map[value] } : null;
-  },
-  // justify-self controls inline-axis self-alignment of a grid item
-  "justify-self": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
-    };
-    return map[value] ? { justifySelf: map[value] } : null;
-  },
-  // ── CSS Filters (composable via CSS variables, web-only) ─────────────────
-  blur: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const sizes = {
-      "": "blur(8px)",
-      sm: "blur(4px)",
-      md: "blur(12px)",
-      lg: "blur(16px)",
-      xl: "blur(24px)",
-      "2xl": "blur(40px)",
-      "3xl": "blur(64px)"
-    };
-    if (value === "none") return { "--kb-blur": "", filter: FILTER_COMPOSE };
-    const v = isArbitrary ? `blur(${value})` : sizes[value];
-    return v !== void 0 ? { "--kb-blur": v, filter: FILTER_COMPOSE } : null;
-  },
-  brightness: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-brightness": v, filter: FILTER_COMPOSE };
-  },
-  contrast: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-contrast": v, filter: FILTER_COMPOSE };
-  },
-  grayscale: ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
-    return { "--kb-grayscale": v, filter: FILTER_COMPOSE };
-  },
-  "hue-rotate": ({ value, negative, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
-    return { "--kb-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
-  },
-  invert: ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "invert(0)" : "invert(100%)";
-    return { "--kb-invert": v, filter: FILTER_COMPOSE };
-  },
-  saturate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-saturate": v, filter: FILTER_COMPOSE };
-  },
-  sepia: ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = value === "0" ? "sepia(0)" : "sepia(100%)";
-    return { "--kb-sepia": v, filter: FILTER_COMPOSE };
-  },
-  "drop-shadow": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { "--kb-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
-    const presets = {
-      "": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
-      sm: "drop-shadow(0 1px 1px rgb(0 0 0/0.05))",
-      md: "drop-shadow(0 4px 3px rgb(0 0 0/0.07)) drop-shadow(0 2px 2px rgb(0 0 0/0.06))",
-      lg: "drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1))",
-      xl: "drop-shadow(0 20px 13px rgb(0 0 0/0.03)) drop-shadow(0 8px 5px rgb(0 0 0/0.08))",
-      "2xl": "drop-shadow(0 25px 25px rgb(0 0 0/0.15))",
-      none: "drop-shadow(0 0 #0000)"
-    };
-    const v = presets[value];
-    return v !== void 0 ? { "--kb-drop-shadow": v, filter: FILTER_COMPOSE } : null;
-  },
-  // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
-  filter: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { filter: value.replace(/_/g, " ") };
-    if (value === "none") return { filter: "none" };
-    return null;
-  },
-  // ── Backdrop Filters (composable via CSS variables, web-only) ────────────
-  "backdrop-blur": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const sizes = {
-      "": "blur(8px)",
-      sm: "blur(4px)",
-      md: "blur(12px)",
-      lg: "blur(16px)",
-      xl: "blur(24px)",
-      "2xl": "blur(40px)",
-      "3xl": "blur(64px)"
-    };
-    if (value === "none") return { "--kb-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
-    const v = isArbitrary ? `blur(${value})` : sizes[value];
-    return v !== void 0 ? { "--kb-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
-  },
-  "backdrop-brightness": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-contrast": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-grayscale": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
-    return { "--kb-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-invert": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-opacity": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-saturate": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
-    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-sepia": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    return { "--kb-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
-  },
-  "backdrop-filter": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
-    if (value === "none") return { backdropFilter: "none" };
-    return null;
-  },
-  // ── Background gradient (CSS variable gradient stops, web-only) ──────────
-  "bg-gradient-to": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const directions = {
-      t: "to top",
-      tr: "to top right",
-      r: "to right",
-      br: "to bottom right",
-      b: "to bottom",
-      bl: "to bottom left",
-      l: "to left",
-      tl: "to top left"
-    };
-    const dir = directions[value];
-    if (!dir) return null;
-    return {
-      backgroundImage: `linear-gradient(${dir}, var(--kb-gradient-from, transparent), var(--kb-gradient-stops, transparent))`
-    };
-  },
-  from: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return {
-      "--kb-gradient-from": color,
-      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-to, transparent)`
-    };
-  },
-  via: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return {
-      "--kb-gradient-via": color,
-      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-via), var(--kb-gradient-to, transparent)`
-    };
-  },
-  to: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return { "--kb-gradient-to": color };
-  },
-  // ── Transform extras (web-only) ───────────────────────────────────────────
-  "skew-x": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
-  },
-  "skew-y": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
-  },
-  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
-  transform: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
-    if (value === "none") return { transform: "none" };
-    return null;
-  },
-  // Transform origin
-  origin: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
-    const origins = {
-      center: "center",
-      top: "top",
-      "top-right": "top right",
-      right: "right",
-      "bottom-right": "bottom right",
-      bottom: "bottom",
-      "bottom-left": "bottom left",
-      left: "left",
-      "top-left": "top left"
-    };
-    return origins[value] ? { transformOrigin: origins[value] } : null;
-  },
-  // ── Text decoration advanced (web-only) ───────────────────────────────────
-  decoration: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) {
-      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
-      return { textDecorationColor: value };
-    }
-    const thickTokens = {
-      auto: "auto",
-      "from-font": "from-font",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      wavy: "wavy"
-    };
-    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { textDecorationColor: color } : null;
-  },
-  "underline-offset": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { textUnderlineOffset: value };
-    const offsets = {
-      auto: "auto",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
-  },
-  // ── 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;
-  },
-  // ── 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 };
-  },
-  // ── Outline extended (web-only) ───────────────────────────────────────────
-  outline: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
-    if (value === "none") return { outline: "none", outlineOffset: "0" };
-    if (isArbitrary) {
-      if (/^\d/.test(value) || value.startsWith("calc(")) return { outlineWidth: value };
-      return { outlineColor: value };
-    }
-    const widths = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
-    if (value in widths) return { outlineWidth: widths[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { outlineColor: color } : null;
-  },
-  "outline-offset": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { outlineOffset: value };
-    const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
-    return offsets[value] ? { outlineOffset: offsets[value] } : null;
-  },
-  // ── Columns (web-only) ─────────────────────────────────────────────────────
-  columns: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { columnCount: value };
-    if (value === "auto") return { columnCount: "auto" };
-    const n = parseInt(value, 10);
-    if (!isNaN(n)) return { columnCount: n };
-    const widths = {
-      "3xs": "16rem",
-      "2xs": "18rem",
-      xs: "20rem",
-      sm: "24rem",
-      md: "28rem",
-      lg: "32rem",
-      xl: "36rem",
-      "2xl": "42rem",
-      "3xl": "48rem",
-      "4xl": "56rem",
-      "5xl": "64rem",
-      "6xl": "72rem",
-      "7xl": "80rem"
-    };
-    return widths[value] ? { columnWidth: widths[value] } : null;
-  },
-  // ── Mix / background blend mode (web-only) ───────────────────────────────
-  "mix-blend": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const modes = [
-      "normal",
-      "multiply",
-      "screen",
-      "overlay",
-      "darken",
-      "lighten",
-      "color-dodge",
-      "color-burn",
-      "hard-light",
-      "soft-light",
-      "difference",
-      "exclusion",
-      "hue",
-      "saturation",
-      "color",
-      "luminosity",
-      "plus-lighter"
-    ];
-    return modes.includes(value) ? { mixBlendMode: value } : null;
-  },
-  "bg-blend": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const modes = [
-      "normal",
-      "multiply",
-      "screen",
-      "overlay",
-      "darken",
-      "lighten",
-      "color-dodge",
-      "color-burn",
-      "hard-light",
-      "soft-light",
-      "difference",
-      "exclusion",
-      "hue",
-      "saturation",
-      "color",
-      "luminosity"
-    ];
-    return modes.includes(value) ? { backgroundBlendMode: value } : null;
-  },
-  // ── Will-change (web-only) ─────────────────────────────────────────────────
-  "will-change": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
-    const presets = {
-      auto: "auto",
-      scroll: "scroll-position",
-      contents: "contents",
-      transform: "transform"
-    };
-    return presets[value] ? { willChange: presets[value] } : null;
-  },
-  // ── Divide (child combinator CSS, web-only) ───────────────────────────────
-  // These return special __divide* markers that resolver.ts converts to
-  // .cls > * + * { border-... } CSS rules. No inline style is applied.
-  "divide-x": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "reverse") return null;
-    if (!value) return { __divideX: 1 };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { __divideX: n };
-  },
-  "divide-y": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "reverse") return null;
-    if (!value) return { __divideY: 1 };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { __divideY: n };
-  },
-  divide: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { __divideColor: value };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      none: "none"
-    };
-    if (value in styleTokens) return { __divideStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { __divideColor: color } : null;
-  },
-  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
-  // Named presets give cross-platform shadow; arbitrary is web-only.
-  "text-shadow": ({ value, isArbitrary }, { colors }) => {
-    if (value === "none") {
-      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
-    }
-    const webPresets = {
-      "": "0 2px 4px rgba(0,0,0,0.3)",
-      sm: "0 1px 2px rgba(0,0,0,0.3)",
-      md: "0 4px 6px rgba(0,0,0,0.3)",
-      lg: "0 8px 16px rgba(0,0,0,0.5)",
-      xl: "0 16px 32px rgba(0,0,0,0.5)"
-    };
-    const nativePresets = {
-      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
-      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
-      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
-      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
-      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
-    };
-    if (value in webPresets) {
-      if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
-      return nativePresets[value] ?? null;
-    }
-    if (isArbitrary) {
-      return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) {
-      return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
-    }
-    return null;
-  },
-  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
-  perspective: ({ value, isArbitrary }) => {
-    if (isArbitrary) {
-      const numPx = parseFloat(value);
-      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
-      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
-    }
-    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
-  },
-  // ── Tint color (native-only, for Image and icon components) ──────────────
-  tint: ({ value, isArbitrary }, { colors }) => {
-    if (getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { tintColor: color } : null;
-  },
-  // ── Size shorthand (sets width AND height in one utility) ────────────────
-  size: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { width: v, height: v } : null;
-  },
-  // ── Animations (CSS keyframe animations, web-only) ────────────────────────
-  // Each variant injects a @keyframes rule once via the __keyframe marker.
-  // resolver.ts detects __keyframe, injects the rule, then strips the marker
-  // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }, 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;
-  },
-  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
-  "line-clamp": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return {
-      overflow: "hidden",
-      display: "-webkit-box",
-      WebkitBoxOrient: "vertical",
-      WebkitLineClamp: n
-    };
-  },
-  // ── Caret color (web-only) ────────────────────────────────────────────────
-  caret: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto" || value === "transparent") return { caretColor: value };
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { caretColor: color } : null;
-  },
-  // ── Accent color (web-only) ───────────────────────────────────────────────
-  accent: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { accentColor: "auto" };
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { accentColor: color } : null;
-  },
-  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
-  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
-  // take stroke/fill as component PROPS, not style entries, so there's no
-  // reliable way to apply a resolved color through the `style` prop there.
-  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
-  // color-first-then-numeric-fallback disambiguation `border` uses above.
-  stroke: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (value === "none") return { stroke: "none" };
-    if (isArbitrary) {
-      const w = toNativeValue(value);
-      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { stroke: color };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { strokeWidth: n };
-  },
-  fill: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (value === "none") return { fill: "none" };
-    if (isArbitrary) return { fill: value };
-    const color = resolveColor(value, colors, false);
-    return color ? { fill: color } : null;
-  },
-  // ── Flex ───────────────────────────────────────────────────────────────────
-  flex: ({ value, isArbitrary }, { flex }) => {
-    if (!value) return { display: "flex" };
-    if (isArbitrary) {
-      const v = parseFloat(value);
-      return isNaN(v) ? null : { flex: v };
-    }
-    if (value in flex) {
-      const v = flex[value];
-      if (typeof v === "string" && !getEffectiveIsWeb()) {
-        if (v === "auto" || v === "initial") return { flex: 1 };
-        if (v === "none") return { flex: 0 };
-        return null;
-      }
-      return { flex: v };
-    }
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { flex: n };
-  },
-  basis: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { flexBasis: v } : null;
-  },
-  grow: ({ value }, _) => {
-    if (!value) return { flexGrow: 1 };
-    const n = parseFloat(value);
-    return { flexGrow: isNaN(n) ? 1 : n };
-  },
-  shrink: ({ value }, _) => {
-    if (!value) return { flexShrink: 1 };
-    const n = parseFloat(value);
-    return { flexShrink: isNaN(n) ? 1 : n };
-  },
-  order: ({ value, negative }, _) => {
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { order: negative ? -n : n };
-  },
-  // ── Gap ────────────────────────────────────────────────────────────────────
-  gap: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { gap: v } : null;
-  },
-  "gap-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { columnGap: v } : null;
-  },
-  "gap-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { rowGap: v } : null;
-  },
-  // ── Position ───────────────────────────────────────────────────────────────
-  top: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v } : null;
-  },
-  right: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { right: v } : null;
-  },
-  bottom: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { bottom: v } : null;
-  },
-  left: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { left: v } : null;
-  },
-  inset: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v, right: v, bottom: v, left: v } : null;
-  },
-  "inset-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { left: v, right: v } : null;
-  },
-  "inset-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v, bottom: v } : null;
-  },
-  // ── Z-index ────────────────────────────────────────────────────────────────
-  z: ({ value, isArbitrary }, { zIndex }) => {
-    if (isArbitrary) {
-      const n2 = parseInt(value);
-      return isNaN(n2) ? null : { zIndex: n2 };
-    }
-    const v = zIndex[value];
-    if (v !== void 0) {
-      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
-      return { zIndex: v };
-    }
-    const n = parseInt(value);
-    return isNaN(n) ? null : { zIndex: n };
-  },
-  // ── Opacity ────────────────────────────────────────────────────────────────
-  opacity: ({ value, isArbitrary }, { opacity }) => {
-    if (isArbitrary) {
-      const v2 = parseFloat(value);
-      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
-    }
-    const v = opacity[value];
-    if (v !== void 0) return { opacity: v };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
-  },
-  // ── Font ───────────────────────────────────────────────────────────────────
-  font: ({ value, isArbitrary }, { fontFamily, fontWeight }) => {
-    if (isArbitrary) return { fontFamily: value };
-    if (value in fontFamily) {
-      const ff = fontFamily[value];
-      return { fontFamily: Array.isArray(ff) ? ff.join(", ") : ff };
-    }
-    if (value in fontWeight) return { fontWeight: String(fontWeight[value]) };
-    return null;
-  },
-  // ── Line height ────────────────────────────────────────────────────────────
-  leading: ({ value, isArbitrary }, { lineHeight }) => {
-    if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
-    const v = lineHeight[value];
-    if (v === void 0) return null;
-    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
-    return { lineHeight: v };
-  },
-  // ── Letter spacing ─────────────────────────────────────────────────────────
-  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
-    if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
-    const v = letterSpacing[value];
-    return v !== void 0 ? { letterSpacing: v } : null;
-  },
-  // ── Shadow ─────────────────────────────────────────────────────────────────
-  shadow: ({ value }, { shadow }) => {
-    const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? null;
-  },
-  // ── Scale ──────────────────────────────────────────────────────────────────
-  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
-  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
-  scale: ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
-  },
-  "scale-x": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
-  },
-  "scale-y": ({ value, isArbitrary }) => {
-    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
-  },
-  // ── Rotate ─────────────────────────────────────────────────────────────────
-  rotate: ({ value, negative, isArbitrary }) => {
-    if (isArbitrary) {
-      const finalValue = negative ? `-${value}` : value;
-      return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
-    }
-    const deg = parseFloat(value);
-    if (isNaN(deg)) return null;
-    const finalDeg = negative ? -deg : deg;
-    return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
-  },
-  // ── Translate ──────────────────────────────────────────────────────────────
-  "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateX(${typeof v === "number" ? `${v}px` : v})` };
-    if (typeof v === "string") {
-      const n = parseFloat(v);
-      return isNaN(n) ? null : { transform: [{ translateX: n }] };
-    }
-    return { transform: [{ translateX: v }] };
-  },
-  "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateY(${typeof v === "number" ? `${v}px` : v})` };
-    if (typeof v === "string") {
-      const n = parseFloat(v);
-      return isNaN(n) ? null : { transform: [{ translateY: n }] };
-    }
-    return { transform: [{ translateY: v }] };
-  },
-  // ── Aspect ratio ───────────────────────────────────────────────────────────
-  aspect: ({ value, isArbitrary }) => {
-    if (isArbitrary) return { aspectRatio: value };
-    const presets = { auto: "auto", square: 1, video: 16 / 9 };
-    if (!(value in presets)) return null;
-    const v = presets[value];
-    if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
-    return { aspectRatio: v };
-  },
-  // ── Transition (web-only; use Animated API on native) ─────────────────────
-  transition: ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const presets = {
-      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
-      all: "all 150ms",
-      none: "none",
-      colors: "color 150ms, background-color 150ms, border-color 150ms",
-      opacity: "opacity 150ms",
-      shadow: "box-shadow 150ms",
-      transform: "transform 150ms"
-    };
-    const v = presets[value];
-    return v !== void 0 ? { transition: v } : null;
-  },
-  duration: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    const ms = isArbitrary ? value : `${value}ms`;
-    return { transitionDuration: ms };
-  },
-  delay: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    const ms = isArbitrary ? value : `${value}ms`;
-    return { transitionDelay: ms };
-  },
-  // ── Ring ───────────────────────────────────────────────────────────────────
-  // Web: box-shadow outline ring (doesn't affect layout).
-  // Native: React Native has no box-shadow, so this falls back to borderWidth/
-  // borderColor — the closest visual approximation (used by other RN Tailwind-
-  // likes for the same reason). Unlike the web ring, this DOES affect layout,
-  // and it shares its properties with the `border` utility — combining
-  // `border-*` and `ring-*` on the same native element means whichever class
-  // comes later wins, since both ultimately set borderWidth/borderColor.
-  ring: ({ value, isArbitrary }, { colors }) => {
-    const onWeb = getEffectiveIsWeb();
-    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
-    const DEFAULT_WIDTH = 3;
-    const asNative = (w, color2) => w === 0 ? { borderWidth: 0 } : { borderWidth: w, borderColor: color2 };
-    if (!value) {
-      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
-    }
-    if (value === "inset") {
-      return onWeb ? { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
-    }
-    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    if (!isArbitrary && value in widthTokens) {
-      const w = widthTokens[value];
-      return onWeb ? { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` } : asNative(w, DEFAULT_COLOR);
-    }
-    if (isArbitrary) {
-      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
-      if (numMatch) {
-        const unit = numMatch[2] ?? "px";
-        if (onWeb) return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
-        return unit === "px" ? asNative(parseFloat(numMatch[1]), DEFAULT_COLOR) : null;
-      }
-      return onWeb ? { boxShadow: value.replace(/_/g, " ") } : null;
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) {
-      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` } : asNative(DEFAULT_WIDTH, color);
-    }
-    return null;
-  },
-  // Web-only, unlike `ring` above: this stacks a second box-shadow layer to
-  // create a gap between the element and the ring. There's no native
-  // equivalent to approximate that with (a border can't create a gap outside
-  // its own element without an extra wrapper view), so this stays a no-op
-  // on native rather than rendering a misleading half-translation.
-  "ring-offset": ({ value, isArbitrary }, _theme) => {
-    if (!getEffectiveIsWeb()) return null;
-    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
-    const DEFAULT_RING_WIDTH = 3;
-    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    let offsetWidth;
-    if (!isArbitrary) {
-      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
-    } else {
-      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
-    }
-    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
-    const isZero = offsetWidth === 0 || offsetWidth === "0";
-    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
-    return {
-      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
-    };
-  },
-  // ── Space between ─────────────────────────────────────────────────────────
-  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
-  // On native (RN 0.71+): uses columnGap/rowGap directly.
-  "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { __spaceX: v };
-    return { columnGap: v };
-  },
-  "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { __spaceY: v };
-    return { rowGap: v };
-  }
-};
-for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
-  RESOLVERS[utility] = makeSpacingResolver(prop);
-}
-for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
-  RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
-}
-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/responsiveStore.ts
-var RESPONSIVE_KEY = "__kbach_responsive__";
-function getStore() {
-  const g = globalThis;
-  if (!g[RESPONSIVE_KEY]) {
-    g[RESPONSIVE_KEY] = { width: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
-  }
-  return g[RESPONSIVE_KEY];
-}
-function syncGlobalWidth(width) {
-  getStore().width = width;
-}
-function syncGlobalScreens(screens) {
-  getStore().screens = screens;
-}
-function getGlobalScreens() {
-  return getStore().screens;
-}
-function setGlobalWidth(width) {
-  const store = getStore();
-  if (store.width === width) return;
-  store.width = width;
-  for (const l of store.listeners) l();
-}
-function getGlobalWidth() {
-  return getStore().width;
-}
-function subscribeGlobalWidth(listener) {
-  const store = getStore();
-  store.listeners.add(listener);
-  return () => store.listeners.delete(listener);
-}
-function getActiveBreakpoints(width) {
-  const store = getStore();
-  const w = width ?? store.width;
-  const active = /* @__PURE__ */ new Set();
-  for (const [name, minW] of Object.entries(store.screens)) {
-    if (typeof minW === "number" && w >= minW) active.add(name);
-  }
-  return active;
-}
-
-// src/core/resolver.ts
-var _themeCache = /* @__PURE__ */ new WeakMap();
-function getThemeCache(theme) {
-  let cache = _themeCache.get(theme);
-  if (!cache) {
-    cache = new LRUCache(1e4);
-    _themeCache.set(theme, cache);
-  }
-  return cache;
-}
-var _sortCache = /* @__PURE__ */ new WeakMap();
-function getSortedEntries(resolved) {
-  let sorted = _sortCache.get(resolved);
-  if (!sorted) {
-    const entries = Object.entries(resolved);
-    entries.sort((a, b) => {
-      const pa = a[0] === "base" ? -1 : a[0].split(":").length;
-      const pb = b[0] === "base" ? -1 : b[0].split(":").length;
-      return pa - pb;
-    });
-    sorted = entries;
-    _sortCache.set(resolved, sorted);
-  }
-  return sorted;
-}
-var FONT_KEY = "__kbach_default_font__";
-function setDefaultFontFamily(font) {
-  globalThis[FONT_KEY] = font;
-}
-function getDefaultFontFamily() {
-  return globalThis[FONT_KEY];
-}
-var _styleEl = null;
-var _ruleIndexByKey = /* @__PURE__ */ new Map();
-function evictInjectedRule(rule) {
-  const idx = _ruleIndexByKey.get(rule);
-  _ruleIndexByKey.delete(rule);
-  if (idx === void 0) return;
-  const sheet = _styleEl?.sheet;
-  if (!sheet) return;
-  try {
-    sheet.deleteRule(idx);
-  } catch {
-    return;
-  }
-  for (const [key, i] of _ruleIndexByKey) {
-    if (i > idx) _ruleIndexByKey.set(key, i - 1);
-  }
-}
-var _injectedRules = new LRUCache(5e4, evictInjectedRule);
-var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
-function disableRuntimeCSS() {
-  globalThis[_CSS_DISABLED_KEY] = true;
-}
-function isRuntimeCSSDisabled() {
-  return !!globalThis[_CSS_DISABLED_KEY];
-}
-function getStyleEl() {
-  if (_styleEl) return _styleEl;
-  _styleEl = document.createElement("style");
-  _styleEl.setAttribute("data-kbach", "");
-  document.head.appendChild(_styleEl);
-  return _styleEl;
-}
-function injectRule(rule) {
-  if (isRuntimeCSSDisabled()) return;
-  if (_injectedRules.get(rule)) return;
-  try {
-    const sheet = getStyleEl().sheet;
-    if (sheet) {
-      const idx = sheet.cssRules.length;
-      sheet.insertRule(rule, idx);
-      _ruleIndexByKey.set(rule, idx);
-      _injectedRules.set(rule, true);
-    }
-  } catch {
-  }
-}
-var _globalStyleEl = null;
-function getGlobalStyleEl() {
-  if (_globalStyleEl) return _globalStyleEl;
-  _globalStyleEl = document.createElement("style");
-  _globalStyleEl.setAttribute("data-kbach-global", "");
-  document.head.insertBefore(_globalStyleEl, getStyleEl());
-  return _globalStyleEl;
-}
-function injectGlobalStyles(theme) {
-  if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
-  const rules = document.getElementById(RESET_STYLE_ID) ? [] : [BASE_RESET];
-  const ff = theme.fontFamily;
-  if (ff?.sans && ff.sans !== "System") {
-    const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
-    rules.push(`body { font-family: ${family}; }`);
-  }
-  getGlobalStyleEl().textContent = rules.join("\n");
-}
-function buildDivideDecls(styles, forceImportant) {
-  const imp = forceImportant ? " !important" : "";
-  const parts = [];
-  if ("__divideX" in styles) {
-    const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px${imp}`, `border-right-width: 0px${imp}`);
-  }
-  if ("__divideY" in styles) {
-    const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px${imp}`, `border-bottom-width: 0px${imp}`);
-  }
-  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}${imp}`);
-  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}${imp}`);
-  return parts.join("; ");
-}
-function buildSpaceDecls(styles, forceImportant) {
-  const imp = forceImportant ? " !important" : "";
-  const parts = [];
-  if ("__spaceX" in styles) {
-    const v = styles.__spaceX;
-    const val = typeof v === "number" ? `${v}px` : String(v);
-    parts.push(`margin-left: ${val}${imp}`);
-  }
-  if ("__spaceY" in styles) {
-    const v = styles.__spaceY;
-    const val = typeof v === "number" ? `${v}px` : String(v);
-    parts.push(`margin-top: ${val}${imp}`);
-  }
-  return parts.join("; ");
-}
-var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
-  "shadowColor",
-  "shadowOffset",
-  "shadowOpacity",
-  "shadowRadius",
-  "elevation",
-  "includeFontPadding",
-  "textAlignVertical",
-  "writingDirection",
-  "textShadowColor",
-  "textShadowOffset",
-  "textShadowRadius",
-  "tintColor",
-  "__divideX",
-  "__divideY",
-  "__divideColor",
-  "__divideStyle",
-  "__keyframe",
-  "__spaceX",
-  "__spaceY"
-]);
-var CSS_UNITLESS = /* @__PURE__ */ new Set([
-  "opacity",
-  "fontWeight",
-  "flex",
-  "flexGrow",
-  "flexShrink",
-  "order",
-  "zIndex",
-  "aspectRatio",
-  "columnCount",
-  "lineHeight",
-  "gridColumnStart",
-  "gridColumnEnd",
-  "gridRowStart",
-  "gridRowEnd"
-]);
-var RN_SHORTHAND_EXPAND = {
-  marginHorizontal: ["margin-left", "margin-right"],
-  marginVertical: ["margin-top", "margin-bottom"],
-  paddingHorizontal: ["padding-left", "padding-right"],
-  paddingVertical: ["padding-top", "padding-bottom"]
-};
-function styleValueToCSS(styles, forceImportant = false) {
-  const parts = [];
-  for (const [prop, val] of Object.entries(styles)) {
-    if (val === void 0 || val === null || typeof val === "object" || RN_ONLY_PROPS.has(prop)) continue;
-    let cssVal;
-    if (typeof val === "number") {
-      const isCustomProp = prop.startsWith("--");
-      cssVal = val === 0 || isCustomProp || CSS_UNITLESS.has(prop) ? String(val) : `${val}px`;
-    } else {
-      cssVal = String(val);
-    }
-    const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
-    if (prop in RN_SHORTHAND_EXPAND) {
-      const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
-      parts.push(`${p1}: ${cssVal}${imp}`, `${p2}: ${cssVal}${imp}`);
-      continue;
-    }
-    parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
-  }
-  return parts.join("; ");
-}
-function camelToKebab(str) {
-  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
-function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
-  const rules = [];
-  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
-    rules.push(styles.__keyframe);
-  }
-  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const isSpace = "__spaceX" in styles || "__spaceY" in styles;
-  const isChildCombinator = isDivide || isSpace;
-  const escaped = escapeCSSSelector(cls);
-  const childSuffix = isChildCombinator ? " > * + *" : "";
-  if (bucketKey === "base") {
-    const decls2 = isDivide ? buildDivideDecls(styles, important) : isSpace ? buildSpaceDecls(styles, important) : styleValueToCSS(styles, important);
-    if (!decls2) return rules;
-    rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
-    return rules;
-  }
-  const mods = bucketKey.split(":");
-  let darkScheme;
-  let needsImportant = important;
-  const pseudoParts = [];
-  const ancestorParts = [];
-  const dirParts = [];
-  const mediaWrappers = [];
-  let minWidth = 0;
-  for (const mod of mods) {
-    const def = getModifier(mod);
-    if (!def) continue;
-    if (def.darkScheme) darkScheme = def.darkScheme;
-    if (def.pseudo) pseudoParts.push(def.pseudo);
-    if (def.ancestorSelector) {
-      ancestorParts.push(def.ancestorSelector);
-      needsImportant = true;
-    }
-    if (def.dirSelector) {
-      dirParts.push(def.dirSelector);
-      needsImportant = true;
-    }
-    if (def.mediaQuery) {
-      mediaWrappers.push(`@media ${def.mediaQuery}`);
-      needsImportant = true;
-    }
-    if (def.isResponsive) {
-      const w = screens[mod] ?? 0;
-      if (w > minWidth) minWidth = w;
-    }
-    if (def.forcesImportant) needsImportant = true;
-  }
-  const pseudoSuffix = pseudoParts.join("");
-  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
-  const ancestorPrefix = ancestorParts.join("");
-  const dirPrefix = dirParts.join("");
-  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const decls = isDivide ? buildDivideDecls(styles, needsImportant) : isSpace ? buildSpaceDecls(styles, needsImportant) : styleValueToCSS(styles, needsImportant);
-  if (!decls) return rules;
-  let rule;
-  if (darkScheme === "dark") {
-    if (darkMode === "media") rule = `@media (prefers-color-scheme: dark) { ${selector} { ${decls} } }`;
-    else if (darkMode === "class") rule = `.dark ${selector} { ${decls} }`;
-    else rule = `[data-theme="dark"] ${selector} { ${decls} }`;
-  } else if (darkScheme === "light") {
-    if (darkMode === "media") rule = `@media (prefers-color-scheme: light) { ${selector} { ${decls} } }`;
-    else if (darkMode === "class") rule = `.light ${selector} { ${decls} }`;
-    else rule = `[data-theme="light"] ${selector} { ${decls} }`;
-  } else {
-    rule = `${selector} { ${decls} }`;
-  }
-  for (const mw of mediaWrappers) rule = `${mw} { ${rule} }`;
-  if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
-  rules.push(rule);
-  return rules;
-}
-function injectClassRule(cls, bucketKey, styles, darkMode, important) {
-  const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
-  for (const r of cssRules) injectRule(r);
-}
-function resolve(classString, theme, darkMode = "attribute") {
-  const cache = getThemeCache(theme);
-  const cacheKey = `${classString}::${darkMode}`;
-  const cached = cache.get(cacheKey);
-  if (cached) return cached;
-  const result = {};
-  const onWeb = isWeb;
-  for (const parsed of parseClasses(classString)) {
-    const styles = resolveUtility(parsed, theme);
-    if (!styles) {
-      if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
-        kbachWarn(`Unknown class "${parsed.original}"`);
-      }
-      continue;
-    }
-    const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
-    if (!result[bucketKey]) result[bucketKey] = {};
-    Object.assign(result[bucketKey], styles);
-    if (onWeb) {
-      injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important);
-    }
-  }
-  cache.set(cacheKey, result);
-  return result;
-}
-function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
-  const result = {};
-  for (const [key, styles] of getSortedEntries(resolved)) {
-    if (!styles) continue;
-    if (key === "base") {
-      Object.assign(result, styles);
-      continue;
-    }
-    const mods = key.split(":");
-    if (mods.every((mod) => matchModifier(mod, isDark, state, breakpoints))) {
-      Object.assign(result, styles);
-    }
-  }
-  if (isNative) {
-    const defaultFont = getDefaultFontFamily();
-    if (defaultFont && !("fontFamily" in result)) {
-      result.fontFamily = defaultFont;
-    }
-  }
-  if (!isNative) {
-    const r = result;
-    const ph = r.paddingHorizontal;
-    if (ph !== void 0) {
-      r.paddingLeft = ph;
-      r.paddingRight = ph;
-      delete r.paddingHorizontal;
-    }
-    const pv = r.paddingVertical;
-    if (pv !== void 0) {
-      r.paddingTop = pv;
-      r.paddingBottom = pv;
-      delete r.paddingVertical;
-    }
-    const mh = r.marginHorizontal;
-    if (mh !== void 0) {
-      r.marginLeft = mh;
-      r.marginRight = mh;
-      delete r.marginHorizontal;
-    }
-    const mv = r.marginVertical;
-    if (mv !== void 0) {
-      r.marginTop = mv;
-      r.marginBottom = mv;
-      delete r.marginVertical;
-    }
-  }
-  return result;
-}
-function clearCache() {
-  _injectedRules.clear();
-  _ruleIndexByKey.clear();
-  if (_styleEl) {
-    _styleEl.remove();
-    _styleEl = null;
-  }
-  if (_globalStyleEl) {
-    _globalStyleEl.remove();
-    _globalStyleEl = null;
-  }
-}
-
-// src/core/config.ts
-function deepMerge(base, override) {
-  const result = { ...base };
-  for (const key of Object.keys(override)) {
-    const baseVal = base[key];
-    const overVal = override[key];
-    if (baseVal !== null && typeof baseVal === "object" && !Array.isArray(baseVal) && overVal !== null && typeof overVal === "object" && !Array.isArray(overVal)) {
-      result[key] = deepMerge(
-        baseVal,
-        overVal
-      );
-    } else if (overVal !== void 0) {
-      result[key] = overVal;
-    }
-  }
-  return result;
-}
-var CONFIG_KEY = "__kbach_config_store__";
-function getConfigStore() {
-  const g = globalThis;
-  if (!g[CONFIG_KEY]) {
-    g[CONFIG_KEY] = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
-  }
-  return g[CONFIG_KEY];
-}
-function getConfig() {
-  const store = getConfigStore();
-  if (store.resolved) return store.resolved;
-  store.resolved = buildConfig({});
-  return store.resolved;
-}
-function resolveOneRef(ref, colors) {
-  const lastDash = ref.lastIndexOf("-");
-  if (lastDash <= 0) return null;
-  const name = ref.slice(0, lastDash);
-  const shade = ref.slice(lastDash + 1);
-  if (!/^\d+$/.test(shade)) return null;
-  const entry = colors[name];
-  if (!entry || typeof entry !== "object") return null;
-  return entry[shade] ?? null;
-}
-function resolveColorRefs(colors) {
-  const MAX_DEPTH = 5;
-  function resolveChain(raw) {
-    let current = raw;
-    for (let i = 0; i < MAX_DEPTH; i++) {
-      const next = resolveOneRef(current, colors);
-      if (!next || next === current) break;
-      current = next;
-    }
-    return current;
-  }
-  const out = {};
-  for (const [key, val] of Object.entries(colors)) {
-    if (typeof val === "string") {
-      out[key] = resolveChain(val);
-    } else {
-      const shades = {};
-      for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveChain(hex);
-      }
-      out[key] = shades;
-    }
-  }
-  return out;
-}
-function buildConfig(userConfig) {
-  let theme = { ...defaultTheme };
-  if (userConfig.theme) {
-    theme = { ...theme, ...userConfig.theme };
-  }
-  if (userConfig.extend) {
-    const extendConfig = userConfig.extend;
-    const { theme: nestedTheme, ...directKeys } = extendConfig;
-    const extSources = [];
-    if (nestedTheme) extSources.push(nestedTheme);
-    if (Object.keys(directKeys).length) extSources.push(directKeys);
-    for (const ext of extSources) {
-      for (const [key, value] of Object.entries(ext)) {
-        if (typeof value !== "object" || value === null || Array.isArray(value)) {
-          if (process.env.NODE_ENV !== "production") {
-            kbachWarn(`extend.${key} should be an object, got ${typeof value} \u2014 skipped`);
-          }
-          continue;
-        }
-        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
-          theme[key] = deepMerge(
-            theme[key] ?? {},
-            value
-          );
-        }
-      }
-    }
-  }
-  theme = { ...theme, colors: resolveColorRefs(theme.colors) };
-  const resolved = {
-    darkMode: userConfig.darkMode ?? "attribute",
-    theme,
-    plugins: userConfig.plugins ?? []
-  };
-  if (userConfig.plugins !== void 0) {
-    clearPluginUtilities();
-    clearPluginModifiers();
-  }
-  const _store = getConfigStore();
-  for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
-  const pluginAPI = makePluginAPI(resolved.theme);
-  for (const plugin of resolved.plugins) {
-    plugin(pluginAPI);
-  }
-  const rawSans = theme.fontFamily?.sans;
-  const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
-  setDefaultFontFamily(sansFontValue && sansFontValue !== "System" ? sansFontValue : void 0);
-  injectGlobalStyles(resolved.theme);
-  return resolved;
-}
-function _selectorToModifierDef(selector) {
-  const s = selector.trim();
-  if (s.startsWith("@media ")) {
-    return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
-  }
-  if (s.startsWith("::") || s.startsWith(":") && !s.includes(" ") && !s.includes("&") && !s.includes("(")) {
-    return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
-  }
-  return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
-}
-function makePluginAPI(theme) {
-  const standalone = getPluginStandaloneMap();
-  return {
-    addUtility(name, styles) {
-      standalone[name] = styles;
-    },
-    addVariant(name, selectorOrDef) {
-      const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
-      if (selector !== null && selector !== name) customVariants[name] = selector;
-      registerModifier(name, def);
-    },
-    theme(path, defaultValue) {
-      const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
-      let current = theme;
-      for (const part of parts) {
-        if (current === null || typeof current !== "object") return defaultValue;
-        current = current[part];
-      }
-      return current ?? defaultValue;
-    },
-    e(className) {
-      return className.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-    }
-  };
-}
-function onConfigChange(listener) {
-  const store = getConfigStore();
-  store.listeners.add(listener);
-  return () => store.listeners.delete(listener);
-}
-function updateConfig(userConfig) {
-  const store = getConfigStore();
-  store.resolved = buildConfig(userConfig);
-  store._src = userConfig;
-  clearCache();
-  for (const listener of store.listeners) {
-    listener(store.resolved);
-  }
-}
-function initConfig(userConfig) {
-  if (getConfigStore()._src === userConfig) return;
-  updateConfig(userConfig);
-}
-var customVariants = new Proxy(
-  {},
-  {
-    get(_t, p) {
-      return typeof p === "string" ? getConfigStore().customVariants[p] : void 0;
-    },
-    set(_t, p, v) {
-      if (typeof p === "string") getConfigStore().customVariants[p] = v;
-      return true;
-    },
-    ownKeys() {
-      return Object.keys(getConfigStore().customVariants);
-    },
-    getOwnPropertyDescriptor(_t, p) {
-      if (typeof p !== "string") return void 0;
-      const v = getConfigStore().customVariants[p];
-      return v !== void 0 ? { value: v, writable: true, enumerable: true, configurable: true } : void 0;
-    }
-  }
-);
-
-// src/core/darkModeStore.ts
-var KEY = "__kbach_dark_store__";
-function getStore2() {
-  const g = globalThis;
-  if (!g[KEY]) {
-    g[KEY] = { isDark: false, subscribers: /* @__PURE__ */ new Set() };
-  }
-  return g[KEY];
-}
-function syncGlobalDarkMode(isDark) {
-  getStore2().isDark = isDark;
-}
-function setGlobalDarkMode(isDark) {
-  const store = getStore2();
-  if (store.isDark === isDark) return;
-  store.isDark = isDark;
-  for (const sub of store.subscribers) sub();
-}
-function getGlobalDarkMode() {
-  return getStore2().isDark;
-}
-function subscribeGlobalDarkMode(callback) {
-  const store = getStore2();
-  store.subscribers.add(callback);
-  return () => store.subscribers.delete(callback);
-}
-
-// src/useColors.ts
+var import_core = require("./core");
 function applyOpacity(color, opacity) {
   const a = Math.max(0, Math.min(1, opacity / 100));
   if (color.startsWith("#")) {
-    const rgb = parseHexRgb(color);
+    const rgb = (0, import_core.parseHexRgb)(color);
     if (!rgb) return color;
     const [r, g, b] = rgb;
     return `rgba(${r},${g},${b},${a})`;
@@ -3431,26 +143,44 @@ function useColors() {
   return (0, import_react2.useMemo)(() => wrapColors(config.theme.colors), [config.theme.colors]);
 }
 
+// src/useSpacing.ts
+var import_react3 = require("react");
+function wrapSpacing(rawSpacing) {
+  return rawSpacing;
+}
+function useSpacing() {
+  const { config } = useTheme();
+  return (0, import_react3.useMemo)(() => wrapSpacing(config.theme.spacing), [config.theme.spacing]);
+}
+
 // src/ThemeProvider.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/useSyncExternalStoreShim.ts
-var import_react3 = __toESM(require("react"));
-var useSyncExternalStore = import_react3.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, _getServerSnapshot) {
-  const [, forceUpdate] = import_react3.default.useReducer((n) => n + 1, 0);
-  import_react3.default.useEffect(() => subscribe(forceUpdate), [subscribe]);
-  return getSnapshot();
+var import_react4 = __toESM(require("react"));
+var useSyncExternalStore = import_react4.default.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, getServerSnapshot) {
+  const isServer = typeof window === "undefined";
+  const [, forceUpdate] = import_react4.default.useReducer((n) => n + 1, 0);
+  const value = isServer && getServerSnapshot ? getServerSnapshot() : getSnapshot();
+  import_react4.default.useEffect(() => {
+    if (getSnapshot() !== value) forceUpdate();
+    return subscribe(forceUpdate);
+  }, [subscribe]);
+  return value;
 };
 
 // src/ThemeProvider.tsx
+var import_core2 = require("./core");
 var import_jsx_runtime = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect = isWeb || isNative ? import_react4.useLayoutEffect : import_react4.useEffect;
+var useIsomorphicLayoutEffect = import_core2.isWeb || import_core2.isNative ? import_react5.useLayoutEffect : import_react5.useEffect;
 var STORAGE_KEY = "kbach-theme";
 var _mountedProviderCount = 0;
 var _warnedMultipleProviders = false;
+var _mountedConfigOverrideCount = 0;
+var _warnedConfigOverride = false;
 function loadPersistedMode() {
   try {
-    if (isWeb) return localStorage.getItem(STORAGE_KEY);
+    if (import_core2.isWeb) return localStorage.getItem(STORAGE_KEY);
     return null;
   } catch {
     return null;
@@ -3458,12 +188,12 @@ function loadPersistedMode() {
 }
 function persistMode(mode) {
   try {
-    if (isWeb) localStorage.setItem(STORAGE_KEY, mode);
+    if (import_core2.isWeb) localStorage.setItem(STORAGE_KEY, mode);
   } catch {
   }
 }
 function subscribeSystemScheme(callback) {
-  if (!isWeb || typeof window === "undefined") return () => {
+  if (!import_core2.isWeb || typeof window === "undefined") return () => {
   };
   const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
   if (!mq) return () => {
@@ -3472,14 +202,14 @@ function subscribeSystemScheme(callback) {
   return () => mq.removeEventListener("change", callback);
 }
 function getSystemScheme() {
-  if (!isWeb || typeof window === "undefined") return "light";
+  if (!import_core2.isWeb || typeof window === "undefined") return "light";
   return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
 }
 function getSystemSchemeServerSnapshot() {
   return "light";
 }
 function applyWebTheme(resolvedMode, strategy) {
-  if (!isWeb) return;
+  if (!import_core2.isWeb) return;
   const root = document.documentElement;
   if (strategy === "attribute") {
     root.setAttribute("data-theme", resolvedMode);
@@ -3496,45 +226,62 @@ function ThemeProvider({
   config: configOverride,
   disablePersistence = false
 }) {
-  const [resolvedConfig, setResolvedConfig] = (0, import_react4.useState)(
-    () => configOverride ? buildConfig(configOverride) : getConfig()
+  const [resolvedConfig, setResolvedConfig] = (0, import_react5.useState)(
+    () => configOverride ? (0, import_core2.buildConfig)(configOverride) : (0, import_core2.getConfig)()
   );
-  (0, import_react4.useEffect)(() => {
+  const _prevConfigOverrideRef = (0, import_react5.useRef)(void 0);
+  if (configOverride && _prevConfigOverrideRef.current !== configOverride) {
+    _prevConfigOverrideRef.current = configOverride;
+    (0, import_core2.updateConfig)(configOverride);
+    const fresh = (0, import_core2.getConfig)();
+    if (fresh !== resolvedConfig) setResolvedConfig(fresh);
+  }
+  (0, import_react5.useEffect)(() => {
     _mountedProviderCount++;
-    if (process.env.NODE_ENV !== "production" && _mountedProviderCount > 1 && !_warnedMultipleProviders) {
-      _warnedMultipleProviders = true;
-      kbachWarn(
-        "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
-      );
+    if (configOverride) _mountedConfigOverrideCount++;
+    if (process.env.NODE_ENV !== "production") {
+      if (_mountedProviderCount > 1 && !_warnedMultipleProviders) {
+        _warnedMultipleProviders = true;
+        (0, import_core2.kbachWarn)(
+          "Multiple <ThemeProvider> instances are mounted at once. Dark mode and responsive width are shared through one global store, so whichever provider rendered most recently wins for every consumer \u2014 nested or per-section theming is not isolated between providers."
+        );
+      }
+      if (_mountedConfigOverrideCount > 1 && !_warnedConfigOverride) {
+        _warnedConfigOverride = true;
+        (0, import_core2.kbachWarn)(
+          "Multiple <ThemeProvider config={...}> overrides are mounted at once. The resolved config is shared through the same global store as dark mode/width (see the multiple-providers warning), so per-tree config overrides are not actually isolated between providers \u2014 plain className/kb elements with no hover:/dark:/sm: modifier resolve against whichever override last committed, not necessarily their nearest ancestor <ThemeProvider>."
+        );
+      }
     }
     return () => {
       _mountedProviderCount--;
+      if (configOverride) _mountedConfigOverrideCount--;
     };
   }, []);
-  const [webWidth, setWebWidth] = (0, import_react4.useState)(0);
-  const effectiveWidth = windowWidthProp ?? (isWeb ? webWidth : 0);
-  const numericScreens = (0, import_react4.useMemo)(() => {
+  const [webWidth, setWebWidth] = (0, import_react5.useState)(0);
+  const effectiveWidth = windowWidthProp ?? (import_core2.isWeb ? webWidth : 0);
+  const numericScreens = (0, import_react5.useMemo)(() => {
     const out = {};
     for (const [k, v] of Object.entries(resolvedConfig.theme.screens ?? {})) {
       out[k] = typeof v === "number" ? v : parseInt(String(v), 10);
     }
     return out;
   }, [resolvedConfig.theme.screens]);
-  const _prevWidthRef = (0, import_react4.useRef)(-1);
+  const _prevWidthRef = (0, import_react5.useRef)(-1);
   if (_prevWidthRef.current !== effectiveWidth) {
     _prevWidthRef.current = effectiveWidth;
-    syncGlobalWidth(effectiveWidth);
+    (0, import_core2.syncGlobalWidth)(effectiveWidth);
   }
-  const _prevScreensRef = (0, import_react4.useRef)(null);
+  const _prevScreensRef = (0, import_react5.useRef)(null);
   if (_prevScreensRef.current !== numericScreens) {
     _prevScreensRef.current = numericScreens;
-    syncGlobalScreens(numericScreens);
+    (0, import_core2.syncGlobalScreens)(numericScreens);
   }
-  (0, import_react4.useEffect)(() => {
-    setGlobalWidth(effectiveWidth);
+  (0, import_react5.useEffect)(() => {
+    (0, import_core2.setGlobalWidth)(effectiveWidth);
   }, [effectiveWidth]);
-  (0, import_react4.useEffect)(() => {
-    if (!isWeb || typeof window === "undefined") return;
+  (0, import_react5.useEffect)(() => {
+    if (!import_core2.isWeb || typeof window === "undefined") return;
     setWebWidth(window.innerWidth);
     let raf = 0;
     const update = () => {
@@ -3542,7 +289,7 @@ function ThemeProvider({
       raf = requestAnimationFrame(() => {
         const w = window.innerWidth;
         setWebWidth(w);
-        setGlobalWidth(w);
+        (0, import_core2.setGlobalWidth)(w);
       });
     };
     window.addEventListener("resize", update);
@@ -3556,15 +303,15 @@ function ThemeProvider({
     getSystemScheme,
     getSystemSchemeServerSnapshot
   );
-  const systemScheme = isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
-  const [mode, _setMode] = (0, import_react4.useState)(defaultMode);
-  (0, import_react4.useEffect)(() => {
+  const systemScheme = import_core2.isWeb ? webScheme : colorScheme === "dark" ? "dark" : "light";
+  const [mode, _setMode] = (0, import_react5.useState)(defaultMode);
+  (0, import_react5.useEffect)(() => {
     if (disablePersistence) return;
     const persisted = loadPersistedMode();
     if (persisted) _setMode(persisted);
   }, []);
-  (0, import_react4.useEffect)(() => {
-    if (disablePersistence || !isWeb || typeof window === "undefined") return;
+  (0, import_react5.useEffect)(() => {
+    if (disablePersistence || !import_core2.isWeb || typeof window === "undefined") return;
     const onStorage = (e) => {
       if (e.key !== STORAGE_KEY || e.newValue == null) return;
       if (e.newValue === "light" || e.newValue === "dark" || e.newValue === "system") {
@@ -3574,29 +321,24 @@ function ThemeProvider({
     window.addEventListener("storage", onStorage);
     return () => window.removeEventListener("storage", onStorage);
   }, [disablePersistence]);
-  const setMode = (0, import_react4.useCallback)((next) => {
+  const setMode = (0, import_react5.useCallback)((next) => {
     _setMode(next);
     if (!disablePersistence) persistMode(next);
   }, [disablePersistence]);
-  const toggle = (0, import_react4.useCallback)(() => {
+  const toggle = (0, import_react5.useCallback)(() => {
     setMode(mode === "dark" || mode === "system" && systemScheme === "dark" ? "light" : "dark");
   }, [mode, systemScheme, setMode]);
   const resolvedMode = mode === "system" ? systemScheme : mode;
   const isDark = resolvedMode === "dark";
-  syncGlobalDarkMode(isDark);
+  (0, import_core2.syncGlobalDarkMode)(isDark);
   useIsomorphicLayoutEffect(() => {
     applyWebTheme(resolvedMode, resolvedConfig.darkMode);
-    setGlobalDarkMode(isDark);
+    (0, import_core2.setGlobalDarkMode)(isDark);
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
-  (0, import_react4.useEffect)(() => {
-    if (!configOverride) return;
-    updateConfig(configOverride);
-    setResolvedConfig(getConfig());
-  }, [configOverride]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (configOverride) return;
     let mounted = true;
-    const unsub = onConfigChange((config) => {
+    const unsub = (0, import_core2.onConfigChange)((config) => {
       if (mounted) setResolvedConfig(config);
     });
     return () => {
@@ -3604,7 +346,7 @@ function ThemeProvider({
       unsub();
     };
   }, [configOverride]);
-  const contextValue = (0, import_react4.useMemo)(
+  const contextValue = (0, import_react5.useMemo)(
     () => ({ mode, resolvedMode, isDark, setMode, toggle, config: resolvedConfig }),
     [mode, resolvedMode, isDark, setMode, toggle, resolvedConfig]
   );
@@ -3612,36 +354,40 @@ function ThemeProvider({
 }
 
 // src/KbachReset.tsx
+var import_core3 = require("./core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function KbachReset() {
-  if (isNative) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: RESET_STYLE_ID, children: BASE_RESET });
+  if (import_core3.isNative) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: import_core3.RESET_STYLE_ID, children: import_core3.BASE_RESET });
 }
 
 // src/styled.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
+var import_core7 = require("./core");
 
 // src/useGlobalDarkMode.ts
+var import_core4 = require("./core");
 var NOOP_SUB = (_) => () => {
 };
 var FALSE_SNAP = () => false;
 function useGlobalDarkMode() {
   return useSyncExternalStore(
-    subscribeGlobalDarkMode,
-    getGlobalDarkMode,
+    import_core4.subscribeGlobalDarkMode,
+    import_core4.getGlobalDarkMode,
     () => false
     // SSR: default light
   );
 }
 function useConditionalGlobalDarkMode(active) {
   return useSyncExternalStore(
-    active ? subscribeGlobalDarkMode : NOOP_SUB,
-    active ? getGlobalDarkMode : FALSE_SNAP,
+    active ? import_core4.subscribeGlobalDarkMode : NOOP_SUB,
+    active ? import_core4.getGlobalDarkMode : FALSE_SNAP,
     FALSE_SNAP
   );
 }
 
 // src/useGlobalWidth.ts
+var import_core5 = require("./core");
 var NOOP_SUB2 = (_) => () => {
 };
 var ZERO_SNAP = () => 0;
@@ -3676,22 +422,23 @@ function getWebWidth() {
 }
 function useGlobalWidth() {
   return useSyncExternalStore(
-    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
-    isWeb ? getWebWidth : getGlobalWidth,
+    import_core5.isWeb ? subscribeWebWidth : import_core5.subscribeGlobalWidth,
+    import_core5.isWeb ? getWebWidth : import_core5.getGlobalWidth,
     ZERO_SNAP
   );
 }
 function useConditionalWidth(active) {
   return useSyncExternalStore(
-    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB2,
-    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
+    active ? import_core5.isWeb ? subscribeWebWidth : import_core5.subscribeGlobalWidth : NOOP_SUB2,
+    active ? import_core5.isWeb ? getWebWidth : import_core5.getGlobalWidth : ZERO_SNAP,
     ZERO_SNAP
   );
 }
 
 // src/shared-utils.ts
+var import_core6 = require("./core");
 function hasResponsiveBuckets(resolved) {
-  const responsiveMods = getResponsiveModifiers();
+  const responsiveMods = (0, import_core6.getResponsiveModifiers)();
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
@@ -3701,7 +448,7 @@ function hasResponsiveBuckets(resolved) {
   return false;
 }
 function hasInteractiveBuckets(resolved) {
-  const interactiveMods = getInteractiveModifiers();
+  const interactiveMods = (0, import_core6.getInteractiveModifiers)();
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
@@ -4024,7 +771,7 @@ function transformToWebProps(originalName, tag, props) {
 
 // src/styled.tsx
 function styled(Component, baseClasses = "") {
-  const Styled = (0, import_react5.forwardRef)(
+  const Styled = (0, import_react6.forwardRef)(
     (props, ref) => {
       const {
         kb: extraClasses,
@@ -4044,49 +791,49 @@ function styled(Component, baseClasses = "") {
       const disabled = !!props.disabled;
       const checked = !!props.checked;
       const { config } = useTheme();
-      const isWebPlatform = getEffectiveIsWeb();
+      const isWebPlatform = (0, import_core7.getEffectiveIsWeb)();
       const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
-      const [pressed, setPressed] = (0, import_react5.useState)(false);
-      const [hovered, setHovered] = (0, import_react5.useState)(false);
-      const [focused, setFocused] = (0, import_react5.useState)(false);
-      const handlePressIn = (0, import_react5.useCallback)(chain(onPressIn, () => {
+      const [pressed, setPressed] = (0, import_react6.useState)(false);
+      const [hovered, setHovered] = (0, import_react6.useState)(false);
+      const [focused, setFocused] = (0, import_react6.useState)(false);
+      const handlePressIn = (0, import_react6.useCallback)(chain(onPressIn, () => {
         if (!isWebPlatform) setPressed(true);
       }), [onPressIn, isWebPlatform]);
-      const handlePressOut = (0, import_react5.useCallback)(chain(onPressOut, () => {
+      const handlePressOut = (0, import_react6.useCallback)(chain(onPressOut, () => {
         if (!isWebPlatform) setPressed(false);
       }), [onPressOut, isWebPlatform]);
-      const handlePointerDown = (0, import_react5.useCallback)(chain(onPointerDown, () => {
+      const handlePointerDown = (0, import_react6.useCallback)(chain(onPointerDown, () => {
         if (!isWebPlatform) setPressed(true);
       }), [onPointerDown, isWebPlatform]);
-      const handlePointerUp = (0, import_react5.useCallback)(chain(onPointerUp, () => {
+      const handlePointerUp = (0, import_react6.useCallback)(chain(onPointerUp, () => {
         if (!isWebPlatform) setPressed(false);
       }), [onPointerUp, isWebPlatform]);
-      const handlePointerLeave = (0, import_react5.useCallback)(chain(onPointerLeave, () => {
+      const handlePointerLeave = (0, import_react6.useCallback)(chain(onPointerLeave, () => {
         if (!isWebPlatform) setPressed(false);
       }), [onPointerLeave, isWebPlatform]);
-      const handlePointerCancel = (0, import_react5.useCallback)(chain(onPointerCancel, () => {
+      const handlePointerCancel = (0, import_react6.useCallback)(chain(onPointerCancel, () => {
         if (!isWebPlatform) setPressed(false);
       }), [onPointerCancel, isWebPlatform]);
-      const handleMouseEnter = (0, import_react5.useCallback)(chain(onMouseEnter, () => {
+      const handleMouseEnter = (0, import_react6.useCallback)(chain(onMouseEnter, () => {
         if (!isWebPlatform) setHovered(true);
       }), [onMouseEnter, isWebPlatform]);
-      const handleMouseLeave = (0, import_react5.useCallback)(chain(onMouseLeave, () => {
+      const handleMouseLeave = (0, import_react6.useCallback)(chain(onMouseLeave, () => {
         if (!isWebPlatform) setHovered(false);
       }), [onMouseLeave, isWebPlatform]);
-      const handleFocus = (0, import_react5.useCallback)(chain(onFocus, () => {
+      const handleFocus = (0, import_react6.useCallback)(chain(onFocus, () => {
         if (!isWebPlatform) setFocused(true);
       }), [onFocus, isWebPlatform]);
-      const handleBlur = (0, import_react5.useCallback)(chain(onBlur, () => {
+      const handleBlur = (0, import_react6.useCallback)(chain(onBlur, () => {
         if (!isWebPlatform) setFocused(false);
       }), [onBlur, isWebPlatform]);
       const combined = extraClasses ? `${baseClasses} ${extraClasses}` : baseClasses;
-      const resolved = (0, import_react5.useMemo)(() => resolve(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
-      const hasInteractive = (0, import_react5.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
+      const resolved = (0, import_react6.useMemo)(() => (0, import_core7.resolve)(combined, config.theme, config.darkMode), [combined, config.theme, config.darkMode]);
+      const hasInteractive = (0, import_react6.useMemo)(() => hasInteractiveBuckets(resolved), [resolved]);
       const needsWidth = hasResponsiveBuckets(resolved);
       const width = useConditionalWidth(needsWidth && !isWebPlatform);
-      const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-      const computedStyle = (0, import_react5.useMemo)(
-        () => isWebPlatform ? {} : flatten(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
+      const breakpoints = needsWidth ? (0, import_core7.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+      const computedStyle = (0, import_react6.useMemo)(
+        () => isWebPlatform ? {} : (0, import_core7.flatten)(resolved, isDark, { pressed, hover: hovered, focus: focused, disabled, checked }, breakpoints),
         [resolved, isDark, pressed, hovered, focused, disabled, checked, width]
         // eslint-disable-line react-hooks/exhaustive-deps
       );
@@ -4096,12 +843,12 @@ function styled(Component, baseClasses = "") {
       const effectiveComponent = webTag ?? Component;
       const componentName2 = Component.displayName ?? Component.name ?? "";
       const effectiveRest = webTag && componentName2 ? transformToWebProps(componentName2, webTag, rest) : rest;
-      return import_react5.default.createElement(effectiveComponent, {
+      return import_react6.default.createElement(effectiveComponent, {
         ref,
         ...effectiveRest,
         style: finalStyle,
         // className lets injected CSS rules (group-hover:, before:, print:, etc.) match the element.
-        ...isWebPlatform && combined ? { className: normalizeClassString(combined) } : {},
+        ...isWebPlatform && combined ? { className: (0, import_core7.normalizeClassString)(combined) } : {},
         // Only attach state-tracking handlers when interactive modifiers are present.
         // Always forward user-provided handlers to avoid silently swallowing them.
         // Gated on isNative, not isWeb: isWeb is false during SSR too (no `window` there),
@@ -4116,7 +863,7 @@ function styled(Component, baseClasses = "") {
         // reliable signal either way. Forwarding them made React DOM warn "Unknown event
         // handler property" the moment any such component got an interactive modifier
         // (hover:, active:, …), which is the common case, not the exception.
-        ...!isNative ? hasInteractive ? {
+        ...!import_core7.isNative ? hasInteractive ? {
           onPointerDown: handlePointerDown,
           onPointerUp: handlePointerUp,
           onPointerLeave: handlePointerLeave,
@@ -4140,58 +887,76 @@ function styled(Component, baseClasses = "") {
 }
 
 // src/useStyles.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
+var import_core8 = require("./core");
 function useStyles(classString, state = {}) {
   const { isDark, config } = useTheme();
   const width = useGlobalWidth();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react6.useMemo)(() => {
-    const resolved = resolve(normalised, config.theme, config.darkMode);
-    const breakpoints = getActiveBreakpoints(width);
-    return flatten(resolved, isDark, state, breakpoints);
+  return (0, import_react7.useMemo)(() => {
+    const resolved = (0, import_core8.resolve)(normalised, config.theme, config.darkMode);
+    const breakpoints = (0, import_core8.getActiveBreakpoints)(width);
+    return (0, import_core8.flatten)(resolved, isDark, state, breakpoints);
   }, [normalised, isDark, config.theme, config.darkMode, width, state.hover, state.focus, state.pressed, state.active, state.disabled, state.checked, state.visited, state.placeholder]);
 }
 function useResolvedStyle(classString) {
   const { config } = useTheme();
   const normalised = Array.isArray(classString) ? classString.join(" ") : classString;
-  return (0, import_react6.useMemo)(
-    () => resolve(normalised, config.theme, config.darkMode),
+  return (0, import_react7.useMemo)(
+    () => (0, import_core8.resolve)(normalised, config.theme, config.darkMode),
     [normalised, config]
   );
 }
 
 // src/useBreakpoint.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
+var import_core9 = require("./core");
+function toNumericScreens(screens) {
+  const out = {};
+  for (const [name, v] of Object.entries(screens)) {
+    const n = typeof v === "number" ? v : parseInt(String(v), 10);
+    if (!Number.isNaN(n)) out[name] = n;
+  }
+  return out;
+}
 function useBreakpoint() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  const sorted = (0, import_react7.useMemo)(
-    () => Object.entries(screens).map(([name, v]) => [name, typeof v === "number" ? v : parseInt(String(v), 10)]).filter(([, minW]) => !Number.isNaN(minW)).sort(([, a], [, b]) => b - a),
-    [screens]
-  );
-  for (const [name, minW] of sorted) {
-    if (width >= minW) return name;
-  }
-  return "xs";
+  const numericScreens = (0, import_react8.useMemo)(() => toNumericScreens(screens), [screens]);
+  return (0, import_react8.useMemo)(() => {
+    const active = (0, import_core9.getActiveBreakpoints)(width, numericScreens);
+    let best = null;
+    let bestMinW = -Infinity;
+    for (const name of active) {
+      const minW = numericScreens[name];
+      if (minW > bestMinW) {
+        bestMinW = minW;
+        best = name;
+      }
+    }
+    return best ?? "xs";
+  }, [numericScreens, width]);
 }
 function useResponsive() {
   const { config } = useTheme();
   const width = useGlobalWidth();
   const screens = config.theme.screens;
-  return (0, import_react7.useMemo)(() => {
+  const numericScreens = (0, import_react8.useMemo)(() => toNumericScreens(screens), [screens]);
+  return (0, import_react8.useMemo)(() => {
+    const active = (0, import_core9.getActiveBreakpoints)(width, numericScreens);
     const result = {};
-    for (const [name, v] of Object.entries(screens)) {
-      const minW = typeof v === "number" ? v : parseInt(String(v), 10);
-      if (!Number.isNaN(minW)) result[name] = width >= minW;
+    for (const name of Object.keys(numericScreens)) {
+      result[name] = active.has(name);
     }
     return result;
-  }, [screens, width]);
+  }, [numericScreens, width]);
 }
 
 // src/InteractiveWrapper.tsx
-var import_react8 = __toESM(require("react"));
-var InteractiveWrapper = (0, import_react8.forwardRef)(
+var import_react9 = __toESM(require("react"));
+var import_core10 = require("./core");
+var InteractiveWrapper = (0, import_react9.forwardRef)(
   function InteractiveWrapper2({
     Component,
     resolvedStyle,
@@ -4209,54 +974,55 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
     onBlur,
     ...rest
   }, ref) {
-    const isWebPlatform = getEffectiveIsWeb();
+    const isWebPlatform = (0, import_core10.getEffectiveIsWeb)();
     const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth && !isWebPlatform);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
-    const [pressed, setPressed] = (0, import_react8.useState)(false);
-    const [hovered, setHovered] = (0, import_react8.useState)(false);
-    const [focused, setFocused] = (0, import_react8.useState)(false);
-    const handlePressIn = (0, import_react8.useCallback)(chain(onPressIn, () => {
+    const breakpoints = needsWidth ? (0, import_core10.getActiveBreakpoints)(width) : EMPTY_BREAKPOINTS;
+    const [pressed, setPressed] = (0, import_react9.useState)(false);
+    const [hovered, setHovered] = (0, import_react9.useState)(false);
+    const [focused, setFocused] = (0, import_react9.useState)(false);
+    const handlePressIn = (0, import_react9.useCallback)(chain(onPressIn, () => {
       if (!isWebPlatform) setPressed(true);
     }), [onPressIn, isWebPlatform]);
-    const handlePressOut = (0, import_react8.useCallback)(chain(onPressOut, () => {
+    const handlePressOut = (0, import_react9.useCallback)(chain(onPressOut, () => {
       if (!isWebPlatform) setPressed(false);
     }), [onPressOut, isWebPlatform]);
-    const handlePointerDown = (0, import_react8.useCallback)(chain(onPointerDown, () => {
+    const handlePointerDown = (0, import_react9.useCallback)(chain(onPointerDown, () => {
       if (!isWebPlatform) setPressed(true);
     }), [onPointerDown, isWebPlatform]);
-    const handlePointerUp = (0, import_react8.useCallback)(chain(onPointerUp, () => {
+    const handlePointerUp = (0, import_react9.useCallback)(chain(onPointerUp, () => {
       if (!isWebPlatform) setPressed(false);
     }), [onPointerUp, isWebPlatform]);
-    const handlePointerLeave = (0, import_react8.useCallback)(chain(onPointerLeave, () => {
+    const handlePointerLeave = (0, import_react9.useCallback)(chain(onPointerLeave, () => {
       if (!isWebPlatform) setPressed(false);
     }), [onPointerLeave, isWebPlatform]);
-    const handlePointerCancel = (0, import_react8.useCallback)(chain(onPointerCancel, () => {
+    const handlePointerCancel = (0, import_react9.useCallback)(chain(onPointerCancel, () => {
       if (!isWebPlatform) setPressed(false);
     }), [onPointerCancel, isWebPlatform]);
-    const handleMouseEnter = (0, import_react8.useCallback)(chain(onMouseEnter, () => {
+    const handleMouseEnter = (0, import_react9.useCallback)(chain(onMouseEnter, () => {
       if (!isWebPlatform) setHovered(true);
     }), [onMouseEnter, isWebPlatform]);
-    const handleMouseLeave = (0, import_react8.useCallback)(chain(onMouseLeave, () => {
+    const handleMouseLeave = (0, import_react9.useCallback)(chain(onMouseLeave, () => {
       if (!isWebPlatform) setHovered(false);
     }), [onMouseLeave, isWebPlatform]);
-    const handleFocus = (0, import_react8.useCallback)(chain(onFocus, () => {
+    const handleFocus = (0, import_react9.useCallback)(chain(onFocus, () => {
       if (!isWebPlatform) setFocused(true);
     }), [onFocus, isWebPlatform]);
-    const handleBlur = (0, import_react8.useCallback)(chain(onBlur, () => {
+    const handleBlur = (0, import_react9.useCallback)(chain(onBlur, () => {
       if (!isWebPlatform) setFocused(false);
     }), [onBlur, isWebPlatform]);
     const { children, disabled, checked, ...restForComponent } = rest;
-    const computedStyle = (0, import_react8.useMemo)(
+    const isNonStringComponent = typeof Component !== "string";
+    const computedStyle = (0, import_react9.useMemo)(
       () => {
         if (isWebPlatform) return {};
-        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
+        const s = (0, import_core10.flatten)(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
         stripInternalMarkers(s);
-        if (typeof Component !== "string") stripWebOnlyProps(s);
+        if (isNonStringComponent) stripWebOnlyProps(s);
         return s;
       },
-      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked]
+      [resolvedStyle, isDark, pressed, hovered, focused, width, disabled, checked, isNonStringComponent]
     );
     const skipComputedInline = isWebPlatform;
     const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
@@ -4266,7 +1032,7 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       ...disabled !== void 0 ? { disabled } : {},
       ...checked !== void 0 ? { checked } : {},
       style: finalStyle,
-      ...!isNative && className ? { className } : {},
+      ...!import_core10.isNative && className ? { className } : {},
       // On web, onPointerDown/Up drive the wrapper's own pressed state (covers mouse + touch) —
       // onPressIn/onPressOut are RN-only prop names and are never forwarded here, even when
       // Component isn't a literal HTML tag string. A non-string Component on web is just as
@@ -4280,7 +1046,7 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       // in jsx-runtime.tsx swaps it for a plain host tag — so keeping them pre-hydration would
       // only have traded one prop-mismatch warning for another.) Genuinely native code paths
       // still get them via the isNative branch below.
-      ...!isNative ? {
+      ...!import_core10.isNative ? {
         onPointerDown: handlePointerDown,
         onPointerUp: handlePointerUp,
         onPointerLeave: handlePointerLeave,
@@ -4291,23 +1057,27 @@ var InteractiveWrapper = (0, import_react8.forwardRef)(
       onFocus: handleFocus,
       onBlur: handleBlur
     };
-    return Array.isArray(children) ? import_react8.default.createElement(Component, componentProps, ...children) : import_react8.default.createElement(Component, componentProps, children);
+    return Array.isArray(children) ? import_react9.default.createElement(Component, componentProps, ...children) : import_react9.default.createElement(Component, componentProps, children);
   }
 );
 InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 
 // src/kb.ts
+var import_core11 = require("./core");
 function kb(classString, isDark = false) {
-  const config = getConfig();
-  const resolved = resolve(classString, config.theme, config.darkMode);
-  if (getEffectiveIsWeb()) {
+  const config = (0, import_core11.getConfig)();
+  const resolved = (0, import_core11.resolve)(classString, config.theme, config.darkMode);
+  if ((0, import_core11.getEffectiveIsWeb)()) {
     return classString;
   }
-  return flatten(resolved, isDark);
+  return (0, import_core11.flatten)(resolved, isDark);
 }
 function cx(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+
+// src/index.ts
+var import_core12 = require("./core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InteractiveWrapper,
@@ -4339,7 +1109,9 @@ function cx(...classes) {
   useIsDark,
   useResolvedStyle,
   useResponsive,
+  useSpacing,
   useStyles,
   useTheme,
-  wrapColors
+  wrapColors,
+  wrapSpacing
 });