likec4 1.7.4 → 1.8.1

package/dist/__app__/src/chunks/{likec4-DA506XqP.js → likec4-Blyd4UZO.js}

@@ -4,6 +4,98 @@ import { createPortal } from "react-dom";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
 }
+var withSelector = { exports: {} }, withSelector_production_min = {}, shim = { exports: {} }, useSyncExternalStoreShim_production_min = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var e = React__default;
+function h$1(a, b) {
+  return a === b && (a !== 0 || 1 / a === 1 / b) || a !== a && b !== b;
+}
+var k = typeof Object.is == "function" ? Object.is : h$1, l = e.useState, m = e.useEffect, n$1 = e.useLayoutEffect, p$1 = e.useDebugValue;
+function q$1(a, b) {
+  var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
+  return n$1(function() {
+    c.value = d, c.getSnapshot = b, r$1(c) && g({ inst: c });
+  }, [a, d, b]), m(function() {
+    return r$1(c) && g({ inst: c }), a(function() {
+      r$1(c) && g({ inst: c });
+    });
+  }, [a]), p$1(d), d;
+}
+function r$1(a) {
+  var b = a.getSnapshot;
+  a = a.value;
+  try {
+    var d = b();
+    return !k(a, d);
+  } catch {
+    return !0;
+  }
+}
+function t$1(a, b) {
+  return b();
+}
+var u$1 = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? t$1 : q$1;
+useSyncExternalStoreShim_production_min.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : u$1;
+shim.exports;
+shim.exports = useSyncExternalStoreShim_production_min;
+var shimExports = shim.exports;
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var h = React__default, n = shimExports;
+function p(a, b) {
+  return a === b && (a !== 0 || 1 / a === 1 / b) || a !== a && b !== b;
+}
+var q = typeof Object.is == "function" ? Object.is : p, r = n.useSyncExternalStore, t = h.useRef, u = h.useEffect, v = h.useMemo, w = h.useDebugValue;
+withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e2, l2, g) {
+  var c = t(null);
+  if (c.current === null) {
+    var f = { hasValue: !1, value: null };
+    c.current = f;
+  } else f = c.current;
+  c = v(function() {
+    function a2(a3) {
+      if (!c2) {
+        if (c2 = !0, d2 = a3, a3 = l2(a3), g !== void 0 && f.hasValue) {
+          var b2 = f.value;
+          if (g(b2, a3)) return k2 = b2;
+        }
+        return k2 = a3;
+      }
+      if (b2 = k2, q(d2, a3)) return b2;
+      var e3 = l2(a3);
+      return g !== void 0 && g(b2, e3) ? b2 : (d2 = a3, k2 = e3);
+    }
+    var c2 = !1, d2, k2, m2 = e2 === void 0 ? null : e2;
+    return [function() {
+      return a2(b());
+    }, m2 === null ? void 0 : function() {
+      return a2(m2());
+    }];
+  }, [b, e2, l2, g]);
+  var d = r(a, c[0], c[1]);
+  return u(function() {
+    f.hasValue = !0, f.value = d;
+  }, [d]), w(d), d;
+};
+withSelector.exports;
+withSelector.exports = withSelector_production_min;
+var withSelectorExports = withSelector.exports;
+const useSyncExternalStoreExports = /* @__PURE__ */ getDefaultExportFromCjs(withSelectorExports);
 function cc(names) {
   if (typeof names == "string" || typeof names == "number") return "" + names;
   let out = "";
@@ -2155,7 +2247,7 @@ const errorMessages = {
   error006: () => "Can't create edge. An edge needs a source and a target.",
   error007: (id2) => `The old edge with id=${id2} does not exist.`,
   error009: (type) => `Marker type "${type}" doesn't exist.`,
-  error008: (handleType, { id: id2, sourceHandle, targetHandle }) => `Couldn't create edge for ${handleType} handle id: "${sourceHandle && targetHandle}", edge id: ${id2}.`,
+  error008: (handleType, { id: id2, sourceHandle, targetHandle }) => `Couldn't create edge for ${handleType} handle id: "${handleType === "source" ? sourceHandle : targetHandle}", edge id: ${id2}.`,
   error010: () => "Handle: No node id found. Make sure to only use a Handle inside a custom Node.",
   error011: (edgeType) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
   error012: (id2) => `Node with id "${id2}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
@@ -2231,12 +2323,12 @@ const isEdgeBase = (element) => "id" in element && "source" in element && "targe
     width: rect.width / tScale,
     height: rect.height / tScale
   }, visibleNodes = [];
-  for (const [, node] of nodes) {
-    const { measured, selectable = !0, hidden = !1 } = node, width = measured.width ?? node.width ?? node.initialWidth ?? null, height = measured.height ?? node.height ?? node.initialHeight ?? null;
+  for (const node of nodes.values()) {
+    const { measured, selectable = !0, hidden = !1 } = node;
     if (excludeNonSelectableNodes && !selectable || hidden)
       continue;
-    const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node)), notInitialized = width === null || height === null, partiallyVisible = partially && overlappingArea > 0, area = (width ?? 0) * (height ?? 0);
-    (notInitialized || partiallyVisible || overlappingArea >= area || node.dragging) && visibleNodes.push(node);
+    const width = measured.width ?? node.width ?? node.initialWidth ?? null, height = measured.height ?? node.height ?? node.initialHeight ?? null, overlappingArea = getOverlappingArea(paneRect, nodeToRect(node)), area = (width ?? 0) * (height ?? 0), partiallyVisible = partially && overlappingArea > 0;
+    (!node.internals.handleBounds || partiallyVisible || overlappingArea >= area || node.dragging) && visibleNodes.push(node);
   }
   return visibleNodes;
 }, getConnectedEdges = (nodes, edges) => {
@@ -2603,7 +2695,7 @@ function getEdgePosition(params) {
   const { sourceNode, targetNode } = params;
   if (!isNodeInitialized(sourceNode) || !isNodeInitialized(targetNode))
     return null;
-  const sourceHandleBounds = sourceNode.internals.handleBounds || toHandleBounds(sourceNode.handles), targetHandleBounds = targetNode.internals.handleBounds || toHandleBounds(targetNode.handles), sourceHandle = getHandle(sourceHandleBounds?.source ?? [], params.sourceHandle), targetHandle = getHandle(
+  const sourceHandleBounds = sourceNode.internals.handleBounds || toHandleBounds(sourceNode.handles), targetHandleBounds = targetNode.internals.handleBounds || toHandleBounds(targetNode.handles), sourceHandle = getHandle$1(sourceHandleBounds?.source ?? [], params.sourceHandle), targetHandle = getHandle$1(
     // when connection type is loose we can define all handles as sources and connect source -> source
     params.connectionMode === ConnectionMode.Strict ? targetHandleBounds?.target ?? [] : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
     params.targetHandle
@@ -2650,7 +2742,7 @@ function getHandlePosition(node, handle, fallbackPosition = Position.Left, cente
       return { x, y: y + height / 2 };
   }
 }
-function getHandle(bounds, handleId) {
+function getHandle$1(bounds, handleId) {
   return bounds && (handleId ? bounds.find((d) => d.id === handleId) : bounds[0]) || null;
 }
 function getMarkerId(marker, id2) {
@@ -3008,46 +3100,44 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     destroy
   };
 }
-function getHandles(node, handleBounds, type, currentHandle) {
-  let excludedHandle = null;
-  return [(handleBounds[type] || []).reduce((res, handle) => {
-    if (node.id === currentHandle.nodeId && type === currentHandle.handleType && handle.id === currentHandle.handleId)
-      excludedHandle = handle;
-    else {
-      const handleXY = getHandlePosition(node, handle, handle.position, !0);
-      res.push({ ...handle, ...handleXY });
-    }
-    return res;
-  }, []), excludedHandle];
+function getNodesWithinDistance(position, nodeLookup, distance2) {
+  const nodes = [], rect = {
+    x: position.x - distance2,
+    y: position.y - distance2,
+    width: distance2 * 2,
+    height: distance2 * 2
+  };
+  for (const node of nodeLookup.values())
+    getOverlappingArea(rect, nodeToRect(node)) > 0 && nodes.push(node);
+  return nodes;
 }
-function getClosestHandle(pos, connectionRadius, handleLookup) {
+const ADDITIONAL_DISTANCE = 250;
+function getClosestHandle(position, connectionRadius, nodeLookup, fromHandle) {
   let closestHandles = [], minDistance = 1 / 0;
-  for (const handle of handleLookup.values()) {
-    const distance2 = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
-    distance2 <= connectionRadius && (distance2 < minDistance ? closestHandles = [handle] : distance2 === minDistance && closestHandles.push(handle), minDistance = distance2);
-  }
-  return closestHandles.length ? closestHandles.length === 1 ? closestHandles[0] : (
-    // if multiple handles are layouted on top of each other we take the one with type = target because it's more likely that the user wants to connect to this one
-    closestHandles.find((handle) => handle.type === "target") || closestHandles[0]
-  ) : null;
-}
-function getHandleLookup({ nodeLookup, nodeId, handleId, handleType }) {
-  const connectionHandles = /* @__PURE__ */ new Map(), currentHandle = { nodeId, handleId, handleType };
-  let matchingHandle = null;
-  for (const node of nodeLookup.values())
-    if (node.internals.handleBounds) {
-      const [sourceHandles, excludedSource] = getHandles(node, node.internals.handleBounds, "source", currentHandle), [targetHandles, excludedTarget] = getHandles(node, node.internals.handleBounds, "target", currentHandle);
-      matchingHandle = matchingHandle || (excludedSource ?? excludedTarget), [...sourceHandles, ...targetHandles].forEach((handle) => connectionHandles.set(`${handle.nodeId}-${handle.type}-${handle.id}`, handle));
-    }
-  if (!matchingHandle) {
-    const node = nodeLookup.get(nodeId);
-    if (node?.internals.handleBounds) {
-      currentHandle.handleType = handleType === "source" ? "target" : "source";
-      const [, excluded] = getHandles(node, node.internals.handleBounds, currentHandle.handleType, currentHandle);
-      matchingHandle = excluded;
+  const closeNodes = getNodesWithinDistance(position, nodeLookup, connectionRadius + ADDITIONAL_DISTANCE);
+  for (const node of closeNodes) {
+    const allHandles = [...node.internals.handleBounds?.source ?? [], ...node.internals.handleBounds?.target ?? []];
+    for (const handle of allHandles) {
+      if (fromHandle.nodeId === handle.nodeId && fromHandle.type === handle.type && fromHandle.id === handle.id)
+        continue;
+      const { x, y } = getHandlePosition(node, handle, handle.position, !0), distance2 = Math.sqrt(Math.pow(x - position.x, 2) + Math.pow(y - position.y, 2));
+      distance2 > connectionRadius || (distance2 < minDistance ? (closestHandles = [{ ...handle, x, y }], minDistance = distance2) : distance2 === minDistance && closestHandles.push({ ...handle, x, y }));
     }
   }
-  return [connectionHandles, matchingHandle];
+  if (!closestHandles.length)
+    return null;
+  if (closestHandles.length > 1) {
+    const oppositeHandleType = fromHandle.type === "source" ? "target" : "source";
+    return closestHandles.find((handle) => handle.type === oppositeHandleType) ?? closestHandles[0];
+  }
+  return closestHandles[0];
+}
+function getHandle(nodeId, handleType, handleId, nodeLookup, withAbsolutePosition = !1) {
+  const node = nodeLookup.get(nodeId);
+  if (!node)
+    return null;
+  const handles = node.internals.handleBounds?.[handleType], handle = (handleId ? handles?.find((h2) => h2.id === handleId) : handles?.[0]) ?? null;
+  return handle && withAbsolutePosition ? { ...handle, ...getHandlePosition(node, handle, handle.position, !0) } : handle;
 }
 function getHandleType(edgeUpdaterType, handleDomNode) {
   return edgeUpdaterType || (handleDomNode?.classList.contains("target") ? "target" : handleDomNode?.classList.contains("source") ? "source" : null);
@@ -3063,13 +3153,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   const { x, y } = getEventPosition(event), clickedHandle = doc?.elementFromPoint(x, y), handleType = getHandleType(edgeUpdaterType, clickedHandle), containerBounds = domNode?.getBoundingClientRect();
   if (!containerBounds || !handleType)
     return;
+  const fromHandleInternal = getHandle(nodeId, handleType, handleId, nodeLookup);
+  if (!fromHandleInternal)
+    return;
   let position = getEventPosition(event, containerBounds), autoPanStarted = !1, connection = null, isValid = !1, handleDomNode = null;
-  const [handleLookup, fromHandleInternal] = getHandleLookup({
-    nodeLookup,
-    nodeId,
-    handleId,
-    handleType
-  });
   function autoPan() {
     if (!autoPanOnConnect || !containerBounds)
       return;
@@ -3102,7 +3189,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       return;
     }
     const transform2 = getTransform();
-    position = getEventPosition(event2, containerBounds), closestHandle = getClosestHandle(pointToRendererPoint(position, transform2, !1, [1, 1]), connectionRadius, handleLookup), autoPanStarted || (autoPan(), autoPanStarted = !0);
+    position = getEventPosition(event2, containerBounds), closestHandle = getClosestHandle(pointToRendererPoint(position, transform2, !1, [1, 1]), connectionRadius, nodeLookup, fromHandle), autoPanStarted || (autoPan(), autoPanStarted = !0);
     const result = isValidHandle(event2, {
       handle: closestHandle,
       connectionMode,
@@ -3113,7 +3200,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       doc,
       lib,
       flowId,
-      handleLookup
+      nodeLookup
     });
     handleDomNode = result.handleDomNode, connection = result.connection, isValid = isConnectionValid(!!closestHandle, result.isValid);
     const newConnection2 = {
@@ -3125,14 +3212,19 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
       toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null
     };
-    isValid && closestHandle && previousConnection.toHandle && newConnection2.toHandle && previousConnection.toHandle.type === newConnection2.toHandle.type && previousConnection.toHandle.nodeId === newConnection2.toHandle.nodeId && previousConnection.toHandle.id === newConnection2.toHandle.id || (updateConnection(newConnection2), previousConnection = newConnection2);
+    isValid && closestHandle && previousConnection.toHandle && newConnection2.toHandle && previousConnection.toHandle.type === newConnection2.toHandle.type && previousConnection.toHandle.nodeId === newConnection2.toHandle.nodeId && previousConnection.toHandle.id === newConnection2.toHandle.id && previousConnection.to.x === newConnection2.to.x && previousConnection.to.y === newConnection2.to.y || (updateConnection(newConnection2), previousConnection = newConnection2);
   }
   function onPointerUp(event2) {
-    (closestHandle || handleDomNode) && connection && isValid && onConnect?.(connection), onConnectEnd?.(event2), edgeUpdaterType && onReconnectEnd?.(event2), cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, handleDomNode = null, doc.removeEventListener("mousemove", onPointerMove), doc.removeEventListener("mouseup", onPointerUp), doc.removeEventListener("touchmove", onPointerMove), doc.removeEventListener("touchend", onPointerUp);
+    (closestHandle || handleDomNode) && connection && isValid && onConnect?.(connection);
+    const { inProgress, ...connectionState } = previousConnection, finalConnectionState = {
+      ...connectionState,
+      toPosition: previousConnection.toHandle ? previousConnection.toPosition : null
+    };
+    onConnectEnd?.(event2, finalConnectionState), edgeUpdaterType && onReconnectEnd?.(event2, finalConnectionState), cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, handleDomNode = null, doc.removeEventListener("mousemove", onPointerMove), doc.removeEventListener("mouseup", onPointerUp), doc.removeEventListener("touchmove", onPointerMove), doc.removeEventListener("touchend", onPointerUp);
   }
   doc.addEventListener("mousemove", onPointerMove), doc.addEventListener("mouseup", onPointerUp), doc.addEventListener("touchmove", onPointerMove), doc.addEventListener("touchend", onPointerUp);
 }
-function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, handleLookup }) {
+function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, nodeLookup }) {
   const isTarget = fromType === "target", handleDomNode = handle ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`) : null, { x, y } = getEventPosition(event), handleBelow = doc.elementFromPoint(x, y), handleToCheck = handleBelow?.classList.contains(`${lib}-flow__handle`) ? handleBelow : handleDomNode, result = {
     handleDomNode: handleToCheck,
     isValid: !1,
@@ -3141,7 +3233,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
   };
   if (handleToCheck) {
     const handleType = getHandleType(void 0, handleToCheck), handleNodeId = handleToCheck.getAttribute("data-nodeid"), handleId = handleToCheck.getAttribute("data-handleid"), connectable = handleToCheck.classList.contains("connectable"), connectableEnd = handleToCheck.classList.contains("connectableend");
-    if (!handleNodeId)
+    if (!handleNodeId || !handleType)
       return result;
     const connection = {
       source: isTarget ? handleNodeId : fromNodeId,
@@ -3151,11 +3243,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
     };
     result.connection = connection;
     const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
-    result.isValid = isValid && isValidConnection(connection);
-    const toHandle = handleLookup?.get(`${handleNodeId}-${handleType}-${handleId}`);
-    toHandle && (result.toHandle = {
-      ...toHandle
-    });
+    result.isValid = isValid && isValidConnection(connection), result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, !1);
   }
   return result;
 }
