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

package/types/tasty/debug.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 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;
+        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
+ */
+export declare function installGlobalDebug(): 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,78 @@
+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;
+    /**
+     * 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;
+}

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

@@ -0,0 +1,68 @@
+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;
+}
+export interface FlattenedRule {
+    selector: 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/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[][];

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

@@ -25,15 +25,6 @@ export interface StyleStateData {
     /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
     notMods: string[];
 }
-export interface ParsedStyle {
-    value: ResponsiveStyleValue;
-    values: string[];
-    all: string[];
-    colors: string[];
-    color?: string;
-    /** The list of mods to apply */
-    mods: string[];
-}
 export interface ParsedColor {
     color?: string;
     name?: string;
@@ -43,41 +34,11 @@ export type StyleStateDataList = StyleStateData[];
 export type StyleStateDataListMap = {
     [key: string]: StyleStateDataList;
 };
-/** An object that describes a relation between specific modifiers and style value. **/
-export interface StyleState {
-    /** The list of mods to apply */
-    mods: string[];
-    /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
-    notMods: string[];
-    /** The value to apply */
-    value: StyleMap;
-}
-export interface RenderedStyleState {
-    /** The list of mods to apply */
-    mods: string[];
-    /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
-    notMods: string[];
-    /** The value to apply */
-    value: string;
-}
-export type ComputeUnit = string | (string | string[])[];
-export type StyleStateList = StyleState[];
-export type RenderedStyleStateList = RenderedStyleState[];
 export type StyleMap = {
     [key: string]: ResponsiveStyleValue;
 };
 export type StyleStateMap = {
-    [key: string]: StyleState;
-};
-export type RenderedStyleStateMap = {
-    [key: string]: RenderedStyleState;
-};
-export type StyleStateMapList = StyleStateMap[];
-export type RenderedStyleStateMapList = {
-    [key: string]: RenderedStyleStateMap;
-};
-export type StyleStateListMap = {
-    [key: string]: StyleStateList;
+    [key: string]: StyleStateData;
 };
 export declare const CUSTOM_UNITS: {
     r: string;
@@ -94,7 +55,7 @@ export declare const CUSTOM_UNITS: {
     sp: (num: any) => string;
 };
 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;
 /**
  *
@@ -103,26 +64,14 @@ export declare function customFunc(name: string, fn: (groups: StyleDetails[]) =>
  * @returns {Object<String,String|Array>}
  */
 export declare function parseStyle(value: StyleValue): ProcessedStyle;
-export declare function flattenStyleDetails(processed: ProcessedStyle): {
-    values: string[];
-    mods: string[];
-    colors: string[];
-    all: string[];
-    value: string;
-    color: string | undefined;
-};
 /**
  * Parse color. Find it value, name and opacity.
  */
 export declare function parseColor(val: string, ignoreError?: boolean): ParsedColor;
-export declare function rgbColorProp(colorName: string, opacity: number, fallbackColorName?: Function, fallbackValue?: Function): string;
-export declare function colorProp(colorName: any, fallbackColorName: any, fallbackValue: any): string;
 export declare function strToRgb(color: any, ignoreAlpha?: boolean): any;
 export declare function getRgbValuesFromRgbaString(str: any): any;
 export declare function hexToRgb(hex: any): string | null;
-export declare function transferMods(mods: any, from: any, to: any): void;
 export declare function filterMods(mods: any, allowedMods: any): any;
-export declare function customUnit(value: any, unit: any): any;
 export declare function extendStyles(defaultStyles: any, newStyles: any): {};
 /**
  * Split properties into style and non-style properties.
@@ -137,40 +86,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.
- * @param {string} selector
- * @param {StyleStateList|StyleStateMapList} states
- * @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.
- */
-export declare function replaceStateValues(states: StyleStateList | StyleStateMapList, replaceFn: (value: string) => string): RenderedStyleStateList | RenderedStyleStateMapList;
-/**
- * Get all presented modes from the style state list.
- */
-export declare function getModesFromStyleStateList(stateList: StyleStateList): string[];
-/**
- * Get all presented modes from the style state map list.
- */
-export declare function getModesFromStyleStateListMap(stateListMap: StyleStateMapList): string[];
-/**
- * Convert the style map to the normalized style state list.
- */
-export declare function styleMapToStyleMapStateList(styleMap: StyleMap, filterKeys?: string[]): StyleStateList;
 export declare const STATE_OPERATORS: {
     NOT: string;
     AND: string;