tailwind-to-style 4.0.2 → 5.1.0

package/dist/className/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v4.0.2
+ * tailwind-to-style v5.1.0
  * Zero-build runtime Tailwind CSS engine
  * 
  * @author Bigetion
@@ -2147,6 +2147,182 @@ function getActiveCollector() {
   return _activeCollector;
 }
 
+/**
+ * Shared Constants
+ * 
+ * All constant values used across the library.
+ * Extracted from monolithic index.js for better maintainability.
+ * 
+ * @module shared/constants
+ */
+
+// ============================================================================
+// Environment Detection
+// ============================================================================
+
+/**
+ * True when running in a browser environment (window & document available)
+ */
+const IS_BROWSER$1 = typeof window !== "undefined" && typeof document !== "undefined";
+
+/**
+ * Maximum number of entries in Set-based caches
+ */
+const MAX_SET_SIZE$1 = 10000;
+
+// ============================================================================
+// Built-in Animation Keyframes
+// ============================================================================
+
+/**
+ * Mapping of animation names to their keyframe definitions
+ */
+const BUILTIN_KEYFRAMES = {
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  },
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: "0"
+    }
+  },
+  pulse: {
+    "50%": {
+      opacity: ".5"
+    }
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
+    },
+    "50%": {
+      transform: "none",
+      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
+    }
+  },
+  fadeIn: {
+    "0%": {
+      opacity: "0"
+    },
+    "50%": {
+      opacity: "1"
+    },
+    "100%": {
+      opacity: "0"
+    }
+  },
+  slideUp: {
+    "0%": {
+      transform: "translateY(20px)",
+      opacity: "0"
+    },
+    "50%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-20px)",
+      opacity: "0"
+    }
+  }
+};
+
+/**
+ * Opacity modifiers
+ */
+const OPACITY_MODIFIER_REGEX = /\/(\d+)$/;
+
+/**
+ * Opacity property patterns for substitution
+ */
+const OPACITY_PROP_REGEXES = {
+  "--text-opacity": /--text-opacity\s*:\s*[\d.]+/gi,
+  "--bg-opacity": /--bg-opacity\s*:\s*[\d.]+/gi,
+  "--border-opacity": /--border-opacity\s*:\s*[\d.]+/gi,
+  "--ring-opacity": /--ring-opacity\s*:\s*[\d.]+/gi,
+  "--placeholder-opacity": /--placeholder-opacity\s*:\s*[\d.]+/gi,
+  "--divide-opacity": /--divide-opacity\s*:\s*[\d.]+/gi
+};
+
+/**
+ * Bracket encoding/decoding
+ */
+const BRACKET_CONTENT_REGEX = /\[([^\]]+)\]/g;
+const OPENING_PAREN_REGEX = /\(/g;
+const CLOSING_PAREN_REGEX = /\)/g;
+const ENCODED_PAREN_OPEN_REGEX = /__P__/g;
+const ENCODED_PAREN_CLOSE_REGEX = /__C__/g;
+
+/**
+ * Animation detection
+ */
+const ANIMATION_NAME_REGEX = /animation(?:-name)?:\s*([a-zA-Z0-9-]+)/gi;
+
+/**
+ * Color property regex patterns (pre-compiled for each color property)
+ * Used in processOpacityModifier for 50-100x performance improvement
+ */
+const COLOR_PROPERTIES$1 = ["color", "background-color", "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];
+
+/**
+ * CSS property name conversion
+ */
+const UPPERCASE_LETTER_REGEX = /([A-Z])/g;
+
+/**
+ * Hash Utilities
+ * 
+ * Fast hashing functions for string and object caching.
+ * Extracted from monolithic index.js for reusability.
+ * 
+ * @module shared/hash
+ */
+
+/**
+ * Fast string hash using FNV-1a algorithm.
+ * Produces 32-bit hash values for cache keys.
+ * 
+ * @param {string} str - String to hash
+ * @returns {number} 32-bit hash
+ * 
+ * @example
+ * hashString('bg-blue-500') // → 2845719273
+ * hashString('hover:bg-red-600') // → 3927461034
+ */
+function hashString$2(str) {
+  let hash = 2166136261; // FNV offset basis
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    // FNV prime: 16777619
+    hash = hash * 16777619 >>> 0; // >>> 0 keeps it a 32-bit unsigned integer
+  }
+  return hash;
+}
+
+/**
+ * Generate a short hash for CSS class names.
+ * Uses base36 encoding for compact, URL-safe identifiers.
+ * 
+ * @param {string} str - Input string
+ * @param {number} length - Desired hash length (default: 8)
+ * @returns {string} Short hash string
+ * 
+ * @example
+ * getCssHash('bg-blue-500 p-4 rounded') // → 'x7k2m9n1'
+ */
+function getCssHash(str) {
+  let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 8;
+  const hash = hashString$2(str);
+  return hash.toString(36).substring(0, length);
+}
+
 /**
  * Proper LRU (Least Recently Used) Cache implementation
  * Efficiently manages memory by removing least recently used items
@@ -2173,49 +2349,496 @@ class LRUCache {
     return value;
   }
 
-  /**
-   * Set value in cache
-   * Removes least recently used item if cache is full
-   */
-  set(key, value) {
-    // If key exists, delete it first to update position
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.maxSize) {
-      // Remove least recently used (first item)
-      const firstKey = this.cache.keys().next().value;
-      this.cache.delete(firstKey);
+  /**
+   * Set value in cache
+   * Removes least recently used item if cache is full
+   */
+  set(key, value) {
+    // If key exists, delete it first to update position
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      // Remove least recently used (first item)
+      const firstKey = this.cache.keys().next().value;
+      this.cache.delete(firstKey);
+    }
+    this.cache.set(key, value);
+  }
+
+  /**
+   * Check if key exists in cache
+   */
+  has(key) {
+    return this.cache.has(key);
+  }
+
+  /**
+   * Clear all cache entries
+   */
+  clear() {
+    this.cache.clear();
+  }
+
+  /**
+   * Get current cache size
+   */
+  get size() {
+    return this.cache.size;
+  }
+
+  /**
+   * Delete specific key
+   */
+  delete(key) {
+    return this.cache.delete(key);
+  }
+}
+
+/**
+ * Cache Management
+ * 
+ * Global caches and cache utilities for performance optimization.
+ * Uses LRU (Least Recently Used) strategy to prevent memory leaks.
+ * 
+ * @module shared/cache
+ */
+
+
+/**
+ * Cache for bracket value encoding
+ * @type {LRUCache}
+ */
+const encodeBracketCache = new LRUCache(1000);
+
+/**
+ * Cache for bracket value decoding
+ * @type {LRUCache}
+ */
+const decodeBracketCache = new LRUCache(1000);
+
+/**
+ * Set of injected CSS hashes (prevents duplicate injection)
+ * @type {Set<string>}
+ */
+const injectedCssHashSet = new Set();
+
+/**
+ * Registry of sourceKey → cssBlock for smart slot-based replacement
+ * Prevents stale CSS chunks from accumulating across HMR cycles
+ * @type {Map<string, string>}
+ */
+const cssBlockRegistry = new Map();
+
+/**
+ * Evict old entries from a Set when size exceeds maxSize.
+ * 
+ * @deprecated Use LRUCache instead - kept for backward compatibility
+ * @param {Set|LRUCache} set - Set to evict from
+ * @param {number} maxSize - Maximum size
+ */
+function evictSet(set) {
+  let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SET_SIZE$1;
+  if (set instanceof LRUCache) return; // LRUCache handles its own eviction
+  if (set.size <= maxSize) return;
+  const excess = set.size - maxSize;
+  const iter = set.values();
+  for (let i = 0; i < excess; i++) {
+    set.delete(iter.next().value);
+  }
+}
+
+/**
+ * Generate minified CSS keyframes for animations.
+ * Converts camelCase property names to kebab-case.
+ * 
+ * @param {string[]} animationNames - Array of animation names to generate
+ * @returns {string} Minified CSS @keyframes rules
+ * 
+ * @example
+ * generateMinifiedKeyframes(['spin', 'pulse'])
+ * // → '@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
+ * //    @keyframes pulse{50%{opacity:.5;}}'
+ * 
+ * @example
+ * generateMinifiedKeyframes(['fadeIn'])
+ * // → '@keyframes fadeIn{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}'
+ */
+function generateMinifiedKeyframes(animationNames) {
+  let css = "";
+  for (const name of animationNames) {
+    const keyframe = BUILTIN_KEYFRAMES[name];
+    if (!keyframe) continue;
+    css += "@keyframes ".concat(name, "{");
+    for (const _ref of Object.entries(keyframe)) {
+      var _ref2 = _slicedToArray(_ref, 2);
+      const percentage = _ref2[0];
+      const styles = _ref2[1];
+      css += "".concat(percentage, "{");
+      for (const _ref3 of Object.entries(styles)) {
+        var _ref4 = _slicedToArray(_ref3, 2);
+        const prop = _ref4[0];
+        const value = _ref4[1];
+        const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
+        css += "".concat(cssProp, ":").concat(value, ";");
+      }
+      css += "}";
+    }
+    css += "}";
+  }
+  return css;
+}
+
+/**
+ * Opacity Modifier Processing
+ * 
+ * Handles Tailwind opacity modifiers (e.g., bg-blue-500/50).
+ * Converts color values to rgba/hsla with specified opacity.
+ * 
+ * @module generator/opacity
+ */
+
+
+// Pre-compile regex patterns for each color property
+const COLOR_REGEX_PATTERNS$1 = new Map();
+for (const prop of COLOR_PROPERTIES$1) {
+  const escapedProp = prop.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  COLOR_REGEX_PATTERNS$1.set(prop, {
+    rgb: new RegExp("(".concat(escapedProp, "\\s*:\\s*)rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)"), "gi"),
+    rgba: new RegExp("(".concat(escapedProp, "\\s*:\\s*)rgba\\((\\d+),\\s*(\\d+),\\s*(\\d+),\\s*[\\d.]+\\)"), "gi"),
+    hsl: new RegExp("(".concat(escapedProp, "\\s*:\\s*)hsl\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%)\\)"), "gi"),
+    hsla: new RegExp("(".concat(escapedProp, "\\s*:\\s*)hsla\\((\\d+),\\s*([\\d.]+%),\\s*([\\d.]+%),\\s*[\\d.]+\\)"), "gi"),
+    hex: new RegExp("(".concat(escapedProp, "\\s*:\\s*)(#[0-9a-fA-F]{3,6})"), "gi")
+  });
+}
+
+/**
+ * Process opacity modifiers in Tailwind classes.
+ * 
+ * Handles:
+ * - Tailwind CSS custom properties (--text-opacity, --bg-opacity, etc.)
+ * - Direct color values (rgb, rgba, hsl, hsla, hex)
+ * - Converts colors to rgba/hsla with specified opacity
+ * 
+ * @param {string} className - Tailwind class name (e.g., 'bg-blue-500/50')
+ * @param {string} cssDeclaration - CSS declaration to modify
+ * @returns {string} Modified CSS declaration with opacity applied
+ * 
+ * @example
+ * processOpacityModifier('bg-blue-500/50', 'background-color: rgb(59, 130, 246);')
+ * // → 'background-color: rgba(59, 130, 246, 0.5);'
+ * 
+ * @example
+ * processOpacityModifier('text-red-600/75', 'color: #dc2626;')
+ * // → 'color: rgba(220, 38, 38, 0.75);'
+ * 
+ * @example
+ * processOpacityModifier('bg-blue-500', 'background-color: rgb(59, 130, 246);')
+ * // → 'background-color: rgb(59, 130, 246);' (no change - no opacity modifier)
+ */
+function processOpacityModifier(className, cssDeclaration) {
+  const opacityMatch = OPACITY_MODIFIER_REGEX.exec(className);
+  if (!opacityMatch) return cssDeclaration;
+  const opacityValue = parseInt(opacityMatch[1], 10);
+  if (opacityValue < 0 || opacityValue > 100) return cssDeclaration;
+  const alphaValue = (opacityValue / 100).toString();
+
+  // Handle Tailwind's CSS custom property pattern
+  let modifiedDeclaration = cssDeclaration;
+
+  // Replace opacity custom properties using pre-compiled regexes
+  for (const prop in OPACITY_PROP_REGEXES) {
+    const regex = OPACITY_PROP_REGEXES[prop];
+    regex.lastIndex = 0; // Reset global regex
+    modifiedDeclaration = modifiedDeclaration.replace(regex, "".concat(prop, ": ").concat(alphaValue));
+  }
+
+  // Also handle direct color values using pre-compiled regex patterns
+  for (const prop of COLOR_PROPERTIES$1) {
+    const patterns = COLOR_REGEX_PATTERNS$1.get(prop);
+    if (!patterns) continue;
+
+    // Reset all regex lastIndex for reuse
+    patterns.rgb.lastIndex = 0;
+    patterns.rgba.lastIndex = 0;
+    patterns.hsl.lastIndex = 0;
+    patterns.hsla.lastIndex = 0;
+    patterns.hex.lastIndex = 0;
+
+    // Convert rgb to rgba with opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgb, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Update existing rgba opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgba, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Convert hsl to hsla with opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsl, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Update existing hsla opacity
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsla, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
+
+    // Handle hex colors - convert to rgba
+    modifiedDeclaration = modifiedDeclaration.replace(patterns.hex, (match, propPart, hexColor) => {
+      // Convert hex to rgba
+      const hex = hexColor.replace("#", "");
+      let r, g, b;
+      if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+      } else {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+      }
+      return "".concat(propPart, "rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alphaValue, ")");
+    });
+  }
+  return modifiedDeclaration;
+}
+
+/**
+ * Performance Monitoring Utilities
+ * 
+ * Tracks and logs performance metrics for optimization analysis.
+ * 
+ * @module utils/performanceMonitor
+ */
+
+
+/**
+ * Performance monitoring system
+ * 
+ * Provides start/end timing and automatic slow operation logging.
+ */
+const performanceMonitor$1 = {
+  enabled: typeof performance !== "undefined",
+  /**
+   * Start performance measurement
+   * 
+   * @param {string} label - Label for the measurement
+   * @returns {Object|null} Marker object with label and start time
+   */
+  start(label) {
+    if (!this.enabled) return null;
+    return {
+      label,
+      startTime: performance.now()
+    };
+  },
+  /**
+   * End performance measurement and log if slow
+   * 
+   * @param {Object} marker - Marker from start()
+   */
+  end(marker) {
+    if (!this.enabled || !marker) return;
+    const duration = performance.now() - marker.startTime;
+    if (duration > 5) {
+      // Only log if > 5ms
+      logger.warn("Slow ".concat(marker.label, ": ").concat(duration.toFixed(2), "ms"));
+    }
+  },
+  /**
+   * Measure function execution time
+   * 
+   * @param {Function} fn - Function to measure
+   * @param {string} label - Label for measurement
+   * @returns {*} Function result
+   */
+  measure(fn, label) {
+    const marker = this.start(label);
+    try {
+      const result = fn();
+      this.end(marker);
+      return result;
+    } catch (error) {
+      this.end(marker);
+      throw error;
+    }
+  }
+};
+
+/**
+ * DOM CSS Injector
+ * 
+ * Handles automatic CSS injection into the DOM.
+ * Supports SSR mode, HMR-friendly block registry, and hash-based deduplication.
+ * 
+ * @module injector/dom
+ */
+
+
+/**
+ * Rebuild the style tag from the CSS block registry.
+ * 
+ * Used for slot-based updates where each twsx() call owns its own CSS block.
+ * Rebuilds the entire style tag to avoid stale CSS from previous HMR cycles.
+ * 
+ * @private
+ */
+function rebuildStyleTag$1() {
+  let styleTag = document.getElementById("twsx-auto-style");
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = "twsx-auto-style";
+    styleTag.setAttribute("data-twsx", "");
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = [...cssBlockRegistry.values()].join("\n");
+}
+
+/**
+ * Automatically inject CSS into the DOM or collect for SSR.
+ * 
+ * Supports three modes:
+ * 1. SSR mode: Delegates to utils/ssr.js collector
+ * 2. Slot-based mode (with sourceKey): HMR-friendly block registry
+ * 3. Hash-based mode (no sourceKey): Legacy deduplication
+ * 
+ * @param {string} cssString - CSS to inject
+ * @param {string|null} sourceKey - Optional unique key for slot-based updates
+ * 
+ * @example
+ * // Slot-based (HMR-friendly)
+ * autoInjectCss('.btn { color: blue; }', 'twsx-call-123');
+ * 
+ * @example
+ * // Hash-based (legacy)
+ * autoInjectCss('.btn { color: blue; }');
+ * 
+ * @example
+ * // SSR mode (delegates to ssr.js)
+ * startSSR();
+ * autoInjectCss('.btn { color: blue; }');
+ * const css = stopSSR();
+ */
+function autoInjectCss(cssString) {
+  let sourceKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const marker = performanceMonitor$1.start("css:inject");
+  try {
+    // SSR mode: collect CSS strings instead of DOM injection. Delegates to
+    // the shared collector in ./utils/ssr.js so both the legacy
+    // startSSR()/stopSSR() pair and the modern createSSRCollector() actually
+    // receive the CSS generated by tw()/twsx().
+    if (isSSRCollecting()) {
+      collectSSRCSS(cssString);
+      performanceMonitor$1.end(marker);
+      return;
     }
-    this.cache.set(key, value);
-  }
+    if (IS_BROWSER$1) {
+      if (sourceKey) {
+        // Slot-based update: each unique twsx(obj) call owns its own CSS block.
+        // When styles change (new content, same logical call site via cacheKey)
+        // the old slot is replaced and the style tag is fully rebuilt, so no
+        // stale rules from previous HMR cycles can pile up.
+        const existing = cssBlockRegistry.get(sourceKey);
+        if (existing === cssString) {
+          // Identical content – nothing to do.
+          performanceMonitor$1.end(marker);
+          return;
+        }
+        cssBlockRegistry.set(sourceKey, cssString);
+        rebuildStyleTag$1();
+        if (cssBlockRegistry.size % 10 === 0) {
+          logger.debug("CSS registry stats: ".concat(cssBlockRegistry.size, " blocks registered"));
+        }
+        performanceMonitor$1.end(marker);
+        return;
+      }
 
-  /**
-   * Check if key exists in cache
-   */
-  has(key) {
-    return this.cache.has(key);
-  }
+      // Fallback path (e.g. direct autoInjectCss calls without a sourceKey):
+      // keep the original hash-based dedup + append behaviour.
+      const cssHash = getCssHash(cssString);
+      if (injectedCssHashSet.has(cssHash)) {
+        performanceMonitor$1.end(marker);
+        return;
+      }
+      injectedCssHashSet.add(cssHash);
+      evictSet(injectedCssHashSet);
+      let styleTag = document.getElementById("twsx-auto-style");
+      if (!styleTag) {
+        styleTag = document.createElement("style");
+        styleTag.id = "twsx-auto-style";
+        styleTag.setAttribute("data-twsx", "");
+        document.head.appendChild(styleTag);
+      }
 
-  /**
-   * Clear all cache entries
-   */
-  clear() {
-    this.cache.clear();
-  }
+      // Append CSS to style tag using textContent for reliability
+      // Note: insertRule + textContent mixing destroys CSSOM rules,
+      // so we use textContent exclusively for consistent behavior
+      // with @keyframes, @media, and other nested CSS blocks.
+      styleTag.textContent += "\n".concat(cssString);
 
-  /**
-   * Get current cache size
-   */
-  get size() {
-    return this.cache.size;
+      // Log injection stats periodically
+      if (injectedCssHashSet.size % 10 === 0) {
+        logger.debug("CSS injection stats: ".concat(injectedCssHashSet.size, " unique stylesheets injected"));
+      }
+    }
+    performanceMonitor$1.end(marker);
+  } catch (error) {
+    performanceMonitor$1.end(marker);
+    logger.error("Error injecting CSS:", error);
   }
+}
 
