@cube-dev/ui-kit 0.74.2 → 0.75.0

package/types/tasty/debug.d.ts

@@ -0,0 +1,250 @@
+/**
+ * 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 (in DOM)
+     */
+    findAllTastyClasses(): string[];
+    /**
+     * Find all tasty classes that have styles in the stylesheet (used + unused)
+     */
+    findAllStyledClasses(): string[];
+    /**
+     * Get active vs cached class breakdown
+     */
+    getClassUsage(): {
+        activeClasses: string[];
+        cachedClasses: string[];
+        totalStyledClasses: string[];
+    };
+    /**
+     * Get a comprehensive summary of all tasty styles
+     */
+    getSummary(): {
+        activeClasses: string[];
+        cachedClasses: string[];
+        totalStyledClasses: string[];
+        activeCSSSize: number;
+        cachedCSSSize: number;
+        totalCSSSize: number;
+        activeCSS: string;
+        cachedCSS: string;
+        allCSS: string;
+        globalCSS: string;
+        globalCSSSize: number;
+        globalRuleCount: number;
+        metrics: any;
+        definedProperties: string[];
+        definedKeyframes: {
+            name: string;
+            refCount: number;
+            cssText?: string;
+        }[];
+        propertyCount: number;
+        keyframeCount: number;
+        cleanupSummary: {
+            enabled: boolean;
+            totalCleanups: number;
+            totalClassesDeleted: number;
+            totalCssDeleted: number;
+            totalRulesDeleted: number;
+            averageClassesPerCleanup: number;
+            averageCssPerCleanup: number;
+            averageRulesPerCleanup: number;
+            lastCleanup?: {
+                timestamp: number;
+                date: string;
+                classesDeleted: number;
+                cssSize: number;
+                rulesDeleted: number;
+            };
+        };
+    };
+    /**
+     * Helper to log CSS in a readable format
+     */
+    logCSS(css: string, title?: string): void;
+    /**
+     * Advanced inspection with detailed breakdown and statistics
+     */
+    inspect(target: string | Element): {
+        element: Element | null;
+        tastyClasses: string[];
+        css: string;
+        cssSize: number;
+        ruleCount: number;
+        breakdown: {
+            [className: string]: {
+                css: string;
+                cssSize: number;
+                ruleCount: number;
+            };
+        };
+        stats: {
+            totalClasses: number;
+            totalRules: number;
+            totalCSSSize: number;
+            averageRulesPerClass: number;
+            averageCSSPerClass: number;
+        };
+    };
+    /**
+     * Get CSS for active classes only
+     */
+    getActiveCSS(): string;
+    /**
+     * Get CSS for cached classes only
+     */
+    getCachedCSS(): string;
+    /**
+     * Get all defined @property custom properties
+     */
+    getDefinedProperties(): string[];
+    /**
+     * Get all defined keyframes
+     */
+    getDefinedKeyframes(): {
+        name: string;
+        refCount: number;
+        cssText?: string;
+    }[];
+    /**
+     * Check if a specific @property is defined
+     */
+    isPropertyDefined(propertyName: string): boolean;
+    /**
+     * Check if a specific keyframe is defined
+     */
+    isKeyframeDefined(keyframeName: string): boolean;
+    /**
+     * Get detailed cleanup statistics history
+     */
+    getCleanupHistory(): {
+        totalCleanups: number;
+        totalClassesDeleted: number;
+        totalCssDeleted: number;
+        totalRulesDeleted: number;
+        cleanupHistory: Array<{
+            timestamp: number;
+            date: string;
+            classesDeleted: number;
+            cssSize: number;
+            rulesDeleted: number;
+        }>;
+    };
+    /**
+     * Get cleanup statistics summary
+     */
+    getCleanupSummary(): {
+        enabled: boolean;
+        totalCleanups: number;
+        totalClassesDeleted: number;
+        totalCssDeleted: number;
+        totalRulesDeleted: number;
+        averageClassesPerCleanup: number;
+        averageCssPerCleanup: number;
+        averageRulesPerCleanup: number;
+        lastCleanup?: {
+            timestamp: number;
+            date: string;
+            classesDeleted: number;
+            cssSize: number;
+            rulesDeleted: number;
+        };
+    };
+    /**
+     * Log cleanup history to console in a readable format
+     */
+    logCleanupHistory(): void;
+    /**
+     * Get all global CSS rules (non-tasty class selectors)
+     */
+    getGlobalCSS(): string;
+    /**
+     * Log global CSS to console
+     */
+    logGlobalCSS(): void;
+    /**
+     * Get global CSS rules breakdown with detailed analysis
+     */
+    getGlobalCSSBreakdown(): {
+        globalRules: Array<{
+            selector: string;
+            declarations: string;
+            ruleCount: number;
+        }>;
+        totalRules: number;
+        totalCSSSize: number;
+        css: string;
+        selectors: {
+            elements: string[];
+            classes: string[];
+            ids: string[];
+            pseudoClasses: string[];
+            mediaQueries: string[];
+            keyframes: string[];
+            other: string[];
+        };
+    };
+    /**
+     * Log detailed global CSS breakdown
+     */
+    logGlobalCSSBreakdown(): void;
+    /**
+     * Helper to extract CSS rules from raw CSS text
+     */
+    extractCSSRules(css: string): Array<{
+        selector: string;
+        declarations: string;
+    }>;
+    /**
+     * Safe CSS parser that handles nested rules properly
+     */
+    parseCSSSafe(css: string, rules: Array<{
+        selector: string;
+        declarations: string;
+    }>): void;
+    /**
+     * Debug method to see raw CSS content and rule parsing
+     */
+    debugRawCSS(): void;
+};
+/**
+ * Install tastyDebug on window object for easy access in browser console
+ * Only in non-production environments
+ */
+export declare function installGlobalDebug(options?: {
+    force?: boolean;
+}): void;

