@cube-dev/ui-kit 0.0.0-canary-1d46daa → 0.0.0-canary-736d057

package/es/tasty/utils/renderStyles.js

@@ -1,15 +1,76 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * Released under the MIT license.
  */
 
+/**
+ * Style rendering that works with structured style objects
+ * Eliminates CSS string parsing for better performance
+ */
+import { Lru } from '../parser/lru';
 import { createStyle, STYLE_HANDLER_MAP } from '../styles';
-import { mediaWrapper, normalizeStyleZones } from './responsive';
+import { getModCombinationsIterative } from './getModCombinations';
+import { mediaWrapper, normalizeStyleZones, pointsToZones, } from './responsive';
+import { computeState, getModSelector, styleStateMapToStyleStateDataList, } from './styles';
+// Detect if a value is a state map whose entries contain responsive arrays
+function stateMapHasResponsiveArrays(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return false;
+    return Object.values(value).some((v) => Array.isArray(v));
+}
+// Convert a state-map-of-arrays into an array-of-state-maps of length zoneNumber
+// Example:
+//   { '': ['1x', '2x'], large: [null, '3x'] } →
+//   [ { '': '1x', large: null }, { '': '2x', large: '3x' } ]
+function stateMapToArrayOfStateMaps(value, zoneNumber) {
+    const result = Array.from({ length: zoneNumber }, () => ({}));
+    for (const [state, stateValue] of Object.entries(value)) {
+        const perZone = Array.isArray(stateValue)
+            ? normalizeStyleZones(stateValue, zoneNumber)
+            : Array(zoneNumber).fill(stateValue);
+        for (let i = 0; i < zoneNumber; i++) {
+            const v = perZone[i];
+            // Always include the state in the result, even if null or empty
+            // This preserves the state structure across all breakpoints
+            result[i][state] = v;
+        }
+    }
+    return result;
+}
+// Normalize an array that may contain plain values and/or state maps into
+// an array-of-state-maps of fixed length zoneNumber with propagation.
+// Example:
+//   ['1x', { '': '1x', large: '2x' }] (zoneNumber=2) →
+//   [ { '': '1x' }, { '': '1x', large: '2x' } ]
+function normalizeArrayWithStateMaps(valueArray, zoneNumber) {
+    const propagated = normalizeStyleZones(valueArray, zoneNumber);
+    return propagated.map((entry) => {
+        if (entry && typeof entry === 'object' && !Array.isArray(entry)) {
+            return entry;
+        }
+        return { '': entry };
+    });
+}
+// Normalize selector suffixes coming from `$` in style handler results.
+// Some legacy handlers return suffixes starting with `&` (e.g. '& > *').
+// The renderer expects suffixes without the ampersand because it adds
+// the parent selector during materialization.
+function normalizeDollarSelectorSuffix(suffix) {
+    if (!suffix)
+        return '';
+    return suffix.startsWith('&') ? suffix.slice(1) : suffix;
+}
+/**
+ * Check if a key represents a CSS selector
+ */
 export function isSelector(key) {
-    return key.startsWith('&') || key.startsWith('.') || key.match(/^[A-Z]/);
+    return (key.startsWith('&') || key.startsWith('.') || key.match(/^[A-Z]/) !== null);
 }
