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 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 `onEdgesChange` handler in a controlled flow.
     *
     * @param payload - the edges to set or a function that receives the current edges and returns the new edges
     */
    setEdges: (payload: EdgeType[] | ((edges: EdgeType[]) => EdgeType[])) => void;
    /**
     * Add one or many edges to your existing edges array. Calling this function will trigger the
     * `onEdgesChange` handler in a controlled flow.
     *
     * @param payload - the edges to add
     */
    addEdges: (payload: EdgeType[] | EdgeType) => void;
    /**
     * 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 the nodes, edges and the viewport as a JSON object.
     *
     * @returns the nodes, edges and the viewport as a JSON object
     */
    toObject: () => SolidFlowJsonObject<NodeType, EdgeType>;
    /**
     * 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: (params: DeleteElementsOptions) => Promise<{
        deletedNodes: Node_2[];
        deletedEdges: Edge[];
    }>;
    /**
     * Find all the nodes currently intersecting with a given node or rectangle. The `partially`
     * parameter can be set to `true` to include nodes that are only partially intersecting.
     *
     * @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: (node: NodeType | {
        id: Node_2["id"];
    } | Rect, partially?: boolean, nodes?: NodeType[]) => NodeType[];
    /**
     * Determine if a given node or rectangle is intersecting with another rectangle. The `partially`
     * parameter can be set to true return `true` even if the node is only partially intersecting.
     *
     * @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: (node: NodeType | {
        id: Node_2["id"];
    } | Rect, area: Rect, partially?: boolean) => boolean;
    /**
     * 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;
    /**
     * 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
     * updateEdge('edge-1', (edge) => ({ label: 'A new label' }));
     */
    updateEdge: (id: string, edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => Partial<EdgeType>), options?: {
        replace: boolean;
    }) => void;
    /**
     * Updates the data attribute of a edge.
     *
     * @param id - id of the edge 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
     * updateEdgeData('edge-1', { label: 'A new label' });
     */
    updateEdgeData: (id: string, dataUpdate: Partial<EdgeType["data"]> | ((edge: EdgeType) => Partial<EdgeType["data"]>), options?: {
        replace: boolean;
    }) => void;
    /**
     * 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 | string)[]) => Rect;
    /**
     * Get all the connections of a handle belonging to a specific node. The type parameter be either
     * `'source'` or `'target'`.
     * @deprecated
     * @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: HandleType;
        nodeId: string;
        id?: string | null;
    }) => HandleConnection[];
    /**
     * Gets all connections to a node. Can be filtered by handle type and id.
     * @param type - handle type 'source' or 'target'
     * @param handleId - 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
     */
    getNodeConnections: ({ type, handleId, nodeId, }: {
        type?: HandleType;
        nodeId: string;
        handleId?: string | null;
    }) => NodeConnection[];
    fitView: FitView<NodeType>;
};
export { GeneralHelpers }
export { GeneralHelpers as GeneralHelpers_alias_1 }
export { GeneralHelpers as GeneralHelpers_alias_2 }

export { getBezierEdgeCenter }

export { getBezierPath }

export { GetBezierPathParams }

export { getConnectedEdges }

export { getEdgeCenter }

/**
 * This function is used to find the changes between two sets of elements.
 * It is used to determine which nodes or edges have been added, removed or replaced.
 *
 * @internal
 * @param params.items = the next set of elements (nodes or edges)
 * @param params.lookup = a lookup map of the current store elements
 * @returns an array of changes
 */
declare function getElementsDiffChanges({ items, lookup, }: {
    items: Node_2[] | undefined;
    lookup: NodeLookup<InternalNode<Node_2>>;
}): NodeChange[];

declare function getElementsDiffChanges({ items, lookup, }: {
    items: Edge[] | undefined;
    lookup: EdgeLookup;
}): EdgeChange[];
export { getElementsDiffChanges }
export { getElementsDiffChanges as getElementsDiffChanges_alias_1 }

export { getIncomers }

declare type GetMiniMapNodeAttribute<NodeType extends Node_2 = Node_2> = (node: NodeType) => string;
export { GetMiniMapNodeAttribute }
export { GetMiniMapNodeAttribute as GetMiniMapNodeAttribute_alias_1 }
export { GetMiniMapNodeAttribute as GetMiniMapNodeAttribute_alias_2 }
export { GetMiniMapNodeAttribute as GetMiniMapNodeAttribute_alias_3 }

export declare function getNodeInlineStyleDimensions<NodeType extends Node_2 = Node_2>(node: InternalNode<NodeType>): {
    width: JSX.CSSProperties["width"];
    height: JSX.CSSProperties["height"];
};

export { getNodesBounds }

export { getOutgoers }

declare function getSelectionChanges(items: Map<string, any>, selectedIds?: Set<string>, mutateItem?: boolean): NodeSelectionChange[] | EdgeSelectionChange[];
export { getSelectionChanges }
export { getSelectionChanges as getSelectionChanges_alias_1 }

declare function getSimpleBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: GetSimpleBezierPathParams): [
path: string,
labelX: number,
labelY: number,
offsetX: number,
offsetY: number
];
export { getSimpleBezierPath }
export { getSimpleBezierPath as getSimpleBezierPath_alias_1 }

export declare interface GetSimpleBezierPathParams {
    sourceX: number;
    sourceY: number;
    sourcePosition?: Position_2;
    targetX: number;
    targetY: number;
    targetPosition?: Position_2;
}

export { getSmoothStepPath }

export { GetSmoothStepPathParams }

export { getStraightPath }

export { GetStraightPathParams }

export { getViewportForBounds }

export declare const GraphView: typeof GraphViewComponent;

declare function GraphViewComponent<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(p: GraphViewProps<NodeType, EdgeType>): JSX.Element;

declare namespace GraphViewComponent {
    var displayName: string;
}

export declare type GraphViewProps<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = Omit<SolidFlowProps<NodeType, EdgeType>, "onSelectionChange" | "nodes" | "edges" | "onMove" | "onMoveStart" | "onMoveEnd" | "elevateEdgesOnSelect"> & Required<Pick<SolidFlowProps<NodeType, EdgeType>, "selectionKeyCode" | "deleteKeyCode" | "multiSelectionKeyCode" | "connectionLineType" | "onlyRenderVisibleElements" | "translateExtent" | "minZoom" | "maxZoom" | "defaultMarkerColor" | "noDragClassName" | "noWheelClassName" | "noPanClassName" | "defaultViewport" | "disableKeyboardA11y" | "paneClickDistance" | "nodeClickDistance">> & {
    rfId: string;
};

export declare function GroupNode(): null;

/**
 * The `<Handle />` component is used in your [custom nodes](/learn/customization/custom-nodes)
 * to define connection points.
 *
 *@public
 *
 *@example
 *
 *```jsx
 *import { Handle, Position } from '@circonomit/solid-flow';
 *
 *export function CustomNode({ data }) {
 *  return (
 *    <>
 *      <div style={{ padding: '10px 20px' }}>
 *        {data.label}
 *      </div>
 *
 *      <Handle type="target" position={Position.Left} />
 *      <Handle type="source" position={Position.Right} />
 *    </>
 *  );
 *};
 *```
 */
declare const Handle: typeof HandleComponent;
export { Handle }
export { Handle as Handle_alias_1 }

declare function HandleComponent(_p: HandleProps): JSX.Element;

export declare function handleNodeClick({ id, store, unselect, nodeRef, }: {
    id: string;
    store: SolidFlowState;
    unselect?: boolean;
    nodeRef?: HTMLDivElement;
}): void;

/**
 * @expand
 */
declare type HandleProps = HandleProps_2 & Omit<JSX.HTMLAttributes<HTMLDivElement>, "id"> & {
    /** Callback called when connection is made */
    onConnect?: OnConnect;
};
export { HandleProps }
export { HandleProps as HandleProps_alias_1 }

export { HandleType }

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

/**
 * The `InternalNode` type is identical to the base [`Node`](/api-references/types/node)
 * type but is extended with some additional properties used internally.
 * Some functions and callbacks that return nodes may return an `InternalNode`.
 *
 * @public
 */
declare type InternalNode<NodeType extends Node_2 = Node_2> = InternalNodeBase<NodeType>;
export { InternalNode }
export { InternalNode as InternalNode_alias_1 }
export { InternalNode as InternalNode_alias_2 }

/**
 * Test whether an object is useable as an Edge
 * @public
 * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
 * @param element - The element to test
 * @returns A boolean indicating whether the element is an Edge
 */
declare const isEdge: <EdgeType extends Edge = Edge>(element: unknown) => element is EdgeType;
export { isEdge }
export { isEdge as isEdge_alias_1 }
export { isEdge as isEdge_alias_2 }

/**
 * Test whether an object is useable as a Node
 * @public
 * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
 * @param element - The element to test
 * @returns A boolean indicating whether the element is an Node
 */
declare const isNode: <NodeType extends Node_2 = Node_2>(element: unknown) => element is NodeType;
export { isNode }
export { isNode as isNode_alias_1 }
export { isNode as isNode_alias_2 }

declare type IsValidConnection<EdgeType extends Edge = Edge> = (edge: EdgeType | Connection) => boolean;
export { IsValidConnection }
export { IsValidConnection as IsValidConnection_alias_1 }
export { IsValidConnection as IsValidConnection_alias_2 }

export { KeyCode }

export declare function LinePattern(p: LinePatternProps): JSX.Element;

declare type LinePatternProps = {
    dimensions: [number, number];
    variant: BackgroundVariant;
    lineWidth?: number;
    className?: string;
};

export declare function LockIcon(): JSX.Element;

declare type MarkerDefinitionsProps = {
    defaultColor: string;
    rfId?: string;
};

export declare const MarkerSymbols: {
    arrow: (_p: SymbolProps) => JSX.Element;
    arrowclosed: (_p: SymbolProps) => JSX.Element;
};

export { MarkerType }

