@circonomit/solid-flow/dist/_tsup-dts-rollup.d.ts

Solid Flow - A highly customizable Solid library for building node-based editors and interactive flow charts.

import { Accessor } from 'solid-js';
import { addEdge } from '@xyflow/system';
import { Align } from '@xyflow/system';
import { BezierPathOptions } from '@xyflow/system';
import { Box } from '@xyflow/system';
import { ColorMode } from '@xyflow/system';
import { ColorModeClass } from '@xyflow/system';
import { Component } from 'solid-js';
import { Connection } from '@xyflow/system';
import { ConnectionInProgress } from '@xyflow/system';
import { ConnectionLineType } from '@xyflow/system';
import { ConnectionMode } from '@xyflow/system';
import { ConnectionState } from '@xyflow/system';
import { Context } from 'solid-js';
import { ContextProviderComponent } from 'solid-js';
import { ControlLinePosition } from '@xyflow/system';
import { ControlPosition } from '@xyflow/system';
import { CoordinateExtent } from '@xyflow/system';
import { createEffect } from 'solid-js';
import { DefaultEdgeOptions as DefaultEdgeOptions_2 } from '..';
import type { DefaultEdgeOptionsBase } from '@xyflow/system';
import { Dimensions } from '@xyflow/system';
import { Edge as Edge_2 } from '..';
import { EdgeAddChange } from '@xyflow/system';
import type { EdgeBase } from '@xyflow/system';
import { EdgeChange } from '@xyflow/system';
import { EdgeComponentProps as EdgeComponentProps_2 } from '../..';
import type { EdgeLookup } from '@xyflow/system';
import { EdgeMarker } from '@xyflow/system';
import { EdgeMarkerType } from '@xyflow/system';
import { EdgePosition } from '@xyflow/system';
import { EdgeRemoveChange } from '@xyflow/system';
import { EdgeReplaceChange } from '@xyflow/system';
import { EdgeSelectionChange } from '@xyflow/system';
import { FinalConnectionState } from '@xyflow/system';
import type { FitBounds } from '@xyflow/system';
import { FitBoundsOptions } from '@xyflow/system';
import { FitViewOptions as FitViewOptions_2 } from '..';
import type { FitViewOptionsBase } from '@xyflow/system';
import type { FitViewParamsBase } from '@xyflow/system';
import { getBezierEdgeCenter } from '@xyflow/system';
import { getBezierPath } from '@xyflow/system';
import { GetBezierPathParams } from '@xyflow/system';
import { getConnectedEdges } from '@xyflow/system';
import { getEdgeCenter } from '@xyflow/system';
import { getIncomers } from '@xyflow/system';
import { getNodesBounds } from '@xyflow/system';
import { getOutgoers } from '@xyflow/system';
import { getSmoothStepPath } from '@xyflow/system';
import { GetSmoothStepPathParams } from '@xyflow/system';
import { getStraightPath } from '@xyflow/system';
import { GetStraightPathParams } from '@xyflow/system';
import type { GetViewport } from '@xyflow/system';
import { getViewportForBounds } from '@xyflow/system';
import type { GetZoom } from '@xyflow/system';
import { Handle as Handle_2 } from '@xyflow/system';
import { HandleConnection } from '@xyflow/system';
import { HandleProps as HandleProps_2 } from '@xyflow/system';
import { HandleType } from '@xyflow/system';
import { InternalNode as InternalNode_2 } from '..';
import { InternalNodeBase } from '@xyflow/system';
import { InternalNodeUpdate } from '@xyflow/system';
import { IsValidConnection as IsValidConnection_2 } from '..';
import { JSX } from 'solid-js';
import type { JSXElement } from 'solid-js';
import { KeyCode } from '@xyflow/system';
import { MarkerType } from '@xyflow/system';
import { NoConnection } from '@xyflow/system';
import { Node as Node_3 } from '..';
import { NodeAddChange } from '@xyflow/system';
import { NodeBase } from '@xyflow/system';
import { NodeChange } from '@xyflow/system';
import { NodeConnection } from '@xyflow/system';
import { NodeDimensionChange } from '@xyflow/system';
import type { NodeLookup } from '@xyflow/system';
import { NodeOrigin } from '@xyflow/system';
import { NodePositionChange } from '@xyflow/system';
import type { NodeProps as NodeProps_2 } from '@xyflow/system';
import { NodeRemoveChange } from '@xyflow/system';
import { NodeReplaceChange } from '@xyflow/system';
import { NodeSelectionChange } from '@xyflow/system';
import { OnBeforeDelete as OnBeforeDelete_2 } from '..';
import type { OnBeforeDeleteBase } from '@xyflow/system';
import { OnConnect } from '@xyflow/system';
import { OnConnectEnd } from '@xyflow/system';
import { OnConnectStart } from '@xyflow/system';
import { OnConnectStartParams } from '@xyflow/system';
import { OnDelete as OnDelete_2 } from '..';
import { OnEdgesChange as OnEdgesChange_2 } from '..';
import { OnEdgesDelete as OnEdgesDelete_2 } from '..';
import { OnError } from '@xyflow/system';
import { OnMove } from '@xyflow/system';
import { OnMoveEnd } from '@xyflow/system';
import { OnMoveStart } from '@xyflow/system';
import { OnNodeDrag as OnNodeDrag_2 } from '..';
import { OnNodesChange as OnNodesChange_2 } from '..';
import { OnNodesDelete as OnNodesDelete_2 } from '..';
import { OnReconnect } from '@xyflow/system';
import { OnResize } from '@xyflow/system';
import { OnResizeEnd } from '@xyflow/system';
import { OnResizeStart } from '@xyflow/system';
import { OnSelectionChangeFunc as OnSelectionChangeFunc_2 } from '..';
import { OnSelectionDrag } from '@xyflow/system';
import { OnViewportChange } from '@xyflow/system';
import { PanBy } from '@xyflow/system';
import { PanelPosition } from '@xyflow/system';
import { PanOnScrollMode } from '@xyflow/system';
import { PanZoomInstance } from '@xyflow/system';
import { ParentProps } from 'solid-js';
import { Position as Position_2 } from '@xyflow/system';
import { ProOptions } from '@xyflow/system';
import { ReactiveConnectionLookup as ReactiveConnectionLookup_2 } from '..';
import { ReactiveEdgeLookup as ReactiveEdgeLookup_2 } from '..';
import { ReactiveMap } from '@solid-primitives/map';
import { ReactiveStore as ReactiveStore_2 } from '../store/initialState';
import { ReactiveStore as ReactiveStore_3 } from './initialState';
import { reconnectEdge } from '@xyflow/system';
import { Rect } from '@xyflow/system';
import { RefObject as RefObject_2 } from '../../utils/hooks';
import type { ResizeControlDirection } from '@xyflow/system';
import { ResizeControlVariant } from '@xyflow/system';
import { ResizeDragEvent } from '@xyflow/system';
import { ResizeParams } from '@xyflow/system';
import { ResizeParamsWithDirection } from '@xyflow/system';
import { SelectionMode as SelectionMode_2 } from '@xyflow/system';
import { SelectionRect } from '@xyflow/system';
import type { SetCenter } from '@xyflow/system';
import { SetCenterOptions } from '@xyflow/system';
import { SetStoreFunction } from 'solid-js/store';
import { Setter } from 'solid-js';
import type { SetViewport } from '@xyflow/system';
import { ShouldResize } from '@xyflow/system';
import { SmoothStepPathOptions } from '@xyflow/system';
import { SnapGrid } from '@xyflow/system';
import type { StepPathOptions } from '@xyflow/system';
import { Transform } from '@xyflow/system';
import { UnselectNodesAndEdgesParams as UnselectNodesAndEdgesParams_2 } from '..';
import { UpdateConnection } from '@xyflow/system';
import type { UpdateNodeInternals } from '@xyflow/system';
import { UpdateNodePositions } from '@xyflow/system';
import { Viewport } from '@xyflow/system';
import { ViewportHelperFunctionOptions } from '@xyflow/system';
import { withResolvers } from '@xyflow/system';
import { Writable as Writable_2 } from '../store/initialState';
import { Writable as Writable_3 } from './initialState';
import { XYPosition } from '@xyflow/system';
import { XYZPosition } from '@xyflow/system';
import type { ZoomInOut } from '@xyflow/system';
import type { ZoomTo } from '@xyflow/system';

