@dschz/solid-flow 0.3.0-next.3 → 0.3.0-next.4

package/README.md

@@ -184,8 +184,26 @@ const nodeData = useNodesData(["node-1", "node-2"]);
 
 // Node connection information
 const connections = useNodeConnections("node-1");
+
+// Which node/edge a nested component is rendered inside (for building
+// composable custom nodes and edge labels without prop drilling)
+const nodeId = useNodeId();
+const edgeId = useEdgeId();
 ```
 
+#### Coming from React Flow?
+
+Some React Flow hooks intentionally have no Solid Flow equivalent, because
+Solid's fine-grained reactivity makes them unnecessary:
+
+- `useOnSelectionChange` / `useOnViewportChange` — reading `flow.selection`
+  or `flow.viewport` (from `useSolidFlow()`) in a tracked scope IS the
+  subscription; wrap side effects in `createEffect` over those reads.
+- `useNodesState` / `useEdgesState` — use `createNodeStore` /
+  `createEdgeStore` instead.
+- `useStore` — the reactive `flow` struct is the supported read surface;
+  there is no public escape hatch into internals.
+
 ### Utility Functions
 
 ```tsx

package/dist/index/index.d.ts

@@ -2,6 +2,7 @@ import { JSX } from "@solidjs/web";
 import { Align as Align$1, AriaLabelConfig as AriaLabelConfig$1, BezierPathOptions as BezierPathOptions$1, Box as Box$1, ColorMode as ColorMode$1, ColorModeClass as ColorModeClass$1, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ConnectionState, ControlLinePosition, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, DefaultEdgeOptionsBase, Dimensions as Dimensions$1, EdgeBase, EdgeMarker, EdgeMarkerType as EdgeMarkerType$1, EdgePosition, EdgeToolbarBaseProps, FinalConnectionState, FitBounds, FitBoundsOptions as FitBoundsOptions$1, FitViewOptionsBase, GetBezierPathParams as GetBezierPathParams$1, GetSmoothStepPathParams as GetSmoothStepPathParams$1, GetStraightPathParams as GetStraightPathParams$1, Handle as Handle$1, HandleConnection, HandleConnection as HandleConnection$1, HandleProps, HandleType, InternalNodeBase, IsValidConnection as IsValidConnection$1, MarkerProps, MarkerType, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeOrigin, NodeOrigin as NodeOrigin$1, NodeProps as NodeProps$1, OnBeforeDeleteBase, OnConnect as OnConnect$1, OnConnectEnd as OnConnectEnd$1, OnConnectStart as OnConnectStart$1, OnConnectStartParams as OnConnectStartParams$1, OnError as OnError$1, OnMove, OnMove as OnMove$1, OnMoveEnd as OnMoveEnd$1, OnMoveStart as OnMoveStart$1, OnReconnect as OnReconnect$1, OnReconnectEnd as OnReconnectEnd$1, OnReconnectStart as OnReconnectStart$1, OnResize as OnResize$1, OnResizeEnd as OnResizeEnd$1, OnResizeStart as OnResizeStart$1, OnSelectionDrag as OnSelectionDrag$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanelPosition, PanelPosition as PanelPosition$1, Position, Position as Position$1, ProOptions as ProOptions$1, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeDragEvent as ResizeDragEvent$1, ResizeParams as ResizeParams$1, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode as SelectionMode$1, SelectionRect as SelectionRect$1, SetCenter, SetCenterOptions as SetCenterOptions$1, SetViewport, ShouldResize, ShouldResize as ShouldResize$1, SmoothStepPathOptions as SmoothStepPathOptions$1, SnapGrid as SnapGrid$1, StepPathOptions, Transform as Transform$1, UpdateNodeInternals, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, XYZPosition as XYZPosition$1, ZIndexMode, ZoomInOut, addEdge, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getConnectedEdges, getEdgeCenter as getEdgeCenter$1, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from "@xyflow/system";
 import { Accessor, ParentComponent, ParentProps, Store, StoreSetter } from "solid-js";
 //#region src/types/custom.d.ts
+/** An arbitrary string-keyed record — the unconstrained default for node/edge data. */
 type UnknownStruct = Record<string, unknown>;
 //#endregion
 //#region src/types/node.d.ts
@@ -26,9 +27,12 @@ type Node<NodeData extends UnknownStruct = UnknownStruct, NodeType extends strin
    */
   ariaRole?: JSX.HTMLAttributes<HTMLDivElement>["role"];
   /**
-   * General escape hatch for adding custom attributes to the node's DOM element.
+   * General escape hatch for adding custom attributes to the node's DOM
+   * element. Event handlers, refs, and content-injection props are excluded
+   * (Svelte Flow parity: their omit of `keyof DOMAttributes`); interaction
+   * belongs on the node component, not here.
    */
-  domAttributes?: Omit<JSX.HTMLAttributes<HTMLDivElement>, "id" | "style" | "class" | "draggable" | "role" | "aria-label" | keyof JSX.HTMLAttributes<HTMLDivElement>>;
+  domAttributes?: Omit<JSX.HTMLAttributes<HTMLDivElement>, "id" | "style" | "class" | "draggable" | "role" | "aria-label" | "innerHTML" | "textContent" | "children" | keyof JSX.CustomAttributes<HTMLDivElement> | keyof JSX.EventHandlersElement<HTMLDivElement> | keyof JSX.EventHandlersWindow<HTMLDivElement>>;
 };
 /** Props passed to a node component (custom or built-in). */
 type NodeProps<TData extends UnknownStruct = UnknownStruct, TType extends string | undefined = string | undefined> = NodeProps$1<Node<TData, TType>>;
