@cube-dev/ui-kit 0.0.0-canary-55e23f2 → 0.0.0-canary-21dd9ff

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

@@ -0,0 +1,518 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
+ * Released under the MIT license.
+ */
+
+import { Lru } from '../parser/lru';
+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,
+                    disposedHits: 0,
+                    evictions: 0,
+                    totalInsertions: 0,
+                    totalDisposals: 0,
+                    domCleanups: 0,
+                    startTime: Date.now(),
+                }
+                : undefined;
+            const disposedCache = new Lru(this.config.cacheSize || 500);
+            registry = {
+                sheets: [],
+                refCounts: new Map(),
+                rules: new Map(),
+                deletionQueue: [],
+                ruleTextSet: new Set(),
+                disposedCache,
+                cleanupTimeouts: new Map(),
+                metrics,
+                classCounter: 0,
+            };
+            // Perform DOM cleanup only when an item is evicted from the LRU
+            disposedCache.setOnEvict((key) => {
+                this.performActualCleanup(registry, key);
+                if (registry.metrics) {
+                    registry.metrics.evictions++;
+                }
+            });
+            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);
+                    styleSheet.insertRule(fullRule, safeIndex);
+                    if (firstInsertedIndex == null)
+                        firstInsertedIndex = safeIndex;
+                    lastInsertedIndex = safeIndex;
+                    currentRuleIndex = safeIndex + 1;
+                }
+                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;
+    }
+    /**
+     * Move a ruleset to disposed cache for potential reuse
+     */
+    moveToDisposedCache(registry, className) {
+        const ruleInfo = registry.rules.get(className);
+        if (!ruleInfo)
+            return;
+        // Move to disposed cache
+        const disposedInfo = {
+            ruleInfo,
+            disposedAt: Date.now(),
+            recentlyUsed: false,
+        };
+        registry.disposedCache.set(className, disposedInfo);
+        // Remove from active registry
+        registry.rules.delete(className);
+        registry.refCounts.delete(className);
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.totalDisposals++;
+        }
+        // If we have a disposed LRU cache, don't schedule DOM cleanup.
+        // Cleanup will occur on LRU eviction or via manual forceCleanup.
+        if ((this.config.cacheSize || 0) > 0) {
+            return;
+        }
+        // Schedule lazy cleanup if configured (legacy behavior when no cache)
+        if (this.config.idleCleanup && typeof requestIdleCallback !== 'undefined') {
+            // Use requestIdleCallback for cleanup when available and enabled
+            const timeoutId = requestIdleCallback(() => {
+                this.performActualCleanup(registry, className);
+            });
+            registry.cleanupTimeouts.set(className, timeoutId);
+        }
+        else {
+            const cleanupDelay = this.config.cleanupDelay || 5000;
+            if (cleanupDelay > 0) {
+                const timeoutId = setTimeout(() => {
+                    this.performActualCleanup(registry, className);
+                }, cleanupDelay);
+                registry.cleanupTimeouts.set(className, timeoutId);
+            }
+            else {
+                // Immediate cleanup
+                this.performActualCleanup(registry, className);
+            }
+        }
+    }
+    /**
+     * Restore a ruleset from disposed cache
+     */
+    restoreFromDisposedCache(registry, className) {
+        const disposedInfo = registry.disposedCache.get(className);
+        if (!disposedInfo)
+            return null;
+        // Cancel any scheduled cleanup
+        const timeoutId = registry.cleanupTimeouts.get(className);
+        if (timeoutId) {
+            if (this.config.idleCleanup &&
+                typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(timeoutId);
+            }
+            else {
+                clearTimeout(timeoutId);
+            }
+            registry.cleanupTimeouts.delete(className);
+        }
+        // Restore to active registry
+        registry.rules.set(className, disposedInfo.ruleInfo);
+        registry.refCounts.set(className, 1);
+        // Remove from disposed cache
+        registry.disposedCache.delete(className);
+        // Mark as recently used for optimization
+        disposedInfo.recentlyUsed = true;
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.disposedHits++;
+        }
+        return disposedInfo.ruleInfo;
+    }
+    /**
+     * Actually remove CSS rules from DOM (lazy cleanup)
+     */
+    performActualCleanup(registry, className) {
+        const disposedInfo = registry.disposedCache.get(className);
+        if (!disposedInfo)
+            return;
+        // Remove from DOM
+        this.deleteRule(registry, disposedInfo.ruleInfo);
+        // Remove from disposed cache
+        registry.disposedCache.delete(className);
+        // Clean up timeout tracking
+        registry.cleanupTimeouts.delete(className);
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.domCleanups++;
+        }
+    }
+    /**
+     * Process the deletion queue for cleanup
+     */
+    processCleanupQueue(registry) {
+        const { deletionQueue } = registry;
+        if (deletionQueue.length === 0) {
+            return;
+        }
+        // Process deletions
+        const toDelete = [...deletionQueue];
+        deletionQueue.length = 0; // Clear queue
+        for (const className of toDelete) {
+            // Check if still referenced
+            const refCount = registry.refCounts.get(className) || 0;
+            if (refCount <= 0) {
+                // Move to disposed cache
+                const ruleInfo = registry.rules.get(className);
+                if (ruleInfo) {
+                    this.moveToDisposedCache(registry, className);
+                }
+            }
+        }
+    }
+    /**
+     * 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,
+                disposedHits: 0,
+                evictions: 0,
+                totalInsertions: 0,
+                totalDisposals: 0,
+                domCleanups: 0,
+                startTime: Date.now(),
+            };
+        }
+    }
+    /**
+     * Clean up resources for a root
+     */
+    cleanup(root) {
+        const registry = this.rootRegistries.get(root);
+        if (!registry) {
+            return;
+        }
+        // Clear all cleanup timeouts
+        for (const timeoutId of registry.cleanupTimeouts.values()) {
+            if (this.config.idleCleanup &&
+                typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(timeoutId);
+            }
+            else {
+                clearTimeout(timeoutId);
+            }
+        }
+        registry.cleanupTimeouts.clear();
+        // 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);
+    }
+}
+
+        

