chaincss 2.1.39 → 2.2.0

package/dist/compiler/css-if-transpiler.d.ts

@@ -0,0 +1,33 @@
+/**
+ * CSS if() Transpiler
+ * Detects conditional style patterns and emits:
+ *   1. Native CSS if() — Chrome 137+
+ *   2. @supports fallback — Firefox, Safari
+ */
+export interface IfCondition {
+    property: string;
+    variable: string;
+    conditions: Record<string, string | number>;
+    defaultValue: string | number;
+}
+export interface DetectedCondition {
+    property: string;
+    variable: string;
+    conditions: Record<string, string | number>;
+    defaultValue: string | number;
+}
+/**
+ * Detect conditional patterns from _conditions metadata.
+ * When chain.when() branches set the same property to different values,
+ * those can be compiled to CSS if().
+ */
+export declare function detectIfPatterns(styles: Record<string, any>): DetectedCondition[];
+/**
+ * Generate CSS if() output for detected conditions.
+ */
+export declare function emitCSSIf(selector: string, detectedConditions: DetectedCondition[], baseProperties?: Record<string, string | number>): string;
+declare const _default: {
+    detectIfPatterns: typeof detectIfPatterns;
+    emitCSSIf: typeof emitCSSIf;
+};
+export default _default;

package/dist/compiler/design-orchestrator.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Design System Orchestrator
+ *
+ * 1. WCAG Contrast Ratio Checker — validates text/background combos at build time
+ * 2. Contextual Tokens — tokens that auto-flip based on container context
+ * 3. Token Relationship Validator — ensures design tokens are consistent
+ */
+export interface ContrastResult {
+    foreground: string;
+    background: string;
+    ratio: number;
+    passes: {
+        AA: boolean;
+        AALarge: boolean;
+        AAA: boolean;
+        AAALarge: boolean;
+    };
+    suggestion?: string;
+}
+export interface ContrastReport {
+    checks: ContrastResult[];
+    failures: ContrastResult[];
+    warnings: ContrastResult[];
+    passCount: number;
+    failCount: number;
+    summary: string;
+}
+export interface ContextualToken {
+    name: string;
+    default: string;
+    contexts: Record<string, string>;
+}
+export interface TokenContext {
+    name: string;
+    parentSelector?: string;
+    tokens: Record<string, any>;
+}
+/**
+ * Parse CSS color to RGBA components.
+ * Supports: hex, rgb(), rgba(), named colors
+ */
+declare function parseColor(color: string): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+} | null;
+/**
+ * Calculate WCAG contrast ratio between two colors.
+ * Returns value between 1 (no contrast) and 21 (max contrast).
+ */
+export declare function contrastRatio(foreground: string, background: string): number;
+/**
+ * Check WCAG compliance levels.
+ * AA: 4.5:1 normal, 3:1 large text
+ * AAA: 7:1 normal, 4.5:1 large text
+ */
+export declare function checkContrast(foreground: string, background: string): ContrastResult;
+/**
+ * Run contrast checks across a set of style definitions.
+ */
+export declare function auditContrast(styles: Array<{
+    selector: string;
+    color: string;
+    backgroundColor: string;
+}>): ContrastReport;
+/**
+ * Contextual tokens that auto-resolve based on parent container.
+ *
+ * @example
+ *   const buttonText = contextualToken({
+ *     default: '#1a1a1a',
+ *     contexts: {
+ *       '.dark-section': '#ffffff',
+ *       '.hero': '#ffffff',
+ *     },
+ *   });
+ *
+ *   resolveContextual(buttonText, '.dark-section .my-button')
+ *   // => '#ffffff'
+ */
+export declare function createContextualToken(defaultValue: string, contexts?: Record<string, string>): ContextualToken;
+/**
+ * Resolve a contextual token based on the current selector path.
+ * Matches the most specific context that applies.
+ */
+export declare function resolveContextual(token: ContextualToken, selectorPath: string): string;
+/**
+ * Generate CSS custom property fallback for contextual tokens.
+ *
+ * @example
+ *   generateContextualCSS('button-text', contextualToken)
+ *   // => "
+ *   //   .my-button { --button-text: #1a1a1a; }
+ *   //   .dark-section .my-button { --button-text: #ffffff; }
+ *   // "
+ */
+export declare function generateContextualCSS(propertyName: string, token: ContextualToken, baseSelector: string): string;
+/**
+ * Validate that token references are consistent.
+ * E.g., "primary" should have both foreground and background variants
+ * that contrast well with each other.
+ */
+export declare function validateTokenRelationships(tokens: Record<string, any>, pairs: Array<{
+    foreground: string;
+    background: string;
+    label: string;
+}>): ContrastReport;
+export declare const orchestrator: {
+    contrastRatio: typeof contrastRatio;
+    checkContrast: typeof checkContrast;
+    auditContrast: typeof auditContrast;
+    createContextualToken: typeof createContextualToken;
+    resolveContextual: typeof resolveContextual;
+    generateContextualCSS: typeof generateContextualCSS;
+    validateTokenRelationships: typeof validateTokenRelationships;
+    parseColor: typeof parseColor;
+};
+export default orchestrator;

