@cube-dev/ui-kit 0.0.0-canary-a6187c8 → 0.0.0-canary-521eedd

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

@@ -1,243 +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';
-}
-/**
- * Supports query condition: @supports(display: grid), @supports($, :has(*))
- */
-export interface SupportsCondition extends BaseStateCondition {
-    type: 'supports';
-    subtype: 'feature' | 'selector';
-    condition: string;
-}
-/**
- * Union of all state condition types
- */
-export type StateCondition = ModifierCondition | PseudoCondition | MediaCondition | ContainerCondition | RootCondition | OwnCondition | StartingCondition | SupportsCondition;
-/**
- * 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 compound condition
- */
-export declare function isCompoundCondition(node: ConditionNode): node is CompoundCondition;
-/**
- * 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;
-/**
- * Generate a normalized unique ID for a supports condition
- */
-export declare function supportsUniqueId(subtype: 'feature' | 'selector', condition: string, 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;
-/**
- * Create a supports condition
- *
- * @param subtype 'feature' for @supports(display: grid), 'selector' for @supports($, :has(*))
- * @param condition The condition string (e.g., "display: grid" or ":has(*)")
- */
-export declare function createSupportsCondition(subtype: 'feature' | 'selector', condition: string, negated?: boolean, raw?: string): SupportsCondition;
-/**
- * Get the unique ID for any condition node
- */
-export declare function getConditionUniqueId(node: ConditionNode): string;
-export {};

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

@@ -1,103 +0,0 @@
-/**
- * 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[];
-/**
- * Expand OR conditions in exclusive entries AFTER buildExclusiveConditions.
- *
- * This handles ORs that arise from De Morgan expansion during negation:
- *   !(A & B) = !A | !B
- *
- * These ORs need to be made exclusive to avoid overlapping CSS rules:
- *   !A | !B  →  !A | (A & !B)
- *
- * This is logically equivalent but ensures each branch has proper context.
- *
- * Example:
- *   Input: { "": V1, "@supports(...) & :has()": V2 }
- *   V2's exclusive = @supports & :has
- *   V1's exclusive = !(@supports & :has) = !@supports | !:has
- *
- *   Without this fix: V1 gets two rules:
- *     - @supports (not ...) → V1  ✓
- *     - :not(:has()) → V1  ✗ (missing @supports context!)
- *
- *   With this fix: V1 gets two exclusive rules:
- *     - @supports (not ...) → V1  ✓
- *     - @supports (...) { :not(:has()) } → V1  ✓ (proper context!)
- */
-export declare function expandExclusiveOrs(entries: ExclusiveStyleEntry[]): ExclusiveStyleEntry[];

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

@@ -1,67 +0,0 @@
-/**
- * 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

@@ -1,162 +0,0 @@
-/**
- * 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;
-}
-/**
- * Parsed supports condition for structured analysis and combination
- */
-export interface ParsedSupportsCondition {
-    /** Subtype: 'feature' for property support, 'selector' for selector() support */
-    subtype: 'feature' | 'selector';
-    /** The condition string (e.g., "display: grid" or ":has(*)") */
-    condition: string;
-    /** Whether this is a negated condition */
-    negated: boolean;
-}
-/**
- * Parsed modifier condition for structured analysis
- */
-export interface ParsedModifierCondition {
-    /** Attribute name (e.g., 'data-hovered', 'data-size') */
-    attribute: string;
-    /** Value if present (e.g., 'large', 'danger') */
-    value?: string;
-    /** Operator for value matching (default '=') */
-    operator?: '=' | '^=' | '$=' | '*=';
-    /** Whether this is negated (:not(...)) */
-    negated: boolean;
-}
-/**
- * Parsed pseudo-class condition for structured analysis
- */
-export interface ParsedPseudoCondition {
-    /** The pseudo-class (e.g., ':hover', ':focus-visible', ':has(> Icon)') */
-    pseudo: string;
-    /** Whether this is negated (:not(...)) */
-    negated: boolean;
-}
-/**
- * Parsed root condition for structured analysis
- */
-export interface ParsedRootCondition {
-    /** The selector part (e.g., '[data-theme="dark"]') */
-    selector: string;
-    /** Whether this is negated (:root:not(...)) */
-    negated: boolean;
-}
-/**
- * A single selector variant (one term in a DNF expression)
- */
-export interface SelectorVariant {
-    /** Structured modifier conditions */
-    modifierConditions: ParsedModifierCondition[];
-    /** Structured pseudo conditions */
-    pseudoConditions: ParsedPseudoCondition[];
-    /** Structured own conditions (for sub-element states) */
-    ownConditions: (ParsedModifierCondition | ParsedPseudoCondition)[];
-    /** Parsed media conditions for structured combination */
-    mediaConditions: ParsedMediaCondition[];
-    /** Parsed container conditions for structured combination */
-    containerConditions: ParsedContainerCondition[];
-    /** Parsed supports conditions for @supports at-rules */
-    supportsConditions: ParsedSupportsCondition[];
-    /** Structured root conditions */
-    rootConditions: ParsedRootCondition[];
-    /** 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;
-/**
- * Convert parsed modifier to CSS selector string (for final output)
- */
-export declare function modifierToCSS(mod: ParsedModifierCondition): string;
-/**
- * Convert parsed pseudo to CSS selector string (for final output)
- */
-export declare function pseudoToCSS(pseudo: ParsedPseudoCondition): string;
-/**
- * Convert parsed root conditions to CSS selector prefix (for final output)
- */
-export declare function rootConditionsToCSS(roots: ParsedRootCondition[]): string | undefined;
-/**
- * Build at-rules array from a variant
- */
-export declare function buildAtRulesFromVariant(variant: SelectorVariant): string[];

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

@@ -1,20 +0,0 @@
-/**
- * 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

@@ -1,28 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-/**
- * 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';

package/types/tasty/plugins/okhsl-plugin.d.ts

@@ -1,45 +0,0 @@
-/**
- * OKHSL Plugin for Tasty
- *
- * Converts OKHSL color syntax to RGB notation.
- * Supports angle units: deg, turn, rad, or unitless (degrees).
- *
- * Examples:
- *   okhsl(240.5 50% 50%)
- *   okhsl(240.5deg 50% 50%)
- *   okhsl(0.25turn 50% 50%)
- *   okhsl(1.57rad 50% 50%)
- *
- * Conversion math inlined from @texel/color to avoid external dependencies.
- */
-import type { StyleDetails } from '../parser/types';
-import type { TastyPluginFactory } from './types';
-/**
- * The okhsl function handler for tasty parser.
- * Receives parsed style groups and returns an RGB color string.
- */
-declare const okhslFunc: (groups: StyleDetails[]) => string;
-/**
- * OKHSL Plugin for Tasty.
- *
- * Adds support for the `okhsl()` color function in tasty styles.
- *
- * @example
- * ```ts
- * import { configure } from '@cube-dev/ui-kit';
- * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
- *
- * configure({
- *   plugins: [okhslPlugin()],
- * });
- *
- * // Now you can use okhsl in styles:
- * const Box = tasty({
- *   styles: {
- *     fill: 'okhsl(240 50% 50%)',
- *   },
- * });
- * ```
- */
-export declare const okhslPlugin: TastyPluginFactory;
-export { okhslFunc };