@cube-dev/ui-kit 0.0.0-canary-d09344a → 0.0.0-canary-ad2c384

package/es/tasty/utils/renderStyles.js

@@ -1,35 +1,25 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d09344a
+ * @cube-dev/ui-kit v0.0.0-canary-ad2c384
  * Released under the MIT license.
  */
 
 /**
- * Style rendering that works with structured style objects.
- * Eliminates CSS string parsing for better performance.
- *
- * Key optimizations:
- * - Early exit checks (hasSameAttributeConflicts) handle common cases without overhead
- * - Logical rule caching (logicalRulesCache) memoizes expensive style processing
- * - Conflict detection prevents invalid CSS selector combinations
- * - Not-selector optimization reduces CSS size
- * - Priority-based filtering handles mod precedence correctly
- * - Consolidated mod processing eliminates code duplication
+ * 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 { getModCombinationsIterative } from './getModCombinations';
 import { normalizeStyleZones, pointsToZones, } from './responsive';
-import { computeState, getModSelector, stringifyStyles, styleStateMapToStyleStateDataList, } from './styles';
+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));
 }
-// Cache logical rules per styles+breakpoints to avoid recomputation across identical calls
-const logicalRulesCache = new Lru(5000);
 // 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
@@ -58,15 +48,6 @@ function transformSelectorAffix(affix) {
     const trimmed = affix.trim();
     if (!trimmed)
         return ' ';
-    // Validate that combinators have spaces around them
-    // Check for capitalized words adjacent to combinators without spaces
-    const invalidPattern = /[A-Z][a-z]*[>+~]|[>+~][A-Z][a-z]*/;
-    if (invalidPattern.test(trimmed)) {
-        console.error(`[Tasty] Invalid selector affix ($) syntax: "${affix}"\n` +
-            `Combinators (>, +, ~) must have spaces around them when used with element names.\n` +
-            `Example: Use "$: '> Body > Row'" instead of "$: '>Body>Row'"\n` +
-            `This is a design choice: the parser uses simple whitespace splitting for performance.`);
-    }
     const tokens = trimmed.split(/\s+/);
     const transformed = tokens.map((token) => /^[A-Z]/.test(token) ? `[data-element="${token}"]` : token);
     return ` ${transformed.join(' ')} `;
@@ -91,42 +72,40 @@ function getSelector(key, styles) {
     }
     return null;
 }
