diff --git a/.npmrc b/.npmrc
index 8d10578a..acb88cc7 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,2 @@
-registry="https://registry.npmjs.com/"
 legacy-peer-deps=true
 strict-peer-dependencies=false
\ No newline at end of file
diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx
index 86aef137..6dc30709 100644
--- a/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx
+++ b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx
@@ -7,7 +7,7 @@ const sourceHandleStyleB: CSSProperties = {
   left: 'auto',
 };
 
-const CustomNode: FC<NodeProps> = ({ data, positionAbsolute }) => {
+const CustomNode: FC<NodeProps> = ({ data, positionAbsoluteX, positionAbsoluteY }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
@@ -18,7 +18,7 @@ const CustomNode: FC<NodeProps> = ({ data, positionAbsolute }) => {
         <div>
           Position:{' '}
           <strong>
-            {positionAbsolute.x.toFixed(2)},{positionAbsolute.y.toFixed(2)}
+            {positionAbsoluteX.toFixed(2)},{positionAbsoluteY.toFixed(2)}
           </strong>
         </div>
       </div>
diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts
index 4bab00f5..2f3d55ba 100644
--- a/examples/react/src/App/routes.ts
+++ b/examples/react/src/App/routes.ts
@@ -21,7 +21,6 @@ import Interaction from '../examples/Interaction';
 import Intersection from '../examples/Intersection';
 import Layouting from '../examples/Layouting';
 import MultiFlows from '../examples/MultiFlows';
-import NestedNodes from '../examples/NestedNodes';
 import NodeResizer from '../examples/NodeResizer';
 import NodeTypeChange from '../examples/NodeTypeChange';
 import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
@@ -44,6 +43,7 @@ import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
+import UseConnection from '../examples/UseConnection';
 import UseNodesInitialized from '../examples/UseNodesInit';
 import UseNodesData from '../examples/UseNodesData';
 import UseHandleConnections from '../examples/UseHandleConnections';
@@ -185,11 +185,6 @@ const routes: IRoute[] = [
     path: 'multiflows',
     component: MultiFlows,
   },
-  {
-    name: 'Nested Nodes',
-    path: 'nested-nodes',
-    component: NestedNodes,
-  },
   {
     name: 'Node Type Change',
     path: 'nodetype-change',
@@ -260,6 +255,11 @@ const routes: IRoute[] = [
     path: 'update-node',
     component: UpdateNode,
   },
+  {
+    name: 'useConnection',
+    path: 'use-connection',
+    component: UseConnection,
+  },
   {
     name: 'useNodesInitialized',
     path: 'use-nodes-initialized',
diff --git a/examples/react/src/examples/CustomMiniMapNode/index.tsx b/examples/react/src/examples/CustomMiniMapNode/index.tsx
index d8f584b6..0b62196f 100644
--- a/examples/react/src/examples/CustomMiniMapNode/index.tsx
+++ b/examples/react/src/examples/CustomMiniMapNode/index.tsx
@@ -32,8 +32,8 @@ const CustomMiniMapNode = ({ x, y, width, height, color }: MiniMapNodeProps) =>
 );
 
 const CustomMiniMapNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const addRandomNode = () => {
diff --git a/examples/react/src/examples/CustomNode/index.tsx b/examples/react/src/examples/CustomNode/index.tsx
index 9c62f46a..ce7d0f62 100644
--- a/examples/react/src/examples/CustomNode/index.tsx
+++ b/examples/react/src/examples/CustomNode/index.tsx
@@ -12,6 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   Background,
+  Edge,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -33,8 +34,8 @@ const nodeTypes = {
 };
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const [bgColor, setBgColor] = useState<string>(initBgColor);
 
diff --git a/examples/react/src/examples/DragNDrop/index.tsx b/examples/react/src/examples/DragNDrop/index.tsx
index d11cd902..83c7bb4e 100644
--- a/examples/react/src/examples/DragNDrop/index.tsx
+++ b/examples/react/src/examples/DragNDrop/index.tsx
@@ -39,7 +39,7 @@ const nodeOrigin: NodeOrigin = [0.5, 0.5];
 const DnDFlow = () => {
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
   const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
diff --git a/examples/react/src/examples/EasyConnect/utils.tsx b/examples/react/src/examples/EasyConnect/utils.tsx
index d7f3e689..6d87795b 100644
--- a/examples/react/src/examples/EasyConnect/utils.tsx
+++ b/examples/react/src/examples/EasyConnect/utils.tsx
@@ -4,8 +4,12 @@ import { Node, Position, MarkerType, XYPosition } from '@xyflow/react';
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode;
-  const intersectionNodePosition = intersectionNode.computed?.positionAbsolute!;
+
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight,
+    positionAbsolute: intersectionNodePosition,
+  } = intersectionNode.computed || {};
   const targetPosition = targetNode.computed?.positionAbsolute!;
 
   const w = intersectionNodeWidth! / 2;
diff --git a/examples/react/src/examples/Empty/index.tsx b/examples/react/src/examples/Empty/index.tsx
index e162daad..4dcd996e 100644
--- a/examples/react/src/examples/Empty/index.tsx
+++ b/examples/react/src/examples/Empty/index.tsx
@@ -26,8 +26,8 @@ const buttonStyle: CSSProperties = {
 };
 
 const EmptyFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const addRandomNode = () => {
diff --git a/examples/react/src/examples/FloatingEdges/utils.ts b/examples/react/src/examples/FloatingEdges/utils.ts
index 0a2d6c03..c8a6e1c1 100644
--- a/examples/react/src/examples/FloatingEdges/utils.ts
+++ b/examples/react/src/examples/FloatingEdges/utils.ts
@@ -5,11 +5,11 @@ import { Position, XYPosition, Node, Edge } from '@xyflow/react';
 function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
 
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight,
-    position: intersectionNodePosition,
-  } = intersectionNode;
+  const { position: intersectionNodePosition } = intersectionNode;
+  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.computed ?? {
+    width: 0,
+    height: 0,
+  };
   const targetPosition = targetNode.position;
 
   const w = (intersectionNodeWidth ?? 0) / 2;
diff --git a/examples/react/src/examples/Hidden/index.tsx b/examples/react/src/examples/Hidden/index.tsx
index 586f300f..f00d8bae 100644
--- a/examples/react/src/examples/Hidden/index.tsx
+++ b/examples/react/src/examples/Hidden/index.tsx
@@ -48,8 +48,10 @@ const initialEdges: Edge[] = [
 
 const setHidden = (hidden: boolean) => (els: any[]) =>
   els.map((e: any) => {
-    e.hidden = hidden;
-    return e;
+    return {
+      ...e,
+      hidden,
+    };
   });
 
 const HiddenFlow = () => {
diff --git a/examples/react/src/examples/Layouting/index.tsx b/examples/react/src/examples/Layouting/index.tsx
index 4ec3e14c..7383e41e 100644
--- a/examples/react/src/examples/Layouting/index.tsx
+++ b/examples/react/src/examples/Layouting/index.tsx
@@ -56,16 +56,16 @@ const LayoutFlow = () => {
 
     const layoutedNodes = nodes.map((node) => {
       const nodeWithPosition = dagreGraph.node(node.id);
-      node.targetPosition = isHorizontal ? Position.Left : Position.Top;
-      node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
-      // we need to pass a slightly different position in order to notify react flow about the change
-      // @TODO how can we change the position handling so that we dont need this hack?
-      node.position = {
-        x: nodeWithPosition.x + Math.random() / 1000,
-        y: nodeWithPosition.y,
-      };
 
-      return node;
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: {
+          x: nodeWithPosition.x,
+          y: nodeWithPosition.y,
+        },
+      };
     });
 
     setNodes(layoutedNodes);
diff --git a/examples/react/src/examples/NestedNodes/index.tsx b/examples/react/src/examples/NestedNodes/index.tsx
deleted file mode 100644
index 56bc3ca8..00000000
--- a/examples/react/src/examples/NestedNodes/index.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { useState, MouseEvent, useCallback } from 'react';
-import {
-  ReactFlow,
-  Controls,
-  MiniMap,
-  Background,
-  addEdge,
-  useNodesState,
-  useEdgesState,
-  Node,
-  Edge,
-  ReactFlowInstance,
-  Connection,
-} from '@xyflow/react';
-
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-
-const initialNodes: Node[] = [
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'Node 1' },
-    position: { x: 250, y: 5 },
-    className: 'light',
-  },
-  {
-    id: '2',
-    data: { label: 'Node 2' },
-    position: { x: 100, y: 100 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: 200, height: 200 },
-  },
-  {
-    id: '2a',
-    data: { label: 'Node 2a' },
-    position: { x: 10, y: 50 },
-    parentNode: '2',
-  },
-  {
-    id: '3',
-    data: { label: 'Node 3' },
-    position: { x: 320, y: 100 },
-    className: 'light',
-  },
-  {
-    id: '4',
-    data: { label: 'Node 4' },
-    position: { x: 320, y: 200 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: 300, height: 300 },
-  },
-  {
-    id: '4a',
-    data: { label: 'Node 4a' },
-    position: { x: 15, y: 65 },
-    className: 'light',
-    parentNode: '4',
-    extent: 'parent',
-  },
-  {
-    id: '4b',
-    data: { label: 'Node 4b' },
-    position: { x: 15, y: 120 },
-    className: 'light',
-    style: {
-      backgroundColor: 'rgba(255, 0, 255, 0.7)',
-      height: 150,
-      width: 270,
-    },
-    parentNode: '4',
-  },
-  {
-    id: '4b1',
-    data: { label: 'Node 4b1' },
-    position: { x: 20, y: 40 },
-    className: 'light',
-    parentNode: '4b',
-  },
-  {
-    id: '4b2',
-    data: { label: 'Node 4b2' },
-    position: { x: 100, y: 100 },
-    className: 'light',
-    parentNode: '4b',
-  },
-];
-
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e2a-4a', source: '2a', target: '4a' },
-  { id: 'e3-4', source: '3', target: '4' },
-  { id: 'e3-4b', source: '3', target: '4b' },
-  { id: 'e4a-4b1', source: '4a', target: '4b1' },
-  { id: 'e4a-4b2', source: '4a', target: '4b2' },
-  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-];
-
-const NestedFlow = () => {
-  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
-  const onConnect = useCallback(
-    (connection: Connection) => {
-      setEdges((eds) => addEdge(connection, eds));
-    },
-    [setEdges]
-  );
-  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
-
-  const updatePos = () => {
-    setNodes((nds) => {
-      return nds.map((n) => {
-        n.position = {
-          x: Math.random() * 400,
-          y: Math.random() * 400,
-        };
-
-        return n;
-      });
-    });
-  };
-
-  const logToObject = () => console.log(rfInstance?.toObject());
-  const resetTransform = () => rfInstance?.setViewport({ x: 0, y: 0, zoom: 1 });
-
-  const toggleClassnames = () => {
-    setNodes((nds) => {
-      return nds.map((n) => {
-        n.className = n.className === 'light' ? 'dark' : 'light';
-        return n;
-      });
-    });
-  };
-
-  const toggleChildNodes = () => {
-    setNodes((nds) => {
-      return nds.map((n) => {
-        n.hidden = !!n.parentNode && !n.hidden;
-        return n;
-      });
-    });
-  };
-
-  return (
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onInit={onInit}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onNodeClick={onNodeClick}
-      onEdgeClick={onEdgeClick}
-      onConnect={onConnect}
-      onNodeDragStop={onNodeDragStop}
-      className="react-flow-basic-example"
-      minZoom={0.2}
-      maxZoom={4}
-      onlyRenderVisibleElements={false}
-    >
-      <MiniMap pannable />
-      <Controls />
-      <Background />
-
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={resetTransform} style={{ marginRight: 5 }}>
-          reset transform
-        </button>
-        <button onClick={updatePos} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
-          toggle classnames
-        </button>
-        <button style={{ marginRight: 5 }} onClick={toggleChildNodes}>
-          toggleChildNodes
-        </button>
-        <button onClick={logToObject}>toObject</button>
-      </div>
-    </ReactFlow>
-  );
-};
-
-export default NestedFlow;
diff --git a/examples/react/src/examples/NodeTypesObjectChange/index.tsx b/examples/react/src/examples/NodeTypesObjectChange/index.tsx
index 01a0d993..46b5cd5e 100644
--- a/examples/react/src/examples/NodeTypesObjectChange/index.tsx
+++ b/examples/react/src/examples/NodeTypesObjectChange/index.tsx
@@ -66,7 +66,7 @@ const nodeTypesObjects: NodeTypesObject = {
 const NodeTypeChangeFlow = () => {
   const [nodeTypesId, setNodeTypesId] = useState<string>('a');
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
   const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
 
diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx
index e4879ace..3f5c72d0 100644
--- a/examples/react/src/examples/Overview/index.tsx
+++ b/examples/react/src/examples/Overview/index.tsx
@@ -15,6 +15,8 @@ import {
   Background,
   MiniMap,
   ConnectionMode,
+  OnBeforeDelete,
+  OnDelete,
 } from '@xyflow/react';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
@@ -45,8 +47,12 @@ const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge m
 const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
 const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
 const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
-const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
-const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
+const onBeforeDelete: OnBeforeDelete = async ({ nodes, edges }) => {
+  console.log('on before delete', nodes, edges);
+  const deleteElements = confirm('Do you want to remove the selected elements?');
+  return deleteElements;
+};
+const onDelete: OnDelete = ({ nodes, edges }) => console.log('on delete', nodes, edges);
 const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX, e.clientY);
 
 const initialNodes: Node[] = [
@@ -226,8 +232,8 @@ const OverviewFlow = () => {
       fitViewOptions={{ padding: 0.1 /*nodes: [{ id: '1' }]*/ }}
       attributionPosition="top-right"
       maxZoom={Infinity}
-      onNodesDelete={onNodesDelete}
-      onEdgesDelete={onEdgesDelete}
+      onBeforeDelete={onBeforeDelete}
+      onDelete={onDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
       <MiniMap nodeBorderRadius={2} />
diff --git a/examples/react/src/examples/Stress/index.tsx b/examples/react/src/examples/Stress/index.tsx
index c1c24d86..14b56b09 100644
--- a/examples/react/src/examples/Stress/index.tsx
+++ b/examples/react/src/examples/Stress/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import {
   ReactFlow,
   Edge,
@@ -16,6 +16,7 @@ import {
 } from '@xyflow/react';
 
 import { getNodesAndEdges } from './utils';
+import { FrameRecorder, generateMouseEventParamsTargetingNode, nextFrame } from './performanceUtils';
 
 const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(25, 25);
 
@@ -25,6 +26,166 @@ const StressFlow = () => {
   const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => addEdge(connection, eds));
   }, []);
+
+  const dragInViewport = async () => {
+    // Note: selecting specifically node 18, as it’s normally located in the right part of the viewport –
+    // which means dragging it left is safe to do without scrolling the viewport.
+    const nodeElement = document.querySelector('.react-flow__node[data-id="18"]');
+    if (!nodeElement) throw new Error('Node with id 18 not found');
+
+    const frameRecorder = new FrameRecorder();
+
+    // Hold down the mouse
+    frameRecorder.setStage('mousedown');
+    const mouseDownEvent = generateMouseEventParamsTargetingNode(nodeElement);
+    nodeElement.dispatchEvent(new MouseEvent('mousedown', mouseDownEvent));
+    await nextFrame();
+
+    // Start at the node position and move the mouse 5px to the left on every frame
+    frameRecorder.setStage('mousemove');
+    let currentXPosition = mouseDownEvent.clientX;
+    for (let iteration = 0; iteration < 20; ++iteration) {
+      const movementX = -5;
+      currentXPosition += movementX;
+
+      nodeElement.dispatchEvent(
+        new MouseEvent('mousemove', {
+          ...mouseDownEvent,
+          clientX: currentXPosition,
+          screenX: currentXPosition,
+          movementX,
+        })
+      );
+      await nextFrame();
+    }
+
+    // Release the mouse
+    frameRecorder.setStage('mouseup');
+    nodeElement.dispatchEvent(
+      new MouseEvent('mouseup', {
+        ...mouseDownEvent,
+        clientX: currentXPosition,
+        screenX: currentXPosition,
+      })
+    );
+    await nextFrame();
+
+    // Log the results
+    await frameRecorder.endRecordingAsync();
+    console.log('Frame durations:', frameRecorder.getFrames());
+    console.log(
+      'Frame durations for Observable (copy and paste to https://observablehq.com/@iamakulov/long-frame-visualizer):',
+      frameRecorder.getFramesForObservable()
+    );
+  };
+
+  const dragOutsideViewport = async () => {
+    const randomNodeIndex = Math.floor(Math.random() * nodes.length);
+    const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodes[randomNodeIndex].id}"]`);
+    if (!nodeElement) throw new Error('Node not found');
+
+    const frameRecorder = new FrameRecorder();
+
+    // Hold down the mouse
+    frameRecorder.setStage('mousedown');
+    const mouseDownEvent = generateMouseEventParamsTargetingNode(nodeElement);
+    nodeElement.dispatchEvent(new MouseEvent('mousedown', mouseDownEvent));
+    await nextFrame();
+
+    // Move the mouse to the top of the viewport (so that the viewport starts
+    // scrolling up). Then, wiggle the mouse up and down to keep the viewport
+    // scrolling.
+    frameRecorder.setStage('mousemove');
+    let currentYPosition = 50;
+    for (let iteration = 0; iteration < 20; ++iteration) {
+      const movementY = Math.random() > 0.5 ? +2 : -2;
+      currentYPosition += movementY;
+
+      nodeElement.dispatchEvent(
+        new MouseEvent('mousemove', {
+          ...mouseDownEvent,
+          clientY: currentYPosition,
+          screenY: currentYPosition,
+          movementY,
+        })
+      );
+      await nextFrame();
+    }
+
+    // Release the mouse
+    frameRecorder.setStage('mouseup');
+    nodeElement.dispatchEvent(
+      new MouseEvent('mouseup', {
+        ...mouseDownEvent,
+        clientY: currentYPosition,
+        screenY: currentYPosition,
+      })
+    );
+    await nextFrame();
+
+    // Log the results
+    await frameRecorder.endRecordingAsync();
+    console.log('Frame durations:', frameRecorder.getFrames());
+    console.log(
+      'Frame durations for Observable (copy and paste to https://observablehq.com/@iamakulov/long-frame-visualizer):',
+      frameRecorder.getFramesForObservable()
+    );
+  };
+
+  const selectNode = async () => {
+    const randomNodeIndex = Math.floor(Math.random() * nodes.length);
+    const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodes[randomNodeIndex].id}"]`);
+    if (!nodeElement) throw new Error('Node not found');
+
+    const frameRecorder = new FrameRecorder();
+
+    const mouseEvent = generateMouseEventParamsTargetingNode(nodeElement);
+
+    // mousedown
+    frameRecorder.setStage('mousedown');
+    nodeElement.dispatchEvent(new MouseEvent('mousedown', mouseEvent));
+    await nextFrame();
+
+    // click
+    frameRecorder.setStage('click');
+    nodeElement.dispatchEvent(new MouseEvent('click', mouseEvent));
+    await nextFrame();
+
+    // mouseup
+    frameRecorder.setStage('mouseup');
+    nodeElement.dispatchEvent(new MouseEvent('mouseup', mouseEvent));
+    await nextFrame();
+
+    // Log the results
+    await frameRecorder.endRecordingAsync();
+    console.log('Frame durations:', frameRecorder.getFrames());
+    console.log(
+      'Frame durations for Observable (copy and paste to https://observablehq.com/@iamakulov/long-frame-visualizer):',
+      frameRecorder.getFramesForObservable()
+    );
+  };
+
+  const [key, setKey] = useState(0);
+  const frameRecorderRef = useRef<FrameRecorder | null>(null);
+  function remount() {
+    frameRecorderRef.current = new FrameRecorder();
+    setKey((k) => k + 1);
+  }
+  useEffect(() => {
+    const frameRecorder = frameRecorderRef.current;
+    if (!frameRecorder) return;
+
+    frameRecorder.endRecordingAsync().then(() => {
+      console.log('Frame durations:', frameRecorder.getFrames());
+      console.log(
+        'Frame durations for Observable (copy and paste to https://observablehq.com/@iamakulov/long-frame-visualizer):',
+        frameRecorder.getFramesForObservable()
+      );
+
+      frameRecorderRef.current = null;
+    });
+  }, [key]);
+
   const updatePos = () => {
     setNodes((nds) => {
       return nds.map((n) => {
@@ -56,6 +217,7 @@ const StressFlow = () => {
 
   return (
     <ReactFlow
+      key={key}
       nodes={nodes}
       edges={edges}
       onConnect={onConnect}
@@ -64,11 +226,14 @@ const StressFlow = () => {
       minZoom={0.2}
       fitView
     >
-      <MiniMap />
       <Controls />
       <Background />
 
       <Panel position="top-right">
+        <button onClick={selectNode}>select node</button>
+        <button onClick={dragInViewport}>drag node within the viewport</button>
+        <button onClick={dragOutsideViewport}>drag node outside of the viewport</button>
+        <button onClick={remount}>re-mount</button>
         <button onClick={updatePos}>change pos</button>
         <button onClick={updateElements}>update elements</button>
       </Panel>
diff --git a/examples/react/src/examples/Stress/performanceUtils.ts b/examples/react/src/examples/Stress/performanceUtils.ts
new file mode 100644
index 00000000..f14f8711
--- /dev/null
+++ b/examples/react/src/examples/Stress/performanceUtils.ts
@@ -0,0 +1,150 @@
+type Frame = {
+  duration: number;
+  stage: string;
+};
+
+/**
+ * Measures and outputs the duration of every frame that happens between the
+ * instance is created and `endRecording()` is called.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const recorder = new FrameRecorder();
+ *
+ * // Do some performance-intensive stuff
+ *
+ * await recorder.endRecordingAsync();
+ *
+ * console.log(recorder.getFrames());
+ * console.log(recorder.getFramesForObservable()); // → paste into https://observablehq.com/@iamakulov/long-frame-visualizer
+ * ```
+ */
+export class FrameRecorder {
+  private frames: Frame[] = [];
+  private animationFrameId: number;
+  private stage: string = '<no stage>';
+
+  constructor() {
+    let lastFrameTimestamp = performance.now();
+
+    const measureFrame = () => {
+      const timestamp = performance.now();
+
+      // Visualize the frames in the Performance pane (see the collapsed
+      // “Timings” section) – so it’s easier to see what exactly each frame
+      // captured
+      performance.measure(`frame (${this.stage})`, {
+        start: lastFrameTimestamp,
+        end: timestamp,
+      });
+
+      this.frames.push({
+        duration: timestamp - lastFrameTimestamp,
+        stage: this.stage,
+      });
+
+      lastFrameTimestamp = timestamp;
+
+      this.animationFrameId = requestAnimationFrame(measureFrame);
+    };
+
+    this.animationFrameId = requestAnimationFrame(measureFrame);
+  }
+
+  // The method is explicitly marked `async` in its name to make sure the caller
+  // doesn’t forget to `await` it. (Otherwise, some events might be lost.)
+  async endRecordingAsync() {
+    this.setStage('waiting for idle');
+    await new Promise((resolve) => requestIdleCallback(resolve));
+    requestAnimationFrame(() => {
+      cancelAnimationFrame(this.animationFrameId);
+    });
+  }
+
+  /**
+   * Adds an optional annotation to all subsequent frames. Useful to
+   * differentiate frames from different events – e.g. you can call
+   * `setState("mousedown")` before dispatching a mousedown event, and then
+   * `setState("mouseup")` before a mouseup one.
+   *
+   * When used, will affect both `getFramesForObservable()` and `getFrames()`.
+   */
+  setStage(stage: string) {
+    this.stage = stage;
+  }
+
+  getFramesForObservable() {
+    return this.frames.map((frame, index) => ({ ...frame, index }));
+  }
+
+  getFrames() {
+    // Group frames by stage – so you could see which frames originated from `mousedown` vs `mousemove` vs `mouseup` events
+    const framesPerStage: Record<string, number[]> = {};
+    for (const frame of this.frames) {
+      const stage = frame.stage;
+      if (!framesPerStage[stage]) {
+        framesPerStage[stage] = [];
+      }
+      framesPerStage[stage].push(frame.duration);
+    }
+
+    // If there’s only one stage, return the frames directly
+    return framesPerStage;
+  }
+}
+
+/**
+ * Returns a promise that resolves when the next frame starts, and everything
+ * that was already scheduled in the event queue has been processed.
+ */
+export function nextFrame() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/**
+ * Generates params for a new MouseEvent() that will target the given node.
+ */
+export function generateMouseEventParamsTargetingNode(node: Element) {
+  const nodePosition = node.getBoundingClientRect();
+
+  // Let’s make the event (eg click) happen 5px to the right and 5px to the
+  // bottom of the node’s top-left corner
+  const positionRelativeToNode = {
+    left: 5,
+    top: 5,
+  };
+
+  return {
+    clientX: Math.round(nodePosition.left + positionRelativeToNode.left),
+    clientY: Math.round(nodePosition.top + positionRelativeToNode.top),
+    movementX: 0,
+    movementY: 0,
+    offsetX: positionRelativeToNode.left,
+    offsetY: positionRelativeToNode.top,
+    screenX: Math.round(nodePosition.left + positionRelativeToNode.left),
+    screenY: Math.round(nodePosition.top + positionRelativeToNode.top),
+
+    // Required boilerplate
+    altKey: false,
+    bubbles: true,
+    button: 0,
+    buttons: 1,
+    cancelBubble: false,
+    cancelable: true,
+    composed: true,
+    ctrlKey: false,
+    currentTarget: null,
+    defaultPrevented: false,
+    detail: 1,
+    eventPhase: 0,
+    fromElement: null,
+    isTrusted: true,
+    metaKey: false,
+    relatedTarget: null,
+    returnValue: true,
+    shiftKey: false,
+    view: window,
+    which: 1,
+  };
+}
diff --git a/examples/react/src/examples/Subflow/DebugNode.tsx b/examples/react/src/examples/Subflow/DebugNode.tsx
index 46bae224..6a8a2d26 100644
--- a/examples/react/src/examples/Subflow/DebugNode.tsx
+++ b/examples/react/src/examples/Subflow/DebugNode.tsx
@@ -11,13 +11,13 @@ const idStyle: CSSProperties = {
   left: 2,
 };
 
-const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsolute, id }) => {
+const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY, id }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
       <div style={idStyle}>{id}</div>
       <div style={infoStyle}>
-        x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
+        x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
       </div>
       <Handle type="source" position={Position.Bottom} />
     </>
diff --git a/examples/react/src/examples/UpdatableEdge/index.tsx b/examples/react/src/examples/UpdatableEdge/index.tsx
index 754efa56..5dacdc9c 100644
--- a/examples/react/src/examples/UpdatableEdge/index.tsx
+++ b/examples/react/src/examples/UpdatableEdge/index.tsx
@@ -6,7 +6,6 @@ import {
   addEdge,
   applyNodeChanges,
   applyEdgeChanges,
-  ReactFlowInstance,
   Connection,
   Edge,
   Node,
@@ -97,7 +96,6 @@ const initialEdges: Edge[] = [
   { id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' },
 ];
 
-const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`start update ${handleType} handle`, edge);
 const onEdgeUpdateEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
@@ -111,7 +109,6 @@ const UpdatableEdge = () => {
   const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
-    console.log(changes);
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);
 
@@ -125,12 +122,12 @@ const UpdatableEdge = () => {
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onInit={onInit}
       snapToGrid={true}
       onEdgeUpdate={onEdgeUpdate}
       onConnect={onConnect}
       onEdgeUpdateStart={onEdgeUpdateStart}
       onEdgeUpdateEnd={onEdgeUpdateEnd}
+      fitView
     >
       <Controls />
     </ReactFlow>
diff --git a/examples/react/src/examples/UpdateNode/index.tsx b/examples/react/src/examples/UpdateNode/index.tsx
index d6e8a67a..c32fca34 100644
--- a/examples/react/src/examples/UpdateNode/index.tsx
+++ b/examples/react/src/examples/UpdateNode/index.tsx
@@ -24,9 +24,12 @@ const UpdateNode = () => {
       nds.map((n) => {
         if (n.id === '1') {
           // it's important that you create a new object here in order to notify react flow about the change
-          n.data = {
-            ...n.data,
-            label: nodeName,
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              label: nodeName,
+            },
           };
         }
 
@@ -40,7 +43,10 @@ const UpdateNode = () => {
       nds.map((n) => {
         if (n.id === '1') {
           // it's important that you create a new object here in order to notify react flow about the change
-          n.style = { ...n.style, backgroundColor: nodeBg };
+          return {
+            ...n,
+            style: { ...n.style, backgroundColor: nodeBg },
+          };
         }
 
         return n;
@@ -52,8 +58,10 @@ const UpdateNode = () => {
     setNodes((nds) =>
       nds.map((n) => {
         if (n.id === '1' || n.id === 'e1-2') {
-          // when you update a simple type you can just update the value
-          n.hidden = nodeHidden;
+          return {
+            ...n,
+            hidden: nodeHidden,
+          };
         }
 
         return n;
diff --git a/examples/react/src/examples/UseConnection/index.tsx b/examples/react/src/examples/UseConnection/index.tsx
new file mode 100644
index 00000000..cc90f11f
--- /dev/null
+++ b/examples/react/src/examples/UseConnection/index.tsx
@@ -0,0 +1,75 @@
+import { useCallback, useEffect } from 'react';
+import {
+  ReactFlow,
+  Background,
+  MiniMap,
+  Node,
+  addEdge,
+  ReactFlowProvider,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  OnConnect,
+  useConnection,
+} from '@xyflow/react';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    className: 'light',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const UseZoomPanHelperFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
+  const connection = useConnection();
+
+  useEffect(() => {
+    console.log('connection', connection);
+  }, [connection]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+    >
+      <Background />
+      <MiniMap />
+    </ReactFlow>
+  );
+};
+
+const WrappedFlow = () => (
+  <ReactFlowProvider>
+    <UseZoomPanHelperFlow />
+  </ReactFlowProvider>
+);
+
+export default WrappedFlow;
diff --git a/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx b/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx
index e04f3448..4301e647 100644
--- a/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx
+++ b/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx
@@ -12,8 +12,8 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
     [nodeId]
   );
   const connections = useHandleConnections({
-    handleType: handleProps.type,
-    handleId: handleProps.id,
+    type: handleProps.type,
+    id: handleProps.id,
     onConnect,
     onDisconnect,
   });
diff --git a/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx b/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx
index 444499fb..6163f108 100644
--- a/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx
+++ b/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx
@@ -15,8 +15,8 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
     [nodeId]
   );
   const connections = useHandleConnections({
-    handleType: handleProps.type,
-    handleId: handleProps.id,
+    type: handleProps.type,
+    id: handleProps.id,
     onConnect,
     onDisconnect,
   });
diff --git a/examples/react/src/examples/UseUpdateNodeInternals/index.tsx b/examples/react/src/examples/UseUpdateNodeInternals/index.tsx
index 371d58b6..2cd405b7 100644
--- a/examples/react/src/examples/UseUpdateNodeInternals/index.tsx
+++ b/examples/react/src/examples/UseUpdateNodeInternals/index.tsx
@@ -33,7 +33,7 @@ const getId = (): string => `${id++}`;
 
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
 
   const { screenToFlowPosition } = useReactFlow();
diff --git a/examples/react/src/examples/Validation/index.tsx b/examples/react/src/examples/Validation/index.tsx
index 864c3c08..936e1396 100644
--- a/examples/react/src/examples/Validation/index.tsx
+++ b/examples/react/src/examples/Validation/index.tsx
@@ -16,6 +16,7 @@ import {
   updateEdge,
   Edge,
   IsValidConnection,
+  OnBeforeDelete,
 } from '@xyflow/react';
 
 import ConnectionStatus from './ConnectionStatus';
@@ -54,7 +55,7 @@ const nodeTypes: NodeTypes = {
 const ValidationFlow = () => {
   const [value, setValue] = useState(0);
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnectStart: OnConnectStart = useCallback(
     (event, params) => {
@@ -85,6 +86,10 @@ const ValidationFlow = () => {
     [setEdges]
   );
 
+  const onBeforeDelete: OnBeforeDelete = useCallback(async () => {
+    return true;
+  }, []);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -99,6 +104,7 @@ const ValidationFlow = () => {
       onConnectEnd={onConnectEnd}
       onEdgeUpdate={onEdgeUpdate}
       isValidConnection={isValidConnection}
+      onBeforeDelete={onBeforeDelete}
       fitView
     >
       <ConnectionStatus />
diff --git a/examples/react/src/generic-tests/nodes/general.ts b/examples/react/src/generic-tests/nodes/general.ts
index 0fcb975c..d45091dd 100644
--- a/examples/react/src/generic-tests/nodes/general.ts
+++ b/examples/react/src/generic-tests/nodes/general.ts
@@ -6,6 +6,7 @@ export default {
     nodeTypes: {
       DragHandleNode,
     },
+    nodeDragThreshold: 0,
     nodes: [
       {
         id: 'Node-1',
diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index d8293666..44d54544 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -177,6 +177,11 @@
 	}}
 	on:selectionclick={(event) => console.log('on selection click', event)}
 	on:selectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
+	onbeforedelete={async ({ nodes, edges }) => {
+		console.log('on before delete', nodes, edges);
+		const deleteElements = confirm('Are you sure you want to delete the selected elements?');
+		return deleteElements;
+	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
 	connectionMode={ConnectionMode.Strict}
diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
index 1197ce62..faf6a2a5 100644
--- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let data: { label: string } = { label: 'Node' };
-	export let positionAbsolute: XYPosition = { x: 0, y: 0 };
+	export let positionAbsoluteX: number = 0;
+	export let positionAbsoluteY: number = 0;
 </script>
 
 <div class="custom">
 	<div>{data.label}</div>
-	<div>{~~positionAbsolute.x}, {~~positionAbsolute.y}</div>
+	<div>{~~positionAbsoluteX}, {~~positionAbsoluteY}</div>
 
 	<Handle type="target" position={Position.Top} />
 
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 091d2b91..fb1ff106 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,304 +1,97 @@
-# @reactflow/core
-
-## 11.7.2
-
-### Patch Changes
-
-- [#3060](https://github.com/wbkd/react-flow/pull/3060) [`70ec97f7`](https://github.com/wbkd/react-flow/commit/70ec97f7daec6d5401215cae3edac04aea88a3ba) - fix useNodes and useEdges bug with infinite re-renderings
-- [#3064](https://github.com/wbkd/react-flow/pull/3064) [`d2d1aebc`](https://github.com/wbkd/react-flow/commit/d2d1aebc0f7fea4183406e7d1915b7fcd6995f48) - refactor(useUpdateNodeInternals): only call updateNodeDimensions once
-- [#3059](https://github.com/wbkd/react-flow/pull/3059) [`4374459e`](https://github.com/wbkd/react-flow/commit/4374459ef9fec797bbc0407231f09a1acacd245b) - fix useUpdateNodeInternals type
-
-## 11.7.1
-
-### Patch Changes
-
-- [#3043](https://github.com/wbkd/react-flow/pull/3043) [`cf7a7d3d`](https://github.com/wbkd/react-flow/commit/cf7a7d3dad1e73215a72a5dc72e21fd50208cdbb) - handles: handles on top of each other, reduce re-renderings
-- [#3046](https://github.com/wbkd/react-flow/pull/3046) [`07b975bb`](https://github.com/wbkd/react-flow/commit/07b975bbee3580249e36a19582213b250f78093c) - base-edge: pass id to base edge path
-- [#3007](https://github.com/wbkd/react-flow/pull/3007) [`c80d269b`](https://github.com/wbkd/react-flow/commit/c80d269b85a0054221f4639c328fc36a3befbe70) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - allow array of ids as updateNodeInternals arg
-- [#3029](https://github.com/wbkd/react-flow/pull/3029) [`a3fa164c`](https://github.com/wbkd/react-flow/commit/a3fa164c34cc820c79bb031c9fd97b72a3546614) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - autopan: only update nodes when transform change happen
-
-## 11.7.0
-
-Most notable updates:
-
-- Handles: `isConnectableStart` and `isConnectableEnd` props to configure if you can start or end a connection at a certain handle
-- Edges: `updatable` option to enable updates for specific edges
-- useNodesInitialized: options to configure if hidden nodes should be included (false by default)
-
-### Minor Changes
-
-- [#2960](https://github.com/wbkd/react-flow/pull/2960) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - edges: add `updatable` option
-- [#2958](https://github.com/wbkd/react-flow/pull/2958) [`4d97a0ed`](https://github.com/wbkd/react-flow/commit/4d97a0ed168ce643fc0c99fa6b47cf1296d66065) - handles: add `isConnectableStart` and `isConnectableEnd` props
-- [#2956](https://github.com/wbkd/react-flow/pull/2956) [`923a54c4`](https://github.com/wbkd/react-flow/commit/923a54c481b90954806202817ba844cfa7203a38) - add options for `useNodesInitialized`, ignore hidden nodes by default
-
-### Patch Changes
-
-- [#2926](https://github.com/wbkd/react-flow/pull/2926) Thanks [@Elringus](https://github.com/Elringus)! - fix non-passive wheel event listener violation
-- [#2933](https://github.com/wbkd/react-flow/pull/2933) [`fe8cac0a`](https://github.com/wbkd/react-flow/commit/fe8cac0adb359109e0e9eafe8b9261ba354076bb) - prefix error keys with "error"
-- [#2939](https://github.com/wbkd/react-flow/pull/2939) [`4a4ca171`](https://github.com/wbkd/react-flow/commit/4a4ca171955f5c8d58b23e3ad48406f1a21dc402) - add connection result to store
-
-## 11.6.1
-
-### Patch Changes
-
-- Always create new edge object (fixes an issue with Redux toolkit and other immutable helper libs)
-
-## 11.6.0
-
-### Minor Changes
-
-- [#2877](https://github.com/wbkd/react-flow/pull/2877) [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7) - add `isValidConnection` prop for ReactFlow component
-- [#2847](https://github.com/wbkd/react-flow/pull/2847) [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add option to enable/disable replacing edge id when using `updateEdge`
-
-### Patch Changes
-
-- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) - add data-testid for controls, minimap and background
-- [#2894](https://github.com/wbkd/react-flow/pull/2894) [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b) - fix(nodes): blur when node gets unselected
-- [#2892](https://github.com/wbkd/react-flow/pull/2892) [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf) Thanks [@danielgek](https://github.com/danielgek) - track modifier keys on useKeypress
-- [#2893](https://github.com/wbkd/react-flow/pull/2893) [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861) - fix: check if handle is connectable
-
-## 11.5.5
-
-### Patch Changes
-
-- [#2834](https://github.com/wbkd/react-flow/pull/2834) [`23424ea6`](https://github.com/wbkd/react-flow/commit/23424ea6750f092210f83df17a00c89adb910d96) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `nodes` to fit view options to allow fitting view only around specified set of nodes
-- [#2836](https://github.com/wbkd/react-flow/pull/2836) [`959b1114`](https://github.com/wbkd/react-flow/commit/959b111448bba4686040473e46988be9e7befbe6) - Fix: connections for handles with bigger handles than connection radius
-- [#2819](https://github.com/wbkd/react-flow/pull/2819) [`0d259b02`](https://github.com/wbkd/react-flow/commit/0d259b028558aab650546f3371a85f3bce45252f) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Avoid triggering edge update if not using left mouse button
-- [#2832](https://github.com/wbkd/react-flow/pull/2832) [`f3de9335`](https://github.com/wbkd/react-flow/commit/f3de9335af6cd96cd77dc77f24a944eef85384e5) - fitView: return type boolean
-- [#2838](https://github.com/wbkd/react-flow/pull/2838) [`021f5a92`](https://github.com/wbkd/react-flow/commit/021f5a9210f47a968e50446cd2f9dae1f97880a4) - refactor: use key press handle modifier keys + input
-- [#2839](https://github.com/wbkd/react-flow/pull/2839) [`72216ff6`](https://github.com/wbkd/react-flow/commit/72216ff62014acd2d73999053c72bd7aeed351f6) - fix PropsWithChildren: pass default generic for v17 types
-
-## 11.5.4
-
-### Patch Changes
-
-- [`383a074a`](https://github.com/wbkd/react-flow/commit/383a074aeae6dbec8437fa08c7c8d8240838a84e) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius
-
-## 11.5.3
-
-This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS.
-
-### Patch Changes
-
-- [#2800](https://github.com/wbkd/react-flow/pull/2800) [`be8097ac`](https://github.com/wbkd/react-flow/commit/be8097acadca3054c3b236ce4296fc516010ef8c) - When node is not draggable, you can't move it with a selection either
-- [#2803](https://github.com/wbkd/react-flow/pull/2803) [`1527795d`](https://github.com/wbkd/react-flow/commit/1527795d18c3af38c8ec7059436ea0fbf6c27bbd) - connection: add status class (valid or invalid) while in connection radius
-- [#2801](https://github.com/wbkd/react-flow/pull/2801) [`3b6348a8`](https://github.com/wbkd/react-flow/commit/3b6348a8d1573afb39576327318bc172e33393c2) - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius
-
-## 11.5.2
-
-### 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
-
-## 11.5.1
-
-### Patch Changes
-
-- [#2783](https://github.com/wbkd/react-flow/pull/2783) [`71153534`](https://github.com/wbkd/react-flow/commit/7115353418ebc7f7c81ab0e861200972bbf7dbd5) - connections: check handle below mouse before using connection radius
-
-## 11.5.0
-
-Lot's of improvements are coming with this release!
-
-- **Connecting radius**: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the `connectionRadius` prop.
-- **Auto pan**: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set `autoPnaOnNodeDrag` and `autoPanOnConnect` to false.
-- **Touch devices**: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better.
-- **Errors**: We added an `onError` prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example.
-- **Node type**: We added a second param to the generic `Node` type. You can not only pass `NodeData` but also the type as a second param:
-
-```ts
-type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>;
-```
-
-This makes it easier to work with different custom nodes and data types.
-
-### Minor Changes
-
-- [#2754](https://github.com/wbkd/react-flow/pull/2754) [`e96309b6`](https://github.com/wbkd/react-flow/commit/e96309b6a57b1071faeebf7b0547fef7fd418694) - Add auto pan for connecting and node dragging and `connectionRadius`
-- [#2773](https://github.com/wbkd/react-flow/pull/2773) - Add `onError` prop to get notified when an error happens
-
-### Patch Changes
-
-- [#2763](https://github.com/wbkd/react-flow/pull/2763) [`85003b01`](https://github.com/wbkd/react-flow/commit/85003b01add71ea852bd5b0d2f1e7496050a6b52) - Connecting nodes: Enable connections on touch devices
-- [#2620](https://github.com/wbkd/react-flow/pull/2620) - Thanks [RichSchulz](https://github.com/RichSchulz)! - Types: improve typing for node type
-
-## 11.4.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
-
-## 11.4.1
-
-### Patch Changes
-
-- [#2738](https://github.com/wbkd/react-flow/pull/2738) [`82988485`](https://github.com/wbkd/react-flow/commit/82988485b730a9e32acbdae1ddcc81b33ddccaba) - fix: fitView for subflows, context menu on right mouse pan
-- [#2740](https://github.com/wbkd/react-flow/pull/2740) [`d91e619a`](https://github.com/wbkd/react-flow/commit/d91e619a70a95db99a621ede59bc05b5a7766086) Thanks [@michaelspiss](https://github.com/michaelspiss)! - EdgeRenderer: check all handles for connection mode loose
-
-## 11.4.0
-
-## New Features
-
-New props for the ReactFlow component to customize the controls of the viewport and the selection box better:
-
-1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false}` or `panOnDrag={[1, 2]}`)
-2. `panOnDrag={[0, 1, 2]}` option to configure specific mouse buttons for panning
-3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`)
-4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it
-5. `onSelectionStart` and `onSelectionEnd` events
-6. `elevateNodesOnSelect`: Defines if z-index should be increased when node is selected
-7. New store function `getNodes`. You can now do `store.getState().getNodes()` instead of `Array.from(store.getNodes().nodeInternals.values())`.
-
-Thanks to @jackfishwick who helped a lot with the new panning and selection options.
-
-### Minor Changes
-
-- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493)
-  - Add new props to configure viewport controls (`selectionOnDrag`, `panActivationKeyCode`, ..)
-- [#2661](https://github.com/wbkd/react-flow/pull/2661) [`7ef29108`](https://github.com/wbkd/react-flow/commit/7ef2910808aaaee029894363d52efc0c378a7654)
-  - 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
-
-- [#2695](https://github.com/wbkd/react-flow/pull/2695) [`ab2ff374`](https://github.com/wbkd/react-flow/commit/ab2ff3740618da48bd4350597e816c397f3d78ff) - Add elevateNodesOnSelect prop
-- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore.
-- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) - Use translateExtent correctly
-- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) - Only trigger drag event when change happened
-
-## 11.4.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
-
-## 11.4.0-next.0
-
-### Minor Changes
-
-- [#2678](https://github.com/wbkd/react-flow/pull/2678) [`baa8689e`](https://github.com/wbkd/react-flow/commit/baa8689ef629d22da4cbbef955e0c83d21df0493) Thanks [@moklick](https://github.com/moklick)! - ## New Features
-
-  New props for the ReactFlow component to customize the controls of the viewport and the selection box better:
-
-  1. `selectionOnDrag` prop: Selection box without extra button press (need to set `panOnDrag={false} or `panOnDrag="RightClick"`)
-  2. `panOnDrag="RightClick"` option
-  3. `panActivationKeyCode="Space"` key code for activating dragging (useful when using `selectionOnDrag`)
-  4. `selectionMode={SelectionMode.Full}`: you can chose if the selection box needs to contain a node fully (`SelectionMode.Full`) or partially (`SelectionMode.Partial`) to select it
-  5. `onSelectionStart` and `onSelectionEnd` events
-
-### Patch Changes
-
-- [#2660](https://github.com/wbkd/react-flow/pull/2660) [`50032c3d`](https://github.com/wbkd/react-flow/commit/50032c3d953bd819d0afe48e4b61f77f987cc8d0) Thanks [@moklick](https://github.com/moklick)! - Add `getNodes` function to the store so that you don't need to do `Array.from(store.getState().nodeInternals.values())` anymore.
-
-- [#2659](https://github.com/wbkd/react-flow/pull/2659) [`4244bae2`](https://github.com/wbkd/react-flow/commit/4244bae25a36cb4904dc1fbba26e1c4d5d463cb9) Thanks [@moklick](https://github.com/moklick)! - Use translateExtent correctly
-
-- [#2657](https://github.com/wbkd/react-flow/pull/2657) [`23afb3ab`](https://github.com/wbkd/react-flow/commit/23afb3abebdb42fad284f68bec164afac609563c) Thanks [@moklick](https://github.com/moklick)! - Only trigger drag event when change happened
-
-## 11.3.2
-
-In this update we did some changes so that we could implement the new [`<NodeResizer />`](https://reactflow.dev/docs/api/nodes/node-resizer/) component more smoothly.
-
-### Patch Changes
-
-- [#2646](https://github.com/wbkd/react-flow/pull/2646) [`e6b5d90f`](https://github.com/wbkd/react-flow/commit/e6b5d90f61c8ee60e817bba232a162cae2ab3e2a) - Fix getRectOfNodes
-- [#2648](https://github.com/wbkd/react-flow/pull/2648) [`6ee44e07`](https://github.com/wbkd/react-flow/commit/6ee44e076eaa6908d07578a757a5187642b732ae) - Allow middle mouse pan over edges
-- [#2647](https://github.com/wbkd/react-flow/pull/2647) [`aa69c207`](https://github.com/wbkd/react-flow/commit/aa69c20765e6978f4f9c8cc63ed7110dbf6d9d9d) Thanks [@neo](https://github.com/neo)! - Invalidate node trying to connect itself with the same handle
-- [#2626](https://github.com/wbkd/react-flow/pull/2626) [`d29c401d`](https://github.com/wbkd/react-flow/commit/d29c401d598dbf2dcd5609b7adb8d029906a6f18) - Export the useNodeId hook, refactor how changes are applied and create a helper function
-- [#2642](https://github.com/wbkd/react-flow/pull/2642) [`0df02f35`](https://github.com/wbkd/react-flow/commit/0df02f35f8d6c54dae36af18278feadc77acb2d6) - Ignore key events for nodes when input is focused
-
-## 11.3.1
-
-### Patch Changes
-
-- [#2595](https://github.com/wbkd/react-flow/pull/2595) [`c828bfda`](https://github.com/wbkd/react-flow/commit/c828bfda0a8c4774bc43588640c7cca0cfdcb3f4) Thanks [@chrtze](https://github.com/chrtze)! - Fix and improve the behaviour when using nodeOrigin in combination with subflows
-- [#2602](https://github.com/wbkd/react-flow/pull/2602) [`b0302ce4`](https://github.com/wbkd/react-flow/commit/b0302ce4261a992bee841bae84af347d03be690f) Thanks [@sdegueldre](https://github.com/sdegueldre)! - Don't use try catch in wrapper for checking if provider is available
-- [#2601](https://github.com/wbkd/react-flow/pull/2601) [`b2c72813`](https://github.com/wbkd/react-flow/commit/b2c728137d1b53e38883f044fa447585c377a6af) Thanks [@hoondeveloper](https://github.com/hoondeveloper)! - fix isRectObject function
-
-## 11.3.0
-
-### Minor Changes
-
-- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Export a new component "NodeToolbar" that renders a fixed element attached to a node
-
-### Patch Changes
-
-- [#2561](https://github.com/wbkd/react-flow/pull/2561) [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940) Thanks [@moklick](https://github.com/moklick)! - Fix multi selection and fitView when nodeOrigin is used
-- [#2560](https://github.com/wbkd/react-flow/pull/2560) [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd) Thanks [@neo](https://github.com/neo)! - Always elevate zIndex when node is selected
-- [#2573](https://github.com/wbkd/react-flow/pull/2573) [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967) Thanks [@moklick](https://github.com/moklick)! - Fix disappearing connection line for loose flows
-- [#2558](https://github.com/wbkd/react-flow/pull/2558) [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7) Thanks [@moklick](https://github.com/moklick)! - EdgeLabelRenderer: handle multiple instances on a page
-
-## 11.2.0
-
-### Minor Changes
-
-- [#2535](https://github.com/wbkd/react-flow/pull/2535) [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948) Thanks [@moklick](https://github.com/moklick)! - Feat: Add edge label renderer
-- [#2536](https://github.com/wbkd/react-flow/pull/2536) [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e) Thanks [@pengfu](https://github.com/pengfu)! - Feat: add deleteElements helper function
-- [#2539](https://github.com/wbkd/react-flow/pull/2539) [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931) Thanks [@moklick](https://github.com/moklick)! - Feat: add intersection helpers
-- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
-
-### Patch Changes
-
-- [#2538](https://github.com/wbkd/react-flow/pull/2538) [`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc) Thanks [@neo](https://github.com/neo)! - Refactor: put React Flow in isolated stacking context
-
-## 11.1.2
-
-### Patch Changes
-
-- make pro options acc type optional
-- cleanup types
-- fix rf id handling
-- always render nodes when dragging=true
-- don't apply animations to helper edge
-
-## 11.1.1
-
-### Patch Changes
-
-- [`c44413d`](https://github.com/wbkd/react-flow/commit/c44413d816604ae2d6ad81ed227c3dfde1a7bd8a) Thanks [@moklick](https://github.com/moklick)! - chore(panel): dont break user selection above panel
-- [`48c402c`](https://github.com/wbkd/react-flow/commit/48c402c4d3bd9e16dc91cd4c549324e57b6d5c57) Thanks [@moklick](https://github.com/moklick)! - refactor(aria-descriptions): render when disableKeyboardA11y is true
-- [`3a1a365`](https://github.com/wbkd/react-flow/commit/3a1a365a63fc4564d9a8d96309908986fcc86f95) Thanks [@moklick](https://github.com/moklick)! - fix(useOnSelectionChange): repair hook closes #2484
-- [`5d35094`](https://github.com/wbkd/react-flow/commit/5d350942d33ded626b3387206f0b0dee368efdfb) Thanks [@neo](https://github.com/neo)! - Add css files as sideEffects
-
-## 11.1.0
-
-### Minor Changes
-
-- [`def11008`](https://github.com/wbkd/react-flow/commit/def11008d88749fec40e6fcba8bc41eea2511bab) Thanks [@moklick](https://github.com/moklick)! - New props: nodesFocusable and edgesFocusable
-
-### Patch Changes
-
-- [`d00faa6b`](https://github.com/wbkd/react-flow/commit/d00faa6b3e77388bfd655d4c02e9a5375bc515e4) Thanks [@moklick](https://github.com/moklick)! - Make nopan class name overwritable with class name option
-
-## 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
+# @xyflow/react
+
+## 12.0.0-next.1
+
+### Minor changes
+
+- fix edge rendering
+
+## 12.0.0-next.0
+
+React Flow v12 is coming soon! We worked hard over the past months and tried to make as few breaking changes as possible (there are some). We are in no rush to release v12, so we’d be happy to hear any early feedback so we can adjust the API or redefine new features before launching stable v12. 🚀 The big topics for this version are:
+
+1. **Support for SSG/ SSR**: you can now render flows on the server
+2. **Reactive flows**: new hooks and helper functions to simplify data flows
+3. **Dark mode**: a new base style and easy way to switch between built in color modes
+
+Svelte Flow had a big impact on this release as well. While combing through each line of React Flow, we created framework agnostic helpers, found bugs, and made some under the hood improvements.  All of these changes are baked into the v12 release as a welcome side-effect of that launch. 🙌🏻 We also improved the performance for larger flows with the help of Ivan.
+
+### Migrate from 11 to 12
+
+Before you can try out the new features, you need to do some minor updates:
+
+- **A new npm package name:** Our name changed from `reactflow` to `@xyflow/react` and the main component is no longer a default, but a named import:
+    - v11: `import ReactFlow from 'reactflow';`
+    - v12: `import { ReactFlow } from '@xyflow/react';`
+- **Node attribute “computed”:** All computed node values are now stored in `node.computed`
+    - v11: `node.width`, `node.height` ,`node.positionAbsolute`
+    - v12:  `node.computed.width`, `node.computed.height` and `node.computed.positionAbsolute` . (`node.width`/ `node.height` can now be used for SSG)
+- **Updating nodes:** We are not supporting node updates with object mutations anymore. If you want to update a certain attribute, you need to create a new node.
+    - v11: 
+      ```js
+        setNodes(nds => nds.map((node) => {
+          node.hidden = true;
+          return node;
+        }));
+      ```
+    - v12: 
+      ```js
+        setNodes(nds => nds.map((node) => ({
+          ...node,
+          hidden: true
+        })));
+      ```
+- **NodeProps:** `posX`/`posY` is now called `positionAbsoluteX`/`positionAbsoluteY`
+- **Typescript only:** We simplified types and fixed issues about functions where users could pass a `NodeData` generic. The new way is to define your own node type for the whole app and then only use that one. The big advantage of this is, that you can have multiple node types with different data structures and always be able to distinguish by checking the `node.type` attribute.
+    - v11: `applyNodeChange<NodeData, NodeType>`
+    - v12: `type MyNodeType = Node<{ value: number }, ‘number’> | Node<{ value: string }, ‘text’>; applyNodeChange<MyNodeType>`
+    - affected functions: `useNodes`, `useNodesState`, `useEdgesState`, `applyNodeChange`, `onInit`, `applyEdgeChanges` , `MiniMapProps`
+- **Removal of deprecated functions:**
+    - `getTransformForBounds` (new name: `getViewportForBounds`),
+    - `getRectOfNodes` ****(new name: `getNodesBounds`)
+    - `project` (new name: `screenToFlowPosition`)
+    - `getMarkerEndId`
+
+### Main features
+
+Now that you successfully migrated to v12, you can use all the fancy features. As mentioned above, the biggest updates for v12 are:
+
+- **SSR / SSG**: you can define `width`, `height` and `handles` for the nodes. This makes it possible to render a flow on the server and hydrate on the client: [codesandbox](https://codesandbox.io/p/devbox/reactflow-v12-next-pr66yh)
+    - Details: In v11, `width` and `height` were set by the library as soon as the nodes got measured. This still happens, but we are now using `computed.width` and `computed.height` to store this information. The `positionAbsolute` attribute also gets stored in `computed` . In the previous versions there was always a lot of confusion about `width` and `height`. It’s hard to understand, that you can’t use it for passing an actual width or height. It’s also not obvious that those attributes get added by the library. We think that the new implementation solves both of the problems: `width` and `height` are optional attributes that can be used to define dimensions and everything that is set by the library, is stored in `computed`.
+- **Reactive Flows:** The new hooks `useHandleConnections` and `useNodesData` and the new `updateNode` and `updateNodeData` functions can be used for managing the data flow between your nodes: [codesandbox](https://codesandbox.io/p/sandbox/reactflow-reactive-flow-sy93yx)
+    - Details: Working with reactive flows is super common.  You update node A and want to react on those changes in the connected node B. Until now everyone had to come up with a custom solution. With this version we want to change this and give you performant helpers to handle this. If you are excited about this, you can check out this example:
+- **Dark mode and css variables:** React Flow now comes with a built-in dark mode, that can be toggled by using the new `colorMode` prop (”light”, “dark” or “system”): [codesandbox](https://codesandbox.io/p/sandbox/reactflow-dark-mode-256l99)
+    - Details: With this version we want to make it easier to switch between dark and light modes and give you a better starting point for dark flows. If you pass colorMode=”dark”, we add the class name “dark” to the wrapper and use it to adjust the styling. To make the implementation for this new feature easier on our ends, we switched to CSS variables for most of the styles. These variables can also be used in user land to customize a flow.
+
+### More features and updates
+
+There is more! Besides the new main features, we added some minor things that were on our list for a long time. We also started to use TS docs for better docs. We already started to add some docs for some types and hooks which should improve the developer experience.
+
+- **`useConnection` hook:** This hook makes it possible to handle an ongoing connection. For example, you can use it for colorizing handles.
+- **`onDelete` handler**: We added a combined handler for `onDeleteNodes` and `onDeleteEdges` to make it easier to react to deletions.
+- **`isValidConnection` prop:** This makes it possible to implement one validation function for all connections. It also gets called for programatically added edges.
+- **Controlled `viewport`:** This is definitely an advanced feature. Possible use cases are to animate the viewport or round the transform for lower res screens for example. This features brings two new props: `viewport` and `onViewportChange`.
+- **`ViewportPortal` component:** This makes it possible to render elements in the viewport without the need to implement a custom node.
+- **Background component**: add `patternClassName` to be able to style the background pattern by using a class name. This is useful if you want to style the background pattern with Tailwind for example.
+- **`onMove` callback** gets triggered for library-invoked viewport updates (like fitView or zoom-in)
+- **`deleteElements`** now returns deleted nodes and deleted edges
+- add **`origin` attribute** for nodes
+- add **`selectable` attribute** for edges
+- Correct types for `BezierEdge`, `StepEdge`, `SmoothStepEdge` and `StraightEdge` components
+- New edges created by the library only have `sourceHandle` and `targetHandle` attributes when those attributes are set. (We used to pass `sourceHandle: null` and `targetHandle: null`)
+- Edges do not mount/unmount when their z-index change
+
+### Internal changes
+
+These changes are not really user-facing, but it could be important for folks who are working with the React Flow store:
+
+- The biggest internal change is that we created a new package **@xyflow/system with framework agnostic helpers** that can be used be React Flow and Svelte Flow
+    - **XYDrag** for handling dragging node(s) and selection
+    - **XYPanZoom** for controlling the viewport panning and zooming
+    - **XYHandle** for managing new connections
+- We replaced the `nodeInternals` map with a `nodes` array. We added a new `nodeLookup` map that serves as a lookup, but we are not creating a new map object on any change so it’s really only useful as a lookup.
+- We removed `connectionNodeId`, `connectionHandleId`, `connectionHandleType` from the store and added `connectionStartHandle.nodeId`, `connectionStartHandle.handleId`, …
+- add `data-id` to edges
+
+
+__With v12 the `reactflow` package was renamed to `@xyflow/react` - you can find the v11 source and the [`reactflow` changelog](https://github.com/xyflow/xyflow/blob/v11/packages/reactflow/CHANGELOG.md) on the v11 branch.__
diff --git a/packages/react/package.json b/packages/react/package.json
index 1c3194d5..fbc80b3b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.0.0",
+  "version": "12.0.0-next.1",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",
@@ -16,7 +16,7 @@
   ],
   "source": "src/index.ts",
   "main": "dist/umd/index.js",
-  "module": "dist/esm/index.mjs",
+  "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "exports": {
     ".": {
@@ -36,8 +36,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/wbkd/react-flow.git",
-    "directory": "packages/core"
+    "url": "https://github.com/xyflow/xyflow.git",
+    "directory": "packages/react"
   },
   "scripts": {
     "dev": "concurrently \"rollup --config node:@xyflow/rollup-config --watch\" pnpm:css-watch",
@@ -51,12 +51,10 @@
     "@types/d3": "^7.4.0",
     "@types/d3-drag": "^3.0.1",
     "@types/d3-selection": "^3.0.3",
-    "@types/d3-zoom": "^3.0.1",
     "@xyflow/system": "workspace:*",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
     "zustand": "^4.4.0"
   },
   "peerDependencies": {
@@ -73,7 +71,7 @@
     "autoprefixer": "^10.4.15",
     "cssnano": "^6.0.1",
     "postcss": "^8.4.21",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.0",
@@ -85,11 +83,10 @@
     "globals": {
       "classcat": "cc",
       "d3-selection": "d3Selection",
-      "d3-zoom": "d3Zoom",
       "d3-drag": "d3Drag",
       "zustand": "zustand",
       "zustand/shallow": "zustandShallow"
     },
-    "name": "ReactFlowCore"
+    "name": "ReactFlow"
   }
 }
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index 80ac09be..71cce50b 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -1,21 +1,18 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { memo } from 'react';
+import { ComponentType, memo } from 'react';
+import { NodeOrigin, getNodePositionWithOrigin } from '@xyflow/system';
 import { shallow } from 'zustand/shallow';
-import { getNodePositionWithOrigin } from '@xyflow/system';
 
 import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 import MiniMapNode from './MiniMapNode';
-import type { MiniMapNodes, GetMiniMapNodeAttribute } from './types';
+import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
 
 declare const window: any;
 
 const selector = (s: ReactFlowState) => s.nodeOrigin;
-const selectorNodes = (s: ReactFlowState) =>
-  s.nodes.filter(
-    (node) => !node.hidden && (node.computed?.width || node.width) && (node.computed?.height || node.height)
-  );
+const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
@@ -28,8 +25,8 @@ function MiniMapNodes({
   // a component properly.
   nodeComponent: NodeComponent = MiniMapNode,
   onClick,
-}: MiniMapNodes) {
-  const nodes = useStore(selectorNodes, shallow);
+}: MiniMapNodesProps) {
+  const nodeIds = useStore(selectorNodeIds, shallow);
   const nodeOrigin = useStore(selector);
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -39,33 +36,85 @@ function MiniMapNodes({
 
   return (
     <>
-      {nodes.map((node) => {
-        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
-        const color = nodeColor === undefined ? undefined : nodeColorFunc(node);
-        const strokeColor = nodeStrokeColor === undefined ? undefined : nodeStrokeColorFunc(node);
-
-        return (
-          <NodeComponent
-            key={node.id}
-            x={x}
-            y={y}
-            width={node.computed?.width ?? node.width ?? 0}
-            height={node.computed?.height ?? node.height ?? 0}
-            style={node.style}
-            selected={!!node.selected}
-            className={nodeClassNameFunc(node)}
-            color={color}
-            borderRadius={nodeBorderRadius}
-            strokeColor={strokeColor}
-            strokeWidth={nodeStrokeWidth}
-            shapeRendering={shapeRendering}
-            onClick={onClick}
-            id={node.id}
-          />
-        );
-      })}
+      {nodeIds.map((nodeId) => (
+        // The split of responsibilities between MiniMapNodes and
+        // NodeComponentWrapper may appear weird. However, it’s designed to
+        // minimize the cost of updates when individual nodes change.
+        //
+        // For more details, see a similar commit in `NodeRenderer/index.tsx`.
+        <NodeComponentWrapper
+          key={nodeId}
+          id={nodeId}
+          nodeOrigin={nodeOrigin}
+          nodeColorFunc={nodeColorFunc}
+          nodeStrokeColorFunc={nodeStrokeColorFunc}
+          nodeClassNameFunc={nodeClassNameFunc}
+          nodeBorderRadius={nodeBorderRadius}
+          nodeStrokeWidth={nodeStrokeWidth}
+          NodeComponent={NodeComponent}
+          onClick={onClick}
+          shapeRendering={shapeRendering}
+        />
+      ))}
     </>
   );
 }
 
+const NodeComponentWrapper = memo(function NodeComponentWrapper({
+  id,
+  nodeOrigin,
+  nodeColorFunc,
+  nodeStrokeColorFunc,
+  nodeClassNameFunc,
+  nodeBorderRadius,
+  nodeStrokeWidth,
+  shapeRendering,
+  NodeComponent,
+  onClick,
+}: {
+  id: string;
+  nodeOrigin: NodeOrigin;
+  nodeColorFunc: GetMiniMapNodeAttribute;
+  nodeStrokeColorFunc: GetMiniMapNodeAttribute;
+  nodeClassNameFunc: GetMiniMapNodeAttribute;
+  nodeBorderRadius: number;
+  nodeStrokeWidth?: number;
+  NodeComponent: ComponentType<MiniMapNodeProps>;
+  onClick: MiniMapNodesProps['onClick'];
+  shapeRendering: string;
+}) {
+  const { node, x, y } = useStore((s) => {
+    const node = s.nodeLookup.get(id);
+    const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
+
+    return {
+      node,
+      x,
+      y,
+    };
+  }, shallow);
+  if (!node || node.hidden || !(node.computed?.width || node.width) || !(node.computed?.height || node.height)) {
+    return null;
+  }
+
+  return (
+    <NodeComponent
+      x={x}
+      y={y}
+      width={node.computed?.width ?? node.width ?? 0}
+      height={node.computed?.height ?? node.height ?? 0}
+      style={node.style}
+      selected={!!node.selected}
+      className={nodeClassNameFunc(node)}
+      color={nodeColorFunc(node)}
+      borderRadius={nodeBorderRadius}
+      strokeColor={nodeStrokeColorFunc(node)}
+      strokeWidth={nodeStrokeWidth}
+      shapeRendering={shapeRendering}
+      onClick={onClick}
+      id={node.id}
+    />
+  );
+});
+
 export default memo(MiniMapNodes);
diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts
index 5667f7a8..3b24b08d 100644
--- a/packages/react/src/additional-components/MiniMap/types.ts
+++ b/packages/react/src/additional-components/MiniMap/types.ts
@@ -4,12 +4,12 @@ import type { PanelPosition, XYPosition } from '@xyflow/system';
 
 import type { Node } from '../../types';
 
-export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
+export type GetMiniMapNodeAttribute<NodeType extends Node = Node> = (node: NodeType) => string;
 
-export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
-  nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
-  nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
-  nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
+export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
+  nodeColor?: string | GetMiniMapNodeAttribute<NodeType>;
+  nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeType>;
+  nodeClassName?: string | GetMiniMapNodeAttribute<NodeType>;
   nodeBorderRadius?: number;
   nodeStrokeWidth?: number;
   nodeComponent?: ComponentType<MiniMapNodeProps>;
@@ -18,7 +18,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   maskStrokeWidth?: number;
   position?: PanelPosition;
   onClick?: (event: MouseEvent, position: XYPosition) => void;
-  onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
+  onNodeClick?: (event: MouseEvent, node: NodeType) => void;
   pannable?: boolean;
   zoomable?: boolean;
   ariaLabel?: string | null;
@@ -27,8 +27,8 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   offsetScale?: number;
 };
 
-export type MiniMapNodes = Pick<
-  MiniMapProps,
+export type MiniMapNodes<NodeType extends Node = Node> = Pick<
+  MiniMapProps<NodeType>,
   'nodeColor' | 'nodeStrokeColor' | 'nodeClassName' | 'nodeBorderRadius' | 'nodeStrokeWidth' | 'nodeComponent'
 > & {
   onClick?: (event: MouseEvent, nodeId: string) => void;
diff --git a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
index b7028a76..6f4ad13c 100644
--- a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
@@ -9,16 +9,20 @@ import { useNodeId } from '../../contexts/NodeIdContext';
 import NodeToolbarPortal from './NodeToolbarPortal';
 import { NodeToolbarProps } from './types';
 
-const nodeEqualityFn = (a: Node | undefined, b: Node | undefined) =>
-  a?.computed?.positionAbsolute?.x === b?.computed?.positionAbsolute?.x &&
-  a?.computed?.positionAbsolute?.y === b?.computed?.positionAbsolute?.y &&
-  a?.width === b?.width &&
-  a?.height === b?.height &&
-  a?.selected === b?.selected &&
-  a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
+const nodeEqualityFn = (a?: Node, b?: Node) =>
+  a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
+  a?.computed?.positionAbsolute?.y !== b?.computed?.positionAbsolute?.y ||
+  a?.computed?.width !== b?.computed?.width ||
+  a?.computed?.height !== b?.computed?.height ||
+  a?.selected !== b?.selected ||
+  a?.[internalsSymbol]?.z !== b?.[internalsSymbol]?.z;
 
 const nodesEqualityFn = (a: Node[], b: Node[]) => {
-  return a.length === b.length && a.every((node, i) => nodeEqualityFn(node, b[i]));
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  return !a.some((node, i) => nodeEqualityFn(node, b[i]));
 };
 
 const storeSelector = (state: ReactFlowState) => ({
diff --git a/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
new file mode 100644
index 00000000..8f6ddfe3
--- /dev/null
+++ b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx
@@ -0,0 +1,137 @@
+// Updatable edges have a anchors around their handles to update the edge.
+import { XYHandle, type Connection, EdgePosition } from '@xyflow/system';
+
+import { EdgeAnchor } from '../Edges/EdgeAnchor';
+import type { EdgeWrapperProps, Edge } from '../../types/edges';
+import { useStoreApi } from '../../hooks/useStore';
+
+type EdgeUpdateAnchorsProps = {
+  edge: Edge;
+  isUpdatable: boolean | 'source' | 'target';
+  edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius'];
+  sourceHandleId: EdgeWrapperProps['sourceHandleId'];
+  targetHandleId: EdgeWrapperProps['targetHandleId'];
+  onEdgeUpdate: EdgeWrapperProps['onEdgeUpdate'];
+  onEdgeUpdateStart: EdgeWrapperProps['onEdgeUpdateStart'];
+  onEdgeUpdateEnd: EdgeWrapperProps['onEdgeUpdateEnd'];
+  setUpdateHover: (hover: boolean) => void;
+  setUpdating: (updating: boolean) => void;
+} & EdgePosition;
+
+function EdgeUpdateAnchors({
+  isUpdatable,
+  edgeUpdaterRadius,
+  edge,
+  targetHandleId,
+  sourceHandleId,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  onEdgeUpdate,
+  onEdgeUpdateStart,
+  onEdgeUpdateEnd,
+  setUpdating,
+  setUpdateHover,
+}: EdgeUpdateAnchorsProps) {
+  const store = useStoreApi();
+
+  const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
+    // avoid triggering edge updater if mouse btn is not left
+    if (event.button !== 0) {
+      return;
+    }
+
+    const {
+      autoPanOnConnect,
+      domNode,
+      isValidConnection,
+      connectionMode,
+      connectionRadius,
+      lib,
+      onConnectStart,
+      onConnectEnd,
+      cancelConnection,
+      nodes,
+      panBy,
+      updateConnection,
+    } = store.getState();
+    const nodeId = isSourceHandle ? edge.target : edge.source;
+    const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
+    const handleType = isSourceHandle ? 'target' : 'source';
+
+    const isTarget = isSourceHandle;
+
+    setUpdating(true);
+    onEdgeUpdateStart?.(event, edge, handleType);
+
+    const _onEdgeUpdateEnd = (evt: MouseEvent | TouchEvent) => {
+      setUpdating(false);
+      onEdgeUpdateEnd?.(evt, edge, handleType);
+    };
+
+    const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
+
+    XYHandle.onPointerDown(event.nativeEvent, {
+      autoPanOnConnect,
+      connectionMode,
+      connectionRadius,
+      domNode,
+      handleId,
+      nodeId,
+      nodes,
+      isTarget,
+      edgeUpdaterType: handleType,
+      lib,
+      cancelConnection,
+      panBy,
+      isValidConnection,
+      onConnect: onConnectEdge,
+      onConnectStart,
+      onConnectEnd,
+      onEdgeUpdateEnd: _onEdgeUpdateEnd,
+      updateConnection,
+      getTransform: () => store.getState().transform,
+    });
+  };
+
+  const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
+    handleEdgeUpdater(event, true);
+  const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
+    handleEdgeUpdater(event, false);
+  const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
+  const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
+
+  return (
+    <>
+      {(isUpdatable === 'source' || isUpdatable === true) && (
+        <EdgeAnchor
+          position={sourcePosition}
+          centerX={sourceX}
+          centerY={sourceY}
+          radius={edgeUpdaterRadius}
+          onMouseDown={onEdgeUpdaterSourceMouseDown}
+          onMouseEnter={onEdgeUpdaterMouseEnter}
+          onMouseOut={onEdgeUpdaterMouseOut}
+          type="source"
+        />
+      )}
+      {(isUpdatable === 'target' || isUpdatable === true) && (
+        <EdgeAnchor
+          position={targetPosition}
+          centerX={targetX}
+          centerY={targetY}
+          radius={edgeUpdaterRadius}
+          onMouseDown={onEdgeUpdaterTargetMouseDown}
+          onMouseEnter={onEdgeUpdaterMouseEnter}
+          onMouseOut={onEdgeUpdaterMouseOut}
+          type="target"
+        />
+      )}
+    </>
+  );
+}
+
+export default EdgeUpdateAnchors;
diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx
new file mode 100644
index 00000000..2a30116b
--- /dev/null
+++ b/packages/react/src/components/EdgeWrapper/index.tsx
@@ -0,0 +1,266 @@
+import { memo, useState, useMemo, useRef, type KeyboardEvent, useCallback } from 'react';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import {
+  getMarkerId,
+  elementSelectionKeys,
+  getEdgePosition,
+  errorMessages,
+  getElevatedEdgeZIndex,
+} from '@xyflow/system';
+
+import { useStoreApi, useStore } from '../../hooks/useStore';
+import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
+import type { EdgeWrapperProps } from '../../types';
+import { builtinEdgeTypes, nullPosition } from './utils';
+import EdgeUpdateAnchors from './EdgeUpdateAnchors';
+
+function EdgeWrapper({
+  id,
+  edgesFocusable,
+  edgesUpdatable,
+  elementsSelectable,
+  onClick,
+  onDoubleClick,
+  sourceHandleId,
+  targetHandleId,
+  onContextMenu,
+  onMouseEnter,
+  onMouseMove,
+  onMouseLeave,
+  edgeUpdaterRadius,
+  onEdgeUpdate,
+  onEdgeUpdateStart,
+  onEdgeUpdateEnd,
+  rfId,
+  edgeTypes,
+  noPanClassName,
+  onError,
+}: EdgeWrapperProps): JSX.Element | null {
+  let edge = useStore((s) => s.edgeLookup.get(id)!);
+  const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
+  edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
+
+  let edgeType = edge.type || 'default';
+  let EdgeComponent = edgeTypes?.[edgeType] || builtinEdgeTypes[edgeType];
+
+  if (EdgeComponent === undefined) {
+    onError?.('011', errorMessages['error011'](edgeType));
+    edgeType = 'default';
+    EdgeComponent = builtinEdgeTypes.default;
+  }
+
+  const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
+  const isUpdatable =
+    typeof onEdgeUpdate !== 'undefined' &&
+    (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
+  const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));
+
+  const edgeRef = useRef<SVGGElement>(null);
+  const [updateHover, setUpdateHover] = useState<boolean>(false);
+  const [updating, setUpdating] = useState<boolean>(false);
+  const store = useStoreApi();
+
+  const { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(
+    useCallback(
+      (store) => {
+        const sourceNode = store.nodeLookup.get(edge.source);
+        const targetNode = store.nodeLookup.get(edge.target);
+
+        if (!sourceNode || !targetNode) {
+          return {
+            zIndex: edge.zIndex,
+            ...nullPosition,
+          };
+        }
+
+        const edgePosition = getEdgePosition({
+          id,
+          sourceNode,
+          targetNode,
+          sourceHandle: sourceHandleId || null,
+          targetHandle: targetHandleId || null,
+          connectionMode: store.connectionMode,
+          onError,
+        });
+
+        const zIndex = getElevatedEdgeZIndex({
+          selected: edge.selected,
+          zIndex: edge.zIndex,
+          sourceNode,
+          targetNode,
+          elevateOnSelect: store.elevateEdgesOnSelect,
+        });
+
+        return {
+          zIndex,
+          ...(edgePosition || nullPosition),
+        };
+      },
+      [edge.source, edge.target, edge.selected, edge.zIndex]
+    ),
+    shallow
+  );
+
+  const markerStartUrl = useMemo(
+    () => (edge.markerStart ? `url(#${getMarkerId(edge.markerStart, rfId)})` : undefined),
+    [edge.markerStart, rfId]
+  );
+
+  const markerEndUrl = useMemo(
+    () => (edge.markerEnd ? `url(#${getMarkerId(edge.markerEnd, rfId)})` : undefined),
+    [edge.markerEnd, rfId]
+  );
+
+  if (edge.hidden || !sourceX || !sourceY || !targetX || !targetY) {
+    return null;
+  }
+
+  const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+    const { addSelectedEdges, unselectNodesAndEdges, multiSelectionActive } = store.getState();
+
+    if (isSelectable) {
+      store.setState({ nodesSelectionActive: false });
+
+      if (edge.selected && multiSelectionActive) {
+        unselectNodesAndEdges({ nodes: [], edges: [edge] });
+        edgeRef.current?.blur();
+      } else {
+        addSelectedEdges([id]);
+      }
+    }
+
+    if (onClick) {
+      onClick(event, edge);
+    }
+  };
+
+  const onEdgeDoubleClick = onDoubleClick
+    ? (event: React.MouseEvent) => {
+        onDoubleClick(event, { ...edge });
+      }
+    : undefined;
+  const onEdgeContextMenu = onContextMenu
+    ? (event: React.MouseEvent) => {
+        onContextMenu(event, { ...edge });
+      }
+    : undefined;
+  const onEdgeMouseEnter = onMouseEnter
+    ? (event: React.MouseEvent) => {
+        onMouseEnter(event, { ...edge });
+      }
+    : undefined;
+  const onEdgeMouseMove = onMouseMove
+    ? (event: React.MouseEvent) => {
+        onMouseMove(event, { ...edge });
+      }
+    : undefined;
+  const onEdgeMouseLeave = onMouseLeave
+    ? (event: React.MouseEvent) => {
+        onMouseLeave(event, { ...edge });
+      }
+    : undefined;
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (elementSelectionKeys.includes(event.key) && isSelectable) {
+      const { unselectNodesAndEdges, addSelectedEdges } = store.getState();
+      const unselect = event.key === 'Escape';
+
+      if (unselect) {
+        edgeRef.current?.blur();
+        unselectNodesAndEdges({ edges: [edge] });
+      } else {
+        addSelectedEdges([id]);
+      }
+    }
+  };
+
+  return (
+    <svg style={{ zIndex }}>
+      <g
+        className={cc([
+          'react-flow__edge',
+          `react-flow__edge-${edgeType}`,
+          edge.className,
+          noPanClassName,
+          {
+            selected: edge.selected,
+            animated: edge.animated,
+            inactive: !isSelectable && !onClick,
+            updating: updateHover,
+          },
+        ])}
+        onClick={onEdgeClick}
+        onDoubleClick={onEdgeDoubleClick}
+        onContextMenu={onEdgeContextMenu}
+        onMouseEnter={onEdgeMouseEnter}
+        onMouseMove={onEdgeMouseMove}
+        onMouseLeave={onEdgeMouseLeave}
+        onKeyDown={isFocusable ? onKeyDown : undefined}
+        tabIndex={isFocusable ? 0 : undefined}
+        role={isFocusable ? 'button' : 'img'}
+        data-id={id}
+        data-testid={`rf__edge-${id}`}
+        aria-label={
+          edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`
+        }
+        aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
+        ref={edgeRef}
+      >
+        {!updating && (
+          <EdgeComponent
+            id={id}
+            source={edge.source}
+            target={edge.target}
+            selected={edge.selected}
+            animated={edge.animated}
+            label={edge.label}
+            labelStyle={edge.labelStyle}
+            labelShowBg={edge.labelShowBg}
+            labelBgStyle={edge.labelBgStyle}
+            labelBgPadding={edge.labelBgPadding}
+            labelBgBorderRadius={edge.labelBgBorderRadius}
+            sourceX={sourceX}
+            sourceY={sourceY}
+            targetX={targetX}
+            targetY={targetY}
+            sourcePosition={sourcePosition}
+            targetPosition={targetPosition}
+            data={edge.data}
+            style={edge.style}
+            sourceHandleId={sourceHandleId}
+            targetHandleId={targetHandleId}
+            markerStart={markerStartUrl}
+            markerEnd={markerEndUrl}
+            pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
+            interactionWidth={edge.interactionWidth}
+          />
+        )}
+        {isUpdatable && (
+          <EdgeUpdateAnchors
+            edge={edge}
+            isUpdatable={isUpdatable}
+            edgeUpdaterRadius={edgeUpdaterRadius}
+            onEdgeUpdate={onEdgeUpdate}
+            onEdgeUpdateStart={onEdgeUpdateStart}
+            onEdgeUpdateEnd={onEdgeUpdateEnd}
+            sourceX={sourceX}
+            sourceY={sourceY}
+            targetX={targetX}
+            targetY={targetY}
+            sourcePosition={sourcePosition}
+            targetPosition={targetPosition}
+            setUpdateHover={setUpdateHover}
+            setUpdating={setUpdating}
+            sourceHandleId={sourceHandleId}
+            targetHandleId={targetHandleId}
+          />
+        )}
+      </g>
+    </svg>
+  );
+}
+
+EdgeWrapper.displayName = 'EdgeWrapper';
+
+export default memo(EdgeWrapper);
diff --git a/packages/react/src/components/EdgeWrapper/utils.ts b/packages/react/src/components/EdgeWrapper/utils.ts
new file mode 100644
index 00000000..0ac2a2e8
--- /dev/null
+++ b/packages/react/src/components/EdgeWrapper/utils.ts
@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+import type { EdgeProps, EdgeTypes } from '../../types';
+import {
+  BezierEdgeInternal,
+  StraightEdgeInternal,
+  StepEdgeInternal,
+  SmoothStepEdgeInternal,
+  SimpleBezierEdgeInternal,
+} from '../Edges';
+
+export const builtinEdgeTypes: EdgeTypes = {
+  default: BezierEdgeInternal as ComponentType<EdgeProps>,
+  straight: StraightEdgeInternal as ComponentType<EdgeProps>,
+  step: StepEdgeInternal as ComponentType<EdgeProps>,
+  smoothstep: SmoothStepEdgeInternal as ComponentType<EdgeProps>,
+  simplebezier: SimpleBezierEdgeInternal as ComponentType<EdgeProps>,
+};
+
+export const nullPosition = {
+  sourceX: null,
+  sourceY: null,
+  targetX: null,
+  targetY: null,
+  sourcePosition: null,
+  targetPosition: null,
+};
diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx
index 91cfd58a..ae14b472 100644
--- a/packages/react/src/components/Edges/BaseEdge.tsx
+++ b/packages/react/src/components/Edges/BaseEdge.tsx
@@ -2,6 +2,7 @@ import { isNumeric } from '@xyflow/system';
 
 import type { BaseEdgeProps } from '../../types';
 import EdgeText from './EdgeText';
+import classcat from 'classcat';
 
 const BaseEdge = ({
   id,
@@ -17,6 +18,7 @@ const BaseEdge = ({
   style,
   markerEnd,
   markerStart,
+  className,
   interactionWidth = 20,
 }: BaseEdgeProps) => {
   return (
@@ -26,7 +28,7 @@ const BaseEdge = ({
         style={style}
         d={path}
         fill="none"
-        className="react-flow__edge-path"
+        className={classcat(['react-flow__edge-path', className])}
         markerEnd={markerEnd}
         markerStart={markerStart}
       />
diff --git a/packages/react/src/components/Edges/EdgeText.tsx b/packages/react/src/components/Edges/EdgeText.tsx
index 7926e81d..8cc5c388 100644
--- a/packages/react/src/components/Edges/EdgeText.tsx
+++ b/packages/react/src/components/Edges/EdgeText.tsx
@@ -1,4 +1,4 @@
-import { memo, useRef, useState, useEffect, type FC, type PropsWithChildren } from 'react';
+import { memo, useState, type FC, type PropsWithChildren, useCallback } from 'react';
 import cc from 'classcat';
 import type { Rect } from '@xyflow/system';
 
@@ -17,22 +17,21 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
   className,
   ...rest
 }) => {
-  const edgeRef = useRef<SVGTextElement>(null);
-  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 1, y: 0, width: 0, height: 0 });
   const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
 
-  useEffect(() => {
-    if (edgeRef.current) {
-      const textBbox = edgeRef.current.getBBox();
+  const onEdgeTextRefChange = useCallback((edgeRef: SVGTextElement) => {
+    if (edgeRef === null) return;
 
-      setEdgeTextBbox({
-        x: textBbox.x,
-        y: textBbox.y,
-        width: textBbox.width,
-        height: textBbox.height,
-      });
-    }
-  }, [label]);
+    const textBbox = edgeRef.getBBox();
+
+    setEdgeTextBbox({
+      x: textBbox.x,
+      y: textBbox.y,
+      width: textBbox.width,
+      height: textBbox.height,
+    });
+  }, []);
 
   if (typeof label === 'undefined' || !label) {
     return null;
@@ -57,7 +56,13 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
           ry={labelBgBorderRadius}
         />
       )}
-      <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>
+      <text
+        className="react-flow__edge-text"
+        y={edgeTextBbox.height / 2}
+        dy="0.3em"
+        ref={onEdgeTextRefChange}
+        style={labelStyle}
+      >
         {label}
       </text>
       {children}
diff --git a/packages/react/src/components/Edges/utils.ts b/packages/react/src/components/Edges/utils.ts
deleted file mode 100644
index a51b7613..00000000
--- a/packages/react/src/components/Edges/utils.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
-import type { StoreApi } from 'zustand';
-
-import type { Edge, ReactFlowState } from '../../types';
-
-export function getMouseHandler(
-  id: string,
-  getState: StoreApi<ReactFlowState>['getState'],
-  handler?: (event: ReactMouseEvent<SVGGElement, MouseEvent>, edge: Edge) => void
-) {
-  return handler === undefined
-    ? handler
-    : (event: ReactMouseEvent<SVGGElement, MouseEvent>) => {
-        const edge = getState().edges.find((e) => e.id === id);
-
-        if (edge) {
-          handler(event, { ...edge });
-        }
-      };
-}
diff --git a/packages/react/src/components/Edges/wrapEdge.tsx b/packages/react/src/components/Edges/wrapEdge.tsx
deleted file mode 100644
index b0a876b0..00000000
--- a/packages/react/src/components/Edges/wrapEdge.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-import { memo, useState, useMemo, useRef, type ComponentType, type KeyboardEvent, useCallback } from 'react';
-import cc from 'classcat';
-import { shallow } from 'zustand/shallow';
-import { getMarkerId, elementSelectionKeys, XYHandle, type Connection, getEdgePosition } from '@xyflow/system';
-
-import { useStoreApi, useStore } from '../../hooks/useStore';
-import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
-import { EdgeAnchor } from './EdgeAnchor';
-import { getMouseHandler } from './utils';
-import type { EdgeProps, WrapEdgeProps } from '../../types';
-
-export default (EdgeComponent: ComponentType<EdgeProps>) => {
-  const EdgeWrapper = ({
-    id,
-    className,
-    type,
-    data,
-    onClick,
-    onEdgeDoubleClick,
-    selected,
-    animated,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    source,
-    target,
-    isSelectable,
-    hidden,
-    sourceHandleId,
-    targetHandleId,
-    onContextMenu,
-    onMouseEnter,
-    onMouseMove,
-    onMouseLeave,
-    edgeUpdaterRadius,
-    onEdgeUpdate,
-    onEdgeUpdateStart,
-    onEdgeUpdateEnd,
-    markerEnd,
-    markerStart,
-    rfId,
-    ariaLabel,
-    isFocusable,
-    isUpdatable,
-    pathOptions,
-    interactionWidth,
-  }: WrapEdgeProps): JSX.Element | null => {
-    const edgeRef = useRef<SVGGElement>(null);
-    const [updateHover, setUpdateHover] = useState<boolean>(false);
-    const [updating, setUpdating] = useState<boolean>(false);
-    const store = useStoreApi();
-    const edgePosition = useStore(
-      useCallback(
-        (state) => {
-          const sourceNode = state.nodeLookup.get(source);
-          const targetNode = state.nodeLookup.get(target);
-
-          if (!sourceNode || !targetNode) {
-            return null;
-          }
-
-          return getEdgePosition({
-            id,
-            sourceNode,
-            targetNode,
-            sourceHandle: sourceHandleId || null,
-            targetHandle: targetHandleId || null,
-            connectionMode: state.connectionMode,
-            onError: state.onError,
-          });
-        },
-        [source, target]
-      ),
-      shallow
-    );
-
-    const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart, rfId)})`, [markerStart, rfId]);
-    const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd, rfId)})`, [markerEnd, rfId]);
-
-    if (hidden || !edgePosition) {
-      return null;
-    }
-
-    const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-      const { edges, addSelectedEdges, unselectNodesAndEdges, multiSelectionActive } = store.getState();
-      const edge = edges.find((e) => e.id === id);
-
-      if (!edge) {
-        return;
-      }
-
-      if (isSelectable) {
-        store.setState({ nodesSelectionActive: false });
-
-        if (edge.selected && multiSelectionActive) {
-          unselectNodesAndEdges({ nodes: [], edges: [edge] });
-          edgeRef.current?.blur();
-        } else {
-          addSelectedEdges([id]);
-        }
-      }
-
-      if (onClick) {
-        onClick(event, edge);
-      }
-    };
-
-    const onEdgeDoubleClickHandler = getMouseHandler(id, store.getState, onEdgeDoubleClick);
-    const onEdgeContextMenu = getMouseHandler(id, store.getState, onContextMenu);
-    const onEdgeMouseEnter = getMouseHandler(id, store.getState, onMouseEnter);
-    const onEdgeMouseMove = getMouseHandler(id, store.getState, onMouseMove);
-    const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave);
-
-    const handleEdgeUpdater = (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
-      // avoid triggering edge updater if mouse btn is not left
-      if (event.button !== 0) {
-        return;
-      }
-
-      const {
-        autoPanOnConnect,
-        domNode,
-        edges,
-        isValidConnection,
-        connectionMode,
-        connectionRadius,
-        lib,
-        onConnectStart,
-        onConnectEnd,
-        cancelConnection,
-        nodes,
-        panBy,
-        updateConnection,
-      } = store.getState();
-      const nodeId = isSourceHandle ? target : source;
-      const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
-      const handleType = isSourceHandle ? 'target' : 'source';
-
-      const isTarget = isSourceHandle;
-      const edge = edges.find((e) => e.id === id)!;
-
-      setUpdating(true);
-      onEdgeUpdateStart?.(event, edge, handleType);
-
-      const _onEdgeUpdateEnd = (evt: MouseEvent | TouchEvent) => {
-        setUpdating(false);
-        onEdgeUpdateEnd?.(evt, edge, handleType);
-      };
-
-      const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection);
-
-      XYHandle.onPointerDown(event.nativeEvent, {
-        autoPanOnConnect,
-        connectionMode,
-        connectionRadius,
-        domNode,
-        handleId,
-        nodeId,
-        nodes,
-        isTarget,
-        edgeUpdaterType: handleType,
-        lib,
-        cancelConnection,
-        panBy,
-        isValidConnection,
-        onConnect: onConnectEdge,
-        onConnectStart,
-        onConnectEnd,
-        onEdgeUpdateEnd: _onEdgeUpdateEnd,
-        updateConnection,
-        getTransform: () => store.getState().transform,
-      });
-    };
-
-    const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
-      handleEdgeUpdater(event, true);
-    const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent<SVGGElement, MouseEvent>): void =>
-      handleEdgeUpdater(event, false);
-
-    const onEdgeUpdaterMouseEnter = () => setUpdateHover(true);
-    const onEdgeUpdaterMouseOut = () => setUpdateHover(false);
-
-    const inactive = !isSelectable && !onClick;
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (elementSelectionKeys.includes(event.key) && isSelectable) {
-        const { unselectNodesAndEdges, addSelectedEdges, edges } = store.getState();
-        const unselect = event.key === 'Escape';
-
-        if (unselect) {
-          edgeRef.current?.blur();
-          unselectNodesAndEdges({ edges: [edges.find((e) => e.id === id)!] });
-        } else {
-          addSelectedEdges([id]);
-        }
-      }
-    };
-
-    return (
-      <g
-        className={cc([
-          'react-flow__edge',
-          `react-flow__edge-${type}`,
-          className,
-          { selected, animated, inactive, updating: updateHover },
-        ])}
-        onClick={onEdgeClick}
-        onDoubleClick={onEdgeDoubleClickHandler}
-        onContextMenu={onEdgeContextMenu}
-        onMouseEnter={onEdgeMouseEnter}
-        onMouseMove={onEdgeMouseMove}
-        onMouseLeave={onEdgeMouseLeave}
-        onKeyDown={isFocusable ? onKeyDown : undefined}
-        tabIndex={isFocusable ? 0 : undefined}
-        role={isFocusable ? 'button' : 'img'}
-        data-id={id}
-        data-testid={`rf__edge-${id}`}
-        aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`}
-        aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
-        ref={edgeRef}
-      >
-        {!updating && (
-          <EdgeComponent
-            id={id}
-            source={source}
-            target={target}
-            selected={selected}
-            animated={animated}
-            label={label}
-            labelStyle={labelStyle}
-            labelShowBg={labelShowBg}
-            labelBgStyle={labelBgStyle}
-            labelBgPadding={labelBgPadding}
-            labelBgBorderRadius={labelBgBorderRadius}
-            data={data}
-            style={style}
-            sourceX={edgePosition.sourceX}
-            sourceY={edgePosition.sourceY}
-            targetX={edgePosition.targetX}
-            targetY={edgePosition.targetY}
-            sourcePosition={edgePosition.sourcePosition}
-            targetPosition={edgePosition.targetPosition}
-            sourceHandleId={sourceHandleId}
-            targetHandleId={targetHandleId}
-            markerStart={markerStartUrl}
-            markerEnd={markerEndUrl}
-            pathOptions={pathOptions}
-            interactionWidth={interactionWidth}
-          />
-        )}
-        {isUpdatable && (
-          <>
-            {(isUpdatable === 'source' || isUpdatable === true) && (
-              <EdgeAnchor
-                position={edgePosition.sourcePosition}
-                centerX={edgePosition.sourceX}
-                centerY={edgePosition.sourceY}
-                radius={edgeUpdaterRadius}
-                onMouseDown={onEdgeUpdaterSourceMouseDown}
-                onMouseEnter={onEdgeUpdaterMouseEnter}
-                onMouseOut={onEdgeUpdaterMouseOut}
-                type="source"
-              />
-            )}
-            {(isUpdatable === 'target' || isUpdatable === true) && (
-              <EdgeAnchor
-                position={edgePosition.targetPosition}
-                centerX={edgePosition.targetX}
-                centerY={edgePosition.targetY}
-                radius={edgeUpdaterRadius}
-                onMouseDown={onEdgeUpdaterTargetMouseDown}
-                onMouseEnter={onEdgeUpdaterMouseEnter}
-                onMouseOut={onEdgeUpdaterMouseOut}
-                type="target"
-              />
-            )}
-          </>
-        )}
-      </g>
-    );
-  };
-
-  EdgeWrapper.displayName = 'EdgeWrapper';
-
-  return memo(EdgeWrapper);
-};
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
new file mode 100644
index 00000000..cc593439
--- /dev/null
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -0,0 +1,264 @@
+import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent } from 'react';
+import cc from 'classcat';
+import {
+  clampPosition,
+  elementSelectionKeys,
+  errorMessages,
+  getPositionWithOrigin,
+  internalsSymbol,
+  isInputDOMNode,
+} from '@xyflow/system';
+
+import { useStore, useStoreApi } from '../../hooks/useStore';
+import { Provider } from '../../contexts/NodeIdContext';
+import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
+import useDrag from '../../hooks/useDrag';
+import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
+import { handleNodeClick } from '../Nodes/utils';
+import type { NodeWrapperProps } from '../../types';
+import { arrowKeyDiffs, builtinNodeTypes } from './utils';
+import { shallow } from 'zustand/shallow';
+
+const NodeWrapper = ({
+  id,
+  onClick,
+  onMouseEnter,
+  onMouseMove,
+  onMouseLeave,
+  onContextMenu,
+  onDoubleClick,
+  nodesDraggable,
+  elementsSelectable,
+  nodesConnectable,
+  nodesFocusable,
+  resizeObserver,
+  noDragClassName,
+  noPanClassName,
+  disableKeyboardA11y,
+  rfId,
+  nodeTypes,
+  nodeExtent,
+  nodeOrigin,
+  onError,
+}: NodeWrapperProps) => {
+  const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+    const node = s.nodeLookup.get(id)!;
+
+    const positionAbsolute = nodeExtent
+      ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
+      : node.computed?.positionAbsolute || { x: 0, y: 0 };
+
+    return {
+      node,
+      // we are mutating positionAbsolute, z and isParent attributes for sub flows
+      // so we we need to force a re-render when some change
+      positionAbsoluteX: positionAbsolute.x,
+      positionAbsoluteY: positionAbsolute.y,
+      zIndex: node[internalsSymbol]?.z ?? 0,
+      isParent: !!node[internalsSymbol]?.isParent,
+    };
+  }, shallow);
+
+  let nodeType = node.type || 'default';
+  let NodeComponent = nodeTypes?.[nodeType] || builtinNodeTypes[nodeType];
+
+  if (NodeComponent === undefined) {
+    onError?.('003', errorMessages['error003'](nodeType));
+    nodeType = 'default';
+    NodeComponent = builtinNodeTypes.default;
+  }
+
+  const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+  const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+  const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+  const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
+
+  const store = useStoreApi();
+  const nodeRef = useRef<HTMLDivElement>(null);
+  const prevSourcePosition = useRef(node.sourcePosition);
+  const prevTargetPosition = useRef(node.targetPosition);
+  const prevType = useRef(nodeType);
+
+  const updatePositions = useUpdateNodePositions();
+
+  useEffect(() => {
+    if (nodeRef.current && !node.hidden) {
+      const currNode = nodeRef.current;
+      resizeObserver?.observe(currNode);
+
+      return () => resizeObserver?.unobserve(currNode);
+    }
+  }, [node.hidden]);
+
+  useEffect(() => {
+    // when the user programmatically changes the source or handle position, we re-initialize the node
+    const typeChanged = prevType.current !== nodeType;
+    const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
+    const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
+
+    if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
+      if (typeChanged) {
+        prevType.current = nodeType;
+      }
+      if (sourcePosChanged) {
+        prevSourcePosition.current = node.sourcePosition;
+      }
+      if (targetPosChanged) {
+        prevTargetPosition.current = node.targetPosition;
+      }
+      store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
+    }
+  }, [id, nodeType, node.sourcePosition, node.targetPosition]);
+
+  const dragging = useDrag({
+    nodeRef,
+    disabled: node.hidden || !isDraggable,
+    noDragClassName,
+    handleSelector: node.dragHandle,
+    nodeId: id,
+    isSelectable,
+  });
+
+  if (node.hidden) {
+    return null;
+  }
+
+  const width = node.width ?? undefined;
+  const height = node.height ?? undefined;
+  const computedWidth = node.computed?.width;
+  const computedHeight = node.computed?.height;
+
+  const positionAbsoluteOrigin = getPositionWithOrigin({
+    x: positionAbsoluteX,
+    y: positionAbsoluteY,
+    width: computedWidth ?? width ?? 0,
+    height: computedHeight ?? height ?? 0,
+    origin: node.origin || nodeOrigin,
+  });
+  const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
+  const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
+
+  const onMouseEnterHandler = onMouseEnter ? (event: MouseEvent) => onMouseEnter(event, { ...node }) : undefined;
+  const onMouseMoveHandler = onMouseMove ? (event: MouseEvent) => onMouseMove(event, { ...node }) : undefined;
+  const onMouseLeaveHandler = onMouseLeave ? (event: MouseEvent) => onMouseLeave(event, { ...node }) : undefined;
+  const onContextMenuHandler = onContextMenu ? (event: MouseEvent) => onContextMenu(event, { ...node }) : undefined;
+  const onDoubleClickHandler = onDoubleClick ? (event: MouseEvent) => onDoubleClick(event, { ...node }) : undefined;
+
+  const onSelectNodeHandler = (event: MouseEvent) => {
+    const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
+
+    if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
+      // this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
+      // here we only need to call it when selectNodesOnDrag=false
+      handleNodeClick({
+        id,
+        store,
+        nodeRef,
+      });
+    }
+
+    if (onClick) {
+      onClick(event, { ...node });
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (isInputDOMNode(event.nativeEvent)) {
+      return;
+    }
+
+    if (elementSelectionKeys.includes(event.key) && isSelectable) {
+      const unselect = event.key === 'Escape';
+
+      handleNodeClick({
+        id,
+        store,
+        unselect,
+        nodeRef,
+      });
+    } else if (
+      !disableKeyboardA11y &&
+      isDraggable &&
+      node.selected &&
+      Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)
+    ) {
+      store.setState({
+        ariaLiveMessage: `Moved selected node ${event.key
+          .replace('Arrow', '')
+          .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+      });
+
+      updatePositions({
+        x: arrowKeyDiffs[event.key].x,
+        y: arrowKeyDiffs[event.key].y,
+        isShiftPressed: event.shiftKey,
+      });
+    }
+  };
+
+  return (
+    <div
+      className={cc([
+        'react-flow__node',
+        `react-flow__node-${nodeType}`,
+        {
+          // this is overwritable by passing `nopan` as a class name
+          [noPanClassName]: isDraggable,
+        },
+        node.className,
+        {
+          selected: node.selected,
+          selectable: isSelectable,
+          parent: isParent,
+          dragging,
+        },
+      ])}
+      ref={nodeRef}
+      style={{
+        zIndex,
+        transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+        pointerEvents: hasPointerEvents ? 'all' : 'none',
+        visibility: initialized ? 'visible' : 'hidden',
+        width,
+        height,
+        ...node.style,
+      }}
+      data-id={id}
+      data-testid={`rf__node-${id}`}
+      onMouseEnter={onMouseEnterHandler}
+      onMouseMove={onMouseMoveHandler}
+      onMouseLeave={onMouseLeaveHandler}
+      onContextMenu={onContextMenuHandler}
+      onClick={onSelectNodeHandler}
+      onDoubleClick={onDoubleClickHandler}
+      onKeyDown={isFocusable ? onKeyDown : undefined}
+      tabIndex={isFocusable ? 0 : undefined}
+      role={isFocusable ? 'button' : undefined}
+      aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
+      aria-label={node.ariaLabel}
+    >
+      <Provider value={id}>
+        <NodeComponent
+          id={id}
+          data={node.data}
+          type={nodeType}
+          width={computedWidth}
+          height={computedHeight}
+          positionAbsoluteX={positionAbsoluteX}
+          positionAbsoluteY={positionAbsoluteY}
+          selected={node.selected}
+          isConnectable={isConnectable}
+          sourcePosition={node.sourcePosition}
+          targetPosition={node.targetPosition}
+          dragging={dragging}
+          dragHandle={node.dragHandle}
+          zIndex={zIndex}
+        />
+      </Provider>
+    </div>
+  );
+};
+
+NodeWrapper.displayName = 'NodeWrapper';
+
+export default memo(NodeWrapper);
diff --git a/packages/react/src/components/NodeWrapper/utils.tsx b/packages/react/src/components/NodeWrapper/utils.tsx
new file mode 100644
index 00000000..6ae5f994
--- /dev/null
+++ b/packages/react/src/components/NodeWrapper/utils.tsx
@@ -0,0 +1,22 @@
+import type { ComponentType } from 'react';
+import type { NodeProps, XYPosition } from '@xyflow/system';
+
+import InputNode from '../Nodes/InputNode';
+import DefaultNode from '../Nodes/DefaultNode';
+import GroupNode from '../Nodes/GroupNode';
+import OutputNode from '../Nodes/OutputNode';
+import type { NodeTypes } from '../../types';
+
+export const arrowKeyDiffs: Record<string, XYPosition> = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+};
+
+export const builtinNodeTypes: NodeTypes = {
+  input: InputNode as ComponentType<NodeProps>,
+  default: DefaultNode as ComponentType<NodeProps>,
+  output: OutputNode as ComponentType<NodeProps>,
+  group: GroupNode as ComponentType<NodeProps>,
+};
diff --git a/packages/react/src/components/Nodes/utils.ts b/packages/react/src/components/Nodes/utils.ts
index b9a82189..26b1f246 100644
--- a/packages/react/src/components/Nodes/utils.ts
+++ b/packages/react/src/components/Nodes/utils.ts
@@ -1,22 +1,9 @@
-import type { MouseEvent, RefObject } from 'react';
+import type { RefObject } from 'react';
 import type { StoreApi } from 'zustand';
 
-import type { Node, ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 import { errorMessages } from '@xyflow/system';
 
-export function getMouseHandler(
-  id: string,
-  getState: StoreApi<ReactFlowState>['getState'],
-  handler?: (event: MouseEvent, node: Node) => void
-) {
-  return handler === undefined
-    ? handler
-    : (event: MouseEvent) => {
-        const node = getState().nodeLookup.get(id)!;
-        handler(event, { ...node });
-      };
-}
-
 // this handler is called by
 // 1. the click handler when node is not draggable or selectNodesOnDrag = false
 // or
diff --git a/packages/react/src/components/Nodes/wrapNode.tsx b/packages/react/src/components/Nodes/wrapNode.tsx
deleted file mode 100644
index cc1537d1..00000000
--- a/packages/react/src/components/Nodes/wrapNode.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { useEffect, useRef, memo, type ComponentType, type MouseEvent, type KeyboardEvent } from 'react';
-import cc from 'classcat';
-import { elementSelectionKeys, isInputDOMNode, type NodeProps, type XYPosition } from '@xyflow/system';
-
-import { useStoreApi } from '../../hooks/useStore';
-import { Provider } from '../../contexts/NodeIdContext';
-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 },
-  ArrowDown: { x: 0, y: 1 },
-  ArrowLeft: { x: -1, y: 0 },
-  ArrowRight: { x: 1, y: 0 },
-};
-
-export default (NodeComponent: ComponentType<NodeProps>) => {
-  const NodeWrapper = ({
-    id,
-    type,
-    data,
-    xPos,
-    yPos,
-    xPosOrigin,
-    yPosOrigin,
-    selected,
-    onClick,
-    onMouseEnter,
-    onMouseMove,
-    onMouseLeave,
-    onContextMenu,
-    onDoubleClick,
-    style,
-    className,
-    isDraggable,
-    isSelectable,
-    isConnectable,
-    isFocusable,
-    sourcePosition,
-    targetPosition,
-    hidden,
-    resizeObserver,
-    dragHandle,
-    zIndex,
-    isParent,
-    noDragClassName,
-    noPanClassName,
-    initialized,
-    disableKeyboardA11y,
-    ariaLabel,
-    rfId,
-    positionAbsolute,
-    width,
-    height,
-  }: WrapNodeProps) => {
-    const store = useStoreApi();
-    const nodeRef = useRef<HTMLDivElement>(null);
-    const prevSourcePosition = useRef(sourcePosition);
-    const prevTargetPosition = useRef(targetPosition);
-    const prevType = useRef(type);
-    const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
-    const updatePositions = useUpdateNodePositions();
-
-    const onMouseEnterHandler = getMouseHandler(id, store.getState, onMouseEnter);
-    const onMouseMoveHandler = getMouseHandler(id, store.getState, onMouseMove);
-    const onMouseLeaveHandler = getMouseHandler(id, store.getState, onMouseLeave);
-    const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu);
-    const onDoubleClickHandler = getMouseHandler(id, store.getState, onDoubleClick);
-    const onSelectNodeHandler = (event: MouseEvent) => {
-      const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
-
-      if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
-        // this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
-        // here we only need to call it when selectNodesOnDrag=false
-        handleNodeClick({
-          id,
-          store,
-          nodeRef,
-        });
-      }
-
-      if (onClick) {
-        const node = store.getState().nodes.find((n) => n.id === id)!;
-        onClick(event, { ...node });
-      }
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (isInputDOMNode(event.nativeEvent)) {
-        return;
-      }
-
-      if (elementSelectionKeys.includes(event.key) && isSelectable) {
-        const unselect = event.key === 'Escape';
-
-        handleNodeClick({
-          id,
-          store,
-          unselect,
-          nodeRef,
-        });
-      } else if (
-        !disableKeyboardA11y &&
-        isDraggable &&
-        selected &&
-        Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)
-      ) {
-        store.setState({
-          ariaLiveMessage: `Moved selected node ${event.key
-            .replace('Arrow', '')
-            .toLowerCase()}. New position, x: ${~~xPos}, y: ${~~yPos}`,
-        });
-
-        updatePositions({
-          x: arrowKeyDiffs[event.key].x,
-          y: arrowKeyDiffs[event.key].y,
-          isShiftPressed: event.shiftKey,
-        });
-      }
-    };
-
-    useEffect(() => {
-      if (nodeRef.current && !hidden) {
-        const currNode = nodeRef.current;
-        resizeObserver?.observe(currNode);
-
-        return () => resizeObserver?.unobserve(currNode);
-      }
-    }, [hidden]);
-
-    useEffect(() => {
-      // when the user programmatically changes the source or handle position, we re-initialize the node
-      const typeChanged = prevType.current !== type;
-      const sourcePosChanged = prevSourcePosition.current !== sourcePosition;
-      const targetPosChanged = prevTargetPosition.current !== targetPosition;
-
-      if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
-        if (typeChanged) {
-          prevType.current = type;
-        }
-        if (sourcePosChanged) {
-          prevSourcePosition.current = sourcePosition;
-        }
-        if (targetPosChanged) {
-          prevTargetPosition.current = targetPosition;
-        }
-        store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
-      }
-    }, [id, type, sourcePosition, targetPosition]);
-
-    const dragging = useDrag({
-      nodeRef,
-      disabled: hidden || !isDraggable,
-      noDragClassName,
-      handleSelector: dragHandle,
-      nodeId: id,
-      isSelectable,
-    });
-
-    if (hidden) {
-      return null;
-    }
-
-    return (
-      <div
-        className={cc([
-          'react-flow__node',
-          `react-flow__node-${type}`,
-          {
-            // this is overwritable by passing `nopan` as a class name
-            [noPanClassName]: isDraggable,
-          },
-          className,
-          {
-            selected,
-            selectable: isSelectable,
-            parent: isParent,
-            dragging,
-          },
-        ])}
-        ref={nodeRef}
-        style={{
-          zIndex,
-          transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
-          pointerEvents: hasPointerEvents ? 'all' : 'none',
-          visibility: initialized ? 'visible' : 'hidden',
-          width,
-          height,
-          ...style,
-        }}
-        data-id={id}
-        data-testid={`rf__node-${id}`}
-        onMouseEnter={onMouseEnterHandler}
-        onMouseMove={onMouseMoveHandler}
-        onMouseLeave={onMouseLeaveHandler}
-        onContextMenu={onContextMenuHandler}
-        onClick={onSelectNodeHandler}
-        onDoubleClick={onDoubleClickHandler}
-        onKeyDown={isFocusable ? onKeyDown : undefined}
-        tabIndex={isFocusable ? 0 : undefined}
-        role={isFocusable ? 'button' : undefined}
-        aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
-        aria-label={ariaLabel}
-      >
-        <Provider value={id}>
-          <NodeComponent
-            id={id}
-            data={data}
-            type={type}
-            width={width}
-            height={height}
-            positionAbsolute={positionAbsolute}
-            selected={selected}
-            isConnectable={isConnectable}
-            sourcePosition={sourcePosition}
-            targetPosition={targetPosition}
-            dragging={dragging}
-            dragHandle={dragHandle}
-            zIndex={zIndex}
-          />
-        </Provider>
-      </div>
-    );
-  };
-
-  NodeWrapper.displayName = 'NodeWrapper';
-
-  return memo(NodeWrapper);
-};
diff --git a/packages/react/src/components/NodesSelection/index.tsx b/packages/react/src/components/NodesSelection/index.tsx
index ec88fccd..e79ed782 100644
--- a/packages/react/src/components/NodesSelection/index.tsx
+++ b/packages/react/src/components/NodesSelection/index.tsx
@@ -10,9 +10,9 @@ import { getNodesBounds } from '@xyflow/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';
+import { arrowKeyDiffs } from '../NodeWrapper/utils';
 
 export type NodesSelectionProps = {
   onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx
index 65f1bb3c..344c718f 100644
--- a/packages/react/src/components/StoreUpdater/index.tsx
+++ b/packages/react/src/components/StoreUpdater/index.tsx
@@ -3,67 +3,75 @@
  * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
  * and values that have a dedicated setter function in the store (like `setNodes`).
  */
-import { useEffect } from 'react';
-import { StoreApi } from 'zustand';
+import { useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import { devWarn, type CoordinateExtent } from '@xyflow/system';
+import { infiniteExtent, type CoordinateExtent } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import type { Node, Edge, ReactFlowState, ReactFlowProps, ReactFlowStore } from '../../types';
+import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types';
+import { initNodeOrigin } from '../../container/ReactFlow';
 
-type StoreUpdaterProps = Pick<
-  ReactFlowProps,
-  | 'nodes'
-  | 'edges'
-  | 'defaultNodes'
-  | 'defaultEdges'
-  | 'onConnect'
-  | 'onConnectStart'
-  | 'onConnectEnd'
-  | 'onClickConnectStart'
-  | 'onClickConnectEnd'
-  | 'nodesDraggable'
-  | 'nodesConnectable'
-  | 'nodesFocusable'
-  | 'edgesFocusable'
-  | 'edgesUpdatable'
-  | 'minZoom'
-  | 'maxZoom'
-  | 'nodeExtent'
-  | 'onNodesChange'
-  | 'onEdgesChange'
-  | 'elementsSelectable'
-  | 'connectionMode'
-  | 'snapToGrid'
-  | 'snapGrid'
-  | 'translateExtent'
-  | 'connectOnClick'
-  | 'defaultEdgeOptions'
-  | 'fitView'
-  | 'fitViewOptions'
-  | 'onNodesDelete'
-  | 'onEdgesDelete'
-  | 'onDelete'
-  | 'onNodeDragStart'
-  | 'onNodeDrag'
-  | 'onNodeDragStop'
-  | 'onSelectionDragStart'
-  | 'onSelectionDrag'
-  | 'onSelectionDragStop'
-  | 'onMove'
-  | 'onMoveStart'
-  | 'onMoveEnd'
-  | 'noPanClassName'
-  | 'nodeOrigin'
-  | 'elevateNodesOnSelect'
-  | 'autoPanOnConnect'
-  | 'autoPanOnNodeDrag'
-  | 'onError'
-  | 'connectionRadius'
-  | 'isValidConnection'
-  | 'selectNodesOnDrag'
-  | 'nodeDragThreshold'
-> & { rfId: string };
+// these fields exist in the global store and we need to keep them up to date
+const reactFlowFieldsToTrack = [
+  'nodes',
+  'edges',
+  'defaultNodes',
+  'defaultEdges',
+  'onConnect',
+  'onConnectStart',
+  'onConnectEnd',
+  'onClickConnectStart',
+  'onClickConnectEnd',
+  'nodesDraggable',
+  'nodesConnectable',
+  'nodesFocusable',
+  'edgesFocusable',
+  'edgesUpdatable',
+  'elevateNodesOnSelect',
+  'elevateEdgesOnSelect',
+  'minZoom',
+  'maxZoom',
+  'nodeExtent',
+  'onNodesChange',
+  'onEdgesChange',
+  'elementsSelectable',
+  'connectionMode',
+  'snapGrid',
+  'snapToGrid',
+  'translateExtent',
+  'connectOnClick',
+  'defaultEdgeOptions',
+  'fitView',
+  'fitViewOptions',
+  'onNodesDelete',
+  'onEdgesDelete',
+  'onDelete',
+  'onNodeDrag',
+  'onNodeDragStart',
+  'onNodeDragStop',
+  'onSelectionDrag',
+  'onSelectionDragStart',
+  'onSelectionDragStop',
+  'onMoveStart',
+  'onMove',
+  'onMoveEnd',
+  'noPanClassName',
+  'nodeOrigin',
+  'autoPanOnConnect',
+  'autoPanOnNodeDrag',
+  'onError',
+  'connectionRadius',
+  'isValidConnection',
+  'selectNodesOnDrag',
+  'nodeDragThreshold',
+  'onBeforeDelete',
+] as const;
+
+type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
+type StoreUpdaterProps = Pick<ReactFlowProps, ReactFlowFieldsToTrack> & { rfId: string };
+
+// rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
+const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'] as const;
 
 const selector = (s: ReactFlowState) => ({
   setNodes: s.setNodes,
@@ -76,80 +84,7 @@ const selector = (s: ReactFlowState) => ({
   reset: s.reset,
 });
 
-function useStoreUpdater<T>(value: T | undefined, setStoreAction: (param: T) => void) {
-  useEffect(() => {
-    if (typeof value !== 'undefined') {
-      setStoreAction(value);
-    }
-  }, [value]);
-}
-
-// updates with values in store that don't have a dedicated setter function
-function useDirectStoreUpdater(
-  key: keyof ReactFlowStore,
-  value: unknown,
-  setState: StoreApi<ReactFlowState>['setState']
-) {
-  useEffect(() => {
-    if (typeof value !== 'undefined') {
-      setState({ [key]: value });
-    }
-  }, [value]);
-}
-
-const StoreUpdater = ({
-  nodes,
-  edges,
-  defaultNodes,
-  defaultEdges,
-  onConnect,
-  onConnectStart,
-  onConnectEnd,
-  onClickConnectStart,
-  onClickConnectEnd,
-  nodesDraggable,
-  nodesConnectable,
-  nodesFocusable,
-  edgesFocusable,
-  edgesUpdatable,
-  elevateNodesOnSelect,
-  minZoom,
-  maxZoom,
-  nodeExtent,
-  onNodesChange,
-  onEdgesChange,
-  elementsSelectable,
-  connectionMode,
-  snapGrid,
-  snapToGrid,
-  translateExtent,
-  connectOnClick,
-  defaultEdgeOptions,
-  fitView,
-  fitViewOptions,
-  onNodesDelete,
-  onEdgesDelete,
-  onDelete,
-  onNodeDrag,
-  onNodeDragStart,
-  onNodeDragStop,
-  onSelectionDrag,
-  onSelectionDragStart,
-  onSelectionDragStop,
-  onMoveStart,
-  onMove,
-  onMoveEnd,
-  noPanClassName,
-  nodeOrigin,
-  rfId,
-  autoPanOnConnect,
-  autoPanOnNodeDrag,
-  onError,
-  connectionRadius,
-  isValidConnection,
-  selectNodesOnDrag,
-  nodeDragThreshold,
-}: StoreUpdaterProps) => {
+const StoreUpdater = (props: StoreUpdaterProps) => {
   const {
     setNodes,
     setEdges,
@@ -163,64 +98,55 @@ const StoreUpdater = ({
   const store = useStoreApi();
 
   useEffect(() => {
-    const edgesWithDefaults = defaultEdges?.map((e) => ({ ...e, ...defaultEdgeOptions }));
-    setDefaultNodesAndEdges(defaultNodes, edgesWithDefaults);
+    const edgesWithDefaults = props.defaultEdges?.map((e) => ({ ...e, ...props.defaultEdgeOptions }));
+    setDefaultNodesAndEdges(props.defaultNodes, edgesWithDefaults);
 
     return () => {
       reset();
     };
   }, []);
 
-  useDirectStoreUpdater('defaultEdgeOptions', defaultEdgeOptions, store.setState);
-  useDirectStoreUpdater('connectionMode', connectionMode, store.setState);
-  useDirectStoreUpdater('onConnect', onConnect, store.setState);
-  useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
-  useDirectStoreUpdater('onConnectEnd', onConnectEnd, store.setState);
-  useDirectStoreUpdater('onClickConnectStart', onClickConnectStart, store.setState);
-  useDirectStoreUpdater('onClickConnectEnd', onClickConnectEnd, store.setState);
-  useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
-  useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);
-  useDirectStoreUpdater('nodesFocusable', nodesFocusable, store.setState);
-  useDirectStoreUpdater('edgesFocusable', edgesFocusable, store.setState);
-  useDirectStoreUpdater('edgesUpdatable', edgesUpdatable, store.setState);
-  useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
-  useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
-  useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState);
-  useDirectStoreUpdater('snapGrid', snapGrid, store.setState);
-  useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);
-  useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
-  useDirectStoreUpdater('connectOnClick', connectOnClick, store.setState);
-  useDirectStoreUpdater('fitViewOnInit', fitView, store.setState);
-  useDirectStoreUpdater('fitViewOnInitOptions', fitViewOptions, store.setState);
-  useDirectStoreUpdater('onNodesDelete', onNodesDelete, store.setState);
-  useDirectStoreUpdater('onEdgesDelete', onEdgesDelete, store.setState);
-  useDirectStoreUpdater('onDelete', onDelete, store.setState);
-  useDirectStoreUpdater('onNodeDrag', onNodeDrag, store.setState);
-  useDirectStoreUpdater('onNodeDragStart', onNodeDragStart, store.setState);
-  useDirectStoreUpdater('onNodeDragStop', onNodeDragStop, store.setState);
-  useDirectStoreUpdater('onSelectionDrag', onSelectionDrag, store.setState);
-  useDirectStoreUpdater('onSelectionDragStart', onSelectionDragStart, store.setState);
-  useDirectStoreUpdater('onSelectionDragStop', onSelectionDragStop, store.setState);
-  useDirectStoreUpdater('onMove', onMove, store.setState);
-  useDirectStoreUpdater('onMoveStart', onMoveStart, store.setState);
-  useDirectStoreUpdater('onMoveEnd', onMoveEnd, store.setState);
-  useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState);
-  useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
-  useDirectStoreUpdater('rfId', rfId, store.setState);
-  useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
-  useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
-  useDirectStoreUpdater('onError', onError || devWarn, store.setState);
-  useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
-  useDirectStoreUpdater('isValidConnection', isValidConnection, store.setState);
-  useDirectStoreUpdater('selectNodesOnDrag', selectNodesOnDrag, store.setState);
-  useDirectStoreUpdater('nodeDragThreshold', nodeDragThreshold, store.setState);
+  const previousFields = useRef<Partial<StoreUpdaterProps>>({
+    // these are values that are also passed directly to other components
+    // than the StoreUpdater. We can reduce the number of setStore calls
+    // by setting the same values here as prev fields.
+    translateExtent: infiniteExtent,
+    nodeOrigin: initNodeOrigin,
+    minZoom: 0.5,
+    maxZoom: 2,
+    elementsSelectable: true,
+    noPanClassName: 'nopan',
+    rfId: '1',
+  });
 
-  useStoreUpdater<Node[]>(nodes, setNodes);
-  useStoreUpdater<Edge[]>(edges, setEdges);
-  useStoreUpdater<number>(minZoom, setMinZoom);
-  useStoreUpdater<number>(maxZoom, setMaxZoom);
-  useStoreUpdater<CoordinateExtent>(translateExtent, setTranslateExtent);
-  useStoreUpdater<CoordinateExtent>(nodeExtent, setNodeExtent);
+  useEffect(
+    () => {
+      for (const fieldName of fieldsToTrack) {
+        const fieldValue = props[fieldName];
+        const previousFieldValue = previousFields.current[fieldName];
+
+        if (fieldValue === previousFieldValue) continue;
+        if (typeof props[fieldName] === 'undefined') continue;
+
+        // Custom handling with dedicated setters for some fields
+        if (fieldName === 'nodes') setNodes(fieldValue as Node[]);
+        else if (fieldName === 'edges') setEdges(fieldValue as Edge[]);
+        else if (fieldName === 'minZoom') setMinZoom(fieldValue as number);
+        else if (fieldName === 'maxZoom') setMaxZoom(fieldValue as number);
+        else if (fieldName === 'translateExtent') setTranslateExtent(fieldValue as CoordinateExtent);
+        else if (fieldName === 'nodeExtent') setNodeExtent(fieldValue as CoordinateExtent);
+        // Renamed fields
+        else if (fieldName === 'fitView') store.setState({ fitViewOnInit: fieldValue as boolean });
+        else if (fieldName === 'fitViewOptions') store.setState({ fitViewOnInitOptions: fieldValue as FitViewOptions });
+        // General case
+        else store.setState({ [fieldName]: fieldValue });
+      }
+
+      previousFields.current = props;
+    },
+    // Only re-run the effect if one of the fields we track changes
+    fieldsToTrack.map((fieldName) => props[fieldName])
+  );
 
   return null;
 };
diff --git a/packages/react/src/components/ViewportPortal/index.tsx b/packages/react/src/components/ViewportPortal/index.tsx
new file mode 100644
index 00000000..4195a608
--- /dev/null
+++ b/packages/react/src/components/ViewportPortal/index.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
+
+function ViewportPortal({ children }: { children: ReactNode }) {
+  const viewPortalDiv = useStore(selector);
+
+  if (!viewPortalDiv) {
+    return null;
+  }
+
+  return createPortal(children, viewPortalDiv);
+}
+
+export default ViewportPortal;
diff --git a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
index 8a0524ac..a4696e5b 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -51,32 +51,38 @@ const markerSelector =
     return markers;
   };
 
+const markersEqual = (a: MarkerProps[], b: MarkerProps[]) =>
+  // the id includes all marker options, so we just need to look at that part of the marker
+  !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
+
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }: MarkerDefinitionsProps) => {
-  const markers = useStore(
-    useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]),
-    // the id includes all marker options, so we just need to look at that part of the marker
-    (a, b) => !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id))
-  );
+  const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+
+  if (!markers.length) {
+    return null;
+  }
 
   return (
-    <defs>
-      {markers.map((marker: MarkerProps) => (
-        <Marker
-          id={marker.id}
-          key={marker.id}
-          type={marker.type}
-          color={marker.color}
-          width={marker.width}
-          height={marker.height}
-          markerUnits={marker.markerUnits}
-          strokeWidth={marker.strokeWidth}
-          orient={marker.orient}
-        />
-      ))}
-    </defs>
+    <svg className="react-flow__marker">
+      <defs>
+        {markers.map((marker: MarkerProps) => (
+          <Marker
+            id={marker.id}
+            key={marker.id}
+            type={marker.type}
+            color={marker.color}
+            width={marker.width}
+            height={marker.height}
+            markerUnits={marker.markerUnits}
+            strokeWidth={marker.strokeWidth}
+            orient={marker.orient}
+          />
+        ))}
+      </defs>
+    </svg>
   );
 };
 
diff --git a/packages/react/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx
index 24825fe6..9c289c87 100644
--- a/packages/react/src/container/EdgeRenderer/index.tsx
+++ b/packages/react/src/container/EdgeRenderer/index.tsx
@@ -1,13 +1,12 @@
 import { memo, ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
-import cc from 'classcat';
-import { errorMessages } from '@xyflow/system';
 
 import { useStore } from '../../hooks/useStore';
-import useVisibleEdges from '../../hooks/useVisibleEdges';
+import useVisibleEdgeIds from '../../hooks/useVisibleEdgeIds';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
-import type { EdgeTypesWrapped, ReactFlowState } from '../../types';
+import EdgeWrapper from '../../components/EdgeWrapper';
+import type { ReactFlowState } from '../../types';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,
@@ -24,12 +23,10 @@ type EdgeRendererProps = Pick<
   | 'onEdgeUpdateEnd'
   | 'edgeUpdaterRadius'
   | 'noPanClassName'
-  | 'elevateEdgesOnSelect'
   | 'rfId'
   | 'disableKeyboardA11y'
+  | 'edgeTypes'
 > & {
-  edgeTypes: EdgeTypesWrapped;
-  elevateEdgesOnSelect: boolean;
   children: ReactNode;
 };
 
@@ -46,7 +43,6 @@ const selector = (s: ReactFlowState) => ({
 const EdgeRenderer = ({
   defaultMarkerColor,
   onlyRenderVisibleElements,
-  elevateEdgesOnSelect,
   rfId,
   edgeTypes,
   noPanClassName,
@@ -63,82 +59,39 @@ const EdgeRenderer = ({
   children,
 }: EdgeRendererProps) => {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
-  // we are grouping edges by zIndex here in order to be able to render them in the correct order
-  // each zIndex gets its own svg element
-  const edgeTree = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
+  const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
 
   return (
-    <>
-      {edgeTree.map(({ level, edges, isMaxLevel }) => (
-        <svg key={level} style={{ zIndex: level }} className="react-flow__edges react-flow__container">
-          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
-          <>
-            {edges.map((edge) => {
-              let edgeType = edge.type || 'default';
+    <div className="react-flow__edges">
+      <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
 
-              if (!edgeTypes[edgeType]) {
-                onError?.('011', errorMessages['error011'](edgeType));
-                edgeType = 'default';
-              }
-
-              const EdgeComponent = edgeTypes[edgeType];
-              const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-              const isUpdatable =
-                typeof onEdgeUpdate !== 'undefined' &&
-                (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
-              const isSelectable = !!(
-                edge.selectable ||
-                (elementsSelectable && typeof edge.selectable === 'undefined')
-              );
-
-              return (
-                <EdgeComponent
-                  key={edge.id}
-                  id={edge.id}
-                  className={cc([edge.className, noPanClassName])}
-                  type={edge.type}
-                  data={edge.data}
-                  selected={!!edge.selected}
-                  animated={!!edge.animated}
-                  hidden={!!edge.hidden}
-                  label={edge.label}
-                  labelStyle={edge.labelStyle}
-                  labelShowBg={edge.labelShowBg}
-                  labelBgStyle={edge.labelBgStyle}
-                  labelBgPadding={edge.labelBgPadding}
-                  labelBgBorderRadius={edge.labelBgBorderRadius}
-                  style={edge.style}
-                  source={edge.source}
-                  target={edge.target}
-                  sourceHandleId={edge.sourceHandle}
-                  targetHandleId={edge.targetHandle}
-                  markerEnd={edge.markerEnd}
-                  markerStart={edge.markerStart}
-                  isSelectable={isSelectable}
-                  onEdgeUpdate={onEdgeUpdate}
-                  onContextMenu={onEdgeContextMenu}
-                  onMouseEnter={onEdgeMouseEnter}
-                  onMouseMove={onEdgeMouseMove}
-                  onMouseLeave={onEdgeMouseLeave}
-                  onClick={onEdgeClick}
-                  edgeUpdaterRadius={edgeUpdaterRadius}
-                  onEdgeDoubleClick={onEdgeDoubleClick}
-                  onEdgeUpdateStart={onEdgeUpdateStart}
-                  onEdgeUpdateEnd={onEdgeUpdateEnd}
-                  rfId={rfId}
-                  ariaLabel={edge.ariaLabel}
-                  isFocusable={isFocusable}
-                  isUpdatable={isUpdatable}
-                  pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
-                  interactionWidth={edge.interactionWidth}
-                />
-              );
-            })}
-          </>
-        </svg>
-      ))}
+      {edgeIds.map((id) => {
+        return (
+          <EdgeWrapper
+            key={id}
+            id={id}
+            edgesFocusable={edgesFocusable}
+            edgesUpdatable={edgesUpdatable}
+            elementsSelectable={elementsSelectable}
+            noPanClassName={noPanClassName}
+            onEdgeUpdate={onEdgeUpdate}
+            onContextMenu={onEdgeContextMenu}
+            onMouseEnter={onEdgeMouseEnter}
+            onMouseMove={onEdgeMouseMove}
+            onMouseLeave={onEdgeMouseLeave}
+            onClick={onEdgeClick}
+            edgeUpdaterRadius={edgeUpdaterRadius}
+            onDoubleClick={onEdgeDoubleClick}
+            onEdgeUpdateStart={onEdgeUpdateStart}
+            onEdgeUpdateEnd={onEdgeUpdateEnd}
+            rfId={rfId}
+            onError={onError}
+            edgeTypes={edgeTypes}
+          />
+        );
+      })}
       {children}
-    </>
+    </div>
   );
 };
 
diff --git a/packages/react/src/container/EdgeRenderer/utils.ts b/packages/react/src/container/EdgeRenderer/utils.ts
deleted file mode 100644
index 433bb0f0..00000000
--- a/packages/react/src/container/EdgeRenderer/utils.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ComponentType } from 'react';
-
-import {
-  BezierEdgeInternal,
-  SmoothStepEdgeInternal,
-  StepEdgeInternal,
-  StraightEdgeInternal,
-  SimpleBezierEdgeInternal,
-} from '../../components/Edges';
-import wrapEdge from '../../components/Edges/wrapEdge';
-import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
-
-export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
-
-export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
-  const standardTypes: EdgeTypesWrapped = {
-    default: wrapEdge((edgeTypes.default || BezierEdgeInternal) as ComponentType<EdgeProps>),
-    straight: wrapEdge((edgeTypes.bezier || StraightEdgeInternal) as ComponentType<EdgeProps>),
-    step: wrapEdge((edgeTypes.step || StepEdgeInternal) as ComponentType<EdgeProps>),
-    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdgeInternal) as ComponentType<EdgeProps>),
-    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdgeInternal) as ComponentType<EdgeProps>),
-  };
-
-  const wrappedTypes = {} as EdgeTypesWrapped;
-  const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
-    .filter((k) => !['default', 'bezier'].includes(k))
-    .reduce((res, key) => {
-      res[key] = wrapEdge((edgeTypes[key] || BezierEdgeInternal) as ComponentType<EdgeProps>);
-
-      return res;
-    }, wrappedTypes);
-
-  return {
-    ...standardTypes,
-    ...specialTypes,
-  };
-}
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index 014d754f..e311bc7f 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -8,19 +8,15 @@ import useOnInitHandler from '../../hooks/useOnInitHandler';
 import useViewportSync from '../../hooks/useViewportSync';
 import ConnectionLine from '../../components/ConnectionLine';
 import type { ReactFlowProps } from '../../types';
-import { createNodeTypes } from '../NodeRenderer/utils';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
-import { useNodeOrEdgeTypes } from './utils';
+import useNodeOrEdgeTypesWarning from './useNodeOrEdgeTypesWarning';
 
 export type GraphViewProps = Omit<
   ReactFlowProps,
-  'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes' | 'onMove' | 'onMoveStart' | 'onMoveEnd'
+  'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
 > &
   Required<
     Pick<
       ReactFlowProps,
-      | 'nodeTypes'
-      | 'edgeTypes'
       | 'selectionKeyCode'
       | 'deleteKeyCode'
       | 'multiSelectionKeyCode'
@@ -100,7 +96,6 @@ const GraphView = ({
   noDragClassName,
   noWheelClassName,
   noPanClassName,
-  elevateEdgesOnSelect,
   disableKeyboardA11y,
   nodeOrigin,
   nodeExtent,
@@ -108,8 +103,8 @@ const GraphView = ({
   viewport,
   onViewportChange,
 }: GraphViewProps) => {
-  const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes);
-  const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes);
+  useNodeOrEdgeTypesWarning(nodeTypes);
+  useNodeOrEdgeTypesWarning(edgeTypes);
 
   useOnInitHandler(onInit);
   useViewportSync(viewport);
@@ -154,7 +149,7 @@ const GraphView = ({
     >
       <ViewportWrapper>
         <EdgeRenderer
-          edgeTypes={edgeTypesWrapped}
+          edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}
           onEdgeUpdate={onEdgeUpdate}
@@ -168,7 +163,6 @@ const GraphView = ({
           edgeUpdaterRadius={edgeUpdaterRadius}
           defaultMarkerColor={defaultMarkerColor}
           noPanClassName={noPanClassName}
-          elevateEdgesOnSelect={!!elevateEdgesOnSelect}
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         >
@@ -180,9 +174,9 @@ const GraphView = ({
           />
         </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
-
+        <div className="react-flow__viewport-portal" />
         <NodeRenderer
-          nodeTypes={nodeTypesWrapped}
+          nodeTypes={nodeTypes}
           onNodeClick={onNodeClick}
           onNodeDoubleClick={onNodeDoubleClick}
           onNodeMouseEnter={onNodeMouseEnter}
diff --git a/packages/react/src/container/GraphView/useNodeOrEdgeTypesWarning.ts b/packages/react/src/container/GraphView/useNodeOrEdgeTypesWarning.ts
new file mode 100644
index 00000000..e842018c
--- /dev/null
+++ b/packages/react/src/container/GraphView/useNodeOrEdgeTypesWarning.ts
@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { errorMessages } from '@xyflow/system';
+
+import type { EdgeTypes, NodeTypes } from '../../types';
+import { useStoreApi } from '../../hooks/useStore';
+
+const emptyTypes = {};
+
+/*
+ * This hook warns the user if node or edgeTypes change.
+ */
+export function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes?: NodeTypes): void;
+export function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes?: EdgeTypes): void;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes: any = emptyTypes): any {
+  const updateCount = useRef(0);
+  const store = useStoreApi();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      if (updateCount.current > 1) {
+        store.getState().onError?.('002', errorMessages['error002']());
+      }
+      updateCount.current += 1;
+    }
+  }, [nodeOrEdgeTypes]);
+}
diff --git a/packages/react/src/container/GraphView/utils.ts b/packages/react/src/container/GraphView/utils.ts
deleted file mode 100644
index 15dbaafe..00000000
--- a/packages/react/src/container/GraphView/utils.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { shallow } from 'zustand/shallow';
-import { errorMessages } from '@xyflow/system';
-
-import { CreateEdgeTypes } from '../EdgeRenderer/utils';
-import { CreateNodeTypes } from '../NodeRenderer/utils';
-import type { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
-import { useStoreApi } from '../../hooks/useStore';
-
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
-  const typesKeysRef = useRef<string[] | null>(null);
-  const store = useStoreApi();
-
-  const typesParsed = useMemo(() => {
-    if (process.env.NODE_ENV === 'development') {
-      const typeKeys = Object.keys(nodeOrEdgeTypes);
-
-      if (shallow(typesKeysRef.current, typeKeys)) {
-        store.getState().onError?.('002', errorMessages['error002']());
-      }
-
-      typesKeysRef.current = typeKeys;
-    }
-    return createTypes(nodeOrEdgeTypes);
-  }, [nodeOrEdgeTypes]);
-
-  return typesParsed;
-}
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 73808da1..e61b8bc5 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -1,14 +1,15 @@
-import { memo, useMemo, useEffect, useRef, type ComponentType } from 'react';
+import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
-import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWithOrigin } from '@xyflow/system';
 
-import useVisibleNodes from '../../hooks/useVisibleNodes';
+import useVisibleNodesIds from '../../hooks/useVisibleNodeIds';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
-import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types';
+import type { ReactFlowState } from '../../types';
+import useResizeObserver from './useResizeObserver';
+import NodeWrapper from '../../components/NodeWrapper';
 
-type NodeRendererProps = Pick<
+export type NodeRendererProps = Pick<
   GraphViewProps,
   | 'onNodeClick'
   | 'onNodeDoubleClick'
@@ -23,127 +24,71 @@ type NodeRendererProps = Pick<
   | 'disableKeyboardA11y'
   | 'nodeOrigin'
   | 'nodeExtent'
-> & {
-  nodeTypes: NodeTypesWrapped;
-};
+  | 'nodeTypes'
+>;
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
   nodesConnectable: s.nodesConnectable,
   nodesFocusable: s.nodesFocusable,
   elementsSelectable: s.elementsSelectable,
-  updateNodeDimensions: s.updateNodeDimensions,
   onError: s.onError,
 });
 
 const NodeRenderer = (props: NodeRendererProps) => {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions, onError } =
-    useStore(selector, shallow);
-  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
-  const resizeObserverRef = useRef<ResizeObserver>();
-
-  const resizeObserver = useMemo(() => {
-    if (typeof ResizeObserver === 'undefined') {
-      return null;
-    }
-
-    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      const updates = new Map();
-
-      entries.forEach((entry: ResizeObserverEntry) => {
-        const id = entry.target.getAttribute('data-id') as string;
-        updates.set(id, {
-          id,
-          nodeElement: entry.target as HTMLDivElement,
-          forceUpdate: true,
-        });
-      });
-
-      updateNodeDimensions(updates);
-    });
-
-    resizeObserverRef.current = observer;
-
-    return observer;
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      resizeObserverRef?.current?.disconnect();
-    };
-  }, []);
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
+  const nodeIds = useVisibleNodesIds(props.onlyRenderVisibleElements);
+  const resizeObserver = useResizeObserver();
 
   return (
     <div className="react-flow__nodes" style={containerStyle}>
-      {nodes.map((node) => {
-        let nodeType = node.type || 'default';
-
-        if (!props.nodeTypes[nodeType]) {
-          onError?.('003', errorMessages['error003'](nodeType));
-
-          nodeType = 'default';
-        }
-
-        const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
-        const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
-        const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
-        const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
-        const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
-
-        const clampedPosition = props.nodeExtent
-          ? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
-          : node.computed?.positionAbsolute;
-
-        const posX = clampedPosition?.x ?? 0;
-        const posY = clampedPosition?.y ?? 0;
-        const posOrigin = getPositionWithOrigin({
-          x: posX,
-          y: posY,
-          width: node.computed?.width ?? node.width ?? 0,
-          height: node.computed?.height ?? node.height ?? 0,
-          origin: node.origin || props.nodeOrigin,
-        });
-        const initialized = (!!node.computed?.width && !!node.computed?.height) || (!!node.width && !!node.height);
-
+      {nodeIds.map((nodeId) => {
         return (
-          <NodeComponent
-            key={node.id}
-            id={node.id}
-            className={node.className}
-            style={node.style}
-            width={node.width ?? undefined}
-            height={node.height ?? undefined}
-            type={nodeType}
-            data={node.data}
-            sourcePosition={node.sourcePosition || Position.Bottom}
-            targetPosition={node.targetPosition || Position.Top}
-            hidden={node.hidden}
-            xPos={posX}
-            yPos={posY}
-            xPosOrigin={posOrigin.x}
-            yPosOrigin={posOrigin.y}
-            positionAbsolute={clampedPosition || { x: 0, y: 0 }}
+          // The split of responsibilities between NodeRenderer and
+          // NodeComponentWrapper may appear weird. However, it’s designed to
+          // minimize the cost of updates when individual nodes change.
+          //
+          // For example, when you’re dragging a single node, that node gets
+          // updated multiple times per second. If `NodeRenderer` were to update
+          // every time, it would have to re-run the `nodes.map()` loop every
+          // time. This gets pricey with hundreds of nodes, especially if every
+          // loop cycle does more than just rendering a JSX element!
+          //
+          // As a result of this choice, we took the following implementation
+          // decisions:
+          // - NodeRenderer subscribes *only* to node IDs – and therefore
+          //   rerender *only* when visible nodes are added or removed.
+          // - NodeRenderer performs all operations the result of which can be
+          //   shared between nodes (such as creating the `ResizeObserver`
+          //   instance, or subscribing to `selector`). This means extra prop
+          //   drilling into `NodeComponentWrapper`, but it means we need to run
+          //   these operations only once – instead of once per node.
+          // - Any operations that you’d normally write inside `nodes.map` are
+          //   moved into `NodeComponentWrapper`. This ensures they are
+          //   memorized – so if `NodeRenderer` *has* to rerender, it only
+          //   needs to regenerate the list of nodes, nothing else.
+          <NodeWrapper
+            key={nodeId}
+            id={nodeId}
+            nodeTypes={props.nodeTypes}
+            nodeExtent={props.nodeExtent}
+            nodeOrigin={props.nodeOrigin}
             onClick={props.onNodeClick}
             onMouseEnter={props.onNodeMouseEnter}
             onMouseMove={props.onNodeMouseMove}
             onMouseLeave={props.onNodeMouseLeave}
             onContextMenu={props.onNodeContextMenu}
             onDoubleClick={props.onNodeDoubleClick}
-            selected={!!node.selected}
-            isDraggable={isDraggable}
-            isSelectable={isSelectable}
-            isConnectable={isConnectable}
-            isFocusable={isFocusable}
-            resizeObserver={resizeObserver}
-            dragHandle={node.dragHandle}
-            zIndex={node[internalsSymbol]?.z ?? 0}
-            isParent={!!node[internalsSymbol]?.isParent}
             noDragClassName={props.noDragClassName}
             noPanClassName={props.noPanClassName}
-            initialized={initialized}
             rfId={props.rfId}
             disableKeyboardA11y={props.disableKeyboardA11y}
-            ariaLabel={node.ariaLabel}
+            resizeObserver={resizeObserver}
+            nodesDraggable={nodesDraggable}
+            nodesConnectable={nodesConnectable}
+            nodesFocusable={nodesFocusable}
+            elementsSelectable={elementsSelectable}
+            onError={onError}
           />
         );
       })}
diff --git a/packages/react/src/container/NodeRenderer/useResizeObserver.ts b/packages/react/src/container/NodeRenderer/useResizeObserver.ts
new file mode 100644
index 00000000..d109d798
--- /dev/null
+++ b/packages/react/src/container/NodeRenderer/useResizeObserver.ts
@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { ReactFlowState } from '../../types';
+import { useStore } from '../../hooks/useStore';
+
+const selector = (s: ReactFlowState) => s.updateNodeDimensions;
+
+export default function useResizeObserver() {
+  const updateNodeDimensions = useStore(selector);
+  const resizeObserverRef = useRef<ResizeObserver>();
+
+  const resizeObserver = useMemo(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return null;
+    }
+
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      const updates = new Map();
+
+      entries.forEach((entry: ResizeObserverEntry) => {
+        const id = entry.target.getAttribute('data-id') as string;
+        updates.set(id, {
+          id,
+          nodeElement: entry.target as HTMLDivElement,
+          forceUpdate: true,
+        });
+      });
+
+      updateNodeDimensions(updates);
+    });
+
+    resizeObserverRef.current = observer;
+
+    return observer;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      resizeObserverRef?.current?.disconnect();
+    };
+  }, []);
+
+  return resizeObserver;
+}
diff --git a/packages/react/src/container/NodeRenderer/utils.ts b/packages/react/src/container/NodeRenderer/utils.ts
deleted file mode 100644
index 758d3908..00000000
--- a/packages/react/src/container/NodeRenderer/utils.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ComponentType } from 'react';
-import type { NodeProps } from '@xyflow/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, NodeTypesWrapped } from '../../types';
-
-export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
-
-export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
-  const standardTypes: NodeTypesWrapped = {
-    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
-    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
-    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
-    group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
-  };
-
-  const wrappedTypes = {} as NodeTypesWrapped;
-  const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
-    .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
-    .reduce((res, key) => {
-      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
-
-      return res;
-    }, wrappedTypes);
-
-  return {
-    ...standardTypes,
-    ...specialTypes,
-  };
-}
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index d5d951ca..6acd7770 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -10,7 +10,7 @@ import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system'
 import UserSelection from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { getSelectionChanges, getConnectedEdges } from '../../utils';
+import { getSelectionChanges } from '../../utils';
 import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types';
 
 type PaneProps = {
@@ -156,19 +156,30 @@ const Pane = memo(
         true,
         nodeOrigin
       );
-      const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
-      const selectedNodeIds = selectedNodes.map((n) => n.id);
 
-      if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
-        prevSelectedNodesCount.current = selectedNodeIds.length;
-        const changes = getSelectionChanges(nodes, selectedNodeIds) as NodeChange[];
+      const selectedEdgeIds = new Set<string>();
+      const selectedNodeIds = new Set<string>();
+
+      for (const selectedNode of selectedNodes) {
+        selectedNodeIds.add(selectedNode.id);
+
+        for (const edge of edges) {
+          if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
+            selectedEdgeIds.add(edge.id);
+          }
+        }
+      }
+
+      if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
+        prevSelectedNodesCount.current = selectedNodeIds.size;
+        const changes = getSelectionChanges(nodes, selectedNodeIds, true) as NodeChange[];
         if (changes.length) {
           onNodesChange?.(changes);
         }
       }
 
-      if (prevSelectedEdgesCount.current !== selectedEdgeIds.length) {
-        prevSelectedEdgesCount.current = selectedEdgeIds.length;
+      if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
+        prevSelectedEdgesCount.current = selectedEdgeIds.size;
         const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
         if (changes.length) {
           onEdgesChange?.(changes);
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index a7360a46..bfe3530c 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -2,7 +2,6 @@ import { forwardRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import {
   ConnectionLineType,
-  ConnectionMode,
   PanOnScrollMode,
   SelectionMode,
   infiniteExtent,
@@ -12,42 +11,16 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import {
-  BezierEdgeInternal,
-  SmoothStepEdgeInternal,
-  StepEdgeInternal,
-  StraightEdgeInternal,
-  SimpleBezierEdgeInternal,
-} from '../../components/Edges';
-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 SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
 import A11yDescriptions from '../../components/A11yDescriptions';
 import GraphView from '../GraphView';
 import Wrapper from './Wrapper';
-import type { EdgeTypes, NodeTypes, ReactFlowProps, ReactFlowRefType } from '../../types';
+import type { ReactFlowProps, ReactFlowRefType } from '../../types';
 import useColorModeClass from '../../hooks/useColorModeClass';
 
-const defaultNodeTypes: NodeTypes = {
-  input: InputNode,
-  default: DefaultNode,
-  output: OutputNode,
-  group: GroupNode,
-};
-
-const defaultEdgeTypes: EdgeTypes = {
-  default: BezierEdgeInternal,
-  straight: StraightEdgeInternal,
-  step: StepEdgeInternal,
-  smoothstep: SmoothStepEdgeInternal,
-  simplebezier: SimpleBezierEdgeInternal,
-};
-
-const initNodeOrigin: NodeOrigin = [0, 0];
-const initSnapGrid: [number, number] = [15, 15];
+export const initNodeOrigin: NodeOrigin = [0, 0];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
 const wrapperStyle: CSSProperties = {
@@ -66,8 +39,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       defaultNodes,
       defaultEdges,
       className,
-      nodeTypes = defaultNodeTypes,
-      edgeTypes = defaultEdgeTypes,
+      nodeTypes,
+      edgeTypes,
       onNodeClick,
       onEdgeClick,
       onInit,
@@ -97,7 +70,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onSelectionContextMenu,
       onSelectionStart,
       onSelectionEnd,
-      connectionMode = ConnectionMode.Strict,
+      onBeforeDelete,
+      connectionMode,
       connectionLineType = ConnectionLineType.Bezier,
       connectionLineStyle,
       connectionLineComponent,
@@ -109,10 +83,10 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       panActivationKeyCode = 'Space',
       multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
       zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
-      snapToGrid = false,
-      snapGrid = initSnapGrid,
+      snapToGrid,
+      snapGrid,
       onlyRenderVisibleElements = false,
-      selectNodesOnDrag = true,
+      selectNodesOnDrag,
       nodesDraggable,
       nodesConnectable,
       nodesFocusable,
@@ -155,18 +129,18 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       noDragClassName = 'nodrag',
       noWheelClassName = 'nowheel',
       noPanClassName = 'nopan',
-      fitView = false,
+      fitView,
       fitViewOptions,
-      connectOnClick = true,
+      connectOnClick,
       attributionPosition,
       proOptions,
       defaultEdgeOptions,
-      elevateNodesOnSelect = true,
-      elevateEdgesOnSelect = false,
+      elevateNodesOnSelect,
+      elevateEdgesOnSelect,
       disableKeyboardA11y = false,
-      autoPanOnConnect = true,
-      autoPanOnNodeDrag = true,
-      connectionRadius = 20,
+      autoPanOnConnect,
+      autoPanOnNodeDrag,
+      connectionRadius,
       isValidConnection,
       onError,
       style,
@@ -251,7 +225,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noDragClassName={noDragClassName}
             noWheelClassName={noWheelClassName}
             noPanClassName={noPanClassName}
-            elevateEdgesOnSelect={elevateEdgesOnSelect}
             rfId={rfId}
             disableKeyboardA11y={disableKeyboardA11y}
             nodeOrigin={nodeOrigin}
@@ -276,6 +249,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             edgesUpdatable={edgesUpdatable}
             elementsSelectable={elementsSelectable}
             elevateNodesOnSelect={elevateNodesOnSelect}
+            elevateEdgesOnSelect={elevateEdgesOnSelect}
             minZoom={minZoom}
             maxZoom={maxZoom}
             nodeExtent={nodeExtent}
@@ -311,6 +285,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             isValidConnection={isValidConnection}
             selectNodesOnDrag={selectNodesOnDrag}
             nodeDragThreshold={nodeDragThreshold}
+            onBeforeDelete={onBeforeDelete}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
diff --git a/packages/react/src/hooks/useColorModeClass.ts b/packages/react/src/hooks/useColorModeClass.ts
index b66f8cea..bcf8c6af 100644
--- a/packages/react/src/hooks/useColorModeClass.ts
+++ b/packages/react/src/hooks/useColorModeClass.ts
@@ -9,6 +9,12 @@ function getMediaQuery() {
   return window.matchMedia('(prefers-color-scheme: dark)');
 }
 
+/**
+ * Hook for receiving the current color mode class 'dark' or 'light'.
+ *
+ * @internal
+ * @param colorMode - The color mode to use ('dark', 'light' or 'system')
+ */
 export default function useColorModeClass(colorMode: ColorMode): ColorModeClass {
   const [colorModeClass, setColorModeClass] = useState<ColorModeClass | null>(
     colorMode === 'system' ? null : colorMode
diff --git a/packages/react/src/hooks/useConnection.ts b/packages/react/src/hooks/useConnection.ts
new file mode 100644
index 00000000..3544f31f
--- /dev/null
+++ b/packages/react/src/hooks/useConnection.ts
@@ -0,0 +1,28 @@
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from './useStore';
+import type { ReactFlowStore } from '../types/store';
+
+const selector = (s: ReactFlowStore) => ({
+  startHandle: s.connectionStartHandle,
+  endHandle: s.connectionEndHandle,
+  status: s.connectionStatus,
+  position: s.connectionStartHandle ? s.connectionPosition : null,
+});
+
+/**
+ * Hook for accessing the ongoing connection.
+ *
+ * @public
+ * @returns ongoing connection: startHandle, endHandle, status, position
+ */
+export function useConnection(): {
+  startHandle: ReactFlowStore['connectionStartHandle'];
+  endHandle: ReactFlowStore['connectionEndHandle'];
+  status: ReactFlowStore['connectionStatus'];
+  position: ReactFlowStore['connectionPosition'] | null;
+} {
+  const ongoingConnection = useStore(selector, shallow);
+
+  return ongoingConnection;
+}
diff --git a/packages/react/src/hooks/useDrag.ts b/packages/react/src/hooks/useDrag.ts
index 3b332d8a..8a4fab65 100644
--- a/packages/react/src/hooks/useDrag.ts
+++ b/packages/react/src/hooks/useDrag.ts
@@ -13,6 +13,11 @@ type UseDragParams = {
   isSelectable?: boolean;
 };
 
+/**
+ * Hook for calling XYDrag helper from @xyflow/system.
+ *
+ * @internal
+ */
 function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable }: UseDragParams) {
   const store = useStoreApi();
   const [dragging, setDragging] = useState<boolean>(false);
diff --git a/packages/react/src/hooks/useEdges.ts b/packages/react/src/hooks/useEdges.ts
index 194f8805..94445ce4 100644
--- a/packages/react/src/hooks/useEdges.ts
+++ b/packages/react/src/hooks/useEdges.ts
@@ -5,6 +5,12 @@ import type { Edge, ReactFlowState } from '../types';
 
 const edgesSelector = (state: ReactFlowState) => state.edges;
 
+/**
+ * Hook for getting the current edges from the store.
+ *
+ * @public
+ * @returns An array of edges
+ */
 function useEdges<EdgeData>(): Edge<EdgeData>[] {
   const edges = useStore(edgesSelector, shallow);
 
diff --git a/packages/react/src/hooks/useGlobalKeyHandler.ts b/packages/react/src/hooks/useGlobalKeyHandler.ts
index c243298d..2409558f 100644
--- a/packages/react/src/hooks/useGlobalKeyHandler.ts
+++ b/packages/react/src/hooks/useGlobalKeyHandler.ts
@@ -10,6 +10,11 @@ const selected = (item: Node | Edge) => item.selected;
 
 const deleteKeyOptions: UseKeyPressOptions = { actInsideInputWithModifier: false };
 
+/**
+ * Hook for handling global key events.
+ *
+ * @internal
+ */
 export default ({
   deleteKeyCode,
   multiSelectionKeyCode,
@@ -25,8 +30,8 @@ export default ({
 
   useEffect(() => {
     if (deleteKeyPressed) {
-      const { edges, nodes } = store.getState();
-      deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
+      const { edges, nodes, onBeforeDelete } = store.getState();
+      deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
       store.setState({ nodesSelectionActive: false });
     }
   }, [deleteKeyPressed]);
diff --git a/packages/react/src/hooks/useHandleConnections.ts b/packages/react/src/hooks/useHandleConnections.ts
index c9a026d9..7232cce4 100644
--- a/packages/react/src/hooks/useHandleConnections.ts
+++ b/packages/react/src/hooks/useHandleConnections.ts
@@ -17,8 +17,8 @@ type useHandleConnectionsParams = {
  *
  * @public
  * @param param.type - handle type 'source' or 'target'
- * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
+ * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
diff --git a/packages/react/src/hooks/useKeyPress.ts b/packages/react/src/hooks/useKeyPress.ts
index f897a6c4..98d460d0 100644
--- a/packages/react/src/hooks/useKeyPress.ts
+++ b/packages/react/src/hooks/useKeyPress.ts
@@ -12,11 +12,19 @@ export type UseKeyPressOptions = {
 
 const defaultDoc = typeof document !== 'undefined' ? document : null;
 
-// the keycode can be a string 'a' or an array of strings ['a', 'a+d']
-// a string means a single key 'a' or a combination when '+' is used 'a+d'
-// an array means different possibilites. Explainer: ['a', 'd+s'] here the
-// user can use the single key 'a' or the combination 'd' + 's'
+/**
+ * Hook for handling key events.
+ *
+ * @public
+ * @param param.keyCode - The key code (string or array of strings) to use
+ * @param param.options - Options
+ * @returns boolean
+ */
 export default (
+  // the keycode can be a string 'a' or an array of strings ['a', 'a+d']
+  // a string means a single key 'a' or a combination when '+' is used 'a+d'
+  // an array means different possibilites. Explainer: ['a', 'd+s'] here the
+  // user can use the single key 'a' or the combination 'd' + 's'
   keyCode: KeyCode | null = null,
   options: UseKeyPressOptions = { target: defaultDoc, actInsideInputWithModifier: true }
 ): boolean => {
diff --git a/packages/react/src/hooks/useNodes.ts b/packages/react/src/hooks/useNodes.ts
index cc75f142..bb54865d 100644
--- a/packages/react/src/hooks/useNodes.ts
+++ b/packages/react/src/hooks/useNodes.ts
@@ -5,8 +5,14 @@ import type { Node, ReactFlowState } from '../types';
 
 const nodesSelector = (state: ReactFlowState) => state.nodes;
 
-function useNodes<NodeData>(): Node<NodeData>[] {
-  const nodes = useStore(nodesSelector, shallow);
+/**
+ * Hook for getting the current nodes from the store.
+ *
+ * @public
+ * @returns An array of nodes
+ */
+function useNodes<NodeType extends Node = Node>(): NodeType[] {
+  const nodes = useStore(nodesSelector, shallow) as NodeType[];
 
   return nodes;
 }
diff --git a/packages/react/src/hooks/useNodesData.ts b/packages/react/src/hooks/useNodesData.ts
index 4c242ad3..10480caa 100644
--- a/packages/react/src/hooks/useNodesData.ts
+++ b/packages/react/src/hooks/useNodesData.ts
@@ -4,6 +4,14 @@ import { shallow } from 'zustand/shallow';
 import { useStore } from '../hooks/useStore';
 import type { Node } from '../types';
 
+/**
+ * Hook for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param nodeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns An array od data objects
+ */
 export function useNodesData<NodeType extends Node = Node>(nodeId: string): NodeType['data'] | null;
 export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): NodeType['data'][];
 export function useNodesData<NodeType extends Node = Node>(
diff --git a/packages/react/src/hooks/useNodesEdgesState.ts b/packages/react/src/hooks/useNodesEdgesState.ts
index 19754aa4..c134472b 100644
--- a/packages/react/src/hooks/useNodesEdgesState.ts
+++ b/packages/react/src/hooks/useNodesEdgesState.ts
@@ -1,35 +1,36 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useCallback, type SetStateAction, type Dispatch } from 'react';
+import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
 
 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;
+/**
+ * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
+ *
+ * @public
+ * @param initialNodes
+ * @returns an array [nodes, setNodes, onNodesChange]
+ */
+export function useNodesState<NodeType extends Node = Node>(
+  initialNodes: NodeType[]
+): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange[]) => void] {
+  const [nodes, setNodes] = useState(initialNodes);
+  const onNodesChange = useCallback((changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
 
-// returns a hook that can be used liked this:
-// const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-function createUseItemsState(
-  applyChanges: ApplyChanges<Node, NodeChange>
-): <NodeData = any>(
-  initialItems: Node<NodeData>[]
-) => [Node<NodeData>[], Dispatch<SetStateAction<Node<NodeData>[]>>, OnChange<NodeChange>];
-function createUseItemsState(
-  applyChanges: ApplyChanges<Edge, EdgeChange>
-): <EdgeData = any>(
-  initialItems: Edge<EdgeData>[]
-) => [Edge<EdgeData>[], Dispatch<SetStateAction<Edge<EdgeData>[]>>, OnChange<EdgeChange>];
-function createUseItemsState(
-  applyChanges: ApplyChanges<any, any>
-): (initialItems: any[]) => [any[], Dispatch<SetStateAction<any[]>>, OnChange<any>] {
-  return (initialItems: any[]) => {
-    const [items, setItems] = useState(initialItems);
-
-    const onItemsChange = useCallback((changes: any[]) => setItems((items: any) => applyChanges(changes, items)), []);
-
-    return [items, setItems, onItemsChange];
-  };
+  return [nodes, setNodes, onNodesChange];
 }
 
-export const useNodesState = createUseItemsState(applyNodeChanges);
-export const useEdgesState = createUseItemsState(applyEdgeChanges);
+/**
+ * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
+ *
+ * @public
+ * @param initialEdges
+ * @returns an array [edges, setEdges, onEdgesChange]
+ */
+export function useEdgesState<EdgeType extends Edge = Edge>(
+  initialEdges: EdgeType[]
+): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange[]) => void] {
+  const [edges, setEdges] = useState(initialEdges);
+  const onEdgesChange = useCallback((changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+
+  return [edges, setEdges, onEdgesChange];
+}
diff --git a/packages/react/src/hooks/useNodesInitialized.ts b/packages/react/src/hooks/useNodesInitialized.ts
index 3e869873..5a330706 100644
--- a/packages/react/src/hooks/useNodesInitialized.ts
+++ b/packages/react/src/hooks/useNodesInitialized.ts
@@ -21,6 +21,13 @@ const defaultOptions = {
   includeHiddenNodes: false,
 };
 
+/**
+ * Hook which returns true when all nodes are initialized.
+ *
+ * @public
+ * @param options.includeHiddenNodes - defaults to false
+ * @returns boolean indicating whether all nodes are initialized
+ */
 function useNodesInitialized(options: UseNodesInitializedOptions = defaultOptions): boolean {
   const initialized = useStore(selector(options));
 
diff --git a/packages/react/src/hooks/useOnInitHandler.ts b/packages/react/src/hooks/useOnInitHandler.ts
index 27de912b..e08e3b4c 100644
--- a/packages/react/src/hooks/useOnInitHandler.ts
+++ b/packages/react/src/hooks/useOnInitHandler.ts
@@ -3,6 +3,11 @@ import { useEffect, useRef } from 'react';
 import useReactFlow from './useReactFlow';
 import type { OnInit } from '../types';
 
+/**
+ * Hook for calling onInit handler.
+ *
+ * @internal
+ */
 function useOnInitHandler(onInit: OnInit | undefined) {
   const rfInstance = useReactFlow();
   const isInitialized = useRef<boolean>(false);
diff --git a/packages/react/src/hooks/useOnSelectionChange.ts b/packages/react/src/hooks/useOnSelectionChange.ts
index 51df3ddb..bd3541d9 100644
--- a/packages/react/src/hooks/useOnSelectionChange.ts
+++ b/packages/react/src/hooks/useOnSelectionChange.ts
@@ -7,6 +7,12 @@ export type UseOnSelectionChangeOptions = {
   onChange: OnSelectionChangeFunc;
 };
 
+/**
+ * Hook for registering an onSelectionChange handler.
+ *
+ * @public
+ * @params params.onChange - The handler to register
+ */
 function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions) {
   const store = useStoreApi();
 
diff --git a/packages/react/src/hooks/useOnViewportChange.ts b/packages/react/src/hooks/useOnViewportChange.ts
index 00ac15a7..13209d62 100644
--- a/packages/react/src/hooks/useOnViewportChange.ts
+++ b/packages/react/src/hooks/useOnViewportChange.ts
@@ -9,6 +9,14 @@ export type UseOnViewportChangeOptions = {
   onEnd?: OnViewportChange;
 };
 
+/**
+ * Hook for registering an onViewportChange handler.
+ *
+ * @public
+ * @param params.onStart - gets called when the viewport starts changing
+ * @param params.onChange - gets called when the viewport changes
+ * @param params.onEnd - gets called when the viewport stops changing
+ */
 function useOnViewportChange({ onStart, onChange, onEnd }: UseOnViewportChangeOptions) {
   const store = useStoreApi();
 
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index 9bb17eb9..eb07cc6a 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -1,13 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import {
-  getElementsToRemove,
-  getIncomersBase,
-  getOutgoersBase,
-  getOverlappingArea,
-  isRectObject,
-  nodeToRect,
-  type Rect,
-} from '@xyflow/system';
+import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
@@ -20,38 +12,45 @@ import type {
   EdgeResetChange,
   NodeRemoveChange,
   EdgeRemoveChange,
-  NodeChange,
   Node,
   Edge,
 } from '../types';
 import { isNode } from '../utils';
 
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
+export default function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): ReactFlowInstance<
+  NodeType,
+  EdgeType
+> {
   const viewportHelper = useViewportHelper();
   const store = useStoreApi();
 
-  const getNodes = useCallback<Instance.GetNodes<NodeData>>(() => {
-    return store.getState().nodes.map((n) => ({ ...n }));
+  const getNodes = useCallback<Instance.GetNodes<NodeType>>(() => {
+    return store.getState().nodes.map((n) => ({ ...n })) as NodeType[];
   }, []);
 
-  const getNode = useCallback<Instance.GetNode<NodeData>>((id) => {
-    return store.getState().nodeLookup.get(id);
+  const getNode = useCallback<Instance.GetNode<NodeType>>((id) => {
+    return store.getState().nodeLookup.get(id) as NodeType;
   }, []);
 
-  const getEdges = useCallback<Instance.GetEdges<EdgeData>>(() => {
+  const getEdges = useCallback<Instance.GetEdges<EdgeType>>(() => {
     const { edges = [] } = store.getState();
-    return edges.map((e) => ({ ...e }));
+    return edges.map((e) => ({ ...e })) as EdgeType[];
   }, []);
 
-  const getEdge = useCallback<Instance.GetEdge<EdgeData>>((id) => {
+  const getEdge = useCallback<Instance.GetEdge<EdgeType>>((id) => {
     const { edges = [] } = store.getState();
-    return edges.find((e) => e.id === id);
+    return edges.find((e) => e.id === id) as EdgeType;
   }, []);
 
-  const setNodes = useCallback<Instance.SetNodes<NodeData>>((payload) => {
+  const setNodes = useCallback<Instance.SetNodes<NodeType>>((payload) => {
     const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
-    const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
+    const nextNodes = typeof payload === 'function' ? payload(nodes as NodeType[]) : payload;
 
     if (hasDefaultNodes) {
       setNodes(nextNodes);
@@ -59,14 +58,14 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       const changes =
         nextNodes.length === 0
           ? nodes.map((node) => ({ type: 'remove', id: node.id } as NodeRemoveChange))
-          : nextNodes.map((node) => ({ item: node, type: 'reset' } as NodeResetChange<NodeData>));
+          : nextNodes.map((node) => ({ item: node, type: 'reset' } as NodeResetChange<NodeType>));
       onNodesChange(changes);
     }
   }, []);
 
-  const setEdges = useCallback<Instance.SetEdges<EdgeData>>((payload) => {
+  const setEdges = useCallback<Instance.SetEdges<EdgeType>>((payload) => {
     const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-    const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
+    const nextEdges = typeof payload === 'function' ? payload(edges as EdgeType[]) : payload;
 
     if (hasDefaultEdges) {
       setEdges(nextEdges);
@@ -74,12 +73,12 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       const changes =
         nextEdges.length === 0
           ? edges.map((edge) => ({ type: 'remove', id: edge.id } as EdgeRemoveChange))
-          : nextEdges.map((edge) => ({ item: edge, type: 'reset' } as EdgeResetChange<EdgeData>));
+          : nextEdges.map((edge) => ({ item: edge, type: 'reset' } as EdgeResetChange<EdgeType>));
       onEdgesChange(changes);
     }
   }, []);
 
-  const addNodes = useCallback<Instance.AddNodes<NodeData>>((payload) => {
+  const addNodes = useCallback<Instance.AddNodes<NodeType>>((payload) => {
     const nodes = Array.isArray(payload) ? payload : [payload];
     const { nodes: currentNodes, hasDefaultNodes, onNodesChange, setNodes } = store.getState();
 
@@ -87,29 +86,29 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       const nextNodes = [...currentNodes, ...nodes];
       setNodes(nextNodes);
     } else if (onNodesChange) {
-      const changes = nodes.map((node) => ({ item: node, type: 'add' } as NodeAddChange<NodeData>));
+      const changes = nodes.map((node) => ({ item: node, type: 'add' } as NodeAddChange<NodeType>));
       onNodesChange(changes);
     }
   }, []);
 
-  const addEdges = useCallback<Instance.AddEdges<EdgeData>>((payload) => {
+  const addEdges = useCallback<Instance.AddEdges<EdgeType>>((payload) => {
     const nextEdges = Array.isArray(payload) ? payload : [payload];
     const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
 
     if (hasDefaultEdges) {
       setEdges([...edges, ...nextEdges]);
     } else if (onEdgesChange) {
-      const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' } as EdgeAddChange<EdgeData>));
+      const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' } as EdgeAddChange<EdgeType>));
       onEdgesChange(changes);
     }
   }, []);
 
-  const toObject = useCallback<Instance.ToObject<NodeData, EdgeData>>(() => {
+  const toObject = useCallback<Instance.ToObject<NodeType, EdgeType>>(() => {
     const { nodes = [], edges = [], transform } = store.getState();
     const [x, y, zoom] = transform;
     return {
-      nodes: nodes.map((n) => ({ ...n })),
-      edges: edges.map((e) => ({ ...e })),
+      nodes: nodes.map((n) => ({ ...n })) as NodeType[],
+      edges: edges.map((e) => ({ ...e })) as EdgeType[],
       viewport: {
         x,
         y,
@@ -118,74 +117,70 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     };
   }, []);
 
-  const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
-    const {
-      nodes,
-      edges,
-      hasDefaultNodes,
-      hasDefaultEdges,
-      onNodesDelete,
-      onEdgesDelete,
-      onNodesChange,
-      onEdgesChange,
-      onDelete,
-    } = store.getState();
-    const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
-      nodesToRemove: nodesDeleted || [],
-      edgesToRemove: edgesDeleted || [],
-      nodes,
-      edges,
-    });
+  const deleteElements = useCallback<Instance.DeleteElements>(
+    async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
+      const {
+        nodes,
+        edges,
+        hasDefaultNodes,
+        hasDefaultEdges,
+        onNodesDelete,
+        onEdgesDelete,
+        onNodesChange,
+        onEdgesChange,
+        onDelete,
+      } = store.getState();
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+        nodesToRemove,
+        edgesToRemove,
+        nodes,
+        edges,
+        onBeforeDelete,
+      });
 
-    if (matchingNodes.length || matchingEdges.length) {
-      if (hasDefaultEdges || hasDefaultNodes) {
+      const hasMatchingEdges = matchingEdges.length > 0;
+      const hasMatchingNodes = matchingNodes.length > 0;
+
+      if (hasMatchingEdges) {
         if (hasDefaultEdges) {
           store.setState({
             edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
           });
         }
 
+        onEdgesDelete?.(matchingEdges);
+        onEdgesChange?.(
+          matchingEdges.map((edge) => ({
+            id: edge.id,
+            type: 'remove',
+          }))
+        );
+      }
+
+      if (hasMatchingNodes) {
         if (hasDefaultNodes) {
           store.setState({
             nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
           });
         }
+
+        onNodesDelete?.(matchingNodes);
+        onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
       }
 
-      if (matchingEdges.length > 0) {
-        onEdgesDelete?.(matchingEdges);
-
-        if (onEdgesChange) {
-          onEdgesChange(
-            matchingEdges.map((edge) => ({
-              id: edge.id,
-              type: 'remove',
-            }))
-          );
-        }
+      if (hasMatchingNodes || hasMatchingEdges) {
+        onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
       }
 
-      if (matchingNodes.length > 0) {
-        onNodesDelete?.(matchingNodes as Node[]);
-
-        if (onNodesChange) {
-          const nodeChanges: NodeChange[] = matchingNodes.map((node) => ({ id: node.id, type: 'remove' }));
-          onNodesChange(nodeChanges);
-        }
-      }
-
-      onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
-    }
-
-    return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
-  }, []);
+      return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
+    },
+    []
+  );
 
   const getNodeRect = useCallback(
-    (
-      nodeOrRect: Node<NodeData> | { id: Node['id'] } | Rect
-    ): [Rect | null, Node<NodeData> | null | undefined, boolean] => {
+    (nodeOrRect: NodeType | { id: Node['id'] } | Rect): [Rect | null, NodeType | null | undefined, boolean] => {
       const isRect = isRectObject(nodeOrRect);
-      const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
+      const node = isRect ? null : (store.getState().nodeLookup.get(nodeOrRect.id) as NodeType);
 
       if (!isRect && !node) {
         [null, null, isRect];
@@ -198,7 +193,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     []
   );
 
-  const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeData>>(
+  const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(
     (nodeOrRect, partially = true, nodes) => {
       const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
 
@@ -216,12 +211,12 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
         const partiallyVisible = partially && overlappingArea > 0;
 
         return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
-      });
+      }) as NodeType[];
     },
     []
   );
 
-  const isNodeIntersecting = useCallback<Instance.IsNodeIntersecting<NodeData>>(
+  const isNodeIntersecting = useCallback<Instance.IsNodeIntersecting<NodeType>>(
     (nodeOrRect, area, partially = true) => {
       const [nodeRect] = getNodeRect(nodeOrRect);
 
@@ -237,48 +232,13 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     []
   );
 
-  const getConnectedEdges = useCallback<Instance.getConnectedEdges>((node) => {
-    const { edges } = store.getState();
-
-    const nodeIds = new Set();
-    if (typeof node === 'string') {
-      nodeIds.add(node);
-    } else if (node.length >= 1) {
-      node.forEach((n) => {
-        nodeIds.add(n.id);
-      });
-    }
-
-    return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
-  }, []);
-
-  const getIncomers = useCallback<Instance.getIncomers>((node) => {
-    const { nodes, edges } = store.getState();
-
-    if (typeof node === 'string') {
-      return getIncomersBase({ id: node }, nodes, edges);
-    }
-
-    return getIncomersBase(node, nodes, edges);
-  }, []);
-
-  const getOutgoers = useCallback<Instance.getOutgoers>((node) => {
-    const { nodes, edges } = store.getState();
-
-    if (typeof node == 'string') {
-      return getOutgoersBase({ id: node }, nodes, edges);
-    }
-
-    return getOutgoersBase(node, nodes, edges);
-  }, []);
-
-  const updateNode = useCallback<Instance.UpdateNode>(
+  const updateNode = useCallback<Instance.UpdateNode<NodeType>>(
     (id, nodeUpdate, options = { replace: true }) => {
       setNodes((prevNodes) =>
         prevNodes.map((node) => {
           if (node.id === id) {
-            const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
-            return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+            const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as NodeType) : nodeUpdate;
+            return options.replace && isNode(nextNode) ? (nextNode as NodeType) : { ...node, ...nextNode };
           }
 
           return node;
@@ -288,7 +248,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     [setNodes]
   );
 
-  const updateNodeData = useCallback<Instance.UpdateNodeData>(
+  const updateNodeData = useCallback<Instance.UpdateNodeData<NodeType>>(
     (id, dataUpdate, options = { replace: false }) => {
       updateNode(
         id,
@@ -317,9 +277,6 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       deleteElements,
       getIntersectingNodes,
       isNodeIntersecting,
-      getConnectedEdges,
-      getIncomers,
-      getOutgoers,
       updateNode,
       updateNodeData,
     };
@@ -337,8 +294,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     deleteElements,
     getIntersectingNodes,
     isNodeIntersecting,
-    getConnectedEdges,
-    getIncomers,
-    getOutgoers,
+    updateNode,
+    updateNodeData,
   ]);
 }
diff --git a/packages/react/src/hooks/useResizeHandler.ts b/packages/react/src/hooks/useResizeHandler.ts
index 6c611e3d..1b3dc6ce 100644
--- a/packages/react/src/hooks/useResizeHandler.ts
+++ b/packages/react/src/hooks/useResizeHandler.ts
@@ -3,6 +3,11 @@ import { errorMessages, getDimensions } from '@xyflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
 
+/**
+ * Hook for handling resize events.
+ *
+ * @internal
+ */
 function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null>): void {
   const store = useStoreApi();
 
diff --git a/packages/react/src/hooks/useStore.ts b/packages/react/src/hooks/useStore.ts
index eb075d00..96587161 100644
--- a/packages/react/src/hooks/useStore.ts
+++ b/packages/react/src/hooks/useStore.ts
@@ -10,6 +10,14 @@ const zustandErrorMessage = errorMessages['error001']();
 
 type ExtractState = StoreApi<ReactFlowState> extends { getState: () => infer T } ? T : never;
 
+/**
+ * Hook for accessing the internal store. Should only be used in rare cases.
+ *
+ * @public
+ * @param selector
+ * @param equalityFn
+ * @returns The selected state slice
+ */
 function useStore<StateSlice = ExtractState>(
   selector: (state: ReactFlowState) => StateSlice,
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
diff --git a/packages/react/src/hooks/useUpdateNodeInternals.ts b/packages/react/src/hooks/useUpdateNodeInternals.ts
index d14f35f3..ced202da 100644
--- a/packages/react/src/hooks/useUpdateNodeInternals.ts
+++ b/packages/react/src/hooks/useUpdateNodeInternals.ts
@@ -3,6 +3,12 @@ import type { UpdateNodeInternals, NodeDimensionUpdate } from '@xyflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
 
+/**
+ * Hook for updating node internals.
+ *
+ * @public
+ * @returns function for updating node internals
+ */
 function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();
 
diff --git a/packages/react/src/hooks/useUpdateNodePositions.ts b/packages/react/src/hooks/useUpdateNodePositions.ts
index 06577601..77def71f 100644
--- a/packages/react/src/hooks/useUpdateNodePositions.ts
+++ b/packages/react/src/hooks/useUpdateNodePositions.ts
@@ -7,6 +7,12 @@ import { useStoreApi } from '../hooks/useStore';
 const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) =>
   n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
 
+/**
+ * Hook for updating node positions.
+ *
+ * @internal
+ * @returns function for updating node positions
+ */
 function useUpdateNodePositions() {
   const store = useStoreApi();
 
diff --git a/packages/react/src/hooks/useViewport.ts b/packages/react/src/hooks/useViewport.ts
index c7153fac..4d48cf5c 100644
--- a/packages/react/src/hooks/useViewport.ts
+++ b/packages/react/src/hooks/useViewport.ts
@@ -10,6 +10,12 @@ const viewportSelector = (state: ReactFlowState) => ({
   zoom: state.transform[2],
 });
 
+/**
+ * Hook for getting the current viewport from the store.
+ *
+ * @public
+ * @returns The current viewport
+ */
 function useViewport(): Viewport {
   const viewport = useStore(viewportSelector, shallow);
 
diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts
index f1099b43..481bae15 100644
--- a/packages/react/src/hooks/useViewportHelper.ts
+++ b/packages/react/src/hooks/useViewportHelper.ts
@@ -12,6 +12,12 @@ import type { ViewportHelperFunctions, ReactFlowState } from '../types';
 
 const selector = (s: ReactFlowState) => !!s.panZoom;
 
+/**
+ * Hook for getting viewport helper functions.
+ *
+ * @internal
+ * @returns viewport helper functions
+ */
 const useViewportHelper = (): ViewportHelperFunctions => {
   const store = useStoreApi();
   const panZoomInitialized = useStore(selector);
diff --git a/packages/react/src/hooks/useViewportSync.ts b/packages/react/src/hooks/useViewportSync.ts
index a34cdcd5..f0a1a31e 100644
--- a/packages/react/src/hooks/useViewportSync.ts
+++ b/packages/react/src/hooks/useViewportSync.ts
@@ -6,6 +6,12 @@ import type { ReactFlowState } from '../types';
 
 const selector = (state: ReactFlowState) => state.panZoom?.syncViewport;
 
+/**
+ * Hook for syncing the viewport with the panzoom instance.
+ *
+ * @internal
+ * @param viewport
+ */
 export default function useViewportSync(viewport?: Viewport) {
   const syncViewport = useStore(selector);
   const store = useStoreApi();
diff --git a/packages/react/src/hooks/useVisibleEdgeIds.ts b/packages/react/src/hooks/useVisibleEdgeIds.ts
new file mode 100644
index 00000000..ceb40f31
--- /dev/null
+++ b/packages/react/src/hooks/useVisibleEdgeIds.ts
@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+import { isEdgeVisible } from '@xyflow/system';
+
+import { useStore } from './useStore';
+import { type ReactFlowState } from '../types';
+
+/**
+ * Hook for getting the visible edge ids from the store.
+ *
+ * @internal
+ * @param onlyRenderVisible
+ * @returns array with visible edge ids
+ */
+function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
+  const edgeIds = useStore(
+    useCallback(
+      (s: ReactFlowState) => {
+        if (!onlyRenderVisible) {
+          return s.edges.map((edge) => edge.id);
+        }
+
+        const visibleEdgeIds = [];
+
+        if (s.width && s.height) {
+          for (const edge of s.edges) {
+            const sourceNode = s.nodeLookup.get(edge.source);
+            const targetNode = s.nodeLookup.get(edge.target);
+
+            if (
+              sourceNode &&
+              targetNode &&
+              isEdgeVisible({
+                sourceNode,
+                targetNode,
+                width: s.width,
+                height: s.height,
+                transform: s.transform,
+              })
+            ) {
+              visibleEdgeIds.push(edge.id);
+            }
+          }
+        }
+
+        return visibleEdgeIds;
+      },
+      [onlyRenderVisible]
+    ),
+    shallow
+  );
+
+  return edgeIds;
+}
+
+export default useVisibleEdgeIds;
diff --git a/packages/react/src/hooks/useVisibleEdges.ts b/packages/react/src/hooks/useVisibleEdges.ts
deleted file mode 100644
index 67d02c92..00000000
--- a/packages/react/src/hooks/useVisibleEdges.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useCallback } from 'react';
-import { GroupedEdges, groupEdgesByZLevel, isEdgeVisible } from '@xyflow/system';
-
-import { useStore } from '../hooks/useStore';
-import { Edge, type ReactFlowState } from '../types';
-import { shallow } from 'zustand/shallow';
-
-function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boolean): GroupedEdges<Edge>[] {
-  const edges = useStore(
-    useCallback(
-      (s: ReactFlowState) => {
-        const visibleEdges =
-          onlyRenderVisible && s.width && s.height
-            ? s.edges.filter((e) => {
-                const sourceNode = s.nodeLookup.get(e.source);
-                const targetNode = s.nodeLookup.get(e.target);
-
-                return (
-                  sourceNode &&
-                  targetNode &&
-                  isEdgeVisible({
-                    sourceNode,
-                    targetNode,
-                    width: s.width,
-                    height: s.height,
-                    transform: s.transform,
-                  })
-                );
-              })
-            : s.edges;
-
-        return groupEdgesByZLevel(visibleEdges, s.nodeLookup, elevateEdgesOnSelect);
-      },
-      [onlyRenderVisible, elevateEdgesOnSelect]
-    ),
-    (groupA, groupB) => {
-      const unEqual = groupA.some(
-        (item, index) =>
-          item.isMaxLevel !== groupB[index].isMaxLevel ||
-          item.level !== groupB[index].level ||
-          !shallow(item.edges, groupB[index].edges)
-      );
-
-      return !unEqual;
-    }
-  );
-
-  return edges;
-}
-
-export default useVisibleEdges;
diff --git a/packages/react/src/hooks/useVisibleNodeIds.ts b/packages/react/src/hooks/useVisibleNodeIds.ts
new file mode 100644
index 00000000..803fde6d
--- /dev/null
+++ b/packages/react/src/hooks/useVisibleNodeIds.ts
@@ -0,0 +1,29 @@
+import { getNodesInside } from '@xyflow/system';
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from './useStore';
+import type { Node, ReactFlowState } from '../types';
+import { useCallback } from 'react';
+
+const selector = (onlyRenderVisible: boolean) => (s: ReactFlowState) => {
+  return onlyRenderVisible
+    ? getNodesInside<Node>(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map(
+        (node) => node.id
+      )
+    : Array.from(s.nodeLookup.keys());
+};
+
+/**
+ * Hook for getting the visible node ids from the store.
+ *
+ * @internal
+ * @param onlyRenderVisible
+ * @returns array with visible node ids
+ */
+function useVisibleNodeIds(onlyRenderVisible: boolean) {
+  const nodeIds = useStore(useCallback(selector(onlyRenderVisible), [onlyRenderVisible]), shallow);
+
+  return nodeIds;
+}
+
+export default useVisibleNodeIds;
diff --git a/packages/react/src/hooks/useVisibleNodes.ts b/packages/react/src/hooks/useVisibleNodes.ts
deleted file mode 100644
index ddbb2794..00000000
--- a/packages/react/src/hooks/useVisibleNodes.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useCallback } from 'react';
-import { getNodesInside } from '@xyflow/system';
-
-import { useStore } from '../hooks/useStore';
-import type { Node, ReactFlowState } from '../types';
-
-function useVisibleNodes(onlyRenderVisible: boolean) {
-  const nodes = useStore(
-    useCallback(
-      (s: ReactFlowState) =>
-        onlyRenderVisible
-          ? getNodesInside<Node>(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : s.nodes,
-      [onlyRenderVisible]
-    )
-  );
-
-  return nodes;
-}
-
-export default useVisibleNodes;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ae82e78b..771c7d86 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -10,6 +10,7 @@ export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';
 export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
+export { default as ViewportPortal } from './components/ViewportPortal';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
@@ -24,6 +25,7 @@ export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } fro
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { useHandleConnections } from './hooks/useHandleConnections';
 export { useNodesData } from './hooks/useNodesData';
+export { useConnection } from './hooks/useConnection';
 export { useNodeId } from './contexts/NodeIdContext';
 
 export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/changes';
@@ -77,6 +79,8 @@ export {
   type CoordinateExtent,
   type ColorMode,
   type ColorModeClass,
+  type HandleType,
+  type OnBeforeDelete,
 } from '@xyflow/system';
 
 // system utils
@@ -91,4 +95,5 @@ export {
   getStraightPath,
   getViewportForBounds,
   getNodesBounds,
+  internalsSymbol,
 } from '@xyflow/system';
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index c5c21d7a..13311a1b 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -2,7 +2,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import {
   clampPosition,
   fitView as fitViewSystem,
-  updateNodes,
+  adoptUserProvidedNodes,
   updateAbsolutePositions,
   panBy as panBySystem,
   Dimensions,
@@ -43,19 +43,23 @@ const createRFStore = ({
       ...getInitialState({ nodes, edges, width, height, fitView }),
       setNodes: (nodes: Node[]) => {
         const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
-        // Whenver new nodes are set, we need to calculate the absolute positions of the nodes
-        // and update the nodeLookup.
-        const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
+        // setNodes() is called exclusively in response to user actions:
+        // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
+        // - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
+        //
+        // When this happens, we take the note objects passed by the user and extend them with fields
+        // relevant for internal React Flow operations.
+        // TODO: consider updating the types to reflect the distinction between user-provided nodes and internal nodes.
+        const nodesWithInternalData = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
 
-        set({ nodes: nextNodes });
+        set({ nodes: nodesWithInternalData });
       },
       setEdges: (edges: Edge[]) => {
-        const { defaultEdgeOptions = {}, connectionLookup } = get();
-        const nextEdges = edges.map((e) => ({ ...defaultEdgeOptions, ...e }));
+        const { connectionLookup, edgeLookup } = get();
 
-        updateConnectionLookup(connectionLookup, nextEdges);
+        updateConnectionLookup(connectionLookup, edgeLookup, edges);
 
-        set({ edges: nextEdges });
+        set({ edges });
       },
       // when the user works with an uncontrolled flow,
       // we set a flag `hasDefaultNodes` / `hasDefaultEdges`
@@ -74,12 +78,16 @@ const createRFStore = ({
         };
 
         if (hasDefaultNodes) {
-          nextState.nodes = updateNodes(nodes, new Map(), {
-            nodeOrigin: get().nodeOrigin,
-            elevateNodesOnSelect: get().elevateNodesOnSelect,
+          const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
+          nextState.nodes = adoptUserProvidedNodes(nodes, nodeLookup, {
+            nodeOrigin,
+            elevateNodesOnSelect,
           });
         }
         if (hasDefaultEdges) {
+          const { connectionLookup, edgeLookup } = get();
+          updateConnectionLookup(connectionLookup, edgeLookup, edges);
+
           nextState.edges = edges;
         }
 
@@ -168,7 +176,7 @@ const createRFStore = ({
         if (changes?.length) {
           if (hasDefaultNodes) {
             const updatedNodes = applyNodeChanges(changes, nodes);
-            const nextNodes = updateNodes(updatedNodes, nodeLookup, {
+            const nextNodes = adoptUserProvidedNodes(updatedNodes, nodeLookup, {
               nodeOrigin,
               elevateNodesOnSelect,
             });
@@ -187,8 +195,8 @@ const createRFStore = ({
         if (multiSelectionActive) {
           changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[];
         } else {
-          changedNodes = getSelectionChanges(nodes, selectedNodeIds);
-          changedEdges = getSelectionChanges(edges, []);
+          changedNodes = getSelectionChanges(nodes, new Set([...selectedNodeIds]), true);
+          changedEdges = getSelectionChanges(edges);
         }
 
         updateNodesAndEdgesSelections({
@@ -206,8 +214,8 @@ const createRFStore = ({
         if (multiSelectionActive) {
           changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[];
         } else {
-          changedEdges = getSelectionChanges(edges, selectedEdgeIds);
-          changedNodes = getSelectionChanges(nodes, []);
+          changedEdges = getSelectionChanges(edges, new Set([...selectedEdgeIds]));
+          changedNodes = getSelectionChanges(nodes, new Set(), true);
         }
 
         updateNodesAndEdgesSelections({
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index 8d07617a..c8f92903 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -1,7 +1,7 @@
 import {
   infiniteExtent,
   ConnectionMode,
-  updateNodes,
+  adoptUserProvidedNodes,
   getNodesBounds,
   getViewportForBounds,
   Transform,
@@ -24,8 +24,14 @@ const getInitialState = ({
   fitView?: boolean;
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map();
-  const connectionLookup = updateConnectionLookup(new Map(), edges);
-  const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
+  const connectionLookup = new Map();
+  const edgeLookup = new Map();
+
+  updateConnectionLookup(connectionLookup, edgeLookup, edges);
+  const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
+    nodeOrigin: [0, 0],
+    elevateNodesOnSelect: false,
+  });
 
   let transform: Transform = [0, 0, 1];
 
@@ -43,7 +49,8 @@ const getInitialState = ({
     transform,
     nodes: nextNodes,
     nodeLookup,
-    edges: edges,
+    edges,
+    edgeLookup,
     connectionLookup,
     onNodesChange: null,
     onEdgesChange: null,
@@ -64,7 +71,7 @@ const getInitialState = ({
     paneDragging: false,
     noPanClassName: 'nopan',
     nodeOrigin: [0, 0],
-    nodeDragThreshold: 0,
+    nodeDragThreshold: 1,
 
     snapGrid: [15, 15],
     snapToGrid: false,
@@ -76,6 +83,7 @@ const getInitialState = ({
     edgesUpdatable: true,
     elementsSelectable: true,
     elevateNodesOnSelect: true,
+    elevateEdgesOnSelect: false,
     fitViewOnInit: false,
     fitViewDone: false,
     fitViewOnInitOptions: undefined,
diff --git a/packages/react/src/types/changes.ts b/packages/react/src/types/changes.ts
index 69ee0f1f..f1282574 100644
--- a/packages/react/src/types/changes.ts
+++ b/packages/react/src/types/changes.ts
@@ -30,16 +30,20 @@ export type NodeRemoveChange = {
   type: 'remove';
 };
 
-export type NodeAddChange<NodeData = any> = {
-  item: Node<NodeData>;
+export type NodeAddChange<NodeType extends Node = Node> = {
+  item: NodeType;
   type: 'add';
 };
 
-export type NodeResetChange<NodeData = any> = {
-  item: Node<NodeData>;
+export type NodeResetChange<NodeType extends Node = Node> = {
+  item: NodeType;
   type: 'reset';
 };
 
+/**
+ * Union type of all possible node changes.
+ * @public
+ */
 export type NodeChange =
   | NodeDimensionChange
   | NodePositionChange
@@ -50,12 +54,12 @@ export type NodeChange =
 
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;
-export type EdgeAddChange<EdgeData = any> = {
-  item: Edge<EdgeData>;
+export type EdgeAddChange<EdgeType extends Edge = Edge> = {
+  item: EdgeType;
   type: 'add';
 };
-export type EdgeResetChange<EdgeData = any> = {
-  item: Edge<EdgeData>;
+export type EdgeResetChange<EdgeType extends Edge = Edge> = {
+  item: EdgeType;
   type: 'reset';
 };
 export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange;
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 770432f5..bea7166b 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -20,6 +20,8 @@ import type {
   OnError,
   IsValidConnection,
   ColorMode,
+  SnapGrid,
+  OnBeforeDelete,
 } from '@xyflow/system';
 
 import type {
@@ -44,6 +46,10 @@ import type {
   EdgeMouseHandler,
 } from '.';
 
+/**
+ * ReactFlow component props.
+ * @public
+ */
 export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   nodes?: Node[];
   edges?: Edge[];
@@ -95,6 +101,7 @@ export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   onPaneMouseEnter?: (event: ReactMouseEvent) => void;
   onPaneMouseMove?: (event: ReactMouseEvent) => void;
   onPaneMouseLeave?: (event: ReactMouseEvent) => void;
+  onBeforeDelete?: OnBeforeDelete;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
   connectionLineType?: ConnectionLineType;
@@ -110,7 +117,7 @@ export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   multiSelectionKeyCode?: KeyCode | null;
   zoomActivationKeyCode?: KeyCode | null;
   snapToGrid?: boolean;
-  snapGrid?: [number, number];
+  snapGrid?: SnapGrid;
   onlyRenderVisibleElements?: boolean;
   nodesDraggable?: boolean;
   nodesConnectable?: boolean;
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 287c277d..dce49193 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -13,11 +13,11 @@ import type {
   HandleElement,
   ConnectionStatus,
   EdgePosition,
-  Optional,
   StepPathOptions,
+  OnError,
 } from '@xyflow/system';
 
-import { Node } from '.';
+import { EdgeTypes, Node } from '.';
 
 export type EdgeLabelOptions = {
   label?: string | ReactNode;
@@ -30,13 +30,13 @@ export type EdgeLabelOptions = {
 
 export type EdgeUpdatable = boolean | HandleType;
 
-export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
-  style?: CSSProperties;
-  className?: string;
-  sourceNode?: Node;
-  targetNode?: Node;
-  updatable?: EdgeUpdatable;
-} & EdgeLabelOptions;
+export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> &
+  EdgeLabelOptions & {
+    style?: CSSProperties;
+    className?: string;
+    updatable?: EdgeUpdatable;
+    focusable?: boolean;
+  };
 
 type SmoothStepEdgeType<T> = DefaultEdge<T> & {
   type: 'smoothstep';
@@ -53,13 +53,22 @@ type StepEdgeType<T> = DefaultEdge<T> & {
   pathOptions?: StepPathOptions;
 };
 
+/**
+ * The Edge type is mainly used for the `edges` that get passed to the ReactFlow component
+ * @public
+ */
 export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
 
 export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
 
-export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
+export type EdgeWrapperProps = {
+  id: string;
+  edgesFocusable: boolean;
+  edgesUpdatable: boolean;
+  elementsSelectable: boolean;
+  noPanClassName: string;
   onClick?: EdgeMouseHandler;
-  onEdgeDoubleClick?: EdgeMouseHandler;
+  onDoubleClick?: EdgeMouseHandler;
   sourceHandleId?: string | null;
   targetHandleId?: string | null;
   onEdgeUpdate?: OnEdgeUpdateFunc;
@@ -71,10 +80,8 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void;
   onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void;
   rfId?: string;
-  isFocusable: boolean;
-  isUpdatable: EdgeUpdatable;
-  isSelectable: boolean;
-  pathOptions?: BezierPathOptions | SmoothStepPathOptions;
+  edgeTypes?: EdgeTypes;
+  onError?: OnError;
 };
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
@@ -85,45 +92,89 @@ export type EdgeTextProps = HTMLAttributes<SVGElement> &
     y: number;
   };
 
-// props that get passed to a custom edge
+/**
+ * Custom edge component props
+ * @public
+ */
 export type EdgeProps<T = any> = Pick<
   Edge<T>,
   'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
 > &
-  Pick<WrapEdgeProps, 'sourceHandleId' | 'targetHandleId' | 'interactionWidth'> &
   EdgePosition &
   EdgeLabelOptions & {
+    sourceHandleId?: string | null;
+    targetHandleId?: string | null;
     markerStart?: string;
     markerEnd?: string;
     // @TODO: how can we get better types for pathOptions?
     pathOptions?: any;
+    interactionWidth?: number;
   };
 
-export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
+/**
+ * BaseEdge component props
+ * @public
+ */
+export type BaseEdgeProps = EdgeLabelOptions & {
+  id?: string;
+  interactionWidth?: number;
+  className?: string;
+  labelX?: number;
+  labelY?: number;
+  markerStart?: string;
+  markerEnd?: string;
+  path: string;
+  style?: CSSProperties;
+};
+
+/**
+ * Helper type for edge components that get exported by the library
+ * @public
+ */
+export type EdgeComponentProps = EdgePosition &
   EdgeLabelOptions & {
-    id?: string;
-    labelX?: number;
-    labelY?: number;
-    path: string;
+    id?: EdgeProps['id'];
+    markerStart?: EdgeProps['markerStart'];
+    markerEnd?: EdgeProps['markerEnd'];
+    interactionWidth?: EdgeProps['interactionWidth'];
+    style?: EdgeProps['style'];
+    sourceHandleId?: EdgeProps['sourceHandleId'];
+    targetHandleId?: EdgeProps['targetHandleId'];
   };
 
-export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
-
-export type StraightEdgeProps<T = any> = Omit<EdgeComponentProps<T>, 'sourcePosition' | 'targetPosition'>;
-
-export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: SmoothStepPathOptions;
+export type EdgeComponentWithPathOptions<PathOptions> = EdgeComponentProps & {
+  pathOptions?: PathOptions;
 };
 
-export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: BezierPathOptions;
-};
+/**
+ * BezierEdge component props
+ * @public
+ */
+export type BezierEdgeProps = EdgeComponentWithPathOptions<BezierPathOptions>;
 
-export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: StepPathOptions;
-};
+/**
+ * SmoothStepEdge component props
+ * @public
+ */
+export type SmoothStepEdgeProps = EdgeComponentWithPathOptions<SmoothStepPathOptions>;
 
-export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
+/**
+ * StepEdge component props
+ * @public
+ */
+export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
+
+/**
+ * StraightEdge component props
+ * @public
+ */
+export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
+
+/**
+ * SimpleBezier component props
+ * @public
+ */
+export type SimpleBezierEdgeProps = EdgeComponentProps;
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 
diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts
index b2e7098a..a1d76983 100644
--- a/packages/react/src/types/general.ts
+++ b/packages/react/src/types/general.ts
@@ -1,9 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ComponentType, MemoExoticComponent } from 'react';
 import {
   FitViewParamsBase,
   FitViewOptionsBase,
-  NodeProps,
   ZoomInOut,
   ZoomTo,
   SetViewport,
@@ -12,9 +10,11 @@ import {
   SetCenter,
   FitBounds,
   XYPosition,
+  NodeProps,
 } from '@xyflow/system';
 
-import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.';
+import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
+import { ComponentType } from 'react';
 
 export type OnNodesChange = (changes: NodeChange[]) => void;
 export type OnEdgesChange = (changes: EdgeChange[]) => void;
@@ -24,9 +24,7 @@ export type OnEdgesDelete = (edges: Edge[]) => void;
 export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
 
 export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
-export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
 export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
-export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
 
 export type UnselectNodesAndEdgesParams = {
   nodes?: Node[];
@@ -43,7 +41,9 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
 export type FitViewParams = FitViewParamsBase<Node>;
 export type FitViewOptions = FitViewOptionsBase<Node>;
 export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
-export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
+export type OnInit<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (
+  reactFlowInstance: ReactFlowInstance<NodeType, EdgeType>
+) => void;
 
 export type ViewportHelperFunctions = {
   zoomIn: ZoomInOut;
diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts
index a1c822bb..c9c4708d 100644
--- a/packages/react/src/types/instance.ts
+++ b/packages/react/src/types/instance.ts
@@ -1,44 +1,48 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-namespace */
-import type { Rect, Viewport } from '@xyflow/system';
+import type { OnBeforeDelete, Rect, Viewport } from '@xyflow/system';
 import type { Node, Edge, ViewportHelperFunctions } from '.';
 
-export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
-  nodes: Node<NodeData>[];
-  edges: Edge<EdgeData>[];
+export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  nodes: NodeType[];
+  edges: EdgeType[];
   viewport: Viewport;
 };
 
 export type DeleteElementsOptions = {
   nodes?: (Node | { id: Node['id'] })[];
   edges?: (Edge | { id: Edge['id'] })[];
+  onBeforeDelete?: OnBeforeDelete;
 };
 
 export namespace Instance {
-  export type GetNodes<NodeData> = () => Node<NodeData>[];
-  export type SetNodes<NodeData> = (
-    payload: Node<NodeData>[] | ((nodes: Node<NodeData>[]) => Node<NodeData>[])
+  export type GetNodes<NodeType extends Node = Node> = () => NodeType[];
+  export type SetNodes<NodeType extends Node = Node> = (
+    payload: NodeType[] | ((nodes: NodeType[]) => NodeType[])
   ) => void;
-  export type AddNodes<NodeData> = (payload: Node<NodeData>[] | Node<NodeData>) => void;
-  export type GetNode<NodeData> = (id: string) => Node<NodeData> | undefined;
-  export type GetEdges<EdgeData> = () => Edge<EdgeData>[];
-  export type SetEdges<EdgeData> = (
-    payload: Edge<EdgeData>[] | ((edges: Edge<EdgeData>[]) => Edge<EdgeData>[])
+  export type AddNodes<NodeType extends Node = Node> = (payload: NodeType[] | NodeType) => void;
+  export type GetNode<NodeType extends Node = Node> = (id: string) => NodeType | undefined;
+  export type GetEdges<EdgeType extends Edge = Edge> = () => EdgeType[];
+  export type SetEdges<EdgeType extends Edge = Edge> = (
+    payload: EdgeType[] | ((edges: EdgeType[]) => EdgeType[])
   ) => void;
-  export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
-  export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
-  export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
-  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => {
+  export type GetEdge<EdgeType extends Edge = Edge> = (id: string) => EdgeType | undefined;
+  export type AddEdges<EdgeType extends Edge = Edge> = (payload: EdgeType[] | EdgeType) => void;
+  export type ToObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = () => ReactFlowJsonObject<
+    NodeType,
+    EdgeType
+  >;
+  export type DeleteElements = (params: DeleteElementsOptions) => Promise<{
     deletedNodes: Node[];
     deletedEdges: Edge[];
-  };
-  export type GetIntersectingNodes<NodeData> = (
-    node: Node<NodeData> | { id: Node['id'] } | Rect,
+  }>;
+  export type GetIntersectingNodes<NodeType extends Node = Node> = (
+    node: NodeType | { id: Node['id'] } | Rect,
     partially?: boolean,
-    nodes?: Node<NodeData>[]
-  ) => Node<NodeData>[];
-  export type IsNodeIntersecting<NodeData> = (
-    node: Node<NodeData> | { id: Node['id'] } | Rect,
+    nodes?: NodeType[]
+  ) => NodeType[];
+  export type IsNodeIntersecting<NodeType extends Node = Node> = (
+    node: NodeType | { id: Node['id'] } | Rect,
     area: Rect,
     partially?: boolean
   ) => boolean;
@@ -46,32 +50,32 @@ export namespace Instance {
   export type getIncomers = (node: string | Node | { id: Node['id'] }) => Node[];
   export type getOutgoers = (node: string | Node | { id: Node['id'] }) => Node[];
 
-  export type UpdateNode = (
+  export type UpdateNode<NodeType extends Node = Node> = (
     id: string,
-    dataUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>),
     options?: { replace: boolean }
   ) => void;
-  export type UpdateNodeData = (
+  export type UpdateNodeData<NodeType extends Node = Node> = (
     id: string,
-    dataUpdate: object | ((node: Node) => object),
+    dataUpdate: object | ((node: NodeType) => object),
     options?: { replace: boolean }
   ) => void;
 }
 
-export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
-  getNodes: Instance.GetNodes<NodeData>;
-  setNodes: Instance.SetNodes<NodeData>;
-  addNodes: Instance.AddNodes<NodeData>;
-  getNode: Instance.GetNode<NodeData>;
-  getEdges: Instance.GetEdges<EdgeData>;
-  setEdges: Instance.SetEdges<EdgeData>;
-  addEdges: Instance.AddEdges<EdgeData>;
-  getEdge: Instance.GetEdge<EdgeData>;
-  toObject: Instance.ToObject<NodeData, EdgeData>;
+export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  getNodes: Instance.GetNodes<NodeType>;
+  setNodes: Instance.SetNodes<NodeType>;
+  addNodes: Instance.AddNodes<NodeType>;
+  getNode: Instance.GetNode<NodeType>;
+  getEdges: Instance.GetEdges<EdgeType>;
+  setEdges: Instance.SetEdges<EdgeType>;
+  addEdges: Instance.AddEdges<EdgeType>;
+  getEdge: Instance.GetEdge<EdgeType>;
+  toObject: Instance.ToObject<NodeType, EdgeType>;
   deleteElements: Instance.DeleteElements;
-  getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
-  isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
-  updateNode: Instance.UpdateNode;
-  updateNodeData: Instance.UpdateNodeData;
+  getIntersectingNodes: Instance.GetIntersectingNodes<NodeType>;
+  isNodeIntersecting: Instance.IsNodeIntersecting<NodeType>;
+  updateNode: Instance.UpdateNode<NodeType>;
+  updateNodeData: Instance.UpdateNodeData<NodeType>;
   viewportInitialized: boolean;
 } & Omit<ViewportHelperFunctions, 'initialized'>;
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 29548666..71bfb685 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -1,6 +1,13 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { NodeBase, XYPosition } from '@xyflow/system';
+import type { CoordinateExtent, NodeBase, NodeOrigin, OnError } from '@xyflow/system';
 
+import { NodeTypes } from './general';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ * The node data structure that gets used for the nodes prop.
+ * @public
+ */
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
   NodeType
@@ -8,39 +15,32 @@ export type Node<NodeData = any, NodeType extends string | undefined = string |
   style?: CSSProperties;
   className?: string;
   resizing?: boolean;
+  focusable?: boolean;
 };
 
 export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
 export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
 export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
 
-export type WrapNodeProps<NodeData = any> = Pick<
-  Node<NodeData>,
-  'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
-> &
-  Required<Pick<Node<NodeData>, 'selected' | 'type' | 'zIndex'>> & {
-    isConnectable: boolean;
-    xPos: number;
-    yPos: number;
-    xPosOrigin: number;
-    yPosOrigin: number;
-    positionAbsolute: XYPosition;
-    initialized: boolean;
-    isSelectable: boolean;
-    isDraggable: boolean;
-    isFocusable: boolean;
-    onClick?: NodeMouseHandler;
-    onDoubleClick?: NodeMouseHandler;
-    onMouseEnter?: NodeMouseHandler;
-    onMouseMove?: NodeMouseHandler;
-    onMouseLeave?: NodeMouseHandler;
-    onContextMenu?: NodeMouseHandler;
-    resizeObserver: ResizeObserver | null;
-    isParent: boolean;
-    noDragClassName: string;
-    noPanClassName: string;
-    rfId: string;
-    disableKeyboardA11y: boolean;
-    width?: number;
-    height?: number;
-  };
+export type NodeWrapperProps = {
+  id: string;
+  nodesConnectable: boolean;
+  elementsSelectable: boolean;
+  nodesDraggable: boolean;
+  nodesFocusable: boolean;
+  onClick?: NodeMouseHandler;
+  onDoubleClick?: NodeMouseHandler;
+  onMouseEnter?: NodeMouseHandler;
+  onMouseMove?: NodeMouseHandler;
+  onMouseLeave?: NodeMouseHandler;
+  onContextMenu?: NodeMouseHandler;
+  resizeObserver: ResizeObserver | null;
+  noDragClassName: string;
+  noPanClassName: string;
+  rfId: string;
+  disableKeyboardA11y: boolean;
+  nodeTypes?: NodeTypes;
+  nodeExtent?: CoordinateExtent;
+  nodeOrigin: NodeOrigin;
+  onError?: OnError;
+};
diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
index 5aebb99d..b138fc9d 100644
--- a/packages/react/src/types/store.ts
+++ b/packages/react/src/types/store.ts
@@ -24,7 +24,10 @@ import {
   type OnMoveEnd,
   type IsValidConnection,
   type UpdateConnection,
-  Connection,
+  type EdgeLookup,
+  type ConnectionLookup,
+  type NodeLookup,
+  OnBeforeDelete,
 } from '@xyflow/system';
 
 import type {
@@ -48,10 +51,10 @@ export type ReactFlowStore = {
   height: number;
   transform: Transform;
   nodes: Node[];
-  nodeLookup: Map<string, Node>;
+  nodeLookup: NodeLookup<Node>;
   edges: Edge[];
-  connectionLookup: Map<string, Map<string, Connection>>;
-
+  edgeLookup: EdgeLookup<Edge>;
+  connectionLookup: ConnectionLookup;
   onNodesChange: OnNodesChange | null;
   onEdgesChange: OnEdgesChange | null;
   hasDefaultNodes: boolean;
@@ -86,6 +89,7 @@ export type ReactFlowStore = {
   edgesUpdatable: boolean;
   elementsSelectable: boolean;
   elevateNodesOnSelect: boolean;
+  elevateEdgesOnSelect: boolean;
   selectNodesOnDrag: boolean;
 
   multiSelectionActive: boolean;
@@ -129,6 +133,7 @@ export type ReactFlowStore = {
   onViewportChangeStart?: OnViewportChange;
   onViewportChange?: OnViewportChange;
   onViewportChangeEnd?: OnViewportChange;
+  onBeforeDelete?: OnBeforeDelete;
 
   onSelectionChangeHandlers: OnSelectionChangeFunc[];
 
diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts
index c113ebe1..30d01e47 100644
--- a/packages/react/src/utils/changes.ts
+++ b/packages/react/src/utils/changes.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { Node, Edge, EdgeChange, NodeChange } from '../types';
+import type { Node, Edge, EdgeChange, NodeChange, NodeSelectionChange, EdgeSelectionChange } from '../types';
 
 export function handleParentExpand(res: any[], updateItem: any) {
   const parent = res.find((e) => e.id === updateItem.parentNode);
@@ -55,24 +55,27 @@ function applyChanges(changes: any[], elements: any[]): any[] {
   }
 
   let remainingChanges = changes;
-  const initElements: any[] = changes.filter((c) => c.type === 'add').map((c) => c.item);
+  const updatedElements: any[] = [];
 
-  return elements.reduce((res: any[], item: any) => {
+  for (const item of elements) {
     const nextChanges: any[] = [];
     const _remainingChanges: any[] = [];
 
-    remainingChanges.forEach((c) => {
-      if (c.id === item.id) {
+    for (const c of remainingChanges) {
+      if (c.type === 'add') {
+        updatedElements.push(c.item);
+      } else if (c.id === item.id) {
         nextChanges.push(c);
       } else {
         _remainingChanges.push(c);
       }
-    });
+    }
+
     remainingChanges = _remainingChanges;
 
     if (nextChanges.length === 0) {
-      res.push(item);
-      return res;
+      updatedElements.push(item);
+      continue;
     }
 
     const updateItem = { ...item };
@@ -101,7 +104,7 @@ function applyChanges(changes: any[], elements: any[]): any[] {
             }
 
             if (updateItem.expandParent) {
-              handleParentExpand(res, updateItem);
+              handleParentExpand(updatedElements, updateItem);
             }
             break;
           }
@@ -123,48 +126,97 @@ function applyChanges(changes: any[], elements: any[]): any[] {
             }
 
             if (updateItem.expandParent) {
-              handleParentExpand(res, updateItem);
+              handleParentExpand(updatedElements, updateItem);
             }
             break;
           }
           case 'remove': {
-            return res;
+            continue;
           }
         }
       }
+      updatedElements.push(updateItem);
     }
+  }
 
-    res.push(updateItem);
-    return res;
-  }, initElements);
+  return updatedElements;
 }
 
-export function applyNodeChanges<NodeData = any>(changes: NodeChange[], nodes: Node<NodeData>[]): Node<NodeData>[] {
-  return applyChanges(changes, nodes) as Node<NodeData>[];
+/**
+ * Drop in function that applies node changes to an array of nodes.
+ * @public
+ * @remarks Various events on the <ReactFlow /> component can produce an {@link NodeChange} that describes how to update the edges of your flow in some way.
+ If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
+ * @param changes - Array of changes to apply
+ * @param nodes - Array of nodes to apply the changes to
+ * @returns Array of updated nodes
+ * @example
+ *  const onNodesChange = useCallback(
+      (changes) => {
+        setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
+      },
+      [setNodes],
+    );
+  
+    return (
+      <ReactFLow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
+    );
+ */
+export function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange[], nodes: NodeType[]): NodeType[] {
+  return applyChanges(changes, nodes) as NodeType[];
 }
 
-export function applyEdgeChanges<EdgeData = any>(changes: EdgeChange[], edges: Edge<EdgeData>[]): Edge<EdgeData>[] {
-  return applyChanges(changes, edges) as Edge<EdgeData>[];
+/**
+ * Drop in function that applies edge changes to an array of edges.
+ * @public
+ * @remarks Various events on the <ReactFlow /> component can produce an {@link EdgeChange} that describes how to update the edges of your flow in some way.
+ If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.
+ * @param changes - Array of changes to apply
+ * @param edges - Array of edge to apply the changes to
+ * @returns Array of updated edges
+ * @example
+ *  const onEdgesChange = useCallback(
+      (changes) => {
+        setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));
+      },
+      [setEdges],
+    );
+  
+    return (
+      <ReactFLow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
+    );
+ */
+export function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange[], edges: EdgeType[]): EdgeType[] {
+  return applyChanges(changes, edges) as EdgeType[];
 }
 
-export const createSelectionChange = (id: string, selected: boolean) => ({
+export const createSelectionChange = (id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange => ({
   id,
   type: 'select',
   selected,
 });
 
-export function getSelectionChanges(items: any[], selectedIds: string[]) {
-  return items.reduce((res, item) => {
-    const willBeSelected = selectedIds.includes(item.id);
+export function getSelectionChanges(
+  items: any[],
+  selectedIds: Set<string> = new Set(),
+  mutateItem = false
+): NodeSelectionChange[] | EdgeSelectionChange[] {
+  const changes: NodeSelectionChange[] | EdgeSelectionChange[] = [];
 
-    if (!item.selected && willBeSelected) {
-      item.selected = true;
-      res.push(createSelectionChange(item.id, true));
-    } else if (item.selected && !willBeSelected) {
-      item.selected = false;
-      res.push(createSelectionChange(item.id, false));
+  for (const item of items) {
+    const willBeSelected = selectedIds.has(item.id);
+
+    // we don't want to set all items to selected=false on the first selection
+    if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
+      if (mutateItem) {
+        // this hack is needed for nodes. When the user dragged a node, it's selected.
+        // When another node gets dragged, we need to deselect the previous one,
+        // in order to have only one selected node at a time - the onNodesChange callback comes too late here :/
+        item.selected = willBeSelected;
+      }
+      changes.push(createSelectionChange(item.id, willBeSelected));
     }
+  }
 
-    return res;
-  }, []);
+  return changes;
 }
diff --git a/packages/react/src/utils/general.ts b/packages/react/src/utils/general.ts
index a106e182..5de3c3b2 100644
--- a/packages/react/src/utils/general.ts
+++ b/packages/react/src/utils/general.ts
@@ -10,10 +10,68 @@ import {
 
 import type { Edge, Node } from '../types';
 
+/**
+ * Test whether an object is useable as a Node
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Node
+ */
 export const isNode = isNodeBase<Node>;
+
+/**
+ * Test whether an object is useable as an Edge
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Edge
+ */
 export const isEdge = isEdgeBase<Edge>;
+
+/**
+ * Pass in a node, and get connected nodes where edge.source === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the source is the given node
+ */
 export const getOutgoers = getOutgoersBase<Node, Edge>;
+
+/**
+ * Pass in a node, and get connected nodes where edge.target === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the target is the given node
+ */
 export const getIncomers = getIncomersBase<Node, Edge>;
+
+/**
+ * This util is a convenience function to add a new Edge to an array of edges
+ * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
+ * @public
+ * @param edgeParams - Either an Edge or a Connection you want to add
+ * @param edges -  The array of all current edges
+ * @returns A new array of edges with the new edge added
+ */
 export const addEdge = addEdgeBase<Edge>;
+
+/**
+ * A handy utility to update an existing Edge with new properties
+ * @param oldEdge - The edge you want to update
+ * @param newConnection - The new connection you want to update the edge with
+ * @param edges - The array of all current edges
+ * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
+ * @returns the updated edges array
+ */
 export const updateEdge = updateEdgeBase<Edge>;
+
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param nodes - Nodes you want to get the connected edges for
+ * @param edges - All edges
+ * @returns Array of edges that connect any of the given nodes with each other
+ */
 export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 1a602f2f..3ad76c89 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,3 +1,23 @@
+# @xyflow/svelte
+
+## 0.0.31
+
+### Bugfix
+
+- fix edge rendering
+
+## 0.0.30
+
+### Features
+
+- add `onbeforedelete` handler to prevent/ manage deletions
+- TSDocs for hooks and some types 
+
+### Minor changes
+
+- new nodeDragThreshold default is 1
+- refactor/simplify edge rendering
+
 ## 0.0.29
 
 Another huge update for Svelte Flow 🙏 Handling data flows will be way easier with the new hooks and functions. You can now subscribe to connected nodes, receive data and update nodes more easily. We fix a big issue about the `<Handle />` component. No more `on:connect` that only worked for target `<Handle />` components but `onconnect` and `ondisconnect` that works for every `<Handle />`.
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 887b9084..6ea20c87 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index aad6d2b1..c68ea1d5 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -18,6 +18,7 @@
   export let target: $$Props['target'] = '';
   export let data: $$Props['data'] = {};
   export let style: $$Props['style'] = undefined;
+  export let zIndex: $$Props['zIndex'] = undefined;
 
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
@@ -95,42 +96,44 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
-  <g
-    class={cc(['svelte-flow__edge', className])}
-    class:animated
-    class:selected
-    data-id={id}
-    on:click={onClick}
-    on:contextmenu={onContextMenu}
-    aria-label={ariaLabel === null
-      ? undefined
-      : ariaLabel
-      ? ariaLabel
-      : `Edge from ${source} to ${target}`}
-    role="img"
-  >
-    <svelte:component
-      this={edgeComponent}
-      {id}
-      {source}
-      {target}
-      {sourceX}
-      {sourceY}
-      {targetX}
-      {targetY}
-      {sourcePosition}
-      {targetPosition}
-      {animated}
-      {selected}
-      {label}
-      {labelStyle}
-      {data}
-      {style}
-      {interactionWidth}
-      sourceHandleId={sourceHandle}
-      targetHandleId={targetHandle}
-      markerStart={markerStartUrl}
-      markerEnd={markerEndUrl}
-    />
-  </g>
+  <svg style:zIndex>
+    <g
+      class={cc(['svelte-flow__edge', className])}
+      class:animated
+      class:selected
+      data-id={id}
+      on:click={onClick}
+      on:contextmenu={onContextMenu}
+      aria-label={ariaLabel === null
+        ? undefined
+        : ariaLabel
+        ? ariaLabel
+        : `Edge from ${source} to ${target}`}
+      role="img"
+    >
+      <svelte:component
+        this={edgeComponent}
+        {id}
+        {source}
+        {target}
+        {sourceX}
+        {sourceY}
+        {targetX}
+        {targetY}
+        {sourcePosition}
+        {targetPosition}
+        {animated}
+        {selected}
+        {label}
+        {labelStyle}
+        {data}
+        {style}
+        {interactionWidth}
+        sourceHandleId={sourceHandle}
+        targetHandleId={targetHandle}
+        markerStart={markerStartUrl}
+        markerEnd={markerEndUrl}
+      />
+    </g>
+  </svg>
 {/if}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index d992c5a3..ae894066 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -191,7 +191,8 @@
       {dragging}
       {dragHandle}
       isConnectable={connectable}
-      positionAbsolute={{ x: positionX, y: positionY }}
+      positionAbsoluteX={positionX}
+      positionAbsoluteY={positionY}
       {width}
       {height}
     />
diff --git a/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
new file mode 100644
index 00000000..a0bcb347
--- /dev/null
+++ b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import portal from '$lib/actions/portal';
+  import { useStore } from '$lib/store';
+
+  type $$Props = {};
+
+  const { domNode } = useStore();
+</script>
+
+<div use:portal={{ target: '.svelte-flow__viewport-portal', domNode: $domNode }}>
+  <slot />
+</div>
diff --git a/packages/svelte/src/lib/components/ViewportPortal/index.ts b/packages/svelte/src/lib/components/ViewportPortal/index.ts
new file mode 100644
index 00000000..12da71c8
--- /dev/null
+++ b/packages/svelte/src/lib/components/ViewportPortal/index.ts
@@ -0,0 +1 @@
+export { default as ViewportPortal } from './ViewportPortal.svelte';
diff --git a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
index a0d2a15c..9f0f927a 100644
--- a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
@@ -18,10 +18,8 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsolute: $$Props['positionAbsolute'] = {
-    x: 0,
-    y: 0
-  };
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
@@ -33,7 +31,8 @@
   zIndex;
   dragging;
   dragHandle;
-  positionAbsolute;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
 
diff --git a/packages/svelte/src/lib/components/nodes/GroupNode.svelte b/packages/svelte/src/lib/components/nodes/GroupNode.svelte
index 22dd0754..bc41b0d9 100644
--- a/packages/svelte/src/lib/components/nodes/GroupNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/GroupNode.svelte
@@ -15,10 +15,8 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsolute: $$Props['positionAbsolute'] = {
-    x: 0,
-    y: 0
-  };
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
@@ -33,6 +31,7 @@
   zIndex;
   dragging;
   dragHandle;
-  positionAbsolute;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
diff --git a/packages/svelte/src/lib/components/nodes/InputNode.svelte b/packages/svelte/src/lib/components/nodes/InputNode.svelte
index a8a25eb8..0c7093df 100644
--- a/packages/svelte/src/lib/components/nodes/InputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/InputNode.svelte
@@ -18,10 +18,8 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsolute: $$Props['positionAbsolute'] = {
-    x: 0,
-    y: 0
-  };
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
@@ -34,7 +32,8 @@
   zIndex;
   dragging;
   dragHandle;
-  positionAbsolute;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
 
diff --git a/packages/svelte/src/lib/components/nodes/OutputNode.svelte b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
index 7fff504f..cfaf113e 100644
--- a/packages/svelte/src/lib/components/nodes/OutputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
@@ -18,7 +18,8 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let positionAbsolute: $$Props['positionAbsolute'] = { x: 0, y: 0 };
+  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
@@ -31,7 +32,8 @@
   zIndex;
   dragging;
   dragHandle;
-  positionAbsolute;
+  positionAbsoluteX;
+  positionAbsoluteY;
   isConnectable;
 </script>
 
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 27bc7d72..663b72ea 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -9,7 +9,7 @@
 
   const {
     elementsSelectable,
-    edgeTree,
+    visibleEdges,
     edges: { setDefaultOptions }
   } = useStore();
 
@@ -18,57 +18,47 @@
   });
 </script>
 
-{#each $edgeTree as group (group.level)}
-  <svg style="z-index: {group.level}" class="svelte-flow__edges">
-    {#if group.isMaxLevel} <MarkerDefinition />{/if}
-    <g>
-      {#each group.edges as edge (edge.id)}
-        {@const edgeType = edge.type || 'default'}
-        {@const selectable = !!(
-          edge.selectable ||
-          ($elementsSelectable && typeof edge.selectable === 'undefined')
-        )}
-
-        <EdgeWrapper
-          id={edge.id}
-          source={edge.source}
-          target={edge.target}
-          data={edge.data}
-          style={edge.style}
-          animated={edge.animated}
-          selected={edge.selected}
-          hidden={edge.hidden}
-          label={edge.label}
-          labelStyle={edge.labelStyle}
-          markerStart={edge.markerStart}
-          markerEnd={edge.markerEnd}
-          sourceHandle={edge.sourceHandle}
-          targetHandle={edge.targetHandle}
-          sourceX={edge.sourceX}
-          sourceY={edge.sourceY}
-          targetX={edge.targetX}
-          targetY={edge.targetY}
-          sourcePosition={edge.sourcePosition}
-          targetPosition={edge.targetPosition}
-          ariaLabel={edge.ariaLabel}
-          interactionWidth={edge.interactionWidth}
-          class={edge.class}
-          type={edgeType}
-          {selectable}
-          on:edgeclick
-          on:edgecontextmenu
-        />
-      {/each}
-    </g>
+<div class="svelte-flow__edges">
+  <svg class="svelte-flow__marker">
+    <MarkerDefinition />
   </svg>
-{/each}
 
-<style>
-  .svelte-flow__edges {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-</style>
+  {#each $visibleEdges as edge (edge.id)}
+    {@const edgeType = edge.type || 'default'}
+    {@const selectable = !!(
+      edge.selectable ||
+      ($elementsSelectable && typeof edge.selectable === 'undefined')
+    )}
+
+    <EdgeWrapper
+      id={edge.id}
+      source={edge.source}
+      target={edge.target}
+      data={edge.data}
+      style={edge.style}
+      animated={edge.animated}
+      selected={edge.selected}
+      hidden={edge.hidden}
+      label={edge.label}
+      labelStyle={edge.labelStyle}
+      markerStart={edge.markerStart}
+      markerEnd={edge.markerEnd}
+      sourceHandle={edge.sourceHandle}
+      targetHandle={edge.targetHandle}
+      sourceX={edge.sourceX}
+      sourceY={edge.sourceY}
+      targetX={edge.targetX}
+      targetY={edge.targetY}
+      sourcePosition={edge.sourcePosition}
+      targetPosition={edge.targetPosition}
+      ariaLabel={edge.ariaLabel}
+      interactionWidth={edge.interactionWidth}
+      class={edge.class}
+      type={edgeType}
+      zIndex={edge.zIndex}
+      {selectable}
+      on:edgeclick
+      on:edgecontextmenu
+    />
+  {/each}
+</div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 81aa81bd..2d2df3a6 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, hasContext } from 'svelte';
+  import { get } from 'svelte/store';
   import cc from 'classcat';
   import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
 
@@ -15,13 +16,7 @@
   import { Attribution } from '$lib/components/Attribution';
   import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
-  import {
-    updateStore,
-    updateStoreByKeys,
-    type UpdatableStoreProps,
-    getColorModeClass
-  } from './utils';
-  import { get } from 'svelte/store';
+  import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
   import { useColorModeClass } from '$lib/hooks/useColorModeClass';
 
   type $$Props = SvelteFlowProps;
@@ -81,6 +76,7 @@
   export let onconnect: $$Props['onconnect'] = undefined;
   export let onconnectstart: $$Props['onconnectstart'] = undefined;
   export let onconnectend: $$Props['onconnectend'] = undefined;
+  export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -158,7 +154,8 @@
       nodeDragThreshold,
       onconnect,
       onconnectstart,
-      onconnectend
+      onconnectend,
+      onbeforedelete
     };
 
     updateStoreByKeys(store, updatableProps);
@@ -218,6 +215,7 @@
           <slot name="connectionLine" slot="connectionLine" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
+        <div class="svelte-flow__viewport-portal" />
         <NodeRenderer
           on:nodeclick
           on:nodemouseenter
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 99361624..f25c8150 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -18,7 +18,8 @@ import type {
   ColorMode,
   OnConnect,
   OnConnectStart,
-  OnConnectEnd
+  OnConnectEnd,
+  OnBeforeDelete
 } from '@xyflow/system';
 
 import type {
@@ -93,6 +94,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveEnd?: OnMoveEnd;
   onerror?: OnError;
   ondelete?: OnDelete;
+  onbeforedelete?: OnBeforeDelete;
 
   onedgecreate?: OnEdgeCreate;
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index 497ccd14..2970f15c 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -1,6 +1,6 @@
 import type { SvelteFlowStore } from '$lib/store/types';
 import type { EdgeTypes, NodeTypes } from '$lib/types';
-import type { ColorMode, CoordinateExtent } from '@xyflow/system';
+import type { CoordinateExtent } from '@xyflow/system';
 import type { Writable } from 'svelte/store';
 
 // this is helper function for updating the store
@@ -69,6 +69,7 @@ export type UpdatableStoreProps = {
   onconnect?: UnwrapWritable<SvelteFlowStore['onconnect']>;
   onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
   onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
+  onbeforedelete?: UnwrapWritable<SvelteFlowStore['onbeforedelete']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
@@ -81,15 +82,3 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr
     }
   });
 }
-
-export function getColorModeClass(colorMode?: ColorMode) {
-  if (colorMode !== 'system') {
-    return colorMode;
-  }
-
-  if (!colorMode || typeof window === 'undefined' || !window.matchMedia) {
-    return 'light';
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
diff --git a/packages/svelte/src/lib/hooks/useColorModeClass.ts b/packages/svelte/src/lib/hooks/useColorModeClass.ts
index ad163a3f..07a9a824 100644
--- a/packages/svelte/src/lib/hooks/useColorModeClass.ts
+++ b/packages/svelte/src/lib/hooks/useColorModeClass.ts
@@ -9,6 +9,12 @@ function getMediaQuery() {
   return window.matchMedia('(prefers-color-scheme: dark)');
 }
 
+/**
+ * Hook for receiving the current color mode class 'dark' or 'light'.
+ *
+ * @internal
+ * @param colorMode - The color mode to use ('dark', 'light' or 'system')
+ */
 export function useColorModeClass(colorMode: ColorMode = 'light'): Readable<ColorModeClass> {
   const colorModeClass = readable<ColorModeClass>('light', (set) => {
     if (colorMode !== 'system') {
diff --git a/packages/svelte/src/lib/hooks/useConnection.ts b/packages/svelte/src/lib/hooks/useConnection.ts
index 6db9e735..967b4e51 100644
--- a/packages/svelte/src/lib/hooks/useConnection.ts
+++ b/packages/svelte/src/lib/hooks/useConnection.ts
@@ -3,6 +3,12 @@ import type { Readable } from 'svelte/store';
 import { useStore } from '$lib/store';
 import type { ConnectionProps } from '$lib/store/derived-connection-props';
 
+/**
+ * Hook for receiving the current connection.
+ *
+ * @public
+ * @returns current connection as a readable store
+ */
 export function useConnection(): Readable<ConnectionProps> {
   const { connection } = useStore();
 
diff --git a/packages/svelte/src/lib/hooks/useHandleConnections.ts b/packages/svelte/src/lib/hooks/useHandleConnections.ts
index c8df0dae..27e61c11 100644
--- a/packages/svelte/src/lib/hooks/useHandleConnections.ts
+++ b/packages/svelte/src/lib/hooks/useHandleConnections.ts
@@ -11,6 +11,15 @@ export type useHandleConnectionsParams = {
 
 const initialConnections: Connection[] = [];
 
+/**
+ *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ *
+ * @public
+ * @param param.nodeId
+ * @param param.type - handle type 'source' or 'target'
+ * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
+ * @returns an array with connections
+ */
 export function useHandleConnections({ nodeId, type, id = null }: useHandleConnectionsParams) {
   const { edges, connectionLookup } = useStore();
   let prevConnections: Map<string, Connection> | undefined = undefined;
diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts
index f50bc8b8..8e24645c 100644
--- a/packages/svelte/src/lib/hooks/useNodesData.ts
+++ b/packages/svelte/src/lib/hooks/useNodesData.ts
@@ -21,6 +21,14 @@ function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
   return true;
 }
 
+/**
+ * Hook for receiving data of one or multiple nodes
+ *
+ * @public
+ * @param nodeId - The id (or ids) of the node to get the data from
+ * @param guard - Optional guard function to narrow down the node type
+ * @returns A readable store with an array of data objects
+ */
 export function useNodesData<NodeType extends Node = Node>(
   nodeId: string
 ): Readable<NodeType['data'] | null>;
diff --git a/packages/svelte/src/lib/hooks/useNodesEdges.ts b/packages/svelte/src/lib/hooks/useNodesEdges.ts
index 64e953c4..062f596d 100644
--- a/packages/svelte/src/lib/hooks/useNodesEdges.ts
+++ b/packages/svelte/src/lib/hooks/useNodesEdges.ts
@@ -1,10 +1,22 @@
 import { useStore } from '$lib/store';
 
+/**
+ * Hook for getting the current nodes from the store.
+ *
+ * @public
+ * @returns store with an array of nodes
+ */
 export function useNodes() {
   const { nodes } = useStore();
   return nodes;
 }
 
+/**
+ * Hook for getting the current edges from the store.
+ *
+ * @public
+ * @returns store with an array of edges
+ */
 export function useEdges() {
   const { edges } = useStore();
   return edges;
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 6e66a998..ec370dbf 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -13,13 +13,20 @@ import {
   type Rect,
   getViewportForBounds,
   getElementsToRemove,
-  rendererPointToPoint
+  rendererPointToPoint,
+  type OnBeforeDelete
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 import type { Edge, FitViewOptions, Node } from '$lib/types';
 import { isNode } from '$lib/utils';
 
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns helper functions
+ */
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
   zoomOut: ZoomInOut;
@@ -42,8 +49,9 @@ export function useSvelteFlow(): {
   fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
   deleteElements: (
     nodesToRemove?: (Node | { id: Node['id'] })[],
-    edgesToRemove?: (Edge | { id: Edge['id'] })[]
-  ) => { deletedNodes: Node[]; deletedEdges: Edge[] };
+    edgesToRemove?: (Edge | { id: Edge['id'] })[],
+    onBeforeDelete?: OnBeforeDelete
+  ) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
@@ -63,6 +71,7 @@ export function useSvelteFlow(): {
     zoomIn,
     zoomOut,
     fitView,
+    onbeforedelete,
     snapGrid,
     viewport,
     width,
@@ -192,25 +201,29 @@ export function useSvelteFlow(): {
 
       return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     },
-    deleteElements: (
+    deleteElements: async (
       nodesToRemove: (Node | { id: Node['id'] })[] = [],
-      edgesToRemove: (Edge | { id: Edge['id'] })[] = []
+      edgesToRemove: (Edge | { id: Edge['id'] })[] = [],
+      onBeforeDelete?: OnBeforeDelete
     ) => {
-      const _nodes = get(nodes);
-      const _edges = get(edges);
-      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove,
         edgesToRemove,
-        nodes: _nodes,
-        edges: _edges
+        nodes: get(nodes),
+        edges: get(edges),
+        onBeforeDelete
       });
 
       if (matchingNodes) {
-        nodes.set(_nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)));
+        nodes.update((nds) =>
+          nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
+        );
       }
 
       if (matchingEdges) {
-        edges.set(_edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)));
+        edges.update((eds) =>
+          eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
+        );
       }
 
       return {
diff --git a/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts b/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
index dad8ed88..45a203eb 100644
--- a/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
+++ b/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
@@ -3,6 +3,12 @@ import type { UpdateNodeInternals } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 
+/**
+ * Hook for updating node internals.
+ *
+ * @public
+ * @returns function for updating node internals
+ */
 export function useUpdateNodeInternals(): UpdateNodeInternals {
   const { domNode, updateNodeDimensions } = useStore();
 
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 895793d2..dac580ca 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -6,6 +6,7 @@ export * from '$lib/container/SvelteFlow/types';
 export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
+export * from '$lib/components/ViewportPortal';
 export * from '$lib/components/BaseEdge';
 export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';
@@ -102,5 +103,6 @@ export {
   type GetStraightPathParams,
   getStraightPath,
   getViewportForBounds,
-  getNodesBounds
+  getNodesBounds,
+  internalsSymbol
 } from '@xyflow/system';
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 873d9b6f..75036a80 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -24,7 +24,7 @@ import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData }
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import type { SvelteFlowStore } from './types';
 import { syncNodeStores, syncEdgeStores, syncViewportStores } from './utils';
-import { getEdgeTree } from './edge-tree';
+import { getVisibleEdges } from './visible-edges';
 import { getVisibleNodes } from './visible-nodes';
 import { getDerivedConnectionProps } from './derived-connection-props';
 
@@ -208,18 +208,19 @@ export function createStore({
     }
   }
 
-  store.deleteKeyPressed.subscribe((deleteKeyPressed) => {
+  store.deleteKeyPressed.subscribe(async (deleteKeyPressed) => {
     if (deleteKeyPressed) {
       const nodes = get(store.nodes);
       const edges = get(store.edges);
       const selectedNodes = nodes.filter((node) => node.selected);
       const selectedEdges = edges.filter((edge) => edge.selected);
 
-      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove: selectedNodes,
         edgesToRemove: selectedEdges,
         nodes,
-        edges
+        edges,
+        onBeforeDelete: get(store.onbeforedelete)
       });
 
       if (matchingNodes.length || matchingEdges.length) {
@@ -357,8 +358,8 @@ export function createStore({
     ...store,
 
     // derived state
-    edgeTree: getEdgeTree(store),
     connection: getDerivedConnectionProps(store, currentConnection),
+    visibleEdges: getVisibleEdges(store),
     visibleNodes: getVisibleNodes(store),
     markers: derived(
       [store.edges, store.defaultMarkerColor, store.flowId],
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index 0691c202..01a40a9c 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -4,25 +4,26 @@ import {
   SelectionMode,
   ConnectionMode,
   ConnectionLineType,
+  devWarn,
+  adoptUserProvidedNodes,
+  getNodesBounds,
+  getViewportForBounds,
+  updateConnectionLookup,
   type SelectionRect,
   type SnapGrid,
   type MarkerProps,
   type PanZoomInstance,
   type CoordinateExtent,
   type IsValidConnection,
-  type GroupedEdges,
   type NodeOrigin,
   type OnError,
-  devWarn,
   type Viewport,
-  updateNodes,
-  getNodesBounds,
-  getViewportForBounds,
-  updateConnectionLookup,
   type ConnectionLookup,
   type OnConnect,
   type OnConnectStart,
-  type OnConnectEnd
+  type OnConnectEnd,
+  type NodeLookup,
+  type OnBeforeDelete
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -78,11 +79,13 @@ export const getInitialStore = ({
   fitView?: boolean;
 }) => {
   const nodeLookup = new Map();
-  const nextNodes = updateNodes(nodes, nodeLookup, {
+  const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false
   });
-  const connectionLookup = updateConnectionLookup(new Map(), edges);
+  const connectionLookup = new Map();
+  const edgeLookup = new Map();
+  updateConnectionLookup(connectionLookup, edgeLookup, edges);
 
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
@@ -95,17 +98,17 @@ export const getInitialStore = ({
   return {
     flowId: writable<string | null>(null),
     nodes: createNodesStore(nextNodes, nodeLookup),
-    nodeLookup: readable<Map<string, Node>>(nodeLookup),
+    nodeLookup: readable<NodeLookup>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
-    edges: createEdgesStore(edges, connectionLookup),
-    edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
+    edges: createEdgesStore(edges, connectionLookup, edgeLookup),
+    visibleEdges: readable<EdgeLayouted[]>([]),
     connectionLookup: readable<ConnectionLookup>(connectionLookup),
     height: writable<number>(500),
     width: writable<number>(500),
     minZoom: writable<number>(0.5),
     maxZoom: writable<number>(2),
     nodeOrigin: writable<NodeOrigin>([0, 0]),
-    nodeDragThreshold: writable<number>(0),
+    nodeDragThreshold: writable<number>(1),
     nodeExtent: writable<CoordinateExtent>(infiniteExtent),
     translateExtent: writable<CoordinateExtent>(infiniteExtent),
     autoPanOnNodeDrag: writable<boolean>(true),
@@ -146,6 +149,7 @@ export const getInitialStore = ({
     onedgecreate: writable<OnEdgeCreate>(undefined),
     onconnect: writable<OnConnect>(undefined),
     onconnectstart: writable<OnConnectStart>(undefined),
-    onconnectend: writable<OnConnectEnd>(undefined)
+    onconnectend: writable<OnConnectEnd>(undefined),
+    onbeforedelete: writable<OnBeforeDelete>(undefined)
   };
 };
diff --git a/packages/svelte/src/lib/store/utils.ts b/packages/svelte/src/lib/store/utils.ts
index b9292ca7..0f72d746 100644
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -1,17 +1,19 @@
 import {
   writable,
+  get,
   type Unsubscriber,
   type Subscriber,
   type Updater,
-  type Writable,
-  get
+  type Writable
 } from 'svelte/store';
 import {
-  updateNodes,
+  adoptUserProvidedNodes,
+  updateConnectionLookup,
   type Viewport,
   type PanZoomInstance,
   type ConnectionLookup,
-  updateConnectionLookup
+  type EdgeLookup,
+  type NodeLookup
 } from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
@@ -125,7 +127,7 @@ export type NodeStoreOptions = {
 // The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
 export const createNodesStore = (
   nodes: Node[],
-  nodeLookup: Map<string, Node>
+  nodeLookup: NodeLookup<Node>
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -139,7 +141,7 @@ export const createNodesStore = (
   let elevateNodesOnSelect = true;
 
   const _set = (nds: Node[]): Node[] => {
-    const nextNodes = updateNodes(nds, nodeLookup, {
+    const nextNodes = adoptUserProvidedNodes(nds, nodeLookup, {
       elevateNodesOnSelect,
       defaults
     });
@@ -175,6 +177,7 @@ export const createNodesStore = (
 export const createEdgesStore = (
   edges: Edge[],
   connectionLookup: ConnectionLookup,
+  edgeLookup: EdgeLookup<Edge>,
   defaultOptions?: DefaultEdgeOptions
 ): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
   const { subscribe, set, update } = writable<Edge[]>([]);
@@ -184,7 +187,7 @@ export const createEdgesStore = (
   const _set: typeof set = (eds: Edge[]) => {
     const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
 
-    updateConnectionLookup(connectionLookup, nextEdges);
+    updateConnectionLookup(connectionLookup, edgeLookup, nextEdges);
 
     value = nextEdges;
     set(value);
diff --git a/packages/svelte/src/lib/store/edge-tree.ts b/packages/svelte/src/lib/store/visible-edges.ts
similarity index 83%
rename from packages/svelte/src/lib/store/edge-tree.ts
rename to packages/svelte/src/lib/store/visible-edges.ts
index cd5448ab..d1b4a467 100644
--- a/packages/svelte/src/lib/store/edge-tree.ts
+++ b/packages/svelte/src/lib/store/visible-edges.ts
@@ -1,10 +1,10 @@
 import { derived } from 'svelte/store';
-import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition } from '@xyflow/system';
+import { isEdgeVisible, getEdgePosition, getElevatedEdgeZIndex } from '@xyflow/system';
 
 import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
-export function getEdgeTree(store: SvelteFlowStoreState) {
+export function getVisibleEdges(store: SvelteFlowStoreState) {
   const visibleEdges = derived(
     [
       store.edges,
@@ -64,6 +64,13 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
         if (edgePosition) {
           res.push({
             ...edge,
+            zIndex: getElevatedEdgeZIndex({
+              selected: edge.selected,
+              zIndex: edge.zIndex,
+              sourceNode,
+              targetNode,
+              elevateOnSelect: false
+            }),
             ...edgePosition
           });
         }
@@ -71,9 +78,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
         return res;
       }, []);
 
-      const groupedEdges = groupEdgesByZLevel<EdgeLayouted>(layoutedEdges, nodeLookup, false);
-
-      return groupedEdges;
+      return layoutedEdges;
     }
   );
 }
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index 3f1f0e8d..c99b201a 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -6,13 +6,12 @@ import type {
   DefaultEdgeOptionsBase,
   EdgePosition,
   SmoothStepPathOptions,
-  Optional,
   StepPathOptions
 } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
 
-export type DefaultEdge<EdgeData = any> = Omit<EdgeBase<EdgeData>, 'focusable'> & {
+export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
   label?: string;
   labelStyle?: string;
   style?: string;
@@ -34,12 +33,18 @@ type StepEdgeType<T> = DefaultEdge<T> & {
   pathOptions?: StepPathOptions;
 };
 
+/**
+ * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
+ */
 export type Edge<T = any> =
   | DefaultEdge<T>
   | SmoothStepEdgeType<T>
   | BezierEdgeType<T>
   | StepEdgeType<T>;
 
+/**
+ * Custom edge component props.
+ */
 export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
   EdgePosition & {
     markerStart?: string;
@@ -48,34 +53,52 @@ export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' |
     targetHandleId?: string | null;
   };
 
-export type EdgeComponentProps<T = any> = Optional<
-  Omit<
-    EdgeProps<T>,
-    'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data'
-  >,
-  'id'
->;
-
-export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: BezierPathOptions;
+/**
+ * Helper type for edge components that get exported by the library.
+ */
+export type EdgeComponentProps = EdgePosition & {
+  id?: EdgeProps['id'];
+  hidden?: EdgeProps['hidden'];
+  deletable?: EdgeProps['deletable'];
+  selectable?: EdgeProps['selectable'];
+  markerStart?: EdgeProps['markerStart'];
+  markerEnd?: EdgeProps['markerEnd'];
+  zIndex?: EdgeProps['zIndex'];
+  ariaLabel?: EdgeProps['ariaLabel'];
+  interactionWidth?: EdgeProps['interactionWidth'];
+  label?: EdgeProps['label'];
+  labelStyle?: EdgeProps['labelStyle'];
+  style?: EdgeProps['style'];
+  class?: EdgeProps['class'];
 };
 
-export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: SmoothStepPathOptions;
+export type EdgeComponentWithPathOptions<PathOptions> = EdgeComponentProps & {
+  pathOptions?: PathOptions;
 };
 
-export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
-  pathOptions?: StepPathOptions;
-};
+/**
+ * BezierEdge component props
+ */
+export type BezierEdgeProps = EdgeComponentWithPathOptions<BezierPathOptions>;
 
-export type StraightEdgeProps<T = any> = Omit<
-  EdgeComponentProps<T>,
-  'sourcePosition' | 'targetPosition'
->;
+/**
+ * SmoothStepEdge component props
+ */
+export type SmoothStepEdgeProps = EdgeComponentWithPathOptions<SmoothStepPathOptions>;
+
+/**
+ * StepEdge component props
+ */
+export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
+
+/**
+ * StraightEdge component props
+ */
+export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
 
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
-export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;
+export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
 
 export type EdgeLayouted = Pick<
   Edge,
@@ -98,6 +121,7 @@ export type EdgeLayouted = Pick<
   | 'ariaLabel'
   | 'hidden'
   | 'class'
+  | 'zIndex'
 > &
   EdgePosition & {
     sourceNode?: Node;
diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts
index 292ae4fa..4121754a 100644
--- a/packages/svelte/src/lib/types/nodes.ts
+++ b/packages/svelte/src/lib/types/nodes.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 import type { ComponentType, SvelteComponent } from 'svelte';
 import type { NodeBase, NodeProps } from '@xyflow/system';
 
-// @todo: currently the helper function only like Node from '@reactflow/core'
-// we need a base node type or helpes that accept Node like types
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ * The node data structure that gets used for the nodes prop.
+ * @public
+ */
 export type Node<
   NodeData = any,
   NodeType extends string | undefined = string | undefined
diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts
index 09769c62..bad572dc 100644
--- a/packages/svelte/src/lib/utils/index.ts
+++ b/packages/svelte/src/lib/utils/index.ts
@@ -10,10 +10,68 @@ import {
 
 import type { Edge, Node } from '$lib/types';
 
+/**
+ * Test whether an object is useable as a Node
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Node
+ */
 export const isNode = isNodeBase<Node>;
+
+/**
+ * Test whether an object is useable as an Edge
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Edge
+ */
 export const isEdge = isEdgeBase<Edge>;
+
+/**
+ * Pass in a node, and get connected nodes where edge.source === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the source is the given node
+ */
 export const getOutgoers = getOutgoersBase<Node, Edge>;
+
+/**
+ * Pass in a node, and get connected nodes where edge.target === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the target is the given node
+ */
 export const getIncomers = getIncomersBase<Node, Edge>;
+
+/**
+ * This util is a convenience function to add a new Edge to an array of edges
+ * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
+ * @public
+ * @param edgeParams - Either an Edge or a Connection you want to add
+ * @param edges -  The array of all current edges
+ * @returns A new array of edges with the new edge added
+ */
 export const addEdge = addEdgeBase<Edge>;
+
+/**
+ * A handy utility to update an existing Edge with new properties
+ * @param oldEdge - The edge you want to update
+ * @param newConnection - The new connection you want to update the edge with
+ * @param edges - The array of all current edges
+ * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
+ * @returns the updated edges array
+ */
 export const updateEdge = updateEdgeBase<Edge>;
+
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param nodes - Nodes you want to get the connected edges for
+ * @param edges - All edges
+ * @returns Array of edges that connect any of the given nodes with each other
+ */
 export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
diff --git a/packages/system/package.json b/packages/system/package.json
index 9eff995d..5ccb504c 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",
@@ -16,7 +16,7 @@
   ],
   "source": "src/index.ts",
   "main": "dist/umd/index.js",
-  "module": "dist/esm/index.mjs",
+  "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "exports": {
     ".": {
@@ -32,7 +32,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/wbkd/react-flow.git",
+    "url": "https://github.com/xyflow/xyflow.git",
     "directory": "packages/system"
   },
   "scripts": {
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 7b716a9d..261d9467 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -92,11 +92,6 @@
   outline: none;
 }
 
-.xy-flow .xy-flow__edges {
-  pointer-events: none;
-  overflow: visible;
-}
-
 .xy-flow__edge-path {
   stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
   stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
@@ -109,6 +104,10 @@
   fill: none;
 }
 
+.xy-flow__edges {
+  position: absolute;
+}
+
 .xy-flow__edge {
   pointer-events: visibleStroke;
   cursor: pointer;
@@ -296,6 +295,14 @@
   top: 0;
 }
 
+.xy-flow__viewport-portal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
 .xy-flow__minimap {
   background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));
 
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
index 880ebaf7..6cd4978d 100644
--- a/packages/system/src/styles/style.css
+++ b/packages/system/src/styles/style.css
@@ -43,6 +43,12 @@
   --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
+.xy-flow__edges svg {
+  overflow: visible;
+  position: absolute;
+  pointer-events: none;
+}
+
 .xy-flow__edge {
   &.updating {
     .xy-flow__edge-path {
diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts
index 65c8e641..c2318f0c 100644
--- a/packages/system/src/types/edges.ts
+++ b/packages/system/src/types/edges.ts
@@ -19,7 +19,6 @@ export type EdgeBase<EdgeData = any> = {
   zIndex?: number;
   ariaLabel?: string;
   interactionWidth?: number;
-  focusable?: boolean;
 };
 
 export type SmoothStepPathOptions = {
@@ -37,7 +36,7 @@ export type BezierPathOptions = {
 
 export type DefaultEdgeOptionsBase<EdgeType extends EdgeBase> = Omit<
   EdgeType,
-  'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
+  'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'selected'
 >;
 
 export enum ConnectionLineType {
@@ -77,3 +76,5 @@ export type EdgePosition = {
   sourcePosition: Position;
   targetPosition: Position;
 };
+
+export type EdgeLookup<EdgeType extends EdgeBase = EdgeBase> = Map<string, EdgeType>;
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index 1591cca4..5fe4a844 100644
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -141,3 +141,11 @@ export type ColorModeClass = 'light' | 'dark';
 export type ColorMode = ColorModeClass | 'system';
 
 export type ConnectionLookup = Map<string, Map<string, Connection>>;
+
+export type OnBeforeDelete = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
+  nodes,
+  edges,
+}: {
+  nodes: NodeType[];
+  edges: EdgeType[];
+}) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>;
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index b55f3f54..c96ee085 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -26,7 +26,6 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
   extent?: 'parent' | CoordinateExtent;
   expandParent?: boolean;
   ariaLabel?: string;
-  focusable?: boolean;
   origin?: NodeOrigin;
   handles?: NodeHandle[];
   computed?: {
@@ -40,6 +39,10 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
     z?: number;
     handleBounds?: NodeHandleBounds;
     isParent?: boolean;
+    /** Holds a reference to the original node object provided by the user
+     * (which may lack some fields, like `computed` or `[internalSymbol]`. Used
+     * as an optimization to avoid certain operations. */
+    userProvidedNode: NodeBase<T, U>;
   };
 };
 
@@ -52,7 +55,8 @@ export type NodeProps<T = any> = {
   selected: NodeBase['selected'];
   isConnectable: NodeBase['connectable'];
   zIndex: NodeBase['zIndex'];
-  positionAbsolute: XYPosition;
+  positionAbsoluteX: number;
+  positionAbsoluteY: number;
   width?: number;
   height?: number;
   dragging: boolean;
@@ -102,3 +106,5 @@ export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;
 export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
 
 export type Align = 'center' | 'start' | 'end';
+
+export type NodeLookup<NodeType extends NodeBase = NodeBase> = Map<string, NodeType>;
diff --git a/packages/system/src/utils/edges/bezier-edge.ts b/packages/system/src/utils/edges/bezier-edge.ts
index 810b07d7..640deffa 100644
--- a/packages/system/src/utils/edges/bezier-edge.ts
+++ b/packages/system/src/utils/edges/bezier-edge.ts
@@ -69,6 +69,29 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurva
   }
 }
 
+/**
+ * Get a bezier path from source to target handle
+ * @param params.sourceX - The x position of the source handle
+ * @param params.sourceY - The y position of the source handle
+ * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param params.targetX - The x position of the target handle
+ * @param params.targetY - The y position of the target handle
+ * @param params.targetPosition - The position of the target handle (default: Position.Top)
+ * @param params.curvature - The curvature of the bezier edge
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @example
+ *  const source = { x: 0, y: 20 };
+    const target = { x: 150, y: 100 };
+    
+    const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
+      sourceX: source.x,
+      sourceY: source.y,
+      sourcePosition: Position.Right,
+      targetX: target.x,
+      targetY: target.y,
+      targetPosition: Position.Left,
+});
+ */
 export function getBezierPath({
   sourceX,
   sourceY,
diff --git a/packages/system/src/utils/edges/general.ts b/packages/system/src/utils/edges/general.ts
index 9ffd8e24..14e73318 100644
--- a/packages/system/src/utils/edges/general.ts
+++ b/packages/system/src/utils/edges/general.ts
@@ -1,6 +1,6 @@
 import { Connection, Transform, errorMessages, internalsSymbol, isEdgeBase } from '../..';
 import { EdgeBase, NodeBase } from '../../types';
-import { isNumeric, getOverlappingArea, boxToRect, nodeToBox, getBoundsOfBoxes, devWarn } from '../general';
+import { getOverlappingArea, boxToRect, nodeToBox, getBoundsOfBoxes, devWarn } from '../general';
 
 // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
 export function getEdgeCenter({
@@ -23,63 +23,29 @@ export function getEdgeCenter({
   return [centerX, centerY, xOffset, yOffset];
 }
 
-const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
-
-export type GroupedEdges<EdgeType extends EdgeBase> = {
-  edges: EdgeType[];
-  level: number;
-  isMaxLevel: boolean;
+export type GetEdgeZIndexParams = {
+  sourceNode: NodeBase;
+  targetNode: NodeBase;
+  selected?: boolean;
+  zIndex?: number;
+  elevateOnSelect?: boolean;
 };
 
-export function groupEdgesByZLevel<EdgeType extends EdgeBase>(
-  edges: EdgeType[],
-  nodeLookup: Map<string, NodeBase>,
-  elevateEdgesOnSelect = false
-): GroupedEdges<EdgeType>[] {
-  let maxLevel = -1;
-
-  const levelLookup = edges.reduce<Record<string, EdgeType[]>>((tree, edge) => {
-    const hasZIndex = isNumeric(edge.zIndex);
-    let z = hasZIndex ? edge.zIndex! : 0;
-
-    if (elevateEdgesOnSelect) {
-      const targetNode = nodeLookup.get(edge.target);
-      const sourceNode = nodeLookup.get(edge.source);
-      const edgeOrConnectedNodeSelected = edge.selected || targetNode?.selected || sourceNode?.selected;
-      const selectedZIndex = Math.max(
-        sourceNode?.[internalsSymbol]?.z || 0,
-        targetNode?.[internalsSymbol]?.z || 0,
-        1000
-      );
-      z = (hasZIndex ? edge.zIndex! : 0) + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
-    }
-
-    if (tree[z]) {
-      tree[z].push(edge);
-    } else {
-      tree[z] = [edge];
-    }
-
-    maxLevel = z > maxLevel ? z : maxLevel;
-
-    return tree;
-  }, {});
-
-  const edgeTree = Object.entries(levelLookup).map(([key, edges]) => {
-    const level = +key;
-
-    return {
-      edges,
-      level,
-      isMaxLevel: level === maxLevel,
-    };
-  });
-
-  if (edgeTree.length === 0) {
-    return defaultEdgeTree;
+export function getElevatedEdgeZIndex({
+  sourceNode,
+  targetNode,
+  selected = false,
+  zIndex = 0,
+  elevateOnSelect = false,
+}: GetEdgeZIndexParams): number {
+  if (!elevateOnSelect) {
+    return zIndex;
   }
 
-  return edgeTree;
+  const edgeOrConnectedNodeSelected = selected || targetNode.selected || sourceNode.selected;
+  const selectedZIndex = Math.max(sourceNode[internalsSymbol]?.z || 0, targetNode[internalsSymbol]?.z || 0, 1000);
+
+  return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
 }
 
 type IsEdgeVisibleParams = {
@@ -124,6 +90,14 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
   );
 };
 
+/**
+ * This util is a convenience function to add a new Edge to an array of edges
+ * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
+ * @public
+ * @param edgeParams - Either an Edge or a Connection you want to add
+ * @param edges -  The array of all current edges
+ * @returns A new array of edges with the new edge added
+ */
 export const addEdgeBase = <EdgeType extends EdgeBase>(
   edgeParams: EdgeType | Connection,
   edges: EdgeType[]
@@ -163,6 +137,14 @@ export type UpdateEdgeOptions = {
   shouldReplaceId?: boolean;
 };
 
+/**
+ * A handy utility to update an existing Edge with new properties
+ * @param oldEdge - The edge you want to update
+ * @param newConnection - The new connection you want to update the edge with
+ * @param edges - The array of all current edges
+ * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
+ * @returns the updated edges array
+ */
 export const updateEdgeBase = <EdgeType extends EdgeBase>(
   oldEdge: EdgeType,
   newConnection: Connection,
diff --git a/packages/system/src/utils/edges/positions.ts b/packages/system/src/utils/edges/positions.ts
index 35e07834..59b8cd42 100644
--- a/packages/system/src/utils/edges/positions.ts
+++ b/packages/system/src/utils/edges/positions.ts
@@ -1,7 +1,7 @@
 import { EdgePosition } from '../../types/edges';
 import { ConnectionMode, OnError } from '../../types/general';
-import { NodeBase, NodeHandle, NodeHandleBounds } from '../../types/nodes';
-import { Position, Rect, XYPosition } from '../../types/utils';
+import { NodeBase, NodeHandle } from '../../types/nodes';
+import { Position } from '../../types/utils';
 import { errorMessages, internalsSymbol } from '../../constants';
 import { HandleElement } from '../../types';
 
@@ -15,21 +15,28 @@ export type GetEdgePositionParams = {
   onError?: OnError;
 };
 
-export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | null {
-  const [sourceNodeRect, sourceHandleBounds, isSourceValid] = getHandleDataByNode(params.sourceNode);
-  const [targetNodeRect, targetHandleBounds, isTargetValid] = getHandleDataByNode(params.targetNode);
+function isNodeInitialized(node: NodeBase): boolean {
+  return !!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) && !!(node?.computed?.width || node?.width);
+}
 
-  if (!isSourceValid || !isTargetValid) {
+export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | null {
+  const { sourceNode, targetNode } = params;
+
+  if (!isNodeInitialized(sourceNode) || !isNodeInitialized(targetNode)) {
     return null;
   }
 
-  // when connection type is loose we can define all handles as sources and connect source -> source
-  const targetNodeHandles =
+  const sourceHandleBounds = sourceNode[internalsSymbol]?.handleBounds || toHandleBounds(sourceNode.handles);
+  const targetHandleBounds = targetNode[internalsSymbol]?.handleBounds || toHandleBounds(targetNode.handles);
+
+  const sourceHandle = getHandle(sourceHandleBounds?.source ?? [], params.sourceHandle);
+  const targetHandle = getHandle(
+    // when connection type is loose we can define all handles as sources and connect source -> source
     params.connectionMode === ConnectionMode.Strict
-      ? targetHandleBounds!.target
-      : (targetHandleBounds!.target ?? []).concat(targetHandleBounds!.source ?? []);
-  const sourceHandle = getHandle(sourceHandleBounds!.source!, params.sourceHandle);
-  const targetHandle = getHandle(targetNodeHandles!, params.targetHandle);
+      ? targetHandleBounds?.target ?? []
+      : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
+    params.targetHandle
+  );
   const sourcePosition = sourceHandle?.position || Position.Bottom;
   const targetPosition = targetHandle?.position || Position.Top;
 
@@ -46,8 +53,8 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
     return null;
   }
 
-  const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
-  const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
+  const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
+  const [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
 
   return {
     sourceX,
@@ -64,79 +71,41 @@ function toHandleBounds(handles?: NodeHandle[]) {
     return null;
   }
 
-  return handles.reduce<NodeHandleBounds>(
-    (res, item) => {
-      item.width = item.width || 1;
-      item.height = item.height || 1;
+  const source = [];
+  const target = [];
 
-      if (item.type === 'source') {
-        res.source?.push(item as HandleElement);
-      }
+  for (const handle of handles) {
+    handle.width = handle.width || 1;
+    handle.height = handle.height || 1;
 
-      if (item.type === 'target') {
-        res.target?.push(item as HandleElement);
-      }
-
-      return res;
-    },
-    {
-      source: [],
-      target: [],
+    if (handle.type === 'source') {
+      source.push(handle as HandleElement);
+    } else if (handle.type === 'target') {
+      target.push(handle as HandleElement);
     }
-  );
+  }
+
+  return {
+    source,
+    target,
+  };
 }
 
-function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, boolean] {
-  const handleBounds = node?.[internalsSymbol]?.handleBounds || toHandleBounds(node?.handles) || null;
-  const nodeWidth = node?.computed?.width || node?.width;
-  const nodeHeight = node?.computed?.height || node?.height;
-
-  const isValid =
-    handleBounds &&
-    nodeWidth &&
-    nodeHeight &&
-    typeof node?.computed?.positionAbsolute?.x !== 'undefined' &&
-    typeof node?.computed?.positionAbsolute?.y !== 'undefined';
-
-  return [
-    {
-      x: node?.computed?.positionAbsolute?.x || 0,
-      y: node?.computed?.positionAbsolute?.y || 0,
-      width: nodeWidth || 0,
-      height: nodeHeight || 0,
-    },
-    handleBounds,
-    !!isValid,
-  ];
-}
-
-function getHandlePosition(position: Position, nodeRect: Rect, handle: HandleElement | null = null): XYPosition {
-  const x = (handle?.x || 0) + nodeRect.x;
-  const y = (handle?.y || 0) + nodeRect.y;
-  const width = handle?.width || nodeRect.width;
-  const height = handle?.height || nodeRect.height;
+function getHandlePosition(position: Position, node: NodeBase, handle: HandleElement | null = null): number[] {
+  const x = (handle?.x ?? 0) + (node.computed?.positionAbsolute?.x ?? 0);
+  const y = (handle?.y ?? 0) + (node.computed?.positionAbsolute?.y ?? 0);
+  const width = handle?.width || (node?.computed?.width ?? node?.width ?? 0);
+  const height = handle?.height || (node?.computed?.height ?? node?.height ?? 0);
 
   switch (position) {
     case Position.Top:
-      return {
-        x: x + width / 2,
-        y,
-      };
+      return [x + width / 2, y];
     case Position.Right:
-      return {
-        x: x + width,
-        y: y + height / 2,
-      };
+      return [x + width, y + height / 2];
     case Position.Bottom:
-      return {
-        x: x + width / 2,
-        y: y + height,
-      };
+      return [x + width / 2, y + height];
     case Position.Left:
-      return {
-        x,
-        y: y + height / 2,
-      };
+      return [x, y + height / 2];
   }
 }
 
diff --git a/packages/system/src/utils/edges/smoothstep-edge.ts b/packages/system/src/utils/edges/smoothstep-edge.ts
index ba3e95a9..40954457 100644
--- a/packages/system/src/utils/edges/smoothstep-edge.ts
+++ b/packages/system/src/utils/edges/smoothstep-edge.ts
@@ -190,6 +190,28 @@ function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): str
   return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
 }
 
+/**
+ * Get a smooth step path from source to target handle
+ * @param params.sourceX - The x position of the source handle
+ * @param params.sourceY - The y position of the source handle
+ * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param params.targetX - The x position of the target handle
+ * @param params.targetY - The y position of the target handle
+ * @param params.targetPosition - The position of the target handle (default: Position.Top)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @example
+ *  const source = { x: 0, y: 20 };
+    const target = { x: 150, y: 100 };
+    
+    const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
+      sourceX: source.x,
+      sourceY: source.y,
+      sourcePosition: Position.Right,
+      targetX: target.x,
+      targetY: target.y,
+      targetPosition: Position.Left,
+    });
+ */
 export function getSmoothStepPath({
   sourceX,
   sourceY,
diff --git a/packages/system/src/utils/edges/straight-edge.ts b/packages/system/src/utils/edges/straight-edge.ts
index 9cc6d928..9940bfea 100644
--- a/packages/system/src/utils/edges/straight-edge.ts
+++ b/packages/system/src/utils/edges/straight-edge.ts
@@ -7,6 +7,26 @@ export type GetStraightPathParams = {
   targetY: number;
 };
 
+/**
+ * Get a straight path from source to target handle
+ * @param params.sourceX - The x position of the source handle
+ * @param params.sourceY - The y position of the source handle
+ * @param params.targetX - The x position of the target handle
+ * @param params.targetY - The y position of the target handle
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @example
+ *  const source = { x: 0, y: 20 };
+    const target = { x: 150, y: 100 };
+    
+    const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({
+      sourceX: source.x,
+      sourceY: source.y,
+      sourcePosition: Position.Right,
+      targetX: target.x,
+      targetY: target.y,
+      targetPosition: Position.Left,
+    });
+ */
 export function getStraightPath({
   sourceX,
   sourceY,
diff --git a/packages/system/src/utils/general.ts b/packages/system/src/utils/general.ts
index 2db59322..bc8f4dfe 100644
--- a/packages/system/src/utils/general.ts
+++ b/packages/system/src/utils/general.ts
@@ -8,8 +8,8 @@ import type {
   NodeOrigin,
   SnapGrid,
   Transform,
-  Viewport,
 } from '../types';
+import { type Viewport } from '../types';
 import { getNodePositionWithOrigin } from './graph';
 
 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
@@ -19,8 +19,14 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
   y: clamp(position.y, extent[0][1], extent[1][1]),
 });
 
-// returns a number between 0 and 1 that represents the velocity of the movement
-// when the mouse is close to the edge of the canvas
+/**
+ * Calculates the velocity of panning when the mouse is close to the edge of the canvas
+ * @internal
+ * @param value - One dimensional poition of the mouse (x or y)
+ * @param min - Minimal position on canvas before panning starts
+ * @param max - Maximal position on canvas before panning starts
+ * @returns - A number between 0 and 1 that represents the velocity of panning
+ */
 const calcAutoPanVelocity = (value: number, min: number, max: number): number => {
   if (value < min) {
     return clamp(Math.abs(value - min), 1, 50) / 50;
@@ -127,12 +133,12 @@ export const getPositionWithOrigin = ({
   };
 };
 
-export function snapPosition(position: XYPosition, snapGrid: SnapGrid = [1, 1]): XYPosition {
+export const snapPosition = (position: XYPosition, snapGrid: SnapGrid = [1, 1]): XYPosition => {
   return {
     x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
     y: snapGrid[1] * Math.round(position.y / snapGrid[1]),
   };
-}
+};
 
 export const pointToRendererPoint = (
   { x, y }: XYPosition,
@@ -155,6 +161,22 @@ export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Tra
   };
 };
 
+/**
+ * Returns a viewport that encloses the given bounds with optional padding.
+ * @public
+ * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
+ * @param bounds - Bounds to fit inside viewport
+ * @param width - Width of the viewport
+ * @param height  - Height of the viewport
+ * @param minZoom - Minimum zoom level of the resulting viewport
+ * @param maxZoom - Maximum zoom level of the resulting viewport
+ * @param padding - Optional padding around the bounds
+ * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @example
+ * const { x, y, zoom } = getViewportForBounds(
+  { x: 0, y: 0, width: 100, height: 100},
+  1200, 800, 0.5, 2);
+ */
 export const getViewportForBounds = (
   bounds: Rect,
   width: number,
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index df815510..68024ce5 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -22,15 +22,38 @@ import {
   NodeDragItem,
   CoordinateExtent,
   OnError,
+  OnBeforeDelete,
 } from '../types';
 import { errorMessages } from '../constants';
 
+/**
+ * Test whether an object is useable as an Edge
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Edge
+ */
 export const isEdgeBase = <EdgeType extends EdgeBase = EdgeBase>(element: any): element is EdgeType =>
   'id' in element && 'source' in element && 'target' in element;
 
+/**
+ * Test whether an object is useable as a Node
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Node
+ */
 export const isNodeBase = <NodeType extends NodeBase = NodeBase>(element: any): element is NodeType =>
   'id' in element && !('source' in element) && !('target' in element);
 
+/**
+ * Pass in a node, and get connected nodes where edge.source === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the source is the given node
+ */
 export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType | { id: string },
   nodes: NodeType[],
@@ -50,6 +73,14 @@ export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType e
   return nodes.filter((n) => outgoerIds.has(n.id));
 };
 
+/**
+ * Pass in a node, and get connected nodes where edge.target === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the target is the given node
+ */
 export const getIncomersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType | { id: string },
   nodes: NodeType[],
@@ -102,6 +133,14 @@ export const getNodePositionWithOrigin = (
   };
 };
 
+/**
+ * Determines a bounding box that contains all given nodes in an array
+ * @public
+ * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
+ * @param nodes - Nodes to calculate the bounds for
+ * @param nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
+ * @returns Bounding box enclosing all nodes
+ */
 export const getNodesBounds = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   if (nodes.length === 0) {
     return { x: 0, y: 0, width: 0, height: 0 };
@@ -167,6 +206,12 @@ export const getNodesInside = <NodeType extends NodeBase>(
   return visibleNodes;
 };
 
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param nodes - Nodes you want to get the connected edges for
+ * @param edges - All edges
+ * @returns Array of edges that connect any of the given nodes with each other
+ */
 export const getConnectedEdgesBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   nodes: NodeType[],
   edges: EdgeType[]
@@ -281,48 +326,76 @@ export function calcNextPosition<NodeType extends NodeBase>(
   };
 }
 
-// helper function to get arrays of nodes and edges that can be deleted
-// you can pass in a list of nodes and edges that should be deleted
-// and the function only returns elements that are deletable and also handles connected nodes and child nodes
-export function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
-  nodesToRemove,
-  edgesToRemove,
+/**
+ * Pass in nodes & edges to delete, get arrays of nodes and edges that actually can be deleted
+ * @internal
+ * @param param.nodesToRemove - The nodes to remove
+ * @param param.edgesToRemove - The edges to remove
+ * @param param.nodes - All nodes
+ * @param param.edges - All edges
+ * @param param.onBeforeDelete - Callback to check which nodes and edges can be deleted
+ * @returns nodes: nodes that can be deleted, edges: edges that can be deleted
+ */
+export async function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
+  nodesToRemove = [],
+  edgesToRemove = [],
   nodes,
   edges,
+  onBeforeDelete,
 }: {
   nodesToRemove: Partial<NodeType>[];
   edgesToRemove: Partial<EdgeType>[];
   nodes: NodeType[];
   edges: EdgeType[];
-}): {
-  matchingNodes: NodeType[];
-  matchingEdges: EdgeType[];
-} {
+  onBeforeDelete?: OnBeforeDelete;
+}): Promise<{
+  nodes: NodeType[];
+  edges: EdgeType[];
+}> {
   const nodeIds = nodesToRemove.map((node) => node.id);
+  const matchingNodes: NodeType[] = [];
+
+  for (const node of nodes) {
+    if (node.deletable === false) {
+      continue;
+    }
+
+    const isIncluded = nodeIds.includes(node.id);
+    const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
+
+    if (isIncluded || parentHit) {
+      matchingNodes.push(node);
+    }
+  }
+
   const edgeIds = edgesToRemove.map((edge) => edge.id);
+  const deletableEdges = edges.filter((edge) => edge.deletable !== false);
+  const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+  const matchingEdges: EdgeType[] = connectedEdges;
 
-  const matchingNodes = nodes.reduce<NodeType[]>((res, node) => {
-    const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
-    const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
-    if (deletable && (nodeIds.includes(node.id) || parentHit)) {
-      res.push(node);
+  for (const edge of deletableEdges) {
+    const isIncluded = edgeIds.includes(edge.id);
+
+    if (isIncluded && !matchingEdges.find((e) => e.id === edge.id)) {
+      matchingEdges.push(edge);
     }
+  }
 
-    return res;
-  }, []);
-  const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
-  const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
-  const connectedEdges = getConnectedEdgesBase<NodeType, EdgeType>(matchingNodes, deletableEdges);
-  const matchingEdges = connectedEdges.reduce((res, edge) => {
-    if (!res.find((e) => e.id === edge.id)) {
-      res.push(edge);
-    }
+  if (!onBeforeDelete) {
+    return {
+      edges: matchingEdges,
+      nodes: matchingNodes,
+    };
+  }
 
-    return res;
-  }, initialHitEdges);
+  const onBeforeDeleteResult = await onBeforeDelete({
+    nodes: matchingNodes,
+    edges: matchingEdges,
+  });
 
-  return {
-    matchingEdges,
-    matchingNodes,
-  };
+  if (typeof onBeforeDeleteResult === 'boolean') {
+    return onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] };
+  }
+
+  return onBeforeDeleteResult;
 }
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 86434a72..8efb84c2 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -11,6 +11,7 @@ import {
   XYZPosition,
   ConnectionLookup,
   EdgeBase,
+  EdgeLookup,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
 import { isNumeric } from './general';
@@ -42,10 +43,13 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
         parentNode?.origin || nodeOrigin
       );
 
-      node.computed!.positionAbsolute = {
-        x,
-        y,
-      };
+      const positionChanged = x !== node.computed?.positionAbsolute?.x || y !== node.computed?.positionAbsolute?.y;
+      node.computed!.positionAbsolute = positionChanged
+        ? {
+            x,
+            y,
+          }
+        : node.computed?.positionAbsolute;
 
       node[internalsSymbol]!.z = z;
 
@@ -64,7 +68,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
   defaults?: Partial<NodeType>;
 };
 
-export function updateNodes<NodeType extends NodeBase>(
+export function adoptUserProvidedNodes<NodeType extends NodeBase>(
   nodes: NodeType[],
   nodeLookup: Map<string, NodeType>,
   options: UpdateNodesOptions<NodeType> = {
@@ -80,6 +84,11 @@ export function updateNodes<NodeType extends NodeBase>(
 
   const nextNodes = nodes.map((n) => {
     const currentStoreNode = tmpLookup.get(n.id);
+    if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode) {
+      nodeLookup.set(n.id, currentStoreNode);
+      return currentStoreNode;
+    }
+
     const node: NodeType = {
       ...options.defaults,
       ...n,
@@ -101,6 +110,7 @@ export function updateNodes<NodeType extends NodeBase>(
       value: {
         handleBounds: currInternals?.handleBounds,
         z,
+        userProvidedNode: n,
       },
     });
 
@@ -141,14 +151,14 @@ function calculateXYZPosition<NodeType extends NodeBase>(
   );
 }
 
-export function updateNodeDimensions(
+export function updateNodeDimensions<NodeType extends NodeBase>(
   updates: Map<string, NodeDimensionUpdate>,
-  nodes: NodeBase[],
-  nodeLookup: Map<string, NodeBase>,
+  nodes: NodeType[],
+  nodeLookup: Map<string, NodeType>,
   domNode: HTMLElement | null,
   nodeOrigin?: NodeOrigin,
   onUpdate?: (id: string, dimensions: Dimensions) => void
-): NodeBase[] | null {
+): NodeType[] | null {
   const viewportNode = domNode?.querySelector('.xyflow__viewport');
 
   if (!viewportNode) {
@@ -238,22 +248,22 @@ export function panBy({
   return transformChanged;
 }
 
-export function updateConnectionLookup(lookup: ConnectionLookup, edges: EdgeBase[]) {
-  lookup.clear();
+export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: EdgeBase[]) {
+  connectionLookup.clear();
+  edgeLookup.clear();
 
-  edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
-    if (source && target) {
-      const sourceKey = `${source}-source-${sourceHandle}`;
-      const targetKey = `${target}-target-${targetHandle}`;
+  for (const edge of edges) {
+    const { source, target, sourceHandle = null, targetHandle = null } = edge;
 
-      const prevSource = lookup.get(sourceKey) || new Map();
-      const prevTarget = lookup.get(targetKey) || new Map();
-      const connection = { source, target, sourceHandle, targetHandle };
+    const sourceKey = `${source}-source-${sourceHandle}`;
+    const targetKey = `${target}-target-${targetHandle}`;
 
-      lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
-      lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
-    }
-  });
+    const prevSource = connectionLookup.get(sourceKey) || new Map();
+    const prevTarget = connectionLookup.get(targetKey) || new Map();
+    const connection = { source, target, sourceHandle, targetHandle };
 
-  return lookup;
+    edgeLookup.set(edge.id, edge);
+    connectionLookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
+    connectionLookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
+  }
 }
diff --git a/packages/system/src/xyminimap/index.ts b/packages/system/src/xyminimap/index.ts
index 885679b8..7681253f 100644
--- a/packages/system/src/xyminimap/index.ts
+++ b/packages/system/src/xyminimap/index.ts
@@ -61,8 +61,7 @@ export function XYMinimap({ domNode, panZoom, getTransform, getViewScale }: XYMi
         return;
       }
 
-      // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
-      const moveScale = getViewScale() * Math.max(1, transform[2]) * (inversePan ? -1 : 1);
+      const moveScale = getViewScale() * Math.max(transform[2], Math.log(transform[2])) * (inversePan ? -1 : 1);
       const position = {
         x: transform[0] - event.sourceEvent.movementX * moveScale,
         y: transform[1] - event.sourceEvent.movementY * moveScale,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0286010e..d9086764 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,7 +149,7 @@ importers:
         version: registry.npmjs.org/typescript@5.2.2
       vite:
         specifier: 4.5.0
-        version: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+        version: registry.npmjs.org/vite@4.5.0
 
   examples/svelte:
     dependencies:
@@ -201,7 +201,7 @@ importers:
         version: registry.npmjs.org/typescript@5.2.2
       vite:
         specifier: ^4.5.0
-        version: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+        version: registry.npmjs.org/vite@4.5.0
 
   packages/react:
     dependencies:
@@ -214,9 +214,6 @@ importers:
       '@types/d3-selection':
         specifier: ^3.0.3
         version: registry.npmjs.org/@types/d3-selection@3.0.3
-      '@types/d3-zoom':
-        specifier: ^3.0.1
-        version: registry.npmjs.org/@types/d3-zoom@3.0.1
       '@xyflow/system':
         specifier: workspace:*
         version: link:../system
@@ -229,9 +226,6 @@ importers:
       d3-selection:
         specifier: ^3.0.0
         version: registry.npmjs.org/d3-selection@3.0.0
-      d3-zoom:
-        specifier: ^3.0.0
-        version: registry.npmjs.org/d3-zoom@3.0.0
       react-dom:
         specifier: '>=17'
         version: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
@@ -267,8 +261,8 @@ importers:
         specifier: ^8.4.21
         version: registry.npmjs.org/postcss@8.4.21
       postcss-cli:
-        specifier: ^10.1.0
-        version: registry.npmjs.org/postcss-cli@10.1.0(postcss@8.4.21)
+        specifier: ^11.0.0
+        version: 11.0.0(postcss@8.4.21)
       postcss-combine-duplicated-selectors:
         specifier: ^10.0.3
         version: registry.npmjs.org/postcss-combine-duplicated-selectors@10.0.3(postcss@8.4.21)
@@ -416,8 +410,8 @@ importers:
   tests/playwright:
     dependencies:
       '@playwright/experimental-ct-react':
-        specifier: ^1.39.0
-        version: registry.npmjs.org/@playwright/experimental-ct-react@1.39.0(@types/node@18.7.16)(vite@4.5.1)
+        specifier: ^1.40.1
+        version: 1.40.1(@types/node@18.7.16)(vite@5.0.10)
       '@types/react':
         specifier: ^18.2.31
         version: registry.npmjs.org/@types/react@18.2.31
@@ -435,8 +429,8 @@ importers:
         version: registry.npmjs.org/typescript@5.2.2
     devDependencies:
       '@playwright/test':
-        specifier: ^1.39.0
-        version: registry.npmjs.org/@playwright/test@1.39.0
+        specifier: ^1.40.1
+        version: 1.40.1
       '@types/node':
         specifier: ^18.7.16
         version: registry.npmjs.org/@types/node@18.7.16
@@ -487,6 +481,1986 @@ importers:
 
 packages:
 
+  /@ampproject/remapping@2.2.1:
+    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==, tarball: https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.20
+    dev: false
+
+  /@babel/code-frame@7.23.5:
+    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==, tarball: https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.23.4
+      chalk: 2.4.2
+    dev: false
+
+  /@babel/compat-data@7.23.5:
+    resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==, tarball: https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/core@7.23.7:
+    resolution: {integrity: sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==, tarball: https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.6
+      '@babel/helper-compilation-targets': 7.23.6
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7)
+      '@babel/helpers': 7.23.7
+      '@babel/parser': 7.23.6
+      '@babel/template': 7.22.15
+      '@babel/traverse': 7.23.7
+      '@babel/types': 7.23.6
+      convert-source-map: 2.0.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/generator@7.23.6:
+    resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==, tarball: https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.6
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.20
+      jsesc: 2.5.2
+    dev: false
+
+  /@babel/helper-compilation-targets@7.23.6:
+    resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==, tarball: https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.23.5
+      '@babel/helper-validator-option': 7.23.5
+      browserslist: 4.22.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: false
+
+  /@babel/helper-environment-visitor@7.22.20:
+    resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==, tarball: https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-function-name@7.23.0:
+    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==, tarball: https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.15
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/helper-hoist-variables@7.22.5:
+    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==, tarball: https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/helper-module-imports@7.22.15:
+    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==, tarball: https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.7):
+    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==, tarball: https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.7
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.20
+    dev: false
+
+  /@babel/helper-plugin-utils@7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==, tarball: https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-simple-access@7.22.5:
+    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==, tarball: https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/helper-split-export-declaration@7.22.6:
+    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==, tarball: https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/helper-string-parser@7.23.4:
+    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==, tarball: https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-validator-identifier@7.22.20:
+    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==, tarball: https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helper-validator-option@7.23.5:
+    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==, tarball: https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/helpers@7.23.7:
+    resolution: {integrity: sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==, tarball: https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.7.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.15
+      '@babel/traverse': 7.23.7
+      '@babel/types': 7.23.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/highlight@7.23.4:
+    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==, tarball: https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: false
+
+  /@babel/parser@7.23.6:
+    resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==, tarball: https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.7):
+    resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==, tarball: https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.7
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: false
+
+  /@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.7):
+    resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==, tarball: https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.7
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: false
+
+  /@babel/template@7.22.15:
+    resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==, tarball: https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      '@babel/parser': 7.23.6
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@babel/traverse@7.23.7:
+    resolution: {integrity: sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==, tarball: https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.6
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.23.6
+      '@babel/types': 7.23.6
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@babel/types@7.23.6:
+    resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==, tarball: https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
+    dev: false
+
+  /@colors/colors@1.5.0:
+    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==, tarball: https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz}
+    engines: {node: '>=0.1.90'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/aix-ppc64@0.19.11:
+    resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==, tarball: https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/android-arm64@0.18.20:
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-arm64@0.19.11:
+    resolution: {integrity: sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/android-arm64@0.19.5:
+    resolution: {integrity: sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/android-arm@0.18.20:
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==, tarball: https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-arm@0.19.11:
+    resolution: {integrity: sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==, tarball: https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/android-arm@0.19.5:
+    resolution: {integrity: sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==, tarball: https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/android-x64@0.18.20:
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==, tarball: https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/android-x64@0.19.11:
+    resolution: {integrity: sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==, tarball: https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/android-x64@0.19.5:
+    resolution: {integrity: sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==, tarball: https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/darwin-arm64@0.18.20:
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==, tarball: https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.19.11:
+    resolution: {integrity: sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==, tarball: https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/darwin-arm64@0.19.5:
+    resolution: {integrity: sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==, tarball: https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/darwin-x64@0.18.20:
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==, tarball: https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.19.11:
+    resolution: {integrity: sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==, tarball: https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/darwin-x64@0.19.5:
+    resolution: {integrity: sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==, tarball: https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.18.20:
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==, tarball: https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.19.11:
+    resolution: {integrity: sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==, tarball: https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.19.5:
+    resolution: {integrity: sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==, tarball: https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/freebsd-x64@0.18.20:
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==, tarball: https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.19.11:
+    resolution: {integrity: sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==, tarball: https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/freebsd-x64@0.19.5:
+    resolution: {integrity: sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==, tarball: https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-arm64@0.18.20:
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==, tarball: https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.19.11:
+    resolution: {integrity: sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==, tarball: https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-arm64@0.19.5:
+    resolution: {integrity: sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==, tarball: https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-arm@0.18.20:
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==, tarball: https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-arm@0.19.11:
+    resolution: {integrity: sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==, tarball: https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-arm@0.19.5:
+    resolution: {integrity: sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==, tarball: https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-ia32@0.18.20:
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==, tarball: https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.19.11:
+    resolution: {integrity: sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==, tarball: https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-ia32@0.19.5:
+    resolution: {integrity: sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==, tarball: https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-loong64@0.18.20:
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==, tarball: https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.19.11:
+    resolution: {integrity: sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==, tarball: https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-loong64@0.19.5:
+    resolution: {integrity: sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==, tarball: https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-mips64el@0.18.20:
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==, tarball: https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.19.11:
+    resolution: {integrity: sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==, tarball: https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-mips64el@0.19.5:
+    resolution: {integrity: sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==, tarball: https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-ppc64@0.18.20:
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==, tarball: https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.19.11:
+    resolution: {integrity: sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==, tarball: https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-ppc64@0.19.5:
+    resolution: {integrity: sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==, tarball: https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-riscv64@0.18.20:
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==, tarball: https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.19.11:
+    resolution: {integrity: sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==, tarball: https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-riscv64@0.19.5:
+    resolution: {integrity: sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==, tarball: https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-s390x@0.18.20:
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==, tarball: https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.19.11:
+    resolution: {integrity: sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==, tarball: https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-s390x@0.19.5:
+    resolution: {integrity: sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==, tarball: https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-x64@0.18.20:
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==, tarball: https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/linux-x64@0.19.11:
+    resolution: {integrity: sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==, tarball: https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/linux-x64@0.19.5:
+    resolution: {integrity: sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==, tarball: https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/netbsd-x64@0.18.20:
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==, tarball: https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.19.11:
+    resolution: {integrity: sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==, tarball: https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/netbsd-x64@0.19.5:
+    resolution: {integrity: sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==, tarball: https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/openbsd-x64@0.18.20:
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==, tarball: https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.19.11:
+    resolution: {integrity: sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==, tarball: https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/openbsd-x64@0.19.5:
+    resolution: {integrity: sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==, tarball: https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/sunos-x64@0.18.20:
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==, tarball: https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.19.11:
+    resolution: {integrity: sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==, tarball: https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/sunos-x64@0.19.5:
+    resolution: {integrity: sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==, tarball: https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/win32-arm64@0.18.20:
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==, tarball: https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.19.11:
+    resolution: {integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==, tarball: https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/win32-arm64@0.19.5:
+    resolution: {integrity: sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==, tarball: https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/win32-ia32@0.18.20:
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==, tarball: https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.19.11:
+    resolution: {integrity: sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==, tarball: https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/win32-ia32@0.19.5:
+    resolution: {integrity: sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==, tarball: https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/win32-x64@0.18.20:
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==, tarball: https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    optional: true
+
+  /@esbuild/win32-x64@0.19.11:
+    resolution: {integrity: sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==, tarball: https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@esbuild/win32-x64@0.19.5:
+    resolution: {integrity: sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==, tarball: https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==, tarball: https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.20
+    dev: false
+
+  /@jridgewell/resolve-uri@3.1.1:
+    resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==, tarball: https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==, tarball: https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==, tarball: https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz}
+    dev: false
+
+  /@jridgewell/trace-mapping@0.3.20:
+    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==, tarball: https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: false
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==, tarball: https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==, tarball: https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==, tarball: https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.16.0
+    dev: true
+
+  /@playwright/experimental-ct-core@1.40.1(@types/node@18.7.16):
+    resolution: {integrity: sha512-FjYQP74I2xVAO6W52+Yn2t48FDs+IhOHcWAwZHqAX+lHVHidz4f/b0FY3Qnq8+ZIt5TgqucEzGXbw/TdqJYDtA==, tarball: https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.40.1.tgz}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      playwright: 1.40.1
+      playwright-core: 1.40.1
+      vite: 4.5.1(@types/node@18.7.16)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - terser
+    dev: false
+
+  /@playwright/experimental-ct-react@1.40.1(@types/node@18.7.16)(vite@5.0.10):
+    resolution: {integrity: sha512-a2ubB04+pSswpWOgIwgBcSvvdvVNv4Cz8wud5ZLV5+4fcRqRACxFlGJPiVHw1zanhDSD+rH6H9+zaNm/o1iJHw==, tarball: https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.40.1.tgz}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      '@playwright/experimental-ct-core': 1.40.1(@types/node@18.7.16)
+      '@vitejs/plugin-react': 4.2.1(vite@5.0.10)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - vite
+    dev: false
+
+  /@playwright/test@1.40.1:
+    resolution: {integrity: sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==, tarball: https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      playwright: 1.40.1
+    dev: true
+
+  /@rollup/rollup-android-arm-eabi@4.9.2:
+    resolution: {integrity: sha512-RKzxFxBHq9ysZ83fn8Iduv3A283K7zPPYuhL/z9CQuyFrjwpErJx0h4aeb/bnJ+q29GRLgJpY66ceQ/Wcsn3wA==, tarball: https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.2.tgz}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.9.2:
+    resolution: {integrity: sha512-yZ+MUbnwf3SHNWQKJyWh88ii2HbuHCFQnAYTeeO1Nb8SyEiWASEi5dQUygt3ClHWtA9My9RQAYkjvrsZ0WK8Xg==, tarball: https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.2.tgz}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.9.2:
+    resolution: {integrity: sha512-vqJ/pAUh95FLc/G/3+xPqlSBgilPnauVf2EXOQCZzhZJCXDXt/5A8mH/OzU6iWhb3CNk5hPJrh8pqJUPldN5zw==, tarball: https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.2.tgz}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.9.2:
+    resolution: {integrity: sha512-otPHsN5LlvedOprd3SdfrRNhOahhVBwJpepVKUN58L0RnC29vOAej1vMEaVU6DadnpjivVsNTM5eNt0CcwTahw==, tarball: https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.2.tgz}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.9.2:
+    resolution: {integrity: sha512-ewG5yJSp+zYKBYQLbd1CUA7b1lSfIdo9zJShNTyc2ZP1rcPrqyZcNlsHgs7v1zhgfdS+kW0p5frc0aVqhZCiYQ==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.2.tgz}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.9.2:
+    resolution: {integrity: sha512-pL6QtV26W52aCWTG1IuFV3FMPL1m4wbsRG+qijIvgFO/VBsiXJjDPE/uiMdHBAO6YcpV4KvpKtd0v3WFbaxBtg==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.2.tgz}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.9.2:
+    resolution: {integrity: sha512-On+cc5EpOaTwPSNetHXBuqylDW+765G/oqB9xGmWU3npEhCh8xu0xqHGUA+4xwZLqBbIZNcBlKSIYfkBm6ko7g==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.2.tgz}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.9.2:
+    resolution: {integrity: sha512-Wnx/IVMSZ31D/cO9HSsU46FjrPWHqtdF8+0eyZ1zIB5a6hXaZXghUKpRrC4D5DcRTZOjml2oBhXoqfGYyXKipw==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.2.tgz}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.9.2:
+    resolution: {integrity: sha512-ym5x1cj4mUAMBummxxRkI4pG5Vht1QMsJexwGP8547TZ0sox9fCLDHw9KCH9c1FO5d9GopvkaJsBIOkTKxksdw==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.2.tgz}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.9.2:
+    resolution: {integrity: sha512-m0hYELHGXdYx64D6IDDg/1vOJEaiV8f1G/iO+tejvRCJNSwK4jJ15e38JQy5Q6dGkn1M/9KcyEOwqmlZ2kqaZg==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.2.tgz}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.9.2:
+    resolution: {integrity: sha512-x1CWburlbN5JjG+juenuNa4KdedBdXLjZMp56nHFSHTOsb/MI2DYiGzLtRGHNMyydPGffGId+VgjOMrcltOksA==, tarball: https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.2.tgz}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.9.2:
+    resolution: {integrity: sha512-VVzCB5yXR1QlfsH1Xw1zdzQ4Pxuzv+CPr5qpElpKhVxlxD3CRdfubAG9mJROl6/dmj5gVYDDWk8sC+j9BI9/kQ==, tarball: https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.2.tgz}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.9.2:
+    resolution: {integrity: sha512-SYRedJi+mweatroB+6TTnJYLts0L0bosg531xnQWtklOI6dezEagx4Q0qDyvRdK+qgdA3YZpjjGuPFtxBmddBA==, tarball: https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.2.tgz}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@sindresorhus/merge-streams@1.0.0:
+    resolution: {integrity: sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==, tarball: https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz}
+    engines: {node: '>=18'}
+    dev: true
+
+  /@swc/core-darwin-arm64@1.3.96:
+    resolution: {integrity: sha512-8hzgXYVd85hfPh6mJ9yrG26rhgzCmcLO0h1TIl8U31hwmTbfZLzRitFQ/kqMJNbIBCwmNH1RU2QcJnL3d7f69A==, tarball: https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-darwin-x64@1.3.96:
+    resolution: {integrity: sha512-mFp9GFfuPg+43vlAdQZl0WZpZSE8sEzqL7sr/7Reul5McUHP0BaLsEzwjvD035ESfkY8GBZdLpMinblIbFNljQ==, tarball: https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm-gnueabihf@1.3.96:
+    resolution: {integrity: sha512-8UEKkYJP4c8YzYIY/LlbSo8z5Obj4hqcv/fUTHiEePiGsOddgGf7AWjh56u7IoN/0uEmEro59nc1ChFXqXSGyg==, tarball: https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm64-gnu@1.3.96:
+    resolution: {integrity: sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==, tarball: https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-arm64-musl@1.3.96:
+    resolution: {integrity: sha512-i5/UTUwmJLri7zhtF6SAo/4QDQJDH2fhYJaBIUhrICmIkRO/ltURmpejqxsM/ye9Jqv5zG7VszMC0v/GYn/7BQ==, tarball: https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-x64-gnu@1.3.96:
+    resolution: {integrity: sha512-USdaZu8lTIkm4Yf9cogct/j5eqtdZqTgcTib4I+NloUW0E/hySou3eSyp3V2UAA1qyuC72ld1otXuyKBna0YKQ==, tarball: https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-linux-x64-musl@1.3.96:
+    resolution: {integrity: sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==, tarball: https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-arm64-msvc@1.3.96:
+    resolution: {integrity: sha512-hjGvvAduA3Un2cZ9iNP4xvTXOO4jL3G9iakhFsgVhpkU73SGmK7+LN8ZVBEu4oq2SUcHO6caWvnZ881cxGuSpg==, tarball: https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-ia32-msvc@1.3.96:
+    resolution: {integrity: sha512-Far2hVFiwr+7VPCM2GxSmbh3ikTpM3pDombE+d69hkedvYHYZxtTF+2LTKl/sXtpbUnsoq7yV/32c9R/xaaWfw==, tarball: https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@swc/core-win32-x64-msvc@1.3.96:
+    resolution: {integrity: sha512-4VbSAniIu0ikLf5mBX81FsljnfqjoVGleEkCQv4+zRlyZtO3FHoDPkeLVoy6WRlj7tyrRcfUJ4mDdPkbfTO14g==, tarball: https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.96.tgz}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@types/babel__core@7.20.5:
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==, tarball: https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@babel/types': 7.23.6
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.5
+    dev: false
+
+  /@types/babel__generator@7.6.8:
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==, tarball: https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@types/babel__template@7.4.4:
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==, tarball: https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz}
+    dependencies:
+      '@babel/parser': 7.23.6
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@types/babel__traverse@7.20.5:
+    resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==, tarball: https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz}
+    dependencies:
+      '@babel/types': 7.23.6
+    dev: false
+
+  /@types/yauzl@2.10.3:
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==, tarball: https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz}
+    requiresBuild: true
+    dependencies:
+      '@types/node': registry.npmjs.org/@types/node@18.7.16
+    dev: true
+    optional: true
+
+  /@vitejs/plugin-react@4.2.1(vite@5.0.10):
+    resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==, tarball: https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0
+    dependencies:
+      '@babel/core': 7.23.7
+      '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.7)
+      '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.14.0
+      vite: 5.0.10(@types/node@18.7.16)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==, tarball: https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz}
+    engines: {node: '>=8'}
+    dev: true
+
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==, tarball: https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: false
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==, tarball: https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: true
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==, tarball: https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==, tarball: https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz}
+    engines: {node: '>=8'}
+    dev: true
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==, tarball: https://registry.npmjs.org/braces/-/braces-3.0.2.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+    dev: true
+
+  /browserslist@4.22.2:
+    resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==, tarball: https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001572
+      electron-to-chromium: 1.4.617
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.22.2)
+    dev: false
+
+  /caniuse-lite@1.0.30001572:
+    resolution: {integrity: sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==, tarball: https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz}
+    dev: false
+
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==, tarball: https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: false
+
+  /chokidar@3.5.3:
+    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==, tarball: https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+    dev: true
+
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==, tarball: https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz}
+    dependencies:
+      color-name: 1.1.3
+    dev: false
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==, tarball: https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: true
+
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==, tarball: https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz}
+    dev: false
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==, tarball: https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz}
+    dev: true
+
+  /convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==, tarball: https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz}
+    dev: false
+
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==, tarball: https://registry.npmjs.org/debug/-/debug-4.3.4.tgz}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: false
+
+  /dependency-graph@0.11.0:
+    resolution: {integrity: sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==, tarball: https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
+  /electron-to-chromium@1.4.617:
+    resolution: {integrity: sha512-sYNE3QxcDS4ANW1k4S/wWYMXjCVcFSOX3Bg8jpuMFaXt/x8JCmp0R1Xe1ZXDX4WXnSRBf+GJ/3eGWicUuQq5cg==, tarball: https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.617.tgz}
+    dev: false
+
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==, tarball: https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz}
+    dev: true
+
+  /esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==, tarball: https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+
+  /esbuild@0.19.11:
+    resolution: {integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==, tarball: https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.19.11
+      '@esbuild/android-arm': 0.19.11
+      '@esbuild/android-arm64': 0.19.11
+      '@esbuild/android-x64': 0.19.11
+      '@esbuild/darwin-arm64': 0.19.11
+      '@esbuild/darwin-x64': 0.19.11
+      '@esbuild/freebsd-arm64': 0.19.11
+      '@esbuild/freebsd-x64': 0.19.11
+      '@esbuild/linux-arm': 0.19.11
+      '@esbuild/linux-arm64': 0.19.11
+      '@esbuild/linux-ia32': 0.19.11
+      '@esbuild/linux-loong64': 0.19.11
+      '@esbuild/linux-mips64el': 0.19.11
+      '@esbuild/linux-ppc64': 0.19.11
+      '@esbuild/linux-riscv64': 0.19.11
+      '@esbuild/linux-s390x': 0.19.11
+      '@esbuild/linux-x64': 0.19.11
+      '@esbuild/netbsd-x64': 0.19.11
+      '@esbuild/openbsd-x64': 0.19.11
+      '@esbuild/sunos-x64': 0.19.11
+      '@esbuild/win32-arm64': 0.19.11
+      '@esbuild/win32-ia32': 0.19.11
+      '@esbuild/win32-x64': 0.19.11
+    dev: false
+
+  /escalade@3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==, tarball: https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz}
+    engines: {node: '>=6'}
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==, tarball: https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
+  /fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==, tarball: https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
+  /fastq@1.16.0:
+    resolution: {integrity: sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==, tarball: https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz}
+    dependencies:
+      reusify: 1.0.4
+    dev: true
+
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==, tarball: https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
+  /fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==, tarball: https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+    dev: true
+
+  /fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, tarball: https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, tarball: https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==, tarball: https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==, tarball: https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: true
+
+  /get-stdin@9.0.0:
+    resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==, tarball: https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz}
+    engines: {node: '>=12'}
+    dev: true
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==, tarball: https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==, tarball: https://registry.npmjs.org/globals/-/globals-11.12.0.tgz}
+    engines: {node: '>=4'}
+    dev: false
+
+  /globby@14.0.0:
+    resolution: {integrity: sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==, tarball: https://registry.npmjs.org/globby/-/globby-14.0.0.tgz}
+    engines: {node: '>=18'}
+    dependencies:
+      '@sindresorhus/merge-streams': 1.0.0
+      fast-glob: 3.3.2
+      ignore: 5.3.0
+      path-type: 5.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.1.0
+    dev: true
+
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==, tarball: https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz}
+    dev: true
+
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==, tarball: https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz}
+    engines: {node: '>=4'}
+    dev: false
+
+  /ignore@5.3.0:
+    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==, tarball: https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==, tarball: https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==, tarball: https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==, tarball: https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==, tarball: https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==, tarball: https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, tarball: https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz}
+    dev: false
+
+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==, tarball: https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==, tarball: https://registry.npmjs.org/json5/-/json5-2.2.3.tgz}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: false
+
+  /jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==, tarball: https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
+  /lilconfig@3.0.0:
+    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==, tarball: https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz}
+    engines: {node: '>=14'}
+    dev: true
+
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==, tarball: https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz}
+    dependencies:
+      yallist: 3.1.1
+    dev: false
+
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==, tarball: https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /micromatch@4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==, tarball: https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+    dev: true
+
+  /ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==, tarball: https://registry.npmjs.org/ms/-/ms-2.1.2.tgz}
+    dev: false
+
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==, tarball: https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==, tarball: https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz}
+    dev: false
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==, tarball: https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-type@5.0.0:
+    resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==, tarball: https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz}
+    engines: {node: '>=12'}
+    dev: true
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==, tarball: https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==, tarball: https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==, tarball: https://registry.npmjs.org/pify/-/pify-2.3.0.tgz}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /playwright-core@1.40.1:
+    resolution: {integrity: sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==, tarball: https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  /playwright@1.40.1:
+    resolution: {integrity: sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==, tarball: https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      playwright-core: 1.40.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  /postcss-cli@11.0.0(postcss@8.4.21):
+    resolution: {integrity: sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==, tarball: https://registry.npmjs.org/postcss-cli/-/postcss-cli-11.0.0.tgz}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      chokidar: 3.5.3
+      dependency-graph: 0.11.0
+      fs-extra: 11.2.0
+      get-stdin: 9.0.0
+      globby: 14.0.0
+      picocolors: 1.0.0
+      postcss: registry.npmjs.org/postcss@8.4.21
+      postcss-load-config: 5.0.2(postcss@8.4.21)
+      postcss-reporter: 7.0.5(postcss@8.4.21)
+      pretty-hrtime: 1.0.3
+      read-cache: 1.0.0
+      slash: 5.1.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - jiti
+    dev: true
+
+  /postcss-load-config@5.0.2(postcss@8.4.21):
+    resolution: {integrity: sha512-Q8QR3FYbqOKa0bnC1UQ2bFq9/ulHX5Bi34muzitMr8aDtUelO5xKeJEYC/5smE0jNE9zdB/NBnOwXKexELbRlw==, tarball: https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.0.2.tgz}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+    dependencies:
+      lilconfig: 3.0.0
+      postcss: registry.npmjs.org/postcss@8.4.21
+      yaml: 2.3.4
+    dev: true
+
+  /postcss-reporter@7.0.5(postcss@8.4.21):
+    resolution: {integrity: sha512-glWg7VZBilooZGOFPhN9msJ3FQs19Hie7l5a/eE6WglzYqVeH3ong3ShFcp9kDWJT1g2Y/wd59cocf9XxBtkWA==, tarball: https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.5.tgz}
+    engines: {node: '>=10'}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      picocolors: 1.0.0
+      postcss: registry.npmjs.org/postcss@8.4.21
+      thenby: 1.3.4
+    dev: true
+
+  /postcss@8.4.32:
+    resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==, tarball: https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
+  /pretty-hrtime@1.0.3:
+    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==, tarball: https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, tarball: https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz}
+    dev: true
+
+  /react-refresh@0.14.0:
+    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==, tarball: https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==, tarball: https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz}
+    dependencies:
+      pify: 2.3.0
+    dev: true
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==, tarball: https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
+  /require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==, tarball: https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==, tarball: https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
+  /rollup@3.29.4:
+    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==, tarball: https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /rollup@4.9.2:
+    resolution: {integrity: sha512-66RB8OtFKUTozmVEh3qyNfH+b+z2RXBVloqO2KCC/pjFaGaHtxP9fVfOQKPSGXg2mElmjmxjW/fZ7iKrEpMH5Q==, tarball: https://registry.npmjs.org/rollup/-/rollup-4.9.2.tgz}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.9.2
+      '@rollup/rollup-android-arm64': 4.9.2
+      '@rollup/rollup-darwin-arm64': 4.9.2
+      '@rollup/rollup-darwin-x64': 4.9.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.9.2
+      '@rollup/rollup-linux-arm64-gnu': 4.9.2
+      '@rollup/rollup-linux-arm64-musl': 4.9.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.9.2
+      '@rollup/rollup-linux-x64-gnu': 4.9.2
+      '@rollup/rollup-linux-x64-musl': 4.9.2
+      '@rollup/rollup-win32-arm64-msvc': 4.9.2
+      '@rollup/rollup-win32-ia32-msvc': 4.9.2
+      '@rollup/rollup-win32-x64-msvc': 4.9.2
+      fsevents: 2.3.3
+    dev: false
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==, tarball: https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==, tarball: https://registry.npmjs.org/semver/-/semver-6.3.1.tgz}
+    hasBin: true
+    dev: false
+
+  /sharp@0.32.6:
+    resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==, tarball: https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz}
+    engines: {node: '>=14.15.0'}
+    requiresBuild: true
+    dependencies:
+      color: registry.npmjs.org/color@4.2.3
+      detect-libc: registry.npmjs.org/detect-libc@2.0.2
+      node-addon-api: registry.npmjs.org/node-addon-api@6.1.0
+      prebuild-install: registry.npmjs.org/prebuild-install@7.1.1
+      semver: registry.npmjs.org/semver@7.5.4
+      simple-get: registry.npmjs.org/simple-get@4.0.1
+      tar-fs: registry.npmjs.org/tar-fs@3.0.4
+      tunnel-agent: registry.npmjs.org/tunnel-agent@0.6.0
+    dev: false
+    optional: true
+
+  /slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==, tarball: https://registry.npmjs.org/slash/-/slash-5.1.0.tgz}
+    engines: {node: '>=14.16'}
+    dev: true
+
+  /source-map-js@1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==, tarball: https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz}
+    engines: {node: '>=0.10.0'}
+
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==, tarball: https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==, tarball: https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==, tarball: https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: false
+
+  /thenby@1.3.4:
+    resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==, tarball: https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz}
+    dev: true
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==, tarball: https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz}
+    engines: {node: '>=4'}
+    dev: false
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==, tarball: https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
+  /turbo-darwin-64@1.10.0:
+    resolution: {integrity: sha512-N0aVGFtBgOKd7pIdUiKREwnDhNHRIvpMJbmUw04c1AqEoTiKAKT6iuzcCozO5N/gYMVr0hxrXgLal5OLYXtcsw==, tarball: https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.10.0.tgz}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-darwin-arm64@1.10.0:
+    resolution: {integrity: sha512-boXzhaHTS5MsTMv48I/JmYp9/fYplXk5nACUDrqV6nD1hzO5PMn5wNg75ATbpkaMaeuD+hjuobeSxn1p4vpqQg==, tarball: https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.0.tgz}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-linux-64@1.10.0:
+    resolution: {integrity: sha512-crKQuS1jrp4vp+Th6EmUqqmAlvYNnzGmwWMLeckmYILrV7zAddu87eJu4hB7V6uV+W1qHZUTw8WXa1w1+8boBw==, tarball: https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.10.0.tgz}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-linux-arm64@1.10.0:
+    resolution: {integrity: sha512-Y2fhWe0xepLjl7doIvsJK7mp2h8E+OF6qJsUHRgxFeRWQWi1I6clD2aEQeykHK8Tp+qp8pKFMocj32nFBvuCcg==, tarball: https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.10.0.tgz}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-windows-64@1.10.0:
+    resolution: {integrity: sha512-uh8rEqH6teaHysEMjinwWBqyNwv4IvgSAwbq/OphP8jObstTYHoR+gFPo8RQUSTaBYy4QVszgi5eO5YLvEQqNA==, tarball: https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.10.0.tgz}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /turbo-windows-arm64@1.10.0:
+    resolution: {integrity: sha512-JaVj3iM7qyRD6xYGZLL/Gs4mQKfM1zL0f91AwHZLNkk1CrJ6i5kO4ZjhKkwXSpVOTNKW3sX0Q7dExXj85Vv7UQ==, tarball: https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.10.0.tgz}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /typescript@5.3.3:
+    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==, tarball: https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: false
+
+  /unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==, tarball: https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz}
+    engines: {node: '>=18'}
+    dev: true
+
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==, tarball: https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
+  /update-browserslist-db@1.0.13(browserslist@4.22.2):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==, tarball: https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.22.2
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: false
+
+  /vite@4.5.1(@types/node@18.7.16):
+    resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==, tarball: https://registry.npmjs.org/vite/-/vite-4.5.1.tgz}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': registry.npmjs.org/@types/node@18.7.16
+      esbuild: 0.18.20
+      postcss: 8.4.32
+      rollup: 3.29.4
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /vite@5.0.10(@types/node@18.7.16):
+    resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==, tarball: https://registry.npmjs.org/vite/-/vite-5.0.10.tgz}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': registry.npmjs.org/@types/node@18.7.16
+      esbuild: 0.19.11
+      postcss: 8.4.32
+      rollup: 4.9.2
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: false
+
+  /wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==, tarball: https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
+  /y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==, tarball: https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==, tarball: https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz}
+    dev: false
+
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==, tarball: https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==, tarball: https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz}
+    engines: {node: '>=12'}
+    dev: true
+
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==, tarball: https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz}
+    engines: {node: '>=12'}
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.1.1
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+    dev: true
+
   registry.npmjs.org/@aashutoshrathi/word-wrap@1.2.6:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz}
     name: '@aashutoshrathi/word-wrap'
@@ -1157,15 +3131,6 @@ packages:
       prettier: registry.npmjs.org/prettier@2.8.8
     dev: true
 
-  registry.npmjs.org/@colors/colors@1.5.0:
-    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz}
-    name: '@colors/colors'
-    version: 1.5.0
-    engines: {node: '>=0.1.90'}
-    requiresBuild: true
-    dev: true
-    optional: true
-
   registry.npmjs.org/@cypress/request@2.88.12:
     resolution: {integrity: sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz}
     name: '@cypress/request'
@@ -1225,468 +3190,6 @@ packages:
     engines: {node: '>17.0.0'}
     dev: false
 
-  registry.npmjs.org/@esbuild/android-arm64@0.18.20:
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz}
-    name: '@esbuild/android-arm64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/android-arm64@0.19.5:
-    resolution: {integrity: sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.5.tgz}
-    name: '@esbuild/android-arm64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/android-arm@0.18.20:
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz}
-    name: '@esbuild/android-arm'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/android-arm@0.19.5:
-    resolution: {integrity: sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.5.tgz}
-    name: '@esbuild/android-arm'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/android-x64@0.18.20:
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz}
-    name: '@esbuild/android-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/android-x64@0.19.5:
-    resolution: {integrity: sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.5.tgz}
-    name: '@esbuild/android-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/darwin-arm64@0.18.20:
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz}
-    name: '@esbuild/darwin-arm64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/darwin-arm64@0.19.5:
-    resolution: {integrity: sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.5.tgz}
-    name: '@esbuild/darwin-arm64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/darwin-x64@0.18.20:
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz}
-    name: '@esbuild/darwin-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/darwin-x64@0.19.5:
-    resolution: {integrity: sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.5.tgz}
-    name: '@esbuild/darwin-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/freebsd-arm64@0.18.20:
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz}
-    name: '@esbuild/freebsd-arm64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/freebsd-arm64@0.19.5:
-    resolution: {integrity: sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.5.tgz}
-    name: '@esbuild/freebsd-arm64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/freebsd-x64@0.18.20:
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz}
-    name: '@esbuild/freebsd-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/freebsd-x64@0.19.5:
-    resolution: {integrity: sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.5.tgz}
-    name: '@esbuild/freebsd-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-arm64@0.18.20:
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz}
-    name: '@esbuild/linux-arm64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-arm64@0.19.5:
-    resolution: {integrity: sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.5.tgz}
-    name: '@esbuild/linux-arm64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-arm@0.18.20:
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz}
-    name: '@esbuild/linux-arm'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-arm@0.19.5:
-    resolution: {integrity: sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.5.tgz}
-    name: '@esbuild/linux-arm'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-ia32@0.18.20:
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz}
-    name: '@esbuild/linux-ia32'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-ia32@0.19.5:
-    resolution: {integrity: sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.5.tgz}
-    name: '@esbuild/linux-ia32'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-loong64@0.18.20:
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz}
-    name: '@esbuild/linux-loong64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-loong64@0.19.5:
-    resolution: {integrity: sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.5.tgz}
-    name: '@esbuild/linux-loong64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-mips64el@0.18.20:
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz}
-    name: '@esbuild/linux-mips64el'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-mips64el@0.19.5:
-    resolution: {integrity: sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.5.tgz}
-    name: '@esbuild/linux-mips64el'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-ppc64@0.18.20:
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz}
-    name: '@esbuild/linux-ppc64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-ppc64@0.19.5:
-    resolution: {integrity: sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.5.tgz}
-    name: '@esbuild/linux-ppc64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-riscv64@0.18.20:
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz}
-    name: '@esbuild/linux-riscv64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-riscv64@0.19.5:
-    resolution: {integrity: sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.5.tgz}
-    name: '@esbuild/linux-riscv64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-s390x@0.18.20:
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz}
-    name: '@esbuild/linux-s390x'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-s390x@0.19.5:
-    resolution: {integrity: sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.5.tgz}
-    name: '@esbuild/linux-s390x'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-x64@0.18.20:
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz}
-    name: '@esbuild/linux-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/linux-x64@0.19.5:
-    resolution: {integrity: sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz}
-    name: '@esbuild/linux-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/netbsd-x64@0.18.20:
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz}
-    name: '@esbuild/netbsd-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/netbsd-x64@0.19.5:
-    resolution: {integrity: sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.5.tgz}
-    name: '@esbuild/netbsd-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/openbsd-x64@0.18.20:
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz}
-    name: '@esbuild/openbsd-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/openbsd-x64@0.19.5:
-    resolution: {integrity: sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.5.tgz}
-    name: '@esbuild/openbsd-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/sunos-x64@0.18.20:
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz}
-    name: '@esbuild/sunos-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/sunos-x64@0.19.5:
-    resolution: {integrity: sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.5.tgz}
-    name: '@esbuild/sunos-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/win32-arm64@0.18.20:
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz}
-    name: '@esbuild/win32-arm64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/win32-arm64@0.19.5:
-    resolution: {integrity: sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.5.tgz}
-    name: '@esbuild/win32-arm64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/win32-ia32@0.18.20:
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz}
-    name: '@esbuild/win32-ia32'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/win32-ia32@0.19.5:
-    resolution: {integrity: sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.5.tgz}
-    name: '@esbuild/win32-ia32'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  registry.npmjs.org/@esbuild/win32-x64@0.18.20:
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz}
-    name: '@esbuild/win32-x64'
-    version: 0.18.20
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/@esbuild/win32-x64@0.19.5:
-    resolution: {integrity: sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz}
-    name: '@esbuild/win32-x64'
-    version: 0.19.5
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
   registry.npmjs.org/@eslint-community/eslint-utils@4.4.0(eslint@8.43.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz}
     id: registry.npmjs.org/@eslint-community/eslint-utils/4.4.0
@@ -1756,7 +3259,7 @@ packages:
       debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
       espree: registry.npmjs.org/espree@9.6.1
       globals: registry.npmjs.org/globals@13.23.0
-      ignore: registry.npmjs.org/ignore@5.2.4
+      ignore: registry.npmjs.org/ignore@5.3.0
       import-fresh: registry.npmjs.org/import-fresh@3.3.0
       js-yaml: registry.npmjs.org/js-yaml@4.1.0
       minimatch: registry.npmjs.org/minimatch@3.1.2
@@ -1917,59 +3420,6 @@ packages:
       '@nodelib/fs.scandir': registry.npmjs.org/@nodelib/fs.scandir@2.1.5
       fastq: registry.npmjs.org/fastq@1.15.0
 
-  registry.npmjs.org/@playwright/experimental-ct-core@1.39.0(@types/node@18.7.16):
-    resolution: {integrity: sha512-1b/qrlB5A/CdEZns8f2RDkWFmSnGkNyec8n72iinmw07+GHsdMP8fIpazeFB0umxWfo+gPLhkjhTGdB3WXJTBw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.39.0.tgz}
-    id: registry.npmjs.org/@playwright/experimental-ct-core/1.39.0
-    name: '@playwright/experimental-ct-core'
-    version: 1.39.0
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      playwright: registry.npmjs.org/playwright@1.39.0
-      playwright-core: registry.npmjs.org/playwright-core@1.39.0
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - terser
-    dev: false
-
-  registry.npmjs.org/@playwright/experimental-ct-react@1.39.0(@types/node@18.7.16)(vite@4.5.1):
-    resolution: {integrity: sha512-6GaDVVo6x8P9Jdw3yPbVaEP59nesRsETn3kznHAy+2493VsP3IaVATat2G28z0Sivf/K9Tkh5xRYjiawN0ebgw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.39.0.tgz}
-    id: registry.npmjs.org/@playwright/experimental-ct-react/1.39.0
-    name: '@playwright/experimental-ct-react'
-    version: 1.39.0
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      '@playwright/experimental-ct-core': registry.npmjs.org/@playwright/experimental-ct-core@1.39.0(@types/node@18.7.16)
-      '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react@4.1.1(vite@4.5.1)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - vite
-    dev: false
-
-  registry.npmjs.org/@playwright/test@1.39.0:
-    resolution: {integrity: sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz}
-    name: '@playwright/test'
-    version: 1.39.0
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      playwright: registry.npmjs.org/playwright@1.39.0
-    dev: true
-
   registry.npmjs.org/@polka/url@1.0.0-next.23:
     resolution: {integrity: sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz}
     name: '@polka/url'
@@ -2175,7 +3625,7 @@ packages:
       sirv: registry.npmjs.org/sirv@2.0.3
       svelte: registry.npmjs.org/svelte@4.2.1
       undici: registry.npmjs.org/undici@5.23.0
-      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
+      vite: 4.5.1(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2206,7 +3656,7 @@ packages:
       svelte: registry.npmjs.org/svelte@4.2.2
       tiny-glob: registry.npmjs.org/tiny-glob@0.2.9
       undici: registry.npmjs.org/undici@5.26.5
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2245,7 +3695,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.1)
       debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
       svelte: registry.npmjs.org/svelte@4.2.1
-      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
+      vite: 4.5.1(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
 
@@ -2263,7 +3713,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.2)(vite@4.5.0)
       debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
       svelte: registry.npmjs.org/svelte@4.2.2
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2285,7 +3735,7 @@ packages:
       magic-string: registry.npmjs.org/magic-string@0.30.5
       svelte: registry.npmjs.org/svelte@4.2.1
       svelte-hmr: registry.npmjs.org/svelte-hmr@0.15.3(svelte@4.2.1)
-      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
+      vite: 4.5.1(@types/node@18.7.16)
       vitefu: registry.npmjs.org/vitefu@0.2.5(vite@4.5.1)
     transitivePeerDependencies:
       - supports-color
@@ -2307,122 +3757,12 @@ packages:
       magic-string: registry.npmjs.org/magic-string@0.30.5
       svelte: registry.npmjs.org/svelte@4.2.2
       svelte-hmr: registry.npmjs.org/svelte-hmr@0.15.3(svelte@4.2.2)
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
       vitefu: registry.npmjs.org/vitefu@0.2.5(vite@4.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@swc/core-darwin-arm64@1.3.96:
-    resolution: {integrity: sha512-8hzgXYVd85hfPh6mJ9yrG26rhgzCmcLO0h1TIl8U31hwmTbfZLzRitFQ/kqMJNbIBCwmNH1RU2QcJnL3d7f69A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.96.tgz}
-    name: '@swc/core-darwin-arm64'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-darwin-x64@1.3.96:
-    resolution: {integrity: sha512-mFp9GFfuPg+43vlAdQZl0WZpZSE8sEzqL7sr/7Reul5McUHP0BaLsEzwjvD035ESfkY8GBZdLpMinblIbFNljQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.96.tgz}
-    name: '@swc/core-darwin-x64'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-linux-arm-gnueabihf@1.3.96:
-    resolution: {integrity: sha512-8UEKkYJP4c8YzYIY/LlbSo8z5Obj4hqcv/fUTHiEePiGsOddgGf7AWjh56u7IoN/0uEmEro59nc1ChFXqXSGyg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.96.tgz}
-    name: '@swc/core-linux-arm-gnueabihf'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-linux-arm64-gnu@1.3.96:
-    resolution: {integrity: sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.96.tgz}
-    name: '@swc/core-linux-arm64-gnu'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-linux-arm64-musl@1.3.96:
-    resolution: {integrity: sha512-i5/UTUwmJLri7zhtF6SAo/4QDQJDH2fhYJaBIUhrICmIkRO/ltURmpejqxsM/ye9Jqv5zG7VszMC0v/GYn/7BQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.96.tgz}
-    name: '@swc/core-linux-arm64-musl'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-linux-x64-gnu@1.3.96:
-    resolution: {integrity: sha512-USdaZu8lTIkm4Yf9cogct/j5eqtdZqTgcTib4I+NloUW0E/hySou3eSyp3V2UAA1qyuC72ld1otXuyKBna0YKQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.96.tgz}
-    name: '@swc/core-linux-x64-gnu'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-linux-x64-musl@1.3.96:
-    resolution: {integrity: sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.96.tgz}
-    name: '@swc/core-linux-x64-musl'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-win32-arm64-msvc@1.3.96:
-    resolution: {integrity: sha512-hjGvvAduA3Un2cZ9iNP4xvTXOO4jL3G9iakhFsgVhpkU73SGmK7+LN8ZVBEu4oq2SUcHO6caWvnZ881cxGuSpg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.96.tgz}
-    name: '@swc/core-win32-arm64-msvc'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-win32-ia32-msvc@1.3.96:
-    resolution: {integrity: sha512-Far2hVFiwr+7VPCM2GxSmbh3ikTpM3pDombE+d69hkedvYHYZxtTF+2LTKl/sXtpbUnsoq7yV/32c9R/xaaWfw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.96.tgz}
-    name: '@swc/core-win32-ia32-msvc'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/@swc/core-win32-x64-msvc@1.3.96:
-    resolution: {integrity: sha512-4VbSAniIu0ikLf5mBX81FsljnfqjoVGleEkCQv4+zRlyZtO3FHoDPkeLVoy6WRlj7tyrRcfUJ4mDdPkbfTO14g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.96.tgz}
-    name: '@swc/core-win32-x64-msvc'
-    version: 1.3.96
-    engines: {node: '>=10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   registry.npmjs.org/@swc/core@1.3.96:
     resolution: {integrity: sha512-zwE3TLgoZwJfQygdv2SdCK9mRLYluwDOM53I+dT6Z5ZvrgVENmY3txvWDvduzkV+/8IuvrRbVezMpxcojadRdQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@swc/core/-/core-1.3.96.tgz}
     name: '@swc/core'
@@ -2438,16 +3778,16 @@ packages:
       '@swc/counter': registry.npmjs.org/@swc/counter@0.1.2
       '@swc/types': registry.npmjs.org/@swc/types@0.1.5
     optionalDependencies:
-      '@swc/core-darwin-arm64': registry.npmjs.org/@swc/core-darwin-arm64@1.3.96
-      '@swc/core-darwin-x64': registry.npmjs.org/@swc/core-darwin-x64@1.3.96
-      '@swc/core-linux-arm-gnueabihf': registry.npmjs.org/@swc/core-linux-arm-gnueabihf@1.3.96
-      '@swc/core-linux-arm64-gnu': registry.npmjs.org/@swc/core-linux-arm64-gnu@1.3.96
-      '@swc/core-linux-arm64-musl': registry.npmjs.org/@swc/core-linux-arm64-musl@1.3.96
-      '@swc/core-linux-x64-gnu': registry.npmjs.org/@swc/core-linux-x64-gnu@1.3.96
-      '@swc/core-linux-x64-musl': registry.npmjs.org/@swc/core-linux-x64-musl@1.3.96
-      '@swc/core-win32-arm64-msvc': registry.npmjs.org/@swc/core-win32-arm64-msvc@1.3.96
-      '@swc/core-win32-ia32-msvc': registry.npmjs.org/@swc/core-win32-ia32-msvc@1.3.96
-      '@swc/core-win32-x64-msvc': registry.npmjs.org/@swc/core-win32-x64-msvc@1.3.96
+      '@swc/core-darwin-arm64': 1.3.96
+      '@swc/core-darwin-x64': 1.3.96
+      '@swc/core-linux-arm-gnueabihf': 1.3.96
+      '@swc/core-linux-arm64-gnu': 1.3.96
+      '@swc/core-linux-arm64-musl': 1.3.96
+      '@swc/core-linux-x64-gnu': 1.3.96
+      '@swc/core-linux-x64-musl': 1.3.96
+      '@swc/core-win32-arm64-msvc': 1.3.96
+      '@swc/core-win32-ia32-msvc': 1.3.96
+      '@swc/core-win32-x64-msvc': 1.3.96
     dev: true
 
   registry.npmjs.org/@swc/counter@0.1.2:
@@ -2872,6 +4212,7 @@ packages:
     resolution: {integrity: sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz}
     name: '@types/node'
     version: 18.7.16
+    requiresBuild: true
 
   registry.npmjs.org/@types/normalize-package-data@2.4.3:
     resolution: {integrity: sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.3.tgz}
@@ -2966,12 +4307,6 @@ packages:
     version: 6.2.5
     dev: true
 
-  registry.npmjs.org/@types/semver@7.5.4:
-    resolution: {integrity: sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz}
-    name: '@types/semver'
-    version: 7.5.4
-    dev: true
-
   registry.npmjs.org/@types/semver@7.5.6:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz}
     name: '@types/semver'
@@ -3002,16 +4337,6 @@ packages:
     version: 3.0.1
     dev: false
 
-  registry.npmjs.org/@types/yauzl@2.10.3:
-    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz}
-    name: '@types/yauzl'
-    version: 2.10.3
-    requiresBuild: true
-    dependencies:
-      '@types/node': registry.npmjs.org/@types/node@18.7.16
-    dev: true
-    optional: true
-
   registry.npmjs.org/@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@5.1.3):
     resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.0.tgz}
     id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.60.0
@@ -3381,7 +4706,7 @@ packages:
     dependencies:
       '@eslint-community/eslint-utils': registry.npmjs.org/@eslint-community/eslint-utils@4.4.0(eslint@8.43.0)
       '@types/json-schema': registry.npmjs.org/@types/json-schema@7.0.15
-      '@types/semver': registry.npmjs.org/@types/semver@7.5.4
+      '@types/semver': registry.npmjs.org/@types/semver@7.5.6
       '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@5.60.0
       '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@5.60.0
       '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@5.60.0(typescript@5.1.3)
@@ -3482,7 +4807,7 @@ packages:
       vite: ^4
     dependencies:
       '@swc/core': registry.npmjs.org/@swc/core@1.3.96
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -3501,7 +4826,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': registry.npmjs.org/@babel/plugin-transform-react-jsx-source@7.22.5(@babel/core@7.23.2)
       '@types/babel__core': registry.npmjs.org/@types/babel__core@7.20.4
       react-refresh: registry.npmjs.org/react-refresh@0.14.0
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3520,7 +4845,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': registry.npmjs.org/@babel/plugin-transform-react-jsx-source@7.22.5(@babel/core@7.23.2)
       '@types/babel__core': registry.npmjs.org/@types/babel__core@7.20.4
       react-refresh: registry.npmjs.org/react-refresh@0.14.0
-      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
+      vite: 4.5.1(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -3851,13 +5176,13 @@ packages:
       undici: registry.npmjs.org/undici@5.26.5
       unist-util-visit: registry.npmjs.org/unist-util-visit@4.1.2
       vfile: registry.npmjs.org/vfile@5.3.7
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
       vitefu: registry.npmjs.org/vitefu@0.2.5(vite@4.5.0)
       which-pm: registry.npmjs.org/which-pm@2.1.1
       yargs-parser: registry.npmjs.org/yargs-parser@21.1.1
       zod: registry.npmjs.org/zod@3.21.1
     optionalDependencies:
-      sharp: registry.npmjs.org/sharp@0.32.6
+      sharp: 0.32.6
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4296,7 +5621,7 @@ packages:
       normalize-path: registry.npmjs.org/normalize-path@3.0.0
       readdirp: registry.npmjs.org/readdirp@3.6.0
     optionalDependencies:
-      fsevents: registry.npmjs.org/fsevents@2.3.3
+      fsevents: 2.3.3
 
   registry.npmjs.org/chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz}
@@ -4365,7 +5690,7 @@ packages:
     dependencies:
       string-width: registry.npmjs.org/string-width@4.2.3
     optionalDependencies:
-      '@colors/colors': registry.npmjs.org/@colors/colors@1.5.0
+      '@colors/colors': 1.5.0
     dev: true
 
   registry.npmjs.org/cli-truncate@2.1.0:
@@ -5425,28 +6750,28 @@ packages:
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/android-arm': registry.npmjs.org/@esbuild/android-arm@0.18.20
-      '@esbuild/android-arm64': registry.npmjs.org/@esbuild/android-arm64@0.18.20
-      '@esbuild/android-x64': registry.npmjs.org/@esbuild/android-x64@0.18.20
-      '@esbuild/darwin-arm64': registry.npmjs.org/@esbuild/darwin-arm64@0.18.20
-      '@esbuild/darwin-x64': registry.npmjs.org/@esbuild/darwin-x64@0.18.20
-      '@esbuild/freebsd-arm64': registry.npmjs.org/@esbuild/freebsd-arm64@0.18.20
-      '@esbuild/freebsd-x64': registry.npmjs.org/@esbuild/freebsd-x64@0.18.20
-      '@esbuild/linux-arm': registry.npmjs.org/@esbuild/linux-arm@0.18.20
-      '@esbuild/linux-arm64': registry.npmjs.org/@esbuild/linux-arm64@0.18.20
-      '@esbuild/linux-ia32': registry.npmjs.org/@esbuild/linux-ia32@0.18.20
-      '@esbuild/linux-loong64': registry.npmjs.org/@esbuild/linux-loong64@0.18.20
-      '@esbuild/linux-mips64el': registry.npmjs.org/@esbuild/linux-mips64el@0.18.20
-      '@esbuild/linux-ppc64': registry.npmjs.org/@esbuild/linux-ppc64@0.18.20
-      '@esbuild/linux-riscv64': registry.npmjs.org/@esbuild/linux-riscv64@0.18.20
-      '@esbuild/linux-s390x': registry.npmjs.org/@esbuild/linux-s390x@0.18.20
-      '@esbuild/linux-x64': registry.npmjs.org/@esbuild/linux-x64@0.18.20
-      '@esbuild/netbsd-x64': registry.npmjs.org/@esbuild/netbsd-x64@0.18.20
-      '@esbuild/openbsd-x64': registry.npmjs.org/@esbuild/openbsd-x64@0.18.20
-      '@esbuild/sunos-x64': registry.npmjs.org/@esbuild/sunos-x64@0.18.20
-      '@esbuild/win32-arm64': registry.npmjs.org/@esbuild/win32-arm64@0.18.20
-      '@esbuild/win32-ia32': registry.npmjs.org/@esbuild/win32-ia32@0.18.20
-      '@esbuild/win32-x64': registry.npmjs.org/@esbuild/win32-x64@0.18.20
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
 
   registry.npmjs.org/esbuild@0.19.5:
     resolution: {integrity: sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/esbuild/-/esbuild-0.19.5.tgz}
@@ -5456,28 +6781,28 @@ packages:
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/android-arm': registry.npmjs.org/@esbuild/android-arm@0.19.5
-      '@esbuild/android-arm64': registry.npmjs.org/@esbuild/android-arm64@0.19.5
-      '@esbuild/android-x64': registry.npmjs.org/@esbuild/android-x64@0.19.5
-      '@esbuild/darwin-arm64': registry.npmjs.org/@esbuild/darwin-arm64@0.19.5
-      '@esbuild/darwin-x64': registry.npmjs.org/@esbuild/darwin-x64@0.19.5
-      '@esbuild/freebsd-arm64': registry.npmjs.org/@esbuild/freebsd-arm64@0.19.5
-      '@esbuild/freebsd-x64': registry.npmjs.org/@esbuild/freebsd-x64@0.19.5
-      '@esbuild/linux-arm': registry.npmjs.org/@esbuild/linux-arm@0.19.5
-      '@esbuild/linux-arm64': registry.npmjs.org/@esbuild/linux-arm64@0.19.5
-      '@esbuild/linux-ia32': registry.npmjs.org/@esbuild/linux-ia32@0.19.5
-      '@esbuild/linux-loong64': registry.npmjs.org/@esbuild/linux-loong64@0.19.5
-      '@esbuild/linux-mips64el': registry.npmjs.org/@esbuild/linux-mips64el@0.19.5
-      '@esbuild/linux-ppc64': registry.npmjs.org/@esbuild/linux-ppc64@0.19.5
-      '@esbuild/linux-riscv64': registry.npmjs.org/@esbuild/linux-riscv64@0.19.5
-      '@esbuild/linux-s390x': registry.npmjs.org/@esbuild/linux-s390x@0.19.5
-      '@esbuild/linux-x64': registry.npmjs.org/@esbuild/linux-x64@0.19.5
-      '@esbuild/netbsd-x64': registry.npmjs.org/@esbuild/netbsd-x64@0.19.5
-      '@esbuild/openbsd-x64': registry.npmjs.org/@esbuild/openbsd-x64@0.19.5
-      '@esbuild/sunos-x64': registry.npmjs.org/@esbuild/sunos-x64@0.19.5
-      '@esbuild/win32-arm64': registry.npmjs.org/@esbuild/win32-arm64@0.19.5
-      '@esbuild/win32-ia32': registry.npmjs.org/@esbuild/win32-ia32@0.19.5
-      '@esbuild/win32-x64': registry.npmjs.org/@esbuild/win32-x64@0.19.5
+      '@esbuild/android-arm': 0.19.5
+      '@esbuild/android-arm64': 0.19.5
+      '@esbuild/android-x64': 0.19.5
+      '@esbuild/darwin-arm64': 0.19.5
+      '@esbuild/darwin-x64': 0.19.5
+      '@esbuild/freebsd-arm64': 0.19.5
+      '@esbuild/freebsd-x64': 0.19.5
+      '@esbuild/linux-arm': 0.19.5
+      '@esbuild/linux-arm64': 0.19.5
+      '@esbuild/linux-ia32': 0.19.5
+      '@esbuild/linux-loong64': 0.19.5
+      '@esbuild/linux-mips64el': 0.19.5
+      '@esbuild/linux-ppc64': 0.19.5
+      '@esbuild/linux-riscv64': 0.19.5
+      '@esbuild/linux-s390x': 0.19.5
+      '@esbuild/linux-x64': 0.19.5
+      '@esbuild/netbsd-x64': 0.19.5
+      '@esbuild/openbsd-x64': 0.19.5
+      '@esbuild/sunos-x64': 0.19.5
+      '@esbuild/win32-arm64': 0.19.5
+      '@esbuild/win32-ia32': 0.19.5
+      '@esbuild/win32-x64': 0.19.5
     dev: false
 
   registry.npmjs.org/escalade@3.1.1:
@@ -6011,7 +7336,7 @@ packages:
       get-stream: registry.npmjs.org/get-stream@5.2.0
       yauzl: registry.npmjs.org/yauzl@2.10.0
     optionalDependencies:
-      '@types/yauzl': registry.npmjs.org/@types/yauzl@2.10.3
+      '@types/yauzl': 2.10.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6287,24 +7612,6 @@ packages:
     version: 1.0.0
     dev: true
 
-  registry.npmjs.org/fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz}
-    name: fsevents
-    version: 2.3.2
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  registry.npmjs.org/fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz}
-    name: fsevents
-    version: 2.3.3
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
   registry.npmjs.org/function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz}
     name: function-bind
@@ -7431,7 +8738,7 @@ packages:
     name: jsonfile
     version: 4.0.0
     optionalDependencies:
-      graceful-fs: registry.npmjs.org/graceful-fs@4.2.11
+      graceful-fs: 4.2.11
     dev: true
 
   registry.npmjs.org/jsonfile@6.1.0:
@@ -7441,7 +8748,7 @@ packages:
     dependencies:
       universalify: registry.npmjs.org/universalify@2.0.1
     optionalDependencies:
-      graceful-fs: registry.npmjs.org/graceful-fs@4.2.11
+      graceful-fs: 4.2.11
     dev: true
 
   registry.npmjs.org/jsprim@2.0.2:
@@ -8943,24 +10250,6 @@ packages:
     dependencies:
       find-up: registry.npmjs.org/find-up@4.1.0
 
-  registry.npmjs.org/playwright-core@1.39.0:
-    resolution: {integrity: sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz}
-    name: playwright-core
-    version: 1.39.0
-    engines: {node: '>=16'}
-    hasBin: true
-
-  registry.npmjs.org/playwright@1.39.0:
-    resolution: {integrity: sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz}
-    name: playwright
-    version: 1.39.0
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      playwright-core: registry.npmjs.org/playwright-core@1.39.0
-    optionalDependencies:
-      fsevents: registry.npmjs.org/fsevents@2.3.2
-
   registry.npmjs.org/postcss-calc@9.0.1(postcss@8.4.21):
     resolution: {integrity: sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz}
     id: registry.npmjs.org/postcss-calc/9.0.1
@@ -9520,16 +10809,6 @@ packages:
       picocolors: registry.npmjs.org/picocolors@1.0.0
       source-map-js: registry.npmjs.org/source-map-js@1.0.2
 
-  registry.npmjs.org/postcss@8.4.32:
-    resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz}
-    name: postcss
-    version: 8.4.32
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: registry.npmjs.org/nanoid@3.3.7
-      picocolors: registry.npmjs.org/picocolors@1.0.0
-      source-map-js: registry.npmjs.org/source-map-js@1.0.2
-
   registry.npmjs.org/prebuild-install@7.1.1:
     resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz}
     name: prebuild-install
@@ -10214,7 +11493,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: registry.npmjs.org/fsevents@2.3.3
+      fsevents: 2.3.3
     dev: true
 
   registry.npmjs.org/rollup@3.29.4:
@@ -10224,7 +11503,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: registry.npmjs.org/fsevents@2.3.3
+      fsevents: 2.3.3
 
   registry.npmjs.org/run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz}
@@ -10386,24 +11665,6 @@ packages:
       has-property-descriptors: registry.npmjs.org/has-property-descriptors@1.0.1
     dev: true
 
-  registry.npmjs.org/sharp@0.32.6:
-    resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz}
-    name: sharp
-    version: 0.32.6
-    engines: {node: '>=14.15.0'}
-    requiresBuild: true
-    dependencies:
-      color: registry.npmjs.org/color@4.2.3
-      detect-libc: registry.npmjs.org/detect-libc@2.0.2
-      node-addon-api: registry.npmjs.org/node-addon-api@6.1.0
-      prebuild-install: registry.npmjs.org/prebuild-install@7.1.1
-      semver: registry.npmjs.org/semver@7.5.4
-      simple-get: registry.npmjs.org/simple-get@4.0.1
-      tar-fs: registry.npmjs.org/tar-fs@3.0.4
-      tunnel-agent: registry.npmjs.org/tunnel-agent@0.6.0
-    dev: false
-    optional: true
-
   registry.npmjs.org/shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz}
     name: shebang-command
@@ -11261,7 +12522,7 @@ packages:
       dedent-js: registry.npmjs.org/dedent-js@1.0.1
       pascal-case: registry.npmjs.org/pascal-case@3.1.2
       svelte: registry.npmjs.org/svelte@4.2.1
-      typescript: registry.npmjs.org/typescript@5.3.3
+      typescript: 5.3.3
     dev: false
 
   registry.npmjs.org/svelte@4.2.1:
@@ -11598,66 +12859,6 @@ packages:
     dependencies:
       safe-buffer: registry.npmjs.org/safe-buffer@5.2.1
 
-  registry.npmjs.org/turbo-darwin-64@1.10.0:
-    resolution: {integrity: sha512-N0aVGFtBgOKd7pIdUiKREwnDhNHRIvpMJbmUw04c1AqEoTiKAKT6iuzcCozO5N/gYMVr0hxrXgLal5OLYXtcsw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.10.0.tgz}
-    name: turbo-darwin-64
-    version: 1.10.0
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/turbo-darwin-arm64@1.10.0:
-    resolution: {integrity: sha512-boXzhaHTS5MsTMv48I/JmYp9/fYplXk5nACUDrqV6nD1hzO5PMn5wNg75ATbpkaMaeuD+hjuobeSxn1p4vpqQg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.0.tgz}
-    name: turbo-darwin-arm64
-    version: 1.10.0
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/turbo-linux-64@1.10.0:
-    resolution: {integrity: sha512-crKQuS1jrp4vp+Th6EmUqqmAlvYNnzGmwWMLeckmYILrV7zAddu87eJu4hB7V6uV+W1qHZUTw8WXa1w1+8boBw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.10.0.tgz}
-    name: turbo-linux-64
-    version: 1.10.0
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/turbo-linux-arm64@1.10.0:
-    resolution: {integrity: sha512-Y2fhWe0xepLjl7doIvsJK7mp2h8E+OF6qJsUHRgxFeRWQWi1I6clD2aEQeykHK8Tp+qp8pKFMocj32nFBvuCcg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.10.0.tgz}
-    name: turbo-linux-arm64
-    version: 1.10.0
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/turbo-windows-64@1.10.0:
-    resolution: {integrity: sha512-uh8rEqH6teaHysEMjinwWBqyNwv4IvgSAwbq/OphP8jObstTYHoR+gFPo8RQUSTaBYy4QVszgi5eO5YLvEQqNA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.10.0.tgz}
-    name: turbo-windows-64
-    version: 1.10.0
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  registry.npmjs.org/turbo-windows-arm64@1.10.0:
-    resolution: {integrity: sha512-JaVj3iM7qyRD6xYGZLL/Gs4mQKfM1zL0f91AwHZLNkk1CrJ6i5kO4ZjhKkwXSpVOTNKW3sX0Q7dExXj85Vv7UQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.10.0.tgz}
-    name: turbo-windows-arm64
-    version: 1.10.0
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   registry.npmjs.org/turbo@1.10.0:
     resolution: {integrity: sha512-GWxoL2zJduiNaEHz78o74l2jCQEeuUZ3MdpMPz0SpZOvt3nimpvQPNxiyfbqt3U9/V5G375PWKYSbXkVnIbQcA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/turbo/-/turbo-1.10.0.tgz}
     name: turbo
@@ -11665,12 +12866,12 @@ packages:
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      turbo-darwin-64: registry.npmjs.org/turbo-darwin-64@1.10.0
-      turbo-darwin-arm64: registry.npmjs.org/turbo-darwin-arm64@1.10.0
-      turbo-linux-64: registry.npmjs.org/turbo-linux-64@1.10.0
-      turbo-linux-arm64: registry.npmjs.org/turbo-linux-arm64@1.10.0
-      turbo-windows-64: registry.npmjs.org/turbo-windows-64@1.10.0
-      turbo-windows-arm64: registry.npmjs.org/turbo-windows-arm64@1.10.0
+      turbo-darwin-64: 1.10.0
+      turbo-darwin-arm64: 1.10.0
+      turbo-linux-64: 1.10.0
+      turbo-linux-arm64: 1.10.0
+      turbo-windows-64: 1.10.0
+      turbo-windows-arm64: 1.10.0
     dev: true
 
   registry.npmjs.org/tweetnacl@0.14.5:
@@ -11798,14 +12999,6 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  registry.npmjs.org/typescript@5.3.3:
-    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz}
-    name: typescript
-    version: 5.3.3
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: false
-
   registry.npmjs.org/ultrahtml@1.5.2:
     resolution: {integrity: sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/ultrahtml/-/ultrahtml-1.5.2.tgz}
     name: ultrahtml
@@ -12103,9 +13296,8 @@ packages:
       vfile-message: registry.npmjs.org/vfile-message@3.1.4
     dev: false
 
-  registry.npmjs.org/vite@4.5.0(@types/node@18.7.16):
+  registry.npmjs.org/vite@4.5.0:
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/vite/-/vite-4.5.0.tgz}
-    id: registry.npmjs.org/vite/4.5.0
     name: vite
     version: 4.5.0
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -12134,50 +13326,11 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': registry.npmjs.org/@types/node@18.7.16
       esbuild: registry.npmjs.org/esbuild@0.18.20
       postcss: registry.npmjs.org/postcss@8.4.31
       rollup: registry.npmjs.org/rollup@3.29.4
     optionalDependencies:
-      fsevents: registry.npmjs.org/fsevents@2.3.3
-
-  registry.npmjs.org/vite@4.5.1(@types/node@18.7.16):
-    resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/vite/-/vite-4.5.1.tgz}
-    id: registry.npmjs.org/vite/4.5.1
-    name: vite
-    version: 4.5.1
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': registry.npmjs.org/@types/node@18.7.16
-      esbuild: registry.npmjs.org/esbuild@0.18.20
-      postcss: registry.npmjs.org/postcss@8.4.32
-      rollup: registry.npmjs.org/rollup@3.29.4
-    optionalDependencies:
-      fsevents: registry.npmjs.org/fsevents@2.3.3
+      fsevents: 2.3.3
 
   registry.npmjs.org/vitefu@0.2.5(vite@4.5.0):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz}
@@ -12190,7 +13343,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.0
 
   registry.npmjs.org/vitefu@0.2.5(vite@4.5.1):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz}
@@ -12203,7 +13356,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
+      vite: 4.5.1(@types/node@18.7.16)
 
   registry.npmjs.org/vscode-oniguruma@1.7.0:
     resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz}
diff --git a/tests/playwright/package.json b/tests/playwright/package.json
index af0109da..f09a13e5 100644
--- a/tests/playwright/package.json
+++ b/tests/playwright/package.json
@@ -13,11 +13,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.40.1",
     "@types/node": "^18.7.16"
   },
   "dependencies": {
-    "@playwright/experimental-ct-react": "^1.39.0",
+    "@playwright/experimental-ct-react": "^1.40.1",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",
diff --git a/tooling/rollup-config/src/index.js b/tooling/rollup-config/src/index.js
index 0c9c21ba..da5450c3 100644
--- a/tooling/rollup-config/src/index.js
+++ b/tooling/rollup-config/src/index.js
@@ -25,22 +25,23 @@ const onwarn = (warning, rollupWarn) => {
   }
 };
 
-export const esmConfig = defineConfig({
-  input: pkg.source,
-  output: {
-    file: pkg.module,
-    format: 'esm',
-    banner: '"use client"',
-  },
-  onwarn,
-  plugins: [
-    peerDepsExternal({
-      includeDependencies: true,
-    }),
-    ...defaultPlugins,
-    typescript(),
-  ],
-});
+const defineEsmConfig = (format) =>
+  defineConfig({
+    input: pkg.source,
+    output: {
+      file: format === 'js' ? pkg.module : pkg.module.replace('.js', '.mjs'),
+      format: 'esm',
+      banner: pkg.rollup?.vanilla ? undefined : '"use client"',
+    },
+    onwarn,
+    plugins: [
+      peerDepsExternal({
+        includeDependencies: true,
+      }),
+      ...defaultPlugins,
+      typescript(),
+    ],
+  });
 
 const reactGlobals = {
   react: 'React',
@@ -53,7 +54,10 @@ const globals = {
   ...(pkg.rollup?.globals || {}),
 };
 
-export const umdConfig = defineConfig({
+const esmMjsConfig = defineEsmConfig('mjs');
+const esmJsConfig = defineEsmConfig('js');
+
+const umdConfig = defineConfig({
   input: pkg.source,
   output: {
     file: pkg.main,
@@ -75,4 +79,4 @@ export const umdConfig = defineConfig({
   ],
 });
 
-export default isProd ? [esmConfig, umdConfig] : esmConfig;
+export default isProd ? [esmMjsConfig, esmJsConfig, umdConfig] : esmMjsConfig;