@dschz/solid-flow 1.0.0-next.6 → 1.0.0-next.8

package/README.md

@@ -152,6 +152,32 @@ The stores you pass as `nodes` / `edges` props are **controlled** — a delibera
 
 **Prefer letting the flow own the data?** Pass `defaultNodes` / `defaultEdges` instead of `nodes` / `edges` for an **uncontrolled** flow (React Flow parity): the arrays seed the flow once (later values are ignored), and membership belongs to the flow — commands like `addNodes` and completed connections persist with no adoption step. Read live state through `useSolidFlow()`'s `flow.nodes` / `flow.edges`. The two axes are independent, so you can control edges while leaving nodes uncontrolled (or vice versa); supplying both props on one axis is a mistake (`nodes` wins, with a dev warning).
 
+## Loading your graph from an API
+
+Both stores accept an async seed — pass `async () => data` instead of an array. No memo, no lifecycle juggling: reads are not-ready until the data lands (SolidJS 2.0's async model), so a `<Loading>` boundary holds the flow and swaps in the graph when it arrives. Afterwards the stores behave exactly like their array-seeded counterparts — drafts, adoption, wholesale replacement.
+
+```tsx
+import { Loading } from "@solidjs/web";
+
+const fetchNodes = async () => (await fetch("/api/graph/nodes")).json();
+const fetchEdges = async () => (await fetch("/api/graph/edges")).json();
+
+export const Flow = () => {
+  const [nodes] = createNodeStore(fetchNodes);
+  const [edges, setEdges] = createEdgeStore(fetchEdges);
+
+  return (
+    <Loading fallback={<div>Loading graph…</div>}>
+      <SolidFlow nodes={nodes} edges={edges} fitView>
+        <Background variant="dots" />
+      </SolidFlow>
+    </Loading>
+  );
+};
+```
+
+Where the boundary goes is your design decision (SolidJS 2.0: "fetch high, block low") — one `<Loading>` can cover the flow together with its toolbar and sidebar, or sit tight around the flow alone. Without any boundary the flow renders immediately (canvas, controls, background) and the graph pops in when the data arrives — there is deliberately no `fallback` prop. See the AsyncData playground example for the full version (including connection adoption after the async seed).
+
 ## The flow API
 
 `useSolidFlow()` returns `{ flow, commands }` (with `commands` also spread at the top level for React/Svelte Flow familiarity). Both are stable identities — destructuring is safe.
@@ -265,6 +291,7 @@ Reconnection lifecycle callbacks (`onReconnectStart`, `onReconnect`, `onReconnec
 Two complementary culling tiers keep large graphs fast:
 
 - **CSS culling (always on):** Elements outside the (overscanned) viewport are hidden with `visibility: hidden` + `pointer-events: none`. Everything stays mounted, so component state, measurement, and accessibility semantics are untouched — this tier has no userland contract at all.
+- **Gesture-time spatial queries:** Dragging a connection runs upstream's closest-handle search on every pointer move — a full node scan in stock React/Svelte Flow. Solid Flow snapshots node geometry into a spatial grid at gesture start (geometry is frozen mid-gesture) and answers from the pointer's neighborhood: at 10,000 nodes a connection drag went from ~422ms per move (unusable) to ~5ms median. Box selection and `getIntersectingNodes` use the same machinery.
 - **`onlyRenderVisibleElements` (opt-in):** Off-screen elements are **unmounted entirely** and remount as the viewport reaches them. At 10,000 nodes this cuts the DOM ~16x, roughly halves memory, and makes node drags several times faster. Positions, selection, and cached measurements live in the flow's data graph — outside your components — so elements come back exactly as they left. Component-_local_ state does not survive unmounting: keep state you care about in `node.data`. Selected elements, unmeasured nodes, and the node holding focus are never unmounted — and an element whose content must keep running off-screen (media, timers, embeds) can opt out of culling entirely with `cullable: false` on the node or edge.
 
 The MiniMap always renders the full graph in either mode — it reads the data graph, not the DOM.

package/dist/index/index.d.ts

@@ -368,10 +368,7 @@ type ConnectionLineProps<NodeType extends Node = Node> = {
 declare const ConnectionLine: <NodeType extends Node = Node>(props: ParentProps<Partial<ConnectionLineProps<NodeType>>>) => JSX.Element;
 //#endregion
 //#region src/components/container/EdgeRenderer.d.ts
-type EdgeRendererProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType> & {
-  readonly defaultEdgeOptions?: DefaultEdgeOptions;
-  readonly reconnectRadius: number;
-};
+type EdgeRendererProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType>;
 /** Internal renderer iterating the edge id list into `EdgeWrapper`s. */
 declare const EdgeRenderer: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: EdgeRendererProps<EdgeType>) => JSX.Element;
 //#endregion
@@ -864,6 +861,12 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @default false
    */
   readonly panOnScroll?: boolean;
+  /**
+   * Controls how fast the viewport pans while scrolling.
+   * Only applies when `panOnScroll` is enabled.
+   * @default 0.5
+   */
+  readonly panOnScrollSpeed?: number;
   /**
    * This prop is used to limit the direction of panning when panOnScroll is enabled.
    * The "free" option allows panning in any direction.
@@ -919,6 +922,12 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @default true
    */
   readonly autoPanOnNodeDrag?: boolean;
+  /**
+   * The speed at which the viewport auto-pans while dragging a node or a
+   * connection toward the edge of the viewport.
+   * @default 15
+   */
+  readonly autoPanSpeed?: number;
   /**
    * Defaults to be applied to all new edges that are added to the flow.
    * Properties on a new edge will override these defaults if they exist.
@@ -935,6 +944,11 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @example 'system' | 'light' | 'dark'
    */
   readonly colorMode?: ColorMode$1;
+  /**
+   * Static message announced to screen readers via the flow's aria-live
+   * region (in addition to the built-in keyboard-interaction messages).
+   */
+  readonly ariaLiveMessage?: string;
   /** Fallback color mode for SSR if colorMode is set to 'system' */
   readonly colorModeSSR?: Omit<ColorMode$1, "system">;
   /** Class to be applied to the flow container */
@@ -1086,102 +1100,6 @@ declare const SolidFlow: <NodeType extends Node = Node, EdgeType extends Edge =
 /** 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 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;
-/**
- * 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 SolidFlowEdge<typeof edgeTypes>[];
- * ```
- */
-type SolidFlowEdge<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> = SolidFlowEdge<TUserEdgeTypes>;
-/**
- * Creates a type-safe reactive store of edges for use in Solid Flow.
- *
- * This utility function provides full type safety and autocomplete for creating edges,
- * combining both built-in edge types (default, straight, step, smoothstep) and custom user-defined
- * edge types. When a specific edge type is selected, TypeScript automatically infers the
- * required data structure and validates the edge configuration.
- *
- * @template TUserEdgeTypes - The user's custom edge types map (optional)
- * @param edges - Array of edge configurations to create
- * @returns A SolidJS store tuple [store, setStore] with properly typed Edge objects
- *
- * @example
- * ```typescript
- * // Using only built-in edge types (no generic parameter needed)
- * const [builtInEdges, setBuiltInEdges] = createEdgeStore([
- *   {
- *     id: "1",
- *     source: "1",
- *     target: "2",
- *     type: "default",
- *     data: { label: "Start" }
- *   },
- *   {
- *     id: "2",
- *     source: "2",
- *     target: "3",
- *     type: "default",
- *     data: { label: "Process" }
- *   }
- * ]);
- * ```
- *
- * @example
- * ```typescript
- * // Using custom edge types (requires generic parameter)
- * const customEdgeTypes = {
- *   textEdge: (props: EdgeProps<{ content: string }, "textEdge">) =>
- *     <div>{props.data.content}</div>,
- *   numberEdge: (props: EdgeProps<{ value: number }, "numberEdge">) =>
- *     <div>{props.data.value}</div>
- * } satisfies EdgeTypes;
- *
- * const [mixedEdges, setMixedEdges] = createEdgeStore<typeof customEdgeTypes>([
- *   {
- *     id: "1",
- *     source: "1",
- *     target: "2",
- *     type: "default",        // Built-in type
- *     data: { label: "Input" }
- *   },
- *   {
- *     id: "2",
- *     source: "2",
- *     target: "3",
- *     type: "textEdge",     // Custom type - gets autocomplete
- *     data: { content: "Custom text edge" }  // Type-safe data
- *   },
- *   {
- *     id: "3",
- *     source: "3",
- *     target: "4",
- *     type: "numberEdge",   // Another custom type
- *     data: { value: 42 },  // Type-safe data
- *     style: { "background-color": "lightblue" }  // All Edge properties available
- *   }
- * ]);
- * ```
- *
- * @remarks
- * - Provides autocomplete for the `type` field with all available node types
- * - Validates `data` structure based on the selected node type
- * - Supports all Node properties (style, draggable, hidden, etc.)
- * - 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: NoInfer<EdgesInput<TUserEdgeTypes>>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
-//#endregion
 //#region src/core/projections/connections.d.ts
 /**
  * Lookup keys for the connection index. Each edge is registered under six
@@ -1335,7 +1253,109 @@ type FlowCommands<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
   };
 };
 //#endregion
-//#region src/core/createNodeStore.d.ts
+//#region src/core/stores/createEdgeStore.d.ts
+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;
+/**
+ * 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 SolidFlowEdge<typeof edgeTypes>[];
+ * ```
+ */
+type SolidFlowEdge<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> = SolidFlowEdge<TUserEdgeTypes>;
+/**
+ * Creates a type-safe reactive store of edges for use in Solid Flow.
+ *
+ * This utility function provides full type safety and autocomplete for creating edges,
+ * combining both built-in edge types (default, straight, step, smoothstep) and custom user-defined
+ * edge types. When a specific edge type is selected, TypeScript automatically infers the
+ * required data structure and validates the edge configuration.
+ *
+ * @template TUserEdgeTypes - The user's custom edge types map (optional)
+ * @param edges - Array of edge configurations to create
+ * @returns A SolidJS store tuple [store, setStore] with properly typed Edge objects
+ *
+ * @example
+ * ```typescript
+ * // Using only built-in edge types (no generic parameter needed)
+ * const [builtInEdges, setBuiltInEdges] = createEdgeStore([
+ *   {
+ *     id: "1",
+ *     source: "1",
+ *     target: "2",
+ *     type: "default",
+ *     data: { label: "Start" }
+ *   },
+ *   {
+ *     id: "2",
+ *     source: "2",
+ *     target: "3",
+ *     type: "default",
+ *     data: { label: "Process" }
+ *   }
+ * ]);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using custom edge types (requires generic parameter)
+ * const customEdgeTypes = {
+ *   textEdge: (props: EdgeProps<{ content: string }, "textEdge">) =>
+ *     <div>{props.data.content}</div>,
+ *   numberEdge: (props: EdgeProps<{ value: number }, "numberEdge">) =>
+ *     <div>{props.data.value}</div>
+ * } satisfies EdgeTypes;
+ *
+ * const [mixedEdges, setMixedEdges] = createEdgeStore<typeof customEdgeTypes>([
+ *   {
+ *     id: "1",
+ *     source: "1",
+ *     target: "2",
+ *     type: "default",        // Built-in type
+ *     data: { label: "Input" }
+ *   },
+ *   {
+ *     id: "2",
+ *     source: "2",
+ *     target: "3",
+ *     type: "textEdge",     // Custom type - gets autocomplete
+ *     data: { content: "Custom text edge" }  // Type-safe data
+ *   },
+ *   {
+ *     id: "3",
+ *     source: "3",
+ *     target: "4",
+ *     type: "numberEdge",   // Another custom type
+ *     data: { value: 42 },  // Type-safe data
+ *     style: { "background-color": "lightblue" }  // All Edge properties available
+ *   }
+ * ]);
+ * ```
+ *
+ * @remarks
+ * - Provides autocomplete for the `type` field with all available edge types
+ * - Validates `data` structure based on the selected edge type
+ * - Supports all Edge properties (style, animated, selectable, etc.)
+ * - Works seamlessly with both built-in and custom edge types
+ * - Type errors prevent invalid type names or incorrect data structures
+ */
+/**
+ * Also accepts an async seed ("Fetch High"): pass `async () => edges`
+ * instead of an array. Reads throw `NotReadyError` until the first value
+ * (cover the flow with `<Loading fallback>`); afterwards the store is an
+ * ordinary writable store. See {@link createNodeStore} for details.
+ */
+declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: NoInfer<EdgesInput<TUserEdgeTypes>>[] | (() => Promise<NoInfer<EdgesInput<TUserEdgeTypes>>[]>)) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
+//#endregion
+//#region src/core/stores/createNodeStore.d.ts
 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;
 /**
@@ -1424,7 +1444,16 @@ type NodesInput<TUserNodeTypes extends NodeTypes> = SolidFlowNode<TUserNodeTypes
  * - 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: NoInfer<NodesInput<TUserNodeTypes>>[]) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
+/**
+ * Also accepts an async seed ("Fetch High"): pass `async () => nodes` —
+ * typically an API call — instead of an array. No memo required: the
+ * function goes straight to `createStore`'s projection derive, so reads
+ * throw `NotReadyError` until the first value (cover the flow with
+ * `<Loading fallback>`), and the graph retries them when the data lands.
+ * Afterwards the store is an ordinary writable store — draft writes and
+ * wholesale replacement work exactly like the array form.
+ */
+declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NoInfer<NodesInput<TUserNodeTypes>>[] | (() => Promise<NoInfer<NodesInput<TUserNodeTypes>>[]>)) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
 //#endregion
 //#region src/hooks/useColorMode.d.ts
 /**
@@ -1506,6 +1535,25 @@ declare function useViewportInitialized(): Accessor<boolean>;
  */
 declare function useInternalNode(id: Accessor<string>): Accessor<InternalNode | undefined>;
 //#endregion