export declare function A11yDescriptions(p: {
    rfId: string;
    disableKeyboardA11y?: boolean;
}): JSX.Element;

export { addEdge }

export { Align }

/**
 * Drop in function that applies edge changes to an array of edges.
 * @public
 * @param changes - Array of changes to apply.
 * @param edges - Array of edge to apply the changes to.
 * @returns Array of updated edges.
 * @example
 * ```tsx
 *import { useState, useCallback } from 'react';
 *import { SolidFlow, applyEdgeChanges } from '@xyflow/react';
 *
 *export default function Flow() {
 *  const [nodes, setNodes] = useState([]);
 *  const [edges, setEdges] = useState([]);
 *  const onEdgesChange = useCallback(
 *    (changes) => {
 *      setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));
 *    },
 *    [setEdges],
 *  );
 *
 *  return (
 *    <SolidFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
 *  );
 *}
 *```
 * @remarks Various events on the <SolidFlow /> component can produce an {@link EdgeChange}
 * that describes how to update the edges of your flow in some way.
 * If you don't need any custom behaviour, this util can be used to take an array
 * of these changes and apply them to your edges.
 */
declare function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange<EdgeType>[], edges: EdgeType[]): EdgeType[];
export { applyEdgeChanges }
export { applyEdgeChanges as applyEdgeChanges_alias_1 }
export { applyEdgeChanges as applyEdgeChanges_alias_2 }

/**
 * Drop in function that applies node changes to an array of nodes.
 * @public
 * @param changes - Array of changes to apply.
 * @param nodes - Array of nodes to apply the changes to.
 * @returns Array of updated nodes.
 * @example
 *```tsx
 *import { useState, useCallback } from 'react';
 *import { SolidFlow, applyNodeChanges, type Node, type Edge, type OnNodesChange } from '@xyflow/react';
 *
 *export default function Flow() {
 *  const [nodes, setNodes] = useState<Node[]>([]);
 *  const [edges, setEdges] = useState<Edge[]>([]);
 *  const onNodesChange: OnNodesChange = useCallback(
 *    (changes) => {
 *      setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
 *    },
 *    [setNodes],
 *  );
 *
 *  return (
 *    <SolidFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
 *  );
 *}
 *```
 * @remarks Various events on the <SolidFlow /> component can produce an {@link NodeChange}
 * that describes how to update the edges of your flow in some way.
 * If you don't need any custom behaviour, this util can be used to take an array
 * of these changes and apply them to your edges.
 */
