@mks2508/waapi-animation-primitives 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,85 +1,1448 @@
-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 component
+ *
+ * Built on the Reorder primitive, provides smooth FLIP animations for token lists
+ * with proper locale-aware separators using Intl.ListFormat.
+ *
+ * ## Features
+ *
+ * - **Locale-aware separators**: Uses `Intl.ListFormat` for proper localization
+ * - **Smooth FLIP animations**: Coordinated enter/exit transitions
+ * - **Separator coordination**: Animates separators when tokens are removed
+ * - **Overflow handling**: Shows "+N more" when tokens exceed `maxVisible`
+ * - **Text animation**: Each token's text animates character-by-character
+ *
+ * ## Locale Support
+ *
+ * By default, uses the browser's locale. Supports:
+ * - `conjunction`: "A, B, and C" (default)
+ * - `disjunction`: "A, B, or C"
+ * - `unit`: "A B C" (space-separated)
+ *
+ * ## Examples
+ *
+ * ### Basic usage
+ * ```tsx
+ * import { AnimatedTokensV2 } from '@mks2508/waapi-animation-primitives';
+ *
+ * const tags = [
+ *   { id: '1', text: 'React' },
+ *   { id: '2', text: 'TypeScript' },
+ *   { id: '3', text: 'WAAPI' }
+ * ];
+ *
+ * <AnimatedTokensV2 tokens={tags} />
+ * ```
+ *
+ * ### Locale-aware separators
+ * ```tsx
+ * // en-US: "React, TypeScript, and WAAPI"
+ * // es-ES: "React, TypeScript y WAAPI"
+ * <AnimatedTokensV2 tokens={tags} locale="es" listStyle="long" />
+ * ```
+ *
+ * ### Disjunction (or)
+ * ```tsx
+ * // "React, TypeScript, or WAAPI"
+ * <AnimatedTokensV2 tokens={tags} listType="disjunction" />
+ * ```
+ *
+ * ### Manual separator override
+ * ```tsx
+ * // "React | TypeScript | WAAPI"
+ * <AnimatedTokensV2 tokens={tags} separator=" | " />
+ * ```
+ *
+ * ### With overflow
+ * ```tsx
+ * const tags = [
+ *   { id: '1', text: 'React' },
+ *   { id: '2', text: 'Vue' },
+ *   { id: '3', text: 'Svelte' },
+ *   { id: '4', text: 'Angular' },
+ *   { id: '5', text: 'Solid' }
+ * ];
+ *
+ * // Shows: "React, Vue, Svelte + 2 more"
+ * <AnimatedTokensV2 tokens={tags} maxVisible={3} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { AnimatedTokensV2 } from '@mks2508/waapi-animation-primitives';
+ *
+ * function TagList({ tags }) {
+ *   return (
+ *     <AnimatedTokensV2
+ *       tokens={tags}
+ *       locale="en-US"
+ *       listType="conjunction"
+ *       maxVisible={5}
+ *       textAnimationMode="character"
+ *       textDirection="vertical"
+ *       enableWidthAnimation={true}
+ *       tokenClassName="text-lg font-medium"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @alias TextFlow
+ */
+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
+ *
+ * - `auto`: No layout applied (consumer handles positioning)
+ * - `horizontal`: Flexbox row layout with wrapping
+ * - `vertical`: Flexbox column layout
+ * - `grid`: CSS Grid with auto-fill columns
+ *
+ * @default 'auto'
+ */
+type ReorderLayout = 'auto' | 'horizontal' | 'vertical' | 'grid';
+/**
+ * Stagger configuration for animations
+ *
+ * Can be a single number applied to both enter/exit, or separate values:
+ * - `number`: Same stagger delay for enter and exit (in ms per item index)
+ * - `{ enter, exit }`: Different stagger delays for enter vs exit
+ *
+ * @example
+ * ```tsx
+ * // 15ms stagger per item
+ * stagger={15}
+ *
+ * // Different stagger for enter/exit
+ * stagger={{ enter: 30, exit: 0 }}
+ * ```
+ */
+type StaggerConfig = number | {
+  enter: number;
+  exit: number;
+};
+/**
+ * Duration configuration for animations
+ *
+ * Can be a single number applied to both enter/exit, or separate values:
+ * - `number`: Same duration for enter and exit (in ms)
+ * - `{ enter, exit }`: Different durations for enter vs exit
+ *
+ * @example
+ * ```tsx
+ * // 300ms for both
+ * duration={300}
+ *
+ * // Different durations
+ * duration={{ enter: 400, exit: 200 }}
+ * ```
+ */
+type DurationConfig = number | {
+  enter: number;
+  exit: number;
+};
+/**
+ * Props for {@link Reorder} container component
+ *
+ * Reorder is an agnostic primitive for animated list reordering using FLIP technique.
+ * It automatically handles enter/exit animations while leaving layout to consumers.
+ *
+ * @example
+ * ```tsx
+ * import { Reorder } from '@mks2508/waapi-animation-primitives';
+ *
+ * function TodoList() {
+ *   const [todos, setTodos] = useState([
+ *     { id: '1', text: 'Buy milk' },
+ *     { id: '2', text: 'Write code' }
+ *   ]);
+ *
+ *   const handleRemove = (id: string) => {
+ *     setTodos(prev => prev.filter(t => t.id !== id));
+ *   };
+ *
+ *   return (
+ *     <Reorder
+ *       layout="horizontal"
+ *       stagger={15}
+ *       onItemExit={handleRemove}
+ *     >
+ *       {todos.map(todo => (
+ *         <div key={todo.id}>{todo.text}</div>
+ *       ))}
+ *     </Reorder>
+ *   );
+ * }
+ * ```
+ */
+interface ReorderProps {
+  /** Child elements to be animated. Each child should have a unique `key` prop. */
+  children: ReactNode;
+  /**
+   * Enable automatic enter animations for new children.
+   * When true, new children animate in automatically when added.
+   *
+   * @default true
+   */
+  autoAnimate?: boolean;
+  /**
+   * Stagger delay between item animations.
+   * Can be a single number (ms) or separate enter/exit values.
+   *
+   * @example
+   * ```tsx
+   * stagger={15}  // 15ms per item index
+   * stagger={{ enter: 30, exit: 0 }}  // Custom values
+   * ```
+   */
+  stagger?: StaggerConfig;
+  /**
+   * Animation duration in milliseconds.
+   * Can be a single number or separate enter/exit values.
+   *
+   * @default 300 (enter), 200 (exit)
+   */
+  duration?: DurationConfig;
+  /**
+   * Layout arrangement for child elements.
+   * Use 'auto' to handle positioning yourself.
+   *
+   * @default 'auto'
+   */
+  layout?: ReorderLayout;
+  /** Additional CSS class name for the container. */
+  className?: string;
+  /**
+   * FLIP animation behavior strategy.
+   * Controls how position changes are animated.
+   *
+   * @default 'smooth'
+   */
+  flipBehavior?: FLIPBehavior;
+  /**
+   * Strategy for positioning elements during exit animation.
+   * Controls whether exiting elements stay in place or are removed from layout.
+   *
+   * @default 'keep-pace'
+   */
+  exitPositionStrategy?: ExitPositionStrategy;
+  /**
+   * Callback fired when an item starts its exit animation.
+   * Use this to update your state - the item will be removed from DOM after animation completes.
+   *
+   * @param id - The key of the child that is exiting
+   *
+   * @example
+   * ```tsx
+   * const onItemExit = (id) => {
+   *   // Don't remove yet - let animation play out
+   *   // Animation will call onComplete when finished
+   *   console.log('Exiting:', id);
+   * };
+   * ```
+   */
+  onItemExit?: (id: string) => void;
+  /**
+   * Callback fired when an item completes its enter animation.
+   *
+   * @param id - The key of the child that entered
+   */
+  onItemEnter?: (id: string) => void;
+  /**
+   * Callback for drag-and-drop reordering.
+   *
+   * @future Not yet implemented - planned for future version with @dnd-kit integration.
+   *
+   * @param oldIndex - Original index before reorder
+   * @param newIndex - New index after reorder
+   */
+  onReorder?: (oldIndex: number, newIndex: number) => void;
+}
+/**
+ * Animation state passed to {@link ReorderItem} render prop function
+ *
+ * Use this to conditionally render content based on animation state.
+ *
+ * @example
+ * ```tsx
+ * <ReorderItem id="item-1">
+ *   {(state) => (
+ *     <div style={{ opacity: state.isExiting ? 0.5 : 1 }}>
+ *       Content
+ *     </div>
+ *   )}
+ * </ReorderItem>
+ * ```
+ */
+interface ReorderItemState {
+  /** True when the item is currently animating out. */
+  isExiting: boolean;
+  /** True when the item is currently animating in. */
+  isEntering: boolean;
+}
+/**
+ * Props for {@link ReorderItem} component
+ *
+ * Wrapper component for individual items in a Reorder list.
+ * Automatically registers with the parent Reorder context.
+ *
+ * @example
+ * ```tsx
+ * import { Reorder, ReorderItem } from '@mks2508/waapi-animation-primitives';
+ *
+ * <Reorder>
+ *   <ReorderItem id="item-1">
+ *     <div>Item 1</div>
+ *   </ReorderItem>
+ * </Reorder>
+ * ```
+ */
+interface ReorderItemProps {
+  /**
+   * Child content or render prop function.
+   * Pass a function to receive animation state.
+   *
+   * @example
+   * ```tsx
+   * // Static content
+   * <ReorderItem id="1"><div>Content</div></ReorderItem>
+   *
+   * // Render prop with state
+   * <ReorderItem id="1">
+   *   {(state) => <div style={{ opacity: state.isExiting ? 0.5 : 1 }}>Content</div>}
+   * </ReorderItem>
+   * ```
+   */
+  children: ReactNode | ((state: ReorderItemState) => ReactNode);
+  /** Unique identifier for this item (used for tracking animations). */
+  id: string;
+  /** Optional index for manual control (usually auto-detected from position). */
+  index?: number;
+  /** Whether to animate this item (default: true). */
+  animate?: boolean;
+  /** Additional CSS class name. */
+  className?: string;
+  /** HTML tag to render as (default: 'div'). */
+  as?: ElementType;
+}
+/**
+ * Return type for {@link useReorder} hook
+ *
+ * Provides methods for orchestrating FLIP animations on registered elements.
+ * Extends the base AnimationOrchestratorAPI with exit/enter helpers.
+ *
+ * @example
+ * ```tsx
+ * const reorder = useReorder();
+ *
+ * // Register an element
+ * <div ref={el => reorder.registerElement('item-1', el)}>Item</div>
+ *
+ * // Trigger exit animation
+ * await reorder.startItemExit('item-1');
+ *
+ * // Check if animating
+ * if (reorder.isAnimating('item-1')) {
+ *   console.log('Still animating...');
+ * }
+ * ```
+ */
+interface UseReorderReturn extends AnimationOrchestratorAPI {
+  /**
+   * Start exit animation for an item.
+   * The item stays in DOM until animation completes.
+   *
+   * @param id - The unique identifier of the item
+   * @returns Promise that resolves when exit animation completes
+   */
+  startItemExit: (id: string) => Promise<void>;
+  /**
+   * Start enter animation for an item.
+   *
+   * @param id - The unique identifier of the item
+   * @returns Promise that resolves when enter animation completes
+   */
+  startItemEnter: (id: string) => Promise<void>;
+}
+/**
+ * Configuration options for {@link useReorder} hook
+ *
+ * All timing values are in milliseconds.
+ *
+ * @example
+ * ```tsx
+ * const reorder = useReorder({
+ *   enterDuration: 400,
+ *   exitDuration: 200,
+ *   flipDuration: 300,
+ *   onComplete: (id) => console.log('Done:', id)
+ * });
+ * ```
+ */
+interface UseReorderConfig {
+  /** Duration of enter animation in milliseconds. @default 300 */
+  enterDuration?: number;
+  /** Duration of exit animation in milliseconds. @default 200 */
+  exitDuration?: number;
+  /** Duration of FLIP animation in milliseconds. @default 300 */
+  flipDuration?: number;
+  /** Easing function for enter animation (CSS cubic-bezier or linear()). @default 'cubic-bezier(0.33, 1, 0.68, 1)' */
+  enterEasing?: string;
+  /** Easing function for exit animation. @default 'cubic-bezier(0.32, 0, 0.67, 0)' */
+  exitEasing?: string;
+  /** Easing function for FLIP animation. @default 'cubic-bezier(0.2, 0, 0.2, 1)' */
+  flipEasing?: string;
+  /** FLIP animation behavior strategy. @default 'smooth' */
+  flipBehavior?: FLIPBehavior;
+  /** Strategy for positioning elements during exit animation. @default 'keep-pace' */
+  exitPositionStrategy?: ExitPositionStrategy;
+  /**
+   * Callback called when an item's exit animation completes.
+   * Use this to remove the item from your state.
+   *
+   * @param id - The unique identifier of the completed item
+   */
+  onComplete?: (id: string) => void;
+}
+/**
+ * Context value passed to Reorder children
+ *
+ * @internal Consumed by ReorderItem component
+ */
+interface ReorderContextValue {
+  /** Reorder instance with animation methods. */
+  reorder: UseReorderReturn;
+  /** Current layout setting. */
+  layout: ReorderLayout;
+  /** Check if an item is currently exiting. */
+  isExiting: (id: string) => boolean;
+  /** Check if an item is currently entering. */
+  isEntering: (id: string) => boolean;
+  /** Array of item IDs currently exiting. */
+  exitingIds: string[];
+  /** Array of item IDs currently entering. */
+  enteringIds: string[];
+}
+/**
+ * Configuration for {@link useReorderPresence} hook
+ *
+ * An alternative to using the Reorder component, giving you full control
+ * over rendering while handling animation orchestration.
+ *
+ * @example
+ * ```tsx
+ * const { presentChildren, triggerExit } = useReorderPresence(
+ *   items.map(item => <div key={item.id}>{item.name}</div>),
+ *   {
+ *     stagger: 15,
+ *     onItemExit: (id) => removeItem(id)
+ *   }
+ * );
+ *
+ * const handleDelete = (id: string) => {
+ *   triggerExit(id);  // Triggers animation, then calls onItemExit
+ * };
+ *
+ * return <div>{presentChildren}</div>;
+ * ```
+ */
+interface UseReorderPresenceConfig {
+  /**
+   * Enable automatic enter animations for new children.
+   *
+   * @default true
+   */
+  autoAnimate?: boolean;
+  /** Stagger delay between item animations. */
+  stagger?: StaggerConfig;
+  /** Duration of enter animation in milliseconds. @default 300 */
+  enterDuration?: number;
+  /** Duration of exit animation in milliseconds. @default 200 */
+  exitDuration?: number;
+  /** Duration of FLIP animation in milliseconds. @default 300 */
+  flipDuration?: number;
+  /** Easing function for enter animation. */
+  enterEasing?: string;
+  /** Easing function for exit animation. */
+  exitEasing?: string;
+  /** Easing function for FLIP animation. */
+  flipEasing?: string;
+  /** FLIP animation behavior strategy. */
+  flipBehavior?: FLIPBehavior;
+  /** Strategy for positioning elements during exit animation. */
+  exitPositionStrategy?: ExitPositionStrategy;
+  /** Callback fired when an item starts its exit animation. */
+  onItemExit?: (id: string) => void;
+  /** Callback fired when an item completes its enter animation. */
+  onItemEnter?: (id: string) => void;
+  /**
+   * Callback fired when an item's exit animation completes.
+   * Use this to remove the item from your state.
+   */
+  onAnimationComplete?: (id: string) => void;
+}
+/**
+ * Return type for {@link useReorderPresence} hook
+ *
+ * Provides rendered children and methods for triggering animations.
+ *
+ * @example
+ * ```tsx
+ * const { presentChildren, triggerExit, isExiting } = useReorderPresence(
+ *   children,
+ *   config
+ * );
+ *
+ * return (
+ *   <>
+ *     {presentChildren}
+ *     <button onClick={() => triggerExit('item-1')} disabled={isExiting('item-1')}>
+ *       Remove
+ *     </button>
+ *   </>
+ * );
+ * ```
+ */
+interface UseReorderPresenceReturn {
+  /**
+   * Rendered children with animation data attributes applied.
+   * Render this directly in your component.
+   */
+  presentChildren: ReactNode;
+  /**
+   * Trigger exit animation for an item.
+   * The item stays in DOM until onAnimationComplete callback.
+   *
+   * @param id - The unique identifier of the item to remove
+   */
+  triggerExit: (id: string) => void;
+  /** Check if an item is currently exiting. */
+  isExiting: (id: string) => boolean;
+  /** Check if an item is currently entering. */
+  isEntering: (id: string) => boolean;
+  /** Array of item IDs currently exiting. */
+  exitingIds: string[];
+  /** Array of item IDs currently entering. */
+  enteringIds: string[];
+  /** Underlying reorder instance with animation methods. */
+  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 +1456,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 +1761,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 +1788,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