@@ -449,7 +453,12 @@ type EdgeReconnectAnchorProps = {
   readonly style?: JSX.CSSProperties;
   readonly position?: XYPosition$1;
   readonly size?: number;
+  /** Externally mark the anchor as reconnecting (hides its children), in
+   * addition to the gesture-driven internal state. */
   readonly reconnecting?: boolean;
+  /** Called when a reconnect gesture on this anchor starts/ends — the Solid
+   * translation of Svelte Flow's `bind:reconnecting`. */
+  readonly onReconnectingChange?: (reconnecting: boolean) => void;
 } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
 /** Grab area that lets an edge end be dragged off its handle and reconnected. */
 declare const EdgeReconnectAnchor: (props: ParentProps<EdgeReconnectAnchorProps>) => JSX.Element;
@@ -845,13 +854,25 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    */
   readonly selectionOnDrag?: boolean;
   /**
-   * Viewport culling: elements outside the (overscanned) viewport are hidden
-   * with CSS (`visibility: hidden` + `pointer-events: none`). Everything
-   * stays mounted — custom nodes keep their DOM state off-screen, and
-   * measurement/fitView/minimap are unaffected. Selected elements are never
-   * culled. Set to `false` to keep every element visible; note that culled
-   * elements leave the accessibility tree and tab order while off-screen.
-   * @default true
+   * Only render (mount) elements inside the overscanned viewport: nodes and
+   * edges outside it are unmounted entirely, and remount as the viewport
+   * reaches them. This is the heavy-duty tier for very large graphs — at
+   * 10k nodes it cuts the DOM by ~16x, roughly halves memory, and makes
+   * node drags ~3.7x faster (fewer live subscribers).
+   *
+   * The flow's data graph is unaffected: positions, selection, and cached
+   * measurements live outside the components, so an unmounted node comes
+   * back exactly as it left (at its measured size, still selected).
+   * Component-LOCAL state does not survive — signals created inside a
+   * custom node, uncontrolled inputs, scroll positions of inner elements.
+   * Keep state you care about in `node.data`. Never unmounted: selected
+   * elements, unmeasured nodes, and the node holding DOM focus.
+   *
+   * Independent of this prop, off-viewport elements are always CSS-culled
+   * (`visibility: hidden` + `pointer-events: none`, everything stays
+   * mounted) — that tier has no user-visible semantics beyond leaving the
+   * accessibility tree and tab order while off-screen.
+   * @default false
    */
   readonly onlyRenderVisibleElements?: boolean;
   /**
@@ -1022,22 +1043,33 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   readonly ariaLabelConfig?: Partial<AriaLabelConfig$1>;
 };
 //#endregion
-//#region src/components/SolidFlow/component.d.ts
+//#region src/components/SolidFlow.d.ts
 type SolidFlowComponentProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ParentProps<SolidFlowProps<NodeType, EdgeType>> & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style" | "onselectionchange" | "onSelectionChange">;
 /** The flow canvas component: renders nodes and edges and wires up viewport and interactions. */
 declare const SolidFlow: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: SolidFlowComponentProps<NodeType, EdgeType>) => JSX.Element;
 //#endregion
