@cube-dev/ui-kit 0.74.3 → 0.75.0

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

@@ -0,0 +1,754 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.75.0
+ * Released under the MIT license.
+ */
+
+import { createStyle, STYLE_HANDLER_MAP } from '../styles';
+export class SheetManager {
+    rootRegistries = new WeakMap();
+    config;
+    constructor(config) {
+        this.config = config;
+    }
+    /**
+     * Get or create registry for a root (Document or ShadowRoot)
+     */
+    getRegistry(root) {
+        let registry = this.rootRegistries.get(root);
+        if (!registry) {
+            const metrics = this.config.collectMetrics
+                ? {
+                    hits: 0,
+                    misses: 0,
+                    unusedHits: 0,
+                    bulkCleanups: 0,
+                    totalInsertions: 0,
+                    totalUnused: 0,
+                    stylesCleanedUp: 0,
+                    cleanupHistory: [],
+                    startTime: Date.now(),
+                }
+                : undefined;
+            registry = {
+                sheets: [],
+                refCounts: new Map(),
+                rules: new Map(),
+                unusedRules: new Map(),
+                ruleTextSet: new Set(),
+                bulkCleanupTimeout: null,
+                metrics,
+                classCounter: 0,
+                keyframesCache: new Map(),
+                unusedKeyframes: new Map(),
+                keyframesCounter: 0,
+                injectedProperties: new Set(),
+            };
+            this.rootRegistries.set(root, registry);
+        }
+        return registry;
+    }
+    /**
+     * Create a new stylesheet for the registry
+     */
+    createSheet(registry, root) {
+        const sheet = this.createStyleElement(root);
+        const sheetInfo = {
+            sheet,
+            ruleCount: 0,
+            holes: [],
+        };
+        registry.sheets.push(sheetInfo);
+        return sheetInfo;
+    }
+    /**
+     * Create a style element and append to document
+     */
+    createStyleElement(root) {
+        const style = root.createElement?.('style') ||
+            document.createElement('style');
+        if (this.config.nonce) {
+            style.nonce = this.config.nonce;
+        }
+        style.setAttribute('data-tasty', '');
+        // Append to head or shadow root
+        if ('head' in root && root.head) {
+            root.head.appendChild(style);
+        }
+        else if ('appendChild' in root) {
+            root.appendChild(style);
+        }
+        else {
+            document.head.appendChild(style);
+        }
+        // Verify it was actually added - log only if there's a problem and we're not using forceTextInjection
+        if (!style.isConnected && !this.config.forceTextInjection) {
+            console.error('SheetManager: Style element failed to connect to DOM!', {
+                parentNode: style.parentNode?.nodeName,
+                isConnected: style.isConnected,
+            });
+        }
+        return style;
+    }
+    /**
+     * Insert CSS rules as a single block
+     */
+    insertRule(registry, flattenedRules, className, root) {
+        // Find or create a sheet with available space
+        let targetSheet = this.findAvailableSheet(registry, root);
+        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
+            const groupedRules = [];
+            const groupMap = new Map();
+            const atKey = (at) => (at && at.length ? at.join('|') : '');
+            flattenedRules.forEach((r) => {
+                const key = `${atKey(r.atRules)}||${r.selector}`;
+                const existing = groupMap.get(key);
+                if (existing) {
+                    // Append declarations, preserving order
+                    existing.declarations = existing.declarations
+                        ? `${existing.declarations} ${r.declarations}`
+                        : r.declarations;
+                }
+                else {
+                    groupMap.set(key, {
+                        idx: groupedRules.length,
+                        selector: r.selector,
+                        atRules: r.atRules,
+                        declarations: r.declarations,
+                    });
+                    groupedRules.push({ ...r });
+                }
+            });
+            // Normalize groupedRules from map (with merged declarations)
+            groupMap.forEach((val) => {
+                groupedRules[val.idx] = {
+                    selector: val.selector,
+                    atRules: val.atRules,
+                    declarations: val.declarations,
+                };
+            });
+            // Insert grouped rules
+            const insertedRuleTexts = [];
+            let currentRuleIndex = ruleIndex;
+            let firstInsertedIndex = null;
+            let lastInsertedIndex = null;
+            for (const rule of groupedRules) {
+                const declarations = rule.declarations;
+                const baseRule = `${rule.selector} { ${declarations} }`;
+                // Wrap with at-rules if present
+                let fullRule = baseRule;
+                if (rule.atRules && rule.atRules.length > 0) {
+                    fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
+                }
+                // Insert individual rule into style element
+                const styleElement = targetSheet.sheet;
+                const styleSheet = styleElement.sheet;
+                if (styleSheet && !this.config.forceTextInjection) {
+                    const maxIndex = styleSheet.cssRules.length;
+                    const safeIndex = Math.min(Math.max(0, currentRuleIndex), maxIndex);
+                    // Helper: split comma-separated selectors safely (ignores commas inside [] () " ')
+                    const splitSelectorsSafely = (selectorList) => {
+                        const parts = [];
+                        let buf = '';
+                        let depthSq = 0; // [] depth
+                        let depthPar = 0; // () depth
+                        let inStr = '';
+                        for (let i = 0; i < selectorList.length; i++) {
+                            const ch = selectorList[i];
+                            if (inStr) {
+                                if (ch === inStr && selectorList[i - 1] !== '\\') {
+                                    inStr = '';
+                                }
+                                buf += ch;
+                                continue;
+                            }
+                            if (ch === '"' || ch === "'") {
+                                inStr = ch;
+                                buf += ch;
+                                continue;
+                            }
+                            if (ch === '[')
+                                depthSq++;
+                            else if (ch === ']')
+                                depthSq = Math.max(0, depthSq - 1);
+                            else if (ch === '(')
+                                depthPar++;
+                            else if (ch === ')')
+                                depthPar = Math.max(0, depthPar - 1);
+                            if (ch === ',' && depthSq === 0 && depthPar === 0) {
+                                const part = buf.trim();
+                                if (part)
+                                    parts.push(part);
+                                buf = '';
+                            }
+                            else {
+                                buf += ch;
+                            }
+                        }
+                        const tail = buf.trim();
+                        if (tail)
+                            parts.push(tail);
+                        return parts;
+                    };
+                    try {
+                        styleSheet.insertRule(fullRule, safeIndex);
+                        if (firstInsertedIndex == null)
+                            firstInsertedIndex = safeIndex;
+                        lastInsertedIndex = safeIndex;
+                        currentRuleIndex = safeIndex + 1;
+                    }
+                    catch (e) {
+                        // If the browser rejects the combined selector (e.g., vendor pseudo-elements),
+                        // try to split and insert each selector independently. Skip unsupported ones.
+                        const selectors = splitSelectorsSafely(rule.selector);
+                        if (selectors.length > 1) {
+                            let anyInserted = false;
+                            for (const sel of selectors) {
+                                const singleBase = `${sel} { ${declarations} }`;
+                                let singleRule = singleBase;
+                                if (rule.atRules && rule.atRules.length > 0) {
+                                    singleRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, singleBase);
+                                }
+                                try {
+                                    const maxIdx = styleSheet.cssRules.length;
+                                    const idx = Math.min(Math.max(0, currentRuleIndex), maxIdx);
+                                    styleSheet.insertRule(singleRule, idx);
+                                    if (firstInsertedIndex == null)
+                                        firstInsertedIndex = idx;
+                                    lastInsertedIndex = idx;
+                                    currentRuleIndex = idx + 1;
+                                    anyInserted = true;
+                                }
+                                catch (_) {
+                                    // Skip unsupported selector in this engine (e.g., ::-moz-selection in Blink)
+                                }
+                            }
+                            // If none inserted, continue without throwing to avoid aborting the whole batch
+                            if (!anyInserted) {
+                                // noop: all selectors invalid here; safe to skip
+                            }
+                        }
+                        else {
+                            // Single selector failed — skip it silently (likely unsupported in this engine)
+                        }
+                    }
+                }
+                else {
+                    // Use textContent (either as fallback or when forceTextInjection is enabled)
+                    styleElement.textContent =
+                        (styleElement.textContent || '') + '\n' + fullRule;
+                    if (firstInsertedIndex == null)
+                        firstInsertedIndex = currentRuleIndex;
+                    lastInsertedIndex = currentRuleIndex;
+                    currentRuleIndex++;
+                }
+                // 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) {
+                    console.error('SheetManager: Style element is NOT in DOM! This is the problem!', {
+                        className,
+                        ruleIndex: currentRuleIndex,
+                    });
+                }
+                // Conditionally store cssText and track for debug
+                if (this.config.debugMode) {
+                    insertedRuleTexts.push(fullRule);
+                    try {
+                        registry.ruleTextSet.add(fullRule);
+                    }
+                    catch (_) {
+                        // noop: defensive in case ruleTextSet is unavailable
+                    }
+                }
+                // 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;
+            }
+            return {
+                className,
+                ruleIndex: firstInsertedIndex ?? ruleIndex,
+                sheetIndex,
+                cssText: this.config.debugMode ? insertedRuleTexts : [],
+                endRuleIndex: lastInsertedIndex ?? finalRuleIndex,
+            };
+        }
+        catch (error) {
+            console.warn('Failed to insert CSS rules:', error, {
+                flattenedRules,
+                className,
+            });
+            return null;
+        }
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Delete a CSS rule from the sheet
+     */
+    deleteRule(registry, ruleInfo) {
+        const sheet = registry.sheets[ruleInfo.sheetIndex];
+        if (!sheet) {
+            return;
+        }
+        try {
+            const texts = 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;
+                            }
+                        }
+                        if (idx >= 0) {
+                            styleSheet.deleteRule(idx);
+                        }
+                    }
+                    sheet.ruleCount = Math.max(0, sheet.ruleCount - texts.length);
+                }
+            }
+            // Remove texts from validation set
+            if (this.config.debugMode) {
+                try {
+                    for (const text of texts) {
+                        registry.ruleTextSet.delete(text);
+                    }
+                }
+                catch (_) {
+                    // noop
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to delete CSS rule:', error);
+        }
+    }
+    /**
+     * Find a sheet with available space or return null
+     */
+    findAvailableSheet(registry, root) {
+        const maxRules = this.config.maxRulesPerSheet;
+        if (!maxRules) {
+            // No limit, use the last sheet if it exists
+            const lastSheet = registry.sheets[registry.sheets.length - 1];
+            return lastSheet || null;
+        }
+        // Find sheet with space
+        for (const sheet of registry.sheets) {
+            if (sheet.ruleCount < maxRules) {
+                return sheet;
+            }
+        }
+        return null; // No available sheet found
+    }
+    /**
+     * Find an available rule index in the sheet
+     */
+    findAvailableRuleIndex(sheet) {
+        // Always append to the end - CSS doesn't have holes
+        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
+     */
+    scheduleBulkCleanup(registry) {
+        // Don't schedule if already scheduled
+        if (registry.bulkCleanupTimeout)
+            return;
+        const performCleanup = () => {
+            this.performBulkCleanup(registry);
+            registry.bulkCleanupTimeout = null;
+        };
+        if (this.config.idleCleanup && typeof requestIdleCallback !== 'undefined') {
+            registry.bulkCleanupTimeout = requestIdleCallback(performCleanup);
+        }
+        else {
+            const delay = this.config.bulkCleanupDelay || 5000;
+            registry.bulkCleanupTimeout = setTimeout(performCleanup, delay);
+        }
+    }
+    /**
+     * Perform bulk cleanup of all unused styles
+     */
+    performBulkCleanup(registry) {
+        if (registry.unusedRules.size === 0)
+            return;
+        const cleanupStartTime = Date.now();
+        const classNamesToCleanup = Array.from(registry.unusedRules.keys());
+        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;
+            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;
+            if (!rulesBySheet.has(sheetIndex)) {
+                rulesBySheet.set(sheetIndex, []);
+            }
+            rulesBySheet.get(sheetIndex).push({ className, ruleInfo });
+        }
+        // Delete rules from each sheet (in reverse order to preserve indices)
+        for (const [sheetIndex, rulesInSheet] of rulesBySheet) {
+            // 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)) {
+                    // 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.
+                const currentInfo = registry.rules.get(className);
+                if (currentInfo && currentInfo !== ruleInfo) {
+                    // Rule was replaced; skip deletion of the old reference
+                    continue;
+                }
+                this.deleteRule(registry, ruleInfo);
+                registry.rules.delete(className);
+                registry.unusedRules.delete(className);
+                cleanedUpCount++;
+            }
+        }
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.bulkCleanups++;
+            registry.metrics.stylesCleanedUp += cleanedUpCount;
+            // Add detailed cleanup stats to history
+            registry.metrics.cleanupHistory.push({
+                timestamp: cleanupStartTime,
+                classesDeleted: cleanedUpCount,
+                cssSize: totalCssSize,
+                rulesDeleted: totalRulesDeleted,
+            });
+        }
+    }
+    /**
+     * 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
+     */
+    getTotalRuleCount(registry) {
+        return registry.sheets.reduce((total, sheet) => total + sheet.ruleCount - sheet.holes.length, 0);
+    }
+    /**
+     * Get CSS text from all sheets (for SSR)
+     */
+    getCssText(registry) {
+        const cssChunks = [];
+        for (const sheet of registry.sheets) {
+            try {
+                const styleElement = sheet.sheet;
+                if (styleElement.textContent) {
+                    cssChunks.push(styleElement.textContent);
+                }
+                else if (styleElement.sheet) {
+                    const rules = Array.from(styleElement.sheet.cssRules);
+                    cssChunks.push(rules.map((rule) => rule.cssText).join('\n'));
+                }
+            }
+            catch (error) {
+                console.warn('Failed to read CSS from sheet:', error);
+            }
+        }
+        return cssChunks.join('\n');
+    }
+    /**
+     * Get cache performance metrics
+     */
+    getMetrics(registry) {
+        return registry.metrics || null;
+    }
+    /**
+     * Reset cache performance metrics
+     */
+    resetMetrics(registry) {
+        if (registry.metrics) {
+            registry.metrics = {
+                hits: 0,
+                misses: 0,
+                unusedHits: 0,
+                bulkCleanups: 0,
+                totalInsertions: 0,
+                totalUnused: 0,
+                stylesCleanedUp: 0,
+                cleanupHistory: [],
+                startTime: Date.now(),
+            };
+        }
+    }
+    /**
+     * Convert keyframes steps to CSS string
+     */
+    stepsToCSS(steps) {
+        const rules = [];
+        for (const [key, value] of Object.entries(steps)) {
+            // Support raw CSS strings for backwards compatibility
+            if (typeof value === 'string') {
+                rules.push(`${key} { ${value.trim()} }`);
+                continue;
+            }
+            // Treat value as a style map and process via tasty style handlers
+            const styleMap = (value || {});
+            // Build a deterministic handler queue based on present style keys
+            const styleNames = Object.keys(styleMap).sort();
+            const handlerQueue = [];
+            const seenHandlers = new Set();
+            styleNames.forEach((styleName) => {
+                let handlers = STYLE_HANDLER_MAP[styleName];
+                if (!handlers) {
+                    // Create a default handler for unknown styles (maps to kebab-case CSS or custom props)
+                    handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
+                }
+                handlers.forEach((handler) => {
+                    if (!seenHandlers.has(handler)) {
+                        seenHandlers.add(handler);
+                        handlerQueue.push(handler);
+                    }
+                });
+            });
+            // Accumulate declarations (ordered). We intentionally ignore `$` selector fan-out
+            // and any responsive/state bindings for keyframes.
+            const declarationPairs = [];
+            handlerQueue.forEach((handler) => {
+                const lookup = handler.__lookupStyles;
+                const filteredMap = lookup.reduce((acc, name) => {
+                    const v = styleMap[name];
+                    if (v !== undefined)
+                        acc[name] = v;
+                    return acc;
+                }, {});
+                const result = handler(filteredMap);
+                if (!result)
+                    return;
+                const results = Array.isArray(result) ? result : [result];
+                results.forEach((cssMap) => {
+                    if (!cssMap || typeof cssMap !== 'object')
+                        return;
+                    const { $, ...props } = cssMap;
+                    Object.entries(props).forEach(([prop, val]) => {
+                        if (val == null || val === '')
+                            return;
+                        if (Array.isArray(val)) {
+                            // Multiple values for the same property -> emit in order
+                            val.forEach((v) => {
+                                if (v != null && v !== '') {
+                                    declarationPairs.push({ prop, value: String(v) });
+                                }
+                            });
+                        }
+                        else {
+                            declarationPairs.push({ prop, value: String(val) });
+                        }
+                    });
+                });
+            });
+            // Fallback: if nothing produced (e.g., empty object), generate empty block
+            const declarations = declarationPairs
+                .map((d) => `${d.prop}: ${d.value}`)
+                .join('; ');
+            rules.push(`${key} { ${declarations.trim()} }`);
+        }
+        return rules.join(' ');
+    }
+    /**
+     * Insert keyframes rule
+     */
+    insertKeyframes(registry, steps, name, root) {
+        let targetSheet = this.findAvailableSheet(registry, root);
+        if (!targetSheet) {
+            targetSheet = this.createSheet(registry, root);
+        }
+        const ruleIndex = this.findAvailableRuleIndex(targetSheet);
+        const sheetIndex = registry.sheets.indexOf(targetSheet);
+        try {
+            const cssSteps = this.stepsToCSS(steps);
+            const fullRule = `@keyframes ${name} { ${cssSteps} }`;
+            const styleElement = targetSheet.sheet;
+            const styleSheet = styleElement.sheet;
+            if (styleSheet && !this.config.forceTextInjection) {
+                const safeIndex = Math.min(Math.max(0, ruleIndex), styleSheet.cssRules.length);
+                styleSheet.insertRule(fullRule, safeIndex);
+            }
+            else {
+                styleElement.textContent =
+                    (styleElement.textContent || '') + '\n' + fullRule;
+            }
+            targetSheet.ruleCount++;
+            return {
+                name,
+                ruleIndex,
+                sheetIndex,
+                cssText: fullRule,
+            };
+        }
+        catch (error) {
+            console.warn('Failed to insert keyframes:', error);
+            return null;
+        }
+    }
+    /**
+     * Delete keyframes rule
+     */
+    deleteKeyframes(registry, info) {
+        const sheet = registry.sheets[info.sheetIndex];
+        if (!sheet)
+            return;
+        try {
+            const styleElement = sheet.sheet;
+            const styleSheet = styleElement.sheet;
+            if (styleSheet) {
+                if (info.ruleIndex >= 0 &&
+                    info.ruleIndex < styleSheet.cssRules.length) {
+                    styleSheet.deleteRule(info.ruleIndex);
+                    sheet.ruleCount = Math.max(0, sheet.ruleCount - 1);
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to delete keyframes:', error);
+        }
+    }
+    /**
+     * Mark keyframes as unused
+     */
+    markKeyframesAsUnused(registry, name) {
+        // Implementation similar to markAsUnused but for keyframes
+        const threshold = this.config.unusedStylesThreshold || 500;
+        if (registry.unusedKeyframes.size >= threshold) {
+            this.scheduleBulkCleanup(registry);
+        }
+    }
+    /**
+     * Clean up resources for a root
+     */
+    cleanup(root) {
+        const registry = this.rootRegistries.get(root);
+        if (!registry) {
+            return;
+        }
+        // Cancel any scheduled bulk cleanup
+        if (registry.bulkCleanupTimeout) {
+            if (this.config.idleCleanup &&
+                typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(registry.bulkCleanupTimeout);
+            }
+            else {
+                clearTimeout(registry.bulkCleanupTimeout);
+            }
+            registry.bulkCleanupTimeout = null;
+        }
+        // Remove all sheets
+        for (const sheet of registry.sheets) {
+            try {
+                // Remove style element
+                const styleElement = sheet.sheet;
+                if (styleElement.parentNode) {
+                    styleElement.parentNode.removeChild(styleElement);
+                }
+            }
+            catch (error) {
+                console.warn('Failed to cleanup sheet:', error);
+            }
+        }
+        // Clear registry
+        this.rootRegistries.delete(root);
+    }
+}
+
+