import type { ReplayController } from "./replay.control.ts";
import type { ReplaySettings, ReplayTimeline } from "./replay.types.ts";
import type { ScoreOptions, SurfaceOptions } from "./types.ts";
/** A replay on a mount: the controller of its clock, and `destroy` to take the replay away and leave the surface. */
export type KyogijoReplay = ReplayController & {
    destroy(): void;
};
/** What `mountKyogijo` gives back. */
export interface KyogijoMount {
    /** Draw again with new options: a score that moved, a theme that changed. */
    update(options: SurfaceOptions | ScoreOptions): void;
    /** The drawing, or `null` after `destroy`. */
    svg(): SVGSVGElement | null;
    /** The orientation the drawing lies in now. */
    orientation(): "landscape" | "portrait";
    /**
     * Play tracking data on the surface: the players, the ball and the events of a timeline, with controls under the drawing (play, pause, step,
     * speed, loop, position), the keyboard (space, the arrow keys, Home and End) and a live region for goals and shots. Only the marks that move are
     * moved, on animation frames. A reader who prefers reduced motion gets steps, and nothing plays by itself; a hidden page pauses. `update` keeps the replay.
     */
    replay(timeline: ReplayTimeline, settings?: ReplaySettings): KyogijoReplay;
    /** Stop watching the container and empty it. */
    destroy(): void;
}
/** What `mountKyogijo` can be told. */
export interface MountSettings {
    /** For `orientation: "auto"` on a container whose height follows its content: it is portrait when narrower than this many pixels. 560 by default. */
    breakpoint?: number;
    /** Highlight a score that changes in `update`: a short pulse of the number, or a fade for a reader who prefers reduced motion. On by default. */
    highlight?: boolean;
}
/**
 * The container's width over its height, for `orientation: "auto"`. A container with a height of its own (a card of a fixed
 * size, a flex or grid cell) gives its real shape; one whose height follows what is drawn in it gives a tall shape when it is
 * narrower than the breakpoint and a wide one otherwise.
 */
export declare function containerAspect(host: HTMLElement, breakpoint?: number): number | undefined;
/**
 * Draw into a container, and keep it drawn: with `orientation: "auto"` the container is watched, and the drawing is laid
 * out again, tall or wide, when its shape changes.
 * @example
 * ```ts no-run
 * import { mountKyogijo } from "@johnmorrisdotca/kyogijo-stadiums/mount";
 * const card = mountKyogijo(document.querySelector("#game")!, {
 *   sport: "nhl",
 *   orientation: "auto",
 *   away: { name: "USA", score: 1 },
 *   home: { name: "Canada", score: 0 },
 *   status: "live",
 * });
 * card.update({ sport: "nhl", orientation: "auto", away: { name: "USA", score: 2 }, home: { name: "Canada", score: 0 } });
 * ```
 */
export declare function mountKyogijo(host: HTMLElement, options: SurfaceOptions | ScoreOptions, settings?: MountSettings): KyogijoMount;
/**
 * The drawing as an `svg` element, made by the browser's own parser, for code that appends nodes rather than sets text.
 * @example
 * ```ts no-run
 * import { kyogijoElement } from "@johnmorrisdotca/kyogijo-stadiums/mount";
 * document.body.append(kyogijoElement({ sport: "nba" }));
 * ```
 */
export declare function kyogijoElement(options: SurfaceOptions | ScoreOptions): SVGSVGElement;