@mks2508/waapi-animation-primitives 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,85 +1,1064 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import * as react0 from "react";
+import React$1, { ElementType, ReactNode, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/styles/injectStyles.d.ts
+/**
+ * Inyecta las CSS variables en el documento.
+ * Se llama automáticamente al importar el package.
+ * Es idempotente - solo inyecta una vez.
+ */
+declare const injectCSSVariables: () => void;
+/**
+ * Remueve las CSS variables inyectadas.
+ * Útil para cleanup en tests o hot reload.
+ */
+declare const removeCSSVariables: () => void;
+/**
+ * Fuerza la re-inyección de CSS variables.
+ * Útil cuando cambian los valores dinámicamente.
+ */
+declare const reinjectCSSVariables: () => void;
+//#endregion
+//#region src/components/SlidingNumber.d.ts
 interface FormatOptions {
-    style?: "decimal" | "currency" | "percent";
-    currency?: string;
-    locale?: string;
-    minimumFractionDigits?: number;
-    maximumFractionDigits?: number;
-    useGrouping?: boolean;
+  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;
-
+  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_runtime0.JSX.Element;
+//#endregion
+//#region src/components/SlidingText.d.ts
 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>;
-
+  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$1.CSSProperties;
+}
+declare const SlidingText: React$1.FC<SlidingTextProps>;
+//#endregion
+//#region src/components/AnimatedTokens.d.ts
 interface Token {
-    id: string;
-    text: string;
+  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>;
-
+  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$1.FC<AnimatedTokensProps>;
+//#endregion
+//#region src/hooks/useListFormat.d.ts
+type ListFormatType = 'conjunction' | 'disjunction' | 'unit';
+type ListFormatStyle = 'long' | 'short' | 'narrow';
+interface IntlListFormatPart {
+  type: 'element' | 'literal';
+  value: string;
+}
+interface IntlListFormatOptions {
+  type?: ListFormatType;
+  style?: ListFormatStyle;
+}
+interface IntlListFormat {
+  format(list: string[]): string;
+  formatToParts(list: string[]): IntlListFormatPart[];
+}
+interface IntlListFormatConstructor {
+  new (locale?: string | string[], options?: IntlListFormatOptions): IntlListFormat;
+}
+declare global {
+  namespace Intl {
+    const ListFormat: IntlListFormatConstructor;
+  }
+}
+interface UseListFormatOptions {
+  locale?: string;
+  type?: ListFormatType;
+  style?: ListFormatStyle;
+  separator?: string;
+}
+interface ListPart {
+  type: 'element' | 'literal';
+  value: string;
+  index: number;
+}
+/**
+ * Hook for locale-aware list formatting using Intl.ListFormat
+ *
+ * Provides parts that can be rendered individually with animations.
+ * Uses browser's Intl.ListFormat API for proper locale handling.
+ *
+ * @example
+ * ```tsx
+ * // Automatic locale detection
+ * const parts = useListFormat(['Apple', 'Banana', 'Cherry']);
+ * // en: [{ type: 'element', value: 'Apple' }, { type: 'literal', value: ', ' }, ...]
+ *
+ * // Spanish
+ * const parts = useListFormat(['Apple', 'Banana', 'Cherry'], { locale: 'es' });
+ * // es: [..., { type: 'literal', value: ' y ' }, { type: 'element', value: 'Cherry' }]
+ *
+ * // Disjunction (or)
+ * const parts = useListFormat(['A', 'B', 'C'], { type: 'disjunction' });
+ * // en: "A, B, or C"
+ *
+ * // Manual override
+ * const parts = useListFormat(['A', 'B', 'C'], { separator: ' | ' });
+ * // "A | B | C"
+ * ```
+ */
+declare function useListFormat(items: string[], options?: UseListFormatOptions): ListPart[];
+//#endregion
+//#region src/components/AnimatedTokensV2.d.ts
+interface Token$1 {
+  id: string;
+  text: string;
+}
+interface AnimatedTokensV2Props {
+  tokens: Token$1[];
+  placeholder?: string;
+  maxVisible?: number;
+  textAnimationMode?: 'character' | 'word';
+  textDirection?: 'vertical' | 'horizontal';
+  textStaggerDelay?: number;
+  locale?: string;
+  listType?: ListFormatType;
+  listStyle?: ListFormatStyle;
+  separator?: string;
+  enableWidthAnimation?: boolean;
+  className?: string;
+  tokenClassName?: string;
+  placeholderClassName?: string;
+  separatorClassName?: string;
+}
+/**
+ * AnimatedTokensV2 - Locale-aware animated token list
+ *
+ * Uses Intl.ListFormat for proper locale-aware separators.
+ * Supports conjunction ("and"), disjunction ("or"), and unit (space) types.
+ *
+ * @example
+ * ```tsx
+ * // Automatic locale (browser default)
+ * <AnimatedTokensV2 tokens={tags} />
+ * // en-US: "Apple, Banana, and Cherry"
+ * // es-ES: "Apple, Banana y Cherry"
+ *
+ * // Specific locale
+ * <AnimatedTokensV2 tokens={tags} locale="es" />
+ *
+ * // Disjunction (or)
+ * <AnimatedTokensV2 tokens={tags} listType="disjunction" />
+ * // "Apple, Banana, or Cherry"
+ *
+ * // Manual override
+ * <AnimatedTokensV2 tokens={tags} separator=" | " />
+ * // "Apple | Banana | Cherry"
+ * ```
+ */
+declare const AnimatedTokensV2: React.FC<AnimatedTokensV2Props>;
+//#endregion
+//#region src/hooks/useWAAPIAnimations.d.ts
+interface SeparatorState {
+  tokenId: string;
+  isVisible: boolean;
+  isAnimating: boolean;
+  animationPhase: 'idle' | 'exit-coordinated' | 'flip-coordinated' | 'completed';
+  startTime?: number;
+  expectedEndTime?: number;
+}
 interface AnimationConfig {
-    onComplete: (id: string) => void;
-    exitDuration?: number;
-    flipDuration?: number;
-    exitEasing?: string;
-    flipEasing?: string;
+  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;
+  registerElement: (id: string, el: HTMLElement | null) => void;
+  startExit: (id: string, additionalSeparatorIds?: string[]) => Promise<void>;
+  isAnimating: (id?: string) => boolean;
+  cancelAnimations: (id: string) => void;
+  registerSeparator: (tokenId: string, el: HTMLElement | null) => void;
+  getSeparatorState: (tokenId: string) => SeparatorState | undefined;
+  startSeparatorAnimation: (tokenId: string) => Promise<void>;
+  cleanupSeparatorStates: (visibleTokenIds: Set<string>) => void;
 };
-
+//#endregion
+//#region src/contexts/DebugContext.d.ts
+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' | 'flip-skipped' | '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' | 'reorder-item-enter' | 'reorder-item-exit' | 'reorder-item-exit-complete' | 'reorder-flip-start' | 'reorder-flip-complete' | 'reorder-flip-before-capture' | 'reorder-flip-after-capture' | 'reorder-flip-after-positions' | 'reorder-flip-after-precaptured' | 'reorder-flip-delta' | 'reorder-flip-reflow-trigger' | 'reorder-flip-skipped' | 'reorder-flip-filter' | 'reorder-stagger-start' | 'reorder-ghost-created' | 'reorder-ghost-removed' | 'reorder-register-element' | 'reorder-animation-start' | 'reorder-animation-complete' | 'reorder-animation-setup' | 'reorder-animation-created' | 'reorder-animation-init' | 'reorder-animation-error' | 'reorder-exit-check' | 'reorder-exit-rejected' | 'reorder-reflow-triggered' | 'reorder-transform-applied' | 'reorder-display-none' | 'reorder-position-absolute' | 'reorder-after-immediate' | 'reorder-exit-cleanup' | 'reorder-await-start' | 'reorder-await-complete' | 'reorder-enter-start' | 'reorder-enter-complete' | 'separator-animation-start' | 'separator-animation-state-only' | 'separator-animation-skipped' | 'separator-flip-start' | 'separator-animation-complete' | 'separator-state-cleanup' | 'test-suite-start' | 'test-suite-complete' | 'test-suite-error' | 'test-suite-stopped' | 'test-start' | 'test-complete' | 'test-error' | 'test-progress' | 'test-flip-capture' | 'test-export' | 'test-manual-remove' | '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;
+  perfNow?: 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' | 'perfNow'>) => void;
+  clearEvents: () => void;
+  getEventLog: () => string;
+  exportToCSV: () => string;
+  startCollecting: () => void;
+  stopCollecting: () => DebugEvent[];
+  isCollecting: boolean;
+  flushEvents: () => void;
+}
+declare const useDebug: () => DebugContextValue;
+declare const DebugProvider: React$1.FC<{
+  children: React$1.ReactNode;
+}>;
+//#endregion
+//#region src/utils/choreographyTracker.d.ts
+interface AnimationInfo {
+  id: string;
+  type: 'exit-fade' | 'exit-collapse' | 'flip' | 'enter' | 'width-collapse' | 'separator-exit';
+  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;
+//#endregion
+//#region src/core/types.d.ts
+/**
+ * Core types for headless animation primitives
+ * Based on WAAPI (Web Animations API) patterns
+ */
+interface FLIPDelta {
+  id: string;
+  deltaX: number;
+  deltaY: number;
+  deltaWidth: number;
+  deltaHeight: number;
+  isSignificant: boolean;
+}
+interface AnimationTiming {
+  duration: number;
+  delay?: number;
+  easing: string;
+  fill?: FillMode;
+}
+interface PositionRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+interface ElementRegistryAPI {
+  register: (id: string, el: HTMLElement | null) => void;
+  unregister: (id: string) => void;
+  get: (id: string) => HTMLElement | undefined;
+  getAll: () => Map<string, HTMLElement>;
+  has: (id: string) => boolean;
+  clear: () => void;
+  size: number;
+}
+interface ElementRegistryCallbacks {
+  onRegister?: (id: string, el: HTMLElement) => void;
+  onUnregister?: (id: string) => void;
+}
+interface PositionCaptureAPI {
+  capture: (excludeIds?: Set<string>) => Map<string, DOMRect>;
+  getPosition: (id: string) => DOMRect | undefined;
+  calculateDeltas: (before: Map<string, DOMRect>, after: Map<string, DOMRect>) => Map<string, FLIPDelta>;
+  getLastCapture: () => Map<string, DOMRect>;
+  clear: () => void;
+}
+interface PositionCaptureOptions {
+  minDeltaPx?: number;
+}
+interface FLIPAnimationOptions {
+  duration?: number;
+  easing?: string;
+  onStart?: (id: string) => void;
+  onComplete?: (id: string) => void;
+}
+interface FLIPAnimationAPI {
+  animate: (element: HTMLElement, delta: FLIPDelta, options?: FLIPAnimationOptions) => Animation;
+  animateAll: (elements: Map<string, HTMLElement>, deltas: Map<string, FLIPDelta>, options?: FLIPAnimationOptions) => Promise<void>;
+  cancel: (id: string) => void;
+  cancelAll: () => void;
+  isAnimating: (id?: string) => boolean;
+}
+interface ExitOptions {
+  duration?: number;
+  easing?: string;
+  collapseWidth?: boolean;
+  additionalIds?: string[];
+  onComplete?: () => void;
+}
+interface EnterOptions {
+  duration?: number;
+  easing?: string;
+  stagger?: number;
+  onComplete?: () => void;
+}
+/**
+ * Controls which elements animate when an item exits
+ * - 'all': All remaining elements animate to fill the gap (default)
+ * - 'siblings-after': Only elements after the exiting one animate
+ * - 'none': No FLIP animation, item exits in-place
+ */
+type FLIPBehavior = 'all' | 'siblings-after' | 'none';
+/**
+ * Controls how the exiting element is positioned during exit animation
+ * - 'absolute-fixed': Position absolute with fixed coordinates (current default)
+ * - 'in-place': Stay in flow, no position change
+ * - 'custom': Consumer handles positioning via CSS/callbacks
+ */
+type ExitPositionStrategy = 'absolute-fixed' | 'in-place' | 'custom';
+interface AnimationOrchestratorConfig {
+  exitDuration?: number;
+  flipDuration?: number;
+  enterDuration?: number;
+  exitEasing?: string;
+  flipEasing?: string;
+  enterEasing?: string;
+  flipBehavior?: FLIPBehavior;
+  exitPositionStrategy?: ExitPositionStrategy;
+  minDeltaPx?: number;
+  onExitComplete?: (id: string) => void;
+  onEnterComplete?: (id: string) => void;
+}
+interface AnimationOrchestratorAPI {
+  registry: ElementRegistryAPI;
+  positions: PositionCaptureAPI;
+  flip: FLIPAnimationAPI;
+  registerElement: (id: string, el: HTMLElement | null) => void;
+  startExit: (id: string, options?: ExitOptions) => Promise<void>;
+  startEnter: (id: string, options?: EnterOptions) => Promise<void>;
+  isAnimating: (id?: string) => boolean;
+  cancelAnimation: (id: string) => void;
+  cancelAllAnimations: () => void;
+  capturePositions: (excludeIds?: Set<string>) => Map<string, DOMRect>;
+}
+interface OrchestratorState {
+  animatingIds: Set<string>;
+  positions: Map<string, DOMRect>;
+  activeAnimations: Map<string, Animation[]>;
+}
+type AnimationPhase = 'idle' | 'exit' | 'flip' | 'enter' | 'completed';
+interface AnimationEvent {
+  id: string;
+  phase: AnimationPhase;
+  timestamp: number;
+  duration?: number;
+}
+//#endregion
+//#region src/core/useElementRegistry.d.ts
+/**
+ * Hook for tracking DOM elements by ID
+ * Extracted from useWAAPIAnimations element registration logic
+ *
+ * @example
+ * ```tsx
+ * const registry = useElementRegistry({
+ *   onRegister: (id) => console.log(`Registered: ${id}`),
+ *   onUnregister: (id) => console.log(`Unregistered: ${id}`)
+ * });
+ *
+ * // In render:
+ * <div ref={el => registry.register('item-1', el)} />
+ * ```
+ */
+declare function useElementRegistry(callbacks?: ElementRegistryCallbacks): ElementRegistryAPI;
+//#endregion
+//#region src/core/usePositionCapture.d.ts
+/**
+ * Hook for capturing element positions and calculating FLIP deltas
+ * Extracted from useWAAPIAnimations position capture logic
+ *
+ * @example
+ * ```tsx
+ * const registry = useElementRegistry();
+ * const positions = usePositionCapture(registry.getAll);
+ *
+ * // Before layout change:
+ * const before = positions.capture();
+ *
+ * // After layout change:
+ * const after = positions.capture();
+ * const deltas = positions.calculateDeltas(before, after);
+ * ```
+ */
+declare function usePositionCapture(getElements: () => Map<string, HTMLElement>, options?: PositionCaptureOptions): PositionCaptureAPI;
+//#endregion
+//#region src/core/useFLIPAnimation.d.ts
+/**
+ * Hook for executing FLIP (First-Last-Invert-Play) animations
+ * Extracted from useWAAPIAnimations FLIP logic
+ *
+ * Uses spring easing for natural motion with slight overshoot
+ *
+ * @example
+ * ```tsx
+ * const flip = useFLIPAnimation();
+ *
+ * // After calculating deltas:
+ * await flip.animateAll(elements, deltas, {
+ *   duration: 300,
+ *   onComplete: (id) => console.log(`${id} completed`)
+ * });
+ * ```
+ */
+declare function useFLIPAnimation(): FLIPAnimationAPI;
+//#endregion
+//#region src/core/useAnimationOrchestrator.d.ts
+/**
+ * Main animation orchestrator hook
+ * Composes useElementRegistry, usePositionCapture, and useFLIPAnimation
+ *
+ * Handles the full exit animation sequence:
+ * 1. Capture positions of remaining elements
+ * 2. Run exit animation (fade + width collapse)
+ * 3. Start FLIP animations at 25% of exit (overlap)
+ * 4. Cleanup and notify completion
+ *
+ * @example
+ * ```tsx
+ * const orchestrator = useAnimationOrchestrator({
+ *   onExitComplete: (id) => removeFromList(id)
+ * });
+ *
+ * // Register elements:
+ * <div ref={el => orchestrator.registerElement('item-1', el)} />
+ *
+ * // Trigger exit:
+ * await orchestrator.startExit('item-1');
+ * ```
+ */
+declare function useAnimationOrchestrator(config?: AnimationOrchestratorConfig): AnimationOrchestratorAPI;
+//#endregion
+//#region src/primitives/reorder/types.d.ts
+/**
+ * Layout direction for reorder items
+ */
+type ReorderLayout = 'auto' | 'horizontal' | 'vertical' | 'grid';
+/**
+ * Stagger configuration
+ */
+type StaggerConfig = number | {
+  enter: number;
+  exit: number;
+};
+/**
+ * Duration configuration
+ */
+type DurationConfig = number | {
+  enter: number;
+  exit: number;
+};
+/**
+ * Props for Reorder container component
+ */
+interface ReorderProps {
+  children: ReactNode;
+  autoAnimate?: boolean;
+  stagger?: StaggerConfig;
+  duration?: DurationConfig;
+  layout?: ReorderLayout;
+  className?: string;
+  flipBehavior?: FLIPBehavior;
+  exitPositionStrategy?: ExitPositionStrategy;
+  onItemExit?: (id: string) => void;
+  onItemEnter?: (id: string) => void;
+  /**
+   * Callback for drag-and-drop reordering.
+   * @future Not yet implemented - planned for future version with @dnd-kit integration.
+   */
+  onReorder?: (oldIndex: number, newIndex: number) => void;
+}
+/**
+ * State passed to ReorderItem render props
+ */
+interface ReorderItemState {
+  isExiting: boolean;
+  isEntering: boolean;
+}
+/**
+ * Props for ReorderItem component
+ */
+interface ReorderItemProps {
+  children: ReactNode | ((state: ReorderItemState) => ReactNode);
+  id: string;
+  index?: number;
+  animate?: boolean;
+  className?: string;
+  as?: ElementType;
+}
+/**
+ * Return type for useReorder hook
+ * Agnostic primitive - separators are consumer responsibility (AnimatedTokensV2)
+ */
+interface UseReorderReturn extends AnimationOrchestratorAPI {
+  startItemExit: (id: string) => Promise<void>;
+  startItemEnter: (id: string) => Promise<void>;
+}
+/**
+ * Configuration for useReorder hook
+ */
+interface UseReorderConfig {
+  enterDuration?: number;
+  exitDuration?: number;
+  flipDuration?: number;
+  enterEasing?: string;
+  exitEasing?: string;
+  flipEasing?: string;
+  flipBehavior?: FLIPBehavior;
+  exitPositionStrategy?: ExitPositionStrategy;
+  onComplete?: (id: string) => void;
+}
+/**
+ * Context value for Reorder components
+ */
+interface ReorderContextValue {
+  reorder: UseReorderReturn;
+  layout: ReorderLayout;
+  isExiting: (id: string) => boolean;
+  isEntering: (id: string) => boolean;
+  exitingIds: string[];
+  enteringIds: string[];
+}
+/**
+ * Configuration for useReorderPresence hook
+ */
+interface UseReorderPresenceConfig {
+  autoAnimate?: boolean;
+  stagger?: StaggerConfig;
+  enterDuration?: number;
+  exitDuration?: number;
+  flipDuration?: number;
+  enterEasing?: string;
+  exitEasing?: string;
+  flipEasing?: string;
+  flipBehavior?: FLIPBehavior;
+  exitPositionStrategy?: ExitPositionStrategy;
+  onItemExit?: (id: string) => void;
+  onItemEnter?: (id: string) => void;
+  onAnimationComplete?: (id: string) => void;
+}
+/**
+ * Return type for useReorderPresence hook
+ */
+interface UseReorderPresenceReturn {
+  presentChildren: ReactNode;
+  triggerExit: (id: string) => void;
+  isExiting: (id: string) => boolean;
+  isEntering: (id: string) => boolean;
+  exitingIds: string[];
+  enteringIds: string[];
+  reorder: UseReorderReturn;
+}
+//#endregion
+//#region src/primitives/reorder/useReorder.d.ts
+/**
+ * Hook for managing reorderable lists with FLIP animations.
+ *
+ * Architecture: Thin wrapper around useAnimationOrchestrator
+ * - Delegates all animation logic to orchestrator
+ * - Provides stable API surface for Reorder component
+ *
+ * @example
+ * ```tsx
+ * const reorder = useReorder({
+ *   onComplete: (id) => removeFromList(id)
+ * });
+ *
+ * // Register elements:
+ * <div ref={el => reorder.registerElement('item-1', el)}>
+ *   Item 1
+ * </div>
+ *
+ * // Trigger exit:
+ * await reorder.startItemExit('item-1');
+ * ```
+ */
+declare function useReorder(config?: UseReorderConfig): UseReorderReturn;
+//#endregion
+//#region src/primitives/reorder/useReorderPresence.d.ts
+/**
+ * Hook for managing presence animations in reorderable lists
+ *
+ * IMPORTANT: This hook follows the AnimatedTokens pattern where:
+ * - Elements stay in DOM until animation completes
+ * - Consumer must keep items in their state until onAnimationComplete fires
+ * - No "ghost" cloning - animations run on actual DOM elements
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState(INITIAL_ITEMS);
+ *
+ * const { presentChildren, triggerExit } = useReorderPresence(
+ *   items.map(item => <div key={item.id}>{item.name}</div>),
+ *   {
+ *     onAnimationComplete: (id) => {
+ *       // Only remove from state AFTER animation completes
+ *       setItems(prev => prev.filter(item => item.id !== id));
+ *     }
+ *   }
+ * );
+ *
+ * const handleDelete = (id: string) => {
+ *   // DON'T remove from state - just trigger animation
+ *   triggerExit(id);
+ * };
+ * ```
+ */
+declare function useReorderPresence(children: ReactNode, config?: UseReorderPresenceConfig): UseReorderPresenceReturn;
+//#endregion
+//#region src/primitives/reorder/Reorder.d.ts
+/**
+ * Agnostic container for reorderable items with FLIP animations.
+ *
+ * Architecture: CSS + WAAPI (no React state for animation tracking)
+ * - CSS handles initial states ([data-reorder-state="entering"] starts hidden)
+ * - WAAPI handles all animations
+ * - React only manages displayChildren (what's in DOM)
+ *
+ * @example
+ * ```tsx
+ * <Reorder
+ *   layout="horizontal"
+ *   onItemExit={(id) => handleRemove(id)}
+ * >
+ *   {items.map(item => (
+ *     <div key={item.id}>{item.name}</div>
+ *   ))}
+ * </Reorder>
+ * ```
+ */
+declare const ReorderRoot: React$1.ForwardRefExoticComponent<ReorderProps & React$1.RefAttributes<{
+  startItemExit: (id: string) => Promise<void>;
+  startItemEnter: (id: string) => Promise<void>;
+  isAnimating: (id?: string) => boolean;
+}>>;
+//#endregion
+//#region src/primitives/morph/types.d.ts
+/**
+ * Available morphing techniques
+ */
+type MorphTechnique = 'flip-clip-path' | 'css-grid' | 'view-transitions';
+/**
+ * FLIP + clip-path specific options
+ */
+interface FLIPClipPathOptions {
+  duration?: number;
+  easing?: string;
+  clipPathStart?: string;
+  clipPathEnd?: string;
+}
+/**
+ * CSS Grid specific options
+ */
+interface CSSGridMorphOptions {
+  duration?: number;
+  easing?: string;
+}
+/**
+ * View Transitions API specific options
+ */
+interface ViewTransitionsOptions {
+  name?: string;
+  types?: string[];
+}
+/**
+ * Configuration for useMorph hook
+ */
+interface UseMorphOptions {
+  technique?: MorphTechnique;
+  duration?: number;
+  easing?: string;
+  onMorphStart?: () => void;
+  onMorphEnd?: () => void;
+}
+/**
+ * FLIP + clip-path API
+ */
+interface FLIPClipPathAPI {
+  isMorphing: boolean;
+  morph: (fromElement: HTMLElement, toElement: HTMLElement) => Promise<void>;
+  cancel: () => void;
+}
+/**
+ * CSS Grid morph API
+ */
+interface CSSGridMorphAPI {
+  isExpanded: boolean;
+  expand: () => void;
+  collapse: () => void;
+  toggle: () => void;
+  containerRef: RefObject<HTMLElement | null>;
+}
+/**
+ * View Transitions API
+ */
+interface ViewTransitionsAPI {
+  isSupported: boolean;
+  startTransition: (callback: () => void | Promise<void>) => Promise<void>;
+  setTypes: (types: string[]) => void;
+}
+/**
+ * Return type for useMorph hook
+ */
+interface UseMorphReturn {
+  isMorphing: boolean;
+  technique: MorphTechnique;
+  isViewTransitionsSupported: boolean;
+  morph: (fromElement: HTMLElement, toElement: HTMLElement) => Promise<void>;
+  cancel: () => void;
+  flipClipPath: FLIPClipPathAPI;
+  cssGrid: CSSGridMorphAPI;
+  viewTransitions: ViewTransitionsAPI;
+}
+/**
+ * Props for Morph component
+ */
+interface MorphProps {
+  children: ReactNode;
+  technique?: MorphTechnique;
+  duration?: number;
+  easing?: string;
+  className?: string;
+  onMorphStart?: () => void;
+  onMorphEnd?: () => void;
+}
+/**
+ * Context value for Morph components
+ */
+interface MorphContextValue {
+  morph: UseMorphReturn;
+}
+//#endregion
+//#region src/primitives/morph/MorphContext.d.ts
+/**
+ * Context for sharing Morph state between components
+ */
+declare const MorphContext: react0.Context<MorphContextValue | null>;
+/**
+ * Hook to access Morph context
+ * Must be used within a Morph component
+ *
+ * @throws Error if used outside Morph component
+ */
+declare function useMorphContext(): MorphContextValue;
+//#endregion
+//#region src/primitives/morph/useMorph.d.ts
+/**
+ * Unified hook for morphing animations
+ *
+ * Provides access to multiple morphing techniques:
+ * - FLIP + clip-path (default): Best for element-to-element transitions
+ * - CSS Grid: Best for expand/collapse animations
+ * - View Transitions: Best for page/route transitions (requires browser support)
+ *
+ * @example
+ * ```tsx
+ * const morph = useMorph({ technique: 'flip-clip-path' });
+ *
+ * // Using unified API:
+ * await morph.morph(fromElement, toElement);
+ *
+ * // Or using individual techniques:
+ * morph.cssGrid.toggle();
+ * ```
+ */
+declare function useMorph(options?: UseMorphOptions): UseMorphReturn;
+//#endregion
+//#region src/primitives/morph/Morph.d.ts
+/**
+ * Container component for morphable elements
+ *
+ * Provides morphing capabilities to child components through context.
+ *
+ * @example
+ * ```tsx
+ * <Morph technique="flip-clip-path" duration={300}>
+ *   <MorphSource ref={fromRef}>From Content</MorphSource>
+ *   <MorphTarget ref={toRef}>To Content</MorphTarget>
+ *   <button onClick={() => morph(fromRef.current, toRef.current)}>
+ *     Morph
+ *   </button>
+ * </Morph>
+ * ```
+ */
+declare function Morph({
+  children,
+  technique,
+  duration,
+  easing,
+  className,
+  onMorphStart,
+  onMorphEnd
+}: MorphProps): ReactNode;
+//#endregion
+//#region src/primitives/morph/techniques/useFLIPClipPath.d.ts
+/**
+ * Hook for FLIP + clip-path morphing technique
+ *
+ * This technique combines:
+ * 1. FLIP for position/size transitions
+ * 2. clip-path for shape morphing
+ * 3. Opacity crossfade for smooth visual transition
+ *
+ * @example
+ * ```tsx
+ * const { isMorphing, morph, cancel } = useFLIPClipPath({ duration: 300 });
+ *
+ * const handleMorph = async () => {
+ *   await morph(fromRef.current, toRef.current);
+ * };
+ * ```
+ */
+declare function useFLIPClipPath(options?: FLIPClipPathOptions): FLIPClipPathAPI;
+//#endregion
+//#region src/primitives/morph/techniques/useCSSGridMorph.d.ts
+/**
+ * Hook for CSS Grid-based expand/collapse animations
+ *
+ * Uses the grid-template-rows: 0fr/1fr technique for smooth height animations
+ * without needing to know the content height in advance.
+ *
+ * CSS required on container:
+ * ```css
+ * .morph-container {
+ *   display: grid;
+ *   grid-template-rows: 0fr;
+ *   transition: grid-template-rows 300ms ease;
+ * }
+ * .morph-container.expanded {
+ *   grid-template-rows: 1fr;
+ * }
+ * .morph-content {
+ *   overflow: hidden;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const { isExpanded, toggle, containerRef } = useCSSGridMorph();
+ *
+ * return (
+ *   <div ref={containerRef} className={isExpanded ? 'expanded' : ''}>
+ *     <div className="morph-content">
+ *       Collapsible content
+ *     </div>
+ *   </div>
+ * );
+ * ```
+ */
+declare function useCSSGridMorph(options?: CSSGridMorphOptions): CSSGridMorphAPI;
+//#endregion
+//#region src/primitives/morph/techniques/useViewTransitions.d.ts
+/**
+ * Hook for View Transitions API
+ *
+ * Provides a wrapper around the native View Transitions API
+ * with automatic feature detection and fallback handling.
+ *
+ * Browser support (as of 2025):
+ * - Chrome 111+: ✅
+ * - Firefox 144+: ✅
+ * - Safari latest: ✅
+ *
+ * @example
+ * ```tsx
+ * const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+ *
+ * const handleTransition = async () => {
+ *   await startTransition(() => {
+ *     setActiveImage(nextImage);
+ *   });
+ * };
+ * ```
+ */
+declare function useViewTransitions(options?: ViewTransitionsOptions): ViewTransitionsAPI;
+//#endregion
+//#region src/utils/animationUtils.d.ts
 /**
  * Obtiene duración de animación responsiva para el dispositivo actual
  * @param baseDuration - Duración base en ms
@@ -93,362 +1072,289 @@ declare const getResponsiveDuration: (baseDuration: number) => number;
  */
 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;
+  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;
+  readonly OFFSET_Y_ENTER: 8;
+  readonly OFFSET_Y_EXIT: -8;
+  readonly OFFSET_X: 16;
+  readonly SCALE_ENTER: 0.85;
+  readonly SCALE_EXIT: 0.85;
+  readonly ROTATE_EXIT: 0;
 };
 declare const EFFECTS: {
-    readonly BLUR_ENTER: 4;
-    readonly BLUR_EXIT: 2;
+  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)";
+  readonly MATERIAL_DECELERATE: "cubic-bezier(0, 0, 0.2, 1)";
+  readonly MATERIAL_ACCELERATE: "cubic-bezier(0.4, 0, 1, 1)";
+  readonly MATERIAL_STANDARD: "cubic-bezier(0.4, 0, 0.2, 1)";
+  readonly EASE_REORDER: "cubic-bezier(0.215, 0.61, 0.355, 1)";
+  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)";
-    };
+  readonly tokenEnter: {
+    readonly duration: number;
+    readonly stagger: number;
+    readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly blur: 4;
+    readonly offsetY: 8;
+    readonly scale: 0.85;
+  };
+  readonly tokenExit: {
+    readonly duration: number;
+    readonly stagger: number;
+    readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly blur: 2;
+    readonly offsetY: -8;
+    readonly scale: 0.85;
+  };
+  readonly collapse: {
+    readonly duration: number;
+    readonly delay: 30;
+    readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+  };
+  readonly flip: {
+    readonly duration: number;
+    readonly delayPercent: 0.25;
+    readonly easing: "cubic-bezier(0.215, 0.61, 0.355, 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)";
+  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)";
-    };
+  readonly tokenEnter: {
+    readonly duration: 200;
+    readonly stagger: 15;
+    readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly blur: 4;
+    readonly offsetY: 8;
+    readonly scale: 0.85;
+  };
+  readonly tokenExit: {
+    readonly duration: 180;
+    readonly stagger: 0;
+    readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly blur: 2;
+    readonly offsetY: -8;
+    readonly scale: 0.85;
+  };
+  readonly collapse: {
+    readonly duration: 200;
+    readonly delay: 30;
+    readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+  };
+  readonly flip: {
+    readonly duration: 300;
+    readonly delayPercent: 0.25;
+    readonly easing: "cubic-bezier(0.215, 0.61, 0.355, 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;
-    };
+  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;
+  };
 };