package/es/tasty/injector/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

package/es/tasty/parser/classify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-55e23f2
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
  * 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.0.0-canary-55e23f2
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
  * 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.0.0-canary-55e23f2
+ * @cube-dev/ui-kit v0.0.0-canary-21dd9ff
  * Released under the MIT license.
  */
 
@@ -10,7 +10,8 @@ export class Lru {
     map = new Map();
     head = null;
     tail = null;
-    constructor(limit = 1000) {
+    onEvict;
+    constructor(limit = 1000, onEvict) {
         this.limit = limit;
         // Normalize limit; fall back to sensible default (1000) to keep caching enabled
         let normalized = Number.isFinite(this.limit)
@@ -19,6 +20,10 @@ export class Lru {
         if (normalized <= 0)
             normalized = 1000;
         this.limit = normalized;
+        this.onEvict = onEvict;
+    }
+    setOnEvict(fn) {
+        this.onEvict = fn;
     }
     get(key) {
         const node = this.map.get(key);
@@ -47,6 +52,29 @@ export class Lru {
         if (this.map.size > this.limit)
             this.evict();
     }
+    delete(key) {
+        const node = this.map.get(key);
+        if (!node)
+            return;
+        if (node.prev) {
+            const prevNode = this.map.get(node.prev);
+            if (prevNode)
+                prevNode.next = node.next;
+        }
+        if (node.next) {
+            const nextNode = this.map.get(node.next);
+            if (nextNode)
+                nextNode.prev = node.prev;
+        }
+        if (this.head === key)
+            this.head = node.next;
+        if (this.tail === key)
+            this.tail = node.prev;
+        this.map.delete(key);
+    }
+    keys() {
+        return this.map.keys();
+    }
     touch(key, node) {
         if (this.head === key)
             return; // already MRU
@@ -94,6 +122,14 @@ export class Lru {
         if (this.head === old)
             this.head = null;
         this.map.delete(old);
+        if (this.onEvict) {
+            try {
+                this.onEvict(old, node.value);
+            }
+            catch {
+                // ignore user callback errors
+            }
+        }
     }
     clear() {
         this.map.clear();

package/es/tasty/parser/parser.js

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

package/es/tasty/parser/tokenizer.js

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

package/es/tasty/parser/types.js

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

package/es/tasty/providers/BreakpointsProvider.js

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

package/es/tasty/styles/align.js

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

package/es/tasty/styles/border.js

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

package/es/tasty/styles/boxShadow.combinator.js

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