@graphysdk/react-renderer 0.0.1-alpha.20260713101041

package/dist/index.d.ts

@@ -0,0 +1,1113 @@
+import { AppearanceConfig } from '@graphysdk/viz-engine';
+import { CalloutHitRegion } from '@graphysdk/viz-engine';
+import { CalloutPlacement } from '@graphysdk/viz-engine';
+import { CartesianCoordSystem } from '@graphysdk/viz-engine';
+import { Command } from '@graphysdk/viz-engine';
+import { CompiledLayer } from '@graphysdk/viz-engine';
+import { CompiledLayerFor } from '@graphysdk/viz-engine';
+import { CompiledPanel } from '@graphysdk/viz-engine';
+import { CompiledSpec } from '@graphysdk/viz-engine';
+import { CompilerInput } from '@graphysdk/viz-engine';
+import { Component } from 'react';
+import { ComponentType } from 'react';
+import { CoordSystem } from '@graphysdk/viz-engine';
+import { CreateGraphyBuilderOptions } from '@graphysdk/viz-engine';
+import { CSSProperties } from 'react';
+import { CustomPalettesInput } from '@graphysdk/viz-engine';
+import { Data } from '@graphysdk/viz-engine';
+import { ErrorInfo } from 'react';
+import { FontSpec } from '@graphysdk/viz-engine';
+import { FormattedAxis } from '@graphysdk/viz-engine';
+import { FormattedHeadline } from '@graphysdk/viz-engine';
+import { FormattedLegend } from '@graphysdk/viz-engine';
+import { Geom } from '@graphysdk/viz-engine';
+import { GeomName } from '@graphysdk/viz-engine';
+import { GraphLayout } from '@graphysdk/viz-engine';
+import { GraphTheme } from '@graphysdk/viz-engine';
+import { GraphyBuilder } from '@graphysdk/viz-engine';
+import { HeadlineMeasurer } from '@graphysdk/viz-engine';
+import { HoverHit } from '@graphysdk/viz-engine';
+import { HoverState } from '@graphysdk/viz-engine';
+import { JSX } from 'react/jsx-runtime';
+import { LayoutEdge } from '@graphysdk/viz-engine';
+import { Locale } from '@graphysdk/viz-engine';
+import { MeasuredText } from '@graphysdk/viz-engine';
+import { Observation } from '@graphysdk/viz-engine';
+import { Plugin as Plugin_2 } from '@graphysdk/viz-engine';
+import { PolarCoordSystem } from '@graphysdk/viz-engine';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { Rect } from '@graphysdk/viz-engine';
+import { RenderHitTester } from '@graphysdk/viz-engine';
+import { ResolvedHeadlineSize } from '@graphysdk/viz-engine';
+import { SourceContent } from '@graphysdk/viz-engine';
+import { SVGProps } from 'react';
+import { TextContent } from '@graphysdk/viz-engine';
+import { TextMeasurer } from '@graphysdk/viz-engine';
+import { TooltipContent } from '@graphysdk/viz-engine';
+import { VizDiagnostic } from '@graphysdk/viz-engine';
+
+/**
+ * Props for the AxisLabel slot — the axis title of every axis (e.g. "Revenue"), overridable via
+ * `slots.AxisLabel`. `labelRects` are SVG-local, keyed by edge. The tick band is a separate slot — see
+ * `AxisTicks`.
+ */
+export declare interface AxisLabelSlotProps {
+    formattedAxes: FormattedAxis[];
+    labelRects: Partial<Record<LayoutEdge, Rect>>;
+}
+
+/**
+ * Props for the AxisTicks slot — the tick lines and tick labels of every axis, overridable via
+ * `slots.AxisTicks`. `tickRects` are SVG-local, keyed by edge. The axis title is a separate slot — see
+ * `AxisLabel`.
+ */
+export declare interface AxisTicksSlotProps {
+    formattedAxes: FormattedAxis[];
+    tickRects: Partial<Record<LayoutEdge, Rect>>;
+}
+
+/**
+ * Browser text measurer backed by OffscreenCanvas.
+ *
+ * Uses the same Canvas `measureText()` API that the rendering engine uses,
+ * ensuring measurement/rendering consistency.
+ *
+ * **Font loading:** Use the async `create()` factory to ensure all declared
+ * `@font-face` fonts are loaded before any measurements. This avoids
+ * measuring against fallback fonts and caching incorrect widths.
+ * The sync constructor is available for controlled environments where font
+ * readiness is managed externally (e.g. backend with pre-registered fonts).
+ *
+ * Includes an emoji correction that compensates for the known discrepancy
+ * where Canvas `measureText()` reports wider widths for emoji than the DOM
+ * actually renders (Chrome/Firefox at font sizes < ~24px). The correction
+ * is computed once per font by comparing Canvas vs DOM measurement of a
+ * reference emoji, then cached.
+ */
+export declare class CanvasTextMeasurer implements TextMeasurer {
+    private readonly ctx;
+    /**
+     * Caches the per-font emoji correction factor.
+     */
+    private readonly emojiCorrections;
+    /**
+     * Tracks the last font string set on the context.
+     */
+    private currentFont;
+    constructor();
+    /**
+     * Creates a CanvasTextMeasurer after all declared `@font-face` fonts
+     * have finished loading. This ensures measurements use the correct font
+     * glyphs from the first call, avoiding stale cache entries.
+     *
+     * Falls back to immediate construction if `document.fonts` is unavailable
+     * (e.g. non-browser environment).
+     *
+     * Note: document.fonts.ready still resolves even if some fonts fail to load.
+     */
+    static create(): Promise<CanvasTextMeasurer>;
+    measureText(text: string, font: FontSpec): MeasuredText;
+    /**
+     * Skip redundant `ctx.font` assignments
+     * Setting the property triggers CSS font string parsing and font resolution.
+     */
+    private setFont;
+    /**
+     * Computes the per-emoji width correction for a given font.
+     * Measures the reference emoji in both Canvas and DOM, caches the difference.
+     * Returns 0 if DOM is unavailable or the difference is negligible (< 0.5px).
+     */
+    private getEmojiCorrection;
+}
+
+/**
+ * The compiled layer a renderer's handlers receive. A built-in renderer keyed to a `GeomName` gets
+ * its param-narrowed `CompiledLayerFor<G>`; a custom renderer (`G = string`) is downstream of
+ * serialisation, never sees the plugins array, and reads the base {@link CompiledLayer} dynamically.
+ */
+declare type CompiledLayerOf<G extends GeomName | string> = G extends GeomName ? CompiledLayerFor<G> : CompiledLayer;
+
+declare type CoordKind = CoordSystem['type'];
+
+/** Maps a coord-kind discriminator to the corresponding `CoordSystem` member. */
+declare type CoordSystemFor<C extends CoordKind> = C extends 'cartesian' ? CartesianCoordSystem : C extends 'polar' ? PolarCoordSystem : never;
+
+/**
+ * Ergonomic entry point for a React app: pass `plugins` once and get back a {@link GraphyKit} — the
+ * typed builder plus a `GraphProvider` that already carries them. Pure sugar over the primitives
+ * (`createGraphyBuilder`, `<GraphProvider plugins>`); use those directly for headless or advanced
+ * wiring. The `const` type parameter captures the `plugins` tuple literally, so `kit.geom.<customName>`
+ * is typed.
+ */
+export declare function createGraphyKit<const P extends readonly Plugin_2[] = []>(options?: CreateGraphyBuilderOptions<P>): GraphyKit<P>;
+
+/** vanilla-extract class that binds the dark token values; set it on any ancestor to flip to dark. */
+export declare const darkTheme: string;
+
+/** Default paint for the footer region — caption and source line. */
+export declare const DefaultFooter: ({ ref, footerRect, mode, caption, isCaptionVisible, source, isSourceVisible, }: FooterSlotProps) => JSX.Element | null;
+
+/** Default paint for the grid region — panel border and per-tick gridlines, drawn inside the panel rect. */
+export declare const DefaultGrid: ({ axes, panel, panelFrameRect, panelRect }: GridSlotProps) => JSX.Element;
+
+/** Default paint for the header region — title and subtitle. */
+export declare const DefaultHeader: ({ ref, headerRect, mode, title, isTitleVisible, subtitle, isSubtitleVisible, }: HeaderSlotProps) => JSX.Element | null;
+
+/**
+ * Default tooltip body. Paints the box, header, and rows from the formatted {@link content}, and
+ * resolves each row's swatch shape off its geom's render contract for the active coord system.
+ * Positioning lives in the {@link Tooltip} wrapper, never here.
+ */
+export declare const DefaultTooltip: ({ content }: TooltipSlotProps) => JSX.Element;
+
+/**
+ * Dual-target renderer binding, keyed on whether the first argument is a compile definition or a built-in
+ * geom name:
+ *
+ * - **Whole new geom** — `defineGeomRenderer(definition, contract)` pairs the render contract with its
+ *   compile definition, producing a {@link GeomRendererDefinition}. Registering the result registers both
+ *   sides: the compile definition is reachable at `.definition` and the geom name is read from it, so the
+ *   two halves cannot drift.
+ * - **Render-only override** — `defineGeomRenderer('bar', contract)` rebinds only the paint half of an
+ *   existing built-in, producing a {@link ResolvedGeomRenderer} that carries no `.definition`. The built-in
+ *   compile half keeps running (nothing re-seeds the compile registry); only the render registry changes.
+ *   The name is constrained to {@link GeomName}, so a by-name override of an unknown built-in is a
+ *   compile-time error. To restyle a *custom* geom, rebind its definition (which you hold) via the first form.
+ */
+export declare function defineGeomRenderer<Definition extends Geom<unknown>>(definition: Definition, contract: GeomRenderContract): GeomRendererDefinition & {
+    readonly definition: Definition;
+};
+
+export declare function defineGeomRenderer<G extends GeomName>(geom: G, contract: GeomRenderContract): ResolvedGeomRenderer;
+
+/** Dev-only compile-cache inspector; render inside a `<GraphProvider>`. See {@link DevToolsPanelProps}. */
+export declare const DevToolsPanel: ({ width, style, className }?: DevToolsPanelProps) => JSX.Element;
+
+/**
+ * Dev-only panel that visualises the compile cache. Drop it inside a `<GraphProvider>` to see, in
+ * real time, which compile stages re-ran vs. hit cache for the most recent dispatch, plus a
+ * bounded log of recent compiles and the cumulative hit/miss counters.
+ */
+export declare interface DevToolsPanelProps {
+    /** Panel width in pixels. Defaults to 380. */
+    width?: number;
+    /** Style override merged onto the outer wrapper. */
+    style?: CSSProperties;
+    /** Class applied to the outer wrapper. */
+    className?: string;
+}
+
+declare const FONT_STYLES: readonly ["normal", "italic", "oblique"];
+
+/**
+ * A CSS length keeping its unit so measurement can treat it like CSS paint does: em scales with
+ * `textScale` (see `emToPx`), px stays absolute.
+ */
+export declare interface FontLength {
+    value: number;
+    unit: 'px' | 'em';
+}
+
+export declare type FontListInput = Array<{
+    id: string;
+    fontFamily: string;
+}>;
+
+export declare type FontStyle = (typeof FONT_STYLES)[number];
+
+/**
+ * A structured override of a measured font token. Omitted fields keep the token's default (which
+ * still cascades from the leaf tokens, e.g. `fontSizeXs`), so `{ weight: 600 }` changes only the
+ * weight.
+ */
+export declare interface FontTokenOverride {
+    family?: string;
+    weight?: number;
+    style?: FontStyle;
+    size?: FontLength;
+    /** Unitless multiplier; sizes HTML line boxes (legend band). Canvas measurement ignores it. */
+    lineHeight?: number;
+}
+
+/**
+ * Props for the Footer slot, overridable via `slots.Footer` on `GraphRenderer`. Caption editing in
+ * `editable` mode is internal to this default; an override replacing the region opts out of it.
+ */
+export declare interface FooterSlotProps {
+    /** Forward this to the region's outer element — the layout measures the rendered DOM to reserve its space. */
+    ref?: React.Ref<HTMLDivElement>;
+    footerRect: Rect;
+    mode?: GraphMode;
+    caption: TextContent | null;
+    isCaptionVisible: boolean;
+    source: SourceContent | null;
+    isSourceVisible: boolean;
+}
+
+export declare type GeomHoverCompanionsRendererInput = HoverCompanionsRenderInput;
+
+/** Page-relative cursor coordinates the push-path tooltip anchors to. */
+export declare interface GeomHoverCursor {
+    clientX: number;
+    clientY: number;
+}
+
+/**
+ * Pushes a hovered observation key into the central hover, or clears this layer's hover with `null`.
+ * A non-null key requires a `cursor` — the overlay intercepts the pointer events the cursor-follow
+ * tooltip would otherwise read, so the anchor can only come from the geom's own handler. Consumed by
+ * {@link InteractiveOverlayApi.pushHover} and returned by `useGeomHover`.
+ */
+export declare interface GeomHoverPush {
+    (key: string, cursor: GeomHoverCursor): void;
+    (key: null): void;
+}
+
+export declare type GeomHoverRendererInput = HoverRenderInput;
+
+export declare type GeomOverlayAnchorRendererInput = OverlayAnchorInput;
+
+/** An overlay-hosted geom's paint function — receives the guaranteed overlay wiring on `input.overlay`. */
+export declare type GeomOverlayRenderFn<G extends GeomName | string = string, C extends CoordKind = CoordKind> = (input: GeomOverlayRenderInput<G, C>) => ReactNode;
+
+/**
+ * The input an overlay-hosted render (`{ fn, options: { overlay: true } }`) receives: the standard render
+ * input plus a guaranteed {@link InteractiveOverlayApi}. The renderer always supplies it, so the geom's
+ * render uses `overlay` unconditionally — it never decides where it is mounted, only what it paints.
+ */
+export declare interface GeomOverlayRenderInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> extends GeomRenderInput<G, C> {
+    overlay: InteractiveOverlayApi;
+}
+
+/**
+ * A geom's `render`: either a plain panel-SVG paint function, or an overlay-hosted one paired with
+ * `options` — so a geom that must paint into the interactive overlay declares
+ * `{ fn, options: { overlay: true } }` without a second render entry point. The
+ * renderer decides where each is mounted; the geom only decides what it paints. `render` is the single
+ * paint declaration either way.
+ */
+export declare type GeomRender<G extends GeomName | string = string, C extends CoordKind = CoordKind> = GeomRenderFn<G, C> | {
+    fn: GeomOverlayRenderFn<G, C>;
+    options: GeomRenderOptions;
+};
+
+/**
+ * The render side of a geom: everything a single `(geom, coord)` composition needs to render and
+ * respond to hover. Generic over the geom name and coord kind, so a built-in renderer parameterised
+ * as `GeomRenderContract<'bar', 'cartesian'>` receives param-narrowed inputs (`CompiledLayerFor<'bar'>`,
+ * `CartesianCoordSystem`), while the default `<string, CoordKind>` instantiation is the base/custom
+ * contract a plugin author writes against. The geom's name, highlight strategy, and `params` type are
+ * NOT restated here — they are read off the compile definition this contract is bound to (see
+ * {@link defineGeomRenderer}). This is the single declaration of a geom's render contract; the built-in
+ * narrow form below and the base/custom form (`geom-renderer.ts`) are both instantiations of it.
+ */
+export declare interface GeomRenderContract<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
+    /** The coord system this contract paints under. A geom may bind one contract per coord. */
+    coord: C;
+    swatchShape?: SwatchShape;
+    /**
+     * The hover-guide mode this `(geom, coord)` draws when it is the hovered layer (a
+     * {@link HoverGuideMode}). Omit it — or contribute `null` — to draw no guide (the geom's mark is its
+     * own highlight). A declared mode the composition can't realise draws nothing: a polar bar's `'band'`
+     * fills a wedge, but a pie/donut (no category band) resolves to an empty one. `resolveHoverGuideMode`
+     * reads the hovered layer's mode to pick the one guide the chart draws.
+     */
+    guideMode?: HoverGuideMode | null;
+    /**
+     * The geom's paint. A plain function paints into the panel SVG; the `{ fn, options: { overlay: true } }`
+     * form paints into a screen-aligned portal above the central capture layer for a live/drag-driven geom
+     * that owns its pointer events (force-directed), with the wiring on `input.overlay`.
+     */
+    render: GeomRender<G, C>;
+    renderHover: (input: HoverRenderInput<G, C>) => ReactNode;
+    renderHoverCompanions: (input: HoverCompanionsRenderInput<G>) => ReactNode;
+    /**
+     * Render-side spatial query for a `'render-hit-test'` layer whose geometry is precomputed into the
+     * compiled spec (sankey ribbons, treemap tiles, voronoi cells). A
+     * **factory**: given the render input it returns the per-cursor {@link RenderHitTester};
+     * the renderer memoizes the factory on `layer.data`, so the read runs once per data change and the
+     * per-move query allocates nothing. The author writes no hook; the renderer registers the tester on its
+     * behalf. The cursor arrives in panel-local `[0,1]` with a top-left origin — the frame the geom paints
+     * in. Returns the declared identity key of the observation under the cursor, or `null` for a miss.
+     */
+    hitTest?: (input: GeomRenderInput<G, C>) => RenderHitTester;
+    /** Panel-space anchor for a matched observation; required when the def highlights via overlay-anchor. */
+    getOverlayAnchor?: (input: OverlayAnchorInput<G, C>) => OverlayAnchor | null;
+}
+
+/**
+ * A render contract paired with the compile definition it paints for. The engine recovers the definition
+ * structurally from `.definition` (React-free), and the renderer reads the geom name from the same
+ * definition — so the compile and render sides are one declaration consumed twice, never two matched by
+ * a string.
+ */
+export declare interface GeomRendererDefinition extends ResolvedGeomRenderer {
+    /** The compile definition this renderer paints for. Held by reference — the single source of identity. */
+    readonly definition: Geom<unknown>;
+}
+
+/** A custom geom render handler's input — the base instantiation of the typed built-in inputs. */
+export declare type GeomRendererInput = GeomRenderInput;
+
+/** A geom's panel-SVG paint function — the plain `render` form. */
+export declare type GeomRenderFn<G extends GeomName | string = string, C extends CoordKind = CoordKind> = (input: GeomRenderInput<G, C>) => ReactNode;
+
+declare interface GeomRenderInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
+    layer: CompiledLayerOf<G>;
+    coordSystem: CoordSystemFor<C>;
+    isAnimated: boolean;
+    formattingLocale: Locale;
+}
+
+/**
+ * Hosting options for an overlay render. The presence of the object form already declares overlay hosting;
+ * `overlay: true` makes the call site read explicitly (and leaves room for further hosting options later).
+ */
+export declare interface GeomRenderOptions {
+    /**
+     * Mount this render's output in a screen-aligned portal above the central capture layer, rather than in
+     * the panel SVG — for a live or drag-driven geom that must own its pointer events (force-directed). The
+     * renderer then supplies {@link GeomOverlayRenderInput.overlay}.
+     */
+    overlay: true;
+}
+
+/**
+ * The single place a chart surfaces an error in place — instead of unwinding the page to a blank
+ * screen. Two failure modes converge here: a non-throwing **compile failure** the host passes via
+ * {@link GraphErrorBoundaryProps.forcedErrors}, and a **render-throw** from a renderer component that
+ * this boundary catches. Both render the same {@link GraphErrorPanel}, so there is exactly one panel
+ * call site rather than one per failure mode.
+ */
+export declare class GraphErrorBoundary extends Component<GraphErrorBoundaryProps, GraphErrorBoundaryState> {
+    state: GraphErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): GraphErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    componentDidUpdate(prevProps: GraphErrorBoundaryProps): void;
+    render(): ReactNode;
+}
+
+declare interface GraphErrorBoundaryProps {
+    children: ReactNode;
+    /**
+     * Compile failures to surface in place, rendered through the same panel as a caught render-throw
+     * so a chart has one predictable place for its errors.
+     */
+    forcedErrors?: VizDiagnostic[] | null;
+    /**
+     * When any key changes after a caught render-throw, the boundary clears it and
+     * retries — so a fixed spec recovers. */
+    resetKeys?: readonly unknown[];
+    /**
+     * Called with a single-element list when a child throws during render
+     * (not for `forcedErrors`, which the host already reported).
+     */
+    onError?: (errors: VizDiagnostic[]) => void;
+}
+
+declare interface GraphErrorBoundaryState {
+    caughtDiagnostic: VizDiagnostic | null;
+}
+
+/**
+ * Shared in-place fallback for a chart that failed to compile or render. Shows each diagnostic's
+ * `code`, `message`, and `suggestion` — richer than a bare error message — so an end user can file
+ * a useful report and a developer can see what to fix. Theme-independent: it can render before the
+ * theme provider mounts.
+ */
+export declare const GraphErrorPanel: ({ errors }: GraphErrorPanelProps) => JSX.Element;
+
+declare interface GraphErrorPanelProps {
+    /** The compile failure(s). The first headlines; any remaining are listed beneath it. */
+    errors: VizDiagnostic[];
+}
+
+/**
+ * Chart display and interaction mode.
+ * - 'readonly': Normal chart display with full interactivity but no editing (default)
+ * - 'editable': Chart with inline editing capabilities for labels, titles, etc.
+ */
+export declare type GraphMode = 'readonly' | 'editable';
+
+/**
+ * Owns the compiled spec for a graph and exposes it via {@link useCompiledSelector}, plus a
+ * `dispatch` for applying {@link Command}s. Both failure modes — a non-throwing compile failure and a
+ * render-throw from a renderer component — converge on a single {@link GraphErrorBoundary} that shows
+ * the error in place, so a broken chart never blanks the page.
+ */
+export declare const GraphProvider: ({ data, input, plugins, formattingLocale, onChange, onError, onWarnings, customPalettes, theme, fontList, themeOverrides: themeOverridesInput, children, }: GraphProviderProps) => JSX.Element;
+
+export declare interface GraphProviderProps {
+    data: Data;
+    input: CompilerInput;
+    /**
+     * Custom geoms, stats, and transforms (and their render halves) registered for this graph. Seeds
+     * the compiler and builds the per-provider render resolver from one array. Construction-time config,
+     * frozen at mount — change the registered set by remounting (React `key`); `data`/`input`/`theme`
+     * stay reactive.
+     */
+    plugins?: readonly Plugin_2[];
+    formattingLocale?: Locale;
+    onChange?: (next: CompilerInput) => void;
+    /** Fires with the compile failure(s) whenever a compile/recompile/dispatch produces errors. */
+    onError?: (errors: VizDiagnostic[]) => void;
+    /** Fires with any warnings a successful compile produced. */
+    onWarnings?: (warnings: VizDiagnostic[]) => void;
+    theme?: GraphTheme;
+    themeOverrides?: ThemeOverrides;
+    customPalettes?: CustomPalettesInput;
+    fontList?: FontListInput;
+    children: ReactNode;
+}
+
+/**
+ * Renders the compiled spec held by the surrounding `<GraphProvider>`. The renderer owns
+ * layout + DOM — the provider owns the spec and derives the compiled output from it. There's
+ * no `config` prop: every consumer must wrap with `<GraphProvider>` so commands can operate
+ * on the live spec.
+ */
+export declare const GraphRenderer: ({ slots, sizing, onResize, ...rest }: GraphRendererProps) => JSX.Element;
+
+/** Props for {@link GraphRenderer}: container sizing, interaction toggles and per-region slot overrides. */
+export declare interface GraphRendererProps {
+    /** Controls how the graph responds to its container size. Defaults to filling the parent container. */
+    sizing?: GraphSizing;
+    /** Callback invoked when the graph's container is resized. Fires in every sizing mode. */
+    onResize?: ResizeObserverOnResize;
+    isAnimated?: boolean;
+    showTooltips?: boolean;
+    mode?: GraphMode;
+    /** Per-region component overrides. Unspecified regions render their default. */
+    slots?: GraphSlots;
+}
+
+/** Controls how the graph claims space in its container. */
+export declare type GraphSizing = {
+    mode: 'responsive';
+} | {
+    mode: 'fixed';
+    width: number;
+    height: number;
+} | {
+    mode: 'keepAspectRatio';
+    intrinsicWidth: number;
+    intrinsicHeight: number;
+} | {
+    mode: 'keepAspectRatio';
+    intrinsicWidth: number;
+    aspectRatio: number;
+} | {
+    mode: 'keepAspectRatio';
+    intrinsicHeight: number;
+    aspectRatio: number;
+};
+
+/**
+ * Region overrides for `GraphRenderer`. A slot replaces how one region paints; the viz-engine `Spec`
+ * still owns whether a region exists and what data it receives, and an override gets the same
+ * render-ready props as its default.
+ *
+ * Layout-safe regions (`Header`, `Footer`, `Tooltip`, `Grid`) are bare components — DOM-measured or
+ * reserving no edge space. Layout-coupled regions (`AxisTicks`, `AxisLabel`, `Legend`, `Headline`) are
+ * {@link SlotOverride}s that also declare their reserved size via `measure`, else paint and the
+ * reserved band desync. The tick and title bands are separate slots so overriding one leaves the other
+ * on its default.
+ */
+export declare interface GraphSlots {
+    Header?: ComponentType<HeaderSlotProps>;
+    Footer?: ComponentType<FooterSlotProps>;
+    Tooltip?: ComponentType<TooltipSlotProps>;
+    Grid?: ComponentType<GridSlotProps>;
+    Legend?: SlotOverride<LegendSlotProps, (legend: FormattedLegend, ctx: SlotMeasureContext) => number>;
+    Headline?: SlotOverride<HeadlineSlotProps, HeadlineMeasurer>;
+    AxisTicks?: SlotOverride<AxisTicksSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
+    AxisLabel?: SlotOverride<AxisLabelSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
+}
+
+/**
+ * A plugin-bound authoring kit: the typed `geom`/`stat`/`transform`/`scale`/`coord` factories plus
+ * `createSpec`/`pipe`, and a `GraphProvider` pre-bound to the same `plugins` — so what can be written
+ * and what can render derive from one array and cannot diverge. Generic over the `plugins` tuple so
+ * the typed per-plugin builder methods (`geom.<name>`, …) flow through to the React entry point.
+ */
+export declare interface GraphyKit<P extends readonly Plugin_2[] = readonly Plugin_2[]> extends GraphyBuilder<P> {
+    GraphProvider: (props: Omit<GraphProviderProps, 'plugins'>) => ReactElement;
+}
+
+/**
+ * Props for the Grid slot, overridable via `slots.Grid` on `GraphRenderer`. `panelRect` is in
+ * SVG-local coordinates.
+ */
+export declare interface GridSlotProps {
+    axes: FormattedAxis[];
+    panel: CompiledPanel;
+    panelFrameRect: GraphLayout['panelFrame'];
+    panelRect: GraphLayout['panel'];
+}
+
+/**
+ * Props for the Header slot, overridable via `slots.Header` on `GraphRenderer`. Title editing in
+ * `editable` mode is internal to this default; an override replacing the region opts out of it.
+ */
+export declare interface HeaderSlotProps {
+    /** Forward this to the region's outer element — the layout measures the rendered DOM to reserve its space. */
+    ref?: React.Ref<HTMLDivElement>;
+    headerRect: Rect;
+    mode?: GraphMode;
+    title: TextContent | null;
+    isTitleVisible: boolean;
+    subtitle: TextContent | null;
+    isSubtitleVisible: boolean;
+}
+
+/** Props for the Headline slot, overridable via `slots.Headline` on `GraphRenderer`. */
+export declare interface HeadlineSlotProps {
+    headline: FormattedHeadline;
+    rect: Rect;
+    resolvedSize: ResolvedHeadlineSize;
+    /** Leading strip items to paint; the rest are hidden because they would overflow the band. */
+    visibleItemCount: number;
+}
+
+declare interface HoverCompanionsRenderInput<G extends GeomName | string = string> {
+    layer: CompiledLayerOf<G>;
+    primary: HoverHit;
+    related: HoverHit[];
+}
+
+/**
+ * The shape of positional guide the `HoverGuide` draws for a hovered observation, contributed per
+ * `(geom, coord)` renderer via `guideMode`:
+ *
+ * - `'band'` — a rectangle over the hovered category's band on the main axis (bars).
+ * - `'crosshair'` — a rule at the hovered value: a straight line under cartesian, a centre-to-rim spoke
+ *   under polar (line and area).
+ *
+ * A renderer that omits `guideMode` draws no guide (scatter points). A declared `'band'` still draws
+ * nothing where the composition has no category band — a pie/donut resolves to an empty wedge. The chart
+ * draws the guide of whichever layer the cursor resolves to, so a combo shows a band over a hovered bar
+ * and a crosshair over a hovered line; see `resolveHoverGuideMode`.
+ */
+declare type HoverGuideMode = 'crosshair' | 'band';
+
+/**
+ * Hosts the hover store + engine for the surrounding `<GraphProvider>`. Subscribes only to the
+ * `layers` and `coordSystem` slices of the compiled spec — the engine never reads anything else,
+ * so unrelated stage outputs (scales, guides, summarise, visual mapper) cannot trigger a rebuild.
+ */
+export declare const HoverProvider: ({ children }: HoverProviderProps) => JSX.Element;
+
+declare interface HoverProviderProps {
+    children: ReactNode;
+}
+
+declare interface HoverRenderInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
+    layer: CompiledLayerOf<G>;
+    coordSystem: CoordSystemFor<C>;
+    primary: HoverHit;
+    group: HoverHit[];
+    related: HoverHit[];
+    panelRect: GraphLayout['panel'];
+}
+
+declare interface HoverSlice {
+    hover: HoverState;
+    /**
+     * Box the tooltip anchors against while the pointer is over a pinned callout, in client
+     * coordinates. `null` during normal cursor hover, when the tooltip follows the cursor.
+     */
+    tooltipAnchor: TooltipAnchor | null;
+    /**
+     * Mini-bubble hit rects the tracker tests before the geom hit-test. Callout renderers publish
+     * their placed rects here so hover detection stays in the single pointer pipeline.
+     */
+    calloutHits: CalloutHitRegion[];
+}
+
+declare interface HoverStoreActions {
+    setHoverState: (next: HoverState) => void;
+    setTooltipAnchor: (next: TooltipAnchor | null) => void;
+    setCalloutHits: (next: CalloutHitRegion[]) => void;
+}
+
+/** State of the hover store: the current {@link HoverState} plus its setter. */
+declare type HoverStoreState = HoverSlice & HoverStoreActions;
+
+/**
+ * The overlay wiring handed to an overlay-hosted render via {@link GeomOverlayRenderInput.overlay}. The
+ * geom writes only its simulation, marks, and drag handlers; the renderer owns the on-screen rect
+ * measurement, the portal alignment, and the push wiring.
+ */
+export declare interface InteractiveOverlayApi {
+    /** Feeds the hovered observation's identity key into the unified hover store — the push path. */
+    pushHover: GeomHoverPush;
+    /** The panel's on-screen rect in client pixels, so the overlay can place its marks. */
+    panelRect: PanelScreenRect;
+}
+
+/** Props for the Legend slot, overridable via `slots.Legend` on `GraphRenderer`. */
+export declare interface LegendSlotProps {
+    formattedLegends: FormattedLegend[];
+    rects: Partial<Record<LayoutEdge, Rect>>;
+    textScale: number;
+}
+
+/** Scales the color's HSL lightness up by `amount` (0–1). */
+export declare const lightenCss: (colorString: string, amount: number) => string;
+
+/** vanilla-extract class that binds the light token values; the default theme. */
+export declare const lightTheme: string;
+
+/**
+ * The element font tokens JS measurement reproduces. Overridden structurally
+ * ({@link FontTokenOverride}); the CSS variable's shorthand is serialized from the same object
+ * measurement reads, so paint and layout move together.
+ */
+export declare type MeasuredFontTokenKey = 'fontDataLabel' | 'fontStackTotal' | 'fontTickLabel' | 'fontAxisLabel' | 'fontLegendLabel' | 'fontGoalLineLabel';
+
+/**
+ * Anchor point in normalized [0,1] coord-space where a highlight overlay marker
+ * should be painted for one observation. Renderer turns [0,1] into pixels.
+ */
+export declare interface OverlayAnchor {
+    x: number;
+    y: number;
+}
+
+declare interface OverlayAnchorInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
+    layer: CompiledLayerOf<G>;
+    coordSystem: CoordSystemFor<C>;
+    observation: Observation;
+}
+
+/** The panel's on-screen rect in client coordinates — what a fixed-position overlay aligns to. */
+export declare interface PanelScreenRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
+export { RenderHitTester }
+
+export declare type ResizeObserverOnResize = (state: ResizeObserverState) => void;
+
+export declare interface ResizeObserverState {
+    width: number;
+    height: number;
+    /** True until the first ResizeObserver measurement lands. */
+    isDefault: boolean;
+}
+
+/**
+ * A render contract with its resolved geom name attached — the shape the per-provider resolver returns
+ * and every render site consumes. Both a built-in `GeomRenderer` and a custom {@link GeomRendererDefinition}
+ * conform to it, so the consumers paint built-ins and customs through one type.
+ */
+export declare interface ResolvedGeomRenderer extends GeomRenderContract {
+    /** The geom name this renderer paints — the resolver dispatches on it. */
+    geom: string;
+}
+
+/**
+ * Passed as the second argument to a layout-coupled slot's `measure`, so it can size its band from
+ * real text metrics — the same Canvas-backed measurer the built-in measurers use — rather than
+ * constructing its own. A `measure` whose size is unrelated to text can ignore it.
+ */
+export declare interface SlotMeasureContext {
+    /** Measures a string at a given font; returns `{ width, height, ascent, descent }` in CSS pixels. */
+    measureText: TextMeasurer['measureText'];
+    /** Active text-scale multiplier; multiply an em size by this to get the pixel size to measure at. */
+    textScale: number;
+}
+
+/**
+ * A layout-coupled slot: the region's `render` paired with the `measure` the layout uses to reserve
+ * its space. `measure` mirrors the matching `LayoutMeasurer` method, so paint and reserved space can't
+ * disagree. Give it a stable reference — a `measure` whose identity changes each render takes effect on
+ * the next paint but doesn't retrigger layout.
+ */
+export declare interface SlotOverride<Props, Measure> {
+    /** The component that paints the region. */
+    render: ComponentType<Props>;
+    /**
+     * Returns the region's reserved size. Receives the region's formatted data plus a
+     * {@link SlotMeasureContext} (`measureText`, `textScale`) for sizing from real text metrics.
+     */
+    measure: Measure;
+}
+
+/**
+ * The vocabulary of legend/tooltip/headline marks the {@link Swatch} can paint. A geom picks the one
+ * that best evokes its on-canvas mark via `swatchShape` on its render contract (see
+ * {@link GeomRenderContract}); it is a render concern, so the engine never resolves it.
+ *
+ * - `square` — a filled rect (bars)
+ * - `line` — a horizontal stroke (lines)
+ * - `area` — a filled region with a stroke accent (areas)
+ * - `circle` — a filled dot (points)
+ * - `slice` — a pie / donut wedge (polar bars)
+ */
+export declare type SwatchShape = 'square' | 'line' | 'circle' | 'area' | 'slice';
+
+/**
+ * Creates a font-ready, cached text measurer and shares it with descendants via context.
+ * Renders nothing until the measurer resolves, so consumers reading the context always
+ * see a non-null value.
+ *
+ * The measurer is recreated when additional fonts finish loading (e.g. in iframes where
+ * `document.fonts.ready` resolves before stylesheets inject their `@font-face` rules).
+ * The new instance gets a fresh cache so stale measurements from fallback fonts are
+ * discarded.
+ *
+ * Falls back to `HeuristicTextMeasurer` when `OffscreenCanvas` is unavailable.
+ */
+export declare const TextMeasurerProvider: ({ children, measurer: override }: TextMeasurerProviderProps) => JSX.Element | null;
+
+declare interface TextMeasurerProviderProps {
+    children: ReactNode;
+    /**
+     * Optional override. Production callers omit this and the provider creates its own
+     * font-ready measurer. Tests pass a synchronous measurer (e.g. `HeuristicTextMeasurer`)
+     * to bypass the font-loading round-trip.
+     */
+    measurer?: TextMeasurer;
+}
+
+/** The name of a single theme token. */
+export declare type ThemeKey = keyof ThemeValues;
+
+/**
+ * A partial set of token values layered over a base theme — the shape of the `themeOverrides`
+ * prop. Measured font tokens take a {@link FontTokenOverride}; every other token takes its CSS
+ * string value.
+ */
+export declare type ThemeOverrides = Partial<Omit<ThemeValues, MeasuredFontTokenKey>> & {
+    [Key in MeasuredFontTokenKey]?: FontTokenOverride;
+};
+
+/** Resolves the base theme plus per-graph `themeOverrides` into token values and publishes them to the subtree. */
+export declare const ThemeProvider: ({ theme, themeOverrides, appearance, children }: ThemeProviderProps) => JSX.Element;
+
+declare interface ThemeProviderProps {
+    appearance: AppearanceConfig;
+    theme: GraphTheme;
+    themeOverrides?: ThemeOverrides;
+    children: ReactNode;
+}
+
+/** Every theme token mapped to its resolved CSS string value. */
+export declare type ThemeValues = Record<keyof typeof vars, string>;
+
+/**
+ * Where a pinned callout asks the tooltip to anchor: the marker point in client coordinates, plus
+ * the direction the mini sits, so the tooltip expands over the mini the way it was placed.
+ */
+declare interface TooltipAnchor {
+    x: number;
+    y: number;
+    placement: CalloutPlacement;
+}
+
+export declare interface TooltipSlotProps {
+    /** Render-ready tooltip body, already formatted by the viz-engine runtime. */
+    content: TooltipContent;
+}
+
+/**
+ * A nested SVG that establishes a `[0, 1]` unit coordinate space (top-left origin) stretched to fill
+ * the geom panel. A layout geom paints its geometry in raw unit coords so paint and hit-test never re-project against each
+ * other. `preserveAspectRatio="none"` maps the unit square onto the (usually non-square) panel exactly.
+ */
+export declare const UnitSpaceSvg: ({ children, ...rest }: UnitSpaceSvgProps) => ReactNode;
+
+declare interface UnitSpaceSvgProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'preserveAspectRatio'> {
+    children: ReactNode;
+}
+
+/**
+ * Subscribes to a derived slice of the compiled spec. The subscription only fires when the
+ * selector's result changes by reference, so combined with the compiler's per-stage memoization
+ * this skips re-renders whenever the selected slice is unchanged.
+ *
+ * @example
+ * ```ts
+ * const layers = useCompiledSelector((compiled) => compiled.layers);
+ * const xAxis = useCompiledSelector((compiled) => compiled.guides.axes[0]);
+ * ```
+ */
+export declare const useCompiledSelector: <Selected>(selector: (compiled: CompiledSpec) => Selected) => Selected;
+
+/**
+ * Registers a layout geom's render-side hit tester so a `'render-hit-test'` layer inherits central hover
+ * and the built-in tooltip — the path `bar` takes — with no pointer overlay of its own. The pull path.
+ *
+ * The cursor passed to the tester is panel-local `[0, 1]`, top-left origin — the frame the geom paints in.
+ */
+export declare function useGeomHitTest(layerId: string, tester: RenderHitTester): void;
+
+/**
+ * The push half of the render-hit-test keystone, for a geom whose geometry keeps changing after it is
+ * drawn (a live simulation) and so owns its own pointer surface above the central capture layer. The
+ * geom's pointer handlers call the returned setter with the hovered observation's `identityKey`; the
+ * engine resolves it through the same `byKey` lookup the pull path uses, so the geom inherits the tooltip
+ * and `renderHover`. Since the overlay intercepts the pointer events, the tooltip is anchored at the
+ * supplied cursor. Pass `null` to clear. Geoms with geometry fixed once drawn use `useGeomHitTest`.
+ *
+ * Escape hatch: an interactive geom should instead declare an overlay-hosted `render`
+ * (`{ fn, options: { overlay: true } }`), which the renderer portals into a screen-aligned overlay and
+ * hands a ready `pushHover` via `input.overlay`. Reach for this hook only when that form is not enough.
+ */
+export declare function useGeomHover(layerId: string): GeomHoverPush;
+
+/** Returns the dispatcher for applying {@link Command}s to the provider's live spec. */
+export declare const useGraphCommandDispatcher: () => ((command: Command) => void);
+
+/**
+ * Subscribe to a slice of the hover state from inside a `HoverProvider`.
+ */
+export declare function useHoverState<T>(selector: (state: HoverStoreState) => T): T;
+
+/**
+ * Tracks the on-screen rect of a panel-filling element so a fixed-position overlay (the push path's drag
+ * surface) can sit exactly over the chart in pixel space. Returns a callback `ref` to attach to a
+ * panel-sized element and the measured `rect` (`null` until first measured).
+ *
+ * The element's own size changes go through the shared {@link useResizeObserver} lifecycle; this hook adds
+ * the screen-position concerns the observer can't see — viewport scroll/resize move the element's screen
+ * position without resizing it. Every trigger is coalesced into at most one `getBoundingClientRect` per
+ * animation frame, so a burst of scroll events forces a single reflow rather than one per event. Only a
+ * changed rect updates state, so a settled overlay does not re-render every frame.
+ */
+export declare function usePanelScreenRect<T extends Element = SVGRectElement>(): {
+    ref: (node: T | null) => void;
+    rect: PanelScreenRect | null;
+};
+
+/** Returns the {@link TextMeasurer} from context; throws outside a `<TextMeasurerProvider>`. */
+export declare const useTextMeasurer: () => TextMeasurer;
+
+/** CSS custom-property references for every theme token; read at paint sites as `vars.tooltipBackground`, etc. */
+export declare const vars: {
+    white: `var(--${string})`;
+    black: `var(--${string})`;
+    transparent: `var(--${string})`;
+    grey100: `var(--${string})`;
+    grey95: `var(--${string})`;
+    grey90: `var(--${string})`;
+    grey85: `var(--${string})`;
+    grey80: `var(--${string})`;
+    grey75: `var(--${string})`;
+    grey70: `var(--${string})`;
+    grey60: `var(--${string})`;
+    grey50: `var(--${string})`;
+    grey0: `var(--${string})`;
+    greyGradient80: `var(--${string})`;
+    green60: `var(--${string})`;
+    green50: `var(--${string})`;
+    red60: `var(--${string})`;
+    red50: `var(--${string})`;
+    amber70: `var(--${string})`;
+    amber50: `var(--${string})`;
+    amber40: `var(--${string})`;
+    amber30: `var(--${string})`;
+    blue80: `var(--${string})`;
+    blue60: `var(--${string})`;
+    purple50: `var(--${string})`;
+    purple30: `var(--${string})`;
+    brand: `var(--${string})`;
+    success: `var(--${string})`;
+    warning: `var(--${string})`;
+    alert: `var(--${string})`;
+    textPrimary: `var(--${string})`;
+    textSecondary: `var(--${string})`;
+    textDisabled: `var(--${string})`;
+    iconPrimary: `var(--${string})`;
+    iconSecondary: `var(--${string})`;
+    iconStickerBackground: `var(--${string})`;
+    border100: `var(--${string})`;
+    border50: `var(--${string})`;
+    border10: `var(--${string})`;
+    sunkenBackground: `var(--${string})`;
+    defaultBackground: `var(--${string})`;
+    raisedBackground: `var(--${string})`;
+    overlayBackground: `var(--${string})`;
+    overlayBorderGradient: `var(--${string})`;
+    graphBackground: `var(--${string})`;
+    gridLineColor: `var(--${string})`;
+    originLineColor: `var(--${string})`;
+    targetLineColor: `var(--${string})`;
+    targetLineMarkerColor: `var(--${string})`;
+    targetLineLabelTextColor: `var(--${string})`;
+    legendBackground: `var(--${string})`;
+    legendBorderColor: `var(--${string})`;
+    legendFocusOutlineColor: `var(--${string})`;
+    legendTextColor: `var(--${string})`;
+    dimmedSeriesLabelTextColor: `var(--${string})`;
+    dimmedSeriesLabelLineColor: `var(--${string})`;
+    trendNegativeColor: `var(--${string})`;
+    trendPositiveColor: `var(--${string})`;
+    trendNeutralColor: `var(--${string})`;
+    defaultAnnotationArrowStroke: `var(--${string})`;
+    defaultAnnotationShapeStroke: `var(--${string})`;
+    defaultAnnotationShapeFill: `var(--${string})`;
+    arrowAnnotationStickerOutlineColor: `var(--${string})`;
+    arrowAnnotationStickerOutlineColorInverse: `var(--${string})`;
+    annotationFrameBorderColor: `var(--${string})`;
+    annotationMenuTriggerIconColor: `var(--${string})`;
+    heatmapEmptyTileBackground: `var(--${string})`;
+    dataLabelOutsideBackground: `var(--${string})`;
+    dataLabelTextColor: `var(--${string})`;
+    dataLabelInsideTextColor: `var(--${string})`;
+    stackTotalTextColor: `var(--${string})`;
+    stackTotalBackground: `var(--${string})`;
+    stackTotalStroke: `var(--${string})`;
+    graphPadding: `var(--${string})`;
+    gridLineWidth: `var(--${string})`;
+    gridLineDash: `var(--${string})`;
+    gridLineDotted: `var(--${string})`;
+    tooltipBorderRadius: `var(--${string})`;
+    tooltipBorderWidth: `var(--${string})`;
+    tooltipPaddingBlock: `var(--${string})`;
+    tooltipPaddingInline: `var(--${string})`;
+    tooltipRowGap: `var(--${string})`;
+    tooltipShadow: `var(--${string})`;
+    tickLabelOffset: `var(--${string})`;
+    legendItemGap: `var(--${string})`;
+    legendSwatchGap: `var(--${string})`;
+    legendSwatchWidth: `var(--${string})`;
+    legendSwatchHeight: `var(--${string})`;
+    legendPillPaddingInline: `var(--${string})`;
+    legendPillPaddingBlock: `var(--${string})`;
+    legendPillBorderWidth: `var(--${string})`;
+    headlineRowGap: `var(--${string})`;
+    headlineItemGap: `var(--${string})`;
+    canvasDefault: `var(--${string})`;
+    canvasBlue: `var(--${string})`;
+    canvasCyan: `var(--${string})`;
+    canvasGreen: `var(--${string})`;
+    canvasYellow: `var(--${string})`;
+    canvasOrange: `var(--${string})`;
+    canvasRed: `var(--${string})`;
+    canvasPink: `var(--${string})`;
+    canvasPurple: `var(--${string})`;
+    canvasGray: `var(--${string})`;
+    canvasInverse: `var(--${string})`;
+    elevationXs: `var(--${string})`;
+    elevationSm: `var(--${string})`;
+    elevationMd: `var(--${string})`;
+    elevationLg: `var(--${string})`;
+    radiiXs: `var(--${string})`;
+    radiiSm: `var(--${string})`;
+    radiiMd: `var(--${string})`;
+    radiiLg: `var(--${string})`;
+    spaceXxs: `var(--${string})`;
+    spaceXs: `var(--${string})`;
+    spaceSm: `var(--${string})`;
+    spaceMd: `var(--${string})`;
+    spaceLg: `var(--${string})`;
+    spaceXl: `var(--${string})`;
+    zIndexToolbar: `var(--${string})`;
+    zIndexToolbarTooltip: `var(--${string})`;
+    zIndexToolbarPopover: `var(--${string})`;
+    toolbarBackgroundColor: `var(--${string})`;
+    toolbarButtonBackgroundColor: `var(--${string})`;
+    toolbarButtonBackgroundColorHovered: `var(--${string})`;
+    toolbarButtonBackgroundColorSelected: `var(--${string})`;
+    toolbarSeparatorColor: `var(--${string})`;
+    tooltipBackground: `var(--${string})`;
+    tooltipBorderColor: `var(--${string})`;
+    tooltipHeadingTextColor: `var(--${string})`;
+    tooltipLabelTextColor: `var(--${string})`;
+    tooltipValueTextColor: `var(--${string})`;
+    tooltipPrimaryRowColor: `var(--${string})`;
+    hoverGuideLineColor: `var(--${string})`;
+    hoverGuideFillColor: `var(--${string})`;
+    hoveredBarBorderColor: `var(--${string})`;
+    hoveredPointRingColor: `var(--${string})`;
+    pointStrokeColor: `var(--${string})`;
+    stackedBarHoverBorderColor: `var(--${string})`;
+    fontFamilyDefault: `var(--${string})`;
+    fontFamilyHeading: `var(--${string})`;
+    fontWeightRegular: `var(--${string})`;
+    fontWeightMedium: `var(--${string})`;
+    fontWeightSemibold: `var(--${string})`;
+    fontWeightBold: `var(--${string})`;
+    fontWeightExtraBold: `var(--${string})`;
+    fontWeightBlack: `var(--${string})`;
+    textScale: `var(--${string})`;
+    fontSizeXxs: `var(--${string})`;
+    fontSizeXs: `var(--${string})`;
+    fontSizeSm: `var(--${string})`;
+    fontSizeMd: `var(--${string})`;
+    fontSizeLg: `var(--${string})`;
+    fontSizeXl: `var(--${string})`;
+    fontLineHeightXxs: `var(--${string})`;
+    fontLineHeightXs: `var(--${string})`;
+    fontLineHeightSm: `var(--${string})`;
+    fontLineHeightMd: `var(--${string})`;
+    fontLineHeightLg: `var(--${string})`;
+    fontLineHeightXl: `var(--${string})`;
+    fontSizeEditorBody: `var(--${string})`;
+    fontSizeHeadingSm: `var(--${string})`;
+    fontSizeHeadingMd: `var(--${string})`;
+    fontSizeHeadingLg: `var(--${string})`;
+    fontLineHeightEditorBody: `var(--${string})`;
+    fontLineHeightHeadingSm: `var(--${string})`;
+    fontLineHeightHeadingMd: `var(--${string})`;
+    fontLineHeightHeadingLg: `var(--${string})`;
+    fontTickLabel: `var(--${string})`;
+    fontAxisLabel: `var(--${string})`;
+    fontDataLabel: `var(--${string})`;
+    fontStackTotal: `var(--${string})`;
+    fontLegendLabel: `var(--${string})`;
+    fontSeriesLabel: `var(--${string})`;
+    fontTooltipLabel: `var(--${string})`;
+    fontTooltipHeading: `var(--${string})`;
+    fontTooltipFooter: `var(--${string})`;
+    fontJumboTooltipLabel: `var(--${string})`;
+    fontJumboTooltip: `var(--${string})`;
+    fontMiniTooltipLabel: `var(--${string})`;
+    fontMiniTooltipFooter: `var(--${string})`;
+    fontTooltipCaption: `var(--${string})`;
+    fontTooltipCaptionSmall: `var(--${string})`;
+    fontTrendTag: `var(--${string})`;
+    fontTrendTagSmall: `var(--${string})`;
+    fontGoalLineLabel: `var(--${string})`;
+    fontPieLabel: `var(--${string})`;
+    fontPieChartTotal: `var(--${string})`;
+    fontDifferenceArrowSmall: `var(--${string})`;
+    fontDifferenceArrowMedium: `var(--${string})`;
+    fontDifferenceArrowLarge: `var(--${string})`;
+    fontButton: `var(--${string})`;
+    fontInput: `var(--${string})`;
+    fontInputLabel: `var(--${string})`;
+    fontSelectLabel: `var(--${string})`;
+    fontSelectDescription: `var(--${string})`;
+    fontColorSelectLabel: `var(--${string})`;
+    fontMenuTitle: `var(--${string})`;
+    fontMenuGroupTitle: `var(--${string})`;
+    fontMenuItemLabel: `var(--${string})`;
+    fontMenuItemLabelSecondary: `var(--${string})`;
+    fontUITooltip: `var(--${string})`;
+    fontUITooltipSecondary: `var(--${string})`;
+    fontErrorBoundaryTitle: `var(--${string})`;
+    fontErrorBoundaryMessage: `var(--${string})`;
+    fontTableCell: `var(--${string})`;
+    fontTableHeaderCell: `var(--${string})`;
+    fontSourceLabel: `var(--${string})`;
+    fontSourceLink: `var(--${string})`;
+    fontTextEditorH1: `var(--${string})`;
+    fontTextEditorH2: `var(--${string})`;
+    fontTextEditorH3: `var(--${string})`;
+    fontTextEditorH6: `var(--${string})`;
+    fontTextEditorBody: `var(--${string})`;
+    fontTextEditorLink: `var(--${string})`;
+    fontHighlightModeTitle: `var(--${string})`;
+    fontHighlightModeSubtitle: `var(--${string})`;
+};
+
+export { VizDiagnostic }
+
+export { }