@mks2508/waapi-animation-primitives 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,502 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface FormatOptions {
+    style?: "decimal" | "currency" | "percent";
+    currency?: string;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    useGrouping?: boolean;
+}
+interface SlidingNumberProps {
+    value: number;
+    duration?: number;
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+    digitHeight?: number;
+    stagger?: number;
+    motionBlur?: boolean;
+    format?: FormatOptions;
+    trend?: -1 | 0 | 1;
+    animationConfig?: {
+        overshoot?: number;
+        mass?: number;
+        stiffness?: number;
+    };
+}
+declare function SlidingNumber({ value, duration, fontSize, fontWeight, color, digitHeight, stagger, motionBlur, format, trend, animationConfig, }: SlidingNumberProps): react_jsx_runtime.JSX.Element;
+
+interface SlidingTextProps {
+    text: string;
+    mode?: 'word' | 'character' | 'none';
+    direction?: 'vertical' | 'horizontal';
+    staggerDelay?: number;
+    duration?: number;
+    easing?: string;
+    blur?: boolean;
+    widthAnimation?: boolean;
+    initial?: 'initial' | false;
+    animate?: 'animate';
+    exit?: 'exit';
+    onAnimationComplete?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SlidingText: React.FC<SlidingTextProps>;
+
+interface Token {
+    id: string;
+    text: string;
+}
+interface AnimatedTokensProps {
+    tokens: Token[];
+    placeholder?: string;
+    maxVisible?: number;
+    textAnimationMode?: 'character' | 'word';
+    textDirection?: 'vertical' | 'horizontal';
+    textStaggerDelay?: number;
+    separator?: string;
+    enableWidthAnimation?: boolean;
+    className?: string;
+    tokenClassName?: string;
+    placeholderClassName?: string;
+    separatorClassName?: string;
+}
+declare const AnimatedTokens: React.FC<AnimatedTokensProps>;
+
+interface AnimationConfig {
+    onComplete: (id: string) => void;
+    exitDuration?: number;
+    flipDuration?: number;
+    exitEasing?: string;
+    flipEasing?: string;
+}
+declare const useWAAPIAnimations: (config: AnimationConfig) => {
+    registerElement: (id: string, el: HTMLElement | null) => void;
+    startExit: (id: string) => Promise<void>;
+    isAnimating: (id?: string) => boolean;
+    cancelAnimations: (id: string) => void;
+};
+
+/**
+ * Obtiene duración de animación responsiva para el dispositivo actual
+ * @param baseDuration - Duración base en ms
+ * @returns Duración ajustada para dispositivo actual
+ */
+declare const getResponsiveDuration: (baseDuration: number) => number;
+/**
+ * Obtiene stagger delay responsivo
+ * @param baseDelay - Delay base en ms
+ * @returns Delay ajustado para dispositivo actual
+ */
+declare const getResponsiveStagger: (baseDelay: number) => number;
+declare const TIMING: {
+    readonly ENTER_DURATION: 200;
+    readonly EXIT_DURATION: 180;
+    readonly COLLAPSE_DURATION: 200;
+    readonly FLIP_DURATION: 300;
+    readonly ENTER_STAGGER: 15;
+    readonly EXIT_STAGGER: 0;
+    readonly COLLAPSE_DELAY: 30;
+    readonly FLIP_DELAY_PERCENT: 0.25;
+    readonly MIN_DELTA_PX: 1;
+};
+declare const TRANSFORMS: {
+    readonly OFFSET_Y_ENTER: 8;
+    readonly OFFSET_Y_EXIT: -8;
+    readonly OFFSET_X: 16;
+    readonly SCALE_EXIT: 0.95;
+    readonly ROTATE_EXIT: 0;
+};
+declare const EFFECTS: {
+    readonly BLUR_ENTER: 4;
+    readonly BLUR_EXIT: 2;
+};
+declare const EASINGS: {
+    readonly EASE_OUT_CUBIC: "cubic-bezier(0.33, 1, 0.68, 1)";
+    readonly EASE_IN_CUBIC: "cubic-bezier(0.32, 0, 0.67, 0)";
+    readonly EASE_IN_OUT: "cubic-bezier(0.42, 0, 0.58, 1)";
+    readonly EASE_OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)";
+    readonly EASE_FLIP: "cubic-bezier(0.2, 0, 0.2, 1)";
+    readonly SPRING_GENTLE: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+    readonly SPRING_SNAPPY: "linear(0, 0.006, 0.024 2%, 0.096 4.2%, 0.397 9.3%, 0.861 15.8%, 1.002 18.7%, 1.093 21.4%, 1.143 24%, 1.156, 1.149 28.3%, 1.115 31.5%, 1.022 40%, 0.988 47.1%, 0.984 55.1%, 0.998 72.3%, 1.001 85.4%, 1)";
+};
+/**
+ * Configuración de animación responsiva con accessibility
+ */
+declare const RESPONSIVE_CONFIGS: {
+    readonly tokenEnter: {
+        readonly duration: number;
+        readonly stagger: number;
+        readonly easing: "cubic-bezier(0.33, 1, 0.68, 1)";
+        readonly blur: 4;
+        readonly offsetY: 8;
+    };
+    readonly tokenExit: {
+        readonly duration: number;
+        readonly stagger: number;
+        readonly easing: "cubic-bezier(0.32, 0, 0.67, 0)";
+        readonly blur: 2;
+        readonly offsetY: -8;
+        readonly scale: 0.95;
+    };
+    readonly collapse: {
+        readonly duration: number;
+        readonly delay: 30;
+        readonly easing: "cubic-bezier(0.42, 0, 0.58, 1)";
+    };
+    readonly flip: {
+        readonly duration: number;
+        readonly delayPercent: 0.25;
+        readonly easing: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+    };
+};
+declare const ANIMATION_DEFAULTS: {
+    DURATION_ENTER: 200;
+    DURATION_EXIT: 180;
+    DURATION_FLIP: 300;
+    STAGGER_DELAY: 15;
+    OFFSET_VERTICAL: 8;
+    OFFSET_HORIZONTAL: 16;
+    BLUR_AMOUNT: 4;
+    EASING_ENTER: "cubic-bezier(0.33, 1, 0.68, 1)";
+    EASING_EXIT: "cubic-bezier(0.32, 0, 0.67, 0)";
+    EASING_FLIP: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+    SPRING_EASING: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+};
+declare const ANIMATION_CONFIGS: {
+    readonly tokenEnter: {
+        readonly duration: 200;
+        readonly stagger: 15;
+        readonly easing: "cubic-bezier(0.33, 1, 0.68, 1)";
+        readonly blur: 4;
+        readonly offsetY: 8;
+    };
+    readonly tokenExit: {
+        readonly duration: 180;
+        readonly stagger: 0;
+        readonly easing: "cubic-bezier(0.32, 0, 0.67, 0)";
+        readonly blur: 2;
+        readonly offsetY: -8;
+        readonly scale: 0.95;
+    };
+    readonly collapse: {
+        readonly duration: 200;
+        readonly delay: 30;
+        readonly easing: "cubic-bezier(0.42, 0, 0.58, 1)";
+    };
+    readonly flip: {
+        readonly duration: 300;
+        readonly delayPercent: 0.25;
+        readonly easing: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+    };
+};
+declare const PRESETS: {
+    newToken: {
+        mode: "character";
+        direction: "vertical";
+        staggerDelay: number;
+        blur: boolean;
+        widthAnimation: boolean;
+        duration: number;
+        initial: "initial";
+    };
+    existingToken: {
+        mode: "none";
+        blur: boolean;
+        widthAnimation: boolean;
+        initial: false;
+    };
+    placeholder: {
+        mode: "word";
+        direction: "vertical";
+        blur: boolean;
+        widthAnimation: boolean;
+        duration: number;
+    };
+    separator: {
+        duration: number;
+        widthAnimation: boolean;
+    };
+};
+
+declare const slidingTextStyles: {
+    readonly container: React.CSSProperties;
+    readonly content: React.CSSProperties;
+    readonly token: React.CSSProperties;
+    readonly enterFrom: React.CSSProperties;
+    readonly enterTo: React.CSSProperties;
+    readonly exitActive: React.CSSProperties;
+    readonly verticalEnterFrom: React.CSSProperties;
+    readonly verticalExitActive: React.CSSProperties;
+    readonly horizontalEnterFrom: React.CSSProperties;
+    readonly horizontalExitActive: React.CSSProperties;
+};
+declare const getSlidingTextTokenStyle: (state: "enter-from" | "enter-to" | "exit-active", direction: "vertical" | "horizontal") => React.CSSProperties;
+
+declare const animatedTokensStyles: {
+    readonly container: React.CSSProperties;
+    readonly placeholder: React.CSSProperties;
+    readonly tokenWrapper: React.CSSProperties;
+    readonly tokenWrapperLast: React.CSSProperties;
+    readonly tokenWrapperExitCompleted: React.CSSProperties;
+    readonly separator: React.CSSProperties;
+    readonly separatorExitActive: React.CSSProperties;
+    readonly overflow: React.CSSProperties;
+    readonly overflowExiting: React.CSSProperties;
+};
+declare const getResponsiveAnimatedTokensStyle: () => React.CSSProperties;
+
+interface TimingData {
+    startTime: number;
+    endTime?: number;
+    expectedDuration: number;
+    actualDuration?: number;
+    deviation?: number;
+    deviationPercent?: number;
+}
+interface StyleData {
+    property: string;
+    expected: string;
+    actual: string;
+    matches: boolean;
+}
+interface PositionData {
+    element: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    delta?: {
+        x: number;
+        y: number;
+    };
+}
+interface AnimationData {
+    name: string;
+    phase: 'start' | 'running' | 'complete' | 'cancelled';
+    progress?: number;
+    easing?: string;
+    fill?: string;
+}
+type DebugEventType = 'token-add' | 'token-remove' | 'token-reorder' | 'token-exit-start' | 'token-exit-complete' | 'token-dom-remove' | 'overflow-token-remove' | 'flip-animation' | 'flip-animation-complete' | 'flip-all-animations-complete' | 'flip-executing-callback' | 'flip-measure-start' | 'flip-position-measured' | 'flip-invalid-rect' | 'flip-invalid-delta' | 'flip-manual-trigger' | 'flip-capture-positions' | 'flip-position-captured' | 'waapi-exit-start' | 'waapi-exit-complete' | 'waapi-flip-animation' | 'exit-fade-complete' | 'orchestration-complete' | 'animation-start-detailed' | 'animation-complete-detailed' | 'animation-timing' | 'style-capture' | 'style-mismatch' | 'position-capture' | 'position-delta' | 'choreography-overlap' | 'choreography-sequence' | 'text-enter-start' | 'text-enter-complete' | 'triggering-flip-before-absolute' | 'state-change' | 'render' | 'animation-complete-called' | 'scheduling-raf' | 'raf-executed' | 'component-unmounted' | 'token-removing-from-layout' | 'exit-completed-ids-updated' | 'exit-completed-change' | 'registering-callback' | 'callback-fired';
+interface DebugEvent {
+    timestamp: number;
+    type: DebugEventType;
+    source: string;
+    message: string;
+    timing?: TimingData;
+    styles?: StyleData[];
+    position?: PositionData;
+    animation?: AnimationData;
+    data?: Record<string, unknown>;
+}
+interface DebugContextValue {
+    events: DebugEvent[];
+    isEnabled: boolean;
+    enableDebug: () => void;
+    disableDebug: () => void;
+    toggleDebug: () => void;
+    logEvent: (event: Omit<DebugEvent, 'timestamp'>) => void;
+    clearEvents: () => void;
+    getEventLog: () => string;
+    exportToCSV: () => string;
+}
+declare const useDebug: () => DebugContextValue;
+declare const DebugProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+
+interface AnimationInfo {
+    id: string;
+    type: 'exit-fade' | 'exit-collapse' | 'flip' | 'enter' | 'width-collapse';
+    elementId: string;
+    startTime: number;
+    expectedDuration: number;
+    endTime?: number;
+    actualDuration?: number;
+}
+interface TimelineEvent {
+    time: number;
+    event: 'animation-start' | 'animation-end' | 'overlap-detected';
+    animationId: string;
+    type?: string;
+    overlappingWith?: string[];
+    expectedDuration?: number;
+    actualDuration?: number;
+    deviation?: number;
+}
+interface OverlapInfo {
+    animation1: string;
+    animation2: string;
+    overlapStart: number;
+    overlapDuration: number;
+}
+interface ChoreographySummary {
+    totalAnimations: number;
+    totalDuration: number;
+    overlaps: OverlapInfo[];
+    timeline: TimelineEvent[];
+    activeAnimations: AnimationInfo[];
+}
+/**
+ * ChoreographyTracker - Singleton for tracking animation choreography
+ * Detects overlaps, generates timeline, measures actual vs expected timing
+ */
+declare class ChoreographyTrackerClass {
+    private activeAnimations;
+    private timeline;
+    private completedAnimations;
+    private sessionStartTime;
+    /**
+     * Start a new tracking session (call when debug panel is cleared)
+     */
+    startSession(): void;
+    /**
+     * Get relative time since session start
+     */
+    private getRelativeTime;
+    /**
+     * Start tracking an animation
+     */
+    startAnimation(id: string, type: AnimationInfo['type'], elementId: string, expectedDuration: number): void;
+    /**
+     * End tracking an animation
+     */
+    endAnimation(id: string): AnimationInfo | undefined;
+    /**
+     * Detect which animations are overlapping with the given animation
+     */
+    private detectOverlaps;
+    /**
+     * Get all overlap pairs with duration
+     */
+    getOverlaps(): OverlapInfo[];
+    /**
+     * Get current timeline
+     */
+    getTimeline(): TimelineEvent[];
+    /**
+     * Get active animation count
+     */
+    getActiveCount(): number;
+    /**
+     * Get active animations
+     */
+    getActiveAnimations(): AnimationInfo[];
+    /**
+     * Get completed animations
+     */
+    getCompletedAnimations(): AnimationInfo[];
+    /**
+     * Get full choreography summary
+     */
+    getSummary(): ChoreographySummary;
+    /**
+     * Get timeline for visualization (normalized to 0-100%)
+     */
+    getTimelineForVisualization(): Array<{
+        id: string;
+        type: string;
+        elementId: string;
+        startPercent: number;
+        widthPercent: number;
+        duration: number;
+        isActive: boolean;
+    }>;
+}
+declare const choreographyTracker: ChoreographyTrackerClass;
+
+interface StyleCapture {
+    opacity: string;
+    transform: string;
+    filter: string;
+    width: string;
+    height: string;
+    marginRight: string;
+    marginLeft: string;
+    position: string;
+    visibility: string;
+    pointerEvents: string;
+}
+interface PositionCapture {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+}
+interface StyleComparison {
+    property: string;
+    expected: string;
+    actual: string;
+    matches: boolean;
+}
+interface TimingResult {
+    startTime: number;
+    endTime: number;
+    expectedDuration: number;
+    actualDuration: number;
+    deviation: number;
+    deviationPercent: number;
+}
+interface AnimationTimer {
+    start: number;
+    expectedDuration: number;
+    end: () => TimingResult;
+}
+/**
+ * Capture relevant computed styles from an element
+ * These are the styles we animate and need to verify
+ */
+declare function captureComputedStyles(el: HTMLElement): StyleCapture;
+/**
+ * Capture styles as a simple key-value object for logging
+ */
+declare function captureStylesForLog(el: HTMLElement): Record<string, string>;
+/**
+ * Capture complete position information from DOMRect
+ */
+declare function capturePosition(el: HTMLElement): PositionCapture;
+/**
+ * Capture position as simple object for logging
+ */
+declare function capturePositionForLog(el: HTMLElement): Record<string, number>;
+/**
+ * Calculate delta between two positions
+ */
+declare function calculatePositionDelta(before: PositionCapture, after: PositionCapture): {
+    deltaX: number;
+    deltaY: number;
+    deltaWidth: number;
+    deltaHeight: number;
+};
+/**
+ * Compare expected styles vs actual computed styles
+ * Used to verify animations applied correctly
+ */
+declare function compareStyles(expected: Record<string, string>, el: HTMLElement): StyleComparison[];
+/**
+ * Create a timer for measuring actual animation duration
+ * Uses performance.now() for high precision
+ */
+declare function createAnimationTimer(expectedDuration: number): AnimationTimer;
+/**
+ * Format timing result for display
+ */
+declare function formatTimingResult(timing: TimingResult): string;
+/**
+ * Extract animation info from WAAPI Animation object
+ */
+declare function captureAnimationInfo(animation: Animation): Record<string, unknown>;
+/**
+ * Capture all active animations on an element
+ */
+declare function captureElementAnimations(el: HTMLElement): Record<string, unknown>[];
+
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, AnimatedTokens, type AnimatedTokensProps, type AnimationData, type AnimationInfo, type AnimationTimer, type ChoreographySummary, ChoreographyTrackerClass, type DebugEvent, type DebugEventType, DebugProvider, EASINGS, EFFECTS, type FormatOptions, type OverlapInfo, PRESETS, type PositionCapture, type PositionData, RESPONSIVE_CONFIGS, SlidingNumber, type SlidingNumberProps, SlidingText, type SlidingTextProps, type StyleCapture, type StyleComparison, type StyleData, TIMING, TRANSFORMS, type TimelineEvent, type TimingData, type TimingResult, type Token, animatedTokensStyles, calculatePositionDelta, captureAnimationInfo, captureComputedStyles, captureElementAnimations, capturePosition, capturePositionForLog, captureStylesForLog, choreographyTracker, compareStyles, createAnimationTimer, formatTimingResult, getResponsiveAnimatedTokensStyle, getResponsiveDuration, getResponsiveStagger, getSlidingTextTokenStyle, slidingTextStyles, useDebug, useWAAPIAnimations };