import { AnimationItem } from 'lottie-web';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { CSSProperties } from 'react';

/**
 * Options for {@link useLoupeLottie}.
 */
type UseLoupeLottieOptions = {
    /**
     * URL or `path:` of the Lottie JSON. Passed through to lottie-web's
     * `loadAnimation({ path })` / `loadAnimation({ animationData })`.
     * Either `src` or `data` must be provided.
     */
    src?: string;
    /**
     * Inlined Lottie JSON (parsed object). Takes precedence over `src`
     * when both are set.
     */
    data?: unknown;
    /**
     * The DOM node lottie-web mounts into. Typically a `<div>` ref's
     * current value. If null, the hook is a no-op until a real
     * element is passed on a later render.
     */
    container: HTMLElement | null;
    /**
     * Lottie renderer. Canvas gives you an `HTMLCanvasElement` you
     * can composite against (the conic-mask case); SVG gives
     * per-path DOM you can annotate. Default: `'svg'`.
     */
    renderer?: 'svg' | 'canvas' | 'html';
    /**
     * The native frame rate of the Lottie. Needed to translate the
     * TimelineProvider's `time` (ms) into a lottie frame number.
     * Default: `24`. If wrong, scrubbing will feel sped up or
     * slowed down relative to playback.
     */
    fps?: number;
    /**
     * Total frame count of the Lottie animation. If omitted, the
     * hook reads it from the loaded animation (`anim.totalFrames`)
     * after `DOMLoaded`. Setting it explicitly avoids a one-frame
     * flash of frame 0 before sync kicks in.
     */
    totalFrames?: number;
    /**
     * Whether to wrap the frame pointer at the loop boundary. Default
     * `true` — Loupe loops phases on its own, but this guards against
     * out-of-range time values (e.g. during dev-panel scrubbing past
     * the end). Set to `false` if you want the lottie to clamp at
     * the last frame instead of wrapping.
     */
    loop?: boolean;
    /**
     * Additional renderer settings forwarded to lottie-web
     * (`loadAnimation({ rendererSettings })`). Useful for canvas
     * `clearCanvas`, `preserveAspectRatio`, etc.
     */
    rendererSettings?: Record<string, unknown>;
};
type UseLoupeLottieResult = {
    /** The underlying lottie-web `AnimationItem`, once loaded.
     *  Null until DOMLoaded fires. */
    anim: AnimationItem | null;
};
/**
 * Mount a lottie-web animation whose frame pointer is driven by the
 * nearest `TimelineProvider`'s `time` MotionValue.
 *
 * When Loupe plays, the hook seeks the Lottie frame-by-frame. When
 * Loupe is paused, the Lottie freezes on the current frame. Scrubbing
 * the Loupe panel scrubs the Lottie like a native Lottie previewer.
 *
 * The lottie-web animation is loaded with `autoplay: false` — its
 * internal clock is never used. All motion comes from Loupe's time,
 * so every consumer (video thumbnails, still renders via Remotion,
 * etc.) stays deterministic.
 *
 * @example
 * ```tsx
 * function Mark() {
 *   const hostRef = useRef<HTMLDivElement | null>(null);
 *   useLoupeLottie({
 *     src: '/brand/blend.json',
 *     container: hostRef.current,
 *     fps: 24,
 *     totalFrames: 121,
 *   });
 *   return <div ref={hostRef} style={{ width: 220, height: 220 }} />;
 * }
 * ```
 *
 * @remarks
 * `lottie-web` is an optional peer dependency. Install it in your
 * app separately: `npm i lottie-web`.
 */
declare function useLoupeLottie(opts: UseLoupeLottieOptions): UseLoupeLottieResult;

type LoupeLottieProps = Omit<UseLoupeLottieOptions, 'container'> & {
    /** Width of the lottie host element. Defaults to `'100%'`. */
    width?: number | string;
    /** Height of the lottie host element. Defaults to `'100%'`. */
    height?: number | string;
    /** Extra styles on the host element. */
    style?: CSSProperties;
    /** Class name for the host element. */
    className?: string;
};
/**
 * Drop-in Lottie renderer whose frame pointer is driven by the
 * nearest `TimelineProvider`'s `time`. Scrubbing Loupe scrubs the
 * clip frame-by-frame, no further wiring required.
 *
 * Prefer `useLoupeLottie()` directly if you need to composite the
 * lottie canvas yourself (masks, blend modes, capture streams).
 *
 * @example
 * ```tsx
 * <LoupeLottie
 *   src="/brand/blend.json"
 *   fps={24}
 *   totalFrames={121}
 *   width={220}
 *   height={220}
 * />
 * ```
 */
declare function LoupeLottie(props: LoupeLottieProps): react_jsx_runtime.JSX.Element;

export { LoupeLottie, type LoupeLottieProps, type UseLoupeLottieOptions, type UseLoupeLottieResult, useLoupeLottie };