@cube-dev/ui-kit 0.75.0 → 0.76.1

package/es/tasty/index.js

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

package/es/tasty/injector/index.js

@@ -1,10 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.75.0
+ * @cube-dev/ui-kit v0.76.1
  * Released under the MIT license.
  */
 
+import { isDevEnv } from '../utils/isDevEnv';
 import { StyleInjector } from './injector';
 // Use a more robust global singleton that survives React Strict Mode
 const GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';
@@ -38,17 +39,26 @@ function isTestEnvironment() {
     return false;
 }
 /**
- * Configure the global style injector
+ * Create default configuration with optional test environment detection
  */
-export function configure(config = {}) {
-    const fullConfig = {
+function createDefaultConfig(isTest) {
+    return {
         maxRulesPerSheet: 8192, // safer default cap per sheet
-        unusedStylesThreshold: 200, // default threshold for bulk cleanup of unused styles
+        unusedStylesThreshold: 500, // default threshold for bulk cleanup of unused styles
         bulkCleanupDelay: 5000, // default delay before bulk cleanup (ignored if idleCleanup is true)
         idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
-        collectMetrics: false, // default to no performance tracking
-        forceTextInjection: false, // auto-enable for test environments
-        debugMode: false, // reduce memory usage by avoiding full cssText storage
+        forceTextInjection: isTest ?? false, // auto-enable for test environments
+        devMode: isDevEnv(), // enable dev features: performance tracking and debug info
+        bulkCleanupBatchRatio: 0.5,
+        unusedStylesMinAgeMs: 10000,
+    };
+}
+/**
+ * Configure the global style injector
+ */
+export function configure(config = {}) {
+    const fullConfig = {
+        ...createDefaultConfig(),
         ...config,
     };
     // Store on window to survive React Strict Mode resets
@@ -70,12 +80,30 @@ function getGlobalInjector() {
     }
     return storage[GLOBAL_INJECTOR_KEY];
 }
+/**
+ * Allocate a className for a cacheKey without injecting styles yet
+ */
+export function allocateClassName(cacheKey, options) {
+    return getGlobalInjector().allocateClassName(cacheKey, options);
+}
 /**
  * Inject styles and return className with dispose function
  */
 export function inject(rules, options) {
     return getGlobalInjector().inject(rules, options);
 }
+/**
+ * Inject global rules that should not reserve tasty class names
+ */
+export function injectGlobal(rules, options) {
+    return getGlobalInjector().injectGlobal(rules, options);
+}
+/**
+ * Internal method for createGlobalStyle - not exported publicly
+ */
+function injectCreateGlobalStyle(rules, options) {
+    return getGlobalInjector().injectCreateGlobalStyle(rules, options);
+}
 /**
  * Inject keyframes and return object with toString() and dispose()
  */
@@ -147,13 +175,7 @@ export function destroy(root) {
 export function createInjector(config = {}) {
     const isTest = isTestEnvironment();
     const fullConfig = {
-        maxRulesPerSheet: 8192, // safer default cap per sheet
-        unusedStylesThreshold: 500, // default threshold for bulk cleanup of unused styles
-        bulkCleanupDelay: 5000, // default delay before bulk cleanup (ignored if idleCleanup is true)
-        idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
-        collectMetrics: false, // default to no performance tracking
-        forceTextInjection: isTest, // auto-enable for test environments
-        debugMode: false, // reduce memory usage by avoiding full cssText storage
+        ...createDefaultConfig(isTest),
         ...config,
     };
     return new StyleInjector(fullConfig);

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.75.0
+ * @cube-dev/ui-kit v0.76.1
  * Released under the MIT license.
  */
 
@@ -23,10 +23,42 @@ export class StyleInjector {
     sheetManager;
     config;
     cleanupScheduled = false;
+    globalRuleCounter = 0;
     constructor(config = {}) {
         this.config = config;
         this.sheetManager = new SheetManager(config);
     }
+    /**
+     * Allocate a className for a cacheKey without injecting styles yet.
+     * This allows separating className allocation (render phase) from style injection (insertion phase).
+     */
+    allocateClassName(cacheKey, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        // Check if we can reuse existing className for this cache key
+        if (registry.cacheKeyToClassName.has(cacheKey)) {
+            const className = registry.cacheKeyToClassName.get(cacheKey);
+            return {
+                className,
+                isNewAllocation: false,
+            };
+        }
+        // Generate new className and reserve it
+        const className = generateClassName(registry.classCounter++);
+        // Create placeholder RuleInfo to reserve the className
+        const placeholderRuleInfo = {
+            className,
+            ruleIndex: -1, // Placeholder - will be set during actual injection
+            sheetIndex: -1, // Placeholder - will be set during actual injection
+        };
+        // Store RuleInfo only once by className, and map cacheKey separately
+        registry.rules.set(className, placeholderRuleInfo);
+        registry.cacheKeyToClassName.set(cacheKey, className);
+        return {
+            className,
+            isNewAllocation: true,
+        };
+    }
     /**
      * Inject styles from StyleResult objects
      */
@@ -40,85 +72,49 @@ export class StyleInjector {
             };
         }
         // Rules are now in StyleRule format directly
-        // Try to dedupe by className first — if the same class was already inserted, reuse it
-        // Only extract className if it looks like a generated tasty className (t + digits)
-        const preExtractedClass = this.extractClassName(rules);
-        const generatedClass = preExtractedClass && /^t\d+$/.test(preExtractedClass)
-            ? preExtractedClass
-            : null;
-        if (generatedClass && registry.rules.has(generatedClass)) {
-            const currentRefCount = registry.refCounts.get(generatedClass) || 0;
-            registry.refCounts.set(generatedClass, currentRefCount + 1);
-            // If this class was previously marked as unused, clear that state now
-            if (registry.unusedRules.has(generatedClass)) {
-                registry.unusedRules.delete(generatedClass);
-                if (registry.metrics) {
-                    // Consider this a reuse rather than a cold miss
-                    registry.metrics.unusedHits++;
-                }
-            }
-            // Update metrics
-            if (registry.metrics) {
-                registry.metrics.hits++;
-            }
-            return {
-                className: generatedClass,
-                dispose: () => this.dispose(generatedClass, registry),
-            };
-        }
-        // Try to restore from unused styles if className exists but is not active
-        if (generatedClass &&
-            registry.rules.has(generatedClass) &&
-            !registry.refCounts.has(generatedClass)) {
-            const restored = this.sheetManager.restoreFromUnused(registry, generatedClass);
-            if (restored) {
+        // Check if we can reuse based on cache key
+        const cacheKey = options?.cacheKey;
+        let className;
+        let isPreAllocated = false;
+        if (cacheKey && registry.cacheKeyToClassName.has(cacheKey)) {
+            // Reuse existing class for this cache key
+            className = registry.cacheKeyToClassName.get(cacheKey);
+            const existingRuleInfo = registry.rules.get(className);
+            // Check if this is a placeholder (pre-allocated but not yet injected)
+            isPreAllocated =
+                existingRuleInfo.ruleIndex === -1 && existingRuleInfo.sheetIndex === -1;
+            if (!isPreAllocated) {
+                // Already injected - just increment refCount
+                const currentRefCount = registry.refCounts.get(className) || 0;
+                registry.refCounts.set(className, currentRefCount + 1);
                 // Update metrics
                 if (registry.metrics) {
                     registry.metrics.hits++;
                 }
                 return {
-                    className: generatedClass,
-                    dispose: () => this.dispose(generatedClass, registry),
+                    className,
+                    dispose: () => this.dispose(className, registry),
                 };
             }
         }
-        // No active cache dedupe — rely on provided className or disposed cache only
-        // Generate final className - only use extracted className if it's a generated tasty className
-        const className = generatedClass
-            ? generatedClass
-            : generateClassName(registry.classCounter++);
-        // If a different pre-extracted class was used in rules, rewrite selectors to the final class
-        // Also increase specificity for class-based selectors by duplicating the class
-        const rulesToInsert = generatedClass && generatedClass !== className
-            ? rules.map((r) => {
-                if (r.selector.startsWith('.' + generatedClass)) {
-                    const newSelector = '.' + className + r.selector.slice(generatedClass.length + 1);
-                    // Increase specificity by duplicating the class for class-based selectors
-                    const specificSelector = newSelector.startsWith('.' + className) &&
-                        /^\.t\d+/.test(newSelector)
-                        ? '.' + className + newSelector
-                        : newSelector;
-                    return {
-                        ...r,
-                        selector: specificSelector,
-                    };
-                }
-                return r;
-            })
-            : rules.map((r) => {
-                // Increase specificity for class-based selectors by duplicating the class
-                if (r.selector.startsWith('.') && /^\.t\d+/.test(r.selector)) {
-                    const classMatch = r.selector.match(/^\.t\d+/);
-                    if (classMatch) {
-                        const baseClass = classMatch[0];
-                        return {
-                            ...r,
-                            selector: baseClass + r.selector,
-                        };
-                    }
-                }
-                return r;
-            });
+        else {
+            // Generate new className
+            className = generateClassName(registry.classCounter++);
+        }
+        // Process rules: handle needsClassName flag and apply specificity
+        const rulesToInsert = rules.map((rule) => {
+            let newSelector = rule.selector;
+            // If rule needs className prepended
+            if (rule.needsClassName) {
+                // Simple concatenation: .className (double specificity) + selectorSuffix
+                newSelector = `.${className}.${className}${newSelector}`;
+            }
+            return {
+                ...rule,
+                selector: newSelector,
+                needsClassName: undefined, // Remove the flag after processing
+            };
+        });
         // Before inserting, auto-register @property for any color custom properties being defined.
         // Fast parse: split declarations by ';' and match "--*-color:"
         // Do this only when we actually insert (i.e., no cache hit above)
@@ -159,7 +155,18 @@ export class StyleInjector {
         }
         // Store in registry
         registry.refCounts.set(className, 1);
-        registry.rules.set(className, ruleInfo);
+        if (isPreAllocated) {
+            // Update the existing placeholder entry with real rule info
+            registry.rules.set(className, ruleInfo);
+            // cacheKey mapping already exists from allocation
+        }
+        else {
+            // Store new entries
+            registry.rules.set(className, ruleInfo);
+            if (cacheKey) {
+                registry.cacheKeyToClassName.set(cacheKey, className);
+            }
+        }
         // Update metrics
         if (registry.metrics) {
             registry.metrics.totalInsertions++;
@@ -171,74 +178,78 @@ export class StyleInjector {
         };
     }
     /**
-     * Extract className from rules (assumes first rule contains the base className)
+     * Inject global styles (rules without a generated tasty class selector)
+     * This ensures we don't reserve a tasty class name (t{number}) for global rules,
+     * which could otherwise collide with element-level styles and break lookups.
      */
-    extractClassName(rules) {
-        for (const rule of rules) {
-            const match = rule.selector.match(/^\.([a-zA-Z0-9_-]+)/);
-            if (match) {
-                return match[1];
-            }
+    injectGlobal(rules, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (!rules || rules.length === 0) {
+            return { dispose: () => { } };
         }
-        return null;
+        // Use a non-tasty identifier to avoid any collisions with .t{number} classes
+        const key = `global:${this.globalRuleCounter++}`;
+        const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
+        if (registry.metrics) {
+            registry.metrics.totalInsertions++;
+        }
+        return {
+            dispose: () => {
+                if (info)
+                    this.sheetManager.deleteGlobalRule(registry, key);
+            },
+        };
     }
     /**
-     * Generate cache key from style rules with optimized deduplication
+     * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
      */
-    generateCacheKey(rules) {
-        const normalizeSelector = (selector) => {
-            const match = selector.match(/^\.[a-zA-Z0-9_-]+(.*)$/);
-            return match ? match[1] : selector;
+    injectCreateGlobalStyle(rules, options) {
+        const root = options?.root || document;
+        const registry = this.sheetManager.getRegistry(root);
+        if (!rules || rules.length === 0) {
+            return { dispose: () => { } };
+        }
+        // Use a different prefix to distinguish from injectGlobal
+        const key = `raw:${this.globalRuleCounter++}`;
+        const info = this.sheetManager.insertGlobalRule(registry, rules, key, root);
+        if (registry.metrics) {
+            registry.metrics.totalInsertions++;
+        }
+        return {
+            dispose: () => {
+                if (info)
+                    this.sheetManager.deleteGlobalRule(registry, key);
+            },
         };
-        // Sort rules to ensure consistent cache keys for equivalent rule sets
-        const sortedRules = [...rules].sort((a, b) => {
-            const aKey = `${normalizeSelector(a.selector)}${a.atRules ? a.atRules.join('|') : ''}`;
-            const bKey = `${normalizeSelector(b.selector)}${b.atRules ? b.atRules.join('|') : ''}`;
-            return aKey.localeCompare(bKey);
-        });
-        return sortedRules
-            .map((rule) => {
-            const at = rule.atRules && rule.atRules.length
-                ? `@${rule.atRules.join('|')}`
-                : '';
-            const sel = normalizeSelector(rule.selector);
-            // Normalize declarations by sorting properties for consistent caching
-            const normalizedDeclarations = rule.declarations
-                .split(';')
-                .filter(Boolean)
-                .map((decl) => decl.trim())
-                .sort()
-                .join(';');
-            return `${sel}{${normalizedDeclarations}}${at}`;
-        })
-            .join('');
     }
     /**
      * Dispose of a className
      */
     dispose(className, registry) {
-        const currentRefCount = registry.refCounts.get(className) || 0;
-        if (currentRefCount <= 1) {
-            // Mark as unused immediately
-            this.sheetManager.markAsUnused(registry, className);
+        const currentRefCount = registry.refCounts.get(className);
+        // Guard against stale double-dispose or mismatched lifecycle
+        if (currentRefCount == null || currentRefCount <= 0) {
+            return;
         }
-        else {
-            registry.refCounts.set(className, currentRefCount - 1);
+        const newRefCount = currentRefCount - 1;
+        registry.refCounts.set(className, newRefCount);
+        if (newRefCount === 0) {
+            // Update metrics
+            if (registry.metrics) {
+                registry.metrics.totalUnused++;
+            }
+            // Check if cleanup should be scheduled
+            this.sheetManager.checkCleanupNeeded(registry);
         }
     }
-    /**
-     * Cleanup unused rules
-     */
-    cleanup(root) {
-        const registry = this.sheetManager.getRegistry(root || document);
-        this.sheetManager.processCleanupQueue(registry);
-    }
     /**
      * Force bulk cleanup of unused styles
      */
-    forceBulkCleanup(root) {
+    cleanup(root) {
         const registry = this.sheetManager.getRegistry(root || document);
-        this.sheetManager['performBulkCleanup'](registry);
+        // Clean up ALL unused rules regardless of batch ratio
+        this.sheetManager.forceCleanup(registry);
     }
     /**
      * Get CSS text from all sheets (for SSR)
@@ -258,16 +269,16 @@ export class StyleInjector {
         for (const cls of classNames) {
             const info = registry.rules.get(cls);
             if (info) {
-                if (info.cssText && info.cssText.length) {
-                    cssChunks.push(...info.cssText);
-                }
-                else {
-                    // Fallback: try to read from live sheet by index range
-                    const sheet = registry.sheets[info.sheetIndex];
-                    const styleSheet = sheet?.sheet?.sheet;
-                    if (styleSheet) {
-                        const start = Math.max(0, info.ruleIndex);
-                        const end = Math.min(styleSheet.cssRules.length - 1, info.endRuleIndex ?? info.ruleIndex);
+                // Always prefer reading from the live stylesheet, since indices can change
+                const sheet = registry.sheets[info.sheetIndex];
+                const styleSheet = sheet?.sheet?.sheet;
+                if (styleSheet) {
+                    const start = Math.max(0, info.ruleIndex);
+                    const end = Math.min(styleSheet.cssRules.length - 1, info.endRuleIndex ?? info.ruleIndex);
+                    // Additional validation: ensure indices are valid and in correct order
+                    if (start >= 0 &&
+                        end >= start &&
+                        start < styleSheet.cssRules.length) {
                         for (let i = start; i <= end; i++) {
                             const rule = styleSheet.cssRules[i];
                             if (rule)
@@ -275,6 +286,10 @@ export class StyleInjector {
                         }
                     }
                 }
+                else if (info.cssText && info.cssText.length) {
+                    // Fallback in environments without CSSOM access
+                    cssChunks.push(...info.cssText);
+                }
             }
         }
         return cssChunks.join('\n');
@@ -295,14 +310,6 @@ export class StyleInjector {
         const registry = this.sheetManager.getRegistry(root);
         this.sheetManager.resetMetrics(registry);
     }
-    /**
-     * Force cleanup of unused styles (useful for memory pressure)
-     */
-    forceCleanupUnused(options) {
-        const root = options?.root || document;
-        const registry = this.sheetManager.getRegistry(root);
-        this.sheetManager['performBulkCleanup'](registry);
-    }
     /**
      * Define a CSS @property custom property
      * Example:
@@ -418,9 +425,14 @@ export class StyleInjector {
             return;
         entry.refCount--;
         if (entry.refCount <= 0) {
-            // Mark as unused
+            // Dispose immediately - keyframes are global and safe to clean up right away
+            this.sheetManager.deleteKeyframes(registry, entry.info);
             registry.keyframesCache.delete(cacheKey);
-            this.sheetManager.markKeyframesAsUnused(registry, entry.name);
+            // Update metrics
+            if (registry.metrics) {
+                registry.metrics.totalUnused++;
+                registry.metrics.stylesCleanedUp++;
+            }
         }
     }
     /**
@@ -452,8 +464,8 @@ export class StyleInjector {
                 const css = this.interpolateTemplate();
                 if (css.trim()) {
                     const styleResults = this.parseCSSToStyleResults(css);
-                    // Bind the inject method to the outer injector instance
-                    const result = injector.inject(styleResults, {
+                    // Use a special method for createGlobalStyle to distinguish from injectGlobal
+                    const result = injector.injectCreateGlobalStyle(styleResults, {
                         root: this.props.root,
                     });
                     this.disposeFunction = result.dispose;