-//#region src/components/SolidFlow/provider.d.ts
+//#region src/components/SolidFlowProvider.d.ts
 /** Hoists flow state above `SolidFlow` so hooks work outside the component (multi-panel UIs). */
 declare const SolidFlowProvider: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<SolidFlowProps<NodeType, EdgeType>>) => JSX.Element;
 //#endregion
 //#region src/core/createEdgeStore.d.ts
-type ExtractEdgeInfo<T> = T extends ((props: EdgeProps<infer TData, infer TType>) => unknown) ? {
-  data: TData;
-  type: TType;
-} : never;
+type EdgeDataOf<T> = T extends ((props: EdgeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
 type AllEdgeTypes<TUserEdgeTypes extends EdgeTypes> = TUserEdgeTypes extends Record<string, never> ? BuiltInEdgeTypes : BuiltInEdgeTypes & TUserEdgeTypes;
-type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["data"], ExtractEdgeInfo<AllEdgeTypes<TUserEdgeTypes>[K]>["type"]>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
+/**
+ * The discriminated union of edge configurations for a renderer map: one
+ * member per built-in and custom edge type, with `data` narrowed by the
+ * `type` discriminant (the MAP KEY — what the renderer actually matches).
+ * Use it to carry `createEdgeStore`'s guided typing anywhere a plain array
+ * or vanilla store is typed:
+ *
+ * ```typescript
+ * const initialEdges = [
+ *   { id: "e1", source: "1", target: "2", type: "labeled", data: { label: "hi" } },
+ * ] satisfies EdgesFor<typeof edgeTypes>[];
+ * ```
+ */
+type EdgesFor<TUserEdgeTypes extends EdgeTypes = Record<string, never>> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<EdgeDataOf<AllEdgeTypes<TUserEdgeTypes>[K]>, K & string>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
+type EdgesInput<TUserEdgeTypes extends EdgeTypes> = EdgesFor<TUserEdgeTypes>;
 /**
  * Creates a type-safe reactive store of edges for use in Solid Flow.
  *
@@ -1114,7 +1146,7 @@ type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<T
  * - Works seamlessly with both built-in and custom node types
  * - Type errors prevent invalid type names or incorrect data structures
  */
-declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: EdgesInput<TUserEdgeTypes>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
+declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: NoInfer<EdgesInput<TUserEdgeTypes>>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
 //#endregion
 //#region src/core/projections/connections.d.ts
 /**
@@ -1270,12 +1302,23 @@ type FlowCommands<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
 };
 //#endregion
 //#region src/core/createNodeStore.d.ts
-type ExtractNodeInfo<T> = T extends ((props: NodeProps<infer TData, infer TType>) => unknown) ? {
-  data: TData;
-  type: TType;
-} : never;
+type NodeDataOf<T> = T extends ((props: NodeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
 type AllNodeTypes<TUserNodeTypes extends NodeTypes> = TUserNodeTypes extends Record<string, never> ? BuiltInNodeTypes : BuiltInNodeTypes & TUserNodeTypes;
-type NodesInput<TUserNodeTypes extends NodeTypes> = { [K in keyof AllNodeTypes<TUserNodeTypes>]: Node<ExtractNodeInfo<AllNodeTypes<TUserNodeTypes>[K]>["data"], ExtractNodeInfo<AllNodeTypes<TUserNodeTypes>[K]>["type"]>; }[keyof AllNodeTypes<TUserNodeTypes>];
+/**
+ * The discriminated union of node configurations for a renderer map: one
+ * member per built-in and custom node type, with `data` narrowed by the
+ * `type` discriminant (the MAP KEY — what the renderer actually matches).
+ * Use it to carry `createNodeStore`'s guided typing anywhere a plain array
+ * or vanilla store is typed:
+ *
+ * ```typescript
+ * const initialNodes = [
+ *   { id: "1", type: "custom", position: { x: 0, y: 0 }, data: { value: 1 } },
+ * ] satisfies NodesFor<typeof nodeTypes>[];
+ * ```
+ */
+type NodesFor<TUserNodeTypes extends NodeTypes = Record<string, never>> = { [K in keyof AllNodeTypes<TUserNodeTypes>]: Node<NodeDataOf<AllNodeTypes<TUserNodeTypes>[K]>, K & string>; }[keyof AllNodeTypes<TUserNodeTypes>];
+type NodesInput<TUserNodeTypes extends NodeTypes> = NodesFor<TUserNodeTypes>;
 /**
  * Creates a type-safe reactive store of nodes for use in Solid Flow.
  *
@@ -1347,7 +1390,7 @@ type NodesInput<TUserNodeTypes extends NodeTypes> = { [K in keyof AllNodeTypes<T
  * - Works seamlessly with both built-in and custom node types
  * - Type errors prevent invalid type names or incorrect data structures
  */
-declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NodesInput<TUserNodeTypes>[]) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
+declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NoInfer<NodesInput<TUserNodeTypes>>[]) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
 //#endregion
 //#region src/hooks/useColorMode.d.ts
 /**
@@ -1377,14 +1420,14 @@ declare function useConnection(): Accessor<ConnectionState>;
  * @public
  * @returns store with an array of nodes
  */
