@cube-dev/ui-kit 0.0.0-canary-4777472 → 0.0.0-canary-b26ec55

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

@@ -1,7 +1,13 @@
-import { CacheMetrics, KeyframesInfo, KeyframesSteps, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
+import { CacheMetrics, KeyframesInfo, KeyframesSteps, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
 export declare class SheetManager {
     private rootRegistries;
     private config;
+    /** Dedicated style elements for raw CSS per root */
+    private rawStyleElements;
+    /** Tracking for raw CSS blocks per root */
+    private rawCSSBlocks;
+    /** Counter for generating unique raw CSS IDs */
+    private rawCSSCounter;
     constructor(config: StyleInjectorConfig);
     /**
      * Get or create registry for a root (Document or ShadowRoot)
@@ -95,4 +101,22 @@ export declare class SheetManager {
      * Clean up resources for a root
      */
     cleanup(root: Document | ShadowRoot): void;
+    /**
+     * Get or create a dedicated style element for raw CSS
+     * Raw CSS is kept separate from tasty-managed sheets to avoid index conflicts
+     */
+    private getOrCreateRawStyleElement;
+    /**
+     * Inject raw CSS text directly without parsing
+     * Returns a dispose function to remove the injected CSS
+     */
+    injectRawCSS(css: string, root: Document | ShadowRoot): RawCSSResult;
+    /**
+     * Remove a raw CSS block by ID
+     */
+    private disposeRawCSS;
+    /**
+     * Get the raw CSS content for SSR
+     */
+    getRawCSSText(root: Document | ShadowRoot): string;
 }

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

@@ -26,6 +26,12 @@ export interface StyleInjectorConfig {
      * 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>;
 }
 export interface RuleInfo {
     className: string;
@@ -85,7 +91,7 @@ export interface RootRegistry {
     /** Global rules tracking for index adjustment */
     globalRules: Map<string, RuleInfo>;
 }
-export type StyleRule = import('../utils/renderStyles').StyleResult;
+export type StyleRule = import('../pipeline').StyleResult;
 export interface KeyframesInfo {
     name: string;
     sheetIndex: number;
@@ -104,3 +110,16 @@ export interface KeyframesCacheEntry {
     refCount: number;
     info: KeyframesInfo;
 }
+export interface RawCSSInfo {
+    /** Unique identifier for this raw CSS block */
+    id: string;
+    /** The raw CSS text */
+    css: string;
+    /** Start offset in the style element's textContent */
+    startOffset: number;
+    /** End offset in the style element's textContent */
+    endOffset: number;
+}
+export interface RawCSSResult {
+    dispose: () => void;
+}

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

@@ -7,5 +7,9 @@ export declare class StyleParser {
     setFuncs(funcs: Required<ParserOptions>['funcs']): void;
     setUnits(units: Required<ParserOptions>['units']): void;
     updateOptions(patch: Partial<ParserOptions>): void;
+    /**
+     * Get the current units configuration.
+     */
+    getUnits(): ParserOptions['units'];
 }
 export type { StyleDetails, ProcessedStyle } from './types';

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

@@ -4,6 +4,7 @@ export declare enum Bucket {
     Mod = 2
 }
 export interface StyleDetails {
+    input: string;
     output: string;
     mods: string[];
     values: string[];

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

@@ -0,0 +1,248 @@
+/**
+ * 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 {};

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

@@ -0,0 +1,78 @@
+/**
+ * Exclusive Condition Builder
+ *
+ * Transforms parsed style entries into exclusive conditions.
+ * Each entry's condition is ANDed with the negation of all higher-priority conditions,
+ * ensuring exactly one condition matches at any given time.
+ */
+import { StyleValue } from '../utils/styles';
+import { ConditionNode } from './conditions';
+/**
+ * Parsed style entry with condition
+ */
+export interface ParsedStyleEntry {
+    styleKey: string;
+    stateKey: string;
+    value: StyleValue;
+    condition: ConditionNode;
+    priority: number;
+}
+/**
+ * Style entry with exclusive condition
+ */
+export interface ExclusiveStyleEntry extends ParsedStyleEntry {
+    exclusiveCondition: ConditionNode;
+}
+/**
+ * Build exclusive conditions for a list of parsed style entries.
+ *
+ * The entries should be ordered by priority (highest priority first).
+ *
+ * For each entry, we compute:
+ *   exclusiveCondition = condition & !prior[0] & !prior[1] & ...
+ *
+ * This ensures exactly one condition matches at any time.
+ *
+ * Example:
+ *   Input (ordered highest to lowest priority):
+ *     A: value1 (priority 2)
+ *     B: value2 (priority 1)
+ *     C: value3 (priority 0)
+ *
+ *   Output:
+ *     A: A
+ *     B: B & !A
+ *     C: C & !A & !B
+ *
+ * @param entries Parsed style entries ordered by priority (highest first)
+ * @returns Entries with exclusive conditions, filtered to remove impossible ones
+ */
+export declare function buildExclusiveConditions(entries: ParsedStyleEntry[]): ExclusiveStyleEntry[];
+/**
+ * Parse style entries from a value mapping object.
+ *
+ * @param styleKey The style key (e.g., 'padding')
+ * @param valueMap The value mapping { '': '2x', 'compact': '1x', '@media(w < 768px)': '0.5x' }
+ * @param parseCondition Function to parse state keys into conditions
+ * @returns Parsed entries ordered by priority (highest first)
+ */
+export declare function parseStyleEntries(styleKey: string, valueMap: Record<string, StyleValue>, parseCondition: (stateKey: string) => ConditionNode): ParsedStyleEntry[];
+/**
+ * Check if a value is a style value mapping (object with state keys)
+ */
+export declare function isValueMapping(value: StyleValue | Record<string, StyleValue>): value is Record<string, StyleValue>;
+/**
+ * Expand OR conditions in parsed entries into multiple exclusive entries.
+ *
+ * For an entry with condition `A | B | C`, this creates 3 entries:
+ *   - condition: A
+ *   - condition: B & !A
+ *   - condition: C & !A & !B
+ *
+ * This ensures OR branches are mutually exclusive BEFORE the main
+ * exclusive condition building pass.
+ *
+ * @param entries Parsed entries (may contain OR conditions)
+ * @returns Expanded entries with OR branches made exclusive
+ */
+export declare function expandOrConditions(entries: ParsedStyleEntry[]): ParsedStyleEntry[];

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

@@ -0,0 +1,67 @@
+/**
+ * Tasty Style Rendering Pipeline
+ *
+ * This is the main entrypoint for the new pipeline implementation.
+ * It implements the complete flow from style objects to CSS rules.
+ *
+ * Pipeline stages:
+ * 1. PARSE CONDITIONS - Parse state keys into ConditionNode trees
+ * 2. BUILD EXCLUSIVE CONDITIONS - AND with negation of higher-priority conditions
+ * 3. SIMPLIFY CONDITIONS - Apply boolean algebra, detect contradictions
+ * 4. GROUP BY HANDLER - Collect styles per handler, compute combinations
+ * 5. COMPUTE CSS VALUES - Call handlers to get CSS declarations
+ * 6. MERGE BY VALUE - Merge rules with identical CSS output
+ * 7. MATERIALIZE CSS - Convert conditions to CSS selectors + at-rules
+ */
+import { Styles } from '../styles/types';
+import { CSSRule } from './materialize';
+/**
+ * Matches the old StyleResult interface for backward compatibility
+ */
+export interface StyleResult {
+    selector: string;
+    declarations: string;
+    atRules?: string[];
+    needsClassName?: boolean;
+    rootPrefix?: string;
+}
+/**
+ * Matches the old RenderResult interface for backward compatibility
+ */
+export interface RenderResult {
+    rules: StyleResult[];
+    className?: string;
+}
+export interface PipelineResult {
+    rules: CSSRule[];
+    className?: string;
+}
+/**
+ * Render styles using the new pipeline.
+ *
+ * This is the main entrypoint that implements the complete flow.
+ */
+export declare function renderStylesPipeline(styles?: Styles, className?: string): PipelineResult;
+/**
+ * Clear the pipeline cache (for testing)
+ */
+export declare function clearPipelineCache(): void;
+/**
+ * Check if a key is a CSS selector
+ */
+export declare function isSelector(key: string): boolean;
+/**
+ * Render styles to CSS rules.
+ *
+ * When called without classNameOrSelector, returns RenderResult with needsClassName=true.
+ * When called with a selector/className string, returns StyleResult[] for direct injection.
+ */
+export declare function renderStyles(styles?: Styles): RenderResult;
+export declare function renderStyles(styles: Styles | undefined, classNameOrSelector: string): StyleResult[];
+export type { ConditionNode } from './conditions';
+export { and, or, not, trueCondition, falseCondition } from './conditions';
+export { parseStateKey } from './parseStateKey';
+export { simplifyCondition } from './simplify';
+export { buildExclusiveConditions } from './exclusive';
+export { conditionToCSS } from './materialize';
+export type { CSSRule } from './materialize';

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

@@ -0,0 +1,115 @@
+/**
+ * CSS Materialization
+ *
+ * Converts condition trees into CSS selectors and at-rules.
+ * This is the final stage that produces actual CSS output.
+ */
+import { ConditionNode } from './conditions';
+/**
+ * Parsed media condition for structured analysis and combination
+ */
+export interface ParsedMediaCondition {
+    /** Subtype for structured analysis */
+    subtype: 'dimension' | 'feature' | 'type';
+    /** Whether this is a negated condition */
+    negated: boolean;
+    /** The condition part for CSS output (e.g., "(width < 600px)", "print") */
+    condition: string;
+    /** For dimension queries: dimension name */
+    dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
+    /** For dimension queries: lower bound value */
+    lowerBound?: {
+        value: string;
+        valueNumeric: number | null;
+        inclusive: boolean;
+    };
+    /** For dimension queries: upper bound value */
+    upperBound?: {
+        value: string;
+        valueNumeric: number | null;
+        inclusive: boolean;
+    };
+    /** For feature queries: feature name */
+    feature?: string;
+    /** For feature queries: feature value */
+    featureValue?: string;
+    /** For type queries: media type */
+    mediaType?: 'print' | 'screen' | 'all' | 'speech';
+}
+/**
+ * Parsed container condition for structured analysis and combination
+ */
+export interface ParsedContainerCondition {
+    /** Container name (undefined = unnamed/nearest container) */
+    name?: string;
+    /** The condition part (e.g., "(width < 600px)" or "style(--variant: danger)") */
+    condition: string;
+    /** Whether this is a negated condition */
+    negated: boolean;
+    /** Subtype for structured analysis */
+    subtype: 'dimension' | 'style';
+    /** For style queries: property name (without --) */
+    property?: string;
+    /** For style queries: property value (undefined = existence check) */
+    propertyValue?: string;
+}
+/**
+ * A single selector variant (one term in a DNF expression)
+ */
+export interface SelectorVariant {
+    /** Attribute/pseudo selectors to add to element selector (e.g., '[data-hovered]', ':not([data-disabled])') */
+    modifierSelectors: string[];
+    /** Selector suffixes for @own states (applied to sub-element) */
+    ownSelectors: string[];
+    /** Parsed media conditions for structured combination */
+    mediaConditions: ParsedMediaCondition[];
+    /** Parsed container conditions for structured combination */
+    containerConditions: ParsedContainerCondition[];
+    /** Root state prefix (e.g., ':root[data-theme="dark"]') */
+    rootPrefix?: string;
+    /** Whether to wrap in @starting-style */
+    startingStyle: boolean;
+}
+/**
+ * CSS output components extracted from a condition
+ * Supports multiple variants for OR conditions (DNF form)
+ */
+export interface CSSComponents {
+    /** Selector variants - OR means multiple variants, AND means single variant with combined selectors */
+    variants: SelectorVariant[];
+    /** Whether condition is impossible (should skip) */
+    isImpossible: boolean;
+}
+/**
+ * Final CSS rule output
+ */
+export interface CSSRule {
+    /** Single selector or array of selector fragments (for OR conditions) */
+    selector: string | string[];
+    declarations: string;
+    atRules?: string[];
+    rootPrefix?: string;
+}
+/**
+ * Convert a condition tree to CSS components
+ */
+export declare function conditionToCSS(node: ConditionNode): CSSComponents;
+/**
+ * Clear the condition cache (for testing)
+ */
+export declare function clearConditionCache(): void;
+/**
+ * Build a complete CSS selector from a single variant
+ */
+export declare function buildCSSSelectorFromVariant(className: string, variant: SelectorVariant, selectorSuffix?: string): string;
+/**
+ * Build at-rules array from a variant
+ */
+export declare function buildAtRulesFromVariant(variant: SelectorVariant): string[];
+/**
+ * Materialize a computed rule into final CSS format
+ *
+ * Returns an array of CSSRules because OR conditions may require multiple rules
+ * (when different branches have different at-rules)
+ */
+export declare function materializeRule(condition: ConditionNode, declarations: Record<string, string>, selectorSuffix: string, className: string): CSSRule[];

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

@@ -0,0 +1,20 @@
+/**
+ * State Key Parser
+ *
+ * Parses state notation strings (like 'hovered & !disabled', '@media(w < 768px)')
+ * into ConditionNode trees for processing in the pipeline.
+ */
+import { StateParserContext } from '../states';
+import { ConditionNode } from './conditions';
+export interface ParseStateKeyOptions {
+    context?: StateParserContext;
+    isSubElement?: boolean;
+}
+/**
+ * Parse a state key string into a ConditionNode
+ */
+export declare function parseStateKey(stateKey: string, options?: ParseStateKeyOptions): ConditionNode;
+/**
+ * Clear the parse cache (for testing)
+ */
+export declare function clearParseCache(): void;

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

@@ -0,0 +1,28 @@
+/**
+ * Condition Simplification Engine
+ *
+ * Simplifies condition trees by applying boolean algebra rules,
+ * detecting contradictions, merging ranges, and deduplicating terms.
+ *
+ * This is critical for:
+ * 1. Detecting invalid combinations (A & !A → FALSE)
+ * 2. Reducing CSS output size
+ * 3. Producing cleaner selectors
+ */
+import { ConditionNode } from './conditions';
+/**
+ * Simplify a condition tree aggressively.
+ *
+ * This applies all possible simplification rules:
+ * - Boolean algebra (identity, annihilator, idempotent, absorption)
+ * - Contradiction detection (A & !A → FALSE)
+ * - Tautology detection (A | !A → TRUE)
+ * - Range intersection for numeric queries
+ * - Attribute value conflict detection
+ * - Deduplication and sorting
+ */
+export declare function simplifyCondition(node: ConditionNode): ConditionNode;
+/**
+ * Clear the simplify cache (for testing)
+ */
+export declare function clearSimplifyCache(): void;

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

@@ -0,0 +1,17 @@
+/**
+ * Tasty Plugins
+ *
+ * This module exports official tasty plugins that extend the style system.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@cube-dev/ui-kit';
+ * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
+ *
+ * configure({
+ *   plugins: [okhslPlugin()],
+ * });
+ * ```
+ */
+export type { TastyPlugin, TastyPluginFactory } from './types';
+export { okhslPlugin, okhslFunc } from './okhsl-plugin';