package/types/tasty/index.d.ts

@@ -11,6 +11,8 @@ export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
 export * from './utils/getDisplayName';
+export * from './injector';
+export * from './debug';
 export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
 export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

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

@@ -0,0 +1,71 @@
+import { StyleResult } from '../utils/renderStyles';
+import { StyleInjector } from './injector';
+import { 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 keyframes and return object with toString() and dispose()
+ */
+export declare function keyframes(steps: import('./types').KeyframesSteps, nameOrOptions?: string | {
+    root?: Document | ShadowRoot;
+    name?: string;
+}): import('./types').KeyframesResult;
+/**
+ * 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;
+/**
+ * Create a global style component like styled-components createGlobalStyle
+ * Returns a React component that injects global styles when mounted and cleans up when unmounted
+ */
+export declare function createGlobalStyle<Props = {}>(strings: TemplateStringsArray, ...interpolations: Array<string | number | ((props: Props) => string | number)>): import('react').ComponentType<Props & {
+    root?: Document | ShadowRoot;
+}>;
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, UnusedRuleInfo, CacheMetrics, } from './types';
+export { StyleInjector } from './injector';
+export { SheetManager } from './sheet-manager';

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

@@ -0,0 +1,109 @@
+/**
+ * Style injector that works with structured style objects
+ * Eliminates CSS string parsing for better performance
+ */
+import { StyleResult } from '../utils/renderStyles';
+import { InjectResult, KeyframesResult, KeyframesSteps, StyleInjectorConfig } from './types';
+import type { ComponentType } from 'react';
+export declare class StyleInjector {
+    private sheetManager;
+    private config;
+    private cleanupScheduled;
+    constructor(config?: StyleInjectorConfig);
+    /**
+     * Inject styles from StyleResult objects
+     */
+    inject(rules: StyleResult[], options?: {
+        root?: Document | ShadowRoot;
+    }): InjectResult;
+    /**
+     * Extract className from rules (assumes first rule contains the base className)
+     */
+    private extractClassName;
+    /**
+     * Generate cache key from style rules with optimized deduplication
+     */
+    private generateCacheKey;
+    /**
+     * Dispose of a className
+     */
+    private dispose;
+    /**
+     * Cleanup unused rules
+     */
+    cleanup(root?: Document | ShadowRoot): void;
+    /**
+     * Force bulk cleanup of unused styles
+     */
+    forceBulkCleanup(root?: Document | ShadowRoot): void;
+    /**
+     * Get CSS text from all sheets (for SSR)
+     */
+    getCssText(options?: {
+        root?: Document | ShadowRoot;
+    }): string;
+    /**
+     * Get CSS only for the provided tasty classNames (e.g., ["t0","t3"])
+     */
+    getCssTextForClasses(classNames: Iterable<string>, options?: {
+        root?: Document | ShadowRoot;
+    }): string;
+    /**
+     * Get cache performance metrics
+     */
+    getMetrics(options?: {
+        root?: Document | ShadowRoot;
+    }): any;
+    /**
+     * Reset cache performance metrics
+     */
+    resetMetrics(options?: {
+        root?: Document | ShadowRoot;
+    }): void;
+    /**
+     * Force cleanup of unused styles (useful for memory pressure)
+     */
+    forceCleanupUnused(options?: {
+        root?: Document | ShadowRoot;
+    }): void;
+    /**
+     * Define a CSS @property custom property
+     * Example:
+     * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
+     * Note: No caching or dispose — this defines a global property.
+     */
+    property(name: string, options?: {
+        syntax?: string;
+        inherits?: boolean;
+        initialValue?: string | number;
+        root?: Document | ShadowRoot;
+    }): void;
+    /**
+     * Check whether a given @property name was already injected by this injector
+     */
+    isPropertyDefined(name: string, options?: {
+        root?: Document | ShadowRoot;
+    }): boolean;
+    /**
+     * Inject keyframes and return object with toString() and dispose()
+     */
+    keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
+        root?: Document | ShadowRoot;
+        name?: string;
+    }): KeyframesResult;
+    /**
+     * Dispose keyframes
+     */
+    private disposeKeyframes;
+    /**
+     * Destroy all resources for a root
+     */
+    destroy(root?: Document | ShadowRoot): void;
+    /**
+     * Create a global style component like styled-components createGlobalStyle
+     * Returns a React component that injects global styles when mounted and cleans up when unmounted
+     */
+    createGlobalStyle<Props = {}>(strings: TemplateStringsArray, ...interpolations: Array<string | number | ((props: Props) => string | number)>): ComponentType<Props & {
+        root?: Document | ShadowRoot;
+    }>;
+}