-
+//#endregion
+//#region src/styles/cssTokens.d.ts
+declare const CSS_VAR_NAMES: {
+  readonly durationEnter: "--waapi-duration-enter";
+  readonly durationExit: "--waapi-duration-exit";
+  readonly durationCollapse: "--waapi-duration-collapse";
+  readonly durationFlip: "--waapi-duration-flip";
+  readonly staggerEnter: "--waapi-stagger-enter";
+  readonly staggerExit: "--waapi-stagger-exit";
+  readonly offsetYEnter: "--waapi-offset-y-enter";
+  readonly offsetYExit: "--waapi-offset-y-exit";
+  readonly offsetX: "--waapi-offset-x";
+  readonly scaleExit: "--waapi-scale-exit";
+  readonly blurEnter: "--waapi-blur-enter";
+  readonly blurExit: "--waapi-blur-exit";
+  readonly easeEnter: "--waapi-ease-enter";
+  readonly easeExit: "--waapi-ease-exit";
+  readonly easeCollapse: "--waapi-ease-collapse";
+  readonly easeFlip: "--waapi-ease-flip";
+  readonly separatorDuration: "--waapi-separator-duration";
+  readonly separatorDelay: "--waapi-separator-delay";
+  readonly separatorEasing: "--waapi-separator-easing";
+};
+type CSSVarName = typeof CSS_VAR_NAMES[keyof typeof CSS_VAR_NAMES];
+declare const CSS_VAR_VALUES: {
+  readonly "--waapi-duration-enter": "200ms";
+  readonly "--waapi-duration-exit": "180ms";
+  readonly "--waapi-duration-collapse": "200ms";
+  readonly "--waapi-duration-flip": "300ms";
+  readonly "--waapi-stagger-enter": "15ms";
+  readonly "--waapi-stagger-exit": "0ms";
+  readonly "--waapi-offset-y-enter": "8px";
+  readonly "--waapi-offset-y-exit": "-8px";
+  readonly "--waapi-offset-x": "16px";
+  readonly "--waapi-scale-exit": "0.85";
+  readonly "--waapi-blur-enter": "4px";
+  readonly "--waapi-blur-exit": "2px";
+  readonly "--waapi-ease-enter": "cubic-bezier(0.33, 1, 0.68, 1)";
+  readonly "--waapi-ease-exit": "cubic-bezier(0.32, 0, 0.67, 0)";
+  readonly "--waapi-ease-collapse": "cubic-bezier(0.42, 0, 0.58, 1)";
+  readonly "--waapi-ease-flip": "cubic-bezier(0.2, 0, 0.2, 1)";
+  readonly "--waapi-separator-duration": "300ms";
+  readonly "--waapi-separator-delay": `${number}ms`;
+  readonly "--waapi-separator-easing": "cubic-bezier(0.2, 0, 0.2, 1)";
+};
+declare const cssVar: (name: CSSVarName) => string;
+declare const animatedTokensBaseStyles: {
+  readonly container: React$1.CSSProperties;
+  readonly placeholder: React$1.CSSProperties;
+  readonly tokenWrapper: React$1.CSSProperties;
+  readonly tokenWrapperExitCompleted: React$1.CSSProperties;
+  readonly separator: React$1.CSSProperties;
+  readonly separatorExitCoordinated: React$1.CSSProperties;
+  readonly separatorExitCompleted: React$1.CSSProperties;
+  readonly overflow: React$1.CSSProperties;
+};
+declare const slidingTextBaseStyles: {
+  readonly container: React$1.CSSProperties;
+  readonly content: React$1.CSSProperties;
+  readonly token: React$1.CSSProperties;
+  readonly enterFrom: React$1.CSSProperties;
+  readonly enterTo: React$1.CSSProperties;
+  readonly exitActive: React$1.CSSProperties;
+  readonly verticalEnterFrom: React$1.CSSProperties;
+  readonly verticalExitActive: React$1.CSSProperties;
+  readonly horizontalEnterFrom: React$1.CSSProperties;
+  readonly horizontalExitActive: React$1.CSSProperties;
+};
+declare const responsiveOverrides: {
+  readonly mobile: React$1.CSSProperties;
+  readonly smallMobile: React$1.CSSProperties;
+  readonly reducedMotion: React$1.CSSProperties;
+  readonly highContrast: React$1.CSSProperties;
+};
+declare const getResponsiveTokenStyles: () => React$1.CSSProperties;
+declare const generateCSSVariables: () => string;
+declare const generateResponsiveCSS: () => string;
+//#endregion
+//#region src/styles/slidingText.styles.d.ts
 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;
