@cube-dev/ui-kit 0.0.0-canary-0692b88 → 0.0.0-canary-72a72ab

package/es/stories/Layout.stories.js

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

package/es/tasty/debug.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0692b88
+ * @cube-dev/ui-kit v0.0.0-canary-72a72ab
  * Released under the MIT license.
  */
 
 /**
  * Debug utilities for inspecting tasty-generated CSS at runtime
  */
-import { getCssTextForNode, injector } from './injector';
+import { getCssText, getCssTextForNode, injector } from './injector';
 /**
  * Pretty-print CSS with proper indentation and formatting
  */
@@ -66,20 +66,6 @@ function prettifyCSS(css) {
  * 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')
      */
@@ -87,119 +73,16 @@ export const tastyDebug = {
         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 });
+        const css = injector.instance.getCssTextForClasses([className]);
         return prettifyCSS(css);
     },
     /**
      * Get CSS for multiple tasty classes
      */
     getCSSForClasses(classNames) {
-        const root = this._resolveRoot();
-        const css = injector.instance.getCssTextForClasses(classNames, { root });
+        const css = injector.instance.getCssTextForClasses(classNames);
         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
      */
@@ -209,14 +92,6 @@ export const tastyDebug = {
         }
         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
@@ -230,16 +105,13 @@ export const tastyDebug = {
      * 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);
+        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, { root });
+        const css = getCssTextForNode(element);
         if (css) {
             const prettified = prettifyCSS(css);
             console.log('Generated CSS:\n' + prettified);
@@ -261,8 +133,7 @@ export const tastyDebug = {
         }
         console.group('🎨 Tasty CSS for element');
         console.log('Element:', element);
-        const root = this._resolveRoot();
-        const css = getCssTextForNode(element, { root });
+        const css = getCssTextForNode(element);
         if (css) {
             const prettified = prettifyCSS(css);
             console.log('Generated CSS:\n' + prettified);
@@ -279,8 +150,7 @@ export const tastyDebug = {
      * Get all tasty CSS currently injected into the page
      */
     getAllCSS() {
-        const root = this._resolveRoot();
-        return injector.instance.getCssText({ root });
+        return getCssText();
     },
     /**
      * Find all tasty classes used in the page (in DOM)
@@ -288,10 +158,7 @@ export const tastyDebug = {
     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]');
+        const elements = document.querySelectorAll('[class]');
         elements.forEach((element) => {
             const classList = element.getAttribute('class');
             if (classList) {
@@ -313,8 +180,7 @@ export const tastyDebug = {
      * 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 registry = injector.instance['sheetManager'].getRegistry(document);
         const classes = new Set();
         // Add all classes from rules map (active + unused)
         if (registry?.rules) {
@@ -337,8 +203,7 @@ export const tastyDebug = {
     getClassUsage() {
         const domClasses = this.findAllTastyClasses();
         const styledClasses = this.findAllStyledClasses();
-        const root = this._resolveRoot();
-        const registry = injector.instance['sheetManager'].getRegistry(root);
+        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)
@@ -372,11 +237,6 @@ export const tastyDebug = {
         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,
@@ -418,7 +278,6 @@ export const tastyDebug = {
         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;
@@ -465,7 +324,7 @@ export const tastyDebug = {
             .split(/\s+/)
             .filter((cls) => /^t\d+$/.test(cls));
         // Get CSS for the entire subtree
-        const fullCSS = getCssTextForNode(element, { root: this._resolveRoot() });
+        const fullCSS = getCssTextForNode(element);
         const prettifiedCSS = prettifyCSS(fullCSS);
         // Count CSS rules in the full CSS
         const ruleCount = (fullCSS.match(/\{[^}]*\}/g) || []).length;
@@ -547,11 +406,11 @@ function isDevelopmentEnvironment() {
 }
 /**
  * Install tastyDebug on window object for easy access in browser console
- * Only in non-production environments unless forced
+ * Only in non-production environments
  */
-export function installGlobalDebug(force = false) {
+export function installGlobalDebug() {
     if (typeof window !== 'undefined' &&
-        (force || isDevelopmentEnvironment()) &&
+        isDevelopmentEnvironment() &&
         window.tastyDebug !== tastyDebug) {
         window.tastyDebug = tastyDebug;
         console.log('🎨 tastyDebug installed on window.\n' +

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0692b88
+ * @cube-dev/ui-kit v0.0.0-canary-72a72ab
  * Released under the MIT license.
  */
 

package/es/tasty/injector/flatten.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0692b88
+ * @cube-dev/ui-kit v0.0.0-canary-72a72ab
  * 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-0692b88
+ * @cube-dev/ui-kit v0.0.0-canary-72a72ab
  * 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-0692b88
+ * @cube-dev/ui-kit v0.0.0-canary-72a72ab
  * Released under the MIT license.
  */
 
@@ -38,16 +38,14 @@ export class StyleInjector {
             };
         }
         // Convert to flattened rules
-        let flattenedRules = this.convertToFlattenedRules(rules);
+        const flattenedRules = this.convertToFlattenedRules(rules);
         // Try to dedupe by className first — if the same class was already inserted, reuse it
         // Only extract className if it looks like a generated tasty className (t + digits)
         const preExtractedClass = this.extractClassName(rules);
         const generatedClass = preExtractedClass && /^t\d+$/.test(preExtractedClass)
             ? preExtractedClass
             : null;
-        if (generatedClass &&
-            registry.rules.has(generatedClass) &&
-            registry.refCounts.has(generatedClass)) {
+        if (generatedClass && registry.rules.has(generatedClass)) {
             const currentRefCount = registry.refCounts.get(generatedClass) || 0;
             registry.refCounts.set(generatedClass, currentRefCount + 1);
             // Update metrics
@@ -81,7 +79,7 @@ export class StyleInjector {
             ? generatedClass
             : generateClassName(registry.classCounter++);
         // If a different pre-extracted class was used in rules, rewrite selectors to the final class
-        let rulesToInsert = generatedClass && generatedClass !== className
+        const rulesToInsert = generatedClass && generatedClass !== className
             ? flattenedRules.map((r) => {
                 if (r.selector.startsWith('.' + generatedClass)) {
                     return {
@@ -92,17 +90,6 @@ export class StyleInjector {
                 return r;
             })
             : flattenedRules;
-        // Normalize any occurrence of :is(<class list>) to plain class reference for stable batching
-        const isWithClasses = /:is\(\s*\.[A-Za-z0-9_-]+(?:\s*,\s*\.[A-Za-z0-9_-]+)*\s*\)/g;
-        rulesToInsert = rulesToInsert.map((r) => {
-            if (isWithClasses.test(r.selector)) {
-                return {
-                    ...r,
-                    selector: r.selector.replace(isWithClasses, `.${className}`),
-                };
-            }
-            return r;
-        });
         // Insert rules using existing sheet manager
         const ruleInfo = this.sheetManager.insertRule(registry, rulesToInsert, className, root);
         if (!ruleInfo) {
@@ -246,44 +233,14 @@ export class StyleInjector {
         const root = options?.root || document;
         const registry = this.sheetManager.getRegistry(root);
         const cssChunks = [];
-        const seenBatchKeys = new Set();
         for (const cls of classNames) {
-            // Include batched rules for this class
-            const keys = registry.classToBatchedKeys.get(cls);
-            if (keys) {
-                for (const key of keys) {
-                    if (seenBatchKeys.has(key))
-                        continue;
-                    const entry = registry.batchedRules.get(key);
-                    const meta = entry || registry.batchedRuleMeta.get(key);
-                    if (entry) {
-                        // Prefer live CSSOM text when available
-                        const sheet = registry.sheets[entry.sheetIndex];
-                        const styleSheet = sheet?.sheet?.sheet;
-                        if (styleSheet && !this.config.forceTextInjection) {
-                            const idx = Math.max(0, Math.min(entry.ruleIndex, styleSheet.cssRules.length - 1));
-                            const rule = styleSheet.cssRules[idx];
-                            if (rule)
-                                cssChunks.push(rule.cssText);
-                        }
-                        else if (entry.currentCssText) {
-                            cssChunks.push(entry.currentCssText);
-                        }
-                        seenBatchKeys.add(key);
-                    }
-                    else if (meta) {
-                        // If meta exists but no entry (e.g., fully cleaned), we can reconstruct CSS if needed
-                        // but skip since there's no active rule in sheet
-                    }
-                }
-            }
-            // Include legacy per-class rules (non-batched)
             const info = registry.rules.get(cls);
             if (info) {
                 if (info.cssText && info.cssText.length) {
                     cssChunks.push(...info.cssText);
                 }
-                else if (info.sheetIndex >= 0) {
+                else {
+                    // Fallback: try to read from live sheet by index range
                     const sheet = registry.sheets[info.sheetIndex];
                     const styleSheet = sheet?.sheet?.sheet;
                     if (styleSheet) {