package/types/tasty/injector/sheet-manager.d.ts

@@ -0,0 +1,94 @@
+import { CacheMetrics, KeyframesInfo, KeyframesSteps, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
+export declare class SheetManager {
+    private rootRegistries;
+    private config;
+    constructor(config: StyleInjectorConfig);
+    /**
+     * Get or create registry for a root (Document or ShadowRoot)
+     */
+    getRegistry(root: Document | ShadowRoot): RootRegistry;
+    /**
+     * Create a new stylesheet for the registry
+     */
+    createSheet(registry: RootRegistry, root: Document | ShadowRoot): SheetInfo;
+    /**
+     * Create a style element and append to document
+     */
+    private createStyleElement;
+    /**
+     * Insert CSS rules as a single block
+     */
+    insertRule(registry: RootRegistry, flattenedRules: StyleRule[], className: string, root: Document | ShadowRoot): RuleInfo | null;
+    /**
+     * Insert global CSS rules
+     */
+    insertGlobalRule(registry: RootRegistry, flattenedRules: StyleRule[], className: string, root: Document | ShadowRoot): RuleInfo | null;
+    /**
+     * Delete a CSS rule from the sheet
+     */
+    deleteRule(registry: RootRegistry, ruleInfo: RuleInfo): void;
+    /**
+     * Find a sheet with available space or return null
+     */
+    private findAvailableSheet;
+    /**
+     * Find an available rule index in the sheet
+     */
+    findAvailableRuleIndex(sheet: SheetInfo): number;
+    /**
+     * Mark a ruleset as unused but keep it in the stylesheet
+     */
+    markAsUnused(registry: RootRegistry, className: string): void;
+    /**
+     * Restore a ruleset from unused styles
+     */
+    restoreFromUnused(registry: RootRegistry, className: string): RuleInfo | null;
+    /**
+     * Schedule bulk cleanup of all unused styles
+     */
+    private scheduleBulkCleanup;
+    /**
+     * Perform bulk cleanup of all unused styles
+     */
+    private performBulkCleanup;
+    /**
+     * Process the deletion queue for cleanup
+     */
+    processCleanupQueue(registry: RootRegistry): void;
+    /**
+     * Get total number of rules across all sheets
+     */
+    getTotalRuleCount(registry: RootRegistry): number;
+    /**
+     * Get CSS text from all sheets (for SSR)
+     */
+    getCssText(registry: RootRegistry): string;
+    /**
+     * Get cache performance metrics
+     */
+    getMetrics(registry: RootRegistry): CacheMetrics | null;
+    /**
+     * Reset cache performance metrics
+     */
+    resetMetrics(registry: RootRegistry): void;
+    /**
+     * Convert keyframes steps to CSS string
+     */
+    private stepsToCSS;
+    /**
+     * Insert keyframes rule
+     */
+    insertKeyframes(registry: RootRegistry, steps: KeyframesSteps, name: string, root: Document | ShadowRoot): KeyframesInfo | null;
+    /**
+     * Delete keyframes rule
+     */
+    deleteKeyframes(registry: RootRegistry, info: KeyframesInfo): void;
+    /**
+     * Mark keyframes as unused
+     */
+    markKeyframesAsUnused(registry: RootRegistry, name: string): void;
+    /**
+     * Clean up resources for a root
+     */
+    cleanup(root: Document | ShadowRoot): void;
+}

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

@@ -0,0 +1,90 @@
+export interface InjectResult {
+    className: string;
+    dispose: () => void;
+}
+export type DisposeFunction = () => void;
+export interface StyleInjectorConfig {
+    nonce?: string;
+    maxRulesPerSheet?: number;
+    unusedStylesThreshold?: number;
+    bulkCleanupDelay?: number;
+    idleCleanup?: boolean;
+    collectMetrics?: boolean;
+    forceTextInjection?: boolean;
+    /** When false, avoid storing full cssText for each rule block to reduce memory. */
+    debugMode?: boolean;
+}
+export interface RuleInfo {
+    className: string;
+    ruleIndex: number;
+    sheetIndex: number;
+    cssText: string[];
+    /** Inclusive end index of the contiguous block of inserted rules for this className */
+    endRuleIndex?: number;
+}
+export interface SheetInfo {
+    sheet: HTMLStyleElement;
+    ruleCount: number;
+    holes: number[];
+}
+export interface UnusedRuleInfo {
+    ruleInfo: RuleInfo;
+    markedUnusedAt: number;
+}
+export interface CleanupStats {
+    timestamp: number;
+    classesDeleted: number;
+    cssSize: number;
+    rulesDeleted: number;
+}
+export interface CacheMetrics {
+    hits: number;
+    misses: number;
+    unusedHits: number;
+    bulkCleanups: number;
+    totalInsertions: number;
+    totalUnused: number;
+    stylesCleanedUp: number;
+    cleanupHistory: CleanupStats[];
+    startTime: number;
+}
+export interface RootRegistry {
+    sheets: SheetInfo[];
+    refCounts: Map<string, number>;
+    rules: Map<string, RuleInfo>;
+    unusedRules: Map<string, UnusedRuleInfo>;
+    /** Deduplication set of fully materialized CSS rules inserted into sheets */
+    ruleTextSet: Set<string>;
+    /** Scheduled bulk cleanup timeout */
+    bulkCleanupTimeout: ReturnType<typeof requestIdleCallback> | ReturnType<typeof setTimeout> | null;
+    /** Performance metrics (optional) */
+    metrics?: CacheMetrics;
+    /** Counter for generating sequential class names like t0, t1, t2... */
+    classCounter: number;
+    /** Keyframes cache by JSON.stringify(steps) -> entry */
+    keyframesCache: Map<string, KeyframesCacheEntry>;
+    /** Unused keyframes for cleanup */
+    unusedKeyframes: Map<string, UnusedRuleInfo>;
+    /** Counter for generating keyframes names like k0, k1, k2... */
+    keyframesCounter: number;
+    /** Set of injected @property names for tracking */
+    injectedProperties: Set<string>;
+}
+export type StyleRule = import('../utils/renderStyles').StyleResult;
+export interface KeyframesInfo {
+    name: string;
+    sheetIndex: number;
+    ruleIndex: number;
+    cssText: string;
+}
+export type KeyframeStep = string | Record<string, string | number>;
+export type KeyframesSteps = Record<string, KeyframeStep>;
+export interface KeyframesResult {
+    toString(): string;
+    dispose: () => void;
+}
+export interface KeyframesCacheEntry {
+    name: string;
+    refCount: number;
+    info: KeyframesInfo;
+}

package/types/tasty/parser/lru.d.ts

@@ -3,9 +3,13 @@ export declare class Lru<K, V> {
     private map;
     private head;
     private tail;
-    constructor(limit?: number);
+    private onEvict?;
+    constructor(limit?: number, onEvict?: (key: K, value: V) => void);
+    setOnEvict(fn?: (key: K, value: V) => void): void;
     get(key: K): V | undefined;
     set(key: K, value: V): void;
+    delete(key: K): void;
+    keys(): IterableIterator<K>;
     private touch;
     private evict;
     clear(): void;

package/types/tasty/styles/color.d.ts

@@ -1,6 +1,8 @@
 export declare function colorStyle({ color }: {
     color: any;
-}): any[] | "";
+}): "" | {
+    color: any;
+};
 export declare namespace colorStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/reset.d.ts

