/**
 * Options for {@link useLoupeWaapi}.
 */
type UseLoupeWaapiOptions = {
    /**
     * Create the Web Animations API animation(s). Call
     * `element.animate(keyframes, options)` as you normally would and
     * return the resulting `Animation` (or an array of them). The hook
     * pauses each one immediately — Loupe's `time` becomes the only
     * clock — and drives `currentTime` from there.
     *
     * Set `fill: 'both'` in your options so the element holds its
     * keyframe values when scrubbed to either edge; without it the
     * element snaps back to its base style outside the active range.
     *
     * Returns `null` (or an empty array) when the target element isn't
     * mounted yet — the hook no-ops until `deps` change.
     *
     * @example
     * ```ts
     * build: () =>
     *   boxRef.current?.animate(
     *     [
     *       { transform: 'translateY(40px)', opacity: 0 },
     *       { transform: 'translateY(0)', opacity: 1 },
     *     ],
     *     { duration: 500, easing: 'ease-out', fill: 'both' },
     *   ) ?? null
     * ```
     */
    build: () => Animation | Animation[] | null | undefined;
    /**
     * Recreate the animation(s) when any of these change (same
     * contract as a `useEffect` dep array). Typically include the
     * target element so the animation rebuilds once the ref attaches.
     * Defaults to `[]`.
     */
    deps?: ReadonlyArray<unknown>;
    /**
     * Wrap `currentTime` at the animation's end so it loops with
     * Loupe's own phase loop. Default `true`. Set `false` to clamp at
     * the end instead (holds the last frame past its duration).
     */
    loop?: boolean;
};
type UseLoupeWaapiResult = {
    /** The live `Animation` objects the hook is driving. Empty until
     *  `build` first returns one. */
    animations: Animation[];
};
/**
 * Drive Web Animations API animations from the nearest
 * `TimelineProvider`'s `time` MotionValue.
 *
 * WAAPI animations expose `currentTime` in milliseconds — the same
 * unit as Loupe's clock — so this adapter is a thin bridge: it
 * pauses each animation (killing the browser's own playback) and
 * writes `currentTime` on every tick. Playing Loupe scrubs forward,
 * pausing freezes the current frame, and scrubbing the panel scrubs
 * the animation. No extra dependency — WAAPI is built into the
 * browser.
 *
 * @example
 * ```tsx
 * function Card() {
 *   const boxRef = useRef<HTMLDivElement | null>(null);
 *   useLoupeWaapi({
 *     deps: [boxRef.current],
 *     build: () =>
 *       boxRef.current?.animate(
 *         [
 *           { transform: 'translateY(40px)', opacity: 0 },
 *           { transform: 'translateY(0)', opacity: 1 },
 *         ],
 *         { duration: 500, easing: 'ease-out', fill: 'both' },
 *       ) ?? null,
 *   });
 *   return <div ref={boxRef}>Hello</div>;
 * }
 * ```
 */
declare function useLoupeWaapi(opts: UseLoupeWaapiOptions): UseLoupeWaapiResult;

export { type UseLoupeWaapiOptions, type UseLoupeWaapiResult, useLoupeWaapi };