@graphysdk/react-renderer 0.0.1-alpha.6 → 0.0.1-experimental.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,70 +1,41 @@
1
1
  import { AppearanceConfig } from '@graphysdk/viz-engine';
2
- import { CalloutHitRegion } from '@graphysdk/viz-engine';
3
- import { CalloutPlacement } from '@graphysdk/viz-engine';
4
- import { CartesianCoordSystem } from '@graphysdk/viz-engine';
5
2
  import { Command } from '@graphysdk/viz-engine';
6
- import { CompiledLayer } from '@graphysdk/viz-engine';
7
- import { CompiledLayerFor } from '@graphysdk/viz-engine';
8
3
  import { CompiledPanel } from '@graphysdk/viz-engine';
9
4
  import { CompiledSpec } from '@graphysdk/viz-engine';
10
5
  import { CompilerInput } from '@graphysdk/viz-engine';
11
- import { Component } from 'react';
12
6
  import { ComponentType } from 'react';
13
- import { CoordSystem } from '@graphysdk/viz-engine';
14
- import { CreateGraphyBuilderOptions } from '@graphysdk/viz-engine';
15
7
  import { CSSProperties } from 'react';
16
8
  import { CustomPalettesInput } from '@graphysdk/viz-engine';
17
9
  import { Data } from '@graphysdk/viz-engine';
18
- import { ErrorInfo } from 'react';
19
10
  import { FontSpec } from '@graphysdk/viz-engine';
20
11
  import { FormattedAxis } from '@graphysdk/viz-engine';
21
12
  import { FormattedHeadline } from '@graphysdk/viz-engine';
22
13
  import { FormattedLegend } from '@graphysdk/viz-engine';
23
- import { Geom } from '@graphysdk/viz-engine';
24
- import { GeomName } from '@graphysdk/viz-engine';
25
14
  import { GraphLayout } from '@graphysdk/viz-engine';
26
15
  import { GraphTheme } from '@graphysdk/viz-engine';
27
- import { GraphyBuilder } from '@graphysdk/viz-engine';
28
- import { HeadlineMeasurer } from '@graphysdk/viz-engine';
29
- import { HoverHit } from '@graphysdk/viz-engine';
30
16
  import { HoverState } from '@graphysdk/viz-engine';
31
17
  import { JSX } from 'react/jsx-runtime';
32
18
  import { LayoutEdge } from '@graphysdk/viz-engine';
33
19
  import { Locale } from '@graphysdk/viz-engine';
34
20
  import { MeasuredText } from '@graphysdk/viz-engine';
35
- import { Observation } from '@graphysdk/viz-engine';
36
- import { Plugin as Plugin_2 } from '@graphysdk/viz-engine';
37
- import { PolarCoordSystem } from '@graphysdk/viz-engine';
38
- import { ReactElement } from 'react';
21
+ import { NamedExoticComponent } from 'react';
39
22
  import { ReactNode } from 'react';
40
23
  import { Rect } from '@graphysdk/viz-engine';
41
- import { RenderHitTester } from '@graphysdk/viz-engine';
42
24
  import { ResolvedHeadlineSize } from '@graphysdk/viz-engine';
43
25
  import { SourceContent } from '@graphysdk/viz-engine';
44
- import { SVGProps } from 'react';
45
26
  import { TextContent } from '@graphysdk/viz-engine';
46
27
  import { TextMeasurer } from '@graphysdk/viz-engine';
47
28
  import { TooltipContent } from '@graphysdk/viz-engine';
48
- import { VizDiagnostic } from '@graphysdk/viz-engine';
49
29
 
50
30
  /**
51
- * Props for the AxisLabel slot — the axis title of every axis (e.g. "Revenue"), overridable via
52
- * `slots.AxisLabel`. `labelRects` are SVG-local, keyed by edge. The tick band is a separate slot — see
53
- * `AxisTicks`.
31
+ * Props for the Axes slot — covers both tick marks and axis labels. Override via `slots.Axes`
32
+ * on `GraphRenderer`. `tickRects` and `labelRects` are SVG-local; `formattedAxes` is the
33
+ * render-ready viz-engine runtime shape.
54
34
  */