@@ -3609,98 +3697,6 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     destroy
   };
 }
-var withSelector = { exports: {} }, withSelector_production_min = {}, shim = { exports: {} }, useSyncExternalStoreShim_production_min = {};
-/**
- * @license React
- * use-sync-external-store-shim.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var e = React__default;
-function h$1(a, b) {
-  return a === b && (a !== 0 || 1 / a === 1 / b) || a !== a && b !== b;
-}
-var k = typeof Object.is == "function" ? Object.is : h$1, l = e.useState, m = e.useEffect, n$1 = e.useLayoutEffect, p$1 = e.useDebugValue;
-function q$1(a, b) {
-  var d = b(), f = l({ inst: { value: d, getSnapshot: b } }), c = f[0].inst, g = f[1];
-  return n$1(function() {
-    c.value = d, c.getSnapshot = b, r$1(c) && g({ inst: c });
-  }, [a, d, b]), m(function() {
-    return r$1(c) && g({ inst: c }), a(function() {
-      r$1(c) && g({ inst: c });
-    });
-  }, [a]), p$1(d), d;
-}
-function r$1(a) {
-  var b = a.getSnapshot;
-  a = a.value;
-  try {
-    var d = b();
-    return !k(a, d);
-  } catch {
-    return !0;
-  }
-}
-function t$1(a, b) {
-  return b();
-}
-var u$1 = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? t$1 : q$1;
-useSyncExternalStoreShim_production_min.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : u$1;
-shim.exports;
-shim.exports = useSyncExternalStoreShim_production_min;
-var shimExports = shim.exports;
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var h = React__default, n = shimExports;
-function p(a, b) {
-  return a === b && (a !== 0 || 1 / a === 1 / b) || a !== a && b !== b;
-}
-var q = typeof Object.is == "function" ? Object.is : p, r = n.useSyncExternalStore, t = h.useRef, u = h.useEffect, v = h.useMemo, w = h.useDebugValue;
-withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e2, l2, g) {
-  var c = t(null);
-  if (c.current === null) {
-    var f = { hasValue: !1, value: null };
-    c.current = f;
-  } else f = c.current;
-  c = v(function() {
-    function a2(a3) {
-      if (!c2) {
-        if (c2 = !0, d2 = a3, a3 = l2(a3), g !== void 0 && f.hasValue) {
-          var b2 = f.value;
-          if (g(b2, a3)) return k2 = b2;
-        }
-        return k2 = a3;
-      }
-      if (b2 = k2, q(d2, a3)) return b2;
-      var e3 = l2(a3);
-      return g !== void 0 && g(b2, e3) ? b2 : (d2 = a3, k2 = e3);
-    }
-    var c2 = !1, d2, k2, m2 = e2 === void 0 ? null : e2;
-    return [function() {
-      return a2(b());
-    }, m2 === null ? void 0 : function() {
-      return a2(m2());
-    }];
-  }, [b, e2, l2, g]);
-  var d = r(a, c[0], c[1]);
-  return u(function() {
-    f.hasValue = !0, f.value = d;
-  }, [d]), w(d), d;
-};
-withSelector.exports;
-withSelector.exports = withSelector_production_min;
-var withSelectorExports = withSelector.exports;
-const useSyncExternalStoreExports = /* @__PURE__ */ getDefaultExportFromCjs(withSelectorExports);
 var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
 const createStoreImpl = (createState) => {
   let state;
@@ -3785,23 +3781,23 @@ const style = { display: "none" }, ariaLiveStyle = {
   overflow: "hidden",
   clip: "rect(0px, 0px, 0px, 0px)",
   clipPath: "inset(100%)"
-}, ARIA_NODE_DESC_KEY = "react-flow__node-desc", ARIA_EDGE_DESC_KEY = "react-flow__edge-desc", ARIA_LIVE_MESSAGE = "react-flow__aria-live", selector$p = (s) => s.ariaLiveMessage;
+}, ARIA_NODE_DESC_KEY = "react-flow__node-desc", ARIA_EDGE_DESC_KEY = "react-flow__edge-desc", ARIA_LIVE_MESSAGE = "react-flow__aria-live", selector$o = (s) => s.ariaLiveMessage;
 function AriaLiveMessage({ rfId }) {
-  const ariaLiveMessage = useStore(selector$p);
+  const ariaLiveMessage = useStore(selector$o);
   return jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage });
 }
 function A11yDescriptions({ rfId, disableKeyboardA11y }) {
   return jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && "You can then use the arrow keys to move the node around.", " Press delete to remove it and escape to cancel.", " "] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId })] });
 }
