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

package/es/icons/UserIcon.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/icons/UserLockIcon.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/icons/ViewIcon.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/icons/WarningFilledIcon.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/icons/WarningIcon.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/icons/add-new-icon.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/icons/index.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/icons/wrap-icon.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/index.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/provider.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/providers/TrackingProvider.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/services/notification.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/shared/form.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/shared/index.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/stories/Form.legacy-stories.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/stories/FormFieldArgs.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/stories/Layout.stories.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/stories/Tasty.stories.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/stories/components/ConfirmDeletionDialogForm.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/stories/components/DialogFormApp.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/stories/components/StyledButton.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/stories/lists/baseProps.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.
  */
 
@@ -26,7 +26,6 @@ export const baseProps = [
     'style',
     'styles',
     'css',
-    'styleName',
     'hidden',
     'disabled',
     'mods',

package/es/tasty/debug.js

@@ -0,0 +1,431 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
+ * Released under the MIT license.
+ */
+
+/**
+ * Debug utilities for inspecting tasty-generated CSS at runtime
+ */
+import { getCssText, 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 = {
+    /**
+     * 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 css = injector.instance.getCssTextForClasses([className]);
+        return prettifyCSS(css);
+    },
+    /**
+     * Get CSS for multiple tasty classes
+     */
+    getCSSForClasses(classNames) {
+        const css = injector.instance.getCssTextForClasses(classNames);
+        return prettifyCSS(css);
+    },
+    /**
+     * 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}"`);
+    },
+    /**
+     * 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 element = document.querySelector(selector);
+        if (!element) {
+            return `Element not found: ${selector}`;
+        }
+        console.group(`🎨 Tasty CSS for "${selector}"`);
+        console.log('Element:', element);
+        const css = getCssTextForNode(element);
+        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 css = getCssTextForNode(element);
+        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() {
+        return getCssText();
+    },
+    /**
+     * Find all tasty classes used in the page (in DOM)
+     */
+    findAllTastyClasses() {
+        const classes = new Set();
+        // Find all elements with class attributes
+        const elements = 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 registry = injector.instance['sheetManager'].getRegistry(document);
+        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 registry = injector.instance['sheetManager'].getRegistry(document);
+        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 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('ℹ️  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);
+        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
+ */
+export function installGlobalDebug() {
+    if (typeof window !== 'undefined' &&
+        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-1d46daa
+ * @cube-dev/ui-kit v0.0.0-canary-736d057
  * 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';