-/**
- * Parse attribute selector into its components.
- * Simple regex parsing - JS engines optimize repeated patterns internally.
- */
+// Cache for parsed attribute selectors with bounded size to prevent memory leaks
+const attributeSelectorCache = new Lru(5000);
 function parseAttributeSelector(selector) {
-    // Match patterns like [data-size="medium"] or [data-selected]
+    // 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(/^\[([^=\]]+)(?:="([^"]+)")?\]$/);
-    return 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 attributeValues = new Map();
-    const attributeBooleans = new Set();
+    const attributeMap = new Map();
     for (const mod of mods) {
         const parsed = parsedMods?.get(mod) ?? parseAttributeSelector(mod);
-        if (!parsed)
-            continue;
-        if (parsed.value === 'true') {
-            // Boolean attribute
-            attributeBooleans.add(parsed.attribute);
-        }
-        else {
-            // Value attribute
-            if (!attributeValues.has(parsed.attribute)) {
-                attributeValues.set(parsed.attribute, []);
+        if (parsed && parsed.value !== 'true') {
+            if (!attributeMap.has(parsed.attribute)) {
+                attributeMap.set(parsed.attribute, []);
             }
-            attributeValues.get(parsed.attribute).push(parsed.value);
+            attributeMap.get(parsed.attribute).push(parsed.value);
         }
     }
-    // Check for multiple different values for the same attribute
-    for (const values of attributeValues.values()) {
+    // Check if any attribute has multiple values
+    for (const values of attributeMap.values()) {
         if (values.length > 1)
             return true;
     }
@@ -140,17 +119,15 @@ function createAttributeConflictChecker(parsedMods) {
     return (combination) => hasConflictingAttributeSelectors(combination, parsedMods);
 }
 // Build precomputed attribute maps for efficient not selector optimization
-function buildAttributeMaps(currentMods, allMods, parsedModsCache) {
+function buildAttributeMaps(currentMods, allMods) {
     const allAttributes = new Map();
     const currentAttributes = new Map();
-    const parsedMods = parsedModsCache || new Map();
-    // Parse all mods once and cache results (only if cache not provided)
-    if (!parsedModsCache) {
-        const allModsSet = new Set([...currentMods, ...allMods]);
-        for (const mod of allModsSet) {
-            if (!parsedMods.has(mod)) {
-                parsedMods.set(mod, parseAttributeSelector(mod));
-            }
+    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
@@ -172,219 +149,23 @@ function buildAttributeMaps(currentMods, allMods, parsedModsCache) {
     }
     return { allAttributes, currentAttributes, parsedMods };
 }
-/**
- * Check if a combination of positive and negative selectors creates a contradiction
- * Returns true if the combination is INVALID and should be pruned
- */
-function hasContradiction(currentMods, notMods, parsedMods) {
-    // Build maps of positive selector states
-    const positiveAttributes = new Map();
-    const positiveBooleans = new Set();
-    for (const mod of currentMods) {
-        const parsed = parsedMods.get(mod);
-        if (parsed) {
-            if (parsed.value === 'true') {
-                // Boolean attribute (e.g., [data-theme])
-                positiveBooleans.add(parsed.attribute);
-            }
-            else {
-                // Value attribute (e.g., [data-theme="danger"])
-                if (!positiveAttributes.has(parsed.attribute)) {
-                    positiveAttributes.set(parsed.attribute, []);
-                }
-                positiveAttributes.get(parsed.attribute).push(parsed.value);
-            }
-        }
-    }
-    // Check negative selectors for contradictions
-    for (const mod of notMods) {
-        const parsed = parsedMods.get(mod);
-        if (parsed) {
-            if (parsed.value === 'true') {
-                // Negative boolean: !([data-theme])
-                // Case 6: Value positive + attribute negative = CONTRADICTION
-                if (positiveAttributes.has(parsed.attribute) ||
-                    positiveBooleans.has(parsed.attribute)) {
-                    return true; // INVALID: can't have value without attribute
-                }
-            }
-            else {
-                // Negative value: !([data-theme="danger"])
-                // No contradiction - this is valid
-            }
-        }
-    }
-    return false;
-}
 function optimizeNotSelectors(currentMods, allMods, precomputedMaps) {
     const maps = precomputedMaps || buildAttributeMaps(currentMods, allMods);
     const notMods = allMods.filter((mod) => !currentMods.includes(mod));
     const optimizedNotMods = [];
-    // Precompute presence of negative boolean attributes to avoid repeated scans
-    const negativeBooleanByAttr = new Set();
-    for (const mod of notMods) {
-        const p = maps.parsedMods.get(mod);
-        if (p && p.value === 'true') {
-            negativeBooleanByAttr.add(p.attribute);
-        }
-    }
-    // Build maps of positive selector states for subsumption optimization
-    const positiveAttributes = new Map();
-    const positiveBooleans = new Set();
-    for (const mod of currentMods) {
-        const parsed = maps.parsedMods.get(mod);
-        if (parsed) {
-            if (parsed.value === 'true') {
-                positiveBooleans.add(parsed.attribute);
-            }
-            else {
-                if (!positiveAttributes.has(parsed.attribute)) {
-                    positiveAttributes.set(parsed.attribute, []);
-                }
-                positiveAttributes.get(parsed.attribute).push(parsed.value);
-            }
-        }
-    }
     for (const mod of notMods) {
         const parsed = maps.parsedMods.get(mod);
         if (parsed && parsed.value !== 'true') {
-            // Negative value selector
             // If we already have a value for this attribute, skip this not selector
-            // because it's already mutually exclusive (optimization)
-            if (maps.currentAttributes.has(parsed.attribute)) {
-                continue;
-            }
-        }
-        // If we have a positive value for this attribute, skip the negative boolean
-        // This avoids producing selectors like [data-attr="x"]:not([data-attr])
-        if (parsed && parsed.value === 'true') {
+            // because it's already mutually exclusive
             if (maps.currentAttributes.has(parsed.attribute)) {
                 continue;
             }
         }
-        // Case 4 subsumption: If we have a value positive and boolean positive for same attribute
-        // The value implies the boolean, so we can skip the boolean from positive mods
-        // (This is handled elsewhere - the value selector is more specific)
-        // Case 7 subsumption: If we have a value negative and boolean negative for same attribute
-        // The boolean negative implies value negative, so skip the value negative
-        if (parsed && parsed.value !== 'true') {
-            // If we also have the boolean attribute in negative mods, skip the value negative
-            if (negativeBooleanByAttr.has(parsed.attribute)) {
-                continue;
-            }
-        }
         optimizedNotMods.push(mod);
     }
     return optimizedNotMods;
 }
-/**
- * Quick check if there are any same-attribute conflicts (boolean vs value for same attribute).
- * Returns true if conflicts exist, false if filtering can be skipped.
- * This early exit optimization handles the common case efficiently.
- */
-function hasSameAttributeConflicts(allMods, parsedModsCache) {
-    const attributeCounts = new Map();
-    for (const mod of allMods) {
-        const parsed = parsedModsCache.get(mod);
-        if (!parsed)
-            continue;
-        const isBool = parsed.value === 'true';
-        const existing = attributeCounts.get(parsed.attribute);
-        if (existing) {
-            // Already have both types for this attribute - conflict exists!
-            if ((isBool && existing.hasValue) || (!isBool && existing.hasBool)) {
-                return true;
-            }
-            // Update the types we've seen
-            if (isBool)
-                existing.hasBool = true;
-            else
-                existing.hasValue = true;
-        }
-        else {
-            attributeCounts.set(parsed.attribute, {
-                hasBool: isBool,
-                hasValue: !isBool,
-            });
-        }
-    }
-    return false;
-}
-/**
- * Filter mods based on priority order for same-attribute conflicts.
- * If a boolean selector has higher priority than value selectors for the same attribute,
- * remove the value selectors (they would be shadowed by the boolean).
- *
- * Priority is determined by order in the styleStates (after reversal - earlier = higher priority)
- */
-function filterModsByPriority(allMods, styleStates, lookupStyles, parsedModsCache) {
-    // Early exit: if no same-attribute conflicts exist, skip all the expensive work
-    // This handles the common case efficiently without any cache overhead
-    if (!hasSameAttributeConflicts(allMods, parsedModsCache)) {
-        return allMods;
-    }
-    // Build priority map: for each mod, find its earliest appearance in any state list
-    const modPriorities = new Map();
-    for (const style of lookupStyles) {
-        const states = styleStates[style];
-        if (!states || states.length === 0)
-            continue; // Skip empty states
-        // states are already reversed (higher priority = lower index)
-        for (let index = 0; index < states.length; index++) {
-            const state = states[index];
-            if (!state.mods || state.mods.length === 0)
-                continue; // Skip empty mods
-            for (const mod of state.mods) {
-                const currentPriority = modPriorities.get(mod);
-                if (currentPriority === undefined || index < currentPriority) {
-                    modPriorities.set(mod, index);
-                }
-            }
-        }
-    }
-    // Group mods by attribute
-    const attributeGroups = new Map();
-    for (const mod of allMods) {
-        const parsed = parsedModsCache.get(mod);
-        if (!parsed)
-            continue;
-        const priority = modPriorities.get(mod);
-        if (priority === undefined)
-            continue;
-        const isBool = parsed.value === 'true';
-        let group = attributeGroups.get(parsed.attribute);
-        if (!group) {
-            group = [];
-            attributeGroups.set(parsed.attribute, group);
-        }
-        group.push({
-            mod,
-            isBool,
-            priority,
-        });
-    }
-    // Filter: for each attribute, if boolean has higher priority than any value, remove values
-    const modsToRemove = new Set();
-    for (const [attribute, group] of attributeGroups.entries()) {
-        // Only process attributes with more than one mod
-        if (group.length <= 1)
-            continue;
-        const boolMods = group.filter((m) => m.isBool);
-        const valueMods = group.filter((m) => !m.isBool);
-        // Only check if we have both types
-        if (boolMods.length === 0 || valueMods.length === 0)
-            continue;
-        // Check if any boolean has higher priority (lower index) than all values
-        for (const boolMod of boolMods) {
-            const hasHigherPriorityThanAllValues = valueMods.every((valueMod) => boolMod.priority < valueMod.priority);
-            if (hasHigherPriorityThanAllValues) {
-                // This boolean shadows all value mods for this attribute
-                valueMods.forEach((valueMod) => modsToRemove.add(valueMod.mod));
-            }
-        }
-    }
-    return allMods.filter((mod) => !modsToRemove.has(mod));
-}
 /**
  * Explode a style handler result into logical rules with proper mapping
  * Phase 1: Handler fan-out ($ selectors, arrays)
@@ -543,124 +324,6 @@ function convertHandlerResultToCSS(result, selectorSuffix = '') {
     const normalizedSingle = $ ? normalizeDollarSelectorSuffix(String($)) : '';
     return `&${finalSelectorSuffix}${normalizedSingle}{\n${renderedStyles}}\n`;
 }
-/**
- * Process state maps with mod combinations and generate logical rules.
- * This consolidates the common logic for handling mod combinations, priority filtering,
- * contradiction checking, and selector optimization.
- */
-function processStateMapsWithModCombinations(styleStates, lookupStyles, zones, handler, parentSuffix, allLogicalRules, cachedNormalizeStyleZones, breakpointIdx, responsiveOrigin = false) {
-    // Collect all mods from style states
-    const allMods = [];
-    const seenMods = new Set();
-    for (const style of lookupStyles) {
-        const states = styleStates[style];
-        if (!states)
-            continue;
-        for (const state of states) {
-            if (state.mods) {
-                for (const mod of state.mods) {
-                    if (!seenMods.has(mod)) {
-                        seenMods.add(mod);
-                        allMods.push(mod);
-                    }
-                }
-            }
-        }
-    }
-    if (allMods.length === 0) {
-        // No mods - just call handler with default state values
-        const stateProps = {};
-        lookupStyles.forEach((style) => {
-            const states = styleStates[style];
-            if (states && states.length > 0) {
-                stateProps[style] = states[0].value;
-            }
-        });
-        const result = handler(stateProps);
-        if (!result)
-            return;
-        const logicalRules = explodeHandlerResult(result, zones, parentSuffix, breakpointIdx, responsiveOrigin);
-        allLogicalRules.push(...logicalRules);
-        return;
-    }
-    // Parse all mods once and share the cache across all operations
-    const parsedModsCache = new Map();
-    for (const mod of allMods) {
-        parsedModsCache.set(mod, parseAttributeSelector(getModSelector(mod)));
-    }
-    // Apply priority-based filtering for same-attribute boolean vs value conflicts
-    const filteredMods = filterModsByPriority(allMods, styleStates, lookupStyles, parsedModsCache);
-    // Precompute attribute maps once for all combinations
-    const attributeMaps = buildAttributeMaps([], filteredMods, parsedModsCache);
-    // Generate combinations with conflict-aware pruning
-    const conflictChecker = createAttributeConflictChecker(attributeMaps.parsedMods);
-    const combinations = getModCombinationsIterative(filteredMods, true, conflictChecker);
-    // Process each mod combination
-    combinations.forEach((modCombination) => {
-        const stateProps = {};
-        // Find matching state for each style
-        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, filteredMods, parsedModsCache);
-        // Compute raw NOTs for contradiction check (before optimization)
-        const rawNotMods = filteredMods.filter((mod) => !modCombination.includes(mod));
-        // Check for contradictions between positive and negative selectors
-        if (hasContradiction(modCombination, rawNotMods, currentMaps.parsedMods)) {
-            return; // Skip this invalid combination
-        }
-        // Optimize NOT selectors afterwards (pure simplification)
-        const optimizedNotMods = optimizeNotSelectors(modCombination, filteredMods, currentMaps);
-        // Build the mod selector string
-        const modsSelectors = `${modCombination
-            .map(getModSelector)
-            .join('')}${optimizedNotMods
-            .map((mod) => {
-            const sel = getModSelector(mod);
-            return sel.startsWith(':not(') ? sel.slice(5, -1) : `:not(${sel})`;
-        })
-            .join('')}`;
-        // Check if any state value is responsive (array)
-        const hasResponsiveStateValues = lookupStyles.some((style) => Array.isArray(stateProps[style]));
-        if (hasResponsiveStateValues) {
-            // Fan out by breakpoint for responsive state values
-            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, bpIdx) => {
-                const res = handler(props);
-                if (!res)
-                    return;
-                const logical = explodeHandlerResult(res, zones, `${modsSelectors}${parentSuffix}`, bpIdx, true);
-                allLogicalRules.push(...logical);
-            });
-        }
-        else {
-            // Simple non-responsive state values
-            const result = handler(stateProps);
-            if (!result)
-                return;
-            const logical = explodeHandlerResult(result, zones, `${modsSelectors}${parentSuffix}`, breakpointIdx, responsiveOrigin);
-            allLogicalRules.push(...logical);
-        }
-    });
-}
 /**
  * Convert logical rules to final StyleResult format
  */
@@ -875,20 +538,53 @@ function generateLogicalRules(styles, responsive = [], parentSuffix = '') {
                         return v && typeof v === 'object' && !Array.isArray(v);
                     });
                     if (hasStateMapsAtPoint) {
-                        // Build styleStates from point props
+                        const allMods = new Set();
                         const styleStates = {};
                         lookupStyles.forEach((style) => {
                             const v = pointProps[style];
                             if (v && typeof v === 'object' && !Array.isArray(v)) {
-                                const { states } = styleStateMapToStyleStateDataList(v);
+                                const { states, mods } = styleStateMapToStyleStateDataList(v);
                                 styleStates[style] = states;
+                                mods.forEach((m) => allMods.add(m));
                             }
                             else {
                                 styleStates[style] = [{ mods: [], notMods: [], value: v }];
                             }
                         });
-                        // Use the consolidated helper for mod combination processing
-                        processStateMapsWithModCombinations(styleStates, lookupStyles, zones || [], handler, parentSuffix, allLogicalRules, cachedNormalizeStyleZones, breakpointIdx, true);
+                        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);
@@ -906,21 +602,87 @@ function generateLogicalRules(styles, responsive = [], parentSuffix = '') {
                     return value && typeof value === 'object' && !Array.isArray(value);
                 });
                 if (hasStateMaps) {
-                    // Build styleStates from styleMap
+                    // 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 } = styleStateMapToStyleStateDataList(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 }];
                         }
                     });
-                    // Use the consolidated helper for mod combination processing
-                    processStateMapsWithModCombinations(styleStates, lookupStyles, zones || [], handler, parentSuffix, allLogicalRules, cachedNormalizeStyleZones);
+                    // 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
@@ -942,15 +704,8 @@ export function renderStyles(styles, responsive = [], classNameOrSelector) {
     if (!styles) {
         return directSelector ? [] : { rules: [] };
     }
-    // Generate logical rules using shared pipeline (memoized per styles+breakpoints)
-    const stylesKey = stringifyStyles(styles);
-    const bpKey = (responsive || []).join(',');
-    const lrKey = `${stylesKey}#${bpKey}`;
-    let allLogicalRules = logicalRulesCache.get(lrKey);
-    if (!allLogicalRules) {
-        allLogicalRules = generateLogicalRules(styles, responsive);
-        logicalRulesCache.set(lrKey, allLogicalRules);
-    }
+    // 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

package/es/tasty/utils/responsive.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d09344a
+ * @cube-dev/ui-kit v0.0.0-canary-ad2c384
  * Released under the MIT license.
  */
 

package/es/tasty/utils/string.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-d09344a
+ * @cube-dev/ui-kit v0.0.0-canary-ad2c384
  * Released under the MIT license.
  */