-  /**
-   * Delete specific key
-   */
-  delete(key) {
-    return this.cache.delete(key);
-  }
+/**
+ * Bracket Value Encoding/Decoding
+ * 
+ * Handles encoding and decoding of bracket values in Tailwind classes.
+ * Example: bg-[rgb(255,0,0)] → bg-[rgb__P__255%2C0%2C0__C__]
+ * 
+ * @module parser/bracket
+ */
+
+
+/**
+ * Encode bracket values to prevent parsing issues.
+ * Encodes parentheses within brackets to special markers.
+ * 
+ * @param {string} input - Class string with brackets
+ * @returns {string} Encoded string
+ * 
+ * @example
+ * encodeBracketValues('bg-[rgb(255,0,0)]')
+ * // → 'bg-[rgb__P__255%2C0%2C0__C__]'
+ * 
+ * @example
+ * encodeBracketValues('w-[calc(100%-20px)]')
+ * // → 'w-[calc__P__100%25-20px__C__]'
+ */
+function encodeBracketValues(input) {
+  if (!input) return input;
+  if (encodeBracketCache.has(input)) return encodeBracketCache.get(input);
+  BRACKET_CONTENT_REGEX.lastIndex = 0; // Reset global regex
+  const result = input.replace(BRACKET_CONTENT_REGEX, (_, content) => {
+    const encoded = encodeURIComponent(content).replace(OPENING_PAREN_REGEX, "__P__").replace(CLOSING_PAREN_REGEX, "__C__");
+    return "[".concat(encoded, "]");
+  });
+  encodeBracketCache.set(input, result);
+  return result;
+}
+
+/**
+ * Decode previously encoded bracket values.
+ * Reverses the encoding done by encodeBracketValues().
+ * 
+ * @param {string} input - Encoded class string
+ * @returns {string} Decoded string
+ * 
+ * @example
+ * decodeBracketValues('bg-[rgb__P__255%2C0%2C0__C__]')
+ * // → 'bg-[rgb(255,0,0)]'
+ * 
+ * @example
+ * decodeBracketValues('w-[calc__P__100%25-20px__C__]')
+ * // → 'w-[calc(100%-20px)]'
+ */
+function decodeBracketValues(input) {
+  if (!input) return input;
+  if (decodeBracketCache.has(input)) return decodeBracketCache.get(input);
+  const result = decodeURIComponent(input).replace(ENCODED_PAREN_OPEN_REGEX, "(").replace(ENCODED_PAREN_CLOSE_REGEX, ")");
+  decodeBracketCache.set(input, result);
+  return result;
 }
 
 function generator$2S() {
@@ -6019,11 +6642,6 @@ cx.with = function () {
   };
 };
 
