From b7b5032c026614d2f04899b9d07e9f6d8dfa996e Mon Sep 17 00:00:00 2001
From: CRIMX <straybugs@gmail.com>
Date: Tue, 10 Dec 2024 12:56:30 +0800
Subject: [PATCH 01/10] fix(system): safe check all event target

---
 .../react/src/examples/AddNodeOnEdgeDrop/index.tsx   |  2 +-
 .../src/routes/examples/add-node-on-drop/Flow.svelte |  2 +-
 packages/react/src/components/Handle/index.tsx       |  2 +-
 packages/react/src/container/Pane/index.tsx          |  4 ++--
 packages/svelte/src/lib/container/Pane/Pane.svelte   |  4 ++--
 packages/system/src/utils/dom.ts                     | 12 +++++++-----
 packages/system/src/xydrag/XYDrag.ts                 |  2 +-
 packages/system/src/xydrag/utils.ts                  |  8 ++++----
 packages/system/src/xyhandle/XYHandle.ts             |  2 +-
 9 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx b/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
index cdd55a4b..7c0345d2 100644
--- a/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
+++ b/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
@@ -47,7 +47,7 @@ const AddNodeOnEdgeDrop = () => {
     (event) => {
       if (!connectingNodeId.current) return;
 
-      const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('react-flow__pane');
+      const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('react-flow__pane');
 
       if (targetIsPane && 'clientX' in event && 'clientY' in event) {
         // we need to remove the wrapper bounds, in order to get the correct position
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 e767e4ac..0fb89484 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
@@ -33,7 +33,7 @@
 		if (!connectingNodeId) return;
 
 		// See of connection landed inside the flow pane
-		const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('svelte-flow__pane');
+		const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('svelte-flow__pane');
 		if (targetIsPane && 'clientX' in event && 'clientY' in event) {
 			const id = getId();
 			const position = {
diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index 3ea98530..cc86e189 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/packages/react/src/components/Handle/index.tsx
@@ -175,7 +175,7 @@ function HandleComponent(
       return;
     }
 
-    const doc = getHostForElement(event.target as HTMLElement);
+    const doc = getHostForElement(event.target);
     const isValidConnectionHandler = isValidConnection || isValidConnectionStore;
     const { connection, isValid } = XYHandle.isValid(event.nativeEvent, {
       handle: {
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 48c23eba..bdecb84d 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -131,7 +131,7 @@ export function Pane({
       return;
     }
 
-    (event.target as Element)?.setPointerCapture?.(event.pointerId);
+    (event.target as Partial<Element> | null)?.setPointerCapture?.(event.pointerId);
 
     selectionStarted.current = true;
     selectionInProgress.current = false;
@@ -229,7 +229,7 @@ export function Pane({
       return;
     }
 
-    (event.target as Element)?.releasePointerCapture?.(event.pointerId);
+    (event.target as Partial<Element>)?.releasePointerCapture?.(event.pointerId);
     const { userSelectionRect } = store.getState();
     // We only want to trigger click functions when in selection mode if
     // the user did not move the mouse.
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 1d797af9..aaa36560 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -103,7 +103,7 @@
       return;
     }
 
-    (event.target as Element)?.setPointerCapture?.(event.pointerId);
+    (event.target as Partial<Element> | null)?.setPointerCapture?.(event.pointerId);
 
     const { x, y } = getEventPosition(event, containerBounds);
 
@@ -175,7 +175,7 @@
       return;
     }
 
-    (event.target as Element)?.releasePointerCapture?.(event.pointerId);
+    (event.target as Partial<Element> | null)?.releasePointerCapture?.(event.pointerId);
 
     // We only want to trigger click functions when in selection mode if
     // the user did not move the mouse.
diff --git a/packages/system/src/utils/dom.ts b/packages/system/src/utils/dom.ts
index b3648ede..12188e9b 100644
--- a/packages/system/src/utils/dom.ts
+++ b/packages/system/src/utils/dom.ts
@@ -32,18 +32,20 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   height: node.offsetHeight,
 });
 
-export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
-  (element.getRootNode?.() as Document | ShadowRoot) || window?.document;
+export const getHostForElement = (element: HTMLElement | EventTarget | null): Document | ShadowRoot =>
+  ((element as Partial<HTMLElement> | null)?.getRootNode?.() as Document | ShadowRoot) || window?.document;
 
 const inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];
 
 export function isInputDOMNode(event: KeyboardEvent): boolean {
   // using composed path for handling shadow dom
-  const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement;
-  const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute?.('contenteditable');
+  const target = (event.composedPath?.()?.[0] || event.target) as Element | null;
+  if (target?.nodeType !== 1 /* Node.ELEMENT_NODE */) return false;
+
+  const isInput = inputTags.includes(target.nodeName) || target.hasAttribute('contenteditable');
 
   // when an input field is focused we don't want to trigger deletion or movement of nodes
-  return isInput || !!target?.closest('.nokey');
+  return isInput || !!target.closest('.nokey');
 }
 
 export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event;
diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts
index adf72e5c..eb2ea80a 100644
--- a/packages/system/src/xydrag/XYDrag.ts
+++ b/packages/system/src/xydrag/XYDrag.ts
@@ -364,7 +364,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         }
       })
       .filter((event: MouseEvent) => {
-        const target = event.target as HTMLDivElement;
+        const target = event.target;
         const isDraggable =
           !event.button &&
           (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, domNode)) &&
diff --git a/packages/system/src/xydrag/utils.ts b/packages/system/src/xydrag/utils.ts
index 0fc048e8..5c0eda0a 100644
--- a/packages/system/src/xydrag/utils.ts
+++ b/packages/system/src/xydrag/utils.ts
@@ -18,13 +18,13 @@ export function isParentSelected<NodeType extends NodeBase>(node: NodeType, node
   return isParentSelected(parentNode, nodeLookup);
 }
 
-export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
-  let current = target;
+export function hasSelector(target: Element | EventTarget | null, selector: string, domNode: Element): boolean {
+  let current = target as Partial<Element> | null | undefined;
 
   do {
-    if (current?.matches(selector)) return true;
+    if (current?.matches?.(selector)) return true;
     if (current === domNode) return false;
-    current = current.parentElement as Element;
+    current = current?.parentElement;
   } while (current);
 
   return false;
diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts
index b15befc9..5f4fc610 100644
--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/packages/system/src/xyhandle/XYHandle.ts
@@ -48,7 +48,7 @@ function onPointerDown(
   }: OnPointerDownParams
 ) {
   // when xyflow is used inside a shadow root we can't use document
-  const doc = getHostForElement(event.target as HTMLElement);
+  const doc = getHostForElement(event.target);
   let autoPanId = 0;
   let closestHandle: Handle | null;
 

From e2d849dca63aee5952f676aef1c675c6232bb69a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 10 Jan 2025 10:26:55 +0100
Subject: [PATCH 02/10] chore(changeset): add

---
 .changeset/little-toys-brake.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/little-toys-brake.md

diff --git a/.changeset/little-toys-brake.md b/.changeset/little-toys-brake.md
new file mode 100644
index 00000000..a91bce8e
--- /dev/null
+++ b/.changeset/little-toys-brake.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Add type check for all event targets

From eb9844a79638aea6264fa2d4ae79b2a1dd310464 Mon Sep 17 00:00:00 2001
From: James Moynihan <65916939+jrmoynihan@users.noreply.github.com>
Date: Fri, 10 Jan 2025 23:02:45 -0500
Subject: [PATCH 03/10] expose props to consumers

I'm guessing the props accidentally had the export keywords removed.  This isn't caught by CI because the props are passed in by a spread parameter.
---
 .../src/lib/plugins/Controls/ControlButton.svelte    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
index f2c05810..1e648de8 100644
--- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
@@ -5,12 +5,12 @@
 
   type $$Props = ControlButtonProps;
 
-  let className: $$Props['class'] = undefined;
-  let bgColor: $$Props['bgColor'] = undefined;
-  let bgColorHover: $$Props['bgColorHover'] = undefined;
-  let color: $$Props['color'] = undefined;
-  let colorHover: $$Props['colorHover'] = undefined;
-  let borderColor: $$Props['borderColor'] = undefined;
+  export let className: $$Props['class'] = undefined;
+  export let bgColor: $$Props['bgColor'] = undefined;
+  export let bgColorHover: $$Props['bgColorHover'] = undefined;
+  export let color: $$Props['color'] = undefined;
+  export let colorHover: $$Props['colorHover'] = undefined;
+  export let borderColor: $$Props['borderColor'] = undefined;
 
   export { className as class };
 </script>

From 9d940300441b10f4d9eef4b07fac49a3e69d3503 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 14 Jan 2025 10:42:11 +0100
Subject: [PATCH 04/10] add changeset

---
 .changeset/afraid-trains-hunt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/afraid-trains-hunt.md

diff --git a/.changeset/afraid-trains-hunt.md b/.changeset/afraid-trains-hunt.md
new file mode 100644
index 00000000..354b130f
--- /dev/null
+++ b/.changeset/afraid-trains-hunt.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Expose props of Controls

From bf7ef89bdb42c62c2b0a05750468ad41227492f9 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 15 Jan 2025 14:46:17 +0100
Subject: [PATCH 05/10] fix(types): export ResizeControlVariant correctly
 closes #4946

---
 packages/react/src/index.ts      | 2 +-
 packages/svelte/src/lib/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4cbb393d..a6e3d6d2 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -85,7 +85,7 @@ export {
   type OnResizeEnd,
   type ControlPosition,
   type ControlLinePosition,
-  type ResizeControlVariant,
+  ResizeControlVariant,
   type ResizeParams,
   type ResizeParamsWithDirection,
   type ResizeDragEvent,
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index d224055e..3e96210b 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -105,7 +105,7 @@ export {
   type OnResizeEnd,
   type ControlPosition,
   type ControlLinePosition,
-  type ResizeControlVariant,
+  ResizeControlVariant,
   type ResizeParams,
   type ResizeParamsWithDirection,
   type ResizeDragEvent,

From 868aa3f3db8223ea1b04a68aa027ea99fd1e91c8 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 15 Jan 2025 14:50:21 +0100
Subject: [PATCH 06/10] chore(changeset): add

---
 .changeset/cold-wasps-enjoy.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/cold-wasps-enjoy.md

diff --git a/.changeset/cold-wasps-enjoy.md b/.changeset/cold-wasps-enjoy.md
new file mode 100644
index 00000000..0fab2fb5
--- /dev/null
+++ b/.changeset/cold-wasps-enjoy.md
@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+Export ResizeControlVariant correctly as a value.

From dcf61e6042dcd155357baf0452021610704486db Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:53:16 +0000
Subject: [PATCH 07/10] chore(packages): bump

---
 .changeset/afraid-trains-hunt.md  |  5 -----
 .changeset/cold-wasps-enjoy.md    |  6 ------
 .changeset/little-toys-brake.md   |  7 -------
 .changeset/silly-pots-yell.md     |  7 -------
 .changeset/twelve-bottles-turn.md |  6 ------
 packages/react/CHANGELOG.md       | 17 +++++++++++++++++
 packages/react/package.json       |  2 +-
 packages/svelte/CHANGELOG.md      | 15 +++++++++++++++
 packages/svelte/package.json      |  2 +-
 packages/system/CHANGELOG.md      | 10 ++++++++++
 packages/system/package.json      |  2 +-
 11 files changed, 45 insertions(+), 34 deletions(-)
 delete mode 100644 .changeset/afraid-trains-hunt.md
 delete mode 100644 .changeset/cold-wasps-enjoy.md
 delete mode 100644 .changeset/little-toys-brake.md
 delete mode 100644 .changeset/silly-pots-yell.md
 delete mode 100644 .changeset/twelve-bottles-turn.md

diff --git a/.changeset/afraid-trains-hunt.md b/.changeset/afraid-trains-hunt.md
deleted file mode 100644
index 354b130f..00000000
--- a/.changeset/afraid-trains-hunt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@xyflow/svelte': patch
----
-
-Expose props of Controls
diff --git a/.changeset/cold-wasps-enjoy.md b/.changeset/cold-wasps-enjoy.md
deleted file mode 100644
index 0fab2fb5..00000000
--- a/.changeset/cold-wasps-enjoy.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@xyflow/react': patch
-'@xyflow/svelte': patch
----
-
-Export ResizeControlVariant correctly as a value.
diff --git a/.changeset/little-toys-brake.md b/.changeset/little-toys-brake.md
deleted file mode 100644
index a91bce8e..00000000
--- a/.changeset/little-toys-brake.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@xyflow/react': patch
-'@xyflow/svelte': patch
-'@xyflow/system': patch
----
-
-Add type check for all event targets
diff --git a/.changeset/silly-pots-yell.md b/.changeset/silly-pots-yell.md
deleted file mode 100644
index 71848488..00000000
--- a/.changeset/silly-pots-yell.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@xyflow/react': minor
-'@xyflow/svelte': patch
-'@xyflow/system': patch
----
-
-Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
diff --git a/.changeset/twelve-bottles-turn.md b/.changeset/twelve-bottles-turn.md
deleted file mode 100644
index 89b28a52..00000000
--- a/.changeset/twelve-bottles-turn.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@xyflow/react': patch
-'@xyflow/system': patch
----
-
-Optimize selections and take into account if edges connected to selected nodes are actually selectable.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 259c08b7..4f942f45 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @xyflow/react
 
+## 12.4.0
+
+### Minor Changes
+
+- [#4725](https://github.com/xyflow/xyflow/pull/4725) [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9) Thanks [@peterkogo](https://github.com/peterkogo)! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
+
+### Patch Changes
+
+- [#4947](https://github.com/xyflow/xyflow/pull/4947) [`868aa3f3`](https://github.com/xyflow/xyflow/commit/868aa3f3db8223ea1b04a68aa027ea99fd1e91c8) Thanks [@moklick](https://github.com/moklick)! - Export ResizeControlVariant correctly as a value.
+
+- [#4880](https://github.com/xyflow/xyflow/pull/4880) [`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a) Thanks [@crimx](https://github.com/crimx)! - Add type check for all event targets
+
+- [#4929](https://github.com/xyflow/xyflow/pull/4929) [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d) Thanks [@peterkogo](https://github.com/peterkogo)! - Optimize selections and take into account if edges connected to selected nodes are actually selectable.
+
+- Updated dependencies [[`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a), [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9), [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d)]:
+  - @xyflow/system@0.0.48
+
 ## 12.3.6
 
 ### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 42d5c134..3272304f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.3.6",
+  "version": "12.4.0",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7758855e..b08fa705 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @xyflow/svelte
 
+## 0.1.27
+
+### Patch Changes
+
+- [#4937](https://github.com/xyflow/xyflow/pull/4937) [`9d940300`](https://github.com/xyflow/xyflow/commit/9d940300441b10f4d9eef4b07fac49a3e69d3503) Thanks [@jrmoynihan](https://github.com/jrmoynihan)! - Expose props of Controls
+
+- [#4947](https://github.com/xyflow/xyflow/pull/4947) [`868aa3f3`](https://github.com/xyflow/xyflow/commit/868aa3f3db8223ea1b04a68aa027ea99fd1e91c8) Thanks [@moklick](https://github.com/moklick)! - Export ResizeControlVariant correctly as a value.
+
+- [#4880](https://github.com/xyflow/xyflow/pull/4880) [`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a) Thanks [@crimx](https://github.com/crimx)! - Add type check for all event targets
+
+- [#4725](https://github.com/xyflow/xyflow/pull/4725) [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9) Thanks [@peterkogo](https://github.com/peterkogo)! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
+
+- Updated dependencies [[`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a), [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9), [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d)]:
+  - @xyflow/system@0.0.48
+
 ## 0.1.26
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index df8eb4eb..525999f0 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "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/CHANGELOG.md b/packages/system/CHANGELOG.md
index 6fbc98f9..34bae53b 100644
--- a/packages/system/CHANGELOG.md
+++ b/packages/system/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @xyflow/system
 
+## 0.0.48
+
+### Patch Changes
+
+- [#4880](https://github.com/xyflow/xyflow/pull/4880) [`e2d849dc`](https://github.com/xyflow/xyflow/commit/e2d849dca63aee5952f676aef1c675c6232bb69a) Thanks [@crimx](https://github.com/crimx)! - Add type check for all event targets
+
+- [#4725](https://github.com/xyflow/xyflow/pull/4725) [`e10f53cf`](https://github.com/xyflow/xyflow/commit/e10f53cf898a56f954783d6efcf6977a0d88f4a9) Thanks [@peterkogo](https://github.com/peterkogo)! - Add useNodeConnections hook to track all connections to a node. Can be filtered by handleType and handleId.
+
+- [#4929](https://github.com/xyflow/xyflow/pull/4929) [`4947f683`](https://github.com/xyflow/xyflow/commit/4947f683b7530f8e6684865ab53ea38633de0f4d) Thanks [@peterkogo](https://github.com/peterkogo)! - Optimize selections and take into account if edges connected to selected nodes are actually selectable.
+
 ## 0.0.47
 
 ### Patch Changes
diff --git a/packages/system/package.json b/packages/system/package.json
index 67a433b0..57dffdfa 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",

From d43a1716e5123beddbfd9e006e2ce07cbe5410bb Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 16 Jan 2025 10:36:13 +0100
Subject: [PATCH 08/10] fix connectionLookup keys, to prevent overlaps

---
 .../src/examples/UseNodeConnections/MultiHandleNode.tsx    | 7 ++++---
 examples/react/src/examples/UseNodeConnections/index.tsx   | 7 ++++---
 packages/system/src/utils/store.ts                         | 4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx
index 5d64f81d..3191221c 100644
--- a/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx
+++ b/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx
@@ -28,10 +28,11 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
 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} />
+      <CustomHandle nodeId={id} type="target" position={Position.Left} id="t1" style={{ top: 10 }} />
+      <CustomHandle nodeId={id} type="target" position={Position.Left} id="t2" style={{ top: 20 }} />
       <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 }} />
+      <CustomHandle nodeId={id} type="source" position={Position.Right} id="s1" style={{ top: 10 }} />
+      <CustomHandle nodeId={id} type="source" position={Position.Right} id="s2" style={{ top: 20 }} />
     </div>
   );
 };
diff --git a/examples/react/src/examples/UseNodeConnections/index.tsx b/examples/react/src/examples/UseNodeConnections/index.tsx
index c6aa4a68..6b41018e 100644
--- a/examples/react/src/examples/UseNodeConnections/index.tsx
+++ b/examples/react/src/examples/UseNodeConnections/index.tsx
@@ -69,17 +69,16 @@ const initEdges = [
     source: '1',
     target: '3',
   },
-
   {
     id: 'e4a-5',
     source: '4',
-    sourceHandle: 'a',
+    sourceHandle: 's1',
     target: '5',
   },
   {
     id: 'e4b-5',
     source: '4',
-    sourceHandle: 'b',
+    sourceHandle: 's2',
     target: '6',
   },
 ];
@@ -92,6 +91,8 @@ const CustomNodeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
 
+  console.log(edges);
+
   const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
 
   return (
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index bccb115d..7eb7ccdb 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -483,8 +483,8 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeL
     const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge;
 
     const connection = { edgeId: edge.id, source: sourceNode, target: targetNode, sourceHandle, targetHandle };
-    const sourceKey = `${sourceNode}-${sourceHandle}`;
-    const targetKey = `${targetNode}-${targetHandle}`;
+    const sourceKey = `${sourceNode}-${sourceHandle}--${targetNode}-${targetHandle}`;
+    const targetKey = `${targetNode}-${targetHandle}--${sourceNode}-${sourceHandle}`;
 
     addConnectionToLookup('source', connection, targetKey, connectionLookup, sourceNode, sourceHandle);
     addConnectionToLookup('target', connection, sourceKey, connectionLookup, targetNode, targetHandle);

From 592c7eaf9574fc69df3123837da95f85877b23e8 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 16 Jan 2025 10:37:23 +0100
Subject: [PATCH 09/10] chore(changeset) add

---
 .changeset/old-bikes-wave.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/old-bikes-wave.md

diff --git a/.changeset/old-bikes-wave.md b/.changeset/old-bikes-wave.md
new file mode 100644
index 00000000..7e802939
--- /dev/null
+++ b/.changeset/old-bikes-wave.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/system': patch
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+Fix useNodeConnection hook not returning all connected edges.

From 562c9586d3e4acd0f7768596f08be312e1b0779f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 16 Jan 2025 10:31:00 +0000
Subject: [PATCH 10/10] chore(packages): bump

---
 .changeset/old-bikes-wave.md | 7 -------
 packages/react/CHANGELOG.md  | 9 +++++++++
 packages/react/package.json  | 2 +-
 packages/svelte/CHANGELOG.md | 9 +++++++++
 packages/svelte/package.json | 2 +-
 packages/system/CHANGELOG.md | 6 ++++++
 packages/system/package.json | 2 +-
 7 files changed, 27 insertions(+), 10 deletions(-)
 delete mode 100644 .changeset/old-bikes-wave.md

diff --git a/.changeset/old-bikes-wave.md b/.changeset/old-bikes-wave.md
deleted file mode 100644
index 7e802939..00000000
--- a/.changeset/old-bikes-wave.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@xyflow/system': patch
-'@xyflow/react': patch
-'@xyflow/svelte': patch
----
-
-Fix useNodeConnection hook not returning all connected edges.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 4f942f45..abddf7b8 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @xyflow/react
 
+## 12.4.1
+
+### Patch Changes
+
+- [#4949](https://github.com/xyflow/xyflow/pull/4949) [`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix useNodeConnection hook not returning all connected edges.
+
+- Updated dependencies [[`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8)]:
+  - @xyflow/system@0.0.49
+
 ## 12.4.0
 
 ### Minor Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 3272304f..18f629bc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b08fa705..736fbc04 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @xyflow/svelte
 
+## 0.1.28
+
+### Patch Changes
+
+- [#4949](https://github.com/xyflow/xyflow/pull/4949) [`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix useNodeConnection hook not returning all connected edges.
+
+- Updated dependencies [[`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8)]:
+  - @xyflow/system@0.0.49
+
 ## 0.1.27
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 525999f0..20533a76 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.1.27",
+  "version": "0.1.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/CHANGELOG.md b/packages/system/CHANGELOG.md
index 34bae53b..faeb5e48 100644
--- a/packages/system/CHANGELOG.md
+++ b/packages/system/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xyflow/system
 
+## 0.0.49
+
+### Patch Changes
+
+- [#4949](https://github.com/xyflow/xyflow/pull/4949) [`592c7eaf`](https://github.com/xyflow/xyflow/commit/592c7eaf9574fc69df3123837da95f85877b23e8) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix useNodeConnection hook not returning all connected edges.
+
 ## 0.0.48
 
 ### Patch Changes
diff --git a/packages/system/package.json b/packages/system/package.json
index 57dffdfa..6169c271 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",