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

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,