declare function applyNodeChanges<NodeType extends Node_2 = Node_2>(changes: NodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
export { applyNodeChanges }
export { applyNodeChanges as applyNodeChanges_alias_1 }
export { applyNodeChanges as applyNodeChanges_alias_2 }

export declare const ARIA_EDGE_DESC_KEY = "solid-flow__edge-desc";

export declare const ARIA_LIVE_MESSAGE = "solid-flow__aria-live";

export declare const ARIA_NODE_DESC_KEY = "solid-flow__node-desc";

export declare const arrowKeyDiffs: Record<string, XYPosition>;

export declare function Attribution(_p: AttributionProps): JSX.Element;

declare type AttributionProps = {
    proOptions?: ProOptions;
    position?: PanelPosition;
};

/**
 * The `<Background />` component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.
 *
 * @example
 *
 * A simple example of how to use the Background component.
 *
 * ```tsx
 * import { SolidFlow, Background, BackgroundVariant } from '@circonomit/solid-flow';
 *
 * export default function Flow() {
 *   return (
 *     <SolidFlow defaultNodes={[...]} defaultEdges={[...]}>
 *       <Background color="#ccc" variant={BackgroundVariant.Dots} />
 *     </SolidFlow>
 *   );
 * }
 * ```
 *
 * @example
 *
 * In this example you can see how to combine multiple backgrounds
 *
 * ```tsx
 * import { SolidFlow, Background, BackgroundVariant } from '@circonomit/solid-flow';
 * import '@circonomit/solid-flow/dist/style.css';
 *
 * export default function Flow() {
 *   return (
 *     <SolidFlow defaultNodes={[...]} defaultEdges={[...]}>
 *       <Background
 *         id="1"
 *         gap={10}
 *         color="#f1f1f1"
 *         variant={BackgroundVariant.Lines}
 *       />
 *       <Background
 *         id="2"
 *         gap={100}
 *         color="#ccc"
 *         variant={BackgroundVariant.Lines}
 *       />
 *     </SolidFlow>
 *   );
 * }
 * ```
 *
 * @remarks
 *
 * When combining multiple <Background /> components it's important to give each of them a unique id prop!
 *
 */
declare const Background: typeof BackgroundComponent;
export { Background }
export { Background as Background_alias_1 }
export { Background as Background_alias_2 }
export { Background as Background_alias_3 }

declare function BackgroundComponent(_p: BackgroundProps): JSX.Element;

declare namespace BackgroundComponent {
    var displayName: string;
}

declare type BackgroundProps = {
    id?: string;
    /** Color of the pattern */
    color?: string;
    /** Color of the background */
    bgColor?: string;
    /** Class applied to the container */
    className?: string;
    /** Class applied to the pattern */
    patternClassName?: string;
    /** Gap between repetitions of the pattern */
    gap?: number | [number, number];
    /** Size of a single pattern element */
    size?: number;
    /** Offset of the pattern */
    offset?: number;
    /** Line width of the Line pattern */
    lineWidth?: number;
    /** Variant of the pattern
     * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
     * 'lines', 'dots', 'cross'
     */
    variant?: BackgroundVariant;
    /** Style applied to the container */
    style?: JSX.CSSProperties;
};
export { BackgroundProps }
export { BackgroundProps as BackgroundProps_alias_1 }
export { BackgroundProps as BackgroundProps_alias_2 }
export { BackgroundProps as BackgroundProps_alias_3 }

declare enum BackgroundVariant {
    Lines = "lines",
    Dots = "dots",
    Cross = "cross"
}
export { BackgroundVariant }
export { BackgroundVariant as BackgroundVariant_alias_1 }
export { BackgroundVariant as BackgroundVariant_alias_2 }
export { BackgroundVariant as BackgroundVariant_alias_3 }

/**
 * The `<BaseEdge />` component gets used internally for all the edges. It can be
 * used inside a custom edge and handles the invisible helper edge and the edge label
 * for you.
 *
 * @public
 * @example
 * ```jsx
 *import { BaseEdge } from '@circonomit/solid-flow';
 *
 *export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
 *  const [edgePath] = getStraightPath({
 *    sourceX,
 *    sourceY,
 *    targetX,
 *    targetY,
 *  });
 *
 *  return <BaseEdge path={edgePath} {...props} />;
 *}
 *```
 *
 * @remarks If you want to use an edge marker with the [`<BaseEdge />`](/api-reference/components/base-edge) component,
 * you can pass the `markerStart` or `markerEnd` props passed to your custom edge
 * through to the [`<BaseEdge />`](/api-reference/components/base-edge) component.
 * You can see all the props passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
 */
declare function BaseEdge(_p: BaseEdgeProps): JSX.Element;
export { BaseEdge }
export { BaseEdge as BaseEdge_alias_1 }

/**
 * BaseEdge component props
 * @public
 * @expand
 */
declare type BaseEdgeProps = Omit<JSX.HTMLAttributes<SVGPathElement>, "d" | "path" | "markerStart" | "markerEnd"> & EdgeLabelOptions & {
    /**
     * The width of the invisible area around the edge that the user can interact with. This is
     * useful for making the edge easier to click or hover over.
     * @default 20
     */
    interactionWidth?: number;
    /** The x position of edge label */
    labelX?: number;
    /** The y position of edge label */
    labelY?: number;
    /**
     * The SVG path string that defines the edge. This should look something like
     * `'M 0 0 L 100 100'` for a simple line. The utility functions like `getSimpleBezierEdge` can
     * be used to generate this string for you.
     */
    path: string;
    /**
     * The id of the SVG marker to use at the start of the edge. This should be defined in a
     * `<defs>` element in a separate SVG document or element.
     */
    markerStart?: string;
    /**
     * The id of the SVG marker to use at the end of the edge. This should be defined in a `<defs>`
     * element in a separate SVG document or element.
     */
    markerEnd?: string;
};
export { BaseEdgeProps }
export { BaseEdgeProps as BaseEdgeProps_alias_1 }
export { BaseEdgeProps as BaseEdgeProps_alias_2 }

/**
 * This is a context provider that holds and processes the node and edge update queues
 * that are needed to handle setNodes, addNodes, setEdges and addEdges.
 *
 * @internal
 */
export declare function BatchProvider<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(p: {
    children: JSX.Element;
}): JSX.Element;

/**
 * Component that can be used inside a custom edge to render a bezier curve.
 *
 * @public
 * @example
 *
 * ```tsx
 * import { BezierEdge } from '@circonomit/solid-flow';
 *
 * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
 *   return (
 *     <BezierEdge
 *       sourceX={sourceX}
 *       sourceY={sourceY}
 *       targetX={targetX}
 *       targetY={targetY}
 *       sourcePosition={sourcePosition}
 *       targetPosition={targetPosition}
 *     />
 *   );
 * }
 * ```
 */
declare const BezierEdge: (_p: BezierEdgeProps) => JSX.Element;
export { BezierEdge }
export { BezierEdge as BezierEdge_alias_1 }
export { BezierEdge as BezierEdge_alias_2 }

declare type BezierEdge_2<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, "default"> & {
    pathOptions?: BezierPathOptions;
};

/**
 * @internal
 */
declare const BezierEdgeInternal: (_p: BezierEdgeProps) => JSX.Element;
export { BezierEdgeInternal }
export { BezierEdgeInternal as BezierEdgeInternal_alias_1 }

/**
 * BezierEdge component props
 * @public
 * @expand
 */
declare type BezierEdgeProps = EdgeComponentWithPathOptions<BezierPathOptions>;
export { BezierEdgeProps }
export { BezierEdgeProps as BezierEdgeProps_alias_1 }
export { BezierEdgeProps as BezierEdgeProps_alias_2 }

export { BezierPathOptions }

export { Box }

declare type BuiltInEdge = SmoothStepEdge_2 | BezierEdge_2 | StepEdge_2 | StraightEdge_2;
export { BuiltInEdge }
export { BuiltInEdge as BuiltInEdge_alias_1 }
export { BuiltInEdge as BuiltInEdge_alias_2 }

export declare const builtinEdgeTypes: EdgeTypes;

/**
 * The `BuiltInNode` type represents the built-in node types that are available in React Flow.
 * You can use this type to extend your custom node type if you still want ot use the built-in ones.
 *
 * @public
 * @example
 * ```ts
 * type CustomNode = Node<{ value: number }, 'custom'>;
 * type MyAppNode = CustomNode | BuiltInNode;
 * ```
 */
declare type BuiltInNode = Node_2<{
    label: string;
}, "input" | "output" | "default"> | Node_2<Record<string, never>, "group">;
export { BuiltInNode }
export { BuiltInNode as BuiltInNode_alias_1 }
export { BuiltInNode as BuiltInNode_alias_2 }

export declare const builtinNodeTypes: NodeTypes;

export { ColorMode }

export { ColorModeClass }

export { Connection }

export { ConnectionInProgress }

declare type ConnectionLineComponent<NodeType extends Node_2 = Node_2> = Component<ConnectionLineComponentProps<NodeType>>;
export { ConnectionLineComponent }
export { ConnectionLineComponent as ConnectionLineComponent_alias_1 }
export { ConnectionLineComponent as ConnectionLineComponent_alias_2 }

/**
 * 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
 */
declare type ConnectionLineComponentProps<NodeType extends Node_2 = Node_2> = {
    connectionLineStyle?: CSSProperties;
    connectionLineType: ConnectionLineType;
    /** The node the connection line originates from. */
    fromNode: InternalNode<NodeType>;
    /** The handle on the `fromNode` that the connection line originates from. */
    fromHandle: Handle_2;
    fromX: number;
    fromY: number;
    toX: number;
    toY: number;
    fromPosition: Position_2;
    toPosition: Position_2;
    /**
     * If there is an `isValidConnection` callback, this prop will be set to `"valid"` or `"invalid"`
     * based on the return value of that callback. Otherwise, it will be `null`.
     */
    connectionStatus: "valid" | "invalid" | null;
    toNode: InternalNode<NodeType> | null;
    toHandle: Handle_2 | null;
};
export { ConnectionLineComponentProps }
export { ConnectionLineComponentProps as ConnectionLineComponentProps_alias_1 }
export { ConnectionLineComponentProps as ConnectionLineComponentProps_alias_2 }

export { ConnectionLineType }

export declare function ConnectionLineWrapper<NodeType extends Node_2 = Node_2>(p: ConnectionLineWrapperProps<NodeType>): JSX.Element;

declare type ConnectionLineWrapperProps<NodeType extends Node_2 = Node_2> = {
    type: ConnectionLineType;
    component?: ConnectionLineComponent<NodeType>;
    containerStyle?: JSX.CSSProperties;
    style?: JSX.CSSProperties;
};

export { ConnectionMode }

declare type ConnectionStartHandle = Writable<(Pick<Handle_2, "nodeId" | "id"> & Required<Pick<Handle_2, "type">>) | null>;

export { ConnectionState }

export declare const containerStyle: JSX.CSSProperties;

declare function ControlButton(p: ControlButtonProps): JSX.Element;
export { ControlButton }
export { ControlButton as ControlButton_alias_1 }
export { ControlButton as ControlButton_alias_2 }
export { ControlButton as ControlButton_alias_3 }

declare type ControlButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
export { ControlButtonProps }
export { ControlButtonProps as ControlButtonProps_alias_1 }
export { ControlButtonProps as ControlButtonProps_alias_2 }
export { ControlButtonProps as ControlButtonProps_alias_3 }

export { ControlLinePosition }

export { ControlPosition }

declare type ControlProps = {
    /** Show button for zoom in/out */
    showZoom?: boolean;
    /** Show button for fit view */
    showFitView?: boolean;
    /** Show button for toggling interactivity */
    showInteractive?: boolean;
    /** Options being used when fit view button is clicked */
    fitViewOptions?: FitViewOptions;
    /** Callback when zoom in button is clicked */
    onZoomIn?: () => void;
    /** Callback when zoom out button is clicked */
    onZoomOut?: () => void;
    /** Callback when fit view button is clicked */
    onFitView?: () => void;
    /** Callback when interactivity is toggled */
    onInteractiveChange?: (interactiveStatus: boolean) => void;
    /** Position of the controls on the pane
     * @example PanelPosition.TopLeft, PanelPosition.TopRight,
     * PanelPosition.BottomLeft, PanelPosition.BottomRight
     */
    position?: PanelPosition;
    children?: JSX.Element;
    /** Style applied to container */
    style?: JSX.CSSProperties;
    /** ClassName applied to container */
    className?: string;
    "aria-label"?: string;
    orientation?: "horizontal" | "vertical";
};
export { ControlProps }
export { ControlProps as ControlProps_alias_1 }
export { ControlProps as ControlProps_alias_2 }
export { ControlProps as ControlProps_alias_3 }

/**
 * The `<Controls />` component renders a small panel that contains convenient
 * buttons to zoom in, zoom out, fit the view, and lock the viewport.
 *
 * @public
 * @example
 *```tsx
 *import { SolidFlow, Controls } from '@circonomit/solid-flow'
 *
 *export default function Flow() {
 *  return (
 *    <SolidFlow nodes={[...]} edges={[...]}>
 *      <Controls />
 *    </SolidFlow>
 *  )
 *}
 *```
 *
 * @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button) component
 *
 */
declare const Controls: typeof ControlsComponent;
export { Controls }
export { Controls as Controls_alias_1 }
export { Controls as Controls_alias_2 }
export { Controls as Controls_alias_3 }

declare function ControlsComponent(_p: ControlProps): JSX.Element;

declare namespace ControlsComponent {
    var displayName: string;
}

export { CoordinateExtent }

declare function createSelectionChange(id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange;
export { createSelectionChange }
export { createSelectionChange as createSelectionChange_alias_1 }

export declare const createStore: ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: shouldFitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }: {
    nodes?: Node_2[];
    edges?: Edge[];
    defaultNodes?: Node_2[];
    defaultEdges?: Edge[];
    width?: number;
    height?: number;
    fitView?: boolean;
    fitViewOptions?: FitViewOptions;
    minZoom?: number;
    maxZoom?: number;
    nodeOrigin?: NodeOrigin;
    nodeExtent?: CoordinateExtent;
}) => {
    setNodes: (newNodes: Node_2[]) => void;
    setEdges: (edges: Edge[]) => void;
    setDefaultNodesAndEdges: (nodes?: Node_2[], edges?: Edge[]) => void;
    updateNodeInternals: (updates: Map<string, InternalNodeUpdate>, params?: {
        triggerFitView: boolean;
    }) => void;
    updateNodePositions: UpdateNodePositions;
    triggerNodeChanges: (changes: NodeChange<Node_2>[]) => void;
    triggerEdgeChanges: (changes: EdgeChange<Edge>[]) => void;
    addSelectedNodes: (nodeIds: string[]) => void;
    addSelectedEdges: (edgeIds: string[]) => void;
    unselectNodesAndEdges: ({ nodes, edges, }?: UnselectNodesAndEdgesParams) => void;
    setMinZoom: (minZoom: number) => void;
    setMaxZoom: (maxZoom: number) => void;
    setTranslateExtent: (translateExtent: CoordinateExtent) => void;
    setPaneClickDistance: (clickDistance: number) => void;
    resetSelectedElements: () => void;
    setNodeExtent: (nodeExtent: CoordinateExtent) => void;
    panBy: PanBy;
    fitView: (options?: FitViewOptions) => Promise<boolean>;
    cancelConnection: () => void;
    updateConnection: UpdateConnection<InternalNode_2<Node_2>>;
    reset: () => void;
    rfId: Writable_3<string>;
    width: Writable_3<number>;
    height: Writable_3<number>;
    transform: Writable_3<Transform>;
    nodes: Writable_3<Node_2[]>;
    nodesInitialized: Writable_3<boolean>;
    nodeLookup: ReactiveMap<string, InternalNode_2<Node_2>>;
    parentLookup: ReactiveMap<string, ReactiveMap<string, InternalNodeBase<NodeBase>>>;
    edges: Writable_3<Edge[]>;
    edgeLookup: ReactiveEdgeLookup_2<Edge>;
    connectionLookup: ReactiveConnectionLookup_2;
    onNodesChange: Writable_3<OnNodesChange_2<Node_2> | null>;
    onEdgesChange: Writable_3<OnEdgesChange_2<Edge> | null>;
    hasDefaultNodes: Writable_3<boolean>;
    hasDefaultEdges: Writable_3<boolean>;
    domNode: Writable_3<HTMLDivElement | null>;
    paneDragging: Writable_3<boolean>;
    noPanClassName: Writable_3<string>;
    panZoom: Writable_3<PanZoomInstance | null>;
    minZoom: Writable_3<number>;
    maxZoom: Writable_3<number>;
    translateExtent: Writable_3<CoordinateExtent>;
    nodeExtent: Writable_3<CoordinateExtent>;
    nodeOrigin: Writable_3<NodeOrigin>;
    nodeDragThreshold: Writable_3<number>;
    nodesSelectionActive: Writable_3<boolean>;
    userSelectionActive: Writable_3<boolean>;
    userSelectionRect: Writable_3<SelectionRect | null>;
    connection: ReactiveStore_3<ConnectionState<InternalNode_2<Node_2>>>;
    connectionMode: Writable_3<ConnectionMode>;
    connectionClickStartHandle: Writable_3<(Pick<Handle_2, "id" | "nodeId"> & Required<Pick<Handle_2, "type">>) | null>;
    snapToGrid: Writable_3<boolean>;
    snapGrid: Writable_3<SnapGrid>;
    nodesDraggable: Writable_3<boolean>;
    nodesConnectable: Writable_3<boolean>;
    nodesFocusable: Writable_3<boolean>;
    edgesFocusable: Writable_3<boolean>;
    edgesReconnectable: Writable_3<boolean>;
    elementsSelectable: Writable_3<boolean>;
    elevateNodesOnSelect: Writable_3<boolean>;
    elevateEdgesOnSelect: Writable_3<boolean>;
    selectNodesOnDrag: Writable_3<boolean>;
    multiSelectionActive: Writable_3<boolean>;
    onNodeDragStart?: OnNodeDrag_2<Node_2> | undefined;
    onNodeDrag?: OnNodeDrag_2<Node_2> | undefined;
    onNodeDragStop?: OnNodeDrag_2<Node_2> | undefined;
    onSelectionDragStart?: OnSelectionDrag;
    onSelectionDrag?: OnSelectionDrag;
    onSelectionDragStop?: OnSelectionDrag;
    onMoveStart: Writable_3<OnMoveStart | undefined>;
    onMove: Writable_3<OnMove | undefined>;
    onMoveEnd: Writable_3<OnMoveEnd | undefined>;
    onConnect: Writable_3<OnConnect | undefined>;
    onConnectStart?: OnConnectStart;
    onConnectEnd?: OnConnectEnd;
    onClickConnectStart?: OnConnectStart;
    onClickConnectEnd?: OnConnectEnd;
    connectOnClick: Writable_3<boolean>;
    defaultEdgeOptions?: DefaultEdgeOptions_2;
    fitViewQueued: Writable_3<boolean>;
    fitViewOptions: Writable_3<FitViewOptions | undefined>;
    fitViewResolver: Writable_3<ReturnType<withResolvers> | null>;
    onNodesDelete: Writable_3<OnNodesDelete_2<Node_2> | undefined>;
    onEdgesDelete: Writable_3<OnEdgesDelete_2<Edge> | undefined>;
    onDelete: Writable_3<OnDelete_2 | undefined>;
    onError: Writable_3<OnError | undefined>;
    onViewportChangeStart: Writable_3<OnViewportChange | undefined>;
    onViewportChange: Writable_3<OnViewportChange | undefined>;
    onViewportChangeEnd: Writable_3<OnViewportChange | undefined>;
    onBeforeDelete: Writable_3<OnBeforeDelete_2<Node_2, Edge> | undefined>;
    onSelectionChangeHandlers: Writable_3<OnSelectionChangeFunc_2<Node_2, Edge>[]>;
    ariaLiveMessage: Writable_3<string>;
    autoPanOnConnect: Writable_3<boolean>;
    autoPanOnNodeDrag: Writable_3<boolean>;
    autoPanSpeed: Writable_3<number>;
    connectionRadius: Writable_3<number>;
    isValidConnection?: IsValidConnection_2<Edge> | undefined;
    lib: Writable_3<string>;
    debug: Writable_3<boolean>;
};

