feat(packages): add @reactflow/system and @reactflow/utils

packages/core/package.json

@@ -38,7 +38,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@reactflow/system": "workspace:11.5.5",
+    "@reactflow/system": "workspace:*",
+    "@reactflow/utils": "workspace:*",
     "@types/d3": "^7.4.0",
     "@types/d3-drag": "^3.0.1",
     "@types/d3-selection": "^3.0.3",

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

@@ -1,6 +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/Attribution/index.tsx

@@ -1,5 +1,6 @@
+import type { PanelPosition, ProOptions } from '@reactflow/system';
+
 import Panel from '../Panel';
-import type { PanelPosition, ProOptions } from '../../types';
 
 type AttributionProps = {
   proOptions?: ProOptions;

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

@@ -1,20 +1,22 @@
 import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { internalsSymbol } from '@reactflow/system';
+import {
+  internalsSymbol,
+  Position,
+  ConnectionLineType,
+  ConnectionMode,
+  type ConnectionLineComponent,
+  type ConnectionStatus,
+  type HandleType,
+  type ReactFlowState,
+  type ReactFlowStore,
+} from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
-import type {
-  ConnectionLineComponent,
-  ConnectionStatus,
-  HandleType,
-  ReactFlowState,
-  ReactFlowStore,
-} from '../../types';
-import { Position, ConnectionLineType, ConnectionMode } 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 { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 

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

@@ -1,6 +1,7 @@
+import { isNumeric } from '@reactflow/utils';
+import type { BaseEdgeProps } from '@reactflow/system';
+
 import EdgeText from './EdgeText';
-import { isNumeric } from '../../utils';
-import type { BaseEdgeProps } from '../../types';
 
 const BaseEdge = ({
   path,

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

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

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

@@ -1,7 +1,6 @@
 import type { FC, MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
 import cc from 'classcat';
-
-import { Position } from '../../types';
+import { Position } from '@reactflow/system';
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift;

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

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

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

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

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

@@ -1,9 +1,8 @@
 import { memo } from 'react';
+import { Position, type SmoothStepEdgeProps, type XYPosition } from '@reactflow/system';
 
 import BaseEdge from './BaseEdge';
 import { getEdgeCenter } from './utils';
-import { Position } from '../../types';
-import type { SmoothStepEdgeProps, XYPosition } from '../../types';
 
 export interface GetSmoothStepPathParams {
   sourceX: number;

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 BaseEdge from './BaseEdge';
 import { getEdgeCenter } from './utils';
-import type { EdgeProps } from '../../types';
 
 export type GetStraightPathParams = {
   sourceX: number;

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

@@ -1,7 +1,6 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
-
-import type { Edge, MarkerType, ReactFlowState } from '../../types';
+import type { Edge, MarkerType, ReactFlowState } from '@reactflow/system';
 
 export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {

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

@@ -1,15 +1,14 @@
 import { memo, useState, useMemo, useRef } from 'react';
 import type { ComponentType, KeyboardEvent } from 'react';
 import cc from 'classcat';
+import { getMarkerId, elementSelectionKeys } from '@reactflow/utils';
+import type { EdgeProps, WrapEdgeProps, 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 { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
-import { elementSelectionKeys } from '../../utils';
-import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({

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

@@ -1,9 +1,14 @@
 import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import { StoreApi } from 'zustand';
+import {
+  getHostForElement,
+  calcAutoPan,
+  getEventPosition,
+  pointToRendererPoint,
+  rendererPointToPoint,
+} from '@reactflow/utils';
+import type { OnConnect, HandleType, ReactFlowState, Connection } from '@reactflow/system';
 
-import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils';
-import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types';
-import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
 import {
   ConnectionHandle,
   getClosestHandle,

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

@@ -1,16 +1,13 @@
 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 { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { handlePointerDown } from './handler';
-import { getHostForElement, isMouseEvent } from '../../utils';
-import { addEdge } from '../../utils/graph';
-import { Position } from '../../types';
-import type { HandleProps, Connection, ReactFlowState } from '../../types';
 import { isValidHandle } from './utils';
-import { errorMessages } from '../../contants';
 
 const alwaysValid = () => true;
 

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

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

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

@@ -1,8 +1,7 @@
 import { memo } from 'react';
+import { Position, type NodeProps } from '@reactflow/system';
 
 import Handle from '../../components/Handle';
-import { Position } from '../../types';
-import type { NodeProps } from '../../types';
 
 const DefaultNode = ({
   data,

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

@@ -1,8 +1,7 @@
 import { memo } from 'react';
+import { Position, type NodeProps } from '@reactflow/system';
 
 import Handle from '../../components/Handle';
-import { Position } from '../../types';
-import type { NodeProps } from '../../types';
 
 const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
   <>

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

@@ -1,8 +1,7 @@
 import { memo } from 'react';
+import { Position, type NodeProps } from '@reactflow/system';
 
 import Handle from '../../components/Handle';
-import { Position } from '../../types';
-import type { NodeProps } from '../../types';
 
 const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
   <>

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

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

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

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

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

@@ -7,13 +7,13 @@ import { memo, useRef, useEffect } from 'react';
 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 { getRectOfNodes } from '../../utils/graph';
 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,8 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import cc from 'classcat';
+import type { PanelPosition, ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
-import type { PanelPosition, ReactFlowState } from '../../types';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   position: PanelPosition;

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

@@ -1,10 +1,10 @@
 import { useRef } from 'react';
 import type { FC, 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,9 @@
 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 { useStore, useStoreApi } from '../../hooks/useStore';
-import type { Node, Edge, ReactFlowState, CoordinateExtent, 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,9 @@
 import { memo, useCallback } from 'react';
+import type { EdgeMarker, ReactFlowState } from '@reactflow/system';
+import { getMarkerId } from '@reactflow/utils';
 
 import { useStore } from '../../hooks/useStore';
-import { getMarkerId } from '../../utils/graph';
 import { useMarkerSymbol } from './MarkerSymbols';
-import type { EdgeMarker, ReactFlowState } from '../../types';
 
 type MarkerProps = EdgeMarker & {
   id: string;

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

@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
+import { errorMessages, MarkerType, type EdgeMarker } from '@reactflow/system';
 
-import { MarkerType } from '../../types';
-import type { EdgeMarker } from '../../types';
 import { useStoreApi } from '../../hooks/useStore';
-import { errorMessages } from '../../contants';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 

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

@@ -1,6 +1,7 @@
 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 { useStore } from '../../hooks/useStore';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
@@ -8,9 +9,6 @@ import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, getNodeData } from './utils';
 
 import { GraphViewProps } from '../GraphView';
-import { ConnectionMode, Position } from '../../types';
-import type { Edge, ReactFlowState } from '../../types';
-import { errorMessages } from '../../contants';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,

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

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

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

@@ -1,5 +1,5 @@
-import { memo } from 'react';
-import type { ReactNode } from 'react';
+import { memo, type ReactNode } from 'react';
+import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
@@ -8,7 +8,6 @@ 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,4 +1,5 @@
 import { memo } from 'react';
+import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '@reactflow/system';
 
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
@@ -6,7 +7,6 @@ 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,17 +1,14 @@
 import { memo, useMemo, useEffect, useRef } from 'react';
 import type { ComponentType } from 'react';
 import { shallow } from 'zustand/shallow';
-import { internalsSymbol } from '@reactflow/system';
+import { internalsSymbol, errorMessages, Position, type ReactFlowState, type WrapNodeProps } from '@reactflow/system';
+import { clampPosition } from '@reactflow/utils';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
-import { clampPosition } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
 import { getPositionWithOrigin } from './utils';
-import { Position } from '../../types';
-import type { ReactFlowState, WrapNodeProps } from '../../types';
-import { errorMessages } from '../../contants';
 
 type NodeRendererProps = Pick<
   GraphViewProps,

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

@@ -1,11 +1,11 @@
 import type { ComponentType } from 'react';
+import type { NodeTypes, NodeProps, NodeTypesWrapped, 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, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 
 export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
 

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

@@ -5,15 +5,19 @@
 import { memo, useRef, MouseEvent as ReactMouseEvent, 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 UserSelection from '../../components/UserSelection';
 import { containerStyle } from '../../styles';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils/changes';
-import { getConnectedEdges, getNodesInside } from '../../utils/graph';
-import { getEventPosition } from '../../utils';
-import { SelectionMode } from '../../types';
-import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types';
 
 type PaneProps = {
   isSelecting: boolean;

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

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import type { FC, PropsWithChildren } from 'react';
+import { useContext, type FC, type PropsWithChildren } from 'react';
 
 import StoreContext from '../../contexts/RFStoreContext';
 import ReactFlowProvider from '../../components/ReactFlowProvider';

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

@@ -1,6 +1,20 @@
 import { forwardRef } from 'react';
 import 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 Attribution from '../../components/Attribution';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
@@ -17,17 +31,6 @@ import GraphView from '../GraphView';
 import Wrapper from './Wrapper';
 import { infiniteExtent } from '../../store/initialState';
 import { useNodeOrEdgeTypes } from './utils';
-import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../../types';
-import type {
-  EdgeTypes,
-  EdgeTypesWrapped,
-  NodeOrigin,
-  NodeTypes,
-  NodeTypesWrapped,
-  ReactFlowProps,
-  ReactFlowRefType,
-  Viewport,
-} from '../../types';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,

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

@@ -1,11 +1,16 @@
 import { useMemo, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
+import {
+  errorMessages,
+  type EdgeTypes,
+  type EdgeTypesWrapped,
+  type NodeTypes,
+  type NodeTypesWrapped,
+} from '@reactflow/system';
+import { devWarn } from '@reactflow/utils';
 
-import { devWarn } from '../../utils';
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
-import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
-import { errorMessages } from '../../contants';
 
 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

@@ -4,15 +4,14 @@ import { zoom, zoomIdentity } from 'd3-zoom';
 import 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 useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { containerStyle } from '../../styles';
-import { clamp } from '../../utils';
-import { CoordinateExtent, PanOnScrollMode } from '../../types';
 import type { FlowRendererProps } from '../FlowRenderer';
-import type { Viewport, ReactFlowState } from '../../types';
 
 type ZoomPaneProps = Omit<
   FlowRendererProps,

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

@@ -2,13 +2,13 @@ import { useEffect, useRef, useState } from 'react';
 import type { RefObject, 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 { useStoreApi } from '../../hooks/useStore';
 import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
 import { handleNodeClick } from '../../components/Nodes/utils';
 import useGetPointerPosition from '../useGetPointerPosition';
-import { calcAutoPan, getEventPosition } from '../../utils';
-import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent, XYPosition } from '../../types';
 
 export type UseDragData = { dx: number; dy: number };
 

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

@@ -1,9 +1,15 @@
 import type { RefObject } from 'react';
-
-import { clampPosition, isNumeric } from '../../utils';
-import type { CoordinateExtent, Node, NodeDragItem, NodeInternals, NodeOrigin, OnError, XYPosition } from '../../types';
-import { getNodePositionWithOrigin } from '../../utils/graph';
-import { errorMessages } from '../../contants';
+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';
 
 export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
   if (!node.parentNode) {

packages/core/src/hooks/useEdges.ts

@@ -1,5 +1,6 @@
+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/useGetPointerPosition.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
+import type { UseDragEvent } from '@reactflow/system';
 
 import { useStoreApi } from './useStore';
-import type { UseDragEvent } from '../types';
 
 function useGetPointerPosition() {
   const store = useStoreApi();

packages/core/src/hooks/useGlobalKeyHandler.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
+import type { KeyCode } from '@reactflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
 import useKeyPress from './useKeyPress';
-import type { KeyCode } from '../types';
 import useReactFlow from './useReactFlow';
 interface HookParams {
   deleteKeyCode: KeyCode | null;

packages/core/src/hooks/useKeyPress.ts

@@ -1,7 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
-
-import { isInputDOMNode } from '../utils';
-import type { KeyCode } from '../types';
+import { isInputDOMNode } from '@reactflow/utils';
+import type { KeyCode } from '@reactflow/system';
 
 type Keys = Array<string>;
 type PressedKeys = Set<string>;

packages/core/src/hooks/useNodes.ts

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

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useCallback } from 'react';
-import type { SetStateAction, Dispatch } from 'react';
+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,7 +1,6 @@
-import { internalsSymbol } from '@reactflow/system';
+import { internalsSymbol, type ReactFlowState } 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/useOnViewportChange.ts

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

packages/core/src/hooks/useReactFlow.ts

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

packages/core/src/hooks/useResizeHandler.ts

@@ -1,9 +1,8 @@
-import { useEffect } from 'react';
-import type { MutableRefObject } from 'react';
+import { useEffect, type MutableRefObject } from 'react';
+import { errorMessages } from '@reactflow/system';
+import { getDimensions } from '@reactflow/utils';
 
 import { useStoreApi } from '../hooks/useStore';
-import { getDimensions } from '../utils';
-import { errorMessages } from '../contants';
 
 function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
   const store = useStoreApi();

packages/core/src/hooks/useStore.ts

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

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
+import type { UpdateNodeInternals } from '@reactflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
-import type { UpdateNodeInternals } from '../types';
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();

packages/core/src/hooks/useViewport.ts

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

packages/core/src/hooks/useViewportHelper.ts

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

packages/core/src/hooks/useVisibleEdges.ts

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

packages/core/src/hooks/useVisibleNodes.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
+import { getNodesInside } from '@reactflow/utils';
+import type { ReactFlowState } from '@reactflow/system';
 
 import { useStore } from '../hooks/useStore';
-import { getNodesInside } from '../utils/graph';
-import type { ReactFlowState } from '../types';
 
 function useVisibleNodes(onlyRenderVisible: boolean) {
   const nodes = useStore(

packages/core/src/index.ts

@@ -8,7 +8,6 @@ export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/E
 export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 
-export { rectToBox, boxToRect, getBoundsOfRects } from './utils';
 export {
   isNode,
   isEdge,
@@ -20,7 +19,10 @@ export {
   getTransformForBounds,
   getRectOfNodes,
   getNodePositionWithOrigin,
-} from './utils/graph';
+  rectToBox,
+  boxToRect,
+  getBoundsOfRects,
+} from '@reactflow/utils';
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { getMarkerEnd } from './components/Edges/utils';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';

packages/core/src/store/index.ts

@@ -1,27 +1,27 @@
 import { createStore } from 'zustand';
 import { zoomIdentity } from 'd3-zoom';
-import { internalsSymbol } from '@reactflow/system';
+import { clampPosition, getDimensions } 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';
 
-import { clampPosition, getDimensions } from '../utils';
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import { getHandleBounds } from '../components/Nodes/utils';
 import { createNodeInternals, fitView, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils';
 import initialState from './initialState';
-import type {
-  ReactFlowState,
-  Node,
-  Edge,
-  NodeDimensionUpdate,
-  CoordinateExtent,
-  NodeDimensionChange,
-  EdgeSelectionChange,
-  NodeSelectionChange,
-  NodePositionChange,
-  NodeDragItem,
-  UnselectNodesAndEdgesParams,
-  NodeChange,
-  XYPosition,
-} from '../types';
 
 const createRFStore = () =>
   createStore<ReactFlowState>((set, get) => ({

packages/core/src/store/initialState.ts

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

packages/core/src/store/utils.ts

@@ -1,20 +1,24 @@
 import { zoomIdentity } from 'd3-zoom';
 import type { StoreApi } from 'zustand';
-import { internalsSymbol } from '@reactflow/system';
-
-import { isNumeric } from '../utils';
-import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph';
-import type {
-  Edge,
-  EdgeSelectionChange,
-  Node,
-  NodeInternals,
-  NodeSelectionChange,
-  ReactFlowState,
-  XYZPosition,
-  FitViewOptions,
-  NodeOrigin,
-} from '../types';
+import {
+  internalsSymbol,
+  type Edge,
+  type EdgeSelectionChange,
+  type Node,
+  type NodeInternals,
+  type NodeSelectionChange,
+  type ReactFlowState,
+  type XYZPosition,
+  type FitViewOptions,
+  type NodeOrigin,
+} from '@reactflow/system';
+import {
+  isNumeric,
+  getD3Transition,
+  getRectOfNodes,
+  getTransformForBounds,
+  getNodePositionWithOrigin,
+} from '@reactflow/utils';
 
 type ParentNodes = Record<string, boolean>;
 

packages/core/src/types/changes.ts

@@ -1,62 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { XYPosition, Dimensions } from './utils';
-import type { Node } from './nodes';
-import type { Edge } from './edges';
-
-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

@@ -1,149 +0,0 @@
-import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-
-import type {
-  OnSelectionChangeFunc,
-  NodeTypes,
-  EdgeTypes,
-  Node,
-  Edge,
-  ConnectionMode,
-  ConnectionLineType,
-  ConnectionLineComponent,
-  OnConnectStart,
-  OnConnectEnd,
-  OnConnect,
-  CoordinateExtent,
-  KeyCode,
-  PanOnScrollMode,
-  OnEdgeUpdateFunc,
-  OnInit,
-  ProOptions,
-  PanelPosition,
-  DefaultEdgeOptions,
-  FitViewOptions,
-  OnNodesDelete,
-  OnEdgesDelete,
-  OnNodesChange,
-  OnEdgesChange,
-  OnMove,
-  OnMoveStart,
-  OnMoveEnd,
-  NodeDragHandler,
-  NodeMouseHandler,
-  SelectionDragHandler,
-  Viewport,
-  NodeOrigin,
-  EdgeMouseHandler,
-  HandleType,
-  SelectionMode,
-  OnError,
-} 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

@@ -1,180 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CSSProperties, ComponentType, HTMLAttributes, ReactNode, MouseEvent as ReactMouseEvent } from 'react';
-
-import { ConnectionStatus, Position } from '.';
-import type { Connection, HandleElement, HandleType, Node } from '.';
-
-type EdgeLabelOptions = {
-  label?: string | ReactNode;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-};
-
-// interface for the user edge items
-type DefaultEdge<T = any> = {
-  id: string;
-  type?: string;
-  source: string;
-  target: string;
-  sourceHandle?: string | null;
-  targetHandle?: string | null;
-  style?: CSSProperties;
-  animated?: boolean;
-  hidden?: boolean;
-  deletable?: boolean;
-  data?: T;
-  className?: string;
-  sourceNode?: Node;
-  targetNode?: Node;
-  selected?: boolean;
-  markerStart?: EdgeMarkerType;
-  markerEnd?: EdgeMarkerType;
-  zIndex?: number;
-  ariaLabel?: string;
-  interactionWidth?: number;
-  focusable?: boolean;
-} & EdgeLabelOptions;
-
-export type SmoothStepPathOptions = {
-  offset?: number;
-  borderRadius?: number;
-};
-
-type SmoothStepEdgeType<T> = DefaultEdge<T> & {
-  type: 'smoothstep';
-  pathOptions?: SmoothStepPathOptions;
-};
-
-export type BezierPathOptions = {
-  curvature?: number;
-};
-
-type BezierEdgeType<T> = DefaultEdge<T> & {
-  type: 'default';
-  pathOptions?: BezierPathOptions;
-};
-
-export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
-
-export type DefaultEdgeOptions = Omit<
-  Edge,
-  'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
->;
-
-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;
-};
-
-// 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 EdgeTextProps = HTMLAttributes<SVGElement> &
-  EdgeLabelOptions & {
-    x: number;
-    y: number;
-  };
-
-export enum ConnectionLineType {
-  Bezier = 'default',
-  Straight = 'straight',
-  Step = 'step',
-  SmoothStep = 'smoothstep',
-  SimpleBezier = 'simplebezier',
-}
-
-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>;
-
-export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
-
-export type EdgeMarker = {
-  type: MarkerType;
-  color?: string;
-  width?: number;
-  height?: number;
-  markerUnits?: string;
-  orient?: string;
-  strokeWidth?: number;
-};
-
-export type EdgeMarkerType = string | EdgeMarker;
-
-export enum MarkerType {
-  Arrow = 'arrow',
-  ArrowClosed = 'arrowclosed',
-}

packages/core/src/types/general.ts

@@ -1,279 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-  ComponentType,
-  MemoExoticComponent,
-} from 'react';
-import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
-
-import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
-import type { NodeChange, EdgeChange } from './changes';
-import type {
-  Node,
-  NodeInternals,
-  NodeDimensionUpdate,
-  NodeProps,
-  WrapNodeProps,
-  NodeDragItem,
-  NodeDragHandler,
-  SelectionDragHandler,
-  NodeOrigin,
-} from './nodes';
-import type { Edge, EdgeProps, WrapEdgeProps } from './edges';
-import type { HandleType, StartHandle } from './handles';
-import type { DefaultEdgeOptions } from '.';
-import type { ReactFlowInstance } from './instance';
-
-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 FitView = (fitViewOptions?: FitViewOptions) => boolean;
-
-export type Project = (position: XYPosition) => XYPosition;
-
-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 OnMove = (event: MouseEvent | TouchEvent, viewport: Viewport) => void;
-export type OnMoveStart = OnMove;
-export type OnMoveEnd = OnMove;
-
-export type ZoomInOut = (options?: ViewportHelperFunctionOptions) => void;
-export type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void;
-export type GetZoom = () => number;
-export type GetViewport = () => Viewport;
-export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
-export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
-export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
-
-export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
-
-export interface Connection {
-  source: string | null;
-  target: string | null;
-  sourceHandle: string | null;
-  targetHandle: string | null;
-}
-
-export type ConnectionStatus = 'valid' | 'invalid';
-
-export enum ConnectionMode {
-  Strict = 'strict',
-  Loose = 'loose',
-}
-
-export type OnConnect = (connection: Connection) => void;
-
-export type FitViewOptions = {
-  padding?: number;
-  includeHiddenNodes?: boolean;
-  minZoom?: number;
-  maxZoom?: number;
-  duration?: number;
-  nodes?: (Partial<Node> & { id: Node['id'] })[];
-};
-
-export type OnConnectStartParams = {
-  nodeId: string | null;
-  handleId: string | null;
-  handleType: HandleType | null;
-};
-
-export type OnConnectStart = (event: ReactMouseEvent | ReactTouchEvent, params: OnConnectStartParams) => void;
-export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
-
-export type Viewport = {
-  x: number;
-  y: number;
-  zoom: number;
-};
-
-export type KeyCode = string | Array<string>;
-
-export type SnapGrid = [number, number];
-
-export enum PanOnScrollMode {
-  Free = 'free',
-  Vertical = 'vertical',
-  Horizontal = 'horizontal',
-}
-
-export type ViewportHelperFunctionOptions = {
-  duration?: number;
-};
-
-export type SetCenterOptions = ViewportHelperFunctionOptions & {
-  zoom?: number;
-};
-
-export type FitBoundsOptions = ViewportHelperFunctionOptions & {
-  padding?: number;
-};
-
-export type UnselectNodesAndEdgesParams = {
-  nodes?: Node[];
-  edges?: Edge[];
-};
-
-export type OnViewportChange = (viewport: Viewport) => 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;
-};
-
-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: ZoomBehavior<Element, unknown> | null;
-  d3Selection: D3Selection<Element, unknown, null, undefined> | 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;
-
-export type UpdateNodeInternals = (nodeId: string) => void;
-
-export type OnSelectionChangeParams = {
-  nodes: Node[];
-  edges: Edge[];
-};
-
-export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
-
-export type PanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-
-export type ProOptions = {
-  account?: string;
-  hideAttribution: boolean;
-};
-
-export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
-
-export enum SelectionMode {
-  Partial = 'partial',
-  Full = 'full',
-}
-
-export type SelectionRect = Rect & {
-  startX: number;
-  startY: number;
-};
-
-export type OnError = (id: string, message: string) => void;

packages/core/src/types/handles.ts

@@ -1,23 +0,0 @@
-import type { XYPosition, Position, Dimensions, OnConnect, Connection } from '.';
-
-export type HandleType = 'source' | 'target';
-
-export interface HandleElement extends XYPosition, Dimensions {
-  id?: string | null;
-  position: Position;
-}
-
-export interface StartHandle {
-  nodeId: string;
-  type: HandleType;
-  handleId?: string | null;
-}
-
-export interface HandleProps {
-  type: HandleType;
-  position: Position;
-  isConnectable?: boolean;
-  onConnect?: OnConnect;
-  isValidConnection?: (connection: Connection) => boolean;
-  id?: string;
-}

packages/core/src/types/index.ts

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

packages/core/src/types/instance.ts

@@ -1,56 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-namespace */
-import { ViewportHelperFunctions, Viewport, Node, Edge, Rect } 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

@@ -1,118 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import { internalsSymbol } from '@reactflow/system';
-
-import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
-
-// interface for the user node items
-export type Node<T = any, U extends string | undefined = string | undefined> = {
-  id: string;
-  position: XYPosition;
-  data: T;
-  type?: U;
-  style?: CSSProperties;
-  className?: string;
-  sourcePosition?: Position;
-  targetPosition?: Position;
-  hidden?: boolean;
-  selected?: boolean;
-  dragging?: boolean;
-  draggable?: boolean;
-  selectable?: boolean;
-  connectable?: boolean;
-  deletable?: boolean;
-  dragHandle?: string;
-  width?: number | null;
-  height?: number | null;
-  parentNode?: string;
-  zIndex?: number;
-  extent?: 'parent' | CoordinateExtent;
-  expandParent?: boolean;
-  positionAbsolute?: XYPosition;
-  ariaLabel?: string;
-  focusable?: boolean;
-  resizing?: boolean;
-
-  // only used internally
-  [internalsSymbol]?: {
-    z?: number;
-    handleBounds?: NodeHandleBounds;
-    isParent?: 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<T = any> = Pick<
-  Node<T>,
-  'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
-> &
-  Required<Pick<Node<T>, '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;
-  };
-
-// props that get passed to a custom node
-export type NodeProps<T = any> = Pick<
-  WrapNodeProps<T>,
-  'id' | 'data' | 'dragHandle' | 'type' | 'selected' | 'isConnectable' | 'xPos' | 'yPos' | 'zIndex'
-> & {
-  dragging: boolean;
-  targetPosition?: Position;
-  sourcePosition?: Position;
-};
-
-export type NodeHandleBounds = {
-  source: HandleElement[] | null;
-  target: HandleElement[] | null;
-};
-
-export type NodeDimensionUpdate = {
-  id: string;
-  nodeElement: HTMLDivElement;
-  forceUpdate?: boolean;
-};
-
-export type NodeInternals = Map<string, Node>;
-
-export type NodeBounds = XYPosition & {
-  width: number | null;
-  height: number | null;
-};
-
-export type NodeDragItem = {
-  id: string;
-  position: XYPosition;
-  positionAbsolute: XYPosition;
-  // distance from the mouse cursor to the node when start dragging
-  distance: XYPosition;
-  width?: number | null;
-  height?: number | null;
-  extent?: 'parent' | CoordinateExtent;
-  parentNode?: string;
-  dragging?: boolean;
-};
-
-export type NodeOrigin = [number, number];

packages/core/src/types/utils.ts

@@ -1,29 +0,0 @@
-export enum Position {
-  Left = 'left',
-  Top = 'top',
-  Right = 'right',
-  Bottom = 'bottom',
-}
-
-export interface XYPosition {
-  x: number;
-  y: number;
-}
-
-export type XYZPosition = XYPosition & { z: number };
-
-export interface Dimensions {
-  width: number;
-  height: number;
-}
-
-export interface Rect extends Dimensions, XYPosition {}
-
-export interface Box extends XYPosition {
-  x2: number;
-  y2: number;
-}
-
-export type Transform = [number, number, number];
-
-export type CoordinateExtent = [[number, number], [number, number]];

packages/core/src/utils/changes.ts

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

packages/svelte/src/lib/container/SvelteFlow.svelte

@@ -10,6 +10,7 @@
 
   export let nodes: Node[];
   export let edges: Edge[];
+  export let fitView: boolean;
 
   export let className: string | null = null;
   export let id: string = '1';
@@ -20,6 +21,7 @@
   const store = createStore({
     nodes,
     edges,
+    fitView
   });
 
   setContext(key, {

packages/svelte/src/lib/store/index.ts

@@ -1,5 +1,5 @@
 import { getContext } from 'svelte';
-import { derived, writable, type Readable, type Writable } from 'svelte/store';
+import { derived, get, writable, type Readable, type Writable } from 'svelte/store';
 import {
 	type Node,
 	type Transform,
@@ -23,6 +23,7 @@ export const key = Symbol();
 type CreateStoreProps = {
 	nodes: Node[];
 	edges: Edge[];
+	fitView: boolean;
 	transform?: Transform;
 };
 
@@ -49,13 +50,16 @@ type SvelteFlowStore = {
 export function createStore({
 	nodes = [],
 	edges = [],
-	transform = [0, 0, 1]
+	transform = [0, 0, 1],
+	fitView: fitViewOnInit = false
 }: CreateStoreProps): SvelteFlowStore {
 	const nodesStore = writable(nodes.map((n) => ({ ...n, positionAbsolute: n.position })));
 	const edgesStore = writable(edges);
 	const heightStore = writable(500);
 	const widthStore = writable(500);
 
+	let fitViewOnInitDone = false;
+
 	const edgesWithDataStore = derived([edgesStore, nodesStore], ([$edges, $nodes]) => {
 		return $edges
 			.map((edge) => {
@@ -132,39 +136,42 @@ export function createStore({
 		const style = window.getComputedStyle(viewportNode);
 		const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
 
-		nodesStore.update((nds) => {
-			const nextNodes = nds.map((node) => {
-				const update = updates.find((u) => u.id === node.id);
+		const nextNodes = get(nodesStore).map((node) => {
+			const update = updates.find((u) => u.id === node.id);
 
-				if (update) {
-					const dimensions = getDimensions(update.nodeElement);
+			if (update) {
+				const dimensions = getDimensions(update.nodeElement);
 
-					const doUpdate = !!(
-						dimensions.width &&
-						dimensions.height &&
-						(node.width !== dimensions.width ||
-							node.height !== dimensions.height ||
-							update.forceUpdate)
-					);
+				const doUpdate = !!(
+					dimensions.width &&
+					dimensions.height &&
+					(node.width !== dimensions.width ||
+						node.height !== dimensions.height ||
+						update.forceUpdate)
+				);
 
-					if (doUpdate) {
-						node[internalsSymbol] = {
-							...node[internalsSymbol],
-							handleBounds: {
-								source: getHandleBounds('.source', update.nodeElement, zoom),
-								target: getHandleBounds('.target', update.nodeElement, zoom)
-							}
-						};
-						node.width = dimensions.width;
-						node.height = dimensions.height;
-					}
+				if (doUpdate) {
+					node[internalsSymbol] = {
+						...node[internalsSymbol],
+						handleBounds: {
+							source: getHandleBounds('.source', update.nodeElement, zoom),
+							target: getHandleBounds('.target', update.nodeElement, zoom)
+						}
+					};
+					node.width = dimensions.width;
+					node.height = dimensions.height;
 				}
+			}
 
-				return node;
-			});
-
-			return nextNodes;
+			return node;
 		});
+
+		// const nextFitViewOnInitDone =
+		// 	fitViewOnInitDone || (fitViewOnInit && !fitViewOnInitDone && fitView(get, { initial: true }));
+
+		// fitViewOnInitDone = nextFitViewOnInitDone;
+
+		nodesStore.set(nextNodes);
 	}
 
 	return {

packages/svelte/src/routes/+page.svelte

@@ -57,7 +57,7 @@
   //  }]
 </script>
 
-<SvelteFlow {nodes} {edges} />
+<SvelteFlow {nodes} {edges} fitView />
 
 <style>
   :root {

packages/system/src/index.ts

@@ -1,3 +1,4 @@
 export * from './types';
+export { errorMessages } from './constants';
 
 export const internalsSymbol = Symbol.for('internals');

packages/utils/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@reactflow/eslint-config'],
+};

packages/utils/README.md

@@ -0,0 +1,10 @@
+# @reactflow/core
+
+Core components and util functions of React Flow.
+
+## Installation 
+
+```sh 
+npm install @reactflow/core
+```
+

packages/utils/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@reactflow/utils",
+  "version": "11.5.5",
+  "description": "Core utils of React Flow.",
+  "keywords": [
+    "react",
+    "node-based UI",
+    "graph",
+    "diagram",
+    "workflow",
+    "react-flow"
+  ],
+  "files": [
+    "dist"
+  ],
+  "source": "src/index.ts",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wbkd/react-flow.git",
+    "directory": "packages/utils"
+  },
+  "scripts": {
+    "dev": "rollup --config node:@reactflow/rollup-config --watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@reactflow/system": "workspace:*",
+    "@types/d3": "^7.4.0",
+    "@types/d3-drag": "^3.0.1",
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@reactflow/eslint-config": "workspace:*",
+    "@reactflow/rollup-config": "workspace:*",
+    "@reactflow/tsconfig": "workspace:*",
+    "@types/node": "^18.7.16",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
+    "react": "^18.2.0",
+    "typescript": "^4.9.4"
+  },
+  "rollup": {
+    "globals": {},
+    "name": "ReactFlowCore"
+  }
+}

packages/utils/src/graph.ts

@@ -1,19 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Selection as D3Selection } from 'd3';
 
-import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
+import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from './utils';
 import {
-  Node,
-  Edge,
-  Connection,
-  EdgeMarkerType,
-  Transform,
-  XYPosition,
-  Rect,
-  NodeInternals,
-  NodeOrigin,
-} from '../types';
-import { errorMessages } from '../contants';
+  errorMessages,
+  type Node,
+  type Edge,
+  type Connection,
+  type EdgeMarkerType,
+  type Transform,
+  type XYPosition,
+  type Rect,
+  type NodeInternals,
+  type NodeOrigin,
+} from '@reactflow/system';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;

packages/utils/src/index.ts

@@ -0,0 +1,2 @@
+export * from './graph';
+export * from './utils';

packages/utils/src/utils.ts

@@ -3,8 +3,7 @@ import type {
   MouseEvent as ReactMouseEvent,
   TouchEvent as ReactTouchEvent,
 } from 'react';
-
-import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types';
+import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '@reactflow/system';
 
 export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   width: node.offsetWidth,

packages/utils/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@reactflow/tsconfig/react.json",
+  "display": "@reactflow/utils",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

pnpm-lock.yaml

@@ -145,8 +145,9 @@ importers:
     specifiers:
       '@reactflow/eslint-config': workspace:*
       '@reactflow/rollup-config': workspace:*
-      '@reactflow/system': workspace:11.5.5
+      '@reactflow/system': workspace:*
       '@reactflow/tsconfig': workspace:*
+      '@reactflow/utils': workspace:*
       '@types/d3': ^7.4.0
       '@types/d3-drag': ^3.0.1
       '@types/d3-selection': ^3.0.3
@@ -163,6 +164,7 @@ importers:
       zustand: ^4.3.3
     dependencies:
       '@reactflow/system': link:../system
+      '@reactflow/utils': link:../utils
       '@types/d3': registry.npmjs.org/@types/d3/7.4.0
       '@types/d3-drag': registry.npmjs.org/@types/d3-drag/3.0.1
       '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
@@ -384,6 +386,37 @@ importers:
       react: registry.npmjs.org/react/18.2.0
       typescript: registry.npmjs.org/typescript/4.9.4
 
+  packages/utils:
+    specifiers:
+      '@reactflow/eslint-config': workspace:*
+      '@reactflow/rollup-config': workspace:*
+      '@reactflow/system': workspace:*
+      '@reactflow/tsconfig': workspace:*
+      '@types/d3': ^7.4.0
+      '@types/d3-drag': ^3.0.1
+      '@types/d3-selection': ^3.0.3
+      '@types/d3-zoom': ^3.0.1
+      '@types/node': ^18.7.16
+      '@types/react': '>=17'
+      '@types/react-dom': '>=17'
+      react: ^18.2.0
+      typescript: ^4.9.4
+    dependencies:
+      '@reactflow/system': link:../system
+      '@types/d3': registry.npmjs.org/@types/d3/7.4.0
+      '@types/d3-drag': registry.npmjs.org/@types/d3-drag/3.0.1
+      '@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
+      '@types/d3-zoom': registry.npmjs.org/@types/d3-zoom/3.0.1
+    devDependencies:
+      '@reactflow/eslint-config': link:../../tooling/eslint-config
+      '@reactflow/rollup-config': link:../../tooling/rollup-config
+      '@reactflow/tsconfig': link:../../tooling/tsconfig
+      '@types/node': registry.npmjs.org/@types/node/18.7.16
+      '@types/react': registry.npmjs.org/@types/react/18.0.19
+      '@types/react-dom': registry.npmjs.org/@types/react-dom/18.0.6
+      react: registry.npmjs.org/react/18.2.0
+      typescript: registry.npmjs.org/typescript/4.9.4
+
   tooling/eslint-config:
     specifiers:
       eslint: ^8.22.0