refactor(packages): change package structure

README.md

@@ -54,7 +54,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   addEdge,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import 'reactflow/dist/style.css';
 

examples/vite-app/cypress/components/hooks/useEdges.cy.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ReactFlow, { Edge, useEdges } from 'reactflow';
+import ReactFlow, { Edge, useEdges } from '@xyflow/react';
 
 import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/hooks/useNodes.cy.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import ReactFlow, { Node, useNodes } from 'reactflow';
+import ReactFlow, { Node, useNodes } from '@xyflow/react';
 
 import { nodes } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/hooks/useNodesInitialized.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useNodesInitialized } from 'reactflow';
+import ReactFlow, { useNodesInitialized } from '@xyflow/react';
 
 import { nodes } from '../../fixtures/simpleflow';
 import ControlledFlow from '../../support/ControlledFlow';

examples/vite-app/cypress/components/hooks/useOnViewportChange.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useOnViewportChange, Viewport } from 'reactflow';
+import ReactFlow, { useOnViewportChange, Viewport } from '@xyflow/react';
 
 describe('useOnViewportChange.cy.tsx', () => {
   it('listen to viewport drag', () => {

examples/vite-app/cypress/components/hooks/useViewport.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { useViewport, Viewport } from 'reactflow';
+import ReactFlow, { useViewport, Viewport } from '@xyflow/react';
 
 describe('useViewport.cy.tsx', () => {
   it('handles drag', () => {

examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { EdgeProps } from 'reactflow';
+import ReactFlow, { EdgeProps } from '@xyflow/react';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow';
+import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react';
 import * as simpleflow from '../../fixtures/simpleflow';
 
 function CustomEdge(props: EdgeProps) {

examples/vite-app/cypress/components/reactflow/uncontrolled.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow from 'reactflow';
+import ReactFlow from '@xyflow/react';
 
 import { nodes, edges } from '../../fixtures/simpleflow';
 

examples/vite-app/cypress/components/reactflow/view-props.cy.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from 'reactflow';
+import ReactFlow, { ReactFlowProps, Viewport, useViewport, SnapGrid, CoordinateExtent, Node } from '@xyflow/react';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';

examples/vite-app/cypress/components/utils/graph-utils.cy.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from 'reactflow';
+import { Node, Edge, isNode, isEdge, getOutgoers, getIncomers, addEdge } from '@xyflow/react';
 
 const nodes: Node[] = [
   {

examples/vite-app/cypress/fixtures/simpleflow.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from 'reactflow';
+import { Node, Edge } from '@xyflow/react';
 
 export const nodes: Node[] = [
   {

examples/vite-app/cypress/support/ControlledFlow.tsx

@@ -10,7 +10,7 @@ import {
   Connection,
   addEdge,
   ReactFlowProps,
-} from 'reactflow';
+} from '@xyflow/react';
 
 function ControlledFlow({
   addOnNodeChangeHandler = true,

examples/vite-app/cypress/support/component.ts

@@ -6,9 +6,9 @@ import './commands';
 import 'cypress-real-events/support';
 
 import { mount } from 'cypress/react18';
-import { XYPosition } from 'reactflow';
+import { XYPosition } from '@xyflow/react';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

examples/vite-app/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "@reactflow/examples",
+  "name": "@xyflow/react-examples",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 3000 --open --host --force",
+    "dev": "vite --port 3000 --open --host",
     "serve": "vite serve --port 3000",
     "build": "vite build",
     "test:dev": "cypress open",
@@ -14,13 +14,13 @@
     "test-e2e": "start-server-and-test 'pnpm serve' http-get://localhost:3000 'pnpm test-e2e-cypress'"
   },
   "dependencies": {
+    "@xyflow/react": "workspace:*",
     "classcat": "^5.0.3",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "reactflow": "workspace:*",
     "zustand": "^4.3.1"
   },
   "devDependencies": {
@@ -29,6 +29,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "cypress": "^10.6.0",
     "cypress-real-events": "^1.7.1",
     "start-server-and-test": "^1.14.0",

examples/vite-app/src/examples/Backgrounds/index.tsx

@@ -1,13 +1,14 @@
 import { FC } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   ReactFlowProvider,
   useNodesState,
   Background,
   BackgroundProps,
   BackgroundVariant,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import styles from './style.module.css';
 

examples/vite-app/src/examples/Basic/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   BackgroundVariant,
@@ -9,7 +10,7 @@ import ReactFlow, {
   Edge,
   useReactFlow,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);

examples/vite-app/src/examples/CancelConnection/data.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from 'reactflow';
+import { Edge, Node } from '@xyflow/react';
 
 export const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/CancelConnection/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   MiniMap,
   addEdge,
@@ -10,7 +11,7 @@ import ReactFlow, {
   OnConnectStart,
   OnConnectEnd,
   useStore,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import useCountdown from './hooks/useCountdown';
 import { initialEdges, initialNodes } from './data';
@@ -21,7 +22,7 @@ const CANCEL_AFTER = 5; // seconds
 const CancelConnection = () => {
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const cancelConnection = useStore(state => state.cancelConnection)
+  const cancelConnection = useStore((state) => state.cancelConnection);
 
   // Cancels connection after 5 seconds
   const countdown = useCountdown(() => cancelConnection());
@@ -32,11 +33,7 @@ const CancelConnection = () => {
 
   return (
     <>
-      <Timer
+      <Timer duration={CANCEL_AFTER} show={countdown.counting} remaining={countdown.remaining} />
-        duration={CANCEL_AFTER}
-        show={countdown.counting}
-        remaining={countdown.remaining}
-      />
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -53,7 +50,7 @@ const CancelConnection = () => {
       </ReactFlow>
     </>
   );
-}
+};
 
 export default () => (
   <ReactFlowProvider>

examples/vite-app/src/examples/ControlledUncontrolled/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   Node,
   Edge,
@@ -7,7 +8,7 @@ import ReactFlow, {
   useEdgesState,
   Background,
   BackgroundVariant,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const defaultNodes: Node[] = [
   {

examples/vite-app/src/examples/CustomConnectionLine/ConnectionLine.tsx

@@ -1,4 +1,4 @@
-import { ConnectionLineComponentProps } from 'reactflow';
+import { ConnectionLineComponentProps } from '@xyflow/react';
 
 function ConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineComponentProps) {
   return (

examples/vite-app/src/examples/CustomConnectionLine/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Node,
   addEdge,
   Connection,
@@ -8,7 +9,7 @@ import ReactFlow, {
   useEdgesState,
   Background,
   BackgroundVariant,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import ConnectionLine from './ConnectionLine';
 

examples/vite-app/src/examples/CustomMiniMapNode/index.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, CSSProperties, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Background,
   BackgroundVariant,
@@ -13,7 +14,7 @@ import ReactFlow, {
   ReactFlowInstance,
   useEdgesState,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,5 +1,5 @@
 import React, { memo, FC, CSSProperties, useCallback } from 'react';
-import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from 'reactflow';
+import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };

examples/vite-app/src/examples/CustomNode/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Controls,
   addEdge,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Connection,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
 

examples/vite-app/src/examples/DefaultNodes/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   Node,
   Edge,
@@ -6,7 +7,7 @@ import ReactFlow, {
   Background,
   BackgroundVariant,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const defaultNodes: Node[] = [
   {

examples/vite-app/src/examples/DragHandle/DragHandleNode.tsx

@@ -1,6 +1,5 @@
-import React, { memo, FC } from 'react';
+import { memo, FC } from 'react';
-
+import { Handle, Position, NodeProps, Connection, Edge } from '@xyflow/react';
-import { Handle, Position, NodeProps, Connection, Edge } from 'reactflow';
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 

examples/vite-app/src/examples/DragHandle/index.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 import DragHandleNode from './DragHandleNode';
 

examples/vite-app/src/examples/DragNDrop/index.tsx

@@ -1,5 +1,6 @@
 import { useState, DragEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   ReactFlowProvider,
   addEdge,
   ReactFlowInstance,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   Controls,
   NodeOrigin,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import Sidebar from './Sidebar';
 

examples/vite-app/src/examples/EasyConnect/CustomConnectionLine.tsx

@@ -1,4 +1,4 @@
-import { ConnectionLineComponentProps, getStraightPath } from 'reactflow';
+import { ConnectionLineComponentProps, getStraightPath } from '@xyflow/react';
 
 function CustomConnectionLine({ fromX, fromY, toX, toY, connectionLineStyle }: ConnectionLineComponentProps) {
   const [edgePath] = getStraightPath({

examples/vite-app/src/examples/EasyConnect/CustomNode.tsx

@@ -1,4 +1,4 @@
-import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow';
+import { Handle, NodeProps, Position, ReactFlowState, useStore } from '@xyflow/react';
 
 const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionStartHandle?.nodeId;
 

examples/vite-app/src/examples/EasyConnect/FloatingEdge.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useStore, getStraightPath, EdgeProps } from 'reactflow';
+import { useStore, getStraightPath, EdgeProps } from '@xyflow/react';
 
 import { getEdgeParams } from './utils.js';
 

examples/vite-app/src/examples/EasyConnect/index.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
-import ReactFlow, { Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from 'reactflow';
+import { ReactFlow, Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 import FloatingEdge from './FloatingEdge';
 import CustomConnectionLine from './CustomConnectionLine';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 import './style.css';
 
 const initialNodes: Node[] = [

examples/vite-app/src/examples/EasyConnect/utils.tsx

@@ -1,4 +1,4 @@
-import { Node, Position, MarkerType, XYPosition } from 'reactflow';
+import { Node, Position, MarkerType, XYPosition } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import { FC, MouseEvent } from 'react';
-import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
+import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/EdgeRenderer/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   Background,
   MiniMap,
@@ -11,7 +12,7 @@ import ReactFlow, {
   Node,
   useEdgesState,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

examples/vite-app/src/examples/EdgeRouting/index.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { Node, Edge, Position, MarkerType } from 'reactflow';
+import { ReactFlow, Node, Edge, Position, MarkerType } from '@xyflow/react';
 
 const nodes: Node[] = [
   // LTR

examples/vite-app/src/examples/EdgeTypes/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   Controls,
   MiniMap,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Edge,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import { getElements } from './utils';
 

examples/vite-app/src/examples/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from 'reactflow';
+import { Edge, Node, Position } from '@xyflow/react';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;

examples/vite-app/src/examples/Edges/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { BaseEdge, EdgeProps, getBezierPath } from 'reactflow';
+import { BaseEdge, EdgeProps, getBezierPath } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/Edges/CustomEdge2.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from 'reactflow';
+import { EdgeProps, getBezierPath, EdgeText, BaseEdge } from '@xyflow/react';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/vite-app/src/examples/Edges/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   Background,
   MiniMap,
@@ -11,7 +12,7 @@ import ReactFlow, {
   Node,
   useEdgesState,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

examples/vite-app/src/examples/Empty/index.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, CSSProperties, useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   BackgroundVariant,
   Controls,
@@ -11,7 +12,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/Figma/index.tsx

@@ -1,4 +1,4 @@
-import ReactFlow, { Background, BackgroundVariant, Node, Edge, SelectionMode } from 'reactflow';
+import { ReactFlow, Background, BackgroundVariant, Node, Edge, SelectionMode } from '@xyflow/react';
 
 const MULTI_SELECT_KEY = ['Meta', 'Shift'];
 

examples/vite-app/src/examples/FloatingEdges/FloatingConnectionLine.tsx

@@ -1,16 +1,10 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
-import { getBezierPath, ConnectionLineComponentProps, Node } from 'reactflow';
+import { getBezierPath, ConnectionLineComponentProps, Node } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 
-const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
+const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({ toX, toY, fromPosition, toPosition, fromNode }) => {
-  targetX,
+  if (!fromNode) {
-  targetY,
-  sourcePosition,
-  targetPosition,
-  sourceNode,
-}) => {
-  if (!sourceNode) {
     return null;
   }
 
@@ -18,23 +12,24 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
     id: 'connection-target',
     width: 1,
     height: 1,
-    position: { x: targetX, y: targetY },
+    position: { x: toX, y: toY },
   } as Node;
 
-  const { sx, sy } = getEdgeParams(sourceNode, targetNode);
+  const { sx, sy } = getEdgeParams(fromNode, targetNode);
-  const d = getBezierPath({
+
+  const [path] = getBezierPath({
     sourceX: sx,
     sourceY: sy,
-    sourcePosition,
+    sourcePosition: fromPosition,
-    targetPosition,
+    targetPosition: toPosition,
-    targetX,
+    targetX: toX,
-    targetY,
+    targetY: toY,
   });
 
   return (
     <g>
-      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
+      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={path} />
-      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
     </g>
   );
 };

examples/vite-app/src/examples/FloatingEdges/FloatingEdge.tsx

@@ -1,5 +1,5 @@
 import { FC, useMemo, CSSProperties } from 'react';
-import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'reactflow';
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@xyflow/react';
 
 import { getEdgeParams } from './utils';
 

examples/vite-app/src/examples/FloatingEdges/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   addEdge,
   ReactFlowInstance,
@@ -8,7 +9,7 @@ import ReactFlow, {
   Connection,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import styles from './style.module.css';
 

examples/vite-app/src/examples/FloatingEdges/utils.ts

@@ -1,4 +1,4 @@
-import { Position, XYPosition, Node, Edge } from 'reactflow';
+import { Position, XYPosition, Node, Edge } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/vite-app/src/examples/Hidden/index.tsx

@@ -1,6 +1,16 @@
 import { useState, useEffect, useCallback } from 'react';
 
-import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
+import {
+  ReactFlow,
+  addEdge,
+  Connection,
+  Edge,
+  Node,
+  useNodesState,
+  useEdgesState,
+  MiniMap,
+  Controls,
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/Interaction/index.tsx

@@ -1,5 +1,6 @@
 import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Connection,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   Controls,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {
@@ -36,7 +37,7 @@ const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edg
 const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
 const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
-const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
+const onMoveEnd = (_: TouchEvent | MouseEvent | null, viewport: Viewport) => console.log('onMoveEnd', viewport);
 
 const InteractionFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);

examples/vite-app/src/examples/InteractiveMinimap/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   BackgroundVariant,
@@ -9,7 +10,7 @@ import ReactFlow, {
   Edge,
   useReactFlow,
   XYPosition,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
@@ -139,8 +140,7 @@ const BasicFlow = () => {
       fitView
     >
       <Background variant={BackgroundVariant.Dots} />
-      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable
+      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable inversePan={inverse} />
-               inversePan={inverse}/>
       <Controls />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

examples/vite-app/src/examples/Intersection/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   Controls,
@@ -8,7 +9,7 @@ import ReactFlow, {
   Edge,
   useReactFlow,
   useNodesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import './style.css';
 

examples/vite-app/src/examples/Layouting/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import dagre from 'dagre';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   ReactFlowProvider,
   addEdge,
@@ -13,7 +14,7 @@ import ReactFlow, {
   EdgeMarker,
   Panel,
   useReactFlow,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import initialItems from './initial-elements';
 

examples/vite-app/src/examples/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, XYPosition, MarkerType } from 'reactflow';
+import { Node, Edge, XYPosition, MarkerType } from '@xyflow/react';
 
 const position: XYPosition = { x: 0, y: 0 };
 

examples/vite-app/src/examples/MultiFlows/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-
+import {
-import ReactFlow, {
+  ReactFlow,
   Background,
   addEdge,
   Node,
@@ -11,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   MarkerType,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import styles from './multiflows.module.css';
 

examples/vite-app/src/examples/NestedNodes/index.tsx

@@ -1,5 +1,6 @@
 import { useState, MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   MiniMap,
   Background,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Edge,
   ReactFlowInstance,
   Connection,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/NodeResizer/CustomResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react';
 
 import ResizeIcon from './ResizeIcon';
 

examples/vite-app/src/examples/NodeResizer/DefaultResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizer } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizer } from '@xyflow/react';
 
 const DefaultResizerNode: FC<NodeProps> = ({ data, selected }) => {
   return (

examples/vite-app/src/examples/NodeResizer/HorizontalResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react';
 
 const HorizontalResizerNode: FC<NodeProps> = ({ data }) => {
   return (

examples/vite-app/src/examples/NodeResizer/VerticalResizer.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeResizeControl } from 'reactflow';
+import { Handle, Position, NodeProps, NodeResizeControl } from '@xyflow/react';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (

examples/vite-app/src/examples/NodeResizer/index.tsx

@@ -1,12 +1,22 @@
 import { useCallback, useState } from 'react';
-import ReactFlow, { Controls, addEdge, Connection, useNodesState, useEdgesState, Panel, Node, Edge } from 'reactflow';
+import {
+  ReactFlow,
+  Controls,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Panel,
+  Node,
+  Edge,
+} from '@xyflow/react';
 
 import DefaultResizer from './DefaultResizer';
 import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 
 const nodeTypes = {
   defaultResizer: DefaultResizer,

examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx

@@ -1,5 +1,5 @@
 import { memo, FC } from 'react';
-import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
+import { Handle, Position, NodeProps, NodeToolbar } from '@xyflow/react';
 
 const CustomNode: FC<NodeProps> = ({ id, data }) => {
   return (

examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx

@@ -1,4 +1,4 @@
-import { NodeToolbar, ReactFlowState, useStore } from 'reactflow';
+import { NodeToolbar, ReactFlowState, useStore } from '@xyflow/react';
 
 const selectedNodesSelector = (state: ReactFlowState) =>
   state

examples/vite-app/src/examples/NodeToolbar/index.tsx

@@ -1,4 +1,5 @@
-import ReactFlow, {
+import {
+  ReactFlow,
   MiniMap,
   Background,
   BackgroundVariant,
@@ -8,7 +9,7 @@ import ReactFlow, {
   NodeTypes,
   Position,
   NodeOrigin,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 import SelectedNodesToolbar from './SelectedNodesToolbar';

examples/vite-app/src/examples/NodeTypeChange/index.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, useCallback } from 'react';
-import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx

@@ -1,5 +1,6 @@
 import { useState, CSSProperties, FC, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Position,
@@ -9,7 +10,7 @@ import ReactFlow, {
   NodeTypes,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/Overview/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Viewport,
@@ -13,7 +14,7 @@ import ReactFlow, {
   Controls,
   Background,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
 const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
@@ -36,8 +37,8 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
-const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
+const onMoveStart = (_: MouseEvent | TouchEvent | null, viewport: Viewport) => console.log('zoom/move start', viewport);
-const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent | null, viewport: Viewport) => console.log('zoom/move end', viewport);
 const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
 const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
 const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);

examples/vite-app/src/examples/Provider/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useReactFlow, useStore } from 'reactflow';
+import { useReactFlow, useStore } from '@xyflow/react';
 
 import styles from './provider.module.css';
 

examples/vite-app/src/examples/Provider/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   ReactFlowProvider,
   addEdge,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import Sidebar from './Sidebar';
 

examples/vite-app/src/examples/SaveRestore/Controls.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'reactflow';
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@xyflow/react';
 import localforage from 'localforage';
 
 import styles from './save.module.css';

examples/vite-app/src/examples/SaveRestore/index.tsx

@@ -1,5 +1,14 @@
 import { useCallback } from 'react';
-import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Node,
+  addEdge,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+} from '@xyflow/react';
 
 import Controls from './Controls';
 

examples/vite-app/src/examples/Stress/index.tsx

@@ -1,5 +1,6 @@
 import { useState, CSSProperties, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   ReactFlowInstance,
   Edge,
   Node,
@@ -12,7 +13,7 @@ import ReactFlow, {
   Controls,
   Background,
   MiniMap,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import { getNodesAndEdges } from './utils';
 

examples/vite-app/src/examples/Stress/utils.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from 'reactflow';
+import { Node, Edge } from '@xyflow/react';
 
 type ElementsCollection = {
   nodes: Node[];

examples/vite-app/src/examples/Subflow/DebugNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from 'reactflow';
+import { Handle, NodeProps, Position } from '@xyflow/react';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {

examples/vite-app/src/examples/Subflow/index.tsx

@@ -1,5 +1,6 @@
 import { useState, MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Node,
   Edge,
@@ -12,7 +13,7 @@ import ReactFlow, {
   MiniMap,
   Background,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import DebugNode from './DebugNode';
 

examples/vite-app/src/examples/Switch/index.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/vite-app/src/examples/TouchDevice/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@xyflow/react';
 
 import styles from './touch-device.module.css';
 

examples/vite-app/src/examples/Undirectional/CustomNode.tsx

@@ -1,6 +1,5 @@
-import React, { memo, FC, CSSProperties } from 'react';
+import { memo, FC, CSSProperties } from 'react';
-
+import { Handle, Position, NodeProps } from '@xyflow/react';
-import { Handle, Position, NodeProps } from 'reactflow';
 
 const nodeStyles: CSSProperties = {
   padding: '10px 15px',

examples/vite-app/src/examples/Undirectional/index.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   useReactFlow,
   NodeTypes,
   addEdge,
@@ -12,7 +13,7 @@ import ReactFlow, {
   updateEdge,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 

examples/vite-app/src/examples/UpdatableEdge/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Controls,
   updateEdge,
   addEdge,
@@ -12,7 +13,7 @@ import ReactFlow, {
   NodeChange,
   EdgeChange,
   HandleType,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/UpdateNode/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 import styles from './updatenode.module.css';
 

examples/vite-app/src/examples/UseKeyPress/index.tsx

@@ -1,4 +1,4 @@
-import { useKeyPress } from 'reactflow';
+import { useKeyPress } from '@xyflow/react';
 
 const UseKeyPressComponent = () => {
   const metaPressed = useKeyPress(['Meta']);

examples/vite-app/src/examples/UseNodesInit/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   MiniMap,
   Node,
@@ -10,7 +11,7 @@ import ReactFlow, {
   useEdgesState,
   OnConnect,
   useNodesInitialized,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/UseOnSelectionChange/CustomNode.tsx

@@ -1,5 +1,5 @@
-import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
+import { useState, memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@xyflow/react';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 

examples/vite-app/src/examples/UseOnSelectionChange/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   ReactFlowProvider,
   Node,
@@ -9,7 +10,7 @@ import ReactFlow, {
   useEdgesState,
   useOnSelectionChange,
   OnSelectionChangeParams,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {
@@ -67,8 +68,8 @@ const WrappedFlow = () => (
     <Flow />
     <SelectionLogger />
     <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <input type={'text'} placeholder={'name'} />
+      <input type={'text'} placeholder={'name'} />
-      </div>
+    </div>
   </ReactFlowProvider>
 );
 

examples/vite-app/src/examples/UseReactFlow/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, MouseEvent, useEffect } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   MiniMap,
   Node,
@@ -11,7 +12,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   Panel,
-} from 'reactflow';
+} from '@xyflow/react';
 
 const initialNodes: Node[] = [
   {

examples/vite-app/src/examples/UseUpdateNodeInternals/CustomNode.tsx

@@ -1,5 +1,5 @@
 import { useState, memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@xyflow/react';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 

examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx

@@ -1,5 +1,6 @@
 import { useCallback, MouseEvent } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   NodeTypes,
   addEdge,
   useReactFlow,
@@ -10,7 +11,7 @@ import ReactFlow, {
   Position,
   useNodesState,
   useEdgesState,
-} from 'reactflow';
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 

examples/vite-app/src/examples/Validation/ConnectionStatus.tsx

@@ -1,4 +1,4 @@
-import { ReactFlowState, useStore } from 'reactflow';
+import { ReactFlowState, useStore } from '@xyflow/react';
 import { shallow } from 'zustand/shallow';
 
 import styles from './validation.module.css';

examples/vite-app/src/examples/Validation/index.tsx

@@ -1,5 +1,6 @@
 import { FC, useCallback, useState } from 'react';
-import ReactFlow, {
+import {
+  ReactFlow,
   addEdge,
   Handle,
   Connection,
@@ -14,7 +15,8 @@ import ReactFlow, {
   OnConnect,
   updateEdge,
   Edge,
-} from 'reactflow';
+  IsValidConnection,
+} from '@xyflow/react';
 
 import ConnectionStatus from './ConnectionStatus';
 
@@ -27,7 +29,7 @@ const initialNodes: Node[] = [
   { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null },
 ];
 
-const isValidConnection = (connection: Connection) => connection.target === 'B';
+const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
 
 const CustomInput: FC<NodeProps> = () => (
   <>

examples/vite-app/src/main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 
 import './index.css';
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>

examples/vite-app/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@reactflow/monorepo",
+  "name": "@xyflow/monorepo",
   "version": "0.0.0",
   "description": "A highly customizable React library for building node-based editors and interactive flow charts",
   "repository": "git@github.com:wbkd/react-flow.git",

packages/background/.eslintrc.js

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

packages/background/CHANGELOG.md

@@ -1,216 +0,0 @@
-# @reactflow/background
-
-## 11.2.2
-
-### Patch Changes
-
-- Updated dependencies [[`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba), [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48), [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b)]:
-  - @reactflow/core@11.7.2
-
-## 11.2.1
-
-### Patch Changes
-
-- Updated dependencies [[`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb), [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c), [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70), [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614)]:
-  - @reactflow/core@11.7.1
-
-## 11.2.0
-
-### Minor Changes
-
-- [#2941](https://github.com/wbkd/react-flow/pull/2941) Thanks [@Elringus](https://github.com/Elringus)! - add `id` and `offset` props
-
-### Patch Changes
-
-- Updated dependencies [[`098eee3d`](https://github.com/wbkd/react-flow/commit/098eee3d41dabc870777b081796401ff13b5a776), [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb), [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402), [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38), [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065), [`c22e1c28`](https://github.com/wbkd/react-flow/commit/c22e1c28c5555a638c2a8e82c3bfc986b3965d36)]:
-  - @reactflow/core@11.7.0
-
-## 11.1.10
-
-### Patch Changes
-
-- Updated dependencies
-
-## 11.1.9
-
-### Patch Changes
-
-- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) Thanks [@moklick](https://github.com/moklick)! - add data-testid for controls, minimap and background
-
-- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
-  - @reactflow/core@11.6.0
-
-## 11.1.8
-
-### Patch Changes
-
-- Updated dependencies [[`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6), [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6), [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f), [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5), [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96), [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4)]:
-  - @reactflow/core@11.5.5
-
-## 11.1.7
-
-### Patch Changes
-
-- Updated dependencies [[`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e)]:
-  - @reactflow/core@11.5.4
-
-## 11.1.6
-
-### Patch Changes
-
-- Updated dependencies [[`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c), [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd), [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2)]:
-  - @reactflow/core@11.5.3
-
-## 11.1.5
-
-### Patch Changes
-
-- [#2792](https://github.com/wbkd/react-flow/pull/2792) [`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a) - Accept React 17 types as dev dependency
-
-- Updated dependencies [[`d8c679b4`](https://github.com/wbkd/react-flow/commit/d8c679b4c90c5b57d4b51e4aaa988243d6eaff5a)]:
-  - @reactflow/core@11.5.2
-
-## 11.1.4
-
-### Patch Changes
-
-- Updated dependencies [[`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5)]:
-  - @reactflow/core@11.5.1
-
-## 11.1.3
-
-### Patch Changes
-
-- Updated dependencies [[`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694), [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52), [`4c516882`](https://github.com/wbkd/react-flow/commit/4c516882d2bbf426c1832a53ad40763cc1abef92)]:
-  - @reactflow/core@11.5.0
-
-## 11.1.2
-
-### Patch Changes
-
-- [#2741](https://github.com/wbkd/react-flow/pull/2741) [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39) - chore(dependencies): update and cleanup
-
-- Updated dependencies [[`e34a3072`](https://github.com/wbkd/react-flow/commit/e34a30726dc55184f59adc4f16ca5215a7c42805), [`e2aff6c1`](https://github.com/wbkd/react-flow/commit/e2aff6c1e4ce54b57b724b2624367ee5fefd1c39)]:
-  - @reactflow/core@11.4.2
-
-## 11.1.1
-
-### Patch Changes
-
-- Updated dependencies [[`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba), [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086)]:
-  - @reactflow/core@11.4.1
-
-## 11.1.0
-
-### Patch Changes
-
-- Updated dependencies [[`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff), [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]:
-  - @reactflow/core@11.4.0
-
-## 11.1.0-next.1
-
-### Minor Changes
-
-- panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button)
-- selection: do not include hidden nodes
-- minimap: fix onNodeClick for nodes outside the viewport
-- keys: allow multi select when input is focused
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @reactflow/core@11.4.0-next.1
-
-## 11.0.8-next.0
-
-### Patch Changes
-
-- Updated dependencies [[`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0), [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493), [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9), [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c)]:
-  - @reactflow/core@11.4.0-next.0
-
-## 11.0.7
-
-### Patch Changes
-
-- Updated dependencies [[`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a), [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae), [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d), [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18), [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6)]:
-  - @reactflow/core@11.3.2
-
-## 11.0.6
-
-### Patch Changes
-
-- Updated dependencies [[`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4), [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f), [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af)]:
-  - @reactflow/core@11.3.1
-
-## 11.0.5
-
-### Patch Changes
-
-- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
-  - @reactflow/core@11.3.0
-
-## 11.0.4
-
-### Patch Changes
-
-- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
-  - @reactflow/core@11.2.0
-
-## 11.0.3
-
-### Patch Changes
-
-- cleanup types
-- cleanup rf id handling
-- Updated dependencies:
-  - @reactflow/core@11.1.2
-
-## 11.0.2
-
-### Patch Changes
-
-- Updated dependencies:
-  - @reactflow/core@11.1.1
-
-## 11.0.1
-
-### Patch Changes
-
-- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - default gap = 20
-
-- Updated dependencies [[`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab), [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4)]:
-  - @reactflow/core@11.1.0
-
-## 11.0.0
-
-### Major Changes
-
-- **Better [Accessibility](/docs/guides/accessibility)**
-  - Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard.
-  - `aria-` default attributes for all elements and controllable via `ariaLabel` options
-  - Keyboard controls can be disabled with the new `disableKeyboardA11y` prop
-- **Better selectable edges** via new edge option: `interactionWidth` - renders invisible edge that makes it easier to interact
-- **Better routing for smoothstep and step edges**: https://twitter.com/reactflowdev/status/1567535405284614145
-- **Nicer edge updating behaviour**: https://twitter.com/reactflowdev/status/1564966917517021184
-- **Node origin**: The new `nodeOrigin` prop lets you control the origin of a node. Useful for layouting.
-- **New background pattern**: `BackgroundVariant.Cross` variant
-- **[`useOnViewportChange`](/docs/api/hooks/use-on-viewport-change) hook** - handle viewport changes within a component
-- **[`useOnSelectionChange`](/docs/api/hooks/use-on-selection-change) hook** - handle selection changes within a component
-- **[`useNodesInitialized`](/docs/api/hooks/use-nodes-initialized) hook** - returns true if all nodes are initialized and if there is more than one node
-- **Deletable option** for Nodes and edges
-- **New Event handlers**: `onPaneMouseEnter`, `onPaneMouseMove` and `onPaneMouseLeave`
-- **Edge `pathOptions`** for `smoothstep` and `default` edges
-- **Nicer cursor defaults**: Cursor is grabbing, while dragging a node or panning
-- **Pane moveable** with middle mouse button
-- **Pan over nodes** when they are not draggable (`draggable=false` or `nodesDraggable` false)
-- **[`<BaseEdge />`](/docs/api/edges/base-edge) component** that makes it easier to build custom edges
-- **[Separately installable packages](/docs/overview/packages/)**
-  - @reactflow/core
-  - @reactflow/background
-  - @reactflow/controls
-  - @reactflow/minimap
-
-### Patch Changes
-
-- Updated dependencies:
-  - @reactflow/core@11.0.0

packages/background/README.md

@@ -1,10 +0,0 @@
-# @reactflow/background
-
-Background component for React Flow.
-
-## Installation 
-
-```sh 
-npm install @reactflow/background
-```
-

packages/background/package.json

@@ -1,65 +0,0 @@
-{
-  "name": "@reactflow/background",
-  "version": "11.2.2",
-  "description": "Background component with different variants for React Flow",
-  "keywords": [
-    "react",
-    "node-based UI",
-    "graph",
-    "diagram",
-    "workflow",
-    "react-flow"
-  ],
-  "files": [
-    "dist"
-  ],
-  "source": "src/index.tsx",
-  "main": "dist/umd/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "sideEffects": [
-    "*.css"
-  ],
-  "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",
-    "clean": "rimraf dist .turbo"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wbkd/react-flow.git",
-    "directory": "packages/background"
-  },
-  "dependencies": {
-    "@reactflow/core": "workspace:*",
-    "classcat": "^5.0.3",
-    "zustand": "^4.3.1"
-  },
-  "devDependencies": {
-    "@reactflow/eslint-config": "workspace:*",
-    "@reactflow/rollup-config": "workspace:*",
-    "@reactflow/tsconfig": "workspace:*",
-    "@types/node": "^18.7.16",
-    "@types/react": ">=17",
-    "react": "^18.2.0",
-    "typescript": "^4.9.4"
-  },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
-  },
-  "rollup": {
-    "globals": {
-      "zustand": "Zustand",
-      "zustand/shallow": "zustandShallow",
-      "classcat": "cc"
-    },
-    "name": "ReactFlowBackground"
-  }
-}

packages/background/tsconfig.json

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

packages/controls/.eslintrc.js

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