@kbach/react 0.5.33 → 0.5.35

package/dist/vite-plugin.js

@@ -26,6 +26,26 @@ module.exports = __toCommonJS(vite_plugin_exports);
 var import_fs = require("fs");
 var import_path = require("path");
 
+// src/core/platform.ts
+var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var _cssGenMode = false;
+function setCSSGenMode(on) {
+  _cssGenMode = on;
+}
+function getEffectiveIsWeb() {
+  return isWeb || _cssGenMode;
+}
+function toNativeValue(raw) {
+  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
+  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
+  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
+  return raw;
+}
+function escapeCSSSelector(cls) {
+  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+}
+
 // src/core/theme.ts
 var defaultColors = {
   transparent: "transparent",
@@ -562,19 +582,6 @@ var defaultTheme = {
   }
 };
 
-// src/core/platform.ts
-var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-function toNativeValue(raw) {
-  if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
-  if (/^-?\d+(\.\d+)?rem$/.test(raw)) return parseFloat(raw) * 16;
-  if (/^-?\d+(\.\d+)?em$/.test(raw)) return parseFloat(raw) * 16;
-  if (/^-?\d+(\.\d+)?$/.test(raw)) return parseFloat(raw);
-  return raw;
-}
-function escapeCSSSelector(cls) {
-  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-}
-
 // src/core/utilities.ts
 function resolveColor(value, colors, isArbitrary) {
   if (isArbitrary) return value;
@@ -644,8 +651,12 @@ function hexToRgba(hex, alpha) {
 }
 function resolveSpacing(value, negative, spacing, isArbitrary) {
   if (isArbitrary) {
-    const resolved = isWeb ? value : toNativeValue(value);
-    return negative && typeof resolved === "number" ? -resolved : resolved;
+    const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
+    if (negative) {
+      if (typeof resolved === "number") return -resolved;
+      if (typeof resolved === "string" && /^\d/.test(resolved)) return `-${resolved}`;
+    }
+    return resolved;
   }
   const raw = spacing[value];
   if (raw === void 0) return null;
@@ -657,7 +668,7 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
   return raw;
 }
 function resolveSizing(value, spacing, isArbitrary) {
-  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
   const raw = spacing[value];
   if (raw !== void 0) return raw;
   if (/^\d+\/\d+$/.test(value)) {
@@ -667,356 +678,364 @@ function resolveSizing(value, spacing, isArbitrary) {
   return null;
 }
 function resolveRadius(value, radii, isArbitrary) {
-  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
   const key = value === "" ? "DEFAULT" : value;
   return radii[key] ?? null;
 }
 function resolveFontSize(value, fontSizes, isArbitrary) {
-  if (isArbitrary) return isWeb ? value : toNativeValue(value);
+  if (isArbitrary) return getEffectiveIsWeb() ? value : toNativeValue(value);
   return fontSizes[value] ?? null;
 }
 var FILTER_COMPOSE = "var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)";
 var BACKDROP_FILTER_COMPOSE = "var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)";
-var STANDALONE = {
-  // Display
-  // React Native only supports display:'flex'|'none'. Setting 'flex' explicitly is
-  // a no-op normally, but is needed to re-show an element that was hidden via `hidden`.
-  // `grid`, `inline-*`, `contents`, `flow-root` have no native equivalent.
-  flex: { display: "flex" },
-  block: isWeb ? { display: "block" } : null,
-  "inline-block": isWeb ? { display: "inline-block" } : null,
-  inline: isWeb ? { display: "inline" } : null,
-  grid: isWeb ? { display: "grid" } : null,
-  grd: isWeb ? { display: "grid" } : null,
-  "inline-flex": { display: isWeb ? "inline-flex" : "flex" },
-  "inline-grid": isWeb ? { display: "inline-grid" } : null,
-  hidden: { display: "none" },
-  contents: isWeb ? { display: "contents" } : null,
-  "flow-root": isWeb ? { display: "flow-root" } : null,
-  // Flex direction (both web and native)
-  "flex-row": { flexDirection: "row" },
-  "flex-col": { flexDirection: "column" },
-  "flex-row-reverse": { flexDirection: "row-reverse" },
-  "flex-col-reverse": { flexDirection: "column-reverse" },
-  // Flex wrap (both)
-  "flex-wrap": { flexWrap: "wrap" },
-  "flex-wrap-reverse": { flexWrap: "wrap-reverse" },
-  "flex-nowrap": { flexWrap: "nowrap" },
-  // Flex grow / shrink (both)
-  "flex-grow": { flexGrow: 1 },
-  "flex-grow-0": { flexGrow: 0 },
-  "flex-shrink": { flexShrink: 1 },
-  "flex-shrink-0": { flexShrink: 0 },
-  // Align items (both)
-  "items-start": { alignItems: "flex-start" },
-  "items-end": { alignItems: "flex-end" },
-  "items-center": { alignItems: "center" },
-  "items-baseline": { alignItems: "baseline" },
-  "items-stretch": { alignItems: "stretch" },
-  // Justify content (both)
-  "justify-start": { justifyContent: "flex-start" },
-  "justify-end": { justifyContent: "flex-end" },
-  "justify-center": { justifyContent: "center" },
-  "justify-between": { justifyContent: "space-between" },
-  "justify-around": { justifyContent: "space-around" },
-  "justify-evenly": { justifyContent: "space-evenly" },
-  // Align content (both)
-  "content-start": { alignContent: "flex-start" },
-  "content-end": { alignContent: "flex-end" },
-  "content-center": { alignContent: "center" },
-  "content-between": { alignContent: "space-between" },
-  "content-around": { alignContent: "space-around" },
-  "content-evenly": { alignContent: "space-evenly" },
-  "content-stretch": { alignContent: "stretch" },
-  // Align self (both)
-  "self-auto": { alignSelf: "auto" },
-  "self-start": { alignSelf: "flex-start" },
-  "self-end": { alignSelf: "flex-end" },
-  "self-center": { alignSelf: "center" },
-  "self-stretch": { alignSelf: "stretch" },
-  "self-baseline": { alignSelf: "baseline" },
-  // Text align (both)
-  "text-left": { textAlign: "left" },
-  "text-right": { textAlign: "right" },
-  "text-center": { textAlign: "center" },
-  "text-justify": { textAlign: "justify" },
-  // Font weight shortcuts (both)
-  "font-thin": { fontWeight: "100" },
-  "font-extralight": { fontWeight: "200" },
-  "font-light": { fontWeight: "300" },
-  "font-normal": { fontWeight: "400" },
-  "font-medium": { fontWeight: "500" },
-  "font-semibold": { fontWeight: "600" },
-  "font-bold": { fontWeight: "700" },
-  "font-extrabold": { fontWeight: "800" },
-  "font-black": { fontWeight: "900" },
-  // Text decoration (overline is web-only)
-  underline: { textDecorationLine: "underline" },
-  overline: isWeb ? { textDecorationLine: "overline" } : null,
-  "line-through": { textDecorationLine: "line-through" },
-  "no-underline": { textDecorationLine: "none" },
-  // Text transform (both)
-  uppercase: { textTransform: "uppercase" },
-  lowercase: { textTransform: "lowercase" },
-  capitalize: { textTransform: "capitalize" },
-  "normal-case": { textTransform: "none" },
-  // Font style (both)
-  italic: { fontStyle: "italic" },
-  "non-italic": { fontStyle: "normal" },
-  // Position (fixed/sticky/static are web-only; RN only supports relative/absolute)
-  relative: { position: "relative" },
-  absolute: { position: "absolute" },
-  fixed: isWeb ? { position: "fixed" } : null,
-  sticky: isWeb ? { position: "sticky" } : null,
-  static: isWeb ? { position: "static" } : null,
-  // Visibility (no `visibility` prop on native; use opacity instead)
-  visible: isWeb ? { visibility: "visible" } : null,
-  invisible: isWeb ? { visibility: "hidden" } : { opacity: 0 },
-  // Overflow (RN supports 'hidden' | 'visible' | 'scroll'; not 'auto')
-  "overflow-hidden": { overflow: "hidden" },
-  "overflow-visible": { overflow: "visible" },
-  "overflow-scroll": { overflow: "scroll" },
-  "overflow-auto": isWeb ? { overflow: "auto" } : { overflow: "scroll" },
-  // overflowX / overflowY are web-only
-  "overflow-x-hidden": isWeb ? { overflowX: "hidden" } : null,
-  "overflow-x-scroll": isWeb ? { overflowX: "scroll" } : null,
-  "overflow-x-auto": isWeb ? { overflowX: "auto" } : null,
-  "overflow-y-hidden": isWeb ? { overflowY: "hidden" } : null,
-  "overflow-y-scroll": isWeb ? { overflowY: "scroll" } : null,
-  "overflow-y-auto": isWeb ? { overflowY: "auto" } : null,
-  // Object fit (web-only; use resizeMode prop on RN Image)
-  "object-contain": isWeb ? { objectFit: "contain" } : null,
-  "object-cover": isWeb ? { objectFit: "cover" } : null,
-  "object-fill": isWeb ? { objectFit: "fill" } : null,
-  "object-none": isWeb ? { objectFit: "none" } : null,
-  "object-scale-down": isWeb ? { objectFit: "scale-down" } : null,
-  // Border style (both)
-  "border-solid": { borderStyle: "solid" },
-  "border-dashed": { borderStyle: "dashed" },
-  "border-dotted": { borderStyle: "dotted" },
-  "border-none": { borderWidth: 0 },
-  // Border sides default width (both)
-  "border-t": { borderTopWidth: 1 },
-  "border-r": { borderRightWidth: 1 },
-  "border-b": { borderBottomWidth: 1 },
-  "border-l": { borderLeftWidth: 1 },
-  // Cursor (web-only)
-  "cursor-auto": isWeb ? { cursor: "auto" } : null,
-  "cursor-default": isWeb ? { cursor: "default" } : null,
-  "cursor-pointer": isWeb ? { cursor: "pointer" } : null,
-  "cursor-wait": isWeb ? { cursor: "wait" } : null,
-  "cursor-text": isWeb ? { cursor: "text" } : null,
-  "cursor-move": isWeb ? { cursor: "move" } : null,
-  "cursor-not-allowed": isWeb ? { cursor: "not-allowed" } : null,
-  // User select (web-only)
-  "select-none": isWeb ? { userSelect: "none" } : null,
-  "select-text": isWeb ? { userSelect: "text" } : null,
-  "select-all": isWeb ? { userSelect: "all" } : null,
-  "select-auto": isWeb ? { userSelect: "auto" } : null,
-  // Pointer events (both)
-  "pointer-events-none": { pointerEvents: "none" },
-  "pointer-events-auto": { pointerEvents: "auto" },
-  // Whitespace (web-only; RN Text uses numberOfLines prop instead)
-  "whitespace-normal": isWeb ? { whiteSpace: "normal" } : null,
-  "whitespace-nowrap": isWeb ? { whiteSpace: "nowrap" } : null,
-  "whitespace-pre": isWeb ? { whiteSpace: "pre" } : null,
-  "whitespace-pre-wrap": isWeb ? { whiteSpace: "pre-wrap" } : null,
-  "whitespace-pre-line": isWeb ? { whiteSpace: "pre-line" } : null,
-  // Word break (web-only)
-  "break-normal": isWeb ? { overflowWrap: "normal", wordBreak: "normal" } : null,
-  "break-words": isWeb ? { overflowWrap: "break-word" } : null,
-  "break-all": isWeb ? { wordBreak: "break-all" } : null,
-  // Misc web-only
-  truncate: isWeb ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null,
-  "box-border": isWeb ? { boxSizing: "border-box" } : null,
-  "box-content": isWeb ? { boxSizing: "content-box" } : null,
-  "appearance-none": isWeb ? { appearance: "none" } : null,
-  "outline-none": isWeb ? { outline: "none", outlineOffset: "0" } : null,
-  outline: isWeb ? { outline: "2px solid transparent", outlineOffset: "2px" } : null,
-  resize: isWeb ? { resize: "both" } : null,
-  "resize-none": isWeb ? { resize: "none" } : null,
-  "resize-y": isWeb ? { resize: "vertical" } : null,
-  "resize-x": isWeb ? { resize: "horizontal" } : null,
-  antialiased: isWeb ? { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" } : null,
-  "subpixel-antialiased": isWeb ? { WebkitFontSmoothing: "subpixel-antialiased", MozOsxFontSmoothing: "auto" } : null,
-  "overflow-ellipsis": isWeb ? { textOverflow: "ellipsis" } : null,
-  "sr-only": isWeb ? {
-    position: "absolute",
-    width: 1,
-    height: 1,
-    padding: 0,
-    margin: -1,
-    overflow: "hidden",
-    clip: "rect(0,0,0,0)",
-    whiteSpace: "nowrap",
-    border: 0
-  } : null,
-  "not-sr-only": isWeb ? {
-    position: "static",
-    width: "auto",
-    height: "auto",
-    padding: 0,
-    margin: 0,
-    overflow: "visible",
-    clip: "auto",
-    whiteSpace: "normal"
-  } : null,
-  // Lists (web-only)
-  "list-none": isWeb ? { listStyleType: "none" } : null,
-  "list-disc": isWeb ? { listStyleType: "disc" } : null,
-  "list-decimal": isWeb ? { listStyleType: "decimal" } : null,
-  // Background clip (web-only)
-  "bg-clip-border": isWeb ? { backgroundClip: "border-box" } : null,
-  "bg-clip-padding": isWeb ? { backgroundClip: "padding-box" } : null,
-  "bg-clip-content": isWeb ? { backgroundClip: "content-box" } : null,
-  "bg-clip-text": isWeb ? { backgroundClip: "text", WebkitBackgroundClip: "text" } : null,
-  // Background image
-  "bg-none": isWeb ? { backgroundImage: "none" } : null,
-  // Background size (web-only)
-  "bg-auto": isWeb ? { backgroundSize: "auto" } : null,
-  "bg-cover": isWeb ? { backgroundSize: "cover" } : null,
-  "bg-contain": isWeb ? { backgroundSize: "contain" } : null,
-  // Background position (web-only)
-  "bg-center": isWeb ? { backgroundPosition: "center" } : null,
-  "bg-top": isWeb ? { backgroundPosition: "top" } : null,
-  "bg-bottom": isWeb ? { backgroundPosition: "bottom" } : null,
-  "bg-left": isWeb ? { backgroundPosition: "left" } : null,
-  "bg-right": isWeb ? { backgroundPosition: "right" } : null,
-  "bg-left-top": isWeb ? { backgroundPosition: "left top" } : null,
-  "bg-left-bottom": isWeb ? { backgroundPosition: "left bottom" } : null,
-  "bg-right-top": isWeb ? { backgroundPosition: "right top" } : null,
-  "bg-right-bottom": isWeb ? { backgroundPosition: "right bottom" } : null,
-  // Background repeat (web-only)
-  "bg-repeat": isWeb ? { backgroundRepeat: "repeat" } : null,
-  "bg-no-repeat": isWeb ? { backgroundRepeat: "no-repeat" } : null,
-  "bg-repeat-x": isWeb ? { backgroundRepeat: "repeat-x" } : null,
-  "bg-repeat-y": isWeb ? { backgroundRepeat: "repeat-y" } : null,
-  "bg-repeat-round": isWeb ? { backgroundRepeat: "round" } : null,
-  "bg-repeat-space": isWeb ? { backgroundRepeat: "space" } : null,
-  // Background attachment (web-only)
-  "bg-fixed": isWeb ? { backgroundAttachment: "fixed" } : null,
-  "bg-local": isWeb ? { backgroundAttachment: "local" } : null,
-  "bg-scroll": isWeb ? { backgroundAttachment: "scroll" } : null,
-  // Object position (web-only)
-  "object-center": isWeb ? { objectPosition: "center" } : null,
-  "object-top": isWeb ? { objectPosition: "top" } : null,
-  "object-bottom": isWeb ? { objectPosition: "bottom" } : null,
-  "object-left": isWeb ? { objectPosition: "left" } : null,
-  "object-right": isWeb ? { objectPosition: "right" } : null,
-  "object-left-top": isWeb ? { objectPosition: "left top" } : null,
-  "object-left-bottom": isWeb ? { objectPosition: "left bottom" } : null,
-  "object-right-top": isWeb ? { objectPosition: "right top" } : null,
-  "object-right-bottom": isWeb ? { objectPosition: "right bottom" } : null,
-  // Table (web-only)
-  table: isWeb ? { display: "table" } : null,
-  "table-auto": isWeb ? { tableLayout: "auto" } : null,
-  "table-fixed": isWeb ? { tableLayout: "fixed" } : null,
-  "caption-top": isWeb ? { captionSide: "top" } : null,
-  "caption-bottom": isWeb ? { captionSide: "bottom" } : null,
-  "border-collapse": isWeb ? { borderCollapse: "collapse" } : null,
-  "border-separate": isWeb ? { borderCollapse: "separate" } : null,
-  // List style position (web-only)
-  "list-inside": isWeb ? { listStylePosition: "inside" } : null,
-  "list-outside": isWeb ? { listStylePosition: "outside" } : null,
-  // Font variant numeric (web-only)
-  "normal-nums": isWeb ? { fontVariantNumeric: "normal" } : null,
-  ordinal: isWeb ? { fontVariantNumeric: "ordinal" } : null,
-  "slashed-zero": isWeb ? { fontVariantNumeric: "slashed-zero" } : null,
-  "lining-nums": isWeb ? { fontVariantNumeric: "lining-nums" } : null,
-  "oldstyle-nums": isWeb ? { fontVariantNumeric: "oldstyle-nums" } : null,
-  "proportional-nums": isWeb ? { fontVariantNumeric: "proportional-nums" } : null,
-  "tabular-nums": isWeb ? { fontVariantNumeric: "tabular-nums" } : null,
-  "diagonal-fractions": isWeb ? { fontVariantNumeric: "diagonal-fractions" } : null,
-  "stacked-fractions": isWeb ? { fontVariantNumeric: "stacked-fractions" } : null,
-  // Isolation (web-only)
-  isolate: isWeb ? { isolation: "isolate" } : null,
-  "isolation-auto": isWeb ? { isolation: "auto" } : null,
-  // Backface visibility (both iOS and Android)
-  "backface-visible": { backfaceVisibility: "visible" },
-  "backface-hidden": { backfaceVisibility: "hidden" },
-  // CSS filters — standalone = default/full effect (web-only)
-  grayscale: isWeb ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
-  invert: isWeb ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
-  sepia: isWeb ? { "--tw-sepia": "sepia(100%)", filter: FILTER_COMPOSE } : null,
-  // Divide none
-  "divide-none": isWeb ? { __divideX: 0, __divideY: 0 } : null,
-  // Group / peer markers (no-op: no style emitted; just ensures isKnownUtility returns true)
-  group: isWeb ? {} : null,
-  peer: isWeb ? {} : null,
-  // Text-wrap (web-only)
-  "text-wrap": isWeb ? { textWrap: "wrap" } : null,
-  "text-nowrap": isWeb ? { textWrap: "nowrap" } : null,
-  "text-balance": isWeb ? { textWrap: "balance" } : null,
-  "text-pretty": isWeb ? { textWrap: "pretty" } : null,
-  // Screen sizing (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
-  "w-screen": isWeb ? { width: "100vw" } : null,
-  "min-h-screen": { minHeight: "100vh" },
-  "max-h-screen": { maxHeight: "100vh" },
-  "min-w-screen": isWeb ? { minWidth: "100vw" } : null,
-  "max-w-screen": isWeb ? { maxWidth: "100vw" } : null,
-  // max-w named container sizes (mirrors Tailwind's container scale)
-  "max-w-none": { maxWidth: "none" },
-  "max-w-xs": { maxWidth: 320 },
-  "max-w-sm": { maxWidth: 384 },
-  "max-w-md": { maxWidth: 448 },
-  "max-w-lg": { maxWidth: 512 },
-  "max-w-xl": { maxWidth: 576 },
-  "max-w-2xl": { maxWidth: 672 },
-  "max-w-3xl": { maxWidth: 768 },
-  "max-w-4xl": { maxWidth: 896 },
-  "max-w-5xl": { maxWidth: 1024 },
-  "max-w-6xl": { maxWidth: 1152 },
-  "max-w-7xl": { maxWidth: 1280 },
-  "max-w-prose": isWeb ? { maxWidth: "65ch" } : null,
-  // Extended cursors (web-only)
-  "cursor-grab": isWeb ? { cursor: "grab" } : null,
-  "cursor-grabbing": isWeb ? { cursor: "grabbing" } : null,
-  "cursor-zoom-in": isWeb ? { cursor: "zoom-in" } : null,
-  "cursor-zoom-out": isWeb ? { cursor: "zoom-out" } : null,
-  "cursor-crosshair": isWeb ? { cursor: "crosshair" } : null,
-  "cursor-help": isWeb ? { cursor: "help" } : null,
-  "cursor-none": isWeb ? { cursor: "none" } : null,
-  // Overflow clip (web-only)
-  "overflow-clip": isWeb ? { overflow: "clip" } : null,
-  "overflow-x-clip": isWeb ? { overflowX: "clip" } : null,
-  "overflow-y-clip": isWeb ? { overflowY: "clip" } : null,
-  // Scroll behavior (web-only)
-  "scroll-smooth": isWeb ? { scrollBehavior: "smooth" } : null,
-  "scroll-auto": isWeb ? { scrollBehavior: "auto" } : null,
-  // Float (web-only)
-  "float-left": isWeb ? { float: "left" } : null,
-  "float-right": isWeb ? { float: "right" } : null,
-  "float-start": isWeb ? { float: "inline-start" } : null,
-  "float-end": isWeb ? { float: "inline-end" } : null,
-  "float-none": isWeb ? { float: "none" } : null,
-  // Clear (web-only)
-  "clear-left": isWeb ? { clear: "left" } : null,
-  "clear-right": isWeb ? { clear: "right" } : null,
-  "clear-both": isWeb ? { clear: "both" } : null,
-  "clear-start": isWeb ? { clear: "inline-start" } : null,
-  "clear-end": isWeb ? { clear: "inline-end" } : null,
-  "clear-none": isWeb ? { clear: "none" } : null,
-  // Vertical align (web-only)
-  "align-baseline": isWeb ? { verticalAlign: "baseline" } : null,
-  "align-top": isWeb ? { verticalAlign: "top" } : null,
-  "align-middle": isWeb ? { verticalAlign: "middle" } : null,
-  "align-bottom": isWeb ? { verticalAlign: "bottom" } : null,
-  "align-text-top": isWeb ? { verticalAlign: "text-top" } : null,
-  "align-text-bottom": isWeb ? { verticalAlign: "text-bottom" } : null,
-  "align-sub": isWeb ? { verticalAlign: "sub" } : null,
-  "align-super": isWeb ? { verticalAlign: "super" } : null,
-  // Touch action (web-only)
-  "touch-auto": isWeb ? { touchAction: "auto" } : null,
-  "touch-none": isWeb ? { touchAction: "none" } : null,
-  "touch-pan-x": isWeb ? { touchAction: "pan-x" } : null,
-  "touch-pan-y": isWeb ? { touchAction: "pan-y" } : null,
-  "touch-pan-left": isWeb ? { touchAction: "pan-left" } : null,
-  "touch-pan-right": isWeb ? { touchAction: "pan-right" } : null,
-  "touch-pan-up": isWeb ? { touchAction: "pan-up" } : null,
-  "touch-pan-down": isWeb ? { touchAction: "pan-down" } : null,
-  "touch-pinch-zoom": isWeb ? { touchAction: "pinch-zoom" } : null,
-  "touch-manipulation": isWeb ? { touchAction: "manipulation" } : null
-};
+var _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`, `inline-*`, `contents`, `flow-root` have no native equivalent.
+    flex: { display: "flex" },
+    block: web ? { display: "block" } : null,
+    "inline-block": web ? { display: "inline-block" } : null,
+    inline: web ? { display: "inline" } : null,
+    grid: web ? { display: "grid" } : null,
+    grd: web ? { display: "grid" } : null,
+    "inline-flex": { display: web ? "inline-flex" : "flex" },
+    "inline-grid": web ? { display: "inline-grid" } : null,
+    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 ? { "--tw-grayscale": "grayscale(100%)", filter: FILTER_COMPOSE } : null,
+    invert: web ? { "--tw-invert": "invert(100%)", filter: FILTER_COMPOSE } : null,
+    sepia: web ? { "--tw-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 (vw values are web-only; vh values work cross-platform via spacing scale for h-*)
+    "w-screen": web ? { width: "100vw" } : null,
+    "min-h-screen": { minHeight: "100vh" },
+    "max-h-screen": { maxHeight: "100vh" },
+    "min-w-screen": web ? { minWidth: "100vw" } : null,
+    "max-w-screen": web ? { maxWidth: "100vw" } : null,
+    // max-w named container sizes (mirrors Tailwind's container scale)
+    "max-w-none": { maxWidth: "none" },
+    "max-w-xs": { maxWidth: 320 },
+    "max-w-sm": { maxWidth: 384 },
+    "max-w-md": { maxWidth: 448 },
+    "max-w-lg": { maxWidth: 512 },
+    "max-w-xl": { maxWidth: 576 },
+    "max-w-2xl": { maxWidth: 672 },
+    "max-w-3xl": { maxWidth: 768 },
+    "max-w-4xl": { maxWidth: 896 },
+    "max-w-5xl": { maxWidth: 1024 },
+    "max-w-6xl": { maxWidth: 1152 },
+    "max-w-7xl": { maxWidth: 1280 },
+    "max-w-prose": 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 RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1024,7 +1043,7 @@ var RESOLVERS = {
     return color ? { backgroundColor: color } : null;
   },
   "bg-opacity": ({ value }, _) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = parseFloat(value) / 100;
     return isNaN(v) ? null : { "--bg-opacity": v };
   },
@@ -1034,7 +1053,7 @@ var RESOLVERS = {
     if (!isArbitrary && size !== null) return { fontSize: size };
     if (isArbitrary) {
       if (/^\d/.test(value) || /^(calc|min|max|clamp)/.test(value)) {
-        return { fontSize: isWeb ? value : toNativeValue(value) };
+        return { fontSize: getEffectiveIsWeb() ? value : toNativeValue(value) };
       }
       return { color: value };
     }
@@ -1042,7 +1061,7 @@ var RESOLVERS = {
     return color ? { color } : null;
   },
   "text-opacity": ({ value }, _) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = parseFloat(value) / 100;
     return isNaN(v) ? null : { "--text-opacity": v };
   },
@@ -1238,7 +1257,7 @@ var RESOLVERS = {
   },
   // ── Grid template columns/rows (Tailwind-style aliases, web-only) ──────────
   "grid-cols": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (!value) return null;
     if (isArbitrary) return { display: "grid", gridTemplateColumns: value };
     if (value === "none") return { display: "grid", gridTemplateColumns: "none" };
@@ -1247,7 +1266,7 @@ var RESOLVERS = {
     return { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
   },
   "grid-rows": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (!value) return null;
     if (isArbitrary) return { gridTemplateRows: value };
     if (value === "none") return { gridTemplateRows: "none" };
@@ -1257,7 +1276,7 @@ var RESOLVERS = {
   },
   // ── Grid auto flow (web-only) ─────────────────────────────────────────────
   "grid-flow": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const flows = {
       row: "row",
       col: "column",
@@ -1270,7 +1289,7 @@ var RESOLVERS = {
   },
   // ── Grid auto sizing (web-only) ───────────────────────────────────────────
   "auto-cols": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { gridAutoColumns: value };
     const presets = {
       auto: "auto",
@@ -1282,7 +1301,7 @@ var RESOLVERS = {
     return v ? { gridAutoColumns: v } : null;
   },
   "auto-rows": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { gridAutoRows: value };
     const presets = {
       auto: "auto",
@@ -1295,54 +1314,54 @@ var RESOLVERS = {
   },
   // ── Grid column placement (web-only) ──────────────────────────────────────
   "col-span": ({ value }) => {
-    if (!isWeb) return null;
+    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 (!isWeb) return null;
+    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 (!isWeb) return null;
+    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 (!isWeb) return null;
+    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 (!isWeb) return null;
+    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 (!isWeb) return null;
+    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 (!isWeb) return null;
+    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 (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (!value || value === "auto") return { gridRow: "auto" };
     if (isArbitrary) return { gridRow: value };
     return null;
@@ -1350,7 +1369,7 @@ var RESOLVERS = {
   // ── Grid alignment (web-only) ──────────────────────────────────────────────
   // place-items is shorthand for align-items + justify-items on a grid container
   "place-items": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const map = {
       start: "start",
       end: "end",
@@ -1362,7 +1381,7 @@ var RESOLVERS = {
   },
   // place-content is shorthand for align-content + justify-content on a grid container
   "place-content": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const map = {
       start: "start",
       end: "end",
@@ -1377,7 +1396,7 @@ var RESOLVERS = {
   },
   // justify-items controls inline-axis alignment of grid items within their cells
   "justify-items": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const map = {
       start: "start",
       end: "end",
@@ -1388,7 +1407,7 @@ var RESOLVERS = {
   },
   // place-self is shorthand for align-self + justify-self on a grid item
   "place-self": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const map = {
       auto: "auto",
       start: "start",
@@ -1400,7 +1419,7 @@ var RESOLVERS = {
   },
   // justify-self controls inline-axis self-alignment of a grid item
   "justify-self": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const map = {
       auto: "auto",
       start: "start",
@@ -1412,7 +1431,7 @@ var RESOLVERS = {
   },
   // ── CSS Filters (composable via CSS variables, web-only) ─────────────────
   blur: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const sizes = {
       "": "blur(8px)",
       sm: "blur(4px)",
@@ -1427,43 +1446,43 @@ var RESOLVERS = {
     return v !== void 0 ? { "--tw-blur": v, filter: FILTER_COMPOSE } : null;
   },
   brightness: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-brightness": v, filter: FILTER_COMPOSE };
   },
   contrast: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-contrast": v, filter: FILTER_COMPOSE };
   },
   grayscale: ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = value === "0" ? "grayscale(0)" : "grayscale(100%)";
     return { "--tw-grayscale": v, filter: FILTER_COMPOSE };
   },
   "hue-rotate": ({ value, negative, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
     return { "--tw-hue-rotate": `hue-rotate(${deg})`, filter: FILTER_COMPOSE };
   },
   invert: ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = value === "0" ? "invert(0)" : "invert(100%)";
     return { "--tw-invert": v, filter: FILTER_COMPOSE };
   },
   saturate: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-saturate": v, filter: FILTER_COMPOSE };
   },
   sepia: ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = value === "0" ? "sepia(0)" : "sepia(100%)";
     return { "--tw-sepia": v, filter: FILTER_COMPOSE };
   },
   "drop-shadow": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { "--tw-drop-shadow": `drop-shadow(${value.replace(/_/g, " ")})`, filter: FILTER_COMPOSE };
     const presets = {
       "": "drop-shadow(0 1px 2px rgb(0 0 0/0.1)) drop-shadow(0 1px 1px rgb(0 0 0/0.06))",
@@ -1479,14 +1498,14 @@ var RESOLVERS = {
   },
   // Arbitrary full filter string: filter-[blur(4px)_grayscale(1)]
   filter: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { filter: value.replace(/_/g, " ") };
     if (value === "none") return { filter: "none" };
     return null;
   },
   // ── Backdrop Filters (composable via CSS variables, web-only) ────────────
   "backdrop-blur": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const sizes = {
       "": "blur(8px)",
       sm: "blur(4px)",
@@ -1501,52 +1520,52 @@ var RESOLVERS = {
     return v !== void 0 ? { "--tw-backdrop-blur": v, backdropFilter: BACKDROP_FILTER_COMPOSE } : null;
   },
   "backdrop-brightness": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `brightness(${value})` : `brightness(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-brightness": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-contrast": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `contrast(${value})` : `contrast(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-contrast": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-grayscale": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     return { "--tw-backdrop-grayscale": value === "0" ? "grayscale(0)" : "grayscale(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-hue-rotate": ({ value, negative, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
     if (isNaN(parseFloat(deg)) && !isArbitrary) return null;
     return { "--tw-backdrop-hue-rotate": `hue-rotate(${deg})`, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-invert": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     return { "--tw-backdrop-invert": value === "0" ? "invert(0)" : "invert(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-opacity": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `opacity(${value})` : `opacity(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-opacity": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-saturate": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const v = isArbitrary ? `saturate(${value})` : `saturate(${parseFloat(value) / 100})`;
     return isNaN(parseFloat(value)) && !isArbitrary ? null : { "--tw-backdrop-saturate": v, backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-sepia": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     return { "--tw-backdrop-sepia": value === "0" ? "sepia(0)" : "sepia(100%)", backdropFilter: BACKDROP_FILTER_COMPOSE };
   },
   "backdrop-filter": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { backdropFilter: value.replace(/_/g, " ") };
     if (value === "none") return { backdropFilter: "none" };
     return null;
   },
   // ── Background gradient (CSS variable gradient stops, web-only) ──────────
   "bg-gradient-to": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const directions = {
       t: "to top",
       tr: "to top right",
@@ -1564,7 +1583,7 @@ var RESOLVERS = {
     };
   },
   from: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     if (!color) return null;
     return {
@@ -1573,7 +1592,7 @@ var RESOLVERS = {
     };
   },
   via: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     if (!color) return null;
     return {
@@ -1582,7 +1601,7 @@ var RESOLVERS = {
     };
   },
   to: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     if (!color) return null;
     return { "--tw-gradient-to": color };
@@ -1591,23 +1610,23 @@ var RESOLVERS = {
   "skew-x": ({ value, negative, isArbitrary }) => {
     const deg = isArbitrary ? value : `${(negative ? -1 : 1) * parseFloat(value)}deg`;
     if (!isArbitrary && isNaN(parseFloat(value))) return null;
-    return isWeb ? { transform: `skewX(${deg})` } : { transform: [{ skewX: deg }] };
+    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 isWeb ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
+    return getEffectiveIsWeb() ? { transform: `skewY(${deg})` } : { transform: [{ skewY: deg }] };
   },
   // Arbitrary full transform string: transform-[rotate(45deg)_scale(1.5)]
   transform: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    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 (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { transformOrigin: value.replace(/_/g, " ") };
     const origins = {
       center: "center",
@@ -1624,7 +1643,7 @@ var RESOLVERS = {
   },
   // ── Text decoration advanced (web-only) ───────────────────────────────────
   decoration: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) {
       if (/^\d/.test(value) || value.startsWith("calc(")) return { textDecorationThickness: value };
       return { textDecorationColor: value };
@@ -1651,7 +1670,7 @@ var RESOLVERS = {
     return color ? { textDecorationColor: color } : null;
   },
   "underline-offset": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { textUnderlineOffset: value };
     const offsets = {
       auto: "auto",
@@ -1665,7 +1684,7 @@ var RESOLVERS = {
   },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (!value) return { outline: "2px solid transparent", outlineOffset: "2px" };
     if (value === "none") return { outline: "none", outlineOffset: "0" };
     if (isArbitrary) {
@@ -1678,14 +1697,14 @@ var RESOLVERS = {
     return color ? { outlineColor: color } : null;
   },
   "outline-offset": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { outlineOffset: value };
     const offsets = { "0": "0px", "1": "1px", "2": "2px", "4": "4px", "8": "8px" };
     return offsets[value] ? { outlineOffset: offsets[value] } : null;
   },
   // ── Columns (web-only) ─────────────────────────────────────────────────────
   columns: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { columnCount: value };
     if (value === "auto") return { columnCount: "auto" };
     const n = parseInt(value, 10);
@@ -1709,7 +1728,7 @@ var RESOLVERS = {
   },
   // ── Mix / background blend mode (web-only) ───────────────────────────────
   "mix-blend": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const modes = [
       "normal",
       "multiply",
@@ -1732,7 +1751,7 @@ var RESOLVERS = {
     return modes.includes(value) ? { mixBlendMode: value } : null;
   },
   "bg-blend": ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const modes = [
       "normal",
       "multiply",
@@ -1755,7 +1774,7 @@ var RESOLVERS = {
   },
   // ── Will-change (web-only) ─────────────────────────────────────────────────
   "will-change": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { willChange: value.replace(/_/g, ", ") };
     const presets = {
       auto: "auto",
@@ -1769,21 +1788,21 @@ var RESOLVERS = {
   // These return special __divide* markers that resolver.ts converts to
   // .cls > * + * { border-... } CSS rules. No inline style is applied.
   "divide-x": ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!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 (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (value === "reverse") return null;
     if (!value) return { __divideY: 1 };
     const n = parseFloat(value);
     return isNaN(n) ? null : { __divideY: n };
   },
   divide: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { __divideColor: value };
     const styleTokens = {
       solid: "solid",
@@ -1800,7 +1819,7 @@ var RESOLVERS = {
   // Named presets give cross-platform shadow; arbitrary is web-only.
   "text-shadow": ({ value, isArbitrary }, { colors }) => {
     if (value === "none") {
-      return isWeb ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
+      return getEffectiveIsWeb() ? { textShadow: "none" } : { textShadowColor: "transparent", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 0 };
     }
     const webPresets = {
       "": "0 2px 4px rgba(0,0,0,0.3)",
@@ -1817,15 +1836,15 @@ var RESOLVERS = {
       xl: { textShadowColor: "rgba(0,0,0,0.5)", textShadowOffset: { width: 0, height: 16 }, textShadowRadius: 32 }
     };
     if (value in webPresets) {
-      if (isWeb) return { textShadow: webPresets[value] };
+      if (getEffectiveIsWeb()) return { textShadow: webPresets[value] };
       return nativePresets[value] ?? null;
     }
     if (isArbitrary) {
-      return isWeb ? { textShadow: value.replace(/_/g, " ") } : null;
+      return getEffectiveIsWeb() ? { textShadow: value.replace(/_/g, " ") } : null;
     }
     const color = resolveColor(value, colors, false);
     if (color) {
-      return isWeb ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
+      return getEffectiveIsWeb() ? { textShadow: `0 2px 4px ${color}` } : { textShadowColor: color };
     }
     return null;
   },
@@ -1833,13 +1852,13 @@ var RESOLVERS = {
   perspective: ({ value, isArbitrary }) => {
     if (isArbitrary) {
       const numPx = parseFloat(value);
-      if (isWeb) return { transform: `perspective(${value})` };
+      if (getEffectiveIsWeb()) return { transform: `perspective(${value})` };
       return isNaN(numPx) ? null : { transform: [{ perspective: numPx }] };
     }
-    if (value === "none") return isWeb ? { transform: "none" } : null;
+    if (value === "none") return getEffectiveIsWeb() ? { transform: "none" } : null;
     const n = parseFloat(value);
     if (isNaN(n)) return null;
-    return isWeb ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
+    return getEffectiveIsWeb() ? { transform: `perspective(${n}px)` } : { transform: [{ perspective: n }] };
   },
   // ── Tint color (native-only, for Image and icon components) ──────────────
   tint: ({ value, isArbitrary }, { colors }) => {
@@ -1857,7 +1876,7 @@ var RESOLVERS = {
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
   animate: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (isArbitrary) return { animation: value.replace(/_/g, " ") };
     const defs = {
       none: { animation: "none" },
@@ -1883,7 +1902,7 @@ var RESOLVERS = {
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {
-    if (!isWeb) return null;
+    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;
@@ -1896,14 +1915,14 @@ var RESOLVERS = {
   },
   // ── Caret color (web-only) ────────────────────────────────────────────────
   caret: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    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 (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     if (value === "auto") return { accentColor: "auto" };
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { accentColor: color } : null;
@@ -1987,7 +2006,7 @@ var RESOLVERS = {
     }
     const v = zIndex[value];
     if (v !== void 0) {
-      if (v === "auto") return isWeb ? { zIndex: "auto" } : null;
+      if (v === "auto") return getEffectiveIsWeb() ? { zIndex: "auto" } : null;
       return { zIndex: v };
     }
     const n = parseInt(value);
@@ -2016,13 +2035,13 @@ var RESOLVERS = {
   },
   // ── Line height ────────────────────────────────────────────────────────────
   leading: ({ value, isArbitrary }, { lineHeight }) => {
-    if (isArbitrary) return { lineHeight: isWeb ? value : toNativeValue(value) };
+    if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
     const v = lineHeight[value];
     return v !== void 0 ? { lineHeight: v } : null;
   },
   // ── Letter spacing ─────────────────────────────────────────────────────────
   tracking: ({ value, isArbitrary }, { letterSpacing }) => {
-    if (isArbitrary) return { letterSpacing: isWeb ? value : toNativeValue(value) };
+    if (isArbitrary) return { letterSpacing: getEffectiveIsWeb() ? value : toNativeValue(value) };
     const v = letterSpacing[value];
     return v !== void 0 ? { letterSpacing: v } : null;
   },
@@ -2037,34 +2056,34 @@ var RESOLVERS = {
   scale: ({ value, isArbitrary }) => {
     const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
-    return isWeb ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
+    return getEffectiveIsWeb() ? { transform: `scale(${n})` } : { transform: [{ scale: n }] };
   },
   "scale-x": ({ value, isArbitrary }) => {
     const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
-    return isWeb ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
+    return getEffectiveIsWeb() ? { transform: `scaleX(${n})` } : { transform: [{ scaleX: n }] };
   },
   "scale-y": ({ value, isArbitrary }) => {
     const n = isArbitrary ? parseFloat(value) : parseFloat(value) / 100;
     if (isNaN(n)) return null;
-    return isWeb ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
+    return getEffectiveIsWeb() ? { transform: `scaleY(${n})` } : { transform: [{ scaleY: n }] };
   },
   // ── Rotate ─────────────────────────────────────────────────────────────────
   rotate: ({ value, negative, isArbitrary }) => {
     if (isArbitrary) {
       const finalValue = negative ? `-${value}` : value;
-      return isWeb ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
+      return getEffectiveIsWeb() ? { transform: `rotate(${finalValue})` } : { transform: [{ rotate: finalValue }] };
     }
     const deg = parseFloat(value);
     if (isNaN(deg)) return null;
     const finalDeg = negative ? -deg : deg;
-    return isWeb ? { transform: `rotate(${finalDeg}deg)` } : { transform: [{ rotate: `${finalDeg}deg` }] };
+    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 (isWeb) return { transform: `translateX(${v})` };
+    if (getEffectiveIsWeb()) return { transform: `translateX(${v})` };
     if (typeof v === "string") {
       const n = parseFloat(v);
       return isNaN(n) ? null : { transform: [{ translateX: n }] };
@@ -2074,7 +2093,7 @@ var RESOLVERS = {
   "translate-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
     if (v === null) return null;
-    if (isWeb) return { transform: `translateY(${v})` };
+    if (getEffectiveIsWeb()) return { transform: `translateY(${v})` };
     if (typeof v === "string") {
       const n = parseFloat(v);
       return isNaN(n) ? null : { transform: [{ translateY: n }] };
@@ -2087,12 +2106,12 @@ var RESOLVERS = {
     const presets = { auto: "auto", square: 1, video: 16 / 9 };
     if (!(value in presets)) return null;
     const v = presets[value];
-    if (v === "auto") return isWeb ? { aspectRatio: "auto" } : null;
+    if (v === "auto") return getEffectiveIsWeb() ? { aspectRatio: "auto" } : null;
     return { aspectRatio: v };
   },
   // ── Transition (web-only; use Animated API on native) ─────────────────────
   transition: ({ value }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const presets = {
       "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
       all: "all 150ms",
@@ -2106,18 +2125,18 @@ var RESOLVERS = {
     return v !== void 0 ? { transition: v } : null;
   },
   duration: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDuration: ms };
   },
   delay: ({ value, isArbitrary }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
   // ── Ring (web-only: box-shadow outline ring) ──────────────────────────────
   ring: ({ value, isArbitrary }, { colors }) => {
-    if (!isWeb) return null;
+    if (!getEffectiveIsWeb()) return null;
     const DEFAULT_COLOR = "rgba(59, 130, 246, 0.5)";
     const DEFAULT_WIDTH = 3;
     if (!value) {
@@ -2144,7 +2163,7 @@ var RESOLVERS = {
     return null;
   },
   "ring-offset": ({ value, isArbitrary }, _theme) => {
-    if (!isWeb) return null;
+    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 };
@@ -2173,7 +2192,7 @@ function resolveUtility(parsed, theme) {
     if (parsed.utility === "inline-grid") {
       return { display: "inline-grid" };
     }
-    if (parsed.utility in STANDALONE) return STANDALONE[parsed.utility] ?? null;
+    if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
   }
   const resolver = PLUGIN_RESOLVERS[parsed.utility] ?? RESOLVERS[parsed.utility];
   if (resolver) return resolver(parsed, theme);
@@ -2877,7 +2896,7 @@ function parseClass(className) {
   const bracketStart = remaining.lastIndexOf("-[");
   if (bracketStart > 0 && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (STANDALONE_UTILITIES.has(remaining)) {
@@ -2906,10 +2925,29 @@ function parseClass(className) {
   }
   return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
 }
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    if (/\s/.test(ch) && depth === 0) {
+      if (current) {
+        tokens.push(current);
+        current = "";
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
 function parseClasses(classString) {
   const results = [];
-  for (const token of classString.split(/\s+/)) {
-    if (!token) continue;
+  for (const token of splitClassTokens(classString)) {
     const parsed = parseClass(token);
     if (parsed) results.push(parsed);
   }
@@ -3347,6 +3385,7 @@ var customVariants = new Proxy(
 );
 
 // src/vite-plugin.ts
+setCSSGenMode(true);
 var KBACH_START = "/* kbach:start */";
 var KBACH_END = "/* kbach:end */";
 var GROUPS = [
@@ -3489,7 +3528,7 @@ function kbach(userConfig) {
     for (const dir of ["src", "app", "pages", "components", "views", "layouts"]) {
       scanDir((0, import_path.join)(root, dir), (code) => {
         for (const cls of extractClassStrings(code))
-          for (const token of cls.split(/\s+/).filter(Boolean))
+          for (const token of splitClassTokens(cls))
             if (!tokenCSS.has(token)) {
               const css = generateClassCSS(token, cfg.theme, cfg.darkMode, screens);
               tokenCSS.set(token, css);