55
- export declare interface AxisLabelSlotProps {
56
- formattedAxes: FormattedAxis[];
57
- labelRects: Partial<Record<LayoutEdge, Rect>>;
58
- }
59
-
60
- /**
61
- * Props for the AxisTicks slot — the tick lines and tick labels of every axis, overridable via
62
- * `slots.AxisTicks`. `tickRects` are SVG-local, keyed by edge. The axis title is a separate slot — see
63
- * `AxisLabel`.
64
- */
65
- export declare interface AxisTicksSlotProps {
35
+ export declare interface AxesSlotProps {
66
36
  formattedAxes: FormattedAxis[];
67
37
  tickRects: Partial<Record<LayoutEdge, Rect>>;
38
+ labelRects: Partial<Record<LayoutEdge, Rect>>;
68
39
  }
69
40
 
70
41
  /**
@@ -121,67 +92,26 @@ export declare class CanvasTextMeasurer implements TextMeasurer {
121
92
  private getEmojiCorrection;
122
93
  }
123
94
 
124
- /**
125
- * The compiled layer a renderer's handlers receive. A built-in renderer keyed to a `GeomName` gets
126
- * its param-narrowed `CompiledLayerFor<G>`; a custom renderer (`G = string`) is downstream of
127
- * serialisation, never sees the plugins array, and reads the base {@link CompiledLayer} dynamically.
128
- */
129
- declare type CompiledLayerOf<G extends GeomName | string> = G extends GeomName ? CompiledLayerFor<G> : CompiledLayer;
130
-
131
- declare type CoordKind = CoordSystem['type'];
132
-
133
- /** Maps a coord-kind discriminator to the corresponding `CoordSystem` member. */
134
- declare type CoordSystemFor<C extends CoordKind> = C extends 'cartesian' ? CartesianCoordSystem : C extends 'polar' ? PolarCoordSystem : never;
135
-
136
- /**
137
- * Ergonomic entry point for a React app: pass `plugins` once and get back a {@link GraphyKit} — the
138
- * typed builder plus a `GraphProvider` that already carries them. Pure sugar over the primitives
139
- * (`createGraphyBuilder`, `<GraphProvider plugins>`); use those directly for headless or advanced
140
- * wiring. The `const` type parameter captures the `plugins` tuple literally, so `kit.geom.<customName>`
141
- * is typed.
142
- */
143
- export declare function createGraphyKit<const P extends readonly Plugin_2[] = []>(options?: CreateGraphyBuilderOptions<P>): GraphyKit<P>;
144
-
145
- /** vanilla-extract class that binds the dark token values; set it on any ancestor to flip to dark. */
146
95
  export declare const darkTheme: string;
147
96
 
148
- /** Default paint for the footer region caption and source line. */
97
+ export declare const DefaultAxes: ({ formattedAxes, tickRects, labelRects }: AxesSlotProps) => JSX.Element;
98
+
149
99
  export declare const DefaultFooter: ({ ref, footerRect, mode, caption, isCaptionVisible, source, isSourceVisible, }: FooterSlotProps) => JSX.Element | null;
150
100
 
151
- /** Default paint for the grid region — panel border and per-tick gridlines, drawn inside the panel rect. */
152
- export declare const DefaultGrid: ({ axes, panel, panelFrameRect, panelRect }: GridSlotProps) => JSX.Element;
101
+ export declare const DefaultGrid: ({ axes, panel, panelRect }: GridSlotProps) => JSX.Element;
153
102
 
154
- /** Default paint for the header region — title and subtitle. */
155
103
  export declare const DefaultHeader: ({ ref, headerRect, mode, title, isTitleVisible, subtitle, isSubtitleVisible, }: HeaderSlotProps) => JSX.Element | null;
156
104
 
157
- /**
158
- * Default tooltip body. Paints the box, header, and rows from the formatted {@link content}, and
159
- * resolves each row's swatch shape off its geom's render contract for the active coord system.
160
- * Positioning lives in the {@link Tooltip} wrapper, never here.
161
- */
162
- export declare const DefaultTooltip: ({ content }: TooltipSlotProps) => JSX.Element;
105
+ export declare const DefaultHeadline: ({ headline, rect, resolvedSize, visibleItemCount }: HeadlineSlotProps) => JSX.Element;
106
+
107
+ export declare const DefaultLegend: NamedExoticComponent<LegendSlotProps>;
163
108
 
164
109
  /**
165
- * Dual-target renderer binding, keyed on whether the first argument is a compile definition or a built-in
166
- * geom name:
167
- *
168
- * - **Whole new geom** — `defineGeomRenderer(definition, contract)` pairs the render contract with its
169
- * compile definition, producing a {@link GeomRendererDefinition}. Registering the result registers both
170
- * sides: the compile definition is reachable at `.definition` and the geom name is read from it, so the
171
- * two halves cannot drift.
172
- * - **Render-only override** — `defineGeomRenderer('bar', contract)` rebinds only the paint half of an
173
- * existing built-in, producing a {@link ResolvedGeomRenderer} that carries no `.definition`. The built-in
174
- * compile half keeps running (nothing re-seeds the compile registry); only the render registry changes.
175
- * The name is constrained to {@link GeomName}, so a by-name override of an unknown built-in is a
176
- * compile-time error. To restyle a *custom* geom, rebind its definition (which you hold) via the first form.
110
+ * Presentational tooltip body. Pure function of props paints the box, header, and rows.
111
+ * Positioning and data wiring live in the {@link Tooltip} wrapper, never here.
177
112
  */
178
- export declare function defineGeomRenderer<Definition extends Geom<unknown>>(definition: Definition, contract: GeomRenderContract): GeomRendererDefinition & {
179
- readonly definition: Definition;
180
- };
181
-
182
- export declare function defineGeomRenderer<G extends GeomName>(geom: G, contract: GeomRenderContract): ResolvedGeomRenderer;
113
+ export declare const DefaultTooltip: ({ content, isVisible }: TooltipSlotProps) => JSX.Element | null;
183
114
 
184
- /** Dev-only compile-cache inspector; render inside a `<GraphProvider>`. See {@link DevToolsPanelProps}. */
185
115
  export declare const DevToolsPanel: ({ width, style, className }?: DevToolsPanelProps) => JSX.Element;
186
116
 
187
117
  /**
@@ -198,17 +128,12 @@ export declare interface DevToolsPanelProps {
198
128
  className?: string;
199
129
  }
200
130
 
201
- export declare type FontListInput = Array<{
202
- id: string;
203
- fontFamily: string;
204
- }>;
205
-
206
131
  /**
207
- * Props for the Footer slot, overridable via `slots.Footer` on `GraphRenderer`. Caption editing in
208
- * `editable` mode is internal to this default; an override replacing the region opts out of it.
132
+ * Props for the Footer slot. Override via `slots.Footer` on `GraphRenderer`. The content
133
+ * (caption/source + visibility) arrives as props; in-place caption editing in `editable` mode is
134
+ * internal to this default — an override replacing the region opts out of that editing.
209
135
  */
210
136
  export declare interface FooterSlotProps {
211
- /** Forward this to the region's outer element — the layout measures the rendered DOM to reserve its space. */
212
137
  ref?: React.Ref<HTMLDivElement>;
213
138
  footerRect: Rect;
214
139
  mode?: GraphMode;
@@ -218,184 +143,6 @@ export declare interface FooterSlotProps {
218
143
  isSourceVisible: boolean;
219
144
  }
220
145
 
221
- export declare type GeomHoverCompanionsRendererInput = HoverCompanionsRenderInput;
222
-
223
- /** Page-relative cursor coordinates the push-path tooltip anchors to. */
224
- export declare interface GeomHoverCursor {
225
- clientX: number;
226
- clientY: number;
227
- }
228
-
229
- /**
230
- * Pushes a hovered observation key into the central hover, or clears this layer's hover with `null`.
231
- * A non-null key requires a `cursor` — the overlay intercepts the pointer events the cursor-follow
232
- * tooltip would otherwise read, so the anchor can only come from the geom's own handler. Consumed by
233
- * {@link InteractiveOverlayApi.pushHover} and returned by `useGeomHover`.
234
- */
235
- export declare interface GeomHoverPush {
236
- (key: string, cursor: GeomHoverCursor): void;
237
- (key: null): void;
238
- }
239
-
240
- export declare type GeomHoverRendererInput = HoverRenderInput;
241
-
242
- export declare type GeomOverlayAnchorRendererInput = OverlayAnchorInput;
243
-
244
- /** An overlay-hosted geom's paint function — receives the guaranteed overlay wiring on `input.overlay`. */
245
- export declare type GeomOverlayRenderFn<G extends GeomName | string = string, C extends CoordKind = CoordKind> = (input: GeomOverlayRenderInput<G, C>) => ReactNode;
246
-
247
- /**
248
- * The input an overlay-hosted render (`{ fn, options: { overlay: true } }`) receives: the standard render
249
- * input plus a guaranteed {@link InteractiveOverlayApi}. The renderer always supplies it, so the geom's
250
- * render uses `overlay` unconditionally — it never decides where it is mounted, only what it paints.
251
- */
252
- export declare interface GeomOverlayRenderInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> extends GeomRenderInput<G, C> {
253
- overlay: InteractiveOverlayApi;
254
- }
255
-
256
- /**
257
- * A geom's `render`: either a plain panel-SVG paint function, or an overlay-hosted one paired with
258
- * `options` — so a geom that must paint into the interactive overlay declares
259
- * `{ fn, options: { overlay: true } }` without a second render entry point. The
260
- * renderer decides where each is mounted; the geom only decides what it paints. `render` is the single
261
- * paint declaration either way.
262
- */
263
- export declare type GeomRender<G extends GeomName | string = string, C extends CoordKind = CoordKind> = GeomRenderFn<G, C> | {
264
- fn: GeomOverlayRenderFn<G, C>;
265
- options: GeomRenderOptions;
266
- };
267
-
268
- /**
269
- * The render side of a geom: everything a single `(geom, coord)` composition needs to render and
270
- * respond to hover. Generic over the geom name and coord kind, so a built-in renderer parameterised
271
- * as `GeomRenderContract<'bar', 'cartesian'>` receives param-narrowed inputs (`CompiledLayerFor<'bar'>`,
272
- * `CartesianCoordSystem`), while the default `<string, CoordKind>` instantiation is the base/custom
273
- * contract a plugin author writes against. The geom's name, highlight strategy, and `params` type are
274
- * NOT restated here — they are read off the compile definition this contract is bound to (see
275
- * {@link defineGeomRenderer}). This is the single declaration of a geom's render contract; the built-in
276
- * narrow form below and the base/custom form (`geom-renderer.ts`) are both instantiations of it.
277
- */
278
- export declare interface GeomRenderContract<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
279
- /** The coord system this contract paints under. A geom may bind one contract per coord. */
280
- coord: C;
281
- swatchShape?: SwatchShape;
282
- /**
283
- * The hover-guide mode this `(geom, coord)` draws when it is the hovered layer (a
284
- * {@link HoverGuideMode}). Omit it — or contribute `null` — to draw no guide (the geom's mark is its
285
- * own highlight). A declared mode the composition can't realise draws nothing: a polar bar's `'band'`
286
- * fills a wedge, but a pie/donut (no category band) resolves to an empty one. `resolveHoverGuideMode`
287
- * reads the hovered layer's mode to pick the one guide the chart draws.
288
- */
289
- guideMode?: HoverGuideMode | null;
290
- /**
291
- * The geom's paint. A plain function paints into the panel SVG; the `{ fn, options: { overlay: true } }`
292
- * form paints into a screen-aligned portal above the central capture layer for a live/drag-driven geom
293
- * that owns its pointer events (force-directed), with the wiring on `input.overlay`.
294
- */
295
- render: GeomRender<G, C>;
296
- renderHover: (input: HoverRenderInput<G, C>) => ReactNode;
297
- renderHoverCompanions: (input: HoverCompanionsRenderInput<G>) => ReactNode;
298
- /**
299
- * Render-side spatial query for a `'render-hit-test'` layer whose geometry is precomputed into the
300
- * compiled spec (sankey ribbons, treemap tiles, voronoi cells). A
301
- * **factory**: given the render input it returns the per-cursor {@link RenderHitTester};
302
- * the renderer memoizes the factory on `layer.data`, so the read runs once per data change and the
303
- * per-move query allocates nothing. The author writes no hook; the renderer registers the tester on its
304
- * behalf. The cursor arrives in panel-local `[0,1]` with a top-left origin — the frame the geom paints
305
- * in. Returns the declared identity key of the observation under the cursor, or `null` for a miss.
306
- */
307
- hitTest?: (input: GeomRenderInput<G, C>) => RenderHitTester;
308
- /** Panel-space anchor for a matched observation; required when the def highlights via overlay-anchor. */
309
- getOverlayAnchor?: (input: OverlayAnchorInput<G, C>) => OverlayAnchor | null;
310
- }
311
-
312
- /**
313
- * A render contract paired with the compile definition it paints for. The engine recovers the definition
314
- * structurally from `.definition` (React-free), and the renderer reads the geom name from the same
315
- * definition — so the compile and render sides are one declaration consumed twice, never two matched by
316
- * a string.
317
- */
318
- export declare interface GeomRendererDefinition extends ResolvedGeomRenderer {
319
- /** The compile definition this renderer paints for. Held by reference — the single source of identity. */
320
- readonly definition: Geom<unknown>;
321
- }
322
-
323
- /** A custom geom render handler's input — the base instantiation of the typed built-in inputs. */
324
- export declare type GeomRendererInput = GeomRenderInput;
325
-
326
- /** A geom's panel-SVG paint function — the plain `render` form. */
327
- export declare type GeomRenderFn<G extends GeomName | string = string, C extends CoordKind = CoordKind> = (input: GeomRenderInput<G, C>) => ReactNode;
328
-
329
- declare interface GeomRenderInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
330
- layer: CompiledLayerOf<G>;
331
- coordSystem: CoordSystemFor<C>;
332
- isAnimated: boolean;
333
- formattingLocale: Locale;
334
- }
335
-
336
- /**
337
- * Hosting options for an overlay render. The presence of the object form already declares overlay hosting;
338
- * `overlay: true` makes the call site read explicitly (and leaves room for further hosting options later).
339
- */
340
- export declare interface GeomRenderOptions {
341
- /**
342
- * Mount this render's output in a screen-aligned portal above the central capture layer, rather than in
343
- * the panel SVG — for a live or drag-driven geom that must own its pointer events (force-directed). The
344
- * renderer then supplies {@link GeomOverlayRenderInput.overlay}.
345
- */
346
- overlay: true;
347
- }
348
-
349
- /**
350
- * The single place a chart surfaces an error in place — instead of unwinding the page to a blank
351
- * screen. Two failure modes converge here: a non-throwing **compile failure** the host passes via
352
- * {@link GraphErrorBoundaryProps.forcedErrors}, and a **render-throw** from a renderer component that
353
- * this boundary catches. Both render the same {@link GraphErrorPanel}, so there is exactly one panel
354
- * call site rather than one per failure mode.
355
- */
356
- export declare class GraphErrorBoundary extends Component<GraphErrorBoundaryProps, GraphErrorBoundaryState> {
357
- state: GraphErrorBoundaryState;
358
- static getDerivedStateFromError(error: Error): GraphErrorBoundaryState;
359
- componentDidCatch(error: Error, info: ErrorInfo): void;
360
- componentDidUpdate(prevProps: GraphErrorBoundaryProps): void;
361
- render(): ReactNode;
362
- }
363
-
364
- declare interface GraphErrorBoundaryProps {
365
- children: ReactNode;
366
- /**
367
- * Compile failures to surface in place, rendered through the same panel as a caught render-throw
368
- * so a chart has one predictable place for its errors.
369
- */
370
- forcedErrors?: VizDiagnostic[] | null;
371
- /**
372
- * When any key changes after a caught render-throw, the boundary clears it and
373
- * retries — so a fixed spec recovers. */
374
- resetKeys?: readonly unknown[];
375
- /**
376
- * Called with a single-element list when a child throws during render
377
- * (not for `forcedErrors`, which the host already reported).
378
- */
379
- onError?: (errors: VizDiagnostic[]) => void;
380
- }
381
-
382
- declare interface GraphErrorBoundaryState {
383
- caughtDiagnostic: VizDiagnostic | null;
384
- }
385
-
386
- /**
387
- * Shared in-place fallback for a chart that failed to compile or render. Shows each diagnostic's
388
- * `code`, `message`, and `suggestion` — richer than a bare error message — so an end user can file
389
- * a useful report and a developer can see what to fix. Theme-independent: it can render before the
390
- * theme provider mounts.
391
- */
392
- export declare const GraphErrorPanel: ({ errors }: GraphErrorPanelProps) => JSX.Element;
393
-
394
- declare interface GraphErrorPanelProps {
395
- /** The compile failure(s). The first headlines; any remaining are listed beneath it. */
396
- errors: VizDiagnostic[];
397
- }
398
-
399
146
  /**
400
147
  * Chart display and interaction mode.
401
148
  * - 'readonly': Normal chart display with full interactivity but no editing (default)
@@ -404,33 +151,19 @@ declare interface GraphErrorPanelProps {
404
151
  export declare type GraphMode = 'readonly' | 'editable';
405
152
 
406
153
  /**
407
- * Owns the compiled spec for a graph and exposes it via {@link useCompiledSelector}, plus a
408
- * `dispatch` for applying {@link Command}s. Both failure modes — a non-throwing compile failure and a
409
- * render-throw from a renderer component — converge on a single {@link GraphErrorBoundary} that shows
410
- * the error in place, so a broken chart never blanks the page.
154
+ * Owns the compiled spec for a graph and exposes it via {@link useCompiledSpec}, plus a
155
+ * `dispatch` for applying {@link Command}s.
411
156
  */