/**
 * The `<MiniMap />` component can be used to render an overview of your flow. It
 * renders each node as an SVG element and visualizes where the current viewport is
 * in relation to the rest of the flow.
 *
 * @public
 * @example
 *
 * ```jsx
 *import { SolidFlow, MiniMap } from '@circonomit/solid-flow';
 *
 *export default function Flow() {
 *  return (
 *    <SolidFlow nodes={[...]]} edges={[...]]}>
 *      <MiniMap nodeStrokeWidth={3} />
 *    </SolidFlow>
 *  );
 *}
 *```
 */
declare const MiniMap: typeof MiniMapComponent;
export { MiniMap }
export { MiniMap as MiniMap_alias_1 }
export { MiniMap as MiniMap_alias_2 }
export { MiniMap as MiniMap_alias_3 }

declare function MiniMapComponent<NodeType extends Node_2 = Node_2>(_p: MiniMapProps<NodeType>): JSX.Element;

declare namespace MiniMapComponent {
    var displayName: string;
}

export declare const MiniMapNode: typeof MiniMapNodeComponent;

declare function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }: MiniMapNodeProps): JSX.Element;

/**
 * The props that are passed to the MiniMapNode component
 *
 * @public
 * @expand
 */
declare type MiniMapNodeProps = {
    id: string;
    x: number;
    y: number;
    width: number;
    height: number;
    borderRadius: number;
    className: string;
    color?: string;
    shapeRendering: string;
    strokeColor?: string;
    strokeWidth?: number;
    style?: JSX.CSSProperties;
    selected: boolean;
    onClick?: (event: MouseEvent, id: string) => void;
};
export { MiniMapNodeProps }
export { MiniMapNodeProps as MiniMapNodeProps_alias_1 }
export { MiniMapNodeProps as MiniMapNodeProps_alias_2 }
export { MiniMapNodeProps as MiniMapNodeProps_alias_3 }

declare type MiniMapNodes<NodeType extends Node_2 = Node_2> = Pick<MiniMapProps<NodeType>, "nodeColor" | "nodeStrokeColor" | "nodeClassName" | "nodeBorderRadius" | "nodeStrokeWidth" | "nodeComponent"> & {
    onClick?: (event: MouseEvent, nodeId: string) => void;
};
export { MiniMapNodes }
export { MiniMapNodes as MiniMapNodes_alias_1 }
export { MiniMapNodes as MiniMapNodes_alias_2 }
export { MiniMapNodes as MiniMapNodes_alias_3 }

/**
 * @expand
 */
declare type MiniMapProps<NodeType extends Node_2 = Node_2> = Omit<JSX.HTMLAttributes<SVGSVGElement>, "onClick" | "style"> & {
    /**
     * Color of nodes on minimap.
     * @default "#e2e2e2"
     */
    nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
    /**
     * Stroke color of nodes on minimap.
     * @default "transparent"
     */
    nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
    /**
     * Class name applied to nodes on minimap.
     * @default ""
     */
    nodeClassName?: string | GetMiniMapNodeAttribute<NodeType>;
    /**
     * Border radius of nodes on minimap.
     * @default 5
     */
    nodeBorderRadius?: number;
    /**
     * Stroke width of nodes on minimap.
     * @default 2
     */
    nodeStrokeWidth?: number;
    /**
     * A custom component to render the nodes in the minimap. This component must render an SVG
     * element!
     */
    nodeComponent?: Component<MiniMapNodeProps>;
    /** Background color of minimap. */
    bgColor?: string;
    /**
     * The color of the mask that covers the portion of the minimap not currently visible in the
     * viewport.
     * @default "rgba(240, 240, 240, 0.6)"
     */
    maskColor?: string;
    /**
     * Stroke color of mask representing viewport.
     * @default transparent
     */
    maskStrokeColor?: string;
    /**
     * Stroke width of mask representing viewport.
     * @default 1
     */
    maskStrokeWidth?: number;
    /**
     * Position of minimap on pane.
     * @default PanelPosition.BottomRight
     * @example PanelPosition.TopLeft, PanelPosition.TopRight,
     * PanelPosition.BottomLeft, PanelPosition.BottomRight
     */
    position?: PanelPosition;
    /** Callback called when minimap is clicked. */
    onClick?: (event: MouseEvent, position: XYPosition) => void;
    /** Callback called when node on minimap is clicked. */
    onNodeClick?: (event: MouseEvent, node: NodeType) => void;
    /**
     * Determines whether you can pan the viewport by dragging inside the minimap.
     * @default false
     */
    pannable?: boolean;
    /**
     * Determines whether you can zoom the viewport by scrolling inside the minimap.
     * @default false
     */
    zoomable?: boolean;
    /**
     * There is no text inside the minimap for a screen reader to use as an accessible name, so it's
     * important we provide one to make the minimap accessible. The default is sufficient, but you may
     * want to replace it with something more relevant to your app or product.
     * @default "React Flow mini map"
     */
    ariaLabel?: string | null;
    /** Invert direction when panning the minimap viewport. */
    inversePan?: boolean;
    /**
     * Step size for zooming in/out on minimap.
     * @default 10
     */
    zoomStep?: number;
    /**
     * Offset the viewport on the minimap, acts like a padding.
     * @default 5
     */
    offsetScale?: number;
    style?: Omit<JSX.CSSProperties, "height" | "width"> & {
        height?: number;
        width?: number;
    };
};
export { MiniMapProps }
export { MiniMapProps as MiniMapProps_alias_1 }
export { MiniMapProps as MiniMapProps_alias_2 }
export { MiniMapProps as MiniMapProps_alias_3 }

export declare function MinusIcon(): JSX.Element;

export { NoConnection }

/**
 * The `Node` type represents everything React Flow needs to know about a given node.
 * Whenever you want to update a certain attribute of a node, you need to create a new
 * node object.
 *
 * @public
 */
declare type Node_2<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = NodeBase<NodeData, NodeType> & {
    style?: JSX.CSSProperties;
    className?: string;
    resizing?: boolean;
    focusable?: boolean;
};
export { Node_2 as Node }
export { Node_2 as Node_alias_1 }
export { Node_2 as Node_alias_2 }

export { NodeAddChange }

export { NodeChange }

export { NodeConnection }

export { NodeDimensionChange }

declare const NodeIdContext: Context<(() => string | null) | null>;
export { NodeIdContext }
export { NodeIdContext as default_alias_3 }

declare type NodeMouseHandler<NodeType extends Node_2 = Node_2> = (event: MouseEvent, node: NodeType) => void;
export { NodeMouseHandler }
export { NodeMouseHandler as NodeMouseHandler_alias_1 }
export { NodeMouseHandler as NodeMouseHandler_alias_2 }

export { NodeOrigin }

export { NodePositionChange }

/**
 * When you implement a [custom node](/learn/customization/custom-nodes) it is
 * wrapped in a component that enables basic functionality like selection and
 * dragging. Your custom node receives `NodeProps` as props.
 *
 * @public
 * @example
 * ```tsx
 *import { createSignal } from 'solid-js';
 *import { NodeProps, Node } from '@circonomit/solid-flow';
 *
 *export type CounterNode = Node<{ initialCount?: number }, 'counter'>;
 *
 *export default function CounterNode(props: NodeProps<CounterNode>) {
 *  const [count, setCount] = createSignal(props.data?.initialCount ?? 0);
 *
 *  return (
 *    <div>
 *      <p>Count: {count()}</p>
 *      <button class="nodrag" onClick={() => setCount(count() + 1)}>
 *        Increment
 *      </button>
 *    </div>
 *  );
 *}
 *```
 */
declare type NodeProps<NodeType extends Node_2 = Node_2> = NodeProps_2<NodeType>;
export { NodeProps }
export { NodeProps as NodeProps_alias_1 }
export { NodeProps as NodeProps_alias_2 }

export { NodeRemoveChange }

export declare const NodeRenderer: typeof NodeRendererComponent;

declare function NodeRendererComponent<NodeType extends Node_2>(props: NodeRendererProps<NodeType>): JSX.Element;

declare namespace NodeRendererComponent {
    var displayName: string;
}

export declare type NodeRendererProps<NodeType extends Node_2> = Pick<GraphViewProps<NodeType>, "onNodeClick" | "onNodeDoubleClick" | "onNodeMouseEnter" | "onNodeMouseMove" | "onNodeMouseLeave" | "onNodeContextMenu" | "onlyRenderVisibleElements" | "noPanClassName" | "noDragClassName" | "rfId" | "disableKeyboardA11y" | "nodeExtent" | "nodeTypes" | "nodeClickDistance">;

export { NodeReplaceChange }

/**
 * To create your own resizing UI, you can use the `NodeResizeControl` component where you can pass children (such as icons).
 * @public
 *
 */
declare const NodeResizeControl: typeof ResizeControl;
export { NodeResizeControl }
export { NodeResizeControl as NodeResizeControl_alias_1 }
export { NodeResizeControl as NodeResizeControl_alias_2 }
export { NodeResizeControl as NodeResizeControl_alias_3 }

/**
 * The `<NodeResizer />` component can be used to add a resize functionality to your
 * nodes. It renders draggable controls around the node to resize in all directions.
 * @public
 *
 * @example
 *```jsx
 *import { NodeResizer } from '@circonomit/solid-flow';
 *
 *function ResizableNode({ data }) {
 *  return (
 *    <>
 *      <NodeResizer minWidth={100} minHeight={30} />
 *      <Handle type="target" position={Position.Left} />
 *      <div style={{ padding: 10 }}>{data.label}</div>
 *      <Handle type="source" position={Position.Right} />
 *    </>
 *  );
 *};
 *
 *export default ResizableNode;
 *```
 */
declare function NodeResizer(_p: NodeResizerProps): JSX.Element;
export { NodeResizer }
export { NodeResizer as NodeResizer_alias_1 }
export { NodeResizer as NodeResizer_alias_2 }
export { NodeResizer as NodeResizer_alias_3 }

/**
 * @expand
 */
declare type NodeResizerProps = {
    /**
     * Id of the node it is resizing.
     * @remarks optional if used inside custom node
     */
    nodeId?: string;
    /** Color of the resize handle. */
    color?: string;
    /** Class name applied to handle. */
    handleClassName?: string;
    /** Style applied to handle. */
    handleStyle?: JSX.CSSProperties;
    /** Class name applied to line. */
    lineClassName?: string;
    /** Style applied to line. */
    lineStyle?: JSX.CSSProperties;
    /**
     * Are the controls visible.
     * @default true
     */
    isVisible?: boolean;
    /**
     * Minimum width of node.
     * @default 10
     */
    minWidth?: number;
    /**
     * Minimum height of node.
     * @default 10
     */
    minHeight?: number;
    /**
     * Maximum width of node.
     * @default Number.MAX_VALUE
     */
    maxWidth?: number;
    /**
     * Maximum height of node.
     * @default Number.MAX_VALUE
     */
    maxHeight?: number;
    /**
     * Keep aspect ratio when resizing.
     * @default false
     */
    keepAspectRatio?: boolean;
    /** Callback to determine if node should resize. */
    shouldResize?: ShouldResize;
    /** Callback called when resizing starts. */
    onResizeStart?: OnResizeStart;
    /** Callback called when resizing. */
    onResize?: OnResize;
    /** Callback called when resizing ends. */
    onResizeEnd?: OnResizeEnd;
};
export { NodeResizerProps }
export { NodeResizerProps as NodeResizerProps_alias_1 }
export { NodeResizerProps as NodeResizerProps_alias_2 }
export { NodeResizerProps as NodeResizerProps_alias_3 }

export { NodeSelectionChange }

export declare function NodesSelection<NodeType extends Node_2>(p: NodesSelectionProps<NodeType>): JSX.Element;

export declare type NodesSelectionProps<NodeType> = {
    onSelectionContextMenu?: (event: SolidEvent<HTMLDivElement, MouseEvent>, nodes: NodeType[]) => void;
    noPanClassName?: string;
    disableKeyboardA11y: boolean;
};

declare function NodeToolbar(_p: NodeToolbarProps): JSX.Element;
export { NodeToolbar }
export { NodeToolbar as NodeToolbar_alias_1 }
export { NodeToolbar as NodeToolbar_alias_2 }
export { NodeToolbar as NodeToolbar_alias_3 }

export declare function NodeToolbarPortal(p: ParentProps): JSX.Element;

declare type NodeToolbarProps = JSX.HTMLAttributes<HTMLDivElement> & {
    /** Id of the node, or array of ids the toolbar should be displayed at */
    nodeId?: string | string[];
    /** If true, node toolbar is visible even if node is not selected */
    isVisible?: boolean;
    /** Position of the toolbar relative to the node
     * @example Position.TopLeft, Position.TopRight,
     * Position.BottomLeft, Position.BottomRight
     */
    position?: Position_2;
    /** Offset the toolbar from the node */
    offset?: number;
    /** Align the toolbar relative to the node
     * @example Align.Start, Align.Center, Align.End
     */
    align?: Align;
};
export { NodeToolbarProps }
export { NodeToolbarProps as NodeToolbarProps_alias_1 }
export { NodeToolbarProps as NodeToolbarProps_alias_2 }
export { NodeToolbarProps as NodeToolbarProps_alias_3 }

declare type NodeTypes = Record<string, Component<NodeProps & {
    data: any;
    type: any;
}>>;
export { NodeTypes }
export { NodeTypes as NodeTypes_alias_1 }
export { NodeTypes as NodeTypes_alias_2 }

export declare function NodeWrapper<NodeType extends Node_2>(p: NodeWrapperProps<NodeType>): JSX.Element;

declare type NodeWrapperProps<NodeType extends Node_2> = {
    id: string;
    nodesConnectable: boolean;
    elementsSelectable: boolean;
    nodesDraggable: boolean;
    nodesFocusable: boolean;
    onClick?: NodeMouseHandler<NodeType>;
    onDoubleClick?: NodeMouseHandler<NodeType>;
    onMouseEnter?: NodeMouseHandler<NodeType>;
    onMouseMove?: NodeMouseHandler<NodeType>;
    onMouseLeave?: NodeMouseHandler<NodeType>;
    onContextMenu?: NodeMouseHandler<NodeType>;
    resizeObserver: ResizeObserver | null;
    noDragClassName: string;
    noPanClassName: string;
    rfId: string;
    disableKeyboardA11y: boolean;
    nodeTypes?: NodeTypes;
    nodeExtent?: CoordinateExtent;
    onError?: OnError;
    nodeClickDistance?: number;
};
export { NodeWrapperProps }
export { NodeWrapperProps as NodeWrapperProps_alias_1 }
export { NodeWrapperProps as NodeWrapperProps_alias_2 }

export declare const nullPosition: {
    sourceX: null;
    sourceY: null;
    targetX: null;
    targetY: null;
    sourcePosition: null;
    targetPosition: null;
};

declare type OnBeforeDelete<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = OnBeforeDeleteBase<NodeType, EdgeType>;
export { OnBeforeDelete }
export { OnBeforeDelete as OnBeforeDelete_alias_1 }
export { OnBeforeDelete as OnBeforeDelete_alias_2 }

export { OnConnect }

export { OnConnectEnd }

export { OnConnectStart }

export { OnConnectStartParams }

/**
 * This type can be used to type the `onDelete` function with a custom node and edge type.
 *
 * @public
 */
declare type OnDelete<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = (params: {
    nodes: NodeType[];
    edges: EdgeType[];
}) => void;
export { OnDelete }
export { OnDelete as OnDelete_alias_1 }
export { OnDelete as OnDelete_alias_2 }

/**
 * This type can be used to type the `onEdgesChange` function with a custom edge type.
 *
 * @public
 *
 * @example
 *
 * ```ts
 * const onEdgesChange: OnEdgesChange<MyEdgeType> = useCallback((changes) => {
 *  setEdges((edges) => applyEdgeChanges(edges, changes));
 * },[]);
 * ```
 */
declare type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
export { OnEdgesChange }
export { OnEdgesChange as OnEdgesChange_alias_1 }
export { OnEdgesChange as OnEdgesChange_alias_2 }

declare type OnEdgesDelete<EdgeType extends Edge = Edge> = (edges: EdgeType[]) => void;
export { OnEdgesDelete }
export { OnEdgesDelete as OnEdgesDelete_alias_1 }
export { OnEdgesDelete as OnEdgesDelete_alias_2 }

export { OnError }

declare type OnInit<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = (reactFlowInstance: SolidFlowInstance<NodeType, EdgeType>) => void;
export { OnInit }
export { OnInit as OnInit_alias_1 }
export { OnInit as OnInit_alias_2 }

export { OnMove }

export { OnMoveEnd }

export { OnMoveStart }

declare type OnNodeDrag<NodeType extends Node_2 = Node_2> = (event: MouseEvent, node: NodeType, nodes: NodeType[]) => void;
export { OnNodeDrag }
export { OnNodeDrag as OnNodeDrag_alias_1 }
export { OnNodeDrag as OnNodeDrag_alias_2 }

/**
 * This type can be used to type the `onNodesChange` function with a custom node type.
 *
 * @public
 *
 * @example
 *
 * ```ts
 * const onNodesChange: OnNodesChange<MyNodeType> = useCallback((changes) => {
 *  setNodes((nodes) => applyNodeChanges(nodes, changes));
 * },[]);
 * ```
 */
declare type OnNodesChange<NodeType extends Node_2 = Node_2> = (changes: NodeChange<NodeType>[]) => void;
export { OnNodesChange }
export { OnNodesChange as OnNodesChange_alias_1 }
export { OnNodesChange as OnNodesChange_alias_2 }

declare type OnNodesDelete<NodeType extends Node_2 = Node_2> = (nodes: NodeType[]) => void;
export { OnNodesDelete }
export { OnNodesDelete as OnNodesDelete_alias_1 }
export { OnNodesDelete as OnNodesDelete_alias_2 }

export { OnReconnect }

export { OnResize }

export { OnResizeEnd }

export { OnResizeStart }

declare type OnSelectionChangeFunc<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = (params: OnSelectionChangeParams<NodeType, EdgeType>) => void;
export { OnSelectionChangeFunc }
export { OnSelectionChangeFunc as OnSelectionChangeFunc_alias_1 }
export { OnSelectionChangeFunc as OnSelectionChangeFunc_alias_2 }

declare type OnSelectionChangeParams<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = {
    nodes: NodeType[];
    edges: EdgeType[];
};
export { OnSelectionChangeParams }
export { OnSelectionChangeParams as OnSelectionChangeParams_alias_1 }
export { OnSelectionChangeParams as OnSelectionChangeParams_alias_2 }

export { OnSelectionDrag }

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

export declare function Pane(_p: ParentProps<PaneProps>): JSX.Element;

declare function Panel(_p: ParentProps<PanelProps>): JSX.Element;
export { Panel }
export { Panel as Panel_alias_1 }

export { PanelPosition }

declare interface PanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
    /** Set position of the panel
     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
     */
    position?: PanelPosition;
}
export { PanelProps }
export { PanelProps as PanelProps_alias_1 }

declare type PaneProps = {
    isSelecting: boolean;
    selectionKeyPressed: boolean;
} & Partial<Pick<SolidFlowProps, "selectionMode" | "panOnDrag" | "onSelectionStart" | "onSelectionEnd" | "onPaneClick" | "onPaneContextMenu" | "onPaneScroll" | "onPaneMouseEnter" | "onPaneMouseMove" | "onPaneMouseLeave" | "selectionOnDrag">>;

export { PanOnScrollMode }

export declare function PlusIcon(): JSX.Element;

export { Position_2 as Position }

export { ProOptions }

export declare const Provider: ContextProviderComponent<(() => string | null) | null>;

export declare const Provider_alias_1: ContextProviderComponent<    {
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>;

export declare type Queue<T> = {
    get: () => QueueItem<T>[];
    reset: () => void;
    push: (item: QueueItem<T>) => void;
};

export declare type QueueItem<T> = T[] | ((items: T[]) => T[]);

declare type ReactiveConnectionLookup = ReactiveMap<string, ReactiveMap<string, HandleConnection>>;
export { ReactiveConnectionLookup }
export { ReactiveConnectionLookup as ReactiveConnectionLookup_alias_1 }
export { ReactiveConnectionLookup as ReactiveConnectionLookup_alias_2 }

declare type ReactiveEdgeLookup<EdgeType extends EdgeBase = EdgeBase> = ReactiveMap<string, EdgeType>;
export { ReactiveEdgeLookup }
export { ReactiveEdgeLookup as ReactiveEdgeLookup_alias_1 }
export { ReactiveEdgeLookup as ReactiveEdgeLookup_alias_2 }

export declare class ReactiveStore<T extends object> {
    private debugName?;
    private store;
    constructor(initial: T, debugName?: string | undefined);
    get: () => T;
    setter: () => SetStoreFunction<T>;
}

export { reconnectEdge }

export { Rect }

export declare class RefObject<T> {
    private _current;
    constructor(_current: T);
    get current(): T;
    set current(value: T);
}

declare function ResizeControl(_p: ResizeControlProps): JSX.Element;

export declare function ResizeControlLine(props: ResizeControlLineProps): JSX.Element;

/**
 * @expand
 */
declare type ResizeControlLineProps = Omit<ResizeControlProps, "resizeDirection"> & {
    position?: ControlLinePosition;
};
export { ResizeControlLineProps }
export { ResizeControlLineProps as ResizeControlLineProps_alias_1 }
export { ResizeControlLineProps as ResizeControlLineProps_alias_2 }
export { ResizeControlLineProps as ResizeControlLineProps_alias_3 }

/**
 * @expand
 */
declare type ResizeControlProps = Pick<NodeResizerProps, "nodeId" | "color" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "keepAspectRatio" | "shouldResize" | "onResizeStart" | "onResize" | "onResizeEnd"> & {
    /**
     * Position of the control.
     * @example ControlPosition.TopLeft, ControlPosition.TopRight,
     * ControlPosition.BottomLeft, ControlPosition.BottomRight
     */
    position?: ControlPosition;
    /**
     * Variant of the control.
     * @default "handle"
     * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
     */
    variant?: ResizeControlVariant;
    /**
     * The direction the user can resize the node.
     * If not provided, the user can resize in any direction.
     */
    resizeDirection?: ResizeControlDirection;
    className?: string;
    style?: JSX.CSSProperties;
    children?: JSXElement;
};
export { ResizeControlProps }
export { ResizeControlProps as ResizeControlProps_alias_1 }
export { ResizeControlProps as ResizeControlProps_alias_2 }
export { ResizeControlProps as ResizeControlProps_alias_3 }

export { ResizeControlVariant }

export { ResizeDragEvent }

export { ResizeParams }

export { ResizeParamsWithDirection }

declare type SelectionDragHandler<NodeType extends Node_2 = Node_2> = (event: MouseEvent, nodes: NodeType[]) => void;
export { SelectionDragHandler }
export { SelectionDragHandler as SelectionDragHandler_alias_1 }
export { SelectionDragHandler as SelectionDragHandler_alias_2 }

export declare function SelectionListener(p: SelectionListenerProps): JSX.Element;

declare type SelectionListenerProps = {
    onSelectionChange?: OnSelectionChangeFunc;
};

export { SelectionMode_2 as SelectionMode }

export { SelectionRect }

export { SetCenterOptions }

export { ShouldResize }

declare const SimpleBezierEdge: Component<EdgeComponentProps_2>;
export { SimpleBezierEdge }
export { SimpleBezierEdge as SimpleBezierEdge_alias_1 }
export { SimpleBezierEdge as SimpleBezierEdge_alias_2 }

declare const SimpleBezierEdgeInternal: Component<EdgeComponentProps_2>;
export { SimpleBezierEdgeInternal }
export { SimpleBezierEdgeInternal as SimpleBezierEdgeInternal_alias_1 }

/**
 * SimpleBezier component props
 * @public
 * @expand
 */
declare type SimpleBezierEdgeProps = EdgeComponentProps;
export { SimpleBezierEdgeProps }
export { SimpleBezierEdgeProps as SimpleBezierEdgeProps_alias_1 }
export { SimpleBezierEdgeProps as SimpleBezierEdgeProps_alias_2 }

declare const SmoothStepEdge: (_p: SmoothStepEdgeProps) => JSX.Element;
export { SmoothStepEdge }
export { SmoothStepEdge as SmoothStepEdge_alias_1 }
export { SmoothStepEdge as SmoothStepEdge_alias_2 }

declare type SmoothStepEdge_2<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, "smoothstep"> & {
    pathOptions?: SmoothStepPathOptions;
};

declare const SmoothStepEdgeInternal: (_p: SmoothStepEdgeProps) => JSX.Element;
export { SmoothStepEdgeInternal }
export { SmoothStepEdgeInternal as SmoothStepEdgeInternal_alias_1 }

/**
 * SmoothStepEdge component props
 * @public
 * @expand
 */
declare type SmoothStepEdgeProps = EdgeComponentWithPathOptions<SmoothStepPathOptions>;
export { SmoothStepEdgeProps }
export { SmoothStepEdgeProps as SmoothStepEdgeProps_alias_1 }
export { SmoothStepEdgeProps as SmoothStepEdgeProps_alias_2 }

export { SmoothStepPathOptions }

export { SnapGrid }

declare type SolidEvent<T extends Element, E extends MouseEvent | TouchEvent> = {
    event: E;
    target: T;
};
export { SolidEvent }
export { SolidEvent as SolidEvent_alias_1 }
export { SolidEvent as SolidEvent_alias_2 }

declare function SolidFlow<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(_p: UsedProps<NodeType, EdgeType>): JSX.Element;
export { SolidFlow }
export { SolidFlow as default_alias_2 }

declare type SolidFlowActions<NodeType extends Node_2, EdgeType extends Edge> = {
    setNodes: (nodes: NodeType[]) => void;
    setEdges: (edges: EdgeType[]) => void;
    setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: EdgeType[]) => void;
    updateNodeInternals: (updates: Map<string, InternalNodeUpdate>, params?: {
        triggerFitView: boolean;
    }) => void;
    updateNodePositions: UpdateNodePositions;
    resetSelectedElements: () => void;
    unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams<NodeType, EdgeType>) => void;
    addSelectedNodes: (nodeIds: string[]) => void;
    addSelectedEdges: (edgeIds: string[]) => void;
    setMinZoom: (minZoom: number) => void;
    setMaxZoom: (maxZoom: number) => void;
    setTranslateExtent: (translateExtent: CoordinateExtent) => void;
    setNodeExtent: (nodeExtent: CoordinateExtent) => void;
    cancelConnection: () => void;
    updateConnection: UpdateConnection<InternalNode<NodeType>>;
    reset: () => void;
    triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
    triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
    panBy: PanBy;
    setPaneClickDistance: (distance: number) => void;
};
export { SolidFlowActions }
export { SolidFlowActions as SolidFlowActions_alias_1 }
export { SolidFlowActions as SolidFlowActions_alias_2 }

declare type SolidFlowFieldsToTrack = (typeof solidFlowFieldsToTrack)[number];

declare const solidFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "paneClickDistance"];

/**
 * The `SolidFlowInstance` provides a collection of methods to query and manipulate
 * the internal state of your flow. You can get an instance by using the
 * [`useSolidFlow`](/api-reference/hooks/use-react-flow) hook or attaching a listener
 * to the [`onInit`](/api-reference/react-flow#event-oninit) event.
 *
 * @public
 */
declare type SolidFlowInstance<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = GeneralHelpers<NodeType, EdgeType> & ViewportHelperFunctions & {
    /**
     * React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behavior.
     * This property tells you when viewport is initialized.
     */
    viewportInitialized: () => boolean;
};
export { SolidFlowInstance }
export { SolidFlowInstance as SolidFlowInstance_alias_1 }
export { SolidFlowInstance as SolidFlowInstance_alias_2 }

declare type SolidFlowJsonObject<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = {
    nodes: NodeType[];
    edges: EdgeType[];
    viewport: Viewport;
};
export { SolidFlowJsonObject }
export { SolidFlowJsonObject as SolidFlowJsonObject_alias_1 }
export { SolidFlowJsonObject as SolidFlowJsonObject_alias_2 }

/**
 * SolidFlow component props.
 * @public
 */
