windrunner 1.1.0 → 1.1.2

package/dist/index.esm.js

@@ -1,59 +1,3 @@
-// src/variants.js
-var variants = {
-  accentColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  accessibility: ["hover", "focus"],
-  aspect: ["hover", "focus"],
-  backgroundColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  blur: ["hover", "focus"],
-  borderColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  boxShadow: ["hover", "focus"],
-  brightness: ["hover", "focus"],
-  caretColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  contrast: ["hover", "focus"],
-  dropShadow: ["hover", "focus"],
-  fill: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  flexBasis: ["hover", "focus"],
-  gradientColorStops: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  grayscale: ["hover", "focus"],
-  hueRotate: ["hover", "focus"],
-  insetRing: ["hover", "focus"],
-  insetShadow: ["hover", "focus"],
-  invert: ["hover", "focus"],
-  opacity: ["hover", "focus"],
-  outlineColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  outlineOffset: ["hover", "focus"],
-  outlineStyle: ["hover", "focus"],
-  outlineWidth: ["hover", "focus"],
-  placeholderColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  ringColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  ringOffsetColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  ringOffsetWidth: ["hover", "focus"],
-  ringWidth: ["hover", "focus"],
-  rotate: ["hover", "focus"],
-  saturate: ["hover", "focus"],
-  scale: ["hover", "focus"],
-  sepia: ["hover", "focus"],
-  skew: ["hover", "focus"],
-  stroke: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  strokeWidth: ["hover", "focus"],
-  textColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  textDecoration: ["focus", "hover"],
-  textDecorationColor: ["focus", "hover", "not-hover", "not-focus", "not-disabled"],
-  textDecorationStyle: ["focus", "hover"],
-  textDecorationThickness: ["focus", "hover"],
-  textShadowBlur: ["hover", "focus"],
-  textShadowColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  textShadowOpacity: ["hover", "focus"],
-  textShadowX: ["hover", "focus"],
-  textShadowY: ["hover", "focus"],
-  touchAction: ["hover", "focus"],
-  mask: ["hover", "focus"],
-  transform3d: ["hover", "focus"],
-  translate: ["hover", "focus"],
-  zIndex: ["hover", "focus"]
-};
-var variants_default = variants;
-
 // src/theme.js
 var theme = {
   accentColor: ({ theme: theme2 }) => ({
@@ -1401,7 +1345,6 @@ var vars_default = vars;
 
 // src/config.js
 var configOptions = {
-  variants: variants_default,
   theme: theme_default,
   vars: vars_default
 };
@@ -1436,6 +1379,13 @@ function getConfigOptions(options = {}, pluginKeys = []) {
   };
 }
 
+// src/constants.js
+var TIME_VALUE_WITH_UNIT_REGEX = /^\d+(?:\.\d+)?(?:ms|s)$/;
+var TIME_VALUE_NUMERIC_REGEX = /^\d+(?:\.\d+)?$/;
+var CSS_ESCAPE_BACKSLASH_REGEX = /\\/g;
+var CSS_ESCAPE_SPECIAL_CHARS_REGEX = /([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g;
+var CSS_ESCAPE_LEADING_DIGIT_REGEX = /^(\d)/;
+
 // src/resolvers.js
 function resolveArbitraryValue(valueKey) {
   if (valueKey.startsWith("[") && valueKey.endsWith("]")) {
@@ -1455,8 +1405,8 @@ function resolveThemeValue(scale, valueKey) {
 function resolveTimeValue(valueKey) {
   const arbitrary = resolveArbitraryValue(valueKey);
   if (arbitrary !== void 0) return arbitrary;
-  if (/^\d+(?:\.\d+)?(?:ms|s)$/.test(valueKey)) return valueKey;
-  if (/^\d+(?:\.\d+)?$/.test(valueKey)) return `${valueKey}ms`;
+  if (TIME_VALUE_WITH_UNIT_REGEX.test(valueKey)) return valueKey;
+  if (TIME_VALUE_NUMERIC_REGEX.test(valueKey)) return `${valueKey}ms`;
   return void 0;
 }
 function resolveColorValue(colors, colorKey) {
@@ -1492,15 +1442,21 @@ function resolveColorWithOpacity(colors, rawKey) {
   const color = resolveColorValue(colors, colorKey);
   if (color === void 0) return void 0;
   const arbOpacity = resolveArbitraryValue(opacityStr);
-  const opacityVal = arbOpacity !== void 0 ? arbOpacity : String(parseFloat(opacityStr) / 100);
-  if (!opacityVal || opacityVal === "NaN") return void 0;
-  return `color-mix(in oklch, ${color} ${parseFloat(opacityStr)}%, transparent)`;
+  if (arbOpacity !== void 0) {
+    const opacityVal = parseFloat(arbOpacity);
+    if (isNaN(opacityVal)) return void 0;
+    const finalOpacity = opacityVal <= 1 ? opacityVal * 100 : opacityVal;
+    return `color-mix(in oklch, ${color} ${finalOpacity}%, transparent)`;
+  }
+  const opacityNum = parseFloat(opacityStr);
+  if (isNaN(opacityNum)) return void 0;
+  return `color-mix(in oklch, ${color} ${opacityNum}%, transparent)`;
 }
 function escapeCssIdentifier(value) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
     return CSS.escape(value);
   }
-  return String(value).replace(/\\/g, "\\\\").replace(/([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1").replace(/^(\d)/, "\\3$1 ");
+  return String(value).replace(CSS_ESCAPE_BACKSLASH_REGEX, "\\\\").replace(CSS_ESCAPE_SPECIAL_CHARS_REGEX, "\\$1").replace(CSS_ESCAPE_LEADING_DIGIT_REGEX, "\\3$1 ");
 }
 function appendImportant(declaration, isImportant) {
   if (!isImportant) return declaration;
@@ -3295,8 +3251,8 @@ var PluginRegistry = class {
    * Register multiple variants at once
    * @param {Object} variants - Object mapping names to handlers
    */
-  addVariants(variants2) {
-    Object.entries(variants2).forEach(([name, handler]) => {
+  addVariants(variants) {
+    Object.entries(variants).forEach(([name, handler]) => {
       this.addVariant(name, handler);
     });
   }
@@ -3378,6 +3334,178 @@ function objectToCss(obj) {
 }
 
 // src/compiler.js
+var PREFIX_ROUTER = {
+  // Layout & Display
+  "block": [buildLayoutDeclaration],
+  "inline": [buildLayoutDeclaration],
+  "flex": [buildFlexGridDeclaration, buildLayoutDeclaration],
+  "grid": [buildFlexGridDeclaration, buildLayoutDeclaration],
+  "hidden": [buildLayoutDeclaration],
+  "table": [buildLayoutDeclaration],
+  "flow": [buildLayoutDeclaration],
+  // Position
+  "static": [buildLayoutDeclaration],
+  "fixed": [buildLayoutDeclaration],
+  "absolute": [buildLayoutDeclaration],
+  "relative": [buildLayoutDeclaration],
+  "sticky": [buildLayoutDeclaration],
+  "inset": [buildPositionInsetDeclaration, buildInsetShadowDeclaration, buildInsetRingDeclaration],
+  "top": [buildPositionInsetDeclaration],
+  "right": [buildPositionInsetDeclaration],
+  "bottom": [buildPositionInsetDeclaration],
+  "left": [buildPositionInsetDeclaration],
+  "start": [buildPositionInsetDeclaration],
+  "end": [buildPositionInsetDeclaration],
+  "z": [buildLayoutDeclaration],
+  // Spacing
+  "m": [buildSpacingDeclaration],
+  "mx": [buildSpacingDeclaration],
+  "my": [buildSpacingDeclaration],
+  "mt": [buildSpacingDeclaration],
+  "mr": [buildSpacingDeclaration],
+  "mb": [buildSpacingDeclaration],
+  "ml": [buildSpacingDeclaration],
+  "ms": [buildSpacingDeclaration],
+  "me": [buildSpacingDeclaration],
+  "p": [buildSpacingDeclaration],
+  "px": [buildSpacingDeclaration],
+  "py": [buildSpacingDeclaration],
+  "pt": [buildSpacingDeclaration],
+  "pr": [buildSpacingDeclaration],
+  "pb": [buildSpacingDeclaration],
+  "pl": [buildSpacingDeclaration],
+  "ps": [buildSpacingDeclaration],
+  "pe": [buildSpacingDeclaration],
+  "space": [buildSpaceBetweenDeclaration],
+  // Sizing
+  "w": [buildDimensionDeclaration],
+  "h": [buildDimensionDeclaration],
+  "min": [buildDimensionDeclaration],
+  "max": [buildDimensionDeclaration],
+  "size": [buildDimensionDeclaration],
+  // Typography
+  "text": [buildTypographyDeclaration, buildColorDeclaration],
+  "font": [buildTypographyDeclaration],
+  "leading": [buildTypographyDeclaration],
+  "tracking": [buildTypographyDeclaration],
+  "line": [buildTypographyDeclaration],
+  "whitespace": [buildTypographyDeclaration],
+  "break": [buildTypographyDeclaration],
+  "hyphens": [buildTypographyDeclaration],
+  "list": [buildTypographyDeclaration],
+  "italic": [buildTypographyDeclaration],
+  "underline": [buildTypographyDeclaration],
+  "overline": [buildTypographyDeclaration],
+  "uppercase": [buildTypographyDeclaration],
+  "lowercase": [buildTypographyDeclaration],
+  "capitalize": [buildTypographyDeclaration],
+  "normal": [buildTypographyDeclaration, buildLayoutDeclaration],
+  "truncate": [buildTypographyDeclaration],
+  // Colors & Backgrounds
+  "bg": [buildBackgroundDeclaration, buildColorDeclaration, buildGradientDeclaration],
+  "from": [buildGradientDeclaration],
+  "via": [buildGradientDeclaration],
+  "to": [buildGradientDeclaration],
+  "fill": [buildColorDeclaration],
+  "stroke": [buildColorDeclaration],
+  // Borders
+  "border": [buildBorderDeclaration, buildColorDeclaration],
+  "rounded": [buildBorderRadiusDeclaration],
+  "divide": [buildDivideDeclaration],
+  // Effects
+  "shadow": [buildShadowDeclaration, buildTextShadowDeclaration],
+  "opacity": [buildOpacityDeclaration],
+  "ring": [buildRingDeclaration, buildRingOffsetDeclaration],
+  // Transforms
+  "scale": [buildTransformDeclaration],
+  "rotate": [buildTransformDeclaration],
+  "translate": [buildTransformDeclaration],
+  "skew": [buildTransformDeclaration],
+  "origin": [buildTransformDeclaration],
+  "transform": [buildTransformDeclaration],
+  // Filters
+  "blur": [buildFilterDeclaration],
+  "brightness": [buildFilterDeclaration],
+  "contrast": [buildFilterDeclaration],
+  "grayscale": [buildFilterDeclaration],
+  "hue": [buildFilterDeclaration],
+  "invert": [buildFilterDeclaration],
+  "saturate": [buildFilterDeclaration],
+  "sepia": [buildFilterDeclaration],
+  "drop": [buildFilterDeclaration],
+  "backdrop": [buildFilterDeclaration],
+  // Transitions & Animations
+  "transition": [buildTransitionDeclaration],
+  "duration": [buildTransitionDeclaration],
+  "ease": [buildTransitionDeclaration],
+  "delay": [buildTransitionDeclaration],
+  "animate": [buildAnimationDeclaration],
+  // Interactivity
+  "cursor": [buildInteractivityDeclaration],
+  "pointer": [buildInteractivityDeclaration],
+  "resize": [buildInteractivityDeclaration],
+  "select": [buildInteractivityDeclaration],
+  "appearance": [buildInteractivityDeclaration],
+  "outline": [buildColorDeclaration, buildInteractivityDeclaration],
+  "caret": [buildColorDeclaration],
+  "accent": [buildColorDeclaration],
+  // Flexbox & Grid specific
+  "items": [buildFlexGridDeclaration],
+  "justify": [buildFlexGridDeclaration],
+  "place": [buildFlexGridDeclaration],
+  "content": [buildFlexGridDeclaration, buildTypographyDeclaration],
+  "self": [buildFlexGridDeclaration],
+  "order": [buildFlexGridDeclaration],
+  "gap": [buildGapDeclaration],
+  "grow": [buildFlexGridDeclaration],
+  "shrink": [buildFlexGridDeclaration],
+  "basis": [buildFlexGridDeclaration],
+  "cols": [buildFlexGridDeclaration],
+  "rows": [buildFlexGridDeclaration],
+  "col": [buildFlexGridDeclaration],
+  "row": [buildFlexGridDeclaration],
+  "auto": [buildFlexGridDeclaration, buildLayoutDeclaration],
+  // Misc
+  "overflow": [buildLayoutDeclaration],
+  "overscroll": [buildInteractivityDeclaration],
+  "scroll": [buildScrollSnapDeclaration, buildInteractivityDeclaration],
+  "snap": [buildScrollSnapDeclaration],
+  "touch": [buildInteractivityDeclaration],
+  "will": [buildInteractivityDeclaration],
+  "mix": [buildBlendingDeclaration],
+  "blend": [buildBlendingDeclaration],
+  "isolation": [buildLayoutDeclaration],
+  "object": [buildLayoutDeclaration],
+  "container": [buildContainerQueryDeclaration],
+  "columns": [buildLayoutDeclaration],
+  "aspect": [buildLayoutDeclaration],
+  "clear": [buildLayoutDeclaration],
+  "float": [buildLayoutDeclaration],
+  "box": [buildLayoutDeclaration],
+  "visible": [buildLayoutDeclaration],
+  "invisible": [buildLayoutDeclaration],
+  "collapse": [buildLayoutDeclaration],
+  "mask": [buildMaskDeclaration],
+  "forced": [buildForcedColorDeclaration],
+  "field": [buildInteractivityDeclaration],
+  "placeholder": [buildColorDeclaration],
+  "sr": [buildAccessibilityDeclaration],
+  "not": [buildAccessibilityDeclaration]
+};
+function extractPrefix(token) {
+  const dashIndex = token.indexOf("-");
+  if (dashIndex === -1) return token;
+  const prefix = token.slice(0, dashIndex);
+  const secondDashIndex = token.indexOf("-", dashIndex + 1);
+  if (secondDashIndex !== -1) {
+    const twoPartPrefix = token.slice(0, secondDashIndex);
+    if (PREFIX_ROUTER[twoPartPrefix]) return twoPartPrefix;
+  }
+  return prefix;
+}
+function checkAllBuilders(baseToken, theme2) {
+  return buildLayoutDeclaration(baseToken, theme2) || buildPositionInsetDeclaration(baseToken, theme2) || buildSpacingDeclaration(baseToken, theme2) || buildSpaceBetweenDeclaration(baseToken, theme2) || buildGapDeclaration(baseToken, theme2) || buildDimensionDeclaration(baseToken, theme2) || buildFlexGridDeclaration(baseToken, theme2) || buildBorderDeclaration(baseToken, theme2) || buildBorderRadiusDeclaration(baseToken, theme2) || buildBorderSpacingDeclaration(baseToken, theme2) || buildDivideDeclaration(baseToken, theme2) || buildOpacityDeclaration(baseToken, theme2) || buildShadowDeclaration(baseToken, theme2) || buildInsetShadowDeclaration(baseToken, theme2) || buildInsetRingDeclaration(baseToken, theme2) || buildRingDeclaration(baseToken, theme2) || buildRingOffsetDeclaration(baseToken, theme2) || buildTextShadowDeclaration(baseToken, theme2) || buildTransitionDeclaration(baseToken) || buildTransformDeclaration(baseToken, theme2) || buildFilterDeclaration(baseToken, theme2) || buildBackgroundDeclaration(baseToken, theme2) || buildGradientDeclaration(baseToken, theme2) || buildColorDeclaration(baseToken, theme2) || buildTypographyDeclaration(baseToken, theme2) || buildBlendingDeclaration(baseToken) || buildInteractivityDeclaration(baseToken, theme2) || buildAnimationDeclaration(baseToken) || buildMaskDeclaration(baseToken) || buildContainerQueryDeclaration(baseToken) || buildScrollSnapDeclaration(baseToken) || buildAccessibilityDeclaration(baseToken) || buildZoomDeclaration(baseToken, theme2) || buildForcedColorDeclaration(baseToken);
+}
 function compileBaseToken(baseToken, theme2, pluginRegistry) {
   if (pluginRegistry) {
     const pluginMatch = pluginRegistry.matchUtility(baseToken);
@@ -3395,11 +3523,85 @@ function compileBaseToken(baseToken, theme2, pluginRegistry) {
       }
     }
   }
-  return buildLayoutDeclaration(baseToken, theme2) || buildPositionInsetDeclaration(baseToken, theme2) || buildSpacingDeclaration(baseToken, theme2) || buildSpaceBetweenDeclaration(baseToken, theme2) || buildGapDeclaration(baseToken, theme2) || buildDimensionDeclaration(baseToken, theme2) || buildFlexGridDeclaration(baseToken, theme2) || buildBorderDeclaration(baseToken, theme2) || buildBorderRadiusDeclaration(baseToken, theme2) || buildBorderSpacingDeclaration(baseToken, theme2) || buildDivideDeclaration(baseToken, theme2) || buildOpacityDeclaration(baseToken, theme2) || buildShadowDeclaration(baseToken, theme2) || buildInsetShadowDeclaration(baseToken, theme2) || buildInsetRingDeclaration(baseToken, theme2) || buildRingDeclaration(baseToken, theme2) || buildRingOffsetDeclaration(baseToken, theme2) || buildTextShadowDeclaration(baseToken, theme2) || buildTransitionDeclaration(baseToken) || buildTransformDeclaration(baseToken, theme2) || buildFilterDeclaration(baseToken, theme2) || buildBackgroundDeclaration(baseToken, theme2) || buildGradientDeclaration(baseToken, theme2) || buildColorDeclaration(baseToken, theme2) || buildTypographyDeclaration(baseToken, theme2) || buildBlendingDeclaration(baseToken) || buildInteractivityDeclaration(baseToken, theme2) || buildAnimationDeclaration(baseToken) || buildMaskDeclaration(baseToken) || buildContainerQueryDeclaration(baseToken) || buildScrollSnapDeclaration(baseToken) || buildAccessibilityDeclaration(baseToken) || buildZoomDeclaration(baseToken, theme2) || buildForcedColorDeclaration(baseToken);
+  const prefix = extractPrefix(baseToken);
+  const builders = PREFIX_ROUTER[prefix];
+  if (builders) {
+    for (let i = 0; i < builders.length; i += 1) {
+      const result = builders[i](baseToken, theme2);
+      if (result) return result;
+    }
+  }
+  return checkAllBuilders(baseToken, theme2);
 }
-function applyVariants(selector, variants2, pluginRegistry) {
+var VARIANT_MAP = /* @__PURE__ */ new Map([
+  // Dark mode
+  ["dark", (s) => `.dark ${s}`],
+  // Pseudo-classes – interactive
+  ["hover", (s) => `${s}:hover`],
+  ["focus", (s) => `${s}:focus`],
+  ["focus-visible", (s) => `${s}:focus-visible`],
+  ["focus-within", (s) => `${s}:focus-within`],
+  ["active", (s) => `${s}:active`],
+  ["visited", (s) => `${s}:visited`],
+  ["disabled", (s) => `${s}:disabled`],
+  ["checked", (s) => `${s}:checked`],
+  ["indeterminate", (s) => `${s}:indeterminate`],
+  ["required", (s) => `${s}:required`],
+  ["valid", (s) => `${s}:valid`],
+  ["invalid", (s) => `${s}:invalid`],
+  ["target", (s) => `${s}:target`],
+  ["enabled", (s) => `${s}:enabled`],
+  ["default", (s) => `${s}:default`],
+  ["optional", (s) => `${s}:optional`],
+  ["user-valid", (s) => `${s}:user-valid`],
+  ["user-invalid", (s) => `${s}:user-invalid`],
+  ["in-range", (s) => `${s}:in-range`],
+  ["out-of-range", (s) => `${s}:out-of-range`],
+  ["placeholder-shown", (s) => `${s}:placeholder-shown`],
+  ["autofill", (s) => `${s}:autofill`],
+  ["details-content", (s) => `${s}:details-content`],
+  ["read-only", (s) => `${s}:read-only`],
+  ["open", (s) => `${s}[open]`],
+  // Pseudo-elements
+  ["placeholder", (s) => `${s}::placeholder`],
+  ["backdrop", (s) => `${s}::backdrop`],
+  ["before", (s) => `${s}::before`],
+  ["after", (s) => `${s}::after`],
+  ["first-letter", (s) => `${s}::first-letter`],
+  ["first-line", (s) => `${s}::first-line`],
+  ["marker", (s) => `${s}::marker`],
+  ["selection", (s) => `${s}::selection`],
+  ["file", (s) => `${s}::file-selector-button`],
+  // Structural pseudo-classes
+  ["first", (s) => `${s}:first-child`],
+  ["last", (s) => `${s}:last-child`],
+  ["odd", (s) => `${s}:nth-child(odd)`],
+  ["even", (s) => `${s}:nth-child(even)`],
+  ["first-of-type", (s) => `${s}:first-of-type`],
+  ["last-of-type", (s) => `${s}:last-of-type`],
+  ["only", (s) => `${s}:only-child`],
+  ["only-of-type", (s) => `${s}:only-of-type`],
+  ["empty", (s) => `${s}:empty`],
+  // Group & peer variants
+  ["group-hover", (s) => `.group:hover ${s}`],
+  ["group-focus", (s) => `.group:focus ${s}`],
+  ["group-active", (s) => `.group:active ${s}`],
+  ["peer-hover", (s) => `.peer:hover ~ ${s}`],
+  ["peer-focus", (s) => `.peer:focus ~ ${s}`],
+  ["peer-checked", (s) => `.peer:checked ~ ${s}`],
+  ["peer-disabled", (s) => `.peer:disabled ~ ${s}`],
+  // Negation variants
+  ["not-hover", (s) => `${s}:not(:hover)`],
+  ["not-focus", (s) => `${s}:not(:focus)`],
+  ["not-disabled", (s) => `${s}:not(:disabled)`],
+  ["not-checked", (s) => `${s}:not(:checked)`],
+  // In-* variants (group-based)
+  ["in-hover", (s) => `.group:hover ${s}`],
+  ["in-focus", (s) => `.group:focus ${s}`]
+]);
+function applyVariants(selector, variants, pluginRegistry) {
   let currentSelector = selector;
-  for (const variant of variants2) {
+  for (const variant of variants) {
     if (pluginRegistry) {
       const customHandler = pluginRegistry.matchVariant(variant);
       if (customHandler) {
@@ -3414,180 +3616,11 @@ function applyVariants(selector, variants2, pluginRegistry) {
         }
       }
     }
-    switch (variant) {
-      case "dark":
-        currentSelector = `.dark ${currentSelector}`;
-        break;
-      case "hover":
-        currentSelector = `${currentSelector}:hover`;
-        break;
-      case "focus":
-        currentSelector = `${currentSelector}:focus`;
-        break;
-      case "focus-visible":
-        currentSelector = `${currentSelector}:focus-visible`;
-        break;
-      case "focus-within":
-        currentSelector = `${currentSelector}:focus-within`;
-        break;
-      case "active":
-        currentSelector = `${currentSelector}:active`;
-        break;
-      case "visited":
-        currentSelector = `${currentSelector}:visited`;
-        break;
-      case "disabled":
-        currentSelector = `${currentSelector}:disabled`;
-        break;
-      case "checked":
-        currentSelector = `${currentSelector}:checked`;
-        break;
-      case "indeterminate":
-        currentSelector = `${currentSelector}:indeterminate`;
-        break;
-      case "required":
-        currentSelector = `${currentSelector}:required`;
-        break;
-      case "valid":
-        currentSelector = `${currentSelector}:valid`;
-        break;
-      case "invalid":
-        currentSelector = `${currentSelector}:invalid`;
-        break;
-      case "target":
-        currentSelector = `${currentSelector}:target`;
-        break;
-      case "enabled":
-        currentSelector = `${currentSelector}:enabled`;
-        break;
-      case "default":
-        currentSelector = `${currentSelector}:default`;
-        break;
-      case "optional":
-        currentSelector = `${currentSelector}:optional`;
-        break;
-      case "user-valid":
-        currentSelector = `${currentSelector}:user-valid`;
-        break;
-      case "user-invalid":
-        currentSelector = `${currentSelector}:user-invalid`;
-        break;
-      case "in-range":
-        currentSelector = `${currentSelector}:in-range`;
-        break;
-      case "out-of-range":
-        currentSelector = `${currentSelector}:out-of-range`;
-        break;
-      case "placeholder-shown":
-        currentSelector = `${currentSelector}:placeholder-shown`;
-        break;
-      case "autofill":
-        currentSelector = `${currentSelector}:autofill`;
-        break;
-      case "details-content":
-        currentSelector = `${currentSelector}:details-content`;
-        break;
-      case "placeholder":
-        currentSelector = `${currentSelector}::placeholder`;
-        break;
-      case "backdrop":
-        currentSelector = `${currentSelector}::backdrop`;
-        break;
-      case "before":
-        currentSelector = `${currentSelector}::before`;
-        break;
-      case "after":
-        currentSelector = `${currentSelector}::after`;
-        break;
-      case "first-letter":
-        currentSelector = `${currentSelector}::first-letter`;
-        break;
-      case "first-line":
-        currentSelector = `${currentSelector}::first-line`;
-        break;
-      case "marker":
-        currentSelector = `${currentSelector}::marker`;
-        break;
-      case "selection":
-        currentSelector = `${currentSelector}::selection`;
-        break;
-      case "file":
-        currentSelector = `${currentSelector}::file-selector-button`;
-        break;
-      case "first":
-        currentSelector = `${currentSelector}:first-child`;
-        break;
-      case "last":
-        currentSelector = `${currentSelector}:last-child`;
-        break;
-      case "odd":
-        currentSelector = `${currentSelector}:nth-child(odd)`;
-        break;
-      case "even":
-        currentSelector = `${currentSelector}:nth-child(even)`;
-        break;
-      case "first-of-type":
-        currentSelector = `${currentSelector}:first-of-type`;
-        break;
-      case "last-of-type":
-        currentSelector = `${currentSelector}:last-of-type`;
-        break;
-      case "only":
-        currentSelector = `${currentSelector}:only-child`;
-        break;
-      case "only-of-type":
-        currentSelector = `${currentSelector}:only-of-type`;
-        break;
-      case "empty":
-        currentSelector = `${currentSelector}:empty`;
-        break;
-      case "read-only":
-        currentSelector = `${currentSelector}:read-only`;
-        break;
-      case "open":
-        currentSelector = `${currentSelector}[open]`;
-        break;
-      case "group-hover":
-        currentSelector = `.group:hover ${currentSelector}`;
-        break;
-      case "group-focus":
-        currentSelector = `.group:focus ${currentSelector}`;
-        break;
-      case "group-active":
-        currentSelector = `.group:active ${currentSelector}`;
-        break;
-      case "peer-hover":
-        currentSelector = `.peer:hover ~ ${currentSelector}`;
-        break;
-      case "peer-focus":
-        currentSelector = `.peer:focus ~ ${currentSelector}`;
-        break;
-      case "peer-checked":
-        currentSelector = `.peer:checked ~ ${currentSelector}`;
-        break;
-      case "peer-disabled":
-        currentSelector = `.peer:disabled ~ ${currentSelector}`;
-        break;
-      case "not-hover":
-        currentSelector = `${currentSelector}:not(:hover)`;
-        break;
-      case "not-focus":
-        currentSelector = `${currentSelector}:not(:focus)`;
-        break;
-      case "not-disabled":
-        currentSelector = `${currentSelector}:not(:disabled)`;
-        break;
-      case "not-checked":
-        currentSelector = `${currentSelector}:not(:checked)`;
-        break;
-      case "in-hover":
-        currentSelector = `.group:hover ${currentSelector}`;
-        break;
-      case "in-focus":
-        currentSelector = `.group:focus ${currentSelector}`;
-        break;
-      default:
-        return void 0;
+    const builtinHandler = VARIANT_MAP.get(variant);
+    if (builtinHandler) {
+      currentSelector = builtinHandler(currentSelector);
+    } else {
+      return void 0;
     }
   }
   return currentSelector;
@@ -3603,7 +3636,7 @@ function resolveRuntimeContext(options = {}) {
             addUtility: (pattern, handler) => pluginRegistry.addUtility(pattern, handler),
             addUtilities: (utilities) => pluginRegistry.addUtilities(utilities),
             addVariant: (name, handler) => pluginRegistry.addVariant(name, handler),
-            addVariants: (variants2) => pluginRegistry.addVariants(variants2),
+            addVariants: (variants) => pluginRegistry.addVariants(variants),
             theme: (key) => {
               if (!key) return config.theme || {};
               const keys = key.split(".");
@@ -3634,16 +3667,29 @@ function getBaseTailwindOptions(options = {}) {
   const { id, autoStart, compatMode, compatStyleId, compatGenerateCss, ...tailwindOptions } = options;
   return tailwindOptions;
 }
+var parseCache = /* @__PURE__ */ new Map();
+var PARSE_CACHE_MAX_SIZE = 2e3;
+function getConfigHash(screens, containers) {
+  const screensEmpty = !screens || Object.keys(screens).length === 0;
+  const containersEmpty = !containers || Object.keys(containers).length === 0;
+  if (screensEmpty && containersEmpty) return "default";
+  return `${Object.keys(screens || {}).join(",")}|${Object.keys(containers || {}).join(",")}`;
+}
 function parseClass(className, screens = {}, containers = {}) {
   if (typeof className !== "string") return null;
   const token = className.trim();
   if (!token) return null;
+  const configHash = getConfigHash(screens, containers);
+  const cacheKey = `${token}:${configHash}`;
+  if (parseCache.has(cacheKey)) {
+    return parseCache.get(cacheKey);
+  }
   const important = token.startsWith("!");
   const normalized = important ? token.slice(1) : token;
   const parts = splitByVariantDelimiter(normalized);
   if (parts.length === 0) return null;
   const baseToken = parts[parts.length - 1];
-  const variants2 = [];
+  const variants = [];
   let breakpoint = null;
   let containerBreakpoint = null;
   let starting = false;
@@ -3664,9 +3710,15 @@ function parseClass(className, screens = {}, containers = {}) {
       breakpoint = part;
       continue;
     }
-    variants2.push(part);
+    variants.push(part);
+  }
+  const result = { original: token, baseToken, variants, breakpoint, containerBreakpoint, important, starting };
+  if (parseCache.size >= PARSE_CACHE_MAX_SIZE) {
+    const firstKey = parseCache.keys().next().value;
+    parseCache.delete(firstKey);
   }
-  return { original: token, baseToken, variants: variants2, breakpoint, containerBreakpoint, important, starting };
+  parseCache.set(cacheKey, result);
+  return result;
 }
 function compileRuntimeClassNameWithContext(className, context) {
   const parsed = parseClass(className, context.screens, context.containers);
@@ -3769,6 +3821,9 @@ function createWindrunner(options = {}) {
   const preflight2 = options.preflight !== false;
   const compatMode = options.compatMode || "none";
   const compatStyleId = options.compatStyleId || `${styleId}-full`;
+  const maxCacheSize = options.maxCacheSize || 1e4;
+  const onError = typeof options.onError === "function" ? options.onError : null;
+  const onCompile = typeof options.onCompile === "function" ? options.onCompile : null;
   const tailwindOptions = getBaseTailwindOptions(options);
   const context = resolveRuntimeContext(tailwindOptions);
   const cache = /* @__PURE__ */ new Map();
@@ -3814,6 +3869,10 @@ function createWindrunner(options = {}) {
   const compileWithCache = (className) => {
     if (cache.has(className)) return cache.get(className);
     const cssRule = compileRuntimeClassNameWithContext(className, context);
+    if (cache.size >= maxCacheSize) {
+      const firstKey = cache.keys().next().value;
+      cache.delete(firstKey);
+    }
     cache.set(className, cssRule);
     return cssRule;
   };
@@ -3836,8 +3895,10 @@ function createWindrunner(options = {}) {
     const cssRule = compileWithCache(className);
     if (!cssRule) {
       ensureCompatStyle();
+      if (onError) onError(className);
     } else {
       insertRule(cssRule);
+      if (onCompile) onCompile(className, cssRule);
     }
     return cssRule;
   };
@@ -3940,6 +4001,16 @@ function createWindrunner(options = {}) {
     }
     runStart();
   };
+  const clearCache = () => {
+    cache.clear();
+  };
+  const getStats = () => ({
+    cacheSize: cache.size,
+    insertedRuleCount: insertedRules.size,
+    pendingElementCount: pendingElements.size,
+    isObserving: observer !== null,
+    isCompatLoaded: compatLoaded
+  });
   return {
     processClassName,
     processClassList,
@@ -3949,6 +4020,8 @@ function createWindrunner(options = {}) {
     flush,
     start,
     disconnect,
+    clearCache,
+    getStats,
     isCompatLoaded: () => compatLoaded,
     getCacheSize: () => cache.size,
     getInsertedRuleCount: () => insertedRules.size