@cube-dev/ui-kit 0.74.3 → 0.76.0

package/es/tasty/utils/renderStyles.js

@@ -1,15 +1,43 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.74.3
+ * @cube-dev/ui-kit v0.76.0
  * 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 { 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));
+}
+// 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 +50,399 @@ 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;
+}
+/**
+ * Create a conflict checker function that uses precomputed attribute maps
+ * for efficient conflict detection during combination generation
+ */
+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;
+}
 /**
- * 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}
+ * 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
  */
-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 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 { $, ...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);
+            }
+        }
+        // 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)) {
+        const fragments = [];
+        for (const item of result) {
+            const itemCSS = convertHandlerResultToCSS(item, selectorSuffix);
+            if (itemCSS) {
+                fragments.push(itemCSS);
+            }
+        }
+        return fragments.join('');
+    }
+    const { $, css, ...styleProps } = result;
+    const styleFragments = [];
+    // Process style properties using array accumulation
+    for (const [styleName, value] of Object.entries(styleProps)) {
+        if (Array.isArray(value)) {
+            // Handle array values
+            for (const val of value) {
+                if (val) {
+                    styleFragments.push(`${styleName}: ${val};\n`);
+                }
+            }
+        }
+        else if (value) {
+            // Handle single values
+            styleFragments.push(`${styleName}: ${value};\n`);
+        }
+    }
+    let renderedStyles = styleFragments.join('');
+    if (css) {
+        renderedStyles = css + '\n' + renderedStyles;
+    }
+    if (!renderedStyles) {
+        return '';
+    }
+    const finalSelectorSuffix = selectorSuffix || '';
+    if (Array.isArray($)) {
+        const ruleFragments = [];
+        for (const suffix of $) {
+            const normalized = suffix
+                ? normalizeDollarSelectorSuffix(String(suffix))
+                : '';
+            ruleFragments.push(`&${finalSelectorSuffix}${normalized}{\n${renderedStyles}}\n`);
+        }
+        return ruleFragments.join('');
+    }
+    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) => {
+        // Generate base selector
+        let selector = `.${className}${rule.selectorSuffix}`;
+        // Increase specificity for tasty class selectors by duplicating the class
+        if (/^t\d+$/.test(className)) {
+            selector = `.${className}${selector}`;
+        }
+        const declarations = Object.entries(rule.declarations)
+            .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,
+        };
+    });
+}
+/**
+ * Core style processing logic that generates logical rules
+ * Used by the unified renderStyles function
+ */
+function generateLogicalRules(styles, responsive = [], parentSuffix = '') {
+    const zones = pointsToZones(responsive || []);
+    const allLogicalRules = [];
+    // Cache for normalizeStyleZones results to avoid repeated computation
+    // WeakMap allows automatic cleanup when arrays are garbage collected
+    const normalizeCache = new WeakMap();
+    // Helper function to get cached normalizeStyleZones result
+    function cachedNormalizeStyleZones(value, zoneNumber) {
+        // Only cache for arrays - other types are fast to process
+        if (!Array.isArray(value)) {
+            return normalizeStyleZones(value, zoneNumber);
+        }
+        // Check if we have a cache for this array reference
+        let zoneCache = normalizeCache.get(value);
+        if (!zoneCache) {
+            zoneCache = new Map();
+            normalizeCache.set(value, zoneCache);
+        }
+        // Check if we have a cached result for this zone count
+        let result = zoneCache.get(zoneNumber);
+        if (result === undefined) {
+            result = normalizeStyleZones(value, zoneNumber);
+            zoneCache.set(zoneNumber, result);
+        }
+        return result;
+    }
+    // Local versions of helpers that leverage cachedNormalizeStyleZones
+    function stateMapToArrayOfStateMapsLocal(value, zoneNumber) {
+        // Short-circuit for single zone - avoid array allocation
+        if (zoneNumber === 1) {
+            const singleMap = {};
+            for (const [state, stateValue] of Object.entries(value)) {
+                if (Array.isArray(stateValue)) {
+                    // Take the first value from the array or null if empty
+                    singleMap[state] = stateValue.length > 0 ? stateValue[0] : null;
+                }
+                else {
+                    singleMap[state] = stateValue;
+                }
+            }
+            return [singleMap];
+        }
+        const result = Array.from({ length: zoneNumber }, () => ({}));
+        for (const [state, stateValue] of Object.entries(value)) {
+            const perZone = Array.isArray(stateValue)
+                ? cachedNormalizeStyleZones(stateValue, zoneNumber)
+                : Array(zoneNumber).fill(stateValue);
+            for (let i = 0; i < zoneNumber; i++) {
+                const v = perZone[i];
+                result[i][state] = v;
+            }
+        }
+        return result;
+    }
+    function normalizeArrayWithStateMapsLocal(valueArray, zoneNumber) {
+        // Short-circuit for single zone - avoid array propagation and mapping
+        if (zoneNumber === 1) {
+            const firstEntry = valueArray.length > 0 ? valueArray[0] : null;
+            if (firstEntry &&
+                typeof firstEntry === 'object' &&
+                !Array.isArray(firstEntry)) {
+                return [firstEntry];
+            }
+            return [{ '': firstEntry }];
+        }
+        const propagated = cachedNormalizeStyleZones(valueArray, zoneNumber);
+        // Trim trailing null/undefined entries to reduce processing
+        let lastNonNullIndex = propagated.length - 1;
+        while (lastNonNullIndex >= 0 && propagated[lastNonNullIndex] == null) {
+            lastNonNullIndex--;
+        }
+        // If all entries are null, return minimal array
+        if (lastNonNullIndex < 0) {
+            return Array.from({ length: zoneNumber }, () => ({ '': null }));
+        }
+        // Process only up to the last non-null entry, then fill the rest with the last value
+        const result = [];
+        let lastProcessedEntry = null;
+        for (let i = 0; i <= lastNonNullIndex; i++) {
+            const entry = propagated[i];
+            let processedEntry;
+            if (entry && typeof entry === 'object' && !Array.isArray(entry)) {
+                processedEntry = entry;
+            }
+            else {
+                processedEntry = { '': entry };
+            }
+            result.push(processedEntry);
+            lastProcessedEntry = processedEntry;
+        }
+        // Fill remaining slots with the last processed entry (CSS cascade behavior)
+        for (let i = lastNonNullIndex + 1; i < zoneNumber; i++) {
+            result.push(lastProcessedEntry || { '': null });
+        }
+        return result;
+    }
+    // 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 +450,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] = stateMapToArrayOfStateMapsLocal(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] = normalizeArrayWithStateMapsLocal(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);
+                    map[style] = cachedNormalizeStyleZones(styleMap[style], zones.length);
                     return map;
                 }, {});