declare type CSSProperties = JSX.CSSProperties;

export declare function default_alias<NodeType extends Node_2>(_p: MiniMapNodes<NodeType>): JSX.Element;

export declare const default_alias_1: {
    (p: MarkerDefinitionsProps): JSX.Element;
    displayName: string;
};

export declare const default_alias_4: Context<    {
setNodes: (newNodes: Node_3[]) => void;
setEdges: (edges: Edge_2[]) => void;
setDefaultNodesAndEdges: (nodes?: Node_3[], edges?: Edge_2[]) => void;
updateNodeInternals: (updates: Map<string, InternalNodeUpdate>, params?: {
triggerFitView: boolean;
}) => void;
updateNodePositions: UpdateNodePositions;
triggerNodeChanges: (changes: NodeChange<Node_3>[]) => void;
triggerEdgeChanges: (changes: EdgeChange<Edge_2>[]) => void;
addSelectedNodes: (nodeIds: string[]) => void;
addSelectedEdges: (edgeIds: string[]) => void;
unselectNodesAndEdges: ({ nodes, edges, }?: UnselectNodesAndEdgesParams_2) => void;
setMinZoom: (minZoom: number) => void;
setMaxZoom: (maxZoom: number) => void;
setTranslateExtent: (translateExtent: CoordinateExtent) => void;
setPaneClickDistance: (clickDistance: number) => void;
resetSelectedElements: () => void;
setNodeExtent: (nodeExtent: CoordinateExtent) => void;
panBy: PanBy;
fitView: (options?: FitViewOptions_2) => Promise<boolean>;
cancelConnection: () => void;
updateConnection: UpdateConnection<InternalNode_2<Node_3>>;
reset: () => void;
rfId: Writable_2<string>;
width: Writable_2<number>;
height: Writable_2<number>;
transform: Writable_2<Transform>;
nodes: Writable_2<Node_3[]>;
nodesInitialized: Writable_2<boolean>;
nodeLookup: ReactiveMap<string, InternalNode_2<Node_3>>;
parentLookup: ReactiveMap<string, ReactiveMap<string, InternalNodeBase<NodeBase>>>;
edges: Writable_2<Edge_2[]>;
edgeLookup: ReactiveEdgeLookup_2<Edge_2>;
connectionLookup: ReactiveConnectionLookup_2;
onNodesChange: Writable_2<OnNodesChange_2<Node_3> | null>;
onEdgesChange: Writable_2<OnEdgesChange_2<Edge_2> | null>;
hasDefaultNodes: Writable_2<boolean>;
hasDefaultEdges: Writable_2<boolean>;
domNode: Writable_2<HTMLDivElement | null>;
paneDragging: Writable_2<boolean>;
noPanClassName: Writable_2<string>;
panZoom: Writable_2<PanZoomInstance | null>;
minZoom: Writable_2<number>;
maxZoom: Writable_2<number>;
translateExtent: Writable_2<CoordinateExtent>;
nodeExtent: Writable_2<CoordinateExtent>;
nodeOrigin: Writable_2<NodeOrigin>;
nodeDragThreshold: Writable_2<number>;
nodesSelectionActive: Writable_2<boolean>;
userSelectionActive: Writable_2<boolean>;
userSelectionRect: Writable_2<SelectionRect | null>;
connection: ReactiveStore_2<ConnectionState<InternalNode_2<Node_3>>>;
connectionMode: Writable_2<ConnectionMode>;
connectionClickStartHandle: Writable_2<(Pick<Handle_2, "id" | "nodeId"> & Required<Pick<Handle_2, "type">>) | null>;
snapToGrid: Writable_2<boolean>;
snapGrid: Writable_2<SnapGrid>;
nodesDraggable: Writable_2<boolean>;
nodesConnectable: Writable_2<boolean>;
nodesFocusable: Writable_2<boolean>;
edgesFocusable: Writable_2<boolean>;
edgesReconnectable: Writable_2<boolean>;
elementsSelectable: Writable_2<boolean>;
elevateNodesOnSelect: Writable_2<boolean>;
elevateEdgesOnSelect: Writable_2<boolean>;
selectNodesOnDrag: Writable_2<boolean>;
multiSelectionActive: Writable_2<boolean>;
onNodeDragStart?: OnNodeDrag_2<Node_3> | undefined;
onNodeDrag?: OnNodeDrag_2<Node_3> | undefined;
onNodeDragStop?: OnNodeDrag_2<Node_3> | undefined;
onSelectionDragStart?: OnSelectionDrag;
onSelectionDrag?: OnSelectionDrag;
onSelectionDragStop?: OnSelectionDrag;
onMoveStart: Writable_2<OnMoveStart | undefined>;
onMove: Writable_2<OnMove | undefined>;
onMoveEnd: Writable_2<OnMoveEnd | undefined>;
onConnect: Writable_2<OnConnect | undefined>;
onConnectStart?: OnConnectStart;
onConnectEnd?: OnConnectEnd;
onClickConnectStart?: OnConnectStart;
onClickConnectEnd?: OnConnectEnd;
connectOnClick: Writable_2<boolean>;
defaultEdgeOptions?: DefaultEdgeOptions_2;
fitViewQueued: Writable_2<boolean>;
fitViewOptions: Writable_2<FitViewOptions_2 | undefined>;
fitViewResolver: Writable_2<ReturnType<withResolvers> | null>;
onNodesDelete: Writable_2<OnNodesDelete_2<Node_3> | undefined>;
onEdgesDelete: Writable_2<OnEdgesDelete_2<Edge_2> | undefined>;
onDelete: Writable_2<OnDelete_2 | undefined>;
onError: Writable_2<OnError | undefined>;
onViewportChangeStart: Writable_2<OnViewportChange | undefined>;
onViewportChange: Writable_2<OnViewportChange | undefined>;
onViewportChangeEnd: Writable_2<OnViewportChange | undefined>;
onBeforeDelete: Writable_2<OnBeforeDelete_2<Node_3, Edge_2> | undefined>;
onSelectionChangeHandlers: Writable_2<OnSelectionChangeFunc_2<Node_3, Edge_2>[]>;
ariaLiveMessage: Writable_2<string>;
autoPanOnConnect: Writable_2<boolean>;
autoPanOnNodeDrag: Writable_2<boolean>;
autoPanSpeed: Writable_2<number>;
connectionRadius: Writable_2<number>;
isValidConnection?: IsValidConnection_2<Edge_2> | undefined;
lib: Writable_2<string>;
debug: Writable_2<boolean>;
} | null>;