+  readonly container: React$1.CSSProperties;
+  readonly content: React$1.CSSProperties;
+  readonly token: React$1.CSSProperties;
+  readonly enterFrom: React$1.CSSProperties;
+  readonly enterTo: React$1.CSSProperties;
+  readonly exitActive: React$1.CSSProperties;
+  readonly verticalEnterFrom: React$1.CSSProperties;
+  readonly verticalExitActive: React$1.CSSProperties;
+  readonly horizontalEnterFrom: React$1.CSSProperties;
+  readonly horizontalExitActive: React$1.CSSProperties;
 };
-declare const getSlidingTextTokenStyle: (state: "enter-from" | "enter-to" | "exit-active", direction: "vertical" | "horizontal") => React.CSSProperties;
-
+declare const getSlidingTextTokenStyle: (state: "enter-from" | "enter-to" | "exit-active", direction: "vertical" | "horizontal") => React$1.CSSProperties;
+declare const getResponsiveSlidingTextStyle: () => React$1.CSSProperties;
+//#endregion
+//#region src/styles/animatedTokens.styles.d.ts
 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;
+  readonly container: React$1.CSSProperties;
+  readonly placeholder: React$1.CSSProperties;
+  readonly tokenWrapper: React$1.CSSProperties;
+  readonly tokenWrapperExitCompleted: React$1.CSSProperties;
+  readonly separator: React$1.CSSProperties;
+  readonly separatorExitCoordinated: React$1.CSSProperties;
+  readonly separatorExitCompleted: React$1.CSSProperties;
+  readonly overflow: React$1.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;
-
+declare const getResponsiveAnimatedTokensStyle: () => React$1.CSSProperties;
+//#endregion
+//#region src/utils/debugCapture.d.ts
 interface StyleCapture {
-    opacity: string;
-    transform: string;
-    filter: string;
-    width: string;
-    height: string;
-    marginRight: string;
-    marginLeft: string;
-    position: string;
-    visibility: string;
-    pointerEvents: string;
+  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;
+  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;
+  property: string;
+  expected: string;
+  actual: string;
+  matches: boolean;
 }
 interface TimingResult {
-    startTime: number;
-    endTime: number;
-    expectedDuration: number;
-    actualDuration: number;
-    deviation: number;
-    deviationPercent: number;
+  startTime: number;
+  endTime: number;
+  expectedDuration: number;
+  actualDuration: number;
+  deviation: number;
+  deviationPercent: number;
 }
 interface AnimationTimer {
-    start: number;
-    expectedDuration: number;
-    end: () => TimingResult;
+  start: number;
+  expectedDuration: number;
+  end: () => TimingResult;
 }
 /**
  * Capture relevant computed styles from an element
@@ -471,10 +1377,10 @@ 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;
+  deltaX: number;
+  deltaY: number;
+  deltaWidth: number;
+  deltaHeight: number;
 };
 /**
  * Compare expected styles vs actual computed styles
@@ -498,5 +1404,6 @@ declare function captureAnimationInfo(animation: Animation): Record<string, unkn
  * 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 };
+//#endregion
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, AnimatedTokens, type AnimatedTokensProps, AnimatedTokensV2, AnimatedTokensV2 as TextFlow, type AnimatedTokensV2Props, type AnimatedTokensV2Props as TextFlowProps, type AnimationData, AnimationEvent, AnimationOrchestratorAPI, AnimationOrchestratorConfig, AnimationPhase, type AnimationTimer, AnimationTiming, type CSSGridMorphAPI, type CSSGridMorphOptions, CSS_VAR_NAMES, CSS_VAR_VALUES, type DebugEvent, type DebugEventType, DebugProvider, type DurationConfig, EASINGS, EFFECTS, ElementRegistryAPI, ElementRegistryCallbacks, EnterOptions, ExitOptions, ExitPositionStrategy, FLIPAnimationAPI, FLIPAnimationOptions, FLIPBehavior, type FLIPClipPathAPI, type FLIPClipPathOptions, FLIPDelta, type FormatOptions, type ListFormatStyle, type ListFormatType, type ListPart, Morph, MorphContext, type MorphContextValue, type MorphProps, type MorphTechnique, OrchestratorState, PRESETS, type PositionCapture, PositionCaptureAPI, PositionCaptureOptions, type PositionData, PositionRect, RESPONSIVE_CONFIGS, ReorderRoot as Reorder, type ReorderContextValue, type ReorderItemProps, type ReorderItemState, type ReorderLayout, type ReorderProps, SlidingNumber, type SlidingNumberProps, SlidingText, type SlidingTextProps, type StaggerConfig, type StyleCapture, type StyleComparison, type StyleData, TIMING, TRANSFORMS, type TimingData, type TimingResult, type Token, type UseListFormatOptions, type UseMorphOptions, type UseMorphReturn, type UseReorderConfig, type UseReorderPresenceConfig, type UseReorderPresenceReturn, type UseReorderReturn, type ViewTransitionsAPI, type ViewTransitionsOptions, animatedTokensBaseStyles, animatedTokensStyles, calculatePositionDelta, captureAnimationInfo, captureComputedStyles, captureElementAnimations, capturePosition, capturePositionForLog, captureStylesForLog, choreographyTracker, compareStyles, createAnimationTimer, cssVar, formatTimingResult, generateCSSVariables, generateResponsiveCSS, getResponsiveAnimatedTokensStyle, getResponsiveDuration, getResponsiveSlidingTextStyle, getResponsiveStagger, getResponsiveTokenStyles, getSlidingTextTokenStyle, injectCSSVariables, reinjectCSSVariables, removeCSSVariables, responsiveOverrides, slidingTextBaseStyles, slidingTextStyles, useAnimationOrchestrator, useCSSGridMorph, useDebug, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useListFormat, useMorph, useMorphContext, usePositionCapture, useReorder, useReorderPresence, useViewTransitions, useWAAPIAnimations };
+//# sourceMappingURL=index.d.ts.map