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

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(