/**
 * Hook for getting viewport helper functions.
 *
 * @internal
 * @returns viewport helper functions
 */
export declare const default_alias_5: () => ViewportHelperFunctions;

export declare const default_alias_6: ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }?: {
    nodes?: Node_2[];
    edges?: Edge[];
    defaultNodes?: Node_2[];
    defaultEdges?: Edge[];
    width?: number;
    height?: number;
    fitView?: boolean;
    fitViewOptions?: FitViewOptions;
    minZoom?: number;
    maxZoom?: number;
    nodeOrigin?: NodeOrigin;
    nodeExtent?: CoordinateExtent;
}) => SolidFlowStore;

/**
 * Many properties on an [`Edge`](/api-reference/types/edge) are optional. When a new edge is created,
 * the properties that are not provided will be filled in with the default values
 * passed to the `defaultEdgeOptions` prop of the [`<SolidFlow />`](/api-reference/react-flow#defaultedgeoptions) component.
 */
declare type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
export { DefaultEdgeOptions }
export { DefaultEdgeOptions as DefaultEdgeOptions_alias_1 }
export { DefaultEdgeOptions as DefaultEdgeOptions_alias_2 }

export declare function DefaultNode(_p: NodeProps<BuiltInNode>): JSX.Element;

export declare const defaultNodeOrigin: NodeOrigin;

export declare const defaultViewport: Viewport;

declare type DeleteElementsOptions = {
    nodes?: (Node_2 | {
        id: Node_2["id"];
    })[];
    edges?: (Edge | {
        id: Edge["id"];
    })[];
};
export { DeleteElementsOptions }
export { DeleteElementsOptions as DeleteElementsOptions_alias_1 }
export { DeleteElementsOptions as DeleteElementsOptions_alias_2 }

export { Dimensions }

export declare function DotPattern(p: DotPatternProps): JSX.Element;

declare type DotPatternProps = {
    radius: number;
    className?: string;
};

/**
 * An `Edge` is the complete description with everything React Flow needs
 * to know in order to render it.
 * @public
 */
declare type Edge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = EdgeBase<EdgeData, EdgeType> & EdgeLabelOptions & {
    style?: CSSProperties;
    className?: string;
    /**
     * Determines whether the edge can be updated by dragging the source or target to a new node.
     * This property will override the default set by the `edgesReconnectable` prop on the
     * `<SolidFlow />` component.
     */
    reconnectable?: boolean | HandleType;
    focusable?: boolean;
};
export { Edge }
export { Edge as Edge_alias_1 }
export { Edge as Edge_alias_2 }

export { EdgeAddChange }

export declare function EdgeAnchor(_p: EdgeAnchorProps): JSX.Element;

export declare interface EdgeAnchorProps extends JSX.CircleSVGAttributes<SVGCircleElement> {
    position: Position_2;
    centerX: number;
    centerY: number;
    radius?: number;
    onMouseDown: JSX.CircleSVGAttributes<SVGCircleElement>["onMouseDown"];
    onMouseEnter: JSX.CircleSVGAttributes<SVGCircleElement>["onMouseEnter"];
    onMouseOut: JSX.CircleSVGAttributes<SVGCircleElement>["onMouseOut"];
    type: string;
}

export { EdgeChange }

/**
 * Helper type for edge components that get exported by the library
 * @public
 * @expand
 */
declare type EdgeComponentProps = EdgePosition & EdgeLabelOptions & {
    id?: EdgeProps["id"];
    markerStart?: EdgeProps["markerStart"];
    markerEnd?: EdgeProps["markerEnd"];
    interactionWidth?: EdgeProps["interactionWidth"];
    style?: EdgeProps["style"];
    sourceHandleId?: EdgeProps["sourceHandleId"];
    targetHandleId?: EdgeProps["targetHandleId"];
};
export { EdgeComponentProps }
export { EdgeComponentProps as EdgeComponentProps_alias_1 }
export { EdgeComponentProps as EdgeComponentProps_alias_2 }

declare type EdgeComponentWithPathOptions<PathOptions> = EdgeComponentProps & {
    pathOptions?: PathOptions;
};
export { EdgeComponentWithPathOptions }
export { EdgeComponentWithPathOptions as EdgeComponentWithPathOptions_alias_1 }
export { EdgeComponentWithPathOptions as EdgeComponentWithPathOptions_alias_2 }

declare type EdgeLabelOptions = {
    /**
     * The label or custom element to render along the edge. This is commonly a text label or some
     * custom controls.
     */
    label?: string | JSXElement;
    /**
     * Custom styles to apply to the label.
     */
    labelStyle?: CSSProperties;
    labelShowBg?: boolean;
    labelBgStyle?: CSSProperties;
    labelBgPadding?: [number, number];
    labelBgBorderRadius?: number;
};
export { EdgeLabelOptions }
export { EdgeLabelOptions as EdgeLabelOptions_alias_1 }
export { EdgeLabelOptions as EdgeLabelOptions_alias_2 }

/**
 * Edges are SVG-based. If you want to render more complex labels you can use the
 * `<EdgeLabelRenderer />` component to access a div based renderer. This component
 * is a portal that renders the label in a `<div />` that is positioned on top of
 * the edges. You can see an example usage of the component in the
 * [edge label renderer example](/examples/edges/edge-label-renderer).
 * @public
 *
 * @example
 * ```jsx
 * import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@circonomit/solid-flow';
 *
 * export function CustomEdge({ id, data, ...props }) {
 *   const [edgePath, labelX, labelY] = getBezierPath(props);
 *
 *   return (
 *     <>
 *       <BaseEdge id={id} path={edgePath} />
 *       <EdgeLabelRenderer>
 *         <div
 *           style={{
 *             position: 'absolute',
 *             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
 *             background: '#ffcc00',
 *             padding: 10,
 *         }}
 *           class="nodrag nopan"
 *         >
 *          {data.label}
 *         </div>
 *       </EdgeLabelRenderer>
 *     </>
 *   );
 * };
 * ```
 *
 * @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
 * add mouse interactions you need to set the style `pointerEvents: all` and add
 * the `nopan` class on the label or the element you want to interact with.
 */
declare function EdgeLabelRenderer(p: ParentProps): JSX.Element;
export { EdgeLabelRenderer }
export { EdgeLabelRenderer as EdgeLabelRenderer_alias_1 }

declare type EdgeLabelRendererProps = {
    children: any;
};
export { EdgeLabelRendererProps }
export { EdgeLabelRendererProps as EdgeLabelRendererProps_alias_1 }

export { EdgeMarker }

export { EdgeMarkerType }

declare type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: MouseEvent, edge: EdgeType) => void;
export { EdgeMouseHandler }
export { EdgeMouseHandler as EdgeMouseHandler_alias_1 }
export { EdgeMouseHandler as EdgeMouseHandler_alias_2 }

/**
 * When you implement a custom edge it is wrapped in a component that enables some
 * basic functionality. The `EdgeProps` type is the props that are passed to this.
 * @public
 * @expand
 */
declare type EdgeProps<EdgeType extends Edge = Edge> = Pick<EdgeType, "id" | "animated" | "data" | "style" | "selected" | "source" | "target" | "selectable" | "deletable"> & EdgePosition & EdgeLabelOptions & {
    sourceHandleId?: string | null;
    targetHandleId?: string | null;
    markerStart?: string;
    markerEnd?: string;
    pathOptions?: any;
    interactionWidth?: number;
};
export { EdgeProps }
export { EdgeProps as EdgeProps_alias_1 }
export { EdgeProps as EdgeProps_alias_2 }

export { EdgeRemoveChange }

export declare const EdgeRenderer: typeof EdgeRendererComponent;

declare function EdgeRendererComponent<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(p: ParentProps<EdgeRendererProps<NodeType, EdgeType>>): JSX.Element;

declare namespace EdgeRendererComponent {
    var displayName: string;
}

declare type EdgeRendererProps<NodeType extends Node_2, EdgeType extends Edge> = Pick<GraphViewProps<NodeType, EdgeType>, "onEdgeClick" | "onEdgeDoubleClick" | "defaultMarkerColor" | "onlyRenderVisibleElements" | "onReconnect" | "onEdgeContextMenu" | "onEdgeMouseEnter" | "onEdgeMouseMove" | "onEdgeMouseLeave" | "onReconnectStart" | "onReconnectEnd" | "reconnectRadius" | "noPanClassName" | "rfId" | "disableKeyboardA11y" | "edgeTypes">;

export { EdgeReplaceChange }

export { EdgeSelectionChange }

/**
 * You can use the `<EdgeText />` component as a helper component to display text
 * within your custom edges.
 *
 * @public
 *
 * @example
 * ```jsx
 * import { EdgeText } from '@circonomit/solid-flow';
 *
 * export function CustomEdgeLabel({ label }) {
 *   return (
 *     <EdgeText
 *       x={100}
 *       y={100}
 *       label={label}
 *       labelStyle={{ fill: 'white' }}
 *       labelShowBg
 *       labelBgStyle={{ fill: 'red' }}
 *       labelBgPadding={[2, 4]}
 *       labelBgBorderRadius={2}
 *     />
 *   );
 * }
 *```
 */