package/dist/compiler/intent-engine.d.ts

@@ -1,4 +1,5 @@
 import type { CorrectionResult, HealMode, HealResult, IntentContext } from '../core/types.js';
+import { detectIfPatterns, emitCSSIf } from './css-if-transpiler.js';
 export type { CorrectionResult, HealMode, HealResult, IntentContext };
 interface ValueCorrection {
     wrong: string;
@@ -15,11 +16,24 @@ export declare const intent: {
     };
     getCorrections(property: string): ValueCorrection[];
     explain(correction: CorrectionResult): string;
-    getKnownProperties(): string[];
+    cssIf: {
+        detect: typeof detectIfPatterns;
+        emit: typeof emitCSSIf;
+    };
     getIntents(): {
         pattern: string;
         description: string;
     }[];
+    getKnownProperties(): string[];
+    macro(name: string): Record<string, any> | null;
+    getMacros(): string[];
+    getMacroDescription(name: string): string | null;
+    hasMacro(name: string): boolean;
+    /**
+     * Apply a layout macro to an existing styles object.
+     * Merges macro properties with user overrides.
+     */
+    applyMacro(name: string, overrides?: Record<string, any>): Record<string, any> | null;
 };
 export declare const correct: (property: string, value: string, context?: IntentContext) => CorrectionResult | null;
 export declare const heal: (styles: Record<string, any>, mode?: HealMode, context?: IntentContext) => HealResult;
@@ -28,4 +42,8 @@ export declare const validate: (property: string, value: string) => {
     suggestion?: string;
 };
 export declare const getIntent: (value: string, ctx?: IntentContext) => string | null;
+export declare const macro: (name: string) => Record<string, any> | null;
+export declare const applyMacro: (name: string, overrides?: Record<string, any>) => Record<string, any> | null;
+export declare const getMacros: () => string[];
+export declare const hasMacro: (name: string) => boolean;
 export default intent;

