@kbach/react 0.5.38 → 0.5.41

package/dist/jsx-runtime.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var jsx_runtime_exports = {};
 __export(jsx_runtime_exports, {
   Fragment: () => import_react5.Fragment,
+  _invalidateDefaultFontCache: () => _invalidateDefaultFontCache,
   jsx: () => jsx,
   jsxs: () => jsxs
 });
@@ -597,7 +598,11 @@ var LRUCache = class {
     return this;
   }
   has(key) {
-    return this.cache.has(key);
+    if (!this.cache.has(key)) return false;
+    const value = this.cache.get(key);
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return true;
   }
   delete(key) {
     return this.cache.delete(key);
@@ -612,9 +617,10 @@ var LRUCache = class {
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative");
 var _cssGenMode = false;
 function getEffectiveIsWeb() {
-  return isWeb || _cssGenMode;
+  return isWeb || _cssGenMode || !isNative;
 }
 function toNativeValue(raw) {
   if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
@@ -627,773 +633,116 @@ function escapeCSSSelector(cls) {
   return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
-// src/core/parser.ts
-var PLUGIN_MODIFIERS = /* @__PURE__ */ new Set();
-function registerModifier(name) {
-  PLUGIN_MODIFIERS.add(name);
+// src/core/registry.ts
+var BUILTIN_MODIFIERS = {
+  // ── Mode ─────────────────────────────────────────────────────────────────
+  dark: { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  "not-light": { darkScheme: "dark", jsBehavior: "mode", jsMatch: (d) => d },
+  light: { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  "not-dark": { darkScheme: "light", jsBehavior: "mode", jsMatch: (d) => !d },
+  // ── Interactive — JS state + CSS pseudo ───────────────────────────────────
+  hover: { pseudo: ":hover", jsBehavior: "interactive", jsMatch: (_, s) => !!s.hover },
+  "not-hover": { pseudo: ":not(:hover)", jsBehavior: "interactive", jsMatch: (_, s) => !s.hover },
+  focus: { pseudo: ":focus", jsBehavior: "interactive", jsMatch: (_, s) => !!s.focus },
+  "not-focus": { pseudo: ":not(:focus)", jsBehavior: "interactive", jsMatch: (_, s) => !s.focus },
+  active: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.active || !!s.pressed },
+  "not-active": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.active && !s.pressed },
+  pressed: { pseudo: ":active", jsBehavior: "interactive", jsMatch: (_, s) => !!s.pressed || !!s.active },
+  "not-pressed": { pseudo: ":not(:active)", jsBehavior: "interactive", jsMatch: (_, s) => !s.pressed && !s.active },
+  disabled: { pseudo: ":disabled", jsBehavior: "interactive", jsMatch: (_, s) => !!s.disabled },
+  "not-disabled": { pseudo: ":not(:disabled)", jsBehavior: "interactive", jsMatch: (_, s) => !s.disabled },
+  checked: { pseudo: ":checked", jsBehavior: "interactive", jsMatch: (_, s) => !!s.checked },
+  "not-checked": { pseudo: ":not(:checked)", jsBehavior: "interactive", jsMatch: (_, s) => !s.checked },
+  visited: { pseudo: ":visited", jsBehavior: "interactive", jsMatch: (_, s) => !!s.visited },
+  "not-visited": { pseudo: ":not(:visited)", jsBehavior: "interactive", jsMatch: (_, s) => !s.visited },
+  placeholder: { pseudo: "::placeholder", jsBehavior: "interactive", jsMatch: (_, s) => !!s.placeholder },
+  // ── CSS-only pseudo-classes (structural) ──────────────────────────────────
+  first: { pseudo: ":first-child", jsBehavior: "css-only", forcesImportant: true },
+  last: { pseudo: ":last-child", jsBehavior: "css-only", forcesImportant: true },
+  odd: { pseudo: ":nth-child(odd)", jsBehavior: "css-only", forcesImportant: true },
+  even: { pseudo: ":nth-child(even)", jsBehavior: "css-only", forcesImportant: true },
+  only: { pseudo: ":only-child", jsBehavior: "css-only", forcesImportant: true },
+  "focus-within": { pseudo: ":focus-within", jsBehavior: "css-only", forcesImportant: true },
+  "focus-visible": { pseudo: ":focus-visible", jsBehavior: "css-only", forcesImportant: true },
+  // ── CSS-only pseudo-elements ───────────────────────────────────────────────
+  before: { pseudo: "::before", jsBehavior: "css-only" },
+  after: { pseudo: "::after", jsBehavior: "css-only" },
+  selection: { pseudo: "::selection", jsBehavior: "css-only" },
+  "first-letter": { pseudo: "::first-letter", jsBehavior: "css-only" },
+  "first-line": { pseudo: "::first-line", jsBehavior: "css-only" },
+  marker: { pseudo: "::marker", jsBehavior: "css-only" },
+  // ── Group / peer ancestor selectors (CSS-only) ─────────────────────────────
+  "group-hover": { ancestorSelector: ".group:hover ", jsBehavior: "css-only", forcesImportant: true },
+  "group-focus": { ancestorSelector: ".group:focus ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-hover": { ancestorSelector: ".peer:hover ~ ", jsBehavior: "css-only", forcesImportant: true },
+  "peer-focus": { ancestorSelector: ".peer:focus ~ ", jsBehavior: "css-only", forcesImportant: true },
+  // ── Responsive — both CSS (@media min-width) and JS (breakpoints set) ──────
+  sm: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("sm") },
+  md: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("md") },
+  lg: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("lg") },
+  xl: { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("xl") },
+  "2xl": { isResponsive: true, jsBehavior: "responsive", jsMatch: (_, __, bp) => bp.has("2xl") },
+  // ── Print media (CSS-only) ─────────────────────────────────────────────────
+  print: { mediaQuery: "print", jsBehavior: "css-only", forcesImportant: true },
+  // ── Orientation / accessibility media (CSS-only) ───────────────────────────
+  landscape: { mediaQuery: "(orientation: landscape)", jsBehavior: "css-only", forcesImportant: true },
+  portrait: { mediaQuery: "(orientation: portrait)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-reduce": { mediaQuery: "(prefers-reduced-motion: reduce)", jsBehavior: "css-only", forcesImportant: true },
+  "motion-safe": { mediaQuery: "(prefers-reduced-motion: no-preference)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-more": { mediaQuery: "(prefers-contrast: more)", jsBehavior: "css-only", forcesImportant: true },
+  "contrast-less": { mediaQuery: "(prefers-contrast: less)", jsBehavior: "css-only", forcesImportant: true },
+  // ── Directionality (CSS-only) ──────────────────────────────────────────────
+  rtl: { dirSelector: '[dir="rtl"] ', jsBehavior: "css-only", forcesImportant: true },
+  ltr: { dirSelector: '[dir="ltr"] ', jsBehavior: "css-only", forcesImportant: true }
+};
+var _pluginModifiers = {};
+var _allNames = null;
+var _interactiveNames = null;
+var _modeNames = null;
+var _responsiveNames = null;
+function _invalidate() {
+  _allNames = null;
+  _interactiveNames = null;
+  _modeNames = null;
+  _responsiveNames = null;
+}
+function registerModifier(name, def) {
+  _pluginModifiers[name] = def;
+  _invalidate();
 }
 function clearPluginModifiers() {
-  PLUGIN_MODIFIERS.clear();
-}
-var MODIFIERS = /* @__PURE__ */ new Set([
-  // Theme
-  "dark",
-  "light",
-  "not-dark",
-  "not-light",
-  // Interaction
-  "hover",
-  "focus",
-  "active",
-  "visited",
-  "disabled",
-  "checked",
-  "pressed",
-  "placeholder",
-  "focus-within",
-  "focus-visible",
-  // Negated interaction
-  "not-hover",
-  "not-focus",
-  "not-active",
-  "not-visited",
-  "not-disabled",
-  "not-checked",
-  "not-pressed",
-  // Structural
-  "first",
-  "last",
-  "odd",
-  "even",
-  "only",
-  // Group / peer
-  "group-hover",
-  "group-focus",
-  "peer-hover",
-  "peer-focus",
-  // Responsive (handled separately but accepted)
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  // Pseudo-elements (CSS-injection only; matchesMods returns false for these)
-  "before",
-  "after",
-  "selection",
-  "first-letter",
-  "first-line",
-  "marker",
-  // Print media modifier
-  "print",
-  // Orientation media modifiers (CSS-injection only)
-  "landscape",
-  "portrait",
-  // Accessibility media modifiers (CSS-injection only)
-  "motion-reduce",
-  "motion-safe",
-  "contrast-more",
-  "contrast-less",
-  // Directionality modifiers (CSS-injection only)
-  "rtl",
-  "ltr"
-]);
-var UTILITY_PREFIXES = [
-  // Multi-word flex
-  "flex-row-reverse",
-  "flex-col-reverse",
-  "flex-row",
-  "flex-col",
-  "flex-wrap-reverse",
-  "flex-wrap",
-  "flex-nowrap",
-  "flex-shrink-0",
-  "flex-shrink",
-  "flex-grow-0",
-  "flex-grow",
-  "items-start",
-  "items-end",
-  "items-center",
-  "items-baseline",
-  "items-stretch",
-  "justify-start",
-  "justify-end",
-  "justify-center",
-  "justify-between",
-  "justify-around",
-  "justify-evenly",
-  "content-start",
-  "content-end",
-  "content-center",
-  "content-between",
-  "content-around",
-  "content-evenly",
-  "self-start",
-  "self-end",
-  "self-center",
-  "self-auto",
-  "self-stretch",
-  "text-left",
-  "text-right",
-  "text-center",
-  "text-justify",
-  "font-thin",
-  "font-extralight",
-  "font-light",
-  "font-normal",
-  "font-medium",
-  "font-semibold",
-  "font-bold",
-  "font-extrabold",
-  "font-black",
-  "overflow-hidden",
-  "overflow-visible",
-  "overflow-scroll",
-  "overflow-auto",
-  "overflow-x-hidden",
-  "overflow-x-scroll",
-  "overflow-x-auto",
-  "overflow-y-hidden",
-  "overflow-y-scroll",
-  "overflow-y-auto",
-  "object-contain",
-  "object-cover",
-  "object-fill",
-  "object-none",
-  "object-scale-down",
-  "border-solid",
-  "border-dashed",
-  "border-dotted",
-  "border-none",
-  "border-t",
-  "border-r",
-  "border-b",
-  "border-l",
-  "rounded-tl",
-  "rounded-tr",
-  "rounded-bl",
-  "rounded-br",
-  "rounded-t",
-  "rounded-r",
-  "rounded-b",
-  "rounded-l",
-  "list-none",
-  "list-disc",
-  "list-decimal",
-  "cursor-auto",
-  "cursor-default",
-  "cursor-pointer",
-  "cursor-wait",
-  "cursor-text",
-  "cursor-move",
-  "cursor-not-allowed",
-  "select-none",
-  "select-text",
-  "select-all",
-  "select-auto",
-  "pointer-events-none",
-  "pointer-events-auto",
-  "whitespace-normal",
-  "whitespace-nowrap",
-  "whitespace-pre-wrap",
-  "whitespace-pre-line",
-  "whitespace-pre",
-  "break-normal",
-  "break-words",
-  "break-all",
-  "break-keep",
-  "bg-clip-border",
-  "bg-clip-padding",
-  "bg-clip-content",
-  "bg-clip-text",
-  "bg-gradient-to",
-  "resize-none",
-  "resize-y",
-  "resize-x",
-  "box-border",
-  "box-content",
-  "gap-x",
-  "gap-y",
-  "inset-x",
-  "inset-y",
-  "divide-x",
-  "divide-y",
-  "space-x",
-  "space-y",
-  "translate-x",
-  "translate-y",
-  "scale-x",
-  "scale-y",
-  "skew-x",
-  "skew-y",
-  // Transform origin (single prefix, value carries direction)
-  "origin",
-  "min-w",
-  "min-h",
-  "max-w",
-  "max-h",
-  "ring-offset",
-  "bg-opacity",
-  "text-opacity",
-  "border-opacity",
-  // Grid placement
-  "col-span",
-  "col-start",
-  "col-end",
-  "row-span",
-  "row-start",
-  "row-end",
-  "grid-cols",
-  "grid-rows",
-  "grid-flow",
-  "auto-cols",
-  "auto-rows",
-  // Grid alignment
-  "place-items",
-  "place-content",
-  "place-self",
-  "justify-items",
-  "justify-self",
-  // Backdrop filters (longer than 'backdrop' alone)
-  "backdrop-blur",
-  "backdrop-brightness",
-  "backdrop-contrast",
-  "backdrop-grayscale",
-  "backdrop-hue-rotate",
-  "backdrop-invert",
-  "backdrop-opacity",
-  "backdrop-saturate",
-  "backdrop-sepia",
-  "backdrop-filter",
-  // Filters
-  "drop-shadow",
-  "hue-rotate",
-  "text-shadow",
-  "underline-offset",
-  "outline-offset",
-  "will-change",
-  "mix-blend",
-  "bg-blend",
-  "decoration",
-  "perspective",
-  "tint",
-  "animate",
-  // Single-word prefixes last
-  "appearance-none",
-  "outline-none",
-  "outline",
-  "inline-flex",
-  "inline-block",
-  "inline-grid",
-  "italic",
-  "non-italic",
-  "underline",
-  "overline",
-  "line-through",
-  "no-underline",
-  "uppercase",
-  "lowercase",
-  "capitalize",
-  "normal-case",
-  "antialiased",
-  "subpixel-antialiased",
-  "overflow-ellipsis",
-  "truncate",
-  "sr-only",
-  "not-sr-only",
-  "relative",
-  "absolute",
-  "fixed",
-  "sticky",
-  "static",
-  "visible",
-  "invisible",
-  "hidden",
-  "contents",
-  "flow-root",
-  "block",
-  "inline",
-  "flex",
-  "grid",
-  "resize",
-  "appearance",
-  "border",
-  "rounded",
-  "shadow",
-  "size",
-  "opacity",
-  "leading",
-  "tracking",
-  "line-clamp",
-  "basis",
-  "grow",
-  "shrink",
-  "order",
-  "delay",
-  "duration",
-  "scale",
-  "rotate",
-  "aspect",
-  "columns",
-  "ring",
-  "gap",
-  "inset",
-  "filter",
-  "transform",
-  "blur",
-  "brightness",
-  "contrast",
-  "grayscale",
-  "invert",
-  "saturate",
-  "sepia",
-  "bg",
-  "text",
-  "font",
-  "caret",
-  "accent",
-  "from",
-  "via",
-  "to",
-  "divide",
-  "space",
-  "transition",
-  "px",
-  "py",
-  "pt",
-  "pr",
-  "pb",
-  "pl",
-  "p",
-  "mx",
-  "my",
-  "mt",
-  "mr",
-  "mb",
-  "ml",
-  "m",
-  "w",
-  "h",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "z",
-  "col",
-  "row"
-];
-var SORTED_PREFIXES = [...new Set(UTILITY_PREFIXES)].sort((a, b) => b.length - a.length);
-var STANDALONE_UTILITIES = /* @__PURE__ */ new Set([
-  // Display
-  "flex",
-  "block",
-  "inline-block",
-  "inline",
-  "grid",
-  "inline-flex",
-  "inline-grid",
-  "grd",
-  "hidden",
-  "contents",
-  "flow-root",
-  // Position
-  "relative",
-  "absolute",
-  "fixed",
-  "sticky",
-  "static",
-  // Visibility
-  "visible",
-  "invisible",
-  // Typography
-  "uppercase",
-  "lowercase",
-  "capitalize",
-  "normal-case",
-  "italic",
-  "non-italic",
-  "underline",
-  "overline",
-  "line-through",
-  "no-underline",
-  "truncate",
-  "antialiased",
-  "sr-only",
-  "not-sr-only",
-  // Font variant numeric
-  "normal-nums",
-  "ordinal",
-  "slashed-zero",
-  "lining-nums",
-  "oldstyle-nums",
-  "proportional-nums",
-  "tabular-nums",
-  "diagonal-fractions",
-  "stacked-fractions",
-  // Flexbox
-  "flex-row",
-  "flex-col",
-  "flex-row-reverse",
-  "flex-col-reverse",
-  "flex-wrap",
-  "flex-wrap-reverse",
-  "flex-nowrap",
-  "flex-shrink",
-  "flex-shrink-0",
-  "flex-grow",
-  "flex-grow-0",
-  "items-start",
-  "items-end",
-  "items-center",
-  "items-baseline",
-  "items-stretch",
-  "justify-start",
-  "justify-end",
-  "justify-center",
-  "justify-between",
-  "justify-around",
-  "justify-evenly",
-  "content-start",
-  "content-end",
-  "content-center",
-  "content-between",
-  "content-around",
-  "content-evenly",
-  "content-stretch",
-  "self-start",
-  "self-end",
-  "self-center",
-  "self-auto",
-  "self-stretch",
-  "self-baseline",
-  // Text align
-  "text-left",
-  "text-right",
-  "text-center",
-  "text-justify",
-  // Font weight shortcuts
-  "font-thin",
-  "font-extralight",
-  "font-light",
-  "font-normal",
-  "font-medium",
-  "font-semibold",
-  "font-bold",
-  "font-extrabold",
-  "font-black",
-  // Overflow
-  "overflow-hidden",
-  "overflow-visible",
-  "overflow-scroll",
-  "overflow-auto",
-  "overflow-x-hidden",
-  "overflow-x-scroll",
-  "overflow-x-auto",
-  "overflow-y-hidden",
-  "overflow-y-scroll",
-  "overflow-y-auto",
-  // Object fit
-  "object-contain",
-  "object-cover",
-  "object-fill",
-  "object-none",
-  "object-scale-down",
-  // Object position
-  "object-center",
-  "object-top",
-  "object-bottom",
-  "object-left",
-  "object-right",
-  "object-left-top",
-  "object-left-bottom",
-  "object-right-top",
-  "object-right-bottom",
-  // Border
-  "border-solid",
-  "border-dashed",
-  "border-dotted",
-  "border-none",
-  "border-t",
-  "border-r",
-  "border-b",
-  "border-l",
-  "border-collapse",
-  "border-separate",
-  // Lists
-  "list-none",
-  "list-disc",
-  "list-decimal",
-  "list-inside",
-  "list-outside",
-  // Cursor / select
-  "cursor-auto",
-  "cursor-default",
-  "cursor-pointer",
-  "cursor-wait",
-  "cursor-text",
-  "cursor-move",
-  "cursor-not-allowed",
-  "select-none",
-  "select-text",
-  "select-all",
-  "select-auto",
-  "pointer-events-none",
-  "pointer-events-auto",
-  // Whitespace / word break
-  "whitespace-normal",
-  "whitespace-nowrap",
-  "whitespace-pre",
-  "whitespace-pre-wrap",
-  "whitespace-pre-line",
-  "break-normal",
-  "break-words",
-  "break-all",
-  // Background clip
-  "bg-clip-border",
-  "bg-clip-padding",
-  "bg-clip-content",
-  "bg-clip-text",
-  // Background size
-  "bg-auto",
-  "bg-cover",
-  "bg-contain",
-  // Background position
-  "bg-center",
-  "bg-top",
-  "bg-bottom",
-  "bg-left",
-  "bg-right",
-  "bg-left-top",
-  "bg-left-bottom",
-  "bg-right-top",
-  "bg-right-bottom",
-  // Background repeat
-  "bg-repeat",
-  "bg-no-repeat",
-  "bg-repeat-x",
-  "bg-repeat-y",
-  "bg-repeat-round",
-  "bg-repeat-space",
-  // Background attachment
-  "bg-fixed",
-  "bg-local",
-  "bg-scroll",
-  // Background image
-  "bg-none",
-  // Box sizing
-  "box-border",
-  "box-content",
-  // Resize
-  "resize",
-  "resize-none",
-  "resize-y",
-  "resize-x",
-  // Outline
-  "appearance-none",
-  "outline-none",
-  "outline",
-  // Table
-  "table",
-  "table-auto",
-  "table-fixed",
-  "caption-top",
-  "caption-bottom",
-  // CSS filters (standalone = default/full effect)
-  "grayscale",
-  "invert",
-  "sepia",
-  // Isolation
-  "isolate",
-  "isolation-auto",
-  // Backface visibility (both platforms)
-  "backface-visible",
-  "backface-hidden",
-  // Divide none
-  "divide-none",
-  // Group / peer markers (no-op style; needed so isKnownUtility recognises them)
-  "group",
-  "peer",
-  // Text-wrap (web-only)
-  "text-wrap",
-  "text-nowrap",
-  "text-balance",
-  "text-pretty",
-  // Screen sizing
-  "w-screen",
-  "min-h-screen",
-  "max-h-screen",
-  "min-w-screen",
-  "max-w-screen",
-  // max-w named container sizes (Tailwind compat)
-  "max-w-none",
-  "max-w-xs",
-  "max-w-sm",
-  "max-w-md",
-  "max-w-lg",
-  "max-w-xl",
-  "max-w-2xl",
-  "max-w-3xl",
-  "max-w-4xl",
-  "max-w-5xl",
-  "max-w-6xl",
-  "max-w-7xl",
-  "max-w-prose",
-  // Extended cursors (web-only)
-  "cursor-grab",
-  "cursor-grabbing",
-  "cursor-zoom-in",
-  "cursor-zoom-out",
-  "cursor-crosshair",
-  "cursor-help",
-  "cursor-none",
-  // Overflow clip (web-only)
-  "overflow-clip",
-  "overflow-x-clip",
-  "overflow-y-clip",
-  // Scroll behavior (web-only)
-  "scroll-smooth",
-  "scroll-auto",
-  // Float & clear (web-only)
-  "float-left",
-  "float-right",
-  "float-start",
-  "float-end",
-  "float-none",
-  "clear-left",
-  "clear-right",
-  "clear-both",
-  "clear-start",
-  "clear-end",
-  "clear-none",
-  // Vertical align (web-only)
-  "align-baseline",
-  "align-top",
-  "align-middle",
-  "align-bottom",
-  "align-text-top",
-  "align-text-bottom",
-  "align-sub",
-  "align-super",
-  // Touch action (web-only)
-  "touch-auto",
-  "touch-none",
-  "touch-pan-x",
-  "touch-pan-y",
-  "touch-pan-left",
-  "touch-pan-right",
-  "touch-pan-up",
-  "touch-pan-down",
-  "touch-pinch-zoom",
-  "touch-manipulation"
-]);
-function parseClass(className) {
-  const trimmed = className.trim();
-  if (!trimmed) return null;
-  const modifiers = [];
-  let remaining = trimmed;
-  for (let i = 0; i < 3; i++) {
-    const colonIdx = findOuterColon(remaining);
-    if (colonIdx === -1) break;
-    const candidate = remaining.slice(0, colonIdx);
-    if (MODIFIERS.has(candidate) || PLUGIN_MODIFIERS.has(candidate)) {
-      modifiers.push(candidate);
-      remaining = remaining.slice(colonIdx + 1);
-    } else {
-      break;
-    }
-  }
-  let important = false;
-  if (remaining.startsWith("!") && remaining.length > 1) {
-    important = true;
-    remaining = remaining.slice(1);
-  }
-  let negative = false;
-  if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
-    negative = true;
-    remaining = remaining.slice(1);
-  }
-  const bracketStart = remaining.lastIndexOf("-[");
-  if (bracketStart > 0 && remaining.endsWith("]")) {
-    const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
-    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
-  }
-  if (STANDALONE_UTILITIES.has(remaining)) {
-    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
-  }
-  for (const prefix of SORTED_PREFIXES) {
-    if (remaining === prefix) {
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
-    }
-    if (remaining.startsWith(prefix + "-")) {
-      const value = remaining.slice(prefix.length + 1);
-      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
-    }
-  }
-  const firstDash = remaining.indexOf("-");
-  if (firstDash > 0) {
-    return {
-      original: trimmed,
-      modifiers,
-      negative,
-      important,
-      utility: remaining.slice(0, firstDash),
-      value: remaining.slice(firstDash + 1),
-      isArbitrary: false
-    };
-  }
-  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+  for (const k of Object.keys(_pluginModifiers)) delete _pluginModifiers[k];
+  _invalidate();
 }
-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++;
-      current += ch;
-      continue;
-    }
-    if (ch === "]") {
-      depth--;
-      current += ch;
-      continue;
-    }
-    if (/\s/.test(ch)) {
-      if (depth === 0) {
-        if (current) {
-          tokens.push(current);
-          current = "";
-        }
-      }
-    } else {
-      current += ch;
-    }
-  }
-  if (current) tokens.push(current);
-  return tokens;
+function getModifier(name) {
+  return BUILTIN_MODIFIERS[name] ?? _pluginModifiers[name];
 }
-function normalizeClassString(classString) {
-  return splitClassTokens(classString).join(" ");
+function isKnownModifier(name) {
+  return name in BUILTIN_MODIFIERS || name in _pluginModifiers;
 }
-function parseClasses(classString) {
-  const results = [];
-  for (const token of splitClassTokens(classString)) {
-    const parsed = parseClass(token);
-    if (parsed) results.push(parsed);
+function _allEntries() {
+  return [...Object.entries(BUILTIN_MODIFIERS), ...Object.entries(_pluginModifiers)];
+}
+function getInteractiveModifiers() {
+  if (!_interactiveNames) {
+    _interactiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "interactive").map(([k]) => k));
   }
-  return results;
+  return _interactiveNames;
 }
-function findOuterColon(s) {
-  let depth = 0;
-  for (let i = 0; i < s.length; i++) {
-    const ch = s[i];
-    if (ch === "[") depth++;
-    else if (ch === "]") depth--;
-    else if (ch === ":" && depth === 0) return i;
+function getModeModifiers() {
+  if (!_modeNames) {
+    _modeNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "mode").map(([k]) => k));
   }
-  return -1;
+  return _modeNames;
+}
+function getResponsiveModifiers() {
+  if (!_responsiveNames) {
+    _responsiveNames = new Set(_allEntries().filter(([, d]) => d.jsBehavior === "responsive").map(([k]) => k));
+  }
+  return _responsiveNames;
+}
+function matchModifier(name, isDark, state, breakpoints) {
+  return getModifier(name)?.jsMatch?.(isDark, state, breakpoints) ?? false;
 }
 
 // src/core/utilities.ts
@@ -1487,6 +836,7 @@ function resolveSizing(value, spacing, isArbitrary) {
   if (raw !== void 0) return raw;
   if (/^\d+\/\d+$/.test(value)) {
     const [num, den] = value.split("/").map(Number);
+    if (!den) return null;
     return `${(num / den * 100).toFixed(6)}%`;
   }
   return null;
@@ -3001,10 +2351,10 @@ function resolveUtility(parsed, theme) {
   if (!parsed.value) {
     if (parsed.utility in PLUGIN_STANDALONE) return PLUGIN_STANDALONE[parsed.utility] ?? null;
     if (parsed.utility === "grd" || parsed.utility === "grid") {
-      return { display: "grid" };
+      return getEffectiveIsWeb() ? { display: "grid" } : null;
     }
     if (parsed.utility === "inline-grid") {
-      return { display: "inline-grid" };
+      return getEffectiveIsWeb() ? { display: "inline-grid" } : null;
     }
     if (parsed.utility in getStandalone()) return getStandalone()[parsed.utility] ?? null;
   }
@@ -3017,6 +2367,8 @@ var PLUGIN_RESOLVERS = {};
 function clearPluginUtilities() {
   for (const key of Object.keys(PLUGIN_STANDALONE)) delete PLUGIN_STANDALONE[key];
   for (const key of Object.keys(PLUGIN_RESOLVERS)) delete PLUGIN_RESOLVERS[key];
+  _sortedPrefixes = null;
+  _standaloneNames = null;
 }
 function getPluginStandaloneMap() {
   return PLUGIN_STANDALONE;
@@ -3024,6 +2376,129 @@ function getPluginStandaloneMap() {
 function isKnownUtility(utility) {
   return utility in getStandalone() || utility in RESOLVERS || utility in PLUGIN_STANDALONE || utility in PLUGIN_RESOLVERS;
 }
+var _sortedPrefixes = null;
+var _standaloneNames = null;
+function getBuiltinUtilityPrefixes() {
+  if (!_sortedPrefixes) {
+    const all = [.../* @__PURE__ */ new Set([...Object.keys(RESOLVERS), ...Object.keys(PLUGIN_RESOLVERS)])];
+    _sortedPrefixes = all.sort((a, b) => b.length - a.length);
+  }
+  return _sortedPrefixes;
+}
+function getBuiltinStandaloneNames() {
+  if (!_standaloneNames) {
+    _standaloneNames = /* @__PURE__ */ new Set([...Object.keys(getStandalone()), ...Object.keys(PLUGIN_STANDALONE)]);
+  }
+  return _standaloneNames;
+}
+
+// src/core/parser.ts
+function parseClass(className) {
+  const trimmed = className.trim();
+  if (!trimmed) return null;
+  const modifiers = [];
+  let remaining = trimmed;
+  while (true) {
+    const colonIdx = findOuterColon(remaining);
+    if (colonIdx === -1) break;
+    const candidate = remaining.slice(0, colonIdx);
+    if (!isKnownModifier(candidate)) break;
+    modifiers.push(candidate);
+    remaining = remaining.slice(colonIdx + 1);
+  }
+  let important = false;
+  if (remaining.startsWith("!") && remaining.length > 1) {
+    important = true;
+    remaining = remaining.slice(1);
+  }
+  let negative = false;
+  if (remaining.startsWith("-") && remaining.length > 1 && remaining[1] !== "-") {
+    negative = true;
+    remaining = remaining.slice(1);
+  }
+  const bracketStart = remaining.lastIndexOf("-[");
+  if (bracketStart > 0 && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart);
+    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
+    return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
+  }
+  if (getBuiltinStandaloneNames().has(remaining)) {
+    return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+  }
+  for (const prefix of getBuiltinUtilityPrefixes()) {
+    if (remaining === prefix) {
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value: "", isArbitrary: false };
+    }
+    if (remaining.startsWith(prefix + "-")) {
+      const value = remaining.slice(prefix.length + 1);
+      return { original: trimmed, modifiers, negative, important, utility: prefix, value, isArbitrary: false };
+    }
+  }
+  const firstDash = remaining.indexOf("-");
+  if (firstDash > 0) {
+    return {
+      original: trimmed,
+      modifiers,
+      negative,
+      important,
+      utility: remaining.slice(0, firstDash),
+      value: remaining.slice(firstDash + 1),
+      isArbitrary: false
+    };
+  }
+  return { original: trimmed, modifiers, negative, important, utility: remaining, value: "", isArbitrary: false };
+}
+function splitClassTokens(classString) {
+  const tokens = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < classString.length; i++) {
+    const ch = classString[i];
+    if (ch === "[") {
+      depth++;
+      current += ch;
+      continue;
+    }
+    if (ch === "]") {
+      depth--;
+      current += ch;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (depth === 0) {
+        if (current) {
+          tokens.push(current);
+          current = "";
+        }
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+function normalizeClassString(classString) {
+  return splitClassTokens(classString).join(" ");
+}
+function parseClasses(classString) {
+  const results = [];
+  for (const token of splitClassTokens(classString)) {
+    const parsed = parseClass(token);
+    if (parsed) results.push(parsed);
+  }
+  return results;
+}
+function findOuterColon(s) {
+  let depth = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    else if (ch === ":" && depth === 0) return i;
+  }
+  return -1;
+}
 
 // src/core/responsiveStore.ts
 var RESPONSIVE_KEY = "__kbach_responsive__";
@@ -3056,7 +2531,30 @@ function getActiveBreakpoints(width) {
 }
 
 // src/core/resolver.ts
-var styleCache = new LRUCache(1e4);
+var _themeCache = /* @__PURE__ */ new WeakMap();
+function getThemeCache(theme) {
+  let cache = _themeCache.get(theme);
+  if (!cache) {
+    cache = new LRUCache(1e4);
+    _themeCache.set(theme, cache);
+  }
+  return cache;
+}
+var _sortCache = /* @__PURE__ */ new WeakMap();
+function getSortedEntries(resolved) {
+  let sorted = _sortCache.get(resolved);
+  if (!sorted) {
+    const entries = Object.entries(resolved);
+    entries.sort((a, b) => {
+      const pa = a[0] === "base" ? -1 : a[0].split(":").length;
+      const pb = b[0] === "base" ? -1 : b[0].split(":").length;
+      return pa - pb;
+    });
+    sorted = entries;
+    _sortCache.set(resolved, sorted);
+  }
+  return sorted;
+}
 var FONT_KEY = "__kbach_default_font__";
 function setDefaultFontFamily(font) {
   globalThis[FONT_KEY] = font;
@@ -3065,7 +2563,7 @@ function getDefaultFontFamily() {
   return globalThis[FONT_KEY];
 }
 var _styleEl = null;
-var _injectedRules = /* @__PURE__ */ new Set();
+var _injectedRules = new LRUCache(5e4);
 function getStyleEl() {
   if (_styleEl) return _styleEl;
   _styleEl = document.createElement("style");
@@ -3075,7 +2573,7 @@ function getStyleEl() {
 }
 function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
-  _injectedRules.add(rule);
+  _injectedRules.set(rule, true);
   try {
     getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
   } catch {
@@ -3099,150 +2597,20 @@ function injectGlobalStyles(theme) {
   }
   getGlobalStyleEl().textContent = rules.join("\n");
 }
-var MODIFIER_TO_PSEUDO = {
-  hover: ":hover",
-  focus: ":focus",
-  "focus-within": ":focus-within",
-  "focus-visible": ":focus-visible",
-  active: ":active",
-  pressed: ":active",
-  disabled: ":disabled",
-  checked: ":checked",
-  visited: ":visited",
-  placeholder: "::placeholder",
-  first: ":first-child",
-  last: ":last-child",
-  odd: ":nth-child(odd)",
-  even: ":nth-child(even)",
-  only: ":only-child",
-  "not-hover": ":not(:hover)",
-  "not-focus": ":not(:focus)",
-  "not-active": ":not(:active)",
-  "not-pressed": ":not(:active)",
-  "not-disabled": ":not(:disabled)",
-  "not-checked": ":not(:checked)",
-  "not-visited": ":not(:visited)",
-  // Pseudo-elements (CSS-injection only; never applied as inline styles)
-  before: "::before",
-  after: "::after",
-  selection: "::selection",
-  "first-letter": "::first-letter",
-  "first-line": "::first-line",
-  marker: "::marker"
-};
-var GROUP_PEER_PREFIX = {
-  "group-hover": ".group:hover",
-  "group-focus": ".group:focus",
-  "peer-hover": ".peer:hover ~",
-  "peer-focus": ".peer:focus ~"
-};
-var MODE_MODS = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
-var RESPONSIVE_MODS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-var PRINT_MODS = /* @__PURE__ */ new Set(["print"]);
-var MEDIA_MODS = {
-  landscape: "(orientation: landscape)",
-  portrait: "(orientation: portrait)",
-  "motion-reduce": "(prefers-reduced-motion: reduce)",
-  "motion-safe": "(prefers-reduced-motion: no-preference)",
-  "contrast-more": "(prefers-contrast: more)",
-  "contrast-less": "(prefers-contrast: less)"
-};
-var DIR_MODS = {
-  rtl: '[dir="rtl"]',
-  ltr: '[dir="ltr"]'
-};
 function buildDivideDecls(styles) {
   const parts = [];
   if ("__divideX" in styles) {
     const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px`);
-    parts.push("border-right-width: 0px");
+    parts.push(`border-left-width: ${w}px`, "border-right-width: 0px");
   }
   if ("__divideY" in styles) {
     const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px`);
-    parts.push("border-bottom-width: 0px");
+    parts.push(`border-top-width: ${w}px`, "border-bottom-width: 0px");
   }
   if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
   if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
   return parts.join("; ");
 }
-function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
-  const rules = [];
-  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
-    rules.push(styles.__keyframe);
-  }
-  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
-  const escaped = escapeCSSSelector(cls);
-  const childSuffix = isDivide ? " > * + *" : "";
-  if (bucketKey === "base") {
-    const baseCssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
-    if (!baseCssDecls) return rules;
-    rules.push(`.${escaped}${childSuffix} { ${baseCssDecls} }`);
-    return rules;
-  }
-  const mods = bucketKey.split(":");
-  const responsiveMods = mods.filter((m) => RESPONSIVE_MODS.has(m));
-  const nonResponsiveMods = mods.filter((m) => !RESPONSIVE_MODS.has(m));
-  const hasDark = nonResponsiveMods.includes("dark") || nonResponsiveMods.includes("not-light");
-  const hasLight = nonResponsiveMods.includes("light") || nonResponsiveMods.includes("not-dark");
-  const hasPrint = nonResponsiveMods.includes("print");
-  const mediaMods = nonResponsiveMods.filter((m) => m in MEDIA_MODS);
-  const dirMods = nonResponsiveMods.filter((m) => m in DIR_MODS);
-  const ancestorMods = nonResponsiveMods.filter((m) => m in GROUP_PEER_PREFIX);
-  const pseudoMods = nonResponsiveMods.filter(
-    (m) => !MODE_MODS.has(m) && !(m in GROUP_PEER_PREFIX) && !PRINT_MODS.has(m) && !(m in MEDIA_MODS) && !(m in DIR_MODS)
-  );
-  const pseudoSuffix = pseudoMods.map((p) => MODIFIER_TO_PSEUDO[p] ?? `:${p}`).join("");
-  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
-  const ancestorPrefix = ancestorMods.length ? ancestorMods.map((m) => GROUP_PEER_PREFIX[m]).join(" ") + " " : "";
-  const dirPrefix = dirMods.length ? dirMods.map((m) => DIR_MODS[m]).join(" ") + " " : "";
-  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const CSS_ONLY_PSEUDOS = /* @__PURE__ */ new Set([
-    "first",
-    "last",
-    "odd",
-    "even",
-    "only",
-    "focus-within",
-    "focus-visible"
-  ]);
-  const needsImportant = important || hasPrint || mediaMods.length > 0 || dirMods.length > 0 || ancestorMods.length > 0 || pseudoMods.some((m) => CSS_ONLY_PSEUDOS.has(m));
-  const cssDecls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
-  if (!cssDecls) return rules;
-  let rule;
-  if (hasDark) {
-    if (darkMode === "media") {
-      rule = `@media (prefers-color-scheme: dark) { ${selector} { ${cssDecls} } }`;
-    } else if (darkMode === "class") {
-      rule = `.dark ${selector} { ${cssDecls} }`;
-    } else {
-      rule = `[data-theme="dark"] ${selector} { ${cssDecls} }`;
-    }
-  } else if (hasLight) {
-    if (darkMode === "media") {
-      rule = `@media (prefers-color-scheme: light) { ${selector} { ${cssDecls} } }`;
-    } else if (darkMode === "class") {
-      rule = `:not(.dark) ${selector} { ${cssDecls} }`;
-    } else {
-      rule = `[data-theme="light"] ${selector} { ${cssDecls} }`;
-    }
-  } else {
-    rule = `${selector} { ${cssDecls} }`;
-  }
-  if (hasPrint) rule = `@media print { ${rule} }`;
-  for (const m of mediaMods) rule = `@media ${MEDIA_MODS[m]} { ${rule} }`;
-  if (responsiveMods.length > 0) {
-    const minWidth = Math.max(...responsiveMods.map((m) => screens[m] ?? 0));
-    if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
-  }
-  rules.push(rule);
-  return rules;
-}
-function injectClassRule(cls, bucketKey, styles, darkMode, important = false) {
-  const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
-  for (const r of cssRules) injectRule(r);
-}
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "shadowColor",
   "shadowOffset",
@@ -3252,13 +2620,10 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "includeFontPadding",
   "textAlignVertical",
   "writingDirection",
-  // Text shadow native props — web uses the textShadow CSS shorthand instead
   "textShadowColor",
   "textShadowOffset",
   "textShadowRadius",
-  // tintColor is native-only (Image/icon tinting)
   "tintColor",
-  // Internal markers — handled specially, never serialized as CSS props
   "__divideX",
   "__divideY",
   "__divideColor",
@@ -3300,8 +2665,7 @@ function styleValueToCSS(styles, forceImportant = false) {
     const imp = forceImportant || prop === "display" && (cssVal === "grid" || cssVal === "inline-grid") || prop === "position" && (cssVal === "sticky" || cssVal === "fixed" || cssVal === "static") ? " !important" : "";
     if (prop in RN_SHORTHAND_EXPAND) {
       const [p1, p2] = RN_SHORTHAND_EXPAND[prop];
-      parts.push(`${p1}: ${cssVal}${imp}`);
-      parts.push(`${p2}: ${cssVal}${imp}`);
+      parts.push(`${p1}: ${cssVal}${imp}`, `${p2}: ${cssVal}${imp}`);
       continue;
     }
     parts.push(`${camelToKebab(prop)}: ${cssVal}${imp}`);
@@ -3311,14 +2675,87 @@ function styleValueToCSS(styles, forceImportant = false) {
 function camelToKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
+function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens) {
+  const rules = [];
+  if ("__keyframe" in styles && typeof styles.__keyframe === "string") {
+    rules.push(styles.__keyframe);
+  }
+  const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const escaped = escapeCSSSelector(cls);
+  const childSuffix = isDivide ? " > * + *" : "";
+  if (bucketKey === "base") {
+    const decls2 = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    if (!decls2) return rules;
+    rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
+    return rules;
+  }
+  const mods = bucketKey.split(":");
+  let darkScheme;
+  let needsImportant = important;
+  const pseudoParts = [];
+  const ancestorParts = [];
+  const dirParts = [];
+  const mediaWrappers = [];
+  let minWidth = 0;
+  for (const mod of mods) {
+    const def = getModifier(mod);
+    if (!def) continue;
+    if (def.darkScheme) darkScheme = def.darkScheme;
+    if (def.pseudo) pseudoParts.push(def.pseudo);
+    if (def.ancestorSelector) {
+      ancestorParts.push(def.ancestorSelector);
+      needsImportant = true;
+    }
+    if (def.dirSelector) {
+      dirParts.push(def.dirSelector);
+      needsImportant = true;
+    }
+    if (def.mediaQuery) {
+      mediaWrappers.push(`@media ${def.mediaQuery}`);
+      needsImportant = true;
+    }
+    if (def.isResponsive) {
+      const w = screens[mod] ?? 0;
+      if (w > minWidth) minWidth = w;
+    }
+    if (def.forcesImportant) needsImportant = true;
+  }
+  const pseudoSuffix = pseudoParts.join("");
+  const elementSelector = `.${escaped}${pseudoSuffix}${childSuffix}`;
+  const ancestorPrefix = ancestorParts.join("");
+  const dirPrefix = dirParts.join("");
+  const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
+  const decls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  if (!decls) return rules;
+  let rule;
+  if (darkScheme === "dark") {
+    if (darkMode === "media") rule = `@media (prefers-color-scheme: dark) { ${selector} { ${decls} } }`;
+    else if (darkMode === "class") rule = `.dark ${selector} { ${decls} }`;
+    else rule = `[data-theme="dark"] ${selector} { ${decls} }`;
+  } else if (darkScheme === "light") {
+    if (darkMode === "media") rule = `@media (prefers-color-scheme: light) { ${selector} { ${decls} } }`;
+    else if (darkMode === "class") rule = `:not(.dark) ${selector} { ${decls} }`;
+    else rule = `[data-theme="light"] ${selector} { ${decls} }`;
+  } else {
+    rule = `${selector} { ${decls} }`;
+  }
+  for (const mw of mediaWrappers) rule = `${mw} { ${rule} }`;
+  if (minWidth > 0) rule = `@media (min-width: ${minWidth}px) { ${rule} }`;
+  rules.push(rule);
+  return rules;
+}
+function injectClassRule(cls, bucketKey, styles, darkMode, important) {
+  const cssRules = buildClassCSSRules(cls, bucketKey, styles, darkMode, important, getGlobalScreens());
+  for (const r of cssRules) injectRule(r);
+}
 function resolve(classString, theme, darkMode = "attribute") {
+  const cache = getThemeCache(theme);
   const cacheKey = `${classString}::${darkMode}`;
-  const cached = styleCache.get(cacheKey);
+  const cached = cache.get(cacheKey);
   if (cached) return cached;
   const result = {};
-  const parsedClasses = parseClasses(classString);
-  const injectQueue = [];
-  for (const parsed of parsedClasses) {
+  const onWeb = typeof document !== "undefined";
+  for (const parsed of parseClasses(classString)) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
       if (process.env.NODE_ENV !== "production" && !parsed.isArbitrary && !isKnownUtility(parsed.utility)) {
@@ -3329,130 +2766,59 @@ function resolve(classString, theme, darkMode = "attribute") {
     const bucketKey = parsed.modifiers.length === 0 ? "base" : parsed.modifiers.join(":");
     if (!result[bucketKey]) result[bucketKey] = {};
     Object.assign(result[bucketKey], styles);
-    if (typeof document !== "undefined") {
-      injectQueue.push({ cls: parsed.original, bucketKey, styles, important: parsed.important });
-    }
-  }
-  styleCache.set(cacheKey, result);
-  if (typeof document !== "undefined") {
-    for (const { cls, bucketKey, styles, important } of injectQueue) {
-      injectClassRule(cls, bucketKey, styles, darkMode, important);
+    if (onWeb) {
+      injectClassRule(parsed.original, bucketKey, styles, darkMode, parsed.important);
     }
   }
+  cache.set(cacheKey, result);
   return result;
 }
 function flatten(resolved, isDark, state = {}, breakpoints = /* @__PURE__ */ new Set()) {
   const result = {};
-  const entries = Object.entries(resolved);
-  entries.sort((a, b) => {
-    const pa = a[0] === "base" ? -1 : a[0].split(":").length;
-    const pb = b[0] === "base" ? -1 : b[0].split(":").length;
-    return pa - pb;
-  });
-  for (const [key, styles] of entries) {
+  for (const [key, styles] of getSortedEntries(resolved)) {
     if (!styles) continue;
     if (key === "base") {
       Object.assign(result, styles);
       continue;
     }
     const mods = key.split(":");
-    if (matchesMods(mods, isDark, state, breakpoints)) {
+    if (mods.every((mod) => matchModifier(mod, isDark, state, breakpoints))) {
       Object.assign(result, styles);
     }
   }
-  const _df = getDefaultFontFamily();
-  if (_df && !("fontFamily" in result)) {
-    result.fontFamily = _df;
+  const defaultFont = getDefaultFontFamily();
+  if (defaultFont && !("fontFamily" in result)) {
+    result.fontFamily = defaultFont;
   }
-  if (isWeb) {
+  if (!isNative) {
     const r = result;
-    const v0 = r.paddingHorizontal;
-    if (v0 !== void 0) {
-      r.paddingLeft = v0;
-      r.paddingRight = v0;
+    const ph = r.paddingHorizontal;
+    if (ph !== void 0) {
+      r.paddingLeft = ph;
+      r.paddingRight = ph;
       delete r.paddingHorizontal;
     }
-    const v1 = r.paddingVertical;
-    if (v1 !== void 0) {
-      r.paddingTop = v1;
-      r.paddingBottom = v1;
+    const pv = r.paddingVertical;
+    if (pv !== void 0) {
+      r.paddingTop = pv;
+      r.paddingBottom = pv;
       delete r.paddingVertical;
     }
-    const v2 = r.marginHorizontal;
-    if (v2 !== void 0) {
-      r.marginLeft = v2;
-      r.marginRight = v2;
+    const mh = r.marginHorizontal;
+    if (mh !== void 0) {
+      r.marginLeft = mh;
+      r.marginRight = mh;
       delete r.marginHorizontal;
     }
-    const v3 = r.marginVertical;
-    if (v3 !== void 0) {
-      r.marginTop = v3;
-      r.marginBottom = v3;
+    const mv = r.marginVertical;
+    if (mv !== void 0) {
+      r.marginTop = mv;
+      r.marginBottom = mv;
       delete r.marginVertical;
     }
   }
   return result;
 }
-function matchesMods(mods, isDark, state, breakpoints) {
-  return mods.every((mod) => {
-    switch (mod) {
-      case "dark":
-        return isDark;
-      case "light":
-      case "not-dark":
-        return !isDark;
-      case "not-light":
-        return isDark;
-      case "hover":
-        return !!state.hover;
-      case "not-hover":
-        return !state.hover;
-      case "focus":
-        return !!state.focus;
-      case "not-focus":
-        return !state.focus;
-      case "pressed":
-      case "active":
-        return !!state.pressed || !!state.active;
-      case "not-pressed":
-      case "not-active":
-        return !state.pressed && !state.active;
-      case "disabled":
-        return !!state.disabled;
-      case "not-disabled":
-        return !state.disabled;
-      case "checked":
-        return !!state.checked;
-      case "not-checked":
-        return !state.checked;
-      case "visited":
-        return !!state.visited;
-      case "not-visited":
-        return !state.visited;
-      case "placeholder":
-        return !!state.placeholder;
-      case "sm":
-      case "md":
-      case "lg":
-      case "xl":
-      case "2xl":
-        return breakpoints.has(mod);
-      // CSS-only modifiers — never applied as inline styles
-      case "print":
-      case "landscape":
-      case "portrait":
-      case "motion-reduce":
-      case "motion-safe":
-      case "contrast-more":
-      case "contrast-less":
-      case "rtl":
-      case "ltr":
-        return false;
-      default:
-        return false;
-    }
-  });
-}
 
 // src/core/config.ts
 function deepMerge(base, override) {
@@ -3493,14 +2859,24 @@ function resolveOneRef(ref, colors) {
   return entry[m[2]] ?? null;
 }
 function resolveColorRefs(colors) {
+  const MAX_DEPTH = 5;
+  function resolveChain(raw) {
+    let current = raw;
+    for (let i = 0; i < MAX_DEPTH; i++) {
+      const next = resolveOneRef(current, colors);
+      if (!next || next === current) break;
+      current = next;
+    }
+    return current;
+  }
   const out = {};
   for (const [key, val] of Object.entries(colors)) {
     if (typeof val === "string") {
-      out[key] = resolveOneRef(val, colors) ?? val;
+      out[key] = resolveChain(val);
     } else {
       const shades = {};
       for (const [shade, hex] of Object.entries(val)) {
-        shades[shade] = resolveOneRef(hex, colors) ?? hex;
+        shades[shade] = resolveChain(hex);
       }
       out[key] = shades;
     }
@@ -3548,15 +2924,26 @@ function buildConfig(userConfig) {
   injectGlobalStyles(resolved.theme);
   return resolved;
 }
+function _selectorToModifierDef(selector) {
+  const s = selector.trim();
+  if (s.startsWith("@media ")) {
+    return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
+  }
+  if (s.startsWith("::") || s.startsWith(":")) {
+    return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
+  }
+  return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
+}
 function makePluginAPI(theme) {
   const standalone = getPluginStandaloneMap();
   return {
     addUtility(name, styles) {
       standalone[name] = styles;
     },
-    addVariant(name, selector) {
-      customVariants[name] = selector;
-      registerModifier(name);
+    addVariant(name, selectorOrDef) {
+      const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
+      customVariants[name] = typeof selectorOrDef === "string" ? selectorOrDef : name;
+      registerModifier(name, def);
     },
     theme(path, defaultValue) {
       const parts = path.replace(/\[([^\]]+)\]/g, ".$1").split(".");
@@ -3677,23 +3064,26 @@ function useConditionalWidth(active) {
   );
 }
 
-// src/InteractiveWrapper.tsx
-function chain(original, extra) {
-  return (...args) => {
-    original?.(...args);
-    extra();
-  };
-}
-var RESPONSIVE_MODS2 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+// src/shared-utils.ts
 function hasResponsiveBuckets(resolved) {
+  const responsiveMods = getResponsiveModifiers();
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
     for (const mod of key.split(":")) {
-      if (RESPONSIVE_MODS2.has(mod)) return true;
+      if (responsiveMods.has(mod)) return true;
     }
   }
   return false;
 }
+var EMPTY_BREAKPOINTS2 = /* @__PURE__ */ new Set();
+
+// src/InteractiveWrapper.tsx
+function chain(original, extra) {
+  return (...args) => {
+    original?.(...args);
+    extra();
+  };
+}
 var InteractiveWrapper = (0, import_react3.forwardRef)(
   function InteractiveWrapper2({
     Component,
@@ -3769,10 +3159,10 @@ var InteractiveWrapper = (0, import_react3.forwardRef)(
       ref,
       ...restWithoutChildren,
       style: finalStyle,
-      ...isWeb && className ? { className } : {},
+      ...!isNative && className ? { className } : {},
       // onPressIn / onPressOut are React Native-only.
       // On web, onPointerDown/Up drive the pressed state instead (covers mouse + touch).
-      ...isWeb ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
+      ...!isNative ? { onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave } : { onPressIn: handlePressIn, onPressOut: handlePressOut },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: handleFocus,
@@ -3785,22 +3175,12 @@ InteractiveWrapper.displayName = "Kbach.InteractiveWrapper";
 
 // src/DarkWrapper.tsx
 var import_react4 = __toESM(require("react"));
-var RESPONSIVE_MODS3 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-function hasResponsiveBuckets2(resolved) {
-  for (const key of Object.keys(resolved)) {
-    if (key === "base") continue;
-    for (const mod of key.split(":")) {
-      if (RESPONSIVE_MODS3.has(mod)) return true;
-    }
-  }
-  return false;
-}
 var DarkWrapper = import_react4.default.forwardRef(
   function DarkWrapper2({ Component, resolvedStyle, style: styleProp, children, ...rest }, ref) {
     const isDark = useGlobalDarkMode();
-    const needsWidth = hasResponsiveBuckets2(resolvedStyle);
+    const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
-    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS2;
     const computedStyle = flatten(resolvedStyle, isDark, {}, breakpoints);
     stripInternalMarkers(computedStyle);
     if (typeof Component !== "string") stripWebOnlyProps(computedStyle);
@@ -3842,51 +3222,39 @@ function stripWebOnlyProps(s) {
 }
 
 // src/jsx-runtime.tsx
-var INTERACTIVE_MODS = /* @__PURE__ */ new Set([
-  "hover",
-  "not-hover",
-  "focus",
-  "not-focus",
-  "active",
-  "not-active",
-  "pressed",
-  "not-pressed",
-  "disabled",
-  "not-disabled",
-  "checked",
-  "not-checked",
-  "visited",
-  "not-visited",
-  "placeholder",
-  "group-hover",
-  "group-focus",
-  "peer-hover",
-  "peer-focus"
-  // focus-within / focus-visible / first / last / odd / even / only are CSS-only —
-  // they have no JS state to track, so they don't need InteractiveWrapper.
-]);
-var RESPONSIVE_MODS4 = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
-var MODE_MODS_JSX = /* @__PURE__ */ new Set(["dark", "light", "not-dark", "not-light"]);
+var _cachedDefaultFont = void 0;
+var _defaultFontVersion = 0;
+var _lastFontVersion = -1;
+function _invalidateDefaultFontCache() {
+  _defaultFontVersion++;
+}
+function getCachedDefaultFont() {
+  if (_lastFontVersion !== _defaultFontVersion) {
+    _cachedDefaultFont = getDefaultFontFamily();
+    _lastFontVersion = _defaultFontVersion;
+  }
+  return _cachedDefaultFont;
+}
+var _bucketModsCache = /* @__PURE__ */ new WeakMap();
 function bucketMods(resolved) {
+  const cached = _bucketModsCache.get(resolved);
+  if (cached) return cached;
+  const interactiveMods = getInteractiveModifiers();
+  const modeMods = getModeModifiers();
+  const responsiveMods = getResponsiveModifiers();
   let interactive = false;
   let modeOrResponsive = false;
   for (const key of Object.keys(resolved)) {
     if (key === "base") continue;
-    const parts = key.split(":");
-    for (const mod of parts) {
-      if (INTERACTIVE_MODS.has(mod)) {
-        interactive = true;
-        break;
-      }
-    }
-    for (const mod of parts) {
-      if (MODE_MODS_JSX.has(mod) || RESPONSIVE_MODS4.has(mod)) {
-        modeOrResponsive = true;
-        break;
-      }
+    for (const mod of key.split(":")) {
+      if (!interactive && interactiveMods.has(mod)) interactive = true;
+      if (!modeOrResponsive && (modeMods.has(mod) || responsiveMods.has(mod))) modeOrResponsive = true;
     }
+    if (interactive && modeOrResponsive) break;
   }
-  return { interactive, modeOrResponsive };
+  const result = { interactive, modeOrResponsive };
+  _bucketModsCache.set(resolved, result);
+  return result;
 }
 var CONSUMED_PROPS = /* @__PURE__ */ new Set(["className", "kb", "__kbachStyles", "__kbachClasses"]);
 function omitConsumed(props) {
@@ -3961,10 +3329,8 @@ function processElement(type, rawProps, key, isStaticChildren) {
   const { className, kb: kbProp, __kbachStyles, __kbachClasses } = rawProps;
   const classStr = className ?? kbProp ?? __kbachClasses;
   if (!classStr && !__kbachStyles) {
-    const defaultFont = getDefaultFontFamily();
-    if (!defaultFont) {
-      return makeElement(isStaticChildren, type, rawProps, key);
-    }
+    const defaultFont = getCachedDefaultFont();
+    if (!defaultFont) return makeElement(isStaticChildren, type, rawProps, key);
     const { style: userStyle2, ...passProps2 } = omitConsumed(rawProps);
     const finalStyle2 = userStyle2 ? Array.isArray(userStyle2) ? { fontFamily: defaultFont, ...Object.assign({}, ...userStyle2) } : { fontFamily: defaultFont, ...userStyle2 } : { fontFamily: defaultFont };
     return makeElement(isStaticChildren, type, { ...passProps2, style: finalStyle2 }, key);
@@ -3980,7 +3346,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(InteractiveWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
+      ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -3989,7 +3355,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
     return (0, import_jsx_runtime.jsx)(DarkWrapper, {
       Component: actualType,
       resolvedStyle: resolved,
-      ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {},
+      ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {},
       style: userStyle,
       ...passProps
     }, key);
@@ -4001,7 +3367,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   return makeElement(isStaticChildren, actualType, {
     ...passProps,
     style: finalStyle,
-    ...isWeb && classStr ? { className: normalizeClassString(classStr) } : {}
+    ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}
   }, key);
 }
 function jsx(type, props, key) {
@@ -4013,6 +3379,7 @@ function jsxs(type, props, key) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Fragment,
+  _invalidateDefaultFontCache,
   jsx,
   jsxs
 });