declare const EdgeText: typeof EdgeTextComponent;
export { EdgeText }
export { EdgeText as EdgeText_alias_1 }

declare function EdgeTextComponent(_p: EdgeTextProps): JSX.Element;

declare namespace EdgeTextComponent {
    var displayName: string;
}

declare type EdgeTextProps = Omit<JSX.GSVGAttributes<SVGGElement>, "x" | "y"> & EdgeLabelOptions & {
    /** The x position where the label should be rendered. */
    x: number;
    /** The y position where the label should be rendered. */
    y: number;
};
export { EdgeTextProps }
export { EdgeTextProps as EdgeTextProps_alias_1 }
export { EdgeTextProps as EdgeTextProps_alias_2 }

declare type EdgeTypes = Record<string, Component<EdgeProps & {
    data: any;
    type: any;
}>>;
export { EdgeTypes }
export { EdgeTypes as EdgeTypes_alias_1 }
export { EdgeTypes as EdgeTypes_alias_2 }

export declare function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({ isReconnectable, reconnectRadius, edge, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover, }: EdgeUpdateAnchorsProps<EdgeType>): JSX.Element;

declare type EdgeUpdateAnchorsProps<EdgeType extends Edge = Edge> = {
    edge: EdgeType;
    isReconnectable: boolean | "source" | "target";
    reconnectRadius: EdgeWrapperProps["reconnectRadius"];
    onReconnect: EdgeWrapperProps<EdgeType>["onReconnect"];
    onReconnectStart: EdgeWrapperProps<EdgeType>["onReconnectStart"];
    onReconnectEnd: EdgeWrapperProps<EdgeType>["onReconnectEnd"];
    setUpdateHover: (hover: boolean) => void;
    setReconnecting: (updating: boolean) => void;
} & EdgePosition;

export declare function EdgeWrapper<EdgeType extends Edge = Edge>(p: EdgeWrapperProps<EdgeType>): JSX.Element;

declare type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
    id: string;
    edgesFocusable: boolean;
    edgesReconnectable: boolean;
    elementsSelectable: boolean;
    noPanClassName: string;
    onClick?: EdgeMouseHandler<EdgeType>;
    onDoubleClick?: EdgeMouseHandler<EdgeType>;
    onReconnect?: OnReconnect<EdgeType>;
    onContextMenu?: EdgeMouseHandler<EdgeType>;
    onMouseEnter?: EdgeMouseHandler<EdgeType>;
    onMouseMove?: EdgeMouseHandler<EdgeType>;
    onMouseLeave?: EdgeMouseHandler<EdgeType>;
    reconnectRadius?: number;
    onReconnectStart?: (event: MouseEvent, edge: EdgeType, handleType: HandleType) => void;
    onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType, connectionState: FinalConnectionState) => void;
    rfId?: string;
    edgeTypes?: EdgeTypes;
    onError?: OnError;
    disableKeyboardA11y?: boolean;
};
export { EdgeWrapperProps }
export { EdgeWrapperProps as EdgeWrapperProps_alias_1 }
export { EdgeWrapperProps as EdgeWrapperProps_alias_2 }

declare function elementToRemoveChange<T extends Node_2 | Edge>(item: T): NodeRemoveChange | EdgeRemoveChange;
export { elementToRemoveChange }
export { elementToRemoveChange as elementToRemoveChange_alias_1 }

export { FinalConnectionState }

export { FitBoundsOptions }

declare type FitView<NodeType extends Node_2 = Node_2> = (fitViewOptions?: FitViewOptions<NodeType>) => Promise<boolean>;
export { FitView }
export { FitView as FitView_alias_1 }
export { FitView as FitView_alias_2 }

export declare function FitViewIcon(): JSX.Element;

/**
 * When calling [`fitView`](/api-reference/types/react-flow-instance#fitview) these options
 * can be used to customize the behaviour. For example, the `duration` option can be used to
 * transform the viewport smoothly over a given amount of time.
 *
 * @public
 */
declare type FitViewOptions<NodeType extends Node_2 = Node_2> = FitViewOptionsBase<NodeType>;
export { FitViewOptions }
export { FitViewOptions as FitViewOptions_alias_1 }
export { FitViewOptions as FitViewOptions_alias_2 }

declare type FitViewParams<NodeType extends Node_2 = Node_2> = FitViewParamsBase<NodeType>;
export { FitViewParams }
export { FitViewParams as FitViewParams_alias_1 }
export { FitViewParams as FitViewParams_alias_2 }

export declare const FlowRenderer: typeof FlowRendererComponent;

declare function FlowRendererComponent<NodeType extends Node_2 = Node_2>(p: FlowRendererProps<NodeType>): JSX.Element;

export declare type FlowRendererProps<NodeType extends Node_2 = Node_2> = ParentProps<Omit<GraphViewProps<NodeType>, "snapToGrid" | "nodeTypes" | "edgeTypes" | "snapGrid" | "connectionLineType" | "connectionLineContainerStyle" | "arrowHeadColor" | "onlyRenderVisibleElements" | "selectNodesOnDrag" | "defaultMarkerColor" | "rfId" | "nodeClickDistance"> & {
    isControlledViewport: boolean;
}>;

/**
 * @inline
 */
declare type GeneralHelpers<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = {
    /**
     * Returns nodes.
     *
     * @returns nodes array
     */
    getNodes: () => NodeType[];
    /**
     * Set your nodes array to something else by either overwriting it with a new array or by passing
     * in a function to update the existing array. If using a function, it is important to make sure a
     * new array is returned instead of mutating the existing array. Calling this function will
     * trigger the `onNodesChange` handler in a controlled flow.
     *
     * @param payload - the nodes to set or a function that receives the current nodes and returns the new nodes
     */
    setNodes: (payload: NodeType[] | ((nodes: NodeType[]) => NodeType[])) => void;
    /**
     * Add one or many nodes to your existing nodes array. Calling this function will trigger the
     * `onNodesChange` handler in a controlled flow.
     *
     * @param payload - the nodes to add
     */
    addNodes: (payload: NodeType[] | NodeType) => void;
    /**
     * 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 an internal node by id.
     *
     * @param id - the node id
     * @returns the internal node or undefined if no node was found
     */
    getInternalNode: (id: string) => InternalNode<NodeType> | undefined;
    /**
     * Returns edges.
     *
     * @returns edges array
     */
    getEdges: () => EdgeType[];
    /**
     * Set your edges array to something else by either overwriting it with a new array or by passing
     * in a function to update the existing arr