@cube-dev/ui-kit 0.0.0-canary-1d46daa → 0.0.0-canary-736d057

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

@@ -0,0 +1,492 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
+ * 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,
+            };
+            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;
+    }
+    /**
+     * 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 classNamesToCleanup = Array.from(registry.unusedRules.keys());
+        let cleanedUpCount = 0;
+        // 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++;
+            }
+        }
+        // Update metrics
+        if (registry.metrics) {
+            registry.metrics.bulkCleanups++;
+            registry.metrics.stylesCleanedUp += 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);
+    }
+}
+
+        

package/es/tasty/injector/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
+ * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * Released under the MIT license.
  */