@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/types/tasty/chunks/definitions.d.ts

@@ -1,75 +0,0 @@
-/**
- * Style chunk definitions for CSS chunking optimization.
- *
- * Styles are grouped into chunks based on:
- * 1. Handler dependencies - styles that share a handler MUST be in the same chunk
- * 2. Logical grouping - related styles grouped for better cache reuse
- *
- * See STYLE_CHUNKING_SPEC.md for detailed rationale.
- */
-/**
- * Appearance chunk - visual styling with independent handlers
- */
-export declare const APPEARANCE_CHUNK_STYLES: readonly ["fill", "color", "opacity", "border", "radius", "outline", "outlineOffset", "shadow", "fade"];
-/**
- * Font chunk - typography styles
- * ⚠️ presetStyle handler requires: preset, fontSize, lineHeight, letterSpacing,
- *    textTransform, fontWeight, fontStyle, font - all MUST stay together
- */
-export declare const FONT_CHUNK_STYLES: readonly ["preset", "font", "fontWeight", "fontStyle", "fontSize", "lineHeight", "letterSpacing", "textTransform", "fontFamily", "textAlign", "whiteSpace", "textDecoration", "textOverflow", "wordBreak", "wordWrap", "boldFontWeight"];
-/**
- * Dimension chunk - sizing and spacing
- * ⚠️ paddingStyle handler requires all padding variants together
- * ⚠️ marginStyle handler requires all margin variants together
- */
-export declare const DIMENSION_CHUNK_STYLES: readonly ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingBlock", "paddingInline", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginBlock", "marginInline", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "flexBasis", "flexGrow", "flexShrink", "flex"];
-/**
- * Container chunk - display, flow, and grid layout
- * ⚠️ FORCED TOGETHER by transitive handler dependencies:
- *    displayStyle(display,hide) + flowStyle(display,flow) +
- *    gapStyle(display,flow,gap) + groupRadiusAttr(groupRadius,flow)
- */
-export declare const CONTAINER_CHUNK_STYLES: readonly ["display", "hide", "flow", "gap", "groupRadius", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "place", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas", "gridAutoFlow", "gridAutoColumns", "gridAutoRows"];
-/**
- * Scrollbar chunk - scrollbar and overflow
- * ⚠️ scrollbarStyle handler requires scrollbar ↔ overflow together
- */
-export declare const SCROLLBAR_CHUNK_STYLES: readonly ["scrollbar", "overflow", "styledScrollbar"];
-/**
- * Position chunk - element positioning (all independent handlers)
- */
-export declare const POSITION_CHUNK_STYLES: readonly ["position", "inset", "top", "right", "bottom", "left", "zIndex", "gridArea", "gridColumn", "gridRow", "order", "placeSelf", "alignSelf", "justifySelf", "transform", "transition", "animation"];
-export declare const CHUNK_NAMES: {
-    /** Special chunk for styles that cannot be split (e.g., @starting-style) */
-    readonly COMBINED: "combined";
-    readonly SUBCOMPONENTS: "subcomponents";
-    readonly APPEARANCE: "appearance";
-    readonly FONT: "font";
-    readonly DIMENSION: "dimension";
-    readonly CONTAINER: "container";
-    readonly SCROLLBAR: "scrollbar";
-    readonly POSITION: "position";
-    readonly MISC: "misc";
-};
-export type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];
-/**
- * Pre-computed map for O(1) style-to-chunk lookup.
- * Built once at module load time.
- */
-export declare const STYLE_TO_CHUNK: Map<string, ChunkName>;
-export interface ChunkInfo {
-    /** Name of the chunk */
-    name: ChunkName | string;
-    /** Style keys belonging to this chunk */
-    styleKeys: string[];
-}
-/**
- * Categorize style keys into chunks.
- *
- * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
- * of the order of keys in the input styles object.
- *
- * @param styles - The styles object to categorize
- * @returns Map of chunk name to array of style keys in that chunk (in priority order)
- */
-export declare function categorizeStyleKeys(styles: Record<string, unknown>): Map<string, string[]>;

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

