@cube-dev/ui-kit 0.0.0-canary-9159359 → 0.0.0-canary-a6dee8e

package/es/tasty/utils/getDisplayName.js

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

package/es/tasty/utils/getModCombinations.js

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

package/es/tasty/utils/isDevEnv.js

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

package/es/tasty/utils/mergeStyles.js

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

package/es/tasty/utils/modAttrs.js

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

package/es/tasty/utils/processTokens.js

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

package/es/tasty/utils/renderStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9159359
+ * @cube-dev/ui-kit v0.0.0-canary-a6dee8e
  * Released under the MIT license.
  */
 
@@ -20,7 +20,14 @@
 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';
+// 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.
@@ -380,10 +387,11 @@ function filterModsByPriority(allMods, styleStates, lookupStyles, parsedModsCach
 }
 /**
  * Explode a style handler result into logical rules with proper mapping
- * Phase 1: Handler fan-out ($ selectors)
- * Phase 2: Rule materialization
+ * Phase 1: Handler fan-out ($ selectors, arrays)
+ * Phase 2: Responsive fan-out (breakpoint arrays)
+ * Phase 3: Rule materialization
  */
-function explodeHandlerResult(result, selectorSuffix = '') {
+function explodeHandlerResult(result, zones, selectorSuffix = '', forceBreakpointIdx, responsiveOrigin = false) {
     if (!result)
         return [];
     // Phase 1: Handler fan-out - normalize to array
@@ -393,34 +401,90 @@ function explodeHandlerResult(result, selectorSuffix = '') {
         if (!item || typeof item !== 'object')
             continue;
         const { $, ...styleProps } = item;
-        // Build declarations from style props
-        const declarations = {};
-        for (const [prop, value] of Object.entries(styleProps)) {
-            if (value != null && value !== '') {
-                declarations[prop] = String(value);
+        // 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);
             }
         }
-        if (Object.keys(declarations).length === 0)
-            continue;
-        // Phase 2: Selector fan-out - handle $ suffixes
+        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 the `$`-derived selectors.
+        // 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>*`.
+            // `.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];
-        // Create logical rules for each suffix
-        for (const suffix of suffixes) {
-            logicalRules.push({
-                selectorSuffix: suffix,
-                declarations: { ...declarations },
-            });
+        // 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;
@@ -484,7 +548,7 @@ function convertHandlerResultToCSS(result, selectorSuffix = '') {
  * This consolidates the common logic for handling mod combinations, priority filtering,
  * contradiction checking, and selector optimization.
  */
-function processStateMapsWithModCombinations(styleStates, lookupStyles, handler, parentSuffix, allLogicalRules) {
+function processStateMapsWithModCombinations(styleStates, lookupStyles, zones, handler, parentSuffix, allLogicalRules, cachedNormalizeStyleZones, breakpointIdx, responsiveOrigin = false) {
     // Collect all mods from style states
     const allMods = [];
     const seenMods = new Set();
@@ -515,7 +579,7 @@ function processStateMapsWithModCombinations(styleStates, lookupStyles, handler,
         const result = handler(stateProps);
         if (!result)
             return;
-        const logicalRules = explodeHandlerResult(result, parentSuffix);
+        const logicalRules = explodeHandlerResult(result, zones, parentSuffix, breakpointIdx, responsiveOrigin);
         allLogicalRules.push(...logicalRules);
         return;
     }
@@ -561,18 +625,46 @@ function processStateMapsWithModCombinations(styleStates, lookupStyles, handler,
             return sel.startsWith(':not(') ? sel.slice(5, -1) : `:not(${sel})`;
         })
             .join('')}`;
-        // Simple non-responsive state values
-        const result = handler(stateProps);
-        if (!result)
-            return;
-        const logical = explodeHandlerResult(result, `${modsSelectors}${parentSuffix}`);
-        allLogicalRules.push(...logical);
+        // 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
  */
-function materializeRules(logicalRules, className) {
+function materializeRules(logicalRules, className, zones) {
     return logicalRules.map((rule) => {
         // Generate base selector
         let selector = `.${className}${rule.selectorSuffix}`;
@@ -583,9 +675,16 @@ function materializeRules(logicalRules, className) {
         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,
         };
     });
 }
@@ -593,8 +692,102 @@ function materializeRules(logicalRules, className) {
  * Core style processing logic that generates logical rules
  * Used by the unified renderStyles function
  */
-function generateLogicalRules(styles, parentSuffix = '') {
+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 || {});
@@ -623,51 +816,119 @@ function generateLogicalRules(styles, parentSuffix = '') {
                     return;
                 }
                 seenHandlers.add(handler);
+                let isResponsive = false;
                 const lookupStyles = handler.__lookupStyles;
                 const filteredStyleMap = lookupStyles.reduce((map, name) => {
                     const value = currentStyles?.[name];
                     if (value !== undefined) {
-                        map[name] = value;
+                        // 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 (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;
+                            }
+                        }
+                        else {
+                            map[name] = value;
+                        }
                     }
                     return map;
                 }, {});
                 handlerQueue.push({
                     handler,
                     styleMap: filteredStyleMap,
+                    isResponsive,
                 });
             });
         });
-        // Process handlers
-        handlerQueue.forEach(({ handler, styleMap }) => {
+        // Process handlers using the three-phase approach
+        handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
             const lookupStyles = handler.__lookupStyles;
-            // 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) {
-                // Build styleStates from styleMap
-                const styleStates = {};
-                lookupStyles.forEach((style) => {
-                    const value = styleMap[style];
-                    if (value && typeof value === 'object' && !Array.isArray(value)) {
-                        const { states } = styleStateMapToStyleStateDataList(value);
-                        styleStates[style] = states;
+            if (isResponsive) {
+                // For responsive styles, resolve arrays using normalizeStyleZones
+                const valueMap = lookupStyles.reduce((map, style) => {
+                    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) => {
+                        if (valueMap != null && valueMap[style] != null) {
+                            pointProps[style] = valueMap[style][i];
+                        }
+                    });
+                    return pointProps;
+                });
+                // 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) {
+                        // Build styleStates from point props
+                        const styleStates = {};
+                        lookupStyles.forEach((style) => {
+                            const v = pointProps[style];
+                            if (v && typeof v === 'object' && !Array.isArray(v)) {
+                                const { states } = styleStateMapToStyleStateDataList(v);
+                                styleStates[style] = states;
+                            }
+                            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);
                     }
                     else {
-                        // Simple value, create a single state
-                        styleStates[style] = [{ mods: [], notMods: [], value }];
+                        const result = handler(pointProps);
+                        if (!result)
+                            return;
+                        const logicalRules = explodeHandlerResult(result, zones || [], parentSuffix, breakpointIdx, true);
+                        allLogicalRules.push(...logicalRules);
                     }
                 });
-                // Use the consolidated helper for mod combination processing
-                processStateMapsWithModCombinations(styleStates, lookupStyles, handler, parentSuffix, allLogicalRules);
             }
             else {
-                // Simple case: no state maps, call handler directly
-                const result = handler(styleMap);
-                if (result) {
-                    const logical = explodeHandlerResult(result, parentSuffix);
-                    allLogicalRules.push(...logical);
+                // 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) {
+                    // Build styleStates from styleMap
+                    const styleStates = {};
+                    lookupStyles.forEach((style) => {
+                        const value = styleMap[style];
+                        if (value && typeof value === 'object' && !Array.isArray(value)) {
+                            const { states } = styleStateMapToStyleStateDataList(value);
+                            styleStates[style] = states;
+                        }
+                        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);
+                }
+                else {
+                    // Simple case: no state maps, call handler directly
+                    const result = handler(styleMap);
+                    if (result) {
+                        const logical = explodeHandlerResult(result, zones || [], parentSuffix);
+                        allLogicalRules.push(...logical);
+                    }
                 }
             }
         });
@@ -676,18 +937,21 @@ function generateLogicalRules(styles, parentSuffix = '') {
     processStyles(styles, parentSuffix);
     return allLogicalRules;
 }
-export function renderStyles(styles, classNameOrSelector) {
+export function renderStyles(styles, responsive = [], classNameOrSelector) {
     const directSelector = !!classNameOrSelector;
     if (!styles) {
         return directSelector ? [] : { rules: [] };
     }
-    // Generate logical rules using shared pipeline (memoized per styles)
+    // Generate logical rules using shared pipeline (memoized per styles+breakpoints)
     const stylesKey = stringifyStyles(styles);
-    let allLogicalRules = logicalRulesCache.get(stylesKey);
+    const bpKey = (responsive || []).join(',');
+    const lrKey = `${stylesKey}#${bpKey}`;
+    let allLogicalRules = logicalRulesCache.get(lrKey);
     if (!allLogicalRules) {
-        allLogicalRules = generateLogicalRules(styles);
-        logicalRulesCache.set(stylesKey, allLogicalRules);
+        allLogicalRules = generateLogicalRules(styles, responsive);
+        logicalRulesCache.set(lrKey, allLogicalRules);
     }
+    const zones = pointsToZones(responsive || []);
     if (directSelector) {
         // Direct selector mode: convert logical rules directly to StyleResult format
         if (!classNameOrSelector) {
@@ -709,17 +973,24 @@ export function renderStyles(styles, classNameOrSelector) {
             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 selectorSuffix
-        const ruleKey = rule.selectorSuffix;
+        // 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
@@ -729,7 +1000,9 @@ export function renderStyles(styles, classNameOrSelector) {
             // Create a new accumulated rule
             accumulatedRules.set(ruleKey, {
                 selectorSuffix: rule.selectorSuffix,
+                breakpointIdx: rule.breakpointIdx,
                 declarations: { ...rule.declarations },
+                responsiveSource: rule.responsiveSource,
             });
         }
     }
@@ -739,9 +1012,16 @@ export function renderStyles(styles, classNameOrSelector) {
             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
             };
         });
@@ -750,7 +1030,7 @@ export function renderStyles(styles, classNameOrSelector) {
         };
     }
     // Materialize the accumulated logical rules into final format
-    const finalRulesRaw = materializeRules(Array.from(accumulatedRules.values()), classNameOrSelector);
+    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) => {