package/dist/compiler/scroll-timeline.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Scroll-Driven Animations Engine
+ *
+ * Compiles timeline-based animation descriptions into:
+ *   1. Native CSS scroll-timeline / view-timeline (Chromium 115+)
+ *   2. @supports fallback with JavaScript polyfill hint
+ *
+ * API inspiration: GSAP's ScrollTrigger, but compiles to 0kb JS.
+ */
+export interface ScrollTimelineConfig {
+    /** Name of the timeline */
+    name: string;
+    /** What drives the timeline */
+    source: 'scroll' | 'view';
+    /** The scrollable element (default: nearest scrollable ancestor) */
+    scroller?: 'nearest' | 'root' | 'self' | string;
+    /** Scroll axis */
+    axis?: 'block' | 'inline' | 'x' | 'y';
+    /** For view timelines: when does the element enter/exit */
+    inset?: string | {
+        start: string;
+        end: string;
+    };
+    /** Timeline range (for view timelines) */
+    range?: 'cover' | 'contain' | 'entry' | 'exit' | 'entry-crossing' | 'exit-crossing' | string;
+}
+export interface KeyframeStep {
+    /** Percentage or keyword (e.g., '0%', 'from', 'to') */
+    offset: string;
+    /** CSS properties at this keyframe */
+    properties: Record<string, string | number>;
+    /** Easing for this segment */
+    easing?: string;
+}
+export interface ScrollAnimation {
+    /** Selector to animate */
+    selector: string;
+    /** Timeline configuration */
+    timeline: ScrollTimelineConfig;
+    /** Keyframes */
+    keyframes: KeyframeStep[];
+    /** Animation duration (maps to timeline range) */
+    duration?: string;
+    /** Fill mode */
+    fill?: 'none' | 'forwards' | 'backwards' | 'both';
+    /** Iteration count */
+    iterations?: number | 'infinite';
+    /** Delay before starting */
+    delay?: string;
+}
+export interface ScrollTimelineResult {
+    /** Native CSS for scroll-driven animation */
+    css: string;
+    /** The @keyframes name generated */
+    animationName: string;
+    /** The timeline name generated */
+    timelineName: string;
+    /** Fallback CSS for browsers without scroll-timeline */
+    fallback: string;
+}
+export declare const SCROLL_PRESETS: Record<string, ScrollAnimation>;
+/**
+ * Compile a scroll animation into CSS.
+ *
+ * Output includes:
+ *   - @keyframes definition
+ *   - animation-timeline property
+ *   - animation-range (for view timelines)
+ *   - @supports fallback for older browsers
+ */
+export declare function compileScrollAnimation(animation: ScrollAnimation): ScrollTimelineResult;
+/**
+ * Compile multiple scroll animations for a page.
+ */
+export declare function compileScrollAnimations(animations: ScrollAnimation[]): string;
+/**
+ * Create a scroll animation from a preset.
+ */
+export declare function createScrollAnimation(preset: keyof typeof SCROLL_PRESETS, selector: string, overrides?: Partial<ScrollAnimation>): ScrollAnimation;
+/**
+ * Get available scroll animation presets.
+ */
+export declare function getScrollPresets(): string[];
+export declare const scrollTimeline: {
+    compile: typeof compileScrollAnimation;
+    compileAll: typeof compileScrollAnimations;
+    create: typeof createScrollAnimation;
+    presets: Record<string, ScrollAnimation>;
+    getPresets: typeof getScrollPresets;
+};
+export default scrollTimeline;

package/dist/index.d.ts

@@ -40,6 +40,10 @@ export type { Chain } from './compiler/Chain.js';
 export type { AnimationConfig, KeyframeDefinition } from './compiler/animations.js';
 export type { BreakpointsMap, ResponsiveStyle } from './compiler/breakpoints.js';
 export declare const VERSION = "3.0.0";
+export { orchestrator, contrastRatio, checkContrast, auditContrast, createContextualToken, resolveContextual, generateContextualCSS, validateTokenRelationships, } from './compiler/design-orchestrator.js';
+export type { ContrastResult, ContrastReport, ContextualToken, TokenContext } from './compiler/design-orchestrator.js';
+export { scrollTimeline, compileScrollAnimation, compileScrollAnimations, createScrollAnimation, getScrollPresets, SCROLL_PRESETS, } from './compiler/scroll-timeline.js';
+export type { ScrollTimelineConfig, ScrollAnimation, ScrollTimelineResult, KeyframeStep } from './compiler/scroll-timeline.js';
 import { chain } from './compiler/Chain.js';
 export default chain;
 export type { Properties as CSSProperties } from 'csstype';