refactor(react/svelte): cleanup types

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

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

@@ -6,16 +6,14 @@ import {
   Position,
   ConnectionLineType,
   ConnectionMode,
-  type ConnectionLineComponent,
   type ConnectionStatus,
   type HandleType,
-  type ReactFlowState,
-  type ReactFlowStore,
 } from '@reactflow/system';
 import { getBezierPath, getSmoothStepPath } from '@reactflow/edge-utils';
 
 import { useStore } from '../../hooks/useStore';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
+import type { ConnectionLineComponent, ReactFlowState, ReactFlowStore } 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 type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 

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

@@ -1,5 +1,6 @@
 import { isNumeric } from '@reactflow/utils';
-import type { BaseEdgeProps } from '@reactflow/system';
+
+import type { BaseEdgeProps } from '../../types';
 
 import EdgeText from './EdgeText';
 

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

@@ -1,8 +1,9 @@
 import { memo } from 'react';
-import { Position, type BezierEdgeProps } from '@reactflow/system';
+import { Position } from '@reactflow/system';
 import { getBezierPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { BezierEdgeProps } from '../../types';
 
 const BezierEdge = memo(
   ({

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

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

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

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

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

@@ -1,8 +1,9 @@
 import { memo } from 'react';
-import { Position, type SmoothStepEdgeProps } from '@reactflow/system';
+import { Position } from '@reactflow/system';
 import { getSmoothStepPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { SmoothStepEdgeProps } from '../../types';
 
 const SmoothStepEdge = memo(
   ({

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 { getStraightPath } from '@reactflow/edge-utils';
 
 import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
 
 const StraightEdge = memo(
   ({

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

@@ -1,6 +1,7 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
 import { StoreApi } from 'zustand';
-import type { Edge, ReactFlowState } from '@reactflow/system';
+
+import type { Edge, ReactFlowState } from '../../types';
 
 export function getMouseHandler(
   id: string,

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

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

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

@@ -7,7 +7,7 @@ import {
   pointToRendererPoint,
   rendererPointToPoint,
 } from '@reactflow/utils';
-import type { OnConnect, HandleType, ReactFlowState, Connection } from '@reactflow/system';
+import type { OnConnect, HandleType, Connection } from '@reactflow/system';
 
 import {
   ConnectionHandle,
@@ -19,6 +19,7 @@ import {
   resetRecentHandle,
   ValidConnectionFunc,
 } from './utils';
+import type { ReactFlowState } from '../../types';
 
 export function handlePointerDown({
   event,

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,9 @@
-import { useRef } from 'react';
-import type { FC, PropsWithChildren } from 'react';
+import { useRef, type FC, type 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,10 @@
 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 type { CoordinateExtent } from '@reactflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
+import type { Node, Edge, ReactFlowState, 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,