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

package/types/tasty/debug.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Debug utilities for inspecting tasty-generated CSS at runtime
+ */
+/**
+ * Debug utilities for inspecting tasty styles in runtime applications
+ */
+export declare const tastyDebug: {
+    /** Resolve the document where tasty styles live (handles Storybook iframe). */
+    _resolveRoot(): Document | ShadowRoot;
+    /**
+     * Get CSS for a specific tasty class (e.g., 't24')
+     */
+    getCSSForClass(className: string): string;
+    /**
+     * Get CSS for multiple tasty classes
+     */
+    getCSSForClasses(classNames: string[]): string;
+    /**
+     * 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: string): Array<{
+        selector: string;
+        declarations: string;
+        atRules?: string[];
+        classes: string[];
+        css: string;
+    }>;
+    /**
+     * List classes that participate in at least one batched group
+     */
+    findClassesWithBatches(): string[];
+    /**
+     * List a brief summary of existing batched groups
+     */
+    listBatchedGroups(limit?: number): Array<{
+        key: string;
+        size: number;
+        sampleSelector: 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;
+        metrics: any;
+    };
+    /**
+     * 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;
+};
+/**
+ * Install tastyDebug on window object for easy access in browser console
+ * Only in non-production environments unless forced
+ */
+export declare function installGlobalDebug(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/flatten.d.ts

@@ -0,0 +1,16 @@
+import { FlattenedRule } from './types';
+/**
+ * Parse and flatten nested CSS
+ * Handles &, .Class, SubElement patterns from renderStyles output
+ * Preserves at-rule context (media queries, supports, etc.)
+ */
+export declare function flattenNestedCss(cssText: string, baseClassName: string, atRuleStack?: string[]): FlattenedRule[];
+/**
+ * Flatten nested CSS for a concrete selector (global styles).
+ * Unlike the className-based variant, this preserves the provided selector string as-is.
+ */
+export declare function flattenNestedCssForSelector(cssText: string, baseSelector: string, atRuleStack?: string[]): FlattenedRule[];
+/**
+ * Wrap a CSS rule with at-rules (media queries, supports, etc.)
+ */
+export declare function wrapWithAtRules(rule: string, atRules?: string[]): string;

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

@@ -0,0 +1,64 @@
+import { StyleResult } from '../utils/renderStyles';
+import { StyleInjector } from './injector';
+import { DisposeFunction, 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 global CSS rule (legacy method - not supported in direct injector)
+ */
+export declare function injectGlobal(selector: string, cssText: string, options?: {
+    root?: Document | ShadowRoot;
+}): DisposeFunction;
+/**
+ * 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;
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, FlattenedRule, KeyframesInfo, UnusedRuleInfo, CacheMetrics, } from './types';
+export { StyleInjector } from './injector';
+export { SheetManager } from './sheet-manager';
+export { flattenNestedCss } from './flatten';

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

@@ -0,0 +1,82 @@
+/**
+ * Style injector that works with structured style objects
+ * Eliminates CSS string parsing for better performance
+ */
+import { StyleResult } from '../utils/renderStyles';
+import { DisposeFunction, InjectResult, StyleInjectorConfig } from './types';
+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;
+    /**
+     * Convert StyleResult to FlattenedRule format
+     */
+    private convertToFlattenedRules;
+    /**
+     * Extract className from rules (assumes first rule contains the base className)
+     */
+    private extractClassName;
+    /**
+     * Generate cache key from flattened 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;
+    /**
+     * Inject global CSS rule
+     */
+    injectGlobal(selector: string, cssText: string, options?: {
+        root?: Document | ShadowRoot;
+    }): DisposeFunction;
+    /**
+     * 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;
+    /**
+     * Destroy all resources for a root
+     */
+    destroy(root?: Document | ShadowRoot): void;
+}

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

@@ -0,0 +1,105 @@
+import { CacheMetrics, FlattenedRule, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig } 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: FlattenedRule[], className: string, root: Document | ShadowRoot): RuleInfo | null;
+    /**
+     * Insert global CSS rules
+     */
+    insertGlobalRule(registry: RootRegistry, flattenedRules: FlattenedRule[], 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;
+    /**
+     * Clean up unused classes from batched rules
+     */
+    private cleanupBatchedUnusedClasses;
+    /**
+     * 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;
+    /**
+     * Clean up resources for a root
+     */
+    cleanup(root: Document | ShadowRoot): void;
+    /** Normalize declaration list by sorting properties for stable keys */
+    private normalizeDeclarations;
+    /** Build selector template normalizing class references to placeholders.
+     * Rules:
+     * - Replace any occurrence of :is(.class[, .class]*) with :is(__CLASS__)
+     * - If starts with .<name>.<name>, replace with __CLASS__.__CLASS__ (legacy specificity)
+     * - Else if starts with .<name>, replace with __CLASS__
+     */
+    private makeSelectorTemplate;
+    /** Compose a unique batch key */
+    private getBatchKey;
+    /** Ensure there is a target sheet and available rule index */
+    private ensureTargetSheetAndIndex;
+    /** Compose CSS text for a batched rule entry */
+    private composeCssForEntry;
+    /** Update CSSOM/textContent for an existing batched rule */
+    private updateBatchedRuleCss;
+    /** Remove a batched rule entirely from the stylesheet */
+    private removeBatchedEntry;
+    /** Find existing class that has an identical rule (same batch key) */
+    private findClassWithIdenticalRule;
+    /** Convert an existing single-class rule to a batched rule with additional class */
+    private convertToBatchedRule;
+}

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

@@ -0,0 +1,105 @@
+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 CacheMetrics {
+    hits: number;
+    misses: number;
+    unusedHits: number;
+    bulkCleanups: number;
+    totalInsertions: number;
+    totalUnused: number;
+    stylesCleanedUp: number;
+    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;
+    /**
+     * Batched rules keyed by normalized signature (atRules + selector template + declarations)
+     * Used to combine identical rules across multiple classes using :is(...)
+     */
+    batchedRules: Map<string, BatchedRuleEntry>;
+    /**
+     * Meta information for batched rules, kept even when there are no active classes, to allow restoration
+     */
+    batchedRuleMeta: Map<string, BatchedRuleMeta>;
+    /** Mapping from className to all batched rule keys it participates in */
+    classToBatchedKeys: Map<string, Set<string>>;
+    /** Set of class names that are marked as unused in batched rules */
+    unusedBatchedClasses: Set<string>;
+}
+export interface FlattenedRule {
+    selector: string;
+    declarations: string;
+    atRules?: string[];
+}
+/** Internal structure describing a batched rule entry in a stylesheet */
+export interface BatchedRuleEntry {
+    /** The normalized key for this batched rule */
+    key: string;
+    /** Selector template with "__CLASS__" placeholder where class selector should be */
+    selectorTemplate: string;
+    /** Declarations (normalized and sorted) */
+    declarations: string;
+    /** At-rules context */
+    atRules?: string[];
+    /** Set of classNames included in this batched selector */
+    classNames: Set<string>;
+    /** Location of the rule in the target sheet */
+    sheetIndex: number;
+    ruleIndex: number;
+    /** Cached CSS text for textContent-based sheets (forceTextInjection) */
+    currentCssText?: string;
+}
+/** Meta needed to reconstruct a batched rule if it was fully removed */
+export interface BatchedRuleMeta {
+    selectorTemplate: string;
+    declarations: string;
+    atRules?: string[];
+}
+export interface KeyframesInfo {
+    name: string;
+    sheetIndex: number;
+    ruleIndex: number;
+    cssText: string;
+}

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/renderStyles.d.ts

@@ -1,10 +1,28 @@
+/**
+ * Style rendering that works with structured style objects
+ * Eliminates CSS string parsing for better performance
+ */
 import { Styles } from '../styles/types';
-export declare function isSelector(key: any): any;
+export interface StyleResult {
+    selector: string;
+    declarations: string;
+    atRules?: string[];
+}
+export interface RenderResult {
+    rules: StyleResult[];
+    className?: string;
+}
+/**
+ * Check if a key represents a CSS selector
+ */
+export declare function isSelector(key: string): boolean;
+/**
+ * Render styles without CSS string conversion
+ * This is a performance-optimized version of renderStyles
+ */
+export declare function renderStyles(styles?: Styles, responsive?: number[], className?: string): RenderResult;
 /**
- * Render style props to complete Styled Components CSS.
- * @param styles - Complete style props.
- * @param responsive - A list of responsive zones
- * @param {string} [suffix]
- * @return {string}
+ * Render styles for global injection (without class names)
+ * Returns CSS with & selectors that injectGlobal can process
  */
-export declare function renderStyles(styles?: Styles, responsive?: number[], suffix?: string): any;
+export declare function renderStylesForGlobal(styles?: Styles, responsive?: number[]): string;

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

@@ -95,6 +95,7 @@ export declare const CUSTOM_UNITS: {
 };
 export declare const DIRECTIONS: string[];
 export declare function createRule(prop: string, value: StyleValue, selector?: string): string;
+export declare function getModSelector(modName: string): string;
 export declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
 /**
  *
@@ -137,12 +138,6 @@ export declare function extractStyles(props: {
 }, styleList?: readonly string[], defaultStyles?: Styles, propMap?: {
     [key: string]: string;
 }, ignoreList?: readonly string[]): Styles;
-/**
- * Render CSSMap to Styled Components CSS
- * @param styles
- * @param [selector]
- */
-export declare function renderStylesToSC(styles: StyleHandlerResult, selector?: string): any;
 /**
  * Compile states to finite CSS with selectors.
  * State values should contain a string value with CSS style list.
@@ -151,9 +146,6 @@ export declare function renderStylesToSC(styles: StyleHandlerResult, selector?:
  * @param {string} suffix
  */
 export declare function applyStates(selector: string, states: any, suffix?: string): any;
-export declare function styleHandlerCacheWrapper(styleHandler: StyleHandler, limit?: number): ((styleMap: any, suffix?: string | undefined) => any) & {
-    __lookupStyles: string[];
-};
 /**
  * Replace state values with new ones.
  * For example, if you want to replace initial values with finite CSS code.