@invana/canvas-react 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,2291 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, ComponentType, ReactElement } from 'react';
+import { CanvasOptions, Canvas as Canvas$1, BackgroundLayerOptions, DragPanBehaviourOptions, WheelZoomBehaviourOptions, PinchZoomBehaviourOptions, KeyboardCameraInputBehaviourOptions, Rect, CanvasGlobalEvents } from '@invana/canvas';
+import { GraphHistory, GraphClipboard, Vec2, GraphLayerOptions, GraphData, MiniMapLayerOptions, DragNodeBehaviourOptions, ContextMenuBehaviourOptions, CreateNodeBehaviourOptions, DrawEdgeBehaviourOptions, EraseBehaviourOptions, HoverActivateBehaviourOptions, ClickSelectBehaviourOptions, ClickInspectBehaviourOptions, BrushSelectBehaviourOptions, LassoSelectBehaviourOptions, CollapseExpandBehaviourOptions, NodeResizeBehaviourOptions, LabelCollisionBehaviourOptions, LabelResolutionLODBehaviourOptions, NodeSizeLODBehaviourOptions, EdgeSizeLODBehaviourOptions, ParallelEdgeBehaviourOptions, DegreeSizeBehaviourOptions, ResponsiveThemeBehaviourOptions, InspectTarget, ThemeKind, ThemeMode, EdgePathType, GraphNode, GraphEdge, ErasedElement } from '@invana/graph';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { D3ForceLayout as D3ForceLayout$1 } from '@invana/graph-layout-d3-force';
+import { MenuItem } from '@invana/ui';
+
+interface CanvasProps extends Omit<CanvasOptions, 'container'> {
+    /**
+     * JSX children — layer / behaviour / layout wrappers. They aren't mounted
+     * until the engine has finished initialising, so child effects can assume
+     * `useCanvas()` returns a live, initialised engine.
+     */
+    children?: ReactNode;
+    /** Inline style on the host `<div>`. Defaults to `width: '100%', height: '100%'`. */
+    style?: CSSProperties;
+    /** Class name on the host `<div>`. */
+    className?: string;
+}
+/**
+ * React root for the canvas engine. Renders a sized host `<div>`, creates an
+ * `EngineCanvas` once on mount, calls `init({ container, ...opts })`, and
+ * provides the initialised instance to descendants via {@link CanvasContext}.
+ *
+ * The component is `forwardRef`'d — `ref.current` is the underlying
+ * `EngineCanvas` (or `null` until init resolves). Use it as the imperative
+ * escape hatch: `ref.current?.layers.get(...)`, `ref.current?.events.tap(...)`,
+ * `ref.current?.camera.fitContent(...)`.
+ *
+ * StrictMode-safe: the init promise is guarded by a cancelled flag so a
+ * double-mount cleans up the partially-initialised engine.
+ *
+ * @example
+ * ```tsx
+ * const canvasRef = useRef<EngineCanvas>(null);
+ *
+ * <Canvas ref={canvasRef} autoResize>
+ *   <DragPanBehaviour />
+ *   <WheelZoomBehaviour />
+ *   <GraphLayer id="graph" data={data} />
+ *   <D3ForceLayout targetLayerId="graph" />
+ * </Canvas>
+ * ```
+ */
+declare const Canvas: react.ForwardRefExoticComponent<CanvasProps & react.RefAttributes<Canvas$1>>;
+
+/**
+ * Holds the initialised engine `Canvas` for all descendant child wrappers.
+ * `<Canvas>` only renders children once the engine is ready, so the context
+ * value inside a wrapper is always non-null.
+ */
+declare const CanvasContext: react.Context<Canvas$1 | null>;
+/**
+ * Read the engine `Canvas` from context. Throws when used outside a
+ * `<Canvas>` so misuse fails loudly during render instead of silently
+ * skipping the effect that would have registered a layer or behaviour.
+ */
+declare function useCanvas(): Canvas$1;
+
+/**
+ * Holds the `GraphHistory` constructed by a `<GraphHistoryProvider>` for all
+ * descendant hooks (`useHistory`) and self-wiring buttons (Undo/Redo/Redraw).
+ * `null` until the provider's effect has built the instance, or when no provider
+ * is present — consumers must guard.
+ */
+declare const HistoryContext: react.Context<GraphHistory | null>;
+
+/**
+ * Holds the `GraphClipboard` constructed by a `<GraphClipboardProvider>` for all
+ * descendant hooks (`useClipboard`) and self-wiring buttons (Cut/Copy/Paste/
+ * Delete). `null` until the provider's effect has built the instance, or when no
+ * provider is present — consumers must guard.
+ */
+declare const ClipboardContext: react.Context<GraphClipboard | null>;
+
+/**
+ * The active modelling tool. `'select'` is the neutral pointer (drag / select);
+ * `'add'` drops nodes; `'connect'` draws edges; `'delete'` erases on click.
+ * A string-literal union, but consumers may treat it opaquely — the
+ * {@link ModellerToolbar} only renders the tools it's told to.
+ */
+type GraphTool = 'select' | 'add' | 'connect' | 'delete';
+/** Shared modeller state surfaced by {@link GraphToolProvider}. */
+interface ToolContextValue {
+    /** The currently active tool. */
+    tool: GraphTool;
+    /** Switch the active tool. */
+    setTool: (tool: GraphTool) => void;
+    /**
+     * The node "kind" the **Add** tool drops next (an opaque key like `'circle'`
+     * / `'rect'`). The consumer maps it to a concrete `NodeStyle` in its
+     * `CreateNodeBehaviour` `createNode` factory.
+     */
+    nodeKind: string;
+    /** Choose the node kind the Add tool drops next. */
+    setNodeKind: (kind: string) => void;
+}
+/**
+ * Holds the active {@link GraphTool} + node kind for a modeller, set by a
+ * `<GraphToolProvider>` and read by `useTool` / `<ModellerToolbar>`. `null` when
+ * no provider is present — `useTool` throws in that case (a modeller toolbar
+ * without a provider is a wiring bug, not a graceful-degrade case).
+ */
+declare const ToolContext: react.Context<ToolContextValue | null>;
+
+interface GraphHistoryProviderProps {
+    /** Id of the `GraphLayer` whose store the history journals. Default `'graph'`. */
+    layerId?: string;
+    /** Maximum undo depth. Forwarded to `GraphHistory`. Default `100`. */
+    limit?: number;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    children?: ReactNode;
+}
+/**
+ * Constructs a `GraphHistory` over the target layer's store and provides it via
+ * {@link HistoryContext}. Place it **inside** `<Canvas>` and **after** the
+ * `<GraphLayer>` it targets, so the layer (and its store) exist when the effect
+ * runs. Descendant `useHistory` / Undo-Redo-Redraw buttons resolve the history
+ * from here.
+ *
+ * Node **drags** are captured as one undoable "move" entry per gesture (snapshot
+ * at `node:drag-start`, net change pushed at `node:drag-end`) — reusing
+ * `history.push`, so per-frame writes and layout sim ticks never enter the stack.
+ *
+ * The history is rebuilt (and its stacks cleared) if `layerId`, `limit`, or the
+ * resolved canvas change.
+ */
+declare function GraphHistoryProvider({ layerId, limit, canvas, children, }: GraphHistoryProviderProps): react_jsx_runtime.JSX.Element;
+
+interface GraphClipboardProviderProps {
+    /** Id of the `GraphLayer` whose store the clipboard reads/writes. Default `'graph'`. */
+    layerId?: string;
+    /** Offset applied to pasted node positions. Forwarded to `GraphClipboard`. */
+    pasteOffset?: Vec2;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    children?: ReactNode;
+}
+/**
+ * Constructs a `GraphClipboard` over the target layer's store and provides it
+ * via {@link ClipboardContext}. Place it **inside** `<Canvas>` and **after** the
+ * `<GraphLayer>` it targets. Descendant `useClipboard` / Cut-Copy-Paste-Delete
+ * buttons resolve the clipboard from here. Pair with a `<GraphHistoryProvider>`
+ * to make cut/paste/delete undoable.
+ */
+declare function GraphClipboardProvider({ layerId, pasteOffset, canvas, children, }: GraphClipboardProviderProps): react_jsx_runtime.JSX.Element;
+
+interface GraphToolProviderProps {
+    /** Tool active on mount. Default `'select'`. */
+    defaultTool?: GraphTool;
+    /** Node kind the Add tool drops first. Default `'circle'`. */
+    defaultNodeKind?: string;
+    /**
+     * Pressing <kbd>Esc</kbd> returns to the `'select'` tool (cancelling any
+     * in-progress draw). Default `true`. Set `false` to handle Esc yourself.
+     */
+    escapeToSelect?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Holds the active modelling {@link GraphTool} + node kind and provides them via
+ * {@link ToolContext}. The modeller equivalent of `<GraphHistoryProvider>`:
+ * descendant `useTool` / `<ModellerToolbar>` read and switch the tool; the
+ * consumer gates its drawing behaviours' `enabled` on `useTool().tool`.
+ *
+ * Place it anywhere above both the toolbar and the `<Canvas>` (it owns no engine
+ * reference — it's pure React state), typically wrapping the whole modeller.
+ */
+declare function GraphToolProvider({ defaultTool, defaultNodeKind, escapeToSelect, children, }: GraphToolProviderProps): react_jsx_runtime.JSX.Element;
+
+interface GraphLayerProps extends Omit<GraphLayerOptions, 'store'> {
+    /** Layer id; default `'graph'`. Changing this remounts the layer. */
+    id?: string;
+    /**
+     * Graph data — nodes + edges. Reactive: when this prop changes the wrapper
+     * calls `layer.setData(data)`, which clears and refills the store in one
+     * batch. Pass `undefined` to skip the initial data load.
+     */
+    data?: GraphData;
+    /**
+     * Pre-built `GraphStore`. Forwarded to the engine layer. Init-only.
+     */
+    store?: GraphLayerOptions['store'];
+}
+/**
+ * Declarative wrapper for `@invana/graph` `GraphLayer`.
+ *
+ * Init-only: `id`, `node`, `edge`, `useDefaultStates`, `store`, etc. — change
+ * the `id` (or the component's `key`) to recreate with new options.
+ *
+ * Reactive: `data`. The wrapper calls `layer.setData(data)` whenever the
+ * referenced `GraphData` object changes — make sure the prop is a stable
+ * reference between renders unless you actually want a re-load.
+ */
+declare function GraphLayer({ id, data, store, ...rest }: GraphLayerProps): null;
+
+interface BackgroundLayerProps extends BackgroundLayerOptions {
+    /** Layer id; default `'background'`. Changing this remounts the layer. */
+    id?: string;
+}
+/**
+ * Declarative wrapper for `@invana/canvas` `BackgroundLayer`.
+ *
+ * Reactive: all style options (`type`, `patternType`, `color`,
+ * `backgroundColor`, `size`, `spacing`, `alpha`, `followCamera`, `mode`) — a
+ * change calls `layer.setOptions(...)` and re-renders in place (no remount).
+ * Only `id` forces a remount.
+ */
+declare function BackgroundLayer({ id, ...options }: BackgroundLayerProps): null;
+
+interface MiniMapLayerProps extends Omit<MiniMapLayerOptions, 'graphLayerId'> {
+    /** Layer id; default `'minimap'`. Changing this remounts the layer. */
+    id?: string;
+    /** Source `GraphLayer` id this minimap mirrors; default `'graph'`. */
+    graphLayerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `MiniMapLayer`.
+ *
+ * Mount/unmount toggles visibility — conditionally render this component
+ * (`{showMinimap && <MiniMapLayer/>}`) to show/hide the minimap.
+ *
+ * Reactive: appearance options (size, colours, viewport indicator, position,
+ * margin) via `layer.setOptions(...)`. `id` and `graphLayerId` are identity —
+ * changing either remounts.
+ */
+declare function MiniMapLayer({ id, graphLayerId, ...options }: MiniMapLayerProps): null;
+
+interface DragPanBehaviourProps extends Omit<DragPanBehaviourOptions, 'id'> {
+    /** Behaviour id; default `'pan'`. Changing this remounts the behaviour. */
+    id?: string;
+}
+/**
+ * Declarative wrapper for `@invana/canvas` `DragPanBehaviour`.
+ *
+ * `enabled` is reactive (toggles in place). Other options are init-only —
+ * change `id` or the component `key` to recreate with new options.
+ */
+declare function DragPanBehaviour({ id, enabled, ...rest }: DragPanBehaviourProps): null;
+
+interface WheelZoomBehaviourProps extends Omit<WheelZoomBehaviourOptions, 'id'> {
+    /** Behaviour id; default `'zoom'`. Changing this remounts the behaviour. */
+    id?: string;
+}
+/**
+ * Declarative wrapper for `@invana/canvas` `WheelZoomBehaviour`.
+ *
+ * `enabled` is reactive (toggles in place). Other options are init-only —
+ * change `id` or the component `key` to recreate.
+ */
+declare function WheelZoomBehaviour({ id, enabled, ...rest }: WheelZoomBehaviourProps): null;
+
+interface PinchZoomBehaviourProps extends Omit<PinchZoomBehaviourOptions, 'id'> {
+    /** Behaviour id; default `'pinch'`. Changing this remounts the behaviour. */
+    id?: string;
+}
+/**
+ * Declarative wrapper for `@invana/canvas` `PinchZoomBehaviour`
+ * (two-finger / trackpad pinch zoom).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `key`.
+ */
+declare function PinchZoomBehaviour({ id, enabled, ...rest }: PinchZoomBehaviourProps): null;
+
+interface KeyboardCameraInputBehaviourProps extends Omit<KeyboardCameraInputBehaviourOptions, 'id'> {
+    /** Behaviour id; default `'keyboard-camera'`. Changing this remounts the behaviour. */
+    id?: string;
+}
+/**
+ * Declarative wrapper for `@invana/canvas` `KeyboardCameraInputBehaviour`
+ * (arrow-key pan, +/- zoom, 0 reset).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `key`.
+ */
+declare function KeyboardCameraInputBehaviour({ id, enabled, ...rest }: KeyboardCameraInputBehaviourProps): null;
+
+interface DragNodeBehaviourProps extends Omit<DragNodeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'drag-node'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id whose nodes this behaviour drags; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `DragNodeBehaviour`.
+ *
+ * `enabled` is reactive (toggles in place). Other options are init-only —
+ * change `id` / `layerId` (or the `key`) to recreate.
+ */
+declare function DragNodeBehaviour({ id, layerId, enabled, ...rest }: DragNodeBehaviourProps): null;
+
+interface ContextMenuBehaviourProps extends Omit<ContextMenuBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'context-menu'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id whose nodes/edges this behaviour watches; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `ContextMenuBehaviour`.
+ *
+ * Headless — pass `onContextMenu` to receive node/edge/canvas right-click
+ * events and render your own menu. `enabled` is reactive (toggles in place);
+ * other options are init-only — change `id` / `layerId` (or the `key`) to
+ * recreate.
+ */
+declare function ContextMenuBehaviour({ id, layerId, enabled, ...rest }: ContextMenuBehaviourProps): null;
+
+interface CreateNodeBehaviourProps extends Omit<CreateNodeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'create-node'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour adds nodes to; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `CreateNodeBehaviour` — click empty
+ * canvas to add a node.
+ *
+ * `enabled` is reactive (toggle it from a tool-mode switch); other options are
+ * init-only — change `id` / `layerId` (or the `key`) to recreate.
+ */
+declare function CreateNodeBehaviour({ id, layerId, enabled, ...rest }: CreateNodeBehaviourProps): null;
+
+interface DrawEdgeBehaviourProps extends Omit<DrawEdgeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'draw-edge'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour draws edges in; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `DrawEdgeBehaviour` — drag from a
+ * source node to a target node to create an edge (rubber-band preview).
+ *
+ * `enabled` is reactive (toggle it from a tool-mode switch). Don't enable this
+ * and `DragNodeBehaviour` at once — both start on node pointer-down. Other
+ * options are init-only — change `id` / `layerId` (or the `key`) to recreate.
+ */
+declare function DrawEdgeBehaviour({ id, layerId, enabled, ...rest }: DrawEdgeBehaviourProps): null;
+
+interface EraseBehaviourProps extends Omit<EraseBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'erase'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour erases from; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `EraseBehaviour` — click a node
+ * (cascades its edges) or an edge to delete it.
+ *
+ * `enabled` is reactive (toggle it from a tool-mode switch); other options are
+ * init-only — change `id` / `layerId` (or the `key`) to recreate. Pair `onErase`
+ * with `useDrawHistory().onErase` to make deletes undoable.
+ */
+declare function EraseBehaviour({ id, layerId, enabled, ...rest }: EraseBehaviourProps): null;
+
+interface HoverActivateBehaviourProps extends Omit<HoverActivateBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'hover'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `HoverActivateBehaviour`.
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function HoverActivateBehaviour({ id, layerId, enabled, ...rest }: HoverActivateBehaviourProps): null;
+
+interface ClickSelectBehaviourProps extends Omit<ClickSelectBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'click-select'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `ClickSelectBehaviour`.
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function ClickSelectBehaviour({ id, layerId, enabled, ...rest }: ClickSelectBehaviourProps): null;
+
+interface ClickInspectBehaviourProps extends Omit<ClickInspectBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'click-inspect'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour reads clicks from; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `ClickInspectBehaviour` — tracks the
+ * single node/edge clicked for editing, decoupled from selection. Pair with
+ * `<InspectorPanel>` (which reads this behaviour's target by id).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function ClickInspectBehaviour({ id, layerId, enabled, ...rest }: ClickInspectBehaviourProps): null;
+
+interface BrushSelectBehaviourProps extends Omit<BrushSelectBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'brush-select'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `BrushSelectBehaviour`
+ * (rectangular rubber-band selection).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function BrushSelectBehaviour({ id, layerId, enabled, ...rest }: BrushSelectBehaviourProps): null;
+
+interface LassoSelectBehaviourProps extends Omit<LassoSelectBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'lasso-select'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `LassoSelectBehaviour`
+ * (freeform polygon selection).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function LassoSelectBehaviour({ id, layerId, enabled, ...rest }: LassoSelectBehaviourProps): null;
+
+interface CollapseExpandBehaviourProps extends Omit<CollapseExpandBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'collapse-expand'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `CollapseExpandBehaviour`
+ * (click a group's +/- toggle to collapse/expand).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function CollapseExpandBehaviour({ id, layerId, enabled, ...rest }: CollapseExpandBehaviourProps): null;
+
+interface NodeResizeBehaviourProps extends Omit<NodeResizeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'node-resize'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `NodeResizeBehaviour`
+ * (drag corner handles to resize a node).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function NodeResizeBehaviour({ id, layerId, enabled, ...rest }: NodeResizeBehaviourProps): null;
+
+interface LabelCollisionBehaviourProps extends Omit<LabelCollisionBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'label-collision'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `LabelCollisionBehaviour`
+ * (hide/show overlapping labels by priority).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function LabelCollisionBehaviour({ id, layerId, enabled, ...rest }: LabelCollisionBehaviourProps): null;
+
+interface LabelResolutionLODBehaviourProps extends Omit<LabelResolutionLODBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'label-lod'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `LabelResolutionLODBehaviour`
+ * (show/hide labels by camera zoom tier).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function LabelResolutionLODBehaviour({ id, layerId, enabled, ...rest }: LabelResolutionLODBehaviourProps): null;
+
+interface NodeSizeLODBehaviourProps extends Omit<NodeSizeLODBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'node-size-lod'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `NodeSizeLODBehaviour`
+ * (rescale node sizes per camera zoom).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function NodeSizeLODBehaviour({ id, layerId, enabled, ...rest }: NodeSizeLODBehaviourProps): null;
+
+interface EdgeSizeLODBehaviourProps extends Omit<EdgeSizeLODBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'edge-size-lod'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `EdgeSizeLODBehaviour`
+ * (rescale edge stroke widths per camera zoom).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function EdgeSizeLODBehaviour({ id, layerId, enabled, ...rest }: EdgeSizeLODBehaviourProps): null;
+
+interface ParallelEdgeBehaviourProps extends Omit<ParallelEdgeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'parallel-edge'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `ParallelEdgeBehaviour`
+ * (fan out edges that share the same source/target pair).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function ParallelEdgeBehaviour({ id, layerId, enabled, ...rest }: ParallelEdgeBehaviourProps): null;
+
+interface DegreeSizeBehaviourProps extends Omit<DegreeSizeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'degree-size'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour drives; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `DegreeSizeBehaviour`
+ * (size nodes by in/out degree).
+ *
+ * `enabled` is reactive; other options are init-only — change `id` / `layerId`.
+ */
+declare function DegreeSizeBehaviour({ id, layerId, enabled, ...rest }: DegreeSizeBehaviourProps): null;
+
+interface ResponsiveThemeBehaviourProps extends Omit<ResponsiveThemeBehaviourOptions, 'id' | 'layerId'> {
+    /** Behaviour id; default `'responsive-theme'`. Changing this remounts the behaviour. */
+    id?: string;
+    /** GraphLayer id this behaviour themes; default `'graph'`. */
+    layerId?: string;
+}
+/**
+ * Declarative wrapper for `@invana/graph` `ResponsiveThemeBehaviour`.
+ *
+ * Keeps the graph's theme-dependent node / edge styling in sync with the host's
+ * `prefers-color-scheme` (or a pinned `mode`). `enabled` is reactive; the
+ * `node` / `edge` / `mode` options are init-only — change `id` / `layerId` (or
+ * the component `key`) to recreate with new variants.
+ */
+declare function ResponsiveThemeBehaviour({ id, layerId, enabled, ...rest }: ResponsiveThemeBehaviourProps): null;
+
+type D3ForceLayoutCtorOptions = ConstructorParameters<typeof D3ForceLayout$1>[0];
+interface D3ForceLayoutProps {
+    /**
+     * Id of the `<GraphLayer>` this layout drives. Default `'graph'`. The
+     * wrapper looks the layer up at mount time; if it isn't registered yet,
+     * mount the layout *after* the layer in JSX order.
+     */
+    targetLayerId?: string;
+    /**
+     * Padding in screen pixels for the auto-fit that runs when the simulation
+     * settles. `null` disables auto-fit. Default `80`.
+     */
+    fitPadding?: number | null;
+    /** D3ForceLayout constructor options (`charge`, `link`, `center`, …). */
+    options?: D3ForceLayoutCtorOptions;
+}
+/**
+ * Declarative wrapper for `@invana/graph-layout-d3-force` `D3ForceLayout`.
+ *
+ * Mount: builds a new layout, wires `end → camera.fitContent(...)` (unless
+ * `fitPadding` is `null`), then calls `layout.apply(layer)`.
+ *
+ * Unmount: `layout.stop()`. The simulation cancels and emits its final
+ * `end` event with `reason: 'stopped'`.
+ *
+ * All inputs are init-only — remount with a new `key` to reseed the sim.
+ */
+declare function D3ForceLayout({ targetLayerId, fitPadding, options, }: D3ForceLayoutProps): null;
+
+interface UseCameraResult {
+    /** Multiply scale by `factor` (default 1.2), anchored at the viewport centre. */
+    zoomIn: (factor?: number) => void;
+    /** Divide scale by `factor` (default 1.2), anchored at the viewport centre. */
+    zoomOut: (factor?: number) => void;
+    /** Set an absolute scale, anchored at the viewport centre. */
+    setZoom: (scale: number) => void;
+    /** Set an absolute scale around an arbitrary screen point (defaults to centre). */
+    zoomTo: (scale: number, centerX?: number, centerY?: number) => void;
+    /** Pan by `(dx, dy)` screen pixels. */
+    pan: (dx: number, dy: number) => void;
+    /** Fit a world-space rectangle into the viewport. */
+    fitContent: (worldRect: Rect, padding?: number) => void;
+    /** Read the current uniform scale (does not subscribe — use `useZoom` for live state). */
+    getZoom: () => number;
+}
+/**
+ * Imperative camera actions for the resolved canvas — the wiring the
+ * GraphVisualiser story used to hand-write inline (`camera.zoomAt(1.2)` etc.),
+ * promoted to a reusable, multi-canvas-safe hook. Pure actions, no
+ * subscriptions; callbacks are stable per resolved `canvas`. For a live zoom
+ * value that re-renders, use {@link useZoom}.
+ *
+ * @param canvas Optional explicit instance; defaults to the context canvas.
+ */
+declare function useCamera(canvas?: Canvas$1 | null): UseCameraResult;
+
+interface UseZoomResult {
+    /** Live uniform scale — re-renders whenever the camera zooms (interactively or programmatically). */
+    zoom: number;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    setZoom: (scale: number) => void;
+    zoomTo: (scale: number, centerX?: number, centerY?: number) => void;
+}
+/**
+ * Live zoom state + zoom actions for the resolved canvas. Subscribes to
+ * `camera:zoom`, so the returned `zoom` tracks wheel / pinch / programmatic
+ * zoom and re-renders the component.
+ *
+ * Multi-canvas-safe: the subscription effect is keyed on the resolved instance,
+ * so two `<Canvas>` trees (or two explicit instances) never share zoom state.
+ *
+ * @param canvas Optional explicit instance; defaults to the context canvas.
+ */
+declare function useZoom(canvas?: Canvas$1 | null): UseZoomResult;
+
+interface UseFitContentResult {
+    /** Fit the viewport to the target layer's content bounds. No-op until the layer exists. */
+    fitContent: (padding?: number) => void;
+    /** Whether the target layer is currently mounted (drives e.g. button disabled state). */
+    hasContent: boolean;
+}
+/**
+ * Fit-to-content (zoom-to-extent) for a specific layer on the resolved canvas.
+ * The layer is resolved lazily *inside* the returned callback, so the hook
+ * tolerates the layer mounting after the hook runs (common, since layer
+ * wrappers register in effects). `hasContent` tracks layer mount/unmount via
+ * the `layer:added` / `layer:removed` canvas events.
+ *
+ * @param layerId Target layer id (e.g. `'graph'`).
+ * @param canvas  Optional explicit instance; defaults to the context canvas.
+ */
+declare function useFitContent(layerId: string, canvas?: Canvas$1 | null): UseFitContentResult;
+
+/**
+ * Subscribe to a typed canvas-wide event (`camera:zoom`, `camera:pan`,
+ * `layer:added`, …) for the lifetime of the calling component. Fully typed off
+ * the engine's exported {@link CanvasGlobalEvents} map.
+ *
+ * The handler is held in a ref so changing it between renders does **not** tear
+ * down and re-create the subscription; only a change of the resolved `canvas`
+ * (or the `event` name) does. That keeps subscriptions stable and — because the
+ * effect is keyed on the resolved instance — correct across multiple canvases.
+ *
+ * @param event   Event name from {@link CanvasGlobalEvents}.
+ * @param handler Fired with the event payload.
+ * @param canvas  Optional explicit instance; defaults to the context canvas.
+ */
+declare function useCanvasEvent<E extends keyof CanvasGlobalEvents>(event: E, handler: (payload: CanvasGlobalEvents[E]) => void, canvas?: Canvas$1 | null): void;
+
+interface UseClearGraphResult {
+    /** Remove every node and edge from the target layer. No-op if the layer doesn't exist yet. */
+    clear: () => void;
+}
+/**
+ * Clear-graph action for a specific layer on the resolved canvas.
+ *
+ * When a `<GraphHistoryProvider>` is present, the clear runs as a single
+ * undoable `history.transaction('clear', …)` — removing every node (edges
+ * cascade) so Undo restores the whole graph and Redo clears it again. Without a
+ * history provider it falls back to the layer's fast `clear()`.
+ *
+ * Uses structural duck-types (`clear()` / `store.nodes()`) so it works with any
+ * compatible layer without a hard `@invana/graph` import.
+ *
+ * @param layerId Target layer id (e.g. `'graph'`).
+ * @param canvas  Optional explicit instance; defaults to the context canvas.
+ */
+declare function useClearGraph(layerId: string, canvas?: Canvas$1 | null): UseClearGraphResult;
+
+interface UseSelectionOptions {
+    /** Id of the `ClickSelectBehaviour` to read selection from. Default `'click-select'`. */
+    clickSelectId?: string;
+}
+interface UseSelectionResult {
+    /** Currently selected node ids. */
+    selectedNodeIds: string[];
+    /** Currently selected edge ids. */
+    selectedEdgeIds: string[];
+    /** Total selected (nodes + edges). */
+    count: number;
+    /** Clear the selection. */
+    clear: () => void;
+}
+/**
+ * Reactive view of the current graph selection, driven by a
+ * `ClickSelectBehaviour`'s `selection:change` event (brush/lasso flow through it
+ * by delegation, so all three selection modes are covered by this one hook).
+ *
+ * Requires a registered `ClickSelectBehaviour`; if absent, the selection is
+ * empty and `clear` is a no-op.
+ */
+declare function useSelection(options?: UseSelectionOptions, canvas?: Canvas$1 | null): UseSelectionResult;
+
+interface UseInspectTargetOptions {
+    /** Id of the `ClickInspectBehaviour` to read the target from. Default `'click-inspect'`. */
+    inspectId?: string;
+}
+/**
+ * Reactive view of the single node/edge currently targeted for editing, driven
+ * by a `ClickInspectBehaviour`'s `inspect:change` event. Returns `null` when no
+ * element is targeted (or the behaviour isn't registered).
+ *
+ * Distinct from {@link useSelection}: selection can hold many elements (for
+ * highlighting / multi-drag), whereas this is always the *one* element a
+ * property editor should edit.
+ */
+declare function useInspectTarget(options?: UseInspectTargetOptions, canvas?: Canvas$1 | null): InspectTarget | null;
+
+interface UseHistoryOptions {
+    /** Layer id whose `redraw()` the `redraw` action targets. Default `'graph'`. */
+    layerId?: string;
+}
+interface UseHistoryResult {
+    /** Revert the most recent change. No-op when `!canUndo`. */
+    undo: () => void;
+    /** Re-apply the most recently undone change. No-op when `!canRedo`. */
+    redo: () => void;
+    /** Force a full re-render of the target layer (render pass; not undoable). */
+    redraw: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+/**
+ * Undo/redo + redraw, wired to the `GraphHistory` from a
+ * `<GraphHistoryProvider>` ancestor. `canUndo`/`canRedo` stay reactive via the
+ * history's `change` event. Without a provider, undo/redo are no-ops and the
+ * flags are `false` (redraw still works — it goes straight to the layer).
+ */
+declare function useHistory(options?: UseHistoryOptions, canvas?: Canvas$1 | null): UseHistoryResult;
+
+interface UseClipboardOptions {
+    /** Id of the `ClickSelectBehaviour` selection is read from / re-applied to. Default `'click-select'`. */
+    clickSelectId?: string;
+}
+interface UseClipboardResult {
+    /** Copy the selection to the buffer, then delete it (one undoable step). */
+    cut: () => void;
+    /** Copy the selection to the buffer. */
+    copy: () => void;
+    /** Paste the buffer (offset + re-id'd) and select the pasted items. */
+    paste: () => void;
+    /** Delete the selection (one undoable step). */
+    remove: () => void;
+    /** True iff the buffer has content to paste. */
+    canPaste: boolean;
+    /** True iff something is selected. */
+    hasSelection: boolean;
+}
+/**
+ * Cut / copy / paste / delete for the current selection, wired to the
+ * `GraphClipboard` from a `<GraphClipboardProvider>` ancestor. Operations route
+ * through the `<GraphHistoryProvider>`'s history when present, so they're
+ * undoable. Reads the selection (and re-selects pasted items) via a
+ * `ClickSelectBehaviour`.
+ *
+ * `canPaste` tracks the buffer (recomputed after each op); `hasSelection` is
+ * reactive via {@link useSelection}.
+ */
+declare function useClipboard(options?: UseClipboardOptions, canvas?: Canvas$1 | null): UseClipboardResult;
+
+type PatternType$2 = NonNullable<BackgroundLayerOptions['patternType']>;
+interface UseGridOptions {
+    /** Id of the `BackgroundLayer` to toggle. Default `'background'`. */
+    backgroundLayerId?: string;
+    /**
+     * Pattern to switch to when the grid is shown. When omitted, the layer's
+     * existing `patternType` is preserved (only `type` is toggled).
+     */
+    patternType?: PatternType$2;
+}
+interface UseGridResult {
+    /** Whether the background pattern (grid/dots/lines) is currently shown. */
+    showGrid: boolean;
+    /** Toggle the grid on/off. */
+    toggleGrid: () => void;
+    /** Set the grid on/off explicitly. */
+    setGrid: (on: boolean) => void;
+}
+/**
+ * Toggle a `BackgroundLayer`'s pattern on/off. "Grid shown" maps to
+ * `type: 'pattern'`, "hidden" to `type: 'solid'`. Pass `patternType` to force a
+ * specific pattern (e.g. `'grid'`) when turning it on; otherwise the layer's
+ * configured pattern is kept.
+ *
+ * State is owned by the hook (the background layer emits no option-change event)
+ * and seeded from `getOptions()` on mount.
+ */
+declare function useGrid(options?: UseGridOptions, canvas?: Canvas$1 | null): UseGridResult;
+
+interface UseThemeOptions {
+    /** Id of the `ResponsiveThemeBehaviour` to drive. Default `'responsive-theme'`. */
+    behaviourId?: string;
+    /**
+     * Optional id of a `BackgroundLayer` to flip in lockstep. When set, switching
+     * the theme also switches the background's `mode`, so the whole canvas changes
+     * appearance together instead of the background staying on its own
+     * `prefers-color-scheme`. Omit to leave the background alone.
+     */
+    backgroundLayerId?: string;
+    /**
+     * Called after the theme switches, with the new resolved kind + mode. Use it
+     * to flip *app chrome* that lives outside the canvas (e.g. a design-system
+     * `data-theme` attribute) so floating controls stay legible against the
+     * canvas. The hook never touches chrome itself — that's app policy.
+     */
+    onChange?: (kind: ThemeKind, mode: ThemeMode) => void;
+}
+interface UseThemeResult {
+    /** Current mode setting (`'auto' | 'light' | 'dark'`). */
+    mode: ThemeMode;
+    /** Concrete kind currently resolved (`'light' | 'dark'`). */
+    kind: ThemeKind;
+    /** Set the mode explicitly. `'auto'` re-follows `prefers-color-scheme`. */
+    setMode: (mode: ThemeMode) => void;
+    /** Flip between pinned light and dark, based on the current resolved kind. */
+    toggle: () => void;
+}
+/**
+ * Drive a registered `ResponsiveThemeBehaviour` (from `@invana/graph`) — read its
+ * mode / resolved kind and switch it. Useful for a theme-toggle control.
+ *
+ * Pass `backgroundLayerId` to also flip a `BackgroundLayer`'s mode in lockstep so
+ * the background switches with the graph content (otherwise the background keeps
+ * following the OS `prefers-color-scheme` and dark-theme content can land on a
+ * light background). Pass `onChange` to switch app chrome to match.
+ *
+ * State is owned by the hook (neither the behaviour nor the layer emits a
+ * mode-change event) and seeded once they are registered. Each action looks the
+ * targets up fresh, so it tolerates them mounting after this hook.
+ */
+declare function useTheme(options?: UseThemeOptions, canvas?: Canvas$1 | null): UseThemeResult;
+
+/** Minimal structural shape of a layout instance the hook can apply + stop. */
+interface ApplicableLayout {
+    apply(layer: unknown): Promise<void> | void;
+    stop?: () => void;
+}
+/** Factory producing a fresh layout instance per application. */
+type LayoutFactory = () => ApplicableLayout;
+interface UseLayoutOptions {
+    /** Target `GraphLayer` id. Default `'graph'`. */
+    layerId?: string;
+    /** Padding for the post-layout `camera.fitContent`. Default `80`. */
+    fitPadding?: number;
+    /** Initially-selected key. Default: first key of `layouts`. */
+    initial?: string;
+    /** Optional key → human label map for the picker. Default: identity. */
+    labels?: Record<string, string>;
+    /** Apply the initial layout once the target layer is mounted. Default `true`. */
+    applyInitial?: boolean;
+}
+interface UseLayoutResult {
+    /** Currently-applied layout key. */
+    layout: string;
+    /** Key → label map for a picker. */
+    layoutOptions: Record<string, string>;
+    /** Apply the layout registered under `key`, then fit the view. */
+    applyLayout: (key: string) => void;
+    /** True while a layout's `apply` promise is in flight. */
+    isRunning: boolean;
+}
+/**
+ * Imperative layout switching, lifting the common "instantiate → `apply(layer)`
+ * → `camera.fitContent`" pattern into a hook. Layouts live in separate packages
+ * (`@invana/graph-layout-*`) with no registry, so the consumer supplies a map of
+ * **factories**; this hook can't be turnkey.
+ *
+ * Memoize the `layouts` map (module scope or `useMemo`) so `applyLayout` stays
+ * stable across renders.
+ */
+declare function useLayout(layouts: Record<string, LayoutFactory>, options?: UseLayoutOptions, canvas?: Canvas$1 | null): UseLayoutResult;
+
+interface UseSelectModeOptions {
+    /** Initially-active mode key. Default: first key of `behaviourIds`. */
+    initial?: string;
+    /** Optional key → human label map for a picker. Default: identity. */
+    labels?: Record<string, string>;
+}
+interface UseSelectModeResult {
+    /** Currently-active mode key. */
+    mode: string;
+    /** Key → label map for a picker. */
+    modeOptions: Record<string, string>;
+    /** Switch mode: enables that mode's behaviour, disables the others. */
+    setMode: (mode: string) => void;
+}
+/**
+ * Mutually-exclusive selection-mode switch. Maps mode keys to behaviour ids
+ * (e.g. `{ click: 'click-select', brush: 'brush-select', lasso: 'lasso-select' }`)
+ * and toggles their `enabled` so exactly one is active. The consumer must have
+ * registered those behaviours; this hook can't be turnkey.
+ *
+ * The initial mode is enabled on mount. Memoize `behaviourIds` (module scope or
+ * `useMemo`) so `setMode` stays stable.
+ */
+declare function useSelectMode(behaviourIds: Record<string, string>, options?: UseSelectModeOptions, canvas?: Canvas$1 | null): UseSelectModeResult;
+
+/**
+ * Default path types surfaced by an edge-type picker, in display order. A
+ * curated subset of {@link EdgePathType} that maps cleanly to the three common
+ * routing styles plus their rounded/smooth orthogonal variants.
+ */
+declare const DEFAULT_EDGE_TYPES: readonly EdgePathType[];
+/** Human labels for the built-in {@link EdgePathType} values (picker display). */
+declare const DEFAULT_EDGE_TYPE_LABELS: Record<string, string>;
+interface UseEdgeTypeOptions {
+    /** Target `GraphLayer` id. Default `'graph'`. */
+    layerId?: string;
+    /**
+     * Initially-selected path type. When omitted, the hook seeds from the layer's
+     * current `edgeDefaults.shape.pathType` on mount, falling back to the first
+     * entry of `types`.
+     */
+    initial?: EdgePathType;
+    /** Path types to expose, in order. Default {@link DEFAULT_EDGE_TYPES}. */
+    types?: readonly EdgePathType[];
+    /** Optional key → human label map. Default {@link DEFAULT_EDGE_TYPE_LABELS}. */
+    labels?: Record<string, string>;
+}
+interface UseEdgeTypeResult {
+    /** Currently-selected path type key. */
+    edgeType: string;
+    /** Key → label map for a picker. */
+    edgeTypeOptions: Record<string, string>;
+    /**
+     * Switch the path type for **every** edge in the layer and make it the
+     * default for future edges (via `GraphLayer.setEdgeDefaults`).
+     */
+    setEdgeType: (type: string) => void;
+}
+/**
+ * Layer-wide edge routing switch. Patches the `GraphLayer` edge template
+ * (`options.edge.style.shape.pathType`) via {@link GraphLayer.setEdgeDefaults},
+ * which re-renders every edge and becomes the default for edges added later —
+ * the engine-side `pathType` shorthand resolves to the right router + pathStyle
+ * pair (e.g. `'orth'`, `'bezier'`, `'rounded'`).
+ *
+ * The prior `shape` is spread before patching so anchors / waypoints survive
+ * (`setEdgeDefaults` replaces structured fields wholesale). State is owned by
+ * the hook and seeded from `layer.edgeDefaults` on mount.
+ */
+declare function useEdgeType(options?: UseEdgeTypeOptions, canvas?: Canvas$1 | null): UseEdgeTypeResult;
+
+interface UseLockOptions {
+    /**
+     * Behaviour ids disabled while locked (re-enabled on unlock). Default
+     * `['pan', 'drag-node']` — pan + node drag, leaving zoom available.
+     */
+    behaviourIds?: string[];
+    /** Initial locked state. Default `false`. */
+    initialLocked?: boolean;
+}
+interface UseLockResult {
+    locked: boolean;
+    toggleLock: () => void;
+    setLock: (locked: boolean) => void;
+}
+/**
+ * View lock — disables a configurable set of behaviours (pan + node drag by
+ * default) while keeping zoom available. "Lock" is app policy, not an engine
+ * concept, so which behaviours it disables is configurable. State is owned by
+ * the hook.
+ */
+declare function useLock(options?: UseLockOptions, canvas?: Canvas$1 | null): UseLockResult;
+
+/**
+ * Read + switch the active modelling tool (and Add-tool node kind) from a
+ * `<GraphToolProvider>` ancestor.
+ *
+ * Gate your drawing behaviours on the result, e.g.
+ * `<CreateNodeBehaviour enabled={useTool().tool === 'add'} />`.
+ *
+ * @throws if no `<GraphToolProvider>` is above — a modeller without one is a
+ * wiring bug, so this fails loudly rather than silently doing nothing.
+ */
+declare function useTool(): ToolContextValue;
+
+interface UseDrawHistoryResult {
+    /** Journal a just-created node as an undoable `add node` entry. */
+    onNodeCreate: (node: GraphNode) => void;
+    /** Journal a just-created edge as an undoable `connect` entry. */
+    onEdgeCreate: (edge: GraphEdge) => void;
+    /** Journal a just-erased node/edge as an undoable `delete` entry. */
+    onErase: (removed: ErasedElement) => void;
+}
+/**
+ * Ready-made callbacks that make `CreateNodeBehaviour` / `DrawEdgeBehaviour` /
+ * `EraseBehaviour` **undoable**. Wire them to the behaviours' `onNodeCreate` /
+ * `onEdgeCreate` / `onErase` props — each pushes the already-applied mutation as
+ * one entry on the `GraphHistory` from a `<GraphHistoryProvider>` ancestor
+ * (mirroring how the provider records drags via `history.push`).
+ *
+ * The behaviours mutate the store themselves; these only *journal* the change,
+ * so they pair with — they don't replace — the behaviour's own mutation.
+ *
+ * Without a history provider the callbacks are harmless no-ops (drawing still
+ * works; it just isn't undoable). The returned functions are referentially
+ * stable, so they're safe to capture once in a behaviour that reads its
+ * callbacks at construction.
+ */
+declare function useDrawHistory(): UseDrawHistoryResult;
+
+/** The values a {@link PropertiesEditor} edits: a label + a flat string→string data map. */
+interface PropertiesEditorValues {
+    /** The element's label text. */
+    label: string;
+    /** The element's free-form type tag (maps to `node.type` / `edge.type`). Only edited when `showType`. */
+    type?: string;
+    /** Arbitrary key/value metadata (maps to `node.data` / `edge.data`). */
+    data: Record<string, string>;
+}
+interface PropertiesEditorProps {
+    /** Heading shown above the form, e.g. `'Node'` / `'Edge'`. */
+    title?: string;
+    /**
+     * Initial values, loaded into local state **once** on mount (same as
+     * `NodeStyleEditor`). To reload for a different element, remount via `key`.
+     */
+    defaults?: Partial<PropertiesEditorValues>;
+    /** Called with the edited values when the user clicks Apply. */
+    onSubmit: (values: PropertiesEditorValues) => void;
+    /** Submit button label. Default `'Apply'`. */
+    submitLabel?: string;
+    /** Show the label field. Default `true`. */
+    showLabel?: boolean;
+    /** Show an editable `type` field above the properties list. Default `false`. */
+    showType?: boolean;
+    /**
+     * When provided, render a "Reverse direction" button in the footer that
+     * invokes this callback immediately (i.e. not on Apply). Used for edges to
+     * swap source/target. Omit for elements that have no direction.
+     */
+    onReverse?: () => void;
+    className?: string;
+}
+/**
+ * Dumb, engine-agnostic editor for an element's **label + key/value
+ * properties** — the canvas counterpart of `@invana/canvas-ui`'s
+ * `NodeStyleEditor`, but for arbitrary `data` rather than visual style (which
+ * `@invana/forms`' fixed field types can't express as a dynamic list).
+ *
+ * Props in / `onSubmit` out: it owns the row state, lets the user add / remove /
+ * rename fields, and on Apply emits `{ label, data }`. It holds **no** engine /
+ * layer / commit logic — the consumer (see {@link InspectorPanel}) wires
+ * `onSubmit` to the store. Blank-keyed rows are dropped on submit; on duplicate
+ * keys the last row wins.
+ *
+ * The text fields are styled native `<input>`s: the `@invana/ui` build this
+ * package resolves doesn't export a plain `Input`, and the dynamic key/value
+ * list isn't expressible via the `@invana/forms` schema generator. `Button`
+ * still comes from `@invana/ui` (no raw `<button>`).
+ */
+declare function PropertiesEditor({ title, defaults, onSubmit, submitLabel, showLabel, showType, onReverse, className, }: PropertiesEditorProps): react_jsx_runtime.JSX.Element;
+
+interface UseEntityEditorOptions {
+    /** GraphLayer to read/write. Default `'graph'`. */
+    layerId?: string;
+    /** Id of the `ClickInspectBehaviour` the edit target is read from. Default `'click-inspect'`. */
+    inspectId?: string;
+    /**
+     * Modeller mode: edit a single `type` field on **both** nodes and edges whose
+     * value also drives the displayed label (mirrored to `style.labelText`) — in a
+     * modeller the type *is* what's drawn on the element. Off by default, in which
+     * case nodes edit their `label` (`style.labelText`) and edges edit their `type`,
+     * each as a separate field.
+     */
+    typeAsLabel?: boolean;
+}
+/** The single selected node/edge, its current label + data, and a commit action. */
+interface EntityEditorTarget {
+    kind: 'node' | 'edge';
+    id: string;
+    /** Effective (resolved) label text. Empty for edges (they have no label field). */
+    label: string;
+    /** The element's free-form `type` tag. Present for edges (`'' ` when unset). */
+    type?: string;
+    /** Current `data` as a flat string map (non-string values are stringified). */
+    data: Record<string, string>;
+    /**
+     * Write the editor's values back to the store, undoable as one entry when a
+     * `<GraphHistoryProvider>` is present (a direct mutation otherwise). Replaces
+     * `data` wholesale. A **node** also overwrites `style.labelText` (spreading the
+     * prior style); an **edge** writes its `type` instead — edges have no label.
+     */
+    commit: (values: PropertiesEditorValues) => void;
+    /**
+     * Swap an edge's `source`/`target` (reverse its direction). Present only for
+     * edges; undoable as one entry when a `<GraphHistoryProvider>` is present.
+     */
+    reverse?: () => void;
+}
+/**
+ * Click-driven property editing for an inspector. Returns the **single** node or
+ * edge the user clicked to edit — its effective label + `data` and a `commit`
+ * that writes edits back undoably — or `null` when nothing is targeted (so a
+ * panel can render nothing). Reads the target via {@link useInspectTarget}
+ * (needs a `ClickInspectBehaviour`, independent of selection); commits via the
+ * `GraphHistory` from a `<GraphHistoryProvider>` ancestor when present.
+ *
+ * The view (`<PropertiesEditor>`) and placement (`<Panel>`) are the consumer's —
+ * see {@link InspectorPanel} for the turnkey wiring.
+ */
+declare function useEntityEditor(options?: UseEntityEditorOptions, canvas?: Canvas$1 | null): EntityEditorTarget | null;
+
+/** Open menu: where it sits (screen / canvas-relative px) + what it carries. */
+interface ContextMenuState<T> {
+    /** Left offset in px, relative to the positioned ancestor (the `<Canvas>` host). */
+    x: number;
+    /** Top offset in px, relative to the positioned ancestor. */
+    y: number;
+    /** Caller-defined payload — typically the per-target menu items to render. */
+    items: T;
+}
+interface UseContextMenuResult<T> {
+    /** Current open menu, or `null` when closed. */
+    menu: ContextMenuState<T> | null;
+    /** Open (or move) the menu at `(x, y)` carrying `items`. */
+    open: (x: number, y: number, items: T) => void;
+    /** Close the menu. */
+    close: () => void;
+}
+/**
+ * Headless open/close + position state for a right-click context menu, with the
+ * dismissal lifecycle baked in: while a menu is open, an outside `pointerdown`
+ * or `Escape` closes it.
+ *
+ * Pairs with `<ContextMenuBehaviour onContextMenu={…}>` (which supplies the
+ * target + `screen` position) and `<ContextMenuOverlay>` (which renders the
+ * menu). Feed `e.screen.x / e.screen.y` straight into {@link open}; because the
+ * `<Canvas>` host is `position: relative`, those coordinates place the overlay
+ * correctly when it's rendered as a `<Canvas>` descendant.
+ *
+ * The opening right-click's `pointerdown` fires *before* this effect's listener
+ * attaches, so the menu never self-closes. `<ContextMenuOverlay>` stops
+ * `pointerdown` propagation, so clicks *inside* the menu don't dismiss it —
+ * leaf `onClick`s call {@link close} explicitly.
+ *
+ * Generic over the payload `T` so it stays UI-kit-agnostic; the graph stories
+ * parameterise it as `MenuItem[]` (from `@invana/ui`).
+ *
+ * @example
+ * ```tsx
+ * const { menu, open, close } = useContextMenu<MenuItem[]>();
+ * const onContextMenu = (e: ContextMenuEvent) =>
+ *   open(e.screen.x, e.screen.y, buildItems(e, close));
+ * // …
+ * <ContextMenuBehaviour layerId="graph" onContextMenu={onContextMenu} />
+ * {menu && <ContextMenuOverlay x={menu.x} y={menu.y} items={menu.items} />}
+ * ```
+ */
+declare function useContextMenu<T>(): UseContextMenuResult<T>;
+
+/**
+ * Icon component accepted by the UI controls. These components are
+ * **icon-agnostic** — the consumer passes the icon (e.g. a `lucide-react`
+ * glyph), so the package takes on no icon dependency. Any component that renders
+ * from `size` / `className` satisfies this (lucide icons do).
+ */
+type ToolbarIcon = ComponentType<{
+    size?: number | string;
+    className?: string;
+}>;
+/**
+ * Side a tooltip is placed on relative to its trigger. Mirrors the Radix /
+ * `@invana/ui` `TooltipContent` `side` prop. A vertical Nav typically wants
+ * `'right'`; a horizontal Nav `'bottom'`.
+ */
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+/** Anchor position for a {@link Panel} within its positioned ancestor. */
+type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+interface PanelProps {
+    /** Corner / edge of the nearest positioned ancestor to pin to. Default `'top-left'`. */
+    position?: PanelPosition;
+    /** Stack direction for children. Default `'vertical'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Distance from the pinned edges, in px. Default `8`. */
+    offset?: number;
+    /** Gap between children, in px. Default `4`. */
+    gap?: number;
+    /** Stacking order, so the overlay sits above canvas content. Default `5`. */
+    zIndex?: number;
+    className?: string;
+    /** Extra inline styles, merged onto the content wrapper (not the positioner). */
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * A positioned overlay container — the canvas equivalent of React Flow's
+ * `<Panel>`. Pins itself to a corner / edge-centre of its **nearest positioned
+ * ancestor** (e.g. the `<Canvas>` host, which is `position: relative`), and
+ * stacks its children horizontally or vertically.
+ *
+ * Engine-agnostic and reference-free: it needs no `Canvas` instance — with
+ * multiple canvases on one page you simply render one `<Panel>` inside each
+ * `<Canvas>` and each pins to its own host.
+ *
+ * **Pointer events:** the absolutely-positioned root is `pointerEvents: 'none'`
+ * so it never creates a dead zone over the canvas (a wide `top-center` panel
+ * would otherwise block pan/zoom along that strip). Only the inner content
+ * wrapper re-enables `pointerEvents: 'auto'`, so drags that miss the actual
+ * controls still reach the canvas underneath.
+ */
+declare function Panel({ position, orientation, offset, gap, zIndex, className, style, children, }: PanelProps): react_jsx_runtime.JSX.Element;
+
+interface TooltippedProps {
+    /**
+     * Tooltip content (typically the host control's `title` / `label`). When
+     * `null` / `undefined` / `''` the child renders **unwrapped** — no tooltip,
+     * no extra DOM — so callers can pass an optional label without branching.
+     */
+    label?: ReactNode;
+    /** Side the tooltip is placed on relative to the trigger. Default `'top'`. */
+    side?: TooltipSide;
+    /** Hover-open delay in ms. Default `0` (instant — matches a toolbar feel). */
+    delayDuration?: number;
+    /** The single trigger element (a `Button`, a dropdown trigger, …). */
+    children: ReactElement;
+}
+/**
+ * Wraps a single interactive element with an `@invana/ui` (Radix) tooltip
+ * driven by `label`. The building-block that lets the dumb control components
+ * surface their `title` / `label` as a real hover tooltip — readable when the
+ * controls are dropped into a compact `NavHorizontal` / `NavVertical` slot,
+ * where the native `title` attribute is easy to miss.
+ *
+ * Self-contained: bundles its own `TooltipProvider` (like `@invana/ui`'s
+ * `ButtonWithTooltip`), so a control works standalone without the host wiring a
+ * provider. `asChild` forwards the trigger props onto the child, preserving its
+ * variant / size / active styling.
+ *
+ * The content background is pinned to `--color-popover` (opaque): the design
+ * kit's default tooltip is translucent (`bg-popover/85` + backdrop-blur), which
+ * reads as see-through over a busy canvas — same reasoning as the dropdown
+ * surfaces in {@link OptionPicker} / {@link ZoomPicker}.
+ */
+declare function Tooltipped({ label, side, delayDuration, children }: TooltippedProps): react_jsx_runtime.JSX.Element;
+
+interface ControlButtonProps {
+    /** Icon component (e.g. a `lucide-react` glyph). Consumer-supplied — icon-agnostic. */
+    icon: ToolbarIcon;
+    onClick: () => void;
+    /** Tooltip content + accessible label. */
+    title: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Active styling — `'default'` (filled) vs `'ghost'` Button variant. Default `false`. */
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A single icon control button — the building block to drop into a {@link Panel}
+ * (the canvas equivalent of React Flow's `<ControlButton>`). Thin wrapper over
+ * the `@invana/ui` `Button`; active state uses Button variants, not Tailwind, so
+ * it works without the host running Tailwind.
+ *
+ * `title` drives both a real hover tooltip (via {@link Tooltipped}) and the
+ * `aria-label`, so the icon-only button stays usable and accessible inside a
+ * compact `NavHorizontal` / `NavVertical`.
+ */
+declare function ControlButton({ icon: Icon, onClick, title, tooltipSide, active, disabled, className, }: ControlButtonProps): react_jsx_runtime.JSX.Element;
+
+interface OptionPickerProps {
+    /**
+     * Label shown on the trigger and as the menu heading (e.g. `'Layout'`). Also
+     * the trigger tooltip content unless {@link OptionPickerProps.tooltip} overrides it.
+     */
+    label: string;
+    /** Currently selected option key. */
+    value: string;
+    /** Option key → human label. */
+    options: Record<string, string>;
+    /**
+     * Optional option key → icon. When present, the active option's icon shows on
+     * the trigger and each option's icon shows beside its label in the menu.
+     * Icon-agnostic — pass a {@link ToolbarIcon} (e.g. a `lucide-react` glyph).
+     */
+    icons?: Record<string, ToolbarIcon>;
+    /** Fired with the newly selected key. */
+    onChange: (value: string) => void;
+    /** Menu alignment relative to the trigger. Default `'start'`. */
+    align?: 'start' | 'center' | 'end';
+    /** Trigger tooltip content. Defaults to {@link OptionPickerProps.label}. */
+    tooltip?: string;
+    /** Side the trigger tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    className?: string;
+}
+/**
+ * A single-select dropdown (radio group). Engine-agnostic — drives a `value` +
+ * `onChange`. Used as the **layout switcher** and **selection-mode** picker in
+ * {@link GraphToolbar}, and standalone for any single-choice control.
+ */
+declare function OptionPicker({ label, value, options, icons, onChange, align, tooltip, tooltipSide, className, }: OptionPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ZoomControlsProps {
+    zoomInIcon: ToolbarIcon;
+    zoomOutIcon: ToolbarIcon;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    /** Side the "Zoom in" / "Zoom out" tooltips are placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /**
+     * Show a live `NN%` zoom readout between the two buttons, sourced from the
+     * canvas via {@link useZoom}. Ignored when `zoomLevel` is also provided.
+     * Default `false`.
+     */
+    showLevel?: boolean;
+    /** Stack direction. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Manual zoom readout override rendered **between** the two buttons (e.g.
+     * `'46%'`). Takes precedence over `showLevel`. Omit for a plain button pair.
+     */
+    zoomLevel?: ReactNode;
+    className?: string;
+}
+/**
+ * A pair of zoom-in / zoom-out icon buttons, optionally with a live zoom
+ * readout between them. Self-wiring: hooks into the canvas via {@link useZoom}
+ * — drop inside a `<Canvas>` and it works without any callback wiring.
+ * Pass `onZoomIn` / `onZoomOut` to override the default hook-driven actions.
+ */
+declare function ZoomControls({ canvas, zoomInIcon: ZoomInIcon, zoomOutIcon: ZoomOutIcon, showLevel, orientation, zoomLevel, tooltipSide, className, }: ZoomControlsProps): react_jsx_runtime.JSX.Element;
+
+interface LockToggleProps {
+    /** Whether the view is locked (drives icon + active styling). */
+    locked: boolean;
+    onToggle: () => void;
+    lockedIcon: ToolbarIcon;
+    unlockedIcon: ToolbarIcon;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    className?: string;
+}
+/**
+ * Toggle button for a "lock view" action (the consumer decides what locking
+ * disables — e.g. pan + drag). Shows the locked icon and active styling while
+ * locked. The tooltip + accessible label flips with state
+ * ("Lock view" / "Unlock view").
+ */
+declare function LockToggle({ locked, onToggle, lockedIcon: LockedIcon, unlockedIcon: UnlockedIcon, tooltipSide, className, }: LockToggleProps): react_jsx_runtime.JSX.Element;
+
+interface ClearButtonProps {
+    /** Optional leading icon (e.g. a trash glyph). */
+    icon?: ToolbarIcon;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    /**
+     * Layer id to clear. Default `'graph'`. Forwarded to {@link useClearGraph}.
+     */
+    layerId?: string;
+    /** Button text + tooltip content. Default `'Clear'`. */
+    label?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    className?: string;
+}
+/**
+ * Labelled action button that clears all nodes and edges from the target layer.
+ * Self-wiring: hooks into the canvas via {@link useClearGraph} — drop inside a
+ * `<Canvas>` and it works without any callback wiring.
+ */
+declare function ClearButton({ icon: Icon, canvas, layerId, label, tooltipSide, className, }: ClearButtonProps): react_jsx_runtime.JSX.Element;
+
+interface FitContentButtonProps {
+    /** Leading icon (e.g. a maximize / frame glyph). */
+    icon: ToolbarIcon;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    /**
+     * Layer id to fit to. Default `'graph'`. Forwarded to {@link useFitContent}.
+     */
+    layerId?: string;
+    /** Tooltip text + accessible label. Default `'Fit to content'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    className?: string;
+}
+/**
+ * Icon button that fits the viewport to the graph's content (zoom-to-extent).
+ * Self-wiring: hooks into the canvas via {@link useFitContent} — drop inside a
+ * `<Canvas>` and it works without any callback wiring. Pass `onFitContent` to
+ * override the default hook-driven action.
+ */
+declare function FitContentButton({ icon: Icon, canvas, layerId, title, tooltipSide, className, }: FitContentButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ZoomPickerProps {
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    /**
+     * Layer id used for the fit-to-content action. Default `'graph'`.
+     */
+    layerId?: string;
+    /**
+     * Preset zoom percentages shown in the dropdown. Default
+     * `[25, 50, 75, 100, 125, 150, 200, 300, 400]`.
+     */
+    presets?: number[];
+    /**
+     * Show the "Fit / Reset View" action at the top of the dropdown.
+     * Default `true`.
+     */
+    showFit?: boolean;
+    /** Label for the fit action. Default `'Fit / Reset View'`. */
+    fitLabel?: string;
+    /** Trigger tooltip content + accessible label. Default `'Zoom level'`. */
+    title?: string;
+    /** Side the trigger tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    className?: string;
+}
+/**
+ * A zoom-level picker: a trigger button showing the current zoom percentage
+ * that opens a dropdown with preset zoom levels and an optional fit-to-content
+ * action. Self-wiring via {@link useZoom} and {@link useFitContent} — drop
+ * inside a `<Canvas>` and it works without any callback wiring.
+ *
+ * The active preset is highlighted automatically based on the live zoom state.
+ *
+ * @example
+ * // In any toolbar — vertical or horizontal:
+ * <ZoomPicker layerId="graph" />
+ *
+ * @example
+ * // Custom presets, no fit action:
+ * <ZoomPicker presets={[50, 100, 200]} showFit={false} />
+ */
+declare function ZoomPicker({ canvas, layerId, presets, showFit, fitLabel, title, tooltipSide, className, }: ZoomPickerProps): react_jsx_runtime.JSX.Element;
+
+interface UndoButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Undo'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring undo button. Disabled when there is nothing to undo. Requires a
+ * `<GraphHistoryProvider>` ancestor (see {@link useHistory}).
+ */
+declare function UndoButton({ icon, title, tooltipSide, canvas, className }: UndoButtonProps): react_jsx_runtime.JSX.Element;
+
+interface RedoButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Redo'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring redo button. Disabled when there is nothing to redo. Requires a
+ * `<GraphHistoryProvider>` ancestor (see {@link useHistory}).
+ */
+declare function RedoButton({ icon, title, tooltipSide, canvas, className }: RedoButtonProps): react_jsx_runtime.JSX.Element;
+
+interface RedrawButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Redraw'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Layer to redraw. Default `'graph'`. */
+    layerId?: string;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring redraw button — forces a full re-render of the target layer. A
+ * pure render pass (not undoable); works without a history provider.
+ */
+declare function RedrawButton({ icon, title, tooltipSide, layerId, canvas, className, }: RedrawButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CutButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Cut'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Id of the `ClickSelectBehaviour` to read selection from. Default `'click-select'`. */
+    clickSelectId?: string;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring cut button — copies the selection to the clipboard, then deletes
+ * it (undoable when a `<GraphHistoryProvider>` is present). Disabled when
+ * nothing is selected. Requires a `<GraphClipboardProvider>` + a
+ * `ClickSelectBehaviour`.
+ */
+declare function CutButton({ icon, title, tooltipSide, clickSelectId, canvas, className, }: CutButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CopyButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Copy'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Id of the `ClickSelectBehaviour` to read selection from. Default `'click-select'`. */
+    clickSelectId?: string;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring copy button — copies the selection to the clipboard. Disabled when
+ * nothing is selected. Requires a `<GraphClipboardProvider>` + a
+ * `ClickSelectBehaviour`.
+ */
+declare function CopyButton({ icon, title, tooltipSide, clickSelectId, canvas, className, }: CopyButtonProps): react_jsx_runtime.JSX.Element;
+
+interface PasteButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Paste'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Id of the `ClickSelectBehaviour` the pasted items are re-selected on. Default `'click-select'`. */
+    clickSelectId?: string;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring paste button — inserts the clipboard buffer (offset + re-id'd) and
+ * selects the pasted items. Disabled when the buffer is empty. Requires a
+ * `<GraphClipboardProvider>`; undoable when a `<GraphHistoryProvider>` is present.
+ */
+declare function PasteButton({ icon, title, tooltipSide, clickSelectId, canvas, className, }: PasteButtonProps): react_jsx_runtime.JSX.Element;
+
+interface DeleteSelectionButtonProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Delete selection'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Id of the `ClickSelectBehaviour` to read selection from. Default `'click-select'`. */
+    clickSelectId?: string;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring delete button — removes the selected nodes/edges (undoable when a
+ * `<GraphHistoryProvider>` is present). Disabled when nothing is selected.
+ * Requires a `<GraphClipboardProvider>` + a `ClickSelectBehaviour`.
+ */
+declare function DeleteSelectionButton({ icon, title, tooltipSide, clickSelectId, canvas, className, }: DeleteSelectionButtonProps): react_jsx_runtime.JSX.Element;
+
+type PatternType$1 = NonNullable<BackgroundLayerOptions['patternType']>;
+interface GridToggleProps {
+    icon: ToolbarIcon;
+    /** Tooltip / accessible label. Default `'Toggle grid'`. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Id of the `BackgroundLayer` to toggle. Default `'background'`. */
+    backgroundLayerId?: string;
+    /** Pattern to switch to when shown (e.g. `'grid'`); preserves existing if omitted. */
+    patternType?: PatternType$1;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring grid toggle. Shows the button as active while the background
+ * pattern is visible. Wraps {@link useGrid}.
+ */
+declare function GridToggle({ icon, title, tooltipSide, backgroundLayerId, patternType, canvas, className, }: GridToggleProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeToggleProps {
+    /** Icon shown while the resolved theme is light. */
+    lightIcon: ToolbarIcon;
+    /** Icon shown while the resolved theme is dark. */
+    darkIcon: ToolbarIcon;
+    /** Tooltip / accessible label. Defaults describe the switch target. */
+    title?: string;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Id of the `ResponsiveThemeBehaviour` to drive. Default `'responsive-theme'`. */
+    behaviourId?: string;
+    /**
+     * Optional id of a `BackgroundLayer` to flip in lockstep, so the background
+     * switches with the graph content instead of following the OS independently.
+     */
+    backgroundLayerId?: string;
+    /**
+     * Called after the theme switches. Use it to flip app chrome that lives
+     * outside the canvas (e.g. a design-system `data-theme` attribute) so the
+     * floating controls stay legible against the canvas.
+     */
+    onChange?: (kind: ThemeKind, mode: ThemeMode) => void;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring theme toggle. Flips a registered `ResponsiveThemeBehaviour` between
+ * pinned light and dark, showing the current theme's icon and active styling
+ * while dark. Wraps {@link useTheme}.
+ */
+declare function ThemeToggle({ lightIcon, darkIcon, title, tooltipSide, behaviourId, backgroundLayerId, onChange, canvas, className, }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+interface LockButtonProps {
+    lockedIcon: ToolbarIcon;
+    unlockedIcon: ToolbarIcon;
+    /** Behaviour ids disabled while locked. Default `['pan', 'drag-node']`. */
+    behaviourIds?: string[];
+    /** Initial locked state. Default `false`. */
+    initialLocked?: boolean;
+    /** Side the tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring lock toggle — disables pan + node drag (by default) while locked,
+ * leaving zoom available. Wraps the dumb {@link LockToggle} with {@link useLock}.
+ */
+declare function LockButton({ lockedIcon, unlockedIcon, behaviourIds, initialLocked, tooltipSide, canvas, className, }: LockButtonProps): react_jsx_runtime.JSX.Element;
+
+interface LayoutPickerProps {
+    /** Map of layout key → factory producing a fresh layout instance. Memoize it. */
+    layouts: Record<string, LayoutFactory>;
+    /** Trigger label. Default `'Layout'`. */
+    label?: string;
+    /** Target `GraphLayer` id. Default `'graph'`. */
+    layerId?: string;
+    /** Padding for the post-layout fit. Default `80`. */
+    fitPadding?: number;
+    /** Initially-selected key. Default: first key. */
+    initial?: string;
+    /** Optional key → human label map. Default: identity. */
+    labels?: Record<string, string>;
+    /** Dropdown alignment. */
+    align?: 'start' | 'center' | 'end';
+    /** Side the trigger tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring layout selector: a dropdown that applies the chosen layout via
+ * {@link useLayout}. Layouts come from separate packages, so the consumer
+ * supplies the factory map.
+ */
+declare function LayoutPicker({ layouts, label, layerId, fitPadding, initial, labels, align, tooltipSide, canvas, className, }: LayoutPickerProps): react_jsx_runtime.JSX.Element;
+
+interface SelectModePickerProps {
+    /** Map of mode key → behaviour id (e.g. `{ click: 'click-select', ... }`). Memoize it. */
+    behaviourIds: Record<string, string>;
+    /** Trigger label. Default `'Select'`. */
+    label?: string;
+    /** Initially-active mode key. Default: first key. */
+    initial?: string;
+    /** Optional key → human label map. Default: identity. */
+    labels?: Record<string, string>;
+    /** Optional mode key → icon map. Shown on the trigger and beside each option. */
+    icons?: Record<string, ToolbarIcon>;
+    /** Dropdown alignment. */
+    align?: 'start' | 'center' | 'end';
+    /** Side the trigger tooltip is placed on. Default `'top'`. */
+    tooltipSide?: TooltipSide;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring selection-mode selector: a dropdown that enables exactly one of
+ * the mapped behaviours via {@link useSelectMode}. The consumer must have
+ * registered those behaviours.
+ */
+declare function SelectModePicker({ behaviourIds, label, initial, labels, icons, align, tooltipSide, canvas, className, }: SelectModePickerProps): react_jsx_runtime.JSX.Element;
+
+interface EdgeTypePickerProps {
+    /** Target `GraphLayer` id. Default `'graph'`. */
+    layerId?: string;
+    /** Trigger label. Default `'Edge'`. */
+    label?: string;
+    /** Initially-selected path type. Default: the layer's current edge default. */
+    initial?: EdgePathType;
+    /** Path types to expose, in order. Default: straight / orth / bezier / rounded / smooth. */
+    types?: readonly EdgePathType[];
+    /** Optional key → human label map. Default: the built-in path-type labels. */
+    labels?: Record<string, string>;
+    /** Per-option icons (key → icon component), surfaced on the trigger + items. */
+    icons?: Record<string, ToolbarIcon>;
+    /** Dropdown alignment. */
+    align?: 'start' | 'center' | 'end';
+    /** Side the trigger tooltip is placed on. */
+    tooltipSide?: TooltipSide;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring edge-routing selector: a dropdown that re-routes **every** edge in
+ * the layer via {@link useEdgeType} (`GraphLayer.setEdgeDefaults`). Mirrors
+ * {@link SelectModePicker} / {@link LayoutPicker} — consume the hook, render an
+ * {@link OptionPicker}. Per-option icons are supported via `icons`.
+ */
+declare function EdgeTypePicker({ layerId, label, initial, types, labels, icons, align, tooltipSide, canvas, className, }: EdgeTypePickerProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuOverlayProps {
+    /** Left offset in px, relative to the positioned ancestor (the `<Canvas>` host). */
+    x: number;
+    /** Top offset in px, relative to the positioned ancestor. */
+    y: number;
+    /** Menu tree to render (per-target; leaves carry their own `onClick`). */
+    items: MenuItem[];
+    /** Stacking order; default `1000` so the menu floats over canvas chrome. */
+    zIndex?: number;
+    /** Extra inline style merged onto the positioned wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Dumb overlay for a right-click context menu: an absolutely-positioned
+ * `@invana/ui` `<NestedMenu>` anchored at `(x, y)` within its positioned
+ * ancestor. Engine-agnostic, props-in only — the open/close state and the
+ * action wiring live in the consumer (`useContextMenu` + the menu items).
+ *
+ * Render it as a `<Canvas>` descendant: the host `<div>` is `position: relative`,
+ * so `(x, y)` taken from `ContextMenuEvent.screen` lands the menu at the cursor.
+ *
+ * It **stops `pointerdown` propagation** so a click *inside* the menu doesn't
+ * reach the window-level dismiss listener `useContextMenu` attaches, and
+ * **prevents the native context menu** on a right-click over itself. Leaf items
+ * close the menu via their own `onClick`.
+ */
+declare function ContextMenuOverlay({ x, y, items, zIndex, style }: ContextMenuOverlayProps): react_jsx_runtime.JSX.Element;
+
+interface CanvasControlsToolbarIconSet {
+    zoomIn: ToolbarIcon;
+    zoomOut: ToolbarIcon;
+    fit: ToolbarIcon;
+    /** Required only when using the controlled `locked` toggle. */
+    locked?: ToolbarIcon;
+    unlocked?: ToolbarIcon;
+}
+interface CanvasControlsToolbarProps {
+    /** Where the controls pin within the canvas host. Default `'bottom-left'`. */
+    position?: PanelPosition;
+    /** Stack direction. Default `'vertical'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Layer id the fit-to-content button targets. Default `'graph'`. */
+    fitLayerId?: string;
+    /** Show zoom +/- buttons. Default `true`. */
+    showZoom?: boolean;
+    /**
+     * Show a live `NN%` zoom readout between the +/- buttons. Sourced from the
+     * canvas via the self-wired {@link ZoomControls}. Default `false`.
+     */
+    showZoomLevel?: boolean;
+    /** Show the fit-to-content button. Default `true`. */
+    showFit?: boolean;
+    /** Icon components (consumer-supplied — the package stays icon-agnostic). */
+    icons: CanvasControlsToolbarIconSet;
+    /**
+     * Controlled lock state. Lock is **not** auto-wired (what "locked" disables —
+     * pan, node-drag, … — is app policy). Provide both `locked` and
+     * `onToggleLock` (plus `icons.locked`/`icons.unlocked`) to render the toggle.
+     */
+    locked?: boolean;
+    onToggleLock?: () => void;
+    /**
+     * Render **without** the self-positioning `<Panel>` — just the bare nav
+     * component — so it composes into consumer chrome. Default `false`.
+     */
+    bare?: boolean;
+    /** Explicit canvas instance; forwarded to each smart component. Defaults to context canvas. */
+    canvas?: Canvas$1 | null;
+    /** Extra controls appended after the presets — e.g. `<ControlButton>`s. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Turnkey controls overlay — the canvas equivalent of React Flow's `<Controls>`.
+ * Assembled from self-wiring smart components ({@link ZoomControls},
+ * {@link FitContentButton}) arranged in a {@link NavVertical} or
+ * {@link NavHorizontal} from `@invana/ui`. No hook wiring needed — drop inside
+ * a `<Canvas>` with an `icons` prop and it works.
+ *
+ * Lock stays **controlled** — pass `locked` + `onToggleLock` to surface it.
+ * Append extra controls as `children`.
+ *
+ * @example
+ * // Pattern A — drop inside a <Canvas>, self-wires via context:
+ * <Canvas>
+ *   <GraphLayer id="graph" data={data} />
+ *   <CanvasControlsToolbar icons={{ zoomIn: ZoomIn, zoomOut: ZoomOut, fit: Maximize }} />
+ * </Canvas>
+ *
+ * @example
+ * // Pattern B — one external controller driving the active canvas:
+ * <div className="my-toolbar">
+ *   <CanvasControlsToolbar bare canvas={activeCanvas} icons={…} />
+ * </div>
+ */
+declare function CanvasControlsToolbar({ position, orientation, fitLayerId, showZoom, showZoomLevel, showFit, icons, locked, onToggleLock, bare, canvas, children, className, }: CanvasControlsToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface GraphToolbarProps {
+    /** Layout switcher. */
+    layout: string;
+    layoutOptions: Record<string, string>;
+    onLayoutChange: (value: string) => void;
+    /** Selection-mode switcher (e.g. click / brush / lasso). */
+    selectMode: string;
+    selectModeOptions: Record<string, string>;
+    onSelectModeChange: (value: string) => void;
+    /**
+     * Self-wiring edge-routing picker (straight / orthogonal / curved …) targeting
+     * this `GraphLayer` id. Default `'graph'`; pass `null` to hide the picker.
+     */
+    edgeTypeLayerId?: string | null;
+    /** Path types the edge picker exposes, in order. Default: straight / orth / bezier / rounded / smooth. */
+    edgeTypes?: readonly EdgePathType[];
+    /** Optional key → label map for the edge picker. */
+    edgeTypeLabels?: Record<string, string>;
+    /** Per-option icons for the edge picker (key → icon component). */
+    edgeTypeIcons?: Record<string, ToolbarIcon>;
+    /** Clear button — layer to clear. Default `'graph'`. */
+    clearLayerId?: string;
+    clearIcon?: ToolbarIcon;
+    /** Explicit canvas instance; forwarded to the self-wiring {@link ClearButton}. Defaults to context canvas. */
+    canvas?: Canvas$1 | null;
+    /** Where the toolbar pins within the canvas host. Default `'top-center'`. */
+    position?: PanelPosition;
+    className?: string;
+}
+/**
+ * Turnkey **horizontal** graph toolbar: a layout picker + selection-mode picker
+ * + a self-wiring {@link EdgeTypePicker} (edge routing) + clear action, grouped
+ * in a `@invana/ui` `NavHorizontal`. The layout / select pickers are
+ * callback-driven (the consumer wires them to the engine); the edge-type and
+ * clear actions self-wire from their layer id. Compose the underlying
+ * {@link OptionPicker} / {@link EdgeTypePicker} / {@link ClearButton} primitives
+ * directly for a custom arrangement.
+ *
+ * Self-positioning: it wraps itself in a {@link Panel}, so it overlays the
+ * canvas host directly — render it as a child of `<Canvas>` (no hand-rolled
+ * absolute wrapper needed). Positioning is the Panel's job (`position`); there
+ * is no internal `align` knob.
+ */
+declare function GraphToolbar({ layout, layoutOptions, onLayoutChange, selectMode, selectModeOptions, onSelectModeChange, edgeTypeLayerId, edgeTypes, edgeTypeLabels, edgeTypeIcons, clearLayerId, clearIcon, canvas, position, className, }: GraphToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface HistoryToolbarIconSet {
+    undo: ToolbarIcon;
+    redo: ToolbarIcon;
+    /** Required only when `showRedraw` is left on. */
+    redraw?: ToolbarIcon;
+}
+interface HistoryToolbarProps {
+    icons: HistoryToolbarIconSet;
+    /** Where the toolbar pins. Default `'top-left'`. */
+    position?: PanelPosition;
+    /** Stack direction. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Show the redraw button (needs `icons.redraw`). Default `true`. */
+    showRedraw?: boolean;
+    /** Layer the redraw button targets. Default `'graph'`. */
+    layerId?: string;
+    /** Render without the `<Panel>` wrapper (embed in external chrome). Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Undo / redo / redraw bar. Self-wires through {@link useHistory}; requires a
+ * `<GraphHistoryProvider>` ancestor for undo/redo (redraw works regardless).
+ */
+declare function HistoryToolbar({ icons, position, orientation, showRedraw, layerId, bare, canvas, className, }: HistoryToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface EditToolbarIconSet {
+    cut: ToolbarIcon;
+    copy: ToolbarIcon;
+    paste: ToolbarIcon;
+    delete: ToolbarIcon;
+    /** Optional leading icon for the (labelled) Clear button. */
+    clear?: ToolbarIcon;
+}
+interface EditToolbarProps {
+    icons: EditToolbarIconSet;
+    /** Where the toolbar pins. Default `'top-left'`. */
+    position?: PanelPosition;
+    /** Stack direction. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Show the clear-canvas button. Default `true`. */
+    showClear?: boolean;
+    /** Id of the `ClickSelectBehaviour` selection is read from. Default `'click-select'`. */
+    clickSelectId?: string;
+    /** Layer that clear / clipboard target. Default `'graph'`. */
+    layerId?: string;
+    /** Render without the `<Panel>` wrapper. Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Clipboard / edit bar — cut, copy, paste, delete selection, clear canvas. The
+ * clipboard actions self-wire through {@link useClipboard} (require a
+ * `<GraphClipboardProvider>` + a `ClickSelectBehaviour`); clear self-wires
+ * through {@link useClearGraph}. All edits are undoable when a
+ * `<GraphHistoryProvider>` is present.
+ */
+declare function EditToolbar({ icons, position, orientation, showClear, clickSelectId, layerId, bare, canvas, className, }: EditToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface ViewToolbarIconSet {
+    zoomIn: ToolbarIcon;
+    zoomOut: ToolbarIcon;
+    fit: ToolbarIcon;
+    /** Required only when the lock toggle is shown. */
+    locked?: ToolbarIcon;
+    unlocked?: ToolbarIcon;
+}
+interface ViewToolbarProps {
+    icons: ViewToolbarIconSet;
+    /** Where the toolbar pins. Default `'bottom-left'`. */
+    position?: PanelPosition;
+    /** Stack direction. Default `'vertical'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Show zoom in/out buttons. Default `true`. */
+    showZoom?: boolean;
+    /** Show the live NN% readout between the zoom buttons. Default `false`. */
+    showZoomLevel?: boolean;
+    /** Show the zoom-level preset picker. Default `true`. */
+    showZoomPicker?: boolean;
+    /** Show the fit-to-content button. Default `true`. */
+    showFit?: boolean;
+    /** Show the lock toggle (needs `icons.locked` + `icons.unlocked`). Default `true`. */
+    showLock?: boolean;
+    /** Layer that fit + zoom-picker target. Default `'graph'`. */
+    layerId?: string;
+    /** Behaviour ids disabled while locked. Default `['pan', 'drag-node']`. */
+    lockBehaviourIds?: string[];
+    /** Render without the `<Panel>` wrapper. Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * View controls — zoom in/out, zoom-level picker, fit-to-content, lock view.
+ * Zoom + fit self-wire through the camera hooks; lock self-wires through
+ * {@link useLock} (disables pan + node drag by default, leaving zoom available).
+ */
+declare function ViewToolbar({ icons, position, orientation, showZoom, showZoomLevel, showZoomPicker, showFit, showLock, layerId, lockBehaviourIds, bare, canvas, className, }: ViewToolbarProps): react_jsx_runtime.JSX.Element;
+
+type PatternType = NonNullable<BackgroundLayerOptions['patternType']>;
+interface GridToolbarIconSet {
+    grid: ToolbarIcon;
+}
+interface GridToolbarProps {
+    icons: GridToolbarIconSet;
+    /** Where the toolbar pins. Default `'bottom-right'`. */
+    position?: PanelPosition;
+    /** Stack direction. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Id of the `BackgroundLayer` to toggle. Default `'background'`. */
+    backgroundLayerId?: string;
+    /** Pattern to switch to when shown (e.g. `'grid'`); preserves existing if omitted. */
+    patternType?: PatternType;
+    /** Render without the `<Panel>` wrapper. Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Grid toggle bar — shows/hides a `BackgroundLayer`'s pattern. Self-wires
+ * through {@link useGrid}.
+ */
+declare function GridToolbar({ icons, position, orientation, backgroundLayerId, patternType, bare, canvas, className, }: GridToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface GraphLayoutToolbarProps {
+    /** Map of layout key → factory producing a fresh layout instance. Memoize it. */
+    layouts: Record<string, LayoutFactory>;
+    /** Map of select-mode key → behaviour id (e.g. `{ click: 'click-select', ... }`). Memoize it. */
+    selectModeBehaviourIds: Record<string, string>;
+    /** Optional layout key → label map. Default: identity. */
+    layoutLabels?: Record<string, string>;
+    /** Optional select-mode key → label map. Default: identity. */
+    selectModeLabels?: Record<string, string>;
+    /** Optional select-mode key → icon map. Shown on the trigger and beside each option. */
+    selectModeIcons?: Record<string, ToolbarIcon>;
+    /** Initially-selected layout key. */
+    initialLayout?: string;
+    /** Initially-active select mode key. */
+    initialSelectMode?: string;
+    /** Target `GraphLayer` id. Default `'graph'`. */
+    layerId?: string;
+    /** Where the toolbar pins. Default `'top-center'`. */
+    position?: PanelPosition;
+    /** Render without the `<Panel>` wrapper (embed in external chrome). Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Graph controls — layout selector + selection-mode selector. Both self-wire
+ * ({@link useLayout} / {@link useSelectMode}), but since layouts live in
+ * separate packages and mode-switching toggles consumer-registered behaviours,
+ * the consumer supplies the layout factory map and the mode→behaviour-id map.
+ */
+declare function GraphLayoutToolbar({ layouts, selectModeBehaviourIds, layoutLabels, selectModeLabels, selectModeIcons, initialLayout, initialSelectMode, layerId, position, bare, canvas, className, }: GraphLayoutToolbarProps): react_jsx_runtime.JSX.Element;
+
+/** Icons for the modeller toolbar. The four tool icons are required; the rest gate their controls. */
+interface ModellerToolbarIconSet {
+    select: ToolbarIcon;
+    add: ToolbarIcon;
+    connect: ToolbarIcon;
+    delete: ToolbarIcon;
+    /** Required when `showHistory` is on (the default). */
+    undo?: ToolbarIcon;
+    redo?: ToolbarIcon;
+    /** Optional leading icon for the Clear button. */
+    clear?: ToolbarIcon;
+}
+interface ModellerToolbarProps {
+    icons: ModellerToolbarIconSet;
+    /** Which tool toggles to show, in order. Default `['select','add','connect','delete']`. */
+    tools?: readonly GraphTool[];
+    /** Override the tool tooltips / accessible labels. */
+    labels?: Partial<Record<GraphTool, string>>;
+    /**
+     * Node-kind options for the **Add** tool's shape picker (key → label). The
+     * picker shows only while the Add tool is active. Omit / leave empty to hide
+     * it (e.g. when your `createNode` factory is fixed-shape).
+     */
+    nodeKinds?: Record<string, string>;
+    /** Per-kind icons for the shape picker. */
+    nodeKindIcons?: Record<string, ToolbarIcon>;
+    /** Show undo / redo (needs `icons.undo` + `icons.redo`). Default `true`. */
+    showHistory?: boolean;
+    /** Show the clear-canvas button. Default `true`. */
+    showClear?: boolean;
+    /** Layer the clear button targets. Default `'graph'`. */
+    layerId?: string;
+    /** Where the toolbar pins. Default `'top-center'`. */
+    position?: PanelPosition;
+    /** Stack direction. Default `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Render without the `<Panel>` wrapper (embed in external chrome). Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Turnkey **drawing / modeller** toolbar — tool toggles (Select / Add / Connect
+ * / Delete) plus an optional Add-tool shape picker, undo/redo, and clear. The
+ * canvas equivalent of a drawing app's tool palette.
+ *
+ * Self-wires the tool toggles through {@link useTool} (requires a
+ * `<GraphToolProvider>` ancestor) and the undo/redo/clear actions through their
+ * own hooks (a `<GraphHistoryProvider>` makes them live). The consumer still
+ * declares the drawing behaviours, gating each one's `enabled` on the active
+ * tool — this toolbar owns the *tool state*, not the behaviours.
+ */
+declare function ModellerToolbar({ icons, tools, labels, nodeKinds, nodeKindIcons, showHistory, showClear, layerId, position, orientation, bare, canvas, className, }: ModellerToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface InspectorPanelProps {
+    /** GraphLayer to read/write. Default `'graph'`. */
+    layerId?: string;
+    /** Id of the `ClickInspectBehaviour` the edit target is read from. Default `'click-inspect'`. */
+    inspectId?: string;
+    /** Where the panel pins. Default `'top-right'`. */
+    position?: PanelPosition;
+    /** Show the label field (nodes, non-`typeAsLabel` mode only). Default `true`. */
+    showLabel?: boolean;
+    /**
+     * Modeller mode — edit a single `type` field on both nodes and edges that also
+     * drives the drawn label. Hides the label field for both. Default `false`.
+     */
+    typeAsLabel?: boolean;
+    /** Heading when a node is selected. Default `'Node'`. */
+    nodeTitle?: string;
+    /** Heading when an edge is selected. Default `'Edge'`. */
+    edgeTitle?: string;
+    /** Render the bare editor without the `<Panel>` wrapper. Default `false`. */
+    bare?: boolean;
+    /** Explicit canvas instance; defaults to the context canvas. */
+    canvas?: Canvas$1 | null;
+    className?: string;
+}
+/**
+ * Self-wiring **inspector** — shows a {@link PropertiesEditor} for the single
+ * node/edge the user clicked to edit and commits edits (label + `data`, plus
+ * `type` + reverse for edges) back to the store undoably. The property-editing
+ * analogue of `CanvasControlsToolbar`: drop it inside `<Canvas>` and it appears
+ * whenever an element is clicked for editing, and renders nothing otherwise.
+ *
+ * Needs a `ClickInspectBehaviour` (for the click-to-edit target) and, for
+ * undoable commits, a `<GraphHistoryProvider>` ancestor. Remounts the editor
+ * (via `key`) when the targeted element changes, so the form reloads from it.
+ */
+declare function InspectorPanel({ layerId, inspectId, position, showLabel, typeAsLabel, nodeTitle, edgeTitle, bare, canvas, className, }: InspectorPanelProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Context handed to a context-menu `items` builder for an empty-canvas
+ * (background) right-click. Carries the pointer position, the live `Canvas`,
+ * and a `close` callback for items that need to dismiss the menu explicitly
+ * (auto-close already fires `close` after every leaf `onClick`).
+ */
+interface GraphContextMenuContext {
+    /** Pointer position in world (scene) coordinates — e.g. to place a new node. */
+    readonly world: {
+        readonly x: number;
+        readonly y: number;
+    };
+    /** Pointer position in canvas-relative screen px (where the overlay sits). */
+    readonly screen: {
+        readonly x: number;
+        readonly y: number;
+    };
+    /** The live engine instance, for reaching layers / behaviours / camera. */
+    readonly canvas: Canvas$1;
+    /** Dismiss the menu. Available for manual control; auto-close uses it too. */
+    readonly close: () => void;
+}
+/**
+ * Context handed to a node/edge context-menu `items` builder. Extends
+ * {@link GraphContextMenuContext} with the right-clicked element's `id` and its
+ * arbitrary `data` payload (`node.data` / `edge.data`).
+ */
+interface GraphTargetMenuContext extends GraphContextMenuContext {
+    /** Id of the right-clicked node / edge. */
+    readonly id: string;
+    /** Arbitrary user payload from `node.data` / `edge.data` (`undefined` if none). */
+    readonly data: unknown;
+}
+/** Options shared by all three `Graph*ContextMenu` components. */
+interface GraphContextMenuCommonProps {
+    /** GraphLayer id whose nodes/edges this menu watches; default `'graph'`. */
+    layerId?: string;
+    /** Whether the menu is active; reactive. Default `true`. */
+    enabled?: boolean;
+    /** Stacking order of the overlay; default `1000`. */
+    zIndex?: number;
+    /** Extra inline style merged onto the overlay wrapper. */
+    style?: CSSProperties;
+    /**
+     * Auto-close the menu after any leaf item's `onClick`. Default `true`.
+     * Set `false` to manage dismissal yourself via `ctx.close`.
+     */
+    autoClose?: boolean;
+}
+
+/** Context handed to {@link GraphNodeContextMenuProps.items}. */
+type GraphNodeMenuContext = GraphTargetMenuContext;
+interface GraphNodeContextMenuProps extends GraphContextMenuCommonProps {
+    /**
+     * Build the menu shown when a **node** is right-clicked. Receives the node's
+     * `id`, its `data`, the pointer position, the live `canvas`, and `close`.
+     * Return the `@invana/ui` `MenuItem[]` to render.
+     */
+    items: (ctx: GraphNodeMenuContext) => MenuItem[];
+    /** Behaviour id; default `'node-context-menu'`. */
+    id?: string;
+    /**
+     * Transient state name applied to the right-clicked node while the menu is
+     * open (e.g. `'context-open'`), cleared on the next open / dismiss. Default
+     * `null` (no marker).
+     */
+    state?: string | null;
+}
+/**
+ * Node-scoped right-click menu for a `GraphLayer`. Drop it inside `<Canvas>`
+ * (alongside the layer) and pass an `items` builder — the behaviour wiring,
+ * positioning, dismissal (outside-click / Escape), and auto-close are handled
+ * internally.
+ *
+ * Pairs with {@link GraphEdgeContextMenu} and {@link GraphBackgroundContextMenu};
+ * each owns a distinct behaviour scoped to its own target, so the three compose
+ * without conflict.
+ *
+ * @example
+ * ```tsx
+ * <GraphNodeContextMenu
+ *   items={({ id, canvas, close }) => [
+ *     { id: 'edit', label: 'Edit', onClick: () => editNode(id) },
+ *     { id: 'delete', label: 'Delete', onClick: () => deleteNode(id) },
+ *   ]}
+ * />
+ * ```
+ */
+declare function GraphNodeContextMenu({ items, id, ...common }: GraphNodeContextMenuProps): react_jsx_runtime.JSX.Element;
+
+/** Context handed to {@link GraphEdgeContextMenuProps.items}. */
+type GraphEdgeMenuContext = GraphTargetMenuContext;
+interface GraphEdgeContextMenuProps extends GraphContextMenuCommonProps {
+    /**
+     * Build the menu shown when an **edge** is right-clicked. Receives the edge's
+     * `id`, its `data`, the pointer position, the live `canvas`, and `close`.
+     * Return the `@invana/ui` `MenuItem[]` to render.
+     */
+    items: (ctx: GraphEdgeMenuContext) => MenuItem[];
+    /** Behaviour id; default `'edge-context-menu'`. */
+    id?: string;
+    /**
+     * Transient state name applied to the right-clicked edge while the menu is
+     * open (e.g. `'context-open'`), cleared on the next open / dismiss. Default
+     * `null` (no marker).
+     */
+    state?: string | null;
+}
+/**
+ * Edge-scoped right-click menu for a `GraphLayer`. Drop it inside `<Canvas>`
+ * (alongside the layer) and pass an `items` builder — the behaviour wiring,
+ * positioning, dismissal (outside-click / Escape), and auto-close are handled
+ * internally.
+ *
+ * Pairs with {@link GraphNodeContextMenu} and {@link GraphBackgroundContextMenu};
+ * each owns a distinct behaviour scoped to its own target, so the three compose
+ * without conflict.
+ *
+ * @example
+ * ```tsx
+ * <GraphEdgeContextMenu
+ *   items={({ id, close }) => [
+ *     { id: 'reverse', label: 'Reverse direction', onClick: () => reverseEdge(id) },
+ *     { id: 'delete', label: 'Delete', onClick: () => deleteEdge(id) },
+ *   ]}
+ * />
+ * ```
+ */
+declare function GraphEdgeContextMenu({ items, id, ...common }: GraphEdgeContextMenuProps): react_jsx_runtime.JSX.Element;
+
+/** Context handed to {@link GraphBackgroundContextMenuProps.items}. */
+type GraphBackgroundMenuContext = GraphContextMenuContext;
+interface GraphBackgroundContextMenuProps extends GraphContextMenuCommonProps {
+    /**
+     * Build the menu shown when the **empty canvas** is right-clicked. Receives
+     * the pointer position (`world` is handy for "add node here"), the live
+     * `canvas`, and `close`. Return the `@invana/ui` `MenuItem[]` to render.
+     */
+    items: (ctx: GraphBackgroundMenuContext) => MenuItem[];
+    /** Behaviour id; default `'background-context-menu'`. */
+    id?: string;
+}
+/**
+ * Background-scoped right-click menu for a `GraphLayer` — fires on a right-click
+ * over the empty canvas (not on any node or edge). Drop it inside `<Canvas>`
+ * (alongside the layer) and pass an `items` builder — the behaviour wiring,
+ * positioning, dismissal (outside-click / Escape), and auto-close are handled
+ * internally.
+ *
+ * Pairs with {@link GraphNodeContextMenu} and {@link GraphEdgeContextMenu}; each
+ * owns a distinct behaviour scoped to its own target, so the three compose
+ * without conflict.
+ *
+ * @example
+ * ```tsx
+ * <GraphBackgroundContextMenu
+ *   items={({ world, canvas }) => [
+ *     { id: 'add', label: 'Add node here', onClick: () => addNodeAt(world) },
+ *     { id: 'fit', label: 'Fit to content', onClick: () => fit(canvas) },
+ *   ]}
+ * />
+ * ```
+ */
+declare function GraphBackgroundContextMenu({ items, id, ...common }: GraphBackgroundContextMenuProps): react_jsx_runtime.JSX.Element;
+
+export { type ApplicableLayout, BackgroundLayer, type BackgroundLayerProps, BrushSelectBehaviour, type BrushSelectBehaviourProps, Canvas, CanvasContext, CanvasControlsToolbar, type CanvasControlsToolbarIconSet, type CanvasControlsToolbarProps, type CanvasProps, ClearButton, type ClearButtonProps, ClickInspectBehaviour, type ClickInspectBehaviourProps, ClickSelectBehaviour, type ClickSelectBehaviourProps, ClipboardContext, CollapseExpandBehaviour, type CollapseExpandBehaviourProps, ContextMenuBehaviour, type ContextMenuBehaviourProps, ContextMenuOverlay, type ContextMenuOverlayProps, type ContextMenuState, ControlButton, type ControlButtonProps, CopyButton, type CopyButtonProps, CreateNodeBehaviour, type CreateNodeBehaviourProps, CutButton, type CutButtonProps, D3ForceLayout, type D3ForceLayoutProps, DEFAULT_EDGE_TYPES, DEFAULT_EDGE_TYPE_LABELS, DegreeSizeBehaviour, type DegreeSizeBehaviourProps, DeleteSelectionButton, type DeleteSelectionButtonProps, DragNodeBehaviour, type DragNodeBehaviourProps, DragPanBehaviour, type DragPanBehaviourProps, DrawEdgeBehaviour, type DrawEdgeBehaviourProps, EdgeSizeLODBehaviour, type EdgeSizeLODBehaviourProps, EdgeTypePicker, type EdgeTypePickerProps, EditToolbar, type EditToolbarIconSet, type EditToolbarProps, type EntityEditorTarget, EraseBehaviour, type EraseBehaviourProps, FitContentButton, type FitContentButtonProps, GraphBackgroundContextMenu, type GraphBackgroundContextMenuProps, type GraphBackgroundMenuContext, GraphClipboardProvider, type GraphClipboardProviderProps, type GraphContextMenuCommonProps, type GraphContextMenuContext, GraphEdgeContextMenu, type GraphEdgeContextMenuProps, type GraphEdgeMenuContext, GraphHistoryProvider, type GraphHistoryProviderProps, GraphLayer, type GraphLayerProps, GraphLayoutToolbar, type GraphLayoutToolbarProps, GraphNodeContextMenu, type GraphNodeContextMenuProps, type GraphNodeMenuContext, type GraphTargetMenuContext, type GraphTool, GraphToolProvider, type GraphToolProviderProps, GraphToolbar, type GraphToolbarProps, GridToggle, type GridToggleProps, GridToolbar, type GridToolbarIconSet, type GridToolbarProps, HistoryContext, HistoryToolbar, type HistoryToolbarIconSet, type HistoryToolbarProps, HoverActivateBehaviour, type HoverActivateBehaviourProps, InspectorPanel, type InspectorPanelProps, KeyboardCameraInputBehaviour, type KeyboardCameraInputBehaviourProps, LabelCollisionBehaviour, type LabelCollisionBehaviourProps, LabelResolutionLODBehaviour, type LabelResolutionLODBehaviourProps, LassoSelectBehaviour, type LassoSelectBehaviourProps, type LayoutFactory, LayoutPicker, type LayoutPickerProps, LockButton, type LockButtonProps, LockToggle, type LockToggleProps, MiniMapLayer, type MiniMapLayerProps, ModellerToolbar, type ModellerToolbarIconSet, type ModellerToolbarProps, NodeResizeBehaviour, type NodeResizeBehaviourProps, NodeSizeLODBehaviour, type NodeSizeLODBehaviourProps, OptionPicker, type OptionPickerProps, Panel, type PanelPosition, type PanelProps, ParallelEdgeBehaviour, type ParallelEdgeBehaviourProps, PasteButton, type PasteButtonProps, PinchZoomBehaviour, type PinchZoomBehaviourProps, PropertiesEditor, type PropertiesEditorProps, type PropertiesEditorValues, RedoButton, type RedoButtonProps, RedrawButton, type RedrawButtonProps, ResponsiveThemeBehaviour, type ResponsiveThemeBehaviourProps, SelectModePicker, type SelectModePickerProps, ThemeToggle, type ThemeToggleProps, ToolContext, type ToolContextValue, type ToolbarIcon, type TooltipSide, Tooltipped, type TooltippedProps, UndoButton, type UndoButtonProps, type UseCameraResult, type UseClearGraphResult, type UseClipboardOptions, type UseClipboardResult, type UseContextMenuResult, type UseDrawHistoryResult, type UseEdgeTypeOptions, type UseEdgeTypeResult, type UseEntityEditorOptions, type UseFitContentResult, type UseGridOptions, type UseGridResult, type UseHistoryOptions, type UseHistoryResult, type UseInspectTargetOptions, type UseLayoutOptions, type UseLayoutResult, type UseLockOptions, type UseLockResult, type UseSelectModeOptions, type UseSelectModeResult, type UseSelectionOptions, type UseSelectionResult, type UseThemeOptions, type UseThemeResult, type UseZoomResult, ViewToolbar, type ViewToolbarIconSet, type ViewToolbarProps, WheelZoomBehaviour, type WheelZoomBehaviourProps, ZoomControls, type ZoomControlsProps, ZoomPicker, type ZoomPickerProps, useCamera, useCanvas, useCanvasEvent, useClearGraph, useClipboard, useContextMenu, useDrawHistory, useEdgeType, useEntityEditor, useFitContent, useGrid, useHistory, useInspectTarget, useLayout, useLock, useSelectMode, useSelection, useTheme, useTool, useZoom };