@dschz/solid-flow 0.3.0-next.0 → 0.3.0-next.2

package/dist/index/index.d.ts

@@ -1,6 +1,9 @@
 import { JSX } from "@solidjs/web";
+import { Align, Align as Align$1, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, BezierPathOptions, BezierPathOptions as BezierPathOptions$1, Box, ColorMode, ColorMode as ColorMode$1, ColorModeClass, 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, EdgeBase, EdgeMarker, EdgeMarkerType, EdgePosition, EdgeToolbarBaseProps, FinalConnectionState, FitBounds, FitBoundsOptions, FitBoundsOptions as FitBoundsOptions$1, FitViewOptionsBase, GetBezierPathParams, GetSmoothStepPathParams, GetStraightPathParams, Handle as Handle$1, HandleConnection, HandleConnection as HandleConnection$1, HandleProps, HandleType, InternalNodeBase, IsValidConnection, MarkerProps, MarkerType, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeOrigin, NodeOrigin as NodeOrigin$1, NodeProps as NodeProps$1, OnBeforeDeleteBase, OnConnect, OnConnectEnd, OnConnectEnd as OnConnectEnd$1, OnConnectStart, OnConnectStart as OnConnectStart$1, OnConnectStartParams, OnError, OnError as OnError$1, OnMove, OnMove as OnMove$1, OnMoveEnd, OnMoveEnd as OnMoveEnd$1, OnMoveStart, OnMoveStart as OnMoveStart$1, OnReconnect, OnReconnect as OnReconnect$1, OnReconnectEnd, OnReconnectEnd as OnReconnectEnd$1, OnReconnectStart, OnReconnectStart as OnReconnectStart$1, OnResize, OnResize as OnResize$1, OnResizeEnd, OnResizeEnd as OnResizeEnd$1, OnResizeStart, OnResizeStart as OnResizeStart$1, OnSelectionDrag, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanelPosition, PanelPosition as PanelPosition$1, Position, Position as Position$1, ProOptions, ProOptions as ProOptions$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SetCenter, SetCenterOptions, SetCenterOptions as SetCenterOptions$1, SetViewport, ShouldResize, ShouldResize as ShouldResize$1, SmoothStepPathOptions, SmoothStepPathOptions as SmoothStepPathOptions$1, SnapGrid, SnapGrid as SnapGrid$1, StepPathOptions, Transform, UpdateNodeInternals, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, XYZPosition, ZIndexMode, ZoomInOut, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from "@xyflow/system";
 import { Accessor, ParentComponent, ParentProps, Store, StoreSetter } from "solid-js";
-import { Align, Align as Align$1, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, BezierPathOptions, BezierPathOptions as BezierPathOptions$1, Box, ColorMode, ColorMode as ColorMode$1, ColorModeClass, 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, EdgeBase, EdgeMarker, EdgeMarkerType, EdgePosition, EdgeToolbarBaseProps, FinalConnectionState, FitBounds, FitBoundsOptions, FitBoundsOptions as FitBoundsOptions$1, FitViewOptionsBase, GetBezierPathParams, GetSmoothStepPathParams, GetStraightPathParams, Handle as Handle$1, HandleConnection, HandleConnection as HandleConnection$1, HandleProps, HandleType, InternalNodeBase, IsValidConnection, MarkerProps, MarkerType, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeOrigin, NodeOrigin as NodeOrigin$1, NodeProps as NodeProps$1, OnBeforeDeleteBase, OnConnect, OnConnectEnd, OnConnectEnd as OnConnectEnd$1, OnConnectStart, OnConnectStart as OnConnectStart$1, OnConnectStartParams, OnError, OnError as OnError$1, OnMove, OnMove as OnMove$1, OnMoveEnd, OnMoveEnd as OnMoveEnd$1, OnMoveStart, OnMoveStart as OnMoveStart$1, OnReconnect, OnReconnect as OnReconnect$1, OnReconnectEnd, OnReconnectEnd as OnReconnectEnd$1, OnReconnectStart, OnReconnectStart as OnReconnectStart$1, OnResize, OnResize as OnResize$1, OnResizeEnd, OnResizeEnd as OnResizeEnd$1, OnResizeStart, OnResizeStart as OnResizeStart$1, OnSelectionDrag, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanelPosition, PanelPosition as PanelPosition$1, Position as Position$1, Position as Position$2, ProOptions, ProOptions as ProOptions$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SetCenter, SetCenterOptions, SetCenterOptions as SetCenterOptions$1, SetViewport, ShouldResize, ShouldResize as ShouldResize$1, SmoothStepPathOptions, SmoothStepPathOptions as SmoothStepPathOptions$1, SnapGrid, SnapGrid as SnapGrid$1, StepPathOptions, Transform, UpdateNodeInternals, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, XYZPosition, ZIndexMode, ZoomInOut, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from "@xyflow/system";
+//#region src/types/custom.d.ts
+type UnknownStruct = Record<string, unknown>;
+//#endregion
 //#region src/types/node.d.ts
 /**
  * The node data structure that gets used for internal nodes.
@@ -50,9 +53,6 @@ type BuiltInNodeTypes = {
   group: (props: NodeProps<Record<string, never>, "group">) => JSX.Element;
 };
 //#endregion
-//#region src/types/custom.d.ts
-type UnknownStruct = Record<string, unknown>;
-//#endregion
 //#region src/types/edge.d.ts
 /**
  * An `Edge` is the complete description with everything Svelte Flow needs to know in order to
@@ -142,6 +142,13 @@ type EdgeTypes = { [K in string]: {
   bivarianceHack(props: EdgeProps<Record<string, unknown>, string | undefined>): JSX.Element;
 }["bivarianceHack"]; };
 type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
+type EdgeLayouted<EdgeType extends Edge = Edge> = EdgeType & EdgePosition & {
+  sourceNode?: Node;
+  targetNode?: Node;
+  sourceHandleId?: string | null;
+  targetHandleId?: string | null;
+  edge: EdgeType;
+};
 //#endregion
 //#region src/types/events.d.ts
 type NodeEventWithPointer<T = PointerEvent, NodeType extends Node = Node> = ({ node, event }: {
@@ -237,9 +244,31 @@ type EdgeReconnectEvents<EdgeType extends Edge = Edge> = {
 type OnSelectionDrag$1<NodeType extends Node = Node> = (event: MouseEvent, nodes: NodeType[]) => void;
 //#endregion
 //#region src/types/general.d.ts
-type Position$3 = `${Position$2}`;
+type Position$2 = `${Position$1}`;
 type ConnectionMode$2 = `${ConnectionMode$1}`;
-type ConnectionLineType$3 = `${ConnectionLineType$1}`;
+type ConnectionLineType$2 = `${ConnectionLineType$1}`;
+/**
+ * If you want to render a custom component for connection lines, you can set the
+ * `connectionLineComponent` prop on the [`<SolidFlow />`](/api-reference/react-flow#connection-connectionLineComponent)
+ * component. The `ConnectionLineComponentProps` are passed to your custom component.
+ *
+ * @public
+ */
+type ConnectionLineComponentProps<NodeType extends Node = Node> = {
+  readonly connectionLineStyle?: JSX.CSSProperties;
+  readonly connectionLineType: ConnectionLineType$2;
+  readonly fromNode: InternalNode<NodeType>;
+  readonly fromHandle: Handle$1;
+  readonly fromX: number;
+  readonly fromY: number;
+  readonly toX: number;
+  readonly toY: number;
+  readonly fromPosition: Position$2;
+  readonly toPosition: Position$2;
+  readonly connectionStatus: "valid" | "invalid" | null;
+  readonly toNode: InternalNode<NodeType> | null;
+  readonly toHandle: Handle$1 | null;
+};
 type SelectionMode$2 = `${SelectionMode$1}`;
 type PanOnScrollMode$2 = `${PanOnScrollMode$1}`;
 type ResizeControlVariant$2 = `${ResizeControlVariant$1}`;
@@ -282,6 +311,15 @@ type NodeGraph<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
 };
 type OnEdgeCreate<EdgeType extends Edge = Edge> = (connection: Connection$1) => EdgeType | Connection$1;
 //#endregion
+//#region src/components/connection/ConnectionLine.d.ts
+type ConnectionLineProps<NodeType extends Node = Node> = {
+  readonly style: JSX.CSSProperties;
+  readonly type: ConnectionLineType$2;
+  readonly component: (props: ConnectionLineComponentProps<NodeType>) => JSX.Element;
+  readonly containerStyle: string | JSX.CSSProperties;
+};
+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;
@@ -341,50 +379,16 @@ type ZoomProps = {
 };
 declare const Zoom: (props: ParentProps<ZoomProps>) => JSX.Element;
 //#endregion
-//#region src/components/graph/connection/types.d.ts
-type ConnectionLineType$2 = `${ConnectionLineType$1}`;
-/**
- * If you want to render a custom component for connection lines, you can set the
- * `connectionLineComponent` prop on the [`<SolidFlow />`](/api-reference/react-flow#connection-connectionLineComponent)
- * component. The `ConnectionLineComponentProps` are passed to your custom component.
- *
- * @public
- */
-type ConnectionLineComponentProps<NodeType extends Node = Node> = {
-  readonly connectionLineStyle?: JSX.CSSProperties;
-  readonly connectionLineType: ConnectionLineType$2;
-  readonly fromNode: InternalNode<NodeType>;
-  readonly fromHandle: Handle$1;
-  readonly fromX: number;
-  readonly fromY: number;
-  readonly toX: number;
-  readonly toY: number;
-  readonly fromPosition: Position$3;
-  readonly toPosition: Position$3;
-  readonly connectionStatus: "valid" | "invalid" | null;
-  readonly toNode: InternalNode<NodeType> | null;
-  readonly toHandle: Handle$1 | null;
-};
-//#endregion
-//#region src/components/graph/connection/ConnectionLine.d.ts
-type ConnectionLineProps<NodeType extends Node = Node> = {
-  readonly style: JSX.CSSProperties;
-  readonly type: ConnectionLineType$2;
-  readonly component: (props: ConnectionLineComponentProps<NodeType>) => JSX.Element;
-  readonly containerStyle: string | JSX.CSSProperties;
-};
-declare const ConnectionLine: <NodeType extends Node = Node>(props: ParentProps<Partial<ConnectionLineProps<NodeType>>>) => JSX.Element;
-//#endregion
-//#region src/components/graph/edge/BaseEdge.d.ts
+//#region src/components/edge/BaseEdge.d.ts
 declare const BaseEdge: (props: ParentProps<BaseEdgeProps>) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/BezierEdge.d.ts
+//#region src/components/edge/BezierEdge.d.ts
 declare const BezierEdge: (props: BezierEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/BezierEdgeInternal.d.ts
+//#region src/components/edge/BezierEdgeInternal.d.ts
 declare const BezierEdgeInternal: (props: BezierEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/EdgeLabel.d.ts
+//#region src/components/edge/EdgeLabel.d.ts
 type EdgeLabelProps = {
   readonly x?: number;
   readonly y?: number;
@@ -396,10 +400,10 @@ type EdgeLabelProps = {
 } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
 declare const EdgeLabel: (props: ParentProps<EdgeLabelProps>) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/EdgeLabelRenderer.d.ts
+//#region src/components/edge/EdgeLabelRenderer.d.ts
 declare const EdgeLabelRenderer: (props: ParentProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/EdgeReconnectAnchor.d.ts
+//#region src/components/edge/EdgeReconnectAnchor.d.ts
 type EdgeReconnectAnchorProps = {
   readonly type: HandleType;
   readonly class?: string;
@@ -410,33 +414,33 @@ type EdgeReconnectAnchorProps = {
 } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
 declare const EdgeReconnectAnchor: (props: ParentProps<EdgeReconnectAnchorProps>) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/EdgeWrapper.d.ts
+//#region src/components/edge/EdgeWrapper.d.ts
 type EdgeWrapperProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType> & {
   readonly edgeId: string;
 };
 declare const EdgeWrapper: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: EdgeWrapperProps<EdgeType>) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/SmoothStepEdge.d.ts
+//#region src/components/edge/SmoothStepEdge.d.ts
 declare const SmoothStepEdge: (props: SmoothStepEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/SmoothStepEdgeInternal.d.ts
+//#region src/components/edge/SmoothStepEdgeInternal.d.ts
 declare const SmoothStepEdgeInternal: (props: SmoothStepEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/StepEdge.d.ts
+//#region src/components/edge/StepEdge.d.ts
 declare const StepEdge: (props: StepEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/StepEdgeInternal.d.ts
+//#region src/components/edge/StepEdgeInternal.d.ts
 declare const StepEdgeInternal: (props: StepEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/StraightEdge.d.ts
+//#region src/components/edge/StraightEdge.d.ts
 declare const StraightEdge: (props: StraightEdgeProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/edge/StraightEdgeInternal.d.ts
+//#region src/components/edge/StraightEdgeInternal.d.ts
 declare const StraightEdgeInternal: (props: Omit<StraightEdgeProps, "sourcePosition" | "targetPosition">) => JSX.Element;
 //#endregion
-//#region src/components/graph/handle/Handle.d.ts
+//#region src/components/handle/Handle.d.ts
 type HandleProps$1 = Omit<HandleProps, "position"> & {
-  readonly position: Position$3;
+  readonly position: Position$2;
   readonly class?: string;
   readonly style?: JSX.CSSProperties;
   readonly onConnect?: (connections: Connection$1[]) => void;
@@ -444,30 +448,30 @@ type HandleProps$1 = Omit<HandleProps, "position"> & {
 } & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
 declare const Handle: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<HandleProps$1>) => JSX.Element;
 //#endregion
-//#region src/components/graph/marker/Marker.d.ts
+//#region src/components/marker/Marker.d.ts
 type MarkerProps$1 = MarkerProps & {
   readonly markerUnits?: "strokeWidth" | "userSpaceOnUse";
   readonly strokeWidth?: number;
 };
 declare const Marker: (props: MarkerProps$1) => JSX.Element;
 //#endregion
-//#region src/components/graph/marker/MarkerDefinition.d.ts
+//#region src/components/marker/MarkerDefinition.d.ts
 declare const MarkerDefinition: () => JSX.Element;
 //#endregion
-//#region src/components/graph/node/DefaultNode.d.ts
+//#region src/components/node/DefaultNode.d.ts
 declare const DefaultNode: (props: NodeProps<{
   label: string;
 }, "default">) => JSX.Element;
 //#endregion
-//#region src/components/graph/node/GroupNode.d.ts
+//#region src/components/node/GroupNode.d.ts
 declare const GroupNode: (props: NodeProps<Record<string, never>>) => JSX.Element;
 //#endregion
-//#region src/components/graph/node/InputNode.d.ts
+//#region src/components/node/InputNode.d.ts
 declare const InputNode: (props: NodeProps<{
   label: string;
 }>) => JSX.Element;
 //#endregion
-//#region src/components/graph/node/NodeWrapper.d.ts
+//#region src/components/node/NodeWrapper.d.ts
 type NodeWrapperProps<NodeType extends Node = Node> = NodeEvents<NodeType> & {
   readonly nodeId: string;
   readonly resizeObserver: ResizeObserver | undefined;
@@ -475,249 +479,54 @@ type NodeWrapperProps<NodeType extends Node = Node> = NodeEvents<NodeType> & {
 };
 declare const NodeWrapper: <NodeType extends Node = Node>(props: NodeWrapperProps<NodeType>) => JSX.Element;
 //#endregion
-//#region src/components/graph/node/OutputNode.d.ts
+//#region src/components/node/OutputNode.d.ts
 declare const OutputNode: (props: NodeProps<{
   label: string;
 }>) => JSX.Element;
 //#endregion
-//#region src/components/graph/plugins/background/types.d.ts
-type BackgroundVariant = "lines" | "dots" | "cross";
+//#region src/components/selection/NodeSelection.d.ts
+type NodeSelectionProps<NodeType extends Node = Node> = NodeSelectionEvents<NodeType> & Pick<NodeEvents<NodeType>, "onNodeDrag" | "onNodeDragStart" | "onNodeDragStop">;
+declare const NodeSelection: <NodeType extends Node = Node>(props: NodeSelectionProps<NodeType>) => JSX.Element;
 //#endregion
-//#region src/components/graph/plugins/background/Background.d.ts
-type BackgroundProps = {
-  readonly id?: string;
-  /** Variant of the pattern
-   * @example 'lines', 'dots', 'cross'
-   */
-  readonly variant?: BackgroundVariant;
-  /** Color of the background */
-  readonly bgColor?: string;
-  /** Color of the pattern */
-  readonly patternColor?: string;
-  /** Class applied to the pattern */
-  readonly patternClass?: string;
-  /** Class applied to the container */
-  readonly class?: string;
-  /** Gap between repetitions of the pattern */
-  readonly gap?: number | [number, number];
-  /** Size of a single pattern element */
-  readonly size?: number;
-  /** Line width of the Line pattern */
-  readonly lineWidth?: number;
-  /** Style applied to the container */
-  readonly style?: JSX.CSSProperties;
+//#region src/components/selection/Selection.d.ts
+type SelectionProps = {
+  readonly x?: number;
+  readonly y?: number;
+  readonly width?: number | string;
+  readonly height?: number | string;
+  readonly isVisible?: boolean;
 };
-declare const Background: (props: BackgroundProps) => JSX.Element;
+declare const Selection: (props: SelectionProps) => JSX.Element;
 //#endregion
-//#region src/components/graph/plugins/controls/ControlButton.d.ts
-type ControlButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
-  readonly class?: string;
-  readonly bgColor?: string;
-  readonly bgColorHover?: string;
-  readonly color?: string;
-  readonly colorHover?: string;
-  readonly borderColor?: string;
-  readonly onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
+//#region src/core/flowProps.d.ts
+type SolidFlowInitialProps = {
+  readonly initialNodes: Node[];
+  readonly initialEdges: Edge[];
+  readonly initialWidth: number;
+  readonly initialHeight: number;
+  readonly fitView: boolean;
+  readonly nodeOrigin: NodeOrigin$1;
 };
-declare const ControlButton: (props: ParentProps<ControlButtonProps>) => JSX.Element;
-//#endregion
-//#region src/components/graph/plugins/controls/Controls.d.ts
-type ControlsOrientation = "horizontal" | "vertical";
-type ControlsProps = {
-  /** Position of the controls on the pane
-   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
-   * PanelPosition.BottomLeft, PanelPosition.BottomRight
-   */
-  readonly position?: PanelPosition$1;
-  /** Show button for zoom in/out */
-  readonly showZoom?: boolean;
-  /** Show button for fit view */
-  readonly showFitView?: boolean;
-  /** Show button for toggling interactivity */
-  readonly showLock?: boolean;
-  readonly buttonBgColor?: string;
-  readonly buttonBgColorHover?: string;
-  readonly buttonColor?: string;
-  readonly buttonColorHover?: string;
-  readonly buttonBorderColor?: string;
-  readonly style?: JSX.CSSProperties;
-  readonly orientation?: ControlsOrientation;
-  readonly fitViewOptions?: FitViewOptions;
-  readonly beforeControls?: JSX.Element;
-  readonly afterControls?: JSX.Element;
-} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
-declare const Controls: (props: ParentProps<ControlsProps>) => JSX.Element;
-//#endregion
-//#region src/components/graph/plugins/EdgeToolbar.d.ts
-type EdgeToolbarProps = EdgeToolbarBaseProps & {
-  /** If `true`, clicking the toolbar selects the edge it belongs to. */
-  readonly selectEdgeOnClick?: boolean;
-} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
-/**
- * The `<EdgeToolbar />` component renders a toolbar or tooltip for an edge.
- * It must be used inside a custom edge component. By default it is only
- * visible when the edge is selected; pass `isVisible` to control it manually.
- *
- * The toolbar does not scale with the viewport so that its content is always legible.
- */
-declare const EdgeToolbar: (props: ParentProps<EdgeToolbarProps>) => JSX.Element;
-//#endregion
-//#region src/components/graph/plugins/minimap/MiniMap.d.ts
-type GetMiniMapNodeAttribute<NodeType extends Node> = (node: NodeType) => string;
-type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
-  /** Background color of minimap */
-  readonly bgColor?: string;
-  /** Color of nodes on the minimap */
-  readonly nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
-  /** Stroke color of nodes on the minimap */
-  readonly nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
-  /** Class applied to nodes on the minimap */
-  readonly nodeClass?: string | GetMiniMapNodeAttribute<NodeType>;
-  /** Border radius of nodes on the minimap */
-  readonly nodeBorderRadius?: number;
-  /** Stroke width of nodes on the minimap */
-  readonly nodeStrokeWidth?: number;
-  /** Color of the mask representing viewport */
-  readonly maskColor?: string;
-  /** Stroke color of the mask representing viewport */
-  readonly maskStrokeColor?: string;
-  /** Stroke width of the mask representing viewport */
-  readonly maskStrokeWidth?: number;
-  /** Position of the minimap on the pane
-   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
-   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeEvents<NodeType> & NodeSelectionEvents<NodeType> & EdgeEvents<EdgeType> & DeleteEvents<NodeType, EdgeType> & PaneEvents & {
+  /**
+   * The id of the flow. This is necessary if you want to render multiple flows.
    */
-  readonly position?: PanelPosition$1;
-  /** Style applied to container */
-  readonly style?: JSX.CSSProperties;
-  /** The aria-label applied to container */
-  readonly ariaLabel?: string | null;
-  /** Width of minimap */
+  readonly id?: string;
+  /** Sets a fixed width for the flow */
   readonly width?: number;
-  /** Height of minimap */
+  /** Sets a fixed height for the flow */
   readonly height?: number;
-  readonly pannable?: boolean;
-  readonly zoomable?: boolean;
-  /** Invert the direction when panning the minimap viewport */
-  readonly inversePan?: boolean;
-  /** Step size for zooming in/out */
-  readonly zoomStep?: number;
-};
-declare const MiniMap: <NodeType extends Node>(props: ParentProps<Partial<MiniMapProps<NodeType>>>) => JSX.Element;
-//#endregion
-//#region src/components/graph/plugins/nodeResizer/NodeResizer.d.ts
-type NodeResizerProps = {
-  /** Id of the node it is resizing
-   * @remarks optional if used inside custom node
-   */
-  readonly nodeId?: string;
-  /** Class applied to handle */
-  readonly handleClass?: string;
-  /** Style applied to handle */
-  readonly handleStyle?: JSX.CSSProperties;
-  /** Class applied to line */
-  readonly lineClass?: string;
-  /** Style applied to line */
-  readonly lineStyle?: JSX.CSSProperties;
-  /** Are the controls visible */
-  readonly visible?: boolean;
-  /** Minimum width of node */
-  readonly minWidth?: number;
-  /** Minimum height of node */
-  readonly minHeight?: number;
-  /** Maximum width of node */
-  readonly maxWidth?: number;
-  /** Maximum height of node */
-  readonly maxHeight?: number;
-  /** Keep aspect ratio when resizing */
-  readonly keepAspectRatio?: boolean;
-  /** Automatically scale the node when resizing */
-  readonly autoScale?: boolean;
-  /** Callback to determine if node should resize */
-  readonly shouldResize?: ShouldResize$1;
-  /** Callback called when resizing starts */
-  readonly onResizeStart?: OnResizeStart$1;
-  /** Callback called when resizing */
-  readonly onResize?: OnResize$1;
-  /** Callback called when resizing ends */
-  readonly onResizeEnd?: OnResizeEnd$1;
-} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
-declare const NodeResizer: (props: Partial<NodeResizerProps>) => JSX.Element;
-//#endregion
-//#region src/components/graph/plugins/nodeResizer/ResizeControl.d.ts
-type NodeResizerSubProps = Pick<NodeResizerProps, "nodeId" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "autoScale" | "keepAspectRatio" | "shouldResize" | "onResizeStart" | "onResize" | "onResizeEnd">;
-type ResizeControlProps = NodeResizerSubProps & {
-  /** Position of control
-   * @example ControlPosition.TopLeft, ControlPosition.TopRight,
-   * ControlPosition.BottomLeft, ControlPosition.BottomRight
-   */
-  readonly position?: ControlPosition$1;
-  /** Variant of control
-   * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
-   */
-  readonly variant?: ResizeControlVariant$2;
-  readonly color?: string;
-  readonly style?: JSX.CSSProperties;
-} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
-declare const ResizeControl: <NodeType extends Node = Node>(props: ParentProps<ResizeControlProps>) => JSX.Element;
-//#endregion
-//#region src/components/graph/plugins/NodeToolbar.d.ts
-type NodeToolbarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
-  /** The id of the node, or array of ids the toolbar should be displayed at */
-  readonly nodeId: string | string[];
-  /** Position of the toolbar relative to the node
-   * @example Position.TopLeft, Position.TopRight,
-   * Position.BottomLeft, Position.BottomRight
-   */
-  readonly position: Position$3;
-  /** Align the toolbar relative to the node
-   * @example Align.Start, Align.Center, Align.End
-   */
-  readonly align: Align$1;
-  /** Offset the toolbar from the node */
-  readonly offset: number;
-  /** If true, node toolbar is visible even if node is not selected */
-  readonly isVisible: boolean;
-  /** Style of the toolbar */
-  readonly style: Omit<JSX.CSSProperties, "z-index" | "position" | "transform">;
-};
-declare const NodeToolbar: ParentComponent<Partial<NodeToolbarProps>>;
-//#endregion
-//#region src/components/graph/selection/NodeSelection.d.ts
-type NodeSelectionProps<NodeType extends Node = Node> = NodeSelectionEvents<NodeType> & Pick<NodeEvents<NodeType>, "onNodeDrag" | "onNodeDragStart" | "onNodeDragStop">;
-declare const NodeSelection: <NodeType extends Node = Node>(props: NodeSelectionProps<NodeType>) => JSX.Element;
-//#endregion
-//#region src/components/graph/selection/Selection.d.ts
-type SelectionProps = {
-  readonly x?: number;
-  readonly y?: number;
-  readonly width?: number | string;
-  readonly height?: number | string;
-  readonly isVisible?: boolean;
-};
-declare const Selection: (props: SelectionProps) => JSX.Element;
-//#endregion
-//#region src/components/SolidFlow/types.d.ts
-type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeEvents<NodeType> & NodeSelectionEvents<NodeType> & EdgeEvents<EdgeType> & DeleteEvents<NodeType, EdgeType> & PaneEvents & {
-  /**
-   * The id of the flow. This is necessary if you want to render multiple flows.
-   */
-  readonly id?: string;
-  /** Sets a fixed width for the flow */
-  readonly width?: number;
-  /** Sets a fixed height for the flow */
-  readonly height?: number;
-  /**
-   * An store of nodes to render in a flow.
-   * @example
-   * const [nodes] = createStore([
-   *  {
-   *    id: 'node-1',
-   *    type: 'input',
-   *    data: { label: 'Node 1' },
-   *    position: { x: 250, y: 50 }
-   *  }
-   * ]);
+  /**
+   * An store of nodes to render in a flow.
+   * @example
+   * const [nodes] = createStore([
+   *  {
+   *    id: 'node-1',
+   *    type: 'input',
+   *    data: { label: 'Node 1' },
+   *    position: { x: 250, y: 50 }
+   *  }
+   * ]);
    */
   readonly nodes?: Store<NodeType[]>;
   /**
@@ -974,9 +783,13 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    */
   readonly selectionOnDrag?: boolean;
   /**
-   * You can enable this optimization to instruct Solid Flow to only render nodes and edges that would be visible in the viewport.
-   * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
-   * @default false
+   * 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
    */
   readonly onlyRenderVisibleElements?: boolean;
   /**
@@ -1016,7 +829,7 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier'
    * @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier
    */
-  readonly connectionLineType?: ConnectionLineType$3;
+  readonly connectionLineType?: ConnectionLineType$2;
   /** Enabling this option will raise the z-index of nodes when they are selected.
    * @default true
    */
@@ -1154,7 +967,7 @@ declare const SolidFlow: <NodeType extends Node = Node, EdgeType extends Edge =
 //#region src/components/SolidFlow/provider.d.ts
 declare const SolidFlowProvider: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<SolidFlowProps<NodeType, EdgeType>>) => JSX.Element;
 //#endregion
-//#region src/data/createEdgeStore.d.ts
+//#region src/core/createEdgeStore.d.ts
 type ExtractEdgeInfo<T> = T extends ((props: EdgeProps<infer TData, infer TType>) => unknown) ? {
   data: TData;
   type: TType;
@@ -1239,7 +1052,159 @@ type EdgesInput<TUserEdgeTypes extends EdgeTypes> = { [K in keyof AllEdgeTypes<T
  */
 declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: EdgesInput<TUserEdgeTypes>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
 //#endregion
-//#region src/data/createNodeStore.d.ts
+//#region src/core/projections/connections.d.ts
+/**
+ * Lookup keys for the connection index. Each edge is registered under six
+ * keys — for both of its endpoints: the node, the node+handle-type, and (when
+ * a handle id is present) the node+type+handle:
+ *   `${nodeId}` · `${nodeId}-${type}` · `${nodeId}-${type}-${handleId}`
+ */
+declare const connectionKey: (nodeId: string, type?: HandleType, handleId?: string | null) => string;
+type ConnectionsRecord = Record<string, Record<string, HandleConnection$1>>;
+//#endregion
+//#region src/core/flowState.d.ts
+/**
+ * The current selection, as one object: the pair travels together everywhere
+ * it is consumed (selection change callbacks, deletion, toolbars).
+ */
+type FlowSelection<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  readonly nodes: readonly NodeType[];
+  readonly edges: readonly EdgeType[];
+};
+/**
+ * The flow's data graph as one reactive struct — the canonical read surface.
+ *
+ * Every property read in a tracked scope is a live subscription; the struct
+ * itself is a stable identity for the provider's lifetime, so destructuring
+ * `const { flow } = useSolidFlow()` is safe (reactivity lives inside the
+ * property reads, not in the container). Reads in event handlers are
+ * untracked, so `flow.viewport.zoom` inside a handler is already the
+ * "imperative getter" — no extra API needed.
+ *
+ * Keyed lookups are id-keyed records (`flow.internalNodes[id]`) rather than
+ * Maps: reactive property reads, per-key granularity, and the shape the
+ * underlying projections produce natively.
+ */
+type FlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  /** The user node graph. */
+  readonly nodes: readonly NodeType[];
+  /** The user edge graph. */
+  readonly edges: readonly EdgeType[];
+  /** Adopted nodes keyed by id: absolute positions, z order, measured dimensions, handle bounds. */
+  readonly internalNodes: Record<string, InternalNode<NodeType>>;
+  /** Screen-space edge geometry keyed by edge id; edges with missing/unmeasured endpoints have no entry. */
+  readonly layoutedEdges: Record<string, EdgeLayouted<EdgeType>>;
+  /**
+   * The connection index. Keys are built with {@link connectionKey}:
+   * `nodeId`, `nodeId-type`, and `nodeId-type-handleId`; each value maps a
+   * connection pair key to its {@link HandleConnection}.
+   */
+  readonly connections: ConnectionsRecord;
+  /** The currently selected nodes and edges. */
+  readonly selection: FlowSelection<NodeType, EdgeType>;
+  /** True once every non-hidden node has been measured. */
+  readonly nodesInitialized: boolean;
+  /** True once the pan/zoom instance exists. */
+  readonly viewportInitialized: boolean;
+  readonly viewport: Viewport$1;
+  /** The flow container's measured width in px. */
+  readonly width: number;
+  /** The flow container's measured height in px. */
+  readonly height: number;
+  /** The resolved color mode ("system" resolves to the user's preference). */
+  readonly colorMode: ColorModeClass$1;
+  /** The in-progress connection gesture state. */
+  readonly connection: ConnectionState<InternalNode<NodeType>>;
+  /** True while a node drag is in progress. */
+  readonly dragging: boolean;
+  readonly minZoom: number;
+  readonly maxZoom: number;
+  readonly nodesDraggable: boolean;
+  readonly nodesConnectable: boolean;
+  readonly elementsSelectable: boolean;
+  readonly snapGrid: SnapGrid$1 | undefined;
+};
+/**
+ * The flow's write surface: every public mutation, viewport motion, and
+ * geometry helper. Commands are stable identities — destructuring
+ * `const { commands } = useSolidFlow()` is safe.
+ */
+type FlowCommands<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  /** Fits the view to the graph (or to `options.nodes`). */
+  readonly fitView: (options?: FitViewOptions<NodeType>) => Promise<boolean>;
+  /** Fits the view to the given bounds. */
+  readonly fitBounds: (bounds: Rect$1, options?: FitBoundsOptions$1) => Promise<boolean>;
+  /** Zooms in by 1.2. */
+  readonly zoomIn: ZoomInOut;
+  /** Zooms out by 1 / 1.2. */
+  readonly zoomOut: ZoomInOut;
+  /** Sets the zoom level. */
+  readonly setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions$1) => Promise<boolean>;
+  /** Centers the view on the given flow position. */
+  readonly setCenter: (x: number, y: number, options?: SetCenterOptions$1) => Promise<boolean>;
+  /** Sets the viewport. */
+  readonly setViewport: (viewport: Viewport$1, options?: ViewportHelperFunctionOptions$1) => Promise<boolean>;
+  /** Pans the viewport by the given delta. */
+  readonly panBy: (delta: XYPosition$1) => Promise<boolean>;
+  /** Converts a screen/client position to a flow position. */
+  readonly screenToFlowPosition: (clientPosition: XYPosition$1, options?: {
+    snapToGrid: boolean;
+  }) => XYPosition$1;
+  /** Converts a flow position to a screen/client position. */
+  readonly flowToScreenPosition: (flowPosition: XYPosition$1) => XYPosition$1;
+  /** Appends one or many nodes. */
+  readonly addNodes: (payload: NodeType[] | NodeType) => void;
+  /** Appends one or many edges. */
+  readonly addEdges: (payload: EdgeType[] | EdgeType) => void;
+  /** Writes the nodes root (canonical Solid store setter — mutate the draft or return a new array). */
+  readonly setNodes: StoreSetter<NodeType[]>;
+  /** Writes the edges root (canonical Solid store setter — mutate the draft or return a new array). */
+  readonly setEdges: StoreSetter<EdgeType[]>;
+  /** Merges (or replaces, with `options.replace`) a node by id. */
+  readonly updateNode: (id: string, nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>), options?: {
+    replace: boolean;
+  }) => void;
+  /** Merges (or replaces, with `options.replace`) a node's `data` by id. */
+  readonly updateNodeData: (id: string, dataUpdate: Partial<NodeType["data"]> | ((node: NodeType) => Partial<NodeType["data"]>), options?: {
+    replace: boolean;
+  }) => void;
+  /** Merges (or replaces, with `options.replace`) an edge by id. */
+  readonly updateEdge: (id: string, edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => Partial<EdgeType>), options?: {
+    replace: boolean;
+  }) => void;
+  /** Deletes the given nodes/edges plus connected edges, honoring `onBeforeDelete`. */
+  readonly deleteElements: (params: {
+    nodes?: (Partial<NodeType> & {
+      id: string;
+    })[];
+    edges?: (Partial<EdgeType> & {
+      id: string;
+    })[];
+  }) => Promise<{
+    deletedNodes: NodeType[];
+    deletedEdges: EdgeType[];
+  }>;
+  /** All nodes intersecting the given node or rect. */
+  readonly getIntersectingNodes: (nodeOrRect: NodeType | {
+    id: NodeType["id"];
+  } | Rect$1, partially?: boolean, nodesToIntersect?: NodeType[]) => NodeType[];
+  /** Whether the given node or rect intersects the area. */
+  readonly isNodeIntersecting: (nodeOrRect: NodeType | {
+    id: NodeType["id"];
+  } | Rect$1, area: Rect$1, partially?: boolean) => boolean;
+  /** The bounding rect of the given nodes (or node ids). */
+  readonly getNodesBounds: (nodes: (NodeType | InternalNode<NodeType> | string)[]) => Rect$1;
+  /** Requests a DOM re-measure of the given node id(s). */
+  readonly updateNodeInternals: (id: string | string[]) => void;
+  /** The nodes, edges, and viewport as a plain JSON-safe object. */
+  readonly toObject: () => {
+    nodes: NodeType[];
+    edges: EdgeType[];
+    viewport: Viewport$1;
+  };
+};
+//#endregion
+//#region src/core/createNodeStore.d.ts
 type ExtractNodeInfo<T> = T extends ((props: NodeProps<infer TData, infer TType>) => unknown) ? {
   data: TData;
   type: TType;
@@ -1429,265 +1394,265 @@ declare function useNodesData<NodeType extends Node = Node>(nodeIds: Accessor<st
 //#endregion
 //#region src/hooks/useSolidFlow.d.ts
 /**
- * Hook for accessing the SvelteFlow instance.
+ * The canonical flow API: the reactive {@link FlowState} struct plus the
+ * {@link FlowCommands} write surface. Every command is also spread onto the
+ * returned object directly for upstream (React Flow / Svelte Flow)
+ * familiarity — `useSolidFlow().fitView()` and
+ * `useSolidFlow().commands.fitView()` are the same function.
  *
- * @public
- * @returns A set of helper functions
+ * 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.
  */
-declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): {
-  /**
-   * Zooms viewport in by 1.2.
-   *
-   * @param options.duration - optional duration. If set, a transition will be applied
-   */
-  zoomIn: ZoomInOut;
-  /**
-   * Zooms viewport out by 1 / 1.2.
-   *
-   * @param options.duration - optional duration. If set, a transition will be applied
-   */
-  zoomOut: ZoomInOut;
-  /**
-   * Returns an internal node by id.
-   *
-   * @param id - the node id
-   * @returns the node or undefined if no node was found
-   */
-  getInternalNode: (id: string) => InternalNode<NodeType> | undefined;
-  /**
-   * Returns a node by id.
-   *
-   * @param id - the node id
-   * @returns the node or undefined if no node was found
-   */
-  getNode: (id: string) => NodeType | undefined;
-  /**
-   * Returns nodes.
-   *
-   * @returns nodes array
-   */
-  getNodes: (ids?: string[]) => NodeType[];
-  /**
-   * Returns an edge by id.
-   *
-   * @param id - the edge id
-   * @returns the edge or undefined if no edge was found
-   */
-  getEdge: (id: string) => EdgeType | undefined;
-  /**
-   * Returns edges.
-   *
-   * @returns edges array
-   */
-  getEdges: (ids?: string[]) => EdgeType[];
-  /**
-   * Add one or many nodes to your existing nodes array.
-   *
-   * @param payload - the nodes to add
-   */
-  addNodes: (payload: NodeType[] | NodeType) => void;
-  /**
-   * Add one or many edges to your existing edges array.
-   *
-   * @param payload - the edges to add
-   */
-  addEdges: (payload: EdgeType[] | EdgeType) => void;
-  /**
-   * Sets the current zoom level.
-   *
-   * @param zoomLevel - the zoom level to set
-   * @param options.duration - optional duration. If set, a transition will be applied
-   */
-  setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions$1) => Promise<boolean>;
-  /**
-   * Returns the current zoom level.
-   *
-   * @returns current zoom as a number
-   */
-  getZoom: () => number;
-  /**
-   * Sets the center of the view to the given position.
-   *
-   * @param x - x position
-   * @param y - y position
-   * @param options.zoom - optional zoom
-   */
-  setCenter: (x: number, y: number, options?: SetCenterOptions$1) => Promise<boolean>;
-  /**
-   * Sets the current viewport.
-   *
-   * @param viewport - the viewport to set
-   * @param options.duration - optional duration. If set, a transition will be applied
-   */
-  setViewport: (viewport: Viewport$1, options?: ViewportHelperFunctionOptions$1) => Promise<boolean>;
-  /**
-   * Returns the current viewport.
-   *
-   * @returns Viewport
-   */
-  getViewport: () => Viewport$1;
-  /**
-   * Fits the view.
-   *
-   * @param options.padding - optional padding
-   * @param options.includeHiddenNodes - optional includeHiddenNodes
-   * @param options.minZoom - optional minZoom
-   * @param options.maxZoom - optional maxZoom
-   * @param options.duration - optional duration. If set, a transition will be applied
-   * @param options.nodes - optional nodes to fit the view to
-   */
-  fitView: (options?: FitViewOptions<NodeType>) => Promise<boolean>;
-  /**
-   * Returns all nodes that intersect with the given node or rect.
-   *
-   * @param node - the node or rect to check for intersections
-   * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect
-   * @param nodes - optional nodes array to check for intersections
-   *
-   * @returns an array of intersecting nodes
-   */
-  getIntersectingNodes: (nodeOrRect: NodeType | {
-    id: NodeType["id"];
-  } | Rect$1, partially?: boolean, nodesToIntersect?: NodeType[]) => NodeType[];
-  /**
-   * Checks if the given node or rect intersects with the passed rect.
-   *
-   * @param node - the node or rect to check for intersections
-   * @param area - the rect to check for intersections
-   * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed react
-   *
-   * @returns true if the node or rect intersects with the given area
-   */
-  isNodeIntersecting: (nodeOrRect: NodeType | {
-    id: NodeType["id"];
-  } | Rect$1, area: Rect$1, partially?: boolean) => boolean;
-  /**
-   * Fits the view to the given bounds .
-   *
-   * @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
-   * @param options.padding - optional padding
-   */
-  fitBounds: (bounds: Rect$1, options?: FitBoundsOptions$1) => Promise<boolean>;
-  /**
-   * Deletes nodes and edges.
-   *
-   * @param params.nodes - optional nodes array to delete
-   * @param params.edges - optional edges array to delete
-   *
-   * @returns a promise that resolves with the deleted nodes and edges
-   */
-  deleteElements: ({ nodes, edges }: {
-    nodes?: (Partial<NodeType> & {
-      id: string;
-    })[];
-    edges?: (Partial<EdgeType> & {
-      id: string;
-    })[];
-  }) => Promise<{
-    deletedNodes: NodeType[];
-    deletedEdges: EdgeType[];
-  }>;
-  /**
-   * Converts a screen / client position to a flow position.
-   *
-   * @param clientPosition - the screen / client position. When you are working with events you can use event.clientX and event.clientY
-   * @param options.snapToGrid - if true, the converted position will be snapped to the grid
-   * @returns position as { x: number, y: number }
-   *
-   * @example
-   * const flowPosition = screenToFlowPosition({ x: event.clientX, y: event.clientY })
-   */
-  screenToFlowPosition: (clientPosition: XYPosition$1, options?: {
-    snapToGrid: boolean;
-  }) => XYPosition$1;
-  /**
-   * Converts a flow position to a screen / client position.
-   *
-   * @param flowPosition - the screen / client position. When you are working with events you can use event.clientX and event.clientY
-   * @returns position as { x: number, y: number }
-   *
-   * @example
-   * const clientPosition = flowToScreenPosition({ x: node.position.x, y: node.position.y })
-   */
-  flowToScreenPosition: (flowPosition: XYPosition$1) => XYPosition$1;
-  /**
-   * Updates a node.
-   *
-   * @param id - id of the node to update
-   * @param nodeUpdate - the node update as an object or a function that receives the current node and returns the node update
-   * @param options.replace - if true, the node is replaced with the node update, otherwise the changes get merged
-   *
-   * @example
-   * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
-   */
-  updateNode: (id: string, nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>), options?: {
-    replace: boolean;
-  }) => void;
-  /**
-   * Updates the data attribute of a node.
-   *
-   * @param id - id of the node to update
-   * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
-   * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
-   *
-   * @example
-   * updateNodeData('node-1', { label: 'A new label' });
-   */
-  updateNodeData: (id: string, dataUpdate: Partial<NodeType["data"]> | ((node: NodeType) => Partial<NodeType["data"]>), options?: {
-    replace: boolean;
-  }) => void;
-  /**
-   * Returns the nodes, edges and the viewport as a JSON object.
-   *
-   * @returns the nodes, edges and the viewport as a JSON object
-   */
-  /**
-   * Updates an edge.
-   *
-   * @param id - id of the edge to update
-   * @param edgeUpdate - the edge update as an object or a function that receives the current edge and returns the edge update
-   * @param options.replace - if true, the edge is replaced with the edge update, otherwise the changes get merged
-   *
-   * @example
-   * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
-   */
-  updateEdge: (id: string, edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => Partial<EdgeType>), options?: {
-    replace: boolean;
-  }) => void;
-  toObject: () => {
-    nodes: NodeType[];
-    edges: EdgeType[];
-    viewport: Viewport$1;
-  };
-  /**
-   * Returns the bounds of the given nodes or node ids.
-   *
-   * @param nodes - the nodes or node ids to calculate the bounds for
-   *
-   * @returns the bounds of the given nodes
-   */
-  getNodesBounds: (nodes: (NodeType | InternalNode<NodeType> | string)[]) => Rect$1;
-  /** Gets all connections for a given handle belonging to a specific node.
-   *
-   * @param type - handle type 'source' or 'target'
-   * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
-   * @param nodeId - the node id the handle belongs to
-   * @returns an array with handle connections
-   */
-  getHandleConnections: ({ type, id, nodeId }: {
+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
+ * commands spread at the top level for upstream familiarity.
+ *
+ * `flow` and `commands` are stable identities, so destructuring them is safe:
+ * `const { flow, commands } = useSolidFlow()`.
+ *
+ * @public
+ * @returns the flow's read struct, write surface, and deprecated aliases
+ */
+declare function useSolidFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): UseSolidFlowReturn<NodeType, EdgeType>;
 //#endregion
 //#region src/hooks/useUpdateNodeInternals.d.ts
 /**
- * Hook for updating node internals.
+ * Hook for updating node internals. Sugar for `commands.updateNodeInternals`.
  *
  * @public
  * @returns function for updating node internals
  */
 declare function useUpdateNodeInternals(): UpdateNodeInternals;
 //#endregion
-export { type Align, type AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, type BezierPathOptions, type Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, type ColorMode, type ColorModeClass, type Connection, ConnectionData, ConnectionLine, type ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, type Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, type EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, type FitBoundsOptions, FitViewOptions, type GetBezierPathParams, type GetSmoothStepPathParams, type 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, type OnConnect, type OnConnectEnd, type OnConnectStart, type OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, type OnError, type OnMove, type OnMoveEnd, type OnMoveStart, type OnReconnect, type OnReconnectEnd, type OnReconnectStart, type OnResize, type OnResizeEnd, type OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position$1 as Position, type ProOptions, type Rect, ResizeControl, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Selection, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, type SmoothStepPathOptions, type SnapGrid, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, type Transform, Viewport, type ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, type XYZPosition, Zoom, addEdge, 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 };
+//#region src/plugins/background/types.d.ts
+type BackgroundVariant = "lines" | "dots" | "cross";
+//#endregion
+//#region src/plugins/background/Background.d.ts
+type BackgroundProps = {
+  readonly id?: string;
+  /** Variant of the pattern
+   * @example 'lines', 'dots', 'cross'
+   */
+  readonly variant?: BackgroundVariant;
+  /** Color of the background */
+  readonly bgColor?: string;
+  /** Color of the pattern */
+  readonly patternColor?: string;
+  /** Class applied to the pattern */
+  readonly patternClass?: string;
+  /** Class applied to the container */
+  readonly class?: string;
+  /** Gap between repetitions of the pattern */
+  readonly gap?: number | [number, number];
+  /** Size of a single pattern element */
+  readonly size?: number;
+  /** Line width of the Line pattern */
+  readonly lineWidth?: number;
+  /** Style applied to the container */
+  readonly style?: JSX.CSSProperties;
+};
+declare const Background: (props: BackgroundProps) => JSX.Element;
+//#endregion
+//#region src/plugins/controls/ControlButton.d.ts
+type ControlButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+  readonly class?: string;
+  readonly bgColor?: string;
+  readonly bgColorHover?: string;
+  readonly color?: string;
+  readonly colorHover?: string;
+  readonly borderColor?: string;
+  readonly onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
+};
+declare const ControlButton: (props: ParentProps<ControlButtonProps>) => JSX.Element;
+//#endregion
+//#region src/plugins/controls/Controls.d.ts
+type ControlsOrientation = "horizontal" | "vertical";
+type ControlsProps = {
+  /** Position of the controls on the pane
+   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
+   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+   */
+  readonly position?: PanelPosition$1;
+  /** Show button for zoom in/out */
+  readonly showZoom?: boolean;
+  /** Show button for fit view */
+  readonly showFitView?: boolean;
+  /** Show button for toggling interactivity */
+  readonly showLock?: boolean;
+  readonly buttonBgColor?: string;
+  readonly buttonBgColorHover?: string;
+  readonly buttonColor?: string;
+  readonly buttonColorHover?: string;
+  readonly buttonBorderColor?: string;
+  readonly style?: JSX.CSSProperties;
+  readonly orientation?: ControlsOrientation;
+  readonly fitViewOptions?: FitViewOptions;
+  readonly beforeControls?: JSX.Element;
+  readonly afterControls?: JSX.Element;
+} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
+declare const Controls: (props: ParentProps<ControlsProps>) => JSX.Element;
+//#endregion
+//#region src/plugins/minimap/MiniMap.d.ts
+type GetMiniMapNodeAttribute<NodeType extends Node> = (node: NodeType) => string;
+type MiniMapProps<NodeType extends Node> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+  /** Background color of minimap */
+  readonly bgColor?: string;
+  /** Color of nodes on the minimap */
+  readonly nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
+  /** Stroke color of nodes on the minimap */
+  readonly nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
+  /** Class applied to nodes on the minimap */
+  readonly nodeClass?: string | GetMiniMapNodeAttribute<NodeType>;
+  /** Border radius of nodes on the minimap */
+  readonly nodeBorderRadius?: number;
+  /** Stroke width of nodes on the minimap */
+  readonly nodeStrokeWidth?: number;
+  /** Color of the mask representing viewport */
+  readonly maskColor?: string;
+  /** Stroke color of the mask representing viewport */
+  readonly maskStrokeColor?: string;
+  /** Stroke width of the mask representing viewport */
+  readonly maskStrokeWidth?: number;
+  /** Position of the minimap on the pane
+   * @example PanelPosition.TopLeft, PanelPosition.TopRight,
+   * PanelPosition.BottomLeft, PanelPosition.BottomRight
+   */
+  readonly position?: PanelPosition$1;
+  /** Style applied to container */
+  readonly style?: JSX.CSSProperties;
+  /** The aria-label applied to container */
+  readonly ariaLabel?: string | null;
+  /** Width of minimap */
+  readonly width?: number;
+  /** Height of minimap */
+  readonly height?: number;
+  readonly pannable?: boolean;
+  readonly zoomable?: boolean;
+  /** Invert the direction when panning the minimap viewport */
+  readonly inversePan?: boolean;
+  /** Step size for zooming in/out */
+  readonly zoomStep?: number;
+};
+declare const MiniMap: <NodeType extends Node>(props: ParentProps<Partial<MiniMapProps<NodeType>>>) => JSX.Element;
+//#endregion
+//#region src/plugins/nodeResizer/NodeResizer.d.ts
+type NodeResizerProps = {
+  /** Id of the node it is resizing
+   * @remarks optional if used inside custom node
+   */
+  readonly nodeId?: string;
+  /** Class applied to handle */
+  readonly handleClass?: string;
+  /** Style applied to handle */
+  readonly handleStyle?: JSX.CSSProperties;
+  /** Class applied to line */
+  readonly lineClass?: string;
+  /** Style applied to line */
+  readonly lineStyle?: JSX.CSSProperties;
+  /** Are the controls visible */
+  readonly visible?: boolean;
+  /** Minimum width of node */
+  readonly minWidth?: number;
+  /** Minimum height of node */
+  readonly minHeight?: number;
+  /** Maximum width of node */
+  readonly maxWidth?: number;
+  /** Maximum height of node */
+  readonly maxHeight?: number;
+  /** Keep aspect ratio when resizing */
+  readonly keepAspectRatio?: boolean;
+  /** Automatically scale the node when resizing */
+  readonly autoScale?: boolean;
+  /** Callback to determine if node should resize */
+  readonly shouldResize?: ShouldResize$1;
+  /** Callback called when resizing starts */
+  readonly onResizeStart?: OnResizeStart$1;
+  /** Callback called when resizing */
+  readonly onResize?: OnResize$1;
+  /** Callback called when resizing ends */
+  readonly onResizeEnd?: OnResizeEnd$1;
+} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
+declare const NodeResizer: (props: Partial<NodeResizerProps>) => JSX.Element;
+//#endregion
+//#region src/plugins/nodeResizer/ResizeControl.d.ts
+type NodeResizerSubProps = Pick<NodeResizerProps, "nodeId" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "autoScale" | "keepAspectRatio" | "shouldResize" | "onResizeStart" | "onResize" | "onResizeEnd">;
+type ResizeControlProps = NodeResizerSubProps & {
+  /** Position of control
+   * @example ControlPosition.TopLeft, ControlPosition.TopRight,
+   * ControlPosition.BottomLeft, ControlPosition.BottomRight
+   */
+  readonly position?: ControlPosition$1;
+  /** Variant of control
+   * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
+   */
+  readonly variant?: ResizeControlVariant$2;
+  readonly color?: string;
+  readonly style?: JSX.CSSProperties;
+} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize" | "style">;
+declare const ResizeControl: <NodeType extends Node = Node>(props: ParentProps<ResizeControlProps>) => JSX.Element;
+//#endregion
+//#region src/plugins/toolbar/EdgeToolbar.d.ts
+type EdgeToolbarProps = EdgeToolbarBaseProps & {
+  /** If `true`, clicking the toolbar selects the edge it belongs to. */
+  readonly selectEdgeOnClick?: boolean;
+} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "style">;
+/**
+ * The `<EdgeToolbar />` component renders a toolbar or tooltip for an edge.
+ * It must be used inside a custom edge component. By default it is only
+ * visible when the edge is selected; pass `isVisible` to control it manually.
+ *
+ * The toolbar does not scale with the viewport so that its content is always legible.
+ */
+declare const EdgeToolbar: (props: ParentProps<EdgeToolbarProps>) => JSX.Element;
+//#endregion
+//#region src/plugins/toolbar/NodeToolbar.d.ts
+type NodeToolbarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+  /** The id of the node, or array of ids the toolbar should be displayed at */
+  readonly nodeId: string | string[];
+  /** Position of the toolbar relative to the node
+   * @example Position.TopLeft, Position.TopRight,
+   * Position.BottomLeft, Position.BottomRight
+   */
+  readonly position: Position$2;
+  /** Align the toolbar relative to the node
+   * @example Align.Start, Align.Center, Align.End
+   */
+  readonly align: Align$1;
+  /** Offset the toolbar from the node */
+  readonly offset: number;
+  /** If true, node toolbar is visible even if node is not selected */
+  readonly isVisible: boolean;
+  /** Style of the toolbar */
+  readonly style: Omit<JSX.CSSProperties, "z-index" | "position" | "transform">;
+};
+declare const NodeToolbar: ParentComponent<Partial<NodeToolbarProps>>;
+//#endregion
+export { type Align, type AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, type BezierPathOptions, type Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, type ColorMode, type ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, type Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, type EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, type FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, type GetBezierPathParams, type GetSmoothStepPathParams, type 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, type OnConnect, type OnConnectEnd, type OnConnectStart, type OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, type OnError, type OnMove, type OnMoveEnd, type OnMoveStart, type OnReconnect, type OnReconnectEnd, type OnReconnectStart, type OnResize, type OnResizeEnd, type OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, type ProOptions, type Rect, ResizeControl, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Selection, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, type SmoothStepPathOptions, type SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, type Transform, UseSolidFlowReturn, Viewport, type ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, type 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 };