@kbach/react 0.6.25 → 0.6.28

package/dist/vite-plugin.mjs

@@ -615,14 +615,16 @@ var defaultTheme = {
   animation: {}
 };
 
-// src/core/utilities.ts
+// src/core/resolvers/color.ts
 function resolveColor(value, colors, isArbitrary) {
   if (isArbitrary) return value;
   const slashIdx = value.indexOf("/");
   const colorPart = slashIdx > 0 ? value.slice(0, slashIdx) : value;
   const opacityPart = slashIdx > 0 ? value.slice(slashIdx + 1) : null;
   let hex = null;
-  if (colorPart in colors) {
+  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 (typeof entry === "object" && "6" in entry) hex = entry["6"];
@@ -687,6 +689,86 @@ function withOpacityVar(color, varName) {
   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);
@@ -719,516 +801,174 @@ function resolveSizing(value, spacing, isArbitrary) {
   }
   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 resolveFontSize(value, fontSizes, isArbitrary) {
-  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
-  return fontSizes[value] ?? 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]: 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 FILTER_COMPOSE = "var(--kb-blur,) var(--kb-brightness,) var(--kb-contrast,) var(--kb-grayscale,) var(--kb-hue-rotate,) var(--kb-invert,) var(--kb-saturate,) var(--kb-sepia,) var(--kb-drop-shadow,)";
-var BACKDROP_FILTER_COMPOSE = "var(--kb-backdrop-blur,) var(--kb-backdrop-brightness,) var(--kb-backdrop-contrast,) var(--kb-backdrop-grayscale,) var(--kb-backdrop-hue-rotate,) var(--kb-backdrop-invert,) var(--kb-backdrop-opacity,) var(--kb-backdrop-saturate,) var(--kb-backdrop-sepia,)";
-var _standalone = null;
-function buildStandalone() {
-  const web = getEffectiveIsWeb();
-  return {
-    // Display
-    // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
-    // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
-    // `grid`, `contents`, `flow-root` have no native equivalent and stay null there.
-    // The inline-* family (inline, inline-block, inline-flex, inline-grid) falls back
-    // to 'flex' on native instead — like plain `flex`, this is a no-op most of the
-    // time, but without it these utilities couldn't re-show a `hidden` element on
-    // native either (null → no style applied → still display:'none').
-    flex: { display: "flex" },
-    block: web ? { display: "block" } : null,
-    "inline-block": { display: web ? "inline-block" : "flex" },
-    inline: { display: web ? "inline" : "flex" },
-    grid: web ? { display: "grid" } : null,
-    grd: web ? { display: "grid" } : null,
-    "inline-flex": { display: web ? "inline-flex" : "flex" },
-    "inline-grid": { display: web ? "inline-grid" : "flex" },
-    hidden: { display: "none" },
-    contents: web ? { display: "contents" } : null,
-    "flow-root": web ? { display: "flow-root" } : null,
-    // Flex direction (both web and native)
-    "flex-row": { flexDirection: "row" },
-    "flex-col": { flexDirection: "column" },
-    "flex-row-reverse": { flexDirection: "row-reverse" },
-    "flex-col-reverse": { flexDirection: "column-reverse" },
-    // Flex wrap (both)
-    "flex-wrap": { flexWrap: "wrap" },
-    "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
-    "flex-nowrap": { flexWrap: "nowrap" },
-    // Flex grow / shrink (both)
-    "flex-grow": { flexGrow: 1 },
-    "flex-grow-0": { flexGrow: 0 },
-    "flex-shrink": { flexShrink: 1 },
-    "flex-shrink-0": { flexShrink: 0 },
-    // Align items (both)
-    "items-start": { alignItems: "flex-start" },
-    "items-end": { alignItems: "flex-end" },
-    "items-center": { alignItems: "center" },
-    "items-baseline": { alignItems: "baseline" },
-    "items-stretch": { alignItems: "stretch" },
-    // Justify content (both)
-    "justify-start": { justifyContent: "flex-start" },
-    "justify-end": { justifyContent: "flex-end" },
-    "justify-center": { justifyContent: "center" },
-    "justify-between": { justifyContent: "space-between" },
-    "justify-around": { justifyContent: "space-around" },
-    "justify-evenly": { justifyContent: "space-evenly" },
-    // Align content (both)
-    "content-start": { alignContent: "flex-start" },
-    "content-end": { alignContent: "flex-end" },
-    "content-center": { alignContent: "center" },
-    "content-between": { alignContent: "space-between" },
-    "content-around": { alignContent: "space-around" },
-    "content-evenly": { alignContent: "space-evenly" },
-    "content-stretch": { alignContent: "stretch" },
-    // Align self (both)
-    "self-auto": { alignSelf: "auto" },
-    "self-start": { alignSelf: "flex-start" },
-    "self-end": { alignSelf: "flex-end" },
-    "self-center": { alignSelf: "center" },
-    "self-stretch": { alignSelf: "stretch" },
-    "self-baseline": { alignSelf: "baseline" },
-    // Text align (both)
-    "text-left": { textAlign: "left" },
-    "text-right": { textAlign: "right" },
-    "text-center": { textAlign: "center" },
-    "text-justify": { textAlign: "justify" },
-    // Font weight shortcuts (both)
-    "font-thin": { fontWeight: "100" },
-    "font-extralight": { fontWeight: "200" },
-    "font-light": { fontWeight: "300" },
-    "font-normal": { fontWeight: "400" },
-    "font-medium": { fontWeight: "500" },
-    "font-semibold": { fontWeight: "600" },
-    "font-bold": { fontWeight: "700" },
-    "font-extrabold": { fontWeight: "800" },
-    "font-black": { fontWeight: "900" },
-    // Text decoration (overline is web-only)
-    underline: { textDecorationLine: "underline" },
-    overline: web ? { textDecorationLine: "overline" } : null,
-    "line-through": { textDecorationLine: "line-through" },
-    "no-underline": { textDecorationLine: "none" },
-    // Text transform (both)
-    uppercase: { textTransform: "uppercase" },
-    lowercase: { textTransform: "lowercase" },
-    capitalize: { textTransform: "capitalize" },
-    "normal-case": { textTransform: "none" },
-    // Font style (both)
-    italic: { fontStyle: "italic" },
-    "non-italic": { fontStyle: "normal" },
-    // Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
-    relative: { position: "relative" },
-    absolute: { position: "absolute" },
-    fixed: web ? { position: "fixed" } : null,
-    sticky: web ? { position: "sticky" } : null,
-    static: web ? { position: "static" } : null,
-    // Visibility (no `visibility` prop on native; use opacity instead)
-    visible: web ? { visibility: "visible" } : null,
-    invisible: web ? { visibility: "hidden" } : { opacity: 0 },
-    // Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
-    "overflow-hidden": { overflow: "hidden" },
-    "overflow-visible": { overflow: "visible" },
-    "overflow-scroll": { overflow: "scroll" },
-    "overflow-auto": web ? { overflow: "auto" } : { overflow: "scroll" },
-    // overflowX / overflowY are web-only
-    "overflow-x-hidden": web ? { overflowX: "hidden" } : null,
-    "overflow-x-scroll": web ? { overflowX: "scroll" } : null,
-    "overflow-x-auto": web ? { overflowX: "auto" } : null,
-    "overflow-y-hidden": web ? { overflowY: "hidden" } : null,
-    "overflow-y-scroll": web ? { overflowY: "scroll" } : null,
-    "overflow-y-auto": web ? { overflowY: "auto" } : null,
-    // Object fit (web-only; use resizeMode prop on RN Image)
-    "object-contain": web ? { objectFit: "contain" } : null,
-    "object-cover": web ? { objectFit: "cover" } : null,
-    "object-fill": web ? { objectFit: "fill" } : null,
-    "object-none": web ? { objectFit: "none" } : null,
-    "object-scale-down": web ? { objectFit: "scale-down" } : null,
-    // Border style (both)
-    "border-solid": { borderStyle: "solid" },
-    "border-dashed": { borderStyle: "dashed" },
-    "border-dotted": { borderStyle: "dotted" },
-    "border-none": { borderWidth: 0 },
-    // Border sides default width (both)
-    "border-t": { borderTopWidth: 1 },
-    "border-r": { borderRightWidth: 1 },
-    "border-b": { borderBottomWidth: 1 },
-    "border-l": { borderLeftWidth: 1 },
-    // Cursor (web-only)
-    "cursor-auto": web ? { cursor: "auto" } : null,
-    "cursor-default": web ? { cursor: "default" } : null,
-    "cursor-pointer": web ? { cursor: "pointer" } : null,
-    "cursor-wait": web ? { cursor: "wait" } : null,
-    "cursor-text": web ? { cursor: "text" } : null,
-    "cursor-move": web ? { cursor: "move" } : null,
-    "cursor-not-allowed": web ? { cursor: "not-allowed" } : null,
-    // User select (web-only)
-    "select-none": web ? { userSelect: "none" } : null,
-    "select-text": web ? { userSelect: "text" } : null,
-    "select-all": web ? { userSelect: "all" } : null,
-    "select-auto": web ? { userSelect: "auto" } : null,
-    // Pointer events (both)
-    "pointer-events-none": { pointerEvents: "none" },
-    "pointer-events-auto": { pointerEvents: "auto" },
-    // Whitespace (web-only; RN Text uses numberOfLines prop instead)
-    "whitespace-normal": web ? { whiteSpace: "normal" } : null,
-    "whitespace-nowrap": web ? { whiteSpace: "nowrap" } : null,
-    "whitespace-pre": web ? { whiteSpace: "pre" } : null,
-    "whitespace-pre-wrap": web ? { whiteSpace: "pre-wrap" } : null,
-    "whitespace-pre-line": web ? { whiteSpace: "pre-line" } : null,
-    // Word break (web-only)
-    "break-normal": web ? { overflowWrap: "normal", wordBreak: "normal" } : null,
-    "break-words": web ? { overflowWrap: "break-word" } : null,
-    "break-all": web ? { wordBreak: "break-all" } : null,
-    // Misc web-only
-    truncate: web ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
-    "box-border": web ? { boxSizing: "border-box" } : null,
-    "box-content": web ? { boxSizing: "content-box" } : null,
-    "appearance-none": web ? { appearance: "none" } : null,
-    "outline-none": web ? { outline: "none", outlineOffset: "0" } : null,
-    outline: web ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
-    resize: web ? { resize: "both" } : null,
-    "resize-none": web ? { resize: "none" } : null,
-    "resize-y": web ? { resize: "vertical" } : null,
-    "resize-x": web ? { resize: "horizontal" } : null,
-    antialiased: web ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
-    "subpixel-antialiased": web ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
-    "overflow-ellipsis": web ? { textOverflow: "ellipsis" } : null,
-    "sr-only": web ? {
-      position: "absolute",
-      width: 1,
-      height: 1,
-      padding: 0,
-      margin: -1,
-      overflow: "hidden",
-      clip: "rect(0,0,0,0)",
-      whiteSpace: "nowrap",
-      border: 0
-    } : null,
-    "not-sr-only": web ? {
-      position: "static",
-      width: "auto",
-      height: "auto",
-      padding: 0,
-      margin: 0,
-      overflow: "visible",
-      clip: "auto",
-      whiteSpace: "normal"
-    } : null,
-    // Lists (web-only)
-    "list-none": web ? { listStyleType: "none" } : null,
-    "list-disc": web ? { listStyleType: "disc" } : null,
-    "list-decimal": web ? { listStyleType: "decimal" } : null,
-    // Background clip (web-only)
-    "bg-clip-border": web ? { backgroundClip: "border-box" } : null,
-    "bg-clip-padding": web ? { backgroundClip: "padding-box" } : null,
-    "bg-clip-content": web ? { backgroundClip: "content-box" } : null,
-    "bg-clip-text": web ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
-    // Background image
-    "bg-none": web ? { backgroundImage: "none" } : null,
-    // Background size (web-only)
-    "bg-auto": web ? { backgroundSize: "auto" } : null,
-    "bg-cover": web ? { backgroundSize: "cover" } : null,
-    "bg-contain": web ? { backgroundSize: "contain" } : null,
-    // Background position (web-only)
-    "bg-center": web ? { backgroundPosition: "center" } : null,
-    "bg-top": web ? { backgroundPosition: "top" } : null,
-    "bg-bottom": web ? { backgroundPosition: "bottom" } : null,
-    "bg-left": web ? { backgroundPosition: "left" } : null,
-    "bg-right": web ? { backgroundPosition: "right" } : null,
-    "bg-left-top": web ? { backgroundPosition: "left top" } : null,
-    "bg-left-bottom": web ? { backgroundPosition: "left bottom" } : null,
-    "bg-right-top": web ? { backgroundPosition: "right top" } : null,
-    "bg-right-bottom": web ? { backgroundPosition: "right bottom" } : null,
-    // Background repeat (web-only)
-    "bg-repeat": web ? { backgroundRepeat: "repeat" } : null,
-    "bg-no-repeat": web ? { backgroundRepeat: "no-repeat" } : null,
-    "bg-repeat-x": web ? { backgroundRepeat: "repeat-x" } : null,
-    "bg-repeat-y": web ? { backgroundRepeat: "repeat-y" } : null,
-    "bg-repeat-round": web ? { backgroundRepeat: "round" } : null,
-    "bg-repeat-space": web ? { backgroundRepeat: "space" } : null,
-    // Background attachment (web-only)
-    "bg-fixed": web ? { backgroundAttachment: "fixed" } : null,
-    "bg-local": web ? { backgroundAttachment: "local" } : null,
-    "bg-scroll": web ? { backgroundAttachment: "scroll" } : null,
-    // Object position (web-only)
-    "object-center": web ? { objectPosition: "center" } : null,
-    "object-top": web ? { objectPosition: "top" } : null,
-    "object-bottom": web ? { objectPosition: "bottom" } : null,
-    "object-left": web ? { objectPosition: "left" } : null,
-    "object-right": web ? { objectPosition: "right" } : null,
-    "object-left-top": web ? { objectPosition: "left top" } : null,
-    "object-left-bottom": web ? { objectPosition: "left bottom" } : null,
-    "object-right-top": web ? { objectPosition: "right top" } : null,
-    "object-right-bottom": web ? { objectPosition: "right bottom" } : null,
-    // Table (web-only)
-    table: web ? { display: "table" } : null,
-    "table-auto": web ? { tableLayout: "auto" } : null,
-    "table-fixed": web ? { tableLayout: "fixed" } : null,
-    "caption-top": web ? { captionSide: "top" } : null,
-    "caption-bottom": web ? { captionSide: "bottom" } : null,
-    "border-collapse": web ? { borderCollapse: "collapse" } : null,
-    "border-separate": web ? { borderCollapse: "separate" } : null,
-    // List style position (web-only)
-    "list-inside": web ? { listStylePosition: "inside" } : null,
-    "list-outside": web ? { listStylePosition: "outside" } : null,
-    // Font variant numeric (web-only)
-    "normal-nums": web ? { fontVariantNumeric: "normal" } : null,
-    ordinal: web ? { fontVariantNumeric: "ordinal" } : null,
-    "slashed-zero": web ? { fontVariantNumeric: "slashed-zero" } : null,
-    "lining-nums": web ? { fontVariantNumeric: "lining-nums" } : null,
-    "oldstyle-nums": web ? { fontVariantNumeric: "oldstyle-nums" } : null,
-    "proportional-nums": web ? { fontVariantNumeric: "proportional-nums" } : null,
-    "tabular-nums": web ? { fontVariantNumeric: "tabular-nums" } : null,
-    "diagonal-fractions": web ? { fontVariantNumeric: "diagonal-fractions" } : null,
-    "stacked-fractions": web ? { fontVariantNumeric: "stacked-fractions" } : null,
-    // Isolation (web-only)
-    isolate: web ? { isolation: "isolate" } : null,
-    "isolation-auto": web ? { isolation: "auto" } : null,
-    // Backface visibility (both iOS and Android)
-    "backface-visible": { backfaceVisibility: "visible" },
-    "backface-hidden": { backfaceVisibility: "hidden" },
-    // CSS filters — standalone = default/full effect (web-only)
-    grayscale: web ? { "--kb-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
-    invert: web ? { "--kb-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
-    sepia: web ? { "--kb-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
-    // Divide none
-    "divide-none": web ? { __divideX: 0, __divideY: 0 } : null,
-    // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
-    group: web ? {} : null,
-    peer: web ? {} : null,
-    // Text-wrap (web-only)
-    "text-wrap": web ? { textWrap: "wrap" } : null,
-    "text-nowrap": web ? { textWrap: "nowrap" } : null,
-    "text-balance": web ? { textWrap: "balance" } : null,
-    "text-pretty": web ? { textWrap: "pretty" } : null,
-    // Screen sizing — dvw/dvh (dynamic viewport units) instead of vw/vh: on mobile
-    // browsers, vh/vw are pinned to the LARGEST viewport size (address bar hidden),
-    // so `h-screen` overflows behind the address bar when it's shown. dvh/dvw track
-    // the actual visible viewport as browser chrome shows/hides. Desktop behavior
-    // is unchanged since there's no dynamic chrome to account for.
-    // (vw/dvw values are web-only; vh/dvh values work cross-platform via spacing scale for h-*)
-    "w-screen": web ? { width: "100dvw" } : null,
-    "min-h-screen": { minHeight: "100dvh" },
-    "max-h-screen": { maxHeight: "100dvh" },
-    "min-w-screen": web ? { minWidth: "100dvw" } : null,
-    "max-w-screen": web ? { maxWidth: "100dvw" } : null,
-    // max-w named container sizes (mirrors Tailwind's container scale)
-    "max-w-none": { maxWidth: "none" },
-    "max-w-xs": { maxWidth: 320 },
-    "max-w-sm": { maxWidth: 384 },
-    "max-w-md": { maxWidth: 448 },
-    "max-w-lg": { maxWidth: 512 },
-    "max-w-xl": { maxWidth: 576 },
-    "max-w-2xl": { maxWidth: 672 },
-    "max-w-3xl": { maxWidth: 768 },
-    "max-w-4xl": { maxWidth: 896 },
-    "max-w-5xl": { maxWidth: 1024 },
-    "max-w-6xl": { maxWidth: 1152 },
-    "max-w-7xl": { maxWidth: 1280 },
-    "max-w-prose": web ? { maxWidth: "65ch" } : null,
-    // Extended cursors (web-only)
-    "cursor-grab": web ? { cursor: "grab" } : null,
-    "cursor-grabbing": web ? { cursor: "grabbing" } : null,
-    "cursor-zoom-in": web ? { cursor: "zoom-in" } : null,
-    "cursor-zoom-out": web ? { cursor: "zoom-out" } : null,
-    "cursor-crosshair": web ? { cursor: "crosshair" } : null,
-    "cursor-help": web ? { cursor: "help" } : null,
-    "cursor-none": web ? { cursor: "none" } : null,
-    // Overflow clip (web-only)
-    "overflow-clip": web ? { overflow: "clip" } : null,
-    "overflow-x-clip": web ? { overflowX: "clip" } : null,
-    "overflow-y-clip": web ? { overflowY: "clip" } : null,
-    // Scroll behavior (web-only)
-    "scroll-smooth": web ? { scrollBehavior: "smooth" } : null,
-    "scroll-auto": web ? { scrollBehavior: "auto" } : null,
-    // Float (web-only)
-    "float-left": web ? { float: "left" } : null,
-    "float-right": web ? { float: "right" } : null,
-    "float-start": web ? { float: "inline-start" } : null,
-    "float-end": web ? { float: "inline-end" } : null,
-    "float-none": web ? { float: "none" } : null,
-    // Clear (web-only)
-    "clear-left": web ? { clear: "left" } : null,
-    "clear-right": web ? { clear: "right" } : null,
-    "clear-both": web ? { clear: "both" } : null,
-    "clear-start": web ? { clear: "inline-start" } : null,
-    "clear-end": web ? { clear: "inline-end" } : null,
-    "clear-none": web ? { clear: "none" } : null,
-    // Vertical align (web-only)
-    "align-baseline": web ? { verticalAlign: "baseline" } : null,
-    "align-top": web ? { verticalAlign: "top" } : null,
-    "align-middle": web ? { verticalAlign: "middle" } : null,
-    "align-bottom": web ? { verticalAlign: "bottom" } : null,
-    "align-text-top": web ? { verticalAlign: "text-top" } : null,
-    "align-text-bottom": web ? { verticalAlign: "text-bottom" } : null,
-    "align-sub": web ? { verticalAlign: "sub" } : null,
-    "align-super": web ? { verticalAlign: "super" } : null,
-    // Touch action (web-only)
-    "touch-auto": web ? { touchAction: "auto" } : null,
-    "touch-none": web ? { touchAction: "none" } : null,
-    "touch-pan-x": web ? { touchAction: "pan-x" } : null,
-    "touch-pan-y": web ? { touchAction: "pan-y" } : null,
-    "touch-pan-left": web ? { touchAction: "pan-left" } : null,
-    "touch-pan-right": web ? { touchAction: "pan-right" } : null,
-    "touch-pan-up": web ? { touchAction: "pan-up" } : null,
-    "touch-pan-down": web ? { touchAction: "pan-down" } : null,
-    "touch-pinch-zoom": web ? { touchAction: "pinch-zoom" } : null,
-    "touch-manipulation": web ? { touchAction: "manipulation" } : null
-  };
-}
-function getStandalone() {
-  if (!_standalone) _standalone = buildStandalone();
-  return _standalone;
-}
-function makeSpacingResolver(prop) {
-  return ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { [prop]: v } : null;
-  };
-}
-var PADDING_MARGIN_PROPS = {
-  p: "padding",
-  px: "paddingHorizontal",
-  py: "paddingVertical",
-  pt: "paddingTop",
-  pr: "paddingRight",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  m: "margin",
-  mx: "marginHorizontal",
-  my: "marginVertical",
-  mt: "marginTop",
-  mr: "marginRight",
-  mb: "marginBottom",
-  ml: "marginLeft"
-};
-function makeBorderSideResolver(widthProp, colorProp) {
-  return ({ value, isArbitrary }, { colors, borderWidth }) => {
-    if (!value) return { [widthProp]: 1 };
-    if (isArbitrary) {
-      const w2 = toNativeValue(value);
-      if (typeof w2 === "number") return { [widthProp]: w2 };
-      return { [colorProp]: value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (color) return { [colorProp]: color };
-    const w = borderWidth[value];
-    return w !== void 0 ? { [widthProp]: w } : null;
-  };
-}
-var BORDER_SIDE_PROPS = {
-  "border-t": ["borderTopWidth", "borderTopColor"],
-  "border-r": ["borderRightWidth", "borderRightColor"],
-  "border-b": ["borderBottomWidth", "borderBottomColor"],
-  "border-l": ["borderLeftWidth", "borderLeftColor"]
-};
-function keyframeDeclToCSS(decl) {
-  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
-}
-function buildKeyframeCSS(name, steps) {
-  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
-  return `@keyframes ${name} { ${body} }`;
-}
-var BUILTIN_ANIMATIONS = {
-  none: { animation: "none" },
-  spin: {
-    animation: "kb-spin 1s linear infinite",
-    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-  },
-  ping: {
-    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-  },
-  pulse: {
-    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-  },
-  bounce: {
-    animation: "kb-bounce 1s infinite",
-    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-  }
-};
-function buildAnimationValue(animation, keyframes) {
-  const words = animation.trim().split(/\s+/);
-  const name = words[0];
-  if (!name) return { animation };
-  const builtin = BUILTIN_ANIMATIONS[name];
-  if (builtin?.__keyframe) {
-    const kbName = builtin.animation.split(/\s+/, 1)[0];
-    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
-  }
-  const steps = keyframes?.[name];
-  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
-}
-var RESOLVERS = {
-  // ── Background ─────────────────────────────────────────────────────────────
-  bg: ({ value, isArbitrary }, { colors }) => {
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return { backgroundColor: getEffectiveIsWeb() ? withOpacityVar(color, "--bg-opacity") : color };
-  },
-  "bg-opacity": ({ value, isArbitrary }, _) => {
-    if (!getEffectiveIsWeb()) return null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
-    return { "--bg-opacity": v };
-  },
-  // ── Text ───────────────────────────────────────────────────────────────────
-  text: ({ value, isArbitrary }, { colors, fontSize }) => {
-    const size = resolveFontSize(value, fontSize, false);
-    if (!isArbitrary && size !== null) return { fontSize: size };
-    if (isArbitrary) {
-      if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
-        return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
-      }
-      return { color: getEffectiveIsWeb() ? withOpacityVar(value, "--text-opacity") : value };
-    }
-    const color = resolveColor(value, colors, false);
-    if (!color) return null;
-    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
-  },
-  "text-opacity": ({ value, isArbitrary }, _) => {
-    if (!getEffectiveIsWeb()) return null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    const v = isArbitrary ? n > 1 ? n / 100 : n : n / 100;
-    return { "--text-opacity": v };
-  },
-  // ── Padding & margin ───────────────────────────────────────────────────────
-  // Generated below via makeSpacingResolver() — see PADDING_MARGIN_PROPS.
-  // ── Sizing ─────────────────────────────────────────────────────────────────
-  w: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { width: v } : null;
-  },
-  h: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { height: v } : null;
-  },
-  "min-w": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { minWidth: v } : null;
-  },
-  "min-h": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { minHeight: v } : null;
-  },
-  "max-w": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { maxWidth: v } : null;
-  },
-  "max-h": ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { maxHeight: v } : null;
-  },
+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 };
@@ -1285,188 +1025,128 @@ var RESOLVERS = {
     const r = resolveRadius(value, borderRadius, isArbitrary);
     return r !== null ? { borderBottomRightRadius: r } : null;
   },
