import { type ReplayController } from "./replay.control.ts";
import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
import type { ScoreOptions, SurfaceOptions } from "./types.ts";
/** The controls' stylesheet: written once beside the controls, scoped to them, in the page's own colours. */
export declare const REPLAY_STYLE: string;
/** A replay attached to a container: the controller, the stage the drawing goes in, and how to draw it again. */
export interface ReplayView {
    controller: ReplayController;
    /** The element the drawing is written into. */
    stage: HTMLElement;
    /** Draw the surface and the frame the clock is at, with new options (a theme that changed, a score that moved). */
    draw(options: SurfaceOptions | ScoreOptions): void;
    /** Stop the clock and the listeners, and empty the container. */
    destroy(): void;
}
/**
 * Attach a replay to a container: the stage with the drawing, the controls under it, the keyboard and the live region. The drawing is written once
 * and then only the marks that move are moved, on `requestAnimationFrame`; a mark that comes or goes (an object that enters, an event that
 * begins) redraws the replay's own layers, never the surface. With `prefers-reduced-motion` nothing plays by itself and play steps instead.
 */
export declare function createReplayView(host: HTMLElement, timeline: ReplayTimeline, settings: ReplaySettings, initial: SurfaceOptions | ScoreOptions): ReplayView;