-declare function useNodes<NodeType extends Node = Node>(): Accessor<NodeType[]>;
+declare function useNodes<NodeType extends Node = Node>(): Accessor<readonly NodeType[]>;
 /**
  * Hook for getting the current edges from the store.
  *
  * @public
  * @returns store with an array of edges
  */
-declare function useEdges<EdgeType extends Edge = Edge>(): Accessor<EdgeType[]>;
+declare function useEdges<EdgeType extends Edge = Edge>(): Accessor<readonly EdgeType[]>;
 /**
  * Hook for getting the current viewport from the store.
  *
@@ -1393,10 +1436,6 @@ declare function useEdges<EdgeType extends Edge = Edge>(): Accessor<EdgeType[]>;
  */
 declare function useViewport(): Accessor<Viewport$1>;
 //#endregion
-//#region src/hooks/useHandleEdgeSelect.d.ts
-/** Returns a callback applying edge-selection semantics for the given edge id. */
-declare function useHandleEdgeSelect(): (id: string) => void;
-//#endregion
 //#region src/hooks/useInitialized.d.ts
 /**
  * Hook for seeing if all nodes have been measured.
@@ -1420,11 +1459,16 @@ declare function useViewportInitialized(): Accessor<boolean>;
 //#endregion
 //#region src/hooks/useInternalNode.d.ts
 /**
- * Hook to get an internal node by id.
+ * Hook to get an internal node (the node enriched with measured dimensions,
+ * absolute position, and z-order) by id.
+ *
+ * The id is an accessor (not a plain string) on purpose: passing a raw
+ * reactive read like `props.nodeId` would capture the value once and silently
+ * lose reactivity — `useInternalNode(() => props.nodeId)` keeps it live.
  *
  * @public
- * @param id - the node id
- * @returns an accessor with an internal node or undefined
+ * @param id - a reactive accessor for the node id
+ * @returns an accessor with the internal node, or undefined while absent
  */
 declare function useInternalNode(id: Accessor<string>): Accessor<InternalNode | undefined>;
 //#endregion
