@cube-dev/ui-kit 0.75.0 → 0.76.0

package/es/tasty/injector/sheet-manager.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.75.0
+ * @cube-dev/ui-kit v0.76.0
  * Released under the MIT license.
  */
 
@@ -18,11 +18,10 @@ export class SheetManager {
     getRegistry(root) {
         let registry = this.rootRegistries.get(root);
         if (!registry) {
-            const metrics = this.config.collectMetrics
+            const metrics = this.config.devMode
                 ? {
                     hits: 0,
                     misses: 0,
-                    unusedHits: 0,
                     bulkCleanups: 0,
                     totalInsertions: 0,
                     totalUnused: 0,
@@ -35,15 +34,16 @@ export class SheetManager {
                 sheets: [],
                 refCounts: new Map(),
                 rules: new Map(),
-                unusedRules: new Map(),
+                cacheKeyToClassName: new Map(),
                 ruleTextSet: new Set(),
                 bulkCleanupTimeout: null,
+                cleanupCheckTimeout: null,
                 metrics,
                 classCounter: 0,
                 keyframesCache: new Map(),
-                unusedKeyframes: new Map(),
                 keyframesCounter: 0,
                 injectedProperties: new Set(),
+                globalRules: new Map(),
             };
             this.rootRegistries.set(root, registry);
         }
@@ -100,7 +100,6 @@ export class SheetManager {
         if (!targetSheet) {
             targetSheet = this.createSheet(registry, root);
         }
-        const ruleIndex = this.findAvailableRuleIndex(targetSheet);
         const sheetIndex = registry.sheets.indexOf(targetSheet);
         try {
             // Group rules by selector and at-rules to combine declarations
@@ -136,7 +135,9 @@ export class SheetManager {
             });
             // Insert grouped rules
             const insertedRuleTexts = [];
-            let currentRuleIndex = ruleIndex;
+            const insertedIndices = []; // Track exact indices
+            // Calculate rule index atomically right before insertion to prevent race conditions
+            let currentRuleIndex = this.findAvailableRuleIndex(targetSheet);
             let firstInsertedIndex = null;
             let lastInsertedIndex = null;
             for (const rule of groupedRules) {
@@ -151,8 +152,10 @@ export class SheetManager {
                 const styleElement = targetSheet.sheet;
                 const styleSheet = styleElement.sheet;
                 if (styleSheet && !this.config.forceTextInjection) {
+                    // Calculate index atomically for each rule to prevent concurrent insertion races
                     const maxIndex = styleSheet.cssRules.length;
-                    const safeIndex = Math.min(Math.max(0, currentRuleIndex), maxIndex);
+                    const atomicRuleIndex = this.findAvailableRuleIndex(targetSheet);
+                    const safeIndex = Math.min(Math.max(0, atomicRuleIndex), maxIndex);
                     // Helper: split comma-separated selectors safely (ignores commas inside [] () " ')
                     const splitSelectorsSafely = (selectorList) => {
                         const parts = [];
@@ -199,6 +202,9 @@ export class SheetManager {
                     };
                     try {
                         styleSheet.insertRule(fullRule, safeIndex);
+                        // Update sheet ruleCount immediately to prevent concurrent race conditions
+                        targetSheet.ruleCount++;
+                        insertedIndices.push(safeIndex); // Track this index
                         if (firstInsertedIndex == null)
                             firstInsertedIndex = safeIndex;
                         lastInsertedIndex = safeIndex;
@@ -217,9 +223,14 @@ export class SheetManager {
                                     singleRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, singleBase);
                                 }
                                 try {
+                                    // Calculate index atomically for each individual selector insertion
                                     const maxIdx = styleSheet.cssRules.length;
-                                    const idx = Math.min(Math.max(0, currentRuleIndex), maxIdx);
+                                    const atomicIdx = this.findAvailableRuleIndex(targetSheet);
+                                    const idx = Math.min(Math.max(0, atomicIdx), maxIdx);
                                     styleSheet.insertRule(singleRule, idx);
+                                    // Update sheet ruleCount immediately
+                                    targetSheet.ruleCount++;
+                                    insertedIndices.push(idx); // Track this index
                                     if (firstInsertedIndex == null)
                                         firstInsertedIndex = idx;
                                     lastInsertedIndex = idx;
@@ -242,12 +253,17 @@ export class SheetManager {
                 }
                 else {
                     // Use textContent (either as fallback or when forceTextInjection is enabled)
+                    // Calculate index atomically for textContent insertion too
+                    const atomicRuleIndex = this.findAvailableRuleIndex(targetSheet);
                     styleElement.textContent =
                         (styleElement.textContent || '') + '\n' + fullRule;
+                    // Update sheet ruleCount immediately
+                    targetSheet.ruleCount++;
+                    insertedIndices.push(atomicRuleIndex); // Track this index
                     if (firstInsertedIndex == null)
-                        firstInsertedIndex = currentRuleIndex;
-                    lastInsertedIndex = currentRuleIndex;
-                    currentRuleIndex++;
+                        firstInsertedIndex = atomicRuleIndex;
+                    lastInsertedIndex = atomicRuleIndex;
+                    currentRuleIndex = atomicRuleIndex + 1;
                 }
                 // CRITICAL DEBUG: Verify the style element is in DOM only if there are issues and we're not using forceTextInjection
                 if (!styleElement.parentNode && !this.config.forceTextInjection) {
@@ -256,8 +272,8 @@ export class SheetManager {
                         ruleIndex: currentRuleIndex,
                     });
                 }
-                // Conditionally store cssText and track for debug
-                if (this.config.debugMode) {
+                // Dev-only: store cssText for debugging tools
+                if (this.config.devMode) {
                     insertedRuleTexts.push(fullRule);
                     try {
                         registry.ruleTextSet.add(fullRule);
@@ -268,17 +284,15 @@ export class SheetManager {
                 }
                 // currentRuleIndex already adjusted above
             }
-            // Update sheet info based on the number of rules inserted
-            const finalRuleIndex = currentRuleIndex - 1;
-            if (finalRuleIndex >= targetSheet.ruleCount) {
-                targetSheet.ruleCount = finalRuleIndex + 1;
-            }
+            // Sheet ruleCount is now updated immediately after each insertion
+            // No need for deferred update logic
             return {
                 className,
-                ruleIndex: firstInsertedIndex ?? ruleIndex,
+                ruleIndex: firstInsertedIndex ?? 0,
                 sheetIndex,
-                cssText: this.config.debugMode ? insertedRuleTexts : [],
-                endRuleIndex: lastInsertedIndex ?? finalRuleIndex,
+                cssText: this.config.devMode ? insertedRuleTexts : undefined,
+                endRuleIndex: lastInsertedIndex ?? firstInsertedIndex ?? 0,
+                indices: insertedIndices.length > 0 ? insertedIndices : undefined,
             };
         }
         catch (error) {
@@ -292,9 +306,103 @@ export class SheetManager {
     /**
      * Insert global CSS rules
      */
-    insertGlobalRule(registry, flattenedRules, className, root) {
-        // For now, global rules are handled the same way as regular rules
-        return this.insertRule(registry, flattenedRules, className, root);
+    insertGlobalRule(registry, flattenedRules, globalKey, root) {
+        // Insert the rule using the same mechanism as regular rules
+        const ruleInfo = this.insertRule(registry, flattenedRules, globalKey, root);
+        // Track global rules for index adjustment
+        if (ruleInfo) {
+            registry.globalRules.set(globalKey, ruleInfo);
+        }
+        return ruleInfo;
+    }
+    /**
+     * Delete a global CSS rule by key
+     */
+    deleteGlobalRule(registry, globalKey) {
+        const ruleInfo = registry.globalRules.get(globalKey);
+        if (!ruleInfo) {
+            return;
+        }
+        // Delete the rule using the standard deletion mechanism
+        this.deleteRule(registry, ruleInfo);
+        // Remove from global rules tracking
+        registry.globalRules.delete(globalKey);
+    }
+    /**
+     * Adjust rule indices after deletion to account for shifting
+     */
+    adjustIndicesAfterDeletion(registry, sheetIndex, startIdx, endIdx, deleteCount, deletedRuleInfo, deletedIndices) {
+        try {
+            // Helper function to adjust a single RuleInfo
+            const adjustRuleInfo = (info) => {
+                if (info === deletedRuleInfo)
+                    return; // Skip the deleted rule
+                if (info.sheetIndex !== sheetIndex)
+                    return; // Different sheet
+                // If info has exact indices, adjust them
+                if (info.indices && info.indices.length > 0 && deletedIndices) {
+                    // Sort deleted indices for efficient binary search
+                    const sortedDeleted = [...deletedIndices].sort((a, b) => a - b);
+                    // Adjust each index based on how many deleted indices are before it
+                    info.indices = info.indices.map((idx) => {
+                        // Count how many deleted indices are less than this index
+                        let shift = 0;
+                        for (const delIdx of sortedDeleted) {
+                            if (delIdx < idx)
+                                shift++;
+                            else
+                                break;
+                        }
+                        return idx - shift;
+                    });
+                    // Update ruleIndex and endRuleIndex to match adjusted indices
+                    if (info.indices.length > 0) {
+                        info.ruleIndex = Math.min(...info.indices);
+                        info.endRuleIndex = Math.max(...info.indices);
+                    }
+                }
+                else {
+                    // Fallback: adjust using range logic
+                    const infoEnd = info.endRuleIndex ?? info.ruleIndex;
+                    if (info.ruleIndex > endIdx) {
+                        // Rule is after deleted range - shift left
+                        info.ruleIndex = Math.max(0, info.ruleIndex - deleteCount);
+                        if (info.endRuleIndex != null) {
+                            info.endRuleIndex = Math.max(info.ruleIndex, infoEnd - deleteCount);
+                        }
+                    }
+                    else if (info.ruleIndex <= endIdx && infoEnd >= startIdx) {
+                        // Rule overlaps with deleted range (should not normally happen)
+                        // Clamp endRuleIndex to avoid pointing into deleted region
+                        if (info.endRuleIndex != null) {
+                            const newEnd = Math.max(info.ruleIndex, startIdx - 1);
+                            info.endRuleIndex = Math.max(info.ruleIndex, newEnd);
+                        }
+                    }
+                }
+            };
+            // Adjust active rules
+            for (const info of registry.rules.values()) {
+                adjustRuleInfo(info);
+            }
+            // Adjust global rules
+            for (const info of registry.globalRules.values()) {
+                adjustRuleInfo(info);
+            }
+            // No need to separately adjust unused rules since they're part of the rules Map
+            // Adjust keyframes indices stored in cache
+            for (const entry of registry.keyframesCache.values()) {
+                const ki = entry.info;
+                if (ki.sheetIndex !== sheetIndex)
+                    continue;
+                if (ki.ruleIndex > endIdx) {
+                    ki.ruleIndex = Math.max(0, ki.ruleIndex - deleteCount);
+                }
+            }
+        }
+        catch (_) {
+            // Defensive: do not let index adjustments crash cleanup
+        }
     }
     /**
      * Delete a CSS rule from the sheet
@@ -305,45 +413,57 @@ export class SheetManager {
             return;
         }
         try {
-            const texts = Array.isArray(ruleInfo.cssText)
+            const texts = this.config.devMode && Array.isArray(ruleInfo.cssText)
                 ? ruleInfo.cssText.slice()
                 : [];
             const styleElement = sheet.sheet;
             const styleSheet = styleElement.sheet;
             if (styleSheet) {
                 const rules = styleSheet.cssRules;
-                // Prefer index-based deletion when possible
-                const startIdx = Math.max(0, ruleInfo.ruleIndex);
-                const endIdx = Math.min(rules.length - 1, Number.isFinite(ruleInfo.endRuleIndex)
-                    ? ruleInfo.endRuleIndex
-                    : startIdx - 1);
-                if (Number.isFinite(startIdx) && endIdx >= startIdx) {
-                    for (let idx = endIdx; idx >= startIdx; idx--) {
-                        if (idx < 0 || idx >= styleSheet.cssRules.length)
-                            continue;
-                        styleSheet.deleteRule(idx);
-                    }
-                    sheet.ruleCount = Math.max(0, sheet.ruleCount - (endIdx - startIdx + 1));
-                }
-                else if (this.config.debugMode && texts.length) {
-                    // Fallback: locate each rule by exact cssText and delete (debug mode only)
-                    for (const text of texts) {
-                        let idx = -1;
-                        for (let i = styleSheet.cssRules.length - 1; i >= 0; i--) {
-                            if (styleSheet.cssRules[i].cssText === text) {
-                                idx = i;
-                                break;
+                // Use exact indices if available, otherwise fall back to range
+                if (ruleInfo.indices && ruleInfo.indices.length > 0) {
+                    // NEW: Delete using exact tracked indices
+                    const sortedIndices = [...ruleInfo.indices].sort((a, b) => b - a); // Sort descending
+                    const deletedIndices = [];
+                    for (const idx of sortedIndices) {
+                        if (idx >= 0 && idx < styleSheet.cssRules.length) {
+                            try {
+                                styleSheet.deleteRule(idx);
+                                deletedIndices.push(idx);
+                            }
+                            catch (e) {
+                                console.warn(`Failed to delete rule at index ${idx}:`, e);
                             }
                         }
-                        if (idx >= 0) {
+                    }
+                    sheet.ruleCount = Math.max(0, sheet.ruleCount - deletedIndices.length);
+                    // Adjust indices for all other rules
+                    if (deletedIndices.length > 0) {
+                        this.adjustIndicesAfterDeletion(registry, ruleInfo.sheetIndex, Math.min(...deletedIndices), Math.max(...deletedIndices), deletedIndices.length, ruleInfo, deletedIndices);
+                    }
+                }
+                else {
+                    // FALLBACK: Use old range-based deletion for backwards compatibility
+                    const startIdx = Math.max(0, ruleInfo.ruleIndex);
+                    const endIdx = Math.min(rules.length - 1, Number.isFinite(ruleInfo.endRuleIndex)
+                        ? ruleInfo.endRuleIndex
+                        : startIdx);
+                    if (Number.isFinite(startIdx) && endIdx >= startIdx) {
+                        const deleteCount = endIdx - startIdx + 1;
+                        for (let idx = endIdx; idx >= startIdx; idx--) {
+                            if (idx < 0 || idx >= styleSheet.cssRules.length)
+                                continue;
                             styleSheet.deleteRule(idx);
                         }
+                        sheet.ruleCount = Math.max(0, sheet.ruleCount - deleteCount);
+                        // After deletion, all subsequent rule indices shift left by deleteCount.
+                        // We must adjust stored indices for all other RuleInfo within the same sheet.
+                        this.adjustIndicesAfterDeletion(registry, ruleInfo.sheetIndex, startIdx, endIdx, deleteCount, ruleInfo);
                     }
-                    sheet.ruleCount = Math.max(0, sheet.ruleCount - texts.length);
                 }
             }
-            // Remove texts from validation set
-            if (this.config.debugMode) {
+            // Dev-only: remove cssText entries from validation set
+            if (this.config.devMode && texts.length) {
                 try {
                     for (const text of texts) {
                         registry.ruleTextSet.delete(text);
@@ -384,52 +504,20 @@ export class SheetManager {
         return sheet.ruleCount;
     }
     /**
-     * Mark a ruleset as unused but keep it in the stylesheet
-     */
-    markAsUnused(registry, className) {
-        const ruleInfo = registry.rules.get(className);
-        if (!ruleInfo)
-            return;
-        // Mark as unused (but keep in registry.rules)
-        const unusedInfo = {
-            ruleInfo,
-            markedUnusedAt: Date.now(),
-        };
-        registry.unusedRules.set(className, unusedInfo);
-        registry.refCounts.delete(className);
-        // Update metrics
-        if (registry.metrics) {
-            registry.metrics.totalUnused++;
-        }
-        // Schedule bulk cleanup if threshold exceeded
-        const threshold = this.config.unusedStylesThreshold || 500;
-        if (registry.unusedRules.size >= threshold) {
-            this.scheduleBulkCleanup(registry);
-        }
-    }
-    /**
-     * Restore a ruleset from unused styles
-     */
-    restoreFromUnused(registry, className) {
-        const unusedInfo = registry.unusedRules.get(className);
-        if (!unusedInfo)
-            return null;
-        // Remove from unused rules (rules stays in registry.rules)
-        registry.unusedRules.delete(className);
-        registry.refCounts.set(className, 1);
-        // Update metrics
-        if (registry.metrics) {
-            registry.metrics.unusedHits++;
-        }
-        return unusedInfo.ruleInfo;
-    }
-    /**
-     * Schedule bulk cleanup of all unused styles
+     * Schedule bulk cleanup of all unused styles (non-stacking)
      */
     scheduleBulkCleanup(registry) {
-        // Don't schedule if already scheduled
-        if (registry.bulkCleanupTimeout)
-            return;
+        // Clear any existing timeout to prevent stacking
+        if (registry.bulkCleanupTimeout) {
+            if (this.config.idleCleanup &&
+                typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(registry.bulkCleanupTimeout);
+            }
+            else {
+                clearTimeout(registry.bulkCleanupTimeout);
+            }
+            registry.bulkCleanupTimeout = null;
+        }
         const performCleanup = () => {
             this.performBulkCleanup(registry);
             registry.bulkCleanupTimeout = null;
@@ -442,31 +530,54 @@ export class SheetManager {
             registry.bulkCleanupTimeout = setTimeout(performCleanup, delay);
         }
     }
+    /**
+     * Force cleanup of unused styles
+     */
+    forceCleanup(registry) {
+        this.performBulkCleanup(registry, true);
+    }
     /**
      * Perform bulk cleanup of all unused styles
      */
-    performBulkCleanup(registry) {
-        if (registry.unusedRules.size === 0)
-            return;
+    performBulkCleanup(registry, cleanupAll = false) {
         const cleanupStartTime = Date.now();
-        const classNamesToCleanup = Array.from(registry.unusedRules.keys());
+        // Calculate unused rules dynamically: rules that have refCount = 0
+        const unusedClassNames = Array.from(registry.refCounts.entries())
+            .filter(([, refCount]) => refCount === 0)
+            .map(([className]) => className);
+        if (unusedClassNames.length === 0)
+            return;
+        // Build candidates list - no age filtering needed
+        const candidates = unusedClassNames.map((className) => {
+            const ruleInfo = registry.rules.get(className); // We know it exists
+            return {
+                className,
+                ruleInfo,
+            };
+        });
+        if (candidates.length === 0)
+            return;
+        // Limit deletion scope per run (batch ratio) unless cleanupAll is true
+        let selected = candidates;
+        if (!cleanupAll) {
+            const ratio = this.config.bulkCleanupBatchRatio ?? 0.5;
+            const limit = Math.max(1, Math.floor(candidates.length * Math.min(1, Math.max(0, ratio))));
+            selected = candidates.slice(0, limit);
+        }
         let cleanedUpCount = 0;
         let totalCssSize = 0;
         let totalRulesDeleted = 0;
         // Group by sheet for efficient deletion
         const rulesBySheet = new Map();
         // Calculate CSS size before deletion and group rules
-        for (const className of classNamesToCleanup) {
-            const unusedInfo = registry.unusedRules.get(className);
-            if (!unusedInfo)
-                continue;
-            const ruleInfo = unusedInfo.ruleInfo;
+        for (const { className, ruleInfo } of selected) {
             const sheetIndex = ruleInfo.sheetIndex;
-            // Calculate CSS size for this rule
-            const cssSize = ruleInfo.cssText.reduce((total, css) => total + css.length, 0);
-            totalCssSize += cssSize;
-            // Count number of rules (based on cssText array length)
-            totalRulesDeleted += ruleInfo.cssText.length;
+            // Dev-only metrics: estimate CSS size and rule count if available
+            if (this.config.devMode && Array.isArray(ruleInfo.cssText)) {
+                const cssSize = ruleInfo.cssText.reduce((total, css) => total + css.length, 0);
+                totalCssSize += cssSize;
+                totalRulesDeleted += ruleInfo.cssText.length;
+            }
             if (!rulesBySheet.has(sheetIndex)) {
                 rulesBySheet.set(sheetIndex, []);
             }
@@ -477,26 +588,53 @@ export class SheetManager {
             // Sort by rule index in descending order for safe deletion
             rulesInSheet.sort((a, b) => b.ruleInfo.ruleIndex - a.ruleInfo.ruleIndex);
             for (const { className, ruleInfo } of rulesInSheet) {
-                // SAFETY: Re-check that the rule is still unused at deletion time.
-                // Between scheduling and execution a class may have been restored
-                // (refCounts set and removed from unusedRules). Skip such entries.
-                if (!registry.unusedRules.has(className)) {
-                    continue;
-                }
-                if (registry.refCounts.has(className)) {
+                // SAFETY 1: Double-check refCount is still 0
+                const currentRefCount = registry.refCounts.get(className) || 0;
+                if (currentRefCount > 0) {
                     // Class became active again; do not delete
                     continue;
                 }
-                // Ensure we delete the same RuleInfo we marked earlier to avoid
-                // accidentally deleting updated rules for the same class.
+                // SAFETY 2: Ensure rule wasn't replaced
+                // Between scheduling and execution a class may have been replaced with a new RuleInfo
                 const currentInfo = registry.rules.get(className);
-                if (currentInfo && currentInfo !== ruleInfo) {
+                if (currentInfo !== ruleInfo) {
                     // Rule was replaced; skip deletion of the old reference
                     continue;
                 }
+                // SAFETY 3: Verify the sheet element is still valid and accessible
+                const sheetInfo = registry.sheets[ruleInfo.sheetIndex];
+                if (!sheetInfo || !sheetInfo.sheet) {
+                    // Sheet was removed or corrupted; skip this rule
+                    continue;
+                }
+                // SAFETY 4: Verify the stylesheet itself is accessible
+                const styleSheet = sheetInfo.sheet.sheet;
+                if (!styleSheet) {
+                    // Stylesheet not available; skip this rule
+                    continue;
+                }
+                // SAFETY 5: Verify rule index is still within valid range
+                const maxRuleIndex = styleSheet.cssRules.length - 1;
+                const startIdx = ruleInfo.ruleIndex;
+                const endIdx = ruleInfo.endRuleIndex ?? ruleInfo.ruleIndex;
+                if (startIdx < 0 || endIdx > maxRuleIndex || startIdx > endIdx) {
+                    // Rule indices are out of bounds; skip this rule
+                    continue;
+                }
+                // All safety checks passed - proceed with deletion
                 this.deleteRule(registry, ruleInfo);
                 registry.rules.delete(className);
-                registry.unusedRules.delete(className);
+                registry.refCounts.delete(className);
+                // Clean up cache key mappings that point to this className
+                const keysToDelete = [];
+                for (const [key, mappedClassName,] of registry.cacheKeyToClassName.entries()) {
+                    if (mappedClassName === className) {
+                        keysToDelete.push(key);
+                    }
+                }
+                for (const key of keysToDelete) {
+                    registry.cacheKeyToClassName.delete(key);
+                }
                 cleanedUpCount++;
             }
         }
@@ -513,13 +651,6 @@ export class SheetManager {
             });
         }
     }
-    /**
-     * Process the deletion queue for cleanup
-     */
-    processCleanupQueue(registry) {
-        // This method is kept for compatibility but the logic has changed
-        // We no longer use a deletion queue, instead marking styles as unused immediately
-    }
     /**
      * Get total number of rules across all sheets
      */
@@ -552,7 +683,14 @@ export class SheetManager {
      * Get cache performance metrics
      */
     getMetrics(registry) {
-        return registry.metrics || null;
+        if (!registry.metrics)
+            return null;
+        // Calculate unusedHits on demand - only count CSS rules since keyframes are disposed immediately
+        const unusedRulesCount = Array.from(registry.refCounts.values()).filter((count) => count === 0).length;
+        return {
+            ...registry.metrics,
+            unusedHits: unusedRulesCount,
+        };
     }
     /**
      * Reset cache performance metrics
@@ -562,7 +700,6 @@ export class SheetManager {
             registry.metrics = {
                 hits: 0,
                 misses: 0,
-                unusedHits: 0,
                 bulkCleanups: 0,
                 totalInsertions: 0,
                 totalUnused: 0,
@@ -674,7 +811,7 @@ export class SheetManager {
                 name,
                 ruleIndex,
                 sheetIndex,
-                cssText: fullRule,
+                cssText: this.config.devMode ? fullRule : undefined,
             };
         }
         catch (error) {
@@ -705,12 +842,28 @@ export class SheetManager {
         }
     }
     /**
-     * Mark keyframes as unused
+     * Schedule async cleanup check (non-stacking)
+     */
+    checkCleanupNeeded(registry) {
+        // Clear any existing check timeout to prevent stacking
+        if (registry.cleanupCheckTimeout) {
+            clearTimeout(registry.cleanupCheckTimeout);
+            registry.cleanupCheckTimeout = null;
+        }
+        // Schedule the actual check with setTimeout(..., 0)
+        registry.cleanupCheckTimeout = setTimeout(() => {
+            this.performCleanupCheck(registry);
+            registry.cleanupCheckTimeout = null;
+        }, 0);
+    }
+    /**
+     * Perform the actual cleanup check (called asynchronously)
      */
-    markKeyframesAsUnused(registry, name) {
-        // Implementation similar to markAsUnused but for keyframes
+    performCleanupCheck(registry) {
+        // Count unused rules (refCount = 0) - keyframes are disposed immediately
+        const unusedRulesCount = Array.from(registry.refCounts.values()).filter((count) => count === 0).length;
         const threshold = this.config.unusedStylesThreshold || 500;
-        if (registry.unusedKeyframes.size >= threshold) {
+        if (unusedRulesCount >= threshold) {
             this.scheduleBulkCleanup(registry);
         }
     }
@@ -733,6 +886,11 @@ export class SheetManager {
             }
             registry.bulkCleanupTimeout = null;
         }
+        // Cancel any scheduled cleanup check
+        if (registry.cleanupCheckTimeout) {
+            clearTimeout(registry.cleanupCheckTimeout);
+            registry.cleanupCheckTimeout = null;
+        }
         // Remove all sheets
         for (const sheet of registry.sheets) {
             try {

package/es/tasty/injector/types.js

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

package/es/tasty/parser/classify.js

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

package/es/tasty/parser/const.js

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

package/es/tasty/parser/lru.js

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