From b8affc1c82b2617fca41a0625f1c49bb74194b6a Mon Sep 17 00:00:00 2001
From: peterkogo <7165378+peterkogo@users.noreply.github.com>
Date: Mon, 20 Nov 2023 18:40:43 +0100
Subject: [PATCH 01/65] Svelte NodeToolbar with E2E  (#3643)

* Added NodeToolbar

* Added comments & fixed default behaviour in svelte

* Added e2e-tests for NodeToolbar component & added data-id to react NodeToolbar

* refactor(svelte/NodeToolbar): cleanup

* refactor(node-toolbar): add system utils

---------

Co-authored-by: moklick <info@moritzklack.com>
---
 .../node-toolbar/components/ToolbarNode.tsx   | 19 ++++
 .../src/generic-tests/node-toolbar/general.ts | 50 ++++++++++
 .../src/components/Header/Header.svelte       |  1 +
 .../components/ToolbarNode.svelte             | 30 ++++++
 .../src/generic-tests/node-toolbar/general.ts | 50 ++++++++++
 .../routes/examples/node-toolbar/+page.svelte | 63 +++++++++++++
 .../examples/node-toolbar/CustomNode.svelte   | 31 ++++++
 .../node-toolbar/SelectedNodesToolbar.svelte  | 12 +++
 .../NodeToolbar/NodeToolbar.tsx               | 65 ++++---------
 .../NodeToolbar/types.ts                      |  4 +-
 .../svelte/src/lib/actions/portal/index.ts    | 20 +++-
 .../EdgeLabelRenderer.svelte                  |  5 +-
 packages/svelte/src/lib/index.ts              |  1 +
 .../plugins/NodeToolbar/NodeToolbar.svelte    | 94 +++++++++++++++++++
 .../src/lib/plugins/NodeToolbar/index.ts      |  2 +
 .../src/lib/plugins/NodeToolbar/types.ts      |  9 ++
 packages/system/src/types/nodes.ts            |  2 +
 packages/system/src/utils/index.ts            |  1 +
 packages/system/src/utils/node-toolbar.ts     | 49 ++++++++++
 tests/playwright/e2e/node-toolbar.spec.ts     | 93 ++++++++++++++++++
 tests/playwright/e2e/pane.spec.ts             | 18 +---
 tests/playwright/e2e/utils.ts                 | 16 ++++
 22 files changed, 564 insertions(+), 71 deletions(-)
 create mode 100644 examples/react/src/generic-tests/node-toolbar/components/ToolbarNode.tsx
 create mode 100644 examples/react/src/generic-tests/node-toolbar/general.ts
 create mode 100644 examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
 create mode 100644 examples/svelte/src/generic-tests/node-toolbar/general.ts
 create mode 100644 examples/svelte/src/routes/examples/node-toolbar/+page.svelte
 create mode 100644 examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
 create mode 100644 examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
 create mode 100644 packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
 create mode 100644 packages/svelte/src/lib/plugins/NodeToolbar/index.ts
 create mode 100644 packages/svelte/src/lib/plugins/NodeToolbar/types.ts
 create mode 100644 packages/system/src/utils/node-toolbar.ts
 create mode 100644 tests/playwright/e2e/node-toolbar.spec.ts
 create mode 100644 tests/playwright/e2e/utils.ts

diff --git a/examples/react/src/generic-tests/node-toolbar/components/ToolbarNode.tsx b/examples/react/src/generic-tests/node-toolbar/components/ToolbarNode.tsx
new file mode 100644
index 00000000..30384445
--- /dev/null
+++ b/examples/react/src/generic-tests/node-toolbar/components/ToolbarNode.tsx
@@ -0,0 +1,19 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeToolbar } from '@xyflow/react';
+
+const CustomNode: FC<NodeProps> = ({ id, data }) => {
+  return (
+    <>
+      <NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition} align={data.toolbarAlign}>
+        <button>delete</button>
+        <button>copy</button>
+        <button>expand</button>
+      </NodeToolbar>
+      <div>{data.label}</div>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomNode);
diff --git a/examples/react/src/generic-tests/node-toolbar/general.ts b/examples/react/src/generic-tests/node-toolbar/general.ts
new file mode 100644
index 00000000..d7df3fa9
--- /dev/null
+++ b/examples/react/src/generic-tests/node-toolbar/general.ts
@@ -0,0 +1,50 @@
+import { Position, type Node } from '@xyflow/react';
+import ToolbarNode from './components/ToolbarNode';
+
+const positions = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'center', 'end'];
+
+const nodes: Node[] = [
+  {
+    id: 'default-node',
+    type: 'ToolbarNode',
+    data: { label: 'toolbar top', toolbarPosition: Position.Top },
+    position: { x: 0, y: -200 },
+    className: 'react-flow__node-default',
+  },
+];
+
+positions.forEach((position, posIndex) => {
+  alignments.forEach((align, alignIndex) => {
+    const id = `node-${align}-${position}`;
+    nodes.push({
+      id,
+      type: 'ToolbarNode',
+      data: {
+        label: `toolbar ${position} ${align}`,
+        toolbarPosition: position as Position,
+        toolbarAlign: align,
+        toolbarVisible: true,
+      },
+      className: 'react-flow__node-default',
+      position: { x: posIndex * 300, y: alignIndex * 100 },
+    });
+  });
+});
+
+export default {
+  flowProps: {
+    fitView: true,
+    nodeTypes: {
+      ToolbarNode,
+    },
+    nodes,
+    edges: [
+      {
+        id: 'first-edge',
+        source: 'default-node',
+        target: 'node-start-top',
+      },
+    ],
+  },
+} satisfies FlowConfig;
diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 0bd941b7..fde20817 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -12,6 +12,7 @@
 		'figma',
 		'interaction',
 		'intersections',
+		'node-toolbar',
 		'overview',
 		'stress',
 		'subflows',
diff --git a/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte b/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
new file mode 100644
index 00000000..0a998217
--- /dev/null
+++ b/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let data: $$Props['data'];
+</script>
+
+<NodeToolbar
+	isVisible={data.toolbarVisible}
+	position={data.toolbarPosition}
+	align={data.toolbarAlign}
+>
+	<button>delete</button>
+	<button>copy</button>
+	<button>expand</button>
+</NodeToolbar>
+<div class="node">
+	<div>{data.label}</div>
+	<Handle type="target" position={Position.Left} />
+	<Handle type="source" position={Position.Right} />
+</div>
+
+<style>
+	.node {
+		width: 200px;
+		height: 50px;
+		border: solid 1px black;
+	}
+</style>
diff --git a/examples/svelte/src/generic-tests/node-toolbar/general.ts b/examples/svelte/src/generic-tests/node-toolbar/general.ts
new file mode 100644
index 00000000..6fce800f
--- /dev/null
+++ b/examples/svelte/src/generic-tests/node-toolbar/general.ts
@@ -0,0 +1,50 @@
+import { Position, type Node } from '@xyflow/svelte';
+import ToolbarNode from './components/ToolbarNode.svelte';
+
+const positions = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'center', 'end'];
+
+const nodes: Node[] = [
+	{
+		id: 'default-node',
+		type: 'ToolbarNode',
+		data: { label: 'toolbar top', toolbarPosition: Position.Top },
+		position: { x: 0, y: -200 },
+		class: 'react-flow__node-default'
+	}
+];
+
+positions.forEach((position, posIndex) => {
+	alignments.forEach((align, alignIndex) => {
+		const id = `node-${align}-${position}`;
+		nodes.push({
+			id,
+			type: 'ToolbarNode',
+			data: {
+				label: `toolbar ${position} ${align}`,
+				toolbarPosition: position as Position,
+				toolbarAlign: align,
+				toolbarVisible: true
+			},
+			class: 'react-flow__node-default',
+			position: { x: posIndex * 300, y: alignIndex * 100 }
+		});
+	});
+});
+
+export default {
+	flowProps: {
+		fitView: true,
+		nodeTypes: {
+			ToolbarNode
+		},
+		nodes,
+		edges: [
+			{
+				id: 'first-edge',
+				source: 'default-node',
+				target: 'node-start-top'
+			}
+		]
+	}
+} satisfies FlowConfig;
diff --git a/examples/svelte/src/routes/examples/node-toolbar/+page.svelte b/examples/svelte/src/routes/examples/node-toolbar/+page.svelte
new file mode 100644
index 00000000..1a4360e5
--- /dev/null
+++ b/examples/svelte/src/routes/examples/node-toolbar/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Background,
+		type Edge,
+		type Node,
+		Position,
+		type NodeTypes
+	} from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	import CustomNode from './CustomNode.svelte';
+	import SelectedNodesToolbar from './SelectedNodesToolbar.svelte';
+
+	const nodeTypes: NodeTypes = {
+		custom: CustomNode
+	};
+
+	const positions = ['top', 'right', 'bottom', 'left'];
+	const alignments = ['start', 'center', 'end'];
+
+	const initialNodes: Node[] = [
+		{
+			id: 'default-node',
+			type: 'custom',
+			data: { label: 'toolbar top', toolbarPosition: Position.Top },
+			position: { x: 0, y: -200 },
+			class: 'react-flow__node-default'
+		}
+	];
+
+	positions.forEach((position, posIndex) => {
+		alignments.forEach((align, alignIndex) => {
+			const id = `node-${align}-${position}`;
+			initialNodes.push({
+				id,
+				type: 'custom',
+				data: {
+					label: `toolbar ${position} ${align}`,
+					toolbarPosition: position as Position,
+					toolbarAlign: align,
+					toolbarVisible: true
+				},
+				class: 'react-flow__node-default',
+				position: { x: posIndex * 300, y: alignIndex * 100 }
+			});
+		});
+	});
+
+	const initialEdges: Edge[] = [];
+
+	const nodes = writable<Node[]>(initialNodes);
+	const edges = writable<Edge[]>(initialEdges);
+</script>
+
+<div style="height: 100vh;">
+	<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
+		<Background />
+		<SelectedNodesToolbar />
+	</SvelteFlow>
+</div>
diff --git a/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte b/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
new file mode 100644
index 00000000..af2dabaa
--- /dev/null
+++ b/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let data: $$Props['data'];
+</script>
+
+<NodeToolbar
+	isVisible={data.toolbarVisible}
+	position={data.toolbarPosition}
+	align={data.toolbarAlign}
+>
+	<button>delete</button>
+	<button>copy</button>
+	<button>expand</button>
+</NodeToolbar>
+<div class="node">
+	<div>{data.label}</div>
+	<Handle type="target" position={Position.Left} />
+	<Handle type="source" position={Position.Right} />
+</div>
+
+<style>
+	.node {
+		width: 180px;
+		height: 50px;
+		border: solid 1px black;
+		background: white;
+	}
+</style>
diff --git a/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte b/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
new file mode 100644
index 00000000..df62b856
--- /dev/null
+++ b/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { NodeToolbar, useNodes } from '@xyflow/svelte';
+
+	const nodes = useNodes();
+
+	$: selectedNodeIds = $nodes.filter((node) => node.selected).map((node) => node.id);
+	$: isVisible = selectedNodeIds.length > 1;
+</script>
+
+<NodeToolbar nodeId={selectedNodeIds} {isVisible}>
+	<button>Selection action</button>
+</NodeToolbar>
diff --git a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
index ad581bcf..c880edb7 100644
--- a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
@@ -1,13 +1,13 @@
 import { useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getNodesBounds, Transform, Rect, Position, internalsSymbol } from '@xyflow/system';
+import { getNodesBounds, Rect, Position, internalsSymbol, getNodeToolbarTransform } from '@xyflow/system';
 
 import { Node, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import NodeToolbarPortal from './NodeToolbarPortal';
-import { Align, NodeToolbarProps } from './types';
+import { NodeToolbarProps } from './types';
 
 const nodeEqualityFn = (a: Node | undefined, b: Node | undefined) =>
   a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
@@ -22,53 +22,15 @@ const nodesEqualityFn = (a: Node[], b: Node[]) => {
 };
 
 const storeSelector = (state: ReactFlowState) => ({
-  transform: state.transform,
+  viewport: {
+    x: state.transform[0],
+    y: state.transform[1],
+    zoom: state.transform[2],
+  },
   nodeOrigin: state.nodeOrigin,
   selectedNodesCount: state.nodes.filter((node) => node.selected).length,
 });
 
-function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number, align: Align): string {
-  let alignmentOffset = 0.5;
-
-  if (align === 'start') {
-    alignmentOffset = 0;
-  } else if (align === 'end') {
-    alignmentOffset = 1;
-  }
-
-  // position === Position.Top
-  // we set the x any y position of the toolbar based on the nodes position
-  let pos = [
-    (nodeRect.x + nodeRect.width * alignmentOffset) * transform[2] + transform[0],
-    nodeRect.y * transform[2] + transform[1] - offset,
-  ];
-  // and than shift it based on the alignment. The shift values are in %.
-  let shift = [-100 * alignmentOffset, -100];
-
-  switch (position) {
-    case Position.Right:
-      pos = [
-        (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset,
-        (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
-      ];
-      shift = [0, -100 * alignmentOffset];
-      break;
-    case Position.Bottom:
-      pos[1] = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
-      shift[1] = 0;
-      break;
-    case Position.Left:
-      pos = [
-        nodeRect.x * transform[2] + transform[0] - offset,
-        (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
-      ];
-      shift = [-100, -100 * alignmentOffset];
-      break;
-  }
-
-  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
-}
-
 function NodeToolbar({
   nodeId,
   children,
@@ -97,7 +59,9 @@ function NodeToolbar({
     [nodeId, contextNodeId]
   );
   const nodes = useStore(nodesSelector, nodesEqualityFn);
-  const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+  const { viewport, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+
+  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
   const isActive =
     typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
 
@@ -110,14 +74,19 @@ function NodeToolbar({
 
   const wrapperStyle: CSSProperties = {
     position: 'absolute',
-    transform: getTransform(nodeRect, transform, position, offset, align),
+    transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
     zIndex,
     ...style,
   };
 
   return (
     <NodeToolbarPortal>
-      <div style={wrapperStyle} className={cc(['react-flow__node-toolbar', className])} {...rest}>
+      <div
+        style={wrapperStyle}
+        className={cc(['react-flow__node-toolbar', className])}
+        {...rest}
+        data-id={nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
+      >
         {children}
       </div>
     </NodeToolbarPortal>
diff --git a/packages/react/src/additional-components/NodeToolbar/types.ts b/packages/react/src/additional-components/NodeToolbar/types.ts
index 29478576..f08859dc 100644
--- a/packages/react/src/additional-components/NodeToolbar/types.ts
+++ b/packages/react/src/additional-components/NodeToolbar/types.ts
@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import type { Position } from '@xyflow/system';
+import type { Position, Align } from '@xyflow/system';
 
 export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
   nodeId?: string | string[];
@@ -8,5 +8,3 @@ export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
   offset?: number;
   align?: Align;
 };
-
-export type Align = 'center' | 'start' | 'end';
diff --git a/packages/svelte/src/lib/actions/portal/index.ts b/packages/svelte/src/lib/actions/portal/index.ts
index 714e8b3e..fba6562c 100644
--- a/packages/svelte/src/lib/actions/portal/index.ts
+++ b/packages/svelte/src/lib/actions/portal/index.ts
@@ -1,11 +1,27 @@
-export default function (node: Element, target = 'body') {
-  const targetEl = document.querySelector(target);
+type PortalOptions = {
+  target?: string;
+  domNode: Element | null;
+};
+
+function tryToMount(node: Element, domNode: Element | null, target: string | undefined) {
+  if (!domNode) {
+    return;
+  }
+
+  const targetEl = target ? domNode.querySelector(target) : domNode;
 
   if (targetEl) {
     targetEl.appendChild(node);
   }
+}
+
+export default function (node: Element, { target, domNode }: PortalOptions) {
+  tryToMount(node, domNode, target);
 
   return {
+    async update({ target, domNode }: PortalOptions) {
+      tryToMount(node, domNode, target);
+    },
     destroy() {
       if (node.parentNode) {
         node.parentNode.removeChild(node);
diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte b/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
index d681d388..f3cfeca9 100644
--- a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
+++ b/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
@@ -1,9 +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={'.svelte-flow__edgelabel-renderer'}>
+<div use:portal={{ target: '.svelte-flow__edgelabel-renderer', domNode: $domNode }}>
   <slot />
 </div>
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index b8620d79..88bc483f 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -14,6 +14,7 @@ export * from '$lib/components/Handle';
 export * from '$lib/plugins/Controls';
 export * from '$lib/plugins/Background';
 export * from '$lib/plugins/Minimap';
+export * from '$lib/plugins/NodeToolbar';
 
 // store
 export { useStore } from '$lib/store';
diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
new file mode 100644
index 00000000..b01bbb48
--- /dev/null
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import {
+    getNodesBounds,
+    Position,
+    type Rect,
+    internalsSymbol,
+    getNodeToolbarTransform
+  } from '@xyflow/system';
+  import portal from '$lib/actions/portal';
+  import type { Node } from '$lib/types';
+  import { useStore } from '$lib/store';
+
+  import type { NodeToolbarProps } from './types';
+
+  type $$Props = NodeToolbarProps;
+
+  export let nodeId: $$Props['nodeId'] = undefined;
+  export let position: $$Props['position'] = undefined;
+  export let align: $$Props['align'] = undefined;
+  export let offset: $$Props['offset'] = undefined;
+  export let isVisible: $$Props['isVisible'] = undefined;
+
+  const { domNode, viewport, nodeLookup, nodes, nodeOrigin } = useStore();
+  const contextNodeId = getContext<string>('svelteflow__node_id');
+
+  let transform: string;
+  let toolbarNodes: Node[] = [];
+  let _offset = offset !== undefined ? offset : 10;
+  let _position = position !== undefined ? position : Position.Top;
+  let _align = align !== undefined ? align : 'center';
+
+  $: {
+    // $nodes only needed to trigger updates, $nodeLookup is just a helper that does not trigger any updates
+    if ($nodes) {
+      const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId];
+
+      toolbarNodes = nodeIds.reduce<Node[]>((res, nodeId) => {
+        const node = $nodeLookup.get(nodeId);
+
+        if (node) {
+          res.push(node);
+        }
+
+        return res;
+      }, []);
+    }
+  }
+
+  $: {
+    let nodeRect: Rect | undefined = undefined;
+
+    if (toolbarNodes.length === 1) {
+      nodeRect = {
+        ...toolbarNodes[0].position,
+        width: toolbarNodes[0].width ?? 0,
+        height: toolbarNodes[0].height ?? 0
+      };
+    } else if (toolbarNodes.length > 1) {
+      nodeRect = getNodesBounds(toolbarNodes, $nodeOrigin);
+    }
+
+    if (nodeRect) {
+      transform = getNodeToolbarTransform(nodeRect, $viewport, _position, _offset, _align);
+    }
+  }
+
+  $: zIndex =
+    toolbarNodes.length === 0
+      ? 1
+      : Math.max(...toolbarNodes.map((node) => (node[internalsSymbol]?.z || 5) + 1));
+
+  //FIXME: Possible performance bottleneck
+  $: selectedNodesCount = $nodes.filter((node) => node.selected).length;
+
+  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
+  $: isActive =
+    typeof isVisible === 'boolean'
+      ? isVisible
+      : toolbarNodes.length === 1 && toolbarNodes[0].selected && selectedNodesCount === 1;
+</script>
+
+{#if $domNode && isActive && toolbarNodes}
+  <div
+    data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
+    class="svelte-flow__node-toolbar"
+    use:portal={{ domNode: $domNode }}
+    style:position="absolute"
+    style:transform
+    style:z-index={zIndex}
+  >
+    <slot />
+  </div>
+{/if}
diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/index.ts b/packages/svelte/src/lib/plugins/NodeToolbar/index.ts
new file mode 100644
index 00000000..7c38ab3d
--- /dev/null
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/index.ts
@@ -0,0 +1,2 @@
+export { default as NodeToolbar } from './NodeToolbar.svelte';
+export * from './types';
diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/types.ts b/packages/svelte/src/lib/plugins/NodeToolbar/types.ts
new file mode 100644
index 00000000..6c812de2
--- /dev/null
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/types.ts
@@ -0,0 +1,9 @@
+import type { Position, Align } from '@xyflow/system';
+
+export type NodeToolbarProps = {
+  nodeId?: string | string[];
+  position?: Position;
+  align?: Align;
+  offset?: number;
+  isVisible?: boolean;
+};
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index 22b4e6ab..cea41c65 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -97,3 +97,5 @@ export type OnNodeDrag = (event: MouseEvent, node: NodeBase, nodes: NodeBase[])
 export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;
 
 export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
+
+export type Align = 'center' | 'start' | 'end';
diff --git a/packages/system/src/utils/index.ts b/packages/system/src/utils/index.ts
index 30a7e961..380b7658 100644
--- a/packages/system/src/utils/index.ts
+++ b/packages/system/src/utils/index.ts
@@ -3,4 +3,5 @@ export * from './edges';
 export * from './graph';
 export * from './general';
 export * from './marker';
+export * from './node-toolbar';
 export * from './store';
diff --git a/packages/system/src/utils/node-toolbar.ts b/packages/system/src/utils/node-toolbar.ts
new file mode 100644
index 00000000..1813513c
--- /dev/null
+++ b/packages/system/src/utils/node-toolbar.ts
@@ -0,0 +1,49 @@
+import { Position, type Rect, type Viewport, type Align } from '../';
+
+export function getNodeToolbarTransform(
+  nodeRect: Rect,
+  viewport: Viewport,
+  position: Position,
+  offset: number,
+  align: Align
+): string {
+  let alignmentOffset = 0.5;
+
+  if (align === 'start') {
+    alignmentOffset = 0;
+  } else if (align === 'end') {
+    alignmentOffset = 1;
+  }
+
+  // position === Position.Top
+  // we set the x any y position of the toolbar based on the nodes position
+  let pos = [
+    (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+    nodeRect.y * viewport.zoom + viewport.y - offset,
+  ];
+  // and than shift it based on the alignment. The shift values are in %.
+  let shift = [-100 * alignmentOffset, -100];
+
+  switch (position) {
+    case Position.Right:
+      pos = [
+        (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
+      ];
+      shift = [0, -100 * alignmentOffset];
+      break;
+    case Position.Bottom:
+      pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;
+      shift[1] = 0;
+      break;
+    case Position.Left:
+      pos = [
+        nodeRect.x * viewport.zoom + viewport.x - offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
+      ];
+      shift = [-100, -100 * alignmentOffset];
+      break;
+  }
+
+  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
diff --git a/tests/playwright/e2e/node-toolbar.spec.ts b/tests/playwright/e2e/node-toolbar.spec.ts
new file mode 100644
index 00000000..daf76070
--- /dev/null
+++ b/tests/playwright/e2e/node-toolbar.spec.ts
@@ -0,0 +1,93 @@
+import { test, expect, Locator } from '@playwright/test';
+import { FRAMEWORK } from './constants';
+
+type Position = 'top' | 'right' | 'bottom' | 'left';
+const positions: Position[] = ['top', 'right', 'bottom', 'left'];
+
+type Alignment = 'start' | 'center' | 'end';
+const alignments: Alignment[] = ['start', 'center', 'end'];
+type Permutation = {
+  id: string;
+  position: Position;
+  align: Alignment;
+};
+const permutations: Permutation[] = [];
+
+positions.forEach((position) => {
+  alignments.forEach((align) => {
+    permutations.push({
+      id: `node-${align}-${position}`,
+      position,
+      align,
+    });
+  });
+});
+
+test.describe('Node Toolbar', async () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to the starting url before each test.
+    await page.goto('/tests/generic/node-toolbar/general');
+    // Wait till the edges are rendered
+    await page.waitForSelector('[data-id="first-edge"]', { timeout: 5000 });
+  });
+
+  test('all toolbars are positioned correctly', async ({ page }) => {
+    permutations.forEach(async (permutation) => {
+      const toolbar = page
+        .locator(`[data-id="${permutation.id}"]`)
+        .and(page.locator(`.${FRAMEWORK}-flow__node-toolbar`));
+      const node = page.locator(`[data-id="${permutation.id}"]`).and(page.locator(`.${FRAMEWORK}-flow__node`));
+
+      await expect(toolbar).toBeAttached();
+      await expect(node).toBeAttached();
+
+      const toolbarBox = await toolbar.boundingBox();
+      const nodeBox = await node.boundingBox();
+
+      switch (permutation.position) {
+        case 'top':
+          expect(toolbarBox!.y).toBeLessThan(nodeBox!.y);
+          break;
+        case 'right':
+          expect(toolbarBox!.x).toBeGreaterThan(nodeBox!.x);
+          break;
+        case 'bottom':
+          expect(toolbarBox!.y).toBeGreaterThan(nodeBox!.y);
+          break;
+        case 'left':
+          expect(toolbarBox!.x).toBeLessThan(nodeBox!.x);
+          break;
+      }
+
+      const dimension = permutation.position === 'top' || permutation.position === 'bottom' ? 'x' : 'y';
+      const extent = permutation.position === 'top' || permutation.position === 'bottom' ? 'width' : 'height';
+
+      switch (permutation.align) {
+        case 'start':
+          expect(Math.floor(toolbarBox![dimension])).toBe(Math.floor(nodeBox![dimension]));
+          break;
+        case 'center':
+          expect(Math.floor(toolbarBox![dimension] + toolbarBox![extent] * 0.5)).toBe(
+            Math.floor(nodeBox![dimension] + nodeBox![extent] * 0.5)
+          );
+          break;
+        case 'end':
+          expect(Math.floor(toolbarBox![dimension] + toolbarBox![extent])).toBe(
+            Math.floor(nodeBox![dimension] + nodeBox![extent])
+          );
+          break;
+      }
+    });
+  });
+
+  test('toolbar default behaviour', async ({ page }) => {
+    const node = page.locator('[data-id="default-node"]').and(page.locator(`.${FRAMEWORK}-flow__node`));
+    const toolbar = page.locator('[data-id="default-node"]').and(page.locator(`.${FRAMEWORK}-flow__node-toolbar`));
+
+    await expect(node).toBeAttached();
+    await expect(toolbar).not.toBeAttached();
+
+    await node.click();
+    await expect(toolbar).toBeAttached();
+  });
+});
diff --git a/tests/playwright/e2e/pane.spec.ts b/tests/playwright/e2e/pane.spec.ts
index 31777c97..15a79655 100644
--- a/tests/playwright/e2e/pane.spec.ts
+++ b/tests/playwright/e2e/pane.spec.ts
@@ -1,23 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 import { FRAMEWORK } from './constants';
-
-const MATCH_ALL_NUMBERS = /[\d\.]+/g;
-
-// Type "Locator" not exported...
-async function getTransform(element) {
-  const transformString = await element.evaluate((el) => {
-    return el.style.transform;
-  });
-
-  // Parses all numbers in f.ex "translate(590px, 324px) scale(2)""
-  const transforms = transformString.match(MATCH_ALL_NUMBERS);
-  return {
-    translateX: parseFloat(transforms![0]),
-    translateY: parseFloat(transforms![1]),
-    scale: parseFloat(transforms![2]),
-  };
-}
+import { getTransform } from './utils';
 
 test.describe('PANE DEFAULT', () => {
   test.beforeEach(async ({ page }) => {
diff --git a/tests/playwright/e2e/utils.ts b/tests/playwright/e2e/utils.ts
new file mode 100644
index 00000000..76643dd7
--- /dev/null
+++ b/tests/playwright/e2e/utils.ts
@@ -0,0 +1,16 @@
+const MATCH_ALL_NUMBERS = /[\d\.]+/g;
+
+// Type "Locator" not exported...
+export async function getTransform(element) {
+  const transformString = await element.evaluate((el) => {
+    return el.style.transform;
+  });
+
+  // Parses all numbers in f.ex "translate(590px, 324px) scale(2)""
+  const transforms = transformString.match(MATCH_ALL_NUMBERS);
+  return {
+    translateX: parseFloat(transforms![0]),
+    translateY: parseFloat(transforms![1]),
+    scale: parseFloat(transforms![2]),
+  };
+}

From 8a5dd652b3b6eb88bb759d3b81e991216af0a6a3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 12:59:12 +0100
Subject: [PATCH 02/65] refactor(svelte): node wrapper position types

---
 .../lib/components/NodeWrapper/NodeWrapper.svelte    | 12 +++++++-----
 .../svelte/src/lib/components/NodeWrapper/types.ts   |  7 ++++---
 .../lib/container/NodeRenderer/NodeRenderer.svelte   |  6 ++++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 29631836..33a954b3 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -27,8 +27,10 @@
   export let style: NodeWrapperProps['style'] = undefined;
   export let type: NodeWrapperProps['type'] = 'default';
   export let isParent: NodeWrapperProps['isParent'] = false;
-  export let positionAbsolute: NodeWrapperProps['positionAbsolute'] = undefined;
-  export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined;
+  export let positionX: NodeWrapperProps['positionX'];
+  export let positionY: NodeWrapperProps['positionY'];
+  export let positionOriginX: NodeWrapperProps['positionOriginX'];
+  export let positionOriginY: NodeWrapperProps['positionOriginY'];
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
@@ -164,7 +166,7 @@
     class:nopan={draggable}
     class:parent={isParent}
     style:z-index={zIndex}
-    style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
+    style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height
       ? `;height=${node.size?.height}px;`
@@ -187,8 +189,8 @@
       {dragging}
       {dragHandle}
       isConnectable={connectable}
-      xPos={positionAbsolute?.x ?? 0}
-      yPos={positionAbsolute?.y ?? 0}
+      xPos={positionX}
+      yPos={positionY}
       on:connectstart
       on:connect
       on:connectend
diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts
index f4f5c310..e833ef54 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/types.ts
+++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts
@@ -1,4 +1,3 @@
-import type { XYPosition } from '@xyflow/system';
 import type { Node } from '$lib/types';
 
 export type NodeWrapperProps = Pick<
@@ -9,7 +8,6 @@ export type NodeWrapperProps = Pick<
   | 'data'
   | 'draggable'
   | 'dragging'
-  | 'positionAbsolute'
   | 'selected'
   | 'selectable'
   | 'style'
@@ -21,7 +19,10 @@ export type NodeWrapperProps = Pick<
   | 'dragHandle'
   | 'hidden'
 > & {
-  positionOrigin?: XYPosition;
+  positionX: number;
+  positionY: number;
+  positionOriginX: number;
+  positionOriginY: number;
   'on:nodeclick'?: (event: MouseEvent) => void;
   resizeObserver?: ResizeObserver | null;
   isParent?: boolean;
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index 6a7acd90..e856b70b 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -61,8 +61,10 @@
         node.connectable ||
         ($nodesConnectable && typeof node.connectable === 'undefined')
       )}
-      positionAbsolute={node.positionAbsolute}
-      positionOrigin={posOrigin}
+      positionX={node.positionAbsolute?.x ?? 0}
+      positionY={node.positionAbsolute?.y ?? 0}
+      positionOriginX={posOrigin.x ?? 0}
+      positionOriginY={posOrigin.y ?? 0}
       isParent={!!node[internalsSymbol]?.isParent}
       style={node.style}
       class={node.class}

From d812dbbe53336f9d794ed7005f59896d42dc12e4 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 15:06:42 +0100
Subject: [PATCH 03/65] refactor(nodes): add computed attr for width/height and
 absolute position

---
 .../react/src/examples/EasyConnect/utils.tsx  | 15 +++-----
 .../react/src/examples/FloatingEdges/utils.ts |  4 +-
 .../MiniMap/MiniMapNodes.tsx                  |  9 +++--
 .../NodeToolbar/NodeToolbar.tsx               |  4 +-
 .../src/components/ConnectionLine/index.tsx   |  8 ++--
 .../react/src/components/Nodes/wrapNode.tsx   |  8 ++--
 .../src/container/NodeRenderer/index.tsx      | 14 +++----
 packages/react/src/hooks/useReactFlow.ts      |  2 +-
 .../react/src/hooks/useUpdateNodePositions.ts | 12 ++++--
 packages/react/src/store/index.ts             |  7 +++-
 packages/react/src/store/initialState.ts      |  6 +--
 packages/react/src/types/nodes.ts             |  4 +-
 packages/react/src/utils/changes.ts           | 27 ++++++++-----
 .../components/NodeWrapper/NodeWrapper.svelte |  6 +--
 .../src/lib/components/NodeWrapper/types.ts   |  3 +-
 .../NodeRenderer/NodeRenderer.svelte          | 19 ++++++----
 .../svelte/src/lib/hooks/useSvelteFlow.ts     |  2 +-
 .../src/lib/hooks/useUpdateNodeInternals.ts   |  2 +-
 .../src/lib/plugins/Minimap/Minimap.svelte    |  6 +--
 .../src/lib/store/derived-connection-props.ts | 10 +++--
 packages/svelte/src/lib/store/index.ts        | 17 +++++----
 packages/system/src/types/nodes.ts            | 12 +++---
 packages/system/src/utils/dom.ts              |  2 +
 packages/system/src/utils/edges/positions.ts  | 12 +++---
 packages/system/src/utils/general.ts          |  8 ++--
 packages/system/src/utils/graph.ts            | 38 ++++++++++---------
 packages/system/src/utils/store.ts            | 17 ++++++---
 packages/system/src/xydrag/XYDrag.ts          | 12 +++---
 packages/system/src/xydrag/utils.ts           | 21 ++++++----
 packages/system/src/xyhandle/utils.ts         |  4 +-
 30 files changed, 177 insertions(+), 134 deletions(-)

diff --git a/examples/react/src/examples/EasyConnect/utils.tsx b/examples/react/src/examples/EasyConnect/utils.tsx
index cef818f5..d7f3e689 100644
--- a/examples/react/src/examples/EasyConnect/utils.tsx
+++ b/examples/react/src/examples/EasyConnect/utils.tsx
@@ -4,12 +4,9 @@ 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,
-    positionAbsolute: intersectionNodePosition,
-  } = intersectionNode;
-  const targetPosition = targetNode.positionAbsolute!;
+  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode;
+  const intersectionNodePosition = intersectionNode.computed?.positionAbsolute!;
+  const targetPosition = targetNode.computed?.positionAbsolute!;
 
   const w = intersectionNodeWidth! / 2;
   const h = intersectionNodeHeight! / 2;
@@ -32,7 +29,7 @@ function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
-  const n = { ...node.positionAbsolute, ...node };
+  const n = { ...node.computed?.positionAbsolute, ...node };
   const nx = Math.round(n.x!);
   const ny = Math.round(n.y!);
   const px = Math.round(intersectionPoint.x);
@@ -41,13 +38,13 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
   if (px <= nx + 1) {
     return Position.Left;
   }
-  if (px >= nx + n.width! - 1) {
+  if (px >= nx + n.computed?.width! - 1) {
     return Position.Right;
   }
   if (py <= ny + 1) {
     return Position.Top;
   }
-  if (py >= n.y! + n.height! - 1) {
+  if (py >= n.y! + n.computed?.height! - 1) {
     return Position.Bottom;
   }
 
diff --git a/examples/react/src/examples/FloatingEdges/utils.ts b/examples/react/src/examples/FloatingEdges/utils.ts
index 543b0945..0a2d6c03 100644
--- a/examples/react/src/examples/FloatingEdges/utils.ts
+++ b/examples/react/src/examples/FloatingEdges/utils.ts
@@ -42,13 +42,13 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
   if (px <= nx + 1) {
     return Position.Left;
   }
-  if (px >= nx + (n.width ?? 0) - 1) {
+  if (px >= nx + (n.computed?.width ?? 0) - 1) {
     return Position.Right;
   }
   if (py <= ny + 1) {
     return Position.Top;
   }
-  if (py >= n.y + (n.height ?? 0) - 1) {
+  if (py >= n.y + (n.computed?.height ?? 0) - 1) {
     return Position.Bottom;
   }
 
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index 21bb8fc5..d72700a7 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -12,7 +12,10 @@ import type { MiniMapNodes, GetMiniMapNodeAttribute } from './types';
 declare const window: any;
 
 const selector = (s: ReactFlowState) => s.nodeOrigin;
-const selectorNodes = (s: ReactFlowState) => s.nodes.filter((node) => !node.hidden && node.width && node.height);
+const selectorNodes = (s: ReactFlowState) =>
+  s.nodes.filter(
+    (node) => !node.hidden && (node.computed?.width || node.width) && (node.computed?.height || node.height)
+  );
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
@@ -44,8 +47,8 @@ function MiniMapNodes({
             key={node.id}
             x={x}
             y={y}
-            width={node.width!}
-            height={node.height!}
+            width={node.computed?.width ?? node.width ?? 0}
+            height={node.computed?.height ?? node.height ?? 0}
             style={node.style}
             selected={!!node.selected}
             className={nodeClassNameFunc(node)}
diff --git a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
index c880edb7..b7028a76 100644
--- a/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+++ b/packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
@@ -10,8 +10,8 @@ import NodeToolbarPortal from './NodeToolbarPortal';
 import { NodeToolbarProps } from './types';
 
 const nodeEqualityFn = (a: Node | undefined, b: Node | undefined) =>
-  a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
-  a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
+  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 &&
diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx
index ed1a2115..bdf73089 100644
--- a/packages/react/src/components/ConnectionLine/index.tsx
+++ b/packages/react/src/components/ConnectionLine/index.tsx
@@ -65,10 +65,10 @@ const ConnectionLine = ({
   }
 
   const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.height ?? 0;
-  const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromHandleX;
-  const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromHandleY;
+  const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
+  const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
+  const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
   const fromPosition = fromHandle?.position;
   const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
 
diff --git a/packages/react/src/components/Nodes/wrapNode.tsx b/packages/react/src/components/Nodes/wrapNode.tsx
index e50ffcf7..ab56350b 100644
--- a/packages/react/src/components/Nodes/wrapNode.tsx
+++ b/packages/react/src/components/Nodes/wrapNode.tsx
@@ -52,8 +52,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
-    sizeWidth,
-    sizeHeight,
+    width,
+    height,
   }: WrapNodeProps) => {
     const store = useStoreApi();
     const nodeRef = useRef<HTMLDivElement>(null);
@@ -186,8 +186,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
           pointerEvents: hasPointerEvents ? 'all' : 'none',
           visibility: initialized ? 'visible' : 'hidden',
-          width: sizeWidth,
-          height: sizeHeight,
+          width,
+          height,
           ...style,
         }}
         data-id={id}
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 98f9fc39..3797bc45 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -91,19 +91,19 @@ const NodeRenderer = (props: NodeRendererProps) => {
         const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
 
         const clampedPosition = props.nodeExtent
-          ? clampPosition(node.positionAbsolute, props.nodeExtent)
-          : node.positionAbsolute;
+          ? 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.width ?? 0,
-          height: node.height ?? 0,
+          width: node.computed?.width ?? node.width ?? 0,
+          height: node.computed?.height ?? node.height ?? 0,
           origin: node.origin || props.nodeOrigin,
         });
-        const initialized = (!!node.width && !!node.height) || (!!node.size?.width && !!node.size?.height);
+        const initialized = (!!node.computed?.width && !!node.computed?.height) || (!!node.width && !!node.height);
 
         return (
           <NodeComponent
@@ -111,8 +111,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             id={node.id}
             className={node.className}
             style={node.style}
-            sizeWidth={node.size?.width}
-            sizeHeight={node.size?.height}
+            width={node.width ?? undefined}
+            height={node.height ?? undefined}
             type={nodeType}
             data={node.data}
             sourcePosition={node.sourcePosition || Position.Bottom}
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index 257dd0f2..44e29c14 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -206,7 +206,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       }
 
       return (nodes || store.getState().nodes).filter((n) => {
-        if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
+        if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 
diff --git a/packages/react/src/hooks/useUpdateNodePositions.ts b/packages/react/src/hooks/useUpdateNodePositions.ts
index d303fb9b..06577601 100644
--- a/packages/react/src/hooks/useUpdateNodePositions.ts
+++ b/packages/react/src/hooks/useUpdateNodePositions.ts
@@ -23,8 +23,11 @@ function useUpdateNodePositions() {
     const yDiff = params.y * yVelo * factor;
 
     const nodeUpdates = selectedNodes.map((node) => {
-      if (node.positionAbsolute) {
-        let nextPosition = { x: node.positionAbsolute.x + xDiff, y: node.positionAbsolute.y + yDiff };
+      if (node.computed?.positionAbsolute) {
+        let nextPosition = {
+          x: node.computed?.positionAbsolute.x + xDiff,
+          y: node.computed?.positionAbsolute.y + yDiff,
+        };
 
         if (snapToGrid) {
           nextPosition = snapPosition(nextPosition, snapGrid);
@@ -40,7 +43,10 @@ function useUpdateNodePositions() {
         );
 
         node.position = position;
-        node.positionAbsolute = positionAbsolute;
+        if (!node.computed) {
+          node.computed = {};
+        }
+        node.computed.positionAbsolute = positionAbsolute;
       }
 
       return node;
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index a6898f6d..0f50f385 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -147,7 +147,7 @@ const createRFStore = ({
           };
 
           if (positionChanged) {
-            change.positionAbsolute = node.positionAbsolute;
+            change.positionAbsolute = node.computed?.positionAbsolute;
             change.position = node.position;
           }
 
@@ -276,7 +276,10 @@ const createRFStore = ({
 
             return {
               ...node,
-              positionAbsolute,
+              computed: {
+                ...node.computed,
+                positionAbsolute,
+              },
             };
           }),
         });
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index c87c29f1..48e5434f 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -28,11 +28,7 @@ const getInitialState = ({
   let transform: Transform = [0, 0, 1];
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nextNodes.map((node) => ({
-      ...node,
-      width: node.size?.width,
-      height: node.size?.height,
-    }));
+    const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
     const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
     const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
     transform = [x, y, zoom];
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 4e648f8e..ab691af5 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -40,6 +40,6 @@ export type WrapNodeProps<NodeData = any> = Pick<
     noPanClassName: string;
     rfId: string;
     disableKeyboardA11y: boolean;
-    sizeWidth?: number;
-    sizeHeight?: number;
+    width?: number;
+    height?: number;
   };
diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts
index 61ff2b19..c113ebe1 100644
--- a/packages/react/src/utils/changes.ts
+++ b/packages/react/src/utils/changes.ts
@@ -5,14 +5,17 @@ export function handleParentExpand(res: any[], updateItem: any) {
   const parent = res.find((e) => e.id === updateItem.parentNode);
 
   if (parent) {
-    const extendWidth = updateItem.position.x + updateItem.width - parent.width;
-    const extendHeight = updateItem.position.y + updateItem.height - parent.height;
+    if (!parent.computed) {
+      parent.computed = {};
+    }
+    const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
+    const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
 
     if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
       parent.style = { ...parent.style } || {};
 
-      parent.style.width = parent.style.width ?? parent.width;
-      parent.style.height = parent.style.height ?? parent.height;
+      parent.style.width = parent.style.width ?? parent.computed.width;
+      parent.style.height = parent.style.height ?? parent.computed.height;
 
       if (extendWidth > 0) {
         parent.style.width += extendWidth;
@@ -36,8 +39,8 @@ export function handleParentExpand(res: any[], updateItem: any) {
         updateItem.position.y = 0;
       }
 
-      parent.width = parent.style.width;
-      parent.height = parent.style.height;
+      parent.computed.width = parent.style.width;
+      parent.computed.height = parent.style.height;
     }
   }
 }
@@ -87,7 +90,10 @@ function applyChanges(changes: any[], elements: any[]): any[] {
             }
 
             if (typeof currentChange.positionAbsolute !== 'undefined') {
-              updateItem.positionAbsolute = currentChange.positionAbsolute;
+              if (!updateItem.computed) {
+                updateItem.computed = {};
+              }
+              updateItem.computed.positionAbsolute = currentChange.positionAbsolute;
             }
 
             if (typeof currentChange.dragging !== 'undefined') {
@@ -101,8 +107,11 @@ function applyChanges(changes: any[], elements: any[]): any[] {
           }
           case 'dimensions': {
             if (typeof currentChange.dimensions !== 'undefined') {
-              updateItem.width = currentChange.dimensions.width;
-              updateItem.height = currentChange.dimensions.height;
+              if (!updateItem.computed) {
+                updateItem.computed = {};
+              }
+              updateItem.computed.width = currentChange.dimensions.width;
+              updateItem.computed.height = currentChange.dimensions.height;
             }
 
             if (typeof currentChange.updateStyle !== 'undefined') {
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 33a954b3..eb2c1472 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -34,6 +34,8 @@
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
+  export let width: NodeWrapperProps['width'] = undefined;
+  export let height: NodeWrapperProps['height'] = undefined;
   export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
   export let initialized: NodeWrapperProps['initialized'] = false;
   let className: string = '';
@@ -168,9 +170,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height
-      ? `;height=${node.size?.height}px;`
-      : ''}"
+    style="{style} {width ? `;width=${width}px` : ''} {height ? `;height=${height}px;` : ''}"
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts
index e833ef54..3da65c2f 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/types.ts
+++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts
@@ -11,14 +11,15 @@ export type NodeWrapperProps = Pick<
   | 'selected'
   | 'selectable'
   | 'style'
-  | 'type'
   | 'width'
   | 'height'
+  | 'type'
   | 'sourcePosition'
   | 'targetPosition'
   | 'dragHandle'
   | 'hidden'
 > & {
+  type: string;
   positionX: number;
   positionY: number;
   positionOriginX: number;
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index e856b70b..48ec792b 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -40,10 +40,10 @@
 <div class="svelte-flow__nodes">
   {#each $visibleNodes as node (node.id)}
     {@const posOrigin = getPositionWithOrigin({
-      x: node.positionAbsolute?.x ?? 0,
-      y: node.positionAbsolute?.y ?? 0,
-      width: (node.size?.width || node.width) ?? 0,
-      height: (node.size?.height || node.height) ?? 0,
+      x: node.computed?.positionAbsolute?.x ?? 0,
+      y: node.computed?.positionAbsolute?.y ?? 0,
+      width: node.computed?.width ?? node.width ?? 0,
+      height: node.computed?.height ?? node.height ?? 0,
       origin: node.origin
     })}
     <NodeWrapper
@@ -61,20 +61,23 @@
         node.connectable ||
         ($nodesConnectable && typeof node.connectable === 'undefined')
       )}
-      positionX={node.positionAbsolute?.x ?? 0}
-      positionY={node.positionAbsolute?.y ?? 0}
+      positionX={node.computed?.positionAbsolute?.x ?? 0}
+      positionY={node.computed?.positionAbsolute?.y ?? 0}
       positionOriginX={posOrigin.x ?? 0}
       positionOriginY={posOrigin.y ?? 0}
       isParent={!!node[internalsSymbol]?.isParent}
       style={node.style}
       class={node.class}
-      type={node.type}
+      type={node.type || 'default'}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       dragging={node.dragging}
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
-      initialized={(!!node.width && !!node.height) || (!!node.size?.width && !!node.size?.height)}
+      width={node.width}
+      height={node.height}
+      initialized={(!!node.computed?.width && !!node.computed?.height) ||
+        (!!node.width && !!node.height)}
       {resizeObserver}
       on:nodeclick
       on:nodemouseenter
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 4e06308b..fb1419ec 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -141,7 +141,7 @@ export function useSvelteFlow(): {
       }
 
       return (nodesToIntersect || get(nodes)).filter((n) => {
-        if (!isRect && (n.id === node.id || !n.positionAbsolute)) {
+        if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 
diff --git a/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts b/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
index c66bb688..dad8ed88 100644
--- a/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
+++ b/packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import type { UpdateNodeInternals, NodeDimensionUpdate } from '@xyflow/system';
+import type { UpdateNodeInternals } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index f3fba426..b331a04e 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -114,13 +114,13 @@
       {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
 
       {#each $nodes as node (node.id)}
-        {#if node.width && node.height}
+        {#if (node.computed?.width || node?.width) && (node.computed?.height || node.height)}
           {@const pos = getNodePositionWithOrigin(node).positionAbsolute}
           <MinimapNode
             x={pos.x}
             y={pos.y}
-            width={node.width}
-            height={node.height}
+            width={node.computed?.width ?? node.width ?? 0}
+            height={node.computed?.height ?? node.height ?? 0}
             selected={node.selected}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
diff --git a/packages/svelte/src/lib/store/derived-connection-props.ts b/packages/svelte/src/lib/store/derived-connection-props.ts
index dd4e805c..2ee74538 100644
--- a/packages/svelte/src/lib/store/derived-connection-props.ts
+++ b/packages/svelte/src/lib/store/derived-connection-props.ts
@@ -80,10 +80,12 @@ export function getDerivedConnectionProps(
         : handleBounds[0];
       const fromHandleX = fromHandle
         ? fromHandle.x + fromHandle.width / 2
-        : (fromNode?.width ?? 0) / 2;
-      const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
-      const fromX = (fromNode?.positionAbsolute?.x ?? 0) + fromHandleX;
-      const fromY = (fromNode?.positionAbsolute?.y ?? 0) + fromHandleY;
+        : (fromNode?.computed?.width ?? 0) / 2;
+      const fromHandleY = fromHandle
+        ? fromHandle.y + fromHandle.height / 2
+        : fromNode?.computed?.height ?? 0;
+      const fromX = (fromNode?.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
+      const fromY = (fromNode?.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
       const fromPosition = fromHandle?.position;
       const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
 
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 625191e0..ec771416 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -66,22 +66,25 @@ export function createStore({
 
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
     store.nodes.update((nds) => {
-      return nds.map((n) => {
+      return nds.map((node) => {
         const nodeDragItem = (nodeDragItems as Array<NodeBase | NodeDragItem>).find(
-          (ndi) => ndi.id === n.id
+          (ndi) => ndi.id === node.id
         );
 
         if (nodeDragItem) {
           return {
-            ...n,
-            [internalsSymbol]: n[internalsSymbol],
+            ...node,
             dragging,
-            positionAbsolute: nodeDragItem.positionAbsolute,
-            position: nodeDragItem.position
+            position: nodeDragItem.position,
+            computed: {
+              ...node.computed,
+              positionAbsolute: nodeDragItem.computed?.positionAbsolute
+            },
+            [internalsSymbol]: node[internalsSymbol]
           };
         }
 
-        return n;
+        return node;
       });
     });
   };
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index cea41c65..1e354a55 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -25,14 +25,14 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
   zIndex?: number;
   extent?: 'parent' | CoordinateExtent;
   expandParent?: boolean;
-  positionAbsolute?: XYPosition;
   ariaLabel?: string;
   focusable?: boolean;
   origin?: NodeOrigin;
   handles?: NodeHandle[];
-  size?: {
+  computed?: {
     width?: number;
     height?: number;
+    positionAbsolute?: XYPosition;
   };
 
   // only used internally
@@ -78,11 +78,13 @@ export type NodeBounds = XYPosition & {
 export type NodeDragItem = {
   id: string;
   position: XYPosition;
-  positionAbsolute: XYPosition;
   // distance from the mouse cursor to the node when start dragging
   distance: XYPosition;
-  width?: number | null;
-  height?: number | null;
+  computed: {
+    width: number | null;
+    height: number | null;
+    positionAbsolute: XYPosition;
+  };
   extent?: 'parent' | CoordinateExtent;
   parentNode?: string;
   dragging?: boolean;
diff --git a/packages/system/src/utils/dom.ts b/packages/system/src/utils/dom.ts
index 74bb14aa..3cf5cd61 100644
--- a/packages/system/src/utils/dom.ts
+++ b/packages/system/src/utils/dom.ts
@@ -73,6 +73,8 @@ export const getHandleBounds = (
   }
 
   const handlesArray = Array.from(handles) as HTMLDivElement[];
+
+  // @todo can't we use the node dimensions here?
   const nodeBounds = nodeElement.getBoundingClientRect();
   const nodeOffset = {
     x: nodeBounds.width * nodeOrigin[0],
diff --git a/packages/system/src/utils/edges/positions.ts b/packages/system/src/utils/edges/positions.ts
index 8159d46b..35e07834 100644
--- a/packages/system/src/utils/edges/positions.ts
+++ b/packages/system/src/utils/edges/positions.ts
@@ -88,20 +88,20 @@ function toHandleBounds(handles?: NodeHandle[]) {
 
 function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, boolean] {
   const handleBounds = node?.[internalsSymbol]?.handleBounds || toHandleBounds(node?.handles) || null;
-  const nodeWidth = node?.width || node?.size?.width;
-  const nodeHeight = node?.height || node?.size?.height;
+  const nodeWidth = node?.computed?.width || node?.width;
+  const nodeHeight = node?.computed?.height || node?.height;
 
   const isValid =
     handleBounds &&
     nodeWidth &&
     nodeHeight &&
-    typeof node?.positionAbsolute?.x !== 'undefined' &&
-    typeof node?.positionAbsolute?.y !== 'undefined';
+    typeof node?.computed?.positionAbsolute?.x !== 'undefined' &&
+    typeof node?.computed?.positionAbsolute?.y !== 'undefined';
 
   return [
     {
-      x: node?.positionAbsolute?.x || 0,
-      y: node?.positionAbsolute?.y || 0,
+      x: node?.computed?.positionAbsolute?.x || 0,
+      y: node?.computed?.positionAbsolute?.y || 0,
       width: nodeWidth || 0,
       height: nodeHeight || 0,
     },
diff --git a/packages/system/src/utils/general.ts b/packages/system/src/utils/general.ts
index 976d105f..2db59322 100644
--- a/packages/system/src/utils/general.ts
+++ b/packages/system/src/utils/general.ts
@@ -64,8 +64,8 @@ export const nodeToRect = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rec
 
   return {
     ...positionAbsolute,
-    width: node.width || 0,
-    height: node.height || 0,
+    width: node.computed?.width ?? node.width ?? 0,
+    height: node.computed?.height ?? node.height ?? 0,
   };
 };
 
@@ -74,8 +74,8 @@ export const nodeToBox = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box
 
   return {
     ...positionAbsolute,
-    x2: positionAbsolute.x + (node.width || 0),
-    y2: positionAbsolute.y + (node.height || 0),
+    x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
+    y2: positionAbsolute.y + (node.computed?.height ?? node.height ?? 0),
   };
 };
 
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 43a80ef6..c2e276ae 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -86,8 +86,8 @@ export const getNodePositionWithOrigin = (
     };
   }
 
-  const offsetX = (node.width ?? 0) * nodeOrigin[0];
-  const offsetY = (node.height ?? 0) * nodeOrigin[1];
+  const offsetX = (node.computed?.width ?? node.width ?? 0) * nodeOrigin[0];
+  const offsetY = (node.computed?.height ?? node.height ?? 0) * nodeOrigin[1];
 
   const position: XYPosition = {
     x: node.position.x - offsetX,
@@ -96,10 +96,10 @@ export const getNodePositionWithOrigin = (
 
   return {
     ...position,
-    positionAbsolute: node.positionAbsolute
+    positionAbsolute: node.computed?.positionAbsolute
       ? {
-          x: node.positionAbsolute.x - offsetX,
-          y: node.positionAbsolute.y - offsetY,
+          x: node.computed.positionAbsolute.x - offsetX,
+          y: node.computed.positionAbsolute.y - offsetY,
         }
       : position,
   };
@@ -118,8 +118,8 @@ export const getNodesBounds = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0
         rectToBox({
           x,
           y,
-          width: node.width || 0,
-          height: node.height || 0,
+          width: node.computed?.width ?? node.width ?? 0,
+          height: node.computed?.height ?? node.height ?? 0,
         })
       );
     },
@@ -145,17 +145,19 @@ export const getNodesInside = <NodeType extends NodeBase>(
   };
 
   const visibleNodes = nodes.reduce<NodeType[]>((res, node) => {
-    const { width, height, selectable = true, hidden = false } = node;
+    const { computed, selectable = true, hidden = false } = node;
+    const width = computed?.width ?? node.width ?? null;
+    const height = computed?.height ?? node.height ?? null;
 
     if ((excludeNonSelectableNodes && !selectable) || hidden) {
       return res;
     }
 
     const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
-    const notInitialized = width === undefined || height === undefined || width === null || height === null;
+    const notInitialized = width === null || height === null;
 
     const partiallyVisible = partially && overlappingArea > 0;
-    const area = (width || 0) * (height || 0);
+    const area = (width ?? 0) * (height ?? 0);
     const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
 
     if (isVisible || node.dragging) {
@@ -185,7 +187,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
   options?: Options
 ) {
   const filteredNodes = nodes.filter((n) => {
-    const isVisible = n.width && n.height && (options?.includeHiddenNodes || !n.hidden);
+    const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
 
     if (options?.nodes?.length) {
       return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
@@ -218,7 +220,7 @@ function clampNodeExtent(node: NodeDragItem | NodeBase, extent?: CoordinateExten
   if (!extent || extent === 'parent') {
     return extent;
   }
-  return [extent[0], [extent[1][0] - (node.width || 0), extent[1][1] - (node.height || 0)]];
+  return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
 }
 
 export function calcNextPosition<NodeType extends NodeBase>(
@@ -242,16 +244,18 @@ export function calcNextPosition<NodeType extends NodeBase>(
   }
 
   if (node.extent === 'parent' && !node.expandParent) {
-    if (node.parentNode && node.width && node.height) {
+    const nodeWidth = node.computed?.width;
+    const nodeHeight = node.computed?.height;
+    if (node.parentNode && nodeWidth && nodeHeight) {
       const currNodeOrigin = node.origin || nodeOrigin;
 
       currentExtent =
-        parentNode && isNumeric(parentNode.width) && isNumeric(parentNode.height)
+        parentNode && isNumeric(parentNode.computed?.width) && isNumeric(parentNode.computed?.height)
           ? [
-              [parentPos.x + node.width * currNodeOrigin[0], parentPos.y + node.height * currNodeOrigin[1]],
+              [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
               [
-                parentPos.x + parentNode.width - node.width + node.width * currNodeOrigin[0],
-                parentPos.y + parentNode.height - node.height + node.height * currNodeOrigin[1],
+                parentPos.x + parentNode.computed?.width - nodeWidth + nodeWidth * currNodeOrigin[0],
+                parentPos.y + parentNode.computed?.height - nodeHeight + nodeHeight * currNodeOrigin[1],
               ],
             ]
           : currentExtent;
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 9ed4f871..eca6b8de 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -40,7 +40,7 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
         parentNode?.origin || nodeOrigin
       );
 
-      node.positionAbsolute = {
+      node.computed!.positionAbsolute = {
         x,
         y,
       };
@@ -79,9 +79,11 @@ export function updateNodes<NodeType extends NodeBase>(
     const node: NodeType = {
       ...options.defaults,
       ...n,
-      positionAbsolute: n.position,
-      width: n.width || currentStoreNode?.width,
-      height: n.height || currentStoreNode?.height,
+      computed: {
+        positionAbsolute: n.position,
+        width: n.computed?.width || currentStoreNode?.computed?.width,
+        height: n.computed?.height || currentStoreNode?.computed?.height,
+      },
     };
     const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
     const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
@@ -160,7 +162,7 @@ export function updateNodeDimensions(
       const doUpdate = !!(
         dimensions.width &&
         dimensions.height &&
-        (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate)
+        (node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.forceUpdate)
       );
 
       if (doUpdate) {
@@ -168,7 +170,10 @@ export function updateNodeDimensions(
 
         const newNode = {
           ...node,
-          ...dimensions,
+          computed: {
+            ...node.computed,
+            ...dimensions,
+          },
           [internalsSymbol]: {
             ...node[internalsSymbol],
             handleBounds: {
diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts
index 69d50b41..79a0823a 100644
--- a/packages/system/src/xydrag/XYDrag.ts
+++ b/packages/system/src/xydrag/XYDrag.ts
@@ -140,11 +140,13 @@ export function XYDrag({
         ];
 
         if (dragItems.length > 1 && nodeExtent && !n.extent) {
-          adjustedNodeExtent[0][0] = n.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
-          adjustedNodeExtent[1][0] = n.positionAbsolute.x + (n.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
+          adjustedNodeExtent[0][0] = n.computed.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
+          adjustedNodeExtent[1][0] =
+            n.computed.positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
 
-          adjustedNodeExtent[0][1] = n.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
-          adjustedNodeExtent[1][1] = n.positionAbsolute.y + (n.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+          adjustedNodeExtent[0][1] = n.computed.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
+          adjustedNodeExtent[1][1] =
+            n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
         }
 
         const updatedPos = calcNextPosition(n, nextPosition, nodes, adjustedNodeExtent, nodeOrigin, onError);
@@ -153,7 +155,7 @@ export function XYDrag({
         hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
 
         n.position = updatedPos.position;
-        n.positionAbsolute = updatedPos.positionAbsolute;
+        n.computed.positionAbsolute = updatedPos.positionAbsolute;
 
         return n;
       });
diff --git a/packages/system/src/xydrag/utils.ts b/packages/system/src/xydrag/utils.ts
index 274c2213..15c9af68 100644
--- a/packages/system/src/xydrag/utils.ts
+++ b/packages/system/src/xydrag/utils.ts
@@ -51,10 +51,9 @@ export function getDragItems<NodeType extends NodeBase>(
     .map((n) => ({
       id: n.id,
       position: n.position || { x: 0, y: 0 },
-      positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
       distance: {
-        x: mousePos.x - (n.positionAbsolute?.x ?? 0),
-        y: mousePos.y - (n.positionAbsolute?.y ?? 0),
+        x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
+        y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
       },
       delta: {
         x: 0,
@@ -62,10 +61,13 @@ export function getDragItems<NodeType extends NodeBase>(
       },
       extent: n.extent,
       parentNode: n.parentNode,
-      width: n.width,
-      height: n.height,
       origin: n.origin,
       expandParent: n.expandParent,
+      computed: {
+        positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
+        width: n.computed?.width || 0,
+        height: n.computed?.height || 0,
+      },
     }));
 }
 
@@ -81,15 +83,18 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
   dragItems: NodeDragItem[];
   nodeLookup: Map<string, NodeType>;
 }): [NodeType, NodeType[]] {
-  const extentedDragItems: NodeType[] = dragItems.map((n) => {
+  const nodesFromDragItems: NodeType[] = dragItems.map((n) => {
     const node = nodeLookup.get(n.id)!;
 
     return {
       ...node,
       position: n.position,
-      positionAbsolute: n.positionAbsolute,
+      computed: {
+        ...n.computed,
+        positionAbsolute: n.computed.positionAbsolute,
+      },
     };
   });
 
-  return [nodeId ? extentedDragItems.find((n) => n.id === nodeId)! : extentedDragItems[0], extentedDragItems];
+  return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId)! : nodesFromDragItems[0], nodesFromDragItems];
 }
diff --git a/packages/system/src/xyhandle/utils.ts b/packages/system/src/xyhandle/utils.ts
index 35b17601..b829f691 100644
--- a/packages/system/src/xyhandle/utils.ts
+++ b/packages/system/src/xyhandle/utils.ts
@@ -22,8 +22,8 @@ export function getHandles(
         id: h.id || null,
         type,
         nodeId: node.id,
-        x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
-        y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
+        x: (node.computed?.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+        y: (node.computed?.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
       });
     }
     return res;

From 24c999a335186cd457b38f99e4ef9590447134df Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 15:18:35 +0100
Subject: [PATCH 04/65] chore(astro): use width/height attrs

---
 .../src/components/ReactFlowExample/index.tsx |  6 ++---
 .../components/SvelteFlowExample/index.svelte | 24 +++++++------------
 .../components/NodeWrapper/NodeWrapper.svelte |  4 +++-
 .../svelte/src/lib/store/initial-store.ts     |  6 +----
 4 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
index ae5a5c87..ca21eeb7 100644
--- a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
+++ b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
@@ -27,7 +27,7 @@ const initialNodes: Node[] = [
     type: 'input',
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
-    size: nodeSize,
+    ...nodeSize,
     handles: [
       {
         type: 'source',
@@ -41,7 +41,7 @@ const initialNodes: Node[] = [
     id: '2',
     data: { label: 'Node 2' },
     position: { x: 100, y: 100 },
-    size: nodeSize,
+    ...nodeSize,
     handles: [
       {
         type: 'source',
@@ -65,7 +65,7 @@ const initialNodes: Node[] = [
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
-    size: nodeSize,
+    ...nodeSize,
     handles: [
       {
         type: 'source',
diff --git a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
index cfa8a449..73196d53 100644
--- a/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
+++ b/examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
@@ -11,10 +11,8 @@
       data: { label: 'Node 0' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
@@ -26,10 +24,8 @@
       data: { label: 'A' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
@@ -41,10 +37,8 @@
       data: { label: 'B' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
@@ -56,10 +50,8 @@
       data: { label: 'C' },
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      size: {
-        width: 100,
-        height: 40,
-      },
+      width: 100,
+      height: 40,
       handles: [
         { type: 'source', x: 100, y: 20, position: Position.Right },
         { type: 'target', x: 0, y: 20, position: Position.Left },
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index eb2c1472..a59e522d 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -170,7 +170,9 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style} {width ? `;width=${width}px` : ''} {height ? `;height=${height}px;` : ''}"
+    style:width={width === undefined ? undefined : `${width}px`}
+    style:height={height === undefined ? undefined : `${height}px`}
+    {style}
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index d6b621d9..dbbb17fc 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -76,11 +76,7 @@ export const getInitialStore = ({
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nextNodes.map((node) => ({
-      ...node,
-      width: node.size?.width,
-      height: node.size?.height
-    }));
+    const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
     const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
     viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
   }

From a166129547227284cde5e5031deb48d122498691 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 16:03:07 +0100
Subject: [PATCH 05/65] fix(svelte): use node.style.width and node.style

---
 .../src/components/ReactFlowExample/index.tsx             | 8 --------
 .../src/lib/components/NodeWrapper/NodeWrapper.svelte     | 6 +++---
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
index ca21eeb7..4f8ef0ab 100644
--- a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
+++ b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx
@@ -48,16 +48,12 @@ const initialNodes: Node[] = [
         position: Position.Bottom,
         x: nodeSize.width * 0.5,
         y: nodeSize.height,
-        width: 1,
-        height: 1,
       },
       {
         type: 'target',
         position: Position.Top,
         x: nodeSize.width * 0.5,
         y: 0,
-        width: 1,
-        height: 1,
       },
     ],
   },
@@ -72,16 +68,12 @@ const initialNodes: Node[] = [
         position: Position.Bottom,
         x: nodeSize.width * 0.5,
         y: nodeSize.height,
-        width: 1,
-        height: 1,
       },
       {
         type: 'target',
         position: Position.Top,
         x: nodeSize.width * 0.5,
         y: 0,
-        width: 1,
-        height: 1,
       },
     ],
   },
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index a59e522d..335bff71 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -170,9 +170,9 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style:width={width === undefined ? undefined : `${width}px`}
-    style:height={height === undefined ? undefined : `${height}px`}
-    {style}
+    style="{style ?? ''}; {!width ? '' : `width:${width}px;`} {!height
+      ? ''
+      : `height:${height}px;`}"
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}

From 39b0deb9a45e94c971198deaae1a7f85512fa171 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 16:08:13 +0100
Subject: [PATCH 06/65] fix(react): node resizer use new width/height attr

---
 .../src/additional-components/NodeResizer/ResizeControl.tsx   | 4 ++--
 packages/system/src/utils/graph.ts                            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx
index 36783fcf..1df32e06 100644
--- a/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx
+++ b/packages/react/src/additional-components/NodeResizer/ResizeControl.tsx
@@ -70,8 +70,8 @@ function ResizeControl({
         const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
 
         prevValues.current = {
-          width: node?.width ?? 0,
-          height: node?.height ?? 0,
+          width: node?.computed?.width ?? 0,
+          height: node?.computed?.height ?? 0,
           x: node?.position.x ?? 0,
           y: node?.position.y ?? 0,
         };
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index c2e276ae..fe50e1be 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -254,8 +254,8 @@ export function calcNextPosition<NodeType extends NodeBase>(
           ? [
               [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
               [
-                parentPos.x + parentNode.computed?.width - nodeWidth + nodeWidth * currNodeOrigin[0],
-                parentPos.y + parentNode.computed?.height - nodeHeight + nodeHeight * currNodeOrigin[1],
+                parentPos.x + parentNode.computed.width - nodeWidth + nodeWidth * currNodeOrigin[0],
+                parentPos.y + parentNode.computed.height - nodeHeight + nodeHeight * currNodeOrigin[1],
               ],
             ]
           : currentExtent;

From 51e98ea44d29e7a6607dfbb8cabd09c9338436f2 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Nov 2023 16:37:38 +0100
Subject: [PATCH 07/65] fix(svelte): node toolbar use new width/height attrs

---
 .../svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
index b01bbb48..fab6ce2d 100644
--- a/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+++ b/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
@@ -51,10 +51,11 @@
     let nodeRect: Rect | undefined = undefined;
 
     if (toolbarNodes.length === 1) {
+      const toolbarNode = toolbarNodes[0];
       nodeRect = {
-        ...toolbarNodes[0].position,
-        width: toolbarNodes[0].width ?? 0,
-        height: toolbarNodes[0].height ?? 0
+        ...toolbarNode.position,
+        width: toolbarNode.computed?.width ?? toolbarNode.width ?? 0,
+        height: toolbarNode.computed?.height ?? toolbarNode.height ?? 0
       };
     } else if (toolbarNodes.length > 1) {
       nodeRect = getNodesBounds(toolbarNodes, $nodeOrigin);

From ab5eef220f65881e94464f6a332e25f614672edb Mon Sep 17 00:00:00 2001
From: Moritz Klack <info@moritzklack.com>
Date: Thu, 23 Nov 2023 12:15:36 +0100
Subject: [PATCH 08/65] Feat: dark mode (#3652)

* feat(react/svelte): add dark mode defaults

* refactor(darkmode): minimap, edges, edge labels

* chore(style): edge label color

* feat(colorMode): add colorMode prop light/dark/system

* chore(examples): cleanup

* test(colorMode): add tests

* chore(base.css): add dark base

* chore(examples): cleanup
---
 examples/react/src/App/routes.ts              |  6 ++
 .../react/src/examples/ColorMode/index.tsx    | 88 +++++++++++++++++++
 .../react/src/examples/EasyConnect/index.tsx  |  1 -
 .../react/src/examples/NodeResizer/index.tsx  |  2 -
 .../react/src/examples/Overview/index.tsx     |  6 +-
 examples/react/src/main.tsx                   |  2 +-
 .../src/components/Header/Header.svelte       |  1 +
 .../routes/examples/color-mode/+page.svelte   | 54 ++++++++++++
 .../src/routes/examples/edges/+page.svelte    |  2 +-
 .../Background/Patterns.tsx                   |  2 +-
 .../additional-components/MiniMap/MiniMap.tsx | 21 +++--
 .../MiniMap/MiniMapNode.tsx                   |  8 +-
 .../MiniMap/MiniMapNodes.tsx                  | 12 +--
 .../additional-components/MiniMap/types.ts    |  6 +-
 .../react/src/container/ReactFlow/index.tsx   |  5 +-
 packages/react/src/hooks/useColorModeClass.ts | 35 ++++++++
 packages/react/src/index.ts                   |  2 +
 packages/react/src/styles/base.css            | 18 ++++
 packages/react/src/styles/style.css           | 18 ++++
 packages/react/src/types/component-props.ts   |  2 +
 .../container/SvelteFlow/SvelteFlow.svelte    | 13 ++-
 .../src/lib/container/SvelteFlow/types.ts     |  4 +-
 .../src/lib/container/SvelteFlow/utils.ts     | 14 ++-
 .../svelte/src/lib/hooks/useColorModeClass.ts | 32 +++++++
 packages/svelte/src/lib/index.ts              |  4 +-
 .../src/lib/plugins/Minimap/Minimap.svelte    | 30 +------
 .../lib/plugins/Minimap/MinimapNode.svelte    | 10 +--
 packages/svelte/src/styles/base.css           |  9 ++
 packages/svelte/src/styles/style.css          |  9 ++
 packages/system/src/styles/base.css           |  5 ++
 packages/system/src/styles/init.css           | 68 +++++++++++---
 packages/system/src/styles/style.css          | 31 ++++++-
 packages/system/src/types/general.ts          |  3 +
 tests/playwright/e2e/edges.spec.ts            |  2 +-
 tests/playwright/e2e/node-toolbar.spec.ts     |  2 +-
 tests/playwright/e2e/nodes.spec.ts            |  2 +-
 tests/playwright/e2e/pane.spec.ts             |  6 +-
 tests/playwright/e2e/props.spec.ts            | 22 +++++
 38 files changed, 474 insertions(+), 83 deletions(-)
 create mode 100644 examples/react/src/examples/ColorMode/index.tsx
 create mode 100644 examples/svelte/src/routes/examples/color-mode/+page.svelte
 create mode 100644 packages/react/src/hooks/useColorModeClass.ts
 create mode 100644 packages/svelte/src/lib/hooks/useColorModeClass.ts
 create mode 100644 tests/playwright/e2e/props.spec.ts

diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts
index 6c6b596c..2665abfa 100644
--- a/examples/react/src/App/routes.ts
+++ b/examples/react/src/App/routes.ts
@@ -1,5 +1,6 @@
 import Basic from '../examples/Basic';
 import Backgrounds from '../examples/Backgrounds';
+import ColorMode from '../examples/ColorMode';
 import ControlledUncontrolled from '../examples/ControlledUncontrolled';
 import ControlledViewport from '../examples/ControlledViewport';
 import CustomConnectionLine from '../examples/CustomConnectionLine';
@@ -62,6 +63,11 @@ const routes: IRoute[] = [
     path: 'backgrounds',
     component: Backgrounds,
   },
+  {
+    name: 'Color Mode',
+    path: 'color-mode',
+    component: ColorMode,
+  },
   {
     name: 'Cancel Connection',
     path: 'cancel-connection',
diff --git a/examples/react/src/examples/ColorMode/index.tsx b/examples/react/src/examples/ColorMode/index.tsx
new file mode 100644
index 00000000..f867c650
--- /dev/null
+++ b/examples/react/src/examples/ColorMode/index.tsx
@@ -0,0 +1,88 @@
+import { ChangeEventHandler, useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  Node,
+  useNodesState,
+  useEdgesState,
+  OnConnect,
+  Edge,
+  MiniMap,
+  Background,
+  Controls,
+  Panel,
+  ColorMode,
+  Position,
+} from '@xyflow/react';
+
+const nodeDefaults = {
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+};
+
+const initialNodes: Node[] = [
+  { id: 'A', type: 'input', position: { x: 0, y: 150 }, data: { label: 'A' }, ...nodeDefaults },
+  { id: 'B', position: { x: 250, y: 0 }, data: { label: 'B' }, ...nodeDefaults },
+  { id: 'C', position: { x: 250, y: 150 }, data: { label: 'C' }, ...nodeDefaults },
+  { id: 'D', position: { x: 250, y: 300 }, data: { label: 'D' }, ...nodeDefaults },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'A-B',
+    source: 'A',
+    target: 'B',
+  },
+  {
+    id: 'A-C',
+    source: 'A',
+    target: 'C',
+  },
+  {
+    id: 'A-D',
+    source: 'A',
+    target: 'D',
+  },
+];
+
+const ColorModeFlow = () => {
+  const [colorMode, setColorMode] = useState<ColorMode>('light');
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect: OnConnect = useCallback(
+    (params) => {
+      console.log('on connect', params);
+      setEdges((eds) => addEdge(params, eds));
+    },
+    [setEdges]
+  );
+
+  const onChange: ChangeEventHandler<HTMLSelectElement> = (evt) => setColorMode(evt.target.value as ColorMode);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      colorMode={colorMode}
+      fitView
+    >
+      <MiniMap />
+      <Background />
+      <Controls />
+
+      <Panel position="top-right">
+        <select onChange={onChange} data-testid="colormode-select">
+          <option value="light">light</option>
+          <option value="dark">dark</option>
+          <option value="system">system</option>
+        </select>
+      </Panel>
+    </ReactFlow>
+  );
+};
+
+export default ColorModeFlow;
diff --git a/examples/react/src/examples/EasyConnect/index.tsx b/examples/react/src/examples/EasyConnect/index.tsx
index 7e600848..11e347f1 100644
--- a/examples/react/src/examples/EasyConnect/index.tsx
+++ b/examples/react/src/examples/EasyConnect/index.tsx
@@ -5,7 +5,6 @@ import CustomNode from './CustomNode';
 import FloatingEdge from './FloatingEdge';
 import CustomConnectionLine from './CustomConnectionLine';
 
-import '@xyflow/react/dist/style.css';
 import './style.css';
 
 const initialNodes: Node[] = [
diff --git a/examples/react/src/examples/NodeResizer/index.tsx b/examples/react/src/examples/NodeResizer/index.tsx
index e276996c..11ce29d2 100644
--- a/examples/react/src/examples/NodeResizer/index.tsx
+++ b/examples/react/src/examples/NodeResizer/index.tsx
@@ -16,8 +16,6 @@ import CustomResizer from './CustomResizer';
 import VerticalResizer from './VerticalResizer';
 import HorizontalResizer from './HorizontalResizer';
 
-import '@xyflow/react/dist/style.css';
-
 const nodeTypes = {
   defaultResizer: DefaultResizer,
   customResizer: CustomResizer,
diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx
index 09110529..e4879ace 100644
--- a/examples/react/src/examples/Overview/index.tsx
+++ b/examples/react/src/examples/Overview/index.tsx
@@ -23,7 +23,7 @@ const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) => consol
 const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
 const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
 const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
+const onPaneContextMenu = (event: ReactMouseEvent | MouseEvent) => console.log('pane context menu', event);
 const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
 const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
 const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
@@ -230,9 +230,9 @@ const OverviewFlow = () => {
       onEdgesDelete={onEdgesDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
-      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
+      <MiniMap nodeBorderRadius={2} />
       <Controls />
-      <Background color="#aaa" gap={25} />
+      <Background gap={25} />
     </ReactFlow>
   );
 };
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
index 663a29b5..4fdcd68a 100644
--- a/examples/react/src/main.tsx
+++ b/examples/react/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './App';
+import App from './App/index';
 
 import '@xyflow/react/dist/style.css';
 import './index.css';
diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index fde20817..7d229796 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -4,6 +4,7 @@
 
 	const routes = [
 		'add-node-on-drop',
+		'colormode',
 		'custom-connection-line',
 		'customnode',
 		'dagre',
diff --git a/examples/svelte/src/routes/examples/color-mode/+page.svelte b/examples/svelte/src/routes/examples/color-mode/+page.svelte
new file mode 100644
index 00000000..59ddfdfd
--- /dev/null
+++ b/examples/svelte/src/routes/examples/color-mode/+page.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		BackgroundVariant,
+		Position,
+		MiniMap,
+		Panel,
+		type ColorMode
+	} from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodeDefaults = {
+		sourcePosition: Position.Right,
+		targetPosition: Position.Left
+	};
+
+	const nodes = writable([
+		{
+			id: 'A',
+			position: { x: 0, y: 150 },
+			data: { label: 'A' },
+			...nodeDefaults
+		},
+		{ id: 'B', position: { x: 250, y: 0 }, data: { label: 'B' }, ...nodeDefaults },
+		{ id: 'C', position: { x: 250, y: 150 }, data: { label: 'C' }, ...nodeDefaults },
+		{ id: 'D', position: { x: 250, y: 300 }, data: { label: 'D' }, ...nodeDefaults }
+	]);
+
+	const edges = writable([
+		{ id: 'A-B', source: 'A', target: 'B' },
+		{ id: 'A-C', source: 'A', target: 'C' },
+		{ id: 'A-D', source: 'A', target: 'D' }
+	]);
+
+	let colorMode: ColorMode = 'light';
+</script>
+
+<SvelteFlow {nodes} {edges} {colorMode} fitView>
+	<Controls />
+	<Background variant={BackgroundVariant.Dots} />
+	<MiniMap />
+
+	<Panel>
+		<select bind:value={colorMode} data-testid="colormode-select">
+			<option value="light">light</option>
+			<option value="dark">dark</option>
+			<option value="system">system</option>
+		</select>
+	</Panel>
+</SvelteFlow>
diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index fc118333..403b0ef6 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -145,7 +145,7 @@
 	]);
 </script>
 
-<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2} ondelete={console.log}>
+<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
diff --git a/packages/react/src/additional-components/Background/Patterns.tsx b/packages/react/src/additional-components/Background/Patterns.tsx
index 1fc71ae5..61715c5a 100644
--- a/packages/react/src/additional-components/Background/Patterns.tsx
+++ b/packages/react/src/additional-components/Background/Patterns.tsx
@@ -26,6 +26,6 @@ type DotPatternProps = {
 
 export function DotPattern({ radius, className }: DotPatternProps) {
   return (
-    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dot', className])} />
+    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dots', className])} />
   );
 }
diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
index f56ae57f..33848836 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { memo, useEffect, useRef, type MouseEvent, useCallback } from 'react';
+import { memo, useEffect, useRef, type MouseEvent, useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
@@ -40,15 +40,15 @@ const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMap({
   style,
   className,
-  nodeStrokeColor = 'transparent',
-  nodeColor = '#e2e2e2',
+  nodeStrokeColor,
+  nodeColor,
   nodeClassName = '',
   nodeBorderRadius = 5,
-  nodeStrokeWidth = 2,
+  nodeStrokeWidth,
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
   // a component properly.
   nodeComponent,
-  maskColor = 'rgb(240, 240, 240, 0.6)',
+  maskColor,
   maskStrokeColor = 'none',
   maskStrokeWidth = 1,
   position = 'bottom-right',
@@ -126,7 +126,15 @@ function MiniMap({
   return (
     <Panel
       position={position}
-      style={style}
+      style={
+        {
+          ...style,
+          '--minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
+          '--minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
+          '--minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
+        } as CSSProperties
+      }
       className={cc(['react-flow__minimap', className])}
       data-testid="rf__minimap"
     >
@@ -153,7 +161,6 @@ function MiniMap({
           className="react-flow__minimap-mask"
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
-          fill={maskColor}
           fillRule="evenodd"
           stroke={maskStrokeColor}
           strokeWidth={maskStrokeWidth}
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
index 5fe70462..76edf5e6 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
@@ -31,9 +31,11 @@ function MiniMapNode({
       ry={borderRadius}
       width={width}
       height={height}
-      fill={fill}
-      stroke={strokeColor}
-      strokeWidth={strokeWidth}
+      style={{
+        fill,
+        stroke: strokeColor,
+        strokeWidth,
+      }}
       shapeRendering={shapeRendering}
       onClick={onClick ? (event) => onClick(event, id) : undefined}
     />
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index d72700a7..80ac09be 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -19,11 +19,11 @@ const selectorNodes = (s: ReactFlowState) =>
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
-  nodeStrokeColor = 'transparent',
-  nodeColor = '#e2e2e2',
+  nodeStrokeColor,
+  nodeColor,
   nodeClassName = '',
   nodeBorderRadius = 5,
-  nodeStrokeWidth = 2,
+  nodeStrokeWidth,
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
   // a component properly.
   nodeComponent: NodeComponent = MiniMapNode,
@@ -41,6 +41,8 @@ function MiniMapNodes({
     <>
       {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
@@ -52,9 +54,9 @@ function MiniMapNodes({
             style={node.style}
             selected={!!node.selected}
             className={nodeClassNameFunc(node)}
-            color={nodeColorFunc(node)}
+            color={color}
             borderRadius={nodeBorderRadius}
-            strokeColor={nodeStrokeColorFunc(node)}
+            strokeColor={strokeColor}
             strokeWidth={nodeStrokeWidth}
             shapeRendering={shapeRendering}
             onClick={onClick}
diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts
index 323374cf..5667f7a8 100644
--- a/packages/react/src/additional-components/MiniMap/types.ts
+++ b/packages/react/src/additional-components/MiniMap/types.ts
@@ -42,10 +42,10 @@ export type MiniMapNodeProps = {
   height: number;
   borderRadius: number;
   className: string;
-  color: string;
+  color?: string;
   shapeRendering: string;
-  strokeColor: string;
-  strokeWidth: number;
+  strokeColor?: string;
+  strokeWidth?: number;
   style?: CSSProperties;
   selected: boolean;
   onClick?: (event: MouseEvent, id: string) => void;
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index d7995a53..1b3dc796 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -23,6 +23,7 @@ import A11yDescriptions from '../../components/A11yDescriptions';
 import GraphView from '../GraphView';
 import Wrapper from './Wrapper';
 import type { EdgeTypes, NodeTypes, ReactFlowProps, ReactFlowRefType } from '../../types';
+import useColorModeClass from '../../hooks/useColorModeClass';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,
@@ -169,18 +170,20 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onViewportChange,
       width,
       height,
+      colorMode = 'light',
       ...rest
     },
     ref
   ) => {
     const rfId = id || '1';
+    const colorModeClassName = useColorModeClass(colorMode);
 
     return (
       <div
         {...rest}
         style={{ ...style, ...wrapperStyle }}
         ref={ref}
-        className={cc(['react-flow', className])}
+        className={cc(['react-flow', className, colorModeClassName])}
         data-testid="rf__wrapper"
         id={id}
       >
diff --git a/packages/react/src/hooks/useColorModeClass.ts b/packages/react/src/hooks/useColorModeClass.ts
new file mode 100644
index 00000000..b66f8cea
--- /dev/null
+++ b/packages/react/src/hooks/useColorModeClass.ts
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import type { ColorMode, ColorModeClass } from '@xyflow/system';
+
+function getMediaQuery() {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return null;
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)');
+}
+
+export default function useColorModeClass(colorMode: ColorMode): ColorModeClass {
+  const [colorModeClass, setColorModeClass] = useState<ColorModeClass | null>(
+    colorMode === 'system' ? null : colorMode
+  );
+
+  useEffect(() => {
+    if (colorMode !== 'system') {
+      setColorModeClass(colorMode);
+      return;
+    }
+
+    const mediaQuery = getMediaQuery();
+    const updateColorModeClass = () => setColorModeClass(mediaQuery?.matches ? 'dark' : 'light');
+
+    updateColorModeClass();
+    mediaQuery?.addEventListener('change', updateColorModeClass);
+
+    return () => {
+      mediaQuery?.removeEventListener('change', updateColorModeClass);
+    };
+  }, [colorMode]);
+
+  return colorModeClass !== null ? colorModeClass : getMediaQuery()?.matches ? 'dark' : 'light';
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index be3de1b5..4fe922e5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -73,6 +73,8 @@ export {
   type Box,
   type Transform,
   type CoordinateExtent,
+  type ColorMode,
+  type ColorModeClass,
 } from '@xyflow/system';
 
 // system utils
diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css
index d6be5b10..4a7281dc 100644
--- a/packages/react/src/styles/base.css
+++ b/packages/react/src/styles/base.css
@@ -1,3 +1,21 @@
 /* this will be exported as base.css and can be used for a basic styling */
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/base.css';
+
+.react-flow {
+  --edge-label-background-color-default: #ffffff;
+  --edge-label-color-default: inherit;
+}
+
+.react-flow.dark {
+  --edge-label-background-color-default: #141414;
+  --edge-label-color-default: #f8f8f8;
+}
+
+.react-flow__edge-textbg {
+  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
+}
+
+.react-flow__edge-text {
+  fill: var(--edge-label-color, var(--edge-label-color-default));
+}
diff --git a/packages/react/src/styles/style.css b/packages/react/src/styles/style.css
index 406af4e9..2ff7f6c1 100644
--- a/packages/react/src/styles/style.css
+++ b/packages/react/src/styles/style.css
@@ -2,3 +2,21 @@
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/style.css';
 @import '../../../system/src/styles/node-resizer.css';
+
+.react-flow {
+  --edge-label-background-color-default: #ffffff;
+  --edge-label-color-default: inherit;
+}
+
+.react-flow.dark {
+  --edge-label-background-color-default: #141414;
+  --edge-label-color-default: #f8f8f8;
+}
+
+.react-flow__edge-textbg {
+  fill: var(--edge-label-background-color, var(--edge-label-background-color-default));
+}
+
+.react-flow__edge-text {
+  fill: var(--edge-label-color, var(--edge-label-color-default));
+}
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 583b3d86..770432f5 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -19,6 +19,7 @@ import type {
   SelectionMode,
   OnError,
   IsValidConnection,
+  ColorMode,
 } from '@xyflow/system';
 
 import type {
@@ -155,6 +156,7 @@ export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   nodeDragThreshold?: number;
   width?: number;
   height?: number;
+  colorMode?: ColorMode;
 };
 
 export type ReactFlowRefType = HTMLDivElement;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 10c1751e..dd72ec3b 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -15,8 +15,14 @@
   import { Attribution } from '$lib/components/Attribution';
   import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
-  import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
+  import {
+    updateStore,
+    updateStoreByKeys,
+    type UpdatableStoreProps,
+    getColorModeClass
+  } from './utils';
   import { get } from 'svelte/store';
+  import { useColorModeClass } from '$lib/hooks/useColorModeClass';
 
   type $$Props = SvelteFlowProps;
 
@@ -70,6 +76,7 @@
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
   export let width: $$Props['width'] = undefined;
   export let height: $$Props['height'] = undefined;
+  export let colorMode: $$Props['colorMode'] = 'light';
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -156,6 +163,8 @@
     maxZoom,
     translateExtent
   });
+
+  $: colorModeClass = useColorModeClass(colorMode);
 </script>
 
 <div
@@ -163,7 +172,7 @@
   bind:clientWidth
   bind:clientHeight
   {style}
-  class={cc(['svelte-flow', className])}
+  class={cc(['svelte-flow', className, $colorModeClass])}
   data-testid="svelte-flow__wrapper"
   on:dragover
   on:drop
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index bf66a30b..daab48e9 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -14,7 +14,8 @@ import type {
   OnError,
   ConnectionMode,
   PanelPosition,
-  ProOptions
+  ProOptions,
+  ColorMode
 } from '@xyflow/system';
 
 import type {
@@ -75,6 +76,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   defaultEdgeOptions?: DefaultEdgeOptions;
   width?: number;
   height?: number;
+  colorMode?: ColorMode;
 
   class?: string;
   style?: string;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index fe5a15aa..9abdb3e9 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 { CoordinateExtent } from '@xyflow/system';
+import type { ColorMode, CoordinateExtent } from '@xyflow/system';
 import type { Writable } from 'svelte/store';
 
 // this is helper function for updating the store
@@ -77,3 +77,15 @@ 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
new file mode 100644
index 00000000..ad163a3f
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useColorModeClass.ts
@@ -0,0 +1,32 @@
+import type { ColorMode, ColorModeClass } from '@xyflow/system';
+import { readable, type Readable } from 'svelte/store';
+
+function getMediaQuery() {
+  if (typeof window === 'undefined' || !window.matchMedia) {
+    return null;
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)');
+}
+
+export function useColorModeClass(colorMode: ColorMode = 'light'): Readable<ColorModeClass> {
+  const colorModeClass = readable<ColorModeClass>('light', (set) => {
+    if (colorMode !== 'system') {
+      set(colorMode);
+
+      return;
+    }
+
+    const mediaQuery = getMediaQuery();
+    const updateColorModeClass = () => set(mediaQuery?.matches ? 'dark' : 'light');
+
+    set(mediaQuery?.matches ? 'dark' : 'light');
+    mediaQuery?.addEventListener('change', updateColorModeClass);
+
+    return () => {
+      mediaQuery?.removeEventListener('change', updateColorModeClass);
+    };
+  });
+
+  return colorModeClass;
+}
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 88bc483f..d9e0885f 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -75,7 +75,9 @@ export {
   type Rect,
   type Box,
   type Transform,
-  type CoordinateExtent
+  type CoordinateExtent,
+  type ColorMode,
+  type ColorModeClass
 } from '@xyflow/system';
 
 // system utils
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index b331a04e..67f93698 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -20,7 +20,7 @@
   export let position: $$Props['position'] = 'bottom-right';
   export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
   export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
-  export let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
+  export let nodeColor: $$Props['nodeColor'] = undefined;
   export let nodeClass: $$Props['nodeClass'] = '';
   export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
   export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
@@ -51,7 +51,7 @@
     translateExtent
   } = useStore();
 
-  const nodeColorFunc = getAttrFunction(nodeColor);
+  const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassFunc = getAttrFunction(nodeClass);
   const shapeRendering =
@@ -122,7 +122,7 @@
             width={node.computed?.width ?? node.width ?? 0}
             height={node.computed?.height ?? node.height ?? 0}
             selected={node.selected}
-            color={nodeColorFunc(node)}
+            color={nodeColorFunc?.(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}
             strokeWidth={nodeStrokeWidth}
@@ -142,27 +142,3 @@
     </svg>
   {/if}
 </Panel>
-
-<style>
-  svg {
-    background-color: var(
-      --minimap-background-color-props,
-      var(--minimap-background-color, var(--minimap-background-color-default))
-    );
-  }
-
-  .svelte-flow__minimap-mask {
-    fill: var(
-      --minimap-mask-color-props,
-      var(--minimap-mask-color, var(--minimap-mask-color-default))
-    );
-    stroke: var(
-      --minimap-mask-stroke-color-props,
-      var(--minimap-mask-stroke-color, var(--minimap-mask-stroke-color-default))
-    );
-    stroke-width: var(
-      --minimap-mask-stroke-width-props,
-      var(--minimap-mask-stroke-width, var(--minimap-mask-stroke-width-default))
-    );
-  }
-</style>
diff --git a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
index ff0b1f0a..b17165a0 100644
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -6,9 +6,9 @@
   export let width: number = 0;
   export let height: number = 0;
   export let borderRadius: number = 5;
-  export let color: string;
+  export let color: string | undefined = undefined;
   export let shapeRendering: string;
-  export let strokeColor: string;
+  export let strokeColor: string | undefined = undefined;
   export let strokeWidth: number = 2;
   export let selected: boolean = false;
   let className: string = '';
@@ -24,8 +24,8 @@
   ry={borderRadius}
   {width}
   {height}
-  fill={color}
-  stroke={strokeColor}
-  stroke-width={strokeWidth}
+  style={`${color ? `fill: ${color};` : ''}${strokeColor ? `stroke: ${strokeColor};` : ''}${
+    strokeWidth ? `stroke-width: ${strokeWidth};` : ''
+  }`}
   shape-rendering={shapeRendering}
 />
diff --git a/packages/svelte/src/styles/base.css b/packages/svelte/src/styles/base.css
index 80bc953d..b9861c98 100644
--- a/packages/svelte/src/styles/base.css
+++ b/packages/svelte/src/styles/base.css
@@ -2,7 +2,16 @@
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/base.css';
 
+.svelte-flow {
+  --edge-label-color-default: inherit;
+}
+
+.svelte-flow.dark {
+  --edge-label-color-default: #f8f8f8;
+}
+
 .svelte-flow__edge-label {
   text-align: center;
   position: absolute;
+  color: var(--edge-label-color, var(--edge-label-color-default));
 }
diff --git a/packages/svelte/src/styles/style.css b/packages/svelte/src/styles/style.css
index c65dc982..cd89ee84 100644
--- a/packages/svelte/src/styles/style.css
+++ b/packages/svelte/src/styles/style.css
@@ -2,10 +2,19 @@
 @import '../../../system/src/styles/init.css';
 @import '../../../system/src/styles/style.css';
 
+.svelte-flow {
+  --edge-label-color-default: inherit;
+}
+
+.svelte-flow.dark {
+  --edge-label-color-default: #f8f8f8;
+}
+
 .svelte-flow__edge-label {
   text-align: center;
   position: absolute;
   font-size: 10px;
+  color: var(--edge-label-color, var(--edge-label-color-default));
 }
 
 .svelte-flow__nodes {
diff --git a/packages/system/src/styles/base.css b/packages/system/src/styles/base.css
index 31afe71a..1cb026b6 100644
--- a/packages/system/src/styles/base.css
+++ b/packages/system/src/styles/base.css
@@ -8,6 +8,10 @@
   --selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
 }
 
+.xy-flow.dark {
+  --node-color-default: #f8f8f8;
+}
+
 .xy-flow__handle {
   background-color: var(--handle-background-color, var(--handle-background-color-default));
 }
@@ -17,6 +21,7 @@
 .xy-flow__node-output,
 .xy-flow__node-group {
   border: var(--node-border, var(--node-border-default));
+  color: var(--node-color, var(--node-color-default));
 
   &.selected,
   &:focus,
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 9fed0d7b..474b1322 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -11,12 +11,43 @@
   --attribution-background-color-default: rgba(255, 255, 255, 0.5);
 
   --minimap-background-color-default: #fff;
+  --minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
+  --minimap-node-background-color-default: #e2e2e2;
+  --minimap-node-stroke-color-default: transparent;
+  --minimap-node-stroke-width-default: 2;
 
-  --background-pattern-dot-color-default: #91919a;
-  --background-pattern-line-color-default: #eee;
+  --background-color-default: transparent;
+  --background-pattern-dots-color-default: #91919a;
+  --background-pattern-lines-color-default: #eee;
   --background-pattern-cross-color-default: #e2e2e2;
 }
 
+.xy-flow.dark {
+  --edge-stroke-default: #3c3c3c;
+  --edge-stroke-width-default: 1;
+  --edge-stroke-selected-default: #727272;
+
+  --connectionline-stroke-default: #b1b1b7;
+  --connectionline-stroke-width-default: 1;
+
+  --attribution-background-color-default: rgba(150, 150, 150, 0.25);
+
+  --minimap-background-color-default: #141414;
+  --minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
+  --minimap-node-background-color-default: #2b2b2b;
+  --minimap-node-stroke-color-default: transparent;
+  --minimap-node-stroke-width-default: 2;
+
+  --background-color-default: #141414;
+  --background-pattern-dots-color-default: #777;
+  --background-pattern-lines-color-default: #777;
+  --background-pattern-cross-color-default: #777;
+}
+
+.xy-flow {
+  background-color: var(--background-color-props, var(--background-color-default, 'transparent'));
+}
+
 .xy-flow__container {
   position: absolute;
   width: 100%;
@@ -108,16 +139,11 @@
     pointer-events: all;
   }
 
-  &-textbg {
-    fill: white;
-  }
-
   .xy-flow__edge-text {
     pointer-events: none;
     user-select: none;
   }
 }
-
 .xy-flow__connection {
   pointer-events: none;
 
@@ -268,26 +294,47 @@
 
 .xy-flow__minimap {
   background: var(--minimap-background-color, var(--minimap-background-color-default));
+
+  &-mask {
+    fill: var(
+      --minimap-mask-background-color-props,
+      var(--minimap-mask-background-color, var(--minimap-mask-background-color-default))
+    );
+  }
+
+  &-node {
+    fill: var(
+      --minimap-node-background-color-props,
+      var(--minimap-node-background-color, var(--minimap-node-background-color-default))
+    );
+    stroke: var(
+      --minimap-node-stroke-color-props,
+      var(--minimap-node-stroke-color, var(--minimap-node-stroke-color-default))
+    );
+    stroke-width: var(
+      --minimap-node-stroke-width-props,
+      var(--minimap-node-stroke-width, var(--minimap-node-stroke-width-default))
+    );
+  }
 }
 
 .xy-flow__background {
   pointer-events: none;
   z-index: -1;
-  background-color: var(--background-color-props, 'transparent');
 }
 
 .xy-flow__background-pattern {
   &.dots {
     fill: var(
       --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-dot-color-default))
+      var(--background-pattern-color, var(--background-pattern-dots-color-default))
     );
   }
 
   &.lines {
     stroke: var(
       --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-line-color-default))
+      var(--background-pattern-color, var(--background-pattern-lines-color-default))
     );
   }
 
@@ -312,6 +359,7 @@
       width: 100%;
       max-width: 12px;
       max-height: 12px;
+      fill: currentColor;
     }
   }
 }
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
index 99fa8876..e88cc3f1 100644
--- a/packages/system/src/styles/style.css
+++ b/packages/system/src/styles/style.css
@@ -5,6 +5,7 @@
   --node-group-background-color-default: rgba(240, 240, 240, 0.25);
   --node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   --node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
+  --node-border-radius-default: 3px;
 
   --handle-background-color-default: #1a192b;
   --handle-border-color-default: #fff;
@@ -20,6 +21,28 @@
   --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
+.xy-flow.dark {
+  --node-color-default: #f8f8f8;
+  --node-border-default: 1px solid #3c3c3c;
+  --node-background-color-default: #1e1e1e;
+  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
+  --node-boxshadow-selected-default: 0 0 0 0.5px #999;
+
+  --handle-background-color-default: #bebebe;
+  --handle-border-color-default: #1e1e1e;
+
+  --selection-background-color-default: rgba(200, 200, 220, 0.08);
+  --selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
+
+  --controls-button-background-color-default: #2b2b2b;
+  --controls-button-background-color-hover-default: #3e3e3e;
+  --controls-button-color-default: #f8f8f8;
+  --controls-button-color-hover-default: #fff;
+  --controls-button-border-color-default: #5b5b5b;
+  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
 .xy-flow__edge {
   &.updating {
     .xy-flow__edge-path {
@@ -44,7 +67,7 @@
 .xy-flow__node-output,
 .xy-flow__node-group {
   padding: 10px;
-  border-radius: 3px;
+  border-radius: var(--node-border-radius, var(--node-border-radius-default));
   width: 150px;
   font-size: 12px;
   color: var(--node-color, var(--node-color-default));
@@ -110,7 +133,7 @@
       );
       color: var(
         --controls-button-color-hover-props,
-        var(--controls-button-hover-color, var(--controls-button-hover-color-default))
+        var(--controls-button-color-hover, var(--controls-button-color-hover-default))
       );
     }
 
@@ -122,4 +145,8 @@
       }
     }
   }
+
+  &-button:last-child {
+    border-bottom: none;
+  }
 }
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index bc86442d..22ad889e 100644
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -136,3 +136,6 @@ export type UpdateConnection = (params: {
   connectionStartHandle: ConnectingHandle | null;
   connectionEndHandle: ConnectingHandle | null;
 }) => void;
+
+export type ColorModeClass = 'light' | 'dark';
+export type ColorMode = ColorModeClass | 'system';
diff --git a/tests/playwright/e2e/edges.spec.ts b/tests/playwright/e2e/edges.spec.ts
index af2cf980..16695e63 100644
--- a/tests/playwright/e2e/edges.spec.ts
+++ b/tests/playwright/e2e/edges.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 
 import { FRAMEWORK } from './constants';
 
-test.describe('EDGES', () => {
+test.describe('Edges', () => {
   test.beforeEach(async ({ page }) => {
     // Go to the starting url before each test.
     await page.goto('/tests/generic/edges/general');
diff --git a/tests/playwright/e2e/node-toolbar.spec.ts b/tests/playwright/e2e/node-toolbar.spec.ts
index daf76070..38722e16 100644
--- a/tests/playwright/e2e/node-toolbar.spec.ts
+++ b/tests/playwright/e2e/node-toolbar.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, Locator } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { FRAMEWORK } from './constants';
 
 type Position = 'top' | 'right' | 'bottom' | 'left';
diff --git a/tests/playwright/e2e/nodes.spec.ts b/tests/playwright/e2e/nodes.spec.ts
index 5afa41de..decd2c4f 100644
--- a/tests/playwright/e2e/nodes.spec.ts
+++ b/tests/playwright/e2e/nodes.spec.ts
@@ -2,7 +2,7 @@ import { test, expect, Locator } from '@playwright/test';
 
 import { FRAMEWORK } from './constants';
 
-test.describe('NODES', () => {
+test.describe('Nodes', () => {
   test.beforeEach(async ({ page }) => {
     // Go to the starting url before each test.
     await page.goto('/tests/generic/nodes/general');
diff --git a/tests/playwright/e2e/pane.spec.ts b/tests/playwright/e2e/pane.spec.ts
index 15a79655..d4d66988 100644
--- a/tests/playwright/e2e/pane.spec.ts
+++ b/tests/playwright/e2e/pane.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test';
 import { FRAMEWORK } from './constants';
 import { getTransform } from './utils';
 
-test.describe('PANE DEFAULT', () => {
+test.describe('Pane default', () => {
   test.beforeEach(async ({ page }) => {
     // Go to the starting url before each test.
     await page.goto('/tests/generic/pane/general');
@@ -126,7 +126,7 @@ test.describe('PANE DEFAULT', () => {
   });
 });
 
-test.describe('PANE NON-DEFAULT', () => {
+test.describe('Pane non-default', () => {
   test.beforeEach(async ({ page }) => {
     // Go to the starting url before each test.
     await page.goto('/tests/generic/pane/non-defaults');
@@ -168,7 +168,7 @@ test.describe('PANE NON-DEFAULT', () => {
   });
 });
 
-test.describe('PANE ACTIVATION KEYS', () => {
+test.describe('Pane activation keys', () => {
   test.beforeEach(async ({ page }) => {
     // Go to the starting url before each test.
     await page.goto('/tests/generic/pane/activation-keys');
diff --git a/tests/playwright/e2e/props.spec.ts b/tests/playwright/e2e/props.spec.ts
new file mode 100644
index 00000000..b8104633
--- /dev/null
+++ b/tests/playwright/e2e/props.spec.ts
@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+import { FRAMEWORK } from './constants';
+
+test.describe('Props', () => {
+  test.describe('colorMode', async () => {
+    test('render default light color mode', async ({ page }) => {
+      await page.goto('/examples/color-mode');
+      const locator = page.locator(`.${FRAMEWORK}-flow`);
+
+      await expect(locator).not.toHaveClass(/dark/);
+    });
+
+    test('render dark color mode', async ({ page }) => {
+      await page.goto('/examples/color-mode');
+      const locator = page.locator(`.${FRAMEWORK}-flow`);
+      await page.getByTestId('colormode-select').selectOption({ label: 'dark' });
+
+      await expect(locator).toHaveClass(/dark/);
+    });
+  });
+});

From 38b5051179413d1a2439621aefb10143e9f61fba Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 23 Nov 2023 12:49:06 +0100
Subject: [PATCH 09/65] feat(svelte): add on:selectionclick and
 on:selectioncontextmenu closes #3646

---
 .../src/routes/examples/overview/+page.svelte   |  2 ++
 .../NodeSelection/NodeSelection.svelte          | 17 +++++++++++++++++
 .../lib/container/SvelteFlow/SvelteFlow.svelte  |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index dddbf398..68fd4aaa 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -174,6 +174,8 @@
 		event.preventDefault();
 		console.log('on edge contextmenu', edge);
 	}}
+	on:selectionclick={(event) => console.log('on selection click', event)}
+	on:selectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
 	autoPanOnConnect
 	autoPanOnNodeDrag
 	connectionMode={ConnectionMode.Strict}
diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index 98c48d8c..b314e2ad 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -1,15 +1,30 @@
 <script lang="ts">
   import { getNodesBounds } from '@xyflow/system';
+  import { createEventDispatcher } from 'svelte';
 
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
+  import type { Node } from '$lib/types';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
 
+  const dispatch = createEventDispatcher<{
+    selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
+    selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+  }>();
+
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
+
+  function onContextMenu(event: MouseEvent | TouchEvent) {
+    dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
+  }
+
+  function onClick(event: MouseEvent | TouchEvent) {
+    dispatch('selectionclick', { nodes: selectedNodes, event });
+  }
 </script>
 
 {#if selectedNodes && $selectionRectMode === 'nodes'}
@@ -17,6 +32,8 @@
     class="selection-wrapper nopan"
     style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
     use:drag={{ disabled: false, store }}
+    on:contextmenu={onContextMenu}
+    on:click={onClick}
   >
     <Selection width="100%" height="100%" x={0} y={0} />
   </div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index dd72ec3b..59bff1f4 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -223,7 +223,7 @@
           on:nodedragstop
           on:nodecontextmenu
         />
-        <NodeSelection />
+        <NodeSelection on:selectionclick on:selectioncontextmenu />
       </ViewportComponent>
       <UserSelection />
     </Pane>

From 1dfff1bf5bec36adce648219cec20f8b9c7b37a7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 23 Nov 2023 13:50:28 +0100
Subject: [PATCH 10/65] refactor(libs) add width, height and positionAbsolute
 props to NodeProps

---
 .../src/components/ReactFlowExample/CustomNode.tsx |  4 ++--
 examples/react/src/examples/Subflow/DebugNode.tsx  |  4 ++--
 .../src/routes/examples/overview/CustomNode.svelte |  7 +++----
 .../src/routes/examples/subflows/DebugNode.svelte  | 14 +++-----------
 packages/react/src/components/Nodes/wrapNode.tsx   |  6 ++++--
 .../react/src/container/NodeRenderer/index.tsx     |  1 +
 packages/react/src/types/nodes.ts                  |  3 ++-
 .../lib/components/NodeWrapper/NodeWrapper.svelte  |  5 +++--
 .../svelte/src/lib/components/NodeWrapper/types.ts |  4 ++--
 .../src/lib/components/nodes/DefaultNode.svelte    | 13 +++++++++----
 .../src/lib/components/nodes/GroupNode.svelte      | 13 +++++++++----
 .../src/lib/components/nodes/InputNode.svelte      | 13 +++++++++----
 .../src/lib/components/nodes/OutputNode.svelte     | 10 ++++++----
 .../lib/container/NodeRenderer/NodeRenderer.svelte |  6 +++---
 packages/system/src/types/nodes.ts                 |  5 +++--
 packages/system/src/utils/graph.ts                 |  4 ++--
 16 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx
index dc371239..86aef137 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, xPos, yPos }) => {
+const CustomNode: FC<NodeProps> = ({ data, positionAbsolute }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
@@ -18,7 +18,7 @@ const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
         <div>
           Position:{' '}
           <strong>
-            {xPos.toFixed(2)},{yPos.toFixed(2)}
+            {positionAbsolute.x.toFixed(2)},{positionAbsolute.y.toFixed(2)}
           </strong>
         </div>
       </div>
diff --git a/examples/react/src/examples/Subflow/DebugNode.tsx b/examples/react/src/examples/Subflow/DebugNode.tsx
index 9170ef65..46bae224 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, xPos, yPos, id }) => {
+const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsolute, id }) => {
   return (
     <>
       <Handle type="target" position={Position.Top} />
       <div style={idStyle}>{id}</div>
       <div style={infoStyle}>
-        x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+        x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
       </div>
       <Handle type="source" position={Position.Bottom} />
     </>
diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
index a8f6a226..1197ce62 100644
--- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let data: { label: string } = { label: 'Node' };
-	export let xPos: number = 0;
-	export let yPos: number = 0;
+	export let positionAbsolute: XYPosition = { x: 0, y: 0 };
 </script>
 
 <div class="custom">
 	<div>{data.label}</div>
-	<div>{~~xPos}, {~~yPos}</div>
+	<div>{~~positionAbsolute.x}, {~~positionAbsolute.y}</div>
 
 	<Handle type="target" position={Position.Top} />
 
diff --git a/examples/svelte/src/routes/examples/subflows/DebugNode.svelte b/examples/svelte/src/routes/examples/subflows/DebugNode.svelte
index 7b4434be..9676957e 100644
--- a/examples/svelte/src/routes/examples/subflows/DebugNode.svelte
+++ b/examples/svelte/src/routes/examples/subflows/DebugNode.svelte
@@ -1,24 +1,16 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: string;
-	export let xPos: number = 0;
-	export let yPos: number = 0;
+	export let positionAbsolute: XYPosition = { x: 0, y: 0 };
 	export let zIndex: number = 0;
 </script>
 
 <Handle type="target" position={Position.Top} />
 <div>{id}</div>
 <div>
-	x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+	x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
 </div>
 <Handle type="source" position={Position.Bottom} />
-
-<style>
-	.custom {
-		background: #ffcc00;
-		padding: 10px;
-	}
-</style>
diff --git a/packages/react/src/components/Nodes/wrapNode.tsx b/packages/react/src/components/Nodes/wrapNode.tsx
index ab56350b..cc1537d1 100644
--- a/packages/react/src/components/Nodes/wrapNode.tsx
+++ b/packages/react/src/components/Nodes/wrapNode.tsx
@@ -52,6 +52,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
+    positionAbsolute,
     width,
     height,
   }: WrapNodeProps) => {
@@ -209,8 +210,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
             id={id}
             data={data}
             type={type}
-            xPos={xPos}
-            yPos={yPos}
+            width={width}
+            height={height}
+            positionAbsolute={positionAbsolute}
             selected={selected}
             isConnectable={isConnectable}
             sourcePosition={sourcePosition}
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 3797bc45..73808da1 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -122,6 +122,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
             yPos={posY}
             xPosOrigin={posOrigin.x}
             yPosOrigin={posOrigin.y}
+            positionAbsolute={clampedPosition || { x: 0, y: 0 }}
             onClick={props.onNodeClick}
             onMouseEnter={props.onNodeMouseEnter}
             onMouseMove={props.onNodeMouseMove}
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index ab691af5..29548666 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { NodeBase } from '@xyflow/system';
+import type { NodeBase, XYPosition } from '@xyflow/system';
 
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
@@ -24,6 +24,7 @@ export type WrapNodeProps<NodeData = any> = Pick<
     yPos: number;
     xPosOrigin: number;
     yPosOrigin: number;
+    positionAbsolute: XYPosition;
     initialized: boolean;
     isSelectable: boolean;
     isDraggable: boolean;
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 335bff71..9a73ffa8 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -191,8 +191,9 @@
       {dragging}
       {dragHandle}
       isConnectable={connectable}
-      xPos={positionX}
-      yPos={positionY}
+      positionAbsolute={{ x: positionX, y: positionY }}
+      {width}
+      {height}
       on:connectstart
       on:connect
       on:connectend
diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts
index 3da65c2f..39fb0c10 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/types.ts
+++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts
@@ -11,14 +11,14 @@ export type NodeWrapperProps = Pick<
   | 'selected'
   | 'selectable'
   | 'style'
-  | 'width'
-  | 'height'
   | 'type'
   | 'sourcePosition'
   | 'targetPosition'
   | 'dragHandle'
   | 'hidden'
 > & {
+  width?: number;
+  height?: number;
   type: string;
   positionX: number;
   positionY: number;
diff --git a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
index c802de0c..f4fc7270 100644
--- a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
@@ -11,24 +11,29 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let type: $$Props['type'] = undefined;
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = {
+    x: 0,
+    y: 0
+  };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsolute;
   isConnectable;
 </script>
 
diff --git a/packages/svelte/src/lib/components/nodes/GroupNode.svelte b/packages/svelte/src/lib/components/nodes/GroupNode.svelte
index cd11b299..22dd0754 100644
--- a/packages/svelte/src/lib/components/nodes/GroupNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/GroupNode.svelte
@@ -5,6 +5,8 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let data: $$Props['data'] = {};
   export let selected: $$Props['selected'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
@@ -13,12 +15,16 @@
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = {
+    x: 0,
+    y: 0
+  };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   data;
   selected;
   sourcePosition;
@@ -27,7 +33,6 @@
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsolute;
   isConnectable;
 </script>
diff --git a/packages/svelte/src/lib/components/nodes/InputNode.svelte b/packages/svelte/src/lib/components/nodes/InputNode.svelte
index 71e40096..aa911d1c 100644
--- a/packages/svelte/src/lib/components/nodes/InputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/InputNode.svelte
@@ -10,26 +10,31 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let targetPosition: $$Props['targetPosition'] = undefined;
   export let type: $$Props['type'] = undefined;
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = {
+    x: 0,
+    y: 0
+  };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   targetPosition;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsolute;
   isConnectable;
 </script>
 
diff --git a/packages/svelte/src/lib/components/nodes/OutputNode.svelte b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
index a9bde54b..b5ebc2b1 100644
--- a/packages/svelte/src/lib/components/nodes/OutputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
@@ -10,26 +10,28 @@
 
   // unused props - we need to list them here in order to prevent warnings
   export let id: $$Props['id'] = '';
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
   export let selected: $$Props['selected'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = undefined;
   export let type: $$Props['type'] = undefined;
   export let zIndex: $$Props['zIndex'] = undefined;
   export let dragging: $$Props['dragging'] = false;
   export let dragHandle: $$Props['dragHandle'] = undefined;
-  export let xPos: $$Props['xPos'] = 0;
-  export let yPos: $$Props['yPos'] = 0;
+  export let positionAbsolute: $$Props['positionAbsolute'] = { x: 0, y: 0 };
   export let isConnectable: $$Props['isConnectable'] = undefined;
 
   // @todo: there must be a better way to do this
   id;
+  width;
+  height;
   selected;
   sourcePosition;
   type;
   zIndex;
   dragging;
   dragHandle;
-  xPos;
-  yPos;
+  positionAbsolute;
   isConnectable;
 </script>
 
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index 48ec792b..b4b05a1b 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -68,14 +68,14 @@
       isParent={!!node[internalsSymbol]?.isParent}
       style={node.style}
       class={node.class}
-      type={node.type || 'default'}
+      type={node.type ?? 'default'}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       dragging={node.dragging}
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
-      width={node.width}
-      height={node.height}
+      width={node.width ?? undefined}
+      height={node.height ?? undefined}
       initialized={(!!node.computed?.width && !!node.computed?.height) ||
         (!!node.width && !!node.height)}
       {resizeObserver}
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index 1e354a55..b55f3f54 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -52,8 +52,9 @@ export type NodeProps<T = any> = {
   selected: NodeBase['selected'];
   isConnectable: NodeBase['connectable'];
   zIndex: NodeBase['zIndex'];
-  xPos: number;
-  yPos: number;
+  positionAbsolute: XYPosition;
+  width?: number;
+  height?: number;
   dragging: boolean;
   targetPosition?: Position;
   sourcePosition?: Position;
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index fe50e1be..6a946a10 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -254,8 +254,8 @@ export function calcNextPosition<NodeType extends NodeBase>(
           ? [
               [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
               [
-                parentPos.x + parentNode.computed.width - nodeWidth + nodeWidth * currNodeOrigin[0],
-                parentPos.y + parentNode.computed.height - nodeHeight + nodeHeight * currNodeOrigin[1],
+                parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
+                parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
               ],
             ]
           : currentExtent;

From 8fe8f73ed3d7fc2a14b2ecbefffb1b988b2edaf8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 23 Nov 2023 13:51:49 +0100
Subject: [PATCH 11/65] chore(svelte/system): bump

---
 packages/svelte/CHANGELOG.md | 15 +++++++++++++++
 packages/svelte/package.json |  2 +-
 packages/system/package.json |  2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f32356f5..60674c25 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,3 +1,18 @@
+## 0.0.28
+
+There are some breaking changes again (sorry!) but we are very close to the final API for Svelte Flow 1.0.0. The biggest change is that we group node attriubutes (`width`, `height`, `positionAbsolute`) that are added by the library under `node.computed`. This makes it easier to understand, that this stuff comes from the library itself. `node.width` and `node.height` is still an optional node option and can be used to set certain dimensions for SSR or on the client.
+
+- add `<NodeToolbar />` component
+- add `on:selectionclick` and `on:selectioncontextmenu` event handlers
+- add `ondelete({ nodes, edges })` handler
+- add `zoomActivationKey` prop 
+- add `width` and `height` prop to custom `NodeProps` type
+- ⚠️ replace `xPos` and `yPos` with `positionAbsolute` prop to custom `NodeProps` type
+- ⚠️ `node.width/height` and `node.positionAbsolute` can now be found under `node.computed.width/height/positionAbsolute`
+- ⚠️ `node.width/height` is still optional an can be used for forcing certain dimensions and SSR
+- refactor keys: you can now disable keys by setting them to `null` (e.g. `selectionKey={null}`)
+- performance optimization with internal node lookup
+
 ## 0.0.27
 
 - add `selectionOnDrag` prop - can be used to create figma-like controls in combination with `panOnDrag={false}` / `panOnDrag={[1, 2]}` + `panOnScroll={true}` 
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 3beae0b8..5ed9f8e9 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",
diff --git a/packages/system/package.json b/packages/system/package.json
index d68f2a13..10729670 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",

From 05bd2e866639853742682ad45eb611393e058607 Mon Sep 17 00:00:00 2001
From: Moritz Klack <info@moritzklack.com>
Date: Thu, 23 Nov 2023 13:58:34 +0100
Subject: [PATCH 12/65] chore(svelte): changelog

---
 packages/svelte/CHANGELOG.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 60674c25..12086a6a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,12 +1,15 @@
 ## 0.0.28
 
-There are some breaking changes again (sorry!) but we are very close to the final API for Svelte Flow 1.0.0. The biggest change is that we group node attriubutes (`width`, `height`, `positionAbsolute`) that are added by the library under `node.computed`. This makes it easier to understand, that this stuff comes from the library itself. `node.width` and `node.height` is still an optional node option and can be used to set certain dimensions for SSR or on the client.
+This is a huge update! We added a new `<NodeToolbar />` component and a new `colorMode` ('light' | 'dark' | 'system') prop for toggling dark/light mode.
+
+There are also some breaking changes again (sorry!) but we are very close to the final API for Svelte Flow 1.0.0. The biggest change is that we group node attriubutes (`width`, `height`, `positionAbsolute`) that are added by the library under `node.computed`. This makes it easier to understand, that this stuff comes from the library itself. `node.width` and `node.height` is still an optional node option and can be used to set certain dimensions for SSR or on the client.
 
 - add `<NodeToolbar />` component
 - add `on:selectionclick` and `on:selectioncontextmenu` event handlers
 - add `ondelete({ nodes, edges })` handler
 - add `zoomActivationKey` prop 
 - add `width` and `height` prop to custom `NodeProps` type
+- add `colorMode` prop ('light' | 'dark' | 'system')
 - ⚠️ replace `xPos` and `yPos` with `positionAbsolute` prop to custom `NodeProps` type
 - ⚠️ `node.width/height` and `node.positionAbsolute` can now be found under `node.computed.width/height/positionAbsolute`
 - ⚠️ `node.width/height` is still optional an can be used for forcing certain dimensions and SSR
@@ -159,4 +162,4 @@ This very first release comes with lots of features already:
 - draggable, selectable and deletable nodes 
 - support for custom `nodeTypes` and `edgeTypes`
 - basic viewport settings like `fitView`, `minZoom` and `maxZoom`
-- additional components: `<MiniMap />`, `<Controls />` & `<Background />` 
\ No newline at end of file
+- additional components: `<MiniMap />`, `<Controls />` & `<Background />` 

From b0ca5a5bc9eccbe511153a3ed17c0ca55656d0e9 Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Wed, 22 Nov 2023 18:50:15 +0100
Subject: [PATCH 13/65] Set nodeDragThreshold to 1

This removes an expensive `dragging: false` update on mouseup (with `dragging: true` never even dispatched)
---
 packages/react/src/store/initialState.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index 48e5434f..e0482961 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -61,7 +61,7 @@ const getInitialState = ({
     paneDragging: false,
     noPanClassName: 'nopan',
     nodeOrigin: [0, 0],
-    nodeDragThreshold: 0,
+    nodeDragThreshold: 1,
 
     snapGrid: [15, 15],
     snapToGrid: false,

From 24390162e08867a7c68c309a0ebcd52dafd6d425 Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Thu, 23 Nov 2023 01:17:55 +0100
Subject: [PATCH 14/65] =?UTF-8?q?Store:=20don=E2=80=99t=20regenerate=20int?=
 =?UTF-8?q?ernal=20nodes=20if=20user-provided=20nodes=20haven=E2=80=99t=20?=
 =?UTF-8?q?changed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react/src/store/index.ts             | 19 ++++++++++++-------
 packages/react/src/store/initialState.ts      |  4 ++--
 .../svelte/src/lib/store/initial-store.ts     |  4 ++--
 packages/svelte/src/lib/store/utils.ts        |  4 ++--
 packages/system/src/types/nodes.ts            |  4 ++++
 packages/system/src/utils/store.ts            |  5 ++++-
 6 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 0f50f385..49c7c688 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,
@@ -42,11 +42,16 @@ 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 = {} } = get();
@@ -69,7 +74,7 @@ const createRFStore = ({
         };
 
         if (hasDefaultNodes) {
-          nextState.nodes = updateNodes(nodes, new Map(), {
+          nextState.nodes = adoptUserProvidedNodes(nodes, new Map(), {
             nodeOrigin: get().nodeOrigin,
             elevateNodesOnSelect: get().elevateNodesOnSelect,
           });
@@ -163,7 +168,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,
             });
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index 48e5434f..d54ff61c 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,
@@ -23,7 +23,7 @@ const getInitialState = ({
   fitView?: boolean;
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map<string, Node>();
-  const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
+  const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];
 
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index dbbb17fc..a3ac2f1e 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -15,7 +15,7 @@ import {
   type OnError,
   devWarn,
   type Viewport,
-  updateNodes,
+  adoptUserProvidedNodes,
   getNodesBounds,
   getViewportForBounds
 } from '@xyflow/system';
@@ -68,7 +68,7 @@ export const getInitialStore = ({
   fitView?: boolean;
 }) => {
   const nodeLookup = new Map<string, Node>();
-  const nextNodes = updateNodes(nodes, nodeLookup, {
+  const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false
   });
diff --git a/packages/svelte/src/lib/store/utils.ts b/packages/svelte/src/lib/store/utils.ts
index a11bf1f6..2d53ac90 100644
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -6,7 +6,7 @@ import {
   type Writable,
   get
 } from 'svelte/store';
-import { updateNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
+import { adoptUserProvidedNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 
@@ -133,7 +133,7 @@ export const createNodesStore = (
   let elevateNodesOnSelect = true;
 
   const _set = (nds: Node[]): Node[] => {
-    const nextNodes = updateNodes(nds, nodeLookup, {
+    const nextNodes = adoptUserProvidedNodes(nds, nodeLookup, {
       elevateNodesOnSelect,
       defaults
     });
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index b55f3f54..33884bf7 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -40,6 +40,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: WeakRef<NodeBase>;
   };
 };
 
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index eca6b8de..34d3d529 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -62,7 +62,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> = {
@@ -76,6 +76,8 @@ export function updateNodes<NodeType extends NodeBase>(
 
   const nextNodes = nodes.map((n) => {
     const currentStoreNode = nodeLookup.get(n.id);
+    if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode.deref()) return currentStoreNode;
+
     const node: NodeType = {
       ...options.defaults,
       ...n,
@@ -97,6 +99,7 @@ export function updateNodes<NodeType extends NodeBase>(
       value: {
         handleBounds: currInternals?.handleBounds,
         z,
+        userProvidedNode: new WeakRef(n),
       },
     });
 

From 99d945f33c9ebf84e24b460b89cafce087bbc710 Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Thu, 23 Nov 2023 01:19:33 +0100
Subject: [PATCH 15/65] Split NodeRenderer into NodeRenderer and
 NodeComponentWrapper

---
 .../src/container/NodeRenderer/index.tsx      | 174 ++++++++++++------
 1 file changed, 113 insertions(+), 61 deletions(-)

diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 73808da1..7c8137ca 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -76,74 +76,29 @@ const NodeRenderer = (props: NodeRendererProps) => {
   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);
-
         return (
-          <NodeComponent
+          <NodeComponentWrapper
             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 }}
-            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}
+            nodeTypes={props.nodeTypes}
+            nodeExtent={props.nodeExtent}
+            nodeOrigin={props.nodeOrigin}
+            onNodeClick={props.onNodeClick}
+            onNodeMouseEnter={props.onNodeMouseEnter}
+            onNodeMouseMove={props.onNodeMouseMove}
+            onNodeMouseLeave={props.onNodeMouseLeave}
+            onNodeContextMenu={props.onNodeContextMenu}
+            onNodeDoubleClick={props.onNodeDoubleClick}
             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}
           />
         );
       })}
@@ -151,6 +106,103 @@ const NodeRenderer = (props: NodeRendererProps) => {
   );
 };
 
+const NodeComponentWrapper = memo(function NodeComponentWrapper(props: {
+  id: string;
+  nodeExtent: NodeRendererProps['nodeExtent'];
+  nodeTypes: NodeRendererProps['nodeTypes'];
+  nodeOrigin: NodeRendererProps['nodeOrigin'];
+  onNodeClick: NodeRendererProps['onNodeClick'];
+  onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
+  onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
+  onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
+  onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
+  onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
+  noDragClassName: NodeRendererProps['noDragClassName'];
+  noPanClassName: NodeRendererProps['noPanClassName'];
+  rfId: NodeRendererProps['rfId'];
+  disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
+  resizeObserver: ResizeObserver | null;
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  nodesFocusable: boolean;
+  elementsSelectable: boolean;
+  onError: ReactFlowState['onError'];
+}) {
+  const node = useStore((s) => s.nodeLookup.get(props.id));
+  if (!node) return null;
+
+  let nodeType = node.type || 'default';
+
+  if (!props.nodeTypes[nodeType]) {
+    props.onError?.('003', errorMessages['error003'](nodeType));
+
+    nodeType = 'default';
+  }
+
+  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+  const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
+  const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
+  const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
+  const isFocusable = !!(node.focusable || (props.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);
+
+  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 }}
+      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={props.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}
+    />
+  );
+});
+
 NodeRenderer.displayName = 'NodeRenderer';
 
 export default memo(NodeRenderer);

From 047316132503c5cd33e02c4f6ecc478a97894a9b Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Thu, 23 Nov 2023 01:20:59 +0100
Subject: [PATCH 16/65] =?UTF-8?q?NodeRenderer:=20don=E2=80=99t=20rerender?=
 =?UTF-8?q?=20unless=20visible=20nodes=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react/package.json                   |   1 +
 .../src/container/NodeRenderer/index.tsx      |  10 +-
 packages/react/src/hooks/useVisibleNodes.ts   |  38 +++--
 pnpm-lock.yaml                                | 140 ++++++++++--------
 4 files changed, 106 insertions(+), 83 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 1c3194d5..d089272d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -57,6 +57,7 @@
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "reselect": "^4.1.8",
     "zustand": "^4.4.0"
   },
   "peerDependencies": {
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 7c8137ca..3ca2cf8a 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -2,7 +2,7 @@ import { memo, useMemo, useEffect, useRef, type ComponentType } 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/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
@@ -39,7 +39,7 @@ const selector = (s: ReactFlowState) => ({
 const NodeRenderer = (props: NodeRendererProps) => {
   const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions, onError } =
     useStore(selector, shallow);
-  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
+  const nodeIds = useVisibleNodesIds(props.onlyRenderVisibleElements);
   const resizeObserverRef = useRef<ResizeObserver>();
 
   const resizeObserver = useMemo(() => {
@@ -75,11 +75,11 @@ const NodeRenderer = (props: NodeRendererProps) => {
 
   return (
     <div className="react-flow__nodes" style={containerStyle}>
-      {nodes.map((node) => {
+      {nodeIds.map((nodeId) => {
         return (
           <NodeComponentWrapper
-            key={node.id}
-            id={node.id}
+            key={nodeId}
+            id={nodeId}
             nodeTypes={props.nodeTypes}
             nodeExtent={props.nodeExtent}
             nodeOrigin={props.nodeOrigin}
diff --git a/packages/react/src/hooks/useVisibleNodes.ts b/packages/react/src/hooks/useVisibleNodes.ts
index ddbb2794..56e14674 100644
--- a/packages/react/src/hooks/useVisibleNodes.ts
+++ b/packages/react/src/hooks/useVisibleNodes.ts
@@ -1,21 +1,33 @@
-import { useCallback } from 'react';
 import { getNodesInside } from '@xyflow/system';
+import { createSelector } from 'reselect';
+import { shallow } from 'zustand/shallow';
 
 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]
-    )
-  );
+const visibleNodeIdsSelector = createSelector(
+  [
+    (s: ReactFlowState) => s.nodes,
+    (s: ReactFlowState) => s.width,
+    (s: ReactFlowState) => s.height,
+    (s: ReactFlowState) => s.transform,
+    (_s: ReactFlowState, onlyRenderVisibleNodes: boolean) => onlyRenderVisibleNodes,
+  ],
+  (nodes, width, height, transform, onlyRenderVisible) =>
+    onlyRenderVisible
+      ? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true).map((node) => node.id)
+      : nodes.map((node) => node.id),
+  {
+    memoizeOptions: {
+      resultEqualityCheck: shallow,
+    },
+  }
+);
 
-  return nodes;
+function useVisibleNodeIds(onlyRenderVisible: boolean) {
+  const nodeIds = useStore((s: ReactFlowState) => visibleNodeIdsSelector(s, onlyRenderVisible));
+
+  return nodeIds;
 }
 
-export default useVisibleNodes;
+export default useVisibleNodeIds;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05a5637d..d5ffacff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -235,6 +235,9 @@ importers:
       react-dom:
         specifier: '>=17'
         version: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
+      reselect:
+        specifier: ^4.1.8
+        version: registry.npmjs.org/reselect@4.1.8
       zustand:
         specifier: ^4.4.0
         version: registry.npmjs.org/zustand@4.4.1(@types/react@18.2.24)(react@18.2.0)
@@ -1158,7 +1161,7 @@ packages:
     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}
+    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==, tarball: https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz}
     name: '@colors/colors'
     version: 1.5.0
     engines: {node: '>=0.1.90'}
@@ -1226,7 +1229,7 @@ packages:
     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}
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==, 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'}
@@ -1236,7 +1239,7 @@ packages:
     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}
+    resolution: {integrity: sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==, 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'}
@@ -1247,7 +1250,7 @@ packages:
     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}
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==, 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'}
@@ -1257,7 +1260,7 @@ packages:
     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}
+    resolution: {integrity: sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==, 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'}
@@ -1268,7 +1271,7 @@ packages:
     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}
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==, 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'}
@@ -1278,7 +1281,7 @@ packages:
     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}
+    resolution: {integrity: sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==, 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'}
@@ -1289,7 +1292,7 @@ packages:
     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}
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==, 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'}
@@ -1299,7 +1302,7 @@ packages:
     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}
+    resolution: {integrity: sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==, 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'}
@@ -1310,7 +1313,7 @@ packages:
     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}
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==, 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'}
@@ -1320,7 +1323,7 @@ packages:
     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}
+    resolution: {integrity: sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==, 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'}
@@ -1331,7 +1334,7 @@ packages:
     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}
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==, 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'}
@@ -1341,7 +1344,7 @@ packages:
     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}
+    resolution: {integrity: sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==, 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'}
@@ -1352,7 +1355,7 @@ packages:
     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}
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==, 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'}
@@ -1362,7 +1365,7 @@ packages:
     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}
+    resolution: {integrity: sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==, 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'}
@@ -1373,7 +1376,7 @@ packages:
     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}
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==, 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'}
@@ -1383,7 +1386,7 @@ packages:
     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}
+    resolution: {integrity: sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==, 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'}
@@ -1394,7 +1397,7 @@ packages:
     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}
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==, 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'}
@@ -1404,7 +1407,7 @@ packages:
     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}
+    resolution: {integrity: sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==, 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'}
@@ -1415,7 +1418,7 @@ packages:
     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}
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==, 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'}
@@ -1425,7 +1428,7 @@ packages:
     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}
+    resolution: {integrity: sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==, 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'}
@@ -1436,7 +1439,7 @@ packages:
     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}
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==, 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'}
@@ -1446,7 +1449,7 @@ packages:
     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}
+    resolution: {integrity: sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==, 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'}
@@ -1457,7 +1460,7 @@ packages:
     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}
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==, 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'}
@@ -1467,7 +1470,7 @@ packages:
     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}
+    resolution: {integrity: sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==, 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'}
@@ -1478,7 +1481,7 @@ packages:
     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}
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==, 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'}
@@ -1488,7 +1491,7 @@ packages:
     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}
+    resolution: {integrity: sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==, 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'}
@@ -1499,7 +1502,7 @@ packages:
     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}
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==, 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'}
@@ -1509,7 +1512,7 @@ packages:
     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}
+    resolution: {integrity: sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==, 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'}
@@ -1520,7 +1523,7 @@ packages:
     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}
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==, 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'}
@@ -1530,7 +1533,7 @@ packages:
     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}
+    resolution: {integrity: sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==, 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'}
@@ -1541,7 +1544,7 @@ packages:
     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}
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==, 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'}
@@ -1551,7 +1554,7 @@ packages:
     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}
+    resolution: {integrity: sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==, 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'}
@@ -1562,7 +1565,7 @@ packages:
     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}
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==, 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'}
@@ -1572,7 +1575,7 @@ packages:
     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}
+    resolution: {integrity: sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==, 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'}
@@ -1583,7 +1586,7 @@ packages:
     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}
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==, 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'}
@@ -1593,7 +1596,7 @@ packages:
     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}
+    resolution: {integrity: sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==, 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'}
@@ -1604,7 +1607,7 @@ packages:
     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}
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==, 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'}
@@ -1614,7 +1617,7 @@ packages:
     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}
+    resolution: {integrity: sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==, 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'}
@@ -1625,7 +1628,7 @@ packages:
     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}
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==, 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'}
@@ -1635,7 +1638,7 @@ packages:
     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}
+    resolution: {integrity: sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==, 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'}
@@ -1646,7 +1649,7 @@ packages:
     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}
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==, 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'}
@@ -1656,7 +1659,7 @@ packages:
     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}
+    resolution: {integrity: sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==, 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'}
@@ -1667,7 +1670,7 @@ packages:
     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}
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==, 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'}
@@ -1677,7 +1680,7 @@ packages:
     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}
+    resolution: {integrity: sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==, 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'}
@@ -2314,7 +2317,7 @@ packages:
     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}
+    resolution: {integrity: sha512-8hzgXYVd85hfPh6mJ9yrG26rhgzCmcLO0h1TIl8U31hwmTbfZLzRitFQ/kqMJNbIBCwmNH1RU2QcJnL3d7f69A==, 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'}
@@ -2325,7 +2328,7 @@ packages:
     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}
+    resolution: {integrity: sha512-mFp9GFfuPg+43vlAdQZl0WZpZSE8sEzqL7sr/7Reul5McUHP0BaLsEzwjvD035ESfkY8GBZdLpMinblIbFNljQ==, 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'}
@@ -2336,7 +2339,7 @@ packages:
     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}
+    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}
     name: '@swc/core-linux-arm-gnueabihf'
     version: 1.3.96
     engines: {node: '>=10'}
@@ -2347,7 +2350,7 @@ packages:
     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}
+    resolution: {integrity: sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==, 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'}
@@ -2358,7 +2361,7 @@ packages:
     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}
+    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}
     name: '@swc/core-linux-arm64-musl'
     version: 1.3.96
     engines: {node: '>=10'}
@@ -2369,7 +2372,7 @@ packages:
     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}
+    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}
     name: '@swc/core-linux-x64-gnu'
     version: 1.3.96
     engines: {node: '>=10'}
@@ -2380,7 +2383,7 @@ packages:
     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}
+    resolution: {integrity: sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==, 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'}
@@ -2391,7 +2394,7 @@ packages:
     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}
+    resolution: {integrity: sha512-hjGvvAduA3Un2cZ9iNP4xvTXOO4jL3G9iakhFsgVhpkU73SGmK7+LN8ZVBEu4oq2SUcHO6caWvnZ881cxGuSpg==, 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'}
@@ -2402,7 +2405,7 @@ packages:
     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}
+    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}
     name: '@swc/core-win32-ia32-msvc'
     version: 1.3.96
     engines: {node: '>=10'}
@@ -2413,7 +2416,7 @@ packages:
     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}
+    resolution: {integrity: sha512-4VbSAniIu0ikLf5mBX81FsljnfqjoVGleEkCQv4+zRlyZtO3FHoDPkeLVoy6WRlj7tyrRcfUJ4mDdPkbfTO14g==, 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'}
@@ -2872,6 +2875,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}
@@ -2997,7 +3001,7 @@ packages:
     dev: false
 
   registry.npmjs.org/@types/yauzl@2.10.2:
-    resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.2.tgz}
+    resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==, tarball: https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.2.tgz}
     name: '@types/yauzl'
     version: 2.10.2
     requiresBuild: true
@@ -6262,7 +6266,7 @@ packages:
     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}
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, 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}
@@ -6271,7 +6275,7 @@ packages:
     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}
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, 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}
@@ -10025,6 +10029,12 @@ packages:
     version: 1.0.0
     dev: true
 
+  registry.npmjs.org/reselect@4.1.8:
+    resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==, tarball: https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz}
+    name: reselect
+    version: 4.1.8
+    dev: false
+
   registry.npmjs.org/resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz}
     name: resolve-from
@@ -10344,7 +10354,7 @@ packages:
     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}
+    resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==, tarball: https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz}
     name: sharp
     version: 0.32.6
     engines: {node: '>=14.15.0'}
@@ -11556,7 +11566,7 @@ packages:
       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}
+    resolution: {integrity: sha512-N0aVGFtBgOKd7pIdUiKREwnDhNHRIvpMJbmUw04c1AqEoTiKAKT6iuzcCozO5N/gYMVr0hxrXgLal5OLYXtcsw==, 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]
@@ -11566,7 +11576,7 @@ packages:
     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}
+    resolution: {integrity: sha512-boXzhaHTS5MsTMv48I/JmYp9/fYplXk5nACUDrqV6nD1hzO5PMn5wNg75ATbpkaMaeuD+hjuobeSxn1p4vpqQg==, 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]
@@ -11576,7 +11586,7 @@ packages:
     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}
+    resolution: {integrity: sha512-crKQuS1jrp4vp+Th6EmUqqmAlvYNnzGmwWMLeckmYILrV7zAddu87eJu4hB7V6uV+W1qHZUTw8WXa1w1+8boBw==, 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]
@@ -11586,7 +11596,7 @@ packages:
     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}
+    resolution: {integrity: sha512-Y2fhWe0xepLjl7doIvsJK7mp2h8E+OF6qJsUHRgxFeRWQWi1I6clD2aEQeykHK8Tp+qp8pKFMocj32nFBvuCcg==, 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]
@@ -11596,7 +11606,7 @@ packages:
     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}
+    resolution: {integrity: sha512-uh8rEqH6teaHysEMjinwWBqyNwv4IvgSAwbq/OphP8jObstTYHoR+gFPo8RQUSTaBYy4QVszgi5eO5YLvEQqNA==, 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]
@@ -11606,7 +11616,7 @@ packages:
     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}
+    resolution: {integrity: sha512-JaVj3iM7qyRD6xYGZLL/Gs4mQKfM1zL0f91AwHZLNkk1CrJ6i5kO4ZjhKkwXSpVOTNKW3sX0Q7dExXj85Vv7UQ==, 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]

From 7ea2e664edaf12bfeec2ed3f533fc0b9635c031e Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Fri, 24 Nov 2023 01:02:32 +0100
Subject: [PATCH 17/65] Fix: pass a correct nodeLookup object in
 setDefaultNodesAndEdges()

This ensures `nodeLookup` is filled correctly at the first render of uncontrolled `ReactFlow`. (This was an issue before, but it caused severe visual issues with changes from previous commits.)
---
 packages/react/src/store/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 49c7c688..295d1d24 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -74,7 +74,8 @@ const createRFStore = ({
         };
 
         if (hasDefaultNodes) {
-          nextState.nodes = adoptUserProvidedNodes(nodes, new Map(), {
+          const { nodeLookup } = get();
+          nextState.nodes = adoptUserProvidedNodes(nodes, nodeLookup, {
             nodeOrigin: get().nodeOrigin,
             elevateNodesOnSelect: get().elevateNodesOnSelect,
           });

From d1a5bc75ab711c5acca651a303601819faa6a169 Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Fri, 24 Nov 2023 22:24:03 +0100
Subject: [PATCH 18/65] Optimize MiniMapNodes like NodeRenderer

---
 .../MiniMap/MiniMapNodes.tsx                  | 117 +++++++++++++-----
 1 file changed, 83 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index 80ac09be..f4e40e00 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -1,21 +1,30 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { memo } from 'react';
+import { ComponentType, memo, MouseEvent } from 'react';
 import { shallow } from 'zustand/shallow';
-import { getNodePositionWithOrigin } from '@xyflow/system';
+import { NodeOrigin, 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';
+import { createSelector } from 'reselect';
 
 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 = createSelector(
+  [(s: ReactFlowState) => s.nodes],
+  (nodes) =>
+    nodes
+      .filter((node) => !node.hidden && (node.computed?.width || node.width) && (node.computed?.height || node.height))
+      .map((node) => node.id),
+  {
+    memoizeOptions: {
+      resultEqualityCheck: shallow,
+    },
+  }
+);
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
@@ -28,8 +37,8 @@ function MiniMapNodes({
   // a component properly.
   nodeComponent: NodeComponent = MiniMapNode,
   onClick,
-}: MiniMapNodes) {
-  const nodes = useStore(selectorNodes, shallow);
+}: MiniMapNodesProps) {
+  const nodes = useStore(selectorNodeIds);
   const nodeOrigin = useStore(selector);
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -39,33 +48,73 @@ 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}
-          />
-        );
-      })}
+      {nodes.map((nodeId) => (
+        <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 = useStore((s) => s.nodeLookup.get(id));
+  if (!node) {
+    return null;
+  }
+
+  const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+
+  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);

From d4484be0c39abd396c506de1be69c5d460279873 Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Sat, 25 Nov 2023 02:05:45 +0100
Subject: [PATCH 19/65] Document the design decisions

---
 .../MiniMap/MiniMapNodes.tsx                  |  5 ++++
 .../src/container/NodeRenderer/index.tsx      | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index f4e40e00..0f22de5f 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -49,6 +49,11 @@ function MiniMapNodes({
   return (
     <>
       {nodes.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}
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 3ca2cf8a..c89914c8 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -77,6 +77,29 @@ const NodeRenderer = (props: NodeRendererProps) => {
     <div className="react-flow__nodes" style={containerStyle}>
       {nodeIds.map((nodeId) => {
         return (
+          // 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.
           <NodeComponentWrapper
             key={nodeId}
             id={nodeId}

From 7193b55ff2add22333b5be41073772511a5ebdf2 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 27 Nov 2023 11:29:43 +0100
Subject: [PATCH 20/65] chore(examples): cleanup

---
 examples/svelte/src/components/Header/Header.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 7d229796..ad34d289 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -4,7 +4,7 @@
 
 	const routes = [
 		'add-node-on-drop',
-		'colormode',
+		'color-mode',
 		'custom-connection-line',
 		'customnode',
 		'dagre',

From 9f538c6b7ceb8c1b5cca9c413f24ea19de86aad8 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 12:33:54 +0100
Subject: [PATCH 21/65] fix(svelte) split edges into internal/external.
 external edges dont require id, source, target anymore

---
 .../components/EdgeWrapper/EdgeWrapper.svelte |  2 +-
 .../lib/components/edges/BezierEdge.svelte    |  2 +-
 .../edges/InternalBezierEdge.svelte           | 29 ++++++++++++++++++
 .../edges/InternalSmoothStepEdge.svelte       | 29 ++++++++++++++++++
 .../components/edges/InternalStepEdge.svelte  | 30 +++++++++++++++++++
 .../edges/InternalStraightEdge.svelte         | 27 +++++++++++++++++
 .../components/edges/SmoothStepEdge.svelte    |  2 +-
 .../src/lib/components/edges/StepEdge.svelte  |  2 +-
 .../lib/components/edges/StraightEdge.svelte  |  2 +-
 .../svelte/src/lib/store/initial-store.ts     |  8 ++---
 10 files changed, 124 insertions(+), 9 deletions(-)
 create mode 100644 packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/InternalStepEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte

diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 7a8df68c..7f5b9bbd 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -6,7 +6,7 @@
   import { errorMessages, getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
+  import BezierEdge from '$lib/components/edges/InternalBezierEdge.svelte';
   import type { EdgeLayouted, Edge } from '$lib/types';
   import { get } from 'svelte/store';
 
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
index 60921eb6..56ccaf31 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
@@ -4,7 +4,7 @@
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = Partial<EdgeProps>;
 
   $: [path, labelX, labelY] = getBezierPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte b/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte
new file mode 100644
index 00000000..a1ca0658
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getBezierPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+    sourcePosition: $$props.sourcePosition,
+    targetPosition: $$props.targetPosition
+  });
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  label={$$props.label}
+  labelStyle={$$props.labelStyle}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte
new file mode 100644
index 00000000..73324a89
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+    sourcePosition: $$props.sourcePosition,
+    targetPosition: $$props.targetPosition
+  });
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  label={$$props.label}
+  labelStyle={$$props.labelStyle}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte b/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte
new file mode 100644
index 00000000..f793376b
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY,
+    sourcePosition: $$props.sourcePosition,
+    targetPosition: $$props.targetPosition,
+    borderRadius: 0
+  });
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  label={$$props.label}
+  labelStyle={$$props.labelStyle}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte b/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte
new file mode 100644
index 00000000..8cc984d7
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { getStraightPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  $: [path, labelX, labelY] = getStraightPath({
+    sourceX: $$props.sourceX,
+    sourceY: $$props.sourceY,
+    targetX: $$props.targetX,
+    targetY: $$props.targetY
+  });
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  label={$$props.label}
+  labelStyle={$$props.labelStyle}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
index 30872b68..39acb6e6 100644
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
@@ -4,7 +4,7 @@
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = Partial<EdgeProps>;
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
index 65012595..ac6118ca 100644
--- a/packages/svelte/src/lib/components/edges/StepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StepEdge.svelte
@@ -4,7 +4,7 @@
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = Partial<EdgeProps>;
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
index 50f282ff..9e6c88da 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -4,7 +4,7 @@
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = Partial<EdgeProps>;
 
   $: [path, labelX, labelY] = getStraightPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index dbbb17fc..bf0166ab 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -24,10 +24,10 @@ import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 import GroupNode from '$lib/components/nodes/GroupNode.svelte';
-import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
-import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
-import StepEdge from '$lib/components/edges/StepEdge.svelte';
+import BezierEdge from '$lib/components/edges/InternalBezierEdge.svelte';
+import StraightEdge from '$lib/components/edges/InternalStraightEdge.svelte';
+import SmoothStepEdge from '$lib/components/edges/InternalSmoothStepEdge.svelte';
+import StepEdge from '$lib/components/edges/InternalStepEdge.svelte';
 import type {
   NodeTypes,
   EdgeTypes,

From 0393409e898d4c462110c35190a192bb17ed1696 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 13:03:50 +0100
Subject: [PATCH 22/65] fix(system) exportet Optional type, fix(svelte)
 adjusted exported edge types

---
 .../svelte/src/routes/examples/customnode/CustomNode.svelte   | 2 +-
 packages/svelte/src/lib/components/edges/BezierEdge.svelte    | 4 ++--
 .../svelte/src/lib/components/edges/SmoothStepEdge.svelte     | 4 ++--
 packages/svelte/src/lib/components/edges/StepEdge.svelte      | 4 ++--
 packages/svelte/src/lib/components/edges/StraightEdge.svelte  | 3 ++-
 packages/system/src/types/utils.ts                            | 2 ++
 packages/system/src/utils/index.ts                            | 1 +
 7 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
index 25d37d32..51ba33ea 100644
--- a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Writable } from 'svelte/store';
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, BezierEdge, SmoothStepEdge } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
index 56ccaf31..ef5fd3db 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { getBezierPath } from '@xyflow/system';
+  import { getBezierPath, type Optional } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = Partial<EdgeProps>;
+  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
 
   $: [path, labelX, labelY] = getBezierPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
index 39acb6e6..f528da0e 100644
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { getSmoothStepPath } from '@xyflow/system';
+  import { getSmoothStepPath, type Optional } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = Partial<EdgeProps>;
+  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
index ac6118ca..b0860d03 100644
--- a/packages/svelte/src/lib/components/edges/StepEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StepEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { getSmoothStepPath } from '@xyflow/system';
+  import { getSmoothStepPath, type Optional } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = Partial<EdgeProps>;
+  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
index 9e6c88da..b83424a0 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
+  import type { Optional } from '@xyflow/system/dist/esm/utils/types';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = Partial<EdgeProps>;
+  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
 
   $: [path, labelX, labelY] = getStraightPath({
     sourceX: $$props.sourceX,
diff --git a/packages/system/src/types/utils.ts b/packages/system/src/types/utils.ts
index 908e95f1..6ebb0744 100644
--- a/packages/system/src/types/utils.ts
+++ b/packages/system/src/types/utils.ts
@@ -1,3 +1,5 @@
+import type { Optional } from '../utils/types';
+
 export enum Position {
   Left = 'left',
   Top = 'top',
diff --git a/packages/system/src/utils/index.ts b/packages/system/src/utils/index.ts
index 380b7658..4937033c 100644
--- a/packages/system/src/utils/index.ts
+++ b/packages/system/src/utils/index.ts
@@ -5,3 +5,4 @@ export * from './general';
 export * from './marker';
 export * from './node-toolbar';
 export * from './store';
+export * from './types';

From 43c78d6c115f3c911ea3020b1097a0c82b2d5973 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 13:04:46 +0100
Subject: [PATCH 23/65] forgotten file

---
 packages/svelte/src/lib/components/edges/StraightEdge.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
index b83424a0..979c4351 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getStraightPath } from '@xyflow/system';
-  import type { Optional } from '@xyflow/system/dist/esm/utils/types';
+  import { getStraightPath, type Optional } from '@xyflow/system';
 
   import type { EdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';

From 2e15fd72ee5d4076704b0cb63f6ce65e55be7e3f Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 14:30:26 +0100
Subject: [PATCH 24/65] fix(react) added internal edge components, to make id,
 source, handle optional on exported edges

---
 .../react/src/components/Edges/BezierEdge.tsx |   6 +-
 .../components/Edges/BezierEdgeInternal.tsx   |  59 +++++++++
 .../src/components/Edges/SimpleBezierEdge.tsx |   6 +-
 .../Edges/SimpleBezierEdgeInternal.tsx        | 124 ++++++++++++++++++
 .../src/components/Edges/SmoothStepEdge.tsx   |   6 +-
 .../Edges/SmoothStepEdgeInternal.tsx          |  60 +++++++++
 .../react/src/components/Edges/StepEdge.tsx   |   3 +-
 .../src/components/Edges/StepEdgeInternal.tsx |  15 +++
 .../src/components/Edges/StraightEdge.tsx     |   6 +-
 .../components/Edges/StraightEdgeInternal.tsx |  48 +++++++
 .../react/src/components/Edges/internal.ts    |   5 +
 .../react/src/container/EdgeRenderer/utils.ts |   2 +-
 .../react/src/container/ReactFlow/index.tsx   |   2 +-
 13 files changed, 331 insertions(+), 11 deletions(-)
 create mode 100644 packages/react/src/components/Edges/BezierEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/StepEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/StraightEdgeInternal.tsx
 create mode 100644 packages/react/src/components/Edges/internal.ts

diff --git a/packages/react/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx
index 8f446393..9187131c 100644
--- a/packages/react/src/components/Edges/BezierEdge.tsx
+++ b/packages/react/src/components/Edges/BezierEdge.tsx
@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { Position, getBezierPath } from '@xyflow/system';
+import { type Optional, Position, getBezierPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
 const BezierEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -23,7 +24,7 @@ const BezierEdge = memo(
     markerStart,
     pathOptions,
     interactionWidth,
-  }: BezierEdgeProps) => {
+  }: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getBezierPath({
       sourceX,
       sourceY,
@@ -36,6 +37,7 @@ const BezierEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/BezierEdgeInternal.tsx b/packages/react/src/components/Edges/BezierEdgeInternal.tsx
new file mode 100644
index 00000000..8f446393
--- /dev/null
+++ b/packages/react/src/components/Edges/BezierEdgeInternal.tsx
@@ -0,0 +1,59 @@
+import { memo } from 'react';
+import { Position, getBezierPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { BezierEdgeProps } from '../../types';
+
+const BezierEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    pathOptions,
+    interactionWidth,
+  }: BezierEdgeProps) => {
+    const [path, labelX, labelY] = getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      curvature: pathOptions?.curvature,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+BezierEdge.displayName = 'BezierEdge';
+
+export default BezierEdge;
diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index d9fa50c4..1132e216 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Position, getBezierEdgeCenter } from '@xyflow/system';
+import { type Optional, Position, getBezierEdgeCenter } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
@@ -73,6 +73,7 @@ export function getSimpleBezierPath({
 
 const SimpleBezierEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -89,7 +90,7 @@ const SimpleBezierEdge = memo(
     markerEnd,
     markerStart,
     interactionWidth,
-  }: EdgeProps) => {
+  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
@@ -101,6 +102,7 @@ const SimpleBezierEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx b/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
new file mode 100644
index 00000000..d9fa50c4
--- /dev/null
+++ b/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
@@ -0,0 +1,124 @@
+import { memo } from 'react';
+import { Position, getBezierEdgeCenter } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition?: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition?: Position;
+}
+
+interface GetControlParams {
+  pos: Position;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
+  if (pos === Position.Left || pos === Position.Right) {
+    return [0.5 * (x1 + x2), y1];
+  }
+
+  return [x1, 0.5 * (y1 + y2)];
+}
+
+export function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
+  const [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+  });
+  const [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+  });
+  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  });
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY,
+  ];
+}
+
+const SimpleBezierEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  }: EdgeProps) => {
+    const [path, labelX, labelY] = getSimpleBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+
+export default SimpleBezierEdge;
diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx
index be635a4e..a6965ca7 100644
--- a/packages/react/src/components/Edges/SmoothStepEdge.tsx
+++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx
@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { Position, getSmoothStepPath } from '@xyflow/system';
+import { type Optional, Position, getSmoothStepPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
 const SmoothStepEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -23,7 +24,7 @@ const SmoothStepEdge = memo(
     markerStart,
     pathOptions,
     interactionWidth,
-  }: SmoothStepEdgeProps) => {
+  }: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
@@ -37,6 +38,7 @@ const SmoothStepEdge = memo(
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx b/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
new file mode 100644
index 00000000..be635a4e
--- /dev/null
+++ b/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { Position, getSmoothStepPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { SmoothStepEdgeProps } from '../../types';
+
+const SmoothStepEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
+    markerEnd,
+    markerStart,
+    pathOptions,
+    interactionWidth,
+  }: SmoothStepEdgeProps) => {
+    const [path, labelX, labelY] = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      borderRadius: pathOptions?.borderRadius,
+      offset: pathOptions?.offset,
+    });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+SmoothStepEdge.displayName = 'SmoothStepEdge';
+
+export default SmoothStepEdge;
diff --git a/packages/react/src/components/Edges/StepEdge.tsx b/packages/react/src/components/Edges/StepEdge.tsx
index df2646a7..8edd819a 100644
--- a/packages/react/src/components/Edges/StepEdge.tsx
+++ b/packages/react/src/components/Edges/StepEdge.tsx
@@ -1,9 +1,10 @@
 import { memo, useMemo } from 'react';
+import { Optional } from '@xyflow/system';
 
 import SmoothStepEdge from './SmoothStepEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const StepEdge = memo((props: SmoothStepEdgeProps) => (
+const StepEdge = memo((props: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => (
   <SmoothStepEdge
     {...props}
     pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
diff --git a/packages/react/src/components/Edges/StepEdgeInternal.tsx b/packages/react/src/components/Edges/StepEdgeInternal.tsx
new file mode 100644
index 00000000..2772424d
--- /dev/null
+++ b/packages/react/src/components/Edges/StepEdgeInternal.tsx
@@ -0,0 +1,15 @@
+import { memo, useMemo } from 'react';
+
+import SmoothStepEdgeInternal from './SmoothStepEdgeInternal';
+import type { SmoothStepEdgeProps } from '../../types';
+
+const StepEdge = memo((props: SmoothStepEdgeProps) => (
+  <SmoothStepEdgeInternal
+    {...props}
+    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
+  />
+));
+
+StepEdge.displayName = 'StepEdge';
+
+export default StepEdge;
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index 06f4a161..094eb7f9 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -1,11 +1,12 @@
 import { memo } from 'react';
-import { getStraightPath } from '@xyflow/system';
+import { type Optional, getStraightPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
 
 const StraightEdge = memo(
   ({
+    id,
     sourceX,
     sourceY,
     targetX,
@@ -20,11 +21,12 @@ const StraightEdge = memo(
     markerEnd,
     markerStart,
     interactionWidth,
-  }: EdgeProps) => {
+  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
     const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
     return (
       <BaseEdge
+        id={id}
         path={path}
         labelX={labelX}
         labelY={labelY}
diff --git a/packages/react/src/components/Edges/StraightEdgeInternal.tsx b/packages/react/src/components/Edges/StraightEdgeInternal.tsx
new file mode 100644
index 00000000..06f4a161
--- /dev/null
+++ b/packages/react/src/components/Edges/StraightEdgeInternal.tsx
@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { getStraightPath } from '@xyflow/system';
+
+import BaseEdge from './BaseEdge';
+import type { EdgeProps } from '../../types';
+
+const StraightEdge = memo(
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    style,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  }: EdgeProps) => {
+    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+
+    return (
+      <BaseEdge
+        path={path}
+        labelX={labelX}
+        labelY={labelY}
+        label={label}
+        labelStyle={labelStyle}
+        labelShowBg={labelShowBg}
+        labelBgStyle={labelBgStyle}
+        labelBgPadding={labelBgPadding}
+        labelBgBorderRadius={labelBgBorderRadius}
+        style={style}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+        interactionWidth={interactionWidth}
+      />
+    );
+  }
+);
+
+StraightEdge.displayName = 'StraightEdge';
+
+export default StraightEdge;
diff --git a/packages/react/src/components/Edges/internal.ts b/packages/react/src/components/Edges/internal.ts
new file mode 100644
index 00000000..11b86932
--- /dev/null
+++ b/packages/react/src/components/Edges/internal.ts
@@ -0,0 +1,5 @@
+export { default as SimpleBezierEdge } from './SimpleBezierEdgeInternal';
+export { default as SmoothStepEdge } from './SmoothStepEdgeInternal';
+export { default as StepEdge } from './StepEdgeInternal';
+export { default as StraightEdge } from './StraightEdgeInternal';
+export { default as BezierEdge } from './BezierEdgeInternal';
diff --git a/packages/react/src/container/EdgeRenderer/utils.ts b/packages/react/src/container/EdgeRenderer/utils.ts
index 0e8f39d3..03e0dba3 100644
--- a/packages/react/src/container/EdgeRenderer/utils.ts
+++ b/packages/react/src/container/EdgeRenderer/utils.ts
@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
 
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 1b3dc796..d780046e 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -12,7 +12,7 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';

From f871617abeac66635d2ba4c3036e68802426a8c5 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 14:35:18 +0100
Subject: [PATCH 25/65] renamed internal files in svelte for better
 alphabetical ordering

---
 .../src/lib/components/EdgeWrapper/EdgeWrapper.svelte      | 2 +-
 ...InternalBezierEdge.svelte => BezierEdgeInternal.svelte} | 0
 ...SmoothStepEdge.svelte => SmoothStepEdgeInternal.svelte} | 0
 .../{InternalStepEdge.svelte => StepEdgeInternal.svelte}   | 0
 ...rnalStraightEdge.svelte => StraightEdgeInternal.svelte} | 0
 packages/svelte/src/lib/components/edges/internal.ts       | 4 ++++
 packages/svelte/src/lib/store/initial-store.ts             | 7 +++----
 7 files changed, 8 insertions(+), 5 deletions(-)
 rename packages/svelte/src/lib/components/edges/{InternalBezierEdge.svelte => BezierEdgeInternal.svelte} (100%)
 rename packages/svelte/src/lib/components/edges/{InternalSmoothStepEdge.svelte => SmoothStepEdgeInternal.svelte} (100%)
 rename packages/svelte/src/lib/components/edges/{InternalStepEdge.svelte => StepEdgeInternal.svelte} (100%)
 rename packages/svelte/src/lib/components/edges/{InternalStraightEdge.svelte => StraightEdgeInternal.svelte} (100%)
 create mode 100644 packages/svelte/src/lib/components/edges/internal.ts

diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 7f5b9bbd..fa4adc92 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -6,7 +6,7 @@
   import { errorMessages, getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import BezierEdge from '$lib/components/edges/InternalBezierEdge.svelte';
+  import { BezierEdge } from '$lib/components/edges/internal';
   import type { EdgeLayouted, Edge } from '$lib/types';
   import { get } from 'svelte/store';
 
diff --git a/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
similarity index 100%
rename from packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte
rename to packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
diff --git a/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
similarity index 100%
rename from packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte
rename to packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
diff --git a/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
similarity index 100%
rename from packages/svelte/src/lib/components/edges/InternalStepEdge.svelte
rename to packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
diff --git a/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
similarity index 100%
rename from packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte
rename to packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
diff --git a/packages/svelte/src/lib/components/edges/internal.ts b/packages/svelte/src/lib/components/edges/internal.ts
new file mode 100644
index 00000000..f2582b79
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/internal.ts
@@ -0,0 +1,4 @@
+export { default as BezierEdge } from './BezierEdgeInternal.svelte';
+export { default as StraightEdge } from './StraightEdgeInternal.svelte';
+export { default as SmoothStepEdge } from './SmoothStepEdgeInternal.svelte';
+export { default as StepEdge } from './StepEdgeInternal.svelte';
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index bf0166ab..65acad86 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -24,10 +24,9 @@ import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 import GroupNode from '$lib/components/nodes/GroupNode.svelte';
-import BezierEdge from '$lib/components/edges/InternalBezierEdge.svelte';
-import StraightEdge from '$lib/components/edges/InternalStraightEdge.svelte';
-import SmoothStepEdge from '$lib/components/edges/InternalSmoothStepEdge.svelte';
-import StepEdge from '$lib/components/edges/InternalStepEdge.svelte';
+
+import { BezierEdge, StraightEdge, StepEdge, SmoothStepEdge } from '$lib/components/edges/internal';
+
 import type {
   NodeTypes,
   EdgeTypes,

From 1eea7209a3b73bf4b90f49d3134ebdca6e209a0a Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 14:45:21 +0100
Subject: [PATCH 26/65] fix(svelte) fix getIntersectingNodes, closes #3675

---
 packages/svelte/src/lib/hooks/useSvelteFlow.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index fb1419ec..3c266f43 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -136,12 +136,12 @@ export function useSvelteFlow(): {
     ) => {
       const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
 
-      if (!nodeRect || !node) {
+      if (!nodeRect) {
         return [];
       }
 
       return (nodesToIntersect || get(nodes)).filter((n) => {
-        if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
+        if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 

From 3f94dfa84cdab9aae690599214a6c1650f06d3d6 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 15:48:19 +0100
Subject: [PATCH 27/65] feat(svelte) added onedgecreate function

---
 .../svelte/src/routes/examples/edges/+page.svelte     | 11 ++++++++++-
 .../svelte/src/lib/components/Handle/Handle.svelte    | 11 ++++++++++-
 .../src/lib/container/SvelteFlow/SvelteFlow.svelte    |  2 ++
 packages/svelte/src/lib/container/SvelteFlow/types.ts |  5 ++++-
 packages/svelte/src/lib/container/SvelteFlow/utils.ts |  1 +
 packages/svelte/src/lib/store/initial-store.ts        |  6 ++++--
 packages/svelte/src/lib/types/general.ts              |  4 +++-
 7 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 403b0ef6..575984ca 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -145,7 +145,16 @@
 	]);
 </script>
 
-<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
+<SvelteFlow
+	{nodes}
+	{edges}
+	fitView
+	nodeDragThreshold={2}
+	onedgecreate={(e) => {
+		console.log('on edge create', e);
+		return e;
+	}}
+>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 655bcc6b..7d3010bd 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -55,6 +55,7 @@
     isValidConnection,
     lib,
     addEdge,
+    onedgecreate,
     panBy,
     cancelConnection,
     updateConnection,
@@ -80,8 +81,16 @@
         cancelConnection,
         panBy,
         onConnect: (connection) => {
-          addEdge(connection);
+          if ($onedgecreate) {
+            const modifiedConnection = $onedgecreate(connection);
+            if (modifiedConnection) {
+              addEdge(modifiedConnection);
+              dispatch('connect', { connection });
+            }
+            return;
+          }
 
+          addEdge(connection);
           // @todo: should we change/ improve the stuff we are passing here?
           // instead of source/target we could pass fromNodeId, fromHandleId, etc
           dispatch('connect', { connection });
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 59bff1f4..21ceec49 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -71,6 +71,7 @@
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
   export let onerror: $$Props['onerror'] = undefined;
   export let ondelete: $$Props['ondelete'] = undefined;
+  export let onedgecreate: $$Props['onedgecreate'] = undefined;
   export let attributionPosition: $$Props['attributionPosition'] = undefined;
   export let proOptions: $$Props['proOptions'] = undefined;
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
@@ -149,6 +150,7 @@
       autoPanOnNodeDrag,
       onerror,
       ondelete,
+      onedgecreate,
       connectionMode,
       nodeDragThreshold
     };
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index daab48e9..9116dc60 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -26,7 +26,8 @@ import type {
   EdgeTypes,
   DefaultEdgeOptions,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 
@@ -89,4 +90,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveEnd?: OnMoveEnd;
   onerror?: OnError;
   ondelete?: OnDelete;
+
+  onedgecreate?: OnEdgeCreate;
 };
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index 9abdb3e9..0281cd55 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -64,6 +64,7 @@ export type UpdatableStoreProps = {
   connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
   onerror?: UnwrapWritable<SvelteFlowStore['onerror']>;
   ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
+  onedgecreate?: UnwrapWritable<SvelteFlowStore['onedgecreate']>;
   nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
 };
 
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index dbbb17fc..8f358cf9 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -35,7 +35,8 @@ import type {
   Node,
   Edge,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -130,6 +131,7 @@ export const getInitialStore = ({
     lib: readable<string>('svelte'),
     onlyRenderVisibleElements: writable<boolean>(false),
     onerror: writable<OnError>(devWarn),
-    ondelete: writable<OnDelete>(undefined)
+    ondelete: writable<OnDelete>(undefined),
+    onedgecreate: writable<OnEdgeCreate>(undefined)
   };
 };
diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts
index 14764318..62666705 100644
--- a/packages/svelte/src/lib/types/general.ts
+++ b/packages/svelte/src/lib/types/general.ts
@@ -4,7 +4,8 @@ import type {
   HandleType,
   Position,
   XYPosition,
-  ConnectingHandle
+  ConnectingHandle,
+  Connection
 } from '@xyflow/system';
 
 import type { Node } from './nodes';
@@ -35,3 +36,4 @@ export type HandleComponentProps = {
 export type FitViewOptions = FitViewOptionsBase<Node>;
 
 export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
+export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;

From a1e585fdccce432e237ad85b45d459223d0ec38c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Nov 2023 16:35:44 +0100
Subject: [PATCH 28/65] refactor(css-vars): prefix with xy and fix bgColor prop
 closes #3669

---
 .../react/src/examples/ColorMode/index.tsx    |   2 +
 .../react/src/examples/ColorMode/style.css    |   0
 .../routes/examples/customnode/+page.svelte   |   2 +-
 .../Background/Background.tsx                 |   4 +-
 .../additional-components/MiniMap/MiniMap.tsx |   8 +-
 .../lib/plugins/Background/Background.svelte  |   4 +-
 .../lib/plugins/Controls/ControlButton.svelte |  10 +-
 .../src/lib/plugins/Minimap/Minimap.svelte    |   8 +-
 packages/system/src/styles/base.css           |  24 ++--
 packages/system/src/styles/init.css           | 108 ++++++++---------
 packages/system/src/styles/style.css          | 109 +++++++++---------
 11 files changed, 144 insertions(+), 135 deletions(-)
 create mode 100644 examples/react/src/examples/ColorMode/style.css

diff --git a/examples/react/src/examples/ColorMode/index.tsx b/examples/react/src/examples/ColorMode/index.tsx
index f867c650..eae8ad86 100644
--- a/examples/react/src/examples/ColorMode/index.tsx
+++ b/examples/react/src/examples/ColorMode/index.tsx
@@ -15,6 +15,8 @@ import {
   Position,
 } from '@xyflow/react';
 
+import './style.css';
+
 const nodeDefaults = {
   sourcePosition: Position.Right,
   targetPosition: Position.Left,
diff --git a/examples/react/src/examples/ColorMode/style.css b/examples/react/src/examples/ColorMode/style.css
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/svelte/src/routes/examples/customnode/+page.svelte b/examples/svelte/src/routes/examples/customnode/+page.svelte
index 14130a47..123932f9 100644
--- a/examples/svelte/src/routes/examples/customnode/+page.svelte
+++ b/examples/svelte/src/routes/examples/customnode/+page.svelte
@@ -85,7 +85,7 @@
 	{nodes}
 	{edges}
 	{nodeTypes}
-	style="--background-color: {$bgColor}"
+	style="--xy-background-color: {$bgColor}"
 	fitView
 	on:connect={onConnect}
 >
diff --git a/packages/react/src/additional-components/Background/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx
index 843daf19..3e71d723 100644
--- a/packages/react/src/additional-components/Background/Background.tsx
+++ b/packages/react/src/additional-components/Background/Background.tsx
@@ -55,8 +55,8 @@ function Background({
         {
           ...style,
           ...containerStyle,
-          '--background-color-props': bgColor,
-          '--background-pattern-color-props': color,
+          '--xy-background-color-props': bgColor,
+          '--xy-background-pattern-color-props': color,
         } as CSSProperties
       }
       ref={ref}
diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
index 33848836..8d1f0538 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
@@ -129,10 +129,10 @@ function MiniMap({
       style={
         {
           ...style,
-          '--minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
-          '--minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
-          '--minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
-          '--minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
+          '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+          '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
+          '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
+          '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
         } as CSSProperties
       }
       className={cc(['react-flow__minimap', className])}
diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index 67689ab9..c6a67d48 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -45,8 +45,8 @@
 <svg
   class={cc(['svelte-flow__background', className])}
   data-testid="svelte-flow__background"
-  style:--background-color-props={bgColor}
-  style:--background-pattern-color-props={patternColor}
+  style:--xy-background-color-props={bgColor}
+  style:--xy-background-pattern-color-props={patternColor}
 >
   <pattern
     id={patternId}
diff --git a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
index bd73ee30..be64f19a 100644
--- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
@@ -15,11 +15,11 @@
   type="button"
   on:click
   class={cc(['svelte-flow__controls-button', className])}
-  style:--controls-button-background-color-props={bgColor}
-  style:--controls-button-background-color-hover-props={bgColorHover}
-  style:--controls-button-color-props={color}
-  style:--controls-button-color-hover-props={colorHover}
-  style:--controls-button-border-color-props={borderColor}
+  style:--xy-controls-button-background-color-props={bgColor}
+  style:--xy-controls-button-background-color-hover-props={bgColorHover}
+  style:--xy-controls-button-color-props={color}
+  style:--xy-controls-button-color-hover-props={colorHover}
+  style:--xy-controls-button-border-color-props={borderColor}
   {...$$restProps}
 >
   <slot class="button-svg" />
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index 67f93698..7b2896d8 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -94,10 +94,10 @@
       viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
       role="img"
       aria-labelledby={labelledBy}
-      style:--minimap-background-color-props={bgColor}
-      style:--minimap-mask-color-props={maskColor}
-      style:--minimap-mask-stroke-color-props={maskStrokeColor}
-      style:--minimap-mask-stroke-width-props={maskStrokeWidth}
+      style:--xy-minimap-background-color-props={bgColor}
+      style:--xy-minimap-mask-color-props={maskColor}
+      style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
+      style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
       use:interactive={{
         panZoom: $panZoom,
         viewport,
diff --git a/packages/system/src/styles/base.css b/packages/system/src/styles/base.css
index 1cb026b6..3a5afe6c 100644
--- a/packages/system/src/styles/base.css
+++ b/packages/system/src/styles/base.css
@@ -1,38 +1,38 @@
 .xy-flow {
-  --node-border-default: 1px solid #bbb;
-  --node-border-selected-default: 1px solid #555;
+  --xy-node-border-default: 1px solid #bbb;
+  --xy-node-border-selected-default: 1px solid #555;
 
-  --handle-background-color-default: #333;
+  --xy-handle-background-color-default: #333;
 
-  --selection-background-color-default: rgba(150, 150, 180, 0.1);
-  --selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
+  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
+  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
 }
 
 .xy-flow.dark {
-  --node-color-default: #f8f8f8;
+  --xy-node-color-default: #f8f8f8;
 }
 
 .xy-flow__handle {
-  background-color: var(--handle-background-color, var(--handle-background-color-default));
+  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
 }
 
 .xy-flow__node-input,
 .xy-flow__node-default,
 .xy-flow__node-output,
 .xy-flow__node-group {
-  border: var(--node-border, var(--node-border-default));
-  color: var(--node-color, var(--node-color-default));
+  border: var(--xy-node-border, var(--xy-node-border-default));
+  color: var(--xy-node-color, var(--xy-node-color-default));
 
   &.selected,
   &:focus,
   &:focus-visible {
     outline: none;
-    border: var(--node-border-selected, var(--node-border-selected-default));
+    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
   }
 }
 
 .xy-flow__nodesselection-rect,
 .xy-flow__selection {
-  background: var(--selection-background-color, var(--selection-background-color-default));
-  border: var(--selection-border, var(--selection-border-default));
+  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
+  border: var(--xy-selection-border, var(--xy-selection-border-default));
 }
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 474b1322..2aff146f 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -1,51 +1,55 @@
 /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
 
 .xy-flow {
-  --edge-stroke-default: #b1b1b7;
-  --edge-stroke-width-default: 1;
-  --edge-stroke-selected-default: #555;
+  --xy-edge-stroke-default: #b1b1b7;
+  --xy-edge-stroke-width-default: 1;
+  --xy-edge-stroke-selected-default: #555;
 
-  --connectionline-stroke-default: #b1b1b7;
-  --connectionline-stroke-width-default: 1;
+  --xy-connectionline-stroke-default: #b1b1b7;
+  --xy-connectionline-stroke-width-default: 1;
 
-  --attribution-background-color-default: rgba(255, 255, 255, 0.5);
+  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
 
-  --minimap-background-color-default: #fff;
-  --minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
-  --minimap-node-background-color-default: #e2e2e2;
-  --minimap-node-stroke-color-default: transparent;
-  --minimap-node-stroke-width-default: 2;
+  --xy-minimap-background-color-default: #fff;
+  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
+  --xy-minimap-node-background-color-default: #e2e2e2;
+  --xy-minimap-node-stroke-color-default: transparent;
+  --xy-minimap-node-stroke-width-default: 2;
 
-  --background-color-default: transparent;
-  --background-pattern-dots-color-default: #91919a;
-  --background-pattern-lines-color-default: #eee;
-  --background-pattern-cross-color-default: #e2e2e2;
+  --xy-background-color-default: transparent;
+  --xy-background-pattern-dots-color-default: #91919a;
+  --xy-background-pattern-lines-color-default: #eee;
+  --xy-background-pattern-cross-color-default: #e2e2e2;
 }
 
 .xy-flow.dark {
-  --edge-stroke-default: #3c3c3c;
-  --edge-stroke-width-default: 1;
-  --edge-stroke-selected-default: #727272;
+  --xy-edge-stroke-default: #3c3c3c;
+  --xy-edge-stroke-width-default: 1;
+  --xy-edge-stroke-selected-default: #727272;
 
-  --connectionline-stroke-default: #b1b1b7;
-  --connectionline-stroke-width-default: 1;
+  --xy-connectionline-stroke-default: #b1b1b7;
+  --xy-connectionline-stroke-width-default: 1;
 
-  --attribution-background-color-default: rgba(150, 150, 150, 0.25);
+  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
 
-  --minimap-background-color-default: #141414;
-  --minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
-  --minimap-node-background-color-default: #2b2b2b;
-  --minimap-node-stroke-color-default: transparent;
-  --minimap-node-stroke-width-default: 2;
+  --xy-minimap-background-color-default: #141414;
+  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
+  --xy-minimap-node-background-color-default: #2b2b2b;
+  --xy-minimap-node-stroke-color-default: transparent;
+  --xy-minimap-node-stroke-width-default: 2;
 
-  --background-color-default: #141414;
-  --background-pattern-dots-color-default: #777;
-  --background-pattern-lines-color-default: #777;
-  --background-pattern-cross-color-default: #777;
+  --xy-background-color-default: #141414;
+  --xy-background-pattern-dots-color-default: #777;
+  --xy-background-pattern-lines-color-default: #777;
+  --xy-background-pattern-cross-color-default: #777;
 }
 
 .xy-flow {
-  background-color: var(--background-color-props, var(--background-color-default, 'transparent'));
+  background-color: var(--xy-background-color, var(--xy-background-color-default));
+}
+
+.xy-flow__background {
+  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));
 }
 
 .xy-flow__container {
@@ -94,14 +98,14 @@
 }
 
 .xy-flow__edge-path {
-  stroke: var(--edge-stroke, var(--edge-stroke-default));
-  stroke-width: var(--edge-stroke-width, var(--edge-stroke-width-default));
+  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
   fill: none;
 }
 
 .xy-flow__connection-path {
-  stroke: var(--connectionline-stroke, var(--connectionline-stroke-default));
-  stroke-width: var(--connectionline-stroke-width, var(--connectionline-stroke-width-default));
+  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
+  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
   fill: none;
 }
 
@@ -132,7 +136,7 @@
   &.selected .xy-flow__edge-path,
   &:focus .xy-flow__edge-path,
   &:focus-visible .xy-flow__edge-path {
-    stroke: var(--edge-stroke-selected, var(--edge-stroke-selected-default));
+    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
   }
 
   &-textwrapper {
@@ -266,7 +270,7 @@
 
 .xy-flow__attribution {
   font-size: 10px;
-  background: var(--attribution-background-color, var(--attribution-background-color-default));
+  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
   padding: 2px 3px;
   margin: 0;
 
@@ -293,27 +297,27 @@
 }
 
 .xy-flow__minimap {
-  background: var(--minimap-background-color, var(--minimap-background-color-default));
+  background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));
 
   &-mask {
     fill: var(
-      --minimap-mask-background-color-props,
-      var(--minimap-mask-background-color, var(--minimap-mask-background-color-default))
+      --xy-minimap-mask-background-color-props,
+      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
     );
   }
 
   &-node {
     fill: var(
-      --minimap-node-background-color-props,
-      var(--minimap-node-background-color, var(--minimap-node-background-color-default))
+      --xy-minimap-node-background-color-props,
+      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
     );
     stroke: var(
-      --minimap-node-stroke-color-props,
-      var(--minimap-node-stroke-color, var(--minimap-node-stroke-color-default))
+      --xy-minimap-node-stroke-color-props,
+      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
     );
     stroke-width: var(
-      --minimap-node-stroke-width-props,
-      var(--minimap-node-stroke-width, var(--minimap-node-stroke-width-default))
+      --xy-minimap-node-stroke-width-props,
+      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
     );
   }
 }
@@ -326,22 +330,22 @@
 .xy-flow__background-pattern {
   &.dots {
     fill: var(
-      --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-dots-color-default))
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
     );
   }
 
   &.lines {
     stroke: var(
-      --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-lines-color-default))
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
     );
   }
 
   &.cross {
     stroke: var(
-      --background-pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-cross-color-default))
+      --xy-background-pattern-color-props,
+      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
     );
   }
 }
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
index e88cc3f1..880ebaf7 100644
--- a/packages/system/src/styles/style.css
+++ b/packages/system/src/styles/style.css
@@ -1,46 +1,46 @@
 .xy-flow {
-  --node-color-default: inherit;
-  --node-border-default: 1px solid #1a192b;
-  --node-background-color-default: #fff;
-  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
-  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  --node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
-  --node-border-radius-default: 3px;
+  --xy-node-color-default: inherit;
+  --xy-node-border-default: 1px solid #1a192b;
+  --xy-node-background-color-default: #fff;
+  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
+  --xy-node-border-radius-default: 3px;
 
-  --handle-background-color-default: #1a192b;
-  --handle-border-color-default: #fff;
+  --xy-handle-background-color-default: #1a192b;
+  --xy-handle-border-color-default: #fff;
 
-  --selection-background-color-default: rgba(0, 89, 220, 0.08);
-  --selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
+  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
+  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
 
-  --controls-button-background-color-default: #fefefe;
-  --controls-button-background-color-hover-default: #f4f4f4;
-  --controls-button-color-default: inherit;
-  --controls-button-color-hover-default: inherit;
-  --controls-button-border-color-default: #eee;
-  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+  --xy-controls-button-background-color-default: #fefefe;
+  --xy-controls-button-background-color-hover-default: #f4f4f4;
+  --xy-controls-button-color-default: inherit;
+  --xy-controls-button-color-hover-default: inherit;
+  --xy-controls-button-border-color-default: #eee;
+  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
 .xy-flow.dark {
-  --node-color-default: #f8f8f8;
-  --node-border-default: 1px solid #3c3c3c;
-  --node-background-color-default: #1e1e1e;
-  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
-  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
-  --node-boxshadow-selected-default: 0 0 0 0.5px #999;
+  --xy-node-color-default: #f8f8f8;
+  --xy-node-border-default: 1px solid #3c3c3c;
+  --xy-node-background-color-default: #1e1e1e;
+  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
+  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
 
-  --handle-background-color-default: #bebebe;
-  --handle-border-color-default: #1e1e1e;
+  --xy-handle-background-color-default: #bebebe;
+  --xy-handle-border-color-default: #1e1e1e;
 
-  --selection-background-color-default: rgba(200, 200, 220, 0.08);
-  --selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
+  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
+  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
 
-  --controls-button-background-color-default: #2b2b2b;
-  --controls-button-background-color-hover-default: #3e3e3e;
-  --controls-button-color-default: #f8f8f8;
-  --controls-button-color-hover-default: #fff;
-  --controls-button-border-color-default: #5b5b5b;
-  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+  --xy-controls-button-background-color-default: #2b2b2b;
+  --xy-controls-button-background-color-hover-default: #3e3e3e;
+  --xy-controls-button-color-default: #f8f8f8;
+  --xy-controls-button-color-hover-default: #fff;
+  --xy-controls-button-border-color-default: #5b5b5b;
+  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
 .xy-flow__edge {
@@ -67,35 +67,35 @@
 .xy-flow__node-output,
 .xy-flow__node-group {
   padding: 10px;
-  border-radius: var(--node-border-radius, var(--node-border-radius-default));
+  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
   width: 150px;
   font-size: 12px;
-  color: var(--node-color, var(--node-color-default));
+  color: var(--xy-node-color, var(--xy-node-color-default));
   text-align: center;
-  border: var(--node-border, var(--node-border-default));
-  background-color: var(--node-background-color, var(--node-background-color-default));
+  border: var(--xy-node-border, var(--xy-node-border-default));
+  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
 
   &.selectable {
     &:hover {
-      box-shadow: var(--node-boxshadow-hover, var(--node-boxshadow-hover-default));
+      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
     }
 
     &.selected,
     &:focus,
     &:focus-visible {
-      box-shadow: var(--node-boxshadow-selected, var(--node-boxshadow-selected-default));
+      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
     }
   }
 }
 
 .xy-flow__node-group {
-  background-color: var(--node-group-background-color, var(--node-group-background-color-default));
+  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
 }
 
 .xy-flow__nodesselection-rect,
 .xy-flow__selection {
-  background: var(--selection-background-color, var(--selection-background-color-default));
-  border: var(--selection-border, var(--selection-border-default));
+  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
+  border: var(--xy-selection-border, var(--xy-selection-border-default));
 
   &:focus,
   &:focus-visible {
@@ -106,34 +106,37 @@
 .xy-flow__handle {
   width: 6px;
   height: 6px;
-  background-color: var(--handle-background-color, var(--handle-background-color-default));
-  border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
+  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
+  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
   border-radius: 100%;
 }
 
 .xy-flow__controls {
-  box-shadow: var(--controls-box-shadow, var(--controls-box-shadow-default));
+  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
 
   &-button {
     border: none;
-    background: var(--controls-button-background-color, var(--controls-button-background-color-default));
+    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
     border-bottom: 1px solid
       var(
-        --controls-button-border-color-props,
-        var(--controls-button-border-color, var(--controls-button-border-color-default))
+        --xy-controls-button-border-color-props,
+        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
       );
-    color: var(--controls-button-color-props, var(--controls-button-color, var(--controls-button-color-default)));
+    color: var(
+      --xy-controls-button-color-props,
+      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
+    );
     cursor: pointer;
     user-select: none;
 
     &:hover {
       background: var(
-        --controls-button-background-color-hover-props,
-        var(--controls-button-background-color-hover, var(--controls-button-background-color-hover-default))
+        --xy-controls-button-background-color-hover-props,
+        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
       );
       color: var(
-        --controls-button-color-hover-props,
-        var(--controls-button-color-hover, var(--controls-button-color-hover-default))
+        --xy-controls-button-color-hover-props,
+        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
       );
     }
 

From 1d7803aff7a0812c3f07a559defc69fbdcf59e2b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 28 Nov 2023 16:50:17 +0100
Subject: [PATCH 29/65] chore(svelte/onConnect): cleanup

---
 .../svelte/src/lib/components/Handle/Handle.svelte  | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 7d3010bd..745a0f28 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -80,20 +80,17 @@
         updateConnection,
         cancelConnection,
         panBy,
-        onConnect: (connection) => {
-          if ($onedgecreate) {
-            const modifiedConnection = $onedgecreate(connection);
-            if (modifiedConnection) {
-              addEdge(modifiedConnection);
-              dispatch('connect', { connection });
-            }
+        onConnect: (_connection) => {
+          let connection = $onedgecreate ? $onedgecreate(_connection) : _connection;
+
+          if (!connection) {
             return;
           }
 
           addEdge(connection);
           // @todo: should we change/ improve the stuff we are passing here?
           // instead of source/target we could pass fromNodeId, fromHandleId, etc
-          dispatch('connect', { connection });
+          dispatch('connect', { connection: _connection });
         },
         onConnectStart: (event, startParams) => {
           dispatch('connectstart', {

From 95acea54d1dfab616a42ee1900797377c87d123d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 29 Nov 2023 16:33:57 +0100
Subject: [PATCH 30/65] chore(react/svelte): cleanup edge creation

---
 .../src/routes/examples/edges/+page.svelte    | 19 +++++++++++++++----
 .../src/lib/components/Handle/Handle.svelte   | 10 +++++-----
 packages/system/src/utils/edges/general.ts    | 10 +++++++++-
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 575984ca..f201a02d 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -6,7 +6,8 @@
 		Background,
 		BackgroundVariant,
 		MiniMap,
-		MarkerType
+		MarkerType,
+		type Connection
 	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
@@ -143,6 +144,12 @@
 			}
 		}
 	]);
+
+	$: console.log('edges', $edges);
+
+	function getEdgeId(connection: Connection) {
+		return `edge-${connection.source}-${connection.target}}`;
+	}
 </script>
 
 <SvelteFlow
@@ -150,9 +157,13 @@
 	{edges}
 	fitView
 	nodeDragThreshold={2}
-	onedgecreate={(e) => {
-		console.log('on edge create', e);
-		return e;
+	onedgecreate={(connection) => {
+		console.log('on edge create', connection);
+
+		return {
+			...connection,
+			id: getEdgeId(connection)
+		};
 	}}
 >
 	<Controls />
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 745a0f28..e4b6a823 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -80,17 +80,17 @@
         updateConnection,
         cancelConnection,
         panBy,
-        onConnect: (_connection) => {
-          let connection = $onedgecreate ? $onedgecreate(_connection) : _connection;
+        onConnect: (connection) => {
+          const edge = $onedgecreate ? $onedgecreate(connection) : connection;
 
-          if (!connection) {
+          if (!edge) {
             return;
           }
 
-          addEdge(connection);
+          addEdge(edge);
           // @todo: should we change/ improve the stuff we are passing here?
           // instead of source/target we could pass fromNodeId, fromHandleId, etc
-          dispatch('connect', { connection: _connection });
+          dispatch('connect', { connection });
         },
         onConnectStart: (event, startParams) => {
           dispatch('connectstart', {
diff --git a/packages/system/src/utils/edges/general.ts b/packages/system/src/utils/edges/general.ts
index bdffbbd8..9ffd8e24 100644
--- a/packages/system/src/utils/edges/general.ts
+++ b/packages/system/src/utils/edges/general.ts
@@ -112,7 +112,7 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform
 }
 
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string =>
-  `xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
+  `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
 
 const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
   return edges.some(
@@ -148,6 +148,14 @@ export const addEdgeBase = <EdgeType extends EdgeBase>(
     return edges;
   }
 
+  if (edge.sourceHandle === null) {
+    delete edge.sourceHandle;
+  }
+
+  if (edge.targetHandle === null) {
+    delete edge.targetHandle;
+  }
+
   return edges.concat(edge);
 };
 

From 8f43160236ce989136e529eb483e1508a2ac1f52 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 29 Nov 2023 18:01:11 +0100
Subject: [PATCH 31/65] refactor(react/edges): simplify edge creation

---
 .../react/src/components/Edges/BezierEdge.tsx | 105 ++++++++-------
 .../components/Edges/BezierEdgeInternal.tsx   |  59 ---------
 .../src/components/Edges/SimpleBezierEdge.tsx | 103 ++++++++-------
 .../Edges/SimpleBezierEdgeInternal.tsx        | 124 ------------------
 .../src/components/Edges/SmoothStepEdge.tsx   | 107 ++++++++-------
 .../Edges/SmoothStepEdgeInternal.tsx          |  60 ---------
 .../react/src/components/Edges/StepEdge.tsx   |  32 +++--
 .../src/components/Edges/StepEdgeInternal.tsx |  15 ---
 .../src/components/Edges/StraightEdge.tsx     |  89 +++++++------
 .../components/Edges/StraightEdgeInternal.tsx |  48 -------
 packages/react/src/components/Edges/index.ts  |  10 +-
 .../react/src/components/Edges/internal.ts    |   5 -
 .../react/src/container/EdgeRenderer/utils.ts |  20 ++-
 .../react/src/container/ReactFlow/index.tsx   |  18 ++-
 packages/react/src/index.ts                   |  10 +-
 packages/react/src/types/edges.ts             |  11 +-
 16 files changed, 287 insertions(+), 529 deletions(-)
 delete mode 100644 packages/react/src/components/Edges/BezierEdgeInternal.tsx
 delete mode 100644 packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
 delete mode 100644 packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
 delete mode 100644 packages/react/src/components/Edges/StepEdgeInternal.tsx
 delete mode 100644 packages/react/src/components/Edges/StraightEdgeInternal.tsx
 delete mode 100644 packages/react/src/components/Edges/internal.ts

diff --git a/packages/react/src/components/Edges/BezierEdge.tsx b/packages/react/src/components/Edges/BezierEdge.tsx
index 9187131c..2a0b54a2 100644
--- a/packages/react/src/components/Edges/BezierEdge.tsx
+++ b/packages/react/src/components/Edges/BezierEdge.tsx
@@ -1,61 +1,70 @@
 import { memo } from 'react';
-import { type Optional, Position, getBezierPath } from '@xyflow/system';
+import { Position, getBezierPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { BezierEdgeProps } from '../../types';
 
-const BezierEdge = memo(
-  ({
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: Optional<BezierEdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getBezierPath({
+function createBezierEdge(params: { isInternal: boolean }) {
+  // eslint-disable-next-line react/display-name
+  return memo(
+    ({
+      id,
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
-      curvature: pathOptions?.curvature,
-    });
+      sourcePosition = Position.Bottom,
+      targetPosition = Position.Top,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      pathOptions,
+      interactionWidth,
+    }: BezierEdgeProps) => {
+      const [path, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        curvature: pathOptions?.curvature,
+      });
 
-    return (
-      <BaseEdge
-        id={id}
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
+      const _id = params.isInternal ? undefined : id;
+
+      return (
+        <BaseEdge
+          id={_id}
+          path={path}
+          labelX={labelX}
+          labelY={labelY}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
+          style={style}
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+          interactionWidth={interactionWidth}
+        />
+      );
+    }
+  );
+}
+
+const BezierEdge = createBezierEdge({ isInternal: false });
+const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 
 BezierEdge.displayName = 'BezierEdge';
+BezierEdgeInternal.displayName = 'BezierEdgeInternal';
 
-export default BezierEdge;
+export { BezierEdge, BezierEdgeInternal };
diff --git a/packages/react/src/components/Edges/BezierEdgeInternal.tsx b/packages/react/src/components/Edges/BezierEdgeInternal.tsx
deleted file mode 100644
index 8f446393..00000000
--- a/packages/react/src/components/Edges/BezierEdgeInternal.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { memo } from 'react';
-import { Position, getBezierPath } from '@xyflow/system';
-
-import BaseEdge from './BaseEdge';
-import type { BezierEdgeProps } from '../../types';
-
-const BezierEdge = memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: BezierEdgeProps) => {
-    const [path, labelX, labelY] = getBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-      curvature: pathOptions?.curvature,
-    });
-
-    return (
-      <BaseEdge
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
-
-BezierEdge.displayName = 'BezierEdge';
-
-export default BezierEdge;
diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index 1132e216..09c7a752 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type Optional, Position, getBezierEdgeCenter } from '@xyflow/system';
+import { Position, getBezierEdgeCenter } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
+import type { SimpleBezierEdgeProps } from '../../types';
 
 export interface GetSimpleBezierPathParams {
   sourceX: number;
@@ -71,56 +71,65 @@ export function getSimpleBezierPath({
   ];
 }
 
-const SimpleBezierEdge = memo(
-  ({
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
-  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getSimpleBezierPath({
+function createSimpleBezierEdge(params: { isInternal: boolean }) {
+  // eslint-disable-next-line react/display-name
+  return memo(
+    ({
+      id,
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
-    });
+      sourcePosition = Position.Bottom,
+      targetPosition = Position.Top,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth,
+    }: SimpleBezierEdgeProps) => {
+      const [path, labelX, labelY] = getSimpleBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+      });
 
-    return (
-      <BaseEdge
-        id={id}
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
+      const _id = params.isInternal ? undefined : id;
+
+      return (
+        <BaseEdge
+          id={_id}
+          path={path}
+          labelX={labelX}
+          labelY={labelY}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
+          style={style}
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+          interactionWidth={interactionWidth}
+        />
+      );
+    }
+  );
+}
+
+const SimpleBezierEdge = createSimpleBezierEdge({ isInternal: false });
+const SimpleBezierEdgeInternal = createSimpleBezierEdge({ isInternal: true });
 
 SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+SimpleBezierEdgeInternal.displayName = 'SimpleBezierEdgeInternal';
 
-export default SimpleBezierEdge;
+export { SimpleBezierEdge, SimpleBezierEdgeInternal };
diff --git a/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx b/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
deleted file mode 100644
index d9fa50c4..00000000
--- a/packages/react/src/components/Edges/SimpleBezierEdgeInternal.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { memo } from 'react';
-import { Position, getBezierEdgeCenter } from '@xyflow/system';
-
-import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
-
-export interface GetSimpleBezierPathParams {
-  sourceX: number;
-  sourceY: number;
-  sourcePosition?: Position;
-  targetX: number;
-  targetY: number;
-  targetPosition?: Position;
-}
-
-interface GetControlParams {
-  pos: Position;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
-  if (pos === Position.Left || pos === Position.Right) {
-    return [0.5 * (x1 + x2), y1];
-  }
-
-  return [x1, 0.5 * (y1 + y2)];
-}
-
-export function getSimpleBezierPath({
-  sourceX,
-  sourceY,
-  sourcePosition = Position.Bottom,
-  targetX,
-  targetY,
-  targetPosition = Position.Top,
-}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
-  const [sourceControlX, sourceControlY] = getControl({
-    pos: sourcePosition,
-    x1: sourceX,
-    y1: sourceY,
-    x2: targetX,
-    y2: targetY,
-  });
-  const [targetControlX, targetControlY] = getControl({
-    pos: targetPosition,
-    x1: targetX,
-    y1: targetY,
-    x2: sourceX,
-    y2: sourceY,
-  });
-  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourceControlX,
-    sourceControlY,
-    targetControlX,
-    targetControlY,
-  });
-
-  return [
-    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-    labelX,
-    labelY,
-    offsetX,
-    offsetY,
-  ];
-}
-
-const SimpleBezierEdge = memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
-  }: EdgeProps) => {
-    const [path, labelX, labelY] = getSimpleBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-    });
-
-    return (
-      <BaseEdge
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
-
-SimpleBezierEdge.displayName = 'SimpleBezierEdge';
-
-export default SimpleBezierEdge;
diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx
index a6965ca7..8eb10d89 100644
--- a/packages/react/src/components/Edges/SmoothStepEdge.tsx
+++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx
@@ -1,62 +1,71 @@
 import { memo } from 'react';
-import { type Optional, Position, getSmoothStepPath } from '@xyflow/system';
+import { Position, getSmoothStepPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const SmoothStepEdge = memo(
-  ({
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getSmoothStepPath({
+function createSmoothStepEdge(params: { isInternal: boolean }) {
+  // eslint-disable-next-line react/display-name
+  return memo(
+    ({
+      id,
       sourceX,
       sourceY,
-      sourcePosition,
       targetX,
       targetY,
-      targetPosition,
-      borderRadius: pathOptions?.borderRadius,
-      offset: pathOptions?.offset,
-    });
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      sourcePosition = Position.Bottom,
+      targetPosition = Position.Top,
+      markerEnd,
+      markerStart,
+      pathOptions,
+      interactionWidth,
+    }: SmoothStepEdgeProps) => {
+      const [path, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: pathOptions?.borderRadius,
+        offset: pathOptions?.offset,
+      });
 
-    return (
-      <BaseEdge
-        id={id}
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
+      const _id = params.isInternal ? undefined : id;
+
+      return (
+        <BaseEdge
+          id={_id}
+          path={path}
+          labelX={labelX}
+          labelY={labelY}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
+          style={style}
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+          interactionWidth={interactionWidth}
+        />
+      );
+    }
+  );
+}
+
+const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 
 SmoothStepEdge.displayName = 'SmoothStepEdge';
+SmoothStepEdgeInternal.displayName = 'SmoothStepEdgeInternal';
 
-export default SmoothStepEdge;
+export { SmoothStepEdge, SmoothStepEdgeInternal };
diff --git a/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx b/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
deleted file mode 100644
index be635a4e..00000000
--- a/packages/react/src/components/Edges/SmoothStepEdgeInternal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { memo } from 'react';
-import { Position, getSmoothStepPath } from '@xyflow/system';
-
-import BaseEdge from './BaseEdge';
-import type { SmoothStepEdgeProps } from '../../types';
-
-const SmoothStepEdge = memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    sourcePosition = Position.Bottom,
-    targetPosition = Position.Top,
-    markerEnd,
-    markerStart,
-    pathOptions,
-    interactionWidth,
-  }: SmoothStepEdgeProps) => {
-    const [path, labelX, labelY] = getSmoothStepPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-      borderRadius: pathOptions?.borderRadius,
-      offset: pathOptions?.offset,
-    });
-
-    return (
-      <BaseEdge
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
-
-SmoothStepEdge.displayName = 'SmoothStepEdge';
-
-export default SmoothStepEdge;
diff --git a/packages/react/src/components/Edges/StepEdge.tsx b/packages/react/src/components/Edges/StepEdge.tsx
index 8edd819a..bb1833d4 100644
--- a/packages/react/src/components/Edges/StepEdge.tsx
+++ b/packages/react/src/components/Edges/StepEdge.tsx
@@ -1,16 +1,30 @@
 import { memo, useMemo } from 'react';
-import { Optional } from '@xyflow/system';
 
-import SmoothStepEdge from './SmoothStepEdge';
+import { SmoothStepEdge } from './SmoothStepEdge';
 import type { SmoothStepEdgeProps } from '../../types';
 
-const StepEdge = memo((props: Optional<SmoothStepEdgeProps, 'id' | 'source' | 'target'>) => (
-  <SmoothStepEdge
-    {...props}
-    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
-  />
-));
+function createStepEdge(params: { isInternal: boolean }) {
+  // eslint-disable-next-line react/display-name
+  return memo(({ id, ...props }: SmoothStepEdgeProps) => {
+    const _id = params.isInternal ? undefined : id;
+
+    return (
+      <SmoothStepEdge
+        {...props}
+        id={_id}
+        pathOptions={useMemo(
+          () => ({ borderRadius: 0, offset: props.pathOptions?.offset }),
+          [props.pathOptions?.offset]
+        )}
+      />
+    );
+  });
+}
+
+const StepEdge = createStepEdge({ isInternal: false });
+const StepEdgeInternal = createStepEdge({ isInternal: true });
 
 StepEdge.displayName = 'StepEdge';
+StepEdgeInternal.displayName = 'StepEdgeInternal';
 
-export default StepEdge;
+export { StepEdge, StepEdgeInternal };
diff --git a/packages/react/src/components/Edges/StepEdgeInternal.tsx b/packages/react/src/components/Edges/StepEdgeInternal.tsx
deleted file mode 100644
index 2772424d..00000000
--- a/packages/react/src/components/Edges/StepEdgeInternal.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { memo, useMemo } from 'react';
-
-import SmoothStepEdgeInternal from './SmoothStepEdgeInternal';
-import type { SmoothStepEdgeProps } from '../../types';
-
-const StepEdge = memo((props: SmoothStepEdgeProps) => (
-  <SmoothStepEdgeInternal
-    {...props}
-    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
-  />
-));
-
-StepEdge.displayName = 'StepEdge';
-
-export default StepEdge;
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index 094eb7f9..a9a453df 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -4,47 +4,56 @@ import { type Optional, getStraightPath } from '@xyflow/system';
 import BaseEdge from './BaseEdge';
 import type { EdgeProps } from '../../types';
 
-const StraightEdge = memo(
-  ({
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
-  }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
-    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+function createStraightEdge(params: { isInternal: boolean }) {
+  // eslint-disable-next-line react/display-name
+  return memo(
+    ({
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      label,
+      labelStyle,
+      labelShowBg,
+      labelBgStyle,
+      labelBgPadding,
+      labelBgBorderRadius,
+      style,
+      markerEnd,
+      markerStart,
+      interactionWidth,
+    }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
+      const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
-    return (
-      <BaseEdge
-        id={id}
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
+      const _id = params.isInternal ? undefined : id;
+
+      return (
+        <BaseEdge
+          id={_id}
+          path={path}
+          labelX={labelX}
+          labelY={labelY}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
+          style={style}
+          markerEnd={markerEnd}
+          markerStart={markerStart}
+          interactionWidth={interactionWidth}
+        />
+      );
+    }
+  );
+}
+
+const StraightEdge = createStraightEdge({ isInternal: false });
+const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 
 StraightEdge.displayName = 'StraightEdge';
+StraightEdgeInternal.displayName = 'StraightEdgeInternal';
 
-export default StraightEdge;
+export { StraightEdge, StraightEdgeInternal };
diff --git a/packages/react/src/components/Edges/StraightEdgeInternal.tsx b/packages/react/src/components/Edges/StraightEdgeInternal.tsx
deleted file mode 100644
index 06f4a161..00000000
--- a/packages/react/src/components/Edges/StraightEdgeInternal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { memo } from 'react';
-import { getStraightPath } from '@xyflow/system';
-
-import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
-
-const StraightEdge = memo(
-  ({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    label,
-    labelStyle,
-    labelShowBg,
-    labelBgStyle,
-    labelBgPadding,
-    labelBgBorderRadius,
-    style,
-    markerEnd,
-    markerStart,
-    interactionWidth,
-  }: EdgeProps) => {
-    const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
-
-    return (
-      <BaseEdge
-        path={path}
-        labelX={labelX}
-        labelY={labelY}
-        label={label}
-        labelStyle={labelStyle}
-        labelShowBg={labelShowBg}
-        labelBgStyle={labelBgStyle}
-        labelBgPadding={labelBgPadding}
-        labelBgBorderRadius={labelBgBorderRadius}
-        style={style}
-        markerEnd={markerEnd}
-        markerStart={markerStart}
-        interactionWidth={interactionWidth}
-      />
-    );
-  }
-);
-
-StraightEdge.displayName = 'StraightEdge';
-
-export default StraightEdge;
diff --git a/packages/react/src/components/Edges/index.ts b/packages/react/src/components/Edges/index.ts
index e4d30109..dcd45701 100644
--- a/packages/react/src/components/Edges/index.ts
+++ b/packages/react/src/components/Edges/index.ts
@@ -1,5 +1,5 @@
-export { default as SimpleBezierEdge } from './SimpleBezierEdge';
-export { default as SmoothStepEdge } from './SmoothStepEdge';
-export { default as StepEdge } from './StepEdge';
-export { default as StraightEdge } from './StraightEdge';
-export { default as BezierEdge } from './BezierEdge';
+export { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
+export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';
+export { StepEdge, StepEdgeInternal } from './StepEdge';
+export { StraightEdge, StraightEdgeInternal } from './StraightEdge';
+export { BezierEdge, BezierEdgeInternal } from './BezierEdge';
diff --git a/packages/react/src/components/Edges/internal.ts b/packages/react/src/components/Edges/internal.ts
deleted file mode 100644
index 11b86932..00000000
--- a/packages/react/src/components/Edges/internal.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as SimpleBezierEdge } from './SimpleBezierEdgeInternal';
-export { default as SmoothStepEdge } from './SmoothStepEdgeInternal';
-export { default as StepEdge } from './StepEdgeInternal';
-export { default as StraightEdge } from './StraightEdgeInternal';
-export { default as BezierEdge } from './BezierEdgeInternal';
diff --git a/packages/react/src/container/EdgeRenderer/utils.ts b/packages/react/src/container/EdgeRenderer/utils.ts
index 03e0dba3..433bb0f0 100644
--- a/packages/react/src/container/EdgeRenderer/utils.ts
+++ b/packages/react/src/container/EdgeRenderer/utils.ts
@@ -1,6 +1,12 @@
 import type { ComponentType } from 'react';
 
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StepEdgeInternal,
+  StraightEdgeInternal,
+  SimpleBezierEdgeInternal,
+} from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped } from '../../types';
 
@@ -8,18 +14,18 @@ export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 
 export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
   const standardTypes: EdgeTypesWrapped = {
-    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
-    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
-    step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
-    smoothstep: wrapEdge((edgeTypes.step || SmoothStepEdge) as ComponentType<EdgeProps>),
-    simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
+    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] || BezierEdge) as ComponentType<EdgeProps>);
+      res[key] = wrapEdge((edgeTypes[key] || BezierEdgeInternal) as ComponentType<EdgeProps>);
 
       return res;
     }, wrappedTypes);
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index d780046e..a7360a46 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -12,7 +12,13 @@ import {
 } from '@xyflow/system';
 
 import Attribution from '../../components/Attribution';
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges/internal';
+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';
@@ -33,11 +39,11 @@ const defaultNodeTypes: NodeTypes = {
 };
 
 const defaultEdgeTypes: EdgeTypes = {
-  default: BezierEdge,
-  straight: StraightEdge,
-  step: StepEdge,
-  smoothstep: SmoothStepEdge,
-  simplebezier: SimpleBezierEdge,
+  default: BezierEdgeInternal,
+  straight: StraightEdgeInternal,
+  step: StepEdgeInternal,
+  smoothstep: SmoothStepEdgeInternal,
+  simplebezier: SimpleBezierEdgeInternal,
 };
 
 const initNodeOrigin: NodeOrigin = [0, 0];
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4fe922e5..2a693638 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,11 +1,11 @@
 export { default as ReactFlow } from './container/ReactFlow';
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
-export { default as StraightEdge } from './components/Edges/StraightEdge';
-export { default as StepEdge } from './components/Edges/StepEdge';
-export { default as BezierEdge } from './components/Edges/BezierEdge';
-export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
-export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge';
+export { StraightEdge } from './components/Edges/StraightEdge';
+export { StepEdge } from './components/Edges/StepEdge';
+export { BezierEdge } from './components/Edges/BezierEdge';
+export { SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
+export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index cd29a85f..db34416d 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -13,6 +13,7 @@ import type {
   HandleElement,
   ConnectionStatus,
   EdgePosition,
+  Optional,
 } from '@xyflow/system';
 
 import { Node } from '.';
@@ -100,14 +101,20 @@ export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd
     path: string;
   };
 
-export type SmoothStepEdgeProps<T = any> = EdgeProps<T> & {
+export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+
+export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+
+export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: SmoothStepPathOptions;
 };
 
-export type BezierEdgeProps<T = any> = EdgeProps<T> & {
+export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: BezierPathOptions;
 };
 
+export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
+
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
 
 export type ConnectionLineComponentProps = {

From c7ddaf6377749e7dd4c333781aa473790dfb16be Mon Sep 17 00:00:00 2001
From: Ivan Akulov <mail@iamakulov.com>
Date: Thu, 30 Nov 2023 03:19:49 +0100
Subject: [PATCH 32/65] Add performance tests for selecting, dragging, and
 remounting

---
 examples/react/src/examples/Stress/index.tsx  | 168 +++++++++++++++++-
 .../src/examples/Stress/performanceUtils.ts   | 150 ++++++++++++++++
 2 files changed, 317 insertions(+), 1 deletion(-)
 create mode 100644 examples/react/src/examples/Stress/performanceUtils.ts

diff --git a/examples/react/src/examples/Stress/index.tsx b/examples/react/src/examples/Stress/index.tsx
index c1c24d86..5adb645a 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}
@@ -69,6 +231,10 @@ const StressFlow = () => {
       <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,
+  };
+}

From 6825b486ecea591ef61324324fc3e72996da8874 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 30 Nov 2023 10:41:18 +0100
Subject: [PATCH 33/65] refactor(svelte/edges): simplify

---
 .../react/src/components/Edges/StepEdge.tsx   |  4 +--
 packages/react/src/components/Edges/index.ts  |  4 +++
 packages/react/src/types/edges.ts             | 12 ++++++-
 .../components/EdgeWrapper/EdgeWrapper.svelte |  4 +--
 .../lib/components/edges/BezierEdge.svelte    | 30 ------------------
 .../BaseBezierEdge.svelte}                    | 10 ++++--
 .../edges/BezierEdge/BezierEdge.svelte        | 10 ++++++
 .../BezierEdge/BezierEdgeInternal.svelte      | 10 ++++++
 .../components/edges/SmoothStepEdge.svelte    | 30 ------------------
 .../BaseSmoothStepEdge.svelte}                | 11 +++++--
 .../SmoothStepEdge/SmoothStepEdge.svelte      | 10 ++++++
 .../SmoothStepEdgeInternal.svelte             | 10 ++++++
 .../src/lib/components/edges/StepEdge.svelte  | 31 -------------------
 .../BaseStepEdge.svelte}                      | 10 ++++--
 .../components/edges/StepEdge/StepEdge.svelte | 10 ++++++
 .../edges/StepEdge/StepEdgeInternal.svelte    | 10 ++++++
 .../lib/components/edges/StraightEdge.svelte  | 28 -----------------
 .../BaseStraightEdge.svelte}                  |  7 +++--
 .../edges/StraightEdge/StraightEdge.svelte    | 10 ++++++
 .../StraightEdge/StraightEdgeInternal.svelte  | 10 ++++++
 .../svelte/src/lib/components/edges/index.ts  | 19 +++++++++---
 .../src/lib/components/edges/internal.ts      |  4 ---
 .../svelte/src/lib/store/initial-store.ts     | 15 ++++++---
 packages/svelte/src/lib/types/edges.ts        | 23 ++++++++++++--
 packages/system/src/types/edges.ts            |  4 +++
 25 files changed, 176 insertions(+), 150 deletions(-)
 delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge.svelte
 rename packages/svelte/src/lib/components/edges/{BezierEdgeInternal.svelte => BezierEdge/BaseBezierEdge.svelte} (69%)
 create mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
 rename packages/svelte/src/lib/components/edges/{SmoothStepEdgeInternal.svelte => SmoothStepEdge/BaseSmoothStepEdge.svelte} (65%)
 create mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge.svelte
 rename packages/svelte/src/lib/components/edges/{StepEdgeInternal.svelte => StepEdge/BaseStepEdge.svelte} (73%)
 create mode 100644 packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge.svelte
 rename packages/svelte/src/lib/components/edges/{StraightEdgeInternal.svelte => StraightEdge/BaseStraightEdge.svelte} (75%)
 create mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/internal.ts

diff --git a/packages/react/src/components/Edges/StepEdge.tsx b/packages/react/src/components/Edges/StepEdge.tsx
index bb1833d4..6385e8f0 100644
--- a/packages/react/src/components/Edges/StepEdge.tsx
+++ b/packages/react/src/components/Edges/StepEdge.tsx
@@ -1,11 +1,11 @@
 import { memo, useMemo } from 'react';
 
 import { SmoothStepEdge } from './SmoothStepEdge';
-import type { SmoothStepEdgeProps } from '../../types';
+import type { StepEdgeProps } from '../../types';
 
 function createStepEdge(params: { isInternal: boolean }) {
   // eslint-disable-next-line react/display-name
-  return memo(({ id, ...props }: SmoothStepEdgeProps) => {
+  return memo(({ id, ...props }: StepEdgeProps) => {
     const _id = params.isInternal ? undefined : id;
 
     return (
diff --git a/packages/react/src/components/Edges/index.ts b/packages/react/src/components/Edges/index.ts
index dcd45701..21af9667 100644
--- a/packages/react/src/components/Edges/index.ts
+++ b/packages/react/src/components/Edges/index.ts
@@ -1,3 +1,7 @@
+// We distinguish between internal and exported edges
+// The internal edges are used directly like custom edges and always get an id, source and target props
+// If you import an edge from the library, the id is optional and source and target are not used at all
+
 export { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
 export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';
 export { StepEdge, StepEdgeInternal } from './StepEdge';
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index db34416d..896c4605 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -14,6 +14,7 @@ import type {
   ConnectionStatus,
   EdgePosition,
   Optional,
+  StepPathOptions,
 } from '@xyflow/system';
 
 import { Node } from '.';
@@ -47,7 +48,12 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
   pathOptions?: BezierPathOptions;
 };
 
-export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
+type StepEdgeType<T> = DefaultEdge<T> & {
+  type: 'step';
+  pathOptions?: StepPathOptions;
+};
+
+export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
 
 export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
 
@@ -113,6 +119,10 @@ export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: BezierPathOptions;
 };
 
+export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: StepPathOptions;
+};
+
 export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index fa4adc92..aad6d2b1 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -6,7 +6,7 @@
   import { errorMessages, getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
-  import { BezierEdge } from '$lib/components/edges/internal';
+  import { BezierEdgeInternal } from '$lib/components/edges';
   import type { EdgeLayouted, Edge } from '$lib/types';
   import { get } from 'svelte/store';
 
@@ -57,7 +57,7 @@
     edgecontextmenu: { edge: Edge; event: MouseEvent };
   }>();
 
-  $: edgeComponent = $edgeTypes[type!] || BezierEdge;
+  $: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
 
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
deleted file mode 100644
index ef5fd3db..00000000
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getBezierPath, type Optional } from '@xyflow/system';
-
-  import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
-
-  $: [path, labelX, labelY] = getBezierPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
-  });
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
similarity index 69%
rename from packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
rename to packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
index a1ca0658..749a5096 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getBezierPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { BezierEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = BezierEdgeProps & { internal?: boolean };
 
   $: [path, labelX, labelY] = getBezierPath({
     sourceX: $$props.sourceX,
@@ -12,14 +12,18 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
+    targetPosition: $$props.targetPosition,
+    curvature: $$props.pathOptions?.curvature
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
new file mode 100644
index 00000000..9f93e7df
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseBezierEdge from './BaseBezierEdge.svelte';
+  import type { BezierEdgeProps } from '$lib/types';
+
+  type $$Props = BezierEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseBezierEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
new file mode 100644
index 00000000..75d168f4
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseBezierEdge from './BaseBezierEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseBezierEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
deleted file mode 100644
index f528da0e..00000000
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath, type Optional } from '@xyflow/system';
-
-  import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
-  });
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
similarity index 65%
rename from packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
rename to packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
index 73324a89..5ec4dd89 100644
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { SmoothStepEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = SmoothStepEdgeProps & { internal?: boolean };
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
@@ -12,14 +12,19 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition
+    targetPosition: $$props.targetPosition,
+    borderRadius: $$props.pathOptions?.borderRadius,
+    offset: $$props.pathOptions?.offset
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
new file mode 100644
index 00000000..1cac5d1c
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
+  import type { SmoothStepEdgeProps } from '$lib/types';
+
+  type $$Props = SmoothStepEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseSmoothStepEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
new file mode 100644
index 00000000..803247c2
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseSmoothStepEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
deleted file mode 100644
index b0860d03..00000000
--- a/packages/svelte/src/lib/components/edges/StepEdge.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath, type Optional } from '@xyflow/system';
-
-  import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    borderRadius: 0
-  });
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
similarity index 73%
rename from packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
rename to packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
index f793376b..4099e7d5 100644
--- a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getSmoothStepPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { StepEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = StepEdgeProps & { internal?: boolean };
 
   $: [path, labelX, labelY] = getSmoothStepPath({
     sourceX: $$props.sourceX,
@@ -13,14 +13,18 @@
     targetY: $$props.targetY,
     sourcePosition: $$props.sourcePosition,
     targetPosition: $$props.targetPosition,
-    borderRadius: 0
+    borderRadius: 0,
+    offset: $$props.pathOptions?.offset
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
new file mode 100644
index 00000000..49522e95
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStepEdge from './BaseStepEdge.svelte';
+  import type { StepEdgeProps } from '$lib/types';
+
+  type $$Props = StepEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStepEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
new file mode 100644
index 00000000..21109992
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStepEdge from './BaseStepEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStepEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
deleted file mode 100644
index 979c4351..00000000
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-  import { getStraightPath, type Optional } from '@xyflow/system';
-
-  import type { EdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
-
-  $: [path, labelX, labelY] = getStraightPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY
-  });
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  id={$$props.id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
similarity index 75%
rename from packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
rename to packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
index 8cc984d7..5db480ca 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
+++ b/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getStraightPath } from '@xyflow/system';
 
-  import type { EdgeProps } from '$lib/types';
+  import type { SmoothStepEdgeProps } from '$lib/types';
   import { BaseEdge } from '$lib/components/BaseEdge';
 
-  type $$Props = EdgeProps;
+  type $$Props = SmoothStepEdgeProps & { internal?: boolean };
 
   $: [path, labelX, labelY] = getStraightPath({
     sourceX: $$props.sourceX,
@@ -12,12 +12,15 @@
     targetX: $$props.targetX,
     targetY: $$props.targetY
   });
+
+  $: id = $$props.internal ? undefined : $$props.id;
 </script>
 
 <BaseEdge
   {path}
   {labelX}
   {labelY}
+  {id}
   label={$$props.label}
   labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
new file mode 100644
index 00000000..d7153544
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStraighEdge from './BaseStraightEdge.svelte';
+  import type { StraightEdgeProps } from '$lib/types';
+
+  type $$Props = StraightEdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStraighEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
new file mode 100644
index 00000000..bad893b2
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import BaseStraighEdge from './BaseStraightEdge.svelte';
+  import type { EdgeProps } from '$lib/types';
+
+  type $$Props = EdgeProps;
+
+  $: props = $$props as $$Props;
+</script>
+
+<BaseStraighEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/index.ts b/packages/svelte/src/lib/components/edges/index.ts
index 1f1567b6..19f1f129 100644
--- a/packages/svelte/src/lib/components/edges/index.ts
+++ b/packages/svelte/src/lib/components/edges/index.ts
@@ -1,4 +1,15 @@
-export { default as BezierEdge } from './BezierEdge.svelte';
-export { default as StraightEdge } from './StraightEdge.svelte';
-export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
-export { default as StepEdge } from './StepEdge.svelte';
+// We distinguish between internal and exported edges
+// The internal edges are used directly like custom edges and always get an id, source and target props
+// If you import an edge from the library, the id is optional and source and target are not used at all
+
+export { default as BezierEdge } from './BezierEdge/BezierEdge.svelte';
+export { default as BezierEdgeInternal } from './BezierEdge/BezierEdgeInternal.svelte';
+
+export { default as SmoothStepEdge } from './SmoothStepEdge/BaseSmoothStepEdge.svelte';
+export { default as SmoothStepEdgeInternal } from './SmoothStepEdge/SmoothStepEdgeInternal.svelte';
+
+export { default as StraightEdge } from './StraightEdge/StraightEdge.svelte';
+export { default as StraightEdgeInternal } from './StraightEdge/StraightEdgeInternal.svelte';
+
+export { default as StepEdge } from './StepEdge/StepEdge.svelte';
+export { default as StepEdgeInternal } from './StepEdge/StepEdgeInternal.svelte';
diff --git a/packages/svelte/src/lib/components/edges/internal.ts b/packages/svelte/src/lib/components/edges/internal.ts
deleted file mode 100644
index f2582b79..00000000
--- a/packages/svelte/src/lib/components/edges/internal.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as BezierEdge } from './BezierEdgeInternal.svelte';
-export { default as StraightEdge } from './StraightEdgeInternal.svelte';
-export { default as SmoothStepEdge } from './SmoothStepEdgeInternal.svelte';
-export { default as StepEdge } from './StepEdgeInternal.svelte';
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index 65acad86..dcfee4db 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -25,7 +25,12 @@ import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
 import GroupNode from '$lib/components/nodes/GroupNode.svelte';
 
-import { BezierEdge, StraightEdge, StepEdge, SmoothStepEdge } from '$lib/components/edges/internal';
+import {
+  BezierEdgeInternal,
+  SmoothStepEdgeInternal,
+  StraightEdgeInternal,
+  StepEdgeInternal
+} from '$lib/components/edges';
 
 import type {
   NodeTypes,
@@ -47,10 +52,10 @@ export const initialNodeTypes = {
 };
 
 export const initialEdgeTypes = {
-  straight: StraightEdge,
-  smoothstep: SmoothStepEdge,
-  default: BezierEdge,
-  step: StepEdge
+  straight: StraightEdgeInternal,
+  smoothstep: SmoothStepEdgeInternal,
+  default: BezierEdgeInternal,
+  step: StepEdgeInternal
 };
 
 export const getInitialStore = ({
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index 33f0d908..0a666ce7 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -5,7 +5,9 @@ import type {
   BezierPathOptions,
   DefaultEdgeOptionsBase,
   EdgePosition,
-  SmoothStepPathOptions
+  SmoothStepPathOptions,
+  Optional,
+  StepPathOptions
 } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
@@ -29,6 +31,7 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
 
 type StepEdgeType<T> = DefaultEdge<T> & {
   type: 'step';
+  pathOptions?: StepPathOptions;
 };
 
 export type Edge<T = any> =
@@ -37,7 +40,7 @@ export type Edge<T = any> =
   | BezierEdgeType<T>
   | StepEdgeType<T>;
 
-export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
+export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> &
   EdgePosition & {
     markerStart?: string;
     markerEnd?: string;
@@ -45,6 +48,22 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
     targetHandleId?: string | null;
   };
 
+export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+
+export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: BezierPathOptions;
+};
+
+export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: SmoothStepPathOptions;
+};
+
+export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
+  pathOptions?: StepPathOptions;
+};
+
+export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
 export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;
diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts
index 855682d2..65c8e641 100644
--- a/packages/system/src/types/edges.ts
+++ b/packages/system/src/types/edges.ts
@@ -27,6 +27,10 @@ export type SmoothStepPathOptions = {
   borderRadius?: number;
 };
 
+export type StepPathOptions = {
+  offset?: number;
+};
+
 export type BezierPathOptions = {
   curvature?: number;
 };

From a70e25b1a244861caf3fbf8a95e042a0ff1ba02b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 30 Nov 2023 12:58:44 +0100
Subject: [PATCH 34/65] refactor(svelte/edges): cleanup types and components

---
 .../src/routes/examples/edges/+page.svelte    | 14 ++-
 .../routes/examples/edges/ButtonEdge.svelte   | 92 +++++++++++++++++++
 .../examples/edges/CustomBezierEdge.svelte    | 55 +++++++++++
 .../src/components/Edges/StraightEdge.tsx     |  6 +-
 packages/react/src/types/edges.ts             |  2 +-
 .../lib/components/edges/BezierEdge.svelte    | 48 ++++++++++
 .../edges/BezierEdge/BaseBezierEdge.svelte    | 33 -------
 .../edges/BezierEdge/BezierEdge.svelte        | 10 --
 .../BezierEdge/BezierEdgeInternal.svelte      | 10 --
 .../edges/BezierEdgeInternal.svelte           | 63 +++++++++++++
 .../components/edges/SmoothStepEdge.svelte    | 49 ++++++++++
 .../SmoothStepEdge/BaseSmoothStepEdge.svelte  | 34 -------
 .../SmoothStepEdge/SmoothStepEdge.svelte      | 10 --
 .../SmoothStepEdgeInternal.svelte             | 10 --
 .../edges/SmoothStepEdgeInternal.svelte       | 63 +++++++++++++
 .../src/lib/components/edges/StepEdge.svelte  | 49 ++++++++++
 .../edges/StepEdge/BaseStepEdge.svelte        | 34 -------
 .../components/edges/StepEdge/StepEdge.svelte | 10 --
 .../edges/StepEdge/StepEdgeInternal.svelte    | 10 --
 .../components/edges/StepEdgeInternal.svelte  | 64 +++++++++++++
 .../lib/components/edges/StraightEdge.svelte  | 42 +++++++++
 .../StraightEdge/BaseStraightEdge.svelte      | 30 ------
 .../edges/StraightEdge/StraightEdge.svelte    | 10 --
 .../StraightEdge/StraightEdgeInternal.svelte  | 10 --
 .../edges/StraightEdgeInternal.svelte         | 63 +++++++++++++
 .../svelte/src/lib/components/edges/index.ts  | 18 ++--
 packages/svelte/src/lib/index.ts              | 13 ++-
 packages/svelte/src/lib/types/edges.ts        | 15 ++-
 packages/svelte/tsconfig.json                 |  3 +-
 tooling/tsconfig/react.json                   |  3 +-
 30 files changed, 640 insertions(+), 233 deletions(-)
 create mode 100644 examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
 create mode 100644 examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/BezierEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/StepEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/StraightEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
 delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
 create mode 100644 packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 403b0ef6..8a2471b8 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -10,6 +10,8 @@
 	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
+	import ButtonEdge from './ButtonEdge.svelte';
+	import CustomBezierEdge from './CustomBezierEdge.svelte';
 
 	const nodes = writable([
 		{
@@ -110,13 +112,14 @@
 			id: 'e5-8',
 			source: '5',
 			target: '8',
-			data: { text: 'custom edge' }
+			type: 'button'
 		},
 		{
 			id: 'e5-9',
 			source: '5',
 			target: '9',
-			data: { text: 'custom edge 2' }
+			type: 'customBezier',
+			label: 'custom bezier'
 		},
 		{
 			id: 'e5-6',
@@ -143,9 +146,14 @@
 			}
 		}
 	]);
+
+	const edgeTypes = {
+		button: ButtonEdge,
+		customBezier: CustomBezierEdge
+	};
 </script>
 
-<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
+<SvelteFlow {nodes} {edges} {edgeTypes} fitView nodeDragThreshold={2}>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
diff --git a/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte b/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
new file mode 100644
index 00000000..235aab98
--- /dev/null
+++ b/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabelRenderer } from '@xyflow/svelte';
+
+	type $$Props = EdgeProps;
+
+	export let id: $$Props['id'] = '';
+	export let source: $$Props['source'] = '';
+	export let target: $$Props['target'] = '';
+	export let animated: $$Props['animated'] = undefined;
+	export let selected: $$Props['selected'] = undefined;
+	export let label: $$Props['label'] = undefined;
+	export let labelStyle: $$Props['labelStyle'] = undefined;
+	export let data: $$Props['data'] = undefined;
+	export let style: $$Props['style'] = undefined;
+	export let markerStart: $$Props['markerStart'] = undefined;
+	export let markerEnd: $$Props['markerEnd'] = undefined;
+	export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+	export let sourceX: $$Props['sourceX'];
+	export let sourceY: $$Props['sourceY'];
+	export let sourcePosition: $$Props['sourcePosition'];
+	export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+	export let targetX: $$Props['targetX'];
+	export let targetY: $$Props['targetY'];
+	export let targetPosition: $$Props['targetPosition'];
+	export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+	$: [edgePath, labelX, labelY] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+
+	source;
+	target;
+	animated;
+	selected;
+	data;
+	label;
+	labelStyle;
+	markerStart;
+	interactionWidth;
+	sourceHandleId;
+	targetHandleId;
+</script>
+
+<BaseEdge path={edgePath} {markerEnd} {style} />
+<EdgeLabelRenderer>
+	<div
+		class="edgeButtonContainer nodrag nopan"
+		style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+	>
+		<button
+			class="edgeButton"
+			on:click={(event) => {
+				event.stopPropagation();
+				alert(`remove ${id}`);
+			}}
+		>
+			×
+		</button>
+	</div>
+</EdgeLabelRenderer>
+
+<style>
+	.edgeButtonContainer {
+		position: absolute;
+		font-size: 12pt;
+		/* everything inside EdgeLabelRenderer has no pointer events by default */
+		/* if you have an interactive element, set pointer-events: all */
+		pointer-events: all;
+	}
+
+	.edgeButton {
+		width: 20px;
+		height: 20px;
+		background: #eee;
+		border: 1px solid #fff;
+		cursor: pointer;
+		border-radius: 50%;
+		font-size: 12px;
+		line-height: 1;
+	}
+
+	.edgeButton:hover {
+		box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
+	}
+</style>
diff --git a/examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte b/examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte
new file mode 100644
index 00000000..48d86c3d
--- /dev/null
+++ b/examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { BezierEdge, type EdgeProps } from '@xyflow/svelte';
+
+	type $$Props = EdgeProps;
+
+	export let id: $$Props['id'] = '';
+	export let source: $$Props['source'] = '';
+	export let target: $$Props['target'] = '';
+	export let animated: $$Props['animated'] = undefined;
+	export let selected: $$Props['selected'] = undefined;
+	export let label: $$Props['label'] = undefined;
+	export let labelStyle: $$Props['labelStyle'] = undefined;
+	export let data: $$Props['data'] = undefined;
+	export let style: $$Props['style'] = undefined;
+	export let markerStart: $$Props['markerStart'] = undefined;
+	export let markerEnd: $$Props['markerEnd'] = undefined;
+	export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+	export let sourceX: $$Props['sourceX'];
+	export let sourceY: $$Props['sourceY'];
+	export let sourcePosition: $$Props['sourcePosition'];
+	export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+	export let targetX: $$Props['targetX'];
+	export let targetY: $$Props['targetY'];
+	export let targetPosition: $$Props['targetPosition'];
+	export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+	id;
+	source;
+	target;
+	animated;
+	selected;
+	data;
+	sourcePosition;
+	targetPosition;
+	sourceHandleId;
+	targetHandleId;
+</script>
+
+<BezierEdge
+	{sourceX}
+	{sourceY}
+	{sourcePosition}
+	{targetX}
+	{targetY}
+	{targetPosition}
+	{label}
+	{labelStyle}
+	{markerStart}
+	{markerEnd}
+	{style}
+	{interactionWidth}
+	pathOptions={{ curvature: 1 }}
+/>
diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx
index a9a453df..5a3c824d 100644
--- a/packages/react/src/components/Edges/StraightEdge.tsx
+++ b/packages/react/src/components/Edges/StraightEdge.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type Optional, getStraightPath } from '@xyflow/system';
+import { getStraightPath } from '@xyflow/system';
 
 import BaseEdge from './BaseEdge';
-import type { EdgeProps } from '../../types';
+import type { StraightEdgeProps } from '../../types';
 
 function createStraightEdge(params: { isInternal: boolean }) {
   // eslint-disable-next-line react/display-name
@@ -23,7 +23,7 @@ function createStraightEdge(params: { isInternal: boolean }) {
       markerEnd,
       markerStart,
       interactionWidth,
-    }: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
+    }: StraightEdgeProps) => {
       const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
       const _id = params.isInternal ? undefined : id;
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 896c4605..287c277d 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -109,7 +109,7 @@ export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd
 
 export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
 
-export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+export type StraightEdgeProps<T = any> = Omit<EdgeComponentProps<T>, 'sourcePosition' | 'targetPosition'>;
 
 export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: SmoothStepPathOptions;
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
new file mode 100644
index 00000000..9d32f4c7
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getBezierPath } from '@xyflow/system';
+
+  import type { BezierEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = BezierEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature: pathOptions?.curvature
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
deleted file mode 100644
index 749a5096..00000000
--- a/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { getBezierPath } from '@xyflow/system';
-
-  import type { BezierEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = BezierEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getBezierPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    curvature: $$props.pathOptions?.curvature
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
deleted file mode 100644
index 9f93e7df..00000000
--- a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseBezierEdge from './BaseBezierEdge.svelte';
-  import type { BezierEdgeProps } from '$lib/types';
-
-  type $$Props = BezierEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseBezierEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
deleted file mode 100644
index 75d168f4..00000000
--- a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseBezierEdge from './BaseBezierEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseBezierEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
new file mode 100644
index 00000000..9431a05d
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getBezierPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  // hopefully with Svelte5, we don't need this kind of workaround anymore
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
new file mode 100644
index 00000000..3e27368f
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { SmoothStepEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = SmoothStepEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: pathOptions?.borderRadius,
+    offset: pathOptions?.offset
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
deleted file mode 100644
index 5ec4dd89..00000000
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath } from '@xyflow/system';
-
-  import type { SmoothStepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = SmoothStepEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    borderRadius: $$props.pathOptions?.borderRadius,
-    offset: $$props.pathOptions?.offset
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
deleted file mode 100644
index 1cac5d1c..00000000
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
-  import type { SmoothStepEdgeProps } from '$lib/types';
-
-  type $$Props = SmoothStepEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseSmoothStepEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
deleted file mode 100644
index 803247c2..00000000
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseSmoothStepEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
new file mode 100644
index 00000000..28e87269
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
new file mode 100644
index 00000000..5ca6dc00
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StepEdge.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { StepEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = StepEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let pathOptions: $$Props['pathOptions'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 0,
+    offset: pathOptions?.offset
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
deleted file mode 100644
index 4099e7d5..00000000
--- a/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { getSmoothStepPath } from '@xyflow/system';
-
-  import type { StepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = StepEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getSmoothStepPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY,
-    sourcePosition: $$props.sourcePosition,
-    targetPosition: $$props.targetPosition,
-    borderRadius: 0,
-    offset: $$props.pathOptions?.offset
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
deleted file mode 100644
index 49522e95..00000000
--- a/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStepEdge from './BaseStepEdge.svelte';
-  import type { StepEdgeProps } from '$lib/types';
-
-  type $$Props = StepEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStepEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
deleted file mode 100644
index 21109992..00000000
--- a/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStepEdge from './BaseStepEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStepEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
new file mode 100644
index 00000000..248e5912
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 0
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
new file mode 100644
index 00000000..c868752f
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { getStraightPath } from '@xyflow/system';
+
+  import type { StraightEdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = StraightEdgeProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+
+  $: [path, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+</script>
+
+<BaseEdge
+  {id}
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
deleted file mode 100644
index 5db480ca..00000000
--- a/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getStraightPath } from '@xyflow/system';
-
-  import type { SmoothStepEdgeProps } from '$lib/types';
-  import { BaseEdge } from '$lib/components/BaseEdge';
-
-  type $$Props = SmoothStepEdgeProps & { internal?: boolean };
-
-  $: [path, labelX, labelY] = getStraightPath({
-    sourceX: $$props.sourceX,
-    sourceY: $$props.sourceY,
-    targetX: $$props.targetX,
-    targetY: $$props.targetY
-  });
-
-  $: id = $$props.internal ? undefined : $$props.id;
-</script>
-
-<BaseEdge
-  {path}
-  {labelX}
-  {labelY}
-  {id}
-  label={$$props.label}
-  labelStyle={$$props.labelStyle}
-  markerStart={$$props.markerStart}
-  markerEnd={$$props.markerEnd}
-  interactionWidth={$$props.interactionWidth}
-  style={$$props.style}
-/>
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
deleted file mode 100644
index d7153544..00000000
--- a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStraighEdge from './BaseStraightEdge.svelte';
-  import type { StraightEdgeProps } from '$lib/types';
-
-  type $$Props = StraightEdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStraighEdge {...props} />
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
deleted file mode 100644
index bad893b2..00000000
--- a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import BaseStraighEdge from './BaseStraightEdge.svelte';
-  import type { EdgeProps } from '$lib/types';
-
-  type $$Props = EdgeProps;
-
-  $: props = $$props as $$Props;
-</script>
-
-<BaseStraighEdge {...props} internal />
diff --git a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
new file mode 100644
index 00000000..0d436d52
--- /dev/null
+++ b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getStraightPath } from '@xyflow/system';
+
+  import type { EdgeProps } from '$lib/types';
+  import { BaseEdge } from '$lib/components/BaseEdge';
+
+  type $$Props = EdgeProps;
+
+  // these props are not used in this edge, but passed to every custom edge component
+  export let id: $$Props['id'] = '';
+  export let source: $$Props['source'] = '';
+  export let target: $$Props['target'] = '';
+
+  export let animated: $$Props['animated'] = undefined;
+  export let selected: $$Props['selected'] = undefined;
+  export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
+  export let data: $$Props['data'] = undefined;
+  export let style: $$Props['style'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let interactionWidth: $$Props['interactionWidth'] = undefined;
+
+  export let sourceX: $$Props['sourceX'];
+  export let sourceY: $$Props['sourceY'];
+  export let sourcePosition: $$Props['sourcePosition'];
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+
+  export let targetX: $$Props['targetX'];
+  export let targetY: $$Props['targetY'];
+  export let targetPosition: $$Props['targetPosition'];
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+  $: [path, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+
+  id;
+  source;
+  target;
+  animated;
+  selected;
+  data;
+  sourcePosition;
+  targetPosition;
+  sourceHandleId;
+  targetHandleId;
+</script>
+
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  {label}
+  {labelStyle}
+  {markerStart}
+  {markerEnd}
+  {interactionWidth}
+  {style}
+/>
diff --git a/packages/svelte/src/lib/components/edges/index.ts b/packages/svelte/src/lib/components/edges/index.ts
index 19f1f129..4be51363 100644
--- a/packages/svelte/src/lib/components/edges/index.ts
+++ b/packages/svelte/src/lib/components/edges/index.ts
@@ -2,14 +2,16 @@
 // The internal edges are used directly like custom edges and always get an id, source and target props
 // If you import an edge from the library, the id is optional and source and target are not used at all
 
-export { default as BezierEdge } from './BezierEdge/BezierEdge.svelte';
-export { default as BezierEdgeInternal } from './BezierEdge/BezierEdgeInternal.svelte';
+// @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
+// both are quite similar, it's just about 1-2 props that are different
+export { default as BezierEdge } from './BezierEdge.svelte';
+export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
 
-export { default as SmoothStepEdge } from './SmoothStepEdge/BaseSmoothStepEdge.svelte';
-export { default as SmoothStepEdgeInternal } from './SmoothStepEdge/SmoothStepEdgeInternal.svelte';
+export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
+export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
 
-export { default as StraightEdge } from './StraightEdge/StraightEdge.svelte';
-export { default as StraightEdgeInternal } from './StraightEdge/StraightEdgeInternal.svelte';
+export { default as StraightEdge } from './StraightEdge.svelte';
+export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
 
-export { default as StepEdge } from './StepEdge/StepEdge.svelte';
-export { default as StepEdgeInternal } from './StepEdge/StepEdgeInternal.svelte';
+export { default as StepEdge } from './StepEdge.svelte';
+export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index d9e0885f..a9107415 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -7,7 +7,7 @@ export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/BaseEdge';
-export * from '$lib/components/edges';
+export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';
 
 // plugins
@@ -29,7 +29,16 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 
 // types
-export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
+export type {
+  Edge,
+  EdgeProps,
+  BezierEdgeProps,
+  SmoothStepEdgeProps,
+  StepEdgeProps,
+  StraightEdgeProps,
+  EdgeTypes,
+  DefaultEdgeOptions
+} from '$lib/types/edges';
 export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
 export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
 export type { SvelteFlowStore } from '$lib/store/types';
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index 0a666ce7..3f1f0e8d 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -40,7 +40,7 @@ export type Edge<T = any> =
   | BezierEdgeType<T>
   | StepEdgeType<T>;
 
-export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> &
+export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
   EdgePosition & {
     markerStart?: string;
     markerEnd?: string;
@@ -48,7 +48,13 @@ export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'>
     targetHandleId?: string | null;
   };
 
-export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
+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;
@@ -62,7 +68,10 @@ export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
   pathOptions?: StepPathOptions;
 };
 
-export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
+export type StraightEdgeProps<T = any> = Omit<
+  EdgeComponentProps<T>,
+  'sourcePosition' | 'targetPosition'
+>;
 
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json
index 8fbe9e82..d9cfe5d6 100644
--- a/packages/svelte/tsconfig.json
+++ b/packages/svelte/tsconfig.json
@@ -8,7 +8,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "noErrorTruncation": true
   }
 
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
diff --git a/tooling/tsconfig/react.json b/tooling/tsconfig/react.json
index e3cb9853..33c4fc1f 100644
--- a/tooling/tsconfig/react.json
+++ b/tooling/tsconfig/react.json
@@ -6,6 +6,7 @@
     "lib": ["dom", "esnext"],
     "module": "esnext",
     "target": "esnext",
-    "outDir": "dist"
+    "outDir": "dist",
+    "noErrorTruncation": true
   }
 }

From b2a1ab06108cb6489dcfa697a8519cb63253132b Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 30 Nov 2023 14:46:07 +0100
Subject: [PATCH 35/65] refactor(svelte): do not update nodes on pane click
 #3638

---
 packages/svelte/src/lib/store/index.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index ec771416..873d9b6f 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -192,15 +192,20 @@ export function createStore({
   }
 
   function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
-    const nodeIdsToUnselect = (params?.nodes ? params.nodes : get(store.nodes)).map(
-      (item) => item.id
-    );
-    const edgeIdsToUnselect = (params?.edges ? params.edges : get(store.edges)).map(
-      (item) => item.id
-    );
+    const selectedNodeIds = (params?.nodes ? params.nodes : get(store.nodes))
+      .filter((node) => node.selected)
+      .map((node) => node.id);
+    const selectedEdgeIds = (params?.edges ? params.edges : get(store.edges))
+      .filter((edge) => edge.selected)
+      .map((edge) => edge.id);
 
-    store.nodes.update((ns) => ns.map(resetSelectedItem(nodeIdsToUnselect)));
-    store.edges.update((es) => es.map(resetSelectedItem(edgeIdsToUnselect)));
+    if (selectedNodeIds.length) {
+      store.nodes.update((ns) => ns.map(resetSelectedItem(selectedNodeIds)));
+    }
+
+    if (selectedEdgeIds.length) {
+      store.edges.update((es) => es.map(resetSelectedItem(selectedEdgeIds)));
+    }
   }
 
   store.deleteKeyPressed.subscribe((deleteKeyPressed) => {

From 124df00f60762518fc0b390af1702e70f74c8494 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 1 Dec 2023 12:10:01 +0100
Subject: [PATCH 36/65] feat(react): connection lookup draft

---
 examples/react/src/App/routes.ts              |   6 +
 .../examples/CustomNode/ColorSelectorNode.tsx |   2 +-
 .../MultiHandleNode.tsx                       |  40 ++++++
 .../SingleHandleNode.tsx                      |  42 +++++++
 .../UseHandleConnectionStatus/index.tsx       | 118 ++++++++++++++++++
 .../src/hooks/useHandleConnectionStatus.ts    |  85 +++++++++++++
 packages/react/src/index.ts                   |   1 +
 packages/react/src/store/index.ts             |  10 +-
 packages/react/src/store/initialState.ts      |   4 +
 packages/react/src/store/utils.ts             |  24 ++++
 packages/react/src/types/store.ts             |   2 +
 11 files changed, 330 insertions(+), 4 deletions(-)
 create mode 100644 examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx
 create mode 100644 examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
 create mode 100644 examples/react/src/examples/UseHandleConnectionStatus/index.tsx
 create mode 100644 packages/react/src/hooks/useHandleConnectionStatus.ts

diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts
index 2665abfa..18307c79 100644
--- a/examples/react/src/App/routes.ts
+++ b/examples/react/src/App/routes.ts
@@ -45,6 +45,7 @@ import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
 import useNodesInitialized from '../examples/UseNodesInit';
+import useHandleConnectionStatus from '../examples/UseHandleConnectionStatus';
 
 export interface IRoute {
   name: string;
@@ -273,6 +274,11 @@ const routes: IRoute[] = [
     path: 'usereactflow',
     component: UseReactFlow,
   },
+  {
+    name: 'useHandleConnectionStatus',
+    path: 'usehandleconnectionstatus',
+    component: useHandleConnectionStatus,
+  },
   {
     name: 'useUpdateNodeInternals',
     path: 'useupdatenodeinternals',
diff --git a/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx b/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx
index aebc8e0e..6857e1ac 100644
--- a/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx
+++ b/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx
@@ -1,4 +1,4 @@
-import React, { memo, FC, CSSProperties, useCallback } from 'react';
+import React, { memo, FC, CSSProperties, useCallback, useEffect } from 'react';
 import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
diff --git a/examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx b/examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx
new file mode 100644
index 00000000..f8a31143
--- /dev/null
+++ b/examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx
@@ -0,0 +1,40 @@
+import { memo, FC, useEffect, useCallback } from 'react';
+import { Handle, Position, NodeProps, useHandleConnectionStatus, Connection } from '@xyflow/react';
+import { HandleComponentProps } from '@xyflow/react/dist/esm/components/Handle';
+
+function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
+  const onConnect = useCallback(
+    (connections: Connection[]) => console.log('onConnect handler, node id:', nodeId, connections),
+    [nodeId]
+  );
+
+  const onDisconnect = useCallback(
+    (connections: Connection[]) => console.log('onDisconnect handler, node id:', nodeId, connections),
+    [nodeId]
+  );
+  const status = useHandleConnectionStatus({
+    handleType: handleProps.type,
+    handleId: handleProps.id,
+    onConnect,
+    onDisconnect,
+  });
+
+  useEffect(() => {
+    console.log('useEffect, node id:', nodeId, handleProps.type, status);
+  }, [status]);
+
+  return <Handle {...handleProps} />;
+}
+
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  return (
+    <div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <CustomHandle nodeId={id} type="target" position={Position.Left} />
+      <div>node {id}</div>
+      <CustomHandle nodeId={id} type="source" position={Position.Right} id="a" style={{ top: 10 }} />
+      <CustomHandle nodeId={id} type="source" position={Position.Right} id="b" style={{ top: 20 }} />
+    </div>
+  );
+};
+
+export default memo(CustomNode);
diff --git a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx b/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
new file mode 100644
index 00000000..85d4f9e1
--- /dev/null
+++ b/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
@@ -0,0 +1,42 @@
+import { memo, FC, useEffect, useCallback } from 'react';
+import { Handle, Position, NodeProps, useHandleConnectionStatus, Connection } from '@xyflow/react';
+import { HandleComponentProps } from '@xyflow/react/dist/esm/components/Handle';
+
+function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
+  const onConnect = useCallback(
+    (connections: Connection[]) => {
+      console.log('onConnect handler, node id:', nodeId, connections);
+    },
+    [nodeId]
+  );
+  const onDisconnect = useCallback(
+    (connections: Connection[]) => {
+      console.log('onDisconnect handler, node id:', nodeId, connections);
+    },
+    [nodeId]
+  );
+  const status = useHandleConnectionStatus({
+    handleType: handleProps.type,
+    handleId: handleProps.id,
+    onConnect,
+    onDisconnect,
+  });
+
+  useEffect(() => {
+    //  console.log('useEffect, node id:', nodeId, handleProps.type, status);
+  }, [status]);
+
+  return <Handle {...handleProps} />;
+}
+
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  return (
+    <div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <CustomHandle nodeId={id} type="target" position={Position.Left} />
+      <div>node {id}</div>
+      <CustomHandle nodeId={id} type="source" position={Position.Right} />
+    </div>
+  );
+};
+
+export default memo(CustomNode);
diff --git a/examples/react/src/examples/UseHandleConnectionStatus/index.tsx b/examples/react/src/examples/UseHandleConnectionStatus/index.tsx
new file mode 100644
index 00000000..c6aa4a68
--- /dev/null
+++ b/examples/react/src/examples/UseHandleConnectionStatus/index.tsx
@@ -0,0 +1,118 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Background,
+} from '@xyflow/react';
+
+import MultiHandleNode from './MultiHandleNode';
+import SingleHandleNode from './SingleHandleNode';
+
+const nodeTypes = {
+  multi: MultiHandleNode,
+  single: SingleHandleNode,
+};
+
+const initNodes = [
+  {
+    id: '1',
+    type: 'single',
+    data: {},
+    position: { x: 0, y: 0 },
+  },
+  {
+    id: '2',
+    type: 'single',
+    data: {},
+    position: { x: 200, y: -100 },
+  },
+  {
+    id: '3',
+    type: 'single',
+    data: {},
+    position: { x: 200, y: 100 },
+  },
+
+  {
+    id: '4',
+    type: 'multi',
+    data: {},
+    position: { x: 400, y: 0 },
+  },
+  {
+    id: '5',
+    type: 'multi',
+    data: {},
+    position: { x: 600, y: -100 },
+  },
+  {
+    id: '6',
+    type: 'multi',
+    data: {},
+    position: { x: 600, y: 100 },
+  },
+];
+
+const initEdges = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+  },
+  {
+    id: 'e1-3',
+    source: '1',
+    target: '3',
+  },
+
+  {
+    id: 'e4a-5',
+    source: '4',
+    sourceHandle: 'a',
+    target: '5',
+  },
+  {
+    id: 'e4b-5',
+    source: '4',
+    sourceHandle: 'b',
+    target: '6',
+  },
+];
+
+const defaultEdgeOptions = {
+  animated: true,
+};
+
+const CustomNodeFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
+
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      fitView
+      minZoom={0.3}
+      maxZoom={2}
+      colorMode="dark"
+      defaultEdgeOptions={defaultEdgeOptions}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+};
+
+export default CustomNodeFlow;
diff --git a/packages/react/src/hooks/useHandleConnectionStatus.ts b/packages/react/src/hooks/useHandleConnectionStatus.ts
new file mode 100644
index 00000000..062d5d93
--- /dev/null
+++ b/packages/react/src/hooks/useHandleConnectionStatus.ts
@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Connection, HandleType } from '@xyflow/system';
+
+import { useStore } from './useStore';
+import { useNodeId } from '../contexts/NodeIdContext';
+
+type useHandleConnectionStatusParams = {
+  handleType: HandleType;
+  nodeId?: string;
+  handleId?: string | null;
+  onConnect?: (connections: Connection[]) => void;
+  onDisconnect?: (connections: Connection[]) => void;
+};
+
+function connectionsEqual(a: Connection[] | null, b: Connection[] | null) {
+  if (!a && !b) {
+    return true;
+  }
+
+  if (!a || !b) {
+    return false;
+  }
+
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  return a.every((connA) =>
+    b.find(
+      (connB) =>
+        connA.source === connB.source &&
+        connA.target === connB.target &&
+        connA.sourceHandle === connB.sourceHandle &&
+        connA.targetHandle === connB.targetHandle
+    )
+  );
+}
+
+export function useHandleConnectionStatus({
+  handleType,
+  nodeId,
+  handleId = null,
+  onConnect,
+  onDisconnect,
+}: useHandleConnectionStatusParams): {
+  connected: boolean;
+  connections: Connection[] | null;
+} {
+  const _nodeId = useNodeId();
+  const prevConnections = useRef<Connection[] | null>(null);
+  const currentNodeId = nodeId || _nodeId;
+
+  const connections = useStore(
+    (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`) || null,
+    connectionsEqual
+  );
+
+  useEffect(() => {
+    // we don't want to trigger the handlers for the initial render
+    if (prevConnections.current && prevConnections.current !== connections) {
+      if (prevConnections.current?.length > (connections?.length ?? 0)) {
+        const disconnect = prevConnections.current.filter(
+          (prevConnection) => !connections?.find((connection) => connection.source === prevConnection.source)
+        );
+        onDisconnect?.(disconnect);
+      } else if (connections?.length) {
+        const connect = connections.filter(
+          (connection) =>
+            !prevConnections.current?.find((prevConnection) => prevConnection.source === connection.source)
+        );
+        onConnect?.(connect);
+      }
+    }
+
+    prevConnections.current = connections ?? [];
+  }, [connections, onConnect, onDisconnect]);
+
+  return useMemo(
+    () => ({
+      connected: !!connections,
+      connections,
+    }),
+    [connections]
+  );
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 2a693638..d9013b7c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -22,6 +22,7 @@ export { useStore, useStoreApi } from './hooks/useStore';
 export { default as useOnViewportChange, type UseOnViewportChangeOptions } from './hooks/useOnViewportChange';
 export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
+export { useHandleConnectionStatus } from './hooks/useHandleConnectionStatus';
 export { useNodeId } from './contexts/NodeIdContext';
 
 export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/changes';
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 0f50f385..0237491a 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -10,7 +10,7 @@ import {
 } from '@xyflow/system';
 
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
-import { updateNodesAndEdgesSelections } from './utils';
+import { updateConnectionLookup, updateNodesAndEdgesSelections } from './utils';
 import getInitialState from './initialState';
 import type {
   ReactFlowState,
@@ -49,8 +49,12 @@ const createRFStore = ({
         set({ nodes: nextNodes });
       },
       setEdges: (edges: Edge[]) => {
-        const { defaultEdgeOptions = {} } = get();
-        set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
+        const { defaultEdgeOptions = {}, connectionLookup } = get();
+        const nextEdges = edges.map((e) => ({ ...defaultEdgeOptions, ...e }));
+
+        updateConnectionLookup(connectionLookup, nextEdges);
+
+        set({ edges: nextEdges });
       },
       // when the user works with an uncontrolled flow,
       // we set a flag `hasDefaultNodes` / `hasDefaultEdges`
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index 48e5434f..1c843fe4 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -5,9 +5,11 @@ import {
   getNodesBounds,
   getViewportForBounds,
   Transform,
+  Connection,
 } from '@xyflow/system';
 
 import type { Edge, Node, ReactFlowStore } from '../types';
+import { updateConnectionLookup } from './utils';
 
 const getInitialState = ({
   nodes = [],
@@ -23,6 +25,7 @@ const getInitialState = ({
   fitView?: boolean;
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map<string, Node>();
+  const connectionLookup = updateConnectionLookup(new Map<string, Connection[]>(), edges);
   const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];
@@ -42,6 +45,7 @@ const getInitialState = ({
     nodes: nextNodes,
     nodeLookup,
     edges: edges,
+    connectionLookup,
     onNodesChange: null,
     onEdgesChange: null,
     hasDefaultNodes: false,
diff --git a/packages/react/src/store/utils.ts b/packages/react/src/store/utils.ts
index 86cddde7..ac9e43fa 100644
--- a/packages/react/src/store/utils.ts
+++ b/packages/react/src/store/utils.ts
@@ -1,5 +1,6 @@
 import type { StoreApi } from 'zustand';
 import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types';
+import { Connection } from '@xyflow/system';
 
 export function handleControlledSelectionChange<NodeOrEdge extends Node | Edge>(
   changes: NodeSelectionChange[] | EdgeSelectionChange[],
@@ -42,3 +43,26 @@ export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get,
     onEdgesChange?.(changedEdges);
   }
 }
+
+export function updateConnectionLookup(lookup: Map<string, Connection[]>, edges: Edge[]) {
+  lookup.clear();
+
+  edges.forEach((edge) => {
+    const { source, target, sourceHandle = null, targetHandle = null } = edge;
+
+    if (source && target) {
+      const sourceKey = `${source}-source-${sourceHandle}`;
+      const targetKey = `${target}-target-${targetHandle}`;
+
+      const prevSource = lookup.get(sourceKey);
+      const prevTarget = lookup.get(targetKey);
+
+      const connection = { source, target, sourceHandle, targetHandle };
+
+      lookup.set(sourceKey, prevSource ? [...prevSource, connection] : [connection]);
+      lookup.set(targetKey, prevTarget ? [...prevTarget, connection] : [connection]);
+    }
+  });
+
+  return lookup;
+}
diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
index c473cbd5..3ee1175d 100644
--- a/packages/react/src/types/store.ts
+++ b/packages/react/src/types/store.ts
@@ -24,6 +24,7 @@ import {
   type OnMoveEnd,
   type IsValidConnection,
   type UpdateConnection,
+  Connection,
 } from '@xyflow/system';
 
 import type {
@@ -49,6 +50,7 @@ export type ReactFlowStore = {
   nodes: Node[];
   nodeLookup: Map<string, Node>;
   edges: Edge[];
+  connectionLookup: Map<string, Connection[]>;
   onNodesChange: OnNodesChange | null;
   onEdgesChange: OnEdgesChange | null;
   hasDefaultNodes: boolean;

From b6743a3cf3112fa44d6e6ecf225b6ab93b3c4e4e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 4 Dec 2023 14:23:42 +0100
Subject: [PATCH 37/65] refactor(react/handle-connection-state): cleanup

---
 .../src/hooks/useHandleConnectionStatus.ts    | 54 ++++++-------------
 packages/react/src/store/index.ts             |  1 +
 packages/react/src/store/utils.ts             |  4 +-
 packages/react/src/types/store.ts             |  1 +
 packages/react/src/utils/general.ts           | 30 +++++++++++
 5 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/packages/react/src/hooks/useHandleConnectionStatus.ts b/packages/react/src/hooks/useHandleConnectionStatus.ts
index 062d5d93..42980ee7 100644
--- a/packages/react/src/hooks/useHandleConnectionStatus.ts
+++ b/packages/react/src/hooks/useHandleConnectionStatus.ts
@@ -3,6 +3,7 @@ import { Connection, HandleType } from '@xyflow/system';
 
 import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
+import { areConnectionsEqual, isSameConnection } from '../utils/general';
 
 type useHandleConnectionStatusParams = {
   handleType: HandleType;
@@ -12,30 +13,6 @@ type useHandleConnectionStatusParams = {
   onDisconnect?: (connections: Connection[]) => void;
 };
 
-function connectionsEqual(a: Connection[] | null, b: Connection[] | null) {
-  if (!a && !b) {
-    return true;
-  }
-
-  if (!a || !b) {
-    return false;
-  }
-
-  if (a.length !== b.length) {
-    return false;
-  }
-
-  return a.every((connA) =>
-    b.find(
-      (connB) =>
-        connA.source === connB.source &&
-        connA.target === connB.target &&
-        connA.sourceHandle === connB.sourceHandle &&
-        connA.targetHandle === connB.targetHandle
-    )
-  );
-}
-
 export function useHandleConnectionStatus({
   handleType,
   nodeId,
@@ -52,23 +29,26 @@ export function useHandleConnectionStatus({
 
   const connections = useStore(
     (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`) || null,
-    connectionsEqual
+    areConnectionsEqual
   );
 
   useEffect(() => {
-    // we don't want to trigger the handlers for the initial render
+    // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
     if (prevConnections.current && prevConnections.current !== connections) {
-      if (prevConnections.current?.length > (connections?.length ?? 0)) {
-        const disconnect = prevConnections.current.filter(
-          (prevConnection) => !connections?.find((connection) => connection.source === prevConnection.source)
-        );
-        onDisconnect?.(disconnect);
-      } else if (connections?.length) {
-        const connect = connections.filter(
-          (connection) =>
-            !prevConnections.current?.find((prevConnection) => prevConnection.source === connection.source)
-        );
-        onConnect?.(connect);
+      const disconnectedConnections = prevConnections.current.filter(
+        (prevConnection) => !connections?.find((connection) => isSameConnection(connection, prevConnection))
+      );
+
+      const newConnections = connections?.filter(
+        (connection) => !prevConnections.current?.find((prevConnection) => isSameConnection(prevConnection, connection))
+      );
+
+      if (disconnectedConnections.length) {
+        onDisconnect?.(disconnectedConnections);
+      }
+
+      if (newConnections?.length) {
+        onConnect?.(newConnections);
       }
     }
 
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 0237491a..0b308752 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -330,6 +330,7 @@ const createRFStore = ({
 
         set(currentConnection);
       },
+
       reset: () => {
         // @todo: what should we do about this? Do we still need it?
         // if you are on a SPA with multiple flows, we want to make sure that the store gets resetted
diff --git a/packages/react/src/store/utils.ts b/packages/react/src/store/utils.ts
index ac9e43fa..2df777fd 100644
--- a/packages/react/src/store/utils.ts
+++ b/packages/react/src/store/utils.ts
@@ -47,9 +47,7 @@ export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get,
 export function updateConnectionLookup(lookup: Map<string, Connection[]>, edges: Edge[]) {
   lookup.clear();
 
-  edges.forEach((edge) => {
-    const { source, target, sourceHandle = null, targetHandle = null } = edge;
-
+  edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
     if (source && target) {
       const sourceKey = `${source}-source-${sourceHandle}`;
       const targetKey = `${target}-target-${targetHandle}`;
diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
index 3ee1175d..d14a1640 100644
--- a/packages/react/src/types/store.ts
+++ b/packages/react/src/types/store.ts
@@ -51,6 +51,7 @@ export type ReactFlowStore = {
   nodeLookup: Map<string, Node>;
   edges: Edge[];
   connectionLookup: Map<string, Connection[]>;
+
   onNodesChange: OnNodesChange | null;
   onEdgesChange: OnEdgesChange | null;
   hasDefaultNodes: boolean;
diff --git a/packages/react/src/utils/general.ts b/packages/react/src/utils/general.ts
index e13247c1..018cd358 100644
--- a/packages/react/src/utils/general.ts
+++ b/packages/react/src/utils/general.ts
@@ -6,6 +6,7 @@ import {
   getIncomersBase,
   updateEdgeBase,
   getConnectedEdgesBase,
+  Connection,
 } from '@xyflow/system';
 
 import type { Edge, Node } from '../types';
@@ -17,3 +18,32 @@ export const getIncomers = getIncomersBase<Node, Edge>;
 export const addEdge = addEdgeBase<Edge>;
 export const updateEdge = updateEdgeBase<Edge>;
 export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
+
+export function isSameConnection(a: Connection, b: Connection) {
+  return (
+    a.source === b.source &&
+    a.target === b.target &&
+    a.sourceHandle === b.sourceHandle &&
+    a.targetHandle === b.targetHandle
+  );
+}
+
+export function areConnectionsEqual(a: Connection[] | null | undefined, b: Connection[] | null | undefined) {
+  if (!a && !b) {
+    return true;
+  }
+
+  if (!a || !b) {
+    return false;
+  }
+
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  if (!a.length && !b.length) {
+    return true;
+  }
+
+  return !a.some((connA) => !b.find((connB) => isSameConnection(connA, connB)));
+}

From a58f9156971cfe1105eb69be86c7d16e83a28f86 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 6 Dec 2023 17:49:34 +0100
Subject: [PATCH 38/65] refactor(connectionlookup): use maps instead of arrays

---
 .../SingleHandleNode.tsx                      |  2 +-
 .../src/hooks/useHandleConnectionStatus.ts    | 90 ++++++++++++++-----
 packages/react/src/store/initialState.ts      |  2 +-
 packages/react/src/store/utils.ts             | 11 ++-
 packages/react/src/types/store.ts             |  2 +-
 packages/react/src/utils/general.ts           | 30 -------
 6 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx b/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
index 85d4f9e1..ebbe584c 100644
--- a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
+++ b/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
@@ -23,7 +23,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
   });
 
   useEffect(() => {
-    //  console.log('useEffect, node id:', nodeId, handleProps.type, status);
+    console.log('useEffect, node id:', nodeId, handleProps.type, status);
   }, [status]);
 
   return <Handle {...handleProps} />;
diff --git a/packages/react/src/hooks/useHandleConnectionStatus.ts b/packages/react/src/hooks/useHandleConnectionStatus.ts
index 42980ee7..470cc077 100644
--- a/packages/react/src/hooks/useHandleConnectionStatus.ts
+++ b/packages/react/src/hooks/useHandleConnectionStatus.ts
@@ -3,7 +3,6 @@ import { Connection, HandleType } from '@xyflow/system';
 
 import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
-import { areConnectionsEqual, isSameConnection } from '../utils/general';
 
 type useHandleConnectionStatusParams = {
   handleType: HandleType;
@@ -13,10 +12,69 @@ type useHandleConnectionStatusParams = {
   onDisconnect?: (connections: Connection[]) => void;
 };
 
+function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
+  if (!a && !b) {
+    return true;
+  }
+
+  if (!a || !b || a.size !== b.size) {
+    return false;
+  }
+
+  if (!a.size && !b.size) {
+    return true;
+  }
+
+  for (const key of a.keys()) {
+    if (!b.has(key)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * We call the callback for all connections in a that are not in b
+ * @internal
+ */
+function handleConnectionChange(
+  a: Map<string, Connection>,
+  b: Map<string, Connection>,
+  cb?: (diff: Connection[]) => void
+) {
+  if (!cb) {
+    return;
+  }
+
+  const diff: Connection[] = [];
+
+  a.forEach((connection, key) => {
+    if (!b?.has(key)) {
+      diff.push(connection);
+    }
+  });
+
+  if (diff.length) {
+    cb(diff);
+  }
+}
+
+/**
+ *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ *
+ * @public
+ * @param param.handleType - 'source' or 'target'
+ * @param param.handleId - 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.onConnect - gets called when a connection is established
+ * @param param.onDisconnect - gets called when a connection is removed
+ * @returns a `connected` boolean and a connections array
+ */
 export function useHandleConnectionStatus({
   handleType,
-  nodeId,
   handleId = null,
+  nodeId,
   onConnect,
   onDisconnect,
 }: useHandleConnectionStatusParams): {
@@ -24,41 +82,29 @@ export function useHandleConnectionStatus({
   connections: Connection[] | null;
 } {
   const _nodeId = useNodeId();
-  const prevConnections = useRef<Connection[] | null>(null);
+  const prevConnections = useRef<Map<string, Connection> | null>(null);
   const currentNodeId = nodeId || _nodeId;
 
   const connections = useStore(
-    (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`) || null,
-    areConnectionsEqual
+    (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`),
+    areConnectionMapsEqual
   );
 
   useEffect(() => {
     // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
     if (prevConnections.current && prevConnections.current !== connections) {
-      const disconnectedConnections = prevConnections.current.filter(
-        (prevConnection) => !connections?.find((connection) => isSameConnection(connection, prevConnection))
-      );
-
-      const newConnections = connections?.filter(
-        (connection) => !prevConnections.current?.find((prevConnection) => isSameConnection(prevConnection, connection))
-      );
-
-      if (disconnectedConnections.length) {
-        onDisconnect?.(disconnectedConnections);
-      }
-
-      if (newConnections?.length) {
-        onConnect?.(newConnections);
-      }
+      const _connections = connections ?? new Map();
+      handleConnectionChange(prevConnections.current, _connections, onDisconnect);
+      handleConnectionChange(_connections, prevConnections.current, onConnect);
     }
 
-    prevConnections.current = connections ?? [];
+    prevConnections.current = connections ?? new Map();
   }, [connections, onConnect, onDisconnect]);
 
   return useMemo(
     () => ({
       connected: !!connections,
-      connections,
+      connections: Array.from(connections?.values() ?? []),
     }),
     [connections]
   );
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index 1c843fe4..f167a9aa 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -25,7 +25,7 @@ const getInitialState = ({
   fitView?: boolean;
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map<string, Node>();
-  const connectionLookup = updateConnectionLookup(new Map<string, Connection[]>(), edges);
+  const connectionLookup = updateConnectionLookup(new Map<string, Map<string, Connection>>(), edges);
   const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];
diff --git a/packages/react/src/store/utils.ts b/packages/react/src/store/utils.ts
index 2df777fd..7ad5ad43 100644
--- a/packages/react/src/store/utils.ts
+++ b/packages/react/src/store/utils.ts
@@ -44,7 +44,7 @@ export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get,
   }
 }
 
-export function updateConnectionLookup(lookup: Map<string, Connection[]>, edges: Edge[]) {
+export function updateConnectionLookup(lookup: Map<string, Map<string, Connection>>, edges: Edge[]) {
   lookup.clear();
 
   edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
@@ -52,13 +52,12 @@ export function updateConnectionLookup(lookup: Map<string, Connection[]>, edges:
       const sourceKey = `${source}-source-${sourceHandle}`;
       const targetKey = `${target}-target-${targetHandle}`;
 
-      const prevSource = lookup.get(sourceKey);
-      const prevTarget = lookup.get(targetKey);
-
+      const prevSource = lookup.get(sourceKey) || new Map();
+      const prevTarget = lookup.get(targetKey) || new Map();
       const connection = { source, target, sourceHandle, targetHandle };
 
-      lookup.set(sourceKey, prevSource ? [...prevSource, connection] : [connection]);
-      lookup.set(targetKey, prevTarget ? [...prevTarget, connection] : [connection]);
+      lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
+      lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
     }
   });
 
diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
index d14a1640..5aebb99d 100644
--- a/packages/react/src/types/store.ts
+++ b/packages/react/src/types/store.ts
@@ -50,7 +50,7 @@ export type ReactFlowStore = {
   nodes: Node[];
   nodeLookup: Map<string, Node>;
   edges: Edge[];
-  connectionLookup: Map<string, Connection[]>;
+  connectionLookup: Map<string, Map<string, Connection>>;
 
   onNodesChange: OnNodesChange | null;
   onEdgesChange: OnEdgesChange | null;
diff --git a/packages/react/src/utils/general.ts b/packages/react/src/utils/general.ts
index 018cd358..e13247c1 100644
--- a/packages/react/src/utils/general.ts
+++ b/packages/react/src/utils/general.ts
@@ -6,7 +6,6 @@ import {
   getIncomersBase,
   updateEdgeBase,
   getConnectedEdgesBase,
-  Connection,
 } from '@xyflow/system';
 
 import type { Edge, Node } from '../types';
@@ -18,32 +17,3 @@ export const getIncomers = getIncomersBase<Node, Edge>;
 export const addEdge = addEdgeBase<Edge>;
 export const updateEdge = updateEdgeBase<Edge>;
 export const getConnectedEdges = getConnectedEdgesBase<Node, Edge>;
-
-export function isSameConnection(a: Connection, b: Connection) {
-  return (
-    a.source === b.source &&
-    a.target === b.target &&
-    a.sourceHandle === b.sourceHandle &&
-    a.targetHandle === b.targetHandle
-  );
-}
-
-export function areConnectionsEqual(a: Connection[] | null | undefined, b: Connection[] | null | undefined) {
-  if (!a && !b) {
-    return true;
-  }
-
-  if (!a || !b) {
-    return false;
-  }
-
-  if (a.length !== b.length) {
-    return false;
-  }
-
-  if (!a.length && !b.length) {
-    return true;
-  }
-
-  return !a.some((connA) => !b.find((connB) => isSameConnection(connA, connB)));
-}

From 959935dfb52811f7f65af4331a6ddbfcf7d6c8f7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 7 Dec 2023 13:23:25 +0100
Subject: [PATCH 39/65] feat(hooks): add useNodesData, useUpdateNodeData,
 simplify useHandleConnections

---
 examples/react/src/App/routes.ts              | 18 ++--
 .../MultiHandleNode.tsx                       |  9 +-
 .../SingleHandleNode.tsx                      |  9 +-
 .../index.tsx                                 |  0
 .../src/examples/UseNodesData/ResultNode.tsx  | 25 +++++
 .../src/examples/UseNodesData/TextNode.tsx    | 20 ++++
 .../react/src/examples/UseNodesData/index.tsx | 83 ++++++++++++++++
 ...ctionStatus.ts => useHandleConnections.ts} | 97 +++++++++----------
 packages/react/src/hooks/useNodesData.ts      | 33 +++++++
 packages/react/src/hooks/useUpdateNodeData.ts | 13 +++
 packages/react/src/index.ts                   |  6 +-
 packages/system/src/types/general.ts          |  4 +-
 12 files changed, 246 insertions(+), 71 deletions(-)
 rename examples/react/src/examples/{UseHandleConnectionStatus => UseHandleConnections}/MultiHandleNode.tsx (82%)
 rename examples/react/src/examples/{UseHandleConnectionStatus => UseHandleConnections}/SingleHandleNode.tsx (81%)
 rename examples/react/src/examples/{UseHandleConnectionStatus => UseHandleConnections}/index.tsx (100%)
 create mode 100644 examples/react/src/examples/UseNodesData/ResultNode.tsx
 create mode 100644 examples/react/src/examples/UseNodesData/TextNode.tsx
 create mode 100644 examples/react/src/examples/UseNodesData/index.tsx
 rename packages/react/src/hooks/{useHandleConnectionStatus.ts => useHandleConnections.ts} (86%)
 create mode 100644 packages/react/src/hooks/useNodesData.ts
 create mode 100644 packages/react/src/hooks/useUpdateNodeData.ts

diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts
index 18307c79..4bab00f5 100644
--- a/examples/react/src/App/routes.ts
+++ b/examples/react/src/App/routes.ts
@@ -44,8 +44,9 @@ import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
-import useNodesInitialized from '../examples/UseNodesInit';
-import useHandleConnectionStatus from '../examples/UseHandleConnectionStatus';
+import UseNodesInitialized from '../examples/UseNodesInit';
+import UseNodesData from '../examples/UseNodesData';
+import UseHandleConnections from '../examples/UseHandleConnections';
 
 export interface IRoute {
   name: string;
@@ -262,7 +263,7 @@ const routes: IRoute[] = [
   {
     name: 'useNodesInitialized',
     path: 'use-nodes-initialized',
-    component: useNodesInitialized,
+    component: UseNodesInitialized,
   },
   {
     name: 'useOnSelectionChange',
@@ -275,9 +276,14 @@ const routes: IRoute[] = [
     component: UseReactFlow,
   },
   {
-    name: 'useHandleConnectionStatus',
-    path: 'usehandleconnectionstatus',
-    component: useHandleConnectionStatus,
+    name: 'useHandleConnections',
+    path: 'usehandleconnections',
+    component: UseHandleConnections,
+  },
+  {
+    name: 'useNodesData',
+    path: 'usenodesdata',
+    component: UseNodesData,
   },
   {
     name: 'useUpdateNodeInternals',
diff --git a/examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx b/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx
similarity index 82%
rename from examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx
rename to examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx
index f8a31143..e04f3448 100644
--- a/examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx
+++ b/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx
@@ -1,6 +1,5 @@
 import { memo, FC, useEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps, useHandleConnectionStatus, Connection } from '@xyflow/react';
-import { HandleComponentProps } from '@xyflow/react/dist/esm/components/Handle';
+import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleComponentProps } from '@xyflow/react';
 
 function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
   const onConnect = useCallback(
@@ -12,7 +11,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
     (connections: Connection[]) => console.log('onDisconnect handler, node id:', nodeId, connections),
     [nodeId]
   );
-  const status = useHandleConnectionStatus({
+  const connections = useHandleConnections({
     handleType: handleProps.type,
     handleId: handleProps.id,
     onConnect,
@@ -20,8 +19,8 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
   });
 
   useEffect(() => {
-    console.log('useEffect, node id:', nodeId, handleProps.type, status);
-  }, [status]);
+    console.log('useEffect, node id:', nodeId, handleProps.type, connections);
+  }, [connections]);
 
   return <Handle {...handleProps} />;
 }
diff --git a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx b/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx
similarity index 81%
rename from examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
rename to examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx
index ebbe584c..444499fb 100644
--- a/examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx
+++ b/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx
@@ -1,6 +1,5 @@
 import { memo, FC, useEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps, useHandleConnectionStatus, Connection } from '@xyflow/react';
-import { HandleComponentProps } from '@xyflow/react/dist/esm/components/Handle';
+import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleComponentProps } from '@xyflow/react';
 
 function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
   const onConnect = useCallback(
@@ -15,7 +14,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
     },
     [nodeId]
   );
-  const status = useHandleConnectionStatus({
+  const connections = useHandleConnections({
     handleType: handleProps.type,
     handleId: handleProps.id,
     onConnect,
@@ -23,8 +22,8 @@ function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeI
   });
 
   useEffect(() => {
-    console.log('useEffect, node id:', nodeId, handleProps.type, status);
-  }, [status]);
+    console.log('useEffect, node id:', nodeId, handleProps.type, connections);
+  }, [connections]);
 
   return <Handle {...handleProps} />;
 }
diff --git a/examples/react/src/examples/UseHandleConnectionStatus/index.tsx b/examples/react/src/examples/UseHandleConnections/index.tsx
similarity index 100%
rename from examples/react/src/examples/UseHandleConnectionStatus/index.tsx
rename to examples/react/src/examples/UseHandleConnections/index.tsx
diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx
new file mode 100644
index 00000000..09603eac
--- /dev/null
+++ b/examples/react/src/examples/UseNodesData/ResultNode.tsx
@@ -0,0 +1,25 @@
+import { memo, useEffect } from 'react';
+import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
+
+function ResultNode() {
+  const connections = useHandleConnections({
+    handleType: 'target',
+  });
+  const nodesData = useNodesData<{ text: string }>(connections.map((connection) => connection.source));
+
+  useEffect(() => {
+    console.log('incoming data changed', nodesData);
+  }, [nodesData]);
+
+  return (
+    <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <Handle type="target" position={Position.Left} />
+      <div>
+        incoming texts:{' '}
+        {nodesData?.filter((nodeData) => nodeData.text).map(({ text }, i) => <div key={i}>{text}</div>) || 'none'}
+      </div>
+    </div>
+  );
+}
+
+export default memo(ResultNode);
diff --git a/examples/react/src/examples/UseNodesData/TextNode.tsx b/examples/react/src/examples/UseNodesData/TextNode.tsx
new file mode 100644
index 00000000..a7388cb0
--- /dev/null
+++ b/examples/react/src/examples/UseNodesData/TextNode.tsx
@@ -0,0 +1,20 @@
+import { memo, ChangeEventHandler } from 'react';
+import { Position, NodeProps, useUpdateNodeData, Handle } from '@xyflow/react';
+
+function TextNode({ id, data }: NodeProps) {
+  const updateNodeData = useUpdateNodeData();
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => updateNodeData(id, { text: evt.target.value });
+
+  return (
+    <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <div>node {id}</div>
+      <div>
+        <input onChange={onChange} value={data.text} />
+      </div>
+      <Handle type="source" position={Position.Right} />
+    </div>
+  );
+}
+
+export default memo(TextNode);
diff --git a/examples/react/src/examples/UseNodesData/index.tsx b/examples/react/src/examples/UseNodesData/index.tsx
new file mode 100644
index 00000000..67e68a2f
--- /dev/null
+++ b/examples/react/src/examples/UseNodesData/index.tsx
@@ -0,0 +1,83 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  Controls,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Background,
+  Node,
+  Edge,
+} from '@xyflow/react';
+
+import TextNode from './TextNode';
+import ResultNode from './ResultNode';
+
+const nodeTypes = {
+  text: TextNode,
+  result: ResultNode,
+};
+
+const initNodes: Node[] = [
+  {
+    id: '1',
+    type: 'text',
+    data: {
+      text: 'hello',
+    },
+    position: { x: 0, y: 0 },
+  },
+  {
+    id: '2',
+    type: 'text',
+    data: {
+      text: 'world',
+    },
+    position: { x: 0, y: 100 },
+  },
+
+  {
+    id: '3',
+    type: 'result',
+    data: {},
+    position: { x: 300, y: 50 },
+  },
+];
+
+const initEdges: Edge[] = [
+  {
+    id: 'e1-3',
+    source: '1',
+    target: '3',
+  },
+  {
+    id: 'e2-3',
+    source: '2',
+    target: '3',
+  },
+];
+
+const CustomNodeFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
+
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      fitView
+    >
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+};
+
+export default CustomNodeFlow;
diff --git a/packages/react/src/hooks/useHandleConnectionStatus.ts b/packages/react/src/hooks/useHandleConnections.ts
similarity index 86%
rename from packages/react/src/hooks/useHandleConnectionStatus.ts
rename to packages/react/src/hooks/useHandleConnections.ts
index 470cc077..f692ba37 100644
--- a/packages/react/src/hooks/useHandleConnectionStatus.ts
+++ b/packages/react/src/hooks/useHandleConnections.ts
@@ -4,7 +4,7 @@ import { Connection, HandleType } from '@xyflow/system';
 import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
 
-type useHandleConnectionStatusParams = {
+type useHandleConnectionsParams = {
   handleType: HandleType;
   nodeId?: string;
   handleId?: string | null;
@@ -12,6 +12,50 @@ type useHandleConnectionStatusParams = {
   onDisconnect?: (connections: Connection[]) => void;
 };
 
+/**
+ *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ *
+ * @public
+ * @param param.handleType - 'source' or 'target'
+ * @param param.handleId - 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.onConnect - gets called when a connection is established
+ * @param param.onDisconnect - gets called when a connection is removed
+ * @returns an array with connections
+ */
+export function useHandleConnections({
+  handleType,
+  handleId = null,
+  nodeId,
+  onConnect,
+  onDisconnect,
+}: useHandleConnectionsParams): Connection[] {
+  const _nodeId = useNodeId();
+  const prevConnections = useRef<Map<string, Connection> | null>(null);
+  const currentNodeId = nodeId || _nodeId;
+
+  const connections = useStore(
+    (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`),
+    areConnectionMapsEqual
+  );
+
+  useEffect(() => {
+    // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
+    if (prevConnections.current && prevConnections.current !== connections) {
+      const _connections = connections ?? new Map();
+      handleConnectionChange(prevConnections.current, _connections, onDisconnect);
+      handleConnectionChange(_connections, prevConnections.current, onConnect);
+    }
+
+    prevConnections.current = connections ?? new Map();
+  }, [connections, onConnect, onDisconnect]);
+
+  return useMemo(() => Array.from(connections?.values() ?? []), [connections]);
+}
+
+/**
+ * @internal
+ */
 function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
   if (!a && !b) {
     return true;
@@ -36,6 +80,7 @@ function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Con
 
 /**
  * We call the callback for all connections in a that are not in b
+ *
  * @internal
  */
 function handleConnectionChange(
@@ -59,53 +104,3 @@ function handleConnectionChange(
     cb(diff);
   }
 }
-
-/**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
- *
- * @public
- * @param param.handleType - 'source' or 'target'
- * @param param.handleId - 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.onConnect - gets called when a connection is established
- * @param param.onDisconnect - gets called when a connection is removed
- * @returns a `connected` boolean and a connections array
- */
-export function useHandleConnectionStatus({
-  handleType,
-  handleId = null,
-  nodeId,
-  onConnect,
-  onDisconnect,
-}: useHandleConnectionStatusParams): {
-  connected: boolean;
-  connections: Connection[] | null;
-} {
-  const _nodeId = useNodeId();
-  const prevConnections = useRef<Map<string, Connection> | null>(null);
-  const currentNodeId = nodeId || _nodeId;
-
-  const connections = useStore(
-    (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`),
-    areConnectionMapsEqual
-  );
-
-  useEffect(() => {
-    // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
-    if (prevConnections.current && prevConnections.current !== connections) {
-      const _connections = connections ?? new Map();
-      handleConnectionChange(prevConnections.current, _connections, onDisconnect);
-      handleConnectionChange(_connections, prevConnections.current, onConnect);
-    }
-
-    prevConnections.current = connections ?? new Map();
-  }, [connections, onConnect, onDisconnect]);
-
-  return useMemo(
-    () => ({
-      connected: !!connections,
-      connections: Array.from(connections?.values() ?? []),
-    }),
-    [connections]
-  );
-}
diff --git a/packages/react/src/hooks/useNodesData.ts b/packages/react/src/hooks/useNodesData.ts
new file mode 100644
index 00000000..69927642
--- /dev/null
+++ b/packages/react/src/hooks/useNodesData.ts
@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from '../hooks/useStore';
+
+export function useNodesData<NodeData = unknown>(nodeId: string): NodeData | null;
+export function useNodesData<NodeData = unknown>(nodeIds: string[]): NodeData[];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useNodesData(nodeIds: any): any {
+  const nodesData = useStore(
+    useCallback(
+      (s) => {
+        if (!Array.isArray(nodeIds)) {
+          return s.nodeLookup.get(nodeIds)?.data || null;
+        }
+
+        return nodeIds.reduce((res, id) => {
+          const node = s.nodeLookup.get(id);
+
+          if (node) {
+            res.push(node.data);
+          }
+
+          return res;
+        }, []);
+      },
+      [nodeIds]
+    ),
+    shallow
+  );
+
+  return nodesData;
+}
diff --git a/packages/react/src/hooks/useUpdateNodeData.ts b/packages/react/src/hooks/useUpdateNodeData.ts
new file mode 100644
index 00000000..10cd71e2
--- /dev/null
+++ b/packages/react/src/hooks/useUpdateNodeData.ts
@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+import useReactFlow from './useReactFlow';
+
+export function useUpdateNodeData() {
+  const { setNodes } = useReactFlow();
+
+  const updateNodeData = useCallback((id: string, data: unknown) => {
+    setNodes((prevNodes) => prevNodes.map((node) => (node.id === id ? { ...node, data } : node)));
+  }, []);
+
+  return updateNodeData;
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index d9013b7c..63b70c98 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,5 +1,5 @@
 export { default as ReactFlow } from './container/ReactFlow';
-export { default as Handle } from './components/Handle';
+export { default as Handle, type HandleComponentProps } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
 export { StraightEdge } from './components/Edges/StraightEdge';
 export { StepEdge } from './components/Edges/StepEdge';
@@ -22,7 +22,9 @@ export { useStore, useStoreApi } from './hooks/useStore';
 export { default as useOnViewportChange, type UseOnViewportChangeOptions } from './hooks/useOnViewportChange';
 export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
-export { useHandleConnectionStatus } from './hooks/useHandleConnectionStatus';
+export { useHandleConnections } from './hooks/useHandleConnections';
+export { useUpdateNodeData } from './hooks/useUpdateNodeData';
+export { useNodesData } from './hooks/useNodesData';
 export { useNodeId } from './contexts/NodeIdContext';
 
 export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/changes';
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index 22ad889e..e601ee08 100644
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -22,8 +22,8 @@ export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => vo
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
 
 export type Connection = {
-  source: string | null;
-  target: string | null;
+  source: string;
+  target: string;
   sourceHandle: string | null;
   targetHandle: string | null;
 };

From 5d8c1bbff991e0d3acc6fd23d95008947c10fe1c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 7 Dec 2023 14:09:56 +0100
Subject: [PATCH 40/65] chore(useNodesData): example

---
 .../examples/UseNodesData/UppercaseNode.tsx   | 24 +++++++++++++++++++
 .../react/src/examples/UseNodesData/index.tsx | 18 ++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 examples/react/src/examples/UseNodesData/UppercaseNode.tsx

diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
new file mode 100644
index 00000000..7f0b964f
--- /dev/null
+++ b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
@@ -0,0 +1,24 @@
+import { memo, useEffect } from 'react';
+import { Position, NodeProps, useUpdateNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+
+function UppercaseNode({ id }: NodeProps) {
+  const connections = useHandleConnections({
+    handleType: 'target',
+  });
+  const nodeData = useNodesData<{ text: string }>(connections[0]?.source);
+  const updateNodeData = useUpdateNodeData();
+
+  useEffect(() => {
+    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
+  }, [nodeData]);
+
+  return (
+    <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <Handle type="source" position={Position.Right} />
+      <div>uppercase transform</div>
+      <Handle type="target" position={Position.Left} isConnectable={connections.length === 0} />
+    </div>
+  );
+}
+
+export default memo(UppercaseNode);
diff --git a/examples/react/src/examples/UseNodesData/index.tsx b/examples/react/src/examples/UseNodesData/index.tsx
index 67e68a2f..040ca35a 100644
--- a/examples/react/src/examples/UseNodesData/index.tsx
+++ b/examples/react/src/examples/UseNodesData/index.tsx
@@ -13,10 +13,12 @@ import {
 
 import TextNode from './TextNode';
 import ResultNode from './ResultNode';
+import UppercaseNode from './UppercaseNode';
 
 const nodeTypes = {
   text: TextNode,
   result: ResultNode,
+  uppercase: UppercaseNode,
 };
 
 const initNodes: Node[] = [
@@ -26,8 +28,15 @@ const initNodes: Node[] = [
     data: {
       text: 'hello',
     },
-    position: { x: 0, y: 0 },
+    position: { x: -100, y: -50 },
   },
+  {
+    id: '1a',
+    type: 'uppercase',
+    data: {},
+    position: { x: 100, y: 0 },
+  },
+
   {
     id: '2',
     type: 'text',
@@ -47,8 +56,13 @@ const initNodes: Node[] = [
 
 const initEdges: Edge[] = [
   {
-    id: 'e1-3',
+    id: 'e1-1a',
     source: '1',
+    target: '1a',
+  },
+  {
+    id: 'e1a-3',
+    source: '1a',
     target: '3',
   },
   {

From d4d773d9c62f49706bccd1d5435e75dd912d3643 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 11 Dec 2023 18:31:37 +0100
Subject: [PATCH 41/65] feat(svelte): add useHandleConnections, useNodesData
 and useUpdateNodeData

---
 .../src/examples/UseNodesData/ResultNode.tsx  |   5 +-
 .../examples/UseNodesData/UppercaseNode.tsx   |   6 +-
 .../react/src/examples/UseNodesData/index.tsx |   7 +-
 .../src/components/Header/Header.svelte       |   2 +
 .../examples/customnode/CustomNode.svelte     |   2 +-
 .../examples/handle-connect/+page.svelte      |  94 +++++++++++++++
 .../handle-connect/MultiHandleNode.svelte     | 110 ++++++++++++++++++
 .../handle-connect/SingleHandleNode.svelte    |  77 ++++++++++++
 .../routes/examples/usenodesdata/+page.svelte |  80 +++++++++++++
 .../examples/usenodesdata/ResultNode.svelte   |  38 ++++++
 .../examples/usenodesdata/TextNode.svelte     |  29 +++++
 .../usenodesdata/UppercaseNode.svelte         |  40 +++++++
 .../react/src/components/Handle/index.tsx     |   2 +-
 .../react/src/hooks/useHandleConnections.ts   |  54 +--------
 packages/react/src/hooks/useNodesData.ts      |  23 ++--
 packages/react/src/store/index.ts             |   3 +-
 packages/react/src/store/initialState.ts      |   7 +-
 packages/react/src/store/utils.ts             |  21 ----
 .../src/lib/components/Handle/Handle.svelte   |  30 ++++-
 .../components/KeyHandler/KeyHandler.svelte   |   2 +-
 .../src/lib/hooks/useHandleConnections.ts     |  30 +++++
 packages/svelte/src/lib/hooks/useNodesData.ts |  64 ++++++++++
 .../svelte/src/lib/hooks/useUpdateNodeData.ts |  22 ++++
 packages/svelte/src/lib/index.ts              |   3 +
 .../svelte/src/lib/store/initial-store.ts     |  10 +-
 packages/svelte/src/lib/store/utils.ts        |  12 +-
 packages/svelte/src/lib/types/general.ts      |   2 +
 packages/system/src/types/general.ts          |   2 +
 packages/system/src/utils/connections.ts      |  53 +++++++++
 packages/system/src/utils/index.ts            |   1 +
 packages/system/src/utils/store.ts            |  26 ++++-
 packages/system/src/xyhandle/XYHandle.ts      |  12 +-
 32 files changed, 761 insertions(+), 108 deletions(-)
 create mode 100644 examples/svelte/src/routes/examples/handle-connect/+page.svelte
 create mode 100644 examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte
 create mode 100644 examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
 create mode 100644 examples/svelte/src/routes/examples/usenodesdata/+page.svelte
 create mode 100644 examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
 create mode 100644 examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
 create mode 100644 examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
 create mode 100644 packages/svelte/src/lib/hooks/useHandleConnections.ts
 create mode 100644 packages/svelte/src/lib/hooks/useNodesData.ts
 create mode 100644 packages/svelte/src/lib/hooks/useUpdateNodeData.ts
 create mode 100644 packages/system/src/utils/connections.ts

diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx
index 09603eac..324da1fe 100644
--- a/examples/react/src/examples/UseNodesData/ResultNode.tsx
+++ b/examples/react/src/examples/UseNodesData/ResultNode.tsx
@@ -5,7 +5,7 @@ function ResultNode() {
   const connections = useHandleConnections({
     handleType: 'target',
   });
-  const nodesData = useNodesData<{ text: string }>(connections.map((connection) => connection.source));
+  const nodesData = useNodesData(connections.map((connection) => connection.source));
 
   useEffect(() => {
     console.log('incoming data changed', nodesData);
@@ -16,7 +16,8 @@ function ResultNode() {
       <Handle type="target" position={Position.Left} />
       <div>
         incoming texts:{' '}
-        {nodesData?.filter((nodeData) => nodeData.text).map(({ text }, i) => <div key={i}>{text}</div>) || 'none'}
+        {nodesData?.filter((nodeData) => nodeData.text !== undefined).map(({ text }, i) => <div key={i}>{text}</div>) ||
+          'none'}
       </div>
     </div>
   );
diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
index 7f0b964f..06cf84a8 100644
--- a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
+++ b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
@@ -5,7 +5,7 @@ function UppercaseNode({ id }: NodeProps) {
   const connections = useHandleConnections({
     handleType: 'target',
   });
-  const nodeData = useNodesData<{ text: string }>(connections[0]?.source);
+  const nodeData = useNodesData(connections[0]?.source);
   const updateNodeData = useUpdateNodeData();
 
   useEffect(() => {
@@ -14,9 +14,9 @@ function UppercaseNode({ id }: NodeProps) {
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
-      <Handle type="source" position={Position.Right} />
-      <div>uppercase transform</div>
       <Handle type="target" position={Position.Left} isConnectable={connections.length === 0} />
+      <div>uppercase transform</div>
+      <Handle type="source" position={Position.Right} />
     </div>
   );
 }
diff --git a/examples/react/src/examples/UseNodesData/index.tsx b/examples/react/src/examples/UseNodesData/index.tsx
index 040ca35a..7bb1a94e 100644
--- a/examples/react/src/examples/UseNodesData/index.tsx
+++ b/examples/react/src/examples/UseNodesData/index.tsx
@@ -15,13 +15,18 @@ import TextNode from './TextNode';
 import ResultNode from './ResultNode';
 import UppercaseNode from './UppercaseNode';
 
+export type TextNode = Node<{ text: string }, 'text'>;
+export type ResultNode = Node<{}, 'result'>;
+export type UppercaseNode = Node<{}, 'uppercase'>;
+export type MyNode = Node<{ text: string }, 'text'> | Node<{}, 'result'> | Node<{}, 'uppercase'>;
+
 const nodeTypes = {
   text: TextNode,
   result: ResultNode,
   uppercase: UppercaseNode,
 };
 
-const initNodes: Node[] = [
+const initNodes: MyNode[] = [
   {
     id: '1',
     type: 'text',
diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index ad34d289..9d67f049 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -11,6 +11,7 @@
 		'drag-n-drop',
 		'edges',
 		'figma',
+		'handle-connect',
 		'interaction',
 		'intersections',
 		'node-toolbar',
@@ -18,6 +19,7 @@
 		'stress',
 		'subflows',
 		'two-way-viewport',
+		'usenodesdata',
 		'usesvelteflow',
 		'useupdatenodeinternals',
 		'validation'
diff --git a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
index 51ba33ea..25d37d32 100644
--- a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Writable } from 'svelte/store';
-	import { Handle, Position, type NodeProps, BezierEdge, SmoothStepEdge } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
diff --git a/examples/svelte/src/routes/examples/handle-connect/+page.svelte b/examples/svelte/src/routes/examples/handle-connect/+page.svelte
new file mode 100644
index 00000000..4f121c83
--- /dev/null
+++ b/examples/svelte/src/routes/examples/handle-connect/+page.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		BackgroundVariant,
+		MiniMap,
+		type Node,
+		type NodeTypes,
+		type Edge
+	} from '@xyflow/svelte';
+	import SingleHandleNode from './SingleHandleNode.svelte';
+	import MultiHandleNode from './MultiHandleNode.svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodeTypes: NodeTypes = {
+		single: SingleHandleNode,
+		multi: MultiHandleNode
+	};
+
+	const nodes = writable<Node[]>([
+		{
+			id: '1',
+			type: 'single',
+			data: {},
+			position: { x: 0, y: 0 }
+		},
+		{
+			id: '2',
+			type: 'single',
+			data: {},
+			position: { x: 200, y: -100 }
+		},
+		{
+			id: '3',
+			type: 'single',
+			data: {},
+			position: { x: 200, y: 100 }
+		},
+
+		{
+			id: '4',
+			type: 'multi',
+			data: {},
+			position: { x: 400, y: 0 }
+		},
+		{
+			id: '5',
+			type: 'multi',
+			data: {},
+			position: { x: 600, y: -100 }
+		},
+		{
+			id: '6',
+			type: 'multi',
+			data: {},
+			position: { x: 600, y: 100 }
+		}
+	]);
+
+	const edges = writable<Edge[]>([
+		{
+			id: 'e1-2',
+			source: '1',
+			target: '2'
+		},
+		{
+			id: 'e1-3',
+			source: '1',
+			target: '3'
+		},
+
+		{
+			id: 'e4a-5',
+			source: '4',
+			sourceHandle: 'a',
+			target: '5'
+		},
+		{
+			id: 'e4b-5',
+			source: '4',
+			sourceHandle: 'b',
+			target: '6'
+		}
+	]);
+</script>
+
+<SvelteFlow {nodes} {edges} {nodeTypes} fitView colorMode="dark">
+	<Controls />
+	<Background variant={BackgroundVariant.Dots} />
+	<MiniMap />
+</SvelteFlow>
diff --git a/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte b/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte
new file mode 100644
index 00000000..ebc85c74
--- /dev/null
+++ b/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import {
+		Handle,
+		Position,
+		type NodeProps,
+		type Connection,
+		useHandleConnections
+	} from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let id: $$Props['id'];
+
+	function onConnectTarget(connection: Connection[]) {
+		console.log('connect target', connection);
+	}
+
+	function onConnectSource(handleId: string, connection: Connection[]) {
+		console.log('connect source', handleId, connection);
+	}
+
+	function onDisconnectTarget(connection: Connection[]) {
+		console.log('disconnect target', connection);
+	}
+
+	function onDisconnectSource(handleId: string, connection: Connection[]) {
+		console.log('disconnect source', handleId, connection);
+	}
+
+	const connections = useHandleConnections({ nodeId: id, type: 'target' });
+
+	$: {
+		console.log('connections', id, $connections);
+	}
+
+	export let data: $$Props['data'];
+	export let targetPosition: $$Props['targetPosition'] = Position.Top;
+	export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+	export let width: $$Props['width'] = undefined;
+	export let height: $$Props['height'] = undefined;
+	export let selected: $$Props['selected'] = undefined;
+	export let type: $$Props['type'] = undefined;
+	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 isConnectable: $$Props['isConnectable'] = undefined;
+
+	data;
+	targetPosition;
+	sourcePosition;
+	width;
+	height;
+	selected;
+	type;
+	zIndex;
+	dragging;
+	dragHandle;
+	positionAbsolute;
+	isConnectable;
+</script>
+
+<div class="custom">
+	<Handle
+		type="target"
+		position={Position.Left}
+		onconnect={onConnectTarget}
+		ondisconnect={onDisconnectTarget}
+	/>
+	<div>node {id}</div>
+	<Handle
+		id="a"
+		type="source"
+		position={Position.Right}
+		onconnect={(connections) => onConnectSource('a', connections)}
+		ondisconnect={(connections) => onDisconnectSource('a', connections)}
+		class="source-a"
+	/>
+	<Handle
+		id="b"
+		type="source"
+		position={Position.Right}
+		onconnect={(connections) => onConnectSource('b', connections)}
+		ondisconnect={(connections) => onDisconnectSource('b', connections)}
+		class="source-b"
+	/>
+</div>
+
+<style>
+	.custom {
+		background-color: #333;
+		padding: 10px;
+		border-radius: 10px;
+		color: #fff;
+	}
+
+	.custom :global(.source-a) {
+		top: 5px;
+		transform: translate(50%, 0);
+	}
+
+	.custom :global(.source-b) {
+		bottom: 5px;
+		top: auto;
+		transform: translate(50%, 0);
+	}
+</style>
diff --git a/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte b/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
new file mode 100644
index 00000000..7c1e026d
--- /dev/null
+++ b/examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Handle, Position, type NodeProps, type Connection } from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let id: $$Props['id'];
+
+	function onConnectTarget(connection: Connection[]) {
+		console.log('connect target', connection);
+	}
+
+	function onConnectSource(connection: Connection[]) {
+		console.log('connect source', connection);
+	}
+
+	function onDisconnectTarget(connection: Connection[]) {
+		console.log('disconnect target', connection);
+	}
+
+	function onDisconnectSource(connection: Connection[]) {
+		console.log('disconnect source', connection);
+	}
+
+	export let data: $$Props['data'];
+	export let targetPosition: $$Props['targetPosition'] = Position.Top;
+	export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+	export let width: $$Props['width'] = undefined;
+	export let height: $$Props['height'] = undefined;
+	export let selected: $$Props['selected'] = undefined;
+	export let type: $$Props['type'] = undefined;
+	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 isConnectable: $$Props['isConnectable'] = undefined;
+
+	data;
+	targetPosition;
+	sourcePosition;
+	width;
+	height;
+	selected;
+	type;
+	zIndex;
+	dragging;
+	dragHandle;
+	positionAbsolute;
+	isConnectable;
+</script>
+
+<div class="custom">
+	<Handle
+		type="target"
+		position={Position.Left}
+		onconnect={onConnectTarget}
+		ondisconnect={onDisconnectTarget}
+	/>
+	<div>node {id}</div>
+	<Handle
+		type="source"
+		position={Position.Right}
+		onconnect={onConnectSource}
+		ondisconnect={onDisconnectSource}
+	/>
+</div>
+
+<style>
+	.custom {
+		background-color: #333;
+		padding: 10px;
+		border-radius: 10px;
+		color: #fff;
+	}
+</style>
diff --git a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
new file mode 100644
index 00000000..7b2d2204
--- /dev/null
+++ b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		BackgroundVariant,
+		MiniMap,
+		type Node,
+		type NodeTypes,
+		type Edge
+	} from '@xyflow/svelte';
+	import '@xyflow/svelte/dist/style.css';
+
+	import TextNode from './TextNode.svelte';
+	import UppercaseNode from './UppercaseNode.svelte';
+	import ResultNode from './ResultNode.svelte';
+
+	const nodeTypes: NodeTypes = {
+		text: TextNode,
+		uppercase: UppercaseNode,
+		result: ResultNode
+	};
+
+	const nodes = writable<Node[]>([
+		{
+			id: '1',
+			type: 'text',
+			data: {
+				text: 'hello'
+			},
+			position: { x: -100, y: -50 }
+		},
+		{
+			id: '1a',
+			type: 'uppercase',
+			data: {},
+			position: { x: 100, y: 0 }
+		},
+		{
+			id: '2',
+			type: 'text',
+			data: {
+				text: 'world'
+			},
+			position: { x: 0, y: 100 }
+		},
+
+		{
+			id: '3',
+			type: 'result',
+			data: {},
+			position: { x: 300, y: 50 }
+		}
+	]);
+
+	const edges = writable<Edge[]>([
+		{
+			id: 'e1-1a',
+			source: '1',
+			target: '1a'
+		},
+		{
+			id: 'e1a-3',
+			source: '1a',
+			target: '3'
+		},
+		{
+			id: 'e2-3',
+			source: '2',
+			target: '3'
+		}
+	]);
+</script>
+
+<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
+	<Controls />
+	<Background variant={BackgroundVariant.Dots} />
+	<MiniMap />
+</SvelteFlow>
diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
new file mode 100644
index 00000000..c4150f42
--- /dev/null
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import {
+		Handle,
+		Position,
+		useHandleConnections,
+		useNodesData,
+		useUpdateNodeData,
+		type NodeProps
+	} from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let id: $$Props['id'];
+
+	const connections = useHandleConnections({
+		nodeId: id,
+		type: 'target'
+	});
+
+	const nodeData = useNodesData($connections.map((connection) => connection.source));
+</script>
+
+<div class="custom">
+	<Handle type="target" position={Position.Left} />
+	<div>incoming texts:</div>
+
+	{#each $nodeData as data}
+		<div>{data.text}</div>
+	{/each}
+</div>
+
+<style>
+	.custom {
+		background-color: #eee;
+		padding: 10px;
+		border-radius: 10px;
+	}
+</style>
diff --git a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
new file mode 100644
index 00000000..142a14bb
--- /dev/null
+++ b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Handle, Position, type NodeProps, useUpdateNodeData } from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let id: $$Props['id'];
+	export let data: $$Props['data'];
+
+	const updateNodeData = useUpdateNodeData();
+</script>
+
+<div class="custom">
+	<div>node {id}</div>
+	<div>
+		<input
+			value={data.text}
+			on:input={(evt) => updateNodeData(id, { text: evt.currentTarget.value })}
+		/>
+	</div>
+	<Handle type="source" position={Position.Right} />
+</div>
+
+<style>
+	.custom {
+		background-color: #eee;
+		padding: 10px;
+		border-radius: 10px;
+	}
+</style>
diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
new file mode 100644
index 00000000..3e311f1f
--- /dev/null
+++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import {
+		Handle,
+		Position,
+		type NodeProps,
+		useHandleConnections,
+		useNodesData,
+		useUpdateNodeData
+	} from '@xyflow/svelte';
+
+	type $$Props = NodeProps;
+
+	export let id: $$Props['id'];
+
+	const updateNodeData = useUpdateNodeData();
+	const connections = useHandleConnections({
+		nodeId: id,
+		type: 'target'
+	});
+
+	$: nodeData = useNodesData($connections[0]?.source);
+
+	$: {
+		updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
+	}
+</script>
+
+<div class="custom">
+	<Handle type="target" position={Position.Left} isConnectable={$connections.length === 0} />
+	<div>uppercase transform</div>
+	<Handle type="source" position={Position.Right} />
+</div>
+
+<style>
+	.custom {
+		background-color: #eee;
+		padding: 10px;
+		border-radius: 10px;
+	}
+</style>
diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index 29231b71..a2c0101f 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -171,7 +171,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         lib,
       });
 
-      if (isValid) {
+      if (isValid && connection) {
         onConnectExtended(connection);
       }
 
diff --git a/packages/react/src/hooks/useHandleConnections.ts b/packages/react/src/hooks/useHandleConnections.ts
index f692ba37..58987aec 100644
--- a/packages/react/src/hooks/useHandleConnections.ts
+++ b/packages/react/src/hooks/useHandleConnections.ts
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Connection, HandleType } from '@xyflow/system';
+import { Connection, HandleType, areConnectionMapsEqual, handleConnectionChange } from '@xyflow/system';
 
 import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
@@ -52,55 +52,3 @@ export function useHandleConnections({
 
   return useMemo(() => Array.from(connections?.values() ?? []), [connections]);
 }
-
-/**
- * @internal
- */
-function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
-  if (!a && !b) {
-    return true;
-  }
-
-  if (!a || !b || a.size !== b.size) {
-    return false;
-  }
-
-  if (!a.size && !b.size) {
-    return true;
-  }
-
-  for (const key of a.keys()) {
-    if (!b.has(key)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-/**
- * We call the callback for all connections in a that are not in b
- *
- * @internal
- */
-function handleConnectionChange(
-  a: Map<string, Connection>,
-  b: Map<string, Connection>,
-  cb?: (diff: Connection[]) => void
-) {
-  if (!cb) {
-    return;
-  }
-
-  const diff: Connection[] = [];
-
-  a.forEach((connection, key) => {
-    if (!b?.has(key)) {
-      diff.push(connection);
-    }
-  });
-
-  if (diff.length) {
-    cb(diff);
-  }
-}
diff --git a/packages/react/src/hooks/useNodesData.ts b/packages/react/src/hooks/useNodesData.ts
index 69927642..4c242ad3 100644
--- a/packages/react/src/hooks/useNodesData.ts
+++ b/packages/react/src/hooks/useNodesData.ts
@@ -2,9 +2,14 @@ import { useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../hooks/useStore';
+import type { Node } from '../types';
 
-export function useNodesData<NodeData = unknown>(nodeId: string): NodeData | null;
-export function useNodesData<NodeData = unknown>(nodeIds: string[]): NodeData[];
+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>(
+  nodeIds: string[],
+  guard: (node: Node) => node is NodeType
+): NodeType['data'][];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const nodesData = useStore(
@@ -14,15 +19,17 @@ export function useNodesData(nodeIds: any): any {
           return s.nodeLookup.get(nodeIds)?.data || null;
         }
 
-        return nodeIds.reduce((res, id) => {
-          const node = s.nodeLookup.get(id);
+        const data = [];
 
-          if (node) {
-            res.push(node.data);
+        for (const nodeId of nodeIds) {
+          const nodeData = s.nodeLookup.get(nodeId)?.data;
+
+          if (nodeData) {
+            data.push(nodeData);
           }
+        }
 
-          return res;
-        }, []);
+        return data;
       },
       [nodeIds]
     ),
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 0b308752..c5c21d7a 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -7,10 +7,11 @@ import {
   panBy as panBySystem,
   Dimensions,
   updateNodeDimensions as updateNodeDimensionsSystem,
+  updateConnectionLookup,
 } from '@xyflow/system';
 
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
-import { updateConnectionLookup, updateNodesAndEdgesSelections } from './utils';
+import { updateNodesAndEdgesSelections } from './utils';
 import getInitialState from './initialState';
 import type {
   ReactFlowState,
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index f167a9aa..8d07617a 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -5,11 +5,10 @@ import {
   getNodesBounds,
   getViewportForBounds,
   Transform,
-  Connection,
+  updateConnectionLookup,
 } from '@xyflow/system';
 
 import type { Edge, Node, ReactFlowStore } from '../types';
-import { updateConnectionLookup } from './utils';
 
 const getInitialState = ({
   nodes = [],
@@ -24,8 +23,8 @@ const getInitialState = ({
   height?: number;
   fitView?: boolean;
 } = {}): ReactFlowStore => {
-  const nodeLookup = new Map<string, Node>();
-  const connectionLookup = updateConnectionLookup(new Map<string, Map<string, Connection>>(), edges);
+  const nodeLookup = new Map();
+  const connectionLookup = updateConnectionLookup(new Map(), edges);
   const nextNodes = updateNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];
diff --git a/packages/react/src/store/utils.ts b/packages/react/src/store/utils.ts
index 7ad5ad43..86cddde7 100644
--- a/packages/react/src/store/utils.ts
+++ b/packages/react/src/store/utils.ts
@@ -1,6 +1,5 @@
 import type { StoreApi } from 'zustand';
 import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types';
-import { Connection } from '@xyflow/system';
 
 export function handleControlledSelectionChange<NodeOrEdge extends Node | Edge>(
   changes: NodeSelectionChange[] | EdgeSelectionChange[],
@@ -43,23 +42,3 @@ export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get,
     onEdgesChange?.(changedEdges);
   }
 }
-
-export function updateConnectionLookup(lookup: Map<string, Map<string, Connection>>, edges: Edge[]) {
-  lookup.clear();
-
-  edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
-    if (source && target) {
-      const sourceKey = `${source}-source-${sourceHandle}`;
-      const targetKey = `${target}-target-${targetHandle}`;
-
-      const prevSource = lookup.get(sourceKey) || new Map();
-      const prevTarget = lookup.get(targetKey) || new Map();
-      const connection = { source, target, sourceHandle, targetHandle };
-
-      lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
-      lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
-    }
-  });
-
-  return lookup;
-}
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index e4b6a823..06a6198e 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -6,7 +6,9 @@
     XYHandle,
     isMouseEvent,
     type Connection,
-    type HandleType
+    type HandleType,
+    areConnectionMapsEqual,
+    handleConnectionChange
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -20,6 +22,8 @@
   export let position: $$Props['position'] = Position.Top;
   export let style: $$Props['style'] = undefined;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let onconnect: $$Props['onconnect'] = undefined;
+  export let ondisconnect: $$Props['ondisconnect'] = undefined;
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
@@ -59,7 +63,9 @@
     panBy,
     cancelConnection,
     updateConnection,
-    autoPanOnConnect
+    autoPanOnConnect,
+    edges,
+    connectionLookup
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -108,6 +114,26 @@
     }
   }
 
+  let prevConnections: Map<string, Connection> | null = null;
+  let connections: Map<string, Connection> | undefined;
+
+  $: if (onconnect || ondisconnect) {
+    // connectionLookup is not reactive, so we use edges to get notified about updates
+    $edges;
+    connections = $connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+  }
+
+  $: {
+    if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
+      const _connections = connections ?? new Map();
+
+      handleConnectionChange(prevConnections, _connections, ondisconnect);
+      handleConnectionChange(_connections, prevConnections, onconnect);
+    }
+
+    prevConnections = connections ?? new Map();
+  }
+
   // @todo implement connectablestart, connectableend
 </script>
 
diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
index f059ff8e..f52d696a 100644
--- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
@@ -107,7 +107,7 @@
     trigger: [
       {
         ...deleteKeyDefinition,
-        callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(true)
+        callback: (event) => deleteKeyDefinition.key && deleteKeyPressed.set(true)
       }
     ],
     type: 'keydown'
diff --git a/packages/svelte/src/lib/hooks/useHandleConnections.ts b/packages/svelte/src/lib/hooks/useHandleConnections.ts
new file mode 100644
index 00000000..c8df0dae
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useHandleConnections.ts
@@ -0,0 +1,30 @@
+import { derived } from 'svelte/store';
+import { areConnectionMapsEqual, type Connection, type HandleType } from '@xyflow/system';
+
+import { useStore } from '$lib/store';
+
+export type useHandleConnectionsParams = {
+  nodeId: string;
+  type: HandleType;
+  id?: string | null;
+};
+
+const initialConnections: Connection[] = [];
+
+export function useHandleConnections({ nodeId, type, id = null }: useHandleConnectionsParams) {
+  const { edges, connectionLookup } = useStore();
+  let prevConnections: Map<string, Connection> | undefined = undefined;
+
+  return derived(
+    [edges, connectionLookup],
+    ([, connectionLookup], set) => {
+      const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+
+      if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
+        prevConnections = nextConnections;
+        set(Array.from(prevConnections?.values() || []));
+      }
+    },
+    initialConnections
+  );
+}
diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts
new file mode 100644
index 00000000..f50bc8b8
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useNodesData.ts
@@ -0,0 +1,64 @@
+import { derived, type Readable } from 'svelte/store';
+
+import type { Node } from '$lib/types';
+import { useStore } from '$lib/store';
+
+function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
+  if ((!a && !b) || (!a?.length && !b?.length)) {
+    true;
+  }
+
+  if (!a || !b || a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function useNodesData<NodeType extends Node = Node>(
+  nodeId: string
+): Readable<NodeType['data'] | null>;
+export function useNodesData<NodeType extends Node = Node>(
+  nodeIds: string[]
+): Readable<NodeType['data'][]>;
+export function useNodesData<NodeType extends Node = Node>(
+  nodeIds: string[],
+  guard: (node: Node) => node is NodeType
+): Readable<NodeType['data'][]>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useNodesData(nodeIds: any): any {
+  const { nodes, nodeLookup } = useStore();
+  let prevNodesData: (Node['data'] | null)[] | null = null;
+
+  return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
+    let nextNodesData: (Node['data'] | null)[] | null = null;
+    const nodeIdArray = Array.isArray(nodeIds);
+
+    if (!nodeIdArray) {
+      nextNodesData = [nodeLookup.get(nodeIds)?.data || null];
+    } else {
+      const data = [];
+
+      for (const nodeId of nodeIds) {
+        const nodeData = nodeLookup.get(nodeId)?.data;
+
+        if (nodeData) {
+          data.push(nodeData);
+        }
+      }
+
+      nextNodesData = data;
+    }
+
+    if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
+      prevNodesData = nextNodesData;
+      set(nodeIdArray ? nextNodesData : nextNodesData[0]);
+    }
+  });
+}
diff --git a/packages/svelte/src/lib/hooks/useUpdateNodeData.ts b/packages/svelte/src/lib/hooks/useUpdateNodeData.ts
new file mode 100644
index 00000000..cb45dd10
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useUpdateNodeData.ts
@@ -0,0 +1,22 @@
+import { useStore } from '$lib/store';
+
+export function useUpdateNodeData(): (id: string, data: unknown) => void {
+  const { nodes } = useStore();
+
+  const updateNodeData = (id: string, data: unknown) => {
+    nodes.update((nds) =>
+      nds.map((node) => {
+        if (node.id === id) {
+          return {
+            ...node,
+            data
+          };
+        }
+
+        return node;
+      })
+    );
+  };
+
+  return updateNodeData;
+}
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index a9107415..71841ec7 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -27,6 +27,9 @@ export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
 export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
+export * from '$lib/hooks/useHandleConnections';
+export * from '$lib/hooks/useNodesData';
+export * from '$lib/hooks/useUpdateNodeData';
 
 // types
 export type {
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index 9f51abc3..ceec1c7b 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -17,7 +17,9 @@ import {
   type Viewport,
   updateNodes,
   getNodesBounds,
-  getViewportForBounds
+  getViewportForBounds,
+  updateConnectionLookup,
+  type ConnectionLookup
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -72,11 +74,12 @@ export const getInitialStore = ({
   height?: number;
   fitView?: boolean;
 }) => {
-  const nodeLookup = new Map<string, Node>();
+  const nodeLookup = new Map();
   const nextNodes = updateNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false
   });
+  const connectionLookup = updateConnectionLookup(new Map(), edges);
 
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
@@ -91,8 +94,9 @@ export const getInitialStore = ({
     nodes: createNodesStore(nextNodes, nodeLookup),
     nodeLookup: readable<Map<string, Node>>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
-    edges: createEdgesStore(edges),
+    edges: createEdgesStore(edges, connectionLookup),
     edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
+    connectionLookup: readable<ConnectionLookup>(connectionLookup),
     height: writable<number>(500),
     width: writable<number>(500),
     minZoom: writable<number>(0.5),
diff --git a/packages/svelte/src/lib/store/utils.ts b/packages/svelte/src/lib/store/utils.ts
index a11bf1f6..b9292ca7 100644
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -6,7 +6,13 @@ import {
   type Writable,
   get
 } from 'svelte/store';
-import { updateNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
+import {
+  updateNodes,
+  type Viewport,
+  type PanZoomInstance,
+  type ConnectionLookup,
+  updateConnectionLookup
+} from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 
@@ -168,6 +174,7 @@ export const createNodesStore = (
 
 export const createEdgesStore = (
   edges: Edge[],
+  connectionLookup: ConnectionLookup,
   defaultOptions?: DefaultEdgeOptions
 ): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
   const { subscribe, set, update } = writable<Edge[]>([]);
@@ -176,6 +183,9 @@ export const createEdgesStore = (
 
   const _set: typeof set = (eds: Edge[]) => {
     const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
+
+    updateConnectionLookup(connectionLookup, nextEdges);
+
     value = nextEdges;
     set(value);
   };
diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts
index 62666705..5d33a97c 100644
--- a/packages/svelte/src/lib/types/general.ts
+++ b/packages/svelte/src/lib/types/general.ts
@@ -31,6 +31,8 @@ export type HandleComponentProps = {
   isConnectable?: boolean;
   isConnectableStart?: boolean;
   isConnectableEnd?: boolean;
+  onconnect?: (connections: Connection[]) => void;
+  ondisconnect?: (connections: Connection[]) => void;
 };
 
 export type FitViewOptions = FitViewOptionsBase<Node>;
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index e601ee08..1591cca4 100644
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -139,3 +139,5 @@ export type UpdateConnection = (params: {
 
 export type ColorModeClass = 'light' | 'dark';
 export type ColorMode = ColorModeClass | 'system';
+
+export type ConnectionLookup = Map<string, Map<string, Connection>>;
diff --git a/packages/system/src/utils/connections.ts b/packages/system/src/utils/connections.ts
new file mode 100644
index 00000000..ded405c3
--- /dev/null
+++ b/packages/system/src/utils/connections.ts
@@ -0,0 +1,53 @@
+import { Connection } from '../types';
+
+/**
+ * @internal
+ */
+export function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
+  if (!a && !b) {
+    return true;
+  }
+
+  if (!a || !b || a.size !== b.size) {
+    return false;
+  }
+
+  if (!a.size && !b.size) {
+    return true;
+  }
+
+  for (const key of a.keys()) {
+    if (!b.has(key)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * We call the callback for all connections in a that are not in b
+ *
+ * @internal
+ */
+export function handleConnectionChange(
+  a: Map<string, Connection>,
+  b: Map<string, Connection>,
+  cb?: (diff: Connection[]) => void
+) {
+  if (!cb) {
+    return;
+  }
+
+  const diff: Connection[] = [];
+
+  a.forEach((connection, key) => {
+    if (!b?.has(key)) {
+      diff.push(connection);
+    }
+  });
+
+  if (diff.length) {
+    cb(diff);
+  }
+}
diff --git a/packages/system/src/utils/index.ts b/packages/system/src/utils/index.ts
index 4937033c..cd66e951 100644
--- a/packages/system/src/utils/index.ts
+++ b/packages/system/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './connections';
 export * from './dom';
 export * from './edges';
 export * from './graph';
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index eca6b8de..86434a72 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -9,6 +9,8 @@ import {
   Transform,
   XYPosition,
   XYZPosition,
+  ConnectionLookup,
+  EdgeBase,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
 import { isNumeric } from './general';
@@ -71,11 +73,13 @@ export function updateNodes<NodeType extends NodeBase>(
     defaults: {},
   }
 ): NodeType[] {
+  const tmpLookup = new Map(nodeLookup);
+  nodeLookup.clear();
   const parentNodes: ParentNodes = {};
   const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
 
   const nextNodes = nodes.map((n) => {
-    const currentStoreNode = nodeLookup.get(n.id);
+    const currentStoreNode = tmpLookup.get(n.id);
     const node: NodeType = {
       ...options.defaults,
       ...n,
@@ -233,3 +237,23 @@ export function panBy({
 
   return transformChanged;
 }
+
+export function updateConnectionLookup(lookup: ConnectionLookup, edges: EdgeBase[]) {
+  lookup.clear();
+
+  edges.forEach(({ source, target, sourceHandle = null, targetHandle = null }) => {
+    if (source && target) {
+      const sourceKey = `${source}-source-${sourceHandle}`;
+      const targetKey = `${target}-target-${targetHandle}`;
+
+      const prevSource = lookup.get(sourceKey) || new Map();
+      const prevTarget = lookup.get(targetKey) || new Map();
+      const connection = { source, target, sourceHandle, targetHandle };
+
+      lookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
+      lookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
+    }
+  });
+
+  return lookup;
+}
diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts
index 6ec86528..826a1c80 100644
--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/packages/system/src/xyhandle/XYHandle.ts
@@ -58,12 +58,10 @@ export type XYHandleInstance = {
 type Result = {
   handleDomNode: Element | null;
   isValid: boolean;
-  connection: Connection;
+  connection: Connection | null;
   endHandle: ConnectingHandle | null;
 };
 
-const nullConnection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
-
 const alwaysValid = () => true;
 
 let connectionStartHandle: ConnectingHandle | null = null;
@@ -197,7 +195,7 @@ function onPointerDown(
       return resetRecentHandle(prevActiveHandle, lib);
     }
 
-    if (connection.source !== connection.target && handleDomNode) {
+    if (connection?.source !== connection?.target && handleDomNode) {
       resetRecentHandle(prevActiveHandle, lib);
       prevActiveHandle = handleDomNode;
       handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
@@ -269,7 +267,7 @@ function isValidHandle(
   const result: Result = {
     handleDomNode: handleToCheck,
     isValid: false,
-    connection: nullConnection,
+    connection: null,
     endHandle: null,
   };
 
@@ -280,6 +278,10 @@ function isValidHandle(
     const connectable = handleToCheck.classList.contains('connectable');
     const connectableEnd = handleToCheck.classList.contains('connectableend');
 
+    if (!handleNodeId) {
+      return result;
+    }
+
     const connection: Connection = {
       source: isTarget ? handleNodeId : fromNodeId,
       sourceHandle: isTarget ? handleId : fromHandleId,

From fcf151f6cb543a248f9d49ce884d67460134c8e0 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 11 Dec 2023 19:35:31 +0100
Subject: [PATCH 42/65] fix(svelte): shortcut delete/input issue #3712

---
 .../examples/usenodesdata/ResultNode.svelte   |  2 +-
 .../svelte/src/lib/actions/shortcut/index.ts  | 89 +++++++++++++++++++
 .../components/KeyHandler/KeyHandler.svelte   | 35 +++++---
 3 files changed, 113 insertions(+), 13 deletions(-)
 create mode 100644 packages/svelte/src/lib/actions/shortcut/index.ts

diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index c4150f42..2664e8ef 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -17,7 +17,7 @@
 		type: 'target'
 	});
 
-	const nodeData = useNodesData($connections.map((connection) => connection.source));
+	$: nodeData = useNodesData($connections.map((connection) => connection.source));
 </script>
 
 <div class="custom">
diff --git a/packages/svelte/src/lib/actions/shortcut/index.ts b/packages/svelte/src/lib/actions/shortcut/index.ts
new file mode 100644
index 00000000..10c1e207
--- /dev/null
+++ b/packages/svelte/src/lib/actions/shortcut/index.ts
@@ -0,0 +1,89 @@
+// Shortcut action is copied and slightly adjusted from https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/shortcut
+// If this discussion https://github.com/vnphanquang/svelte-put/discussions/256 gets resolved, we will use the original action again.
+
+export interface ShortcutEventDetail {
+  event: KeyboardEvent;
+  trigger: ShortcutTrigger;
+}
+
+export type ShortcutModifier = 'alt' | 'ctrl' | 'meta' | 'shift';
+
+export type ShortcutModifierDefinition =
+  | ShortcutModifier
+  | ShortcutModifier[]
+  | ShortcutModifier[][];
+
+export type ShortcutTrigger = {
+  enabled?: boolean;
+  modifier?: ShortcutModifierDefinition;
+  id?: string;
+  key: string;
+  callback?: (detail: ShortcutEventDetail) => void;
+  preventDefault?: boolean;
+};
+
+export type ShortcutParameter = {
+  enabled?: boolean;
+  trigger: Array<ShortcutTrigger> | ShortcutTrigger;
+  type?: 'keydown' | 'keyup';
+};
+
+export function shortcut(node: Window, param: ShortcutParameter) {
+  let { enabled = true, trigger, type = 'keydown' } = param;
+
+  function handler(event: KeyboardEvent) {
+    const normalizedTriggers = Array.isArray(trigger) ? trigger : [trigger];
+    const modifiedMap = {
+      alt: event.altKey,
+      ctrl: event.ctrlKey,
+      shift: event.shiftKey,
+      meta: event.metaKey
+    };
+    for (const trigger of normalizedTriggers) {
+      const mergedTrigger = {
+        modifier: [],
+        preventDefault: false,
+        enabled: true,
+        ...trigger
+      };
+      const { modifier, key, callback, preventDefault, enabled: triggerEnabled } = mergedTrigger;
+      if (triggerEnabled) {
+        if (modifier.length) {
+          const modifierDefs = (Array.isArray(modifier) ? modifier : [modifier]).map((def) =>
+            typeof def === 'string' ? [def] : def
+          );
+          const modified = modifierDefs.some((def) =>
+            def.every((modifier) => modifiedMap[modifier])
+          );
+          if (!modified) continue;
+        }
+        if (event.key === key) {
+          if (preventDefault) event.preventDefault();
+          const detail = { event, trigger: mergedTrigger };
+          callback?.(detail);
+        }
+      }
+    }
+  }
+
+  if (enabled) node.addEventListener(type, handler);
+
+  return {
+    update: (update: ShortcutParameter) => {
+      const { enabled: newEnabled = true, type: newType = 'keydown' } = update;
+
+      if (enabled && (!newEnabled || type !== newType)) {
+        node.removeEventListener(type, handler);
+      } else if (!enabled && newEnabled) {
+        node.addEventListener(newType, handler);
+      }
+
+      enabled = newEnabled;
+      type = newType;
+      trigger = update.trigger;
+    },
+    destroy: () => {
+      node.removeEventListener(type, handler);
+    }
+  };
+}
diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
index f52d696a..54f3a9c1 100644
--- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
+  import { isInputDOMNode, isMacOs } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { KeyHandlerProps } from './types';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
-  import { isMacOs } from '@xyflow/system';
+  import { shortcut, type ShortcutModifierDefinition } from '../../actions/shortcut';
 
   type $$Props = KeyHandlerProps;
 
@@ -71,16 +71,19 @@
     trigger: [
       {
         ...selectionKeyDefinition,
-        callback: () => selectionKeyDefinition.key && selectionKeyPressed.set(true)
+        enabled: selectionKeyDefinition.key !== null,
+        callback: () => selectionKeyPressed.set(true)
       }
     ],
+
     type: 'keydown'
   }}
   use:shortcut={{
     trigger: [
       {
         ...selectionKeyDefinition,
-        callback: () => selectionKeyDefinition.key && selectionKeyPressed.set(false)
+        enabled: selectionKeyDefinition.key !== null,
+        callback: () => selectionKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -89,7 +92,8 @@
     trigger: [
       {
         ...multiSelectionKeyDefinition,
-        callback: () => multiSelectionKeyDefinition.key && multiselectionKeyPressed.set(true)
+        enabled: multiSelectionKeyDefinition.key !== null,
+        callback: () => multiselectionKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -98,7 +102,8 @@
     trigger: [
       {
         ...multiSelectionKeyDefinition,
-        callback: () => multiSelectionKeyDefinition.key && multiselectionKeyPressed.set(false)
+        enabled: multiSelectionKeyDefinition.key !== null,
+        callback: () => multiselectionKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -107,7 +112,8 @@
     trigger: [
       {
         ...deleteKeyDefinition,
-        callback: (event) => deleteKeyDefinition.key && deleteKeyPressed.set(true)
+        enabled: deleteKeyDefinition.key !== null,
+        callback: (detail) => !isInputDOMNode(detail.event) && deleteKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -116,7 +122,8 @@
     trigger: [
       {
         ...deleteKeyDefinition,
-        callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(false)
+        enabled: deleteKeyDefinition.key !== null,
+        callback: () => deleteKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -125,7 +132,8 @@
     trigger: [
       {
         ...panActivationKeyDefinition,
-        callback: () => panActivationKeyDefinition.key && panActivationKeyPressed.set(true)
+        enabled: panActivationKeyDefinition.key !== null,
+        callback: () => panActivationKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -134,7 +142,8 @@
     trigger: [
       {
         ...panActivationKeyDefinition,
-        callback: () => panActivationKeyDefinition.key && panActivationKeyPressed.set(false)
+        enabled: panActivationKeyDefinition.key !== null,
+        callback: () => panActivationKeyPressed.set(false)
       }
     ],
     type: 'keyup'
@@ -143,7 +152,8 @@
     trigger: [
       {
         ...zoomActivationKeyDefinition,
-        callback: () => zoomActivationKeyDefinition.key && zoomActivationKeyPressed.set(true)
+        enabled: zoomActivationKeyDefinition.key !== null,
+        callback: () => zoomActivationKeyPressed.set(true)
       }
     ],
     type: 'keydown'
@@ -152,7 +162,8 @@
     trigger: [
       {
         ...zoomActivationKeyDefinition,
-        callback: () => zoomActivationKeyDefinition.key && zoomActivationKeyPressed.set(false)
+        enabled: zoomActivationKeyDefinition.key !== null,
+        callback: () => zoomActivationKeyPressed.set(false)
       }
     ],
     type: 'keyup'

From b0d4c1b08131d34bc0795699c685a696cc59db68 Mon Sep 17 00:00:00 2001
From: Moritz Klack <info@moritzklack.com>
Date: Mon, 11 Dec 2023 19:51:40 +0100
Subject: [PATCH 43/65] Update ResultNode.tsx

---
 examples/react/src/examples/UseNodesData/ResultNode.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx
index 324da1fe..38508b7a 100644
--- a/examples/react/src/examples/UseNodesData/ResultNode.tsx
+++ b/examples/react/src/examples/UseNodesData/ResultNode.tsx
@@ -7,10 +7,6 @@ function ResultNode() {
   });
   const nodesData = useNodesData(connections.map((connection) => connection.source));
 
-  useEffect(() => {
-    console.log('incoming data changed', nodesData);
-  }, [nodesData]);
-
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
       <Handle type="target" position={Position.Left} />

From 6cf8589ea84f9ca78a35537c6aee8ec408ca5e9a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 12 Dec 2023 10:50:12 +0100
Subject: [PATCH 44/65] refactor(react): shorter useHandleConnections params

---
 .../react/src/examples/UseNodesData/ResultNode.tsx |  4 ++--
 .../src/examples/UseNodesData/UppercaseNode.tsx    |  2 +-
 packages/react/src/hooks/useHandleConnections.ts   | 14 +++++++-------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx
index 38508b7a..ac9777dd 100644
--- a/examples/react/src/examples/UseNodesData/ResultNode.tsx
+++ b/examples/react/src/examples/UseNodesData/ResultNode.tsx
@@ -1,9 +1,9 @@
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
 
 function ResultNode() {
   const connections = useHandleConnections({
-    handleType: 'target',
+    type: 'target',
   });
   const nodesData = useNodesData(connections.map((connection) => connection.source));
 
diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
index 06cf84a8..438c25cc 100644
--- a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
+++ b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
@@ -3,7 +3,7 @@ import { Position, NodeProps, useUpdateNodeData, Handle, useHandleConnections, u
 
 function UppercaseNode({ id }: NodeProps) {
   const connections = useHandleConnections({
-    handleType: 'target',
+    type: 'target',
   });
   const nodeData = useNodesData(connections[0]?.source);
   const updateNodeData = useUpdateNodeData();
diff --git a/packages/react/src/hooks/useHandleConnections.ts b/packages/react/src/hooks/useHandleConnections.ts
index 58987aec..c9a026d9 100644
--- a/packages/react/src/hooks/useHandleConnections.ts
+++ b/packages/react/src/hooks/useHandleConnections.ts
@@ -5,9 +5,9 @@ import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
 
 type useHandleConnectionsParams = {
-  handleType: HandleType;
+  type: HandleType;
+  id?: string | null;
   nodeId?: string;
-  handleId?: string | null;
   onConnect?: (connections: Connection[]) => void;
   onDisconnect?: (connections: Connection[]) => void;
 };
@@ -16,16 +16,16 @@ type useHandleConnectionsParams = {
  *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
- * @param param.handleType - 'source' or 'target'
- * @param param.handleId - the handle id (this is only needed if the node has multiple handles of the same type)
+ * @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.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
  */
 export function useHandleConnections({
-  handleType,
-  handleId = null,
+  type,
+  id = null,
   nodeId,
   onConnect,
   onDisconnect,
@@ -35,7 +35,7 @@ export function useHandleConnections({
   const currentNodeId = nodeId || _nodeId;
 
   const connections = useStore(
-    (state) => state.connectionLookup.get(`${currentNodeId}-${handleType}-${handleId}`),
+    (state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`),
     areConnectionMapsEqual
   );
 

From 75979922ea9fe745777b3683da336a73879c48b8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 12 Dec 2023 13:51:58 +0100
Subject: [PATCH 45/65] refactor(hooks): rename useUpdateNodeData to
 useSetNodeData and adjust api

---
 .../src/examples/UseNodesData/TextNode.tsx    |  6 ++--
 .../examples/UseNodesData/UppercaseNode.tsx   |  6 ++--
 .../examples/usenodesdata/ResultNode.svelte   |  1 -
 .../examples/usenodesdata/TextNode.svelte     |  6 ++--
 .../usenodesdata/UppercaseNode.svelte         |  6 ++--
 packages/react/src/hooks/useSetNodeData.ts    | 30 +++++++++++++++++++
 packages/react/src/hooks/useUpdateNodeData.ts | 13 --------
 packages/react/src/index.ts                   |  2 +-
 .../svelte/src/lib/hooks/useSetNodeData.ts    | 28 +++++++++++++++++
 .../svelte/src/lib/hooks/useUpdateNodeData.ts | 22 --------------
 packages/svelte/src/lib/index.ts              |  2 +-
 11 files changed, 72 insertions(+), 50 deletions(-)
 create mode 100644 packages/react/src/hooks/useSetNodeData.ts
 delete mode 100644 packages/react/src/hooks/useUpdateNodeData.ts
 create mode 100644 packages/svelte/src/lib/hooks/useSetNodeData.ts
 delete mode 100644 packages/svelte/src/lib/hooks/useUpdateNodeData.ts

diff --git a/examples/react/src/examples/UseNodesData/TextNode.tsx b/examples/react/src/examples/UseNodesData/TextNode.tsx
index a7388cb0..e787d824 100644
--- a/examples/react/src/examples/UseNodesData/TextNode.tsx
+++ b/examples/react/src/examples/UseNodesData/TextNode.tsx
@@ -1,10 +1,10 @@
 import { memo, ChangeEventHandler } from 'react';
-import { Position, NodeProps, useUpdateNodeData, Handle } from '@xyflow/react';
+import { Position, NodeProps, useSetNodeData, Handle } from '@xyflow/react';
 
 function TextNode({ id, data }: NodeProps) {
-  const updateNodeData = useUpdateNodeData();
+  const setNodeData = useSetNodeData();
 
-  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => updateNodeData(id, { text: evt.target.value });
+  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => setNodeData(id, { text: evt.target.value });
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
index 438c25cc..47ecd87c 100644
--- a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
+++ b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
@@ -1,15 +1,15 @@
 import { memo, useEffect } from 'react';
-import { Position, NodeProps, useUpdateNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+import { Position, NodeProps, useSetNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
 
 function UppercaseNode({ id }: NodeProps) {
   const connections = useHandleConnections({
     type: 'target',
   });
   const nodeData = useNodesData(connections[0]?.source);
-  const updateNodeData = useUpdateNodeData();
+  const setNodeData = useSetNodeData();
 
   useEffect(() => {
-    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
+    setNodeData(id, { text: nodeData?.text.toUpperCase() });
   }, [nodeData]);
 
   return (
diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index 2664e8ef..9dd98173 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -4,7 +4,6 @@
 		Position,
 		useHandleConnections,
 		useNodesData,
-		useUpdateNodeData,
 		type NodeProps
 	} from '@xyflow/svelte';
 
diff --git a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
index 142a14bb..63f2d83b 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, useUpdateNodeData } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, useSetNodeData } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 	export let data: $$Props['data'];
 
-	const updateNodeData = useUpdateNodeData();
+	const setNodeData = useSetNodeData();
 </script>
 
 <div class="custom">
@@ -14,7 +14,7 @@
 	<div>
 		<input
 			value={data.text}
-			on:input={(evt) => updateNodeData(id, { text: evt.currentTarget.value })}
+			on:input={(evt) => setNodeData(id, { text: evt.currentTarget.value })}
 		/>
 	</div>
 	<Handle type="source" position={Position.Right} />
diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
index 3e311f1f..b23481d8 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
@@ -5,14 +5,14 @@
 		type NodeProps,
 		useHandleConnections,
 		useNodesData,
-		useUpdateNodeData
+		useSetNodeData
 	} from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 
-	const updateNodeData = useUpdateNodeData();
+	const setNodeData = useSetNodeData();
 	const connections = useHandleConnections({
 		nodeId: id,
 		type: 'target'
@@ -21,7 +21,7 @@
 	$: nodeData = useNodesData($connections[0]?.source);
 
 	$: {
-		updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
+		setNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
 	}
 </script>
 
diff --git a/packages/react/src/hooks/useSetNodeData.ts b/packages/react/src/hooks/useSetNodeData.ts
new file mode 100644
index 00000000..16d33f66
--- /dev/null
+++ b/packages/react/src/hooks/useSetNodeData.ts
@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+import useReactFlow from './useReactFlow';
+import { Node } from '../types';
+
+export function useSetNodeData<NodeType extends Node = Node>() {
+  const { setNodes } = useReactFlow();
+
+  const setNodeData = useCallback(
+    function setNodesData(
+      id: string,
+      dataUpdate: object | ((node: NodeType) => object),
+      options: { replace: boolean } = { replace: true }
+    ) {
+      setNodes((prevNodes) =>
+        prevNodes.map((node) => {
+          if (node.id === id) {
+            const nextData = typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
+            return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
+          }
+
+          return node;
+        })
+      );
+    },
+    [setNodes]
+  );
+
+  return setNodeData;
+}
diff --git a/packages/react/src/hooks/useUpdateNodeData.ts b/packages/react/src/hooks/useUpdateNodeData.ts
deleted file mode 100644
index 10cd71e2..00000000
--- a/packages/react/src/hooks/useUpdateNodeData.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useCallback } from 'react';
-
-import useReactFlow from './useReactFlow';
-
-export function useUpdateNodeData() {
-  const { setNodes } = useReactFlow();
-
-  const updateNodeData = useCallback((id: string, data: unknown) => {
-    setNodes((prevNodes) => prevNodes.map((node) => (node.id === id ? { ...node, data } : node)));
-  }, []);
-
-  return updateNodeData;
-}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 63b70c98..ab450904 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -23,7 +23,7 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from
 export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { useHandleConnections } from './hooks/useHandleConnections';
-export { useUpdateNodeData } from './hooks/useUpdateNodeData';
+export { useSetNodeData } from './hooks/useSetNodeData';
 export { useNodesData } from './hooks/useNodesData';
 export { useNodeId } from './contexts/NodeIdContext';
 
diff --git a/packages/svelte/src/lib/hooks/useSetNodeData.ts b/packages/svelte/src/lib/hooks/useSetNodeData.ts
new file mode 100644
index 00000000..51aaaacb
--- /dev/null
+++ b/packages/svelte/src/lib/hooks/useSetNodeData.ts
@@ -0,0 +1,28 @@
+import { useStore } from '$lib/store';
+import type { Node } from '$lib/types';
+
+export function useSetNodeData<NodeType extends Node = Node>() {
+  const { nodes } = useStore();
+
+  const setNodeData = (
+    id: string,
+    dataUpdate: object | ((node: NodeType) => object),
+    options: { replace: boolean } = { replace: true }
+  ) => {
+    nodes.update((nds) =>
+      nds.map((node) => {
+        if (node.id === id) {
+          const nextData =
+            typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
+          return options.replace
+            ? { ...node, data: nextData }
+            : { ...node, data: { ...node.data, ...nextData } };
+        }
+
+        return node;
+      })
+    );
+  };
+
+  return setNodeData;
+}
diff --git a/packages/svelte/src/lib/hooks/useUpdateNodeData.ts b/packages/svelte/src/lib/hooks/useUpdateNodeData.ts
deleted file mode 100644
index cb45dd10..00000000
--- a/packages/svelte/src/lib/hooks/useUpdateNodeData.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useStore } from '$lib/store';
-
-export function useUpdateNodeData(): (id: string, data: unknown) => void {
-  const { nodes } = useStore();
-
-  const updateNodeData = (id: string, data: unknown) => {
-    nodes.update((nds) =>
-      nds.map((node) => {
-        if (node.id === id) {
-          return {
-            ...node,
-            data
-          };
-        }
-
-        return node;
-      })
-    );
-  };
-
-  return updateNodeData;
-}
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 71841ec7..4675f2ca 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -29,7 +29,7 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 export * from '$lib/hooks/useHandleConnections';
 export * from '$lib/hooks/useNodesData';
-export * from '$lib/hooks/useUpdateNodeData';
+export * from '$lib/hooks/useSetNodeData';
 
 // types
 export type {

From 8ceb1addc186726990f7ba2471abe410bf0aa6d7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 12 Dec 2023 18:52:45 +0100
Subject: [PATCH 46/65] refactor(useSetNodeData): put function in
 useReactFlow/useSvelteFlow

---
 .../src/examples/UseNodesData/TextNode.tsx    |   6 +-
 .../examples/UseNodesData/UppercaseNode.tsx   |   6 +-
 .../examples/usenodesdata/TextNode.svelte     |   6 +-
 .../usenodesdata/UppercaseNode.svelte         |   6 +-
 packages/react/src/hooks/useReactFlow.ts      |  35 +++-
 packages/react/src/hooks/useSetNodeData.ts    |  30 ---
 packages/react/src/index.ts                   |   1 -
 packages/react/src/types/instance.ts          |  13 ++
 packages/react/src/utils/general.ts           |   4 +-
 packages/svelte/package.json                  |   2 +-
 .../svelte/src/lib/actions/shortcut/index.ts  |  89 ---------
 .../components/KeyHandler/KeyHandler.svelte   |   4 +-
 .../svelte/src/lib/hooks/useSetNodeData.ts    |  28 ---
 .../svelte/src/lib/hooks/useSvelteFlow.ts     |  67 ++++---
 packages/svelte/src/lib/index.ts              |   1 -
 packages/svelte/src/lib/utils/index.ts        |   4 +-
 packages/system/src/utils/graph.ts            |  11 +-
 pnpm-lock.yaml                                | 188 ++++++++++++++----
 18 files changed, 254 insertions(+), 247 deletions(-)
 delete mode 100644 packages/react/src/hooks/useSetNodeData.ts
 delete mode 100644 packages/svelte/src/lib/actions/shortcut/index.ts
 delete mode 100644 packages/svelte/src/lib/hooks/useSetNodeData.ts

diff --git a/examples/react/src/examples/UseNodesData/TextNode.tsx b/examples/react/src/examples/UseNodesData/TextNode.tsx
index e787d824..6ca424e6 100644
--- a/examples/react/src/examples/UseNodesData/TextNode.tsx
+++ b/examples/react/src/examples/UseNodesData/TextNode.tsx
@@ -1,10 +1,10 @@
 import { memo, ChangeEventHandler } from 'react';
-import { Position, NodeProps, useSetNodeData, Handle } from '@xyflow/react';
+import { Position, NodeProps, Handle, useReactFlow } from '@xyflow/react';
 
 function TextNode({ id, data }: NodeProps) {
-  const setNodeData = useSetNodeData();
+  const { updateNodeData } = useReactFlow();
 
-  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => setNodeData(id, { text: evt.target.value });
+  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => updateNodeData(id, { text: evt.target.value });
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
index 47ecd87c..699dc37e 100644
--- a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
+++ b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
@@ -1,15 +1,15 @@
 import { memo, useEffect } from 'react';
-import { Position, NodeProps, useSetNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+import { Position, NodeProps, useReactFlow, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
 
 function UppercaseNode({ id }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
   const connections = useHandleConnections({
     type: 'target',
   });
   const nodeData = useNodesData(connections[0]?.source);
-  const setNodeData = useSetNodeData();
 
   useEffect(() => {
-    setNodeData(id, { text: nodeData?.text.toUpperCase() });
+    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
   }, [nodeData]);
 
   return (
diff --git a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
index 63f2d83b..c1642da2 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, useSetNodeData } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, useSvelteFlow } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 	export let data: $$Props['data'];
 
-	const setNodeData = useSetNodeData();
+	const { updateNodeData } = useSvelteFlow();
 </script>
 
 <div class="custom">
@@ -14,7 +14,7 @@
 	<div>
 		<input
 			value={data.text}
-			on:input={(evt) => setNodeData(id, { text: evt.currentTarget.value })}
+			on:input={(evt) => updateNodeData(id, { text: evt.currentTarget.value })}
 		/>
 	</div>
 	<Handle type="source" position={Position.Right} />
diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
index b23481d8..88c8a918 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
@@ -5,14 +5,14 @@
 		type NodeProps,
 		useHandleConnections,
 		useNodesData,
-		useSetNodeData
+		useSvelteFlow
 	} from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 
-	const setNodeData = useSetNodeData();
+	const { updateNodeData } = useSvelteFlow();
 	const connections = useHandleConnections({
 		nodeId: id,
 		type: 'target'
@@ -21,7 +21,7 @@
 	$: nodeData = useNodesData($connections[0]?.source);
 
 	$: {
-		setNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
+		updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
 	}
 </script>
 
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index 44e29c14..9bb17eb9 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -10,7 +10,7 @@ import {
 } from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
-import { useStoreApi } from '../hooks/useStore';
+import { useStoreApi } from './useStore';
 import type {
   ReactFlowInstance,
   Instance,
@@ -24,6 +24,7 @@ import type {
   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> {
@@ -271,6 +272,36 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     return getOutgoersBase(node, nodes, edges);
   }, []);
 
+  const updateNode = useCallback<Instance.UpdateNode>(
+    (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 };
+          }
+
+          return node;
+        })
+      );
+    },
+    [setNodes]
+  );
+
+  const updateNodeData = useCallback<Instance.UpdateNodeData>(
+    (id, dataUpdate, options = { replace: false }) => {
+      updateNode(
+        id,
+        (node) => {
+          const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+          return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
+        },
+        options
+      );
+    },
+    [updateNode]
+  );
+
   return useMemo(() => {
     return {
       ...viewportHelper,
@@ -289,6 +320,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       getConnectedEdges,
       getIncomers,
       getOutgoers,
+      updateNode,
+      updateNodeData,
     };
   }, [
     viewportHelper,
diff --git a/packages/react/src/hooks/useSetNodeData.ts b/packages/react/src/hooks/useSetNodeData.ts
deleted file mode 100644
index 16d33f66..00000000
--- a/packages/react/src/hooks/useSetNodeData.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useCallback } from 'react';
-
-import useReactFlow from './useReactFlow';
-import { Node } from '../types';
-
-export function useSetNodeData<NodeType extends Node = Node>() {
-  const { setNodes } = useReactFlow();
-
-  const setNodeData = useCallback(
-    function setNodesData(
-      id: string,
-      dataUpdate: object | ((node: NodeType) => object),
-      options: { replace: boolean } = { replace: true }
-    ) {
-      setNodes((prevNodes) =>
-        prevNodes.map((node) => {
-          if (node.id === id) {
-            const nextData = typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
-            return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
-          }
-
-          return node;
-        })
-      );
-    },
-    [setNodes]
-  );
-
-  return setNodeData;
-}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ab450904..ae82e78b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -23,7 +23,6 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from
 export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { useHandleConnections } from './hooks/useHandleConnections';
-export { useSetNodeData } from './hooks/useSetNodeData';
 export { useNodesData } from './hooks/useNodesData';
 export { useNodeId } from './contexts/NodeIdContext';
 
diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts
index f229ec87..a1c822bb 100644
--- a/packages/react/src/types/instance.ts
+++ b/packages/react/src/types/instance.ts
@@ -45,6 +45,17 @@ export namespace Instance {
   export type getConnectedEdges = (id: string | (Node | { id: Node['id'] })[]) => Edge[];
   export type getIncomers = (node: string | Node | { id: Node['id'] }) => Node[];
   export type getOutgoers = (node: string | Node | { id: Node['id'] }) => Node[];
+
+  export type UpdateNode = (
+    id: string,
+    dataUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    options?: { replace: boolean }
+  ) => void;
+  export type UpdateNodeData = (
+    id: string,
+    dataUpdate: object | ((node: Node) => object),
+    options?: { replace: boolean }
+  ) => void;
 }
 
 export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
@@ -60,5 +71,7 @@ export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
   deleteElements: Instance.DeleteElements;
   getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
   isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
+  updateNode: Instance.UpdateNode;
+  updateNodeData: Instance.UpdateNodeData;
   viewportInitialized: boolean;
 } & Omit<ViewportHelperFunctions, 'initialized'>;
diff --git a/packages/react/src/utils/general.ts b/packages/react/src/utils/general.ts
index e13247c1..a106e182 100644
--- a/packages/react/src/utils/general.ts
+++ b/packages/react/src/utils/general.ts
@@ -10,8 +10,8 @@ import {
 
 import type { Edge, Node } from '../types';
 
-export const isNode = isNodeBase<Node, Edge>;
-export const isEdge = isEdgeBase<Node, Edge>;
+export const isNode = isNodeBase<Node>;
+export const isEdge = isEdgeBase<Edge>;
 export const getOutgoers = getOutgoersBase<Node, Edge>;
 export const getIncomers = getIncomersBase<Node, Edge>;
 export const addEdge = addEdgeBase<Edge>;
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 5ed9f8e9..60f4b8ed 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@svelte-put/shortcut": "^3.0.0",
+    "@svelte-put/shortcut": "^3.1.0",
     "@xyflow/system": "workspace:*",
     "classcat": "^5.0.4"
   },
diff --git a/packages/svelte/src/lib/actions/shortcut/index.ts b/packages/svelte/src/lib/actions/shortcut/index.ts
deleted file mode 100644
index 10c1e207..00000000
--- a/packages/svelte/src/lib/actions/shortcut/index.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-// Shortcut action is copied and slightly adjusted from https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/shortcut
-// If this discussion https://github.com/vnphanquang/svelte-put/discussions/256 gets resolved, we will use the original action again.
-
-export interface ShortcutEventDetail {
-  event: KeyboardEvent;
-  trigger: ShortcutTrigger;
-}
-
-export type ShortcutModifier = 'alt' | 'ctrl' | 'meta' | 'shift';
-
-export type ShortcutModifierDefinition =
-  | ShortcutModifier
-  | ShortcutModifier[]
-  | ShortcutModifier[][];
-
-export type ShortcutTrigger = {
-  enabled?: boolean;
-  modifier?: ShortcutModifierDefinition;
-  id?: string;
-  key: string;
-  callback?: (detail: ShortcutEventDetail) => void;
-  preventDefault?: boolean;
-};
-
-export type ShortcutParameter = {
-  enabled?: boolean;
-  trigger: Array<ShortcutTrigger> | ShortcutTrigger;
-  type?: 'keydown' | 'keyup';
-};
-
-export function shortcut(node: Window, param: ShortcutParameter) {
-  let { enabled = true, trigger, type = 'keydown' } = param;
-
-  function handler(event: KeyboardEvent) {
-    const normalizedTriggers = Array.isArray(trigger) ? trigger : [trigger];
-    const modifiedMap = {
-      alt: event.altKey,
-      ctrl: event.ctrlKey,
-      shift: event.shiftKey,
-      meta: event.metaKey
-    };
-    for (const trigger of normalizedTriggers) {
-      const mergedTrigger = {
-        modifier: [],
-        preventDefault: false,
-        enabled: true,
-        ...trigger
-      };
-      const { modifier, key, callback, preventDefault, enabled: triggerEnabled } = mergedTrigger;
-      if (triggerEnabled) {
-        if (modifier.length) {
-          const modifierDefs = (Array.isArray(modifier) ? modifier : [modifier]).map((def) =>
-            typeof def === 'string' ? [def] : def
-          );
-          const modified = modifierDefs.some((def) =>
-            def.every((modifier) => modifiedMap[modifier])
-          );
-          if (!modified) continue;
-        }
-        if (event.key === key) {
-          if (preventDefault) event.preventDefault();
-          const detail = { event, trigger: mergedTrigger };
-          callback?.(detail);
-        }
-      }
-    }
-  }
-
-  if (enabled) node.addEventListener(type, handler);
-
-  return {
-    update: (update: ShortcutParameter) => {
-      const { enabled: newEnabled = true, type: newType = 'keydown' } = update;
-
-      if (enabled && (!newEnabled || type !== newType)) {
-        node.removeEventListener(type, handler);
-      } else if (!enabled && newEnabled) {
-        node.addEventListener(newType, handler);
-      }
-
-      enabled = newEnabled;
-      type = newType;
-      trigger = update.trigger;
-    },
-    destroy: () => {
-      node.removeEventListener(type, handler);
-    }
-  };
-}
diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
index 54f3a9c1..36206982 100644
--- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
   import { isInputDOMNode, isMacOs } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { KeyHandlerProps } from './types';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
-  import { shortcut, type ShortcutModifierDefinition } from '../../actions/shortcut';
 
   type $$Props = KeyHandlerProps;
 
@@ -113,7 +113,7 @@
       {
         ...deleteKeyDefinition,
         enabled: deleteKeyDefinition.key !== null,
-        callback: (detail) => !isInputDOMNode(detail.event) && deleteKeyPressed.set(true)
+        callback: (detail) => !isInputDOMNode(detail.originalEvent) && deleteKeyPressed.set(true)
       }
     ],
     type: 'keydown'
diff --git a/packages/svelte/src/lib/hooks/useSetNodeData.ts b/packages/svelte/src/lib/hooks/useSetNodeData.ts
deleted file mode 100644
index 51aaaacb..00000000
--- a/packages/svelte/src/lib/hooks/useSetNodeData.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useStore } from '$lib/store';
-import type { Node } from '$lib/types';
-
-export function useSetNodeData<NodeType extends Node = Node>() {
-  const { nodes } = useStore();
-
-  const setNodeData = (
-    id: string,
-    dataUpdate: object | ((node: NodeType) => object),
-    options: { replace: boolean } = { replace: true }
-  ) => {
-    nodes.update((nds) =>
-      nds.map((node) => {
-        if (node.id === id) {
-          const nextData =
-            typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
-          return options.replace
-            ? { ...node, data: nextData }
-            : { ...node, data: { ...node.data, ...nextData } };
-        }
-
-        return node;
-      })
-    );
-  };
-
-  return setNodeData;
-}
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index 3c266f43..6e66a998 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -1,7 +1,5 @@
 import { get, type Writable } from 'svelte/store';
 import {
-  getIncomersBase,
-  getOutgoersBase,
   getOverlappingArea,
   isRectObject,
   nodeToRect,
@@ -20,6 +18,7 @@ import {
 
 import { useStore } from '$lib/store';
 import type { Edge, FitViewOptions, Node } from '$lib/types';
+import { isNode } from '$lib/utils';
 
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
@@ -48,9 +47,16 @@ export function useSvelteFlow(): {
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
-  getConnectedEdges: (id: string | (Node | { id: Node['id'] })[]) => Edge[];
-  getIncomers: (node: string | Node | { id: Node['id'] }) => Node[];
-  getOutgoers: (node: string | Node | { id: Node['id'] }) => Node[];
+  updateNode: (
+    id: string,
+    nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    options?: { replace: boolean }
+  ) => void;
+  updateNodeData: (
+    id: string,
+    dataUpdate: object | ((node: Node) => object),
+    options?: { replace: boolean }
+  ) => void;
   toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
 } {
   const {
@@ -84,6 +90,24 @@ export function useSvelteFlow(): {
     return [nodeRect, node, isRect];
   };
 
+  const updateNode = (
+    id: string,
+    nodeUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    options: { replace: boolean } = { replace: false }
+  ) => {
+    nodes.update((nds) =>
+      nds.map((node) => {
+        if (node.id === id) {
+          const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
+
+          return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+        }
+
+        return node;
+      })
+    );
+  };
+
   return {
     zoomIn,
     zoomOut,
@@ -232,29 +256,6 @@ export function useSvelteFlow(): {
         y: rendererPosition.y + domY
       };
     },
-    getConnectedEdges: (node) => {
-      const nodeIds = new Set();
-
-      if (typeof node === 'string') {
-        nodeIds.add(node);
-      } else if (node.length >= 1) {
-        node.forEach((n) => {
-          nodeIds.add(n.id);
-        });
-      }
-
-      return get(edges).filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
-    },
-    getIncomers: (node) => {
-      const _node = typeof node === 'string' ? { id: node } : node;
-
-      return getIncomersBase(_node, get(nodes), get(edges));
-    },
-    getOutgoers: (node) => {
-      const _node = typeof node === 'string' ? { id: node } : node;
-
-      return getOutgoersBase(_node, get(nodes), get(edges));
-    },
     toObject: () => {
       return {
         nodes: get(nodes).map((node) => ({
@@ -268,6 +269,16 @@ export function useSvelteFlow(): {
         viewport: { ...get(viewport) }
       };
     },
+    updateNode,
+    updateNodeData: (id, dataUpdate, options) => {
+      updateNode(id, (node) => {
+        const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+
+        return options?.replace
+          ? { ...node, data: nextData }
+          : { ...node, data: { ...node.data, ...nextData } };
+      });
+    },
     viewport
   };
 }
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 4675f2ca..895793d2 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -29,7 +29,6 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 export * from '$lib/hooks/useHandleConnections';
 export * from '$lib/hooks/useNodesData';
-export * from '$lib/hooks/useSetNodeData';
 
 // types
 export type {
diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts
index 23b29448..09769c62 100644
--- a/packages/svelte/src/lib/utils/index.ts
+++ b/packages/svelte/src/lib/utils/index.ts
@@ -10,8 +10,8 @@ import {
 
 import type { Edge, Node } from '$lib/types';
 
-export const isNode = isNodeBase<Node, Edge>;
-export const isEdge = isEdgeBase<Node, Edge>;
+export const isNode = isNodeBase<Node>;
+export const isEdge = isEdgeBase<Edge>;
 export const getOutgoers = getOutgoersBase<Node, Edge>;
 export const getIncomers = getIncomersBase<Node, Edge>;
 export const addEdge = addEdgeBase<Edge>;
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 6a946a10..df815510 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -11,7 +11,6 @@ import {
   getViewportForBounds,
 } from './general';
 import {
-  type Connection,
   type Transform,
   type XYPosition,
   type Rect,
@@ -26,13 +25,11 @@ import {
 } from '../types';
 import { errorMessages } from '../constants';
 
-export const isEdgeBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
-  element: NodeType | Connection | EdgeType
-): element is EdgeType => 'id' in element && 'source' in element && 'target' in element;
+export const isEdgeBase = <EdgeType extends EdgeBase = EdgeBase>(element: any): element is EdgeType =>
+  'id' in element && 'source' in element && 'target' in element;
 
-export const isNodeBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
-  element: NodeType | Connection | EdgeType
-): element is NodeType => 'id' in element && !('source' in element) && !('target' in element);
+export const isNodeBase = <NodeType extends NodeBase = NodeBase>(element: any): element is NodeType =>
+  'id' in element && !('source' in element) && !('target' in element);
 
 export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
   node: NodeType | { id: string },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05a5637d..0286010e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,10 +61,10 @@ importers:
     dependencies:
       '@astrojs/react':
         specifier: ^3.0.2
-        version: registry.npmjs.org/@astrojs/react@3.0.2(@types/react-dom@18.2.8)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)(vite@4.5.0)
+        version: registry.npmjs.org/@astrojs/react@3.0.2(@types/react-dom@18.2.8)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)(vite@4.5.1)
       '@astrojs/svelte':
         specifier: ^4.0.2
-        version: registry.npmjs.org/@astrojs/svelte@4.0.2(astro@3.2.2)(svelte@4.2.1)(typescript@5.2.2)(vite@4.5.0)
+        version: registry.npmjs.org/@astrojs/svelte@4.0.2(astro@3.2.2)(svelte@4.2.1)(typescript@5.3.3)(vite@4.5.1)
       '@types/react':
         specifier: ^18.2.24
         version: registry.npmjs.org/@types/react@18.2.24
@@ -291,8 +291,8 @@ importers:
   packages/svelte:
     dependencies:
       '@svelte-put/shortcut':
-        specifier: ^3.0.0
-        version: registry.npmjs.org/@svelte-put/shortcut@3.0.0
+        specifier: ^3.1.0
+        version: registry.npmjs.org/@svelte-put/shortcut@3.1.0
       '@xyflow/system':
         specifier: workspace:*
         version: link:../system
@@ -305,7 +305,7 @@ importers:
         version: registry.npmjs.org/@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.6)
       '@sveltejs/kit':
         specifier: ^1.22.6
-        version: registry.npmjs.org/@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.0)
+        version: registry.npmjs.org/@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.1)
       '@sveltejs/package':
         specifier: ^2.2.1
         version: registry.npmjs.org/@sveltejs/package@2.2.1(svelte@4.2.1)(typescript@5.1.3)
@@ -417,7 +417,7 @@ importers:
     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.0)
+        version: registry.npmjs.org/@playwright/experimental-ct-react@1.39.0(@types/node@18.7.16)(vite@4.5.1)
       '@types/react':
         specifier: ^18.2.31
         version: registry.npmjs.org/@types/react@18.2.31
@@ -551,7 +551,7 @@ packages:
       prismjs: registry.npmjs.org/prismjs@1.29.0
     dev: false
 
-  registry.npmjs.org/@astrojs/react@3.0.2(@types/react-dom@18.2.8)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)(vite@4.5.0):
+  registry.npmjs.org/@astrojs/react@3.0.2(@types/react-dom@18.2.8)(@types/react@18.2.24)(react-dom@18.2.0)(react@18.2.0)(vite@4.5.1):
     resolution: {integrity: sha512-aooNIuQxTg+IWGMZPuIEwBeBi4/TCPCMsr3714zuLjAjukVd5ZrX/bCNxJqDWU4HNwUm4XFU1OhcEvYOHa5uMQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@astrojs/react/-/react-3.0.2.tgz}
     id: registry.npmjs.org/@astrojs/react/3.0.2
     name: '@astrojs/react'
@@ -565,7 +565,7 @@ packages:
     dependencies:
       '@types/react': registry.npmjs.org/@types/react@18.2.24
       '@types/react-dom': registry.npmjs.org/@types/react-dom@18.2.8
-      '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react@4.1.1(vite@4.5.0)
+      '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react@4.1.1(vite@4.5.1)
       react: registry.npmjs.org/react@18.2.0
       react-dom: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
       ultrahtml: registry.npmjs.org/ultrahtml@1.5.2
@@ -574,7 +574,7 @@ packages:
       - vite
     dev: false
 
-  registry.npmjs.org/@astrojs/svelte@4.0.2(astro@3.2.2)(svelte@4.2.1)(typescript@5.2.2)(vite@4.5.0):
+  registry.npmjs.org/@astrojs/svelte@4.0.2(astro@3.2.2)(svelte@4.2.1)(typescript@5.3.3)(vite@4.5.1):
     resolution: {integrity: sha512-XB9Sexq+iW5aUpctDk6zuKHbWIAuPlAnZKbfgaS9VOaOUtx1t12crP9YoKEVcTifXYgoRuWWfeEAm2I8pYlLIQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@astrojs/svelte/-/svelte-4.0.2.tgz}
     id: registry.npmjs.org/@astrojs/svelte/4.0.2
     name: '@astrojs/svelte'
@@ -584,10 +584,10 @@ packages:
       astro: ^3.0.11
       svelte: ^3.55.0 || ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.0)
+      '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.1)
       astro: registry.npmjs.org/astro@3.2.2
       svelte: registry.npmjs.org/svelte@4.2.1
-      svelte2tsx: registry.npmjs.org/svelte2tsx@0.6.23(svelte@4.2.1)(typescript@5.2.2)
+      svelte2tsx: registry.npmjs.org/svelte2tsx@0.6.23(svelte@4.2.1)(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -1938,7 +1938,7 @@ packages:
       - terser
     dev: false
 
-  registry.npmjs.org/@playwright/experimental-ct-react@1.39.0(@types/node@18.7.16)(vite@4.5.0):
+  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'
@@ -1947,7 +1947,7 @@ packages:
     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.0)
+      '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react@4.1.1(vite@4.5.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -2120,10 +2120,10 @@ packages:
     version: 2.0.0
     dev: true
 
-  registry.npmjs.org/@svelte-put/shortcut@3.0.0:
-    resolution: {integrity: sha512-nZg3pwpTi9wUsvQPlqOzEsxZcF2jmY5j+VBq/20IUjjd2OpM92XqZAga0PCCjE6OuEobOt58UMnC2QZgOvk0tQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-3.0.0.tgz}
+  registry.npmjs.org/@svelte-put/shortcut@3.1.0:
+    resolution: {integrity: sha512-EWMEDkZ0+O3yMhb9yrqe5UYisV9CNRKX6Pl/JW3x62t74CiN+3COu1L9NzZUG0omagc2Z3J14PZNYxs77IC9NA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-3.1.0.tgz}
     name: '@svelte-put/shortcut'
-    version: 3.0.0
+    version: 3.1.0
     dev: false
 
   registry.npmjs.org/@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.6):
@@ -2134,7 +2134,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': registry.npmjs.org/@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.0)
+      '@sveltejs/kit': registry.npmjs.org/@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.1)
       import-meta-resolve: registry.npmjs.org/import-meta-resolve@3.0.0
     dev: true
 
@@ -2150,7 +2150,7 @@ packages:
       import-meta-resolve: registry.npmjs.org/import-meta-resolve@4.0.0
     dev: true
 
-  registry.npmjs.org/@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.0):
+  registry.npmjs.org/@sveltejs/kit@1.22.6(svelte@4.2.1)(vite@4.5.1):
     resolution: {integrity: sha512-SDKxI/QpsReCwIn5czjT53fKlPBybbmMk67d317gUqfeORroBAFN1Z6s/x0E1JYi+04i7kKllS+Sz9wVfmUkAQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.6.tgz}
     id: registry.npmjs.org/@sveltejs/kit/1.22.6
     name: '@sveltejs/kit'
@@ -2162,7 +2162,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.0)
+      '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.1)
       '@types/cookie': registry.npmjs.org/@types/cookie@0.5.3
       cookie: registry.npmjs.org/cookie@0.5.0
       devalue: registry.npmjs.org/devalue@4.3.2
@@ -2175,7 +2175,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.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2231,7 +2231,7 @@ packages:
       - typescript
     dev: true
 
-  registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.0):
+  registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.1):
     resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz}
     id: registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/1.0.4
     name: '@sveltejs/vite-plugin-svelte-inspector'
@@ -2242,10 +2242,10 @@ packages:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.0)
+      '@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.0(@types/node@18.7.16)
+      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
 
@@ -2268,7 +2268,7 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.0):
+  registry.npmjs.org/@sveltejs/vite-plugin-svelte@2.4.6(svelte@4.2.1)(vite@4.5.1):
     resolution: {integrity: sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.6.tgz}
     id: registry.npmjs.org/@sveltejs/vite-plugin-svelte/2.4.6
     name: '@sveltejs/vite-plugin-svelte'
@@ -2278,15 +2278,15 @@ packages:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.6)(svelte@4.2.1)(vite@4.5.0)
+      '@sveltejs/vite-plugin-svelte-inspector': registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector@1.0.4(@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)
       deepmerge: registry.npmjs.org/deepmerge@4.3.1
       kleur: registry.npmjs.org/kleur@4.1.5
       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.0(@types/node@18.7.16)
-      vitefu: registry.npmjs.org/vitefu@0.2.5(vite@4.5.0)
+      vite: registry.npmjs.org/vite@4.5.1(@types/node@18.7.16)
+      vitefu: registry.npmjs.org/vitefu@0.2.5(vite@4.5.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -2972,6 +2972,12 @@ packages:
     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'
+    version: 7.5.6
+    dev: true
+
   registry.npmjs.org/@types/sinonjs__fake-timers@8.1.1:
     resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz}
     name: '@types/sinonjs__fake-timers'
@@ -2996,10 +3002,10 @@ packages:
     version: 3.0.1
     dev: false
 
-  registry.npmjs.org/@types/yauzl@2.10.2:
-    resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.2.tgz}
+  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.2
+    version: 2.10.3
     requiresBuild: true
     dependencies:
       '@types/node': registry.npmjs.org/@types/node@18.7.16
@@ -3092,7 +3098,7 @@ packages:
       debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
       eslint: registry.npmjs.org/eslint@8.43.0
       graphemer: registry.npmjs.org/graphemer@1.4.0
-      ignore: registry.npmjs.org/ignore@5.2.4
+      ignore: registry.npmjs.org/ignore@5.3.0
       natural-compare: registry.npmjs.org/natural-compare@1.4.0
       semver: registry.npmjs.org/semver@7.5.4
       ts-api-utils: registry.npmjs.org/ts-api-utils@1.0.3(typescript@5.1.3)
@@ -3398,7 +3404,7 @@ packages:
     dependencies:
       '@eslint-community/eslint-utils': registry.npmjs.org/@eslint-community/eslint-utils@4.4.0(eslint@8.53.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@6.10.0
       '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.10.0
       '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.10.0(typescript@5.2.2)
@@ -3420,7 +3426,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@6.8.0
       '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.8.0
       '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.3)
@@ -3498,6 +3504,26 @@ packages:
       vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
     transitivePeerDependencies:
       - supports-color
+    dev: true
+
+  registry.npmjs.org/@vitejs/plugin-react@4.1.1(vite@4.5.1):
+    resolution: {integrity: sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.1.tgz}
+    id: registry.npmjs.org/@vitejs/plugin-react/4.1.1
+    name: '@vitejs/plugin-react'
+    version: 4.1.1
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0
+    dependencies:
+      '@babel/core': registry.npmjs.org/@babel/core@7.23.2
+      '@babel/plugin-transform-react-jsx-self': registry.npmjs.org/@babel/plugin-transform-react-jsx-self@7.22.5(@babel/core@7.23.2)
+      '@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)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
   registry.npmjs.org/acorn-jsx@5.3.2(acorn@8.10.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz}
@@ -5313,7 +5339,7 @@ packages:
       is-weakref: registry.npmjs.org/is-weakref@1.0.2
       object-inspect: registry.npmjs.org/object-inspect@1.13.1
       object-keys: registry.npmjs.org/object-keys@1.1.1
-      object.assign: registry.npmjs.org/object.assign@4.1.4
+      object.assign: registry.npmjs.org/object.assign@4.1.5
       regexp.prototype.flags: registry.npmjs.org/regexp.prototype.flags@1.5.1
       safe-array-concat: registry.npmjs.org/safe-array-concat@1.0.1
       safe-regex-test: registry.npmjs.org/safe-regex-test@1.0.0
@@ -5985,7 +6011,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.2
+      '@types/yauzl': registry.npmjs.org/@types/yauzl@2.10.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6487,7 +6513,7 @@ packages:
       array-union: registry.npmjs.org/array-union@2.1.0
       dir-glob: registry.npmjs.org/dir-glob@3.0.1
       fast-glob: registry.npmjs.org/fast-glob@3.3.2
-      ignore: registry.npmjs.org/ignore@5.2.4
+      ignore: registry.npmjs.org/ignore@5.3.0
       merge2: registry.npmjs.org/merge2@1.4.1
       slash: registry.npmjs.org/slash@3.0.0
     dev: true
@@ -6500,7 +6526,7 @@ packages:
     dependencies:
       dir-glob: registry.npmjs.org/dir-glob@3.0.1
       fast-glob: registry.npmjs.org/fast-glob@3.3.2
-      ignore: registry.npmjs.org/ignore@5.2.4
+      ignore: registry.npmjs.org/ignore@5.3.0
       merge2: registry.npmjs.org/merge2@1.4.1
       slash: registry.npmjs.org/slash@4.0.0
     dev: true
@@ -6791,6 +6817,13 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  registry.npmjs.org/ignore@5.3.0:
+    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz}
+    name: ignore
+    version: 5.3.0
+    engines: {node: '>= 4'}
+    dev: true
+
   registry.npmjs.org/immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz}
     name: immediate
@@ -7431,7 +7464,7 @@ packages:
     dependencies:
       array-includes: registry.npmjs.org/array-includes@3.1.7
       array.prototype.flat: registry.npmjs.org/array.prototype.flat@1.3.2
-      object.assign: registry.npmjs.org/object.assign@4.1.4
+      object.assign: registry.npmjs.org/object.assign@4.1.5
       object.values: registry.npmjs.org/object.values@1.1.7
     dev: true
 
@@ -8560,10 +8593,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  registry.npmjs.org/object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz}
+  registry.npmjs.org/object.assign@4.1.5:
+    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz}
     name: object.assign
-    version: 4.1.4
+    version: 4.1.5
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: registry.npmjs.org/call-bind@1.0.5
@@ -9487,6 +9520,16 @@ 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
@@ -11206,7 +11249,7 @@ packages:
       typescript: registry.npmjs.org/typescript@5.1.3
     dev: true
 
-  registry.npmjs.org/svelte2tsx@0.6.23(svelte@4.2.1)(typescript@5.2.2):
+  registry.npmjs.org/svelte2tsx@0.6.23(svelte@4.2.1)(typescript@5.3.3):
     resolution: {integrity: sha512-3bwd1PuWUA3oEXy8+85zrLDnmJOsVpShpKVAehGWeYsz/66zMihTpRpUN97VVAKTZbO5tP4wnchHUXYs0zOwdw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.23.tgz}
     id: registry.npmjs.org/svelte2tsx/0.6.23
     name: svelte2tsx
@@ -11218,7 +11261,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.2.2
+      typescript: registry.npmjs.org/typescript@5.3.3
     dev: false
 
   registry.npmjs.org/svelte@4.2.1:
@@ -11755,6 +11798,14 @@ 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
@@ -12090,6 +12141,44 @@ packages:
     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
+
   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}
     id: registry.npmjs.org/vitefu/0.2.5
@@ -12103,6 +12192,19 @@ packages:
     dependencies:
       vite: registry.npmjs.org/vite@4.5.0(@types/node@18.7.16)
 
+  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}
+    id: registry.npmjs.org/vitefu/0.2.5
+    name: vitefu
+    version: 0.2.5
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      vite: registry.npmjs.org/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}
     name: vscode-oniguruma

From b332b860905d1651e11fa8d0b19d2196a9c83406 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 11:33:49 +0100
Subject: [PATCH 47/65] refactor(svelte): replace on:connect with onconnect

---
 .../examples/add-node-on-drop/Flow.svelte     | 22 ++++++++-----
 .../routes/examples/customnode/+page.svelte   |  2 +-
 .../examples/customnode/CustomNode.svelte     | 12 ++-----
 .../src/routes/examples/overview/+page.svelte |  6 ++--
 .../usenodesdata/UppercaseNode.svelte         |  4 +--
 .../useupdatenodeinternals/CustomNode.svelte  | 10 ++----
 .../src/lib/components/Handle/Handle.svelte   | 31 ++++++-------------
 .../components/NodeWrapper/NodeWrapper.svelte |  3 --
 .../lib/components/nodes/DefaultNode.svelte   |  4 +--
 .../src/lib/components/nodes/InputNode.svelte |  2 +-
 .../lib/components/nodes/OutputNode.svelte    |  2 +-
 .../NodeRenderer/NodeRenderer.svelte          |  3 --
 .../container/SvelteFlow/SvelteFlow.svelte    | 11 ++++---
 .../src/lib/container/SvelteFlow/types.ts     |  9 +++++-
 .../src/lib/container/SvelteFlow/utils.ts     |  3 ++
 .../svelte/src/lib/store/initial-store.ts     | 10 ++++--
 16 files changed, 65 insertions(+), 69 deletions(-)

diff --git a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
index 5556ca80..809ae82c 100644
--- a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
+++ b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
-	import { SvelteFlow, useSvelteFlow, type Edge, type Node } from '@xyflow/svelte';
+	import {
+		SvelteFlow,
+		useSvelteFlow,
+		type Edge,
+		type Node,
+		type OnConnectEnd
+	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -16,16 +22,18 @@
 	const nodes = writable<Node[]>(initialNodes);
 	const edges = writable<Edge[]>([]);
 
-	let connectingNodeId: string = '0';
+	let connectingNodeId: string | null = '0';
 	let rect: DOMRectReadOnly;
 	let id = 1;
 	const getId = () => `${id++}`;
 
 	const { screenToFlowPosition, flowToScreenPosition } = useSvelteFlow();
 
-	function handleConnectEnd({ detail: { event } }: { detail: { event: MouseEvent | TouchEvent } }) {
+	const handleConnectEnd: OnConnectEnd = (event) => {
+		if (!connectingNodeId) return;
+
 		// See of connection landed inside the flow pane
-		const targetIsPane = event.target?.classList.contains('svelte-flow__pane');
+		const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('svelte-flow__pane');
 		if (targetIsPane) {
 			const id = getId();
 			const position = {
@@ -58,7 +66,7 @@
 			$nodes = $nodes;
 			$edges = $edges;
 		}
-	}
+	};
 </script>
 
 <svelte:window />
@@ -69,11 +77,11 @@
 		{edges}
 		fitView
 		fitViewOptions={{ padding: 2 }}
-		on:connectstart={({ detail: { nodeId } }) => {
+		onconnectstart={(_, { nodeId }) => {
 			// Memorize the nodeId you start draggin a connection line from a node
 			connectingNodeId = nodeId;
 		}}
-		on:connectend={handleConnectEnd}
+		onconnectend={handleConnectEnd}
 	/>
 </div>
 
diff --git a/examples/svelte/src/routes/examples/customnode/+page.svelte b/examples/svelte/src/routes/examples/customnode/+page.svelte
index 123932f9..525b0706 100644
--- a/examples/svelte/src/routes/examples/customnode/+page.svelte
+++ b/examples/svelte/src/routes/examples/customnode/+page.svelte
@@ -87,7 +87,7 @@
 	{nodeTypes}
 	style="--xy-background-color: {$bgColor}"
 	fitView
-	on:connect={onConnect}
+	onconnect={onConnect}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
index 25d37d32..ca01be5e 100644
--- a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="custom">
-	<Handle type="target" position={Position.Left} on:connect />
+	<Handle type="target" position={Position.Left} />
 	<div>
 		Custom Color Picker Node: <strong>{$colorStore}</strong>
 	</div>
@@ -20,14 +20,8 @@
 		on:input={(evt) => colorStore.set(evt.currentTarget.value)}
 		value={$colorStore}
 	/>
-	<Handle type="source" position={Position.Right} id="a" style="top: 20px;" on:connect />
-	<Handle
-		type="source"
-		position={Position.Right}
-		id="b"
-		style="top: auto; bottom: 10px;"
-		on:connect
-	/>
+	<Handle type="source" position={Position.Right} id="a" style="top: 20px;" />
+	<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />
 </div>
 
 <style>
diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index 68fd4aaa..a2ecba4d 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -150,9 +150,9 @@
 	on:nodemouseenter={(event) => console.log('on node enter', event)}
 	on:nodemouseleave={(event) => console.log('on node leave', event)}
 	on:edgeclick={(event) => console.log('edge click', event)}
-	on:connectstart={(event) => console.log('on connect start', event)}
-	on:connect={(event) => console.log('on connect', event)}
-	on:connectend={(event) => console.log('on connect end', event)}
+	onconnectstart={(event) => console.log('on connect start', event)}
+	onconnect={(event) => console.log('on connect', event)}
+	onconnectend={(event) => console.log('on connect end', event)}
 	on:paneclick={(event) => console.log('on pane click', event)}
 	on:panecontextmenu={(event) => {
 		console.log('on pane contextmenu', event);
diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
index 88c8a918..2dcf3bde 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
@@ -2,10 +2,10 @@
 	import {
 		Handle,
 		Position,
-		type NodeProps,
 		useHandleConnections,
 		useNodesData,
-		useSvelteFlow
+		useSvelteFlow,
+		type NodeProps
 	} from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
diff --git a/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
index f4d306ac..fbe9c8d7 100644
--- a/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
@@ -15,15 +15,9 @@
 	};
 </script>
 
-<Handle type="target" position={Position.Top} on:connect />
+<Handle type="target" position={Position.Top} />
 <button on:click={onClick}>add handle</button>
 
 {#each Array.from({ length: handleCount }) as handle, i}
-	<Handle
-		type="source"
-		position={Position.Bottom}
-		id={`${i}`}
-		style={`left: ${i * 10}px;`}
-		on:connect
-	/>
+	<Handle type="source" position={Position.Bottom} id={`${i}`} style={`left: ${i * 10}px;`} />
 {/each}
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 06a6198e..807594e0 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
-  import { getContext, createEventDispatcher } from 'svelte';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
   import cc from 'classcat';
   import {
     Position,
     XYHandle,
     isMouseEvent,
     type Connection,
-    type HandleType,
     areConnectionMapsEqual,
     handleConnectionChange
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
-  import type { Writable } from 'svelte/store';
 
   type $$Props = HandleComponentProps;
 
@@ -36,18 +35,6 @@
   $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
-  const dispatch = createEventDispatcher<{
-    connect: { connection: Connection };
-    connectstart: {
-      event: MouseEvent | TouchEvent;
-      nodeId: string | null;
-      handleId: string | null;
-      handleType: HandleType | null;
-    };
-    connectend: {
-      event: MouseEvent | TouchEvent;
-    };
-  }>();
 
   const store = useStore();
   const {
@@ -65,7 +52,10 @@
     updateConnection,
     autoPanOnConnect,
     edges,
-    connectionLookup
+    connectionLookup,
+    onconnect: onConnectAction,
+    onconnectstart: onConnectStartAction,
+    onconnectend: onConnectEndAction
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -94,20 +84,17 @@
           }
 
           addEdge(edge);
-          // @todo: should we change/ improve the stuff we are passing here?
-          // instead of source/target we could pass fromNodeId, fromHandleId, etc
-          dispatch('connect', { connection });
+          $onConnectAction?.(connection);
         },
         onConnectStart: (event, startParams) => {
-          dispatch('connectstart', {
-            event,
+          $onConnectStartAction?.(event, {
             nodeId: startParams.nodeId,
             handleId: startParams.handleId,
             handleType: startParams.handleType
           });
         },
         onConnectEnd: (event) => {
-          dispatch('connectend', { event });
+          $onConnectEndAction?.(event);
         },
         getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
       });
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 9a73ffa8..d992c5a3 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -194,9 +194,6 @@
       positionAbsolute={{ x: positionX, y: positionY }}
       {width}
       {height}
-      on:connectstart
-      on:connect
-      on:connectend
     />
   </div>
 {/if}
diff --git a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
index f4fc7270..a0d2a15c 100644
--- a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
@@ -37,6 +37,6 @@
   isConnectable;
 </script>
 
-<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
+<Handle type="target" position={targetPosition} />
 {data?.label}
-<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />
+<Handle type="source" position={sourcePosition} />
diff --git a/packages/svelte/src/lib/components/nodes/InputNode.svelte b/packages/svelte/src/lib/components/nodes/InputNode.svelte
index aa911d1c..a8a25eb8 100644
--- a/packages/svelte/src/lib/components/nodes/InputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/InputNode.svelte
@@ -39,4 +39,4 @@
 </script>
 
 {data?.label}
-<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />
+<Handle type="source" position={sourcePosition} />
diff --git a/packages/svelte/src/lib/components/nodes/OutputNode.svelte b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
index b5ebc2b1..7fff504f 100644
--- a/packages/svelte/src/lib/components/nodes/OutputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
@@ -36,4 +36,4 @@
 </script>
 
 {data?.label}
-<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
+<Handle type="target" position={targetPosition} />
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index b4b05a1b..df399a7d 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -83,9 +83,6 @@
       on:nodemouseenter
       on:nodemousemove
       on:nodemouseleave
-      on:connectstart
-      on:connect
-      on:connectend
       on:nodedrag
       on:nodedragstart
       on:nodedragstop
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 21ceec49..81aa81bd 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -78,6 +78,9 @@
   export let width: $$Props['width'] = undefined;
   export let height: $$Props['height'] = undefined;
   export let colorMode: $$Props['colorMode'] = 'light';
+  export let onconnect: $$Props['onconnect'] = undefined;
+  export let onconnectstart: $$Props['onconnectstart'] = undefined;
+  export let onconnectend: $$Props['onconnectend'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -152,7 +155,10 @@
       ondelete,
       onedgecreate,
       connectionMode,
-      nodeDragThreshold
+      nodeDragThreshold,
+      onconnect,
+      onconnectstart,
+      onconnectend
     };
 
     updateStoreByKeys(store, updatableProps);
@@ -217,9 +223,6 @@
           on:nodemouseenter
           on:nodemousemove
           on:nodemouseleave
-          on:connectstart
-          on:connect
-          on:connectend
           on:nodedragstart
           on:nodedrag
           on:nodedragstop
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 9116dc60..99361624 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -15,7 +15,10 @@ import type {
   ConnectionMode,
   PanelPosition,
   ProOptions,
-  ColorMode
+  ColorMode,
+  OnConnect,
+  OnConnectStart,
+  OnConnectEnd
 } from '@xyflow/system';
 
 import type {
@@ -92,4 +95,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   ondelete?: OnDelete;
 
   onedgecreate?: OnEdgeCreate;
+
+  onconnect?: OnConnect;
+  onconnectstart?: OnConnectStart;
+  onconnectend?: OnConnectEnd;
 };
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index 0281cd55..497ccd14 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -66,6 +66,9 @@ export type UpdatableStoreProps = {
   ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
   onedgecreate?: UnwrapWritable<SvelteFlowStore['onedgecreate']>;
   nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
+  onconnect?: UnwrapWritable<SvelteFlowStore['onconnect']>;
+  onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
+  onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index ceec1c7b..0691c202 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -19,7 +19,10 @@ import {
   getNodesBounds,
   getViewportForBounds,
   updateConnectionLookup,
-  type ConnectionLookup
+  type ConnectionLookup,
+  type OnConnect,
+  type OnConnectStart,
+  type OnConnectEnd
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -140,6 +143,9 @@ export const getInitialStore = ({
     onlyRenderVisibleElements: writable<boolean>(false),
     onerror: writable<OnError>(devWarn),
     ondelete: writable<OnDelete>(undefined),
-    onedgecreate: writable<OnEdgeCreate>(undefined)
+    onedgecreate: writable<OnEdgeCreate>(undefined),
+    onconnect: writable<OnConnect>(undefined),
+    onconnectstart: writable<OnConnectStart>(undefined),
+    onconnectend: writable<OnConnectEnd>(undefined)
   };
 };

From 94e822caa8c9eced78d7ab0f41251da3e955ae41 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 11:50:09 +0100
Subject: [PATCH 48/65] chore(examples): add updateNode

---
 examples/react/src/examples/UpdateNode/index.tsx  | 15 +++++++++++++--
 .../src/routes/examples/overview/+page.svelte     |  3 ++-
 .../examples/useupdatenodeinternals/Flow.svelte   | 12 +++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/examples/react/src/examples/UpdateNode/index.tsx b/examples/react/src/examples/UpdateNode/index.tsx
index 7c320606..d6e8a67a 100644
--- a/examples/react/src/examples/UpdateNode/index.tsx
+++ b/examples/react/src/examples/UpdateNode/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@xyflow/react';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, ReactFlowProvider, useReactFlow } from '@xyflow/react';
 
 import styles from './updatenode.module.css';
 
@@ -13,6 +13,7 @@ const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 const UpdateNode = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const { updateNode } = useReactFlow();
 
   const [nodeName, setNodeName] = useState<string>('Node 1');
   const [nodeBg, setNodeBg] = useState<string>('#eee');
@@ -80,9 +81,19 @@ const UpdateNode = () => {
           <label>hidden:</label>
           <input type="checkbox" checked={nodeHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
         </div>
+
+        <button
+          onClick={() => updateNode('1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }))}
+        >
+          update position
+        </button>
       </div>
     </ReactFlow>
   );
 };
 
-export default UpdateNode;
+export default () => (
+  <ReactFlowProvider>
+    <UpdateNode />
+  </ReactFlowProvider>
+);
diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index a2ecba4d..d8293666 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -12,7 +12,8 @@
 		type EdgeTypes,
 		type Node,
 		type Edge,
-		ConnectionMode
+		ConnectionMode,
+		useSvelteFlow
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
diff --git a/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
index 13b48cb3..42c76cd0 100644
--- a/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
+++ b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
@@ -6,7 +6,9 @@
 		Background,
 		BackgroundVariant,
 		MiniMap,
-		type NodeTypes
+		type NodeTypes,
+		useSvelteFlow,
+		Panel
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
@@ -50,6 +52,12 @@
 			target: '3'
 		}
 	]);
+
+	const { updateNode } = useSvelteFlow();
+
+	const updateNodePosition = () => {
+		updateNode('1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
+	};
 </script>
 
 <main>
@@ -57,6 +65,8 @@
 		<Controls />
 		<Background variant={BackgroundVariant.Dots} />
 		<MiniMap />
+
+		<Panel><button on:click={updateNodePosition}>update node</button></Panel>
 	</SvelteFlow>
 </main>
 

From e7b29385d02091264610b77cbbfc4ba73228a65f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 11:54:38 +0100
Subject: [PATCH 49/65] fix(svelte): allow null for keys

---
 packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
index 36206982..f6697cb2 100644
--- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
@@ -23,7 +23,7 @@
   } = useStore();
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
-    return typeof key === 'object';
+    return key !== null && typeof key === 'object';
   }
 
   function getModifier(key?: KeyDefinition | null): ShortcutModifierDefinition {

From 41a28bf6e477307ffefad60bd9ed8f09ab54afe5 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 12:17:07 +0100
Subject: [PATCH 50/65] chore(dark-mode): slightly brighter edges

---
 packages/system/src/styles/init.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 2aff146f..7b716a9d 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -23,7 +23,7 @@
 }
 
 .xy-flow.dark {
-  --xy-edge-stroke-default: #3c3c3c;
+  --xy-edge-stroke-default: #3e3e3e;
   --xy-edge-stroke-width-default: 1;
   --xy-edge-stroke-selected-default: #727272;
 

From bdcaf7b7612b5e1dceff2da418f05526f78a4364 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 12:24:00 +0100
Subject: [PATCH 51/65] chore(package): bump

---
 packages/svelte/package.json | 2 +-
 packages/system/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 60f4b8ed..887b9084 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",
diff --git a/packages/system/package.json b/packages/system/package.json
index 10729670..9eff995d 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",

From db68e28b1bff1d5020f2faa401c0e579fff17734 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 12:46:13 +0100
Subject: [PATCH 52/65] chore(svelte): update changelog

---
 packages/svelte/CHANGELOG.md | 45 ++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 60674c25..cebdde79 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,3 +1,28 @@
+## 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 />`.
+
+### Features
+
+- add `useHandleConnections` hook for receiving connected node and handle ids for a specific handle
+- add `useNodesData(ids: string | string[])` hook for receiving data from other nodes
+- export `updateNode` and `updateNodeData` from `useSvelteFlow` to update a node or the data object
+- add `onedgecreate` function for passing a certain id or other attributes to a newly created edge
+
+### Breaking
+
+- replace `on:connect`, `on:connectstart` and `on:connectend` with `onconnect`, `onconnectstart` and `onconnectend`, no need to forward `on:connect..` anymore
+
+### Fixes and minor changes
+
+- `onconnect` and `ondisconnect` callback work for `<Handle />` component
+- don't delete a node when user presses Backspace inside an input/textarea/.nokey element
+- `bgColor` prop for Background didn't work
+- prefix css vars with "xy-"
+- don't update nodes and edges on pane click if not necessary
+- cleaner types for exported edges
+- fix `getIntersectingNodes` bug when passing `Rect`
+
 ## 0.0.28
 
 There are some breaking changes again (sorry!) but we are very close to the final API for Svelte Flow 1.0.0. The biggest change is that we group node attriubutes (`width`, `height`, `positionAbsolute`) that are added by the library under `node.computed`. This makes it easier to understand, that this stuff comes from the library itself. `node.width` and `node.height` is still an optional node option and can be used to set certain dimensions for SSR or on the client.
@@ -5,7 +30,7 @@ There are some breaking changes again (sorry!) but we are very close to the fina
 - add `<NodeToolbar />` component
 - add `on:selectionclick` and `on:selectioncontextmenu` event handlers
 - add `ondelete({ nodes, edges })` handler
-- add `zoomActivationKey` prop 
+- add `zoomActivationKey` prop
 - add `width` and `height` prop to custom `NodeProps` type
 - ⚠️ replace `xPos` and `yPos` with `positionAbsolute` prop to custom `NodeProps` type
 - ⚠️ `node.width/height` and `node.positionAbsolute` can now be found under `node.computed.width/height/positionAbsolute`
@@ -15,7 +40,7 @@ There are some breaking changes again (sorry!) but we are very close to the fina
 
 ## 0.0.27
 
-- add `selectionOnDrag` prop - can be used to create figma-like controls in combination with `panOnDrag={false}` / `panOnDrag={[1, 2]}` + `panOnScroll={true}` 
+- add `selectionOnDrag` prop - can be used to create figma-like controls in combination with `panOnDrag={false}` / `panOnDrag={[1, 2]}` + `panOnScroll={true}`
 - ⚠️ rename `screenToFlowCoordinate` to `screenToFlowPosition`
 - ⚠️ rename `flowToScreenCoordinate` to `flowToScreenPosition`
 - ⚠️ rename `getTransformForBounds` to `getViewportForBounds` (return `{ x: number, y: number, zoom: number }` instead of `[number, number, number]`)
@@ -64,7 +89,7 @@ There are some breaking changes again (sorry!) but we are very close to the fina
 
 ## 0.0.22
 
-- add `connectionLine` slot for rendering a custom connection line 
+- add `connectionLine` slot for rendering a custom connection line
 - add `connectionLineStyle` and `connectionLineContainerStyle` props
 - add `useConnection` hook
 - add `nodeDragThreshold` prop
@@ -97,7 +122,7 @@ There are some breaking changes again (sorry!) but we are very close to the fina
 
 ## 0.0.18
 
-- add `nodesDraggable` prop 
+- add `nodesDraggable` prop
 - minimap: add default background
 
 ## 0.0.17
@@ -110,7 +135,7 @@ There are some breaking changes again (sorry!) but we are very close to the fina
 
 ## 0.0.15
 
-- fix wrongly displayed connectionline 
+- fix wrongly displayed connectionline
 
 ## 0.0.14
 
@@ -149,14 +174,14 @@ this version is broken because of a wrong path in the package.json
 
 - add `connectionRadius`
 
-## 0.0.1 
+## 0.0.1
 
-Svelte Flow alpha is here 🔥 You can expect some changes until we reach 1.0.0 but we try to stick as close as possible to the React Flow API. There are no docs yet, but we are working on it! For now the easiest way is to use the autocomplete of your IDE, lookup the props in the SvelteFlow component or check out the React Flow docs. 
+Svelte Flow alpha is here 🔥 You can expect some changes until we reach 1.0.0 but we try to stick as close as possible to the React Flow API. There are no docs yet, but we are working on it! For now the easiest way is to use the autocomplete of your IDE, lookup the props in the SvelteFlow component or check out the React Flow docs.
 
 This very first release comes with lots of features already:
 
-- pass `nodes` and `edges` as writables 
-- draggable, selectable and deletable nodes 
+- pass `nodes` and `edges` as writables
+- draggable, selectable and deletable nodes
 - support for custom `nodeTypes` and `edgeTypes`
 - basic viewport settings like `fitView`, `minZoom` and `maxZoom`
-- additional components: `<MiniMap />`, `<Controls />` & `<Background />` 
\ No newline at end of file
+- additional components: `<MiniMap />`, `<Controls />` & `<Background />`

From 46d42e7642dafdac02c1ba7c815c2cfebb688036 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 13 Dec 2023 17:05:13 +0100
Subject: [PATCH 53/65] chore(store): cleanup

---
 packages/react/src/store/initialState.ts |  5 ++++-
 packages/svelte/src/lib/store/utils.ts   |  2 --
 packages/system/src/types/nodes.ts       |  2 +-
 packages/system/src/utils/store.ts       | 15 +++++++++------
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index ad4b34ca..379a70e3 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -25,7 +25,10 @@ const getInitialState = ({
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map();
   const connectionLookup = updateConnectionLookup(new Map(), edges);
-  const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
+  const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
+    nodeOrigin: [0, 0],
+    elevateNodesOnSelect: false,
+  });
 
   let transform: Transform = [0, 0, 1];
 
diff --git a/packages/svelte/src/lib/store/utils.ts b/packages/svelte/src/lib/store/utils.ts
index 4c1b2d12..f8c1aef0 100644
--- a/packages/svelte/src/lib/store/utils.ts
+++ b/packages/svelte/src/lib/store/utils.ts
@@ -11,8 +11,6 @@ import {
   updateConnectionLookup,
   type Viewport,
   type PanZoomInstance,
-  type Viewport,
-  type PanZoomInstance,
   type ConnectionLookup
 } from '@xyflow/system';
 
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index 33884bf7..3839880c 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -43,7 +43,7 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
     /** 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: WeakRef<NodeBase>;
+    userProvidedNode: NodeBase<T, U>;
   };
 };
 
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 7edebec2..96950710 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -80,7 +80,10 @@ export function adoptUserProvidedNodes<NodeType extends NodeBase>(
 
   const nextNodes = nodes.map((n) => {
     const currentStoreNode = tmpLookup.get(n.id);
-    if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode.deref()) return currentStoreNode;
+    if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode) {
+      nodeLookup.set(n.id, currentStoreNode);
+      return currentStoreNode;
+    }
 
     const node: NodeType = {
       ...options.defaults,
@@ -103,7 +106,7 @@ export function adoptUserProvidedNodes<NodeType extends NodeBase>(
       value: {
         handleBounds: currInternals?.handleBounds,
         z,
-        userProvidedNode: new WeakRef(n),
+        userProvidedNode: n,
       },
     });
 
@@ -144,14 +147,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) {

From eb0b09c00e9e6749204e1a8004e0cda0d35369a9 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 14 Dec 2023 12:32:19 +0100
Subject: [PATCH 54/65] refactor(reactflow): optimize applyChanges handler

---
 packages/react/src/utils/changes.ts | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts
index c113ebe1..bef54947 100644
--- a/packages/react/src/utils/changes.ts
+++ b/packages/react/src/utils/changes.ts
@@ -55,14 +55,17 @@ 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 (let i = 0; i < elements.length; i++) {
     const nextChanges: any[] = [];
     const _remainingChanges: any[] = [];
+    const item = elements[i];
 
     remainingChanges.forEach((c) => {
-      if (c.id === item.id) {
+      if (c.type === 'add') {
+        updatedElements.push(c.item);
+      } else if (c.id === item.id) {
         nextChanges.push(c);
       } else {
         _remainingChanges.push(c);
@@ -71,8 +74,8 @@ function applyChanges(changes: any[], elements: any[]): any[] {
     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,20 +126,20 @@ 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>[] {

From 71f038a319c2c3f3aa60a6b728780618ecbe3ac6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 14 Dec 2023 12:32:41 +0100
Subject: [PATCH 55/65] refactor(node-renderer): simplify selectors, remove
 reselect, cleanup

---
 examples/react/src/examples/Stress/index.tsx  |   1 -
 packages/react/package.json                   |   1 -
 .../MiniMap/MiniMapNodes.tsx                  |  30 ++--
 .../react/src/components/Nodes/wrapNode.tsx   |  10 +-
 .../NodeRenderer/NodeComponentWrapper.tsx     | 104 +++++++++++++
 .../src/container/NodeRenderer/index.tsx      | 143 +-----------------
 .../NodeRenderer/useResizeObserver.ts         |  44 ++++++
 packages/react/src/hooks/useVisibleNodes.ts   |  29 ++--
 packages/react/src/types/nodes.ts             |   7 +-
 .../components/NodeWrapper/NodeWrapper.svelte |   3 +-
 packages/system/src/types/nodes.ts            |   3 +-
 pnpm-lock.yaml                                |   9 --
 12 files changed, 185 insertions(+), 199 deletions(-)
 create mode 100644 packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx
 create mode 100644 packages/react/src/container/NodeRenderer/useResizeObserver.ts

diff --git a/examples/react/src/examples/Stress/index.tsx b/examples/react/src/examples/Stress/index.tsx
index c1c24d86..9091a687 100644
--- a/examples/react/src/examples/Stress/index.tsx
+++ b/examples/react/src/examples/Stress/index.tsx
@@ -64,7 +64,6 @@ const StressFlow = () => {
       minZoom={0.2}
       fitView
     >
-      <MiniMap />
       <Controls />
       <Background />
 
diff --git a/packages/react/package.json b/packages/react/package.json
index d089272d..1c3194d5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -57,7 +57,6 @@
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "reselect": "^4.1.8",
     "zustand": "^4.4.0"
   },
   "peerDependencies": {
diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
index 0f22de5f..162d0b41 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
@@ -1,30 +1,18 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentType, memo, MouseEvent } from 'react';
-import { shallow } from 'zustand/shallow';
+import { ComponentType, memo } from 'react';
 import { NodeOrigin, getNodePositionWithOrigin } from '@xyflow/system';
+import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 import MiniMapNode from './MiniMapNode';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
-import { createSelector } from 'reselect';
 
 declare const window: any;
 
 const selector = (s: ReactFlowState) => s.nodeOrigin;
-const selectorNodeIds = createSelector(
-  [(s: ReactFlowState) => s.nodes],
-  (nodes) =>
-    nodes
-      .filter((node) => !node.hidden && (node.computed?.width || node.width) && (node.computed?.height || node.height))
-      .map((node) => node.id),
-  {
-    memoizeOptions: {
-      resultEqualityCheck: shallow,
-    },
-  }
-);
+const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
 
 function MiniMapNodes({
@@ -38,7 +26,7 @@ function MiniMapNodes({
   nodeComponent: NodeComponent = MiniMapNode,
   onClick,
 }: MiniMapNodesProps) {
-  const nodes = useStore(selectorNodeIds);
+  const nodeIds = useStore(selectorNodeIds, shallow);
   const nodeOrigin = useStore(selector);
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -48,7 +36,7 @@ function MiniMapNodes({
 
   return (
     <>
-      {nodes.map((nodeId) => (
+      {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.
@@ -96,16 +84,16 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({
   shapeRendering: string;
 }) {
   const node = useStore((s) => s.nodeLookup.get(id));
-  if (!node) {
+  if (!node || node.hidden || !(node.computed?.width || node.width) || !(node.computed?.height || node.height)) {
     return null;
   }
 
-  const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+  const positionOrigin = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
 
   return (
     <NodeComponent
-      x={x}
-      y={y}
+      x={positionOrigin.x}
+      y={positionOrigin.y}
       width={node.computed?.width ?? node.width ?? 0}
       height={node.computed?.height ?? node.height ?? 0}
       style={node.style}
diff --git a/packages/react/src/components/Nodes/wrapNode.tsx b/packages/react/src/components/Nodes/wrapNode.tsx
index cc1537d1..330364c6 100644
--- a/packages/react/src/components/Nodes/wrapNode.tsx
+++ b/packages/react/src/components/Nodes/wrapNode.tsx
@@ -22,10 +22,10 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     id,
     type,
     data,
-    xPos,
-    yPos,
     xPosOrigin,
     yPosOrigin,
+    positionAbsoluteX,
+    positionAbsoluteY,
     selected,
     onClick,
     onMouseEnter,
@@ -52,7 +52,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     disableKeyboardA11y,
     ariaLabel,
     rfId,
-    positionAbsolute,
     width,
     height,
   }: WrapNodeProps) => {
@@ -111,7 +110,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
         store.setState({
           ariaLiveMessage: `Moved selected node ${event.key
             .replace('Arrow', '')
-            .toLowerCase()}. New position, x: ${~~xPos}, y: ${~~yPos}`,
+            .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
         });
 
         updatePositions({
@@ -212,7 +211,8 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
             type={type}
             width={width}
             height={height}
-            positionAbsolute={positionAbsolute}
+            positionAbsoluteX={positionAbsoluteX}
+            positionAbsoluteY={positionAbsoluteY}
             selected={selected}
             isConnectable={isConnectable}
             sourcePosition={sourcePosition}
diff --git a/packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx b/packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx
new file mode 100644
index 00000000..f833ff08
--- /dev/null
+++ b/packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx
@@ -0,0 +1,104 @@
+import { memo, type ComponentType } from 'react';
+import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWithOrigin } from '@xyflow/system';
+
+import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState, WrapNodeProps } from '../../types';
+import { NodeRendererProps } from '.';
+
+function NodeComponentWrapper(props: {
+  id: string;
+  nodeExtent: NodeRendererProps['nodeExtent'];
+  nodeTypes: NodeRendererProps['nodeTypes'];
+  nodeOrigin: NodeRendererProps['nodeOrigin'];
+  onNodeClick: NodeRendererProps['onNodeClick'];
+  onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
+  onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
+  onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
+  onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
+  onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
+  noDragClassName: NodeRendererProps['noDragClassName'];
+  noPanClassName: NodeRendererProps['noPanClassName'];
+  rfId: NodeRendererProps['rfId'];
+  disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
+  resizeObserver: ResizeObserver | null;
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  nodesFocusable: boolean;
+  elementsSelectable: boolean;
+  onError: ReactFlowState['onError'];
+}) {
+  const node = useStore((s) => s.nodeLookup.get(props.id));
+  if (!node) return null;
+
+  let nodeType = node.type || 'default';
+
+  if (!props.nodeTypes[nodeType]) {
+    props.onError?.('003', errorMessages['error003'](nodeType));
+
+    nodeType = 'default';
+  }
+
+  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+  const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
+  const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
+  const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
+  const isFocusable = !!(node.focusable || (props.nodesFocusable && typeof node.focusable === 'undefined'));
+
+  const absolutePositionClamped = props.nodeExtent
+    ? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
+    : node.computed?.positionAbsolute || { x: 0, y: 0 };
+
+  const posOrigin = getPositionWithOrigin({
+    x: absolutePositionClamped.x,
+    y: absolutePositionClamped.y,
+    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);
+
+  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}
+      xPosOrigin={posOrigin.x}
+      yPosOrigin={posOrigin.y}
+      positionAbsoluteX={absolutePositionClamped.x}
+      positionAbsoluteY={absolutePositionClamped.y}
+      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={props.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}
+    />
+  );
+}
+
+NodeComponentWrapper.displayName = 'NodeComponentWrapper';
+
+export default memo(NodeComponentWrapper);
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index c89914c8..662541a4 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 useVisibleNodesIds from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
-import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types';
+import type { NodeTypesWrapped, ReactFlowState } from '../../types';
+import NodeComponentWrapper from './NodeComponentWrapper';
+import useResizeObserver from './useResizeObserver';
 
-type NodeRendererProps = Pick<
+export type NodeRendererProps = Pick<
   GraphViewProps,
   | 'onNodeClick'
   | 'onNodeDoubleClick'
@@ -32,46 +33,13 @@ const selector = (s: ReactFlowState) => ({
   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 { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
   const nodeIds = useVisibleNodesIds(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 resizeObserver = useResizeObserver();
 
   return (
     <div className="react-flow__nodes" style={containerStyle}>
@@ -129,103 +97,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
   );
 };
 
-const NodeComponentWrapper = memo(function NodeComponentWrapper(props: {
-  id: string;
-  nodeExtent: NodeRendererProps['nodeExtent'];
-  nodeTypes: NodeRendererProps['nodeTypes'];
-  nodeOrigin: NodeRendererProps['nodeOrigin'];
-  onNodeClick: NodeRendererProps['onNodeClick'];
-  onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
-  onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
-  onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
-  onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
-  onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
-  noDragClassName: NodeRendererProps['noDragClassName'];
-  noPanClassName: NodeRendererProps['noPanClassName'];
-  rfId: NodeRendererProps['rfId'];
-  disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
-  resizeObserver: ResizeObserver | null;
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  nodesFocusable: boolean;
-  elementsSelectable: boolean;
-  onError: ReactFlowState['onError'];
-}) {
-  const node = useStore((s) => s.nodeLookup.get(props.id));
-  if (!node) return null;
-
-  let nodeType = node.type || 'default';
-
-  if (!props.nodeTypes[nodeType]) {
-    props.onError?.('003', errorMessages['error003'](nodeType));
-
-    nodeType = 'default';
-  }
-
-  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
-  const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
-  const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
-  const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
-  const isFocusable = !!(node.focusable || (props.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);
-
-  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 }}
-      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={props.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}
-    />
-  );
-});
-
 NodeRenderer.displayName = 'NodeRenderer';
 
 export default memo(NodeRenderer);
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/hooks/useVisibleNodes.ts b/packages/react/src/hooks/useVisibleNodes.ts
index 56e14674..2f67af02 100644
--- a/packages/react/src/hooks/useVisibleNodes.ts
+++ b/packages/react/src/hooks/useVisibleNodes.ts
@@ -1,31 +1,20 @@
 import { getNodesInside } from '@xyflow/system';
-import { createSelector } from 'reselect';
 import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../hooks/useStore';
 import type { Node, ReactFlowState } from '../types';
+import { useCallback } from 'react';
 
-const visibleNodeIdsSelector = createSelector(
-  [
-    (s: ReactFlowState) => s.nodes,
-    (s: ReactFlowState) => s.width,
-    (s: ReactFlowState) => s.height,
-    (s: ReactFlowState) => s.transform,
-    (_s: ReactFlowState, onlyRenderVisibleNodes: boolean) => onlyRenderVisibleNodes,
-  ],
-  (nodes, width, height, transform, onlyRenderVisible) =>
-    onlyRenderVisible
-      ? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true).map((node) => node.id)
-      : nodes.map((node) => node.id),
-  {
-    memoizeOptions: {
-      resultEqualityCheck: shallow,
-    },
-  }
-);
+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());
+};
 
 function useVisibleNodeIds(onlyRenderVisible: boolean) {
-  const nodeIds = useStore((s: ReactFlowState) => visibleNodeIdsSelector(s, onlyRenderVisible));
+  const nodeIds = useStore(useCallback(selector(onlyRenderVisible), [onlyRenderVisible]), shallow);
 
   return nodeIds;
 }
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 29548666..b1960f64 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -1,5 +1,5 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { NodeBase, XYPosition } from '@xyflow/system';
+import type { NodeBase } from '@xyflow/system';
 
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
@@ -20,11 +20,10 @@ export type WrapNodeProps<NodeData = any> = Pick<
 > &
   Required<Pick<Node<NodeData>, 'selected' | 'type' | 'zIndex'>> & {
     isConnectable: boolean;
-    xPos: number;
-    yPos: number;
     xPosOrigin: number;
     yPosOrigin: number;
-    positionAbsolute: XYPosition;
+    positionAbsoluteX: number;
+    positionAbsoluteY: number;
     initialized: boolean;
     isSelectable: boolean;
     isDraggable: boolean;
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/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index 3839880c..74b294fe 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -56,7 +56,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;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e1fcd6e..b39d982e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -235,9 +235,6 @@ importers:
       react-dom:
         specifier: '>=17'
         version: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
-      reselect:
-        specifier: ^4.1.8
-        version: registry.npmjs.org/reselect@4.1.8
       zustand:
         specifier: ^4.4.0
         version: registry.npmjs.org/zustand@4.4.1(@types/react@18.2.24)(react@18.2.0)
@@ -10036,12 +10033,6 @@ packages:
     version: 1.0.0
     dev: true
 
-  registry.npmjs.org/reselect@4.1.8:
-    resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz}
-    name: reselect
-    version: 4.1.8
-    dev: false
-
   registry.npmjs.org/resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz}
     name: resolve-from

From c42b82159c1452e29d9f60fa976de0ea02349fe8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 15 Dec 2023 12:04:02 +0100
Subject: [PATCH 56/65] chore(svelte): use new node props

---
 .../src/routes/examples/overview/CustomNode.svelte       | 7 ++++---
 .../svelte/src/lib/components/nodes/DefaultNode.svelte   | 9 ++++-----
 .../svelte/src/lib/components/nodes/GroupNode.svelte     | 9 ++++-----
 .../svelte/src/lib/components/nodes/InputNode.svelte     | 9 ++++-----
 .../svelte/src/lib/components/nodes/OutputNode.svelte    | 6 ++++--
 5 files changed, 20 insertions(+), 20 deletions(-)

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/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>
 

From 8c705fbdbf73bf205a8b0e77a05b35eb9c7faee7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 15 Dec 2023 12:25:50 +0100
Subject: [PATCH 57/65] fix(examples): use computed attribute

---
 examples/react/src/examples/EasyConnect/utils.tsx  |  8 ++++++--
 examples/react/src/examples/FloatingEdges/utils.ts | 12 +++++++-----
 examples/react/src/examples/Hidden/index.tsx       |  6 ++++--
 3 files changed, 17 insertions(+), 9 deletions(-)

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/FloatingEdges/utils.ts b/examples/react/src/examples/FloatingEdges/utils.ts
index 0a2d6c03..46e9682c 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;
@@ -60,6 +60,8 @@ export function getEdgeParams(source: Node, target: Node) {
   const sourceIntersectionPoint = getNodeIntersection(source, target);
   const targetIntersectionPoint = getNodeIntersection(target, source);
 
+  console.log(sourceIntersectionPoint, targetIntersectionPoint);
+
   const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
   const targetPos = getEdgePosition(target, targetIntersectionPoint);
 
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 = () => {

From 9b128bf184f868f2e89e88c7af8135b51f529def Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 15 Dec 2023 12:31:05 +0100
Subject: [PATCH 58/65] chore(examples): cleanup

---
 examples/react/src/examples/FloatingEdges/utils.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/react/src/examples/FloatingEdges/utils.ts b/examples/react/src/examples/FloatingEdges/utils.ts
index 46e9682c..c8a6e1c1 100644
--- a/examples/react/src/examples/FloatingEdges/utils.ts
+++ b/examples/react/src/examples/FloatingEdges/utils.ts
@@ -60,8 +60,6 @@ export function getEdgeParams(source: Node, target: Node) {
   const sourceIntersectionPoint = getNodeIntersection(source, target);
   const targetIntersectionPoint = getNodeIntersection(target, source);
 
-  console.log(sourceIntersectionPoint, targetIntersectionPoint);
-
   const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
   const targetPos = getEdgePosition(target, targetIntersectionPoint);
 

From b861b47783997122557b4fe4333e4d804ea9dad4 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 15 Dec 2023 15:21:15 +0100
Subject: [PATCH 59/65] refactor(nodes): use NodeWrapper instead of wrapped
 node types

---
 .../src/components/Nodes/NodeWrapper.tsx      | 263 ++++++++++++++++++
 packages/react/src/components/Nodes/utils.ts  |  17 +-
 .../react/src/components/Nodes/wrapNode.tsx   | 232 ---------------
 .../NodeRenderer/NodeComponentWrapper.tsx     | 104 -------
 .../src/container/NodeRenderer/index.tsx      |  23 +-
 .../react/src/container/NodeRenderer/utils.ts |  30 +-
 packages/react/src/types/nodes.ts             |  54 ++--
 7 files changed, 314 insertions(+), 409 deletions(-)
 create mode 100644 packages/react/src/components/Nodes/NodeWrapper.tsx
 delete mode 100644 packages/react/src/components/Nodes/wrapNode.tsx
 delete mode 100644 packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx

diff --git a/packages/react/src/components/Nodes/NodeWrapper.tsx b/packages/react/src/components/Nodes/NodeWrapper.tsx
new file mode 100644
index 00000000..22dddceb
--- /dev/null
+++ b/packages/react/src/components/Nodes/NodeWrapper.tsx
@@ -0,0 +1,263 @@
+import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent, ComponentType } from 'react';
+import cc from 'classcat';
+import {
+  clampPosition,
+  elementSelectionKeys,
+  errorMessages,
+  getPositionWithOrigin,
+  internalsSymbol,
+  isInputDOMNode,
+  NodeProps,
+  type XYPosition,
+} 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 './utils';
+import type { NodeWrapperProps } 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 },
+};
+
+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 = useStore((s) => s.nodeLookup.get(id)!);
+
+  let nodeType = node.type || 'default';
+
+  if (!nodeTypes[nodeType]) {
+    onError?.('003', errorMessages['error003'](nodeType));
+    nodeType = '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 NodeComponent = (nodeTypes[nodeType] || nodeTypes.default) as ComponentType<NodeProps>;
+  const width = node.width ?? undefined;
+  const height = node.height ?? undefined;
+  const computedWidth = node.computed?.width;
+  const computedHeight = node.computed?.height;
+  const positionAbsolute = nodeExtent
+    ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
+    : node.computed?.positionAbsolute || { x: 0, y: 0 };
+  const positionAbsoluteOrigin = getPositionWithOrigin({
+    x: positionAbsolute.x,
+    y: positionAbsolute.y,
+    width: computedWidth ?? width ?? 0,
+    height: computedHeight ?? height ?? 0,
+    origin: node.origin || nodeOrigin,
+  });
+  const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
+  const zIndex = node[internalsSymbol]?.z ?? 0;
+  const isParent = !!node[internalsSymbol]?.isParent;
+  const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
+
+  const onMouseEnterHandler =
+    onMouseEnter === undefined ? undefined : (event: MouseEvent) => onMouseEnter(event, { ...node });
+  const onMouseMoveHandler =
+    onMouseMove === undefined ? undefined : (event: MouseEvent) => onMouseMove(event, { ...node });
+  const onMouseLeaveHandler =
+    onMouseLeave === undefined ? undefined : (event: MouseEvent) => onMouseLeave(event, { ...node });
+  const onContextMenuHandler =
+    onContextMenu === undefined ? undefined : (event: MouseEvent) => onContextMenu(event, { ...node });
+  const onDoubleClickHandler =
+    onDoubleClick === undefined ? undefined : (event: MouseEvent) => onDoubleClick(event, { ...node });
+
+  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: ${~~positionAbsolute.x}, y: ${~~positionAbsolute.y}`,
+      });
+
+      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={positionAbsolute.x}
+          positionAbsoluteY={positionAbsolute.y}
+          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/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 330364c6..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,
-    xPosOrigin,
-    yPosOrigin,
-    positionAbsoluteX,
-    positionAbsoluteY,
-    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,
-    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: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
-        });
-
-        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}
-            positionAbsoluteX={positionAbsoluteX}
-            positionAbsoluteY={positionAbsoluteY}
-            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/container/NodeRenderer/NodeComponentWrapper.tsx b/packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx
deleted file mode 100644
index f833ff08..00000000
--- a/packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { memo, type ComponentType } from 'react';
-import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWithOrigin } from '@xyflow/system';
-
-import { useStore } from '../../hooks/useStore';
-import type { ReactFlowState, WrapNodeProps } from '../../types';
-import { NodeRendererProps } from '.';
-
-function NodeComponentWrapper(props: {
-  id: string;
-  nodeExtent: NodeRendererProps['nodeExtent'];
-  nodeTypes: NodeRendererProps['nodeTypes'];
-  nodeOrigin: NodeRendererProps['nodeOrigin'];
-  onNodeClick: NodeRendererProps['onNodeClick'];
-  onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
-  onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
-  onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
-  onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
-  onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
-  noDragClassName: NodeRendererProps['noDragClassName'];
-  noPanClassName: NodeRendererProps['noPanClassName'];
-  rfId: NodeRendererProps['rfId'];
-  disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
-  resizeObserver: ResizeObserver | null;
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  nodesFocusable: boolean;
-  elementsSelectable: boolean;
-  onError: ReactFlowState['onError'];
-}) {
-  const node = useStore((s) => s.nodeLookup.get(props.id));
-  if (!node) return null;
-
-  let nodeType = node.type || 'default';
-
-  if (!props.nodeTypes[nodeType]) {
-    props.onError?.('003', errorMessages['error003'](nodeType));
-
-    nodeType = 'default';
-  }
-
-  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
-  const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
-  const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
-  const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
-  const isFocusable = !!(node.focusable || (props.nodesFocusable && typeof node.focusable === 'undefined'));
-
-  const absolutePositionClamped = props.nodeExtent
-    ? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
-    : node.computed?.positionAbsolute || { x: 0, y: 0 };
-
-  const posOrigin = getPositionWithOrigin({
-    x: absolutePositionClamped.x,
-    y: absolutePositionClamped.y,
-    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);
-
-  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}
-      xPosOrigin={posOrigin.x}
-      yPosOrigin={posOrigin.y}
-      positionAbsoluteX={absolutePositionClamped.x}
-      positionAbsoluteY={absolutePositionClamped.y}
-      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={props.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}
-    />
-  );
-}
-
-NodeComponentWrapper.displayName = 'NodeComponentWrapper';
-
-export default memo(NodeComponentWrapper);
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 662541a4..8a7b71f4 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -5,9 +5,9 @@ import useVisibleNodesIds from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
-import type { NodeTypesWrapped, ReactFlowState } from '../../types';
-import NodeComponentWrapper from './NodeComponentWrapper';
+import type { ReactFlowState } from '../../types';
 import useResizeObserver from './useResizeObserver';
+import NodeWrapper from '../../components/Nodes/NodeWrapper';
 
 export type NodeRendererProps = Pick<
   GraphViewProps,
@@ -24,9 +24,8 @@ export type NodeRendererProps = Pick<
   | 'disableKeyboardA11y'
   | 'nodeOrigin'
   | 'nodeExtent'
-> & {
-  nodeTypes: NodeTypesWrapped;
-};
+  | 'nodeTypes'
+>;
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
@@ -68,18 +67,18 @@ const NodeRenderer = (props: NodeRendererProps) => {
           //   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.
-          <NodeComponentWrapper
+          <NodeWrapper
             key={nodeId}
             id={nodeId}
             nodeTypes={props.nodeTypes}
             nodeExtent={props.nodeExtent}
             nodeOrigin={props.nodeOrigin}
-            onNodeClick={props.onNodeClick}
-            onNodeMouseEnter={props.onNodeMouseEnter}
-            onNodeMouseMove={props.onNodeMouseMove}
-            onNodeMouseLeave={props.onNodeMouseLeave}
-            onNodeContextMenu={props.onNodeContextMenu}
-            onNodeDoubleClick={props.onNodeDoubleClick}
+            onClick={props.onNodeClick}
+            onMouseEnter={props.onNodeMouseEnter}
+            onMouseMove={props.onNodeMouseMove}
+            onMouseLeave={props.onNodeMouseLeave}
+            onContextMenu={props.onNodeContextMenu}
+            onDoubleClick={props.onNodeDoubleClick}
             noDragClassName={props.noDragClassName}
             noPanClassName={props.noPanClassName}
             rfId={props.rfId}
diff --git a/packages/react/src/container/NodeRenderer/utils.ts b/packages/react/src/container/NodeRenderer/utils.ts
index 758d3908..e39190d1 100644
--- a/packages/react/src/container/NodeRenderer/utils.ts
+++ b/packages/react/src/container/NodeRenderer/utils.ts
@@ -5,30 +5,28 @@ 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';
+import type { NodeTypes } from '../../types';
 
-export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
+export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes;
 
-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>),
+export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes {
+  const builtinTypes: NodeTypes = {
+    input: (nodeTypes.input || InputNode) as ComponentType<NodeProps>,
+    default: (nodeTypes.default || DefaultNode) as ComponentType<NodeProps>,
+    output: (nodeTypes.output || OutputNode) as ComponentType<NodeProps>,
+    group: (nodeTypes.group || GroupNode) as ComponentType<NodeProps>,
   };
 
-  const wrappedTypes = {} as NodeTypesWrapped;
-  const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
+  const userProvidedTypes = Object.keys(nodeTypes)
     .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
-    .reduce((res, key) => {
-      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
+    .reduce<NodeTypes>((res, key) => {
+      res[key] = (nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>;
 
       return res;
-    }, wrappedTypes);
+    }, {});
 
   return {
-    ...standardTypes,
-    ...specialTypes,
+    ...builtinTypes,
+    ...userProvidedTypes,
   };
 }
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index b1960f64..03f02930 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -1,5 +1,6 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { NodeBase } from '@xyflow/system';
+import type { CoordinateExtent, NodeBase, NodeOrigin, OnError } from '@xyflow/system';
+import { NodeTypes } from './general';
 
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
@@ -14,32 +15,25 @@ 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;
-    xPosOrigin: number;
-    yPosOrigin: number;
-    positionAbsoluteX: number;
-    positionAbsoluteY: number;
-    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;
+};

From 20c779f57d45e91d3d9f15d0506b91c039da7524 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 16 Dec 2023 09:55:30 +0100
Subject: [PATCH 60/65] refactor(node-wrapper): add separate folder

---
 .../components/{Nodes => NodeWrapper}/NodeWrapper.tsx | 11 ++---------
 packages/react/src/components/NodeWrapper/utils.tsx   |  8 ++++++++
 .../react/src/components/NodesSelection/index.tsx     |  2 +-
 packages/react/src/container/NodeRenderer/index.tsx   |  2 +-
 4 files changed, 12 insertions(+), 11 deletions(-)
 rename packages/react/src/components/{Nodes => NodeWrapper}/NodeWrapper.tsx (97%)
 create mode 100644 packages/react/src/components/NodeWrapper/utils.tsx

diff --git a/packages/react/src/components/Nodes/NodeWrapper.tsx b/packages/react/src/components/NodeWrapper/NodeWrapper.tsx
similarity index 97%
rename from packages/react/src/components/Nodes/NodeWrapper.tsx
rename to packages/react/src/components/NodeWrapper/NodeWrapper.tsx
index 22dddceb..479e0afe 100644
--- a/packages/react/src/components/Nodes/NodeWrapper.tsx
+++ b/packages/react/src/components/NodeWrapper/NodeWrapper.tsx
@@ -8,7 +8,6 @@ import {
   internalsSymbol,
   isInputDOMNode,
   NodeProps,
-  type XYPosition,
 } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -16,15 +15,9 @@ 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 './utils';
+import { handleNodeClick } from '../Nodes/utils';
 import type { NodeWrapperProps } 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 },
-};
+import { arrowKeyDiffs } from './utils';
 
 const NodeWrapper = ({
   id,
diff --git a/packages/react/src/components/NodeWrapper/utils.tsx b/packages/react/src/components/NodeWrapper/utils.tsx
new file mode 100644
index 00000000..77842972
--- /dev/null
+++ b/packages/react/src/components/NodeWrapper/utils.tsx
@@ -0,0 +1,8 @@
+import { XYPosition } from '@xyflow/system';
+
+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 },
+};
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/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 8a7b71f4..83ff6b54 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -7,7 +7,7 @@ import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import type { ReactFlowState } from '../../types';
 import useResizeObserver from './useResizeObserver';
-import NodeWrapper from '../../components/Nodes/NodeWrapper';
+import NodeWrapper from '../../components/NodeWrapper/NodeWrapper';
 
 export type NodeRendererProps = Pick<
   GraphViewProps,

From 07c40182551feb38951f0fa61df0ac307296dad8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 16 Dec 2023 10:51:24 +0100
Subject: [PATCH 61/65] refactor(edges): use EdgeWrapper instead of wrapEdge

---
 .../src/components/EdgeWrapper/index.tsx      | 307 ++++++++++++++++++
 .../react/src/components/EdgeWrapper/utils.ts |  17 +
 .../react/src/components/Edges/wrapEdge.tsx   | 290 -----------------
 .../{NodeWrapper.tsx => index.tsx}            |  10 +-
 .../src/components/NodeWrapper/utils.tsx      |  16 +-
 .../src/container/EdgeRenderer/index.tsx      |  18 +-
 .../react/src/container/EdgeRenderer/utils.ts |  37 ---
 .../react/src/container/GraphView/index.tsx   |  16 +-
 .../GraphView/useNodeOrEdgeTypesWarning.ts    |  27 ++
 .../react/src/container/GraphView/utils.ts    |  31 --
 .../src/container/NodeRenderer/index.tsx      |   2 +-
 .../react/src/container/NodeRenderer/utils.ts |  32 --
 .../react/src/container/ReactFlow/index.tsx   |  33 +-
 packages/react/src/types/edges.ts             |   9 +-
 packages/react/src/types/general.ts           |   6 +-
 packages/react/src/types/nodes.ts             |   2 +-
 16 files changed, 397 insertions(+), 456 deletions(-)
 create mode 100644 packages/react/src/components/EdgeWrapper/index.tsx
 create mode 100644 packages/react/src/components/EdgeWrapper/utils.ts
 delete mode 100644 packages/react/src/components/Edges/wrapEdge.tsx
 rename packages/react/src/components/NodeWrapper/{NodeWrapper.tsx => index.tsx} (97%)
 delete mode 100644 packages/react/src/container/EdgeRenderer/utils.ts
 create mode 100644 packages/react/src/container/GraphView/useNodeOrEdgeTypesWarning.ts
 delete mode 100644 packages/react/src/container/GraphView/utils.ts
 delete mode 100644 packages/react/src/container/NodeRenderer/utils.ts

diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx
new file mode 100644
index 00000000..929c87e0
--- /dev/null
+++ b/packages/react/src/components/EdgeWrapper/index.tsx
@@ -0,0 +1,307 @@
+import { memo, useState, useMemo, useRef, type KeyboardEvent, useCallback } from 'react';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import {
+  getMarkerId,
+  elementSelectionKeys,
+  XYHandle,
+  type Connection,
+  getEdgePosition,
+  errorMessages,
+} from '@xyflow/system';
+
+import { useStoreApi, useStore } from '../../hooks/useStore';
+import { ARIA_EDGE_DESC_KEY } from '../A11yDescriptions';
+import { EdgeAnchor } from '../Edges/EdgeAnchor';
+import { getMouseHandler } from '../Edges/utils';
+import type { EdgeWrapperProps } from '../../types';
+import { builtinEdgeTypes } from './utils';
+
+function 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,
+  edgeTypes,
+  onError,
+}: EdgeWrapperProps): JSX.Element | null {
+  let edgeType = type || 'default';
+  let EdgeComponent = edgeTypes?.[edgeType] || builtinEdgeTypes[edgeType];
+
+  if (EdgeComponent === undefined) {
+    onError?.('011', errorMessages['error011'](edgeType));
+    edgeType = 'default';
+    EdgeComponent = builtinEdgeTypes.default;
+  }
+
+  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';
+
+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..294592c9
--- /dev/null
+++ b/packages/react/src/components/EdgeWrapper/utils.ts
@@ -0,0 +1,17 @@
+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>,
+};
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/NodeWrapper.tsx b/packages/react/src/components/NodeWrapper/index.tsx
similarity index 97%
rename from packages/react/src/components/NodeWrapper/NodeWrapper.tsx
rename to packages/react/src/components/NodeWrapper/index.tsx
index 479e0afe..de7ce1d0 100644
--- a/packages/react/src/components/NodeWrapper/NodeWrapper.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent, ComponentType } from 'react';
+import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import {
   clampPosition,
@@ -7,7 +7,6 @@ import {
   getPositionWithOrigin,
   internalsSymbol,
   isInputDOMNode,
-  NodeProps,
 } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -17,7 +16,7 @@ import useDrag from '../../hooks/useDrag';
 import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
 import { handleNodeClick } from '../Nodes/utils';
 import type { NodeWrapperProps } from '../../types';
-import { arrowKeyDiffs } from './utils';
+import { arrowKeyDiffs, builtinNodeTypes } from './utils';
 
 const NodeWrapper = ({
   id,
@@ -44,10 +43,12 @@ const NodeWrapper = ({
   const node = useStore((s) => s.nodeLookup.get(id)!);
 
   let nodeType = node.type || 'default';
+  let NodeComponent = nodeTypes?.[nodeType] || builtinNodeTypes[nodeType];
 
-  if (!nodeTypes[nodeType]) {
+  if (NodeComponent === undefined) {
     onError?.('003', errorMessages['error003'](nodeType));
     nodeType = 'default';
+    NodeComponent = builtinNodeTypes.default;
   }
 
   const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
@@ -105,7 +106,6 @@ const NodeWrapper = ({
     return null;
   }
 
-  const NodeComponent = (nodeTypes[nodeType] || nodeTypes.default) as ComponentType<NodeProps>;
   const width = node.width ?? undefined;
   const height = node.height ?? undefined;
   const computedWidth = node.computed?.width;
diff --git a/packages/react/src/components/NodeWrapper/utils.tsx b/packages/react/src/components/NodeWrapper/utils.tsx
index 77842972..6ae5f994 100644
--- a/packages/react/src/components/NodeWrapper/utils.tsx
+++ b/packages/react/src/components/NodeWrapper/utils.tsx
@@ -1,4 +1,11 @@
-import { XYPosition } from '@xyflow/system';
+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 },
@@ -6,3 +13,10 @@ export const arrowKeyDiffs: Record<string, XYPosition> = {
   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/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx
index 24825fe6..99b53d34 100644
--- a/packages/react/src/container/EdgeRenderer/index.tsx
+++ b/packages/react/src/container/EdgeRenderer/index.tsx
@@ -1,13 +1,13 @@
 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 MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
-import type { EdgeTypesWrapped, ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
+import EdgeWrapper from '../../components/EdgeWrapper';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,
@@ -27,8 +27,8 @@ type EdgeRendererProps = Pick<
   | 'elevateEdgesOnSelect'
   | 'rfId'
   | 'disableKeyboardA11y'
+  | 'edgeTypes'
 > & {
-  edgeTypes: EdgeTypesWrapped;
   elevateEdgesOnSelect: boolean;
   children: ReactNode;
 };
@@ -74,14 +74,6 @@ const EdgeRenderer = ({
           {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
           <>
             {edges.map((edge) => {
-              let edgeType = edge.type || 'default';
-
-              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' &&
@@ -92,7 +84,7 @@ const EdgeRenderer = ({
               );
 
               return (
-                <EdgeComponent
+                <EdgeWrapper
                   key={edge.id}
                   id={edge.id}
                   className={cc([edge.className, noPanClassName])}
@@ -131,6 +123,8 @@ const EdgeRenderer = ({
                   isUpdatable={isUpdatable}
                   pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
                   interactionWidth={edge.interactionWidth}
+                  onError={onError}
+                  edgeTypes={edgeTypes}
                 />
               );
             })}
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..116b4d26 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'
 > &
   Required<
     Pick<
       ReactFlowProps,
-      | 'nodeTypes'
-      | 'edgeTypes'
       | 'selectionKeyCode'
       | 'deleteKeyCode'
       | 'multiSelectionKeyCode'
@@ -108,8 +104,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 +150,7 @@ const GraphView = ({
     >
       <ViewportWrapper>
         <EdgeRenderer
-          edgeTypes={edgeTypesWrapped}
+          edgeTypes={edgeTypes}
           onEdgeClick={onEdgeClick}
           onEdgeDoubleClick={onEdgeDoubleClick}
           onEdgeUpdate={onEdgeUpdate}
@@ -182,7 +178,7 @@ const GraphView = ({
         <div className="react-flow__edgelabel-renderer" />
 
         <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 83ff6b54..fa877984 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -7,7 +7,7 @@ import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import type { ReactFlowState } from '../../types';
 import useResizeObserver from './useResizeObserver';
-import NodeWrapper from '../../components/NodeWrapper/NodeWrapper';
+import NodeWrapper from '../../components/NodeWrapper';
 
 export type NodeRendererProps = Pick<
   GraphViewProps,
diff --git a/packages/react/src/container/NodeRenderer/utils.ts b/packages/react/src/container/NodeRenderer/utils.ts
deleted file mode 100644
index e39190d1..00000000
--- a/packages/react/src/container/NodeRenderer/utils.ts
+++ /dev/null
@@ -1,32 +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 type { NodeTypes } from '../../types';
-
-export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes;
-
-export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes {
-  const builtinTypes: NodeTypes = {
-    input: (nodeTypes.input || InputNode) as ComponentType<NodeProps>,
-    default: (nodeTypes.default || DefaultNode) as ComponentType<NodeProps>,
-    output: (nodeTypes.output || OutputNode) as ComponentType<NodeProps>,
-    group: (nodeTypes.group || GroupNode) as ComponentType<NodeProps>,
-  };
-
-  const userProvidedTypes = Object.keys(nodeTypes)
-    .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
-    .reduce<NodeTypes>((res, key) => {
-      res[key] = (nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>;
-
-      return res;
-    }, {});
-
-  return {
-    ...builtinTypes,
-    ...userProvidedTypes,
-  };
-}
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index a7360a46..3adacfeb 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -12,40 +12,15 @@ 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];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -66,8 +41,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       defaultNodes,
       defaultEdges,
       className,
-      nodeTypes = defaultNodeTypes,
-      edgeTypes = defaultEdgeTypes,
+      nodeTypes,
+      edgeTypes,
       onNodeClick,
       onEdgeClick,
       onInit,
diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts
index 287c277d..5af61d1e 100644
--- a/packages/react/src/types/edges.ts
+++ b/packages/react/src/types/edges.ts
@@ -15,9 +15,10 @@ import type {
   EdgePosition,
   Optional,
   StepPathOptions,
+  OnError,
 } from '@xyflow/system';
 
-import { Node } from '.';
+import { EdgeTypes, Node } from '.';
 
 export type EdgeLabelOptions = {
   label?: string | ReactNode;
@@ -57,7 +58,7 @@ export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeT
 
 export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
 
-export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
+export type EdgeWrapperProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
   onClick?: EdgeMouseHandler;
   onEdgeDoubleClick?: EdgeMouseHandler;
   sourceHandleId?: string | null;
@@ -75,6 +76,8 @@ export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandl
   isUpdatable: EdgeUpdatable;
   isSelectable: boolean;
   pathOptions?: BezierPathOptions | SmoothStepPathOptions;
+  edgeTypes?: EdgeTypes;
+  onError?: OnError;
 };
 
 export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
@@ -90,7 +93,7 @@ export type EdgeProps<T = any> = Pick<
   Edge<T>,
   'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target'
 > &
-  Pick<WrapEdgeProps, 'sourceHandleId' | 'targetHandleId' | 'interactionWidth'> &
+  Pick<EdgeWrapperProps, 'sourceHandleId' | 'targetHandleId' | 'interactionWidth'> &
   EdgePosition &
   EdgeLabelOptions & {
     markerStart?: string;
diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts
index b2e7098a..96859d96 100644
--- a/packages/react/src/types/general.ts
+++ b/packages/react/src/types/general.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ComponentType, MemoExoticComponent } from 'react';
+import type { ComponentType } from 'react';
 import {
   FitViewParamsBase,
   FitViewOptionsBase,
@@ -14,7 +14,7 @@ import {
   XYPosition,
 } from '@xyflow/system';
 
-import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.';
+import type { NodeChange, EdgeChange, Node, Edge, EdgeProps, ReactFlowInstance } from '.';
 
 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[];
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 03f02930..00c87704 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -32,7 +32,7 @@ export type NodeWrapperProps = {
   noPanClassName: string;
   rfId: string;
   disableKeyboardA11y: boolean;
-  nodeTypes: NodeTypes;
+  nodeTypes?: NodeTypes;
   nodeExtent?: CoordinateExtent;
   nodeOrigin: NodeOrigin;
   onError?: OnError;

From 3b69a11aac91c2c054e7afb18ca500a46ad844c8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 16 Dec 2023 11:19:39 +0100
Subject: [PATCH 62/65] chore(examples): cleanup

---
 examples/react/src/App/routes.ts              |   6 -
 .../react/src/examples/Layouting/index.tsx    |  18 +-
 .../react/src/examples/NestedNodes/index.tsx  | 187 ------------------
 .../react/src/examples/Subflow/DebugNode.tsx  |   4 +-
 .../react/src/examples/UpdateNode/index.tsx   |  20 +-
 .../UseHandleConnections/MultiHandleNode.tsx  |   4 +-
 .../UseHandleConnections/SingleHandleNode.tsx |   4 +-
 .../NodeToolbar/NodeToolbar.tsx               |  20 +-
 8 files changed, 41 insertions(+), 222 deletions(-)
 delete mode 100644 examples/react/src/examples/NestedNodes/index.tsx

diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts
index 4bab00f5..d38f5449 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';
@@ -185,11 +184,6 @@ const routes: IRoute[] = [
     path: 'multiflows',
     component: MultiFlows,
   },
-  {
-    name: 'Nested Nodes',
-    path: 'nested-nodes',
-    component: NestedNodes,
-  },
   {
     name: 'Node Type Change',
     path: 'nodetype-change',
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/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/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/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/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) => ({

From 72034157f17623e0c50f1d09f32a245e9bd2e11c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 16 Dec 2023 13:05:31 +0100
Subject: [PATCH 63/65] refactor(svelte): nodeDragThreshold=1 as default

---
 packages/svelte/src/lib/store/initial-store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index dbbb17fc..e9d595ec 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -93,7 +93,7 @@ export const getInitialStore = ({
     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),

From 494eb09a21933fd490c138250b238a61a405e4be Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sun, 17 Dec 2023 09:37:47 +0100
Subject: [PATCH 64/65] chore(examples): cleanup astro

---
 .../src/components/ReactFlowExample/CustomNode.tsx            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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>

From 82709a4bc1d559743da0cb71f1ba451d8e52119f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sun, 17 Dec 2023 10:46:07 +0100
Subject: [PATCH 65/65] refactor(storeUpdater): only use one useEffect,cleanup
 based on #3677

---
 .../src/components/StoreUpdater/index.tsx     | 276 ++++++------------
 1 file changed, 94 insertions(+), 182 deletions(-)

diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx
index 65f1bb3c..f49dec43 100644
--- a/packages/react/src/components/StoreUpdater/index.tsx
+++ b/packages/react/src/components/StoreUpdater/index.tsx
@@ -3,67 +3,72 @@
  * 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 { 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';
 
-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',
+  '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',
+] 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 +81,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 +95,44 @@ 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>>({});
 
-  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;
 };