declare interface SolidFlowProps<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onError" | "onSelectionChange"> {
    /** An array of nodes to render in a controlled flow.
     * @example
     * const nodes = [
     *  {
     *    id: 'node-1',
     *    type: 'input',
     *    data: { label: 'Node 1' },
     *    position: { x: 250, y: 50 }
     *  }
     * ];
     */
    nodes?: NodeType[];
    /** An array of edges to render in a controlled flow.
     * @example
     * const edges = [
     *  {
     *    id: 'edge-1-2',
     *    source: 'node-1',
     *    target: 'node-2',
     *  }
     * ];
     */
    edges?: EdgeType[];
    /** The initial nodes to render in an uncontrolled flow. */
    defaultNodes?: NodeType[];
    /** The initial edges to render in an uncontrolled flow. */
    defaultEdges?: EdgeType[];
    /** Defaults to be applied to all new edges that are added to the flow.
     *
     * Properties on a new edge will override these defaults if they exist.
     * @example
     * const defaultEdgeOptions = {
     *  type: 'customEdgeType',
     *  animated: true,
     *  interactionWidth: 10,
     *  data: { label: 'custom label' },
     *  hidden: false,
     *  deletable: true,
     *  selected: false,
     *  focusable: true,
     *  markerStart: EdgeMarker.ArrowClosed,
     *  markerEnd: EdgeMarker.ArrowClosed,
     *  zIndex: 12,
     *  ariaLabel: 'custom aria label'
     * }
     */
    defaultEdgeOptions?: DefaultEdgeOptions;
    /** 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 */
    onNodeDoubleClick?: NodeMouseHandler<NodeType>;
    /** 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 */
    onNodeMouseMove?: NodeMouseHandler<NodeType>;
    /** 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 */
    onNodeContextMenu?: NodeMouseHandler<NodeType>;
    /** 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 */
    onNodeDrag?: OnNodeDrag<NodeType>;
    /** 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 */
    onEdgeClick?: (event: MouseEvent, edge: EdgeType) => void;
    /** 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 */
    onEdgeMouseEnter?: EdgeMouseHandler<EdgeType>;
    /** 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 */
    onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
    /** 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: MouseEvent, 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
     * @example // Use NodesState hook to create edges and get onNodesChange handler
     * import SolidFlow, { useNodesState } from '@xyflow/react';
     * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes);
     *
     * return (<SolidFlow onNodeChange={onNodeChange} {...rest} />)
     * @example // Use helper function to update edge
     * import SolidFlow, { applyNodeChanges } from '@xyflow/react';
     *
     * const onNodeChange = useCallback(
     *  (changes) => setNode((eds) => applyNodeChanges(changes, eds)),
     *  [],
     * );
     *
     * return (<SolidFlow onNodeChange={onNodeChange} {...rest} />)
     */
    onNodesChange?: OnNodesChange<NodeType>;
    /** This event handler is called when a Edge is updated
     * @example // Use EdgesState hook to create edges and get onEdgesChange handler
     * import SolidFlow, { useEdgesState } from '@xyflow/react';
     * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
     *
     * return (<SolidFlow onEdgesChange={onEdgesChange} {...rest} />)
     * @example // Use helper function to update edge
     * import SolidFlow, { applyEdgeChanges } from '@xyflow/react';
     *
     * const onEdgesChange = useCallback(
     *  (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
     *  [],
     * );
     *
     * return (<SolidFlow onEdgesChange={onEdgesChange} {...rest} />)
     */
    onEdgesChange?: OnEdgesChange<EdgeType>;
    /** This event handler gets called when a Node is deleted */
    onNodesDelete?: OnNodesDelete<NodeType>;
    /** This event handler gets called when a Edge is deleted */
    onEdgesDelete?: OnEdgesDelete<EdgeType>;
    /** 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 */
    onSelectionDragStart?: SelectionDragHandler<NodeType>;
    /** 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 */
    onSelectionDragStop?: SelectionDragHandler<NodeType>;
    onSelectionStart?: (event: MouseEvent) => void;
    onSelectionEnd?: (event: MouseEvent) => void;
    onSelectionContextMenu?: (event: SolidEvent<HTMLDivElement, MouseEvent>, 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.
     * @example // Use helper function to update edges onConnect
     * import SolidFlow, { addEdge } from '@xyflow/react';
     *
     * const onConnect = useCallback(
     *  (params) => setEdges((eds) => addEdge(params, eds)),
     *  [],
     * );
     *
     * return (<SolidFlow onConnect={onConnect} {...rest} />)
     */
    onConnect?: OnConnect;
    /** 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 */
    onConnectEnd?: OnConnectEnd;
    onClickConnectStart?: OnConnectStart;
    onClickConnectEnd?: OnConnectEnd;
    /** This event handler gets called when a flow has finished initializing */
    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 */
    onMoveStart?: OnMoveStart;
    /** This event handler gets called when a user stops panning or zooming the viewport */
    onMoveEnd?: OnMoveEnd;
    /** This event handler gets called when a user changes group of selected elements in the flow */
    onSelectionChange?: OnSelectionChangeFunc;
    /** 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 */
    onPaneClick?: (event: MouseEvent) => void;
    /** This event handler gets called when user right clicks inside the pane */
    onPaneContextMenu?: (event: MouseEvent | MouseEvent) => void;
    /** This event handler gets called when mouse enters the pane */
    onPaneMouseEnter?: (event: MouseEvent) => void;
    /** This event handler gets called when mouse moves over the pane */
    onPaneMouseMove?: (event: MouseEvent) => void;
    /** This event handler gets called when mouse leaves the pane */
    onPaneMouseLeave?: (event: MouseEvent) => void;
    /**
     * 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.
     * @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. */
    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.
     * @example
     * import CustomNode from './CustomNode';
     *
     * const nodeTypes = { nameOfNodeType: CustomNode };
     */
    nodeTypes?: NodeTypes;
    /** Custom edge types to be available in a flow.
     *
     * React Flow matches an edge's type to a component in the edgeTypes object.
     * @example
     * import CustomEdge from './CustomEdge';
     *
     * const edgeTypes = { nameOfEdgeType: CustomEdge };
     */
    edgeTypes?: EdgeTypes;
    /** 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!
     */
    connectionLineType?: ConnectionLineType;
    /** Styles to be applied to the connection line */
    connectionLineStyle?: JSX.CSSProperties;
    /** React Component to be used as a connection line */
    connectionLineComponent?: ConnectionLineComponent;
    /** Styles to be applied to the container of the connection line */
    connectionLineContainerStyle?: JSX.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.
     * @default 'strict'
     */
    connectionMode?: ConnectionMode;
    /** Pressing down this key deletes all selected nodes & edges.
     * @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.
     *
     * By setting this prop to null you can disable this functionality.
     * @default 'Space'
     */
    selectionKeyCode?: KeyCode | null;
    /** Select multiple elements with a selection box, without pressing down selectionKey */
    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.
     * @default 'full'
     */
    selectionMode?: SelectionMode_2;
    /** 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.
     * @default 'Space'
     */
    panActivationKeyCode?: KeyCode | null;
    /** Pressing down this key you can select multiple elements by clicking.
     * @default 'Meta' for macOS, "Ctrl" 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.
     *
     * By setting this prop to null you can disable this functionality.
     * @default 'Meta' for macOS, "Ctrl" for other systems
     * */
    zoomActivationKeyCode?: KeyCode | null;
    /** Set this prop to make the flow snap to the grid */
    snapToGrid?: boolean;
    /** Grid all 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.
     *
     * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
     * @default false
     */
    onlyRenderVisibleElements?: boolean | undefined;
    /** Controls if all nodes should be draggable
     * @default true
     */
    nodesDraggable?: boolean;
    /** Controls if all nodes should be connectable to each other
     * @default true
     */
    nodesConnectable?: boolean;
    /** Controls if all nodes should be focusable
     * @default true
     */
    nodesFocusable?: boolean;
    /** Defines nodes relative position to its coordinates
     * @example
     * [0, 0] // default, top left
     * [0.5, 0.5] // center
     * [1, 1] // bottom right
     */
    nodeOrigin?: NodeOrigin;
    /** Controls if all edges should be focusable
     * @default true
     */
    edgesFocusable?: boolean;
    /** Controls if all edges should be updateable
     * @default true
     */
    edgesReconnectable?: boolean;
    /** Controls if all elements should (nodes & edges) be selectable
     * @default true
     */
    elementsSelectable?: boolean;
    /** If true, nodes get selected on drag
     * @default true
     */
    selectNodesOnDrag?: boolean;
    /** Enableing 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.
     * @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
     * @default 0.5
     */
    minZoom?: number;
    /** Maximum zoom level
     * @default 2
     */
    maxZoom?: number;
    /** Controlled viewport to be used instead of internal one */
    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.
     * @example
     * const initialViewport = {
     *  zoom: 0.5,
     *  position: { x: 0, y: 0 }
     * };
     */
    defaultViewport?: Viewport;
    /**
     * Gets called when the viewport changes.
     */
    onViewportChange?: (viewport: Viewport) => void;
    /** 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.
     * @example [[-1000, -10000], [1000, 1000]]
     */
    translateExtent?: CoordinateExtent;
    /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
     * @default true
     */
    preventScrolling?: boolean;
    /** 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"
     */
    defaultMarkerColor?: string;
    /** Controls if the viewport should zoom by scrolling inside the container */
    zoomOnScroll?: boolean;
    /** Controls if the viewport should zoom by pinching on a touch screen */
    zoomOnPinch?: boolean;
    /** Controls if the viewport should pan by scrolling inside the container
     *
     * Can be limited to a specific direction with panOnScrollMode
     */
    panOnScroll?: boolean;
    /** Controls how fast viewport should be panned on scroll.
     *
     * Use togther with panOnScroll prop.
     */
    panOnScrollSpeed?: number;
    /** This prop is used to limit the direction of panning when panOnScroll is enabled.
     *
     * 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 */
    zoomOnDoubleClick?: boolean;
    reconnectRadius?: number;
    noDragClassName?: string | undefined;
    noWheelClassName?: string;
    noPanClassName?: string;
    /** If set, initial viewport will show all nodes & edges */
    fitView?: boolean;
    /** Options to be used in combination with fitView
     * @example
     * const fitViewOptions = {
     *  padding: 0.1,
     *  includeHiddenNodes: false,
     *  minZoom: 0.1,
     *  maxZoom: 1,
     *  duration: 200,
     *  nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
     * };
     */
    fitViewOptions?: FitViewOptions;
    /**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
     * handle to create a connection.
     */
    connectOnClick?: boolean;
    /** Set position of the attribution
     * @default 'bottom-right'
     * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
     */
    attributionPosition?: PanelPosition;
    /** By default, we render a small attribution in the corner of your flows that links back to the project.
     *
     * Anyone is free to remove this attribution whether they're a Pro subscriber or not
     * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
     * before doing so.
     */
    proOptions?: ProOptions;
    /** Enabling this option will raise the z-index of nodes when they are selected.
     * @default true
     */
    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.
     * @default false
     */
    disableKeyboardA11y?: boolean;
    /** You can enable this prop to automatically pan the viewport while dragging a node.
     * @default true
     */
    autoPanOnNodeDrag?: boolean;
    /** You can enable this prop to automatically pan the viewport while dragging a node.
     * @default true
     */
    autoPanOnConnect?: boolean;
    /**
     * The speed at which the viewport pans while dragging a node or a selection box.
     * @default 15
     */
    autoPanSpeed?: number;
    /** You can enable this prop to automatically pan the viewport while making a new connection.
     * @default true
     */
    connectionRadius?: number;
    /** Ocassionally something may happen that causes Svelte 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.
     */
    onError?: OnError;
    /** 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
     */
    isValidConnection?: IsValidConnection;
    /** With a threshold greater than zero you can control the distinction between node drag and click events.
     *
     * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
     * @default 1
     */
    nodeDragThreshold?: number;
    /** Sets a fixed width for the flow */
    width?: number;
    /** Sets a fixed height for the flow */
    height?: number;
    /** Controls color scheme used for styling the flow
     * @default 'system'
     * @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
     */
    debug?: boolean;
}
export { SolidFlowProps }
export { SolidFlowProps as SolidFlowProps_alias_1 }
export { SolidFlowProps as SolidFlowProps_alias_2 }

/**
 * The `<SolidFlowProvider />` component is a [context provider](https://docs.solidjs.com/concepts/context)
 * that makes it possible to access a flow's internal state outside of the
 * [`<SolidFlow />`](/api-reference/react-flow) component. Many of the hooks we
 * provide rely on this component to work.
 * @public
 *
 * @example
 * ```tsx
 *import { SolidFlow, SolidFlowProvider, useNodes } from '@circonomit/solid-flow'
 *
 *export default function Flow() {
 *  return (
 *    <SolidFlowProvider>
 *      <SolidFlow nodes={...} edges={...} />
 *      <Sidebar />
 *    </SolidFlowProvider>
 *  );
 *}
 *
 *function Sidebar() {
 *  // This hook will only work if the component it's used in is a child of a
 *  // <SolidFlowProvider />.
 *  const nodes = useNodes()
 *
 *  return <aside>do something with nodes</aside>;
 *}
 *```
 *
 * @remarks If you're using a router and want your flow's state to persist across routes,
 * it's vital that you place the `<SolidFlowProvider />` component _outside_ of
 * your router. If you have multiple flows on the same page you will need to use a separate
 * `<SolidFlowProvider />` for each flow.
 */
declare function SolidFlowProvider(p: ParentProps<SolidFlowProviderProps>): JSX.Element;
export { SolidFlowProvider }
export { SolidFlowProvider as SolidFlowProvider_alias_1 }

export declare type SolidFlowProviderProps = {
    /** These nodes are used to initialize the flow. They are not dynamic. */
    initialNodes?: Node_2[];
    /** These edges are used to initialize the flow. They are not dynamic. */
    initialEdges?: Edge[];
    /** These nodes are used to initialize the flow. They are not dynamic. */
    defaultNodes?: Node_2[];
    /** These edges are used to initialize the flow. They are not dynamic. */
    defaultEdges?: Edge[];
    /** The initial width is necessary to be able to use fitView on the server */
    initialWidth?: number;
    /** The initial height is necessary to be able to use fitView on the server */
    initialHeight?: number;
    /** When `true`, the flow will be zoomed and panned to fit all the nodes initially provided. */
    fitView?: boolean;
    /**
     * You can provide an object of options to customize the initial fitView behavior.
     */
    initialFitViewOptions?: FitViewOptions;
    /** Initial minimum zoom level */
    initialMinZoom?: number;
    /** Initial maximum zoom level */
    initialMaxZoom?: number;
    /**
     * 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
     * [1, 1] // bottom right
     */
    nodeOrigin?: NodeOrigin;
    /**
     * 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;
};

declare type SolidFlowState<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = SolidFlowStore<NodeType, EdgeType> & SolidFlowActions<NodeType, EdgeType>;
export { SolidFlowState }
export { SolidFlowState as SolidFlowState_alias_1 }
export { SolidFlowState as SolidFlowState_alias_2 }

declare type SolidFlowStore<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = {
    rfId: Writable<string>;
    width: Writable<number>;
    height: Writable<number>;
    transform: Writable<Transform>;
    nodes: Writable<NodeType[]>;
    nodesInitialized: Writable<boolean>;
    nodeLookup: ReactiveMap<string, InternalNode<NodeType>>;
    parentLookup: ReactiveMap<string, ReactiveMap<string, InternalNodeBase<NodeBase>>>;
    edges: Writable<EdgeType[]>;
    edgeLookup: ReactiveEdgeLookup<EdgeType>;
    connectionLookup: ReactiveConnectionLookup;
    onNodesChange: Writable<OnNodesChange<NodeType> | null>;
    onEdgesChange: Writable<OnEdgesChange<EdgeType> | null>;
    hasDefaultNodes: Writable<boolean>;
    hasDefaultEdges: Writable<boolean>;
    domNode: Writable<HTMLDivElement | null>;
    paneDragging: Writable<boolean>;
    noPanClassName: Writable<string>;
    panZoom: Writable<PanZoomInstance | null>;
    minZoom: Writable<number>;
    maxZoom: Writable<number>;
    translateExtent: Writable<CoordinateExtent>;
    nodeExtent: Writable<CoordinateExtent>;
    nodeOrigin: Writable<NodeOrigin>;
    nodeDragThreshold: Writable<number>;
    nodesSelectionActive: Writable<boolean>;
    userSelectionActive: Writable<boolean>;
    userSelectionRect: Writable<SelectionRect | null>;
    connection: ReactiveStore<ConnectionState<InternalNode<NodeType>>>;
    connectionMode: Writable<ConnectionMode>;
    connectionClickStartHandle: ConnectionStartHandle;
    snapToGrid: Writable<boolean>;
    snapGrid: Writable<SnapGrid>;
    nodesDraggable: Writable<boolean>;
    nodesConnectable: Writable<boolean>;
    nodesFocusable: Writable<boolean>;
    edgesFocusable: Writable<boolean>;
    edgesReconnectable: Writable<boolean>;
    elementsSelectable: Writable<boolean>;
    elevateNodesOnSelect: Writable<boolean>;
    elevateEdgesOnSelect: Writable<boolean>;
    selectNodesOnDrag: Writable<boolean>;
    multiSelectionActive: Writable<boolean>;
    onNodeDragStart?: OnNodeDrag<NodeType>;
    onNodeDrag?: OnNodeDrag<NodeType>;
    onNodeDragStop?: OnNodeDrag<NodeType>;
    onSelectionDragStart?: OnSelectionDrag;
    onSelectionDrag?: OnSelectionDrag;
    onSelectionDragStop?: OnSelectionDrag;
    onMoveStart: Writable<OnMoveStart | undefined>;
    onMove: Writable<OnMove | undefined>;
    onMoveEnd: Writable<OnMoveEnd | undefined>;
    onConnect: Writable<OnConnect | undefined>;
    onConnectStart?: OnConnectStart;
    onConnectEnd?: OnConnectEnd;
    onClickConnectStart?: OnConnectStart;
    onClickConnectEnd?: OnConnectEnd;
    connectOnClick: Writable<boolean>;
    defaultEdgeOptions?: DefaultEdgeOptions;
    fitViewQueued: Writable<boolean>;
    fitViewOptions: Writable<FitViewOptions | undefined>;
    fitViewResolver: Writable<ReturnType<typeof withResolvers<boolean>> | null>;
    onNodesDelete: Writable<OnNodesDelete<NodeType> | undefined>;
    onEdgesDelete: Writable<OnEdgesDelete<EdgeType> | undefined>;
    onDelete: Writable<OnDelete | undefined>;
    onError: Writable<OnError | undefined>;
    onViewportChangeStart: Writable<OnViewportChange | undefined>;
    onViewportChange: Writable<OnViewportChange | undefined>;
    onViewportChangeEnd: Writable<OnViewportChange | undefined>;
    onBeforeDelete: Writable<OnBeforeDelete<NodeType, EdgeType> | undefined>;
    onSelectionChangeHandlers: Writable<OnSelectionChangeFunc<NodeType, EdgeType>[]>;
    ariaLiveMessage: Writable<string>;
    autoPanOnConnect: Writable<boolean>;
    autoPanOnNodeDrag: Writable<boolean>;
    autoPanSpeed: Writable<number>;
    connectionRadius: Writable<number>;
    isValidConnection?: IsValidConnection<EdgeType>;
    lib: Writable<string>;
    debug: Writable<boolean>;
};
export { SolidFlowStore }
export { SolidFlowStore as SolidFlowStore_alias_1 }
export { SolidFlowStore as SolidFlowStore_alias_2 }

declare const StepEdge: Component<StepEdgeProps>;
export { StepEdge }
export { StepEdge as StepEdge_alias_1 }
export { StepEdge as StepEdge_alias_2 }

declare type StepEdge_2<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, "step"> & {
    pathOptions?: StepPathOptions;
};

declare const StepEdgeInternal: Component<StepEdgeProps>;
export { StepEdgeInternal }
export { StepEdgeInternal as StepEdgeInternal_alias_1 }

/**
 * StepEdge component props
 * @public
 * @expand
 */
declare type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
export { StepEdgeProps }
export { StepEdgeProps as StepEdgeProps_alias_1 }
export { StepEdgeProps as StepEdgeProps_alias_2 }

export declare function StoreUpdater<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(props: StoreUpdaterProps<NodeType, EdgeType>): null;

declare type StoreUpdaterProps<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = Pick<SolidFlowProps<NodeType, EdgeType>, SolidFlowFieldsToTrack> & {
    rfId: string;
};

/**
 * Component that can be used inside a custom edge to render a straight line.
 *
 * @public
 * @example
 *
 * ```tsx
 * import { StraightEdge } from '@circonomit/solid-flow';
 *
 * function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
 *   return (
 *     <StraightEdge
 *       sourceX={sourceX}
 *       sourceY={sourceY}
 *       targetX={targetX}
 *       targetY={targetY}
 *     />
 *   );
 * }
 * ```
 */
declare const StraightEdge: (p: StraightEdgeProps) => JSX.Element;
export { StraightEdge }
export { StraightEdge as StraightEdge_alias_1 }
export { StraightEdge as StraightEdge_alias_2 }

declare type StraightEdge_2<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, "straight">;

/**
 * @internal
 */
declare const StraightEdgeInternal: (p: StraightEdgeProps) => JSX.Element;
export { StraightEdgeInternal }
export { StraightEdgeInternal as StraightEdgeInternal_alias_1 }

/**
 * StraightEdge component props
 * @public
 * @expand
 */
declare type StraightEdgeProps = Omit<EdgeComponentProps, "sourcePosition" | "targetPosition">;
export { StraightEdgeProps }
export { StraightEdgeProps as StraightEdgeProps_alias_1 }
export { StraightEdgeProps as StraightEdgeProps_alias_2 }

declare type SymbolProps = Omit<EdgeMarker, "type">;

export { Transform }

export declare function UnlockIcon(): JSX.Element;

declare type UnselectNodesAndEdgesParams<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge> = {
    nodes?: NodeType[];
    edges?: EdgeType[];
};
export { UnselectNodesAndEdgesParams }
export { UnselectNodesAndEdgesParams as UnselectNodesAndEdgesParams_alias_1 }
export { UnselectNodesAndEdgesParams as UnselectNodesAndEdgesParams_alias_2 }

export declare function useBatchContext(): {
    nodeQueue: Queue<any>;
    edgeQueue: Queue<any>;
};

/**
 * Hook for receiving the current color mode class 'dark' or 'light'.
 *
 * @internal
 * @param colorMode - The color mode to use ('dark', 'light' or 'system')
 */
export declare function useColorModeClass(colorMode: () => ColorMode): () => ColorModeClass;

/**
 * The `useConnection` hook returns the current connection when there is an active
 * connection interaction. If no connection interaction is active, it returns null
 * for every property. A typical use case for this hook is to colorize handles
 * based on a certain condition (e.g. if the connection is valid or not).
 *
 * @public
 * @returns ConnectionState accessor function
 */
declare function useConnection(): () => ConnectionState<InternalNode>;
export { useConnection }
export { useConnection as useConnection_alias_1 }

declare type UsedProps<N extends Node_2, E extends Edge> = SolidFlowProps<N, E> & {
    ref?: (node: HTMLDivElement) => void;
    className?: string;
};

/**
 * Hook for calling XYDrag helper from @xyflow/system.
 *
 * @internal
 */
export declare function useDrag({ nodeRef, disabled, noDragClassName, handleSelector, nodeId, isSelectable, nodeClickDistance, }: UseDragParams): Accessor<boolean>;

declare type UseDragParams = {
    nodeRef: () => HTMLDivElement | undefined;
    disabled?: () => boolean;
    noDragClassName?: () => string | undefined;
    handleSelector?: () => string | undefined;
    nodeId?: () => string | undefined;
    isSelectable?: () => boolean | undefined;
    nodeClickDistance?: () => number | undefined;
};

/**
 * Hook for getting the current edges from the store.
 *
 * @public
 * @returns An array of edges
 */
declare function useEdges<EdgeType extends Edge = Edge>(): Writable<EdgeType[]>;
export { useEdges }
export { useEdges as useEdges_alias_1 }

/**
 * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
 *
 * @public
 * @param initialEdges
 * @returns an array [edges, setEdges, onEdgesChange]
 */
declare function useEdgesState<EdgeType extends Edge = Edge>(initialEdges: EdgeType[]): [Accessor<EdgeType[]>, Setter<EdgeType[]>, OnEdgesChange<EdgeType>];
export { useEdgesState }
export { useEdgesState as useEdgesState_alias_1 }

/**
 * Hook for handling global key events.
 *
 * @internal
 */
export declare function useGlobalKeyHandler(config: {
    deleteKeyCode: () => KeyCode | null;
    multiSelectionKeyCode: () => KeyCode | null;
}): void;

/**
 * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
 *
 * @deprecated Use `useNodeConnections` instead.
 * @public
 * @param param.type - handle type 'source' or 'target'
 * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
 * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
 * @param param.onConnect - gets called when a connection is established
 * @param param.onDisconnect - gets called when a connection is removed
 * @returns an array with handle connections
 */
declare function useHandleConnections({ type, id, nodeId, onConnect, onDisconnect, }: useHandleConnectionsParams): () => HandleConnection[];
export { useHandleConnections }
export { useHandleConnections as useHandleConnections_alias_1 }

declare type useHandleConnectionsParams = {
    type: HandleType;
    id?: string | null;
    nodeId?: string;
    onConnect?: (connections: Connection[]) => void;
    onDisconnect?: (connections: Connection[]) => void;
};

/**
 * Hook for getting an internal node by id
 *
 * @public
 * @param id - id of the node
 * @returns array with visible node ids
 */
declare function useInternalNode<NodeType extends Node_2 = Node_2>(id: string): () => InternalNode<NodeType> | undefined;
export { useInternalNode }
export { useInternalNode as useInternalNode_alias_1 }

export declare const useIsomorphicLayoutEffect: typeof createEffect;

/**
 * Hook for handling key events.
 *
 * @public
 * @param param.keyCode - The key code (string or array of strings) to use
 * @param param.options - Options
 * @returns boolean
 */
declare function useKeyPress(keyCode?: (() => KeyCode | null | undefined) | null, options?: () => UseKeyPressOptions): () => boolean;
export { useKeyPress }
export { useKeyPress as useKeyPress_alias_1 }

export declare type UseKeyPressOptions = {
    target?: Window | Document | HTMLElement | ShadowRoot | null;
    actInsideInputWithModifier?: boolean;
};

export declare function useMarkerSymbol(type: () => MarkerType): () => ((_p: SymbolProps) => JSX.Element) | null;

/**
 * Hook for updating node positions by passing a direction and factor
 *
 * @internal
 * @returns function for updating node positions
 */
export declare function useMoveSelectedNodes(): (params: {
    direction: XYPosition;
    factor: number;
}) => void;

/**
 * This hook returns an array of connections on a specific node, handle type ('source', 'target') or handle ID.
 *
 * @public
 * @returns An accessor function that returns an array with connections.
 *
 * @example
 * ```jsx
 *import { useNodeConnections } from '@circonomit/solid-flow';
 *
 *export default function () {
 *  const connections = useNodeConnections({
 *    handleType: 'target',
 *    handleId: 'my-handle',
 *  });
 *
 *  return (
 *    <div>There are currently {connections().length} incoming connections!</div>
 *  );
 *}
 *```
 */
declare function useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect, }?: UseNodeConnectionsParams): Accessor<HandleConnection[]>;
export { useNodeConnections }
export { useNodeConnections as useNodeConnections_alias_1 }

declare type UseNodeConnectionsParams = {
    /** ID of the node, filled in automatically if used inside custom node. */
    id?: string;
    /** What type of handle connections do you want to observe? */
    handleType?: HandleType;
    /** Filter by handle id (this is only needed if the node has multiple handles of the same type). */
    handleId?: string;
    /** Gets called when a connection is established. */
    onConnect?: (connections: Connection[]) => void;
    /** Gets called when a connection is removed. */
    onDisconnect?: (connections: Connection[]) => void;
};

declare const useNodeId: () => (() => string | null);
export { useNodeId }
export { useNodeId as useNodeId_alias_1 }

/**
 * Hook to handle the resize observation + internal updates for the passed node.
 *
 * @internal
 * @returns nodeRef - reference to the node element
 */
export declare function useNodeObserver({ node: getNode, nodeType: getNodeType, hasDimensions, resizeObserver: getResizeObserver, }: {
    node: () => InternalNode;
    nodeType: () => string;
    hasDimensions: () => boolean;
    resizeObserver: () => ResizeObserver | null;
}): RefObject_2<HTMLDivElement | null>;

export declare function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes?: () => NodeTypes | undefined): void;

export declare function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes?: () => EdgeTypes | undefined): void;

/**
 * Hook for getting the current nodes from the store.
 *
 * @public
 * @returns An array of nodes
 */
declare function useNodes<NodeType extends Node_2 = Node_2>(): Writable<NodeType[]>;
export { useNodes }
export { useNodes as useNodes_alias_1 }

/**
 * Hook for receiving data of one or multiple nodes
 *
 * @public
 * @param nodeId - The id (or ids) of the node to get the data from
 * @param guard - Optional guard function to narrow down the node type
 * @returns An object (or array of object) with {id, type, data} representing each node
 */
declare function useNodesData<NodeType extends Node_2 = Node_2>(nodeId: string): Pick<NodeType, "id" | "type" | "data"> | null;

declare function useNodesData<NodeType extends Node_2 = Node_2>(nodeIds: string[]): Pick<NodeType, "id" | "type" | "data">[];
export { useNodesData }
export { useNodesData as useNodesData_alias_1 }

/**
 * Hook which returns true when all nodes are initialized.
 *
 * @public
 * @param options.includeHiddenNodes - defaults to false
 * @returns boolean indicating whether all nodes are initialized
 */
declare function useNodesInitialized(options?: UseNodesInitializedOptions): boolean;
export { useNodesInitialized }
export { useNodesInitialized as useNodesInitialized_alias_1 }

declare type UseNodesInitializedOptions = {
    includeHiddenNodes?: boolean;
};
export { UseNodesInitializedOptions }
export { UseNodesInitializedOptions as UseNodesInitializedOptions_alias_1 }

/**
 * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
 *
 * @public
 * @param initialNodes
 * @returns an array [nodes, setNodes, onNodesChange]
 */
declare function useNodesState<NodeType extends Node_2>(initialNodes: NodeType[]): [Accessor<NodeType[]>, Setter<NodeType[]>, OnNodesChange<NodeType>];
export { useNodesState }
export { useNodesState as useNodesState_alias_1 }

/**
 * Hook for calling onInit handler.
 *
 * @internal
 */
export declare function useOnInitHandler<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(onInit: () => OnInit<NodeType, EdgeType> | undefined): void;

/**
 * Hook for registering an onSelectionChange handler.
 *
 * @public
 * @param params.onChange - The handler to register
 */
declare function useOnSelectionChange(p: UseOnSelectionChangeOptions): void;
export { useOnSelectionChange }
export { useOnSelectionChange as useOnSelectionChange_alias_1 }

declare type UseOnSelectionChangeOptions = {
    onChange: OnSelectionChangeFunc;
};
export { UseOnSelectionChangeOptions }
export { UseOnSelectionChangeOptions as UseOnSelectionChangeOptions_alias_1 }

/**
 * Hook for registering an onViewportChange handler.
 *
 * @public
 * @param params.onStart - gets called when the viewport starts changing
 * @param params.onChange - gets called when the viewport changes
 * @param params.onEnd - gets called when the viewport stops changing
 */
declare function useOnViewportChange({ onStart, onChange, onEnd, }: UseOnViewportChangeOptions): void;
export { useOnViewportChange }
export { useOnViewportChange as useOnViewportChange_alias_1 }

declare type UseOnViewportChangeOptions = {
    onStart?: OnViewportChange;
    onChange?: OnViewportChange;
    onEnd?: OnViewportChange;
};
export { UseOnViewportChangeOptions }
export { UseOnViewportChangeOptions as UseOnViewportChangeOptions_alias_1 }

/**
 * This hook returns a queue that can be used to batch updates.
 *
 * @param runQueue - a function that gets called when the queue is flushed
 * @internal
 *
 * @returns a Queue object
 */
export declare function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void): Queue<T>;

export declare const useRef: <T>(initialValue: T) => RefObject<T>;

/**
 * Hook for handling resize events.
 *
 * @internal
 */
export declare function useResizeHandler(getDomNode: () => HTMLDivElement | null): void;

export declare function useResizeObserver(): Accessor<ResizeObserver | null>;

export declare function UserSelection(): JSX.Element;

/**
 * This hook returns a SolidFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.
 *
 * @public
 * @example
 * ```jsx
 *import { useCallback, useState } from 'react';
 *import { useSolidFlow } from '@circonomit/solid-flow';
 *
 *export function NodeCounter() {
 *  const reactFlow = useSolidFlow();
 *  const [count, setCount] = useState(0);
 *  const countNodes = useCallback(() => {
 *    setCount(reactFlow.getNodes().length);
 *    // you need to pass it as a dependency if you are using it with useEffect or useCallback
 *    // because at the first render, it's not initialized yet and some functions might not work.
 *  }, [reactFlow]);
 *
 *  return (
 *    <div>
 *      <button onClick={countNodes}>Update count</button>
 *      <p>There are {count} nodes in the flow.</p>
 *    </div>
 *  );
 *}
 *```
 */
declare function useSolidFlow<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(): SolidFlowInstance<NodeType, EdgeType>;
export { useSolidFlow }
export { useSolidFlow as useSolidFlow_alias_1 }

/**
 * Hook for accessing the internal store. Should only be used in rare cases.
 *
 * @public
 * @param selector
 * @param equalityFn
 * @returns The selected state slice
 *
 * @example
 * const nodes = useStore((state: SolidFlowState<MyNodeType>) => state.nodes);
 *
 */
declare function useStore<StateSlice = unknown>(selector: (state: SolidFlowState) => StateSlice): StateSlice;
export { useStore }
export { useStore as useStore_alias_1 }

declare function useStoreApi<NodeType extends Node_2 = Node_2, EdgeType extends Edge = Edge>(): {
    batch: (fn: (s: SolidFlowState<NodeType, EdgeType>) => void) => void;
    rfId: Writable_2<string>;
    width: Writable_2<number>;
    height: Writable_2<number>;
    transform: Writable_2<Transform>;
    nodes: Writable_2<NodeType[]>;
    nodesInitialized: Writable_2<boolean>;
    nodeLookup: ReactiveMap<string, InternalNode_2<NodeType>>;
    parentLookup: ReactiveMap<string, ReactiveMap<string, InternalNodeBase<NodeBase>>>;
    edges: Writable_2<EdgeType[]>;
    edgeLookup: ReactiveEdgeLookup_2<EdgeType>;
    connectionLookup: ReactiveConnectionLookup_2;
    onNodesChange: Writable_2<OnNodesChange_2<NodeType> | null>;
    onEdgesChange: Writable_2<OnEdgesChange_2<EdgeType> | 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<NodeType>>>;
    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<NodeType> | undefined;
    onNodeDrag?: OnNodeDrag_2<NodeType> | undefined;
    onNodeDragStop?: OnNodeDrag_2<NodeType> | 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<NodeType> | undefined>;
    onEdgesDelete: Writable_2<OnEdgesDelete_2<EdgeType> | 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<NodeType, EdgeType> | undefined>;
    onSelectionChangeHandlers: Writable_2<OnSelectionChangeFunc_2<NodeType, EdgeType>[]>;
    ariaLiveMessage: Writable_2<string>;
    autoPanOnConnect: Writable_2<boolean>;
    autoPanOnNodeDrag: Writable_2<boolean>;
    autoPanSpeed: Writable_2<number>;
    connectionRadius: Writable_2<number>;
    isValidConnection?: IsValidConnection_2<EdgeType> | undefined;
    lib: Writable_2<string>;
    debug: Writable_2<boolean>;
    setNodes: (nodes: NodeType[]) => void;
    setEdges: (edges: EdgeType[]) => void;
    setDefaultNodesAndEdges: (nodes?: NodeType[] | undefined, edges?: EdgeType[] | undefined) => void;
    updateNodeInternals: (updates: Map<string, InternalNodeUpdate>, params?: {
        triggerFitView: boolean;
    }) => void;
    updateNodePositions: UpdateNodePositions;
    resetSelectedElements: () => void;
    unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams_2<NodeType, EdgeType> | undefined) => void;
    addSelectedNodes: (nodeIds: string[]) => void;
    addSelectedEdges: (edgeIds: string[]) => void;
    setMinZoom: (minZoom: number) => void;
    setMaxZoom: (maxZoom: number) => void;
    setTranslateExtent: (translateExtent: CoordinateExtent) => void;
    setNodeExtent: (nodeExtent: CoordinateExtent) => void;
    cancelConnection: () => void;
    updateConnection: UpdateConnection<InternalNode_2<NodeType>>;
    reset: () => void;
    triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
    triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
    panBy: PanBy;
    setPaneClickDistance: (distance: number) => void;
};
export { useStoreApi }
export { useStoreApi as useStoreApi_alias_1 }

export declare function useStylesLoadedWarning(): void;

/**
 * Hook for updating node internals.
 *
 * @public
 * @returns function for updating node internals
 */
declare function useUpdateNodeInternals(): UpdateNodeInternals;
export { useUpdateNodeInternals }
export { useUpdateNodeInternals as useUpdateNodeInternals_alias_1 }

/**
 * Hook for getting the current viewport from the store.
 *
 * @public
 * @returns The current viewport
 */
declare function useViewport(): () => Viewport;
export { useViewport }
export { useViewport as useViewport_alias_1 }

/**
 * Hook for syncing the viewport with the panzoom instance.
 *
 * @internal
 * @param viewport
 */
export declare function useViewportSync(getViewport?: () => Viewport | undefined): null;

/**
 * Hook for getting the visible edge ids from the store.
 *
 * @internal
 * @param onlyRenderVisible
 * @returns array with visible edge ids
 */
export declare function useVisibleEdgeIds(onlyRenderVisible: () => boolean): () => string[];

/**
 * Hook for getting the visible node ids from the store.
 *
 * @internal
 * @param onlyRenderVisible
 * @returns array with visible node ids
 */
export declare function useVisibleNodeIds(onlyRenderVisible: () => boolean): () => string[];

export { Viewport }

export declare function Viewport_alias_1(p: ParentProps): JSX.Element;

export { ViewportHelperFunctionOptions }

/**
 * @inline
 */
declare type ViewportHelperFunctions = {
    /**
     * 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;
    /**
     * Zoom the viewport to a given zoom level. Passing in a `duration` will animate the viewport to
     * the new zoom level.
     *
     * @param zoomLevel - the zoom level to set
     * @param options.duration - optional duration. If set, a transition will be applied
     */
    zoomTo: ZoomTo;
    /**
     * Get the current zoom level of the viewport.
     *
     * @returns current zoom as a number
     */
    getZoom: GetZoom;
    /**
     * Sets the current viewport.
     *
     * @param viewport - the viewport to set
     * @param options.duration - optional duration. If set, a transition will be applied
     * @param options.ease - optional ease function.
     */
    setViewport: SetViewport;
    /**
     * Returns the current viewport.
     *
     * @returns Viewport
     */
    getViewport: GetViewport;
    /**
     * Center the viewport on a given position. Passing in a `duration` will animate the viewport to
     * the new position.
     *
     * @param x - x position
     * @param y - y position
     * @param options.zoom - optional zoom
     * @param options.duration - optional duration. If set, a transition will be applied
     * @param options.ease - optional ease function.
     */
    setCenter: SetCenter;
    /**
     * A low-level utility function to fit the viewport to a given rectangle. By passing in a
     * `duration`, the viewport will animate from its current position to the new position. The
     * `padding` option can be used to add space around the bounds.
     *
     * @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
     * @param options.padding - optional padding
     * @param options.duration - optional duration. If set, a transition will be applied
     * @param options.ease - optional ease function.
     */
    fitBounds: FitBounds;
    /**
     * With this function you can translate a screen pixel position to a flow position. It is useful
     * for implementing drag and drop from a sidebar for example.
     *
     * @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, options?: {
        snapToGrid: boolean;
    }) => XYPosition;
    /**
     * Translate a position inside the flow's canvas to a screen pixel 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) => XYPosition;
};
export { ViewportHelperFunctions }
export { ViewportHelperFunctions as ViewportHelperFunctions_alias_1 }
export { ViewportHelperFunctions as ViewportHelperFunctions_alias_2 }

declare function ViewportPortal(p: ParentProps): JSX.Element;
export { ViewportPortal }
export { ViewportPortal as ViewportPortal_alias_1 }

export declare function Wrapper(p: ParentProps<{
    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;
}>): JSX.Element;

export declare class Writable<T> {
    private debugName?;
    private s;
    constructor(initial: T, debugName?: string | undefined);
    get: () => T;
    set: (v: T) => void;
    setFromPrev: (fn: (prev: T) => T) => void;
}

export { XYPosition }

export { XYZPosition }

export declare function ZoomPane(_p: ZoomPaneProps): JSX.Element;

declare type ZoomPaneProps = Omit<FlowRendererProps, "deleteKeyCode" | "selectionKeyCode" | "multiSelectionKeyCode" | "noDragClassName" | "disableKeyboardA11y" | "selectionOnDrag"> & {
    isControlledViewport: boolean;
};

export { }