+                // Create props for each breakpoint
                 const propsByPoint = zones.map((zone, i) => {
                     const pointProps = {};
                     lookupStyles.forEach((style) => {
@@ -107,23 +507,275 @@ 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 = cachedNormalizeStyleZones(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, parentSuffix);
+    return allLogicalRules;
+}
+export function renderStyles(styles, responsive = [], classNameOrSelector) {
+    const directSelector = !!classNameOrSelector;
+    if (!styles) {
+        return directSelector ? [] : { rules: [] };
+    }
+    // Generate logical rules using shared pipeline
+    const allLogicalRules = generateLogicalRules(styles, responsive);
+    const zones = pointsToZones(responsive || []);
+    if (directSelector) {
+        // Direct selector mode: convert logical rules directly to StyleResult format
+        if (!classNameOrSelector) {
+            throw new Error('directSelector mode requires classNameOrSelector');
+        }
+        return allLogicalRules.map((rule) => {
+            // Replace & with the actual selector or append suffix to selector
+            let finalSelector = rule.selectorSuffix
+                ? `${classNameOrSelector}${rule.selectorSuffix}`
+                : classNameOrSelector;
+            // Increase specificity for tasty class selectors by duplicating the class
+            if (finalSelector.startsWith('.') && /^\.t\d+/.test(finalSelector)) {
+                const classMatch = finalSelector.match(/^\.t\d+/);
+                if (classMatch) {
+                    const baseClass = classMatch[0];
+                    finalSelector = baseClass + finalSelector;
+                }
+            }
+            const declarations = Object.entries(rule.declarations)
+                .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: finalSelector,
+                declarations,
+                atRules,
+            };
+        });
+    }
+    // Standard mode: use accumulation and materialization with className
+    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,
+            });
+        }
+    }
+    // If no className provided, return rules with needsClassName flag
+    if (!classNameOrSelector) {
+        const materializedRules = Array.from(accumulatedRules.values()).map((rule) => {
+            const declarations = Object.entries(rule.declarations)
+                .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: rule.selectorSuffix || '',
+                declarations,
+                atRules,
+                needsClassName: true, // Flag for injector to prepend className
+            };
+        });
+        return {
+            rules: materializedRules,
+        };
+    }
+    // Materialize the accumulated logical rules into final format
+    const finalRulesRaw = materializeRules(Array.from(accumulatedRules.values()), classNameOrSelector, 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: classNameOrSelector,
+    };
 }