@kitlangton/knobs 0.0.0-stage → 0.1.0

package/dist/types/panel/gpu/renderer.d.ts

@@ -0,0 +1,712 @@
+import type { RendererMode } from "../../core/store.js";
+import { type HeaderDie } from "../die.js";
+import { type IconName } from "../icons.js";
+import { Edges } from "../motion.js";
+import type { MorphFrame } from "../morph.js";
+import type { PresetStrip } from "../presets.js";
+import type { DigitPlace, Slider } from "../slider.js";
+import type { TabStrip } from "../tabs.js";
+import type { ReadoutView } from "../../ui/readouts.js";
+/** When a row's motion starts (performance.now() ms), so a preset cascade reaches it in turn. */
+export interface RowWave {
+    readonly at: number;
+}
+export interface GpuKnobRow {
+    readonly kind: "knob";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly slider: Slider;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuChoiceRow {
+    readonly kind: "choice";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly segEl: HTMLElement;
+    readonly buttons: readonly HTMLButtonElement[];
+    /** The selected pill's edges (px from the tray's left). */
+    readonly pill: Edges;
+    /** The drop-down button it becomes when the segments don't fit (`data-display="menu"`). */
+    readonly menu?: {
+        readonly button: HTMLButtonElement;
+        readonly valueEl: HTMLElement;
+    };
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuToggleRow {
+    readonly kind: "toggle";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly toggleEl: HTMLButtonElement;
+    /** The thumb's edges (px from the track's left). */
+    readonly thumb: Edges;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+/** Geometry getters return element-relative px, the same numbers the DOM draws with. */
+export interface GpuSpringRow {
+    readonly kind: "spring";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly box: HTMLElement;
+    curve(): readonly number[];
+    guides(): readonly number[];
+    /** The running dot: start time, the x,y frames it visits evenly over `ms`. */
+    dot(): {
+        at: number;
+        frames: readonly number[];
+        ms: number;
+    } | null;
+    snap(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuExpander {
+    readonly head: HTMLElement;
+    readonly label: HTMLElement;
+    readonly caret: SVGElement;
+    readonly body: HTMLElement;
+    isOpen(): boolean;
+}
+export interface GpuStrip {
+    readonly line: HTMLElement;
+    readonly label: HTMLElement;
+    readonly track: HTMLElement;
+    readonly read: HTMLElement;
+    /** 0 hue, 1 chroma, 2 lightness. */
+    mode: number;
+    thumbX(): number;
+    dragging(): boolean;
+}
+export interface GpuColorRow {
+    readonly kind: "color";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly x: GpuExpander;
+    readonly swatch: HTMLElement;
+    readonly read: HTMLElement;
+    readonly strips: readonly GpuStrip[];
+    color(): {
+        l: number;
+        c: number;
+        h: number;
+    };
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuPointRow {
+    readonly kind: "point";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly x: GpuExpander;
+    readonly read: HTMLElement;
+    readonly pad: HTMLElement;
+    puck(): readonly [number, number];
+    home(): readonly [number, number];
+    dragging(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuEasingRow {
+    readonly kind: "easing";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly x: GpuExpander;
+    readonly read: HTMLElement;
+    readonly mini: SVGElement;
+    miniCurve(): readonly number[];
+    readonly box: HTMLElement;
+    curve(): readonly number[];
+    /** P0, P1, P3, P2: the two arms from the ends to their handles. */
+    arms(): readonly number[];
+    /** (0,0) and (1,1) in the box. */
+    guides(): readonly number[];
+    readonly handles: readonly HTMLElement[];
+    readonly chips: readonly HTMLButtonElement[];
+    snap(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+/** A handle on a gradient's strip or a curve's graph (element-relative px, like the DOM's). */
+export interface GpuRampHandle {
+    readonly el: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+    /** Gamma-encoded sRGB, for a gradient's stop. */
+    readonly rgb?: readonly [number, number, number];
+    readonly selected: boolean;
+    /** Dragged off the strip or graph: it goes when let go. */
+    readonly leaving: boolean;
+}
+export interface GpuGradientRow {
+    readonly kind: "gradient";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly x: GpuExpander;
+    readonly read: HTMLElement;
+    /** The head's swatch strip, and its stop ticks (x in the strip). */
+    readonly mini: HTMLElement;
+    ticks(): readonly {
+        readonly el: HTMLElement;
+        readonly x: number;
+    }[];
+    /** Evenly spaced samples as gamma sRGB triples, flat (see `gradientSamples`). */
+    samples(): readonly number[];
+    /** The editor's strip and how far in from each end its ramp starts (the handles' radius). */
+    readonly strip: HTMLElement;
+    inset(): number;
+    handles(): readonly GpuRampHandle[];
+    /** The selected stop's colour strips. */
+    readonly strips: readonly GpuStrip[];
+    color(): {
+        l: number;
+        c: number;
+        h: number;
+    };
+    readonly chips: readonly HTMLButtonElement[];
+    snap(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuCurveRow {
+    readonly kind: "curve";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly x: GpuExpander;
+    readonly read: HTMLElement;
+    readonly mini: SVGElement;
+    miniCurve(): readonly number[];
+    readonly graph: HTMLElement;
+    /** Grid lines as x0, y0, x1, y1 quadruples in the graph. */
+    grid(): readonly number[];
+    curve(): readonly number[];
+    handles(): readonly GpuRampHandle[];
+    /** The hover crosshair: its x, the curve's y there, and the readout's element. */
+    hover(): {
+        readonly x: number;
+        readonly y: number;
+        readonly read: HTMLElement;
+    } | null;
+    readonly chips: readonly HTMLButtonElement[];
+    snap(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+/** A button row (an action). */
+export interface GpuActionRow {
+    readonly kind: "action";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly button: HTMLButtonElement;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+/** A vector's number cell: its axis letter and readout (DOM-placed text). */
+export interface GpuCell {
+    readonly el: HTMLElement;
+    readonly axis: HTMLElement;
+    readonly read: HTMLElement;
+    /** The inline editor is open over it (the DOM draws that). */
+    editing(): boolean;
+    /** Being scrubbed. */
+    active(): boolean;
+}
+export interface GpuVecRow {
+    readonly kind: "vec";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly cells: readonly GpuCell[];
+    readonly link?: HTMLButtonElement;
+    linked(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuRangeRow {
+    readonly kind: "range";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly track: HTMLElement;
+    readonly read: HTMLElement;
+    readonly thumbs: readonly [HTMLElement, HTMLElement];
+    /** Where the low and high thumbs sit along the track [0..1]. */
+    ratios(): readonly [number, number];
+    /** In hand: a pointer drag or a pan (both ends move without easing). */
+    dragging(): boolean;
+    editing(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuAngleRow {
+    readonly kind: "angle";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly control: HTMLElement;
+    readonly read: HTMLElement;
+    readonly dial: HTMLElement;
+    /** The hand's angle in degrees, unwrapped so it turns the short way (0 is up, clockwise). */
+    turn(): number;
+    dragging(): boolean;
+    editing(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuSeedRow {
+    readonly kind: "seed";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly control: HTMLElement;
+    readonly read: HTMLElement;
+    /** The readout's reel, a place per digit, ones first. */
+    readonly places: readonly DigitPlace[];
+    mixed(): boolean;
+    readonly die: {
+        readonly button: HTMLButtonElement;
+        readonly die: HeaderDie;
+    };
+    editing(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuKeybindRow {
+    readonly kind: "keybind";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly chip: HTMLButtonElement;
+    readonly text: HTMLElement;
+    capturing(): boolean;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export interface GpuToolbarRow {
+    readonly kind: "toolbar";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly items: readonly {
+        readonly button: HTMLButtonElement;
+        readonly icon?: string;
+        readonly iconEl?: Element;
+        readonly label: HTMLElement;
+        readonly chip?: HTMLElement;
+    }[];
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+/** A readout (watch, sparkline, graph, meter, table, log): the view hands over what it draws. */
+export interface GpuReadoutRow {
+    readonly kind: "readout";
+    readonly key: string;
+    display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly view: ReadoutView;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+/** A sub-heading inside a group's card (a field's `subsection`). */
+export interface GpuSubheadRow {
+    readonly kind: "subhead";
+    readonly key: string;
+    readonly display: string;
+    readonly row: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly caret: SVGElement;
+    readonly wave: RowWave;
+    isModified(): boolean;
+}
+export type GpuRowBinding = GpuReadoutRow | GpuVecRow | GpuRangeRow | GpuAngleRow | GpuSeedRow | GpuKeybindRow | GpuToolbarRow | GpuSubheadRow | GpuActionRow | GpuKnobRow | GpuChoiceRow | GpuToggleRow | GpuSpringRow | GpuColorRow | GpuPointRow | GpuEasingRow | GpuGradientRow | GpuCurveRow;
+export interface GpuGroupBinding {
+    readonly element: HTMLElement;
+    readonly labelEl: HTMLElement;
+    readonly buttons: readonly HTMLButtonElement[];
+    readonly reset: HTMLButtonElement;
+    /** The group's Random die. */
+    readonly die?: {
+        readonly button: HTMLButtonElement;
+        readonly die: HeaderDie;
+    };
+    /** On a page: the header reads as a card title rather than a small-caps label. */
+    readonly title?: boolean;
+    /** A foldable group's caret (`folded`): it turns as the header's aria-expanded changes. */
+    readonly fold?: SVGElement;
+    /** On a page: a preset's name, shown in place of the title while its chip is hovered. */
+    readonly peek?: HTMLElement;
+    /** On a page: the header's controls (presets, reset, die), hidden while the card is folded. */
+    readonly controls?: HTMLElement;
+    /** On a page: what a folded card's header says in place of its controls. */
+    readonly summary?: HTMLElement;
+    /** On a page: the muted line under the card's title. */
+    readonly desc?: HTMLElement;
+    /** On a page: the group's presets, as named or numbered segments, or a compact menu. */
+    readonly presets?: {
+        readonly seg: HTMLElement;
+        readonly buttons: readonly HTMLButtonElement[];
+        readonly pill: Edges;
+        readonly menu?: HTMLButtonElement;
+        readonly menuValue?: HTMLElement;
+        readonly isMenu?: () => boolean;
+    };
+}
+export interface GpuPanelBinding {
+    readonly id: string;
+    readonly root: HTMLElement;
+    readonly body: HTMLElement;
+    readonly inline: boolean;
+    readonly header: HTMLElement;
+    readonly titleEl: HTMLElement;
+    readonly headerButtons: readonly {
+        button: HTMLButtonElement;
+        icon: IconName;
+    }[];
+    /** The Random button's die: drawn as its face's glyph at rest, ray-traced while it rolls. */
+    readonly headerDie?: {
+        readonly button: HTMLButtonElement;
+        readonly die: HeaderDie;
+    };
+    /** Each locked-capable row's lock icon, by its label element; `data-on` says it's locked. */
+    readonly locks?: ReadonlyMap<HTMLElement, HTMLElement>;
+    readonly presetStrip: PresetStrip;
+    /** The tab strip under the header (hidden while the panel has no tabs). */
+    readonly tabs?: TabStrip;
+    readonly groups: readonly GpuGroupBinding[];
+    readonly cards: readonly HTMLElement[];
+    readonly rows: readonly GpuRowBinding[];
+    readonly actionButtons: readonly HTMLButtonElement[];
+    isPopoverOpen(): boolean;
+    /** While the panel grows out of (or into) its chip: the shape at a frame time. */
+    readonly morph?: (now: number) => MorphFrame | undefined;
+    /** True while rows, cards or group heads arrive or leave (a descriptor swap). */
+    presence?(): boolean;
+    /** True while a different item lands: everything snaps instead of springing. */
+    landing?(): boolean;
+    /** A full page (see `mountPage`): no panel card; a sticky header the body scrolls under. */
+    readonly page?: {
+        /** Group cards the overlay draws (custom cards stay in the DOM). */
+        readonly tiles: readonly HTMLElement[];
+        readonly sections: () => readonly {
+            readonly element: HTMLElement;
+            readonly head: HTMLElement | null;
+            /** Its name, the summary a folded one shows, its description and its caret (one that folds). */
+            readonly name?: HTMLElement;
+            readonly summary?: HTMLElement;
+            readonly desc?: HTMLElement;
+            readonly caret?: SVGElement;
+        }[];
+        /** The jump strip in the header (`nav`), drawn like the tab strip without its hairline. */
+        readonly nav?: TabStrip;
+        /** Changes whenever cards move, so cached rects are dropped. */
+        readonly layoutKey: () => number;
+        /** While cards glide or ease their heights: rects are read fresh and the loop stays awake. */
+        readonly moving?: () => boolean;
+        /** Steps the page's motion at the start of the frame, before its rects are read. */
+        readonly frame?: (now: number) => void;
+        /** A card's or heading's highlight: how far it's dimmed, and its dot (see `Page.highlight`). */
+        readonly emphasis?: (node: HTMLElement) => {
+            readonly dim: number;
+            readonly mark: number;
+            readonly dot?: HTMLElement;
+        } | undefined;
+    };
+}
+export interface KnobsGpuDiagnostics {
+    readonly supported: boolean;
+    readonly active: boolean;
+    readonly backend: "webgpu" | "dom";
+    readonly panelCount: number;
+    readonly frameCount: number;
+    readonly skippedFrames: number;
+    readonly sleeping: boolean;
+    readonly lastInstanceCount: number;
+    /** The text the last drawn frame drew (labels, values, titles), for parity checks. */
+    readonly lastTexts: readonly string[];
+    forceDeviceLoss(): void;
+    wake(): void;
+}
+declare global {
+    interface Window {
+        __knobsGpu?: KnobsGpuDiagnostics;
+    }
+}
+export declare function resolveRendererMode(mode: RendererMode, doc: Document): "gpu" | "dom";
+/**
+ * The nearest ancestor that makes a stacking context of its own (a transform, filter, z-index,
+ * fixed or sticky position, opacity, isolation, containment…). Inside one, a panel's DOM overlays
+ * (search, inline editors) stack within it, under the page-level canvas, whatever their z-index.
+ */
+export declare function stackingAncestor(el: HTMLElement): HTMLElement | null;
+declare class GpuOverlayManager {
+    private readonly doc;
+    private readonly panels;
+    private canvas;
+    private device;
+    private context;
+    private format;
+    private pipeline;
+    private primBuffer;
+    private viewBuffer;
+    private labelTexture;
+    private bindGroup;
+    private readonly atlas;
+    private readonly data;
+    private readonly prevData;
+    private primCount;
+    private prevPrimCount;
+    /** Polyline vertices (viewport px) that line primitives index into. */
+    private readonly points;
+    private readonly prevPoints;
+    private pointCount;
+    private prevPointCount;
+    private pointBuffer;
+    private maskBuffer;
+    private readonly masks;
+    private maskCount;
+    /** Index + 1 of the mask clipping the current panel's content; 0 for none. */
+    private curMask;
+    /** This frame's time, so the overlay and the DOM sample a morph at the same moment. */
+    private frameNow;
+    /** Point lists easing from where they were toward new targets, like the DOM's `d` and transform transitions. */
+    private readonly morphs;
+    private prevCanvasW;
+    private prevCanvasH;
+    private initializing;
+    private supported;
+    private failed;
+    private rafId;
+    private sleeping;
+    private dirty;
+    private settleFrames;
+    private lastTick;
+    private frameCount;
+    private skippedFrames;
+    private listenersAttached;
+    private styleVersion;
+    private layoutVersion;
+    /** Token transitions running on each panel, by property (`transitionrun` minus end/cancel). */
+    private readonly tokenRuns;
+    private tokenEventAt;
+    private readonly pillAnchors;
+    private readonly openUntil;
+    private readonly rectCache;
+    private curActiveEl;
+    private curFocusVisible;
+    private curPanelHovered;
+    private curSubHovered;
+    /** Whether the pointer has one of the panel's rows (and keys haven't taken over since). */
+    private curPointerRow;
+    private readonly hotRows;
+    private curPanelRect;
+    private curPanelScrollTop;
+    private curLayoutKey;
+    private curBypassRectCache;
+    private cachedCellFont;
+    private cachedCellPx;
+    private cachedCellWidth;
+    private curClip;
+    private curScale;
+    private curTokens;
+    /** Panel opacity (CSS open/close fades), applied to every primitive of the current panel. */
+    private curAlpha;
+    /** Text drawn this frame, and in the last one finished (see `KnobsGpuDiagnostics.lastTexts`). */
+    private frameTexts;
+    lastTexts: readonly string[];
+    private curDt;
+    /** Small eased scalars keyed by an object and a slot (e.g. a row's "hover" or "focus"). */
+    private readonly eased;
+    private easeMoving;
+    private readonly backdrops;
+    /** Last on-screen position of each readout character, measured from the right edge. */
+    private readonly placeOffsets;
+    constructor(doc: Document);
+    private get win();
+    private publishDiagnostics;
+    register(panel: GpuPanelBinding): () => void;
+    wake: () => void;
+    private attachGlobalListeners;
+    private onDocPointer;
+    private ensureInitialized;
+    private ensureCanvas;
+    private initWebGpu;
+    private setAllPanelsActive;
+    private pushPrim;
+    /** --k-rim-width in CSS px, on whole device pixels (at least one), so hairlines stay crisp. */
+    private hairline;
+    /**
+     * The canvas can't sample the page, so each panel gets a backdrop-filter element just under the
+     * canvas, kept on the panel's rect: the blur shows through the translucent card drawn above it.
+     */
+    private placeBackdrop;
+    /** While set, drawn text isn't recorded in `lastTexts` (its whole string already was). */
+    private quietText;
+    /**
+     * While set, text fades around these x's (a range's thumbs), by these strengths: clear for a
+     * half-width either side (2.5px unless given), then back over a ramp (4px unless given).
+     */
+    private textGaps;
+    private drawText;
+    /** Springs a per-object scalar toward `target`; keeps the frame loop awake until it settles. */
+    /** Omitting `target` keeps the current one. */
+    private ease;
+    /**
+     * Carries a pill along when layout moves its selected button (a token transition, a resize), so
+     * only a change of selection animates, as in the DOM, which snaps its pills on resize.
+     */
+    private carry;
+    private rectOf;
+    private isHovered;
+    private isFocused;
+    private hasFocusVisible;
+    /** From `from` (label) to `to` (text) as `el` turns hot, eased like the DOM's 0.15 s colour transitions. */
+    private hot;
+    /** Hint mode dims what the typed code no longer matches, over the DOM's 0.1 s. */
+    private missed;
+    /** How far an arriving or leaving node has revealed (its opacity while the reveal runs). */
+    private presence;
+    /** A control's hover/press wash, faded in and out over the DOM's 0.15 s. */
+    private wash;
+    /** A spring as quick as the hover tokens: --k-hover-in on the way in, --k-hover-out out. */
+    private hoverOmega;
+    private drawRowLabel;
+    /**
+     * A locked row's lock, just left of its readout (or control): it fades and scales in on the
+     * reset icon's spring, like .knobs-lock, at the right edge of the room the DOM leaves for it.
+     */
+    private drawLock;
+    private drawButton;
+    /**
+     * A button's box in the button tokens (--k-button-*): its fill and outline at rest, washing to
+     * their hover twins, at --k-button-radius.
+     */
+    private drawButtonBox;
+    private isHot;
+    /** Square inside its card, except the card's own rounded corners on the first and last rows. */
+    private rowCorners;
+    /** A row's hover wash, drawn beneath its control like the DOM row background. */
+    private drawRowHover;
+    /** The hairline above every row but a card's first, and the focus wash. */
+    private drawRowOverlay;
+    /** Whether `el` shows its focus wash: one wash at a time, the pointer's row's while it has one. */
+    private focusWashed;
+    private drawSeparator;
+    /** The focus wash, matching the row's corners inside its card. */
+    private drawFocus;
+    private drawIcon;
+    /**
+     * Copy, and the check it turns into once copied, from the DOM's transitions while they run
+     * (--k-copy, --k-check, --k-check-a on the button). Returns whether they're running.
+     */
+    private drawCopy;
+    /** The die is always traced, at rest too, exactly as the DOM canvas does: nothing swaps. */
+    private drawDie;
+    /** A circular icon button's hover/focus wash. */
+    private drawRoundWash;
+    /**
+     * A segmented tray (`.knobs-seg`), its sliding pill, and its option labels: used for both choice
+     * rows and a page group's numbered preset chips. Returns whether the pill is still moving.
+     */
+    private drawSeg;
+    /** A card header's compact preset menu: its tray, the selected name (or a dim "Custom") and caret. */
+    private drawHeadMenu;
+    /**
+     * A tab strip (a panel's tabs or a page's jump strip): text, a count after it in the modified
+     * colour, and the chosen tab's underline on the lead and trail springs. Returns whether the
+     * underline is still moving.
+     */
+    private drawTabStrip;
+    /** A highlight's dot by a title, where (and as large) as the DOM's `.knobs-mark` is. */
+    private drawMark;
+    /** Text that fits `maxW`, ellipsized like `text-overflow: ellipsis`. */
+    private fit;
+    private clipCache;
+    /** Whether the DOM lays `el`'s text out wider than its box (so text-overflow shows "…"). */
+    private domClipped;
+    private curReduced;
+    private curLocks;
+    /** The current row's selection wash (0…1), which its hover wash gives way to. */
+    private curSelected;
+    /** A stroke through `pts` (x,y pairs in viewport px), round-capped like SVG's. */
+    private pushLine;
+    /**
+     * Eases a list of numbers toward `target` on the fill spring, the way the DOM transitions the
+     * same geometry (`d`, `transform`, `left`); snaps on drags, resizes and reduced motion.
+     */
+    private morph;
+    /** How fast each of a morph's points moves now (its units per second), 0 at rest. */
+    private morphVelocity;
+    /** A shape with an outer (ring > 0) or inner (ring < 0) ring, drop shadow and glow. */
+    private shape;
+    /** An outline like CSS `outline: 1.5px` at `offset`, following `radius`; drawn while focus-visible. */
+    private readout;
+    /** A disclosure head (hover, label and changed dot, caret, focus); returns the body's clip, if open. */
+    private drawHead;
+    /** A disclosure chevron, turning a quarter on the lead spring as it opens. */
+    private drawCaret;
+    /** Draws an open body at its reveal's opacity. */
+    private inBody;
+    private drawSpring;
+    private drawColor;
+    /** A colour's hue, chroma and lightness strips, their thumbs filled with `rgb`. */
+    private drawColorStrips;
+    private drawPoint;
+    private drawEasing;
+    /** A gradient strip from its samples (see shader kind 13), `inset` in from each end. */
+    private pushRamp;
+    /** How far a handle that arrived mid-life has grown in (`data-born`), like the DOM's keyframes. */
+    private appear;
+    private drawGradient;
+    private drawCurve;
+    private readonly lastHover;
+    /** An editor's named presets: a tray of chips, the chosen one on a pill. */
+    private drawChips;
+    /**
+     * A whole number's reel, right-aligned at `right`: each place a wheel seen through a feathered
+     * slot, as the slider's readout draws its digits. True while any place moves.
+     */
+    private drawReel;
+    /** A readout in the value face (--k-value-font, --k-value-size), where the DOM sets its text. */
+    private valueText;
+    /** A number cell's tray: the field colour, lifting toward surface-hi on hover, focus and drag. */
+    private cellTray;
+    private drawVec;
+    private drawRange;
+    private drawAngle;
+    private drawKeybind;
+    /** A readout's clip: the card's, narrowed to `el` when given. */
+    private clipTo;
+    /** Paints a readout's ops (local px from `r`'s corner), clipped to it, as its canvas does. */
+    private drawPlotOps;
+    private readoutFont;
+    /** Text with tabular figures, as the DOM's `tnum` lays it out: each digit in the widest one's cell. */
+    private tabularWidth;
+    private drawReadout;
+    private drawToolbar;
+    private getDigitCellWidth;
+    private buildScene;
+    private isDataUnchanged;
+    private tick;
+}
+export declare function getGpuOverlayManager(doc: Document): GpuOverlayManager;
+export {};