/**
 * `CurveEditor` — the open/close easing, drawn instead of picked from a list.
 *
 * WHY A DRAWING AND NOT A SELECT: the rail's enter animation is a
 * `cubic-bezier()` transition, i.e. exactly the two control points this control
 * edits, so "adjust the curve" and "drag these two dots" are the same act. A
 * named-easing dropdown would have offered five of them and no way to reach the
 * curve the user actually has in mind.
 *
 * The drawn curve is the WHOLE state (`AnimCurve` is four numbers, endpoints
 * fixed at (0,0)→(1,1)); a preset is just a named value of that state, so
 * "custom" is derived (no preset matches) rather than stored — there is no second
 * representation that could drift from the drawing.
 *
 * The dot underneath the field replays the curve in real time: it travels
 * horizontally at a constant speed (time) while its vertical motion follows the
 * easing (progress). Two nested `<g>`s and two keyframe animations do that with
 * no per-frame script — the outer one is `linear` along X, the inner one carries
 * the user's curve along Y.
 */
import * as React from 'react';
import { type AnimCurve } from '../runtime/prefs';
/** One named curve in the preset row. */
export interface CurvePreset {
    id: string;
    /** i18n key of the label. */
    key: string;
    curve: AnimCurve;
}
/**
 * The presets. `sqrt` is the default (see DEFAULT_ANIM_CURVE) — it is the
 * "grows into place" shape the owner asked for; `easeOut` is its milder cousin,
 * `smooth` is the shell's own ease-in-out (the curve a user who wants the rail to
 * move with the rest of the shell should pick), and `standard`/`linear` bracket
 * the range for comparison.
 */
export declare const CURVE_PRESETS: readonly CurvePreset[];
/** Is `a` the same curve as `b`? (Value equality — the state IS the value.) */
export declare function sameCurve(a: AnimCurve, b: AnimCurve): boolean;
/** Which preset (label key) the value currently equals, or null for a custom one. */
export declare function presetOf(c: AnimCurve): CurvePreset | null;
/** The editor's field: a 1×1 plot with a draggable control point per corner. */
export interface CurveEditorProps {
    value: AnimCurve;
    onChange: (next: AnimCurve) => void;
}
/**
 * Draw + edit + replay one easing.
 * @param props - see {@link CurveEditorProps}.
 * @returns the field (SVG) with both handles.
 */
export declare function CurveEditor({ value, onChange }: CurveEditorProps): React.ReactElement;