@@ -1467,36 +1511,16 @@ declare function useNodesData<NodeType extends Node = Node>(nodeIds: Accessor<st
  * familiarity — `useSolidFlow().fitView()` and
  * `useSolidFlow().commands.fitView()` are the same function.
  *
- * The imperative getters are deprecated: event handlers are untracked scopes
- * in Solid, so reading `flow.viewport.zoom` (or `flow.internalNodes[id]`)
- * inside one already IS the imperative read — no wrapper needed — while the
- * same read in a tracked scope subscribes.
+ * There are no imperative getters: event handlers are untracked scopes in
+ * Solid, so reading `flow.viewport.zoom` (or `flow.internalNodes[id]`) inside
+ * one already IS the imperative read — while the same read in a tracked scope
+ * subscribes.
  */
 type UseSolidFlowReturn<NodeType extends Node = Node, EdgeType extends Edge = Edge> = FlowCommands<NodeType, EdgeType> & {
   /** The flow's data graph as one reactive struct — the canonical read surface. */
   readonly flow: FlowState<NodeType, EdgeType>;
   /** The flow's write surface (same functions as the spread members). */
   readonly commands: FlowCommands<NodeType, EdgeType>;
-  /** @deprecated Read `flow.internalNodes[id]` instead. */
-  readonly getInternalNode: (id: string) => InternalNode<NodeType> | undefined;
-  /** @deprecated Read `flow.internalNodes[id]?.internals.userNode` (or find in `flow.nodes`) instead. */
-  readonly getNode: (id: string) => NodeType | undefined;
-  /** @deprecated Read `flow.nodes` (or map ids over `flow.internalNodes`) instead. */
-  readonly getNodes: (ids?: string[]) => NodeType[];
-  /** @deprecated Read `flow.edges` (or find by id) instead. */
-  readonly getEdge: (id: string) => EdgeType | undefined;
-  /** @deprecated Read `flow.edges` (or filter by ids) instead. */
-  readonly getEdges: (ids?: string[]) => EdgeType[];
-  /** @deprecated Read `flow.viewport` instead. */
-  readonly getViewport: () => Viewport$1;
-  /** @deprecated Read `flow.viewport.zoom` instead. */
-  readonly getZoom: () => number;
-  /** @deprecated Read `flow.connections[connectionKey(nodeId, type, id)]` (or use `useNodeConnections`) instead. */
-  readonly getHandleConnections: (params: {
-    type: HandleType;
-    nodeId: string;
-    id?: string | null;
-  }) => HandleConnection$1[];
 };
 /**
  * Hook for accessing the flow instance: `{ flow, commands }` plus the
@@ -1506,7 +1530,7 @@ type UseSolidFlowReturn<NodeType extends Node = Node, EdgeType extends Edge = Ed
  * `const { flow, commands } = useSolidFlow()`.
  *
  * @public
- * @returns the flow's read struct, write surface, and deprecated aliases
+ * @returns the flow's read struct and write surface
  */
 declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): UseSolidFlowReturn<NodeType, EdgeType>;
 //#endregion
@@ -1519,6 +1543,30 @@ declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edg
  */
 declare function useUpdateNodeInternals(): UpdateNodeInternals;
 //#endregion
+//#region src/contexts/edgeId.d.ts
+/**
+ * Returns the id of the edge this component is rendered inside. Available
+ * anywhere in a custom edge's subtree (provided by the edge wrapper), so
+ * nested components — like a custom edge label — can learn their host edge
+ * without prop drilling.
+ *
+ * @public
+ * @returns a reactive accessor for the surrounding edge's id
+ */
+declare function useEdgeId(): Accessor<string>;
+//#endregion
+//#region src/contexts/nodeId.d.ts
+/**
+ * Returns the id of the node this component is rendered inside. Available
+ * anywhere in a custom node's subtree (provided by the node wrapper), so
+ * nested components — like a custom `Handle` — can learn their host node
+ * without prop drilling.
+ *
+ * @public
+ * @returns a reactive accessor for the surrounding node's id
+ */
+declare function useNodeId(): Accessor<string>;
+//#endregion
 //#region src/plugins/background/types.d.ts
 /** Available background pattern styles. */
 type BackgroundVariant = "lines" | "dots" | "cross";