-// ============================================================================
-// SSR (Server-Side Rendering) Support
-// Detect environment once at module load for zero-cost runtime checks
-// ============================================================================
-const IS_BROWSER$1 = typeof window !== "undefined" && typeof document !== "undefined";
 const MAX_CACHE_SIZE$1 = 5000;
 const MAX_SET_SIZE = 10000;
 
@@ -6036,138 +6654,17 @@ const _twsxInputCache = new LRUCache(MAX_CACHE_SIZE$1);
 // WeakMap for object identity-based caching (fast lookup for repeated objects)
 const _objectIdentityCache = new WeakMap();
 
-/** @deprecated Use LRUCache instead - kept for backward compatibility */
-function evictSet(set) {
-  let maxSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SET_SIZE;
-  if (set instanceof LRUCache) return; // LRUCache handles its own eviction
-  if (set.size <= maxSize) return;
-  const excess = set.size - maxSize;
-  const iter = set.values();
-  for (let i = 0; i < excess; i++) {
-    set.delete(iter.next().value);
-  }
-}
-
-// Mapping of animation names to their keyframe definitions
-const BUILTIN_KEYFRAMES = {
-  spin: {
-    "0%": {
-      transform: "rotate(0deg)"
-    },
-    "100%": {
-      transform: "rotate(360deg)"
-    }
-  },
-  ping: {
-    "75%, 100%": {
-      transform: "scale(2)",
-      opacity: "0"
-    }
-  },
-  pulse: {
-    "50%": {
-      opacity: ".5"
-    }
-  },
-  bounce: {
-    "0%, 100%": {
-      transform: "translateY(-25%)",
-      animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
-    },
-    "50%": {
-      transform: "none",
-      animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
-    }
-  },
-  fadeIn: {
-    "0%": {
-      opacity: "0"
-    },
-    "50%": {
-      opacity: "1"
-    },
-    "100%": {
-      opacity: "0"
-    }
-  },
-  slideUp: {
-    "0%": {
-      transform: "translateY(20px)",
-      opacity: "0"
-    },
-    "50%": {
-      transform: "translateY(0)",
-      opacity: "1"
-    },
-    "100%": {
-      transform: "translateY(-20px)",
-      opacity: "0"
-    }
-  }
-};
-
-// Generate minified keyframes CSS
-function generateMinifiedKeyframes(animationNames) {
-  let css = "";
-  for (const name of animationNames) {
-    const keyframe = BUILTIN_KEYFRAMES[name];
-    if (!keyframe) continue;
-    css += "@keyframes ".concat(name, "{");
-    for (const _ref of Object.entries(keyframe)) {
-      var _ref2 = _slicedToArray(_ref, 2);
-      const percentage = _ref2[0];
-      const styles = _ref2[1];
-      css += "".concat(percentage, "{");
-      for (const _ref3 of Object.entries(styles)) {
-        var _ref4 = _slicedToArray(_ref3, 2);
-        const prop = _ref4[0];
-        const value = _ref4[1];
-        const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
-        css += "".concat(cssProp, ":").concat(value, ";");
-      }
-      css += "}";
-    }
-    css += "}";
-  }
-  return css;
-}
-
-// Opacity modifiers
-const OPACITY_MODIFIER_REGEX = /\/(\d+)$/;
-const OPACITY_PROP_REGEXES = {
-  "--text-opacity": /--text-opacity\s*:\s*[\d.]+/gi,
-  "--bg-opacity": /--bg-opacity\s*:\s*[\d.]+/gi,
-  "--border-opacity": /--border-opacity\s*:\s*[\d.]+/gi,
-  "--ring-opacity": /--ring-opacity\s*:\s*[\d.]+/gi,
-  "--divide-opacity": /--divide-opacity\s*:\s*[\d.]+/gi,
-  "--placeholder-opacity": /--placeholder-opacity\s*:\s*[\d.]+/gi,
-  "--text-decoration-opacity": /--text-decoration-opacity\s*:\s*[\d.]+/gi,
-  "--outline-opacity": /--outline-opacity\s*:\s*[\d.]+/gi,
-  "--accent-opacity": /--accent-opacity\s*:\s*[\d.]+/gi,
-  "--caret-opacity": /--caret-opacity\s*:\s*[\d.]+/gi
-};
-
 // CSS parsing
-const CSS_CLASS_REGEX = /([a-zA-Z0-9\-_\\/.]+)\s*{\s*([^}]+)\s*}/g;
-const DOUBLE_BACKSLASH_REGEX = /\\\\/g;
-const LEADING_UNDERSCORE_REGEX = /^_/;
-const MULTIPLE_SPACES_REGEX = /\s+/g;
-
-// Bracket encoding/decoding
-const BRACKET_CONTENT_REGEX = /\[([^\]]+)\]/g;
-const OPENING_PAREN_REGEX = /\(/g;
-const CLOSING_PAREN_REGEX = /\)/g;
-const ENCODED_PAREN_OPEN_REGEX = /__P__/g;
-const ENCODED_PAREN_CLOSE_REGEX = /__C__/g;
+const CSS_CLASS_REGEX = /([a-zA-Z0-9\-_\\/.]+)\s*{\s*([^}]+)\s*}/g;
+const DOUBLE_BACKSLASH_REGEX = /\\\\/g;
+const LEADING_UNDERSCORE_REGEX = /^_/;
+const MULTIPLE_SPACES_REGEX = /\s+/g;
 
 // Variant expansion
 const DIRECTIVE_GROUP_REGEX = /(\w+)\(([^()]+)\)/g;
 const VARIANT_GROUP_REGEX = /(\w+):\(([^()]+(?:\((?:[^()]+)\))?[^()]*)\)/g;
 const WHITESPACE_SPLIT_REGEX = /\s+/;
 const VARIANT_COLON_SPLIT_REGEX = /:/;
-
-// Animation detection
-const ANIMATION_NAME_REGEX = /animation(?:-name)?:\s*([a-zA-Z0-9-]+)/gi;
 const CUSTOM_VALUE_FULL_REGEX = /^(.+?)\[(.+)\]$/;
 
 // Selector variants
@@ -6192,9 +6689,6 @@ for (const prop of COLOR_PROPERTIES) {
   });
 }
 
-// CSS property name conversion
-const UPPERCASE_LETTER_REGEX = /([A-Z])/g;
-
 // Escape characters
 const ESCAPE_SLASH_REGEX = /\//g;
 const ESCAPE_DOT_REGEX = /\./g;
@@ -6398,6 +6892,14 @@ function parseCustomClassWithPatterns(className) {
   return null;
 }
 
+/**
+ * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
+ * Optimized with for loops and indexOf for 2-3x better performance
+ * @param {string} cssString
+ * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
+ */
+// NOTE: resolveCssToClearCss now imported from ./generator/css-string.js
+
 // Cache for getConfigOptions - use LRU cache
 const configOptionsCache = new LRUCache(500);
 function generateTailwindCssString() {
@@ -6487,27 +6989,9 @@ const selectorVariants = {
   number: arg => "> :nth-child(".concat(arg, ")")
 };
 
-// Optimize encoding/decoding bracket values with memoization
-const encodeBracketCache = new LRUCache(1000);
-function encodeBracketValues(input) {
-  if (!input) return input;
-  if (encodeBracketCache.has(input)) return encodeBracketCache.get(input);
-  BRACKET_CONTENT_REGEX.lastIndex = 0; // Reset global regex
-  const result = input.replace(BRACKET_CONTENT_REGEX, (_, content) => {
-    const encoded = encodeURIComponent(content).replace(OPENING_PAREN_REGEX, "__P__").replace(CLOSING_PAREN_REGEX, "__C__");
-    return "[".concat(encoded, "]");
-  });
-  encodeBracketCache.set(input, result);
-  return result;
-}
-const decodeBracketCache = new LRUCache(1000);
-function decodeBracketValues(input) {
-  if (!input) return input;
-  if (decodeBracketCache.has(input)) return decodeBracketCache.get(input);
-  const result = decodeURIComponent(input).replace(ENCODED_PAREN_OPEN_REGEX, "(").replace(ENCODED_PAREN_CLOSE_REGEX, ")");
-  decodeBracketCache.set(input, result);
-  return result;
-}
+// NOTE: encodeBracketValues and decodeBracketValues now imported from ./parser/bracket.js
+// NOTE: encodeBracketCache and decodeBracketCache are in ./parser/bracket.js
+
 function replaceSelector(selector) {
   SELECTOR_VARIANT_REGEX.lastIndex = 0; // Reset global regex
   return selector.replace(SELECTOR_VARIANT_REGEX, (_, raw) => {
@@ -6545,73 +7029,6 @@ function resolveVariants(selector, variants) {
   };
 }
 
-/**
- * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
- * @param {string} className - Class name with potential opacity modifier
- * @param {string} cssDeclaration - CSS declaration to modify
- * @returns {string} Modified CSS declaration with opacity applied
- */
-function processOpacityModifier(className, cssDeclaration) {
-  const opacityMatch = OPACITY_MODIFIER_REGEX.exec(className);
-  if (!opacityMatch) return cssDeclaration;
-  const opacityValue = parseInt(opacityMatch[1], 10);
-  if (opacityValue < 0 || opacityValue > 100) return cssDeclaration;
-  const alphaValue = (opacityValue / 100).toString();
-
-  // Handle Tailwind's CSS custom property pattern
-  let modifiedDeclaration = cssDeclaration;
-
-  // Replace opacity custom properties using pre-compiled regexes
-  for (const prop in OPACITY_PROP_REGEXES) {
-    const regex = OPACITY_PROP_REGEXES[prop];
-    regex.lastIndex = 0; // Reset global regex
-    modifiedDeclaration = modifiedDeclaration.replace(regex, "".concat(prop, ": ").concat(alphaValue));
-  }
-
-  // Also handle direct color values using pre-compiled regex patterns
-  for (const prop of COLOR_PROPERTIES) {
-    const patterns = COLOR_REGEX_PATTERNS.get(prop);
-    if (!patterns) continue;
-
-    // Reset all regex lastIndex for reuse
-    patterns.rgb.lastIndex = 0;
-    patterns.rgba.lastIndex = 0;
-    patterns.hsl.lastIndex = 0;
-    patterns.hsla.lastIndex = 0;
-    patterns.hex.lastIndex = 0;
-
-    // Convert rgb to rgba with opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgb, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Update existing rgba opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.rgba, "$1rgba($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Convert hsl to hsla with opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsl, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Update existing hsla opacity
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.hsla, "$1hsla($2, $3, $4, ".concat(alphaValue, ")"));
-
-    // Handle hex colors - convert to rgba
-    modifiedDeclaration = modifiedDeclaration.replace(patterns.hex, (match, propPart, hexColor) => {
-      // Convert hex to rgba
-      const hex = hexColor.replace("#", "");
-      let r, g, b;
-      if (hex.length === 3) {
-        r = parseInt(hex[0] + hex[0], 16);
-        g = parseInt(hex[1] + hex[1], 16);
-        b = parseInt(hex[2] + hex[2], 16);
-      } else {
-        r = parseInt(hex.substring(0, 2), 16);
-        g = parseInt(hex.substring(2, 4), 16);
-        b = parseInt(hex.substring(4, 6), 16);
-      }
-      return "".concat(propPart, "rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alphaValue, ")");
-    });
-  }
-  return modifiedDeclaration;
-}
-
 // Performance monitoring utilities
 const performanceMonitor = {
   enabled: typeof performance !== "undefined",
@@ -6688,9 +7105,11 @@ function expandGroupedClass(input) {
   } while (result !== prev);
   return result;
 }
-// CSS Processing utilities
+// CSS Processing utilities  
 const parseSelectorCache = new LRUCache(500);
-function parseSelector(selector) {
+
+// Parse selector with @css property support (different from parser/selector.js)
+function parseSelectorWithCssProperty(selector) {
   if (parseSelectorCache.has(selector)) {
     return parseSelectorCache.get(selector);
   }
@@ -6715,10 +7134,10 @@ function parseSelector(selector) {
 }
 function processClass(cls, selector, styles) {
   if (cls.trim() === "") return;
-  const _ref5 = cls.includes(":") ? [cls.split(":").slice(0, -1), cls.split(":").slice(-1)[0]] : [[], cls],
-    _ref6 = _slicedToArray(_ref5, 2),
-    rawVariants = _ref6[0],
-    className = _ref6[1];
+  const _ref = cls.includes(":") ? [cls.split(":").slice(0, -1), cls.split(":").slice(-1)[0]] : [[], cls],
+    _ref2 = _slicedToArray(_ref, 2),
+    rawVariants = _ref2[0],
+    className = _ref2[1];
   let isImportant = false;
   let pureClassName = className;
   if (className.startsWith("!")) {
@@ -6796,10 +7215,10 @@ function processNestedSelectors(nested, selector, styles, walk) {
     const nestedVal = nested[nestedSel];
     if (nestedSel === "@css" && typeof nestedVal === "object") {
       // For @css directive, use raw CSS values without any processing
-      const cssDeclarations = Object.entries(nestedVal).map(_ref7 => {
-        let _ref8 = _slicedToArray(_ref7, 2),
-          key = _ref8[0],
-          value = _ref8[1];
+      const cssDeclarations = Object.entries(nestedVal).map(_ref3 => {
+        let _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
         // Convert camelCase to kebab-case (e.g., borderTopColor -> border-top-color)
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
         // Ensure CSS values are properly formatted and not processed through Tailwind conversion
@@ -6822,9 +7241,9 @@ function walkStyleTree(selector, val, styles, walk) {
     logger.warn("Invalid selector in walk function:", selector);
     return;
   }
-  const _parseSelector = parseSelector(selector),
-    baseSelector = _parseSelector.baseSelector,
-    cssProperty = _parseSelector.cssProperty;
+  const _parseSelectorWithCss = parseSelectorWithCssProperty(selector),
+    baseSelector = _parseSelectorWithCss.baseSelector,
+    cssProperty = _parseSelectorWithCss.cssProperty;
   if (cssProperty && typeof val === "object" && Array.isArray(val) && val.length > 0) {
     const cssValue = val[0];
     if (typeof cssValue === "string") {
@@ -6863,9 +7282,9 @@ function walkStyleTree(selector, val, styles, walk) {
     }
     walk(selector, [expandGroupedClass(val)]);
   } else if (typeof val === "object" && val !== null) {
-    const _parseSelector2 = parseSelector(selector),
-      baseSelector = _parseSelector2.baseSelector,
-      cssProperty = _parseSelector2.cssProperty;
+    const _parseSelectorWithCss2 = parseSelectorWithCssProperty(selector),
+      baseSelector = _parseSelectorWithCss2.baseSelector,
+      cssProperty = _parseSelectorWithCss2.cssProperty;
     if (cssProperty) {
       const cssValue = Object.values(val).join(" ");
       styles[baseSelector] = styles[baseSelector] || "";
@@ -6876,10 +7295,10 @@ function walkStyleTree(selector, val, styles, walk) {
     // Check if this is a @css object within the current object
     if (val["@css"] && typeof val["@css"] === "object") {
       // Handle object with @css directive - process the @css part specially
-      const cssDeclarations = Object.entries(val["@css"]).map(_ref9 => {
-        let _ref0 = _slicedToArray(_ref9, 2),
-          key = _ref0[0],
-          value = _ref0[1];
+      const cssDeclarations = Object.entries(val["@css"]).map(_ref5 => {
+        let _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
         // Convert camelCase to kebab-case (e.g., borderTopColor -> border-top-color)
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
         // Keep CSS values intact without any processing
@@ -7025,9 +7444,9 @@ function generateCssString(styles) {
   let cssString = "";
 
   // Add base styles
-  for (const _ref1 of baseStyles) {
-    const sel = _ref1.sel;
-    const css = _ref1.css;
+  for (const _ref7 of baseStyles) {
+    const sel = _ref7.sel;
+    const css = _ref7.css;
     cssString += "".concat(sel, "{").concat(css.trim().replace(/\n/g, ""), "}");
   }
 
@@ -7037,9 +7456,9 @@ function generateCssString(styles) {
     return match ? parseInt(match[1], 10) : 99999;
   }
   mediaStyles.sort((a, b) => mediaPriority(a.sel) - mediaPriority(b.sel));
-  for (const _ref10 of mediaStyles) {
-    const sel = _ref10.sel;
-    const content = _ref10.content;
+  for (const _ref8 of mediaStyles) {
+    const sel = _ref8.sel;
+    const content = _ref8.content;
     cssString += "".concat(sel, "{");
     for (const subSel in content) {
       cssString += "".concat(subSel, "{").concat(content[subSel].trim().replace(/\n/g, ""), "}");
@@ -7236,14 +7655,14 @@ function twsxNoCache(obj) {
       })
     });
     const configOptions = getConfigOptions(mergedOptions, Object.keys(plugins));
-    const _ref11 = configOptions.theme || {},
-      _ref11$keyframes = _ref11.keyframes,
-      keyframes = _ref11$keyframes === void 0 ? {} : _ref11$keyframes;
+    const _ref9 = configOptions.theme || {},
+      _ref9$keyframes = _ref9.keyframes,
+      keyframes = _ref9$keyframes === void 0 ? {} : _ref9$keyframes;
     let customKeyframesCSS = "";
-    for (const _ref12 of Object.entries(keyframes)) {
-      var _ref13 = _slicedToArray(_ref12, 2);
-      const name = _ref13[0];
-      const keyframe = _ref13[1];
+    for (const _ref0 of Object.entries(keyframes)) {
+      var _ref1 = _slicedToArray(_ref0, 2);
+      const name = _ref1[0];
+      const keyframe = _ref1[1];
       // Skip if already in built-in keyframes or already injected
       if (BUILTIN_KEYFRAMES[name] || _injectedKeyframes.has(name)) continue;
 
@@ -7254,15 +7673,15 @@ function twsxNoCache(obj) {
 
       // Generate minified custom keyframe
       customKeyframesCSS += "@keyframes ".concat(name, "{");
-      for (const _ref14 of Object.entries(keyframe)) {
-        var _ref15 = _slicedToArray(_ref14, 2);
-        const percentage = _ref15[0];
-        const styles = _ref15[1];
+      for (const _ref10 of Object.entries(keyframe)) {
+        var _ref11 = _slicedToArray(_ref10, 2);
+        const percentage = _ref11[0];
+        const styles = _ref11[1];
         customKeyframesCSS += "".concat(percentage, "{");
-        for (const _ref16 of Object.entries(styles)) {
-          var _ref17 = _slicedToArray(_ref16, 2);
-          const prop = _ref17[0];
-          const value = _ref17[1];
+        for (const _ref12 of Object.entries(styles)) {
+          var _ref13 = _slicedToArray(_ref12, 2);
+          const prop = _ref13[0];
+          const value = _ref13[1];
           const cssProp = prop.replace(UPPERCASE_LETTER_REGEX, "-$1").toLowerCase();
           customKeyframesCSS += "".concat(cssProp, ":").concat(value, ";");
         }
@@ -7418,111 +7837,16 @@ function twsx(obj) {
   return result;
 }
 
-// Simple hashCode function for CSS deduplication
-function getCssHash(str) {
-  let hash = 0,
-    i,
-    chr;
-  if (str.length === 0) return hash;
-  for (i = 0; i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0; // Convert to 32bit integer
-  }
-  return hash;
-}
-
-// Enhanced auto-inject CSS with performance monitoring & SSR support
-const injectedCssHashSet = new Set();
-
-// Registry of sourceKey → cssBlock for smart slot-based replacement.
-// Prevents stale CSS chunks from accumulating across HMR cycles.
-const _cssBlockRegistry = new Map();
-
-/**
- * Rebuild the single twsx style tag from the full CSS block registry.
- * Called whenever a block is added or updated.
- */
-function rebuildStyleTag$1() {
-  let styleTag = document.getElementById("twsx-auto-style");
-  if (!styleTag) {
-    styleTag = document.createElement("style");
-    styleTag.id = "twsx-auto-style";
-    styleTag.setAttribute("data-twsx", "");
-    document.head.appendChild(styleTag);
-  }
-  styleTag.textContent = [..._cssBlockRegistry.values()].join("\n");
-}
-function autoInjectCss(cssString) {
-  let sourceKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  const marker = performanceMonitor.start("css:inject");
-  try {
-    // SSR mode: collect CSS strings instead of DOM injection. Delegates to
-    // the shared collector in ./utils/ssr.js so both the legacy
-    // startSSR()/stopSSR() pair and the modern createSSRCollector() actually
-    // receive the CSS generated by tw()/twsx().
-    if (isSSRCollecting()) {
-      collectSSRCSS(cssString);
-      performanceMonitor.end(marker);
-      return;
-    }
-    if (IS_BROWSER$1) {
-      if (sourceKey) {
-        // Slot-based update: each unique twsx(obj) call owns its own CSS block.
-        // When styles change (new content, same logical call site via cacheKey)
-        // the old slot is replaced and the style tag is fully rebuilt, so no
-        // stale rules from previous HMR cycles can pile up.
-        const existing = _cssBlockRegistry.get(sourceKey);
-        if (existing === cssString) {
-          // Identical content – nothing to do.
-          performanceMonitor.end(marker);
-          return;
-        }
-        _cssBlockRegistry.set(sourceKey, cssString);
-        rebuildStyleTag$1();
-        if (_cssBlockRegistry.size % 10 === 0) {
-          logger.debug("CSS registry stats: ".concat(_cssBlockRegistry.size, " blocks registered"));
-        }
-        performanceMonitor.end(marker);
-        return;
-      }
-
-      // Fallback path (e.g. direct autoInjectCss calls without a sourceKey):
-      // keep the original hash-based dedup + append behaviour.
-      const cssHash = getCssHash(cssString);
-      if (injectedCssHashSet.has(cssHash)) {
-        performanceMonitor.end(marker);
-        return;
-      }
-      injectedCssHashSet.add(cssHash);
-      evictSet(injectedCssHashSet);
-      let styleTag = document.getElementById("twsx-auto-style");
-      if (!styleTag) {
-        styleTag = document.createElement("style");
-        styleTag.id = "twsx-auto-style";
-        styleTag.setAttribute("data-twsx", "");
-        document.head.appendChild(styleTag);
-      }
-
-      // Append CSS to style tag using textContent for reliability
-      // Note: insertRule + textContent mixing destroys CSSOM rules,
-      // so we use textContent exclusively for consistent behavior
-      // with @keyframes, @media, and other nested CSS blocks.
-      styleTag.textContent += "\n".concat(cssString);
-
-      // Log injection stats periodically
-      if (injectedCssHashSet.size % 10 === 0) {
-        logger.debug("CSS injection stats: ".concat(injectedCssHashSet.size, " unique stylesheets injected"));
-      }
-    }
-    performanceMonitor.end(marker);
-  } catch (error) {
-    performanceMonitor.end(marker);
-    logger.error("Error injecting CSS:", error);
-  }
-}
+// ============================================================================
+// Main API Exports
+// ============================================================================
+// twsxClassName - Unified CSS-in-JS API with variants and slots
+// tw - Atomic CSS class generator with pseudo-class support
+// REMOVED: Re-export removed to break circular dependency
+// Import directly from './className/index.js' if needed
+// export { twsxClassName, tw } from "./className/index.js";
 
-const _excluded = ["name", "prefix", "hash", "hashLength", "inject", "_"],
+const _excluded = ["name", "prefix", "hash", "hashLength", "inject"],
   _excluded2 = ["class", "className"],
   _excluded3 = ["class", "className"];
 
@@ -8021,14 +8345,115 @@ function processTokens(classString) {
 // Style Processing Utilities
 // ============================================================================
 
-function expandShorthands(config, baseSelector) {
-  const expanded = {};
-  const specialKeys = new Set(["name", "prefix", "hash", "hashLength", "inject", "base", "variants", "compoundVariants", "defaultVariants", "slots", "responsiveVariants", "extend", "animation", "enter", "exit", "enterFrom", "enterTo", "leaveFrom", "leaveTo", "_"]);
+/**
+ * Known CSS property names (camelCase and kebab-case).
+ * Used to differentiate raw CSS properties from Tailwind shorthand keys.
+ * Covers the full set of standard CSS properties.
+ */
+const CSS_PROPERTIES = new Set([
+// Box model
+"width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "min-width", "min-height", "max-width", "max-height", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "padding-top", "padding-right", "padding-bottom", "padding-left", "boxSizing", "box-sizing",
+// Display & layout
+"display", "overflow", "overflowX", "overflowY", "overflow-x", "overflow-y", "visibility", "opacity", "position", "top", "right", "bottom", "left", "zIndex", "z-index", "float", "clear",
+// Flexbox
+"flex", "flexGrow", "flexShrink", "flexBasis", "flexFlow", "flexDirection", "flexWrap", "flex-grow", "flex-shrink", "flex-basis", "flex-flow", "flex-direction", "flex-wrap", "alignItems", "alignContent", "alignSelf", "justifyContent", "justifyItems", "justifySelf", "align-items", "align-content", "align-self", "justify-content", "justify-items", "justify-self", "gap", "rowGap", "columnGap", "row-gap", "column-gap", "order", "placeItems", "placeContent", "placeSelf", "place-items", "place-content", "place-self",
+// Grid
+"grid", "gridTemplate", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas", "gridColumn", "gridRow", "gridArea", "gridAutoFlow", "gridAutoColumns", "gridAutoRows", "grid-template", "grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-column", "grid-row", "grid-area", "grid-auto-flow", "grid-auto-columns", "grid-auto-rows",
+// Typography
+"color", "fontSize", "fontWeight", "fontFamily", "fontStyle", "fontVariant", "fontStretch", "font-size", "font-weight", "font-family", "font-style", "font-variant", "font-stretch", "lineHeight", "letterSpacing", "wordSpacing", "textAlign", "textDecoration", "textTransform", "line-height", "letter-spacing", "word-spacing", "text-align", "text-decoration", "text-transform", "textOverflow", "whiteSpace", "wordBreak", "overflowWrap", "hyphens", "textIndent", "text-overflow", "white-space", "word-break", "overflow-wrap", "text-indent", "verticalAlign", "vertical-align", "fontFeatureSettings", "font-feature-settings",
+// Backgrounds
+"background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "backgroundOrigin", "backgroundClip", "background-color", "background-image", "background-size", "background-position", "background-repeat", "background-attachment", "background-origin", "background-clip",
+// Borders
+"border", "borderTop", "borderRight", "borderBottom", "borderLeft", "border-top", "border-right", "border-bottom", "border-left", "borderWidth", "borderStyle", "borderColor", "borderRadius", "border-width", "border-style", "border-color", "border-radius", "borderTopWidth", "borderTopStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomWidth", "borderBottomStyle", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderLeftWidth", "borderLeftStyle", "borderLeftColor", "borderRightWidth", "borderRightStyle", "borderRightColor", "outline", "outlineWidth", "outlineStyle", "outlineColor", "outlineOffset", "outline-width", "outline-style", "outline-color", "outline-offset",
+// Transforms & transitions
+"transform", "transformOrigin", "transformStyle", "perspective", "perspectiveOrigin", "transform-origin", "transform-style", "perspective-origin", "transition", "transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay", "transition-property", "transition-duration", "transition-timing-function", "transition-delay", "animation", "animationName", "animationDuration", "animationTimingFunction", "animationDelay", "animationIterationCount", "animationDirection", "animationFillMode", "animationPlayState", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-fill-mode", "animation-play-state",
+// Effects
+"boxShadow", "textShadow", "filter", "backdropFilter", "opacity", "box-shadow", "text-shadow", "backdrop-filter", "mix-blend-mode", "mixBlendMode", "isolation", "objectFit", "objectPosition", "object-fit", "object-position",
+// Lists & tables
+"listStyle", "listStyleType", "listStylePosition", "listStyleImage", "list-style", "list-style-type", "list-style-position", "list-style-image", "tableLayout", "borderCollapse", "borderSpacing", "captionSide", "emptyCells", "table-layout", "border-collapse", "border-spacing", "caption-side", "empty-cells",
+// SVG
+"fill", "stroke", "strokeWidth", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
+// Misc
+"content", "cursor", "pointerEvents", "userSelect", "resize", "appearance", "caretColor", "pointer-events", "user-select", "caret-color", "willChange", "will-change", "scrollBehavior", "scroll-behavior", "clipPath", "clip-path", "mask", "maskImage", "mask-image", "columns", "columnCount", "columnGap", "columnRule", "columnWidth", "columnSpan", "column-count", "column-rule", "column-width", "column-span", "pageBreakBefore", "pageBreakAfter", "pageBreakInside", "breakBefore", "breakAfter", "breakInside", "page-break-before", "page-break-after", "page-break-inside", "break-before", "break-after", "break-inside",
+// CSS variables & custom
+"all", "direction", "unicodeBidi", "unicode-bidi", "writingMode", "writing-mode", "overscrollBehavior", "overscroll-behavior", "touchAction", "touch-action", "scrollSnapType", "scrollSnapAlign", "scroll-snap-type", "scroll-snap-align"]);
+
+/**
+ * Detect if a key is a raw CSS property (camelCase or kebab-case).
+ * Also accepts CSS custom properties (--var-name) and any key containing a hyphen
+ * that doesn't match known Tailwind-ish patterns.
+ *
+ * @param {string} key
+ * @returns {boolean}
+ */
+function isCssProperty(key) {
+  // Explicit set match (fast path)
+  if (CSS_PROPERTIES.has(key)) return true;
+  // CSS custom properties
+  if (key.startsWith("--")) return true;
+  // kebab-case that isn't a Tailwind modifier pattern (no colons)
+  if (key.includes("-") && !key.includes(":") && !key.startsWith("@")) {
+    // Exclude known Tailwind-ish hyphenated shorthands already in PSEUDO_SHORTHANDS or BREAKPOINTS
+    if (PSEUDO_SHORTHANDS[key] || GROUP_PEER_STATES[key] || BREAKPOINTS[key]) return false;
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Convert a camelCase or kebab-case key to a kebab-case CSS property.
+ * @param {string} key
+ * @returns {string}
+ */
+function toCssPropertyName(key) {
+  // Already kebab-case
+  if (key.includes("-")) return key;
+  // camelCase → kebab-case
+  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+/**
+ * Extract all raw CSS property key/value pairs from a config object.
+ * Returns an object suitable for the @css directive (kebab-case keys, string values).
+ *
+ * @param {Object} config
+ * @returns {Object|null} - null if nothing found
+ */
+function extractRawCssProps(config) {
+  let result = null;
   for (const _ref3 of Object.entries(config)) {
     var _ref4 = _slicedToArray(_ref3, 2);
     const key = _ref4[0];
     const value = _ref4[1];
+    if (!isCssProperty(key)) continue;
+    if (typeof value !== "string" && typeof value !== "number") continue;
+    if (!result) result = {};
+    result[toCssPropertyName(key)] = String(value);
+  }
+  return result;
+}
+function expandShorthands(config, baseSelector) {
+  const expanded = {};
+  const specialKeys = new Set(["name", "prefix", "hash", "hashLength", "inject", "base", "variants", "compoundVariants", "defaultVariants", "slots", "responsiveVariants", "extend", "animation", "enter", "exit", "enterFrom", "enterTo", "leaveFrom", "leaveTo", "_", "tw"]);
+
+  // Collect raw CSS properties into the @css directive for this selector
+  const rawCss = extractRawCssProps(config);
+  if (rawCss) {
+    // twsx supports { [selector]: { "@css": { prop: value } } }
+    // We expand that here so it lands in the style object correctly
+    if (!expanded[baseSelector]) expanded[baseSelector] = {};
+    // expanded[baseSelector] may already be a string (Tailwind classes) — keep both
+    // by using a special marker object that the caller (generateBasicClassName) will merge
+    expanded["__rawCss__"] = expanded["__rawCss__"] || {};
+    Object.assign(expanded["__rawCss__"], rawCss);
+  }
+  for (const _ref5 of Object.entries(config)) {
+    var _ref6 = _slicedToArray(_ref5, 2);
+    const key = _ref6[0];
+    const value = _ref6[1];
     if (specialKeys.has(key)) continue;
+    // Skip raw CSS properties — already handled above
+    if (isCssProperty(key) && (typeof value === "string" || typeof value === "number")) continue;
 
     // Process tokens in value
     const processedValue = typeof value === "string" ? processTokens(value) : value;
@@ -8080,22 +8505,40 @@ function expandShorthands(config, baseSelector) {
 }
 function processNestedStyles(config, baseSelector) {
   const result = {};
-  for (const _ref5 of Object.entries(config)) {
-    var _ref6 = _slicedToArray(_ref5, 2);
-    const key = _ref6[0];
-    const value = _ref6[1];
+  for (const _ref7 of Object.entries(config)) {
+    var _ref8 = _slicedToArray(_ref7, 2);
+    const key = _ref8[0];
+    const value = _ref8[1];
     if (typeof value === "object" && !Array.isArray(value)) {
       const nestedSelector = key.replace(/^&/, baseSelector);
       const nested = processNestedStyles(value, nestedSelector);
       Object.assign(result, nested);
-      if (value._) {
-        result[nestedSelector] = processTokens(value._);
+
+      // Support both `_` and `tw` as the Tailwind class key inside nested objects
+      const nestedTwClasses = [value._, value.tw].filter(Boolean).join(" ");
+      if (nestedTwClasses) {
+        result[nestedSelector] = processTokens(nestedTwClasses);
         const nestedShorthands = expandShorthands(value, nestedSelector);
+        // Wire raw CSS from nested object
+        if (nestedShorthands.__rawCss__) {
+          const existingNested = result[nestedSelector] || "";
+          if (typeof existingNested === "string") {
+            result[nestedSelector] = [existingNested, {
+              "@css": nestedShorthands.__rawCss__
+            }];
+          }
+          delete nestedShorthands.__rawCss__;
+        }
         Object.assign(result, nestedShorthands);
       }
     } else if (typeof value === "string") {
-      if (key === "_") {
-        result[baseSelector] = processTokens(value);
+      if (key === "_" || key === "tw") {
+        // Both _ and tw are Tailwind class shorthands for the current selector
+        if (result[baseSelector]) {
+          result[baseSelector] = result[baseSelector] + " " + processTokens(value);
+        } else {
+          result[baseSelector] = processTokens(value);
+        }
       } else {
         const selector = PSEUDO_SHORTHANDS[key] ? PSEUDO_SHORTHANDS[key].replace("&", baseSelector) : GROUP_PEER_STATES[key] ? GROUP_PEER_STATES[key].replace("&", baseSelector) : key.replace(/^&/, baseSelector);
         result[selector] = processTokens(value);
@@ -8160,10 +8603,10 @@ function processAnimations(config, baseSelector, className) {
 }
 function generateKeyframes(name, frames) {
   let css = "@keyframes ".concat(name, " {\n");
-  for (const _ref7 of Object.entries(frames)) {
-    var _ref8 = _slicedToArray(_ref7, 2);
-    const key = _ref8[0];
-    const value = _ref8[1];
+  for (const _ref9 of Object.entries(frames)) {
+    var _ref0 = _slicedToArray(_ref9, 2);
+    const key = _ref0[0];
+    const value = _ref0[1];
     // Convert Tailwind classes to approximate CSS (simplified)
     const cssValue = value.replace(/([a-z]+)-([a-z0-9-]+)/g, (match, prop, val) => {
       // This is a simplified conversion - real implementation would use twsx
@@ -8212,8 +8655,6 @@ function generateBasicClassName(config) {
     hashLength = _config$hashLength === void 0 ? globalConfig.hashLength : _config$hashLength,
     _config$inject = config.inject,
     inject = _config$inject === void 0 ? globalConfig.inject : _config$inject,
-    _config$_ = config._,
-    baseStyles = _config$_ === void 0 ? "" : _config$_,
     rest = _objectWithoutProperties(config, _excluded);
   const configHash = getConfigHash(config);
   let className;
@@ -8231,22 +8672,11 @@ function generateBasicClassName(config) {
     return cached;
   }
   const baseSelector = ".".concat(className);
-  const styleObj = {};
-
-  // Add base styles with token processing
-  if (baseStyles) {
-    styleObj[baseSelector] = processTokens(baseStyles);
-  }
-
-  // Process shorthands (hover, focus, dark, group-hover, etc.)
-  const expanded = expandShorthands(rest, baseSelector);
-  Object.assign(styleObj, expanded);
 
-  // Process nested objects
-  const nested = processNestedStyles(rest, baseSelector);
-  Object.assign(styleObj, nested);
+  // buildStyleObj handles `_`, `tw`, raw CSS props, pseudo shorthands, nested — all in one place
+  const styleObj = buildStyleObj(rest, baseSelector);
 
-  // Process animations
+  // Process animations (has its own dedicated fields)
   const _processAnimations = processAnimations(rest, baseSelector, className),
     animStyles = _processAnimations.styles,
     keyframes = _processAnimations.keyframes;
@@ -8271,6 +8701,60 @@ function generateBasicClassName(config) {
   return className;
 }
 
+// ============================================================================
+// Shared: Build a twsx-compatible style object from a style config object
+// Handles `_`, `tw` (Tailwind classes), raw CSS properties, pseudo shorthands,
+// breakpoints, and nested selectors — centralised so variants & slots reuse it.
+// ============================================================================
+
+/**
+ * Build a styleObj ready for twsx() from a style config value.
+ *
+ * @param {string|Object} styleValue - A Tailwind class string OR a mixed config object
+ * @param {string} selector          - The CSS selector to target (e.g. ".btn--color-primary")
+ * @returns {Object}                 - styleObj for twsx()
+ */
+function buildStyleObj(styleValue, selector) {
+  const styleObj = {};
+  if (typeof styleValue === "string") {
+    // Plain Tailwind class string
+    styleObj[selector] = processTokens(styleValue);
+    return styleObj;
+  }
+  if (typeof styleValue !== "object" || styleValue === null) return styleObj;
+
+  // Merge `_` and `tw` as Tailwind classes for this selector
+  const twClasses = [styleValue._, styleValue.tw].filter(Boolean).join(" ");
+
+  // Extract raw CSS properties
+  const rawCss = extractRawCssProps(styleValue);
+  if (twClasses && rawCss) {
+    // Both Tailwind classes AND raw CSS — use array form: [twClasses, { "@css": {...} }]
+    styleObj[selector] = [processTokens(twClasses), {
+      "@css": rawCss
+    }];
+  } else if (twClasses) {
+    styleObj[selector] = processTokens(twClasses);
+  } else if (rawCss) {
+    styleObj[selector] = [{
+      "@css": rawCss
+    }];
+  }
+
+  // Expand pseudo shorthands, breakpoints, nested selectors
+  const expanded = expandShorthands(styleValue, selector);
+  if (expanded.__rawCss__) {
+    // top-level rawCss already handled above; drop the marker
+    delete expanded.__rawCss__;
+  }
+  Object.assign(styleObj, expanded);
+
+  // Process nested style objects
+  const nested = processNestedStyles(styleValue, selector);
+  Object.assign(styleObj, nested);
+  return styleObj;
+}
+
 // ============================================================================
 // Core: Variants Mode
 // ============================================================================
@@ -8310,18 +8794,7 @@ function createVariants(config) {
   // Generate base styles
   if (base) {
     const baseSelector = ".".concat(baseClassName);
-    let styleObj = {};
-    if (typeof base === "string") {
-      styleObj[baseSelector] = processTokens(base);
-    } else if (typeof base === "object") {
-      if (base._) {
-        styleObj[baseSelector] = processTokens(base._);
-      }
-      const expanded = expandShorthands(base, baseSelector);
-      Object.assign(styleObj, expanded);
-      const nested = processNestedStyles(base, baseSelector);
-      Object.assign(styleObj, nested);
-    }
+    const styleObj = buildStyleObj(base, baseSelector);
     const baseCss = twsx(styleObj, {
       inject: false
     });
@@ -8329,28 +8802,17 @@ function createVariants(config) {
   }
 
   // Generate styles for each variant value
-  for (const _ref9 of Object.entries(variants)) {
-    var _ref0 = _slicedToArray(_ref9, 2);
-    const variantKey = _ref0[0];
-    const variantOptions = _ref0[1];
-    for (const _ref1 of Object.entries(variantOptions)) {
-      var _ref10 = _slicedToArray(_ref1, 2);
-      const optionKey = _ref10[0];
-      const optionValue = _ref10[1];
+  for (const _ref1 of Object.entries(variants)) {
+    var _ref10 = _slicedToArray(_ref1, 2);
+    const variantKey = _ref10[0];
+    const variantOptions = _ref10[1];
+    for (const _ref11 of Object.entries(variantOptions)) {
+      var _ref12 = _slicedToArray(_ref11, 2);
+      const optionKey = _ref12[0];
+      const optionValue = _ref12[1];
       const variantClassName = "".concat(baseClassName, "--").concat(variantKey, "-").concat(optionKey);
       const selector = ".".concat(variantClassName);
-      let styleObj = {};
-      if (typeof optionValue === "string") {
-        styleObj[selector] = processTokens(optionValue);
-      } else if (typeof optionValue === "object") {
-        if (optionValue._) {
-          styleObj[selector] = processTokens(optionValue._);
-        }
-        const expanded = expandShorthands(optionValue, selector);
-        Object.assign(styleObj, expanded);
-        const nested = processNestedStyles(optionValue, selector);
-        Object.assign(styleObj, nested);
-      }
+      const styleObj = buildStyleObj(optionValue, selector);
       const css = twsx(styleObj, {
         inject: false
       });
@@ -8361,10 +8823,10 @@ function createVariants(config) {
 
       // Generate responsive variant styles if enabled
       if (responsiveVariants.includes(variantKey)) {
-        for (const _ref11 of Object.entries(BREAKPOINTS)) {
-          var _ref12 = _slicedToArray(_ref11, 2);
-          const bp = _ref12[0];
-          const bpValue = _ref12[1];
+        for (const _ref13 of Object.entries(BREAKPOINTS)) {
+          var _ref14 = _slicedToArray(_ref13, 2);
+          const bp = _ref14[0];
+          const bpValue = _ref14[1];
           const respClassName = "".concat(baseClassName, "--").concat(bp, "-").concat(variantKey, "-").concat(optionKey);
           const respSelector = ".".concat(respClassName);
           const respStyleObj = {
@@ -8410,10 +8872,10 @@ function createVariants(config) {
   // Inject all CSS upfront
   if (inject) {
     let allCss = "";
-    for (const _ref13 of variantStyles.entries()) {
-      var _ref14 = _slicedToArray(_ref13, 2);
-      const key = _ref14[0];
-      const value = _ref14[1];
+    for (const _ref15 of variantStyles.entries()) {
+      var _ref16 = _slicedToArray(_ref15, 2);
+      const key = _ref16[0];
+      const value = _ref16[1];
       if (key === "__base__") {
         allCss += value + "\n";
       } else if (typeof value === "object" && value.css) {
@@ -8434,10 +8896,10 @@ function createVariants(config) {
     const classes = [baseClassName];
 
     // Add variant classes
-    for (const _ref15 of Object.entries(mergedProps)) {
-      var _ref16 = _slicedToArray(_ref15, 2);
-      const variantKey = _ref16[0];
-      const variantValue = _ref16[1];
+    for (const _ref17 of Object.entries(mergedProps)) {
+      var _ref18 = _slicedToArray(_ref17, 2);
+      const variantKey = _ref18[0];
+      const variantValue = _ref18[1];
       if (variantValue === undefined || variantValue === null) continue;
 
       // Handle boolean variants
@@ -8445,10 +8907,10 @@ function createVariants(config) {
 
       // Handle responsive variants: { size: { initial: 'sm', md: 'lg' } }
       if (typeof variantValue === "object" && !Array.isArray(variantValue)) {
-        for (const _ref17 of Object.entries(variantValue)) {
-          var _ref18 = _slicedToArray(_ref17, 2);
-          const bp = _ref18[0];
-          const bpVariantValue = _ref18[1];
+        for (const _ref19 of Object.entries(variantValue)) {
+          var _ref20 = _slicedToArray(_ref19, 2);
+          const bp = _ref20[0];
+          const bpVariantValue = _ref20[1];
           if (bp === "initial") {
             const variantData = variantStyles.get("".concat(variantKey, ":").concat(bpVariantValue));
             if (variantData) classes.push(variantData.className);
@@ -8466,18 +8928,18 @@ function createVariants(config) {
     }
 
     // Check compound variants
-    for (const _ref19 of variantStyles.entries()) {
-      var _ref20 = _slicedToArray(_ref19, 2);
-      const key = _ref20[0];
-      const data = _ref20[1];
+    for (const _ref21 of variantStyles.entries()) {
+      var _ref22 = _slicedToArray(_ref21, 2);
+      const key = _ref22[0];
+      const data = _ref22[1];
       if (!key.startsWith("__compound__:")) continue;
       const conditions = data.conditions,
         className = data.className;
       let matches = true;
-      for (const _ref21 of Object.entries(conditions)) {
-        var _ref22 = _slicedToArray(_ref21, 2);
-        const condKey = _ref22[0];
-        const condValue = _ref22[1];
+      for (const _ref23 of Object.entries(conditions)) {
+        var _ref24 = _slicedToArray(_ref23, 2);
+        const condKey = _ref24[0];
+        const condValue = _ref24[1];
         const propValue = mergedProps[condKey];
         const normalizedPropValue = propValue === true ? "true" : propValue === false ? "false" : propValue;
         if (Array.isArray(condValue)) {
@@ -8552,24 +9014,13 @@ function createSlots(config) {
   let allCss = "";
 
   // Generate base slot styles
-  for (const _ref23 of Object.entries(slots)) {
-    var _ref24 = _slicedToArray(_ref23, 2);
-    const slotName = _ref24[0];
-    const slotStyles = _ref24[1];
+  for (const _ref25 of Object.entries(slots)) {
+    var _ref26 = _slicedToArray(_ref25, 2);
+    const slotName = _ref26[0];
+    const slotStyles = _ref26[1];
     const slotClassName = "".concat(componentName, "__").concat(slotName);
     const selector = ".".concat(slotClassName);
-    let styleObj = {};
-    if (typeof slotStyles === "string") {
-      styleObj[selector] = processTokens(slotStyles);
-    } else if (typeof slotStyles === "object") {
-      if (slotStyles._) {
-        styleObj[selector] = processTokens(slotStyles._);
-      }
-      const expanded = expandShorthands(slotStyles, selector);
-      Object.assign(styleObj, expanded);
-      const nested = processNestedStyles(slotStyles, selector);
-      Object.assign(styleObj, nested);
-    }
+    const styleObj = buildStyleObj(slotStyles, selector);
     const css = twsx(styleObj, {
       inject: false
     });
@@ -8582,32 +9033,26 @@ function createSlots(config) {
 
   // Generate variant styles for each slot
   const variantSlotStyles = new Map();
-  for (const _ref25 of Object.entries(variants)) {
-    var _ref26 = _slicedToArray(_ref25, 2);
-    const variantKey = _ref26[0];
-    const variantOptions = _ref26[1];
-    for (const _ref27 of Object.entries(variantOptions)) {
-      var _ref28 = _slicedToArray(_ref27, 2);
-      const optionKey = _ref28[0];
-      const optionValue = _ref28[1];
-      if (typeof optionValue === "object" && !optionValue._) {
-        for (const _ref29 of Object.entries(optionValue)) {
-          var _ref30 = _slicedToArray(_ref29, 2);
-          const slotName = _ref30[0];
-          const slotStyles = _ref30[1];
+  for (const _ref27 of Object.entries(variants)) {
+    var _ref28 = _slicedToArray(_ref27, 2);
+    const variantKey = _ref28[0];
+    const variantOptions = _ref28[1];
+    for (const _ref29 of Object.entries(variantOptions)) {
+      var _ref30 = _slicedToArray(_ref29, 2);
+      const optionKey = _ref30[0];
+      const optionValue = _ref30[1];
+      // optionValue may be a slot-keyed object: { root: '...', header: '...' }
+      // Detect: it's an object, and its keys match slot names (not `_` / `tw` / raw CSS)
+      const isSlotMap = typeof optionValue === "object" && optionValue !== null && !optionValue._ && !optionValue.tw && !extractRawCssProps(optionValue) && Object.keys(optionValue).some(k => slots[k]);
+      if (isSlotMap) {
+        for (const _ref31 of Object.entries(optionValue)) {
+          var _ref32 = _slicedToArray(_ref31, 2);
+          const slotName = _ref32[0];
+          const slotStyles = _ref32[1];
           if (typeof slotStyles === "string" || typeof slotStyles === "object") {
             const variantClassName = "".concat(componentName, "__").concat(slotName, "--").concat(variantKey, "-").concat(optionKey);
             const selector = ".".concat(variantClassName);
-            let styleObj = {};
-            if (typeof slotStyles === "string") {
-              styleObj[selector] = processTokens(slotStyles);
-            } else {
-              if (slotStyles._) {
-                styleObj[selector] = processTokens(slotStyles._);
-              }
-              const expanded = expandShorthands(slotStyles, selector);
-              Object.assign(styleObj, expanded);
-            }
+            const styleObj = buildStyleObj(slotStyles, selector);
             const css = twsx(styleObj, {
               inject: false
             });
@@ -8631,22 +9076,22 @@ function createSlots(config) {
       const rest = _objectWithoutProperties(compound, _excluded3);
 
     // Check if compound has slot-specific styles
-    for (const _ref31 of slotData.entries()) {
-      var _ref32 = _slicedToArray(_ref31, 1);
-      const slotName = _ref32[0];
-      if (rest[slotName] && typeof rest[slotName] === "string") {
+    for (const _ref33 of slotData.entries()) {
+      var _ref34 = _slicedToArray(_ref33, 1);
+      const slotName = _ref34[0];
+      const slotValue = rest[slotName];
+      if (slotValue && (typeof slotValue === "string" || typeof slotValue === "object")) {
         const compoundClassName = "".concat(componentName, "__").concat(slotName, "--compound-").concat(i);
         const selector = ".".concat(compoundClassName);
-        const css = twsx({
-          [selector]: processTokens(rest[slotName])
-        }, {
+        const styleObj = buildStyleObj(slotValue, selector);
+        const css = twsx(styleObj, {
           inject: false
         });
         const conditions = {};
-        for (const _ref33 of Object.entries(rest)) {
-          var _ref34 = _slicedToArray(_ref33, 2);
-          const k = _ref34[0];
-          const v = _ref34[1];
+        for (const _ref35 of Object.entries(rest)) {
+          var _ref36 = _slicedToArray(_ref35, 2);
+          const k = _ref36[0];
+          const v = _ref36[1];
           if (!slots[k]) conditions[k] = v;
         }
         variantSlotStyles.set("__compound__:".concat(i, ":").concat(slotName), {
@@ -8671,17 +9116,17 @@ function createSlots(config) {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const mergedProps = _objectSpread2(_objectSpread2({}, defaultVariants), props);
     const result = {};
-    for (const _ref35 of slotData.entries()) {
-      var _ref36 = _slicedToArray(_ref35, 2);
-      const slotName = _ref36[0];
-      const data = _ref36[1];
+    for (const _ref37 of slotData.entries()) {
+      var _ref38 = _slicedToArray(_ref37, 2);
+      const slotName = _ref38[0];
+      const data = _ref38[1];
       const classes = [data.className];
 
       // Add variant classes for this slot
-      for (const _ref37 of Object.entries(mergedProps)) {
-        var _ref38 = _slicedToArray(_ref37, 2);
-        const variantKey = _ref38[0];
-        const variantValue = _ref38[1];
+      for (const _ref39 of Object.entries(mergedProps)) {
+        var _ref40 = _slicedToArray(_ref39, 2);
+        const variantKey = _ref40[0];
+        const variantValue = _ref40[1];
         if (variantValue === undefined || variantValue === null) continue;
         const normalizedValue = variantValue === true ? "true" : variantValue === false ? "false" : variantValue;
         const key = "".concat(variantKey, ":").concat(normalizedValue, ":").concat(slotName);
@@ -8692,18 +9137,18 @@ function createSlots(config) {
       }
 
       // Check compound variants for this slot
-      for (const _ref39 of variantSlotStyles.entries()) {
-        var _ref40 = _slicedToArray(_ref39, 2);
-        const key = _ref40[0];
-        const data = _ref40[1];
+      for (const _ref41 of variantSlotStyles.entries()) {
+        var _ref42 = _slicedToArray(_ref41, 2);
+        const key = _ref42[0];
+        const data = _ref42[1];
         if (!key.startsWith("__compound__:") || !key.endsWith(":".concat(slotName))) continue;
         const conditions = data.conditions,
           className = data.className;
         let matches = true;
-        for (const _ref41 of Object.entries(conditions)) {
-          var _ref42 = _slicedToArray(_ref41, 2);
-          const condKey = _ref42[0];
-          const condValue = _ref42[1];
+        for (const _ref43 of Object.entries(conditions)) {
+          var _ref44 = _slicedToArray(_ref43, 2);
+          const condKey = _ref44[0];
+          const condValue = _ref44[1];
           const propValue = mergedProps[condKey];
           const normalizedPropValue = propValue === true ? "true" : propValue === false ? "false" : propValue;
           const normalizedCondValue = condValue === true ? "true" : condValue === false ? "false" : condValue;
@@ -8731,10 +9176,10 @@ function createSlots(config) {
     let slotOverrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const baseSlots = typeof props === "object" && !Array.isArray(props) && !("$$typeof" in props) ? slotsGenerator(props) : slotsGenerator();
     const result = {};
-    for (const _ref43 of Object.entries(baseSlots)) {
-      var _ref44 = _slicedToArray(_ref43, 2);
-      const slotName = _ref44[0];
-      const slotClasses = _ref44[1];
+    for (const _ref45 of Object.entries(baseSlots)) {
+      var _ref46 = _slicedToArray(_ref45, 2);
+      const slotName = _ref46[0];
+      const slotClasses = _ref46[1];
       result[slotName] = cx(slotClasses, slotOverrides[slotName]);
     }
     return result;
@@ -8904,17 +9349,17 @@ twsxClassName.setTheme = function (name) {
     // Apply theme tokens to CSS variables
     if (IS_BROWSER) {
       const root = document.documentElement;
-      for (const _ref45 of Object.entries(themes[name])) {
-        var _ref46 = _slicedToArray(_ref45, 2);
-        const key = _ref46[0];
-        const value = _ref46[1];
+      for (const _ref47 of Object.entries(themes[name])) {
+        var _ref48 = _slicedToArray(_ref47, 2);
+        const key = _ref48[0];
+        const value = _ref48[1];
         if (typeof value === "string") {
           root.style.setProperty("--".concat(key), value);
         } else if (typeof value === "object") {
-          for (const _ref47 of Object.entries(value)) {
-            var _ref48 = _slicedToArray(_ref47, 2);
-            const subKey = _ref48[0];
-            const subValue = _ref48[1];
+          for (const _ref49 of Object.entries(value)) {
+            var _ref50 = _slicedToArray(_ref49, 2);
+            const subKey = _ref50[0];
+            const subValue = _ref50[1];
             root.style.setProperty("--".concat(key, "-").concat(subKey), subValue);
           }
         }