+/**
+ * Get the selector suffix for a key
+ */
 function getSelector(key) {
     if (key.startsWith('&')) {
         return key.slice(1);
@@ -22,41 +83,306 @@ function getSelector(key) {
     }
     return null;
 }
-/** Props level cache for `renderStyles` function. */
-let STYLE_CACHE = {};
-/** Current size of the cache. */
-let STYLE_CACHE_COUNT = 0;
-/** Cache limit. */
-const CACHE_LIMIT = 1000;
+// Cache for parsed attribute selectors with bounded size to prevent memory leaks
+const attributeSelectorCache = new Lru(5000);
+function parseAttributeSelector(selector) {
+    // Check cache first
+    const cached = attributeSelectorCache.get(selector);
+    if (cached !== undefined) {
+        return cached;
+    }
+    // Match patterns like [data-size="medium"] or [data-is-selected]
+    const match = selector.match(/^\[([^=\]]+)(?:="([^"]+)")?\]$/);
+    const result = match
+        ? {
+            attribute: match[1],
+            value: match[2] || 'true', // Handle boolean attributes
+            fullSelector: selector,
+        }
+        : null;
+    // Cache the result
+    attributeSelectorCache.set(selector, result);
+    return result;
+}
+function hasConflictingAttributeSelectors(mods, parsedMods) {
+    const attributeMap = new Map();
+    for (const mod of mods) {
+        const parsed = parsedMods?.get(mod) ?? parseAttributeSelector(mod);
+        if (parsed && parsed.value !== 'true') {
+            if (!attributeMap.has(parsed.attribute)) {
+                attributeMap.set(parsed.attribute, []);
+            }
+            attributeMap.get(parsed.attribute).push(parsed.value);
+        }
+    }
+    // Check if any attribute has multiple values
+    for (const values of attributeMap.values()) {
+        if (values.length > 1)
+            return true;
+    }
+    return false;
+}
 /**
- * Render style props to complete Styled Components CSS.
- * @param styles - Complete style props.
- * @param responsive - A list of responsive zones
- * @param {string} [suffix]
- * @return {string}
+ * Create a conflict checker function that uses precomputed attribute maps
+ * for efficient conflict detection during combination generation
  */
-export function renderStyles(styles, responsive = [], suffix) {
-    const zones = responsive;
-    const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
-    const cacheKey = JSON.stringify({ s: styles, r: responsive, suffix });
-    let rawStyles = '';
-    const handlerQueue = [];
-    if (!STYLE_CACHE[cacheKey]) {
-        STYLE_CACHE_COUNT++;
-        // clear cache if size is more that the limit
-        if (STYLE_CACHE_COUNT > CACHE_LIMIT) {
-            STYLE_CACHE_COUNT = 0;
-            STYLE_CACHE = {};
-        }
-        const keys = styles ? Object.keys(styles) : [];
+function createAttributeConflictChecker(parsedMods) {
+    return (combination) => hasConflictingAttributeSelectors(combination, parsedMods);
+}
+// Build precomputed attribute maps for efficient not selector optimization
+function buildAttributeMaps(currentMods, allMods) {
+    const allAttributes = new Map();
+    const currentAttributes = new Map();
+    const parsedMods = new Map();
+    // Parse all mods once and cache results
+    const allModsSet = new Set([...currentMods, ...allMods]);
+    for (const mod of allModsSet) {
+        if (!parsedMods.has(mod)) {
+            parsedMods.set(mod, parseAttributeSelector(mod));
+        }
+    }
+    // Build map of all possible values for each attribute
+    for (const mod of allMods) {
+        const parsed = parsedMods.get(mod);
+        if (parsed && parsed.value !== 'true') {
+            if (!allAttributes.has(parsed.attribute)) {
+                allAttributes.set(parsed.attribute, new Set());
+            }
+            allAttributes.get(parsed.attribute).add(parsed.value);
+        }
+    }
+    // Build map of current mod attribute values
+    for (const mod of currentMods) {
+        const parsed = parsedMods.get(mod);
+        if (parsed && parsed.value !== 'true') {
+            currentAttributes.set(parsed.attribute, parsed.value);
+        }
+    }
+    return { allAttributes, currentAttributes, parsedMods };
+}
+function optimizeNotSelectors(currentMods, allMods, precomputedMaps) {
+    const maps = precomputedMaps || buildAttributeMaps(currentMods, allMods);
+    const notMods = allMods.filter((mod) => !currentMods.includes(mod));
+    const optimizedNotMods = [];
+    for (const mod of notMods) {
+        const parsed = maps.parsedMods.get(mod);
+        if (parsed && parsed.value !== 'true') {
+            // If we already have a value for this attribute, skip this not selector
+            // because it's already mutually exclusive
+            if (maps.currentAttributes.has(parsed.attribute)) {
+                continue;
+            }
+        }
+        optimizedNotMods.push(mod);
+    }
+    return optimizedNotMods;
+}
+/**
+ * Explode a style handler result into logical rules with proper mapping
+ * Phase 1: Handler fan-out ($ selectors, arrays)
+ * Phase 2: Responsive fan-out (breakpoint arrays)
+ * Phase 3: Rule materialization
+ */
+function explodeHandlerResult(result, zones, selectorSuffix = '', forceBreakpointIdx, responsiveOrigin = false) {
+    if (!result)
+        return [];
+    // Phase 1: Handler fan-out - normalize to array
+    const resultArray = Array.isArray(result) ? result : [result];
+    const logicalRules = [];
+    for (const item of resultArray) {
+        if (!item || typeof item !== 'object')
+            continue;
+        const { $, css, ...styleProps } = item;
+        // Phase 2: Responsive fan-out - handle array values
+        const breakpointGroups = new Map();
+        if (forceBreakpointIdx !== undefined) {
+            // When breakpoint is forced (from responsive processing), use all props for that breakpoint
+            const group = {};
+            for (const [prop, value] of Object.entries(styleProps)) {
+                if (value != null && value !== '') {
+                    group[prop] = String(value);
+                }
+            }
+            if (Object.keys(group).length > 0) {
+                breakpointGroups.set(forceBreakpointIdx, group);
+            }
+        }
+        else {
+            // Normal processing - handle responsive arrays
+            const responsiveProps = [];
+            for (const [prop, value] of Object.entries(styleProps)) {
+                if (Array.isArray(value)) {
+                    // Responsive array - create entry for each breakpoint
+                    value.forEach((val, idx) => {
+                        if (val != null && val !== '' && idx < zones.length) {
+                            responsiveProps.push({ prop, value: val, breakpointIdx: idx });
+                        }
+                    });
+                }
+                else if (value != null && value !== '') {
+                    // Single value - goes to base breakpoint
+                    responsiveProps.push({ prop, value, breakpointIdx: 0 });
+                }
+            }
+            // Group by breakpoint index
+            for (const { prop, value, breakpointIdx } of responsiveProps) {
+                const group = breakpointGroups.get(breakpointIdx) || {};
+                group[prop] = String(value);
+                breakpointGroups.set(breakpointIdx, group);
+            }
+        }
+        // Handle raw CSS if present (add to base breakpoint)
+        if (css && typeof css === 'string') {
+            const baseGroup = breakpointGroups.get(0) || {};
+            // For now, we'll add raw CSS as a special property
+            // This is a limitation - raw CSS should be parsed properly
+            baseGroup['--raw-css'] = css;
+            breakpointGroups.set(0, baseGroup);
+        }
+        // Phase 3: Selector fan-out - handle $ suffixes
+        // IMPORTANT: If we are already in a pseudo-element context (contains '::'),
+        // CSS does not allow further descendant/child selectors (e.g., '>*') after
+        // a pseudo-element. In such cases we must ignore only the `$`-derived
+        // selectors while still preserving base declarations for the current
+        // selector. Previously this branch returned early and accidentally dropped
+        // all declarations computed before, including valid base ones.
+        const inPseudoElementContext = selectorSuffix.includes('::');
+        if (inPseudoElementContext && $) {
+            // Skip this item entirely to avoid producing invalid selectors like
+            // `.t0::before>*`. Other items (without $) in the same handler result
+            // will still be processed and preserved.
+            continue;
+        }
+        const suffixes = $
+            ? (Array.isArray($) ? $ : [$]).map((s) => selectorSuffix + normalizeDollarSelectorSuffix(String(s)))
+            : [selectorSuffix];
+        // Early identical-breakpoint coalescing: skip duplicate declarations
+        const seenDeclarations = new Map();
+        // Process breakpoints in order to prefer lower breakpoint indices
+        const sortedBreakpoints = Array.from(breakpointGroups.entries()).sort(([a], [b]) => a - b);
+        for (const [breakpointIdx, declarations] of sortedBreakpoints) {
+            if (Object.keys(declarations).length === 0)
+                continue;
+            // Create a stable hash key for identical declarations
+            const declarationKeys = Object.keys(declarations).sort();
+            const declarationHash = declarationKeys
+                .map((key) => `${key}:${declarations[key]}`)
+                .join(';');
+            const existingBreakpointIdx = seenDeclarations.get(declarationHash);
+            if (existingBreakpointIdx !== undefined) {
+                // Skip this breakpoint as it has identical declarations to a previous one
+                // The CSS cascade will handle the responsive behavior correctly
+                continue;
+            }
+            // Mark this declaration set as seen
+            seenDeclarations.set(declarationHash, breakpointIdx);
+            // Create logical rules for this unique declaration set
+            for (const suffix of suffixes) {
+                logicalRules.push({
+                    selectorSuffix: suffix,
+                    breakpointIdx,
+                    declarations,
+                    responsiveSource: responsiveOrigin || forceBreakpointIdx !== undefined,
+                });
+            }
+        }
+    }
+    return logicalRules;
+}
+/**
+ * Convert handler result (CSSMap) to CSS string for global injection
+ */
+function convertHandlerResultToCSS(result, selectorSuffix = '') {
+    if (!result)
+        return '';
+    if (Array.isArray(result)) {
+        return result.reduce((css, item) => {
+            return css + convertHandlerResultToCSS(item, selectorSuffix);
+        }, '');
+    }
+    const { $, css, ...styleProps } = result;
+    let renderedStyles = Object.keys(styleProps).reduce((styleList, styleName) => {
+        const value = styleProps[styleName];
+        if (Array.isArray(value)) {
+            return (styleList +
+                value.reduce((css, val) => {
+                    if (val) {
+                        return css + `${styleName}: ${val};\n`;
+                    }
+                    return css;
+                }, ''));
+        }
+        if (value) {
+            return `${styleList}${styleName}: ${value};\n`;
+        }
+        return styleList;
+    }, '');
+    if (css) {
+        renderedStyles = css + '\n' + renderedStyles;
+    }
+    if (!renderedStyles) {
+        return '';
+    }
+    const finalSelectorSuffix = selectorSuffix || '';
+    if (Array.isArray($)) {
+        return $.reduce((rend, suffix) => {
+            const normalized = suffix
+                ? normalizeDollarSelectorSuffix(String(suffix))
+                : '';
+            return (rend + `&${finalSelectorSuffix}${normalized}{\n${renderedStyles}}\n`);
+        }, '');
+    }
+    const normalizedSingle = $ ? normalizeDollarSelectorSuffix(String($)) : '';
+    return `&${finalSelectorSuffix}${normalizedSingle}{\n${renderedStyles}}\n`;
+}
+/**
+ * Convert logical rules to final StyleResult format
+ */
+function materializeRules(logicalRules, className, zones) {
+    return logicalRules.map((rule) => {
+        const selector = `.${className}${rule.selectorSuffix}`;
+        const declarations = Object.entries(rule.declarations)
+            .filter(([key]) => key !== '--raw-css') // Skip raw CSS for now
+            .map(([prop, value]) => `${prop}: ${value};`)
+            .join(' ');
+        const q = rule.breakpointIdx > 0
+            ? zones[rule.breakpointIdx]?.mediaQuery
+            : rule.responsiveSource
+                ? zones[0]?.mediaQuery
+                : undefined;
+        const atRules = q ? [`@media ${q}`] : undefined;
+        return {
+            selector,
+            declarations,
+            atRules,
+        };
+    });
+}
+/**
+ * Render styles without CSS string conversion
+ * This is a performance-optimized version of renderStyles
+ */
+export function renderStyles(styles, responsive = [], className = 'unknown') {
+    if (!styles) {
+        return { rules: [] };
+    }
+    const zones = pointsToZones(responsive || []);
+    // Collect all logical rules
+    const allLogicalRules = [];
+    // Process styles recursively, preserving mod selectors and combining with nested selector suffixes
+    function processStyles(currentStyles, parentSuffix = '') {
+        const keys = Object.keys(currentStyles || {});
         const selectorKeys = keys.filter((key) => isSelector(key));
-        let innerStyles = '';
-        if (selectorKeys.length) {
-            selectorKeys.forEach((key) => {
-                const addSuffix = getSelector(key);
-                innerStyles += renderStyles(styles?.[key], responsive, addSuffix);
-            });
+        // Recurse into nested selectors first to compute proper suffix chaining
+        for (const key of selectorKeys) {
+            const suffix = getSelector(key);
+            if (suffix && currentStyles[key]) {
+                processStyles(currentStyles[key], `${parentSuffix}${suffix}`);
+            }
         }
+        // Build handler queue for style properties at this level
+        const handlerQueue = [];
+        const seenHandlers = new Set();
         keys.forEach((styleName) => {
             if (isSelector(styleName))
                 return;
@@ -64,40 +390,54 @@ export function renderStyles(styles, responsive = [], suffix) {
             if (!handlers) {
                 handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
             }
-            handlers.forEach((STYLE) => {
-                if (handlerQueue.find((queueItem) => queueItem.handler === STYLE))
+            handlers.forEach((handler) => {
+                if (seenHandlers.has(handler)) {
                     return;
+                }
+                seenHandlers.add(handler);
                 let isResponsive = false;
-                const lookupStyles = STYLE.__lookupStyles;
+                const lookupStyles = handler.__lookupStyles;
                 const filteredStyleMap = lookupStyles.reduce((map, name) => {
-                    map[name] = styles?.[name];
-                    if (Array.isArray(map[name])) {
-                        if (map[name].length === 0) {
-                            delete map[name];
+                    const value = currentStyles?.[name];
+                    if (value !== undefined) {
+                        // Case 1: state-map-of-arrays → array-of-state-maps
+                        if (value &&
+                            typeof value === 'object' &&
+                            !Array.isArray(value) &&
+                            stateMapHasResponsiveArrays(value)) {
+                            map[name] = stateMapToArrayOfStateMaps(value, zones.length);
+                            isResponsive = true;
                         }
-                        else {
-                            if (map[name].length === 1) {
-                                map[name] = map[name][0];
+                        else if (Array.isArray(value)) {
+                            // Case 2: array that may contain state maps → normalize to array-of-state-maps
+                            if (value.length > 0) {
+                                map[name] = normalizeArrayWithStateMaps(value, zones.length);
+                                isResponsive = true;
                             }
-                            isResponsive = true;
+                        }
+                        else {
+                            map[name] = value;
                         }
                     }
                     return map;
                 }, {});
                 handlerQueue.push({
-                    handler: STYLE,
+                    handler,
                     styleMap: filteredStyleMap,
                     isResponsive,
                 });
             });
         });
+        // Process handlers using the three-phase approach
         handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
             const lookupStyles = handler.__lookupStyles;
             if (isResponsive) {
+                // For responsive styles, resolve arrays using normalizeStyleZones
                 const valueMap = lookupStyles.reduce((map, style) => {
                     map[style] = normalizeStyleZones(styleMap[style], zones.length);
                     return map;
                 }, {});
+                // Create props for each breakpoint
                 const propsByPoint = zones.map((zone, i) => {
                     const pointProps = {};
                     lookupStyles.forEach((style) => {
@@ -107,23 +447,472 @@ export function renderStyles(styles, responsive = [], suffix) {
                     });
                     return pointProps;
                 });
-                const rulesByPoint = propsByPoint.map((props) => handler(props, suffix));
-                rulesByPoint.forEach((rules, i) => {
-                    responsiveStyles[i] += rules || '';
+                // Call handler for each breakpoint, with state map processing if needed
+                propsByPoint.forEach((pointProps, breakpointIdx) => {
+                    const hasStateMapsAtPoint = lookupStyles.some((style) => {
+                        const v = pointProps[style];
+                        return v && typeof v === 'object' && !Array.isArray(v);
+                    });
+                    if (hasStateMapsAtPoint) {
+                        const allMods = new Set();
+                        const styleStates = {};
+                        lookupStyles.forEach((style) => {
+                            const v = pointProps[style];
+                            if (v && typeof v === 'object' && !Array.isArray(v)) {
+                                const { states, mods } = styleStateMapToStyleStateDataList(v);
+                                styleStates[style] = states;
+                                mods.forEach((m) => allMods.add(m));
+                            }
+                            else {
+                                styleStates[style] = [{ mods: [], notMods: [], value: v }];
+                            }
+                        });
+                        const allModsArray = Array.from(allMods);
+                        // Precompute attribute maps once for all combinations
+                        const attributeMaps = buildAttributeMaps([], allModsArray);
+                        // Generate combinations with conflict-aware pruning
+                        const conflictChecker = createAttributeConflictChecker(attributeMaps.parsedMods);
+                        const combinations = getModCombinationsIterative(allModsArray, true, conflictChecker);
+                        combinations.forEach((modCombination) => {
+                            const stateProps = {};
+                            lookupStyles.forEach((style) => {
+                                const states = styleStates[style];
+                                const matchingState = states.find((state) => computeState(state.model, (mod) => modCombination.includes(mod)));
+                                if (matchingState) {
+                                    stateProps[style] = matchingState.value;
+                                }
+                            });
+                            // Use precomputed maps for efficient not selector optimization
+                            const currentMaps = buildAttributeMaps(modCombination, allModsArray);
+                            const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray, currentMaps);
+                            const modsSelectors = `${modCombination
+                                .map(getModSelector)
+                                .join('')}${optimizedNotMods
+                                .map((mod) => {
+                                const sel = getModSelector(mod);
+                                return sel.startsWith(':not(')
+                                    ? sel.slice(5, -1)
+                                    : `:not(${sel})`;
+                            })
+                                .join('')}`;
+                            const result = handler(stateProps);
+                            if (!result)
+                                return;
+                            const logicalRules = explodeHandlerResult(result, zones || [], `${modsSelectors}${parentSuffix}`, breakpointIdx, true);
+                            allLogicalRules.push(...logicalRules);
+                        });
+                    }
+                    else {
+                        const result = handler(pointProps);
+                        if (!result)
+                            return;
+                        const logicalRules = explodeHandlerResult(result, zones || [], parentSuffix, breakpointIdx, true);
+                        allLogicalRules.push(...logicalRules);
+                    }
                 });
             }
             else {
-                rawStyles +=
-                    handler(styleMap, suffix) || '';
+                // For non-responsive styles, check if any values have state maps
+                const hasStateMaps = lookupStyles.some((style) => {
+                    const value = styleMap[style];
+                    return value && typeof value === 'object' && !Array.isArray(value);
+                });
+                if (hasStateMaps) {
+                    // Process each style property individually for state resolution
+                    const allMods = new Set();
+                    const styleStates = {};
+                    lookupStyles.forEach((style) => {
+                        const value = styleMap[style];
+                        if (value && typeof value === 'object' && !Array.isArray(value)) {
+                            const { states, mods } = styleStateMapToStyleStateDataList(value);
+                            styleStates[style] = states;
+                            mods.forEach((mod) => allMods.add(mod));
+                        }
+                        else {
+                            // Simple value, create a single state
+                            styleStates[style] = [{ mods: [], notMods: [], value }];
+                        }
+                    });
+                    // Generate all possible mod combinations
+                    const allModsArray = Array.from(allMods);
+                    // Precompute attribute maps once for all combinations
+                    const attributeMaps = buildAttributeMaps([], allModsArray);
+                    // Generate combinations with conflict-aware pruning
+                    const conflictChecker = createAttributeConflictChecker(attributeMaps.parsedMods);
+                    const combinations = getModCombinationsIterative(allModsArray, true, conflictChecker);
+                    combinations.forEach((modCombination) => {
+                        const stateProps = {};
+                        lookupStyles.forEach((style) => {
+                            const states = styleStates[style];
+                            // Find the matching state for this mod combination
+                            const matchingState = states.find((state) => {
+                                return computeState(state.model, (mod) => modCombination.includes(mod));
+                            });
+                            if (matchingState) {
+                                stateProps[style] = matchingState.value;
+                            }
+                        });
+                        // Use precomputed maps for efficient not selector optimization
+                        const currentMaps = buildAttributeMaps(modCombination, allModsArray);
+                        const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray, currentMaps);
+                        const modsSelectors = `${modCombination
+                            .map(getModSelector)
+                            .join('')}${optimizedNotMods
+                            .map((mod) => {
+                            const sel = getModSelector(mod);
+                            return sel.startsWith(':not(')
+                                ? sel.slice(5, -1)
+                                : `:not(${sel})`;
+                        })
+                            .join('')}`;
+                        // If any state value is responsive (array), fan-out by breakpoint
+                        const hasResponsiveStateValues = lookupStyles.some((style) => Array.isArray(stateProps[style]));
+                        if (hasResponsiveStateValues) {
+                            const propsByPoint = zones.map((_, i) => {
+                                const pointProps = {};
+                                lookupStyles.forEach((style) => {
+                                    const v = stateProps[style];
+                                    if (Array.isArray(v)) {
+                                        const arr = normalizeStyleZones(v, zones.length);
+                                        pointProps[style] = arr?.[i];
+                                    }
+                                    else {
+                                        pointProps[style] = v;
+                                    }
+                                });
+                                return pointProps;
+                            });
+                            propsByPoint.forEach((props, breakpointIdx) => {
+                                const res = handler(props);
+                                if (!res)
+                                    return;
+                                const logical = explodeHandlerResult(res, zones || [], `${modsSelectors}${parentSuffix}`, breakpointIdx, true);
+                                allLogicalRules.push(...logical);
+                            });
+                        }
+                        else {
+                            // Simple non-responsive state values
+                            const result = handler(stateProps);
+                            if (!result)
+                                return;
+                            const logical = explodeHandlerResult(result, zones || [], `${modsSelectors}${parentSuffix}`);
+                            allLogicalRules.push(...logical);
+                        }
+                    });
+                }
+                else {
+                    // Simple case: no state maps, call handler directly
+                    const result = handler(styleMap);
+                    if (result) {
+                        const logical = explodeHandlerResult(result, zones || [], parentSuffix);
+                        allLogicalRules.push(...logical);
+                    }
+                }
             }
         });
-        STYLE_CACHE[cacheKey] = `&${suffix || ''}{outline: none;\n&[hidden]{display: none !important;}}${rawStyles}${responsive &&
-            responsive.length &&
-            responsiveStyles.filter((s) => s).length
-            ? mediaWrapper(responsiveStyles, zones)
-            : ''}${innerStyles}`;
     }
-    return STYLE_CACHE[cacheKey];
+    // Kick off processing from the root styles with empty suffix
+    processStyles(styles, '');
+    // Accumulate declarations before materialization to reduce duplication
+    const accumulatedRules = new Map();
+    for (const rule of allLogicalRules) {
+        // Create a key based on breakpointIdx, selectorSuffix, and responsiveOrigin
+        const ruleKey = `${rule.breakpointIdx}|${rule.selectorSuffix}|${rule.responsiveSource}`;
+        const existing = accumulatedRules.get(ruleKey);
+        if (existing) {
+            // Merge declarations from this rule into the existing one
+            Object.assign(existing.declarations, rule.declarations);
+        }
+        else {
+            // Create a new accumulated rule
+            accumulatedRules.set(ruleKey, {
+                selectorSuffix: rule.selectorSuffix,
+                breakpointIdx: rule.breakpointIdx,
+                declarations: { ...rule.declarations },
+                responsiveSource: rule.responsiveSource,
+            });
+        }
+    }
+    // Materialize the accumulated logical rules into final format
+    const finalRulesRaw = materializeRules(Array.from(accumulatedRules.values()), className, zones || []);
+    // Simplified deduplication (should be much less work now)
+    const seen = new Set();
+    const finalRules = finalRulesRaw.filter((rule) => {
+        const at = rule.atRules && rule.atRules.length ? `@${rule.atRules.join('|')}` : '';
+        const key = `${rule.selector}|${rule.declarations}|${at}`;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+    return {
+        rules: finalRules,
+        className,
+    };
+}
+/**
+ * Render styles for global injection (without class names)
+ * Returns CSS with & selectors that injectGlobal can process
+ */
+export function renderStylesForGlobal(styles, responsive = []) {
+    if (!styles) {
+        return '';
+    }
+    const zones = pointsToZones(responsive || []);
+    const handlerQueue = [];
+    const keys = Object.keys(styles);
+    const selectorKeys = keys.filter((key) => isSelector(key));
+    const declarations = [];
+    const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
+    let innerStyles = '';
+    // Handle nested selectors (like &:hover, .SubElement)
+    for (const key of selectorKeys) {
+        const selectorSuffix = getSelector(key);
+        if (selectorSuffix && styles[key]) {
+            const nestedStyles = styles[key];
+            innerStyles += renderStylesForGlobal(nestedStyles, responsive).replace(/&/g, `&${selectorSuffix}`);
+        }
+    }
+    // Build handler queue for base styles
+    const seenHandlers = new Set();
+    keys.forEach((styleName) => {
+        if (isSelector(styleName))
+            return;
+        let handlers = STYLE_HANDLER_MAP[styleName];
+        if (!handlers) {
+            handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
+        }
+        handlers.forEach((handler) => {
+            if (seenHandlers.has(handler)) {
+                return;
+            }
+            seenHandlers.add(handler);
+            let isResponsive = false;
+            const lookupStyles = handler.__lookupStyles;
+            const filteredStyleMap = lookupStyles.reduce((map, name) => {
+                const value = styles?.[name];
+                if (value !== undefined) {
+                    if (value &&
+                        typeof value === 'object' &&
+                        !Array.isArray(value) &&
+                        stateMapHasResponsiveArrays(value)) {
+                        map[name] = stateMapToArrayOfStateMaps(value, zones.length);
+                        isResponsive = true;
+                    }
+                    else if (Array.isArray(value)) {
+                        if (value.length > 0) {
+                            map[name] = normalizeArrayWithStateMaps(value, zones.length);
+                            isResponsive = true;
+                        }
+                    }
+                    else {
+                        map[name] = value;
+                    }
+                }
+                return map;
+            }, {});
+            handlerQueue.push({
+                handler,
+                styleMap: filteredStyleMap,
+                isResponsive,
+            });
+        });
+    });
+    // Process handlers using approach
+    handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
+        const lookupStyles = handler.__lookupStyles;
+        if (isResponsive) {
+            // For responsive styles, resolve arrays using normalizeStyleZones
+            const valueMap = lookupStyles.reduce((map, style) => {
+                map[style] = normalizeStyleZones(styleMap[style], zones.length);
+                return map;
+            }, {});
+            // Create props for each breakpoint
+            const propsByPoint = zones.map((zone, i) => {
+                const pointProps = {};
+                lookupStyles.forEach((style) => {
+                    if (valueMap != null && valueMap[style] != null) {
+                        pointProps[style] = valueMap[style][i];
+                    }
+                });
+                return pointProps;
+            });
+            // Call handler for each breakpoint and convert to CSS, with state processing
+            propsByPoint.forEach((pointProps, i) => {
+                const hasStateMapsAtPoint = lookupStyles.some((style) => {
+                    const v = pointProps[style];
+                    return v && typeof v === 'object' && !Array.isArray(v);
+                });
+                if (hasStateMapsAtPoint) {
+                    const allMods = new Set();
+                    const styleStates = {};
+                    lookupStyles.forEach((style) => {
+                        const v = pointProps[style];
+                        if (v && typeof v === 'object' && !Array.isArray(v)) {
+                            const { states, mods } = styleStateMapToStyleStateDataList(v);
+                            styleStates[style] = states;
+                            mods.forEach((m) => allMods.add(m));
+                        }
+                        else {
+                            styleStates[style] = [{ mods: [], notMods: [], value: v }];
+                        }
+                    });
+                    const allModsArray = Array.from(allMods);
+                    // Precompute attribute maps once for all combinations
+                    const attributeMaps = buildAttributeMaps([], allModsArray);
+                    // Generate combinations with conflict-aware pruning
+                    const conflictChecker = createAttributeConflictChecker(attributeMaps.parsedMods);
+                    const combinations = getModCombinationsIterative(allModsArray, true, conflictChecker);
+                    combinations.forEach((modCombination) => {
+                        const stateProps = {};
+                        lookupStyles.forEach((style) => {
+                            const states = styleStates[style];
+                            const matchingState = states.find((state) => computeState(state.model, (mod) => modCombination.includes(mod)));
+                            if (matchingState) {
+                                stateProps[style] = matchingState.value;
+                            }
+                        });
+                        // Use precomputed maps for efficient not selector optimization
+                        const currentMaps = buildAttributeMaps(modCombination, allModsArray);
+                        const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray, currentMaps);
+                        const modsSelectors = `${modCombination
+                            .map(getModSelector)
+                            .join('')}${optimizedNotMods
+                            .map((mod) => {
+                            const sel = getModSelector(mod);
+                            return sel.startsWith(':not(')
+                                ? sel.slice(5, -1)
+                                : `:not(${sel})`;
+                        })
+                            .join('')}`;
+                        const result = handler(stateProps);
+                        if (!result)
+                            return;
+                        const cssResult = convertHandlerResultToCSS(result, modsSelectors);
+                        if (cssResult) {
+                            responsiveStyles[i] += cssResult;
+                        }
+                    });
+                }
+                else {
+                    const result = handler(pointProps);
+                    if (!result)
+                        return;
+                    const cssResult = convertHandlerResultToCSS(result);
+                    if (cssResult) {
+                        responsiveStyles[i] += cssResult;
+                    }
+                }
+            });
+        }
+        else {
+            // For non-responsive styles, check if any values have state maps
+            const hasStateMaps = lookupStyles.some((style) => {
+                const value = styleMap[style];
+                return value && typeof value === 'object' && !Array.isArray(value);
+            });
+            if (hasStateMaps) {
+                // Process each style property individually for state resolution
+                const allMods = new Set();
+                const styleStates = {};
+                lookupStyles.forEach((style) => {
+                    const value = styleMap[style];
+                    if (value && typeof value === 'object' && !Array.isArray(value)) {
+                        const { states, mods } = styleStateMapToStyleStateDataList(value);
+                        styleStates[style] = states;
+                        mods.forEach((mod) => allMods.add(mod));
+                    }
+                    else {
+                        // Simple value, create a single state
+                        styleStates[style] = [{ mods: [], notMods: [], value }];
+                    }
+                });
+                // Generate all possible mod combinations
+                const allModsArray = Array.from(allMods);
+                // Precompute attribute maps once for all combinations
+                const attributeMaps = buildAttributeMaps([], allModsArray);
+                // Generate combinations with conflict-aware pruning
+                const conflictChecker = createAttributeConflictChecker(attributeMaps.parsedMods);
+                const combinations = getModCombinationsIterative(allModsArray, true, conflictChecker);
+                combinations.forEach((modCombination) => {
+                    const stateProps = {};
+                    lookupStyles.forEach((style) => {
+                        const states = styleStates[style];
+                        // Find the matching state for this mod combination
+                        const matchingState = states.find((state) => {
+                            return computeState(state.model, (mod) => modCombination.includes(mod));
+                        });
+                        if (matchingState) {
+                            stateProps[style] = matchingState.value;
+                        }
+                    });
+                    const result = handler(stateProps);
+                    if (!result)
+                        return;
+                    // Use precomputed maps for efficient not selector optimization
+                    const currentMaps = buildAttributeMaps(modCombination, allModsArray);
+                    const optimizedNotMods = optimizeNotSelectors(modCombination, allModsArray, currentMaps);
+                    const modsSelectors = `${modCombination
+                        .map(getModSelector)
+                        .join('')}${optimizedNotMods
+                        .map((mod) => {
+                        const sel = getModSelector(mod);
+                        return sel.startsWith(':not(')
+                            ? sel.slice(5, -1)
+                            : `:not(${sel})`;
+                    })
+                        .join('')}`;
+                    // Convert to CSS with proper selectors
+                    const cssResult = convertHandlerResultToCSS(result, modsSelectors);
+                    if (cssResult) {
+                        if (cssResult.startsWith('& {') && !cssResult.includes('&', 2)) {
+                            // Simple rule: "& { declarations }"
+                            const declarationBlock = cssResult.slice(3, -1).trim();
+                            if (declarationBlock) {
+                                declarations.push(declarationBlock);
+                            }
+                        }
+                        else {
+                            // Complex rule with nested selectors or state modifiers
+                            innerStyles += cssResult;
+                        }
+                    }
+                });
+            }
+            else {
+                // Simple case: no state maps, call handler directly
+                const result = handler(styleMap);
+                if (result) {
+                    const cssResult = convertHandlerResultToCSS(result);
+                    if (cssResult) {
+                        if (cssResult.startsWith('& {') && !cssResult.includes('&', 2)) {
+                            // Simple rule: "& { declarations }"
+                            const declarationBlock = cssResult.slice(3, -1).trim();
+                            if (declarationBlock) {
+                                declarations.push(declarationBlock);
+                            }
+                        }
+                        else {
+                            // Complex rule with nested selectors or state modifiers
+                            innerStyles += cssResult;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    // Build final CSS similar to original renderStyles
+    // Merge all declarations into a single rule
+    const baseRule = declarations.length > 0 ? `& { ${declarations.join('\n')} }` : '';
+    const mediaRules = responsive && responsive.length && responsiveStyles.some((s) => s)
+        ? mediaWrapper(responsiveStyles, zones)
+        : '';
+    // Ensure we always separate the base rule, inner complex selectors and media rules with
+    // a newline so the selector replacement step ( & -> actual selector ) cannot accidentally
+    // concatenate two selectors and create the invalid form "..selector selector".
+    const parts = [baseRule, innerStyles, mediaRules].filter(Boolean);
+    const result = parts.join('\n');
+    return result;
 }