@cube-dev/ui-kit 0.0.0-canary-2436559 → 0.0.0-canary-58a9848

package/es/providers/TrackingProvider.js

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

package/es/tasty/debug.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 
@@ -236,6 +236,8 @@ export const tastyDebug = {
         const allCSS = this.getAllCSS();
         const activeCSS = this.getCSSForClasses(usage.activeClasses);
         const cachedCSS = this.getCSSForClasses(usage.cachedClasses);
+        const globalCSS = this.getGlobalCSS();
+        const globalBreakdown = this.getGlobalCSSBreakdown();
         const metrics = injector.instance.getMetrics();
         const definedProperties = this.getDefinedProperties();
         const definedKeyframes = this.getDefinedKeyframes();
@@ -250,6 +252,9 @@ export const tastyDebug = {
             activeCSS,
             cachedCSS,
             allCSS,
+            globalCSS,
+            globalCSSSize: globalCSS.length,
+            globalRuleCount: globalBreakdown.totalRules,
             metrics,
             definedProperties,
             definedKeyframes,
@@ -265,6 +270,7 @@ export const tastyDebug = {
         console.log(`💾 CSS Size:`);
         console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
         console.log(`  • Cached CSS: ${summary.cachedCSSSize} characters`);
+        console.log(`  • Global CSS: ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
         console.log(`  • Total CSS: ${summary.totalCSSSize} characters`);
         console.log('🏷️ Properties & Keyframes:');
         console.log(`  • Defined @property: ${definedProperties.length}`);
@@ -568,6 +574,291 @@ export const tastyDebug = {
         });
         console.groupEnd();
     },
+    /**
+     * Get all global CSS rules (non-tasty class selectors)
+     */
+    getGlobalCSS() {
+        const allCSS = this.getAllCSS();
+        // Split CSS into rules and filter out tasty class rules
+        const rules = this.extractCSSRules(allCSS);
+        const globalRules = rules.filter((rule) => {
+            // Filter out rules that only contain tasty classes (t + digits)
+            const selectors = rule.selector.split(',').map((s) => s.trim());
+            return !selectors.every((selector) => {
+                // Check if selector is purely a tasty class or contains only tasty classes
+                const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
+                const parts = cleanSelector.split(/\s+/).filter(Boolean);
+                return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
+            });
+        });
+        const globalCSS = globalRules
+            .map((rule) => `${rule.selector} { ${rule.declarations} }`)
+            .join('\n');
+        return prettifyCSS(globalCSS);
+    },
+    /**
+     * Log global CSS to console
+     */
+    logGlobalCSS() {
+        const globalCSS = this.getGlobalCSS();
+        if (!globalCSS.trim()) {
+            console.log('🌍 No global CSS found');
+            return;
+        }
+        this.logCSS(globalCSS, 'Global CSS (createGlobalStyle)');
+    },
+    /**
+     * Get global CSS rules breakdown with detailed analysis
+     */
+    getGlobalCSSBreakdown() {
+        const allCSS = this.getAllCSS();
+        const rules = this.extractCSSRules(allCSS);
+        const globalRules = rules.filter((rule) => {
+            const selectors = rule.selector.split(',').map((s) => s.trim());
+            return !selectors.every((selector) => {
+                const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
+                const parts = cleanSelector.split(/\s+/).filter(Boolean);
+                return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
+            });
+        });
+        const breakdown = globalRules.map((rule) => ({
+            selector: rule.selector,
+            declarations: rule.declarations,
+            ruleCount: 1,
+        }));
+        const css = globalRules
+            .map((rule) => `${rule.selector} { ${rule.declarations} }`)
+            .join('\n');
+        const prettifiedCSS = prettifyCSS(css);
+        // Analyze selectors
+        const selectors = {
+            elements: [],
+            classes: [],
+            ids: [],
+            pseudoClasses: [],
+            mediaQueries: [],
+            keyframes: [],
+            other: [],
+        };
+        globalRules.forEach((rule) => {
+            const selector = rule.selector;
+            // Categorize selectors
+            if (selector.startsWith('@media')) {
+                selectors.mediaQueries.push(selector);
+            }
+            else if (selector.startsWith('@keyframes')) {
+                selectors.keyframes.push(selector);
+            }
+            else if (selector.includes('.') &&
+                !selector.includes('#') &&
+                !selector.includes(':')) {
+                selectors.classes.push(selector);
+            }
+            else if (selector.includes('#') &&
+                !selector.includes('.') &&
+                !selector.includes(':')) {
+                selectors.ids.push(selector);
+            }
+            else if (selector.includes(':')) {
+                selectors.pseudoClasses.push(selector);
+            }
+            else if (/^[a-zA-Z][a-zA-Z0-9]*$/.test(selector.trim())) {
+                selectors.elements.push(selector);
+            }
+            else {
+                selectors.other.push(selector);
+            }
+        });
+        return {
+            globalRules: breakdown,
+            totalRules: breakdown.length,
+            totalCSSSize: css.length,
+            css: prettifiedCSS,
+            selectors,
+        };
+    },
+    /**
+     * Log detailed global CSS breakdown
+     */
+    logGlobalCSSBreakdown() {
+        const breakdown = this.getGlobalCSSBreakdown();
+        if (breakdown.totalRules === 0) {
+            console.log('🌍 No global CSS rules found');
+            return;
+        }
+        console.group(`🌍 Global CSS Breakdown (${breakdown.totalRules} rules)`);
+        console.log(`📊 Statistics:`);
+        console.log(`  • Total global rules: ${breakdown.totalRules}`);
+        console.log(`  • Total CSS size: ${breakdown.totalCSSSize} characters`);
+        console.log(`🎯 Selector Analysis:`);
+        if (breakdown.selectors.elements.length > 0) {
+            console.log(`  • Element selectors: ${breakdown.selectors.elements.length}`, breakdown.selectors.elements.slice(0, 5));
+        }
+        if (breakdown.selectors.classes.length > 0) {
+            console.log(`  • Class selectors: ${breakdown.selectors.classes.length}`, breakdown.selectors.classes.slice(0, 5));
+        }
+        if (breakdown.selectors.ids.length > 0) {
+            console.log(`  • ID selectors: ${breakdown.selectors.ids.length}`, breakdown.selectors.ids.slice(0, 5));
+        }
+        if (breakdown.selectors.pseudoClasses.length > 0) {
+            console.log(`  • Pseudo-class selectors: ${breakdown.selectors.pseudoClasses.length}`, breakdown.selectors.pseudoClasses.slice(0, 5));
+        }
+        if (breakdown.selectors.mediaQueries.length > 0) {
+            console.log(`  • Media queries: ${breakdown.selectors.mediaQueries.length}`, breakdown.selectors.mediaQueries.slice(0, 3));
+        }
+        if (breakdown.selectors.keyframes.length > 0) {
+            console.log(`  • Keyframe rules: ${breakdown.selectors.keyframes.length}`, breakdown.selectors.keyframes.slice(0, 3));
+        }
+        if (breakdown.selectors.other.length > 0) {
+            console.log(`  • Other selectors: ${breakdown.selectors.other.length}`, breakdown.selectors.other.slice(0, 5));
+        }
+        console.log(`🎨 CSS Output:`);
+        console.log(breakdown.css);
+        console.groupEnd();
+    },
+    /**
+     * Helper to extract CSS rules from raw CSS text
+     */
+    extractCSSRules(css) {
+        const rules = [];
+        // Remove comments
+        let cleanCSS = css.replace(/\/\*[\s\S]*?\*\//g, '');
+        // Enhanced parser that handles nested CSS properly
+        this.parseCSSSafe(cleanCSS, rules);
+        return rules;
+    },
+    /**
+     * Safe CSS parser that handles nested rules properly
+     */
+    parseCSSSafe(css, rules) {
+        let i = 0;
+        while (i < css.length) {
+            // Skip whitespace
+            while (i < css.length && /\s/.test(css[i])) {
+                i++;
+            }
+            if (i >= css.length)
+                break;
+            // Find selector start
+            const selectorStart = i;
+            let braceDepth = 0;
+            let inString = false;
+            let stringChar = '';
+            // Find opening brace for this rule
+            while (i < css.length) {
+                const char = css[i];
+                if (inString) {
+                    if (char === stringChar && css[i - 1] !== '\\') {
+                        inString = false;
+                    }
+                }
+                else {
+                    if (char === '"' || char === "'") {
+                        inString = true;
+                        stringChar = char;
+                    }
+                    else if (char === '{') {
+                        braceDepth++;
+                        if (braceDepth === 1) {
+                            break; // Found opening brace
+                        }
+                    }
+                }
+                i++;
+            }
+            if (i >= css.length)
+                break;
+            const selector = css.substring(selectorStart, i).trim();
+            i++; // Skip opening brace
+            // Find matching closing brace and extract content
+            const contentStart = i;
+            braceDepth = 1;
+            inString = false;
+            while (i < css.length && braceDepth > 0) {
+                const char = css[i];
+                if (inString) {
+                    if (char === stringChar && css[i - 1] !== '\\') {
+                        inString = false;
+                    }
+                }
+                else {
+                    if (char === '"' || char === "'") {
+                        inString = true;
+                        stringChar = char;
+                    }
+                    else if (char === '{') {
+                        braceDepth++;
+                    }
+                    else if (char === '}') {
+                        braceDepth--;
+                    }
+                }
+                i++;
+            }
+            const content = css.substring(contentStart, i - 1).trim();
+            // Check if content has nested rules
+            if (content.includes('{') && content.includes('}')) {
+                // Extract declarations (before any nested rules)
+                const declarationMatch = content.match(/^([^{]*)/);
+                const declarations = declarationMatch ? declarationMatch[1].trim() : '';
+                if (declarations) {
+                    rules.push({ selector, declarations });
+                }
+                // Extract and parse nested rules recursively
+                const nestedStart = content.indexOf('{');
+                if (nestedStart !== -1) {
+                    const nestedCSS = content.substring(nestedStart);
+                    this.parseCSSSafe(nestedCSS, rules);
+                }
+            }
+            else if (content.trim()) {
+                // Simple rule with just declarations
+                rules.push({ selector, declarations: content });
+            }
+        }
+    },
+    /**
+     * Debug method to see raw CSS content and rule parsing
+     */
+    debugRawCSS() {
+        const allCSS = this.getAllCSS();
+        console.group('🔍 Raw CSS Debug');
+        console.log('📝 Raw CSS length:', allCSS.length);
+        console.log('📝 Raw CSS preview (first 2000 chars):');
+        console.log(allCSS.substring(0, 2000));
+        const rules = this.extractCSSRules(allCSS);
+        console.log('📊 Total extracted rules:', rules.length);
+        console.log('📋 First 10 rules:');
+        rules.slice(0, 10).forEach((rule, i) => {
+            console.log(`  ${i + 1}. ${rule.selector}`);
+        });
+        // Show some examples of what gets filtered as tasty vs global
+        const tastyRules = rules.filter((rule) => {
+            const selectors = rule.selector.split(',').map((s) => s.trim());
+            return selectors.every((selector) => {
+                const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
+                const parts = cleanSelector.split(/\s+/).filter(Boolean);
+                return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
+            });
+        });
+        const globalRules = rules.filter((rule) => {
+            const selectors = rule.selector.split(',').map((s) => s.trim());
+            return !selectors.every((selector) => {
+                const cleanSelector = selector.replace(/[.#:\s>+~[\]()]/g, ' ');
+                const parts = cleanSelector.split(/\s+/).filter(Boolean);
+                return parts.length > 0 && parts.every((part) => /^t\d+$/.test(part));
+            });
+        });
+        console.log('🏷️ Tasty class rules found:', tastyRules.length);
+        console.log('🌍 Global rules found:', globalRules.length);
+        if (globalRules.length > 0) {
+            console.log('📋 First 5 global rules:');
+            globalRules.slice(0, 5).forEach((rule, i) => {
+                console.log(`  ${i + 1}. ${rule.selector}`);
+            });
+        }
+        console.groupEnd();
+    },
 };
 /**
  * Check if we're in a development environment at runtime
@@ -592,8 +883,12 @@ export function installGlobalDebug(options) {
         window.tastyDebug = tastyDebug;
         console.log('🎨 tastyDebug installed on window.\n' +
             '💡 Quick start:\n' +
-            '  • tastyDebug.getSummary() - comprehensive overview with properties & keyframes\n' +
+            '  • tastyDebug.getSummary() - comprehensive overview with properties, keyframes & global CSS\n' +
             '  • tastyDebug.inspect(".my-element") - detailed element inspection\n' +
+            '  • tastyDebug.getGlobalCSS() - get all global CSS from createGlobalStyle()\n' +
+            '  • tastyDebug.logGlobalCSS() - log global CSS to console\n' +
+            '  • tastyDebug.logGlobalCSSBreakdown() - detailed global CSS analysis\n' +
+            '  • tastyDebug.debugRawCSS() - debug raw CSS parsing and filtering\n' +
             '  • tastyDebug.getDefinedProperties() - list all @property definitions\n' +
             '  • tastyDebug.getDefinedKeyframes() - list all keyframe definitions\n' +
             '  • tastyDebug.getActiveCSS() / getCachedCSS() - get specific CSS\n' +

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 
@@ -556,9 +556,33 @@ export class StyleInjector {
                     const content = cleanCSS.substring(contentStart, i - 1).trim();
                     // Check if this is an at-rule
                     if (selectorPart.startsWith('@')) {
-                        // This is an at-rule, recursively parse its content
-                        const newAtRuleStack = [...atRuleStack, selectorPart];
-                        this.parseCSS(content, rules, newAtRuleStack, parentSelector);
+                        const atSelector = selectorPart.trim();
+                        // Leaf at-rules that contain declarations directly and should be emitted as-is
+                        const leafAtRules = [
+                            '@font-face',
+                            '@property',
+                            '@page',
+                            '@counter-style',
+                            '@font-feature-values',
+                            '@font-palette-values',
+                            '@color-profile',
+                        ];
+                        const isLeafAtRule = leafAtRules.some((prefix) => atSelector.startsWith(prefix));
+                        if (isLeafAtRule) {
+                            // Emit the at-rule with its declarations directly
+                            if (content.trim()) {
+                                rules.push({
+                                    selector: atSelector,
+                                    declarations: content,
+                                    atRules: atRuleStack.length > 0 ? [...atRuleStack] : undefined,
+                                });
+                            }
+                        }
+                        else {
+                            // Wrapper at-rule (e.g., @media, @supports, @keyframes) — parse its content
+                            const newAtRuleStack = [...atRuleStack, atSelector];
+                            this.parseCSS(content, rules, newAtRuleStack, parentSelector);
+                        }
                     }
                     else {
                         // Check if content contains nested rules (has { and })

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 

package/es/tasty/parser/classify.js

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

package/es/tasty/parser/parser.js

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

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */
 

package/es/tasty/styles/createStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2436559
+ * @cube-dev/ui-kit v0.0.0-canary-58a9848
  * Released under the MIT license.
  */