+//#region src/hooks/useKeyPress.d.ts
+/**
+ * Reactive "is this key (combo) held right now?" — the Solid Flow
+ * counterpart of React Flow's `useKeyPress`, usable anywhere (no flow
+ * context required).
+ *
+ * The definition is an Accessor per house convention — `useKeyPress(() =>
+ * "a")`, `useKeyPress(() => ["a", "d"])`, or `useKeyPress(() => ({ key:
+ * "s", modifier: ["meta"] }))`; swapping the definition resets the state.
+ *
+ * Hardened beyond upstream:
+ * - Combos re-activate when the base key is re-pressed while the modifier
+ *   stays held (upstream's oldest open key bug, xyflow#2248).
+ * - Stuck modifiers self-heal from the flags later keyboard/pointer/wheel
+ *   events carry (OS overlays swallow keyups without blurring — the macOS
+ *   screenshot HUD; xyflow#5679), and window blur resets.
+ */
+declare function useKeyPress(keys: Accessor<KeyDefinition | KeyDefinition[] | null>): Accessor<boolean>;
+//#endregion
 //#region src/hooks/useNodeConnections.d.ts
 type UseNodeConnectionsParams = {
   id?: string;
@@ -1753,6 +1801,12 @@ type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElemen
   readonly inversePan?: boolean;
   /** Step size for zooming in/out */
   readonly zoomStep?: number;
+  /**
+   * Scales the padding around the graph inside the minimap (multiplied by
+   * the minimap's view scale). Upstream parity.
+   * @default 5
+   */
+  readonly offsetScale?: number;
 };
 /** Miniature overview map of the whole flow, with optional pan/zoom interaction. */
 declare const MiniMap: <NodeType extends Node>(props: ParentProps<Partial<MiniMapProps<NodeType>>>) => JSX.Element;
@@ -1945,4 +1999,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, 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, 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 SolidFlowEdge, type SolidFlowInitialProps, type SolidFlowNode, 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 };
+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, 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, 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 SolidFlowEdge, type SolidFlowInitialProps, type SolidFlowNode, 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, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };