@cube-dev/ui-kit 0.0.0-canary-0f4773b → 0.0.0-canary-458bf0e

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

@@ -1,492 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0f4773b
- * 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

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

package/types/tasty/debug.d.ts

@@ -1,69 +0,0 @@
-/**
- * Debug utilities for inspecting tasty-generated CSS at runtime
- */
-/**
- * Debug utilities for inspecting tasty styles in runtime applications
- */
-export declare const tastyDebug: {
-    /**
-     * Get CSS for a specific tasty class (e.g., 't24')
-     */
-    getCSSForClass(className: string): string;
-    /**
-     * Get CSS for multiple tasty classes
-     */
-    getCSSForClasses(classNames: string[]): string;
-    /**
-     * Log CSS for a specific tasty class (e.g., 't24') to console
-     */
-    logCSSForClass(className: string): void;
-    /**
-     * Log CSS for multiple tasty classes to console
-     */
-    logCSSForClasses(classNames: string[]): void;
-    /**
-     * Inspect an element by CSS selector and get its tasty CSS
-     */
-    inspectElement(selector: string): string;
-    /**
-     * Inspect a DOM element directly and get its tasty CSS
-     */
-    inspectDOMElement(element: Element): string;
-    /**
-     * Get all tasty CSS currently injected into the page
-     */
-    getAllCSS(): string;
-    /**
-     * Find all tasty classes used in the page
-     */
-    findAllTastyClasses(): string[];
-    /**
-     * Get a summary of all tasty styles in use
-     */
-    getSummary(): {
-        totalClasses: number;
-        classes: string[];
-        totalCSSSize: number;
-        allCSS: string;
-    };
-    /**
-     * Helper to log CSS in a readable format
-     */
-    logCSS(css: string, title?: string): void;
-    /**
-     * Advanced inspection with detailed breakdown
-     */
-    inspect(target: string | Element): {
-        element: Element | null;
-        tastyClasses: string[];
-        css: string;
-        breakdown: {
-            [className: string]: string;
-        };
-    };
-};
-/**
- * Install tastyDebug on window object for easy access in browser console
- * Only in non-production environments
- */
-export declare function installGlobalDebug(): void;

package/types/tasty/injector/flatten.d.ts

@@ -1,16 +0,0 @@
-import { FlattenedRule } from './types';
-/**
- * Parse and flatten nested CSS
- * Handles &, .Class, SubElement patterns from renderStyles output
- * Preserves at-rule context (media queries, supports, etc.)
- */
-export declare function flattenNestedCss(cssText: string, baseClassName: string, atRuleStack?: string[]): FlattenedRule[];
-/**
- * Flatten nested CSS for a concrete selector (global styles).
- * Unlike the className-based variant, this preserves the provided selector string as-is.
- */
-export declare function flattenNestedCssForSelector(cssText: string, baseSelector: string, atRuleStack?: string[]): FlattenedRule[];
-/**
- * Wrap a CSS rule with at-rules (media queries, supports, etc.)
- */
-export declare function wrapWithAtRules(rule: string, atRules?: string[]): string;

package/types/tasty/injector/index.d.ts

@@ -1,64 +0,0 @@
-import { StyleResult } from '../utils/renderStyles';
-import { StyleInjector } from './injector';
-import { DisposeFunction, InjectResult, StyleInjectorConfig } from './types';
-declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
-declare global {
-    interface Window {
-        [GLOBAL_INJECTOR_KEY]?: StyleInjector;
-    }
-}
-/**
- * Configure the global style injector
- */
-export declare function configure(config?: Partial<StyleInjectorConfig>): void;
-/**
- * Inject styles and return className with dispose function
- */
-export declare function inject(rules: StyleResult[], options?: {
-    root?: Document | ShadowRoot;
-}): InjectResult;
-/**
- * Inject global CSS rule (legacy method - not supported in direct injector)
- */
-export declare function injectGlobal(selector: string, cssText: string, options?: {
-    root?: Document | ShadowRoot;
-}): DisposeFunction;
-/**
- * Get CSS text from all sheets (for SSR)
- */
-export declare function getCssText(options?: {
-    root?: Document | ShadowRoot;
-}): string;
-/**
- * Collect only CSS used by a rendered subtree (like jest-styled-components).
- * Pass the container returned by render(...).
- */
-export declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment, options?: {
-    root?: Document | ShadowRoot;
-}): string;
-/**
- * Force cleanup of unused rules
- */
-export declare function cleanup(root?: Document | ShadowRoot): void;
-/**
- * Check if we're currently running in a test environment
- */
-export declare function getIsTestEnvironment(): boolean;
-/**
- * Get the global injector instance for debugging
- */
-export declare const injector: {
-    readonly instance: StyleInjector;
-};
-/**
- * Destroy all resources and clean up
- */
-export declare function destroy(root?: Document | ShadowRoot): void;
-/**
- * Create a new isolated injector instance
- */
-export declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, FlattenedRule, KeyframesInfo, UnusedRuleInfo, CacheMetrics, } from './types';
-export { StyleInjector } from './injector';
-export { SheetManager } from './sheet-manager';
-export { flattenNestedCss } from './flatten';