@@ -1,4 +0,0 @@
-export { APPEARANCE_CHUNK_STYLES, FONT_CHUNK_STYLES, DIMENSION_CHUNK_STYLES, CONTAINER_CHUNK_STYLES, SCROLLBAR_CHUNK_STYLES, POSITION_CHUNK_STYLES, CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys, } from './definitions';
-export type { ChunkName, ChunkInfo } from './definitions';
-export { generateChunkCacheKey } from './cacheKey';
-export { renderStylesForChunk } from './renderChunk';

package/types/tasty/chunks/renderChunk.d.ts

@@ -1,25 +0,0 @@
-/**
- * Chunk-specific style rendering.
- *
- * Renders styles for a specific chunk by filtering the styles object
- * to only include relevant keys before passing to renderStyles.
- */
-import { RenderResult } from '../pipeline';
-import { Styles } from '../styles/types';
-/**
- * Render styles for a specific chunk.
- *
- * Creates a filtered styles object containing only the keys for this chunk,
- * then delegates to the existing renderStyles function.
- *
- * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
- * are always included in the filtered styles, regardless of which chunk is
- * being rendered. This ensures that state references like '@mobile' in any
- * chunk can be properly resolved by the pipeline.
- *
- * @param styles - The full styles object
- * @param chunkName - Name of the chunk being rendered
- * @param styleKeys - Keys of styles belonging to this chunk
- * @returns RenderResult with rules for this chunk
- */
-export declare function renderStylesForChunk(styles: Styles, chunkName: string, styleKeys: string[]): RenderResult;

package/types/tasty/config.d.ts

@@ -1,145 +0,0 @@
-/**
- * Tasty Configuration Module
- *
- * Centralizes all tasty configuration, including:
- * - Style injector settings (nonce, cleanup thresholds, etc.)
- * - Global predefined states for advanced state mapping
- * - stylesGenerated flag that locks configuration after first style generation
- *
- * Configuration must be done BEFORE any styles are generated.
- * After the first `inject()` call, configuration is locked and attempts to
- * reconfigure will emit a warning and be ignored.
- */
-import type { StyleDetails, UnitHandler } from './parser/types';
-import type { TastyPlugin } from './plugins/types';
-/**
- * Configuration options for the Tasty style system
- */
-export interface TastyConfig {
-    /** CSP nonce for style elements */
-    nonce?: string;
-    /** Maximum rules per stylesheet (default: 8192) */
-    maxRulesPerSheet?: number;
-    /** Threshold for bulk cleanup of unused styles (default: 500) */
-    unusedStylesThreshold?: number;
-    /** Delay before bulk cleanup in ms, ignored if idleCleanup is true (default: 5000) */
-    bulkCleanupDelay?: number;
-    /** Use requestIdleCallback for cleanup when available (default: true) */
-    idleCleanup?: boolean;
-    /** Force text injection mode, auto-detected in test environments (default: auto) */
-    forceTextInjection?: boolean;
-    /** Enable development mode features: performance metrics and debug info (default: auto) */
-    devMode?: boolean;
-    /**
-     * Ratio of unused styles to delete per bulk cleanup run (0..1).
-     * Defaults to 0.5 (oldest half) to reduce risk of removing styles
-     * that may be restored shortly after being marked unused.
-     */
-    bulkCleanupBatchRatio?: number;
-    /**
-     * Minimum age (in ms) a style must remain unused before eligible for deletion.
-     * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.
-     */
-    unusedStylesMinAgeMs?: number;
-    /**
-     * Global predefined states for advanced state mapping.
-     * These are state aliases that can be used in any component.
-     * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }
-     */
-    states?: Record<string, string>;
-    /**
-     * Parser LRU cache size (default: 1000).
-     * Larger values improve performance for apps with many unique style values.
-     */
-    parserCacheSize?: number;
-    /**
-     * Custom units for the style parser (merged with built-in units).
-     * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
-     * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }
-     */
-    units?: Record<string, string | UnitHandler>;
-    /**
-     * Custom functions for the style parser (merged with existing).
-     * Functions process parsed style groups and return CSS values.
-     * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
-     */
-    funcs?: Record<string, (groups: StyleDetails[]) => string>;
-    /**
-     * Plugins that extend tasty with custom functions, units, or states.
-     * Plugins are processed in order, with later plugins overriding earlier ones.
-     * @example
-     * ```ts
-     * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
-     *
-     * configure({
-     *   plugins: [okhslPlugin()],
-     * });
-     * ```
-     */
-    plugins?: TastyPlugin[];
-}
-declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
-declare global {
-    interface Window {
-        [GLOBAL_INJECTOR_KEY]?: import('./injector/injector').StyleInjector;
-    }
-}
-/**
- * Detect if we're running in a test environment
- */
-export declare function isTestEnvironment(): boolean;
-/**
- * Mark that styles have been generated (called by injector on first inject)
- * This locks the configuration - no further changes allowed.
- */
-export declare function markStylesGenerated(): void;
-/**
- * Check if styles have been generated (configuration is locked)
- */
-export declare function hasStylesGenerated(): boolean;
-/**
- * Reset styles generated flag (for testing only)
- */
-export declare function resetStylesGenerated(): void;
-/**
- * Check if configuration is locked (styles have been generated)
- */
-export declare function isConfigLocked(): boolean;
-/**
- * Configure the Tasty style system.
- *
- * Must be called BEFORE any styles are generated (before first render that uses tasty).
- * After styles are generated, configuration is locked and calls to configure() will
- * emit a warning and be ignored.
- *
- * @example
- * ```ts
- * import { configure } from '@cube-dev/ui-kit';
- *
- * // Configure before app renders
- * configure({
- *   nonce: 'abc123',
- *   states: {
- *     '@mobile': '@media(w < 768px)',
- *     '@dark': '@root(theme=dark)',
- *   },
- * });
- * ```
- */
-export declare function configure(config?: Partial<TastyConfig>): void;
-/**
- * Get the current configuration.
- * If not configured, returns default configuration.
- */
-export declare function getConfig(): TastyConfig;
-/**
- * Get the global injector instance.
- * Auto-configures with defaults if not already configured.
- */
-export declare function getGlobalInjector(): import('./injector/injector').StyleInjector;
-/**
- * Reset configuration (for testing only).
- * Clears the global injector and allows reconfiguration.
- */
-export declare function resetConfig(): void;
-export type { TastyConfig as StyleInjectorConfig };

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

@@ -1,4 +0,0 @@
-export { useStyles } from './useStyles';
-export type { UseStylesOptions, UseStylesResult } from './useStyles';
-export { useGlobalStyles } from './useGlobalStyles';
-export { useRawCSS } from './useRawCSS';

package/types/tasty/hooks/useGlobalStyles.d.ts

@@ -1,22 +0,0 @@
-import { Styles } from '../styles/types';
-/**
- * Hook to inject global styles for a given selector.
- * Useful for styling elements by selector without generating classNames.
- *
- * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
- * @param styles - Tasty styles object
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   useGlobalStyles('.card', {
- *     padding: '2x',
- *     radius: '1r',
- *     fill: '#white',
- *   });
- *
- *   return <div className="card">Content</div>;
- * }
- * ```
- */
-export declare function useGlobalStyles(selector: string, styles?: Styles): void;

package/types/tasty/hooks/useRawCSS.d.ts

@@ -1,50 +0,0 @@
-type UseRawCSSOptions = {
-    root?: Document | ShadowRoot;
-};
-/**
- * Hook to inject raw CSS text directly without parsing.
- * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
- *
- * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
- * with tasty's chunked style sheets.
- *
- * @example Static CSS string
- * ```tsx
- * function GlobalStyles() {
- *   useRawCSS(`
- *     body {
- *       margin: 0;
- *       padding: 0;
- *       font-family: sans-serif;
- *     }
- *   `);
- *
- *   return null;
- * }
- * ```
- *
- * @example Factory function with dependencies (like useMemo)
- * ```tsx
- * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
- *   useRawCSS(() => `
- *     :root {
- *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
- *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
- *     }
- *   `, [theme]);
- *
- *   return null;
- * }
- * ```
- *
- * @example With options
- * ```tsx
- * function ShadowStyles({ shadowRoot }) {
- *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
- *   return null;
- * }
- * ```
- */
-export declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
-export declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
-export {};

package/types/tasty/hooks/useStyles.d.ts

@@ -1,38 +0,0 @@
-import { Styles } from '../styles/types';
-export interface UseStylesOptions {
-    /**
-     * Tasty styles object to generate CSS classes for
-     */
-    styles?: Styles;
-}
-export interface UseStylesResult {
-    /**
-     * Generated className(s) to apply to the element.
-     * Can be empty string if no styles are provided.
-     * With chunking enabled, may contain multiple space-separated class names.
-     */
-    className: string;
-}
-/**
- * Hook to generate CSS classes from Tasty styles.
- * Handles style rendering, className allocation, and CSS injection.
- *
- * Uses chunking to split styles into logical groups for better caching
- * and CSS reuse across components.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { className } = useStyles({
- *     styles: {
- *       padding: '2x',
- *       fill: '#purple',
- *       radius: '1r',
- *     }
- *   });
- *
- *   return <div className={className}>Styled content</div>;
- * }
- * ```
- */
-export declare function useStyles({ styles }: UseStylesOptions): UseStylesResult;

package/types/tasty/pipeline/conditions.d.ts

@@ -1,248 +0,0 @@
-/**
- * ConditionNode Types and Helpers
- *
- * Core data structures for representing style conditions as an abstract syntax tree.
- * Used throughout the pipeline for parsing, simplification, and CSS generation.
- */
-/**
- * Base interface for all state conditions (leaf nodes)
- */
-interface BaseStateCondition {
-    kind: 'state';
-    negated: boolean;
-    raw: string;
-    uniqueId: string;
-}
-/**
- * Modifier condition: [data-attr] or [data-attr="value"]
- */
-export interface ModifierCondition extends BaseStateCondition {
-    type: 'modifier';
-    attribute: string;
-    value?: string;
-    operator?: '=' | '^=' | '$=' | '*=';
-}
-/**
- * Pseudo-class condition: :hover, :focus-visible
- */
-export interface PseudoCondition extends BaseStateCondition {
-    type: 'pseudo';
-    pseudo: string;
-}
-/**
- * Numeric bound for dimension queries
- */
-export interface NumericBound {
-    value: string;
-    valueNumeric: number | null;
-    inclusive: boolean;
-}
-/**
- * Media query condition
- */
-export interface MediaCondition extends BaseStateCondition {
-    type: 'media';
-    subtype: 'dimension' | 'feature' | 'type';
-    dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    feature?: string;
-    featureValue?: string;
-    mediaType?: 'print' | 'screen' | 'all' | 'speech';
-}
-/**
- * Container query condition
- */
-export interface ContainerCondition extends BaseStateCondition {
-    type: 'container';
-    subtype: 'dimension' | 'style';
-    containerName?: string;
-    dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    property?: string;
-    propertyValue?: string;
-}
-/**
- * Root state condition: @root(theme=dark)
- */
-export interface RootCondition extends BaseStateCondition {
-    type: 'root';
-    selector: string;
-}
-/**
- * Own state condition: @own(hovered)
- */
-export interface OwnCondition extends BaseStateCondition {
-    type: 'own';
-    innerCondition: ConditionNode;
-}
-/**
- * Starting style condition: @starting
- */
-export interface StartingCondition extends BaseStateCondition {
-    type: 'starting';
-}
-/**
- * Union of all state condition types
- */
-export type StateCondition = ModifierCondition | PseudoCondition | MediaCondition | ContainerCondition | RootCondition | OwnCondition | StartingCondition;
-/**
- * Compound node: combines conditions with AND/OR
- */
-export interface CompoundCondition {
-    kind: 'compound';
-    operator: 'AND' | 'OR';
-    children: ConditionNode[];
-}
-/**
- * True condition (matches everything)
- */
-export interface TrueCondition {
-    kind: 'true';
-}
-/**
- * False condition (matches nothing - skip this rule)
- */
-export interface FalseCondition {
-    kind: 'false';
-}
-/**
- * Union of all condition node types
- */
-export type ConditionNode = StateCondition | CompoundCondition | TrueCondition | FalseCondition;
-/**
- * Create a TRUE condition (matches everything)
- */
-export declare function trueCondition(): TrueCondition;
-/**
- * Create a FALSE condition (matches nothing)
- */
-export declare function falseCondition(): FalseCondition;
-/**
- * Create an AND compound condition
- */
-export declare function and(...children: ConditionNode[]): ConditionNode;
-/**
- * Create an OR compound condition
- */
-export declare function or(...children: ConditionNode[]): ConditionNode;
-/**
- * Negate a condition
- */
-export declare function not(node: ConditionNode): ConditionNode;
-/**
- * Check if a condition is a state condition
- */
-export declare function isStateCondition(node: ConditionNode): node is StateCondition;
-/**
- * Check if a condition is a compound condition
- */
-export declare function isCompoundCondition(node: ConditionNode): node is CompoundCondition;
-/**
- * Check if a condition is TRUE
- */
-export declare function isTrueCondition(node: ConditionNode): node is TrueCondition;
-/**
- * Check if a condition is FALSE
- */
-export declare function isFalseCondition(node: ConditionNode): node is FalseCondition;
-/**
- * Generate a normalized unique ID for a modifier condition
- */
-export declare function modifierUniqueId(attribute: string, value?: string, operator?: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a pseudo condition
- */
-export declare function pseudoUniqueId(pseudo: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a media condition
- */
-export declare function mediaUniqueId(subtype: 'dimension' | 'feature' | 'type', props: {
-    dimension?: string;
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    feature?: string;
-    featureValue?: string;
-    mediaType?: string;
-}, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a container condition
- */
-export declare function containerUniqueId(subtype: 'dimension' | 'style', props: {
-    containerName?: string;
-    dimension?: string;
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    property?: string;
-    propertyValue?: string;
-}, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a root condition
- */
-export declare function rootUniqueId(selector: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for an own condition
- */
-export declare function ownUniqueId(innerUniqueId: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a starting condition
- */
-export declare function startingUniqueId(negated?: boolean): string;
-/**
- * Create a modifier condition
- */
-export declare function createModifierCondition(attribute: string, value?: string, operator?: '=' | '^=' | '$=' | '*=', negated?: boolean, raw?: string): ModifierCondition;
-/**
- * Create a pseudo condition
- */
-export declare function createPseudoCondition(pseudo: string, negated?: boolean, raw?: string): PseudoCondition;
-/**
- * Create a media dimension condition
- */
-export declare function createMediaDimensionCondition(dimension: 'width' | 'height' | 'inline-size' | 'block-size', lowerBound?: NumericBound, upperBound?: NumericBound, negated?: boolean, raw?: string): MediaCondition;
-/**
- * Create a media feature condition
- */
-export declare function createMediaFeatureCondition(feature: string, featureValue?: string, negated?: boolean, raw?: string): MediaCondition;
-/**
- * Create a media type condition
- */
-export declare function createMediaTypeCondition(mediaType: 'print' | 'screen' | 'all' | 'speech', negated?: boolean, raw?: string): MediaCondition;
-/**
- * Create a container dimension condition
- */
-export declare function createContainerDimensionCondition(dimension: 'width' | 'height' | 'inline-size' | 'block-size', lowerBound?: NumericBound, upperBound?: NumericBound, containerName?: string, negated?: boolean, raw?: string): ContainerCondition;
-/**
- * Create a container style condition
- */
-export declare function createContainerStyleCondition(property: string, propertyValue?: string, containerName?: string, negated?: boolean, raw?: string): ContainerCondition;
-/**
- * Create a root condition
- */
-export declare function createRootCondition(selector: string, negated?: boolean, raw?: string): RootCondition;
-/**
- * Create an own condition
- */
-export declare function createOwnCondition(innerCondition: ConditionNode, negated?: boolean, raw?: string): OwnCondition;
-/**
- * Create a starting condition
- */
-export declare function createStartingCondition(negated?: boolean, raw?: string): StartingCondition;
-/**
- * Get the unique ID for any condition node
- */
-export declare function getConditionUniqueId(node: ConditionNode): string;
-/**
- * Check if two conditions are equal based on their unique IDs
- */
-export declare function conditionsEqual(a: ConditionNode, b: ConditionNode): boolean;
-/**
- * Get all state conditions from a condition tree (flattened)
- */
-export declare function getAllStateConditions(node: ConditionNode): StateCondition[];
-/**
- * Clone a condition node (deep copy)
- */
-export declare function cloneCondition(node: ConditionNode): ConditionNode;
-export {};