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

package/es/tasty/debug.js

@@ -0,0 +1,572 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-7f29fb4
+ * Released under the MIT license.
+ */
+
+/**
+ * Debug utilities for inspecting tasty-generated CSS at runtime
+ */
+import { getCssTextForNode, injector } from './injector';
+/**
+ * Pretty-print CSS with proper indentation and formatting
+ */
+function prettifyCSS(css) {
+    if (!css || css.trim() === '') {
+        return '';
+    }
+    // First, normalize whitespace but preserve structure
+    let formatted = css.replace(/\s+/g, ' ').trim();
+    // Add newlines after opening braces
+    formatted = formatted.replace(/\s*\{\s*/g, ' {\n');
+    // Add newlines after semicolons (but not inside strings or functions)
+    formatted = formatted.replace(/;(?![^"']*["'][^"']*$)(?![^()]*\))/g, ';\n');
+    // Add newlines before closing braces
+    formatted = formatted.replace(/\s*\}\s*/g, '\n}\n');
+    // Handle comma-separated selectors (only outside of property values)
+    // This regex looks for commas that are:
+    // 1. Not inside quotes
+    // 2. Not inside parentheses (CSS functions)
+    // 3. Not followed by a colon (not in a property value)
+    formatted = formatted.replace(/,(?![^"']*["'][^"']*$)(?![^()]*\))(?=.*:.*\{|.*\{)/g, ',\n');
+    // Process line by line for proper indentation
+    const lines = formatted.split('\n');
+    let indentLevel = 0;
+    const indentSize = 2;
+    const formattedLines = lines.map((line) => {
+        const trimmed = line.trim();
+        if (!trimmed)
+            return '';
+        // Handle closing braces - decrease indent first
+        if (trimmed === '}') {
+            indentLevel = Math.max(0, indentLevel - 1);
+            return ' '.repeat(indentLevel * indentSize) + trimmed;
+        }
+        // Current line with proper indentation
+        const indent = ' '.repeat(indentLevel * indentSize);
+        let result = indent + trimmed;
+        // Handle opening braces - increase indent for next line
+        if (trimmed.endsWith('{')) {
+            indentLevel++;
+        }
+        return result;
+    });
+    // Clean up the result and ensure proper spacing
+    let result = formattedLines
+        .filter((line) => line.trim()) // Remove empty lines
+        .join('\n')
+        .replace(/\n{3,}/g, '\n\n') // Max 2 consecutive newlines
+        .trim();
+    // Final cleanup: ensure single spaces in function calls
+    result = result.replace(/,\s+/g, ', ');
+    return result;
+}
+/**
+ * Debug utilities for inspecting tasty styles in runtime applications
+ */
+export const tastyDebug = {
+    /** Resolve the document where tasty styles live (handles Storybook iframe). */
+    _resolveRoot() {
+        if (typeof document !== 'undefined') {
+            if (document.querySelector('style[data-tasty]'))
+                return document;
+            const iframe = document.getElementById('storybook-preview-iframe') ||
+                document.querySelector('iframe#storybook-preview-iframe') ||
+                document.querySelector('iframe');
+            if (iframe?.contentDocument?.querySelector?.('style[data-tasty]')) {
+                return iframe.contentDocument;
+            }
+        }
+        return document;
+    },
+    /**
+     * Get CSS for a specific tasty class (e.g., 't24')
+     */
+    getCSSForClass(className) {
+        if (!className.match(/^t\d+$/)) {
+            console.warn(`"${className}" doesn't look like a tasty class. Expected format: t{number}`);
+        }
+        const root = this._resolveRoot();
+        const css = injector.instance.getCssTextForClasses([className], { root });
+        return prettifyCSS(css);
+    },
+    /**
+     * Get CSS for multiple tasty classes
+     */
+    getCSSForClasses(classNames) {
+        const root = this._resolveRoot();
+        const css = injector.instance.getCssTextForClasses(classNames, { root });
+        return prettifyCSS(css);
+    },
+    /**
+     * Get detailed batched selector groups that affect a specific tasty class.
+     * Includes selector, declarations, at-rules and the full class list in the group.
+     */
+    getBatchedGroupsForClass(className) {
+        const root = this._resolveRoot();
+        const registry = injector.instance['sheetManager'].getRegistry(root);
+        if (!registry?.classToBatchedKeys)
+            return [];
+        const result = [];
+        const keys = registry.classToBatchedKeys.get(className);
+        if (!keys)
+            return [];
+        for (const key of keys) {
+            const entry = registry.batchedRules.get(key);
+            const meta = registry.batchedRuleMeta?.get(key);
+            if (!entry && !meta)
+                continue;
+            // Read CSS text from CSSOM when possible, otherwise from cached text
+            let css = '';
+            let selector = '';
+            let declarations = '';
+            let atRules = undefined;
+            let classes = [];
+            if (entry) {
+                const sheet = registry.sheets[entry.sheetIndex];
+                const styleSheet = sheet?.sheet?.sheet;
+                if (styleSheet) {
+                    const idx = Math.max(0, Math.min(entry.ruleIndex, styleSheet.cssRules.length - 1));
+                    const rule = styleSheet.cssRules[idx];
+                    css = rule?.cssText || entry.currentCssText || '';
+                }
+                else {
+                    css = entry.currentCssText || '';
+                }
+                declarations = entry.declarations || '';
+                atRules =
+                    entry.atRules && entry.atRules.length
+                        ? [...entry.atRules]
+                        : undefined;
+                const classArr = Array.from(entry.classNames || new Set());
+                classes = classArr.sort((a, b) => parseInt(a.slice(1)) - parseInt(b.slice(1)));
+            }
+            else if (meta) {
+                // If only meta exists, we still can present declarations/atRules
+                css = '';
+                declarations = meta.declarations || '';
+                atRules =
+                    meta.atRules && meta.atRules.length
+                        ? [...meta.atRules]
+                        : undefined;
+                classes = [];
+            }
+            // Try to extract selector from css text if available
+            if (!selector && css.includes('{')) {
+                selector = css.split('{', 1)[0].trim();
+            }
+            result.push({ selector, declarations, atRules, classes, css });
+        }
+        return result;
+    },
+    /**
+     * List classes that participate in at least one batched group
+     */
+    findClassesWithBatches() {
+        const root = this._resolveRoot();
+        const registry = injector.instance['sheetManager'].getRegistry(root);
+        if (!registry?.classToBatchedKeys)
+            return [];
+        const entries = Array.from(registry.classToBatchedKeys.entries());
+        return entries
+            .filter(([, keys]) => keys && keys.size > 0)
+            .map(([cls]) => cls)
+            .sort((a, b) => parseInt(a.slice(1)) - parseInt(b.slice(1)));
+    },
+    /**
+     * List a brief summary of existing batched groups
+     */
+    listBatchedGroups(limit = 50) {
+        const root = this._resolveRoot();
+        const registry = injector.instance['sheetManager'].getRegistry(root);
+        if (!registry?.batchedRules)
+            return [];
+        const out = [];
+        for (const [key, entry] of registry.batchedRules.entries()) {
+            out.push({
+                key,
+                size: entry.classNames ? entry.classNames.size : 0,
+                sampleSelector: (() => {
+                    const sheet = registry.sheets[entry.sheetIndex];
+                    const cssText = sheet?.sheet?.sheet?.cssRules?.[entry.ruleIndex]?.cssText ||
+                        entry.currentCssText ||
+                        '';
+                    return cssText.split('{', 1)[0].trim();
+                })(),
+            });
+            if (out.length >= limit)
+                break;
+        }
+        return out.sort((a, b) => b.size - a.size);
+    },
+    /**
+     * Log CSS for a specific tasty class (e.g., 't24') to console
+     */
+    logCSSForClass(className) {
+        if (!className.match(/^t\d+$/)) {
+            console.warn(`"${className}" doesn't look like a tasty class. Expected format: t{number}`);
+        }
+        const css = this.getCSSForClass(className);
+        this.logCSS(css, `CSS for class "${className}"`);
+        const groups = this.getBatchedGroupsForClass(className);
+        if (groups.length) {
+            console.group('🔗 Batched selector groups');
+            for (const g of groups) {
+                console.log(`${g.selector} { ${g.declarations} }  // classes: ${g.classes.join(', ')}`);
+            }
+            console.groupEnd();
+        }
+    },
+    /**
+     * Log CSS for multiple tasty classes to console
+     */
+    logCSSForClasses(classNames) {
+        const css = this.getCSSForClasses(classNames);
+        const title = `CSS for classes [${classNames.join(', ')}]`;
+        this.logCSS(css, title);
+    },
+    /**
+     * Inspect an element by CSS selector and get its tasty CSS
+     */
+    inspectElement(selector) {
+        const root = this._resolveRoot();
+        const element = root.querySelector
+            ? root.querySelector(selector)
+            : document.querySelector(selector);
+        if (!element) {
+            return `Element not found: ${selector}`;
+        }
+        console.group(`🎨 Tasty CSS for "${selector}"`);
+        console.log('Element:', element);
+        const css = getCssTextForNode(element, { root });
+        if (css) {
+            const prettified = prettifyCSS(css);
+            console.log('Generated CSS:\n' + prettified);
+            console.groupEnd();
+            return prettified;
+        }
+        else {
+            console.log('No tasty CSS found for this element');
+            console.groupEnd();
+            return 'No tasty CSS found';
+        }
+    },
+    /**
+     * Inspect a DOM element directly and get its tasty CSS
+     */
+    inspectDOMElement(element) {
+        if (!element) {
+            return 'Element is null or undefined';
+        }
+        console.group('🎨 Tasty CSS for element');
+        console.log('Element:', element);
+        const root = this._resolveRoot();
+        const css = getCssTextForNode(element, { root });
+        if (css) {
+            const prettified = prettifyCSS(css);
+            console.log('Generated CSS:\n' + prettified);
+            console.groupEnd();
+            return prettified;
+        }
+        else {
+            console.log('No tasty CSS found for this element');
+            console.groupEnd();
+            return 'No tasty CSS found';
+        }
+    },
+    /**
+     * Get all tasty CSS currently injected into the page
+     */
+    getAllCSS() {
+        const root = this._resolveRoot();
+        return injector.instance.getCssText({ root });
+    },
+    /**
+     * Find all tasty classes used in the page (in DOM)
+     */
+    findAllTastyClasses() {
+        const classes = new Set();
+        // Find all elements with class attributes
+        const root = this._resolveRoot();
+        const elements = root.querySelectorAll
+            ? root.querySelectorAll('[class]')
+            : document.querySelectorAll('[class]');
+        elements.forEach((element) => {
+            const classList = element.getAttribute('class');
+            if (classList) {
+                // Extract tasty classes (t + digits)
+                const tastyClasses = classList
+                    .split(/\s+/)
+                    .filter((cls) => /^t\d+$/.test(cls));
+                tastyClasses.forEach((cls) => classes.add(cls));
+            }
+        });
+        return Array.from(classes).sort((a, b) => {
+            // Sort numerically by the number part
+            const aNum = parseInt(a.slice(1));
+            const bNum = parseInt(b.slice(1));
+            return aNum - bNum;
+        });
+    },
+    /**
+     * Find all tasty classes that have styles in the stylesheet (used + unused)
+     */
+    findAllStyledClasses() {
+        const root = this._resolveRoot();
+        const registry = injector.instance['sheetManager'].getRegistry(root);
+        const classes = new Set();
+        // Add all classes from rules map (active + unused)
+        if (registry?.rules) {
+            for (const className of registry.rules.keys()) {
+                if (/^t\d+$/.test(className)) {
+                    classes.add(className);
+                }
+            }
+        }
+        return Array.from(classes).sort((a, b) => {
+            // Sort numerically by the number part
+            const aNum = parseInt(a.slice(1));
+            const bNum = parseInt(b.slice(1));
+            return aNum - bNum;
+        });
+    },
+    /**
+     * Get active vs cached class breakdown
+     */
+    getClassUsage() {
+        const domClasses = this.findAllTastyClasses();
+        const styledClasses = this.findAllStyledClasses();
+        const root = this._resolveRoot();
+        const registry = injector.instance['sheetManager'].getRegistry(root);
+        const activeClasses = domClasses;
+        const cachedClasses = styledClasses.filter((cls) => !domClasses.includes(cls));
+        // Also check unusedRules registry for classes that are marked as cached (unused but kept for performance)
+        if (registry?.unusedRules) {
+            for (const className of registry.unusedRules.keys()) {
+                if (/^t\d+$/.test(className) && !cachedClasses.includes(className)) {
+                    cachedClasses.push(className);
+                }
+            }
+        }
+        return {
+            activeClasses: activeClasses.sort((a, b) => {
+                const aNum = parseInt(a.slice(1));
+                const bNum = parseInt(b.slice(1));
+                return aNum - bNum;
+            }),
+            cachedClasses: cachedClasses.sort((a, b) => {
+                const aNum = parseInt(a.slice(1));
+                const bNum = parseInt(b.slice(1));
+                return aNum - bNum;
+            }),
+            totalStyledClasses: styledClasses,
+        };
+    },
+    /**
+     * Get a comprehensive summary of all tasty styles
+     */
+    getSummary() {
+        const usage = this.getClassUsage();
+        const allCSS = this.getAllCSS();
+        const activeCSS = this.getCSSForClasses(usage.activeClasses);
+        const cachedCSS = this.getCSSForClasses(usage.cachedClasses);
+        const metrics = injector.instance.getMetrics();
+        const root = this._resolveRoot();
+        const registry = injector.instance['sheetManager'].getRegistry(root);
+        const batchedGroupCount = registry?.batchedRules
+            ? registry.batchedRules.size
+            : 0;
+        const summary = {
+            activeClasses: usage.activeClasses,
+            cachedClasses: usage.cachedClasses,
+            totalStyledClasses: usage.totalStyledClasses,
+            activeCSSSize: activeCSS.length,
+            cachedCSSSize: cachedCSS.length,
+            totalCSSSize: allCSS.length,
+            activeCSS,
+            cachedCSS,
+            allCSS,
+            metrics,
+        };
+        console.group('🎨 Comprehensive Tasty Debug Summary');
+        console.log(`📊 Style Cache Status:`);
+        console.log(`  • Active classes (in DOM): ${summary.activeClasses.length}`);
+        console.log(`  • Cached classes (performance cache): ${summary.cachedClasses.length}`);
+        console.log(`  • Total styled classes: ${summary.totalStyledClasses.length}`);
+        console.log(`💾 CSS Size:`);
+        console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
+        console.log(`  • Cached CSS: ${summary.cachedCSSSize} characters`);
+        console.log(`  • Total CSS: ${summary.totalCSSSize} characters`);
+        console.log(`⚡ Performance Metrics:`);
+        if (metrics) {
+            console.log(`  • Cache hits: ${metrics.hits}`);
+            console.log(`  • Cache misses: ${metrics.misses}`);
+            console.log(`  • Cached style reuses: ${metrics.unusedHits}`);
+            console.log(`  • Total insertions: ${metrics.totalInsertions}`);
+            console.log(`  • Styles cleaned up: ${metrics.stylesCleanedUp}`);
+            const hitRate = metrics.hits + metrics.misses > 0
+                ? (((metrics.hits + metrics.unusedHits) /
+                    (metrics.hits + metrics.misses)) *
+                    100).toFixed(1)
+                : 0;
+            console.log(`  • Overall cache hit rate: ${hitRate}%`);
+        }
+        else {
+            console.log(`  • Metrics not available (enable with collectMetrics: true)`);
+        }
+        console.log('🔍 Details:');
+        console.log('  • Active classes:', summary.activeClasses);
+        console.log('  • Cached classes:', summary.cachedClasses);
+        console.log(`  • Batched groups: ${batchedGroupCount}`);
+        console.log('ℹ️  Note: Cached styles are kept for performance - avoiding expensive DOM operations');
+        console.groupEnd();
+        return summary;
+    },
+    /**
+     * Helper to log CSS in a readable format
+     */
+    logCSS(css, title = 'CSS') {
+        if (!css || css.trim() === '') {
+            console.log(`${title}: (empty)`);
+            return;
+        }
+        console.group(`🎨 ${title}`);
+        const prettified = prettifyCSS(css);
+        console.log(prettified);
+        console.groupEnd();
+    },
+    /**
+     * Advanced inspection with detailed breakdown and statistics
+     */
+    inspect(target) {
+        const element = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!element) {
+            console.error(`Element not found: ${target}`);
+            return {
+                element: null,
+                tastyClasses: [],
+                css: '',
+                cssSize: 0,
+                ruleCount: 0,
+                breakdown: {},
+                stats: {
+                    totalClasses: 0,
+                    totalRules: 0,
+                    totalCSSSize: 0,
+                    averageRulesPerClass: 0,
+                    averageCSSPerClass: 0,
+                },
+            };
+        }
+        // Find tasty classes on this element
+        const classList = element.getAttribute('class') || '';
+        const tastyClasses = classList
+            .split(/\s+/)
+            .filter((cls) => /^t\d+$/.test(cls));
+        // Get CSS for the entire subtree
+        const fullCSS = getCssTextForNode(element, { root: this._resolveRoot() });
+        const prettifiedCSS = prettifyCSS(fullCSS);
+        // Count CSS rules in the full CSS
+        const ruleCount = (fullCSS.match(/\{[^}]*\}/g) || []).length;
+        // Get CSS breakdown per class with detailed stats
+        const breakdown = {};
+        let totalClassRules = 0;
+        let totalClassCSSSize = 0;
+        tastyClasses.forEach((className) => {
+            const classCSS = this.getCSSForClass(className);
+            const classRuleCount = (classCSS.match(/\{[^}]*\}/g) || []).length;
+            breakdown[className] = {
+                css: classCSS,
+                cssSize: classCSS.length,
+                ruleCount: classRuleCount,
+            };
+            totalClassRules += classRuleCount;
+            totalClassCSSSize += classCSS.length;
+        });
+        // Calculate statistics
+        const stats = {
+            totalClasses: tastyClasses.length,
+            totalRules: totalClassRules,
+            totalCSSSize: totalClassCSSSize,
+            averageRulesPerClass: tastyClasses.length > 0 ? totalClassRules / tastyClasses.length : 0,
+            averageCSSPerClass: tastyClasses.length > 0 ? totalClassCSSSize / tastyClasses.length : 0,
+        };
+        const result = {
+            element,
+            tastyClasses,
+            css: prettifiedCSS,
+            cssSize: fullCSS.length,
+            ruleCount,
+            breakdown,
+            stats,
+        };
+        console.group(`🔍 Detailed Tasty Inspection`);
+        console.log('Element:', element);
+        console.log('📊 Overview:');
+        console.log(`  • Tasty classes: ${stats.totalClasses}`);
+        console.log(`  • Total rules applied: ${ruleCount}`);
+        console.log(`  • Total CSS size: ${fullCSS.length} characters`);
+        console.log('🏷️ Classes:', tastyClasses);
+        console.log('📈 Statistics:');
+        console.log(`  • Rules per class (avg): ${stats.averageRulesPerClass.toFixed(1)}`);
+        console.log(`  • CSS per class (avg): ${stats.averageCSSPerClass.toFixed(0)} chars`);
+        console.log('🎨 Element CSS:\n' + prettifiedCSS);
+        console.log('🔨 CSS breakdown by class:');
+        Object.entries(breakdown).forEach(([className, data]) => {
+            console.log(`  ${className}: ${data.ruleCount} rules, ${data.cssSize} chars`);
+        });
+        console.groupEnd();
+        return result;
+    },
+    /**
+     * Get CSS for active classes only
+     */
+    getActiveCSS() {
+        const usage = this.getClassUsage();
+        return this.getCSSForClasses(usage.activeClasses);
+    },
+    /**
+     * Get CSS for cached classes only
+     */
+    getCachedCSS() {
+        const usage = this.getClassUsage();
+        return this.getCSSForClasses(usage.cachedClasses);
+    },
+};
+/**
+ * Check if we're in a development environment at runtime
+ * Uses bracket notation to avoid bundler compilation
+ */
+function isDevelopmentEnvironment() {
+    if (typeof process === 'undefined')
+        return false;
+    // Use bracket notation to avoid bundler replacement
+    const nodeEnv = process.env?.['NODE_ENV'];
+    return nodeEnv === 'development' || nodeEnv !== 'production';
+}
+/**
+ * Install tastyDebug on window object for easy access in browser console
+ * Only in non-production environments unless forced
+ */
+export function installGlobalDebug(force = false) {
+    if (typeof window !== 'undefined' &&
+        (force || isDevelopmentEnvironment()) &&
+        window.tastyDebug !== tastyDebug) {
+        window.tastyDebug = tastyDebug;
+        console.log('🎨 tastyDebug installed on window.\n' +
+            '💡 Quick start:\n' +
+            '  • tastyDebug.getSummary() - comprehensive overview\n' +
+            '  • tastyDebug.inspect(".my-element") - detailed element inspection\n' +
+            '  • tastyDebug.findClassGaps() - find missing class numbers\n' +
+            '  • tastyDebug.getActiveCSS() / getCachedCSS() - get specific CSS');
+    }
+}
+/**
+ * Auto-install in development
+ */
+if (typeof window !== 'undefined' && isDevelopmentEnvironment()) {
+    installGlobalDebug();
+}
+
+        

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-da1f163
+ * @cube-dev/ui-kit v0.0.0-canary-7f29fb4
  * Released under the MIT license.
  */
 
@@ -18,5 +18,7 @@ export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
 export * from './utils/getDisplayName';
+export * from './injector';
+export * from './debug';