-  // ── Grid (responsive column count: grid-1 … grid-12, or arbitrary) ───────
-  grid: ({ value, isArbitrary }) => {
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
-  "grid-cols": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
-    if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1 || n > 12) return null;
-    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  "grid-rows": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value) return null;
-    if (isArbitrary) return { gridTemplateRows: value };
-    if (value === "none") return { gridTemplateRows: "none" };
-    const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return { gridTemplateRows: `repeat(${n}, minmax(0, 1fr))` };
-  },
-  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
-  "grid-flow": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const flows = {
-      row: "row",
-      col: "column",
-      dense: "dense",
-      "row-dense": "row dense",
-      "col-dense": "column dense"
-    };
-    const flow = flows[value];
-    return flow ? { gridAutoFlow: flow } : null;
-  },
-  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
-  "auto-cols": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoColumns: value };
-    const presets = {
-      auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    };
-    const v = presets[value];
-    return v ? { gridAutoColumns: v } : null;
-  },
-  "auto-rows": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { gridAutoRows: value };
-    const presets = {
-      auto: "auto",
-      min: "min-content",
-      max: "max-content",
-      fr: "minmax(0, 1fr)"
-    };
-    const v = presets[value];
-    return v ? { gridAutoRows: v } : null;
-  },
-  // ── Grid column placement (web-only) ──────────────────────────────────────
-  "col-span": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridColumn: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumn: `span ${n} / span ${n}` };
-  },
-  "col-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnStart: "auto" };
-    if (isArbitrary) return { gridColumnStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnStart: n };
-  },
-  "col-end": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridColumnEnd: "auto" };
-    if (isArbitrary) return { gridColumnEnd: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridColumnEnd: n };
-  },
-  col: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridColumn: "auto" };
-    if (isArbitrary) return { gridColumn: value };
-    return null;
-  },
-  // ── Grid row placement (web-only) ─────────────────────────────────────────
-  "row-span": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "full") return { gridRow: "1 / -1" };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRow: `span ${n} / span ${n}` };
-  },
-  "row-start": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { gridRowStart: "auto" };
-    if (isArbitrary) return { gridRowStart: value };
-    const n = parseInt(value, 10);
-    return isNaN(n) ? null : { gridRowStart: n };
-  },
-  "row-end": ({ value, isArbitrary }) => {
+  // ── Outline extended (web-only) ───────────────────────────────────────────
+  outline: ({ value, isArbitrary }, { colors }) => {
     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 };
+    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;
   },