-const selector$o = (s) => s.userSelectionActive ? "none" : "all";
+const selector$n = (s) => s.userSelectionActive ? "none" : "all";
 function Panel({ position = "top-left", children: children2, className, style: style2, ...rest }) {
-  const pointerEvents = useStore(selector$o), positionClasses = `${position}`.split("-");
+  const pointerEvents = useStore(selector$n), positionClasses = `${position}`.split("-");
   return jsx("div", { className: cc(["react-flow__panel", className, ...positionClasses]), style: { ...style2, pointerEvents }, ...rest, children: children2 });
 }
 function Attribution({ proOptions, position = "bottom-right" }) {
   return proOptions?.hideAttribution ? null : jsx(Panel, { position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) });
 }
-const selector$n = (s) => {
+const selector$m = (s) => {
   const selectedNodes = [], selectedEdges = [];
   for (const [, node] of s.nodeLookup)
     node.selected && selectedNodes.push(node.internals.userNode);
@@ -3813,7 +3809,7 @@ function areEqual(a, b) {
   return shallow$1(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && shallow$1(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId));
 }
 function SelectionListenerInner({ onSelectionChange }) {
-  const store = useStoreApi(), { selectedNodes, selectedEdges } = useStore(selector$n, areEqual);
+  const store = useStoreApi(), { selectedNodes, selectedEdges } = useStore(selector$m, areEqual);
   return useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
     onSelectionChange?.(params), store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
@@ -3880,7 +3876,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "debug",
   "autoPanSpeed",
   "paneClickDistance"
-], fieldsToTrack = [...reactFlowFieldsToTrack, "rfId"], selector$m = (s) => ({
+], fieldsToTrack = [...reactFlowFieldsToTrack, "rfId"], selector$l = (s) => ({
   setNodes: s.setNodes,
   setEdges: s.setEdges,
   setMinZoom: s.setMinZoom,
@@ -3904,7 +3900,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   paneClickDistance: 0
 };
 function StoreUpdater(props) {
-  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore(selector$m, shallow$1), store = useStoreApi();
+  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore(selector$l, shallow$1), store = useStoreApi();
   useEffect(() => (setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges), () => {
     previousFields.current = initPrevValues, reset();
   }), []);
@@ -4188,9 +4184,9 @@ function useBatchContext() {
     throw new Error("useBatchContext must be used within a BatchProvider");
   return batchContext;
 }
-const selector$l = (s) => !!s.panZoom;
+const selector$k = (s) => !!s.panZoom;
 function useReactFlow() {
-  const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore(selector$l), generalHelper = useMemo(() => {
+  const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore(selector$k), generalHelper = useMemo(() => {
     const getInternalNode = (id2) => store.getState().nodeLookup.get(id2), setNodes = (payload) => {
       batchContext.nodeQueue.push(payload);
     }, setEdges = (payload) => {
@@ -4345,12 +4341,12 @@ const containerStyle = {
   height: "100%",
   top: 0,
   left: 0
-}, selector$k = (s) => ({
+}, selector$j = (s) => ({
   userSelectionActive: s.userSelectionActive,
   lib: s.lib
 });
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = !0, children: children2, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
-  const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib } = useStore(selector$k, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
+  const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib } = useStore(selector$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
   return useResizeHandler(zoomPane), useEffect(() => {
     if (zoomPane.current) {
       panZoom.current = XYPanZoom({
@@ -4420,12 +4416,12 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
     lib
   ]), jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children2 });
 }
-const selector$j = (s) => ({
+const selector$i = (s) => ({
   userSelectionActive: s.userSelectionActive,
   userSelectionRect: s.userSelectionRect
 });
 function UserSelection() {
-  const { userSelectionActive, userSelectionRect } = useStore(selector$j, shallow$1);
+  const { userSelectionActive, userSelectionRect } = useStore(selector$i, shallow$1);
   return userSelectionActive && userSelectionRect ? jsx("div", { className: "react-flow__selection react-flow__container", style: {
     width: userSelectionRect.width,
     height: userSelectionRect.height,
@@ -4434,13 +4430,13 @@ function UserSelection() {
 }
 const wrapHandler = (handler, containerRef) => (event) => {
   event.target === containerRef.current && handler?.(event);
-}, selector$i = (s) => ({
+}, selector$h = (s) => ({
   userSelectionActive: s.userSelectionActive,
   elementsSelectable: s.elementsSelectable,
   dragging: s.paneDragging
 });
 function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
-  const container = useRef(null), store = useStoreApi(), prevSelectedNodesCount = useRef(0), prevSelectedEdgesCount = useRef(0), containerBounds = useRef(), edgeIdLookup = useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore(selector$i, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), selectionInProgress = useRef(!1), selectionStarted = useRef(!1), resetUserSelection = () => {
+  const container = useRef(null), store = useStoreApi(), prevSelectedNodesCount = useRef(0), prevSelectedEdgesCount = useRef(0), containerBounds = useRef(), edgeIdLookup = useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore(selector$h, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), selectionInProgress = useRef(!1), selectionStarted = useRef(!1), resetUserSelection = () => {
     store.setState({ userSelectionActive: !1, userSelectionRect: null }), prevSelectedNodesCount.current = 0, prevSelectedEdgesCount.current = 0;
   }, onClick = (event) => {
     if (selectionInProgress.current) {
@@ -4513,8 +4509,8 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     event.target?.releasePointerCapture?.(event.pointerId);
     const { userSelectionRect } = store.getState();
     !userSelectionActive && userSelectionRect && event.target === container.current && onClick?.(event), prevSelectedNodesCount.current > 0 && store.setState({ nodesSelectionActive: !0 }), resetUserSelection(), onSelectionEnd?.(event), (selectionKeyPressed || selectionOnDrag) && (selectionInProgress.current = !1), selectionStarted.current = !1;
-  };
-  return jsxs("div", { className: cc(["react-flow__pane", { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown2 : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
+  }, draggable = panOnDrag === !0 || Array.isArray(panOnDrag) && panOnDrag.includes(0);
+  return jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown2 : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
 }
 function handleNodeClick({ id: id2, store, unselect = !1, nodeRef }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState(), node = nodeLookup.get(id2);
@@ -4587,7 +4583,7 @@ function useMoveSelectedNodes() {
 }
 const NodeIdContext = createContext(null), Provider = NodeIdContext.Provider;
 NodeIdContext.Consumer;
-const useNodeId = () => useContext(NodeIdContext), selector$h = (s) => ({
+const useNodeId = () => useContext(NodeIdContext), selector$g = (s) => ({
   connectOnClick: s.connectOnClick,
   noPanClassName: s.noPanClassName,
   rfId: s.rfId
@@ -4603,7 +4599,7 @@ const useNodeId = () => useContext(NodeIdContext), selector$h = (s) => ({
   };
 };
 function HandleComponent({ type = "source", position = Position.Top, isValidConnection, isConnectable = !0, isConnectableStart = !0, isConnectableEnd = !0, id: id2, onConnect, children: children2, className, onMouseDown, onTouchStart, ...rest }, ref) {
-  const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore(selector$h, shallow$1), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow$1);
+  const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore(selector$g, shallow$1), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow$1);
   nodeId || store.getState().onError?.("010", errorMessages.error010());
   const onConnectExtended = (params) => {
     const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState(), edgeParams = {
@@ -4646,7 +4642,7 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
     }
     isMouseTriggered ? onMouseDown?.(event) : onTouchStart?.(event);
   }, onClick = (event) => {
-    const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId } = store.getState();
+    const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, nodeLookup, connection: connectionState } = store.getState();
     if (!nodeId || !connectionClickStartHandle && !isConnectableStart)
       return;
     if (!connectionClickStartHandle) {
@@ -4666,9 +4662,12 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
       isValidConnection: isValidConnectionHandler,
       flowId,
       doc,
-      lib
+      lib,
+      nodeLookup
     });
-    isValid && connection && onConnectExtended(connection), onClickConnectEnd?.(event), store.setState({ connectionClickStartHandle: null });
+    isValid && connection && onConnectExtended(connection);
+    const connectionClone = structuredClone(connectionState);
+    delete connectionClone.inProgress, connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null, onClickConnectEnd?.(event, connectionClone), store.setState({ connectionClickStartHandle: null });
   };
   return jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
     "react-flow__handle",
@@ -4725,7 +4724,7 @@ function getNodeInlineStyleDimensions(node) {
     height: node.height ?? node.style?.height
   };
 }
-const selector$g = (s) => {
+const selector$f = (s) => {
   const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
     filter: (node) => !!node.selected
   });
@@ -4737,7 +4736,7 @@ const selector$g = (s) => {
   };
 };
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
-  const store = useStoreApi(), { width, height, transformString, userSelectionActive } = useStore(selector$g, shallow$1), moveSelectedNodes = useMoveSelectedNodes(), nodeRef = useRef(null);
+  const store = useStoreApi(), { width, height, transformString, userSelectionActive } = useStore(selector$f, shallow$1), moveSelectedNodes = useMoveSelectedNodes(), nodeRef = useRef(null);
   if (useEffect(() => {
     disableKeyboardA11y || nodeRef.current?.focus({
       preventScroll: !0
@@ -4762,19 +4761,19 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     height
   } }) });
 }
-const win = typeof window < "u" ? window : void 0, selector$f = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
+const win = typeof window < "u" ? window : void 0, selector$e = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
 function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
-  const { nodesSelectionActive, userSelectionActive } = useStore(selector$f), selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }), panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, _selectionOnDrag = selectionOnDrag && panOnDrag !== !0, isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
+  const { nodesSelectionActive, userSelectionActive } = useStore(selector$e), selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }), panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, _selectionOnDrag = selectionOnDrag && panOnDrag !== !0, isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
   return useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }), jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
-const FlowRenderer = memo(FlowRendererComponent), selector$e = (onlyRenderVisible) => (s) => onlyRenderVisible ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, !0).map((node) => node.id) : Array.from(s.nodeLookup.keys());
+const FlowRenderer = memo(FlowRendererComponent), selector$d = (onlyRenderVisible) => (s) => onlyRenderVisible ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, !0).map((node) => node.id) : Array.from(s.nodeLookup.keys());
 function useVisibleNodeIds(onlyRenderVisible) {
-  return useStore(useCallback(selector$e(onlyRenderVisible), [onlyRenderVisible]), shallow$1);
+  return useStore(useCallback(selector$d(onlyRenderVisible), [onlyRenderVisible]), shallow$1);
 }
-const selector$d = (s) => s.updateNodeInternals;
+const selector$c = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-  const updateNodeInternals2 = useStore(selector$d), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
+  const updateNodeInternals2 = useStore(selector$c), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
     const updates = /* @__PURE__ */ new Map();
     entries.forEach((entry) => {
       const id2 = entry.target.getAttribute("data-id");
@@ -4872,7 +4871,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     ...inlineDimensions
   }, "data-id": id2, "data-testid": `rf__node-${id2}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: isFocusable ? "button" : void 0, "aria-describedby": disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id2, children: jsx(NodeComponent, { id: id2, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, selectable: isSelectable, draggable: isDraggable, deletable: node.deletable ?? !0, isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging, dragHandle: node.dragHandle, zIndex: internals.z, parentId: node.parentId, ...nodeDimensions }) }) });
 }
-const selector$c = (s) => ({
+const selector$b = (s) => ({
   nodesDraggable: s.nodesDraggable,
   nodesConnectable: s.nodesConnectable,
   nodesFocusable: s.nodesFocusable,
@@ -4880,7 +4879,7 @@ const selector$c = (s) => ({
   onError: s.onError
 });
 function NodeRendererComponent(props) {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$c, shallow$1), nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements), resizeObserver = useResizeObserver();
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$b, shallow$1), nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements), resizeObserver = useResizeObserver();
   return jsx("div", { className: "react-flow__nodes", style: containerStyle, children: nodeIds.map((nodeId) => (
     // The split of responsibilities between NodeRenderer and
     // NodeComponentWrapper may appear weird. However, it’s designed to
@@ -5103,8 +5102,8 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandl
       return;
     const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy: panBy2, updateConnection } = store.getState(), nodeId = isSourceHandle ? edge.target : edge.source, handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null, handleType = isSourceHandle ? "target" : "source", isTarget = isSourceHandle;
     setReconnecting(!0), onReconnectStart?.(event, edge, handleType);
-    const _onReconnectEnd = (evt) => {
-      setReconnecting(!1), onReconnectEnd?.(evt, edge, handleType);
+    const _onReconnectEnd = (evt, connectionState) => {
+      setReconnecting(!1), onReconnectEnd?.(evt, edge, handleType, connectionState);
     }, onConnectEdge = (connection) => onReconnect?.(edge, connection);
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
@@ -5200,7 +5199,7 @@ function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSele
     }
   ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: isFocusable ? "button" : "img", "data-id": id2, "data-testid": `rf__edge-${id2}`, "aria-label": edge.ariaLabel === null ? void 0 : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : void 0, ref: edgeRef, children: [!reconnecting && jsx(EdgeComponent, { id: id2, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? !0, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: "pathOptions" in edge ? edge.pathOptions : void 0, interactionWidth: edge.interactionWidth }), isReconnectable && jsx(EdgeUpdateAnchors, { edge, isReconnectable, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, setUpdateHover, setReconnecting, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle })] }) });
 }
-const selector$b = (s) => ({
+const selector$a = (s) => ({
   width: s.width,
   height: s.height,
   edgesFocusable: s.edgesFocusable,
@@ -5210,13 +5209,13 @@ const selector$b = (s) => ({
   onError: s.onError
 });
 function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y }) {
-  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$b, shallow$1), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
+  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$a, shallow$1), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
   return jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId }), edgeIds.map((id2) => jsx(EdgeWrapper, { id: id2, edgesFocusable, edgesReconnectable, elementsSelectable, noPanClassName, onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart, onReconnectEnd, rfId, onError, edgeTypes, disableKeyboardA11y }, id2))] });
 }
 EdgeRendererComponent.displayName = "EdgeRenderer";
-const EdgeRenderer = memo(EdgeRendererComponent), selector$a = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const EdgeRenderer = memo(EdgeRendererComponent), selector$9 = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children: children2 }) {
-  const transform2 = useStore(selector$a);
+  const transform2 = useStore(selector$9);
   return jsx("div", { className: "react-flow__viewport xyflow__viewport react-flow__container", style: { transform: transform2 }, children: children2 });
 }
 function useOnInitHandler(onInit) {
@@ -5225,16 +5224,22 @@ function useOnInitHandler(onInit) {
     !isInitialized.current && rfInstance.viewportInitialized && onInit && (setTimeout(() => onInit(rfInstance), 1), isInitialized.current = !0);
   }, [onInit, rfInstance.viewportInitialized]);
 }
-const selector$9 = (state) => state.panZoom?.syncViewport;
+const selector$8 = (state) => state.panZoom?.syncViewport;
 function useViewportSync(viewport) {
-  const syncViewport = useStore(selector$9), store = useStoreApi();
+  const syncViewport = useStore(selector$8), store = useStoreApi();
   return useEffect(() => {
     viewport && (syncViewport?.(viewport), store.setState({ transform: [viewport.x, viewport.y, viewport.zoom] }));
   }, [viewport, syncViewport]), null;
 }
-const selector$8 = (s) => s.connection.inProgress ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) } : { ...s.connection };
-function useConnection() {
-  return useStore(selector$8, shallow$1);
+function storeSelector$1(s) {
+  return s.connection.inProgress ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) } : { ...s.connection };
+}
+function getSelector(connectionSelector) {
+  return storeSelector$1;
+}
+function useConnection(connectionSelector) {
+  const combinedSelector = getSelector();
+  return useStore(combinedSelector, shallow$1);
 }
 const selector$7 = (s) => ({
   nodesConnectable: s.nodesConnectable,
@@ -5391,16 +5396,19 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
   // Every node gets registerd at a ResizeObserver. Whenever a node
   // changes its dimensions, this function is called to measure the
   // new dimensions and update the nodes.
-  updateNodeInternals: (updates) => {
+  updateNodeInternals: (updates, params = { triggerFitView: !0 }) => {
     const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin: nodeOrigin2, debug, fitViewSync } = get2(), { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin2);
-    if (!updatedInternals)
-      return;
-    updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2 });
-    let nextFitViewDone = fitViewDone;
-    !fitViewDone && fitViewOnInit && (nextFitViewDone = fitViewSync({
-      ...fitViewOnInitOptions,
-      nodes: fitViewOnInitOptions?.nodes
-    })), set2({ fitViewDone: nextFitViewDone }), changes?.length > 0 && (debug && console.log("React Flow: trigger node changes", changes), triggerNodeChanges?.(changes));
+    if (updatedInternals) {
+      if (updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2 }), params.triggerFitView) {
+        let nextFitViewDone = fitViewDone;
+        !fitViewDone && fitViewOnInit && (nextFitViewDone = fitViewSync({
+          ...fitViewOnInitOptions,
+          nodes: fitViewOnInitOptions?.nodes
+        })), set2({ fitViewDone: nextFitViewDone });
+      } else
+        set2({});
+      changes?.length > 0 && (debug && console.log("React Flow: trigger node changes", changes), triggerNodeChanges?.(changes));
+    }
   },
   updateNodePositions: (nodeDragItems, dragging = !1) => {
     const parentExpandChildren = [], changes = [];
@@ -5580,6 +5588,14 @@ function EdgeLabelRenderer({ children: children2 }) {
   const edgeLabelRenderer = useStore(selector$6);
   return edgeLabelRenderer ? createPortal(children2, edgeLabelRenderer) : null;
 }
+function useNodesState(initialNodes) {
+  const [nodes, setNodes] = useState(initialNodes), onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+  return [nodes, setNodes, onNodesChange];
+}
+function useEdgesState(initialEdges) {
+  const [edges, setEdges] = useState(initialEdges), onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+  return [edges, setEdges, onEdgesChange];
+}
 function useOnViewportChange({ onStart, onChange, onEnd }) {
   const store = useStoreApi();
   useEffect(() => {
@@ -5637,20 +5653,20 @@ function BackgroundComponent({
   // only used for lines and cross
   size,
   lineWidth = 1,
-  offset = 2,
+  offset = 0,
   color: color2,
   bgColor,
   style: style2,
   className,
   patternClassName
 }) {
-  const ref = useRef(null), { transform: transform2, patternId } = useStore(selector$3, shallow$1), patternSize = size || defaultSize[variant], isDots = variant === BackgroundVariant.Dots, isCross = variant === BackgroundVariant.Cross, gapXY = Array.isArray(gap) ? gap : [gap, gap], scaledGap = [gapXY[0] * transform2[2] || 1, gapXY[1] * transform2[2] || 1], scaledSize = patternSize * transform2[2], patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap, patternOffset = isDots ? [scaledSize / offset, scaledSize / offset] : [patternDimensions[0] / offset, patternDimensions[1] / offset], _patternId = `${patternId}${id2 || ""}`;
+  const ref = useRef(null), { transform: transform2, patternId } = useStore(selector$3, shallow$1), patternSize = size || defaultSize[variant], isDots = variant === BackgroundVariant.Dots, isCross = variant === BackgroundVariant.Cross, gapXY = Array.isArray(gap) ? gap : [gap, gap], scaledGap = [gapXY[0] * transform2[2] || 1, gapXY[1] * transform2[2] || 1], scaledSize = patternSize * transform2[2], offsetXY = Array.isArray(offset) ? offset : [offset, offset], scaledOffset = [offsetXY[0] * transform2[2] || 1, offsetXY[1] * transform2[2] || 1], patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap, _patternId = `${patternId}${id2 || ""}`;
   return jsxs("svg", { className: cc(["react-flow__background", className]), style: {
     ...style2,
     ...containerStyle,
     "--xy-background-color-props": bgColor,
     "--xy-background-pattern-color-props": color2
-  }, ref, "data-testid": "rf__background", children: [jsx("pattern", { id: _patternId, x: transform2[0] % scaledGap[0], y: transform2[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: isDots ? jsx(DotPattern, { radius: scaledSize / offset, className: patternClassName }) : jsx(LinePattern, { dimensions: patternDimensions, lineWidth, variant, className: patternClassName }) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${_patternId})` })] });
+  }, ref, "data-testid": "rf__background", children: [jsx("pattern", { id: _patternId, x: transform2[0] % scaledGap[0], y: transform2[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${scaledOffset[0]},-${scaledOffset[1]})`, children: isDots ? jsx(DotPattern, { radius: scaledSize / 2, className: patternClassName }) : jsx(LinePattern, { dimensions: patternDimensions, lineWidth, variant, className: patternClassName }) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${_patternId})` })] });
 }
 BackgroundComponent.displayName = "Background";
 const Background = memo(BackgroundComponent);
@@ -5952,6 +5968,10 @@ export {
   index as m,
   useOnSelectionChange as n,
   BackgroundVariant as o,
+  BaseEdge as p,
+  useNodesState as q,
+  useEdgesState as r,
   shallow$1 as s,
-  useReactFlow as u
+  useReactFlow as u,
+  withSelectorExports as w
 };