@@ -1592,9 +1640,39 @@ type ControlsProps = {
 /** Viewport control panel: zoom in/out, fit view, and interactivity lock. */
 declare const Controls: (props: ParentProps<ControlsProps>) => JSX.Element;
 //#endregion
+//#region src/plugins/minimap/MiniMapNode.d.ts
+/**
+ * Props passed to a minimap node renderer — the default `MiniMapNode` or a
+ * custom component supplied via the `MiniMap` `nodeComponent` prop. Position
+ * and dimensions are in flow coordinates (the minimap svg's viewBox space).
+ */
+type MiniMapNodeProps = {
+  /** The id of the node this minimap representation stands for. */
+  readonly id: string;
+  readonly class?: string;
+  readonly x: number;
+  readonly y: number;
+  readonly width?: number;
+  readonly height?: number;
+  readonly borderRadius?: number;
+  readonly color?: string;
+  readonly shapeRendering: JSX.RectSVGAttributes<SVGRectElement>["shape-rendering"];
+  readonly strokeColor?: string;
+  readonly strokeWidth?: number;
+  readonly selected?: boolean;
+  /** The node's own style; its background feeds the default fill fallback. */
+  readonly style?: JSX.CSSProperties;
+  /** Click handler (wired when the `MiniMap` has `onNodeClick`); call with the node id. */
+  readonly onClick?: (event: MouseEvent, id: string) => void;
+};
+/** The default minimap node: a rounded rect. Custom `nodeComponent`s can wrap it. */
+declare const MiniMapNode: (props: MiniMapNodeProps) => JSX.Element;
+//#endregion
 //#region src/plugins/minimap/MiniMap.d.ts
+/** Derives a per-node minimap attribute (color, stroke, class) from the node. */
 type GetMiniMapNodeAttribute<NodeType extends Node> = (node: NodeType) => string;
-type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+/** Props for the `MiniMap` plugin. */
+type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style" | "onClick"> & {
   /** Background color of minimap */
   readonly bgColor?: string;
   /** Color of nodes on the minimap */
@@ -1626,8 +1704,17 @@ type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElemen
   readonly width?: number;
   /** Height of minimap */
   readonly height?: number;
+  /** Called when the minimap pane is clicked, with the position in flow coordinates. */
+  readonly onClick?: (event: MouseEvent, position: XYPosition$1) => void;
+  /** Called when a node on the minimap is clicked. */
+  readonly onNodeClick?: (event: MouseEvent, node: NodeType) => void;
   readonly pannable?: boolean;
   readonly zoomable?: boolean;
+  /**
+   * Custom component rendering each node on the minimap (receives
+   * {@link MiniMapNodeProps}); defaults to the built-in rounded rect.
+   */
+  readonly nodeComponent?: (props: MiniMapNodeProps) => JSX.Element;
   /** Invert the direction when panning the minimap viewport */
   readonly inversePan?: boolean;
   /** Step size for zooming in/out */
@@ -1824,4 +1911,4 @@ declare const getEdgeCenter: typeof getEdgeCenter$1;
 /** Returns the label center and offsets for a bezier edge. */
 declare const getBezierEdgeCenter: typeof getBezierEdgeCenter$1;
 //#endregion
-export { Align, AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, BezierPathOptions, Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, ColorMode, ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, GetBezierPathParams, GetSmoothStepPathParams, GetStraightPathParams, GroupNode, Handle, type HandleConnection, InputNode, type InternalNode, IsValidConnection, KeyDefinition, KeyDefinitionObject, KeyModifier, Marker, MarkerDefinition, MarkerType, MiniMap, type Node, type NodeConnection, NodeEvents, NodeGraph, type NodeOrigin, type NodeProps, NodeRenderer, NodeResizer, NodeSelection, NodeSelectionEvents, NodeToolbar, NodeToolbarProps, type NodeTypes, NodeWrapper, OnBeforeDelete, OnBeforeEdgeConnect, OnBeforeReconnect, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, OnError, type OnMove, OnMoveEnd, OnMoveStart, OnReconnect, OnReconnectEnd, OnReconnectStart, OnResize, OnResizeEnd, OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, ProOptions, Rect, ResizeControl, ResizeControlVariant, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, Selection, SelectionMode, SelectionRect, type SetCenter, SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, SmoothStepPathOptions, SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, Transform, UseSolidFlowReturn, Viewport, ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, XYZPosition, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };
+export { Align, AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, BezierPathOptions, Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, ColorMode, ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type EdgesFor, type FitBounds, FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, GetBezierPathParams, type GetMiniMapNodeAttribute, GetSmoothStepPathParams, GetStraightPathParams, GroupNode, Handle, type HandleConnection, InputNode, type InternalNode, IsValidConnection, KeyDefinition, KeyDefinitionObject, KeyModifier, Marker, MarkerDefinition, MarkerType, MiniMap, MiniMapNode, type MiniMapNodeProps, type MiniMapProps, type Node, type NodeConnection, NodeEvents, NodeGraph, type NodeOrigin, type NodeProps, NodeRenderer, NodeResizer, NodeSelection, NodeSelectionEvents, NodeToolbar, NodeToolbarProps, type NodeTypes, NodeWrapper, type NodesFor, OnBeforeDelete, OnBeforeEdgeConnect, OnBeforeReconnect, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, OnError, type OnMove, OnMoveEnd, OnMoveStart, OnReconnect, OnReconnectEnd, OnReconnectStart, OnResize, OnResizeEnd, OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, ProOptions, Rect, ResizeControl, ResizeControlVariant, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, Selection, SelectionMode, SelectionRect, type SetCenter, SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, SmoothStepPathOptions, SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, Transform, UseSolidFlowReturn, Viewport, ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, XYZPosition, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdgeId, useEdges, useInternalNode, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };