refactor(packages): add @reactflow/system

packages/core/package.json

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

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

@@ -1,12 +1,12 @@
 import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
+import { internalsSymbol } from '@reactflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
-import { internalsSymbol } from '../../utils';
 import type {
   ConnectionLineComponent,
   ConnectionStatus,

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

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

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

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react';
+import { internalsSymbol } from '@reactflow/system';
 
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
-import { internalsSymbol, rectToBox } from '../../utils';
+import { rectToBox } from '../../utils';
 import { Position } from '../../types';
 import type {
   EdgeProps,

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

@@ -1,10 +1,11 @@
 import { memo, useMemo, useEffect, useRef } from 'react';
 import type { ComponentType } from 'react';
 import { shallow } from 'zustand/shallow';
+import { internalsSymbol } from '@reactflow/system';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
-import { clampPosition, internalsSymbol } from '../../utils';
+import { clampPosition } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
 import { getPositionWithOrigin } from './utils';

packages/core/src/hooks/useNodesInitialized.ts

@@ -1,4 +1,5 @@
-import { internalsSymbol } from '../utils';
+import { internalsSymbol } from '@reactflow/system';
+
 import { useStore } from './useStore';
 import type { ReactFlowState } from '../types';
 

packages/core/src/hooks/useVisibleEdges.ts

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

packages/core/src/index.ts

@@ -8,7 +8,7 @@ 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 { internalsSymbol, rectToBox, boxToRect, getBoundsOfRects } from './utils';
+export { rectToBox, boxToRect, getBoundsOfRects } from './utils';
 export {
   isNode,
   isEdge,
@@ -40,5 +40,6 @@ 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 './types';
+// export * from './types';

packages/core/src/store/index.ts

@@ -1,7 +1,8 @@
 import { createStore } from 'zustand';
 import { zoomIdentity } from 'd3-zoom';
+import { internalsSymbol } from '@reactflow/system';
 
-import { clampPosition, getDimensions, internalsSymbol } from '../utils';
+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';

packages/core/src/store/utils.ts

@@ -1,7 +1,8 @@
 import { zoomIdentity } from 'd3-zoom';
 import type { StoreApi } from 'zustand';
+import { internalsSymbol } from '@reactflow/system';
 
-import { internalsSymbol, isNumeric } from '../utils';
+import { isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds, getNodePositionWithOrigin } from '../utils/graph';
 import type {
   Edge,

packages/core/src/types/nodes.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import { internalsSymbol } from '@reactflow/system';
 
-import { internalsSymbol } from '../utils';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 
 // interface for the user node items

packages/core/src/utils/index.ts

@@ -84,8 +84,6 @@ export const isRectObject = (obj: any): obj is Rect =>
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);
 
-export const internalsSymbol = Symbol.for('internals');
-
 // used for a11y key board controls for nodes and edges
 export const elementSelectionKeys = ['Enter', ' ', 'Escape'];
 

packages/svelte/package.json

@@ -16,7 +16,7 @@
 		".": "./index.js"
 	},
 	"dependencies": {
-		"@reactflow/core": "workspace:*",
+		"@reactflow/system": "workspace:*",
 		"cc": "^3.0.1",
 		"d3-drag": "^3.0.0",
 		"d3-selection": "^3.0.0",

packages/svelte/src/lib/components/Handle.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
   import cc from 'classcat';
-	import { type HandleType, Position } from '@reactflow/core';
+	import { type HandleType, Position } from '@reactflow/system';
 
   export let type: HandleType = 'source';
   export let position: Position = Position.Top;

packages/svelte/src/lib/components/nodes/BaseNode.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, setContext } from 'svelte';
-  import type { XYPosition } from '@reactflow/core';
+  import type { XYPosition } from '@reactflow/system';
 
   import drag  from '$lib/hooks/drag'
 	import { useStore } from '$lib/store';

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Position } from '@reactflow/core';
+  import { Position } from '@reactflow/system';
   
   import Handle from '$lib/components/Handle.svelte';
 

packages/svelte/src/lib/container/EdgeRenderer/utils.ts

@@ -6,7 +6,7 @@ import {
 	type XYPosition,
 	Position,
 	internalsSymbol
-} from '@reactflow/core';
+} from '@reactflow/system';
 
 export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
 	const handleBounds = node?.[internalsSymbol]?.handleBounds || null;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext, onMount } from 'svelte'
   import cc from 'classcat';
-  import type { Node, Edge } from '@reactflow/core';
+  import type { Node, Edge } from '@reactflow/system';
 
 	import { key, createStore } from '$lib/store';
   import Viewport from '$lib/container/Viewport.svelte';

packages/svelte/src/lib/hooks/drag/index.ts

@@ -1,7 +1,7 @@
 import { get, type Writable } from 'svelte/store';
 import { drag as d3Drag, type D3DragEvent, type SubjectPosition } from 'd3-drag';
 import { select } from 'd3-selection';
-import type { XYPosition, CoordinateExtent, Node, Transform } from '@reactflow/core';
+import type { XYPosition, CoordinateExtent, Node, Transform } from '@reactflow/system';
 
 import { getDragItems, hasSelector, calcNextPosition } from './utils';
 

packages/svelte/src/lib/hooks/drag/utils.ts

@@ -5,7 +5,7 @@ import type {
 	NodeInternals,
 	NodeOrigin,
 	XYPosition
-} from '@reactflow/core';
+} from '@reactflow/system';
 
 import { clampPosition, isNumeric } from '../../../utils';
 

packages/svelte/src/lib/hooks/zoom/index.ts

@@ -3,7 +3,7 @@ import type { Writable } from 'svelte/store';
 import { select } from 'd3-selection';
 import { zoom as d3Zoom, zoomIdentity } from 'd3-zoom';
 import type { D3ZoomEvent } from 'd3-zoom';
-import type { Transform } from '@reactflow/core';
+import type { Transform } from '@reactflow/system';
 
 const isWrappedWithClass = (event: any, className: string | undefined) =>
 	event.target.closest(`.${className}`);

packages/svelte/src/lib/index.ts

@@ -1,4 +1,3 @@
-// Reexport your entry components here
 import SvelteFlow from '$lib/container/SvelteFlow.svelte';
 
 export default SvelteFlow;

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

@@ -6,9 +6,9 @@ import {
 	type NodeDragItem,
 	type NodeDimensionUpdate,
 	type Edge,
-	Position
-} from '@reactflow/core';
-import { internalsSymbol } from '@reactflow/core';
+	Position,
+	internalsSymbol
+} from '@reactflow/system';
 
 import { getDimensions, getHandleBounds } from '../../utils';
 import {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Node, Edge } from '@reactflow/core';
+  import type { Node, Edge } from '@reactflow/system';
   
   import SvelteFlow from '../lib/index';
 

packages/svelte/src/utils/index.ts

@@ -7,7 +7,7 @@ import {
 	type HandleElement,
 	internalsSymbol,
 	Position
-} from '@reactflow/core';
+} from '@reactflow/system';
 
 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
 

packages/system/.eslintrc.js

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

packages/system/README.md

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

packages/system/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@reactflow/system",
+  "version": "11.5.5",
+  "description": "Core system 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/system"
+  },
+  "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": {
+    "@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/system/src/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export const internalsSymbol = Symbol.for('internals');

packages/system/src/types/changes.ts

@@ -0,0 +1,62 @@
+/* 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/system/src/types/component-props.ts

@@ -0,0 +1,149 @@
+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/system/src/types/edges.ts

@@ -0,0 +1,180 @@
+/* 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/system/src/types/general.ts

@@ -0,0 +1,279 @@
+/* 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/system/src/types/handles.ts

@@ -0,0 +1,23 @@
+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/system/src/types/index.ts

@@ -0,0 +1,8 @@
+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/system/src/types/instance.ts

@@ -0,0 +1,56 @@
+/* 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/system/src/types/nodes.ts

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+
+import { internalsSymbol } from '../';
+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/system/src/types/utils.ts

@@ -0,0 +1,29 @@
+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/system/tsconfig.json

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

pnpm-lock.yaml

@@ -32,8 +32,8 @@ importers:
       '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
       '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0
       '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
-      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.51.0_bn63ywsy4d5iuct4ghawihpgsu
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.51.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.52.0_gyett2pgucfcswo4a3gkpdas2y
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.52.0_id2eilsndvzhjjktb64trvy3gu
       autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.21
       concurrently: registry.npmjs.org/concurrently/7.6.0
       cypress: registry.npmjs.org/cypress/10.7.0
@@ -145,6 +145,7 @@ importers:
     specifiers:
       '@reactflow/eslint-config': workspace:*
       '@reactflow/rollup-config': workspace:*
+      '@reactflow/system': workspace:11.5.5
       '@reactflow/tsconfig': workspace:*
       '@types/d3': ^7.4.0
       '@types/d3-drag': ^3.0.1
@@ -161,6 +162,7 @@ importers:
       typescript: ^4.9.4
       zustand: ^4.3.3
     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
@@ -306,7 +308,7 @@ importers:
 
   packages/svelte:
     specifiers:
-      '@reactflow/core': workspace:*
+      '@reactflow/system': workspace:*
       '@sveltejs/adapter-auto': ^2.0.0
       '@sveltejs/kit': ^1.5.6
       '@sveltejs/package': ^1.0.2
@@ -329,7 +331,7 @@ importers:
       typescript: ^4.9.3
       vite: ^4.1.1
     dependencies:
-      '@reactflow/core': link:../core
+      '@reactflow/system': link:../system
       cc: registry.npmjs.org/cc/3.0.1
       d3-drag: registry.npmjs.org/d3-drag/3.0.0
       d3-selection: registry.npmjs.org/d3-selection/3.0.0
@@ -353,6 +355,35 @@ importers:
       typescript: registry.npmjs.org/typescript/4.9.4
       vite: registry.npmjs.org/vite/4.1.1
 
+  packages/system:
+    specifiers:
+      '@reactflow/eslint-config': workspace:*
+      '@reactflow/rollup-config': 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:
+      '@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
@@ -2415,11 +2446,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.51.0_bn63ywsy4d5iuct4ghawihpgsu:
-    resolution: {integrity: sha512-wcAwhEWm1RgNd7dxD/o+nnLW8oH+6RK1OGnmbmkj/GGoDPV1WWMVP0FXYQBivKHdwM1pwii3bt//RC62EriIUQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.51.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.51.0
+  registry.npmjs.org/@typescript-eslint/eslint-plugin/5.52.0_gyett2pgucfcswo4a3gkpdas2y:
+    resolution: {integrity: sha512-lHazYdvYVsBokwCdKOppvYJKaJ4S41CgKBcPvyd0xjZNbvQdhn/pnJlGtQksQ/NhInzdaeaSarlBjDXHuclEbg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.52.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.52.0
     name: '@typescript-eslint/eslint-plugin'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -2429,10 +2460,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.51.0_id2eilsndvzhjjktb64trvy3gu
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.51.0
-      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.51.0_id2eilsndvzhjjktb64trvy3gu
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.51.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.52.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.52.0
+      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.52.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.52.0_id2eilsndvzhjjktb64trvy3gu
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       grapheme-splitter: registry.npmjs.org/grapheme-splitter/1.0.4
@@ -2469,11 +2500,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/parser/5.51.0_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-fEV0R9gGmfpDeRzJXn+fGQKcl0inIeYobmmUWijZh9zA7bxJ8clPhV9up2ZQzATxAiFAECqPQyMDB4o4B81AaA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.51.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/parser/5.51.0
+  registry.npmjs.org/@typescript-eslint/parser/5.52.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-e2KiLQOZRo4Y0D/b+3y08i3jsekoSkOYStROYmPUnGMEoA0h+k2qOH5H6tcjIc68WDvGwH+PaOrP1XRzLJ6QlA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.52.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/parser/5.52.0
     name: '@typescript-eslint/parser'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -2482,9 +2513,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.51.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.51.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.51.0_typescript@4.9.4
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.52.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.52.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.52.0_typescript@4.9.4
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       typescript: registry.npmjs.org/typescript/4.9.4
@@ -2502,14 +2533,14 @@ packages:
       '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.49.0
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/scope-manager/5.51.0:
-    resolution: {integrity: sha512-gNpxRdlx5qw3yaHA0SFuTjW4rxeYhpHxt491PEcKF8Z6zpq0kMhe0Tolxt0qjlojS+/wArSDlj/LtE69xUJphQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.51.0.tgz}
+  registry.npmjs.org/@typescript-eslint/scope-manager/5.52.0:
+    resolution: {integrity: sha512-AR7sxxfBKiNV0FWBSARxM8DmNxrwgnYMPwmpkC1Pl1n+eT8/I2NAUPuwDy/FmDcC6F8pBfmOcaxcxRHspgOBMw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.52.0.tgz}
     name: '@typescript-eslint/scope-manager'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.51.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.51.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.52.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.52.0
     dev: true
 
   registry.npmjs.org/@typescript-eslint/type-utils/5.49.0_zkdaqh7it7uc4cvz2haft7rc6u:
@@ -2535,11 +2566,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/type-utils/5.51.0_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-QHC5KKyfV8sNSyHqfNa0UbTbJ6caB8uhcx2hYcWVvJAZYJRBo5HyyZfzMdRx8nvS+GyMg56fugMzzWnojREuQQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.51.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/type-utils/5.51.0
+  registry.npmjs.org/@typescript-eslint/type-utils/5.52.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-tEKuUHfDOv852QGlpPtB3lHOoig5pyFQN/cUiZtpw99D93nEBjexRLre5sQZlkMoHry/lZr8qDAt2oAHLKA6Jw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.52.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/type-utils/5.52.0
     name: '@typescript-eslint/type-utils'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -2548,8 +2579,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.51.0_typescript@4.9.4
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.51.0_id2eilsndvzhjjktb64trvy3gu
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.52.0_typescript@4.9.4
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.52.0_id2eilsndvzhjjktb64trvy3gu
       debug: registry.npmjs.org/debug/4.3.4
       eslint: registry.npmjs.org/eslint/8.23.1
       tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.9.4
@@ -2565,10 +2596,10 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/types/5.51.0:
-    resolution: {integrity: sha512-SqOn0ANn/v6hFn0kjvLwiDi4AzR++CBZz0NV5AnusT2/3y32jdc0G4woXPWHCumWtUXZKPAS27/9vziSsC9jnw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.51.0.tgz}
+  registry.npmjs.org/@typescript-eslint/types/5.52.0:
+    resolution: {integrity: sha512-oV7XU4CHYfBhk78fS7tkum+/Dpgsfi91IIDy7fjCyq2k6KB63M6gMC0YIvy+iABzmXThCRI6xpCEyVObBdWSDQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.52.0.tgz}
     name: '@typescript-eslint/types'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -2596,11 +2627,11 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/typescript-estree/5.51.0_typescript@4.9.4:
-    resolution: {integrity: sha512-TSkNupHvNRkoH9FMA3w7TazVFcBPveAAmb7Sz+kArY6sLT86PA5Vx80cKlYmd8m3Ha2SwofM1KwraF24lM9FvA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.51.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.51.0
+  registry.npmjs.org/@typescript-eslint/typescript-estree/5.52.0_typescript@4.9.4:
+    resolution: {integrity: sha512-WeWnjanyEwt6+fVrSR0MYgEpUAuROxuAH516WPjUblIrClzYJj0kBbjdnbQXLpgAN8qbEuGywiQsXUVDiAoEuQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.52.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.52.0
     name: '@typescript-eslint/typescript-estree'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -2608,8 +2639,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.51.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.51.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.52.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.52.0
       debug: registry.npmjs.org/debug/4.3.4
       globby: registry.npmjs.org/globby/11.1.0
       is-glob: registry.npmjs.org/is-glob/4.0.3
@@ -2643,20 +2674,20 @@ packages:
       - typescript
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/utils/5.51.0_id2eilsndvzhjjktb64trvy3gu:
-    resolution: {integrity: sha512-76qs+5KWcaatmwtwsDJvBk4H76RJQBFe+Gext0EfJdC3Vd2kpY2Pf//OHHzHp84Ciw0/rYoGTDnIAr3uWhhJYw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.51.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/utils/5.51.0
+  registry.npmjs.org/@typescript-eslint/utils/5.52.0_id2eilsndvzhjjktb64trvy3gu:
+    resolution: {integrity: sha512-As3lChhrbwWQLNk2HC8Ree96hldKIqk98EYvypd3It8Q1f8d5zWyIoaZEp2va5667M4ZyE7X8UUR+azXrFl+NA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.52.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/utils/5.52.0
     name: '@typescript-eslint/utils'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11
       '@types/semver': registry.npmjs.org/@types/semver/7.3.13
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.51.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.51.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.51.0_typescript@4.9.4
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.52.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.52.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.52.0_typescript@4.9.4
       eslint: registry.npmjs.org/eslint/8.23.1
       eslint-scope: registry.npmjs.org/eslint-scope/5.1.1
       eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1
@@ -2676,13 +2707,13 @@ packages:
       eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
     dev: true
 
-  registry.npmjs.org/@typescript-eslint/visitor-keys/5.51.0:
-    resolution: {integrity: sha512-Oh2+eTdjHjOFjKA27sxESlA87YPSOJafGCR0md5oeMdh1ZcCfAGCIOL216uTBAkAIptvLIfKQhl7lHxMJet4GQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.51.0.tgz}
+  registry.npmjs.org/@typescript-eslint/visitor-keys/5.52.0:
+    resolution: {integrity: sha512-qMwpw6SU5VHCPr99y274xhbm+PRViK/NATY6qzt+Et7+mThGuFSl/ompj2/hrBlRP/kq+BFdgagnOSgw9TB0eA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.52.0.tgz}
     name: '@typescript-eslint/visitor-keys'
-    version: 5.51.0
+    version: 5.52.0
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.51.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.52.0
       eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
     dev: true