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

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 = ({