@kbach/ui 0.1.0-beta.0

package/dist/chunk-BPCFICND.mjs

@@ -0,0 +1,4187 @@
+'use client';
+
+// src/core/platform.ts
+var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined" || typeof globalThis.nativeFabricUIManager !== "undefined" || typeof globalThis.__turboModuleProxy !== "undefined" || typeof globalThis.RN$Bridgeless !== "undefined" || typeof globalThis.nativePerformanceNow !== "undefined");
+var _resolveTargetOverride = null;
+function setResolveTarget(target) {
+  _resolveTargetOverride = target;
+}
+function getEffectiveIsWeb() {
+  if (_resolveTargetOverride) return _resolveTargetOverride === "web";
+  return isWeb || !isNative;
+}
+function toNativeValue(raw) {
+  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
+  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
+  return raw;
+}
+function escapeCSSSelector(cls) {
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+}
+
+// src/core/devWarn.ts
+function kbachWarn(message) {
+  console.warn(
+    "%c[kbach]%c " + message,
+    "color:#8b5cf6;font-weight:700",
+    "color:inherit;font-weight:400"
+  );
+}
+
+// src/core/cache.ts
+var LRUCache = class {
+  constructor(capacity = 1e4, onEvict) {
+    this.capacity = capacity;
+    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
+    this.cache = /* @__PURE__ */ new Map();
+    this.onEvict = onEvict;
+  }
+  get(key) {
+    if (!this.cache.has(key)) return void 0;
+    const value = this.cache.get(key);
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return value;
+  }
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.capacity) {
+      const oldestKey = this.cache.keys().next().value;
+      const oldestValue = this.cache.get(oldestKey);
+      this.cache.delete(oldestKey);
+      this.onEvict?.(oldestKey, oldestValue);
+    }
+    this.cache.set(key, value);
+    return this;
+  }
+  has(key) {
+    return this.cache.has(key);
+  }
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  get size() {
+    return this.cache.size;
+  }
+};
+
+// src/core/registry.ts
+var BUILTIN_MODIFIERS = {
+  // ── Mode ─────────────────────────────────────────────────────────────────
+  dark: { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { order: 60, darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { order: 60, darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
+  hover: { order: 10, pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { order: 10, pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { order: 20, pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { order: 20, pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { order: 30, pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { order: 30, pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { order: 40, pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { order: 40, pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { order: 35, pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { order: 35, pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { order: 5, pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { order: 5, pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { order: 0, pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
+  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
+  first: { order: 0, pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { order: 0, pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { order: 0, pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { order: 0, pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { order: 0, pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { order: 15, pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { order: 25, pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
+  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
+  before: { order: 0, pseudo: "::before", jsBehavior: "css-only" },
+  after: { order: 0, pseudo: "::after", jsBehavior: "css-only" },
+  selection: { order: 0, pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { order: 0, pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { order: 0, pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { order: 0, pseudo: "::marker", jsBehavior: "css-only" },
+  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
+  "group-hover": { order: 10, ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { order: 20, ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { order: 10, ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { order: 20, ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
+  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
+  sm: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { order: 50, isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
+  // ── Print media (CSS-only) ─────────────────────────────────────────────────
+  print: { order: 70, mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
+  landscape: { order: 70, mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { order: 70, mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { order: 70, mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { order: 70, mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { order: 70, mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { order: 70, mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
+  // ── Directionality (CSS-only) ──────────────────────────────────────────────
+  rtl: { order: 80, dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { order: 80, dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
+};
+var _pluginModifiers = {};
+var _allNames = null;
+var _interactiveNames = null;
+var _modeNames = null;
+var _responsiveNames = null;
+function _invalidate() {
+  _allNames = null;
+  _interactiveNames = null;
+  _modeNames = null;
+  _responsiveNames = null;
+}
+function registerModifier(name, def) {
+  if (process.env.NODE_ENV !== "production" && name in BUILTIN_MODIFIERS) {
+    kbachWarn(`"${name}" is built-in \u2014 pick another modifier name`);
+    return;
+  }
+  _pluginModifiers[name] = def;
+  _invalidate();
+}
+function clearPluginModifiers() {
+  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
+  _invalidate();
+}
+var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
+var _namedModifierCache = new LRUCache(1e4);
+function getNamedGroupPeerModifier(name) {
+  const cached = _namedModifierCache.get(name);
+  if (cached) return cached;
+  const m = NAMED_GROUP_PEER_RE.exec(name);
+  if (!m) return void 0;
+  const [, kind, trigger, groupName] = m;
+  const escapedName = escapeCSSSelector(groupName);
+  const pseudo = trigger === "hover" ? ":hover" : ":focus";
+  const combinator = kind === "group" ? " " : " ~ ";
+  const def = {
+    // Matches the plain group-hover/group-focus/peer-hover/peer-focus order below.
+    order: trigger === "hover" ? 10 : 20,
+    ancestorSelector: `.${kind}\\/${escapedName}${pseudo}${combinator}`,
+    jsBehavior: "css-only",
+    forcesImportant: true
+  };
+  _namedModifierCache.set(name, def);
+  return def;
+}
+function getModifier(name) {
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name] ?? getNamedGroupPeerModifier(name);
+}
+function isKnownModifier(name) {
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers || NAMED_GROUP_PEER_RE.test(name);
+}
+function _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 getModeModifiers() {
+  if (!_modeNames) {
+    _modeNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "mode").map(([k]) => k));
+  }
+  return _modeNames;
+}
+function getResponsiveModifiers() {
+  if (!_responsiveNames) {
+    _responsiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "responsive").map(([k]) => k));
+  }
+  return _responsiveNames;
+}
+function getModifierOrder(bucketKey) {
+  if (bucketKey === "base") return -1;
+  let max = 0;
+  for (const mod of bucketKey.split(":")) {
+    const order = getModifier(mod)?.order ?? 0;
+    if (order > max) max = order;
+  }
+  return max;
+}
+function matchModifier(name, isDark, state, breakpoints) {
+  return getModifier(name)?.jsMatch?.(isDark, state, breakpoints) ?? false;
+}
+
+// src/core/colorValue.ts
+function isModeAwareColor(v) {
+  return typeof v === "object" && v !== null && "light" in v && "dark" in v;
+}
+function splitColorShadeRef(ref) {
+  const lastDash = ref.lastIndexOf("-");
+  if (lastDash <= 0) return null;
+  return { name: ref.slice(0, lastDash), shade: ref.slice(lastDash + 1) };
+}
+
+// src/core/resolvers/color.ts
+function pickModeAwareFallback(v) {
+  return isModeAwareColor(v) ? v.light : v;
+}
+function resolveColor(value, colors, isArbitrary) {
+  if (isArbitrary) return value;
+  const slashIdx = value.indexOf("/");
+  const colorPart = slashIdx > 0 ? value.slice(0, slashIdx) : value;
+  const opacityPart = slashIdx > 0 ? value.slice(slashIdx + 1) : null;
+  let hex = null;
+  if (colorPart.startsWith("[") && colorPart.endsWith("]")) {
+    hex = colorPart.slice(1, -1);
+  } else if (colorPart in colors) {
+    const entry = colors[colorPart];
+    if (typeof entry === "string") hex = entry;
+    else if (isModeAwareColor(entry)) hex = pickModeAwareFallback(entry);
+    else if (typeof entry === "object" && "6" in entry) hex = pickModeAwareFallback(entry["6"]);
+  } else {
+    const split = splitColorShadeRef(colorPart);
+    if (split) {
+      const scale = colors[split.name];
+      if (scale && typeof scale === "object" && !isModeAwareColor(scale) && split.shade in scale) {
+        const shadeVal = scale[split.shade];
+        hex = shadeVal !== void 0 ? pickModeAwareFallback(shadeVal) : null;
+      }
+    }
+  }
+  if (!hex) return null;
+  if (!opacityPart) {
+    if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
+      return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
+    }
+    return hex;
+  }
+  let alpha;
+  if (opacityPart.startsWith("[") && opacityPart.endsWith("]")) {
+    const v = parseFloat(opacityPart.slice(1, -1));
+    alpha = v > 1 ? v / 100 : v;
+  } else {
+    alpha = parseFloat(opacityPart) / 100;
+  }
+  if (isNaN(alpha)) return hex;
+  if (alpha < 0) alpha = 0;
+  else if (alpha > 1) alpha = 1;
+  return hexToRgba(hex, alpha);
+}
+function parseHexRgb(hex) {
+  const h = hex.replace("#", "");
+  if (h.length === 3 || h.length === 4) {
+    return [
+      parseInt(h[0] + h[0], 16),
+      parseInt(h[1] + h[1], 16),
+      parseInt(h[2] + h[2], 16)
+    ];
+  }
+  if (h.length === 6 || h.length === 8) {
+    return [
+      parseInt(h.slice(0, 2), 16),
+      parseInt(h.slice(2, 4), 16),
+      parseInt(h.slice(4, 6), 16)
+    ];
+  }
+  return null;
+}
+function hexToRgba(hex, alpha) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function withOpacityVar(color, varName) {
+  if (!color.startsWith("#")) return color;
+  const rgb = parseHexRgb(color);
+  if (!rgb) return color;
+  const [r, g, b] = rgb;
+  return `rgba(${r},${g},${b},var(${varName},1))`;
+}
+var colorResolvers = {
+  // ── Background ─────────────────────────────────────────────────────────────
+  bg: ({ value, isArbitrary }, { colors }) => {
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
+  },
+  "bg-opacity": ({ value, isArbitrary }, _) => {
+    if (!getEffectiveIsWeb()) return null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--bg-opacity": v };
+  },
+  // ── Background gradient (CSS variable gradient stops, web-only) ──────────
+  "bg-gradient-to": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const directions = {
+      t: "to top",
+      tr: "to top right",
+      r: "to right",
+      br: "to bottom right",
+      b: "to bottom",
+      bl: "to bottom left",
+      l: "to left",
+      tl: "to top left"
+    };
+    const dir = directions[value];
+    if (!dir) return null;
+    return {
+      backgroundImage: `linear-gradient(${dir}, var(--kb-gradient-from, transparent), var(--kb-gradient-stops, transparent))`
+    };
+  },
+  from: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return {
+      "--kb-gradient-from": color,
+      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-to, transparent)`
+    };
+  },
+  via: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return {
+      "--kb-gradient-via": color,
+      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-via), var(--kb-gradient-to, transparent)`
+    };
+  },
+  to: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    if (!color) return null;
+    return { "--kb-gradient-to": color };
+  },
+  // ── Tint color (native-only, for Image and icon components) ──────────────
+  tint: ({ value, isArbitrary }, { colors }) => {
+    if (getEffectiveIsWeb()) return null;
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { tintColor: color } : null;
+  },
+  // ── Caret color (web-only) ────────────────────────────────────────────────
+  caret: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto" || value === "transparent") return { caretColor: value };
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { caretColor: color } : null;
+  },
+  // ── Accent color (web-only) ───────────────────────────────────────────────
+  accent: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { accentColor: "auto" };
+    const color = resolveColor(value, colors, isArbitrary);
+    return color ? { accentColor: color } : null;
+  }
+};
+
+// src/core/resolvers/spacing.ts
+function resolveSpacing(value, negative, spacing, isArbitrary) {
+  if (isArbitrary) {
+    const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
+    if (negative) {
+      if (typeof resolved === "number") return -resolved;
+      if (typeof resolved === "string") {
+        if (resolved.startsWith("-")) return resolved.slice(1);
+        if (/^\d/.test(resolved)) return `-${resolved}`;
+        if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
+      }
+    }
+    return resolved;
+  }
+  const raw = spacing[value];
+  if (raw === void 0) return null;
+  if (typeof raw === "number") return negative ? -raw : raw;
+  if (raw === "auto") return "auto";
+  if (negative && typeof raw === "string" && raw.endsWith("%")) {
+    return `-${raw}`;
+  }
+  return raw;
+}
+function resolveSizing(value, spacing, isArbitrary) {
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
+  const raw = spacing[value];
+  if (raw !== void 0) return raw;
+  if (/^\d+\/\d+$/.test(value)) {
+    const [num, den] = value.split("/").map(Number);
+    if (!den) return null;
+    return `${(num / den * 100).toFixed(6)}%`;
+  }
+  return null;
+}
+function makeSpacingResolver(prop) {
+  return ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { [prop]: v } : null;
+  };
+}
+var PADDING_MARGIN_PROPS = {
+  p: "padding",
+  px: "paddingHorizontal",
+  py: "paddingVertical",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  m: "margin",
+  mx: "marginHorizontal",
+  my: "marginVertical",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft"
+};
+var spacingResolvers = {
+  // ── Sizing ─────────────────────────────────────────────────────────────────
+  w: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { width: v } : null;
+  },
+  h: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { height: v } : null;
+  },
+  "min-w": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { minWidth: v } : null;
+  },
+  "min-h": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { minHeight: v } : null;
+  },
+  "max-w": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { maxWidth: v } : null;
+  },
+  "max-h": ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { maxHeight: v } : null;
+  },
+  // ── Size shorthand (sets width AND height in one utility) ────────────────
+  size: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { width: v, height: v } : null;
+  },
+  // ── Flex basis ─────────────────────────────────────────────────────────────
+  basis: ({ value, isArbitrary }, { spacing }) => {
+    const v = resolveSizing(value, spacing, isArbitrary);
+    return v !== null ? { flexBasis: v } : null;
+  },
+  // ── Gap ────────────────────────────────────────────────────────────────────
+  gap: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { gap: v } : null;
+  },
+  "gap-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { columnGap: v } : null;
+  },
+  "gap-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { rowGap: v } : null;
+  },
+  // ── Position ───────────────────────────────────────────────────────────────
+  top: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { top: v } : null;
+  },
+  right: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { right: v } : null;
+  },
+  bottom: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { bottom: v } : null;
+  },
+  left: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { left: v } : null;
+  },
+  inset: ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { top: v, right: v, bottom: v, left: v } : null;
+  },
+  "inset-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { left: v, right: v } : null;
+  },
+  "inset-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    return v !== null ? { top: v, bottom: v } : null;
+  },
+  // ── Translate ──────────────────────────────────────────────────────────────
+  "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { transform: `translateX(${typeof v === "number" ? `${v}px` : v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateX: n }] };
+    }
+    return { transform: [{ translateX: v }] };
+  },
+  "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { transform: `translateY(${typeof v === "number" ? `${v}px` : v})` };
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? null : { transform: [{ translateY: n }] };
+    }
+    return { transform: [{ translateY: v }] };
+  },
+  // ── Space between ─────────────────────────────────────────────────────────
+  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
+  // On native (RN 0.71+): uses columnGap/rowGap directly.
+  "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceX: v };
+    return { columnGap: v };
+  },
+  "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
+    const v = resolveSpacing(value, negative, spacing, isArbitrary);
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceY: v };
+    return { rowGap: v };
+  }
+};
+for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
+  spacingResolvers[utility] = makeSpacingResolver(prop);
+}
+
+// src/core/resolvers/border.ts
+function resolveRadius(value, radii, isArbitrary) {
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
+  const key = value === "" ? "DEFAULT" : value;
+  return radii[key] ?? null;
+}
+function makeBorderSideResolver(widthProp, colorProp) {
+  return ({ value, isArbitrary }, { colors, borderWidth }) => {
+    if (!value) return { [widthProp]: 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { [widthProp]: getEffectiveIsWeb() ? value : w2 };
+      return { [colorProp]: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { [colorProp]: color };
+    const w = borderWidth[value];
+    return w !== void 0 ? { [widthProp]: w } : null;
+  };
+}
+var BORDER_SIDE_PROPS = {
+  "border-t": ["borderTopWidth", "borderTopColor"],
+  "border-r": ["borderRightWidth", "borderRightColor"],
+  "border-b": ["borderBottomWidth", "borderBottomColor"],
+  "border-l": ["borderLeftWidth", "borderLeftColor"]
+};
+var borderResolvers = {
+  // ── Border width ───────────────────────────────────────────────────────────
+  border: ({ value, isArbitrary }, { colors, borderWidth, spacing }) => {
+    if (!value) return { borderWidth: borderWidth["DEFAULT"] ?? 1 };
+    if (isArbitrary) {
+      const w2 = toNativeValue(value);
+      if (typeof w2 === "number") return { borderWidth: getEffectiveIsWeb() ? value : w2 };
+      return { borderColor: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { borderColor: color };
+    const w = borderWidth[value] ?? spacing[value];
+    if (w !== void 0) {
+      const numW = typeof w === "number" ? w : parseFloat(String(w));
+      if (isNaN(numW)) return null;
+      return { borderWidth: numW };
+    }
+    return null;
+  },
+  // border-t/-r/-b/-l generated below via makeBorderSideResolver() — see BORDER_SIDE_PROPS.
+  // ── Border radius ──────────────────────────────────────────────────────────
+  rounded: ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderRadius: r } : null;
+  },
+  "rounded-t": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopLeftRadius: r, borderTopRightRadius: r } : null;
+  },
+  "rounded-r": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopRightRadius: r, borderBottomRightRadius: r } : null;
+  },
+  "rounded-b": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderBottomLeftRadius: r, borderBottomRightRadius: r } : null;
+  },
+  "rounded-l": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopLeftRadius: r, borderBottomLeftRadius: r } : null;
+  },
+  "rounded-tl": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopLeftRadius: r } : null;
+  },
+  "rounded-tr": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderTopRightRadius: r } : null;
+  },
+  "rounded-bl": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderBottomLeftRadius: r } : null;
+  },
+  "rounded-br": ({ value, isArbitrary }, { borderRadius }) => {
+    const r = resolveRadius(value, borderRadius, isArbitrary);
+    return r !== null ? { borderBottomRightRadius: r } : null;
+  },
+  // ── Outline extended (web-only) ───────────────────────────────────────────
+  outline: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
+    if (value === "none") return { outline: "none", outlineOffset: "0" };
+    if (isArbitrary) {
+      if (/^\d/.test(value) || value.startsWith("calc(")) return { outlineWidth: value };
+      return { outlineColor: value };
+    }
+    const widths = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
+    if (value in widths) return { outlineWidth: widths[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { outlineColor: color } : null;
+  },
+  "outline-offset": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { outlineOffset: value };
+    const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
+    return offsets[value] ? { outlineOffset: offsets[value] } : null;
+  },
+  // ── Divide (child combinator CSS, web-only) ───────────────────────────────
+  // These return special __divide* markers that resolver.ts converts to
+  // .cls > * + * { border-... } CSS rules. No inline style is applied.
+  "divide-x": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "reverse") return null;
+    if (!value) return { __divideX: 1 };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { __divideX: n };
+  },
+  "divide-y": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "reverse") return null;
+    if (!value) return { __divideY: 1 };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { __divideY: n };
+  },
+  divide: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { __divideColor: value };
+    const styleTokens = {
+      solid: "solid",
+      dashed: "dashed",
+      dotted: "dotted",
+      double: "double",
+      none: "none"
+    };
+    if (value in styleTokens) return { __divideStyle: styleTokens[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { __divideColor: color } : null;
+  },
+  // ── Ring ───────────────────────────────────────────────────────────────────
+  // Web: box-shadow outline ring (doesn't affect layout).
+  // Native: React Native has no box-shadow, so this falls back to borderWidth/
+  // borderColor — the closest visual approximation (used by other RN Tailwind-
+  // likes for the same reason). Unlike the web ring, this DOES affect layout,
+  // and it shares its properties with the `border` utility — combining
+  // `border-*` and `ring-*` on the same native element means whichever class
+  // comes later wins, since both ultimately set borderWidth/borderColor.
+  ring: ({ value, isArbitrary }, { colors }) => {
+    const onWeb = getEffectiveIsWeb();
+    const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_WIDTH = 3;
+    const asNative = (w, color2) => w === 0 ? { borderWidth: 0 } : { borderWidth: w, borderColor: color2 };
+    if (!value) {
+      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
+    }
+    if (value === "inset") {
+      return onWeb ? { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
+    }
+    const widthTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    if (!isArbitrary && value in widthTokens) {
+      const w = widthTokens[value];
+      return onWeb ? { boxShadow: w === 0 ? "none" : `0 0 0 ${w}px ${DEFAULT_COLOR}` } : asNative(w, DEFAULT_COLOR);
+    }
+    if (isArbitrary) {
+      const numMatch = /^(\d+(?:\.\d+)?)(px|rem|em|vw|vh)?$/.exec(value);
+      if (numMatch) {
+        const unit = numMatch[2] ?? "px";
+        if (onWeb) return { boxShadow: `0 0 0 ${numMatch[1]}${unit} ${DEFAULT_COLOR}` };
+        return unit === "px" ? asNative(parseFloat(numMatch[1]), DEFAULT_COLOR) : null;
+      }
+      return onWeb ? { boxShadow: value.replace(/_/g, " ") } : null;
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) {
+      return onWeb ? { boxShadow: `0 0 0 ${DEFAULT_WIDTH}px ${color}` } : asNative(DEFAULT_WIDTH, color);
+    }
+    return null;
+  },
+  // Web-only, unlike `ring` above: this stacks a second box-shadow layer to
+  // create a gap between the element and the ring. There's no native
+  // equivalent to approximate that with (a border can't create a gap outside
+  // its own element without an extra wrapper view), so this stays a no-op
+  // on native rather than rendering a misleading half-translation.
+  "ring-offset": ({ value, isArbitrary }, _theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
+    const DEFAULT_RING_WIDTH = 3;
+    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
+    let offsetWidth;
+    if (!isArbitrary) {
+      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
+    } else {
+      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
+    }
+    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
+    const isZero = offsetWidth === 0 || offsetWidth === "0";
+    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
+    return {
+      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
+    };
+  }
+};
+for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
+  borderResolvers[utility] = makeBorderSideResolver(widthProp, colorProp);
+}
+
+// src/core/resolvers/filters.ts
+var FILTER_COMPOSE = "var(--kb-blur,) var(--kb-brightness,) var(--kb-contrast,) var(--kb-grayscale,) var(--kb-hue-rotate,) var(--kb-invert,) var(--kb-saturate,) var(--kb-sepia,) var(--kb-drop-shadow,)";
+var BACKDROP_FILTER_COMPOSE = "var(--kb-backdrop-blur,) var(--kb-backdrop-brightness,) var(--kb-backdrop-contrast,) var(--kb-backdrop-grayscale,) var(--kb-backdrop-hue-rotate,) var(--kb-backdrop-invert,) var(--kb-backdrop-opacity,) var(--kb-backdrop-saturate,) var(--kb-backdrop-sepia,)";
+var filterResolvers = {
+  // ── CSS Filters (composable via CSS variables, web-only) ─────────────────
+  blur: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const sizes = {
+      "": "blur(8px)",
+      sm: "blur(4px)",
+      md: "blur(12px)",
+      lg: "blur(16px)",
+      xl: "blur(24px)",
+      "2xl": "blur(40px)",
+      "3xl": "blur(64px)"
+    };
+    if (value === "none") return { "--kb-blur": "", filter: FILTER_COMPOSE };
+    const v = isArbitrary ? `blur(${value})` : sizes[value];
+    return v !== void 0 ? { "--kb-blur": v, filter: FILTER_COMPOSE } : null;
+  },
+  brightness: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-brightness": v, filter: FILTER_COMPOSE };
+  },
+  contrast: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-contrast": v, filter: FILTER_COMPOSE };
+  },
+  grayscale: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    return { "--kb-grayscale": v, filter: FILTER_COMPOSE };
+  },
+  "hue-rotate": ({ value, negative, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
+    return { "--kb-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
+  },
+  invert: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
+    return { "--kb-invert": v, filter: FILTER_COMPOSE };
+  },
+  saturate: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-saturate": v, filter: FILTER_COMPOSE };
+  },
+  sepia: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
+    return { "--kb-sepia": v, filter: FILTER_COMPOSE };
+  },
+  "drop-shadow": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { "--kb-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
+    const presets = {
+      "": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
+      sm: "drop-shadow(0 1px 1px rgb(0 0 0/0.05))",
+      md: "drop-shadow(0 4px 3px rgb(0 0 0/0.07)) drop-shadow(0 2px 2px rgb(0 0 0/0.06))",
+      lg: "drop-shadow(0 10px 8px rgb(0 0 0/0.04)) drop-shadow(0 4px 3px rgb(0 0 0/0.1))",
+      xl: "drop-shadow(0 20px 13px rgb(0 0 0/0.03)) drop-shadow(0 8px 5px rgb(0 0 0/0.08))",
+      "2xl": "drop-shadow(0 25px 25px rgb(0 0 0/0.15))",
+      none: "drop-shadow(0 0 #0000)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { "--kb-drop-shadow": v, filter: FILTER_COMPOSE } : null;
+  },
+  // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
+  filter: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { filter: value.replace(/_/g, " ") };
+    if (value === "none") return { filter: "none" };
+    return null;
+  },
+  // ── Backdrop Filters (composable via CSS variables, web-only) ────────────
+  "backdrop-blur": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const sizes = {
+      "": "blur(8px)",
+      sm: "blur(4px)",
+      md: "blur(12px)",
+      lg: "blur(16px)",
+      xl: "blur(24px)",
+      "2xl": "blur(40px)",
+      "3xl": "blur(64px)"
+    };
+    if (value === "none") return { "--kb-backdrop-blur": "", backdropFilter: BACKDROP_FILTER_COMPOSE };
+    const v = isArbitrary ? `blur(${value})` : sizes[value];
+    return v !== void 0 ? { "--kb-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
+  },
+  "backdrop-brightness": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-contrast": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-grayscale": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `grayscale(${value})` : value === "0" ? "grayscale(0)" : "grayscale(100%)";
+    return { "--kb-backdrop-grayscale": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
+    return { "--kb-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-invert": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `invert(${value})` : value === "0" ? "invert(0)" : "invert(100%)";
+    return { "--kb-backdrop-invert": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-opacity": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-saturate": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
+    return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--kb-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-sepia": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const v = isArbitrary ? `sepia(${value})` : value === "0" ? "sepia(0)" : "sepia(100%)";
+    return { "--kb-backdrop-sepia": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
+  },
+  "backdrop-filter": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
+    if (value === "none") return { backdropFilter: "none" };
+    return null;
+  },
+  // ── Mix / background blend mode (web-only) ───────────────────────────────
+  "mix-blend": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const modes = [
+      "normal",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity",
+      "plus-lighter"
+    ];
+    return modes.includes(value) ? { mixBlendMode: value } : null;
+  },
+  "bg-blend": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const modes = [
+      "normal",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity"
+    ];
+    return modes.includes(value) ? { backgroundBlendMode: value } : null;
+  },
+  // ── Will-change (web-only) ─────────────────────────────────────────────────
+  "will-change": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
+    const presets = {
+      auto: "auto",
+      scroll: "scroll-position",
+      contents: "contents",
+      transform: "transform"
+    };
+    return presets[value] ? { willChange: presets[value] } : null;
+  }
+};
+
+// src/core/resolvers/layout.ts
+var _standalone = null;
+var _standaloneWeb = null;
+function buildStandalone(web) {
+  return {
+    // Display
+    // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
+    // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
+    // `grid`, `contents`, `flow-root` have no native equivalent and stay null there.
+    // The inline-* family (inline, inline-block, inline-flex, inline-grid) falls back
+    // to 'flex' on native instead — like plain `flex`, this is a no-op most of the
+    // time, but without it these utilities couldn't re-show a `hidden` element on
+    // native either (null → no style applied → still display:'none').
+    flex: { display: "flex" },
+    block: web ? { display: "block" } : null,
+    "inline-block": { display: web ? "inline-block" : "flex" },
+    inline: { display: web ? "inline" : "flex" },
+    grid: web ? { display: "grid" } : null,
+    "inline-flex": { display: web ? "inline-flex" : "flex" },
+    "inline-grid": { display: web ? "inline-grid" : "flex" },
+    hidden: { display: "none" },
+    contents: web ? { display: "contents" } : null,
+    "flow-root": web ? { display: "flow-root" } : null,
+    // Flex direction, wrap, grow/shrink, and alignment (both web and native) —
+    // every one of these is meaningless without the element also being a flex
+    // container. React Native Views are ALWAYS flex containers by default, so
+    // on native this was already true for free; on web a plain <div> defaults
+    // to display:block, so e.g. `items-center` alone silently did nothing.
+    // Folding `display: 'flex'` into these on web closes that native/web gap —
+    // `flex-1 items-center justify-center` now behaves the same on both,
+    // without also needing a separate `flex` class.
+    "flex-row": { flexDirection: "row", ...web ? { display: "flex" } : {} },
+    "flex-col": { flexDirection: "column", ...web ? { display: "flex" } : {} },
+    "flex-row-reverse": { flexDirection: "row-reverse", ...web ? { display: "flex" } : {} },
+    "flex-col-reverse": { flexDirection: "column-reverse", ...web ? { display: "flex" } : {} },
+    // Flex wrap (both)
+    "flex-wrap": { flexWrap: "wrap", ...web ? { display: "flex" } : {} },
+    "flex-wrap-reverse": { flexWrap: "wrap-reverse", ...web ? { display: "flex" } : {} },
+    "flex-nowrap": { flexWrap: "nowrap", ...web ? { display: "flex" } : {} },
+    // Flex grow / shrink (both) — deliberately NOT folding in display:flex
+    // like the container-level properties above. flex-grow/flex-shrink are
+    // item-level: they already take effect purely via the PARENT already
+    // being a flex container, with zero dependency on this element's own
+    // display. Forcing display:flex here would instead be an unrelated side
+    // effect on THIS element's own children (turning what may be an ordinary
+    // block stack into a flex row) — exactly the kind of surprise the
+    // container-level properties above can never cause, since those are
+    // no-ops without display:flex to begin with.
+    "flex-grow": { flexGrow: 1 },
+    "flex-grow-0": { flexGrow: 0 },
+    "flex-shrink": { flexShrink: 1 },
+    "flex-shrink-0": { flexShrink: 0 },
+    // Align items (both)
+    "items-start": { alignItems: "flex-start", ...web ? { display: "flex" } : {} },
+    "items-end": { alignItems: "flex-end", ...web ? { display: "flex" } : {} },
+    "items-center": { alignItems: "center", ...web ? { display: "flex" } : {} },
+    "items-baseline": { alignItems: "baseline", ...web ? { display: "flex" } : {} },
+    "items-stretch": { alignItems: "stretch", ...web ? { display: "flex" } : {} },
+    // Justify content (both)
+    "justify-start": { justifyContent: "flex-start", ...web ? { display: "flex" } : {} },
+    "justify-end": { justifyContent: "flex-end", ...web ? { display: "flex" } : {} },
+    "justify-center": { justifyContent: "center", ...web ? { display: "flex" } : {} },
+    "justify-between": { justifyContent: "space-between", ...web ? { display: "flex" } : {} },
+    "justify-around": { justifyContent: "space-around", ...web ? { display: "flex" } : {} },
+    "justify-evenly": { justifyContent: "space-evenly", ...web ? { display: "flex" } : {} },
+    // Align content (both)
+    "content-start": { alignContent: "flex-start", ...web ? { display: "flex" } : {} },
+    "content-end": { alignContent: "flex-end", ...web ? { display: "flex" } : {} },
+    "content-center": { alignContent: "center", ...web ? { display: "flex" } : {} },
+    "content-between": { alignContent: "space-between", ...web ? { display: "flex" } : {} },
+    "content-around": { alignContent: "space-around", ...web ? { display: "flex" } : {} },
+    "content-evenly": { alignContent: "space-evenly", ...web ? { display: "flex" } : {} },
+    "content-stretch": { alignContent: "stretch", ...web ? { display: "flex" } : {} },
+    // Align self (both)
+    "self-auto": { alignSelf: "auto" },
+    "self-start": { alignSelf: "flex-start" },
+    "self-end": { alignSelf: "flex-end" },
+    "self-center": { alignSelf: "center" },
+    "self-stretch": { alignSelf: "stretch" },
+    "self-baseline": { alignSelf: "baseline" },
+    // Text align (both)
+    "text-left": { textAlign: "left" },
+    "text-right": { textAlign: "right" },
+    "text-center": { textAlign: "center" },
+    "text-justify": { textAlign: "justify" },
+    // Font weight shortcuts (both)
+    "font-thin": { fontWeight: "100" },
+    "font-extralight": { fontWeight: "200" },
+    "font-light": { fontWeight: "300" },
+    "font-normal": { fontWeight: "400" },
+    "font-medium": { fontWeight: "500" },
+    "font-semibold": { fontWeight: "600" },
+    "font-bold": { fontWeight: "700" },
+    "font-extrabold": { fontWeight: "800" },
+    "font-black": { fontWeight: "900" },
+    // Text decoration (overline is web-only)
+    underline: { textDecorationLine: "underline" },
+    overline: web ? { textDecorationLine: "overline" } : null,
+    "line-through": { textDecorationLine: "line-through" },
+    "no-underline": { textDecorationLine: "none" },
+    // Text transform (both)
+    uppercase: { textTransform: "uppercase" },
+    lowercase: { textTransform: "lowercase" },
+    capitalize: { textTransform: "capitalize" },
+    "normal-case": { textTransform: "none" },
+    // Font style (both)
+    italic: { fontStyle: "italic" },
+    "non-italic": { fontStyle: "normal" },
+    // Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
+    relative: { position: "relative" },
+    absolute: { position: "absolute" },
+    fixed: web ? { position: "fixed" } : null,
+    sticky: web ? { position: "sticky" } : null,
+    static: web ? { position: "static" } : null,
+    // Visibility (no `visibility` prop on native; use opacity instead)
+    visible: web ? { visibility: "visible" } : null,
+    invisible: web ? { visibility: "hidden" } : { opacity: 0 },
+    // Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
+    "overflow-hidden": { overflow: "hidden" },
+    "overflow-visible": { overflow: "visible" },
+    "overflow-scroll": { overflow: "scroll" },
+    "overflow-auto": web ? { overflow: "auto" } : { overflow: "scroll" },
+    // overflowX / overflowY are web-only
+    "overflow-x-hidden": web ? { overflowX: "hidden" } : null,
+    "overflow-x-scroll": web ? { overflowX: "scroll" } : null,
+    "overflow-x-auto": web ? { overflowX: "auto" } : null,
+    "overflow-y-hidden": web ? { overflowY: "hidden" } : null,
+    "overflow-y-scroll": web ? { overflowY: "scroll" } : null,
+    "overflow-y-auto": web ? { overflowY: "auto" } : null,
+    // Object fit (web-only; use resizeMode prop on RN Image)
+    "object-contain": web ? { objectFit: "contain" } : null,
+    "object-cover": web ? { objectFit: "cover" } : null,
+    "object-fill": web ? { objectFit: "fill" } : null,
+    "object-none": web ? { objectFit: "none" } : null,
+    "object-scale-down": web ? { objectFit: "scale-down" } : null,
+    // Border style (both)
+    "border-solid": { borderStyle: "solid" },
+    "border-dashed": { borderStyle: "dashed" },
+    "border-dotted": { borderStyle: "dotted" },
+    "border-none": { borderWidth: 0 },
+    // Border sides default width (both)
+    "border-t": { borderTopWidth: 1 },
+    "border-r": { borderRightWidth: 1 },
+    "border-b": { borderBottomWidth: 1 },
+    "border-l": { borderLeftWidth: 1 },
+    // Cursor (web-only)
+    "cursor-auto": web ? { cursor: "auto" } : null,
+    "cursor-default": web ? { cursor: "default" } : null,
+    "cursor-pointer": web ? { cursor: "pointer" } : null,
+    "cursor-wait": web ? { cursor: "wait" } : null,
+    "cursor-text": web ? { cursor: "text" } : null,
+    "cursor-move": web ? { cursor: "move" } : null,
+    "cursor-not-allowed": web ? { cursor: "not-allowed" } : null,
+    // User select (web-only)
+    "select-none": web ? { userSelect: "none" } : null,
+    "select-text": web ? { userSelect: "text" } : null,
+    "select-all": web ? { userSelect: "all" } : null,
+    "select-auto": web ? { userSelect: "auto" } : null,
+    // Pointer events (both)
+    "pointer-events-none": { pointerEvents: "none" },
+    "pointer-events-auto": { pointerEvents: "auto" },
+    // Whitespace (web-only; RN Text uses numberOfLines prop instead)
+    "whitespace-normal": web ? { whiteSpace: "normal" } : null,
+    "whitespace-nowrap": web ? { whiteSpace: "nowrap" } : null,
+    "whitespace-pre": web ? { whiteSpace: "pre" } : null,
+    "whitespace-pre-wrap": web ? { whiteSpace: "pre-wrap" } : null,
+    "whitespace-pre-line": web ? { whiteSpace: "pre-line" } : null,
+    // Word break (web-only)
+    "break-normal": web ? { overflowWrap: "normal", wordBreak: "normal" } : null,
+    "break-words": web ? { overflowWrap: "break-word" } : null,
+    "break-all": web ? { wordBreak: "break-all" } : null,
+    // Misc web-only
+    truncate: web ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
+    "box-border": web ? { boxSizing: "border-box" } : null,
+    "box-content": web ? { boxSizing: "content-box" } : null,
+    "appearance-none": web ? { appearance: "none" } : null,
+    "outline-none": web ? { outline: "none", outlineOffset: "0" } : null,
+    outline: web ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
+    resize: web ? { resize: "both" } : null,
+    "resize-none": web ? { resize: "none" } : null,
+    "resize-y": web ? { resize: "vertical" } : null,
+    "resize-x": web ? { resize: "horizontal" } : null,
+    antialiased: web ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
+    "subpixel-antialiased": web ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
+    "overflow-ellipsis": web ? { textOverflow: "ellipsis" } : null,
+    "sr-only": web ? {
+      position: "absolute",
+      width: 1,
+      height: 1,
+      padding: 0,
+      margin: -1,
+      overflow: "hidden",
+      clip: "rect(0,0,0,0)",
+      whiteSpace: "nowrap",
+      border: 0
+    } : null,
+    "not-sr-only": web ? {
+      position: "static",
+      width: "auto",
+      height: "auto",
+      padding: 0,
+      margin: 0,
+      overflow: "visible",
+      clip: "auto",
+      whiteSpace: "normal"
+    } : null,
+    // Lists (web-only)
+    "list-none": web ? { listStyleType: "none" } : null,
+    "list-disc": web ? { listStyleType: "disc" } : null,
+    "list-decimal": web ? { listStyleType: "decimal" } : null,
+    // Background clip (web-only)
+    "bg-clip-border": web ? { backgroundClip: "border-box" } : null,
+    "bg-clip-padding": web ? { backgroundClip: "padding-box" } : null,
+    "bg-clip-content": web ? { backgroundClip: "content-box" } : null,
+    "bg-clip-text": web ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
+    // Background image
+    "bg-none": web ? { backgroundImage: "none" } : null,
+    // Background size (web-only)
+    "bg-auto": web ? { backgroundSize: "auto" } : null,
+    "bg-cover": web ? { backgroundSize: "cover" } : null,
+    "bg-contain": web ? { backgroundSize: "contain" } : null,
+    // Background position (web-only)
+    "bg-center": web ? { backgroundPosition: "center" } : null,
+    "bg-top": web ? { backgroundPosition: "top" } : null,
+    "bg-bottom": web ? { backgroundPosition: "bottom" } : null,
+    "bg-left": web ? { backgroundPosition: "left" } : null,
+    "bg-right": web ? { backgroundPosition: "right" } : null,
+    "bg-left-top": web ? { backgroundPosition: "left top" } : null,
+    "bg-left-bottom": web ? { backgroundPosition: "left bottom" } : null,
+    "bg-right-top": web ? { backgroundPosition: "right top" } : null,
+    "bg-right-bottom": web ? { backgroundPosition: "right bottom" } : null,
+    // Background repeat (web-only)
+    "bg-repeat": web ? { backgroundRepeat: "repeat" } : null,
+    "bg-no-repeat": web ? { backgroundRepeat: "no-repeat" } : null,
+    "bg-repeat-x": web ? { backgroundRepeat: "repeat-x" } : null,
+    "bg-repeat-y": web ? { backgroundRepeat: "repeat-y" } : null,
+    "bg-repeat-round": web ? { backgroundRepeat: "round" } : null,
+    "bg-repeat-space": web ? { backgroundRepeat: "space" } : null,
+    // Background attachment (web-only)
+    "bg-fixed": web ? { backgroundAttachment: "fixed" } : null,
+    "bg-local": web ? { backgroundAttachment: "local" } : null,
+    "bg-scroll": web ? { backgroundAttachment: "scroll" } : null,
+    // Object position (web-only)
+    "object-center": web ? { objectPosition: "center" } : null,
+    "object-top": web ? { objectPosition: "top" } : null,
+    "object-bottom": web ? { objectPosition: "bottom" } : null,
+    "object-left": web ? { objectPosition: "left" } : null,
+    "object-right": web ? { objectPosition: "right" } : null,
+    "object-left-top": web ? { objectPosition: "left top" } : null,
+    "object-left-bottom": web ? { objectPosition: "left bottom" } : null,
+    "object-right-top": web ? { objectPosition: "right top" } : null,
+    "object-right-bottom": web ? { objectPosition: "right bottom" } : null,
+    // Table (web-only)
+    table: web ? { display: "table" } : null,
+    "table-auto": web ? { tableLayout: "auto" } : null,
+    "table-fixed": web ? { tableLayout: "fixed" } : null,
+    "caption-top": web ? { captionSide: "top" } : null,
+    "caption-bottom": web ? { captionSide: "bottom" } : null,
+    "border-collapse": web ? { borderCollapse: "collapse" } : null,
+    "border-separate": web ? { borderCollapse: "separate" } : null,
+    // List style position (web-only)
+    "list-inside": web ? { listStylePosition: "inside" } : null,
+    "list-outside": web ? { listStylePosition: "outside" } : null,
+    // Font variant numeric (web-only)
+    "normal-nums": web ? { fontVariantNumeric: "normal" } : null,
+    ordinal: web ? { fontVariantNumeric: "ordinal" } : null,
+    "slashed-zero": web ? { fontVariantNumeric: "slashed-zero" } : null,
+    "lining-nums": web ? { fontVariantNumeric: "lining-nums" } : null,
+    "oldstyle-nums": web ? { fontVariantNumeric: "oldstyle-nums" } : null,
+    "proportional-nums": web ? { fontVariantNumeric: "proportional-nums" } : null,
+    "tabular-nums": web ? { fontVariantNumeric: "tabular-nums" } : null,
+    "diagonal-fractions": web ? { fontVariantNumeric: "diagonal-fractions" } : null,
+    "stacked-fractions": web ? { fontVariantNumeric: "stacked-fractions" } : null,
+    // Isolation (web-only)
+    isolate: web ? { isolation: "isolate" } : null,
+    "isolation-auto": web ? { isolation: "auto" } : null,
+    // Backface visibility (both iOS and Android)
+    "backface-visible": { backfaceVisibility: "visible" },
+    "backface-hidden": { backfaceVisibility: "hidden" },
+    // CSS filters — standalone = default/full effect (web-only)
+    grayscale: web ? { "--kb-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
+    invert: web ? { "--kb-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
+    sepia: web ? { "--kb-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
+    // Divide none
+    "divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
+    // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
+    group: web ? {} : null,
+    peer: web ? {} : null,
+    // Text-wrap (web-only)
+    "text-wrap": web ? { textWrap: "wrap" } : null,
+    "text-nowrap": web ? { textWrap: "nowrap" } : null,
+    "text-balance": web ? { textWrap: "balance" } : null,
+    "text-pretty": web ? { textWrap: "pretty" } : null,
+    // Screen sizing — dvw/dvh (dynamic viewport units) instead of vw/vh: on mobile
+    // browsers, vh/vw are pinned to the LARGEST viewport size (address bar hidden),
+    // so `h-screen` overflows behind the address bar when it's shown. dvh/dvw track
+    // the actual visible viewport as browser chrome shows/hides. Desktop behavior
+    // is unchanged since there's no dynamic chrome to account for.
+    // (vw/dvw values are web-only; vh/dvh values work cross-platform via spacing scale for h-*)
+    "w-screen": web ? { width: "100dvw" } : null,
+    "min-h-screen": { minHeight: "100dvh" },
+    "max-h-screen": { maxHeight: "100dvh" },
+    "min-w-screen": web ? { minWidth: "100dvw" } : null,
+    "max-w-screen": web ? { maxWidth: "100dvw" } : null,
+    // max-w named container sizes (mirrors Tailwind's container scale)
+    "max-w-none": { maxWidth: "none" },
+    "max-w-xs": { maxWidth: 320 },
+    "max-w-sm": { maxWidth: 384 },
+    "max-w-md": { maxWidth: 448 },
+    "max-w-lg": { maxWidth: 512 },
+    "max-w-xl": { maxWidth: 576 },
+    "max-w-2xl": { maxWidth: 672 },
+    "max-w-3xl": { maxWidth: 768 },
+    "max-w-4xl": { maxWidth: 896 },
+    "max-w-5xl": { maxWidth: 1024 },
+    "max-w-6xl": { maxWidth: 1152 },
+    "max-w-7xl": { maxWidth: 1280 },
+    "max-w-prose": web ? { maxWidth: "65ch" } : null,
+    // Extended cursors (web-only)
+    "cursor-grab": web ? { cursor: "grab" } : null,
+    "cursor-grabbing": web ? { cursor: "grabbing" } : null,
+    "cursor-zoom-in": web ? { cursor: "zoom-in" } : null,
+    "cursor-zoom-out": web ? { cursor: "zoom-out" } : null,
+    "cursor-crosshair": web ? { cursor: "crosshair" } : null,
+    "cursor-help": web ? { cursor: "help" } : null,
+    "cursor-none": web ? { cursor: "none" } : null,
+    // Overflow clip (web-only)
+    "overflow-clip": web ? { overflow: "clip" } : null,
+    "overflow-x-clip": web ? { overflowX: "clip" } : null,
+    "overflow-y-clip": web ? { overflowY: "clip" } : null,
+    // Scroll behavior (web-only)
+    "scroll-smooth": web ? { scrollBehavior: "smooth" } : null,
+    "scroll-auto": web ? { scrollBehavior: "auto" } : null,
+    // Float (web-only)
+    "float-left": web ? { float: "left" } : null,
+    "float-right": web ? { float: "right" } : null,
+    "float-start": web ? { float: "inline-start" } : null,
+    "float-end": web ? { float: "inline-end" } : null,
+    "float-none": web ? { float: "none" } : null,
+    // Clear (web-only)
+    "clear-left": web ? { clear: "left" } : null,
+    "clear-right": web ? { clear: "right" } : null,
+    "clear-both": web ? { clear: "both" } : null,
+    "clear-start": web ? { clear: "inline-start" } : null,
+    "clear-end": web ? { clear: "inline-end" } : null,
+    "clear-none": web ? { clear: "none" } : null,
+    // Vertical align (web-only)
+    "align-baseline": web ? { verticalAlign: "baseline" } : null,
+    "align-top": web ? { verticalAlign: "top" } : null,
+    "align-middle": web ? { verticalAlign: "middle" } : null,
+    "align-bottom": web ? { verticalAlign: "bottom" } : null,
+    "align-text-top": web ? { verticalAlign: "text-top" } : null,
+    "align-text-bottom": web ? { verticalAlign: "text-bottom" } : null,
+    "align-sub": web ? { verticalAlign: "sub" } : null,
+    "align-super": web ? { verticalAlign: "super" } : null,
+    // Touch action (web-only)
+    "touch-auto": web ? { touchAction: "auto" } : null,
+    "touch-none": web ? { touchAction: "none" } : null,
+    "touch-pan-x": web ? { touchAction: "pan-x" } : null,
+    "touch-pan-y": web ? { touchAction: "pan-y" } : null,
+    "touch-pan-left": web ? { touchAction: "pan-left" } : null,
+    "touch-pan-right": web ? { touchAction: "pan-right" } : null,
+    "touch-pan-up": web ? { touchAction: "pan-up" } : null,
+    "touch-pan-down": web ? { touchAction: "pan-down" } : null,
+    "touch-pinch-zoom": web ? { touchAction: "pinch-zoom" } : null,
+    "touch-manipulation": web ? { touchAction: "manipulation" } : null
+  };
+}
+function getStandalone() {
+  const web = getEffectiveIsWeb();
+  if (!_standalone || _standaloneWeb !== web) {
+    _standalone = buildStandalone(web);
+    _standaloneWeb = web;
+  }
+  return _standalone;
+}
+var layoutResolvers = {
+  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
+  grid: ({ value, isArbitrary }) => {
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
+    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  "grid-rows": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (isArbitrary) return { gridTemplateRows: value };
+    if (value === "none") return { gridTemplateRows: "none" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
+  },
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const flows = {
+      row: "row",
+      col: "column",
+      dense: "dense",
+      "row-dense": "row dense",
+      "col-dense": "column dense"
+    };
+    const flow = flows[value];
+    return flow ? { gridAutoFlow: flow } : null;
+  },
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { gridAutoColumns: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
+  },
+  "auto-rows": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    };
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
+  },
+  // ── Grid column placement (web-only) ──────────────────────────────────────
+  "col-span": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "full") return { gridColumn: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
+  },
+  "col-start": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { gridColumnStart: "auto" };
+    if (isArbitrary) return { gridColumnStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnStart: n };
+  },
+  "col-end": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { gridColumnEnd: "auto" };
+    if (isArbitrary) return { gridColumnEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridColumnEnd: n };
+  },
+  col: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
+  },
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "full") return { gridRow: "1 / -1" };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
+  },
+  "row-start": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { gridRowStart: "auto" };
+    if (isArbitrary) return { gridRowStart: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowStart: n };
+  },
+  "row-end": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "auto") return { gridRowEnd: "auto" };
+    if (isArbitrary) return { gridRowEnd: value };
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { gridRowEnd: n };
+  },
+  row: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value || value === "auto") return { gridRow: "auto" };
+    if (isArbitrary) return { gridRow: value };
+    return null;
+  },
+  // ── Grid alignment (web-only) ──────────────────────────────────────────────
+  // place-items is shorthand for align-items + justify-items on a grid container
+  "place-items": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch",
+      baseline: "baseline"
+    };
+    return map[value] ? { placeItems: map[value] } : null;
+  },
+  // place-content is shorthand for align-content + justify-content on a grid container
+  "place-content": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+      baseline: "baseline"
+    };
+    return map[value] ? { placeContent: map[value] } : null;
+  },
+  // justify-items controls inline-axis alignment of grid items within their cells
+  "justify-items": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { justifyItems: map[value] } : null;
+  },
+  // place-self is shorthand for align-self + justify-self on a grid item
+  "place-self": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      auto: "auto",
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { placeSelf: map[value] } : null;
+  },
+  // justify-self controls inline-axis self-alignment of a grid item
+  "justify-self": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const map = {
+      auto: "auto",
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { justifySelf: map[value] } : null;
+  },
+  // ── Flex ───────────────────────────────────────────────────────────────────
+  // flex-1/flex-auto/flex-none/grow/shrink are item-level sizing properties —
+  // deliberately NOT implying display:flex here. See the "Flex grow / shrink"
+  // comment in the standalone table above for why: these already work via the
+  // PARENT's flex context regardless of this element's own display, so
+  // forcing display:flex here would only be a surprising, unrelated side
+  // effect on this element's OWN children.
+  flex: ({ value, isArbitrary }, { flex }) => {
+    if (!value) return { display: "flex" };
+    if (isArbitrary) {
+      const v = parseFloat(value);
+      return isNaN(v) ? null : { flex: v };
+    }
+    if (value in flex) {
+      const v = flex[value];
+      if (typeof v === "string" && !getEffectiveIsWeb()) {
+        if (v === "auto" || v === "initial") return { flex: 1 };
+        if (v === "none") return { flex: 0 };
+        return null;
+      }
+      return { flex: v };
+    }
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { flex: n };
+  },
+  grow: ({ value }, _) => {
+    if (!value) return { flexGrow: 1 };
+    const n = parseFloat(value);
+    return { flexGrow: isNaN(n) ? 1 : n };
+  },
+  shrink: ({ value }, _) => {
+    if (!value) return { flexShrink: 1 };
+    const n = parseFloat(value);
+    return { flexShrink: isNaN(n) ? 1 : n };
+  },
+  order: ({ value, negative }, _) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? null : { order: negative ? -n : n };
+  },
+  // ── Z-index ────────────────────────────────────────────────────────────────
+  z: ({ value, isArbitrary }, { zIndex }) => {
+    if (isArbitrary) {
+      const n2 = parseInt(value);
+      return isNaN(n2) ? null : { zIndex: n2 };
+    }
+    const v = zIndex[value];
+    if (v !== void 0) {
+      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
+      return { zIndex: v };
+    }
+    const n = parseInt(value);
+    return isNaN(n) ? null : { zIndex: n };
+  },
+  // ── Aspect ratio ───────────────────────────────────────────────────────────
+  aspect: ({ value, isArbitrary }) => {
+    if (isArbitrary) return { aspectRatio: value };
+    const presets = { auto: "auto", square: 1, video: 16 / 9 };
+    if (!(value in presets)) return null;
+    const v = presets[value];
+    if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
+    return { aspectRatio: v };
+  },
+  // ── Columns (web-only) ─────────────────────────────────────────────────────
+  columns: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { columnCount: value };
+    if (value === "auto") return { columnCount: "auto" };
+    const n = parseInt(value, 10);
+    if (!isNaN(n)) return { columnCount: n };
+    const widths = {
+      "3xs": "16rem",
+      "2xs": "18rem",
+      xs: "20rem",
+      sm: "24rem",
+      md: "28rem",
+      lg: "32rem",
+      xl: "36rem",
+      "2xl": "42rem",
+      "3xl": "48rem",
+      "4xl": "56rem",
+      "5xl": "64rem",
+      "6xl": "72rem",
+      "7xl": "80rem"
+    };
+    return widths[value] ? { columnWidth: widths[value] } : null;
+  }
+};
+
+// src/core/resolvers/typography.ts
+function resolveFontSize(value, fontSizes, isArbitrary) {
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
+  return fontSizes[value] ?? null;
+}
+var typographyResolvers = {
+  // ── Text ───────────────────────────────────────────────────────────────────
+  text: ({ value, isArbitrary }, { colors, fontSize }) => {
+    const size = resolveFontSize(value, fontSize, false);
+    if (!isArbitrary && size !== null) return { fontSize: size };
+    if (isArbitrary) {
+      if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
+        return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
+      }
+      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
+  },
+  "text-opacity": ({ value, isArbitrary }, _) => {
+    if (!getEffectiveIsWeb()) return null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
+    return { "--text-opacity": v };
+  },
+  // ── Text decoration advanced (web-only) ───────────────────────────────────
+  decoration: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) {
+      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
+      return { textDecorationColor: value };
+    }
+    const thickTokens = {
+      auto: "auto",
+      "from-font": "from-font",
+      "0": "0px",
+      "1": "1px",
+      "2": "2px",
+      "4": "4px",
+      "8": "8px"
+    };
+    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
+    const styleTokens = {
+      solid: "solid",
+      dashed: "dashed",
+      dotted: "dotted",
+      double: "double",
+      wavy: "wavy"
+    };
+    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { textDecorationColor: color } : null;
+  },
+  "underline-offset": ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { textUnderlineOffset: value };
+    const offsets = {
+      auto: "auto",
+      "0": "0px",
+      "1": "1px",
+      "2": "2px",
+      "4": "4px",
+      "8": "8px"
+    };
+    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
+  },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    const presets = { none: "none" };
+    return value in presets ? { content: presets[value] } : null;
+  },
+  // ── Font ───────────────────────────────────────────────────────────────────
+  font: ({ value, isArbitrary }, { fontFamily, fontWeight }) => {
+    if (isArbitrary) return { fontFamily: value };
+    if (value in fontFamily) {
+      const ff = fontFamily[value];
+      return { fontFamily: Array.isArray(ff) ? ff.join(", ") : ff };
+    }
+    if (value in fontWeight) return { fontWeight: String(fontWeight[value]) };
+    return null;
+  },
+  // ── Line height ────────────────────────────────────────────────────────────
+  leading: ({ value, isArbitrary }, { lineHeight }) => {
+    if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
+    const v = lineHeight[value];
+    if (v === void 0) return null;
+    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
+    return { lineHeight: v };
+  },
+  // ── Letter spacing ─────────────────────────────────────────────────────────
+  tracking: ({ value, isArbitrary }, { letterSpacing }) => {
+    if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
+    const v = letterSpacing[value];
+    return v !== void 0 ? { letterSpacing: v } : null;
+  },
+  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
+  "line-clamp": ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
+    const n = parseInt(value, 10);
+    if (isNaN(n) || n < 1) return null;
+    return {
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: n
+    };
+  }
+};
+
+// src/core/resolvers/transform.ts
+var transformResolvers = {
+  // ── Transform extras (web-only) ───────────────────────────────────────────
+  "skew-x": ({ value, negative, isArbitrary }) => {
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
+  },
+  "skew-y": ({ value, negative, isArbitrary }) => {
+    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
+  },
+  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
+  transform: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
+    if (value === "none") return { transform: "none" };
+    return null;
+  },
+  // Transform origin
+  origin: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
+    const origins = {
+      center: "center",
+      top: "top",
+      "top-right": "top right",
+      right: "right",
+      "bottom-right": "bottom right",
+      bottom: "bottom",
+      "bottom-left": "bottom left",
+      left: "left",
+      "top-left": "top left"
+    };
+    return origins[value] ? { transformOrigin: origins[value] } : null;
+  },
+  // ── Scale ──────────────────────────────────────────────────────────────────
+  // Non-arbitrary: scale-150 → value='150' → 150/100 = 1.5
+  // Arbitrary:     scale-[1.5] → value='1.5' → used as-is (already the factor)
+  scale: ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
+  },
+  "scale-x": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
+  },
+  "scale-y": ({ value, isArbitrary }) => {
+    const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
+  },
+  // ── Rotate ─────────────────────────────────────────────────────────────────
+  rotate: ({ value, negative, isArbitrary }) => {
+    if (isArbitrary) {
+      const finalValue = negative ? `-${value}` : value;
+      return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
+    }
+    const deg = parseFloat(value);
+    if (isNaN(deg)) return null;
+    const finalDeg = negative ? -deg : deg;
+    return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
+  },
+  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
+  perspective: ({ value, isArbitrary }) => {
+    if (isArbitrary) {
+      const numPx = parseFloat(value);
+      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
+      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
+    }
+    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
+    const n = parseFloat(value);
+    if (isNaN(n)) return null;
+    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+  }
+};
+
+// src/core/resolvers/effects.ts
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
+var effectResolvers = {
+  // ── Opacity ────────────────────────────────────────────────────────────────
+  opacity: ({ value, isArbitrary }, { opacity }) => {
+    if (isArbitrary) {
+      const v2 = parseFloat(value);
+      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
+    }
+    const v = opacity[value];
+    if (v !== void 0) return { opacity: v };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { opacity: n > 1 ? n / 100 : n };
+  },
+  // ── Shadow ─────────────────────────────────────────────────────────────────
+  shadow: ({ value }, { shadow }) => {
+    const key = value === "" ? "DEFAULT" : value;
+    return shadow[key] ?? null;
+  },
+  // ── Animations (CSS keyframe animations, web-only) ────────────────────────
+  // Each variant injects a @keyframes rule once via the __keyframe marker.
+  // resolver.ts detects __keyframe, injects the rule, then strips the marker
+  // so it never reaches element inline styles.
+  animate: ({ value, isArbitrary }, theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
+  },
+  // ── Transition (web-only; use Animated API on native) ─────────────────────
+  transition: ({ value }) => {
+    if (!getEffectiveIsWeb()) return null;
+    const presets = {
+      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
+      all: "all 150ms",
+      none: "none",
+      colors: "color 150ms, background-color 150ms, border-color 150ms",
+      opacity: "opacity 150ms",
+      shadow: "box-shadow 150ms",
+      transform: "transform 150ms"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transition: v } : null;
+  },
+  duration: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDuration: ms };
+  },
+  delay: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
+    const ms = isArbitrary ? value : `${value}ms`;
+    return { transitionDelay: ms };
+  },
+  ease: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { transitionTimingFunction: value };
+    const presets = {
+      linear: "linear",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    };
+    const v = presets[value];
+    return v !== void 0 ? { transitionTimingFunction: v } : null;
+  }
+};
+
+// src/core/resolvers/misc.ts
+var miscResolvers = {
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
+  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
+  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
+  // take stroke/fill as component PROPS, not style entries, so there's no
+  // reliable way to apply a resolved color through the `style` prop there.
+  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
+  // color-first-then-numeric-fallback disambiguation `border` uses above.
+  stroke: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { stroke: "none" };
+    if (isArbitrary) {
+      const w = toNativeValue(value);
+      return typeof w === "number" ? { strokeWidth: w } : { stroke: value };
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) return { stroke: color };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { strokeWidth: n };
+  },
+  fill: ({ value, isArbitrary }, { colors }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (!value) return null;
+    if (value === "none") return { fill: "none" };
+    if (isArbitrary) return { fill: value };
+    const color = resolveColor(value, colors, false);
+    return color ? { fill: color } : null;
+  },
+  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
+  // Named presets give cross-platform shadow; arbitrary is web-only.
+  "text-shadow": ({ value, isArbitrary }, { colors }) => {
+    if (value === "none") {
+      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
+    }
+    const webPresets = {
+      "": "0 2px 4px rgba(0,0,0,0.3)",
+      sm: "0 1px 2px rgba(0,0,0,0.3)",
+      md: "0 4px 6px rgba(0,0,0,0.3)",
+      lg: "0 8px 16px rgba(0,0,0,0.5)",
+      xl: "0 16px 32px rgba(0,0,0,0.5)"
+    };
+    const nativePresets = {
+      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
+      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
+      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
+      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
+      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
+    };
+    if (value in webPresets) {
+      if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
+      return nativePresets[value] ?? null;
+    }
+    if (isArbitrary) {
+      return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
+    }
+    const color = resolveColor(value, colors, false);
+    if (color) {
+      return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
+    }
+    return null;
+  }
+};
+
+// src/core/utilities.ts
+var RESOLVERS = {
+  ...colorResolvers,
+  ...spacingResolvers,
+  ...borderResolvers,
+  ...layoutResolvers,
+  ...typographyResolvers,
+  ...filterResolvers,
+  ...transformResolvers,
+  ...effectResolvers,
+  ...miscResolvers
+};
+var NAMED_GROUP_PEER_MARKER_RE = /^(group|peer)\/.+$/;
+function resolveUtility(parsed, theme) {
+  if (!parsed.value) {
+    if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
+    if (NAMED_GROUP_PEER_MARKER_RE.test(parsed.utility)) return getEffectiveIsWeb() ? {} : null;
+  }
+  const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
+  if (resolver) return resolver(parsed, theme);
+  return null;
+}
+var PLUGIN_STANDALONE = {};
+var PLUGIN_RESOLVERS = {};
+function clearPluginUtilities() {
+  for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
+  for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
+  _sortedPrefixes = null;
+  _standaloneNames = null;
+}
+function getPluginStandaloneMap() {
+  return PLUGIN_STANDALONE;
+}
+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/modeAwareColors.ts
+var _modeAwareMapCache = /* @__PURE__ */ new WeakMap();
+function buildModeAwareMap(colors) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [name, entry] of Object.entries(colors)) {
+    if (isModeAwareColor(entry)) {
+      map.set(name, entry);
+    } else if (entry && typeof entry === "object") {
+      for (const [shade, val] of Object.entries(entry)) {
+        if (isModeAwareColor(val)) map.set(`${name}-${shade}`, val);
+      }
+    }
+  }
+  return map;
+}
+function getModeAwareMap(colors) {
+  let map = _modeAwareMapCache.get(colors);
+  if (!map) {
+    map = buildModeAwareMap(colors);
+    _modeAwareMapCache.set(colors, map);
+  }
+  return map;
+}
+function expandModeAwareColorClasses(classString, colors) {
+  const map = getModeAwareMap(colors);
+  if (map.size === 0) return classString;
+  const tokens = splitClassTokens(classString);
+  let changed = false;
+  const out = [];
+  for (const token of tokens) {
+    const parsed = parseClass(token);
+    if (!parsed || parsed.isArbitrary) {
+      out.push(token);
+      continue;
+    }
+    const slashIdx = parsed.value.indexOf("/");
+    const colorPart = slashIdx > 0 ? parsed.value.slice(0, slashIdx) : parsed.value;
+    const opacitySuffix = slashIdx > 0 ? parsed.value.slice(slashIdx) : "";
+    const pair = map.get(colorPart);
+    if (!pair) {
+      out.push(token);
+      continue;
+    }
+    changed = true;
+    const bang = parsed.important ? "!" : "";
+    const modPrefix = parsed.modifiers.map((m) => `${m}:`).join("");
+    const explicitScheme = parsed.modifiers.map((m) => getModifier(m)?.darkScheme).find((s) => s);
+    if (explicitScheme) {
+      const side = explicitScheme === "dark" ? pair.dark : pair.light;
+      out.push(`${bang}${modPrefix}${parsed.utility}-[${side}]${opacitySuffix}`);
+      continue;
+    }
+    out.push(`${bang}${modPrefix}${parsed.utility}-[${pair.light}]${opacitySuffix}`);
+    out.push(`${bang}dark:${modPrefix}${parsed.utility}-[${pair.dark}]${opacitySuffix}`);
+  }
+  return changed ? out.join(" ") : classString;
+}
+
+// src/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/generateTypesDts.ts
+var HEADER = `// AUTO-GENERATED by Kbach from your kbach.config.js \u2014 do not edit by hand.
+// Regenerated automatically every time your dev server / Metro picks up a
+// change to that file. Safe (and recommended) to add to .gitignore.
+//
+// Gives useColors()/useSpacing() full autocomplete and typo-catching for your
+// custom colors/spacing keys with zero manual setup \u2014 see KbachCustomColors'
+// doc comment in @kbach/ui if you'd rather hand-author this instead.
+import '@kbach/ui';
+`;
+var IDENT_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function propKey(name) {
+  return IDENT_RE.test(name) ? name : JSON.stringify(name);
+}
+function generateKbachTypesDts(theme) {
+  const colorLines = [];
+  for (const [name, value] of Object.entries(theme.colors)) {
+    if (name in defaultColors) continue;
+    const isFlat = typeof value === "string" || isModeAwareColor(value);
+    colorLines.push(`    ${propKey(name)}: ${isFlat ? "string" : "ColorScale"};`);
+  }
+  const spacingLines = [];
+  for (const key of Object.keys(theme.spacing)) {
+    if (key in defaultTheme.spacing) continue;
+    spacingLines.push(`    ${propKey(key)}: true;`);
+  }
+  if (colorLines.length === 0 && spacingLines.length === 0) return "";
+  const body = [
+    colorLines.length > 0 ? `  interface KbachCustomColors {
+${colorLines.join("\n")}
+  }` : null,
+    spacingLines.length > 0 ? `  interface KbachCustomSpacing {
+${spacingLines.join("\n")}
+  }` : null
+  ].filter((s) => s !== null).join("\n\n");
+  return `${HEADER}
+declare module '@kbach/ui' {
+${body}
+}
+`;
+}
+
+// src/core/reset.ts
+var RESET_STYLE_ID = "kbach-reset";
+var BASE_RESET = [
+  // border-style: solid means border-N utilities show a visible border without an extra border-solid class.
+  // border-width: 0 keeps all elements borderless by default.
+  "*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }",
+  "body { margin: 0; padding: 0; }",
+  "h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }",
+  "p { margin: 0; }",
+  "a { color: inherit; text-decoration: none; }",
+  "ul, ol { margin: 0; padding: 0; list-style: none; }",
+  "img, video, svg { display: block; max-width: 100%; }",
+  // appearance: none is deliberately NOT applied to checkbox/radio/select below —
+  // stripping it hides their native checkmark/arrow with nothing rendered in its
+  // place, leaving an invisible checkbox or an arrow-less <select> that looks like
+  // plain text. Text-like inputs, textarea, and button don't have that problem
+  // (their native chrome is just a skin around content utilities can fully
+  // restyle), so they keep the blank-canvas treatment.
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // Native checkbox/radio/range still get typography + spacing normalized, and
+  // accent-color re-themes their native indicator to the current text color
+  // instead of the browser/OS default blue, so they stay on-brand without
+  // needing to be rebuilt from scratch.
+  "input[type='checkbox'], input[type='radio'], input[type='range'] { margin: 0; font: inherit; accent-color: currentColor; }",
+  // select keeps its native chrome (border/background/arrow are all part of the
+  // same OS-drawn widget that appearance: none would blank out) — only typography
+  // and spacing are normalized so it still matches surrounding text.
+  "select { margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  "button { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-align: inherit; }",
+  "button, [role='button'] { cursor: pointer; }",
+  ":disabled { cursor: default; }",
+  "textarea { resize: vertical; }",
+  // Firefox renders placeholders at ~54% opacity by default; every other browser uses 1 —
+  // normalize to 1 so placeholder color is consistent and fully controlled by the placeholder: modifier.
+  "::placeholder { opacity: 1; }",
+  "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; }",
+  "input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }",
+  "fieldset { padding: 0; margin: 0; }",
+  "table { border-collapse: collapse; border-spacing: 0; }"
+].join("\n");
+
+// src/core/responsiveStore.ts
+var store = { width: 0, notifiedWidth: 0, screens: {}, listeners: /* @__PURE__ */ new Set() };
+function syncGlobalWidth(width) {
+  store.width = width;
+}
+function syncGlobalScreens(screens) {
+  store.screens = screens;
+}
+function getGlobalScreens() {
+  return store.screens;
+}
+function setGlobalWidth(width) {
+  store.width = width;
+  if (store.notifiedWidth === width) return;
+  store.notifiedWidth = width;
+  for (const l of store.listeners) l();
+}
+function getGlobalWidth() {
+  return store.width;
+}
+function subscribeGlobalWidth(listener) {
+  store.listeners.add(listener);
+  return () => store.listeners.delete(listener);
+}
+function getActiveBreakpoints(width, screens) {
+  const w = width ?? store.width;
+  const s = screens ?? store.screens;
+  const active = /* @__PURE__ */ new Set();
+  for (const [name, minW] of Object.entries(s)) {
+    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 _defaultFontFamily;
+function setDefaultFontFamily(font) {
+  _defaultFontFamily = font;
+}
+function getDefaultFontFamily() {
+  return _defaultFontFamily;
+}
+var _styleEl = null;
+var _ruleIndexByKey = /* @__PURE__ */ new Map();
+var _sheetKeys = [];
+var _ruleOrderByKey = /* @__PURE__ */ new Map();
+function findInsertionIndex(order) {
+  let lo = 0, hi = _sheetKeys.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (_ruleOrderByKey.get(_sheetKeys[mid]) > order) hi = mid;
+    else lo = mid + 1;
+  }
+  return lo;
+}
+function evictInjectedRule(rule) {
+  const idx = _ruleIndexByKey.get(rule);
+  _ruleIndexByKey.delete(rule);
+  _ruleOrderByKey.delete(rule);
+  if (idx === void 0) return;
+  const sheet = _styleEl?.sheet;
+  if (!sheet) return;
+  try {
+    sheet.deleteRule(idx);
+  } catch {
+    return;
+  }
+  _sheetKeys.splice(idx, 1);
+  for (const [key, i] of _ruleIndexByKey) {
+    if (i > idx) _ruleIndexByKey.set(key, i - 1);
+  }
+}
+var _injectedRules = new LRUCache(5e4, evictInjectedRule);
+var _runtimeCSSDisabled = false;
+function disableRuntimeCSS() {
+  _runtimeCSSDisabled = true;
+}
+function isRuntimeCSSDisabled() {
+  return _runtimeCSSDisabled;
+}
+function getStyleEl() {
+  if (_styleEl) return _styleEl;
+  _styleEl = document.createElement("style");
+  _styleEl.setAttribute("data-kbach", "");
+  document.head.appendChild(_styleEl);
+  return _styleEl;
+}
+function injectRule(rule, order) {
+  if (isRuntimeCSSDisabled()) return;
+  if (_injectedRules.get(rule)) return;
+  try {
+    const sheet = getStyleEl().sheet;
+    if (sheet) {
+      const idx = findInsertionIndex(order);
+      sheet.insertRule(rule, idx);
+      _sheetKeys.splice(idx, 0, rule);
+      for (const [key, i] of _ruleIndexByKey) {
+        if (i >= idx) _ruleIndexByKey.set(key, i + 1);
+      }
+      _ruleIndexByKey.set(rule, idx);
+      _ruleOrderByKey.set(rule, order);
+      _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 TEXT_ONLY_STYLE_KEYS = [
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textAlignVertical",
+  "textDecorationLine",
+  "textDecorationColor",
+  "textDecorationStyle",
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  "textTransform",
+  "writingDirection",
+  "includeFontPadding",
+  "verticalAlign"
+];
+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, order) {
+  const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
+  for (const r of cssRules) injectRule(r, order);
+  return cssRules;
+}
+function isPureDisplayStyle(styles) {
+  const keys = Object.keys(styles);
+  return keys.length === 1 && keys[0] === "display";
+}
+function resolve(classString, theme, darkMode = "attribute") {
+  const cache = getThemeCache(theme);
+  const cacheKey = `${classString}::${darkMode}::${getEffectiveIsWeb() ? "web" : "native"}`;
+  const cached = cache.get(cacheKey);
+  if (cached) {
+    if (isWeb) {
+      for (const { rule, order } of cached.rules) injectRule(rule, order);
+    }
+    return cached.result;
+  }
+  const result = {};
+  const rules = [];
+  const onWeb = isWeb;
+  for (const parsed of parseClasses(expandModeAwareColorClasses(classString, theme.colors))) {
+    const styles = resolveUtility(parsed, theme);
+    if (!styles) {
+      if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility) && !parsed.original.startsWith("__")) {
+        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) {
+      const order = getModifierOrder(bucketKey) + (isPureDisplayStyle(styles) ? 0.5 : 0);
+      for (const r of injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important, order)) {
+        rules.push({ rule: r, order });
+      }
+    }
+  }
+  cache.set(cacheKey, { result, rules });
+  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();
+    const r = result;
+    const looksLikeText = TEXT_ONLY_STYLE_KEYS.some((k) => k in r);
+    if (defaultFont && looksLikeText && !("fontFamily" in r)) {
+      r.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();
+  _ruleOrderByKey.clear();
+  _sheetKeys.length = 0;
+  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 configStore = { resolved: null, listeners: /* @__PURE__ */ new Set() };
+function getConfig() {
+  if (configStore.resolved) return configStore.resolved;
+  configStore.resolved = buildConfig({});
+  return configStore.resolved;
+}
+function resetConfig() {
+  configStore.resolved = null;
+}
+function resolveColorRefs(colors) {
+  const MAX_DEPTH = 5;
+  function resolveChain(raw, side) {
+    let current = raw;
+    for (let i = 0; i < MAX_DEPTH; i++) {
+      const next = resolveOneRef(current, side);
+      if (!next || next === current) break;
+      current = next;
+    }
+    return current;
+  }
+  function resolveOneRef(ref, side) {
+    const slashIdx = ref.indexOf("/");
+    if (slashIdx > 0) {
+      const baseName = ref.slice(0, slashIdx);
+      const opacity = Number(ref.slice(slashIdx + 1));
+      if (!Number.isFinite(opacity)) return null;
+      let baseRef;
+      const entry2 = colors[baseName];
+      if (typeof entry2 === "string") {
+        baseRef = entry2;
+      } else if (isModeAwareColor(entry2)) {
+        if (!side) return null;
+        baseRef = entry2[side];
+      } else if (entry2 && typeof entry2 === "object" && "6" in entry2) {
+        const v = entry2["6"];
+        baseRef = typeof v === "string" ? v : void 0;
+      }
+      if (baseRef === void 0) return null;
+      const baseHex = resolveChain(baseRef, side);
+      const a = opacity > 1 ? opacity / 100 : opacity;
+      return hexToRgba(baseHex, a);
+    }
+    const split = splitColorShadeRef(ref);
+    if (!split) return null;
+    const { name, shade } = split;
+    if (!/^\d+$/.test(shade)) return null;
+    const entry = colors[name];
+    if (!entry || typeof entry !== "object" || isModeAwareColor(entry)) return null;
+    const target = entry[shade];
+    return typeof target === "string" ? target : null;
+  }
+  function resolveValue(val) {
+    return typeof val === "string" ? resolveChain(val, null) : { light: resolveChain(val.light, "light"), dark: resolveChain(val.dark, "dark") };
+  }
+  const out = {};
+  for (const [key, val] of Object.entries(colors)) {
+    if (typeof val === "string" || isModeAwareColor(val)) {
+      out[key] = resolveValue(val);
+    } else {
+      const shades = {};
+      for (const [shade, v] of Object.entries(val)) {
+        shades[shade] = resolveValue(v);
+      }
+      out[key] = shades;
+    }
+  }
+  return out;
+}
+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 pluginAPI = makePluginAPI(resolved.theme);
+  for (const plugin of resolved.plugins) {
+    plugin(pluginAPI);
+  }
+  const rawSans = theme.fontFamily?.sans;
+  const sansFontValue = Array.isArray(rawSans) ? rawSans[0] : rawSans;
+  const nativeSansFont = sansFontValue?.split(",")[0]?.trim().replace(/^['"]|['"]$/g, "");
+  setDefaultFontFamily(nativeSansFont && nativeSansFont !== "System" ? nativeSansFont : void 0);
+  injectGlobalStyles(resolved.theme);
+  return resolved;
+}
+function _selectorToModifierDef(selector) {
+  const s = selector.trim();
+  if (s.startsWith("@media ")) {
+    return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
+  }
+  if (s.startsWith("::") || s.startsWith(":") && !s.includes(" ") && !s.includes("&") && !s.includes("(")) {
+    return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
+  }
+  return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
+}
+function makePluginAPI(theme) {
+  const standalone = getPluginStandaloneMap();
+  return {
+    addUtility(name, styles) {
+      standalone[name] = styles;
+    },
+    addVariant(name, selectorOrDef) {
+      const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
+      registerModifier(name, def);
+    },
+    theme(path, defaultValue) {
+      const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
+      let current = theme;
+      for (const part of parts) {
+        if (current === null || typeof current !== "object") return defaultValue;
+        current = current[part];
+      }
+      return current ?? defaultValue;
+    },
+    e(className) {
+      return className.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+    }
+  };
+}
+function onConfigChange(listener) {
+  configStore.listeners.add(listener);
+  return () => configStore.listeners.delete(listener);
+}
+function updateConfig(userConfig) {
+  clearCache();
+  configStore.resolved = buildConfig(userConfig);
+  configStore._src = userConfig;
+  for (const listener of configStore.listeners) {
+    listener(configStore.resolved);
+  }
+}
+function initConfig(userConfig) {
+  if (configStore._src === userConfig) return;
+  updateConfig(userConfig);
+}
+
+// src/core/darkModeStore.ts
+var store2 = { isDark: false, notifiedIsDark: false, subscribers: /* @__PURE__ */ new Set() };
+function syncGlobalDarkMode(isDark) {
+  store2.isDark = isDark;
+}
+function setGlobalDarkMode(isDark) {
+  store2.isDark = isDark;
+  if (store2.notifiedIsDark === isDark) return;
+  store2.notifiedIsDark = isDark;
+  for (const sub of store2.subscribers) sub();
+}
+function getGlobalDarkMode() {
+  return store2.isDark;
+}
+function subscribeGlobalDarkMode(callback) {
+  store2.subscribers.add(callback);
+  return () => store2.subscribers.delete(callback);
+}
+
+// src/useSyncExternalStoreShim.ts
+import React from "react";
+var useSyncExternalStore = React.useSyncExternalStore ?? function useSyncExternalStoreFallback(subscribe, getSnapshot, getServerSnapshot) {
+  const isServer = typeof window === "undefined";
+  const [, forceUpdate] = React.useReducer((n) => n + 1, 0);
+  const value = isServer && getServerSnapshot ? getServerSnapshot() : getSnapshot();
+  React.useEffect(() => {
+    if (getSnapshot() !== value) forceUpdate();
+    return subscribe(forceUpdate);
+  }, [subscribe]);
+  return value;
+};
+
+// src/useGlobalDarkMode.ts
+var NOOP_SUB = (_) => () => {
+};
+var FALSE_SNAP = () => false;
+function useGlobalDarkMode() {
+  return useSyncExternalStore(
+    subscribeGlobalDarkMode,
+    getGlobalDarkMode,
+    () => false
+    // SSR: default light
+  );
+}
+function useConditionalGlobalDarkMode(active) {
+  return useSyncExternalStore(
+    active ? subscribeGlobalDarkMode : NOOP_SUB,
+    active ? getGlobalDarkMode : FALSE_SNAP,
+    FALSE_SNAP
+  );
+}
+
+// src/shared-utils.ts
+function hasResponsiveBuckets(resolved) {
+  const responsiveMods = getResponsiveModifiers();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (responsiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+function hasInteractiveBuckets(resolved) {
+  const interactiveMods = getInteractiveModifiers();
+  for (const key of Object.keys(resolved)) {
+    if (key === "base") continue;
+    for (const mod of key.split(":")) {
+      if (interactiveMods.has(mod)) return true;
+    }
+  }
+  return false;
+}
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
+function stripInternalMarkers(s) {
+  delete s.__divideX;
+  delete s.__divideY;
+  delete s.__divideColor;
+  delete s.__divideStyle;
+  delete s.__keyframe;
+}
+function stripWebOnlyProps(s) {
+  if (s.display === "grid" || s.display === "inline-grid") delete s.display;
+  delete s.gridTemplateColumns;
+  delete s.gridTemplateRows;
+  delete s.gridColumn;
+  delete s.gridRow;
+  delete s.gridArea;
+  delete s.gridColumnStart;
+  delete s.gridColumnEnd;
+  delete s.gridRowStart;
+  delete s.gridRowEnd;
+  delete s.gridAutoFlow;
+  delete s.gridAutoColumns;
+  delete s.gridAutoRows;
+  delete s.placeItems;
+  delete s.placeContent;
+  delete s.justifyItems;
+  delete s.placeSelf;
+  delete s.justifySelf;
+  if (s.position === "sticky" || s.position === "fixed" || s.position === "static") {
+    delete s.position;
+  }
+}
+function composeNativeStyle(computed, userStyle) {
+  if (!userStyle) return computed;
+  return Array.isArray(userStyle) ? [computed, ...userStyle] : [computed, userStyle];
+}
+
+// src/web-substitute.ts
+var _rnToHtml = {
+  View: "div",
+  SafeAreaView: "div",
+  KeyboardAvoidingView: "div",
+  ScrollView: "div",
+  VirtualizedList: "div",
+  FlatList: "div",
+  SectionList: "div",
+  Text: "span",
+  TextInput: "input",
+  Image: "img",
+  ImageBackground: "div",
+  Pressable: "div",
+  TouchableOpacity: "div",
+  TouchableHighlight: "div",
+  TouchableWithoutFeedback: "div",
+  TouchableNativeFeedback: "div"
+};
+var _userMap = /* @__PURE__ */ new Map();
+var _cache = /* @__PURE__ */ new WeakMap();
+function registerWebElement(rnComponent, htmlTag) {
+  if (typeof rnComponent !== "object" && typeof rnComponent !== "function") return;
+  _userMap.set(rnComponent, htmlTag);
+  _cache.delete(rnComponent);
+}
+var _forwardRefOrMemoType = /* @__PURE__ */ new Set([
+  /* @__PURE__ */ Symbol.for("react.forward_ref"),
+  /* @__PURE__ */ Symbol.for("react.memo")
+]);
+function looksLikeRealRNPrimitive(type) {
+  const t = type.$$typeof;
+  if (t !== void 0) return _forwardRefOrMemoType.has(t);
+  return !!type.prototype?.isReactComponent;
+}
+function getWebTag(type, props) {
+  if (typeof type === "string") return null;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return null;
+  const obj = type;
+  if (_userMap.has(obj)) return _userMap.get(obj);
+  if (!looksLikeRealRNPrimitive(obj)) return null;
+  const name = obj.displayName ?? obj.name;
+  if (!name) {
+    _cache.set(obj, null);
+    return null;
+  }
+  if (name === "TextInput") {
+    const multiline = !!props && (props.multiline === true || Number(props.numberOfLines) > 1);
+    return multiline ? "textarea" : "input";
+  }
+  if (_cache.has(obj)) return _cache.get(obj);
+  const tag = _rnToHtml[name] ?? null;
+  _cache.set(obj, tag);
+  return tag;
+}
+function getImpliedRNClasses(webTag, resolvedBase) {
+  if (!webTag || !resolvedBase) return void 0;
+  const classes = [];
+  if (resolvedBase.position === void 0) classes.push("relative");
+  const explicitDisplay = resolvedBase.display;
+  const hasFlexItemProps = "flexGrow" in resolvedBase || "flexShrink" in resolvedBase || "flex" in resolvedBase || "gap" in resolvedBase || "columnGap" in resolvedBase || "rowGap" in resolvedBase;
+  const willBeFlex = explicitDisplay === "flex" || explicitDisplay === void 0 && hasFlexItemProps;
+  if (willBeFlex && (explicitDisplay === void 0 || resolvedBase.flexDirection === void 0)) {
+    classes.push("flex-col");
+  }
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+var _rnOnlyProps = /* @__PURE__ */ new Set([
+  // Interaction
+  "onLongPress",
+  "delayLongPress",
+  "activeOpacity",
+  "underlayColor",
+  "hitSlop",
+  "pressRetentionOffset",
+  "android_ripple",
+  "android_disableSound",
+  "onHoverIn",
+  "onHoverOut",
+  "onHoverStart",
+  "onHoverEnd",
+  // Layout event
+  "onLayout",
+  // Accessibility
+  "accessible",
+  "accessibilityState",
+  "accessibilityLiveRegion",
+  "importantForAccessibility",
+  // Platform
+  "nativeID",
+  "collapsable",
+  "needsOffscreenAlphaCompositing",
+  "renderToHardwareTextureAndroid",
+  "shouldRasterizeIOS",
+  "focusable",
+  "hasTVPreferredFocus",
+  // 'pointerEvents' is handled in transformToWebProps (mapped to CSS style)
+  // Text
+  "selectable",
+  "allowFontScaling",
+  "adjustsFontSizeToFit",
+  "minimumFontScale",
+  "ellipsizeMode",
+  "numberOfLines",
+  "onTextLayout",
+  "textBreakStrategy",
+  "lineBreakStrategyIOS",
+  // TextInput
+  "multiline",
+  // NOTE: 'resizeMode' (Image's prop, not TextInput's) deliberately does NOT
+  // go here — it's handled below in the isImage branch (mapped to CSS
+  // object-fit). Blacklisting it here would make that branch unreachable.
+  "blurOnSubmit",
+  "clearButtonMode",
+  "clearTextOnFocus",
+  "enablesReturnKeyAutomatically",
+  "returnKeyType",
+  "spellCheck",
+  // ScrollView
+  "scrollEnabled",
+  "showsVerticalScrollIndicator",
+  "showsHorizontalScrollIndicator",
+  "contentContainerStyle",
+  // 'horizontal' is handled in transformToWebProps (converted to CSS overflow-x).
+  "keyboardShouldPersistTaps",
+  "keyboardDismissMode",
+  "pagingEnabled",
+  "scrollEventThrottle",
+  "decelerationRate",
+  "bounces",
+  "alwaysBounceHorizontal",
+  "alwaysBounceVertical",
+  "snapToAlignment",
+  "snapToInterval",
+  "snapToOffsets",
+  "removeClippedSubviews",
+  "overScrollMode",
+  "stickyHeaderIndices",
+  "invertStickyHeaders",
+  "onScrollBeginDrag",
+  "onScrollEndDrag",
+  "onMomentumScrollBegin",
+  "onMomentumScrollEnd",
+  "contentInset",
+  "contentInsetAdjustmentBehavior",
+  "automaticallyAdjustContentInsets",
+  "automaticallyAdjustsScrollIndicatorInsets",
+  // expo-image
+  "contentPosition",
+  "cachePolicy",
+  "recyclingKey",
+  "blurRadius",
+  "fadeDuration",
+  "responsivePolicy",
+  "tintColor",
+  "allowDownscaling",
+  "placeholderContentFit",
+  // FlatList / SectionList
+  "data",
+  "renderItem",
+  "keyExtractor",
+  "getItemLayout",
+  "initialScrollIndex",
+  "initialNumToRender",
+  "maxToRenderPerBatch",
+  "windowSize",
+  "updateCellsBatchingPeriod",
+  "onEndReached",
+  "onEndReachedThreshold",
+  "ListHeaderComponent",
+  "ListFooterComponent",
+  "ListEmptyComponent",
+  "ListHeaderComponentStyle",
+  "ListFooterComponentStyle",
+  "ItemSeparatorComponent",
+  "SectionSeparatorComponent",
+  "inverted",
+  "getItem",
+  "getItemCount"
+]);
+var _pressableNames = /* @__PURE__ */ new Set([
+  "Pressable",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "TouchableNativeFeedback"
+]);
+var _keyboardTypeMap = {
+  "numeric": "number",
+  "number-pad": "number",
+  "decimal-pad": "decimal",
+  "email-address": "email",
+  "phone-pad": "tel",
+  "url": "url"
+};
+var _resizeModeMap = {
+  "contain": "contain",
+  "cover": "cover",
+  "stretch": "fill",
+  "center": "none",
+  "repeat": "none"
+};
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
+var _placeholderRuleInjected = false;
+function ensurePlaceholderColorRuleInjected() {
+  if (_placeholderRuleInjected || typeof document === "undefined") return;
+  _placeholderRuleInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-kbach-placeholder", "");
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
+  document.head.appendChild(style);
+}
+function transformToWebProps(originalName, tag, props) {
+  const out = {};
+  const isPressable = _pressableNames.has(originalName);
+  const isTextInput = originalName === "TextInput";
+  const isImage = originalName === "Image" || originalName === "ImageBackground";
+  const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
+  let pendingStyle = null;
+  for (const [k, v] of Object.entries(props)) {
+    if (_rnOnlyProps.has(k)) continue;
+    if (k === "onPress") {
+      if (!("onClick" in props)) out.onClick = v;
+      continue;
+    }
+    if (k === "accessibilityLabel") {
+      if (out["aria-label"] == null) out["aria-label"] = v;
+      continue;
+    }
+    if (k === "accessibilityRole") {
+      if (out.role == null) out.role = v;
+      continue;
+    }
+    if (k === "testID") {
+      if (out["data-testid"] == null) out["data-testid"] = v;
+      continue;
+    }
+    if (isTextInput) {
+      if (k === "onChangeText") {
+        if (!("onChange" in props)) out.onChange = (e) => v(e.target.value);
+        continue;
+      }
+      if (k === "onSubmitEditing") {
+        if (!("onKeyDown" in props)) {
+          out.onKeyDown = (e) => {
+            if (e.key === "Enter") v();
+          };
+        }
+        continue;
+      }
+      if (k === "placeholderTextColor") {
+        if (v) {
+          ensurePlaceholderColorRuleInjected();
+          out[PLACEHOLDER_RULE_ATTR] = "";
+          pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
+        }
+        continue;
+      }
+      if (k === "secureTextEntry") {
+        if (v && !("type" in props)) out.type = "password";
+        continue;
+      }
+      if (k === "keyboardType") {
+        if (!("type" in props) && !props.secureTextEntry) {
+          const mapped = _keyboardTypeMap[v];
+          if (mapped) out.type = mapped;
+        }
+        continue;
+      }
+      if (k === "editable") {
+        if (v === false) out.readOnly = true;
+        continue;
+      }
+      if (k === "maxLength") {
+        out.maxLength = v;
+        continue;
+      }
+    }
+    if (isScrollable && k === "horizontal") {
+      if (v) pendingStyle = { ...pendingStyle ?? {}, display: "flex", flexDirection: "row", overflowX: "auto" };
+      continue;
+    }
+    if (k === "pointerEvents") {
+      if (v === "none" || v === "auto") pendingStyle = { ...pendingStyle ?? {}, pointerEvents: v };
+      continue;
+    }
+    if (isImage) {
+      if (k === "source") {
+        if (typeof v === "string") {
+          out.src = v;
+        } else if (v && typeof v === "object" && "uri" in v) {
+          out.src = v.uri;
+          if (v.headers) out["crossOrigin"] = "anonymous";
+        }
+        continue;
+      }
+      if (k === "resizeMode") {
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: _resizeModeMap[v] ?? "cover" };
+        continue;
+      }
+      if (k === "contentFit") {
+        pendingStyle = { ...pendingStyle ?? {}, objectFit: v };
+        continue;
+      }
+      if (k === "defaultSource") continue;
+    }
+    if (k === "style") {
+      if (Array.isArray(v)) {
+        out.style = Object.assign({}, ...v.filter(Boolean));
+      } else if (v != null) {
+        out.style = v;
+      }
+      continue;
+    }
+    out[k] = v;
+  }
+  if (pendingStyle) {
+    out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
+  }
+  if (isPressable && !out.role) out.role = "button";
+  if (isImage && tag === "img" && out.alt == null) out.alt = "";
+  return out;
+}
+
+// src/InteractiveWrapper.tsx
+import React2, { forwardRef, useState, useCallback, useMemo } from "react";
+
+// src/useGlobalWidth.ts
+var NOOP_SUB2 = (_) => () => {
+};
+var ZERO_SNAP = () => 0;
+var EMPTY_BREAKPOINTS = /* @__PURE__ */ new Set();
+var _webListeners = null;
+var _webRaf = 0;
+function _webResizeHandler() {
+  cancelAnimationFrame(_webRaf);
+  _webRaf = requestAnimationFrame(() => {
+    if (_webListeners) for (const cb of _webListeners) cb();
+  });
+}
+function subscribeWebWidth(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  if (!_webListeners) {
+    _webListeners = /* @__PURE__ */ new Set();
+    window.addEventListener("resize", _webResizeHandler);
+  }
+  _webListeners.add(cb);
+  return () => {
+    _webListeners.delete(cb);
+    if (_webListeners.size === 0) {
+      window.removeEventListener("resize", _webResizeHandler);
+      cancelAnimationFrame(_webRaf);
+      _webListeners = null;
+    }
+  };
+}
+function getWebWidth() {
+  return typeof window !== "undefined" ? window.innerWidth : 0;
+}
+function useGlobalWidth() {
+  return useSyncExternalStore(
+    isWeb ? subscribeWebWidth : subscribeGlobalWidth,
+    isWeb ? getWebWidth : getGlobalWidth,
+    ZERO_SNAP
+  );
+}
+function useConditionalWidth(active) {
+  return useSyncExternalStore(
+    active ? isWeb ? subscribeWebWidth : subscribeGlobalWidth : NOOP_SUB2,
+    active ? isWeb ? getWebWidth : getGlobalWidth : ZERO_SNAP,
+    ZERO_SNAP
+  );
+}
+
+// src/InteractiveWrapper.tsx
+var InteractiveWrapper = forwardRef(
+  function InteractiveWrapper2({
+    Component,
+    resolvedStyle,
+    className,
+    style: styleProp,
+    onPressIn,
+    onPressOut,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
+    onPointerCancel,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const isWebPlatform = getEffectiveIsWeb();
+    const isDark = useConditionalGlobalDarkMode(!isWebPlatform);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
+    const width = useConditionalWidth(needsWidth && !isWebPlatform);
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const screens = getGlobalScreens();
+    const [pressed, setPressed] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const handlePressIn = useCallback(chain(onPressIn, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPressIn, isWebPlatform]);
+    const handlePressOut = useCallback(chain(onPressOut, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPressOut, isWebPlatform]);
+    const handlePointerDown = useCallback(chain(onPointerDown, () => {
+      if (!isWebPlatform) setPressed(true);
+    }), [onPointerDown, isWebPlatform]);
+    const handlePointerUp = useCallback(chain(onPointerUp, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerUp, isWebPlatform]);
+    const handlePointerLeave = useCallback(chain(onPointerLeave, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerLeave, isWebPlatform]);
+    const handlePointerCancel = useCallback(chain(onPointerCancel, () => {
+      if (!isWebPlatform) setPressed(false);
+    }), [onPointerCancel, isWebPlatform]);
+    const handleMouseEnter = useCallback(chain(onMouseEnter, () => {
+      if (!isWebPlatform) setHovered(true);
+    }), [onMouseEnter, isWebPlatform]);
+    const handleMouseLeave = useCallback(chain(onMouseLeave, () => {
+      if (!isWebPlatform) setHovered(false);
+    }), [onMouseLeave, isWebPlatform]);
+    const handleFocus = useCallback(chain(onFocus, () => {
+      if (!isWebPlatform) setFocused(true);
+    }), [onFocus, isWebPlatform]);
+    const handleBlur = useCallback(chain(onBlur, () => {
+      if (!isWebPlatform) setFocused(false);
+    }), [onBlur, isWebPlatform]);
+    const { children, disabled, checked, ...restForComponent } = rest;
+    const isNonStringComponent = typeof Component !== "string";
+    const computedStyle = useMemo(
+      () => {
+        if (isWebPlatform) return {};
+        const s = flatten(resolvedStyle, isDark, { pressed, hover: hovered, focus: focused, disabled: !!disabled, checked: !!checked }, breakpoints);
+        stripInternalMarkers(s);
+        if (isNonStringComponent) stripWebOnlyProps(s);
+        return s;
+      },
+      [resolvedStyle, isDark, pressed, hovered, focused, width, screens, disabled, checked, isNonStringComponent]
+    );
+    const skipComputedInline = isWebPlatform;
+    const finalStyle = skipComputedInline ? styleProp ?? void 0 : composeNativeStyle(computedStyle, styleProp);
+    const componentProps = {
+      ref,
+      ...restForComponent,
+      ...disabled !== void 0 ? { disabled } : {},
+      ...checked !== void 0 ? { checked } : {},
+      style: finalStyle,
+      ...!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
+      // likely to be an ordinary web component (React Router's <Link>, Next.js's <Link>, any
+      // custom wrapper) as an actual react-native-web primitive — "not a string" alone was never
+      // a reliable signal that onPressIn/onPressOut are wanted, and forwarding them
+      // unconditionally made React DOM warn "Unknown event handler property" the moment any web
+      // component got an interactive modifier (hover:, active:, …), which is the common case,
+      // not the exception. (A real react-native-web primitive would additionally have this pair
+      // of props silently vanish after hydration anyway, once the browser-only web-substitution
+      // 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 ? {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel
+      } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    return Array.isArray(children) ? React2.createElement(Component, componentProps, ...children) : React2.createElement(Component, componentProps, children);
+  }
+);
+InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
+
+export {
+  isModeAwareColor,
+  isWeb,
+  isNative,
+  setResolveTarget,
+  getEffectiveIsWeb,
+  kbachWarn,
+  getInteractiveModifiers,
+  getModeModifiers,
+  getResponsiveModifiers,
+  parseHexRgb,
+  parseClass,
+  splitClassTokens,
+  normalizeClassString,
+  parseClasses,
+  expandModeAwareColorClasses,
+  defaultColors,
+  defaultTheme,
+  generateKbachTypesDts,
+  RESET_STYLE_ID,
+  BASE_RESET,
+  syncGlobalWidth,
+  syncGlobalScreens,
+  getGlobalScreens,
+  setGlobalWidth,
+  getActiveBreakpoints,
+  getDefaultFontFamily,
+  disableRuntimeCSS,
+  isRuntimeCSSDisabled,
+  resolve,
+  flatten,
+  clearCache,
+  getConfig,
+  resetConfig,
+  buildConfig,
+  onConfigChange,
+  updateConfig,
+  initConfig,
+  syncGlobalDarkMode,
+  setGlobalDarkMode,
+  useSyncExternalStore,
+  useGlobalDarkMode,
+  useConditionalGlobalDarkMode,
+  EMPTY_BREAKPOINTS,
+  useGlobalWidth,
+  useConditionalWidth,
+  hasResponsiveBuckets,
+  hasInteractiveBuckets,
+  chain,
+  stripInternalMarkers,
+  stripWebOnlyProps,
+  composeNativeStyle,
+  registerWebElement,
+  getWebTag,
+  getImpliedRNClasses,
+  transformToWebProps,
+  InteractiveWrapper
+};