likec4 1.28.0 → 1.29.0

package/react/index.d.mts

@@ -1537,6 +1537,7 @@ type ConnectionLineComponent<NodeType extends Node$1 = Node$1> = ComponentType<C
 interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> extends Omit<HTMLAttributes<HTMLDivElement>, "onError"> {
 	/**
 	 * An array of nodes to render in a controlled flow.
+	 * @default []
 	 * @example
 	 * const nodes = [
 	 *  {
@@ -1550,6 +1551,7 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	nodes?: NodeType[];
 	/**
 	 * An array of edges to render in a controlled flow.
+	 * @default []
 	 * @example
 	 * const edges = [
 	 *  {
@@ -1585,51 +1587,66 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 * }
 	 */
 	defaultEdgeOptions?: DefaultEdgeOptions;
-	/** This event handler is called when a user clicks on a node */
+	/** This event handler is called when a user clicks on a node. */
 	onNodeClick?: NodeMouseHandler<NodeType>;
-	/** This event handler is called when a user double clicks on a node */
+	/** This event handler is called when a user double-clicks on a node. */
 	onNodeDoubleClick?: NodeMouseHandler<NodeType>;
-	/** This event handler is called when mouse of a user enters a node */
+	/** This event handler is called when mouse of a user enters a node. */
 	onNodeMouseEnter?: NodeMouseHandler<NodeType>;
-	/** This event handler is called when mouse of a user moves over a node */
+	/** This event handler is called when mouse of a user moves over a node. */
 	onNodeMouseMove?: NodeMouseHandler<NodeType>;
-	/** This event handler is called when mouse of a user leaves a node */
+	/** This event handler is called when mouse of a user leaves a node. */
 	onNodeMouseLeave?: NodeMouseHandler<NodeType>;
-	/** This event handler is called when a user right clicks on a node */
+	/** This event handler is called when a user right-clicks on a node. */
 	onNodeContextMenu?: NodeMouseHandler<NodeType>;
-	/** This event handler is called when a user starts to drag a node */
+	/** This event handler is called when a user starts to drag a node. */
 	onNodeDragStart?: OnNodeDrag<NodeType>;
-	/** This event handler is called when a user drags a node */
+	/** This event handler is called when a user drags a node. */
 	onNodeDrag?: OnNodeDrag<NodeType>;
-	/** This event handler is called when a user stops dragging a node */
+	/** This event handler is called when a user stops dragging a node. */
 	onNodeDragStop?: OnNodeDrag<NodeType>;
-	/** This event handler is called when a user clicks on an edge */
+	/** This event handler is called when a user clicks on an edge. */
 	onEdgeClick?: (event: ReactMouseEvent, edge: EdgeType) => void;
-	/** This event handler is called when a user right clicks on an edge */
+	/** This event handler is called when a user right-clicks on an edge. */
 	onEdgeContextMenu?: EdgeMouseHandler<EdgeType>;
-	/** This event handler is called when mouse of a user enters an edge */
+	/** This event handler is called when mouse of a user enters an edge. */
 	onEdgeMouseEnter?: EdgeMouseHandler<EdgeType>;
-	/** This event handler is called when mouse of a user moves over an edge */
+	/** This event handler is called when mouse of a user moves over an edge. */
 	onEdgeMouseMove?: EdgeMouseHandler<EdgeType>;
-	/** This event handler is called when mouse of a user leaves an edge */
+	/** This event handler is called when mouse of a user leaves an edge. */
 	onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
-	/** This event handler is called when a user double clicks on an edge */
+	/** This event handler is called when a user double-clicks on an edge. */
 	onEdgeDoubleClick?: EdgeMouseHandler<EdgeType>;
+	/**
+	 * This handler is called when the source or target of a reconnectable edge is dragged from the
+	 * current node. It will fire even if the edge's source or target do not end up changing.
+	 *
+	 * You can use the `reconnectEdge` utility to convert the connection to a new edge.
+	 */
 	onReconnect?: OnReconnect<EdgeType>;
+	/**
+	 * This event fires when the user begins dragging the source or target of an editable edge.
+	 */
 	onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
+	/**
+	 * This event fires when the user releases the source or target of an editable edge. It is called
+	 * even if an edge update does not occur.
+	 *
+	 */
 	onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
 	/**
-	 * This event handler is called when a Node is updated
+	 * Use this event handler to add interactivity to a controlled flow.
+	 * It is called on node drag, select, and move.
 	 * @example // Use NodesState hook to create edges and get onNodesChange handler
 	 * import ReactFlow, { useNodesState } from '@xyflow/react';
-	 * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes);
+	 * const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
 	 *
 	 * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
-	 * @example // Use helper function to update edge
+	 * @example // Use helper function to update node
 	 * import ReactFlow, { applyNodeChanges } from '@xyflow/react';
 	 *
 	 * const onNodeChange = useCallback(
-	 *  (changes) => setNode((eds) => applyNodeChanges(changes, eds)),
+	 *  (changes) => setNode((nds) => applyNodeChanges(changes, nds)),
 	 *  [],
 	 * );
 	 *
@@ -1637,7 +1654,8 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 */
 	onNodesChange?: OnNodesChange<NodeType>;
 	/**
-	 * This event handler is called when a Edge is updated
+	 * Use this event handler to add interactivity to a controlled flow. It is called on edge select
+	 * and remove.
 	 * @example // Use EdgesState hook to create edges and get onEdgesChange handler
 	 * import ReactFlow, { useEdgesState } from '@xyflow/react';
 	 * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -1654,25 +1672,28 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
 	 */
 	onEdgesChange?: OnEdgesChange<EdgeType>;
-	/** This event handler gets called when a Node is deleted */
+	/** This event handler gets called when a node is deleted. */
 	onNodesDelete?: OnNodesDelete<NodeType>;
-	/** This event handler gets called when a Edge is deleted */
+	/** This event handler gets called when an edge is deleted. */
 	onEdgesDelete?: OnEdgesDelete<EdgeType>;
-	/** This event handler gets called when a Node or Edge is deleted */
+	/** This event handler gets called when a node or edge is deleted. */
 	onDelete?: OnDelete<NodeType, EdgeType>;
-	/** This event handler gets called when a user starts to drag a selection box */
+	/** This event handler gets called when a user starts to drag a selection box. */
 	onSelectionDragStart?: SelectionDragHandler<NodeType>;
-	/** This event handler gets called when a user drags a selection box */
+	/** This event handler gets called when a user drags a selection box. */
 	onSelectionDrag?: SelectionDragHandler<NodeType>;
-	/** This event handler gets called when a user stops dragging a selection box */
+	/** This event handler gets called when a user stops dragging a selection box. */
 	onSelectionDragStop?: SelectionDragHandler<NodeType>;
 	onSelectionStart?: (event: ReactMouseEvent) => void;
 	onSelectionEnd?: (event: ReactMouseEvent) => void;
+	/**
+	 * This event handler is called when a user right-clicks on a node selection.
+	 */
 	onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => void;
 	/**
 	 * When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
 	 *
-	 * You can use the addEdge utility to convert the connection to a complete edge.
+	 * You can use the `addEdge` utility to convert the connection to a complete edge.
 	 * @example // Use helper function to update edges onConnect
 	 * import ReactFlow, { addEdge } from '@xyflow/react';
 	 *
@@ -1684,50 +1705,70 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 * return (<ReactFlow onConnect={onConnect} {...rest} />)
 	 */
 	onConnect?: OnConnect;
-	/** This event handler gets called when a user starts to drag a connection line */
+	/** This event handler gets called when a user starts to drag a connection line. */
 	onConnectStart?: OnConnectStart;
-	/** This event handler gets called when a user stops dragging a connection line */
+	/**
+	 * This callback will fire regardless of whether a valid connection could be made or not. You can
+	 * use the second `connectionState` parameter to have different behavior when a connection was
+	 * unsuccessful.
+	 */
 	onConnectEnd?: OnConnectEnd;
 	onClickConnectStart?: OnConnectStart;
 	onClickConnectEnd?: OnConnectEnd;
-	/** This event handler gets called when a flow has finished initializing */
+	/**
+	 * The `onInit` callback is called when the viewport is initialized. At this point you can use the
+	 * instance to call methods like `fitView` or `zoomTo`.
+	 */
 	onInit?: OnInit<NodeType, EdgeType>;
 	/** This event handler is called while the user is either panning or zooming the viewport. */
 	onMove?: OnMove;
-	/** This event handler gets called when a user starts to pan or zoom the viewport */
+	/** This event handler is called when the user begins to pan or zoom the viewport. */
 	onMoveStart?: OnMoveStart;
-	/** This event handler gets called when a user stops panning or zooming the viewport */
+	/**
+	 * This event handler is called when panning or zooming viewport movement stops.
+	 * If the movement is not user-initiated, the event parameter will be `null`.
+	 */
 	onMoveEnd?: OnMoveEnd;
-	/** This event handler gets called when a user changes group of selected elements in the flow */
+	/** This event handler gets called when a user changes group of selected elements in the flow. */
 	onSelectionChange?: OnSelectionChangeFunc<NodeType, EdgeType>;
-	/** This event handler gets called when user scroll inside the pane */
+	/** This event handler gets called when user scroll inside the pane. */
 	onPaneScroll?: (event?: WheelEvent) => void;
-	/** This event handler gets called when user clicks inside the pane */
+	/** This event handler gets called when user clicks inside the pane. */
 	onPaneClick?: (event: ReactMouseEvent) => void;
-	/** This event handler gets called when user right clicks inside the pane */
+	/** This event handler gets called when user right clicks inside the pane. */
 	onPaneContextMenu?: (event: ReactMouseEvent | MouseEvent) => void;
-	/** This event handler gets called when mouse enters the pane */
+	/** This event handler gets called when mouse enters the pane. */
 	onPaneMouseEnter?: (event: ReactMouseEvent) => void;
-	/** This event handler gets called when mouse moves over the pane */
+	/** This event handler gets called when mouse moves over the pane. */
 	onPaneMouseMove?: (event: ReactMouseEvent) => void;
-	/** This event handler gets called when mouse leaves the pane */
+	/** This event handler gets called when mouse leaves the pane. */
 	onPaneMouseLeave?: (event: ReactMouseEvent) => void;
 	/**
-	 * Distance that the mouse can move between mousedown/up that will trigger a click
+	 * Distance that the mouse can move between mousedown/up that will trigger a click.
 	 * @default 0
 	 */
 	paneClickDistance?: number;
 	/**
-	 * Distance that the mouse can move between mousedown/up that will trigger a click
+	 * Distance that the mouse can move between mousedown/up that will trigger a click.
 	 * @default 0
 	 */
 	nodeClickDistance?: number;
-	/** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
+	/**
+	 * This handler is called before nodes or edges are deleted, allowing the deletion to be aborted
+	 * by returning `false` or modified by returning updated nodes and edges.
+	 */
 	onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
 	/**
 	 * Custom node types to be available in a flow.
 	 *
-	 * React Flow matches a node's type to a component in the nodeTypes object.
+	 * React Flow matches a node's type to a component in the `nodeTypes` object.
+	 * @TODO check if @default is correct
+	 * @default {
+	 *   input: InputNode,
+	 *   default: DefaultNode,
+	 *   output: OutputNode,
+	 *   group: GroupNode
+	 * }
 	 * @example
 	 * import CustomNode from './CustomNode';
 	 *
@@ -1737,7 +1778,15 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	/**
 	 * Custom edge types to be available in a flow.
 	 *
-	 * React Flow matches an edge's type to a component in the edgeTypes object.
+	 * React Flow matches an edge's type to a component in the `edgeTypes` object.
+	 * @TODO check if @default is correct
+	 * @default {
+	 *   default: BezierEdge,
+	 *   straight: StraightEdge,
+	 *   step: StepEdge,
+	 *   smoothstep: SmoothStepEdge,
+	 *   simplebezier: SimpleBezier
+	 * }
 	 * @example
 	 * import CustomEdge from './CustomEdge';
 	 *
@@ -1748,91 +1797,110 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 * The type of edge path to use for connection lines.
 	 *
 	 * Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created!
+	 * @default ConnectionLineType.Bezier
 	 */
 	connectionLineType?: ConnectionLineType;
-	/** Styles to be applied to the connection line */
+	/** Styles to be applied to the connection line. */
 	connectionLineStyle?: CSSProperties;
-	/** React Component to be used as a connection line */
+	/** React Component to be used as a connection line. */
 	connectionLineComponent?: ConnectionLineComponent<NodeType>;
-	/** Styles to be applied to the container of the connection line */
+	/** Styles to be applied to the container of the connection line. */
 	connectionLineContainerStyle?: CSSProperties;
 	/**
-	 * 'strict' connection mode will only allow you to connect source handles to target handles.
-	 *
-	 * 'loose' connection mode will allow you to connect handles of any type to one another.
+	 * A loose connection mode will allow you to connect handles with differing types, including
+	 * source-to-source connections. However, it does not support target-to-target connections. Strict
+	 * mode allows only connections between source handles and target handles.
 	 * @default 'strict'
 	 */
 	connectionMode?: ConnectionMode;
 	/**
-	 * Pressing down this key deletes all selected nodes & edges.
+	 * If set, pressing the key or chord will delete any selected nodes and edges. Passing an array
+	 * represents multiple keys that can be pressed.
+	 *
+	 * For example, `["Delete", "Backspace"]` will delete selected elements when either key is pressed.
 	 * @default 'Backspace'
 	 */
 	deleteKeyCode?: KeyCode | null;
 	/**
-	 * If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+	 * If set, holding this key will let you click and drag to draw a selection box around multiple
+	 * nodes and edges. Passing an array represents multiple keys that can be pressed.
 	 *
-	 * By setting this prop to null you can disable this functionality.
-	 * @default 'Space'
+	 * For example, `["Shift", "Meta"]` will allow you to draw a selection box when either key is
+	 * pressed.
+	 * @default 'Shift'
 	 */
 	selectionKeyCode?: KeyCode | null;
-	/** Select multiple elements with a selection box, without pressing down selectionKey */
+	/**
+	 * Select multiple elements with a selection box, without pressing down `selectionKey`.
+	 * @default false
+	 */
 	selectionOnDrag?: boolean;
 	/**
-	 * When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
+	 * When set to `"partial"`, when the user creates a selection box by click and dragging nodes that
+	 * are only partially in the box are still selected.
 	 * @default 'full'
 	 */
 	selectionMode?: SelectionMode$1;
 	/**
-	 * If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+	 * If a key is set, you can pan the viewport while that key is held down even if `panOnScroll`
+	 * is set to `false`.
 	 *
-	 * By setting this prop to null you can disable this functionality.
+	 * By setting this prop to `null` you can disable this functionality.
 	 * @default 'Space'
 	 */
 	panActivationKeyCode?: KeyCode | null;
 	/**
 	 * Pressing down this key you can select multiple elements by clicking.
-	 * @default 'Meta' for macOS, "Ctrl" for other systems
+	 * @default "Meta" for macOS, "Control" for other systems
 	 */
 	multiSelectionKeyCode?: KeyCode | null;
 	/**
-	 * If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
+	 * If a key is set, you can zoom the viewport while that key is held down even if `panOnScroll`
+	 * is set to `false`.
 	 *
-	 * By setting this prop to null you can disable this functionality.
-	 * @default 'Meta' for macOS, "Ctrl" for other systems
+	 * By setting this prop to `null` you can disable this functionality.
+	 * @default "Meta" for macOS, "Control" for other systems
 	 *
 	 */
 	zoomActivationKeyCode?: KeyCode | null;
-	/** Set this prop to make the flow snap to the grid */
+	/** When enabled, nodes will snap to the grid when dragged. */
 	snapToGrid?: boolean;
 	/**
-	 * Grid all nodes will snap to
+	 * If `snapToGrid` is enabled, this prop configures the grid that nodes will snap to.
 	 * @example [20, 20]
 	 */
 	snapGrid?: SnapGrid;
 	/**
-	 * You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
+	 * You can enable this optimisation to instruct React 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
 	 */
 	onlyRenderVisibleElements?: boolean;
 	/**
-	 * Controls if all nodes should be draggable
+	 * Controls whether all nodes should be draggable or not. Individual nodes can override this
+	 * setting by setting their `draggable` prop. If you want to use the mouse handlers on
+	 * non-draggable nodes, you need to add the `"nopan"` class to those nodes.
 	 * @default true
 	 */
 	nodesDraggable?: boolean;
 	/**
-	 * Controls if all nodes should be connectable to each other
+	 * Controls whether all nodes should be connectable or not. Individual nodes can override this
+	 * setting by setting their `connectable` prop.
 	 * @default true
 	 */
 	nodesConnectable?: boolean;
 	/**
-	 * Controls if all nodes should be focusable
+	 * When `true`, focus between nodes can be cycled with the `Tab` key and selected with the `Enter`
+	 * key. This option can be overridden by individual nodes by setting their `focusable` prop.
 	 * @default true
 	 */
 	nodesFocusable?: boolean;
 	/**
-	 * Defines nodes relative position to its coordinates
+	 * The origin of the node to use when placing it in the flow or looking up its `x` and `y`
+	 * position. An origin of `[0, 0]` means that a node's top left corner will be placed at the `x`
+	 * and `y` position.
+	 * @default [0, 0]
 	 * @example
 	 * [0, 0] // default, top left
 	 * [0.5, 0.5] // center
@@ -1840,49 +1908,57 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 */
 	nodeOrigin?: NodeOrigin;
 	/**
-	 * Controls if all edges should be focusable
+	 * When `true`, focus between edges can be cycled with the `Tab` key and selected with the `Enter`
+	 * key. This option can be overridden by individual edges by setting their `focusable` prop.
 	 * @default true
 	 */
 	edgesFocusable?: boolean;
 	/**
-	 * Controls if all edges should be updateable
+	 * Whether edges can be updated once they are created. When both this prop is `true` and an
+	 * `onReconnect` handler is provided, the user can drag an existing edge to a new source or
+	 * target. Individual edges can override this value with their reconnectable property.
 	 * @default true
 	 */
 	edgesReconnectable?: boolean;
 	/**
-	 * Controls if all elements should (nodes & edges) be selectable
+	 * When `true`, elements (nodes and edges) can be selected by clicking on them. This option can be
+	 * overridden by individual elements by setting their `selectable` prop.
 	 * @default true
 	 */
 	elementsSelectable?: boolean;
 	/**
-	 * If true, nodes get selected on drag
+	 * If `true`, nodes get selected on drag.
 	 * @default true
 	 */
 	selectNodesOnDrag?: boolean;
 	/**
-	 * Enableing this prop allows users to pan the viewport by clicking and dragging.
+	 * Enabling this prop allows users to pan the viewport by clicking and dragging.
 	 *
 	 * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
+	 * @default true
 	 * @example [0, 2] // allows panning with the left and right mouse buttons
 	 * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
 	 */
 	panOnDrag?: boolean | number[];
 	/**
-	 * Minimum zoom level
+	 * Minimum zoom level.
 	 * @default 0.5
 	 */
 	minZoom?: number;
 	/**
-	 * Maximum zoom level
+	 * Maximum zoom level.
 	 * @default 2
 	 */
 	maxZoom?: number;
-	/** Controlled viewport to be used instead of internal one */
+	/**
+	 * When you pass a `viewport` prop, it's controlled, and you also need to pass `onViewportChange`
+	 * to handle internal changes.
+	 */
 	viewport?: Viewport;
 	/**
-	 * Sets the initial position and zoom of the viewport.
-	 *
-	 * If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
+	 * Sets the initial position and zoom of the viewport. If a default viewport is provided but
+	 * `fitView` is enabled, the default viewport will be ignored.
+	 * @default { x: 0, y: 0, zoom: 1 }
 	 * @example
 	 * const initialViewport = {
 	 *  zoom: 0.5,
@@ -1891,13 +1967,14 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 */
 	defaultViewport?: Viewport;
 	/**
-	 * Gets called when the viewport changes.
+	 * Used when working with a controlled viewport for updating the user viewport state.
 	 */
 	onViewportChange?: (viewport: Viewport) => void;
 	/**
-	 * By default the viewport extends infinitely. You can use this prop to set a boundary.
+	 * By default, the viewport extends infinitely. You can use this prop to set a boundary.
 	 *
 	 * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+	 * @default [[-∞, -∞], [+∞, +∞]]
 	 * @example [[-1000, -10000], [1000, 1000]]
 	 */
 	translateExtent?: CoordinateExtent;
@@ -1907,51 +1984,86 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 */
 	preventScrolling?: boolean;
 	/**
-	 * By default nodes can be placed on an infinite flow. You can use this prop to set a boundary.
+	 * By default, nodes can be placed on an infinite flow. You can use this prop to set a boundary.
 	 *
 	 * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
 	 * @example [[-1000, -10000], [1000, 1000]]
 	 */
 	nodeExtent?: CoordinateExtent;
 	/**
-	 * Color of edge markers
-	 * @example "#b1b1b7"
+	 * Color of edge markers.
+	 * @default '#b1b1b7'
 	 */
 	defaultMarkerColor?: string;
-	/** Controls if the viewport should zoom by scrolling inside the container */
+	/**
+	 * Controls if the viewport should zoom by scrolling inside the container.
+	 * @default true
+	 */
 	zoomOnScroll?: boolean;
-	/** Controls if the viewport should zoom by pinching on a touch screen */
+	/**
+	 * Controls if the viewport should zoom by pinching on a touch screen.
+	 * @default true
+	 */
 	zoomOnPinch?: boolean;
 	/**
-	 * Controls if the viewport should pan by scrolling inside the container
+	 * Controls if the viewport should pan by scrolling inside the container.
 	 *
-	 * Can be limited to a specific direction with panOnScrollMode
+	 * Can be limited to a specific direction with `panOnScrollMode`.
+	 * @default false
 	 */
 	panOnScroll?: boolean;
 	/**
 	 * Controls how fast viewport should be panned on scroll.
 	 *
-	 * Use togther with panOnScroll prop.
+	 * Use together with `panOnScroll` prop.
+	 * @default 0.5
 	 */
 	panOnScrollSpeed?: number;
 	/**
-	 * This prop is used to limit the direction of panning when panOnScroll is enabled.
+	 * This prop is used to limit the direction of panning when `panOnScroll` is enabled.
 	 *
-	 * The "free" option allows panning in any direction.
+	 * The `"free"` option allows panning in any direction.
 	 * @default "free"
 	 * @example "horizontal" | "vertical"
 	 */
 	panOnScrollMode?: PanOnScrollMode;
-	/** Controls if the viewport should zoom by double clicking somewhere on the flow */
+	/**
+	 * Controls if the viewport should zoom by double-clicking somewhere on the flow.
+	 * @default true
+	 */
 	zoomOnDoubleClick?: boolean;
+	/**
+	 * The radius around an edge connection that can trigger an edge reconnection.
+	 * @default 10
+	 */
 	reconnectRadius?: number;
+	/**
+	 * If a node is draggable, clicking and dragging that node will move it around the canvas. Adding
+	 * the `"nodrag"` class prevents this behavior and this prop allows you to change the name of that
+	 * class.
+	 * @default "nodrag"
+	 */
 	noDragClassName?: string;
+	/**
+	 * Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport.
+	 * Adding the `"nowheel"` class to an element n the canvas will prevent this behavior and this prop
+	 * allows you to change the name of that class.
+	 * @default "nowheel"
+	 */
 	noWheelClassName?: string;
+	/**
+	 * If an element in the canvas does not stop mouse events from propagating, clicking and dragging
+	 * that element will pan the viewport. Adding the `"nopan"` class prevents this behavior and this
+	 * prop allows you to change the name of that class.
+	 * @default "nopan"
+	 */
 	noPanClassName?: string;
-	/** If set, initial viewport will show all nodes & edges */
+	/** When `true`, the flow will be zoomed and panned to fit all the nodes initially provided. */
 	fitView?: boolean;
 	/**
-	 * Options to be used in combination with fitView
+	 * When you typically call `fitView` on a `ReactFlowInstance`, you can provide an object of
+	 * options to customize its behavior. This prop lets you do the same for the initial `fitView`
+	 * call.
 	 * @example
 	 * const fitViewOptions = {
 	 *  padding: 0.1,
@@ -1964,15 +2076,18 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 */
 	fitViewOptions?: FitViewOptions;
 	/**
-	 *The connectOnClick option lets you click or tap on a source handle to start a connection
+	 * The `connectOnClick` option lets you click or tap on a source handle to start a connection
 	 * and then click on a target handle to complete the connection.
 	 *
-	 * If you set this option to false, users will need to drag the connection line to the target
+	 * If you set this option to `false`, users will need to drag the connection line to the target
 	 * handle to create a connection.
+	 * @default true
 	 */
 	connectOnClick?: boolean;
 	/**
-	 * Set position of the attribution
+	 * By default, React Flow will render a small attribution in the bottom right corner of the flow.
+	 *
+	 * You can use this prop to change its position in case you want to place something else there.
 	 * @default 'bottom-right'
 	 * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
 	 */
@@ -1992,21 +2107,23 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	elevateNodesOnSelect?: boolean;
 	/**
 	 * Enabling this option will raise the z-index of edges when they are selected.
-	 * @default true
 	 */
 	elevateEdgesOnSelect?: boolean;
 	/**
-	 * Can be set true if built-in keyboard controls should be disabled.
+	 * You can use this prop to disable keyboard accessibility features such as selecting nodes or
+	 * moving selected nodes with the arrow keys.
 	 * @default false
 	 */
 	disableKeyboardA11y?: boolean;
 	/**
-	 * You can enable this prop to automatically pan the viewport while dragging a node.
+	 * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
+	 * viewport while dragging a node.
 	 * @default true
 	 */
 	autoPanOnNodeDrag?: boolean;
 	/**
-	 * You can enable this prop to automatically pan the viewport while dragging a node.
+	 * When `true`, the viewport will pan automatically when the cursor moves to the edge of the
+	 * viewport while creating a connection.
 	 * @default true
 	 */
 	autoPanOnConnect?: boolean;
@@ -2016,12 +2133,12 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	 */
 	autoPanSpeed?: number;
 	/**
-	 * You can enable this prop to automatically pan the viewport while making a new connection.
-	 * @default true
+	 * The radius around a handle where you drop a connection line to create a new edge.
+	 * @default 20
 	 */
 	connectionRadius?: number;
 	/**
-	 * Ocassionally something may happen that causes Svelte Flow to throw an error.
+	 * Occasionally something may happen that causes React Flow to throw an error.
 	 *
 	 * Instead of exploding your application, we log a message to the console and then call this event handler.
 	 * You might use it for additional logging or to show a message to the user.
@@ -2030,32 +2147,33 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	/**
 	 * This callback can be used to validate a new connection
 	 *
-	 * If you return false, the edge will not be added to your flow.
-	 * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
-	 * @default (connection: Connection) => true
+	 * If you return `false`, the edge will not be added to your flow.
+	 * If you have custom connection logic its preferred to use this callback over the
+	 * `isValidConnection` prop on the handle component for performance reasons.
 	 */
 	isValidConnection?: IsValidConnection<EdgeType>;
 	/**
-	 * With a threshold greater than zero you can control the distinction between node drag and click events.
+	 * With a threshold greater than zero you can delay node drag events.
 	 *
 	 * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
+	 *
+	 * 1 is the default value, so clicks don't trigger drag events.
 	 * @default 1
 	 */
 	nodeDragThreshold?: number;
-	/** Sets a fixed width for the flow */
+	/** Sets a fixed width for the flow. */
 	width?: number;
-	/** Sets a fixed height for the flow */
+	/** Sets a fixed height for the flow. */
 	height?: number;
 	/**
-	 * Controls color scheme used for styling the flow
-	 * @default 'system'
+	 * Controls color scheme used for styling the flow.
+	 * @default 'light'
 	 * @example 'system' | 'light' | 'dark'
 	 */
 	colorMode?: ColorMode;
 	/**
-	 * If set true, some debug information will be logged to the console like which events are fired.
-	 *
-	 * @default undefined
+	 * If set `true`, some debug information will be logged to the console like which events are fired.
+	 * @default false
 	 */
 	debug?: boolean;
 }
@@ -2792,6 +2910,8 @@ type KeyofBase = keyof any;
 type Get<T, K extends KeyofBase> = Extract<T, {
 	[K1 in K]: any;
 }>[K];
+type HasIndexSignature<T> = string extends keyof T ? true : false;
+type ValueWithUndefinedForIndexSignatures<Value, Key extends keyof Value> = HasIndexSignature<Value> extends true ? undefined | Value[Key] : Value[Key];
 type WritableStore<Value = any> = (Value extends object ? MapStore<Value> : never) | WritableAtom<Value>;
 type Store<Value = any> = ReadableAtom<Value> | WritableStore<Value>;
 type AnyStore<Value = any> = {
@@ -2850,7 +2970,7 @@ interface MapStore<Value extends object = any> extends WritableAtom<Value> {
 	 * @param key The key name.
 	 * @param value New value.
 	 */
-	setKey<Key extends AllKeys<Value>>(key: Key, value: Get<Value, Key> | Value[Key]): void;
+	setKey<Key extends AllKeys<Value>>(key: Key, value: Get<Value, Key> | ValueWithUndefinedForIndexSignatures<Value, Key>): void;
 	/**
 	 * Subscribe to store changes and call listener immediately.
 	 *