-  row: ({ value, isArbitrary }) => {
+  "outline-offset": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (!value || value === "auto") return { gridRow: "auto" };
-    if (isArbitrary) return { gridRow: value };
-    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;
   },
-  // ── Grid alignment (web-only) ──────────────────────────────────────────────
-  // place-items is shorthand for align-items + justify-items on a grid container
-  "place-items": ({ value }) => {
+  // ── 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;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeItems: map[value] } : null;
+    if (value === "reverse") return null;
+    if (!value) return { __divideX: 1 };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { __divideX: n };
   },
-  // place-content is shorthand for align-content + justify-content on a grid container
-  "place-content": ({ value }) => {
+  "divide-y": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch",
-      between: "space-between",
-      around: "space-around",
-      evenly: "space-evenly",
-      baseline: "baseline"
-    };
-    return map[value] ? { placeContent: map[value] } : null;
+    if (value === "reverse") return null;
+    if (!value) return { __divideY: 1 };
+    const n = parseFloat(value);
+    return isNaN(n) ? null : { __divideY: n };
   },
-  // justify-items controls inline-axis alignment of grid items within their cells
-  "justify-items": ({ value }) => {
+  divide: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
-    const map = {
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
+    if (isArbitrary) return { __divideColor: value };
+    const styleTokens = {
+      solid: "solid",
+      dashed: "dashed",
+      dotted: "dotted",
+      double: "double",
+      none: "none"
     };
-    return map[value] ? { justifyItems: map[value] } : null;
+    if (value in styleTokens) return { __divideStyle: styleTokens[value] };
+    const color = resolveColor(value, colors, false);
+    return color ? { __divideColor: color } : 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;
+  // ── 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;
   },
-  // justify-self controls inline-axis self-alignment of a grid item
-  "justify-self": ({ value }) => {
+  // 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 map = {
-      auto: "auto",
-      start: "start",
-      end: "end",
-      center: "center",
-      stretch: "stretch"
+    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}`
     };
-    return map[value] ? { justifySelf: map[value] } : null;
-  },
+  }
+};
+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;
@@ -1601,412 +1281,629 @@ var RESOLVERS = {
     if (value === "none") return { backdropFilter: "none" };
     return null;
   },
-  // ── Background gradient (CSS variable gradient stops, web-only) ──────────
-  "bg-gradient-to": ({ value }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const directions = {
-      t: "to top",
-      tr: "to top right",
-      r: "to right",
-      br: "to bottom right",
-      b: "to bottom",
-      bl: "to bottom left",
-      l: "to left",
-      tl: "to top left"
-    };
-    const dir = directions[value];
-    if (!dir) return null;
-    return {
-      backgroundImage: `linear-gradient(${dir}, var(--kb-gradient-from, transparent), var(--kb-gradient-stops, transparent))`
-    };
-  },
-  from: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return {
-      "--kb-gradient-from": color,
-      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-to, transparent)`
-    };
-  },
-  via: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return {
-      "--kb-gradient-via": color,
-      "--kb-gradient-stops": `var(--kb-gradient-from), var(--kb-gradient-via), var(--kb-gradient-to, transparent)`
-    };
-  },
-  to: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    const color = resolveColor(value, colors, isArbitrary);
-    if (!color) return null;
-    return { "--kb-gradient-to": color };
-  },
-  // ── Transform extras (web-only) ───────────────────────────────────────────
-  "skew-x": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
-  },
-  "skew-y": ({ value, negative, isArbitrary }) => {
-    const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
-    if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
-  },
-  // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
-  transform: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transform: value.replace(/_/g, " ") };
-    if (value === "none") return { transform: "none" };
-    return null;
-  },
-  // Transform origin
-  origin: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
-    const origins = {
-      center: "center",
-      top: "top",
-      "top-right": "top right",
-      right: "right",
-      "bottom-right": "bottom right",
-      bottom: "bottom",
-      "bottom-left": "bottom left",
-      left: "left",
-      "top-left": "top left"
-    };
-    return origins[value] ? { transformOrigin: origins[value] } : null;
-  },
-  // ── Text decoration advanced (web-only) ───────────────────────────────────
-  decoration: ({ value, isArbitrary }, { colors }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) {
-      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
-      return { textDecorationColor: value };
-    }
-    const thickTokens = {
-      auto: "auto",
-      "from-font": "from-font",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    if (value in thickTokens) return { textDecorationThickness: thickTokens[value] };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      wavy: "wavy"
-    };
-    if (value in styleTokens) return { textDecorationStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { textDecorationColor: color } : null;
-  },
-  "underline-offset": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { textUnderlineOffset: value };
-    const offsets = {
-      auto: "auto",
-      "0": "0px",
-      "1": "1px",
-      "2": "2px",
-      "4": "4px",
-      "8": "8px"
-    };
-    return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
-  },
-  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
-  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
-  // the literal string 'you can see it' quotes included), so it passes straight through as a
-  // valid `content: '*'` CSS value with no extra wrapping needed.
-  content: ({ value, isArbitrary }) => {
+  // ── Mix / background blend mode (web-only) ───────────────────────────────
+  "mix-blend": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { content: value };
-    const presets = { none: "none" };
-    return value in presets ? { content: presets[value] } : null;
-  },
-  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
-  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
-  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
-  // presumably a typo) parses, which is why this only fires when the arbitrary value
-  // itself contains a "property:value" pair; anything else (no colon) still resolves
-  // to null exactly as before this resolver existed, rather than guessing a property.
-  //
-  // Only the FIRST colon splits property from value — the value itself may contain
-  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
-  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
-  // custom property) key, so it can be used as the style object key as-written with no
-  // extra case conversion — it only needs to look like a plausible CSS property name.
-  "": ({ value, isArbitrary, negative }) => {
-    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
-    if (negative) return null;
-    const colonIdx = value.indexOf(":");
-    if (colonIdx <= 0) return null;
-    const prop = value.slice(0, colonIdx).trim();
-    const cssValue = value.slice(colonIdx + 1).trim();
-    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
-    return { [prop]: cssValue };
+    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;
   },
-  // ── Outline extended (web-only) ───────────────────────────────────────────
-  outline: ({ value, isArbitrary }, { colors }) => {
+  "bg-blend": ({ value }) => {
     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;
+    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;
   },
-  "outline-offset": ({ value, isArbitrary }) => {
+  // ── Will-change (web-only) ─────────────────────────────────────────────────
+  "will-change": ({ 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;
+    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;
+function buildStandalone() {
+  const web = getEffectiveIsWeb();
+  return {
+    // Display
+    // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
+    // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
+    // `grid`, `contents`, `flow-root` have no native equivalent and stay null there.
+    // The inline-* family (inline, inline-block, inline-flex, inline-grid) falls back
+    // to 'flex' on native instead — like plain `flex`, this is a no-op most of the
+    // time, but without it these utilities couldn't re-show a `hidden` element on
+    // native either (null → no style applied → still display:'none').
+    flex: { display: "flex" },
+    block: web ? { display: "block" } : null,
+    "inline-block": { display: web ? "inline-block" : "flex" },
+    inline: { display: web ? "inline" : "flex" },
+    grid: web ? { display: "grid" } : null,
+    grd: web ? { display: "grid" } : null,
+    "inline-flex": { display: web ? "inline-flex" : "flex" },
+    "inline-grid": { display: web ? "inline-grid" : "flex" },
+    hidden: { display: "none" },
+    contents: web ? { display: "contents" } : null,
+    "flow-root": web ? { display: "flow-root" } : null,
+    // Flex direction, 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() {
+  if (!_standalone) _standalone = buildStandalone();
+  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))` };
   },
-  // ── Columns (web-only) ─────────────────────────────────────────────────────
-  columns: ({ value, isArbitrary }) => {
+  // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
+  "grid-cols": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { columnCount: value };
-    if (value === "auto") return { columnCount: "auto" };
+    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)) 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;
+    if (isNaN(n) || n < 1 || n > 12) return null;
+    return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
   },
-  // ── Mix / background blend mode (web-only) ───────────────────────────────
-  "mix-blend": ({ value }) => {
+  "grid-rows": ({ value, isArbitrary }) => {
     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;
+    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))` };
   },
-  "bg-blend": ({ value }) => {
+  // ── Grid auto flow (web-only) ─────────────────────────────────────────────
+  "grid-flow": ({ 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;
+    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;
   },
-  // ── Will-change (web-only) ─────────────────────────────────────────────────
-  "will-change": ({ value, isArbitrary }) => {
+  // ── Grid auto sizing (web-only) ───────────────────────────────────────────
+  "auto-cols": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
+    if (isArbitrary) return { gridAutoColumns: value };
     const presets = {
       auto: "auto",
-      scroll: "scroll-position",
-      contents: "contents",
-      transform: "transform"
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
     };
-    return presets[value] ? { willChange: presets[value] } : null;
-  },
-  // ── Divide (child combinator CSS, web-only) ───────────────────────────────
-  // These return special __divide* markers that resolver.ts converts to
-  // .cls > * + * { border-... } CSS rules. No inline style is applied.
-  "divide-x": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "reverse") return null;
-    if (!value) return { __divideX: 1 };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { __divideX: n };
-  },
-  "divide-y": ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (value === "reverse") return null;
-    if (!value) return { __divideY: 1 };
-    const n = parseFloat(value);
-    return isNaN(n) ? null : { __divideY: n };
+    const v = presets[value];
+    return v ? { gridAutoColumns: v } : null;
   },
-  divide: ({ value, isArbitrary }, { colors }) => {
+  "auto-rows": ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { __divideColor: value };
-    const styleTokens = {
-      solid: "solid",
-      dashed: "dashed",
-      dotted: "dotted",
-      double: "double",
-      none: "none"
-    };
-    if (value in styleTokens) return { __divideStyle: styleTokens[value] };
-    const color = resolveColor(value, colors, false);
-    return color ? { __divideColor: color } : null;
-  },
-  // ── Text shadow (cross-platform: iOS, Android, web) ─────────────────────
-  // Named presets give cross-platform shadow; arbitrary is web-only.
-  "text-shadow": ({ value, isArbitrary }, { colors }) => {
-    if (value === "none") {
-      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
-    }
-    const webPresets = {
-      "": "0 2px 4px rgba(0,0,0,0.3)",
-      sm: "0 1px 2px rgba(0,0,0,0.3)",
-      md: "0 4px 6px rgba(0,0,0,0.3)",
-      lg: "0 8px 16px rgba(0,0,0,0.5)",
-      xl: "0 16px 32px rgba(0,0,0,0.5)"
-    };
-    const nativePresets = {
-      "": { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 2 }, textShadowRadius: 4 },
-      sm: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
-      md: { textShadowColor: "rgba(0,0,0,0.3)", textShadowOffset: { width: 0, height: 4 }, textShadowRadius: 6 },
-      lg: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 8 }, textShadowRadius: 16 },
-      xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
+    if (isArbitrary) return { gridAutoRows: value };
+    const presets = {
+      auto: "auto",
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
     };
-    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;
+    const v = presets[value];
+    return v ? { gridAutoRows: v } : null;
   },
-  // ── Perspective transform (cross-platform: iOS, Android, web) ────────────
-  perspective: ({ value, isArbitrary }) => {
-    if (isArbitrary) {
-      const numPx = parseFloat(value);
-      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
-      return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
-    }
-    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
-    const n = parseFloat(value);
-    if (isNaN(n)) return null;
-    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+  // ── 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}` };
   },
-  // ── 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;
+  "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 };
   },
-  // ── 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;
+  "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 };
   },
-  // ── 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) => {
+  col: ({ value, isArbitrary }) => {
     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;
+    if (!value || value === "auto") return { gridColumn: "auto" };
+    if (isArbitrary) return { gridColumn: value };
+    return null;
   },
-  // ── Line-clamp (web-only) ─────────────────────────────────────────────────
-  "line-clamp": ({ value }) => {
+  // ── Grid row placement (web-only) ─────────────────────────────────────────
+  "row-span": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (value === "none") return { overflow: "visible", display: "block", WebkitLineClamp: "unset" };
+    if (value === "full") return { gridRow: "1 / -1" };
     const n = parseInt(value, 10);
-    if (isNaN(n) || n < 1) return null;
-    return {
-      overflow: "hidden",
-      display: "-webkit-box",
-      WebkitBoxOrient: "vertical",
-      WebkitLineClamp: n
+    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;
   },
-  // ── Caret color (web-only) ────────────────────────────────────────────────
-  caret: ({ value, isArbitrary }, { colors }) => {
+  // place-content is shorthand for align-content + justify-content on a grid container
+  "place-content": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (value === "auto" || value === "transparent") return { caretColor: value };
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { caretColor: color } : 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;
   },
-  // ── Accent color (web-only) ───────────────────────────────────────────────
-  accent: ({ value, isArbitrary }, { colors }) => {
+  // justify-items controls inline-axis alignment of grid items within their cells
+  "justify-items": ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
-    if (value === "auto") return { accentColor: "auto" };
-    const color = resolveColor(value, colors, isArbitrary);
-    return color ? { accentColor: color } : null;
+    const map = {
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { justifyItems: map[value] } : null;
   },
-  // ── SVG stroke/fill (web-only) ────────────────────────────────────────────
-  // Native is intentionally excluded: react-native-svg's <Path>/<Circle>/etc.
-  // take stroke/fill as component PROPS, not style entries, so there's no
-  // reliable way to apply a resolved color through the `style` prop there.
-  // `stroke-{n}` sets strokeWidth (a plain number, unlike a color) — same
-  // color-first-then-numeric-fallback disambiguation `border` uses above.
-  stroke: ({ value, isArbitrary }, { colors }) => {
+  // place-self is shorthand for align-self + justify-self on a grid item
+  "place-self": ({ value }) => {
     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 };
+    const map = {
+      auto: "auto",
+      start: "start",
+      end: "end",
+      center: "center",
+      stretch: "stretch"
+    };
+    return map[value] ? { placeSelf: map[value] } : null;
   },
-  fill: ({ value, isArbitrary }, { colors }) => {
+  // justify-self controls inline-axis self-alignment of a grid item
+  "justify-self": ({ value }) => {
     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;
+    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) {
@@ -2025,10 +1922,6 @@ var RESOLVERS = {
     const n = parseFloat(value);
     return isNaN(n) ? null : { flex: n };
   },
-  basis: ({ value, isArbitrary }, { spacing }) => {
-    const v = resolveSizing(value, spacing, isArbitrary);
-    return v !== null ? { flexBasis: v } : null;
-  },
   grow: ({ value }, _) => {
     if (!value) return { flexGrow: 1 };
     const n = parseFloat(value);
@@ -2043,72 +1936,132 @@ var RESOLVERS = {
     const n = parseInt(value, 10);
     return isNaN(n) ? null : { order: negative ? -n : n };
   },
-  // ── Gap ────────────────────────────────────────────────────────────────────
-  gap: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { gap: v } : null;
-  },
-  "gap-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { columnGap: v } : null;
-  },
-  "gap-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { rowGap: v } : null;
-  },
-  // ── Position ───────────────────────────────────────────────────────────────
-  top: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v } : null;
-  },
-  right: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { right: v } : null;
-  },
-  bottom: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { bottom: v } : null;
-  },
-  left: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { left: v } : null;
-  },
-  inset: ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v, right: v, bottom: v, left: v } : null;
-  },
-  "inset-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { left: v, right: v } : null;
-  },
-  "inset-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { top: v, bottom: v } : null;
-  },
   // ── Z-index ────────────────────────────────────────────────────────────────
   z: ({ value, isArbitrary }, { zIndex }) => {
     if (isArbitrary) {
-      const n2 = parseInt(value);
-      return isNaN(n2) ? null : { zIndex: n2 };
-    }
-    const v = zIndex[value];
-    if (v !== void 0) {
-      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
-      return { zIndex: v };
+      const 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 n = parseInt(value);
-    return isNaN(n) ? null : { zIndex: n };
+    const color = resolveColor(value, colors, false);
+    if (!color) return null;
+    return { color: getEffectiveIsWeb() ? withOpacityVar(color, "--text-opacity") : color };
   },
-  // ── Opacity ────────────────────────────────────────────────────────────────
-  opacity: ({ value, isArbitrary }, { opacity }) => {
+  "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) {
-      const v2 = parseFloat(value);
-      return isNaN(v2) ? null : { opacity: v2 > 1 ? v2 / 100 : v2 };
+      if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
+      return { textDecorationColor: value };
     }
-    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 };
+    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 }) => {
@@ -2134,10 +2087,57 @@ var RESOLVERS = {
     const v = letterSpacing[value];
     return v !== void 0 ? { letterSpacing: v } : null;
   },
-  // ── Shadow ─────────────────────────────────────────────────────────────────
-  shadow: ({ value }, { shadow }) => {
-    const key = value === "" ? "DEFAULT" : value;
-    return shadow[key] ?? 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
@@ -2168,35 +2168,86 @@ var RESOLVERS = {
     const finalDeg = negative ? -deg : deg;
     return getEffectiveIsWeb() ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
   },
-  // ── Translate ──────────────────────────────────────────────────────────────
-  "translate-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { transform: `translateX(${typeof v === "number" ? `${v}px` : v})` };
-    if (typeof v === "string") {
-      const n = parseFloat(v);
-      return isNaN(n) ? null : { transform: [{ translateX: n }] };
+  // ── 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 }] };
     }
-    return { transform: [{ translateX: v }] };
+    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) } }"
   },
-  "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 }] };
+  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 };
     }
-    return { transform: [{ translateY: v }] };
+    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 };
   },
-  // ── 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 };
+  // ── 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 }) => {
@@ -2224,91 +2275,107 @@ var RESOLVERS = {
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
+  }
+};
+
+// src/core/resolvers/misc.ts
+var miscResolvers = {
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
   },
-  // ── 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);
+  // ── 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 };
     }
-    if (value === "inset") {
-      return onWeb ? { boxShadow: `inset 0 0 0 ${DEFAULT_WIDTH}px ${DEFAULT_COLOR}` } : asNative(DEFAULT_WIDTH, DEFAULT_COLOR);
+    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 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);
+    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) {
-      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;
+      return getEffectiveIsWeb() ? { textShadow: 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 getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
     }
     return null;
-  },
-  // Web-only, unlike `ring` above: this stacks a second box-shadow layer to
-  // create a gap between the element and the ring. There's no native
-  // equivalent to approximate that with (a border can't create a gap outside
-  // its own element without an extra wrapper view), so this stays a no-op
-  // on native rather than rendering a misleading half-translation.
-  "ring-offset": ({ value, isArbitrary }, _theme) => {
-    if (!getEffectiveIsWeb()) return null;
-    const DEFAULT_RING_COLOR = "rgba(59, 130, 246, 0.5)";
-    const DEFAULT_RING_WIDTH = 3;
-    const offsetTokens = { "0": 0, "1": 1, "2": 2, "4": 4, "8": 8 };
-    let offsetWidth;
-    if (!isArbitrary) {
-      offsetWidth = value in offsetTokens ? offsetTokens[value] : null;
-    } else {
-      offsetWidth = /^-?\d+(\.\d+)?$/.test(value) ? parseFloat(value) : value;
-    }
-    if (offsetWidth === null || typeof offsetWidth === "number" && isNaN(offsetWidth)) return null;
-    const isZero = offsetWidth === 0 || offsetWidth === "0";
-    const offsetCss = typeof offsetWidth === "number" ? `${offsetWidth}px` : offsetWidth;
-    return {
-      boxShadow: isZero ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetCss} #fff, 0 0 0 calc(${offsetCss} + ${DEFAULT_RING_WIDTH}px) ${DEFAULT_RING_COLOR}`
-    };
-  },
-  // ── Space between ─────────────────────────────────────────────────────────
-  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
-  // On native (RN 0.71+): uses columnGap/rowGap directly.
-  "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { __spaceX: v };
-    return { columnGap: v };
-  },
-  "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
-    const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    if (v === null) return null;
-    if (getEffectiveIsWeb()) return { __spaceY: v };
-    return { rowGap: v };
   }
 };
-for (const [utility, prop] of Object.entries(PADDING_MARGIN_PROPS)) {
-  RESOLVERS[utility] = makeSpacingResolver(prop);
-}
-for (const [utility, [widthProp, colorProp]] of Object.entries(BORDER_SIDE_PROPS)) {
-  RESOLVERS[utility] = makeBorderSideResolver(widthProp, colorProp);
-}
+
+// 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) {
@@ -2356,6 +2423,47 @@ function kbachWarn(message) {
   );
 }
 
+// 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 ─────────────────────────────────────────────────────────────────
@@ -2442,7 +2550,7 @@ function clearPluginModifiers() {
   _invalidate();
 }
 var NAMED_GROUP_PEER_RE = /^(group|peer)-(hover|focus)\/(.+)$/;
-var _namedModifierCache = /* @__PURE__ */ new Map();
+var _namedModifierCache = new LRUCache(1e4);
 function getNamedGroupPeerModifier(name) {
   const cached = _namedModifierCache.get(name);
   if (cached) return cached;
@@ -2613,51 +2721,10 @@ function findOuterColon(s) {
   return -1;
 }
 
-// src/core/cache.ts
-var LRUCache = class {
-  constructor(capacity = 1e4, onEvict) {
-    this.capacity = capacity;
-    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
-    this.cache = /* @__PURE__ */ new Map();
-    this.onEvict = onEvict;
-  }
-  get(key) {
-    if (!this.cache.has(key)) return void 0;
-    const value = this.cache.get(key);
-    this.cache.delete(key);
-    this.cache.set(key, value);
-    return value;
-  }
-  set(key, value) {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.capacity) {
-      const oldestKey = this.cache.keys().next().value;
-      const oldestValue = this.cache.get(oldestKey);
-      this.cache.delete(oldestKey);
-      this.onEvict?.(oldestKey, oldestValue);
-    }
-    this.cache.set(key, value);
-    return this;
-  }
-  has(key) {
-    return this.cache.has(key);
-  }
-  delete(key) {
-    return this.cache.delete(key);
-  }
-  clear() {
-    this.cache.clear();
-  }
-  get size() {
-    return this.cache.size;
-  }
-};
-
 // src/core/resolver.ts
-var FONT_KEY = "__kbach_default_font__";
+var _defaultFontFamily;
 function setDefaultFontFamily(font) {
-  globalThis[FONT_KEY] = font;
+  _defaultFontFamily = font;
 }
 var _styleEl = null;
 var _ruleIndexByKey = /* @__PURE__ */ new Map();
@@ -2677,9 +2744,9 @@ function evictInjectedRule(rule) {
   }
 }
 var _injectedRules = new LRUCache(5e4, evictInjectedRule);
-var _CSS_DISABLED_KEY = "__kbach_runtime_css_disabled__";
+var _runtimeCSSDisabled = false;
 function isRuntimeCSSDisabled() {
-  return !!globalThis[_CSS_DISABLED_KEY];
+  return _runtimeCSSDisabled;
 }
 function getStyleEl() {
   if (_styleEl) return _styleEl;
@@ -2902,14 +2969,7 @@ function deepMerge(base, override) {
   }
   return result;
 }
-var CONFIG_KEY = "__kbach_config_store__";
-function getConfigStore() {
-  const g = globalThis;
-  if (!g[CONFIG_KEY]) {
-    g[CONFIG_KEY] = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
-  }
-  return g[CONFIG_KEY];
-}
+var configStore = { resolved: null, listeners: /* @__PURE__ */ new Set(), customVariants: {} };
 function resolveOneRef(ref, colors) {
   const lastDash = ref.lastIndexOf("-");
   if (lastDash <= 0) return null;
@@ -2983,8 +3043,7 @@ function buildConfig(userConfig) {
     clearPluginUtilities();
     clearPluginModifiers();
   }
-  const _store = getConfigStore();
-  for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
+  for (const k of Object.keys(configStore.customVariants)) delete configStore.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
   for (const plugin of resolved.plugins) {
     plugin(pluginAPI);
@@ -3031,26 +3090,7 @@ function makePluginAPI(theme) {
     }
   };
 }
-var customVariants = new Proxy(
-  {},
-  {
-    get(_t, p) {
-      return typeof p === "string" ? getConfigStore().customVariants[p] : void 0;
-    },
-    set(_t, p, v) {
-      if (typeof p === "string") getConfigStore().customVariants[p] = v;
-      return true;
-    },
-    ownKeys() {
-      return Object.keys(getConfigStore().customVariants);
-    },
-    getOwnPropertyDescriptor(_t, p) {
-      if (typeof p !== "string") return void 0;
-      const v = getConfigStore().customVariants[p];
-      return v !== void 0 ? { value: v, writable: true, enumerable: true, configurable: true } : void 0;
-    }
-  }
-);
+var customVariants = configStore.customVariants;
 
 // src/vite-plugin.ts
 var process2 = processImport;
@@ -3410,7 +3450,9 @@ function pushTokens(str, into) {
     if (tok && !NOT_A_CLASS_NAME_RE.test(tok)) into.add(tok);
   }
 }
-function scanDir(dir, onFile) {
+var MAX_SCAN_DEPTH = 10;
+function scanDir(dir, onFile, depth = 0) {
+  if (depth > MAX_SCAN_DEPTH) return;
   let entries;
   try {
     entries = readdirSync(dir);
@@ -3425,7 +3467,7 @@ function scanDir(dir, onFile) {
     const full = join(dir, entry);
     try {
       const st = statSync(full);
-      if (st.isDirectory()) scanDir(full, onFile);
+      if (st.isDirectory()) scanDir(full, onFile, depth + 1);
       else if (/\.(tsx?|jsx?)$/.test(entry)) onFile(full, readFileSync(full, "utf-8"));
     } catch (err) {
       warn(`Can't process ${full}: ${err.message}`);
@@ -3443,7 +3485,8 @@ function scanCssFileInto(filePath, into) {
   } catch {
   }
 }
-function scanCssSelectorsInto(dir, into) {
+function scanCssSelectorsInto(dir, into, depth = 0) {
+  if (depth > MAX_SCAN_DEPTH) return;
   let entries;
   try {
     entries = readdirSync(dir);
@@ -3455,7 +3498,7 @@ function scanCssSelectorsInto(dir, into) {
     const full = join(dir, entry);
     try {
       const st = statSync(full);
-      if (st.isDirectory()) scanCssSelectorsInto(full, into);
+      if (st.isDirectory()) scanCssSelectorsInto(full, into, depth + 1);
       else if (CSS_FILE_RE.test(entry)) scanCssFileInto(full, into);
     } catch {
     }
@@ -3522,6 +3565,17 @@ function kbach(userConfigOrOptions) {
   function generateCSS() {
     return formatKbachCSS(buildTokenCSSView(), cfg.theme, responsiveRe);
   }
+  function syncMainCSSFile(server) {
+    const active = /* @__PURE__ */ new Set();
+    for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
+    for (const tok of tokenCSS.keys()) {
+      if (!active.has(tok)) tokenCSS.delete(tok);
+    }
+    if (mainCSSFile) {
+      const changed = writeKbachToFile(mainCSSFile, generateCSS());
+      if (changed) server.watcher.emit("change", mainCSSFile);
+    }
+  }
   return {
     name: "kbach",
     enforce: "pre",
@@ -3581,6 +3635,37 @@ ${code}`,
       initialScan();
       if (mainCSSFile) writeKbachToFile(mainCSSFile, generateCSS());
     },
+    // Vite's `handleHotUpdate` hook only fires for `type === "update"` (plain
+    // file edits) — it's never called for file create/delete, which land on
+    // the watcher's own 'add'/'unlink' events instead (confirmed against
+    // vite's own onHMRUpdate/handleHMRUpdate: the hook loop is gated on
+    // `type === "update"`). Without also listening on those two events here,
+    // creating a new file with new Kbach classes never adds them to
+    // kbach.css, and deleting a file never removes its classes, until a full
+    // dev-server restart. configureServer gives access to the raw watcher so
+    // both cases can share the same sync logic as a plain edit.
+    configureServer(server) {
+      const onAddOrUnlink = (file, isUnlink) => {
+        if (file.includes("node_modules")) return;
+        if (CSS_FILE_RE.test(file)) {
+          if (!isUnlink) scanCssFileInto(file, projectCssClasses);
+          return;
+        }
+        if (!/\.(tsx?|jsx?)$/.test(file)) return;
+        if (isUnlink) {
+          fileTokens.delete(normPath(file));
+        } else {
+          try {
+            processFile(file, readFileSync(file, "utf-8"));
+          } catch {
+            fileTokens.delete(normPath(file));
+          }
+        }
+        syncMainCSSFile(server);
+      };
+      server.watcher.on("add", (file) => onAddOrUnlink(file, false));
+      server.watcher.on("unlink", (file) => onAddOrUnlink(file, true));
+    },
     handleHotUpdate({ file, server }) {
       if (file.includes("node_modules")) return;
       if (CSS_FILE_RE.test(file)) {
@@ -3593,15 +3678,7 @@ ${code}`,
       } catch {
         fileTokens.delete(normPath(file));
       }
-      const active = /* @__PURE__ */ new Set();
-      for (const tokens of fileTokens.values()) for (const t of tokens) active.add(t);
-      for (const tok of tokenCSS.keys()) {
-        if (!active.has(tok)) tokenCSS.delete(tok);
-      }
-      if (mainCSSFile) {
-        const changed = writeKbachToFile(mainCSSFile, generateCSS());
-        if (changed) server.watcher.emit("change", mainCSSFile);
-      }
+      syncMainCSSFile(server);
     }
   };
 }