@@ -1,7 +1,6 @@
-import { CSSMap } from '../utils/styles';
 export declare function resetStyle({ reset }: {
     reset: any;
-}): CSSMap[] | undefined;
+}): any[] | undefined;
 export declare namespace resetStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/types.d.ts

@@ -32,8 +32,6 @@ export interface BasePropsWithoutChildren<K extends TagName = TagName> extends P
     isDisabled?: boolean;
     /** Plain css for the element */
     css?: string;
-    /** The element name for using in style overriding */
-    styleName?: string;
     /** The CSS style map */
     style?: CSSProperties | (CSSProperties & {
         [key: string]: string | number | null;

package/types/tasty/utils/getModCombinations.d.ts

@@ -1 +1,9 @@
-export declare function getModCombinations(array: string[], allowEmpty?: boolean): any;
+export type ConflictChecker = (combination: string[]) => boolean;
+/**
+ * Efficient iterative combination generator with early pruning
+ * Generates combinations one by one and prunes branches early when conflicts are detected
+ * @param array - Array of mod strings to generate combinations from
+ * @param allowEmpty - Whether to include empty combination
+ * @param conflictChecker - Function to detect conflicting combinations (required)
+ */
+export declare function getModCombinationsIterative(array: string[], allowEmpty?: boolean, conflictChecker?: ConflictChecker): string[][];