refactor(react/svelte): cleanup types

packages/core/src/components/A11yDescriptions/index.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
 
 const style: CSSProperties = { display: 'none' };
 const ariaLiveStyle: CSSProperties = {

packages/core/src/components/ConnectionLine/index.tsx

@@ -6,16 +6,14 @@ import {
   Position,
   ConnectionLineType,
   ConnectionMode,
-  type ConnectionLineComponent,
   type ConnectionStatus,
   type HandleType,
-  type ReactFlowState,
-  type ReactFlowStore,
 } from '@reactflow/system';
 import { getBezierPath, getSmoothStepPath } from '@reactflow/edge-utils';
 
 import { useStore } from '../../hooks/useStore';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
+import type { ConnectionLineComponent, ReactFlowState, ReactFlowStore } from '../../types';
 
 type ConnectionLineProps = {
   nodeId: string;

packages/core/src/components/EdgeLabelRenderer/index.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 

packages/core/src/components/Edges/BaseEdge.tsx

@@ -1,5 +1,6 @@
 import { isNumeric } from '@reactflow/utils';
-import type { BaseEdgeProps } from '@reactflow/system';
+
+import type { BaseEdgeProps } from '../../types';
 
 import EdgeText from './EdgeText';
 

packages/core/src/components/Edges/BezierEdge.tsx

@@ -1,8 +1,9 @@
 import { memo } from 'react';
-import { Position, type BezierEdgeProps } from '@reactflow/system';
+import { Position } from '@reactflow/system';
 import { getBezierPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { BezierEdgeProps } from '../../types';
 
 const BezierEdge = memo(
   ({

packages/core/src/components/Edges/EdgeText.tsx

@@ -1,7 +1,8 @@
-import { memo, useRef, useState, useEffect } from 'react';
-import type { FC, PropsWithChildren } from 'react';
+import { memo, useRef, useState, useEffect, type FC, type PropsWithChildren } from 'react';
 import cc from 'classcat';
-import { EdgeTextProps, Rect } from '@reactflow/system';
+import type { Rect } from '@reactflow/system';
+
+import type { EdgeTextProps } from '../../types';
 
 const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
   x,

packages/core/src/components/Edges/SimpleBezierEdge.tsx

@@ -1,8 +1,9 @@
 import { memo } from 'react';
-import { Position, type EdgeProps } from '@reactflow/system';
+import { Position } from '@reactflow/system';
 import { getBezierEdgeCenter } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
 
 export interface GetSimpleBezierPathParams {
   sourceX: number;

packages/core/src/components/Edges/SmoothStepEdge.tsx

@@ -1,8 +1,9 @@
 import { memo } from 'react';
-import { Position, type SmoothStepEdgeProps } from '@reactflow/system';
+import { Position } from '@reactflow/system';
 import { getSmoothStepPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { SmoothStepEdgeProps } from '../../types';
 
 const SmoothStepEdge = memo(
   ({

packages/core/src/components/Edges/StepEdge.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
-import type { SmoothStepEdgeProps } from '@reactflow/system';
 
 import SmoothStepEdge from './SmoothStepEdge';
+import type { SmoothStepEdgeProps } from '../../types';
 
 const StepEdge = memo((props: SmoothStepEdgeProps) => (
   <SmoothStepEdge

packages/core/src/components/Edges/StraightEdge.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import type { EdgeProps } from '@reactflow/system';
 import { getStraightPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
 
 const StraightEdge = memo(
   ({

packages/core/src/components/Edges/utils.ts

@@ -1,6 +1,7 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
-import type { Edge, ReactFlowState } from '@reactflow/system';
+
+import type { Edge, ReactFlowState } from '../../types';
 
 export function getMouseHandler(
   id: string,

packages/core/src/components/Edges/wrapEdge.tsx

@@ -1,14 +1,14 @@
-import { memo, useState, useMemo, useRef } from 'react';
-import type { ComponentType, KeyboardEvent } from 'react';
+import { memo, useState, useMemo, useRef, type ComponentType, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { getMarkerId, elementSelectionKeys } from '@reactflow/utils';
-import type { EdgeProps, WrapEdgeProps, Connection } from '@reactflow/system';
+import type { Connection } from '@reactflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
 import { handlePointerDown } from '../Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
 import { getMouseHandler } from './utils';
+import type { EdgeProps, WrapEdgeProps } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({

packages/core/src/components/Handle/handler.ts

@@ -7,7 +7,7 @@ import {
   pointToRendererPoint,
   rendererPointToPoint,
 } from '@reactflow/utils';
-import type { OnConnect, HandleType, ReactFlowState, Connection } from '@reactflow/system';
+import type { OnConnect, HandleType, Connection } from '@reactflow/system';
 
 import {
   ConnectionHandle,
@@ -19,6 +19,7 @@ import {
   resetRecentHandle,
   ValidConnectionFunc,
 } from './utils';
+import type { ReactFlowState } from '../../types';
 
 export function handlePointerDown({
   event,

packages/core/src/components/Handle/index.tsx

@@ -1,13 +1,15 @@
 import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { errorMessages, Position, type HandleProps, type Connection, type ReactFlowState } from '@reactflow/system';
-import { getHostForElement, isMouseEvent, addEdge } from '@reactflow/utils';
+import { errorMessages, Position, type HandleProps, type Connection } from '@reactflow/system';
+import { getHostForElement, isMouseEvent } from '@reactflow/utils';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { handlePointerDown } from './handler';
 import { isValidHandle } from './utils';
+import { addEdge } from '../../utils';
+import type { ReactFlowState } from '../../types';
 
 const alwaysValid = () => true;
 

packages/core/src/components/Handle/utils.ts

@@ -1,8 +1,17 @@
 import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
-import { internalsSymbol, ConnectionMode, ConnectionStatus } from '@reactflow/system';
-import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '@reactflow/system';
+import {
+  internalsSymbol,
+  ConnectionMode,
+  ConnectionStatus,
+  type Connection,
+  type HandleType,
+  type XYPosition,
+  type NodeHandleBounds,
+} from '@reactflow/system';
 import { getEventPosition } from '@reactflow/utils';
 
+import type { Node } from '../../types';
+
 export type ConnectionHandle = {
   id: string | null;
   type: HandleType;

packages/core/src/components/Nodes/utils.ts

@@ -1,7 +1,9 @@
 import { MouseEvent } from 'react';
 import { StoreApi } from 'zustand';
 import { getDimensions } from '@reactflow/utils';
-import { Position, type HandleElement, type Node, type NodeOrigin, type ReactFlowState } from '@reactflow/system';
+import { Position, type HandleElement, type NodeOrigin } from '@reactflow/system';
+
+import type { Node, ReactFlowState } from '../../types';
 
 export const getHandleBounds = (
   selector: string,

packages/core/src/components/Nodes/wrapNode.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useRef, memo } from 'react';
-import type { ComponentType, MouseEvent, KeyboardEvent } from 'react';
+import { useEffect, useRef, memo, type ComponentType, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { elementSelectionKeys, isInputDOMNode } from '@reactflow/utils';
-import type { NodeProps, WrapNodeProps, XYPosition } from '@reactflow/system';
+import type { NodeProps, XYPosition } from '@reactflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { Provider } from '../../contexts/NodeIdContext';
@@ -10,6 +9,7 @@ import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
 import useDrag from '../../hooks/useDrag';
 import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
 import { getMouseHandler, handleNodeClick } from './utils';
+import type { WrapNodeProps } from '../../types';
 
 export const arrowKeyDiffs: Record<string, XYPosition> = {
   ArrowUp: { x: 0, y: -1 },

packages/core/src/components/NodesSelection/index.tsx

@@ -8,12 +8,12 @@ import type { MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import { getRectOfNodes } from '@reactflow/utils';
-import type { Node, ReactFlowState } from '@reactflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import useDrag from '../../hooks/useDrag';
 import { arrowKeyDiffs } from '../Nodes/wrapNode';
 import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
+import type { Node, ReactFlowState } from '../../types';
 
 export interface NodesSelectionProps {
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;

packages/core/src/components/Panel/index.tsx

@@ -1,8 +1,9 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import cc from 'classcat';
-import type { PanelPosition, ReactFlowState } from '@reactflow/system';
+import type { PanelPosition } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   position: PanelPosition;

packages/core/src/components/ReactFlowProvider/index.tsx

@@ -1,10 +1,9 @@
-import { useRef } from 'react';
-import type { FC, PropsWithChildren } from 'react';
+import { useRef, type FC, type PropsWithChildren } from 'react';
 import { StoreApi } from 'zustand';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
+import type { ReactFlowState } from '../../types';
 
 const ReactFlowProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);

packages/core/src/components/SelectionListener/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
-import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '@reactflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
+import type { ReactFlowState, OnSelectionChangeFunc, Node, Edge } from '../../types';
 
 type SelectionListenerProps = {
   onSelectionChange?: OnSelectionChangeFunc;

packages/core/src/components/StoreUpdater/index.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import { StoreApi } from 'zustand';
 import { shallow } from 'zustand/shallow';
-import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '@reactflow/system';
+import type { CoordinateExtent } from '@reactflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
+import type { Node, Edge, ReactFlowState, ReactFlowProps, ReactFlowStore } from '../../types';
 
 type StoreUpdaterProps = Pick<
   ReactFlowProps,

packages/core/src/components/UserSelection/index.tsx

@@ -1,7 +1,7 @@
 import { shallow } from 'zustand/shallow';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => ({
   userSelectionActive: s.userSelectionActive,

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,9 +1,10 @@
 import { memo, useCallback } from 'react';
-import type { EdgeMarker, ReactFlowState } from '@reactflow/system';
+import type { EdgeMarker } from '@reactflow/system';
 import { getMarkerId } from '@reactflow/utils';
 
 import { useStore } from '../../hooks/useStore';
 import { useMarkerSymbol } from './MarkerSymbols';
+import type { ReactFlowState } from '../../types';
 
 type MarkerProps = EdgeMarker & {
   id: string;

packages/core/src/container/EdgeRenderer/index.tsx

@@ -1,14 +1,14 @@
 import { memo, ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { errorMessages, ConnectionMode, Position, type Edge, type ReactFlowState } from '@reactflow/system';
+import { errorMessages, ConnectionMode, Position } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';
-
 import { GraphViewProps } from '../GraphView';
+import type { Edge, ReactFlowState } from '../../types';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,

packages/core/src/container/EdgeRenderer/utils.ts

@@ -2,12 +2,8 @@ import type { ComponentType } from 'react';
 import {
   internalsSymbol,
   Position,
-  type EdgeProps,
-  type EdgeTypes,
-  type EdgeTypesWrapped,
   type HandleElement,
   type NodeHandleBounds,
-  type Node,
   type Rect,
   type Transform,
   type XYPosition,
@@ -16,6 +12,7 @@ import { rectToBox } from '@reactflow/utils';
 
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
+import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, Node } from '../../types';
 
 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 

packages/core/src/container/FlowRenderer/index.tsx

@@ -1,5 +1,4 @@
 import { memo, type ReactNode } from 'react';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
@@ -8,6 +7,7 @@ import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import Pane from '../Pane';
 import NodesSelection from '../../components/NodesSelection';
+import type { ReactFlowState } from '../../types';
 
 export type FlowRendererProps = Omit<
   GraphViewProps,

packages/core/src/container/GraphView/index.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '@reactflow/system';
 
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
@@ -7,6 +6,7 @@ import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
 import ConnectionLine from '../../components/ConnectionLine';
+import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
 
 export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
   Required<

packages/core/src/container/NodeRenderer/index.tsx

@@ -1,7 +1,6 @@
-import { memo, useMemo, useEffect, useRef } from 'react';
-import type { ComponentType } from 'react';
+import { memo, useMemo, useEffect, useRef, type ComponentType } from 'react';
 import { shallow } from 'zustand/shallow';
-import { internalsSymbol, errorMessages, Position, type ReactFlowState, type WrapNodeProps } from '@reactflow/system';
+import { internalsSymbol, errorMessages, Position } from '@reactflow/system';
 import { clampPosition } from '@reactflow/utils';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
@@ -9,6 +8,7 @@ import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
 import { getPositionWithOrigin } from './utils';
+import type { ReactFlowState, WrapNodeProps } from '../../types';
 
 type NodeRendererProps = Pick<
   GraphViewProps,

packages/core/src/container/NodeRenderer/utils.ts

@@ -1,11 +1,12 @@
 import type { ComponentType } from 'react';
-import type { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '@reactflow/system';
+import type { NodeProps, NodeOrigin, XYPosition } from '@reactflow/system';
 
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
+import type { NodeTypes, NodeTypesWrapped } from '../../types';
 
 export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
 

packages/core/src/container/Pane/index.tsx

@@ -2,22 +2,17 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 
-import { memo, useRef, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { memo, useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { getConnectedEdges, getNodesInside, getEventPosition } from '@reactflow/utils';
-import {
-  SelectionMode,
-  type ReactFlowProps,
-  type ReactFlowState,
-  type NodeChange,
-  type EdgeChange,
-} from '@reactflow/system';
+import { getNodesInside, getEventPosition } from '@reactflow/utils';
+import { SelectionMode } from '@reactflow/system';
 
 import UserSelection from '../../components/UserSelection';
 import { containerStyle } from '../../styles';
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { getSelectionChanges } from '../../utils/changes';
+import { getSelectionChanges, getConnectedEdges } from '../../utils';
+import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange, Node } from '../../types';
 
 type PaneProps = {
   isSelecting: boolean;
@@ -135,7 +130,7 @@ const Pane = memo(
     };
 
     const onMouseMove = (event: ReactMouseEvent): void => {
-      const { userSelectionRect, nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } =
+      const { userSelectionRect, edges, transform, onNodesChange, onEdgesChange, nodeOrigin, getNodes } =
         store.getState();
       if (!isSelecting || !containerBounds.current || !userSelectionRect) {
         return;
@@ -156,8 +151,8 @@ const Pane = memo(
       };
 
       const nodes = getNodes();
-      const selectedNodes = getNodesInside(
-        nodeInternals,
+      const selectedNodes = getNodesInside<Node>(
+        nodes,
         nextUserSelectRect,
         transform,
         selectionMode === SelectionMode.Partial,

packages/core/src/container/ReactFlow/index.tsx

@@ -1,20 +1,14 @@
-import { forwardRef } from 'react';
-import type { CSSProperties } from 'react';
+import { forwardRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import {
   ConnectionLineType,
   ConnectionMode,
   PanOnScrollMode,
   SelectionMode,
-  type EdgeTypes,
-  type EdgeTypesWrapped,
   type NodeOrigin,
-  type NodeTypes,
-  type NodeTypesWrapped,
-  type ReactFlowProps,
-  type ReactFlowRefType,
   type Viewport,
 } from '@reactflow/system';
+import { infiniteExtent } from '@reactflow/utils';
 
 import Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -29,8 +23,15 @@ import { createEdgeTypes } from '../EdgeRenderer/utils';
 import { createNodeTypes } from '../NodeRenderer/utils';
 import GraphView from '../GraphView';
 import Wrapper from './Wrapper';
-import { infiniteExtent } from '../../store/initialState';
 import { useNodeOrEdgeTypes } from './utils';
+import type {
+  EdgeTypes,
+  EdgeTypesWrapped,
+  NodeTypes,
+  NodeTypesWrapped,
+  ReactFlowProps,
+  ReactFlowRefType,
+} from '../../types';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,

packages/core/src/container/ReactFlow/utils.ts

@@ -1,16 +1,11 @@
 import { useMemo, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import {
-  errorMessages,
-  type EdgeTypes,
-  type EdgeTypesWrapped,
-  type NodeTypes,
-  type NodeTypesWrapped,
-} from '@reactflow/system';
+import { errorMessages } from '@reactflow/system';
 import { devWarn } from '@reactflow/utils';
 
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
+import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;

packages/core/src/container/Viewport/index.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 

packages/core/src/container/ZoomPane/index.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef } from 'react';
-import { zoom, zoomIdentity } from 'd3-zoom';
-import type { D3ZoomEvent } from 'd3-zoom';
+import { zoom, zoomIdentity, type D3ZoomEvent } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import { shallow } from 'zustand/shallow';
 import { clamp } from '@reactflow/utils';
-import { type Viewport, type ReactFlowState, CoordinateExtent, PanOnScrollMode } from '@reactflow/system';
+import { CoordinateExtent, PanOnScrollMode, type Viewport } from '@reactflow/system';
 
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { containerStyle } from '../../styles';
 import type { FlowRendererProps } from '../FlowRenderer';
+import type { ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,

packages/core/src/hooks/useDrag/index.ts

@@ -1,14 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
-import type { RefObject, MouseEvent } from 'react';
+import { useEffect, useRef, useState, type RefObject, type MouseEvent } from 'react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
 import { calcAutoPan, getEventPosition } from '@reactflow/utils';
-import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '@reactflow/system';
+import type { NodeDragItem, UseDragEvent, XYPosition } from '@reactflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
 import useGetPointerPosition from '../useGetPointerPosition';
+import type { Node, SelectionDragHandler } from '../../types';
 
 export type UseDragData = { dx: number; dy: number };
 

packages/core/src/hooks/useDrag/utils.ts

@@ -2,15 +2,15 @@ import type { RefObject } from 'react';
 import {
   errorMessages,
   type CoordinateExtent,
-  type Node,
   type NodeDragItem,
-  type NodeInternals,
   type NodeOrigin,
   type OnError,
   type XYPosition,
 } from '@reactflow/system';
 import { clampPosition, isNumeric, getNodePositionWithOrigin } from '@reactflow/utils';
 
+import type { Node, NodeInternals } from '../../types';
+
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {
     return false;

packages/core/src/hooks/useEdges.ts

@@ -1,6 +1,5 @@
-import type { Edge, ReactFlowState } from '@reactflow/system';
-
 import { useStore } from '../hooks/useStore';
+import type { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;
 

packages/core/src/hooks/useNodes.ts

@@ -1,5 +1,6 @@
 import { useStore } from '../hooks/useStore';
-import type { Node, ReactFlowState } from '@reactflow/system';
+
+import type { Node, ReactFlowState } from '../types';
 
 const nodesSelector = (state: ReactFlowState) => state.getNodes();
 

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useCallback, type SetStateAction, type Dispatch } from 'react';
-import type { Node, NodeChange, Edge, EdgeChange } from '@reactflow/system';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
+import type { Node, NodeChange, Edge, EdgeChange } from '../types';
 
 type ApplyChanges<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
 type OnChange<ChangesType> = (changes: ChangesType[]) => void;

packages/core/src/hooks/useNodesInitialized.ts

@@ -1,6 +1,7 @@
-import { internalsSymbol, type ReactFlowState } from '@reactflow/system';
+import { internalsSymbol } from '@reactflow/system';
 
 import { useStore } from './useStore';
+import type { ReactFlowState } from '../types';
 
 const selector = (s: ReactFlowState) => {
   if (s.nodeInternals.size === 0) {

packages/core/src/hooks/useOnInitHandler.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-import type { OnInit } from '@reactflow/system';
 
 import useReactFlow from './useReactFlow';
+import type { OnInit } from '../types';
 
 function useOnInitHandler(onInit: OnInit | undefined) {
   const rfInstance = useReactFlow();

packages/core/src/hooks/useOnSelectionChange.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import type { OnSelectionChangeFunc } from '@reactflow/system';
 
 import { useStoreApi } from './useStore';
+import type { OnSelectionChangeFunc } from '../types';
 
 export type UseOnSelectionChangeOptions = {
   onChange?: OnSelectionChangeFunc;

packages/core/src/hooks/useReactFlow.ts

@@ -1,5 +1,10 @@
 import { useCallback, useMemo } from 'react';
-import { getConnectedEdges, getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils';
+import { getOverlappingArea, isRectObject, nodeToRect } from '@reactflow/utils';
+import type { Rect } from '@reactflow/system';
+
+import useViewportHelper from './useViewportHelper';
+import { useStoreApi } from '../hooks/useStore';
+import { getConnectedEdges } from '../utils';
 import type {
   ReactFlowInstance,
   Instance,
@@ -11,11 +16,7 @@ import type {
   EdgeRemoveChange,
   NodeChange,
   Node,
-  Rect,
-} from '@reactflow/system';
-
-import useViewportHelper from './useViewportHelper';
-import { useStoreApi } from '../hooks/useStore';
+} from '../types';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {

packages/core/src/hooks/useStore.ts

@@ -1,8 +1,9 @@
 import { useContext, useMemo } from 'react';
 import { useStore as useZustandStore, type StoreApi } from 'zustand';
-import { errorMessages, type ReactFlowState } from '@reactflow/system';
+import { errorMessages } from '@reactflow/system';
 
 import StoreContext from '../contexts/RFStoreContext';
+import type { ReactFlowState } from '../types';
 
 const zustandErrorMessage = errorMessages['001']();
 

packages/core/src/hooks/useViewport.ts

@@ -1,7 +1,8 @@
 import { shallow } from 'zustand/shallow';
-import type { Viewport, ReactFlowState } from '@reactflow/system';
+import type { Viewport } from '@reactflow/system';
 
 import { useStore } from '../hooks/useStore';
+import type { ReactFlowState } from '../types';
 
 const viewportSelector = (state: ReactFlowState) => ({
   x: state.transform[0],

packages/core/src/hooks/useViewportHelper.ts

@@ -2,9 +2,10 @@ import { useMemo } from 'react';
 import { zoomIdentity } from 'd3-zoom';
 import { shallow } from 'zustand/shallow';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition, fitView } from '@reactflow/utils';
-import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '@reactflow/system';
+import type { XYPosition } from '@reactflow/system';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
+import type { ViewportHelperFunctions, ReactFlowState } from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};

packages/core/src/hooks/useVisibleEdges.ts

@@ -1,9 +1,10 @@
 import { useCallback } from 'react';
-import { internalsSymbol, type ReactFlowState, type NodeInternals, type Edge } from '@reactflow/system';
+import { internalsSymbol } from '@reactflow/system';
 import { isNumeric } from '@reactflow/utils';
 
 import { useStore } from '../hooks/useStore';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
+import { type ReactFlowState, type NodeInternals, type Edge } from '../types';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 

packages/core/src/hooks/useVisibleNodes.ts

@@ -1,15 +1,15 @@
 import { useCallback } from 'react';
 import { getNodesInside } from '@reactflow/utils';
-import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../hooks/useStore';
+import type { Node, ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(
     useCallback(
       (s: ReactFlowState) =>
         onlyRenderVisible
-          ? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
+          ? getNodesInside<Node>(s.getNodes(), { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
           : s.getNodes(),
       [onlyRenderVisible]
     )

packages/core/src/index.ts

@@ -8,22 +8,6 @@ export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/E
 export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 
-export {
-  isNode,
-  isEdge,
-  addEdge,
-  getOutgoers,
-  getIncomers,
-  getConnectedEdges,
-  updateEdge,
-  getTransformForBounds,
-  getRectOfNodes,
-  getNodePositionWithOrigin,
-  rectToBox,
-  boxToRect,
-  getBoundsOfRects,
-} from '@reactflow/utils';
-export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel } from './components/Panel';
 export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
@@ -41,7 +25,18 @@ export { default as useOnSelectionChange } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized } from './hooks/useNodesInitialized';
 export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
 export { useNodeId } from './contexts/NodeIdContext';
-export * from '@reactflow/system';
 export * from '@reactflow/edge-utils';
+export * from '@reactflow/system';
+export {
+  getTransformForBounds,
+  getRectOfNodes,
+  getNodePositionWithOrigin,
+  rectToBox,
+  boxToRect,
+  getBoundsOfRects,
+} from '@reactflow/utils';
 
-// export * from './types';
+export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
+export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general';
+
+export * from './types';

packages/core/src/store/index.ts

@@ -3,18 +3,9 @@ import { zoomIdentity } from 'd3-zoom';
 import { clampPosition, getDimensions, fitView } from '@reactflow/utils';
 import {
   internalsSymbol,
-  type ReactFlowState,
-  type Node,
-  type Edge,
   type NodeDimensionUpdate,
   type CoordinateExtent,
-  type NodeDimensionChange,
-  type EdgeSelectionChange,
-  type NodeSelectionChange,
-  type NodePositionChange,
   type NodeDragItem,
-  type UnselectNodesAndEdgesParams,
-  type NodeChange,
   type XYPosition,
 } from '@reactflow/system';
 
@@ -22,6 +13,17 @@ import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '..
 import { getHandleBounds } from '../components/Nodes/utils';
 import { createNodeInternals, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils';
 import initialState from './initialState';
+import type {
+  ReactFlowState,
+  Node,
+  Edge,
+  NodeDimensionChange,
+  EdgeSelectionChange,
+  NodeSelectionChange,
+  NodePositionChange,
+  UnselectNodesAndEdgesParams,
+  NodeChange,
+} from '../types';
 
 const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({

packages/core/src/store/initialState.ts

@@ -1,10 +1,7 @@
-import { devWarn } from '@reactflow/utils';
-import { ConnectionMode, type CoordinateExtent, type ReactFlowStore } from '@reactflow/system';
+import { devWarn, infiniteExtent } from '@reactflow/utils';
+import { ConnectionMode } from '@reactflow/system';
 
-export const infiniteExtent: CoordinateExtent = [
-  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-];
+import type { ReactFlowStore } from '../types';
 
 const initialState: ReactFlowStore = {
   rfId: '1',

packages/core/src/store/utils.ts

@@ -1,17 +1,9 @@
 import type { StoreApi } from 'zustand';
-import {
-  internalsSymbol,
-  type Edge,
-  type EdgeSelectionChange,
-  type Node,
-  type NodeInternals,
-  type NodeSelectionChange,
-  type ReactFlowState,
-  type XYZPosition,
-  type NodeOrigin,
-} from '@reactflow/system';
+import { internalsSymbol, type XYZPosition, type NodeOrigin } from '@reactflow/system';
 import { isNumeric, getNodePositionWithOrigin } from '@reactflow/utils';
 
+import type { Edge, EdgeSelectionChange, Node, NodeInternals, NodeSelectionChange, ReactFlowState } from '../types';
+
 type ParentNodes = Record<string, boolean>;
 
 function calculateXYZPosition(

packages/core/src/types/changes.ts

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { XYPosition, Dimensions } from '@reactflow/system';
+
+import type { Node, Edge } from '.';
+
+export type NodeDimensionChange = {
+  id: string;
+  type: 'dimensions';
+  dimensions?: Dimensions;
+  updateStyle?: boolean;
+  resizing?: boolean;
+};
+
+export type NodePositionChange = {
+  id: string;
+  type: 'position';
+  position?: XYPosition;
+  positionAbsolute?: XYPosition;
+  dragging?: boolean;
+};
+
+export type NodeSelectionChange = {
+  id: string;
+  type: 'select';
+  selected: boolean;
+};
+
+export type NodeRemoveChange = {
+  id: string;
+  type: 'remove';
+};
+
+export type NodeAddChange<NodeData = any> = {
+  item: Node<NodeData>;
+  type: 'add';
+};
+
+export type NodeResetChange<NodeData = any> = {
+  item: Node<NodeData>;
+  type: 'reset';
+};
+
+export type NodeChange =
+  | NodeDimensionChange
+  | NodePositionChange
+  | NodeSelectionChange
+  | NodeRemoveChange
+  | NodeAddChange
+  | NodeResetChange;
+
+export type EdgeSelectionChange = NodeSelectionChange;
+export type EdgeRemoveChange = NodeRemoveChange;
+export type EdgeAddChange<EdgeData = any> = {
+  item: Edge<EdgeData>;
+  type: 'add';
+};
+export type EdgeResetChange<EdgeData = any> = {
+  item: Edge<EdgeData>;
+  type: 'reset';
+};
+export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange;

packages/core/src/types/component-props.ts

@@ -0,0 +1,151 @@
+import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
+import type {
+  ConnectionMode,
+  ConnectionLineType,
+  OnConnect,
+  CoordinateExtent,
+  KeyCode,
+  PanOnScrollMode,
+  ProOptions,
+  PanelPosition,
+  OnMove,
+  OnMoveStart,
+  OnMoveEnd,
+  Viewport,
+  NodeOrigin,
+  HandleType,
+  SelectionMode,
+  OnError,
+} from '@reactflow/system';
+
+import type {
+  OnSelectionChangeFunc,
+  NodeTypes,
+  EdgeTypes,
+  Node,
+  Edge,
+  ConnectionLineComponent,
+  OnConnectStart,
+  OnConnectEnd,
+  OnEdgeUpdateFunc,
+  OnInit,
+  DefaultEdgeOptions,
+  FitViewOptions,
+  OnNodesDelete,
+  OnEdgesDelete,
+  OnNodesChange,
+  OnEdgesChange,
+  NodeDragHandler,
+  NodeMouseHandler,
+  SelectionDragHandler,
+  EdgeMouseHandler,
+} from '.';
+
+export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
+  nodes?: Node[];
+  edges?: Edge[];
+  defaultNodes?: Node[];
+  defaultEdges?: Edge[];
+  defaultEdgeOptions?: DefaultEdgeOptions;
+  onNodeClick?: NodeMouseHandler;
+  onNodeDoubleClick?: NodeMouseHandler;
+  onNodeMouseEnter?: NodeMouseHandler;
+  onNodeMouseMove?: NodeMouseHandler;
+  onNodeMouseLeave?: NodeMouseHandler;
+  onNodeContextMenu?: NodeMouseHandler;
+  onNodeDragStart?: NodeDragHandler;
+  onNodeDrag?: NodeDragHandler;
+  onNodeDragStop?: NodeDragHandler;
+  onEdgeClick?: (event: ReactMouseEvent, node: Edge) => void;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
+  onEdgeContextMenu?: EdgeMouseHandler;
+  onEdgeMouseEnter?: EdgeMouseHandler;
+  onEdgeMouseMove?: EdgeMouseHandler;
+  onEdgeMouseLeave?: EdgeMouseHandler;
+  onEdgeDoubleClick?: EdgeMouseHandler;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
+  onNodesChange?: OnNodesChange;
+  onEdgesChange?: OnEdgesChange;
+  onNodesDelete?: OnNodesDelete;
+  onEdgesDelete?: OnEdgesDelete;
+  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler;
+  onSelectionStart?: (event: ReactMouseEvent) => void;
+  onSelectionEnd?: (event: ReactMouseEvent) => void;
+  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: Node[]) => void;
+  onConnect?: OnConnect;
+  onConnectStart?: OnConnectStart;
+  onConnectEnd?: OnConnectEnd;
+  onClickConnectStart?: OnConnectStart;
+  onClickConnectEnd?: OnConnectEnd;
+  onInit?: OnInit;
+  onMove?: OnMove;
+  onMoveStart?: OnMoveStart;
+  onMoveEnd?: OnMoveEnd;
+  onSelectionChange?: OnSelectionChangeFunc;
+  onPaneScroll?: (event?: WheelEvent) => void;
+  onPaneClick?: (event: ReactMouseEvent) => void;
+  onPaneContextMenu?: (event: ReactMouseEvent) => void;
+  onPaneMouseEnter?: (event: ReactMouseEvent) => void;
+  onPaneMouseMove?: (event: ReactMouseEvent) => void;
+  onPaneMouseLeave?: (event: ReactMouseEvent) => void;
+  nodeTypes?: NodeTypes;
+  edgeTypes?: EdgeTypes;
+  connectionLineType?: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
+  connectionLineComponent?: ConnectionLineComponent;
+  connectionLineContainerStyle?: CSSProperties;
+  connectionMode?: ConnectionMode;
+  deleteKeyCode?: KeyCode | null;
+  selectionKeyCode?: KeyCode | null;
+  selectionOnDrag?: boolean;
+  selectionMode?: SelectionMode;
+  panActivationKeyCode?: KeyCode | null;
+  multiSelectionKeyCode?: KeyCode | null;
+  zoomActivationKeyCode?: KeyCode | null;
+  snapToGrid?: boolean;
+  snapGrid?: [number, number];
+  onlyRenderVisibleElements?: boolean;
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  nodesFocusable?: boolean;
+  nodeOrigin?: NodeOrigin;
+  edgesFocusable?: boolean;
+  initNodeOrigin?: NodeOrigin;
+  elementsSelectable?: boolean;
+  selectNodesOnDrag?: boolean;
+  panOnDrag?: boolean | number[];
+  minZoom?: number;
+  maxZoom?: number;
+  defaultViewport?: Viewport;
+  translateExtent?: CoordinateExtent;
+  preventScrolling?: boolean;
+  nodeExtent?: CoordinateExtent;
+  defaultMarkerColor?: string;
+  zoomOnScroll?: boolean;
+  zoomOnPinch?: boolean;
+  panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
+  panOnScrollMode?: PanOnScrollMode;
+  zoomOnDoubleClick?: boolean;
+  edgeUpdaterRadius?: number;
+  noDragClassName?: string;
+  noWheelClassName?: string;
+  noPanClassName?: string;
+  fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
+  connectOnClick?: boolean;
+  attributionPosition?: PanelPosition;
+  proOptions?: ProOptions;
+  elevateNodesOnSelect?: boolean;
+  elevateEdgesOnSelect?: boolean;
+  disableKeyboardA11y?: boolean;
+  autoPanOnNodeDrag?: boolean;
+  autoPanOnConnect?: boolean;
+  connectionRadius?: number;
+  onError?: OnError;
+};
+
+export type ReactFlowRefType = HTMLDivElement;

packages/core/src/types/edges.ts

@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { CSSProperties, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
+import type {
+  BaseEdge,
+  BezierPathOptions,
+  Position,
+  SmoothStepPathOptions,
+  DefaultEdgeOptionsBase,
+  HandleType,
+  Connection,
+  ConnectionLineType,
+  HandleElement,
+  ConnectionStatus,
+} from '@reactflow/system';
+
+import { Node } from '.';
+
+export type EdgeLabelOptions = {
+  label?: string | ReactNode;
+  labelStyle?: CSSProperties;
+  labelShowBg?: boolean;
+  labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
+};
+
+export type DefaultEdge<EdgeData = any> = BaseEdge<EdgeData> & {
+  style?: CSSProperties;
+  className?: string;
+  sourceNode?: Node;
+  targetNode?: Node;
+} & EdgeLabelOptions;
+
+type SmoothStepEdgeType<T> = DefaultEdge<T> & {
+  type: 'smoothstep';
+  pathOptions?: SmoothStepPathOptions;
+};
+
+type BezierEdgeType<T> = DefaultEdge<T> & {
+  type: 'default';
+  pathOptions?: BezierPathOptions;
+};
+
+export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
+
+export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
+
+export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
+  onClick?: EdgeMouseHandler;
+  onEdgeDoubleClick?: EdgeMouseHandler;
+  sourceHandleId?: string | null;
+  targetHandleId?: string | null;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  sourcePosition: Position;
+  targetPosition: Position;
+  elementsSelectable?: boolean;
+  onEdgeUpdate?: OnEdgeUpdateFunc;
+  onContextMenu?: EdgeMouseHandler;
+  onMouseEnter?: EdgeMouseHandler;
+  onMouseMove?: EdgeMouseHandler;
+  onMouseLeave?: EdgeMouseHandler;
+  edgeUpdaterRadius?: number;
+  onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
+  onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
+  rfId?: string;
+  isFocusable: boolean;
+  pathOptions?: BezierPathOptions | SmoothStepPathOptions;
+};
+
+export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
+
+export type EdgeTextProps = HTMLAttributes<SVGElement> &
+  EdgeLabelOptions & {
+    x: number;
+    y: number;
+  };
+
+// props that get passed to a custom edge
+export type EdgeProps<T = any> = Pick<
+  Edge<T>,
+  'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
+> &
+  Pick<
+    WrapEdgeProps,
+    | 'sourceX'
+    | 'sourceY'
+    | 'targetX'
+    | 'targetY'
+    | 'sourcePosition'
+    | 'targetPosition'
+    | 'sourceHandleId'
+    | 'targetHandleId'
+    | 'interactionWidth'
+  > &
+  EdgeLabelOptions & {
+    markerStart?: string;
+    markerEnd?: string;
+    // @TODO: how can we get better types for pathOptions?
+    pathOptions?: any;
+  };
+
+export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
+  EdgeLabelOptions & {
+    labelX?: number;
+    labelY?: number;
+    path: string;
+  };
+
+export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
+  pathOptions?: SmoothStepPathOptions;
+};
+
+export type BezierEdgeProps<T = any> = EdgeProps<T> & {
+  pathOptions?: BezierPathOptions;
+};
+
+export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
+
+export type ConnectionLineComponentProps = {
+  connectionLineStyle?: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  fromNode?: Node;
+  fromHandle?: HandleElement;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+  fromPosition: Position;
+  toPosition: Position;
+  connectionStatus: ConnectionStatus | null;
+};
+
+export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;

packages/core/src/types/general.ts

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+  ComponentType,
+  MemoExoticComponent,
+} from 'react';
+import {
+  FitViewParamsBase,
+  FitViewOptionsBase,
+  NodeProps,
+  OnConnectStartParams,
+  ZoomInOut,
+  ZoomTo,
+  SetViewport,
+  GetZoom,
+  GetViewport,
+  SetCenter,
+  FitBounds,
+  Project,
+} from '@reactflow/system';
+
+import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.';
+
+export type OnNodesChange = (changes: NodeChange[]) => void;
+export type OnEdgesChange = (changes: EdgeChange[]) => void;
+
+export type OnNodesDelete = (nodes: Node[]) => void;
+export type OnEdgesDelete = (edges: Edge[]) => void;
+
+export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
+export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
+export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
+export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
+
+export type UnselectNodesAndEdgesParams = {
+  nodes?: Node[];
+  edges?: Edge[];
+};
+
+export type OnSelectionChangeParams = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
+
+export type OnConnectStart = (event: ReactMouseEvent | ReactTouchEvent, params: OnConnectStartParams) => void;
+export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
+
+export type FitViewParams = FitViewParamsBase<Node>;
+export type FitViewOptions = FitViewOptionsBase<Node>;
+export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
+export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
+
+export type ViewportHelperFunctions = {
+  zoomIn: ZoomInOut;
+  zoomOut: ZoomInOut;
+  zoomTo: ZoomTo;
+  getZoom: GetZoom;
+  setViewport: SetViewport;
+  getViewport: GetViewport;
+  fitView: FitView;
+  setCenter: SetCenter;
+  fitBounds: FitBounds;
+  project: Project;
+  viewportInitialized: boolean;
+};

packages/core/src/types/index.ts

@@ -0,0 +1,7 @@
+export * from './nodes';
+export * from './edges';
+export * from './changes';
+export * from './component-props';
+export * from './general';
+export * from './store';
+export * from './instance';

packages/core/src/types/instance.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-namespace */
+import type { Rect, Viewport } from '@reactflow/system';
+import type { Node, Edge, ViewportHelperFunctions } from '.';
+
+export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
+  nodes: Node<NodeData>[];
+  edges: Edge<EdgeData>[];
+  viewport: Viewport;
+};
+
+export type DeleteElementsOptions = {
+  nodes?: (Partial<Node> & { id: Node['id'] })[];
+  edges?: (Partial<Edge> & { id: Edge['id'] })[];
+};
+
+export namespace Instance {
+  export type GetNodes<NodeData> = () => Node<NodeData>[];
+  export type SetNodes<NodeData> = (
+    payload: Node<NodeData>[] | ((nodes: Node<NodeData>[]) => Node<NodeData>[])
+  ) => void;
+  export type AddNodes<NodeData> = (payload: Node<NodeData>[] | Node<NodeData>) => void;
+  export type GetNode<NodeData> = (id: string) => Node<NodeData> | undefined;
+  export type GetEdges<EdgeData> = () => Edge<EdgeData>[];
+  export type SetEdges<EdgeData> = (
+    payload: Edge<EdgeData>[] | ((edges: Edge<EdgeData>[]) => Edge<EdgeData>[])
+  ) => void;
+  export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
+  export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
+  export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
+  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
+  export type GetIntersectingNodes<NodeData> = (
+    node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
+    partially?: boolean,
+    nodes?: Node<NodeData>[]
+  ) => Node<NodeData>[];
+  export type IsNodeIntersecting<NodeData> = (
+    node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
+    area: Rect,
+    partially?: boolean
+  ) => boolean;
+}
+
+export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
+  getNodes: Instance.GetNodes<NodeData>;
+  setNodes: Instance.SetNodes<NodeData>;
+  addNodes: Instance.AddNodes<NodeData>;
+  getNode: Instance.GetNode<NodeData>;
+  getEdges: Instance.GetEdges<EdgeData>;
+  setEdges: Instance.SetEdges<EdgeData>;
+  addEdges: Instance.AddEdges<EdgeData>;
+  getEdge: Instance.GetEdge<EdgeData>;
+  toObject: Instance.ToObject<NodeData, EdgeData>;
+  deleteElements: Instance.DeleteElements;
+  getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
+  isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
+  viewportInitialized: boolean;
+} & Omit<ViewportHelperFunctions, 'initialized'>;

packages/core/src/types/nodes.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import type { BaseNode } from '@reactflow/system';
+
+export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = BaseNode<
+  NodeData,
+  NodeType
+> & {
+  style?: CSSProperties;
+  className?: string;
+  resizing?: boolean;
+};
+
+export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
+export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
+export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
+
+export type WrapNodeProps<NodeData = any> = Pick<
+  Node<NodeData>,
+  'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
+> &
+  Required<Pick<Node<NodeData>, 'selected' | 'type' | 'zIndex'>> & {
+    isConnectable: boolean;
+    xPos: number;
+    yPos: number;
+    xPosOrigin: number;
+    yPosOrigin: number;
+    initialized: boolean;
+    isSelectable: boolean;
+    isDraggable: boolean;
+    isFocusable: boolean;
+    selectNodesOnDrag: boolean;
+    onClick?: NodeMouseHandler;
+    onDoubleClick?: NodeMouseHandler;
+    onMouseEnter?: NodeMouseHandler;
+    onMouseMove?: NodeMouseHandler;
+    onMouseLeave?: NodeMouseHandler;
+    onContextMenu?: NodeMouseHandler;
+    resizeObserver: ResizeObserver | null;
+    isParent: boolean;
+    noDragClassName: string;
+    noPanClassName: string;
+    rfId: string;
+    disableKeyboardA11y: boolean;
+  };
+
+export type NodeInternals = Map<string, Node>;

packages/core/src/types/store.ts

@@ -0,0 +1,149 @@
+import {
+  ConnectionMode,
+  ConnectionStatus,
+  CoordinateExtent,
+  D3SelectionInstance,
+  D3ZoomInstance,
+  HandleType,
+  NodeDimensionUpdate,
+  NodeDragItem,
+  NodeOrigin,
+  OnConnect,
+  OnError,
+  OnViewportChange,
+  SelectionRect,
+  SnapGrid,
+  StartHandle,
+  Transform,
+  XYPosition,
+} from '@reactflow/system';
+
+import type {
+  NodeDragHandler,
+  Edge,
+  Node,
+  NodeChange,
+  OnNodesChange,
+  OnEdgesChange,
+  NodeInternals,
+  OnConnectStart,
+  OnConnectEnd,
+  SelectionDragHandler,
+  DefaultEdgeOptions,
+  FitViewOptions,
+  OnNodesDelete,
+  OnEdgesDelete,
+  OnSelectionChangeFunc,
+  UnselectNodesAndEdgesParams,
+} from '.';
+
+export type ReactFlowStore = {
+  rfId: string;
+  width: number;
+  height: number;
+  transform: Transform;
+  nodeInternals: NodeInternals;
+  edges: Edge[];
+  onNodesChange: OnNodesChange | null;
+  onEdgesChange: OnEdgesChange | null;
+  hasDefaultNodes: boolean;
+  hasDefaultEdges: boolean;
+  domNode: HTMLDivElement | null;
+  paneDragging: boolean;
+  noPanClassName: string;
+
+  d3Zoom: D3ZoomInstance | null;
+  d3Selection: D3SelectionInstance | null;
+  d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined;
+  minZoom: number;
+  maxZoom: number;
+  translateExtent: CoordinateExtent;
+  nodeExtent: CoordinateExtent;
+  nodeOrigin: NodeOrigin;
+
+  nodesSelectionActive: boolean;
+  userSelectionActive: boolean;
+  userSelectionRect: SelectionRect | null;
+
+  connectionNodeId: string | null;
+  connectionHandleId: string | null;
+  connectionHandleType: HandleType | null;
+  connectionPosition: XYPosition;
+  connectionStatus: ConnectionStatus | null;
+  connectionMode: ConnectionMode;
+
+  snapToGrid: boolean;
+  snapGrid: SnapGrid;
+
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  nodesFocusable: boolean;
+  edgesFocusable: boolean;
+  elementsSelectable: boolean;
+  elevateNodesOnSelect: boolean;
+
+  multiSelectionActive: boolean;
+
+  connectionStartHandle: StartHandle | null;
+
+  onNodeDragStart?: NodeDragHandler;
+  onNodeDrag?: NodeDragHandler;
+  onNodeDragStop?: NodeDragHandler;
+
+  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler;
+
+  onConnect?: OnConnect;
+  onConnectStart?: OnConnectStart;
+  onConnectEnd?: OnConnectEnd;
+
+  onClickConnectStart?: OnConnectStart;
+  onClickConnectEnd?: OnConnectEnd;
+
+  connectOnClick: boolean;
+  defaultEdgeOptions?: DefaultEdgeOptions;
+
+  fitViewOnInit: boolean;
+  fitViewOnInitDone: boolean;
+  fitViewOnInitOptions: FitViewOptions | undefined;
+
+  onNodesDelete?: OnNodesDelete;
+  onEdgesDelete?: OnEdgesDelete;
+  onError?: OnError;
+
+  // event handlers
+  onViewportChangeStart?: OnViewportChange;
+  onViewportChange?: OnViewportChange;
+  onViewportChangeEnd?: OnViewportChange;
+
+  onSelectionChange?: OnSelectionChangeFunc;
+
+  ariaLiveMessage: string;
+  autoPanOnConnect: boolean;
+  autoPanOnNodeDrag: boolean;
+  connectionRadius: number;
+};
+
+export type ReactFlowActions = {
+  setNodes: (nodes: Node[]) => void;
+  getNodes: () => Node[];
+  setEdges: (edges: Edge[]) => void;
+  setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
+  updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
+  updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged: boolean, dragging: boolean) => void;
+  resetSelectedElements: () => void;
+  unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => 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;
+  reset: () => void;
+  triggerNodeChanges: (changes: NodeChange[]) => void;
+  panBy: (delta: XYPosition) => void;
+};
+
+export type ReactFlowState = ReactFlowStore & ReactFlowActions;

packages/core/src/utils/changes.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { Node, Edge, EdgeChange, NodeChange } from '@reactflow/system';
+import type { Node, Edge, EdgeChange, NodeChange } from '../types';
 
 function handleParentExpand(res: any[], updateItem: any) {
   const parent = res.find((e) => e.id === updateItem.parentNode);

packages/core/src/utils/general.ts

@@ -0,0 +1,18 @@
+import {
+  isNodeBase,
+  isEdgeBase,
+  addEdgeBase,
+  getOutgoersBase,
+  getIncomersBase,
+  updateEdgeBase,
+  getConnectedEdgesBase,
+} from '@reactflow/utils';
+import type { Edge, Node } from '../types';
+
+export const isNode = isNodeBase<Node, Edge>;
+export const isEdge = isEdgeBase<Node, Edge>;
+export const getOutgoers = getOutgoersBase<Node, Edge>;
+export const getIncomers = getIncomersBase<Node, Edge>;
+export const addEdge = addEdgeBase<Edge>;
+export const updateEdge = updateEdgeBase<Edge>;
+export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;

packages/core/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './changes';
+export * from './general';