@cube-dev/ui-kit 0.0.0-canary-da1f163 → 0.0.0-canary-7f29fb4

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

@@ -0,0 +1,737 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-7f29fb4
+ * Released under the MIT license.
+ */
+
+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,
+                    startTime: Date.now(),
+                }
+                : undefined;
+            registry = {
+                sheets: [],
+                refCounts: new Map(),
+                rules: new Map(),
+                unusedRules: new Map(),
+                ruleTextSet: new Set(),
+                bulkCleanupTimeout: null,
+                metrics,
+                classCounter: 0,
+                batchedRules: new Map(),
+                batchedRuleMeta: new Map(),
+                classToBatchedKeys: new Map(),
+                unusedBatchedClasses: 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) {
+        try {
+            // Pre-merge identical selector+atRules declarations within the same class
+            const groupedRules = [];
+            const groupMap = new Map();
+            const atKey = (at) => (at && at.length ? at.join('|') : '');
+            for (const r of flattenedRules) {
+                const key = `${atKey(r.atRules)}||${r.selector}`;
+                const existing = groupMap.get(key);
+                if (existing) {
+                    existing.rule.declarations = `${existing.rule.declarations} ${r.declarations}`;
+                }
+                else {
+                    const clone = { ...r };
+                    groupMap.set(key, { idx: groupedRules.length, rule: clone });
+                    groupedRules.push(clone);
+                }
+            }
+            // Ensure registry maps exist for this class
+            if (!registry.classToBatchedKeys.has(className)) {
+                registry.classToBatchedKeys.set(className, new Set());
+            }
+            // Apply batching per grouped rule
+            for (const rule of groupedRules) {
+                const normalizedDecl = this.normalizeDeclarations(rule.declarations);
+                const { selectorTemplate } = this.makeSelectorTemplate(rule.selector, className);
+                const batchKey = this.getBatchKey(rule.atRules, selectorTemplate, normalizedDecl);
+                // Record meta
+                if (!registry.batchedRuleMeta.has(batchKey)) {
+                    registry.batchedRuleMeta.set(batchKey, {
+                        selectorTemplate,
+                        declarations: normalizedDecl,
+                        atRules: rule.atRules && rule.atRules.length
+                            ? [...rule.atRules]
+                            : undefined,
+                    });
+                }
+                // Link class -> batch keys
+                registry.classToBatchedKeys.get(className).add(batchKey);
+                const existingEntry = registry.batchedRules.get(batchKey);
+                if (existingEntry) {
+                    if (!existingEntry.classNames.has(className)) {
+                        existingEntry.classNames.add(className);
+                        this.updateBatchedRuleCss(registry, existingEntry, root);
+                    }
+                    // Unmark class as unused if it was marked
+                    if (registry.unusedBatchedClasses.has(className)) {
+                        registry.unusedBatchedClasses.delete(className);
+                    }
+                    continue;
+                }
+                // Check if this exact rule already exists as a non-batched rule in any sheet
+                // and convert it to a batched rule instead of duplicating
+                const existingClassWithSameRule = this.findClassWithIdenticalRule(registry, batchKey, className);
+                if (existingClassWithSameRule) {
+                    // Convert existing rule to batched and add current class
+                    this.convertToBatchedRule(registry, existingClassWithSameRule, className, batchKey, root);
+                    continue;
+                }
+                // Need to create a new CSS rule for this batch key
+                const { sheet, sheetIndex, ruleIndex } = this.ensureTargetSheetAndIndex(registry, root);
+                const entry = {
+                    key: batchKey,
+                    selectorTemplate,
+                    declarations: normalizedDecl,
+                    atRules: rule.atRules && rule.atRules.length ? [...rule.atRules] : undefined,
+                    classNames: new Set([className]),
+                    sheetIndex,
+                    ruleIndex,
+                };
+                const cssText = this.composeCssForEntry(entry);
+                const styleElement = sheet.sheet;
+                const styleSheet = styleElement.sheet;
+                if (styleSheet && !this.config.forceTextInjection) {
+                    const maxIndex = styleSheet.cssRules.length;
+                    const safeIndex = Math.min(Math.max(0, ruleIndex), maxIndex);
+                    styleSheet.insertRule(cssText, safeIndex);
+                }
+                else {
+                    styleElement.textContent =
+                        (styleElement.textContent || '') + '\n' + cssText;
+                    entry.currentCssText = cssText;
+                }
+                // Update bookkeeping
+                sheet.ruleCount = Math.max(sheet.ruleCount, ruleIndex + 1);
+                registry.batchedRules.set(batchKey, entry);
+                if (registry.metrics) {
+                    registry.metrics.totalInsertions++;
+                }
+            }
+            // For batched insertion, we don't create per-class RuleInfo ranges anymore
+            return {
+                className,
+                ruleIndex: -1,
+                sheetIndex: -1,
+                cssText: [],
+            };
+        }
+        catch (error) {
+            console.warn('Failed to insert CSS rules (batched):', 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) {
+        // If this class participates in batched rules, just mark it as unused
+        const keys = registry.classToBatchedKeys.get(className);
+        if (keys && keys.size) {
+            registry.unusedBatchedClasses.add(className);
+            registry.refCounts.delete(className);
+            if (registry.metrics) {
+                registry.metrics.totalUnused++;
+            }
+            // Schedule cleanup when we have enough unused classes
+            const threshold = this.config.unusedStylesThreshold || 500;
+            if (registry.unusedBatchedClasses.size >= threshold) {
+                this.scheduleBulkCleanup(registry);
+            }
+            return; // handled via batched path
+        }
+        // Fallback to legacy unused path for non-batched rules
+        const ruleInfo = registry.rules.get(className);
+        if (!ruleInfo)
+            return;
+        const unusedInfo = {
+            ruleInfo,
+            markedUnusedAt: Date.now(),
+        };
+        registry.unusedRules.set(className, unusedInfo);
+        registry.refCounts.delete(className);
+        if (registry.metrics) {
+            registry.metrics.totalUnused++;
+        }
+        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) {
+        let cleanedUpCount = 0;
+        // Handle legacy unused rules
+        if (registry.unusedRules.size > 0) {
+            const classNamesToCleanup = Array.from(registry.unusedRules.keys());
+            // Group by sheet for efficient deletion
+            const rulesBySheet = new Map();
+            for (const className of classNamesToCleanup) {
+                const unusedInfo = registry.unusedRules.get(className);
+                if (!unusedInfo)
+                    continue;
+                const sheetIndex = unusedInfo.ruleInfo.sheetIndex;
+                if (!rulesBySheet.has(sheetIndex)) {
+                    rulesBySheet.set(sheetIndex, []);
+                }
+                rulesBySheet
+                    .get(sheetIndex)
+                    .push({ className, ruleInfo: unusedInfo.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) {
+                    this.deleteRule(registry, ruleInfo);
+                    registry.rules.delete(className);
+                    registry.unusedRules.delete(className);
+                    cleanedUpCount++;
+                }
+            }
+        }
+        // Handle batched unused classes
+        if (registry.unusedBatchedClasses.size > 0) {
+            cleanedUpCount += this.cleanupBatchedUnusedClasses(registry);
+        }
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.bulkCleanups++;
+            registry.metrics.stylesCleanedUp += cleanedUpCount;
+        }
+    }
+    /**
+     * Clean up unused classes from batched rules
+     */
+    cleanupBatchedUnusedClasses(registry) {
+        const unusedClasses = Array.from(registry.unusedBatchedClasses);
+        let cleanedUpCount = 0;
+        for (const className of unusedClasses) {
+            const keys = registry.classToBatchedKeys.get(className);
+            if (!keys)
+                continue;
+            for (const key of keys) {
+                const entry = registry.batchedRules.get(key);
+                if (!entry)
+                    continue;
+                // Remove class from the batched rule
+                entry.classNames.delete(className);
+                if (entry.classNames.size === 0) {
+                    // Remove the entire batched rule if no classes left
+                    this.removeBatchedEntry(registry, entry);
+                    registry.batchedRules.delete(key);
+                }
+                else {
+                    // Update the CSS to remove this class from the selector
+                    this.updateBatchedRuleCss(registry, entry, document);
+                }
+            }
+            // Clean up the class mappings
+            registry.classToBatchedKeys.delete(className);
+            registry.unusedBatchedClasses.delete(className);
+            cleanedUpCount++;
+        }
+        return cleanedUpCount;
+    }
+    /**
+     * 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,
+                startTime: Date.now(),
+            };
+        }
+    }
+    /**
+     * 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);
+    }
+    /** Normalize declaration list by sorting properties for stable keys */
+    normalizeDeclarations(declarations) {
+        return declarations
+            .split(';')
+            .map((d) => d.trim())
+            .filter(Boolean)
+            .sort((a, b) => a.localeCompare(b))
+            .join(';');
+    }
+    /** Build selector template normalizing class references to placeholders.
+     * Rules:
+     * - Replace any occurrence of :is(.class[, .class]*) with :is(__CLASS__)
+     * - If starts with .<name>.<name>, replace with __CLASS__.__CLASS__ (legacy specificity)
+     * - Else if starts with .<name>, replace with __CLASS__
+     */
+    makeSelectorTemplate(selector, className) {
+        // Normalize any :is(.tX, .tY) occurrences first
+        const isClassList = /:is\(\s*\.[A-Za-z0-9_-]+(?:\s*,\s*\.[A-Za-z0-9_-]+)*\s*\)/g;
+        let normalized = selector.replace(isClassList, ':is(__CLASS__)');
+        // Legacy patterns that may still start with plain class
+        const doubleRe = /^\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+/;
+        const singleRe = /^\.[A-Za-z0-9_-]+/;
+        if (doubleRe.test(normalized)) {
+            normalized = normalized.replace(doubleRe, '__CLASS__.__CLASS__');
+        }
+        else if (singleRe.test(normalized)) {
+            normalized = normalized.replace(singleRe, '__CLASS__');
+        }
+        return { selectorTemplate: normalized };
+    }
+    /** Compose a unique batch key */
+    getBatchKey(atRules, selectorTemplate, normalizedDecl) {
+        const at = atRules && atRules.length ? atRules.join('|') : '';
+        return `${at}||${selectorTemplate}||${normalizedDecl}`;
+    }
+    /** Ensure there is a target sheet and available rule index */
+    ensureTargetSheetAndIndex(registry, root) {
+        let sheet = this.findAvailableSheet(registry, root);
+        if (!sheet) {
+            sheet = this.createSheet(registry, root);
+        }
+        const ruleIndex = this.findAvailableRuleIndex(sheet);
+        const sheetIndex = registry.sheets.indexOf(sheet);
+        return { sheet, sheetIndex, ruleIndex };
+    }
+    /** Compose CSS text for a batched rule entry */
+    composeCssForEntry(entry) {
+        const classList = Array.from(entry.classNames)
+            .sort((a, b) => {
+            const aNum = parseInt(a.slice(1));
+            const bNum = parseInt(b.slice(1));
+            return aNum - bNum;
+        })
+            .map((c) => `.${c}`)
+            .join(', ');
+        // If template expects doubled specificity, replicate :is twice
+        let selector = entry.selectorTemplate
+            .replace(/:is\(__CLASS__\)/g, `:is(${classList})`)
+            .replace(/__CLASS__\.__CLASS__/g, `:is(${classList}):is(${classList})`)
+            .replace(/__CLASS__/g, `:is(${classList})`);
+        const baseRule = `${selector} { ${entry.declarations} }`;
+        if (entry.atRules && entry.atRules.length) {
+            return entry.atRules.reduce((acc, at) => `${at} { ${acc} }`, baseRule);
+        }
+        return baseRule;
+    }
+    /** Update CSSOM/textContent for an existing batched rule */
+    updateBatchedRuleCss(registry, entry, root) {
+        const sheet = registry.sheets[entry.sheetIndex];
+        if (!sheet)
+            return;
+        const styleElement = sheet.sheet;
+        const styleSheet = styleElement.sheet;
+        const newCssText = this.composeCssForEntry(entry);
+        if (styleSheet && !this.config.forceTextInjection) {
+            // Replace rule at the same index
+            const idx = Math.max(0, Math.min(entry.ruleIndex, styleSheet.cssRules.length - 1));
+            try {
+                styleSheet.deleteRule(idx);
+            }
+            catch {
+                // Ignore CSSOM errors when deleting rules
+            }
+            const insertIdx = Math.min(idx, styleSheet.cssRules.length);
+            styleSheet.insertRule(newCssText, insertIdx);
+            entry.ruleIndex = insertIdx;
+        }
+        else {
+            // Text content replacement
+            const old = entry.currentCssText || '';
+            const fullText = styleElement.textContent || '';
+            if (old) {
+                styleElement.textContent = fullText.replace(old, newCssText);
+            }
+            else {
+                styleElement.textContent =
+                    (fullText ? fullText + '\n' : '') + newCssText;
+            }
+            entry.currentCssText = newCssText;
+        }
+    }
+    /** Remove a batched rule entirely from the stylesheet */
+    removeBatchedEntry(registry, entry) {
+        const sheet = registry.sheets[entry.sheetIndex];
+        if (!sheet)
+            return;
+        const styleElement = sheet.sheet;
+        const styleSheet = styleElement.sheet;
+        if (styleSheet && !this.config.forceTextInjection) {
+            const idx = entry.ruleIndex;
+            if (idx >= 0 && idx < styleSheet.cssRules.length) {
+                try {
+                    styleSheet.deleteRule(idx);
+                    sheet.ruleCount = Math.max(0, sheet.ruleCount - 1);
+                }
+                catch {
+                    // Ignore CSSOM errors when deleting rules
+                }
+            }
+        }
+        else {
+            const old = entry.currentCssText || '';
+            if (old) {
+                const fullText = styleElement.textContent || '';
+                styleElement.textContent = fullText.replace(old, '');
+            }
+            sheet.ruleCount = Math.max(0, sheet.ruleCount - 1);
+        }
+    }
+    /** Find existing class that has an identical rule (same batch key) */
+    findClassWithIdenticalRule(registry, batchKey, excludeClassName) {
+        const meta = registry.batchedRuleMeta.get(batchKey);
+        if (!meta)
+            return null;
+        // Look through all classes to find one that has this batch key but isn't batched yet
+        for (const [className, keys] of registry.classToBatchedKeys.entries()) {
+            if (className === excludeClassName)
+                continue;
+            if (keys.has(batchKey) && !registry.batchedRules.has(batchKey)) {
+                return className;
+            }
+        }
+        return null;
+    }
+    /** Convert an existing single-class rule to a batched rule with additional class */
+    convertToBatchedRule(registry, existingClassName, newClassName, batchKey, root) {
+        const meta = registry.batchedRuleMeta.get(batchKey);
+        if (!meta)
+            return;
+        // Find the existing rule info for the existing class
+        const existingRuleInfo = registry.rules.get(existingClassName);
+        if (!existingRuleInfo || existingRuleInfo.sheetIndex < 0)
+            return;
+        // Create a new batched entry at the same location
+        const entry = {
+            key: batchKey,
+            selectorTemplate: meta.selectorTemplate,
+            declarations: meta.declarations,
+            atRules: meta.atRules,
+            classNames: new Set([existingClassName, newClassName]),
+            sheetIndex: existingRuleInfo.sheetIndex,
+            ruleIndex: existingRuleInfo.ruleIndex,
+        };
+        // Update the CSS rule to use batched selector
+        const newCssText = this.composeCssForEntry(entry);
+        const sheet = registry.sheets[entry.sheetIndex];
+        if (!sheet)
+            return;
+        const styleElement = sheet.sheet;
+        const styleSheet = styleElement.sheet;
+        if (styleSheet && !this.config.forceTextInjection) {
+            try {
+                // Replace the existing rule
+                const idx = Math.max(0, Math.min(entry.ruleIndex, styleSheet.cssRules.length - 1));
+                styleSheet.deleteRule(idx);
+                styleSheet.insertRule(newCssText, idx);
+            }
+            catch {
+                // Ignore CSSOM errors when updating rules
+            }
+        }
+        else {
+            // Replace in text content
+            const oldCssText = existingRuleInfo.cssText?.[0] || '';
+            if (oldCssText) {
+                const fullText = styleElement.textContent || '';
+                styleElement.textContent = fullText.replace(oldCssText, newCssText);
+            }
+            entry.currentCssText = newCssText;
+        }
+        // Update registry
+        registry.batchedRules.set(batchKey, entry);
+        // Update class mappings
+        if (!registry.classToBatchedKeys.has(newClassName)) {
+            registry.classToBatchedKeys.set(newClassName, new Set());
+        }
+        registry.classToBatchedKeys.get(newClassName).add(batchKey);
+    }
+}
+
+