412
- export declare const GraphProvider: ({ data, input, plugins, formattingLocale, onChange, onError, onWarnings, customPalettes, theme, fontList, themeOverrides: themeOverridesInput, children, }: GraphProviderProps) => JSX.Element;
157
+ export declare const GraphProvider: ({ data, input, formattingLocale, onChange, customPalettes, theme, themeOverrides: themeOverridesInput, children, }: GraphProviderProps) => JSX.Element;
413
158
 
414
- export declare interface GraphProviderProps {
159
+ declare interface GraphProviderProps {
415
160
  data: Data;
416
161
  input: CompilerInput;
417
- /**
418
- * Custom geoms, stats, and transforms (and their render halves) registered for this graph. Seeds
419
- * the compiler and builds the per-provider render resolver from one array. Construction-time config,
420
- * frozen at mount — change the registered set by remounting (React `key`); `data`/`input`/`theme`
421
- * stay reactive.
422
- */
423
- plugins?: readonly Plugin_2[];
424
162
  formattingLocale?: Locale;
425
163
  onChange?: (next: CompilerInput) => void;
426
- /** Fires with the compile failure(s) whenever a compile/recompile/dispatch produces errors. */
427
- onError?: (errors: VizDiagnostic[]) => void;
428
- /** Fires with any warnings a successful compile produced. */
429
- onWarnings?: (warnings: VizDiagnostic[]) => void;
430
164
  theme?: GraphTheme;
431
165
  themeOverrides?: ThemeOverrides;
432
166
  customPalettes?: CustomPalettesInput;
433
- fontList?: FontListInput;
434
167
  children: ReactNode;
435
168
  }
436
169
 
@@ -440,14 +173,11 @@ export declare interface GraphProviderProps {
440
173
  * no `config` prop: every consumer must wrap with `<GraphProvider>` so commands can operate
441
174
  * on the live spec.
442
175
  */
443
- export declare const GraphRenderer: ({ slots, sizing, onResize, ...rest }: GraphRendererProps) => JSX.Element;
176
+ export declare const GraphRenderer: ({ slots, ...props }: GraphRendererProps) => JSX.Element;
444
177
 
445
- /** Props for {@link GraphRenderer}: container sizing, interaction toggles and per-region slot overrides. */
446
178
  export declare interface GraphRendererProps {
447
- /** Controls how the graph responds to its container size. Defaults to filling the parent container. */
448
- sizing?: GraphSizing;
449
- /** Callback invoked when the graph's container is resized. Fires in every sizing mode. */
450
- onResize?: ResizeObserverOnResize;
179
+ width: number;
180
+ height: number;
451
181
  isAnimated?: boolean;
452
182
  showTooltips?: boolean;
453
183
  mode?: GraphMode;
@@ -455,76 +185,37 @@ export declare interface GraphRendererProps {
455
185
  slots?: GraphSlots;
456
186
  }
457
187
 
458
- /** Controls how the graph claims space in its container. */
459
- export declare type GraphSizing = {
460
- mode: 'responsive';
461
- } | {
462
- mode: 'fixed';
463
- width: number;
464
- height: number;
465
- } | {
466
- mode: 'keepAspectRatio';
467
- intrinsicWidth: number;
468
- intrinsicHeight: number;
469
- } | {
470
- mode: 'keepAspectRatio';
471
- intrinsicWidth: number;
472
- aspectRatio: number;
473
- } | {
474
- mode: 'keepAspectRatio';
475
- intrinsicHeight: number;
476
- aspectRatio: number;
477
- };
478
-
479
188
  /**
480
- * Region overrides for `GraphRenderer`. A slot replaces how one region paints; the viz-engine `Spec`
481
- * still owns whether a region exists and what data it receives, and an override gets the same
482
- * render-ready props as its default.
483
- *
484
- * Layout-safe regions (`Header`, `Footer`, `Tooltip`, `Grid`) are bare components — DOM-measured or
485
- * reserving no edge space. Layout-coupled regions (`AxisTicks`, `AxisLabel`, `Legend`, `Headline`) are
486
- * {@link SlotOverride}s that also declare their reserved size via `measure`, else paint and the
487
- * reserved band desync. The tick and title bands are separate slots so overriding one leaves the other
488
- * on its default.
189
+ * Region overrides for `GraphRenderer`. Each slot replaces how one region paints; the viz-engine
190
+ * `Spec` stays the source of truth for whether a region exists and what data it receives. An
191
+ * override has the same signature as its default and is handed render-ready props.
489
192
  */
490
193
  export declare interface GraphSlots {
491
194
  Header?: ComponentType<HeaderSlotProps>;
492
195
  Footer?: ComponentType<FooterSlotProps>;
196
+ Legend?: ComponentType<LegendSlotProps>;
197
+ Headline?: ComponentType<HeadlineSlotProps>;
493
198
  Tooltip?: ComponentType<TooltipSlotProps>;
494
199
  Grid?: ComponentType<GridSlotProps>;
495
- Legend?: SlotOverride<LegendSlotProps, (legend: FormattedLegend, ctx: SlotMeasureContext) => number>;
496
- Headline?: SlotOverride<HeadlineSlotProps, HeadlineMeasurer>;
497
- AxisTicks?: SlotOverride<AxisTicksSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
498
- AxisLabel?: SlotOverride<AxisLabelSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
200
+ Axes?: ComponentType<AxesSlotProps>;
499
201
  }
500
202
 
501
203
  /**
502
- * A plugin-bound authoring kit: the typed `geom`/`stat`/`transform`/`scale`/`coord` factories plus
503
- * `createSpec`/`pipe`, and a `GraphProvider` pre-bound to the same `plugins` so what can be written
504
- * and what can render derive from one array and cannot diverge. Generic over the `plugins` tuple so
505
- * the typed per-plugin builder methods (`geom.<name>`, …) flow through to the React entry point.
506
- */
507
- export declare interface GraphyKit<P extends readonly Plugin_2[] = readonly Plugin_2[]> extends GraphyBuilder<P> {
508
- GraphProvider: (props: Omit<GraphProviderProps, 'plugins'>) => ReactElement;
509
- }
510
-
511
- /**
512
- * Props for the Grid slot, overridable via `slots.Grid` on `GraphRenderer`. `panelRect` is in
513
- * SVG-local coordinates.
204
+ * Props for the Grid slot. Override via `slots.Grid` on `GraphRenderer`. `panelRect` is in
205
+ * SVG-local coordinates; `axes` and `panel` are render-ready viz-engine runtime shapes.
514
206
  */
515
207
  export declare interface GridSlotProps {
516
208
  axes: FormattedAxis[];
517
209
  panel: CompiledPanel;
518
- panelFrameRect: GraphLayout['panelFrame'];
519
210
  panelRect: GraphLayout['panel'];
520
211
  }
521
212
 
522
213
  /**
523
- * Props for the Header slot, overridable via `slots.Header` on `GraphRenderer`. Title editing in
524
- * `editable` mode is internal to this default; an override replacing the region opts out of it.
214
+ * Props for the Header slot. Override via `slots.Header` on `GraphRenderer`. The content
215
+ * (title/subtitle + visibility) arrives as props; in-place title editing in `editable` mode is
216
+ * internal to this default — an override replacing the region opts out of that editing.
525
217
  */
526
218
  export declare interface HeaderSlotProps {
527
- /** Forward this to the region's outer element — the layout measures the rendered DOM to reserve its space. */
528
219
  ref?: React.Ref<HTMLDivElement>;
529
220
  headerRect: Rect;
530
221
  mode?: GraphMode;
@@ -534,7 +225,10 @@ export declare interface HeaderSlotProps {
534
225
  isSubtitleVisible: boolean;
535
226
  }
536
227
 
537
- /** Props for the Headline slot, overridable via `slots.Headline` on `GraphRenderer`. */
228
+ /**
229
+ * Props for the Headline slot. Override via `slots.Headline` on `GraphRenderer`; the data is
230
+ * render-ready, formatted by the viz-engine runtime.
231
+ */
538
232
  export declare interface HeadlineSlotProps {
539
233
  headline: FormattedHeadline;
540
234
  rect: Rect;
@@ -543,27 +237,6 @@ export declare interface HeadlineSlotProps {
543
237
  visibleItemCount: number;
544
238
  }
545
239
 
546
- declare interface HoverCompanionsRenderInput<G extends GeomName | string = string> {
547
- layer: CompiledLayerOf<G>;
548
- primary: HoverHit;
549
- related: HoverHit[];
550
- }
551
-
552
- /**
553
- * The shape of positional guide the `HoverGuide` draws for a hovered observation, contributed per
554
- * `(geom, coord)` renderer via `guideMode`:
555
- *
556
- * - `'band'` — a rectangle over the hovered category's band on the main axis (bars).
557
- * - `'crosshair'` — a rule at the hovered value: a straight line under cartesian, a centre-to-rim spoke
558
- * under polar (line and area).
559
- *
560
- * A renderer that omits `guideMode` draws no guide (scatter points). A declared `'band'` still draws
561
- * nothing where the composition has no category band — a pie/donut resolves to an empty wedge. The chart
562
- * draws the guide of whichever layer the cursor resolves to, so a combo shows a band over a hovered bar
563
- * and a crosshair over a hovered line; see `resolveHoverGuideMode`.
564
- */
565
- declare type HoverGuideMode = 'crosshair' | 'band';
566
-
567
240
  /**
568
241
  * Hosts the hover store + engine for the surrounding `<GraphProvider>`. Subscribes only to the
569
242
  * `layers` and `coordSystem` slices of the compiled spec — the engine never reads anything else,
@@ -575,148 +248,28 @@ declare interface HoverProviderProps {
575
248
  children: ReactNode;
576
249
  }
577
250
 
578
- declare interface HoverRenderInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
579
- layer: CompiledLayerOf<G>;
580
- coordSystem: CoordSystemFor<C>;
581
- primary: HoverHit;
582
- group: HoverHit[];
583
- related: HoverHit[];
584
- panelRect: GraphLayout['panel'];
585
- }
586
-
587
251
  declare interface HoverSlice {
588
252
  hover: HoverState;
589
- /**
590
- * Box the tooltip anchors against while the pointer is over a pinned callout, in client
591
- * coordinates. `null` during normal cursor hover, when the tooltip follows the cursor.
592
- */
593
- tooltipAnchor: TooltipAnchor | null;
594
- /**
595
- * Mini-bubble hit rects the tracker tests before the geom hit-test. Callout renderers publish
596
- * their placed rects here so hover detection stays in the single pointer pipeline.
597
- */
598
- calloutHits: CalloutHitRegion[];
599
253
  }
600
254
 
601
255
  declare interface HoverStoreActions {
602
256
  setHoverState: (next: HoverState) => void;
603
- setTooltipAnchor: (next: TooltipAnchor | null) => void;
604
- setCalloutHits: (next: CalloutHitRegion[]) => void;
605
257
  }
606
258
 
607
- /** State of the hover store: the current {@link HoverState} plus its setter. */
608
259
  declare type HoverStoreState = HoverSlice & HoverStoreActions;
609
260
 
610
261
  /**
611
- * The overlay wiring handed to an overlay-hosted render via {@link GeomOverlayRenderInput.overlay}. The
612
- * geom writes only its simulation, marks, and drag handlers; the renderer owns the on-screen rect
613
- * measurement, the portal alignment, and the push wiring.
262
+ * Props for the Legend slot. Override via `slots.Legend` on `GraphRenderer`; the data is
263
+ * render-ready, formatted by the viz-engine runtime.
614
264
  */
615
- export declare interface InteractiveOverlayApi {
616
- /** Feeds the hovered observation's identity key into the unified hover store — the push path. */
617
- pushHover: GeomHoverPush;
618
- /** The panel's on-screen rect in client pixels, so the overlay can place its marks. */
619
- panelRect: PanelScreenRect;
620
- }
621
-
622
- /** Props for the Legend slot, overridable via `slots.Legend` on `GraphRenderer`. */
623
265
  export declare interface LegendSlotProps {
624
266
  formattedLegends: FormattedLegend[];
625
267
  rects: Partial<Record<LayoutEdge, Rect>>;
626
268
  textScale: number;
627
269
  }
628
270
 
629
- /** Scales the color's HSL lightness up by `amount` (0–1). */
630
- export declare const lightenCss: (colorString: string, amount: number) => string;
631
-
632
- /** vanilla-extract class that binds the light token values; the default theme. */
633
271
  export declare const lightTheme: string;
634
272
 
635
- /**
636
- * Anchor point in normalized [0,1] coord-space where a highlight overlay marker
637
- * should be painted for one observation. Renderer turns [0,1] into pixels.
638
- */
639
- export declare interface OverlayAnchor {
640
- x: number;
641
- y: number;
642
- }
643
-
644
- declare interface OverlayAnchorInput<G extends GeomName | string = string, C extends CoordKind = CoordKind> {
645
- layer: CompiledLayerOf<G>;
646
- coordSystem: CoordSystemFor<C>;
647
- observation: Observation;
648
- }
649
-
650
- /** The panel's on-screen rect in client coordinates — what a fixed-position overlay aligns to. */
651
- export declare interface PanelScreenRect {
652
- left: number;
653
- top: number;
654
- width: number;
655
- height: number;
656
- }
657
-
658
- export { RenderHitTester }
659
-
660
- export declare type ResizeObserverOnResize = (state: ResizeObserverState) => void;
661
-
662
- export declare interface ResizeObserverState {
663
- width: number;
664
- height: number;
665
- /** True until the first ResizeObserver measurement lands. */
666
- isDefault: boolean;
667
- }
668
-
669
- /**
670
- * A render contract with its resolved geom name attached — the shape the per-provider resolver returns
671
- * and every render site consumes. Both a built-in `GeomRenderer` and a custom {@link GeomRendererDefinition}
672
- * conform to it, so the consumers paint built-ins and customs through one type.
673
- */
674
- export declare interface ResolvedGeomRenderer extends GeomRenderContract {
675
- /** The geom name this renderer paints — the resolver dispatches on it. */
676
- geom: string;
677
- }
678
-
679
- /**
680
- * Passed as the second argument to a layout-coupled slot's `measure`, so it can size its band from
681
- * real text metrics — the same Canvas-backed measurer the built-in measurers use — rather than
682
- * constructing its own. A `measure` whose size is unrelated to text can ignore it.
683
- */
684
- export declare interface SlotMeasureContext {
685
- /** Measures a string at a given font; returns `{ width, height, ascent, descent }` in CSS pixels. */
686
- measureText: TextMeasurer['measureText'];
687
- /** Active text-scale multiplier; multiply an em size by this to get the pixel size to measure at. */
688
- textScale: number;
689
- }
690
-
691
- /**
692
- * A layout-coupled slot: the region's `render` paired with the `measure` the layout uses to reserve
693
- * its space. `measure` mirrors the matching `LayoutMeasurer` method, so paint and reserved space can't
694
- * disagree. Give it a stable reference — a `measure` whose identity changes each render takes effect on
695
- * the next paint but doesn't retrigger layout.
696
- */
697
- export declare interface SlotOverride<Props, Measure> {
698
- /** The component that paints the region. */
699
- render: ComponentType<Props>;
700
- /**
701
- * Returns the region's reserved size. Receives the region's formatted data plus a
702
- * {@link SlotMeasureContext} (`measureText`, `textScale`) for sizing from real text metrics.
703
- */
704
- measure: Measure;
705
- }
706
-
707
- /**
708
- * The vocabulary of legend/tooltip/headline marks the {@link Swatch} can paint. A geom picks the one
709
- * that best evokes its on-canvas mark via `swatchShape` on its render contract (see
710
- * {@link GeomRenderContract}); it is a render concern, so the engine never resolves it.
711
- *
712
- * - `square` — a filled rect (bars)
713
- * - `line` — a horizontal stroke (lines)
714
- * - `area` — a filled region with a stroke accent (areas)
715
- * - `circle` — a filled dot (points)
716
- * - `slice` — a pie / donut wedge (polar bars)
717
- */
718
- export declare type SwatchShape = 'square' | 'line' | 'circle' | 'area' | 'slice';
719
-
720
273
  /**
721
274
  * Creates a font-ready, cached text measurer and shares it with descendants via context.
722
275
  * Renders nothing until the measurer resolves, so consumers reading the context always
@@ -741,13 +294,10 @@ declare interface TextMeasurerProviderProps {
741
294
  measurer?: TextMeasurer;
742
295
  }
743
296
 
744
- /** The name of a single theme token. */
745
297
  export declare type ThemeKey = keyof ThemeValues;
746
298
 
747
- /** A partial set of token values layered over a base theme — the shape of the `themeOverrides` prop. */
748
299
  export declare type ThemeOverrides = Partial<ThemeValues>;
749
300
 
750
- /** Resolves the base theme plus per-graph `themeOverrides` into token values and publishes them to the subtree. */
751
301
  export declare const ThemeProvider: ({ theme, themeOverrides, appearance, children }: ThemeProviderProps) => JSX.Element;
752
302
 
753
303
  declare interface ThemeProviderProps {
@@ -757,33 +307,13 @@ declare interface ThemeProviderProps {
757
307
  children: ReactNode;
758
308
  }
759
309
 
760
- /** Every theme token mapped to its resolved CSS string value. */
761
310
  export declare type ThemeValues = Record<keyof typeof vars, string>;
762
311
 
763
- /**
764
- * Where a pinned callout asks the tooltip to anchor: the marker point in client coordinates, plus
765
- * the direction the mini sits, so the tooltip expands over the mini the way it was placed.
766
- */
767
- declare interface TooltipAnchor {
768
- x: number;
769
- y: number;
770
- placement: CalloutPlacement;
771
- }
772
-
773
312
  export declare interface TooltipSlotProps {
774
313
  /** Render-ready tooltip body, already formatted by the viz-engine runtime. */
775
314
  content: TooltipContent;
776
- }
777
-
778
- /**
779
- * A nested SVG that establishes a `[0, 1]` unit coordinate space (top-left origin) stretched to fill
780
- * the geom panel. A layout geom paints its geometry in raw unit coords so paint and hit-test never re-project against each
781
- * other. `preserveAspectRatio="none"` maps the unit square onto the (usually non-square) panel exactly.
782
- */
783
- export declare const UnitSpaceSvg: ({ children, ...rest }: UnitSpaceSvgProps) => ReactNode;
784
-
785
- declare interface UnitSpaceSvgProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'preserveAspectRatio'> {
786
- children: ReactNode;
315
+ /** Whether the tooltip is currently shown. The wrapper only mounts the slot while open. */
316
+ isVisible: boolean;
787
317
  }
788
318
 
789
319
  /**
@@ -799,29 +329,6 @@ declare interface UnitSpaceSvgProps extends Omit<SVGProps<SVGSVGElement>, 'viewB
799
329
  */
800
330
  export declare const useCompiledSelector: <Selected>(selector: (compiled: CompiledSpec) => Selected) => Selected;
801
331
 
802
- /**
803
- * Registers a layout geom's render-side hit tester so a `'render-hit-test'` layer inherits central hover
804
- * and the built-in tooltip — the path `bar` takes — with no pointer overlay of its own. The pull path.
805
- *
806
- * The cursor passed to the tester is panel-local `[0, 1]`, top-left origin — the frame the geom paints in.
807
- */
808
- export declare function useGeomHitTest(layerId: string, tester: RenderHitTester): void;
809
-
810
- /**
811
- * The push half of the render-hit-test keystone, for a geom whose geometry keeps changing after it is
812
- * drawn (a live simulation) and so owns its own pointer surface above the central capture layer. The
813
- * geom's pointer handlers call the returned setter with the hovered observation's `identityKey`; the
814
- * engine resolves it through the same `byKey` lookup the pull path uses, so the geom inherits the tooltip
815
- * and `renderHover`. Since the overlay intercepts the pointer events, the tooltip is anchored at the
816
- * supplied cursor. Pass `null` to clear. Geoms with geometry fixed once drawn use `useGeomHitTest`.
817
- *
818
- * Escape hatch: an interactive geom should instead declare an overlay-hosted `render`
819
- * (`{ fn, options: { overlay: true } }`), which the renderer portals into a screen-aligned overlay and
820
- * hands a ready `pushHover` via `input.overlay`. Reach for this hook only when that form is not enough.
821
- */
822
- export declare function useGeomHover(layerId: string): GeomHoverPush;
823
-
824
- /** Returns the dispatcher for applying {@link Command}s to the provider's live spec. */
825
332
  export declare const useGraphCommandDispatcher: () => ((command: Command) => void);
826
333
 
827
334
  /**
@@ -829,26 +336,8 @@ export declare const useGraphCommandDispatcher: () => ((command: Command) => voi
829
336
  */
830
337
  export declare function useHoverState<T>(selector: (state: HoverStoreState) => T): T;
831
338
 
832
- /**
833
- * Tracks the on-screen rect of a panel-filling element so a fixed-position overlay (the push path's drag
834
- * surface) can sit exactly over the chart in pixel space. Returns a callback `ref` to attach to a
835
- * panel-sized element and the measured `rect` (`null` until first measured).
836
- *
837
- * The element's own size changes go through the shared {@link useResizeObserver} lifecycle; this hook adds
838
- * the screen-position concerns the observer can't see — viewport scroll/resize move the element's screen
839
- * position without resizing it. Every trigger is coalesced into at most one `getBoundingClientRect` per
840
- * animation frame, so a burst of scroll events forces a single reflow rather than one per event. Only a
841
- * changed rect updates state, so a settled overlay does not re-render every frame.
842
- */
843
- export declare function usePanelScreenRect<T extends Element = SVGRectElement>(): {
844
- ref: (node: T | null) => void;
845
- rect: PanelScreenRect | null;
846
- };
847
-
848
- /** Returns the {@link TextMeasurer} from context; throws outside a `<TextMeasurerProvider>`. */
849
339
  export declare const useTextMeasurer: () => TextMeasurer;
850
340
 
851
- /** CSS custom-property references for every theme token; read at paint sites as `vars.tooltipBackground`, etc. */
852
341
  export declare const vars: {
853
342
  white: `var(--${string})`;
854
343
  black: `var(--${string})`;
@@ -918,15 +407,11 @@ export declare const vars: {
918
407
  annotationMenuTriggerIconColor: `var(--${string})`;
919
408
  heatmapEmptyTileBackground: `var(--${string})`;
920
409
  dataLabelOutsideBackground: `var(--${string})`;
921
- graphPadding: `var(--${string})`;
922
410
  gridLineWidth: `var(--${string})`;
923
411
  gridLineDash: `var(--${string})`;
924
- gridLineDotted: `var(--${string})`;
925
412
  tooltipBorderRadius: `var(--${string})`;
926
- tooltipBorderWidth: `var(--${string})`;
927
413
  tooltipPaddingBlock: `var(--${string})`;
928
414
  tooltipPaddingInline: `var(--${string})`;
929
- tooltipRowGap: `var(--${string})`;
930
415
  tooltipShadow: `var(--${string})`;
931
416
  tickLabelOffset: `var(--${string})`;
932
417
  legendItemGap: `var(--${string})`;
@@ -1063,6 +548,4 @@ export declare const vars: {
1063
548
  fontHighlightModeSubtitle: `var(--${string})`;
1064
549
  };
1065
550
 
1066
- export { VizDiagnostic }
1067
-
1068
551
  export { }