@likec4/diagram 1.3.0 → 1.5.0

package/dist/index.mjs

@@ -9,15 +9,15 @@ import { createPortal } from "react-dom";
 import { DEV } from "esm-env";
 import { shallowEqual, deepEqual } from "fast-equals";
 import { m, AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
-import { Box, MantineContext, ActionIcon, Text, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Paper, Spoiler, Divider, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Slider, SegmentedControl, Card } from "@mantine/core";
-import { isArray, isNullish, entries, reduce, hasSubObject, hasAtLeast as hasAtLeast$1, isTruthy, first, last, clamp as clamp$1, isNumber, keys, takeWhile, isNonNull } from "remeda";
+import { MantineContext, Box, ActionIcon, Text, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, ButtonGroup, rem, Divider, Space, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, Select, Slider, SegmentedControl } from "@mantine/core";
+import { isArray, isNullish, entries, reduce, isEmpty, pickBy, isNonNullish, hasSubObject, hasAtLeast as hasAtLeast$1, omit, isTruthy, first, last, clamp as clamp$1, isNumber, keys, takeWhile, isNonNull } from "remeda";
 import { invariant, hasAtLeast, isAncestor, nonNullable, StepEdgeId, nonexhaustive, extractStep, defaultTheme, ElementShapes } from "@likec4/core";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
 import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect, useIsomorphicLayoutEffect as useIsomorphicLayoutEffect$1 } from "@react-hookz/web";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { line, curveCatmullRomOpen } from "d3-shape";
-import { IconZoomScan, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
-import { useLocalStorage, useHotkeys } from "@mantine/hooks";
+import { IconZoomScan, IconLink, IconChevronLeft, IconChevronRight, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
+import { useStateHistory, useLocalStorage, useHotkeys } from "@mantine/hooks";
 function cc(names) {
   if (typeof names == "string" || typeof names == "number") return "" + names;
   let out = "";
@@ -119,13 +119,13 @@ function creator(name) {
 }
 function none() {
 }
-function selector$5(selector2) {
+function selector$4(selector2) {
   return selector2 == null ? none : function() {
     return this.querySelector(selector2);
   };
 }
 function selection_select(select2) {
-  typeof select2 != "function" && (select2 = selector$5(select2));
+  typeof select2 != "function" && (select2 = selector$4(select2));
   for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i)
       (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode);
@@ -516,7 +516,7 @@ function constantNull() {
   return null;
 }
 function selection_insert(name, before) {
-  var create2 = typeof name == "function" ? name : creator(name), select2 = before == null ? constantNull : typeof before == "function" ? before : selector$5(before);
+  var create2 = typeof name == "function" ? name : creator(name), select2 = before == null ? constantNull : typeof before == "function" ? before : selector$4(before);
   return this.select(function() {
     return this.insertBefore(create2.apply(this, arguments), select2.apply(this, arguments) || null);
   });
@@ -1669,7 +1669,7 @@ function transition_remove() {
 }
 function transition_select(select2) {
   var name = this._name, id2 = this._id;
-  typeof select2 != "function" && (select2 = selector$5(select2));
+  typeof select2 != "function" && (select2 = selector$4(select2));
   for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i)
       (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode, schedule(subgroup[i], name, id2, i, subgroup, get(node, id2)));
@@ -2190,6 +2190,18 @@ var SelectionMode;
 (function(SelectionMode2) {
   SelectionMode2.Partial = "partial", SelectionMode2.Full = "full";
 })(SelectionMode || (SelectionMode = {}));
+const initialConnection = {
+  inProgress: !1,
+  isValid: null,
+  from: null,
+  fromHandle: null,
+  fromPosition: null,
+  fromNode: null,
+  to: null,
+  toHandle: null,
+  toPosition: null,
+  toNode: null
+};
 var ConnectionLineType;
 (function(ConnectionLineType2) {
   ConnectionLineType2.Bezier = "default", ConnectionLineType2.Straight = "straight", ConnectionLineType2.Step = "step", ConnectionLineType2.SmoothStep = "smoothstep", ConnectionLineType2.SimpleBezier = "simplebezier";
@@ -2202,39 +2214,32 @@ var Position;
 (function(Position2) {
   Position2.Left = "left", Position2.Top = "top", Position2.Right = "right", Position2.Bottom = "bottom";
 })(Position || (Position = {}));
-const isEdgeBase = (element2) => "id" in element2 && "source" in element2 && "target" in element2, isNodeBase = (element2) => "id" in element2 && "position" in element2 && !("source" in element2) && !("target" in element2), getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
-  const { width, height } = getNodeDimensions(node), positionAbsolute = "internals" in node ? node.internals.positionAbsolute : node.position, origin = node.origin || nodeOrigin, offsetX = width * origin[0], offsetY = height * origin[1];
+const oppositePosition = {
+  [Position.Left]: Position.Right,
+  [Position.Right]: Position.Left,
+  [Position.Top]: Position.Bottom,
+  [Position.Bottom]: Position.Top
+};
+function getConnectionStatus(isValid) {
+  return isValid === null ? null : isValid ? "valid" : "invalid";
+}
+const isEdgeBase = (element2) => "id" in element2 && "source" in element2 && "target" in element2, isNodeBase = (element2) => "id" in element2 && "position" in element2 && !("source" in element2) && !("target" in element2), isInternalNodeBase = (element2) => "id" in element2 && "internals" in element2 && !("source" in element2) && !("target" in element2), getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
+  const { width, height } = getNodeDimensions(node), origin = node.origin ?? nodeOrigin, offsetX = width * origin[0], offsetY = height * origin[1];
   return {
-    position: {
-      x: node.position.x - offsetX,
-      y: node.position.y - offsetY
-    },
-    positionAbsolute: {
-      x: positionAbsolute.x - offsetX,
-      y: positionAbsolute.y - offsetY
-    }
+    x: node.position.x - offsetX,
+    y: node.position.y - offsetY
   };
-}, getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
-  if (nodes.length === 0)
-    return { x: 0, y: 0, width: 0, height: 0 };
-  const box = nodes.reduce((currBox, node) => {
-    const nodeBox = nodeToBox(node, params.nodeOrigin);
-    return getBoundsOfBoxes(currBox, nodeBox);
-  }, { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 });
-  return boxToRect(box);
-}, getInternalNodesBounds = (nodeLookup, params = {
-  nodeOrigin: [0, 0]
-}) => {
+}, getInternalNodesBounds = (nodeLookup, params = {}) => {
   if (nodeLookup.size === 0)
     return { x: 0, y: 0, width: 0, height: 0 };
   let box = { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 };
   return nodeLookup.forEach((node) => {
-    if (params.filter == null || params.filter(node)) {
-      const nodeBox = nodeToBox(node, params.nodeOrigin);
+    if (params.filter === void 0 || params.filter(node)) {
+      const nodeBox = nodeToBox(node);
       box = getBoundsOfBoxes(box, nodeBox);
     }
   }), boxToRect(box);
-}, getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = !1, excludeNonSelectableNodes = !1, nodeOrigin = [0, 0]) => {
+}, getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = !1, excludeNonSelectableNodes = !1) => {
   const paneRect = {
     ...pointToRendererPoint(rect, [tx, ty, tScale]),
     width: rect.width / tScale,
@@ -2244,7 +2249,7 @@ const isEdgeBase = (element2) => "id" in element2 && "source" in element2 && "ta
     const { measured, selectable = !0, hidden = !1 } = node, width = measured.width ?? node.width ?? node.initialWidth ?? null, height = measured.height ?? node.height ?? node.initialHeight ?? null;
     if (excludeNonSelectableNodes && !selectable || hidden)
       continue;
-    const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin)), notInitialized = width === null || height === null, partiallyVisible = partially && overlappingArea > 0, area = (width ?? 0) * (height ?? 0);
+    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);
   }
   return visibleNodes;
@@ -2254,35 +2259,34 @@ const isEdgeBase = (element2) => "id" in element2 && "source" in element2 && "ta
     nodeIds.add(node.id);
   }), edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
 };
-function fitView({ nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
-  const filteredNodes = [], optionNodeIds = options != null && options.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
-  if (nodeLookup.forEach((n) => {
-    n.measured.width && n.measured.height && ((options == null ? void 0 : options.includeHiddenNodes) || !n.hidden) && (!optionNodeIds || optionNodeIds.has(n.id)) && filteredNodes.push(n);
-  }), filteredNodes.length > 0) {
-    const bounds = getNodesBounds(filteredNodes, { nodeOrigin }), viewport = getViewportForBounds(bounds, width, height, (options == null ? void 0 : options.minZoom) ?? minZoom, (options == null ? void 0 : options.maxZoom) ?? maxZoom, (options == null ? void 0 : options.padding) ?? 0.1);
-    return panZoom.setViewport(viewport, { duration: options == null ? void 0 : options.duration }), !0;
-  }
-  return !1;
+function getFitViewNodes(nodeLookup, options) {
+  const fitViewNodes = /* @__PURE__ */ new Map(), optionNodeIds = options != null && options.nodes ? new Set(options.nodes.map((node) => node.id)) : null;
+  return nodeLookup.forEach((n) => {
+    n.measured.width && n.measured.height && ((options == null ? void 0 : options.includeHiddenNodes) || !n.hidden) && (!optionNodeIds || optionNodeIds.has(n.id)) && fitViewNodes.set(n.id, n);
+  }), fitViewNodes;
+}
+async function fitView({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
+  if (nodes.size === 0)
+    return Promise.resolve(!1);
+  const bounds = getInternalNodesBounds(nodes), viewport = getViewportForBounds(bounds, width, height, (options == null ? void 0 : options.minZoom) ?? minZoom, (options == null ? void 0 : options.maxZoom) ?? maxZoom, (options == null ? void 0 : options.padding) ?? 0.1);
+  return await panZoom.setViewport(viewport, { duration: options == null ? void 0 : options.duration }), Promise.resolve(!0);
 }
 function clampNodeExtent(node, extent) {
   var _a, _b;
   return !extent || extent === "parent" ? extent : [extent[0], [extent[1][0] - (((_a = node.measured) == null ? void 0 : _a.width) ?? 0), extent[1][1] - (((_b = node.measured) == null ? void 0 : _b.height) ?? 0)]];
 }
 function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError }) {
-  const node = nodeLookup.get(nodeId), parentNode = node.parentId ? nodeLookup.get(node.parentId) : void 0, { x: parentX, y: parentY } = parentNode ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute : { x: 0, y: 0 };
+  const node = nodeLookup.get(nodeId), parentNode = node.parentId ? nodeLookup.get(node.parentId) : void 0, { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 }, origin = node.origin ?? nodeOrigin;
   let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
   if (node.extent === "parent" && !node.expandParent)
     if (!parentNode)
       onError == null || onError("005", errorMessages.error005());
     else {
       const nodeWidth = node.measured.width, nodeHeight = node.measured.height, parentWidth = parentNode.measured.width, parentHeight = parentNode.measured.height;
-      if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
-        const currNodeOrigin = node.origin || nodeOrigin, extentX = parentX + nodeWidth * currNodeOrigin[0], extentY = parentY + nodeHeight * currNodeOrigin[1];
-        currentExtent = [
-          [extentX, extentY],
-          [extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight]
-        ];
-      }
+      nodeWidth && nodeHeight && parentWidth && parentHeight && (currentExtent = [
+        [parentX, parentY],
+        [parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight]
+      ]);
     }
   else parentNode && isCoordinateExtent(node.extent) && (currentExtent = [
     [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
@@ -2291,8 +2295,9 @@ function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin =
   const positionAbsolute = isCoordinateExtent(currentExtent) ? clampPosition(nextPosition, currentExtent) : nextPosition;
   return {
     position: {
-      x: positionAbsolute.x - parentX,
-      y: positionAbsolute.y - parentY
+      // TODO: is there a better way to do this?
+      x: positionAbsolute.x - parentX + node.measured.width * origin[0],
+      y: positionAbsolute.y - parentY + node.measured.height * origin[1]
     },
     positionAbsolute
   };
@@ -2322,8 +2327,8 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
 const clamp = (val, min2 = 0, max2 = 1) => Math.min(Math.max(val, min2), max2), clampPosition = (position = { x: 0, y: 0 }, extent) => ({
   x: clamp(position.x, extent[0][0], extent[1][0]),
   y: clamp(position.y, extent[0][1], extent[1][1])
-}), calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs(value - min2), 1, 50) / 50 : value > max2 ? -clamp(Math.abs(value - max2), 1, 50) / 50 : 0, calcAutoPan = (pos, bounds) => {
-  const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20, yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20;
+}), calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs(value - min2), 1, min2) / min2 : value > max2 ? -clamp(Math.abs(value - max2), 1, min2) / min2 : 0, calcAutoPan = (pos, bounds, speed = 15, distance2 = 40) => {
+  const xMovement = calcAutoPanVelocity(pos.x, distance2, bounds.width - distance2) * speed, yMovement = calcAutoPanVelocity(pos.y, distance2, bounds.height - distance2) * speed;
   return [xMovement, yMovement];
 }, getBoundsOfBoxes = (box1, box2) => ({
   x: Math.min(box1.x, box2.x),
@@ -2342,29 +2347,26 @@ const clamp = (val, min2 = 0, max2 = 1) => Math.min(Math.max(val, min2), max2),
   height: y2 - y
 }), nodeToRect = (node, nodeOrigin = [0, 0]) => {
   var _a, _b;
-  const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+  const { x, y } = isInternalNodeBase(node) ? node.internals.positionAbsolute : getNodePositionWithOrigin(node, nodeOrigin);
   return {
     x,
     y,
-    width: ((_a = node.measured) == null ? void 0 : _a.width) ?? node.width ?? 0,
-    height: ((_b = node.measured) == null ? void 0 : _b.height) ?? node.height ?? 0
+    width: ((_a = node.measured) == null ? void 0 : _a.width) ?? node.width ?? node.initialWidth ?? 0,
+    height: ((_b = node.measured) == null ? void 0 : _b.height) ?? node.height ?? node.initialHeight ?? 0
   };
 }, nodeToBox = (node, nodeOrigin = [0, 0]) => {
   var _a, _b;
-  const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+  const { x, y } = isInternalNodeBase(node) ? node.internals.positionAbsolute : getNodePositionWithOrigin(node, nodeOrigin);
   return {
     x,
     y,
-    x2: x + (((_a = node.measured) == null ? void 0 : _a.width) ?? node.width ?? 0),
-    y2: y + (((_b = node.measured) == null ? void 0 : _b.height) ?? node.height ?? 0)
+    x2: x + (((_a = node.measured) == null ? void 0 : _a.width) ?? node.width ?? node.initialWidth ?? 0),
+    y2: y + (((_b = node.measured) == null ? void 0 : _b.height) ?? node.height ?? node.initialHeight ?? 0)
   };
 }, getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2))), getOverlappingArea = (rectA, rectB) => {
   const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)), yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
   return Math.ceil(xOverlap * yOverlap);
 }, isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y), isNumeric = (n) => !isNaN(n) && isFinite(n), devWarn = (id2, message) => {
-}, getPositionWithOrigin = ({ x, y, width, height, origin = [0, 0] }) => !width || !height || origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1 ? { x, y } : {
-  x: x - width * origin[0],
-  y: y - height * origin[1]
 }, snapPosition = (position, snapGrid = [1, 1]) => ({
   x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
   y: snapGrid[1] * Math.round(position.y / snapGrid[1])
@@ -2398,14 +2400,14 @@ function nodeHasDimensions(node) {
   var _a, _b;
   return (((_a = node.measured) == null ? void 0 : _a.width) ?? node.width ?? node.initialWidth) !== void 0 && (((_b = node.measured) == null ? void 0 : _b.height) ?? node.height ?? node.initialHeight) !== void 0;
 }
-function evaluateAbsolutePosition(position, parentId, nodeLookup, nodeOrigin = [0, 0]) {
+function evaluateAbsolutePosition(position, dimensions = { width: 0, height: 0 }, parentId, nodeLookup, nodeOrigin) {
   let nextParentId = parentId;
   const positionAbsolute = { ...position };
   for (; nextParentId; ) {
     const parent = nodeLookup.get(nextParentId);
     if (nextParentId = parent == null ? void 0 : parent.parentId, parent) {
-      const origin = parent.origin || nodeOrigin, xOffset = (parent.measured.width ?? 0) * origin[0], yOffset = (parent.measured.height ?? 0) * origin[1];
-      positionAbsolute.x += parent.position.x - xOffset, positionAbsolute.y += parent.position.y - yOffset;
+      const origin = parent.origin || nodeOrigin;
+      positionAbsolute.x += parent.internals.positionAbsolute.x - (dimensions.width ?? 0) * origin[0], positionAbsolute.y += parent.internals.positionAbsolute.y - (dimensions.height ?? 0) * origin[1];
     }
   }
   return positionAbsolute;
@@ -2437,21 +2439,17 @@ const isMouseEvent = (event) => "clientX" in event, getEventPosition = (event, b
     x: evtX - ((bounds == null ? void 0 : bounds.left) ?? 0),
     y: evtY - ((bounds == null ? void 0 : bounds.top) ?? 0)
   };
-}, getHandleBounds = (selector2, nodeElement, nodeBounds, zoom2, nodeOrigin = [0, 0]) => {
-  const handles = nodeElement.querySelectorAll(selector2);
-  if (!handles || !handles.length)
-    return null;
-  const handlesArray = Array.from(handles), nodeOffset = {
-    x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.top + nodeBounds.height * nodeOrigin[1]
-  };
-  return handlesArray.map((handle) => {
+}, getHandleBounds = (type, nodeElement, nodeBounds, zoom2, nodeId) => {
+  const handles = nodeElement.querySelectorAll(`.${type}`);
+  return !handles || !handles.length ? null : Array.from(handles).map((handle) => {
     const handleBounds = handle.getBoundingClientRect();
     return {
       id: handle.getAttribute("data-handleid"),
+      type,
+      nodeId,
       position: handle.getAttribute("data-handlepos"),
-      x: (handleBounds.left - nodeOffset.x) / zoom2,
-      y: (handleBounds.top - nodeOffset.y) / zoom2,
+      x: (handleBounds.left - nodeBounds.left) / zoom2,
+      y: (handleBounds.top - nodeBounds.top) / zoom2,
       ...getDimensions(handle)
     };
   });
@@ -2638,19 +2636,19 @@ function getEdgePosition(params) {
     // when connection type is loose we can define all handles as sources and connect source -> source
     params.connectionMode === ConnectionMode.Strict ? (targetHandleBounds == null ? void 0 : targetHandleBounds.target) ?? [] : ((targetHandleBounds == null ? void 0 : targetHandleBounds.target) ?? []).concat((targetHandleBounds == null ? void 0 : targetHandleBounds.source) ?? []),
     params.targetHandle
-  ), sourcePosition = (sourceHandle == null ? void 0 : sourceHandle.position) || Position.Bottom, targetPosition = (targetHandle == null ? void 0 : targetHandle.position) || Position.Top;
+  );
   if (!sourceHandle || !targetHandle)
     return (_a = params.onError) == null || _a.call(params, "008", errorMessages.error008(sourceHandle ? "target" : "source", {
       id: params.id,
       sourceHandle: params.sourceHandle,
       targetHandle: params.targetHandle
     })), null;
-  const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle), [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
+  const sourcePosition = (sourceHandle == null ? void 0 : sourceHandle.position) || Position.Bottom, targetPosition = (targetHandle == null ? void 0 : targetHandle.position) || Position.Top, source = getHandlePosition(sourceNode, sourceHandle, sourcePosition), target = getHandlePosition(targetNode, targetHandle, targetPosition);
   return {
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
+    sourceX: source.x,
+    sourceY: source.y,
+    targetX: target.x,
+    targetY: target.y,
     sourcePosition,
     targetPosition
   };
@@ -2666,17 +2664,19 @@ function toHandleBounds(handles) {
     target
   };
 }
-function getHandlePosition(position, node, handle = null) {
+function getHandlePosition(node, handle, fallbackPosition = Position.Left, center = !1) {
   const x = ((handle == null ? void 0 : handle.x) ?? 0) + node.internals.positionAbsolute.x, y = ((handle == null ? void 0 : handle.y) ?? 0) + node.internals.positionAbsolute.y, { width, height } = handle ?? getNodeDimensions(node);
-  switch (position) {
+  if (center)
+    return { x: x + width / 2, y: y + height / 2 };
+  switch ((handle == null ? void 0 : handle.position) ?? fallbackPosition) {
     case Position.Top:
-      return [x + width / 2, y];
+      return { x: x + width / 2, y };
     case Position.Right:
-      return [x + width, y + height / 2];
+      return { x: x + width, y: y + height / 2 };
     case Position.Bottom:
-      return [x + width / 2, y + height];
+      return { x: x + width / 2, y: y + height };
     case Position.Left:
-      return [x, y + height / 2];
+      return { x, y: y + height / 2 };
   }
 }
 function getHandle(bounds, handleId) {
@@ -2694,110 +2694,102 @@ function createMarkerIds(edges, { id: id2, defaultColor, defaultMarkerStart, def
     }
   }), markers), []).sort((a, b) => a.id.localeCompare(b.id));
 }
-function updateAbsolutePositions(nodeLookup, options = {
+const defaultOptions = {
   nodeOrigin: [0, 0],
   elevateNodesOnSelect: !0,
   defaults: {}
-}) {
-  const selectedNodeZ = options != null && options.elevateNodesOnSelect ? 1e3 : 0;
-  for (const [, node] of nodeLookup) {
-    const parentId = node.parentId;
-    if (!parentId)
-      continue;
-    if (!nodeLookup.has(parentId))
-      throw new Error(`Parent node ${parentId} not found`);
-    const parentNode = nodeLookup.get(parentId), { x, y, z } = calculateXYZPosition(node, nodeLookup, {
-      ...node.position,
-      z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0)
-    }, (parentNode == null ? void 0 : parentNode.origin) ?? options.nodeOrigin), currPosition = node.internals.positionAbsolute, positionChanged = x !== currPosition.x || y !== currPosition.y;
-    (positionChanged || z !== node.internals.z) && (node.internals = {
-      ...node.internals,
-      positionAbsolute: positionChanged ? { x, y } : currPosition,
-      z
-    });
-  }
-}
-function adoptUserNodes(nodes, nodeLookup, parentLookup, options = {
-  nodeOrigin: [0, 0],
-  elevateNodesOnSelect: !0,
-  defaults: {},
+}, adoptUserNodesDefaultOptions = {
+  ...defaultOptions,
   checkEquality: !0
-}) {
-  const tmpLookup = new Map(nodeLookup);
+};
+function updateAbsolutePositions(nodeLookup, parentLookup, options) {
+  const _options = { ...defaultOptions, ...options };
+  for (const node of nodeLookup.values())
+    node.parentId && updateChildPosition(node, nodeLookup, parentLookup, _options);
+}
+function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
+  var _a, _b;
+  const _options = { ...adoptUserNodesDefaultOptions, ...options }, tmpLookup = new Map(nodeLookup);
   nodeLookup.clear(), parentLookup.clear();
   const selectedNodeZ = options != null && options.elevateNodesOnSelect ? 1e3 : 0;
-  nodes.forEach((userNode) => {
-    var _a, _b;
+  for (const userNode of nodes) {
     let internalNode = tmpLookup.get(userNode.id);
-    if (options.checkEquality && userNode === (internalNode == null ? void 0 : internalNode.internals.userNode) || (internalNode = {
-      ...options.defaults,
+    _options.checkEquality && userNode === (internalNode == null ? void 0 : internalNode.internals.userNode) || (internalNode = {
+      ..._options.defaults,
       ...userNode,
       measured: {
         width: (_a = userNode.measured) == null ? void 0 : _a.width,
         height: (_b = userNode.measured) == null ? void 0 : _b.height
       },
       internals: {
-        positionAbsolute: userNode.position,
+        positionAbsolute: getNodePositionWithOrigin(userNode, _options.nodeOrigin),
         handleBounds: internalNode == null ? void 0 : internalNode.internals.handleBounds,
-        z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
+        z: calculateZ(userNode, selectedNodeZ),
         userNode
       }
-    }), nodeLookup.set(userNode.id, internalNode), userNode.parentId) {
-      const childNodes = parentLookup.get(userNode.parentId);
-      childNodes ? childNodes.push(internalNode) : parentLookup.set(userNode.parentId, [internalNode]);
-    }
-  }), parentLookup.size > 0 && updateAbsolutePositions(nodeLookup, options);
+    }), nodeLookup.set(userNode.id, internalNode), userNode.parentId && updateChildPosition(internalNode, nodeLookup, parentLookup, options);
+  }
+}
+function updateChildPosition(node, nodeLookup, parentLookup, options) {
+  const _options = { ...defaultOptions, ...options }, parentId = node.parentId, parentNode = nodeLookup.get(parentId);
+  if (!parentNode)
+    throw new Error(`Parent node ${parentId} not found`);
+  const childNodes = parentLookup.get(parentId);
+  childNodes ? childNodes.set(node.id, node) : parentLookup.set(parentId, /* @__PURE__ */ new Map([[node.id, node]]));
+  const selectedNodeZ = options != null && options.elevateNodesOnSelect ? 1e3 : 0, { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin, selectedNodeZ), currPosition = node.internals.positionAbsolute, positionChanged = x !== currPosition.x || y !== currPosition.y;
+  (positionChanged || z !== node.internals.z) && (node.internals = {
+    ...node.internals,
+    positionAbsolute: positionChanged ? { x, y } : currPosition,
+    z
+  });
 }
-function calculateXYZPosition(node, nodeLookup, result, nodeOrigin = [0, 0]) {
-  if (!node.parentId)
-    return result;
-  const parent = nodeLookup.get(node.parentId), parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
-  return calculateXYZPosition(parent, nodeLookup, {
-    x: (result.x ?? 0) + parentPosition.x,
-    y: (result.y ?? 0) + parentPosition.y,
-    z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0
-  }, parent.origin || nodeOrigin);
-}
-function handleExpandParent(children2, nodeLookup, parentLookup, nodeOrigin) {
+function calculateZ(node, selectedNodeZ) {
+  return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
+}
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, selectedNodeZ) {
+  const position = getNodePositionWithOrigin(childNode, nodeOrigin), childZ = calculateZ(childNode, selectedNodeZ), parentZ = parentNode.internals.z ?? 0;
+  return {
+    x: parentNode.internals.positionAbsolute.x + position.x,
+    y: parentNode.internals.positionAbsolute.y + position.y,
+    z: parentZ > childZ ? parentZ : childZ
+  };
+}
+function handleExpandParent(children2, nodeLookup, parentLookup, nodeOrigin = [0, 0]) {
   var _a;
   const changes = [], parentExpansions = /* @__PURE__ */ new Map();
   for (const child of children2) {
     const parent = nodeLookup.get(child.parentId);
     if (!parent)
       continue;
-    const parentRect = ((_a = parentExpansions.get(child.parentId)) == null ? void 0 : _a.expandedRect) ?? nodeToRect(parent, parent.origin ?? nodeOrigin), expandedRect = getBoundsOfRects(parentRect, child.rect);
+    const parentRect = ((_a = parentExpansions.get(child.parentId)) == null ? void 0 : _a.expandedRect) ?? nodeToRect(parent), expandedRect = getBoundsOfRects(parentRect, child.rect);
     parentExpansions.set(child.parentId, { expandedRect, parent });
   }
   return parentExpansions.size > 0 && parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
-    const { position } = getNodePositionWithOrigin(parent, parent.origin), dimensions = getNodeDimensions(parent), xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0, yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
-    if (xChange > 0 || yChange > 0) {
-      changes.push({
-        id: parentId,
+    var _a2;
+    const positionAbsolute = parent.internals.positionAbsolute, dimensions = getNodeDimensions(parent), origin = parent.origin ?? nodeOrigin, xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0, yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0, newWidth = Math.max(dimensions.width, Math.round(expandedRect.width)), newHeight = Math.max(dimensions.height, Math.round(expandedRect.height)), widthChange = (newWidth - dimensions.width) * origin[0], heightChange = (newHeight - dimensions.height) * origin[1];
+    (xChange > 0 || yChange > 0 || widthChange || heightChange) && (changes.push({
+      id: parentId,
+      type: "position",
+      position: {
+        x: parent.position.x - xChange + widthChange,
+        y: parent.position.y - yChange + heightChange
+      }
+    }), (_a2 = parentLookup.get(parentId)) == null || _a2.forEach((childNode) => {
+      children2.some((child) => child.id === childNode.id) || changes.push({
+        id: childNode.id,
         type: "position",
         position: {
-          x: position.x - xChange,
-          y: position.y - yChange
+          x: childNode.position.x + xChange,
+          y: childNode.position.y + yChange
         }
       });
-      const childNodes = parentLookup.get(parentId);
-      childNodes == null || childNodes.forEach((childNode) => {
-        children2.some((child) => child.id === childNode.id) || changes.push({
-          id: childNode.id,
-          type: "position",
-          position: {
-            x: childNode.position.x + xChange,
-            y: childNode.position.y + yChange
-          }
-        });
-      });
-    }
-    (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) && changes.push({
+    })), (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) && changes.push({
       id: parentId,
       type: "dimensions",
       setAttributes: !0,
       dimensions: {
-        width: Math.max(dimensions.width, Math.round(expandedRect.width)),
-        height: Math.max(dimensions.height, Math.round(expandedRect.height))
+        width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
+        height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0)
       }
     });
   }), changes;
@@ -2808,52 +2800,55 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
   if (!viewportNode)
     return { changes: [], updatedInternals };
   const changes = [], style2 = window.getComputedStyle(viewportNode), { m22: zoom2 } = new window.DOMMatrixReadOnly(style2.transform), parentExpandChildren = [];
-  if (updates.forEach((update) => {
+  for (const update of updates.values()) {
     const node = nodeLookup.get(update.id);
-    if (node != null && node.hidden)
-      node.internals = {
-        ...node.internals,
-        handleBounds: void 0
-      }, updatedInternals = !0;
-    else if (node) {
-      const dimensions = getDimensions(update.nodeElement), dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
-      if (!!(dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force))) {
-        const nodeBounds = update.nodeElement.getBoundingClientRect();
-        node.measured = dimensions, node.internals = {
+    if (node)
+      if (node.hidden)
+        node.internals = {
           ...node.internals,
-          handleBounds: {
-            source: getHandleBounds(".source", update.nodeElement, nodeBounds, zoom2, node.origin || nodeOrigin),
-            target: getHandleBounds(".target", update.nodeElement, nodeBounds, zoom2, node.origin || nodeOrigin)
-          }
-        }, updatedInternals = !0, dimensionChanged && (changes.push({
-          id: node.id,
-          type: "dimensions",
-          dimensions
-        }), node.expandParent && node.parentId && parentExpandChildren.push({
-          id: node.id,
-          parentId: node.parentId,
-          rect: nodeToRect(node, nodeOrigin)
-        }));
+          handleBounds: void 0
+        }, updatedInternals = !0;
+      else {
+        const dimensions = getDimensions(update.nodeElement), dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
+        if (!!(dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force))) {
+          const nodeBounds = update.nodeElement.getBoundingClientRect();
+          node.measured = dimensions, node.internals = {
+            ...node.internals,
+            positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
+            handleBounds: {
+              source: getHandleBounds("source", update.nodeElement, nodeBounds, zoom2, node.id),
+              target: getHandleBounds("target", update.nodeElement, nodeBounds, zoom2, node.id)
+            }
+          }, node.parentId && updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin }), updatedInternals = !0, dimensionChanged && (changes.push({
+            id: node.id,
+            type: "dimensions",
+            dimensions
+          }), node.expandParent && node.parentId && parentExpandChildren.push({
+            id: node.id,
+            parentId: node.parentId,
+            rect: nodeToRect(node, nodeOrigin)
+          }));
+        }
       }
-    }
-  }), parentExpandChildren.length > 0) {
+  }
+  if (parentExpandChildren.length > 0) {
     const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
     changes.push(...parentExpandChanges);
   }
   return { changes, updatedInternals };
 }
-function panBy({ delta, panZoom, transform: transform2, translateExtent, width, height }) {
+async function panBy({ delta, panZoom, transform: transform2, translateExtent, width, height }) {
   if (!panZoom || !delta.x && !delta.y)
-    return !1;
-  const nextViewport = panZoom.setViewportConstrained({
+    return Promise.resolve(!1);
+  const nextViewport = await panZoom.setViewportConstrained({
     x: transform2[0] + delta.x,
     y: transform2[1] + delta.y,
     zoom: transform2[2]
   }, [
     [0, 0],
     [width, height]
-  ], translateExtent);
-  return !!nextViewport && (nextViewport.x !== transform2[0] || nextViewport.y !== transform2[1] || nextViewport.k !== transform2[2]);
+  ], translateExtent), transformChanged = !!nextViewport && (nextViewport.x !== transform2[0] || nextViewport.y !== transform2[1] || nextViewport.k !== transform2[2]);
+  return Promise.resolve(transformChanged);
 }
 function updateConnectionLookup(connectionLookup, edgeLookup, edges) {
   connectionLookup.clear(), edgeLookup.clear();
@@ -2917,14 +2912,15 @@ function getDragItems(nodeLookup, nodesDraggable, mousePos, nodeId) {
     }
   return dragItems;
 }
-function getEventHandlerParams({ nodeId, dragItems, nodeLookup }) {
+function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = !0 }) {
   var _a, _b;
   const nodesFromDragItems = [];
   for (const [id2, dragItem] of dragItems) {
     const node2 = (_a = nodeLookup.get(id2)) == null ? void 0 : _a.internals.userNode;
     node2 && nodesFromDragItems.push({
       ...node2,
-      position: dragItem.position
+      position: dragItem.position,
+      dragging
     });
   }
   if (!nodeId)
@@ -2933,7 +2929,8 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup }) {
   return [
     {
       ...node,
-      position: ((_b = dragItems.get(nodeId)) == null ? void 0 : _b.position) || node.position
+      position: ((_b = dragItems.get(nodeId)) == null ? void 0 : _b.position) || node.position,
+      dragging
     },
     nodesFromDragItems
   ];
@@ -2947,7 +2944,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
       lastPos = { x, y };
       let hasChange = !1, nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
       if (dragItems.size > 1 && nodeExtent) {
-        const rect = getInternalNodesBounds(dragItems, { nodeOrigin });
+        const rect = getInternalNodesBounds(dragItems);
         nodesBox = rectToBox(rect);
       }
       for (const [id2, dragItem] of dragItems) {
@@ -2983,15 +2980,11 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
         onDrag == null || onDrag(dragEvent, dragItems, currentNode, currentNodes), onNodeDrag == null || onNodeDrag(dragEvent, currentNode, currentNodes), nodeId || onSelectionDrag == null || onSelectionDrag(dragEvent, currentNodes);
       }
     }
-    function autoPan() {
+    async function autoPan() {
       if (!containerBounds)
         return;
-      const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds);
-      if (xMovement !== 0 || yMovement !== 0) {
-        const { transform: transform2, panBy: panBy2 } = getStoreItems();
-        lastPos.x = (lastPos.x ?? 0) - xMovement / transform2[2], lastPos.y = (lastPos.y ?? 0) - yMovement / transform2[2], panBy2({ x: xMovement, y: yMovement }) && updateNodes(lastPos, null);
-      }
-      autoPanId = requestAnimationFrame(autoPan);
+      const { transform: transform2, panBy: panBy2, autoPanSpeed } = getStoreItems(), [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
+      (xMovement !== 0 || yMovement !== 0) && (lastPos.x = (lastPos.x ?? 0) - xMovement / transform2[2], lastPos.y = (lastPos.y ?? 0) - yMovement / transform2[2], await panBy2({ x: xMovement, y: yMovement }) && updateNodes(lastPos, null)), autoPanId = requestAnimationFrame(autoPan);
     }
     function startDrag(event) {
       var _a;
@@ -3026,7 +3019,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
           const [currentNode, currentNodes] = getEventHandlerParams({
             nodeId,
             dragItems,
-            nodeLookup
+            nodeLookup,
+            dragging: !1
           });
           onDragStop == null || onDragStop(event.sourceEvent, dragItems, currentNode, currentNodes), onNodeDragStop == null || onNodeDragStop(event.sourceEvent, currentNode, currentNodes), nodeId || onSelectionDragStop == null || onSelectionDragStop(event.sourceEvent, currentNodes);
         }
@@ -3046,13 +3040,16 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
   };
 }
 function getHandles(node, handleBounds, type, currentHandle) {
-  return (handleBounds[type] || []).reduce((res, h) => (`${node.id}-${h.id}-${type}` !== currentHandle && res.push({
-    id: h.id || null,
-    type,
-    nodeId: node.id,
-    x: node.internals.positionAbsolute.x + h.x + h.width / 2,
-    y: node.internals.positionAbsolute.y + h.y + h.height / 2
-  }), res), []);
+  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 getClosestHandle(pos, connectionRadius, handles) {
   let closestHandles = [], minDistance = 1 / 0;
@@ -3066,31 +3063,31 @@ function getClosestHandle(pos, connectionRadius, handles) {
   ) : null;
 }
 function getHandleLookup({ nodeLookup, nodeId, handleId, handleType }) {
-  const connectionHandles = [];
-  for (const [, node] of nodeLookup)
+  const connectionHandles = [], currentHandle = { nodeId, handleId, handleType };
+  let excludedHandle = null;
+  for (const node of nodeLookup.values())
     if (node.internals.handleBounds) {
-      const id2 = `${nodeId}-${handleId}-${handleType}`, sourceHandles = getHandles(node, node.internals.handleBounds, "source", id2), targetHandles = getHandles(node, node.internals.handleBounds, "target", id2);
-      connectionHandles.push(...sourceHandles, ...targetHandles);
+      const [sourceHandles, excludedSource] = getHandles(node, node.internals.handleBounds, "source", currentHandle), [targetHandles, excludedTarget] = getHandles(node, node.internals.handleBounds, "target", currentHandle);
+      excludedHandle = excludedHandle || (excludedSource ?? excludedTarget), connectionHandles.push(...sourceHandles, ...targetHandles);
     }
-  return connectionHandles;
+  return [connectionHandles, excludedHandle];
 }
 function getHandleType(edgeUpdaterType, handleDomNode) {
   return edgeUpdaterType || (handleDomNode != null && handleDomNode.classList.contains("target") ? "target" : handleDomNode != null && handleDomNode.classList.contains("source") ? "source" : null);
 }
-function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
-  let connectionStatus = null;
-  return isHandleValid ? connectionStatus = "valid" : isInsideConnectionRadius && !isHandleValid && (connectionStatus = "invalid"), connectionStatus;
+function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
+  let isValid = null;
+  return isHandleValid ? isValid = !0 : isInsideConnectionRadius && !isHandleValid && (isValid = !1), isValid;
 }
 const alwaysValid = () => !0;
-let connectionStartHandle = null;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy: panBy2, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, getConnectionStartHandle }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy: panBy2, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed }) {
   const doc = getHostForElement(event.target);
   let autoPanId = 0, closestHandle;
   const { x, y } = getEventPosition(event), clickedHandle = doc == null ? void 0 : doc.elementFromPoint(x, y), handleType = getHandleType(edgeUpdaterType, clickedHandle), containerBounds = domNode == null ? void 0 : domNode.getBoundingClientRect();
   if (!containerBounds || !handleType)
     return;
-  let connectionPosition = getEventPosition(event, containerBounds), autoPanStarted = !1, connection = null, isValid = !1, handleDomNode = null;
-  const handleLookup = getHandleLookup({
+  let position = getEventPosition(event, containerBounds), autoPanStarted = !1, connection = null, isValid = !1, handleDomNode = null;
+  const [handleLookup, fromHandleInternal] = getHandleLookup({
     nodeLookup,
     nodeId,
     handleId,
@@ -3099,24 +3096,36 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   function autoPan() {
     if (!autoPanOnConnect || !containerBounds)
       return;
-    const [x2, y2] = calcAutoPan(connectionPosition, containerBounds);
+    const [x2, y2] = calcAutoPan(position, containerBounds, autoPanSpeed);
     panBy2({ x: x2, y: y2 }), autoPanId = requestAnimationFrame(autoPan);
   }
-  connectionStartHandle = {
+  const fromHandle = {
+    ...fromHandleInternal,
     nodeId,
-    handleId,
-    type: handleType
-  }, updateConnection({
-    connectionPosition,
-    connectionStatus: null,
-    // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
-    connectionStartHandle,
-    connectionEndHandle: null
-  }), onConnectStart == null || onConnectStart(event, { nodeId, handleId, handleType });
+    type: handleType,
+    position: fromHandleInternal.position
+  }, fromNodeInternal = nodeLookup.get(nodeId), newConnection = {
+    inProgress: !0,
+    isValid: null,
+    from: getHandlePosition(fromNodeInternal, fromHandle, Position.Left, !0),
+    fromHandle,
+    fromPosition: fromHandle.position,
+    fromNode: fromNodeInternal,
+    to: position,
+    toHandle: null,
+    toPosition: oppositePosition[fromHandle.position],
+    toNode: null
+  };
+  updateConnection(newConnection);
+  let previousConnection = newConnection;
+  onConnectStart == null || onConnectStart(event, { nodeId, handleId, handleType });
   function onPointerMove(event2) {
-    getConnectionStartHandle() || onPointerUp(event2);
+    if (!getFromHandle() || !fromHandle) {
+      onPointerUp(event2);
+      return;
+    }
     const transform2 = getTransform();
-    connectionPosition = getEventPosition(event2, containerBounds), closestHandle = getClosestHandle(pointToRendererPoint(connectionPosition, transform2, !1, [1, 1]), connectionRadius, handleLookup), autoPanStarted || (autoPan(), autoPanStarted = !0);
+    position = getEventPosition(event2, containerBounds), closestHandle = getClosestHandle(pointToRendererPoint(position, transform2, !1, [1, 1]), connectionRadius, handleLookup), autoPanStarted || (autoPan(), autoPanStarted = !0);
     const result = isValidHandle(event2, {
       handle: closestHandle,
       connectionMode,
@@ -3126,29 +3135,32 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       isValidConnection,
       doc,
       lib,
-      flowId
-    });
-    handleDomNode = result.handleDomNode, connection = result.connection, isValid = result.isValid, updateConnection({
-      connectionStartHandle,
-      connectionPosition: closestHandle && isValid ? rendererPointToPoint({
-        x: closestHandle.x,
-        y: closestHandle.y
-      }, transform2) : connectionPosition,
-      connectionStatus: getConnectionStatus(!!closestHandle, isValid),
-      connectionEndHandle: result.endHandle
+      flowId,
+      handleLookup
     });
+    handleDomNode = result.handleDomNode, connection = result.connection, isValid = isConnectionValid(!!closestHandle, result.isValid);
+    const newConnection2 = {
+      // from stays the same
+      ...previousConnection,
+      isValid,
+      to: closestHandle && isValid ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform2) : position,
+      toHandle: result.toHandle,
+      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);
   }
   function onPointerUp(event2) {
-    (closestHandle || handleDomNode) && connection && isValid && (onConnect == null || onConnect(connection)), onConnectEnd == null || onConnectEnd(event2), edgeUpdaterType && (onEdgeUpdateEnd == null || onEdgeUpdateEnd(event2)), cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, handleDomNode = null, connectionStartHandle = null, doc.removeEventListener("mousemove", onPointerMove), doc.removeEventListener("mouseup", onPointerUp), doc.removeEventListener("touchmove", onPointerMove), doc.removeEventListener("touchend", onPointerUp);
+    (closestHandle || handleDomNode) && connection && isValid && (onConnect == null || onConnect(connection)), onConnectEnd == null || onConnectEnd(event2), edgeUpdaterType && (onReconnectEnd == null || 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);
   }
   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 }) {
+function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, handleLookup }) {
   const isTarget = fromType === "target", handleDomNode = handle ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle == null ? void 0 : handle.nodeId}-${handle == null ? void 0 : handle.id}-${handle == null ? void 0 : handle.type}"]`) : null, { x, y } = getEventPosition(event), handleBelow = doc.elementFromPoint(x, y), handleToCheck = handleBelow != null && handleBelow.classList.contains(`${lib}-flow__handle`) ? handleBelow : handleDomNode, result = {
     handleDomNode: handleToCheck,
     isValid: !1,
     connection: null,
-    endHandle: null
+    toHandle: null
   };
   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");
@@ -3160,11 +3172,14 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
       target: isTarget ? fromNodeId : handleNodeId,
       targetHandle: isTarget ? fromHandleId : handleId
     };
-    result.connection = connection, connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId) && (result.endHandle = {
-      nodeId: handleNodeId,
-      handleId,
-      type: handleType
-    }, result.isValid = isValidConnection(connection));
+    result.connection = connection;
+    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
+    if (result.isValid = isValid && isValidConnection(connection), handleLookup) {
+      const toHandle = handleLookup.find((h) => h.id === handleId && h.nodeId === handleNodeId && h.type === handleType);
+      toHandle && (result.toHandle = {
+        ...toHandle
+      });
+    }
   }
   return result;
 }
@@ -3225,7 +3240,11 @@ const viewChanged = (prevViewport, eventViewport) => prevViewport.x !== eventVie
   x: transform2.x,
   y: transform2.y,
   zoom: transform2.k
-}), viewportToTransform = ({ x, y, zoom: zoom2 }) => identity.translate(x, y).scale(zoom2), isWrappedWithClass = (event, className) => event.target.closest(`.${className}`), isRightClickPan = (panOnDrag, usedButton) => usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2), getD3Transition = (selection2, duration = 0) => typeof duration == "number" && duration > 0 ? selection2.transition().duration(duration) : selection2, wheelDelta = (event) => {
+}), viewportToTransform = ({ x, y, zoom: zoom2 }) => identity.translate(x, y).scale(zoom2), isWrappedWithClass = (event, className) => event.target.closest(`.${className}`), isRightClickPan = (panOnDrag, usedButton) => usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2), getD3Transition = (selection2, duration = 0, onEnd = () => {
+}) => {
+  const hasDuration = typeof duration == "number" && duration > 0;
+  return hasDuration || onEnd(), hasDuration ? selection2.transition().duration(duration).on("end", onEnd) : selection2;
+}, wheelDelta = (event) => {
   const factor = event.ctrlKey && isMacOs() ? 10 : 1;
   return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 2e-3) * factor;
 };
@@ -3308,7 +3327,7 @@ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, pan
     return (!event.ctrlKey || event.type === "wheel") && buttonAllowed;
   };
 }
-function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onTransformChange, onDraggingChange }) {
+function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onTransformChange, onDraggingChange }) {
   const zoomPanValues = {
     isZoomingOrPanning: !1,
     usedRightMouseButton: !1,
@@ -3317,7 +3336,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     timerId: void 0,
     panScrollTimeout: void 0,
     isPanScrolling: !1
-  }, bbox = domNode.getBoundingClientRect(), d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent), d3Selection = select(domNode).call(d3ZoomInstance);
+  }, bbox = domNode.getBoundingClientRect(), d3ZoomInstance = zoom().clickDistance(!isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance).scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent), d3Selection = select(domNode).call(d3ZoomInstance);
   setViewportConstrained({
     x: viewport.x,
     y: viewport.y,
@@ -3329,7 +3348,9 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
   const d3ZoomHandler = d3Selection.on("wheel.zoom"), d3DblClickZoomHandler = d3Selection.on("dblclick.zoom");
   d3ZoomInstance.wheelDelta(wheelDelta);
   function setTransform(transform2, options) {
-    d3Selection && (d3ZoomInstance == null || d3ZoomInstance.transform(getD3Transition(d3Selection, options == null ? void 0 : options.duration), transform2));
+    return d3Selection ? new Promise((resolve) => {
+      d3ZoomInstance == null || d3ZoomInstance.transform(getD3Transition(d3Selection, options == null ? void 0 : options.duration, () => resolve(!0)), transform2);
+    }) : Promise.resolve(!1);
   }
   function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib }) {
     userSelectionActive && !zoomPanValues.isZoomingOrPanning && destroy();
@@ -3391,13 +3412,13 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
   function destroy() {
     d3ZoomInstance.on("zoom", null);
   }
-  function setViewportConstrained(viewport2, extent, translateExtent2) {
+  async function setViewportConstrained(viewport2, extent, translateExtent2) {
     const nextTransform = viewportToTransform(viewport2), contrainedTransform = d3ZoomInstance == null ? void 0 : d3ZoomInstance.constrain()(nextTransform, extent, translateExtent2);
-    return contrainedTransform && setTransform(contrainedTransform), contrainedTransform;
+    return contrainedTransform && await setTransform(contrainedTransform), new Promise((resolve) => resolve(contrainedTransform));
   }
-  function setViewport(viewport2, options) {
+  async function setViewport(viewport2, options) {
     const nextTransform = viewportToTransform(viewport2);
-    return setTransform(nextTransform, options), nextTransform;
+    return await setTransform(nextTransform, options), new Promise((resolve) => resolve(nextTransform));
   }
   function syncViewport(viewport2) {
     if (d3Selection) {
@@ -3410,10 +3431,14 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     return { x: transform$1.x, y: transform$1.y, zoom: transform$1.k };
   }
   function scaleTo(zoom2, options) {
-    d3Selection && (d3ZoomInstance == null || d3ZoomInstance.scaleTo(getD3Transition(d3Selection, options == null ? void 0 : options.duration), zoom2));
+    return d3Selection ? new Promise((resolve) => {
+      d3ZoomInstance == null || d3ZoomInstance.scaleTo(getD3Transition(d3Selection, options == null ? void 0 : options.duration, () => resolve(!0)), zoom2);
+    }) : Promise.resolve(!1);
   }
   function scaleBy(factor, options) {
-    d3Selection && (d3ZoomInstance == null || d3ZoomInstance.scaleBy(getD3Transition(d3Selection, options == null ? void 0 : options.duration), factor));
+    return d3Selection ? new Promise((resolve) => {
+      d3ZoomInstance == null || d3ZoomInstance.scaleBy(getD3Transition(d3Selection, options == null ? void 0 : options.duration, () => resolve(!0)), factor);
+    }) : Promise.resolve(!1);
   }
   function setScaleExtent(scaleExtent) {
     d3ZoomInstance == null || d3ZoomInstance.scaleExtent(scaleExtent);
@@ -3421,6 +3446,10 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
   function setTranslateExtent(translateExtent2) {
     d3ZoomInstance == null || d3ZoomInstance.translateExtent(translateExtent2);
   }
+  function setClickDistance(distance2) {
+    const validDistance = !isNumeric(distance2) || distance2 < 0 ? 0 : distance2;
+    d3ZoomInstance == null || d3ZoomInstance.clickDistance(validDistance);
+  }
   return {
     update,
     destroy,
@@ -3431,7 +3460,8 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     scaleBy,
     setScaleExtent,
     setTranslateExtent,
-    syncViewport
+    syncViewport,
+    setClickDistance
   };
 }
 var ResizeControlVariant;
@@ -3536,14 +3566,13 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     const controlDirection = getControlDirection(controlPosition);
     let node, childNodes = [], parentNode, parentExtent, childExtent;
     const dragHandler = drag().on("start", (event) => {
-      var _a, _b;
       const { nodeLookup, transform: transform2, snapGrid, snapToGrid, nodeOrigin } = getStoreItems();
       if (node = nodeLookup.get(nodeId), !node)
         return;
       const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
       prevValues = {
-        width: ((_a = node.measured) == null ? void 0 : _a.width) ?? 0,
-        height: ((_b = node.measured) == null ? void 0 : _b.height) ?? 0,
+        width: node.measured.width ?? 0,
+        height: node.measured.height ?? 0,
         x: node.position.x ?? 0,
         y: node.position.y ?? 0
       }, startValues = {
@@ -3551,7 +3580,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         pointerX: xSnapped,
         pointerY: ySnapped,
         aspectRatio: prevValues.width / prevValues.height
-      }, parentNode = void 0, (node.extent === "parent" || node.expandParent) && (parentNode = nodeLookup.get(node.parentId), parentNode && node.extent === "parent" && (parentExtent = nodeToParentExtent(parentNode))), childNodes = [], childExtent = void 0;
+      }, parentNode = void 0, node.parentId && (node.extent === "parent" || node.expandParent) && (parentNode = nodeLookup.get(node.parentId), parentExtent = parentNode && node.extent === "parent" ? nodeToParentExtent(parentNode) : void 0), childNodes = [], childExtent = void 0;
       for (const [childId, child] of nodeLookup)
         if (child.parentId === nodeId && (childNodes.push({
           id: childId,
@@ -3572,7 +3601,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
       const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x !== prevX && isWidthChange, isYPosChange = y !== prevY && isHeightChange;
       if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange)
         return;
-      if ((isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) && (change.x = isXPosChange ? x : prevValues.x, change.y = isYPosChange ? y : prevValues.y, prevValues.x = change.x, prevValues.y = change.y, parentNode && node.expandParent && (change.x && change.x < 0 && (prevValues.x = 0, startValues.x = startValues.x - change.x), change.y && change.y < 0 && (prevValues.y = 0, startValues.y = startValues.y - change.y)), childNodes.length > 0)) {
+      if ((isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] === 1) && (change.x = isXPosChange ? x : prevValues.x, change.y = isYPosChange ? y : prevValues.y, prevValues.x = change.x, prevValues.y = change.y, childNodes.length > 0)) {
         const xChange = x - prevX, yChange = y - prevY;
         for (const childNode of childNodes)
           childNode.position = {
@@ -3580,7 +3609,12 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight)
           }, childChanges.push(childNode);
       }
-      (isWidthChange || isHeightChange) && (change.width = isWidthChange ? width : prevValues.width, change.height = isHeightChange ? height : prevValues.height, prevValues.width = change.width, prevValues.height = change.height);
+      if ((isWidthChange || isHeightChange) && (change.width = isWidthChange ? width : prevValues.width, change.height = isHeightChange ? height : prevValues.height, prevValues.width = change.width, prevValues.height = change.height), parentNode && node.expandParent) {
+        const xLimit = nodeOrigin[0] * (change.width ?? 0);
+        change.x && change.x < xLimit && (prevValues.x = xLimit, startValues.x = startValues.x - (change.x - xLimit));
+        const yLimit = nodeOrigin[1] * (change.height ?? 0);
+        change.y && change.y < yLimit && (prevValues.y = yLimit, startValues.y = startValues.y - (change.y - yLimit));
+      }
       const direction = getResizeDirection({
         width: prevValues.width,
         prevWidth,
@@ -3630,23 +3664,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$q = (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$p = (s) => s.ariaLiveMessage;
 function AriaLiveMessage({ rfId }) {
-  const ariaLiveMessage = useStore(selector$q);
+  const ariaLiveMessage = useStore(selector$p);
   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$p = (s) => s.userSelectionActive ? "none" : "all";
+const selector$o = (s) => s.userSelectionActive ? "none" : "all";
 function Panel({ position = "top-left", children: children2, className, style: style2, ...rest }) {
-  const pointerEvents = useStore(selector$p), positionClasses = `${position}`.split("-");
+  const pointerEvents = useStore(selector$o), 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 != null && 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$o = (s) => {
+const selector$n = (s) => {
   const selectedNodes = [], selectedEdges = [];
   for (const [, node] of s.nodeLookup)
     node.selected && selectedNodes.push(node.internals.userNode);
@@ -3658,7 +3692,7 @@ function areEqual(a, b) {
   return shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId));
 }
 function SelectionListenerInner({ onSelectionChange }) {
-  const store = useStoreApi(), { selectedNodes, selectedEdges } = useStore(selector$o, areEqual);
+  const store = useStoreApi(), { selectedNodes, selectedEdges } = useStore(selector$n, areEqual);
   return useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
     onSelectionChange == null || onSelectionChange(params), store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
@@ -3683,7 +3717,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "nodesConnectable",
   "nodesFocusable",
   "edgesFocusable",
-  "edgesUpdatable",
+  "edgesReconnectable",
   "elevateNodesOnSelect",
   "elevateEdgesOnSelect",
   "minZoom",
@@ -3722,8 +3756,10 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "selectNodesOnDrag",
   "nodeDragThreshold",
   "onBeforeDelete",
-  "debug"
-], fieldsToTrack = [...reactFlowFieldsToTrack, "rfId"], selector$n = (s) => ({
+  "debug",
+  "autoPanSpeed",
+  "paneClickDistance"
+], fieldsToTrack = [...reactFlowFieldsToTrack, "rfId"], selector$m = (s) => ({
   setNodes: s.setNodes,
   setEdges: s.setEdges,
   setMinZoom: s.setMinZoom,
@@ -3731,7 +3767,8 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   setTranslateExtent: s.setTranslateExtent,
   setNodeExtent: s.setNodeExtent,
   reset: s.reset,
-  setDefaultNodesAndEdges: s.setDefaultNodesAndEdges
+  setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
+  setPaneClickDistance: s.setPaneClickDistance
 }), initPrevValues = {
   // these are values that are also passed directly to other components
   // than the StoreUpdater. We can reduce the number of setStore calls
@@ -3742,10 +3779,11 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   maxZoom: 2,
   elementsSelectable: !0,
   noPanClassName: "nopan",
-  rfId: "1"
+  rfId: "1",
+  paneClickDistance: 0
 };
 function StoreUpdater(props) {
-  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$n, shallow), store = useStoreApi();
+  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore(selector$m, shallow), store = useStoreApi();
   useEffect(() => (setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges), () => {
     previousFields.current = initPrevValues, reset();
   }), []);
@@ -3754,7 +3792,7 @@ function StoreUpdater(props) {
     () => {
       for (const fieldName of fieldsToTrack) {
         const fieldValue = props[fieldName], previousFieldValue = previousFields.current[fieldName];
-        fieldValue !== previousFieldValue && (typeof props[fieldName] > "u" || (fieldName === "nodes" ? setNodes(fieldValue) : fieldName === "edges" ? setEdges(fieldValue) : fieldName === "minZoom" ? setMinZoom(fieldValue) : fieldName === "maxZoom" ? setMaxZoom(fieldValue) : fieldName === "translateExtent" ? setTranslateExtent(fieldValue) : fieldName === "nodeExtent" ? setNodeExtent(fieldValue) : fieldName === "fitView" ? store.setState({ fitViewOnInit: fieldValue }) : fieldName === "fitViewOptions" ? store.setState({ fitViewOnInitOptions: fieldValue }) : store.setState({ [fieldName]: fieldValue })));
+        fieldValue !== previousFieldValue && (typeof props[fieldName] > "u" || (fieldName === "nodes" ? setNodes(fieldValue) : fieldName === "edges" ? setEdges(fieldValue) : fieldName === "minZoom" ? setMinZoom(fieldValue) : fieldName === "maxZoom" ? setMaxZoom(fieldValue) : fieldName === "translateExtent" ? setTranslateExtent(fieldValue) : fieldName === "nodeExtent" ? setNodeExtent(fieldValue) : fieldName === "paneClickDistance" ? setPaneClickDistance(fieldValue) : fieldName === "fitView" ? store.setState({ fitViewOnInit: fieldValue }) : fieldName === "fitViewOptions" ? store.setState({ fitViewOnInitOptions: fieldValue }) : store.setState({ [fieldName]: fieldValue })));
       }
       previousFields.current = props;
     },
@@ -3820,53 +3858,52 @@ const useViewportHelper = () => {
   const store = useStoreApi();
   return useMemo(() => ({
     zoomIn: (options) => {
-      var _a;
-      return (_a = store.getState().panZoom) == null ? void 0 : _a.scaleBy(1.2, { duration: options == null ? void 0 : options.duration });
+      const { panZoom } = store.getState();
+      return panZoom ? panZoom.scaleBy(1.2, { duration: options == null ? void 0 : options.duration }) : Promise.resolve(!1);
     },
     zoomOut: (options) => {
-      var _a;
-      return (_a = store.getState().panZoom) == null ? void 0 : _a.scaleBy(1 / 1.2, { duration: options == null ? void 0 : options.duration });
+      const { panZoom } = store.getState();
+      return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options == null ? void 0 : options.duration }) : Promise.resolve(!1);
     },
     zoomTo: (zoomLevel, options) => {
-      var _a;
-      return (_a = store.getState().panZoom) == null ? void 0 : _a.scaleTo(zoomLevel, { duration: options == null ? void 0 : options.duration });
+      const { panZoom } = store.getState();
+      return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options == null ? void 0 : options.duration }) : Promise.resolve(!1);
     },
     getZoom: () => store.getState().transform[2],
-    setViewport: (viewport, options) => {
+    setViewport: async (viewport, options) => {
       const { transform: [tX, tY, tZoom], panZoom } = store.getState();
-      panZoom == null || panZoom.setViewport({
+      return panZoom ? (await panZoom.setViewport({
         x: viewport.x ?? tX,
         y: viewport.y ?? tY,
         zoom: viewport.zoom ?? tZoom
-      }, { duration: options == null ? void 0 : options.duration });
+      }, { duration: options == null ? void 0 : options.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     getViewport: () => {
       const [x, y, zoom2] = store.getState().transform;
       return { x, y, zoom: zoom2 };
     },
     fitView: (options) => {
-      const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
+      const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState(), fitViewNodes = getFitViewNodes(nodeLookup, options);
       return panZoom ? fitView({
-        nodeLookup,
+        nodes: fitViewNodes,
         width,
         height,
-        nodeOrigin,
         minZoom,
         maxZoom,
         panZoom
-      }, options) : !1;
+      }, options) : Promise.resolve(!1);
     },
-    setCenter: (x, y, options) => {
+    setCenter: async (x, y, options) => {
       const { width, height, maxZoom, panZoom } = store.getState(), nextZoom = typeof (options == null ? void 0 : options.zoom) < "u" ? options.zoom : maxZoom, centerX = width / 2 - x * nextZoom, centerY = height / 2 - y * nextZoom;
-      panZoom == null || panZoom.setViewport({
+      return panZoom ? (await panZoom.setViewport({
         x: centerX,
         y: centerY,
         zoom: nextZoom
-      }, { duration: options == null ? void 0 : options.duration });
+      }, { duration: options == null ? void 0 : options.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
-    fitBounds: (bounds, options) => {
+    fitBounds: async (bounds, options) => {
       const { width, height, minZoom, maxZoom, panZoom } = store.getState(), viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, (options == null ? void 0 : options.padding) ?? 0.1);
-      panZoom == null || panZoom.setViewport(viewport, { duration: options == null ? void 0 : options.duration });
+      return panZoom ? (await panZoom.setViewport(viewport, { duration: options == null ? void 0 : options.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     screenToFlowPosition: (clientPosition, options = { snapToGrid: !0 }) => {
       const { transform: transform2, snapGrid, domNode } = store.getState();
@@ -4032,16 +4069,16 @@ function useBatchContext() {
     throw new Error("useBatchContext must be used within a BatchProvider");
   return batchContext;
 }
-const selector$m = (s) => !!s.panZoom;
+const selector$l = (s) => !!s.panZoom;
 function useReactFlow() {
-  const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore(selector$m), generalHelper = useMemo(() => {
+  const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore(selector$l), generalHelper = useMemo(() => {
     const getInternalNode = (id2) => store.getState().nodeLookup.get(id2), setNodes = (payload) => {
       batchContext.nodeQueue.push(payload);
     }, setEdges = (payload) => {
       batchContext.edgeQueue.push(payload);
     }, getNodeRect = (node) => {
       var _a, _b;
-      const { nodeLookup, nodeOrigin } = store.getState(), nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin) : nodeToUse.position, nodeWithPosition = {
+      const { nodeLookup, nodeOrigin } = store.getState(), nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin) : nodeToUse.position, nodeWithPosition = {
         id: nodeToUse.id,
         position,
         width: ((_a = nodeToUse.measured) == null ? void 0 : _a.width) ?? nodeToUse.width,
@@ -4057,7 +4094,7 @@ function useReactFlow() {
         }
         return node;
       }));
-    }, updateEdge2 = (id2, edgeUpdate, options = { replace: !1 }) => {
+    }, updateEdge = (id2, edgeUpdate, options = { replace: !1 }) => {
       setEdges((prevEdges) => prevEdges.map((edge) => {
         if (edge.id === id2) {
           const nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
@@ -4142,9 +4179,9 @@ function useReactFlow() {
           return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
         }, options);
       },
-      updateEdge: updateEdge2,
+      updateEdge,
       updateEdgeData: (id2, dataUpdate, options = { replace: !1 }) => {
-        updateEdge2(id2, (edge) => {
+        updateEdge(id2, (edge) => {
           const nextData = typeof dataUpdate == "function" ? dataUpdate(edge) : dataUpdate;
           return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
         }, options);
@@ -4157,9 +4194,9 @@ function useReactFlow() {
     viewportInitialized
   }), [viewportInitialized]);
 }
-const selected = (item) => item.selected, deleteKeyOptions = { actInsideInputWithModifier: !1 };
+const selected = (item) => item.selected, deleteKeyOptions = { actInsideInputWithModifier: !1 }, win$1 = typeof window < "u" ? window : void 0;
 function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }) {
-  const store = useStoreApi(), { deleteElements } = useReactFlow(), deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions), multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
+  const store = useStoreApi(), { deleteElements } = useReactFlow(), deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions), multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win$1 });
   useEffect(() => {
     if (deleteKeyPressed) {
       const { edges, nodes } = store.getState();
@@ -4194,12 +4231,12 @@ const containerStyle = {
   height: "100%",
   top: 0,
   left: 0
-}, selector$l = (s) => ({
+}, selector$k = (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 }) {
-  const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib } = useStore(selector$l, shallow), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
+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), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
   return useResizeHandler(zoomPane), useEffect(() => {
     if (zoomPane.current) {
       panZoom.current = XYPanZoom({
@@ -4208,6 +4245,7 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
         maxZoom,
         translateExtent,
         viewport: defaultViewport2,
+        paneClickDistance,
         onTransformChange: (transform2) => {
           onViewportChange == null || onViewportChange({ x: transform2[0], y: transform2[1], zoom: transform2[2] }), isControlledViewport || store.setState({ transform: transform2 });
         },
@@ -4270,12 +4308,12 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
     lib
   ]), jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children2 });
 }
-const selector$k = (s) => ({
+const selector$j = (s) => ({
   userSelectionActive: s.userSelectionActive,
   userSelectionRect: s.userSelectionRect
 });
 function UserSelection() {
-  const { userSelectionActive, userSelectionRect } = useStore(selector$k, shallow);
+  const { userSelectionActive, userSelectionRect } = useStore(selector$j, shallow);
   return userSelectionActive && userSelectionRect ? jsx("div", { className: "react-flow__selection react-flow__container", style: {
     width: userSelectionRect.width,
     height: userSelectionRect.height,
@@ -4284,15 +4322,19 @@ function UserSelection() {
 }
 const wrapHandler = (handler, containerRef) => (event) => {
   event.target === containerRef.current && (handler == null || handler(event));
-}, selector$j = (s) => ({
+}, selector$i = (s) => ({
   userSelectionActive: s.userSelectionActive,
   elementsSelectable: s.elementsSelectable,
   dragging: s.paneDragging
 });
-function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
-  const container2 = useRef(null), store = useStoreApi(), prevSelectedNodesCount = useRef(0), prevSelectedEdgesCount = useRef(0), containerBounds = useRef(), edgeIdLookup = useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow), resetUserSelection = () => {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+  const container2 = useRef(null), store = useStoreApi(), prevSelectedNodesCount = useRef(0), prevSelectedEdgesCount = useRef(0), containerBounds = useRef(), edgeIdLookup = useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore(selector$i, shallow), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), selectionInProgress = useRef(!1), resetUserSelection = () => {
     store.setState({ userSelectionActive: !1, userSelectionRect: null }), prevSelectedNodesCount.current = 0, prevSelectedEdgesCount.current = 0;
   }, onClick = (event) => {
+    if (selectionInProgress.current) {
+      selectionInProgress.current = !1;
+      return;
+    }
     onPaneClick == null || onPaneClick(event), store.getState().resetSelectedElements(), store.setState({ nodesSelectionActive: !1 });
   }, onContextMenu = (event) => {
     if (Array.isArray(panOnDrag) && (panOnDrag != null && panOnDrag.includes(2))) {
@@ -4300,14 +4342,14 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       return;
     }
     onPaneContextMenu == null || onPaneContextMenu(event);
-  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onMouseDown = (event) => {
-    var _a, _b;
+  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onPointerDown2 = (event) => {
+    var _a, _b, _c, _d;
     const { resetSelectedElements, domNode, edgeLookup } = store.getState();
-    if (containerBounds.current = domNode == null ? void 0 : domNode.getBoundingClientRect(), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container2.current || !containerBounds.current)
+    if (containerBounds.current = domNode == null ? void 0 : domNode.getBoundingClientRect(), (_b = (_a = event.target) == null ? void 0 : _a.setPointerCapture) == null || _b.call(_a, event.pointerId), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container2.current || !containerBounds.current)
       return;
     edgeIdLookup.current = /* @__PURE__ */ new Map();
     for (const [id2, edge] of edgeLookup)
-      edgeIdLookup.current.set(edge.source, ((_a = edgeIdLookup.current.get(edge.source)) == null ? void 0 : _a.add(id2)) || /* @__PURE__ */ new Set([id2])), edgeIdLookup.current.set(edge.target, ((_b = edgeIdLookup.current.get(edge.target)) == null ? void 0 : _b.add(id2)) || /* @__PURE__ */ new Set([id2]));
+      edgeIdLookup.current.set(edge.source, ((_c = edgeIdLookup.current.get(edge.source)) == null ? void 0 : _c.add(id2)) || /* @__PURE__ */ new Set([id2])), edgeIdLookup.current.set(edge.target, ((_d = edgeIdLookup.current.get(edge.target)) == null ? void 0 : _d.add(id2)) || /* @__PURE__ */ new Set([id2]));
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
     resetSelectedElements(), store.setState({
       userSelectionRect: {
@@ -4319,10 +4361,11 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         y
       }
     }), onSelectionStart == null || onSelectionStart(event);
-  }, onMouseMove = (event) => {
-    const { userSelectionRect, edgeLookup, transform: transform2, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
-    if (!isSelecting || !containerBounds.current || !userSelectionRect)
+  }, onPointerMove = (event) => {
+    const { userSelectionRect, edgeLookup, transform: transform2, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
+    if (!containerBounds.current || !userSelectionRect)
       return;
+    selectionInProgress.current = !0;
     const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current), { startX, startY } = userSelectionRect, nextUserSelectRect = {
       startX,
       startY,
@@ -4330,7 +4373,7 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       y: mouseY < startY ? mouseY : startY,
       width: Math.abs(mouseX - startX),
       height: Math.abs(mouseY - startY)
-    }, selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform2, selectionMode === SelectionMode.Partial, !0, nodeOrigin), selectedEdgeIds = /* @__PURE__ */ new Set(), selectedNodeIds = /* @__PURE__ */ new Set();
+    }, selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform2, selectionMode === SelectionMode.Partial, !0), selectedEdgeIds = /* @__PURE__ */ new Set(), selectedNodeIds = /* @__PURE__ */ new Set();
     for (const selectedNode of selectedNodes) {
       selectedNodeIds.add(selectedNode.id);
       const edgeIds = edgeIdLookup.current.get(selectedNode.id);
@@ -4353,15 +4396,15 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       userSelectionActive: !0,
       nodesSelectionActive: !1
     });
-  }, onMouseUp = (event) => {
+  }, onPointerUp = (event) => {
+    var _a, _b;
     if (event.button !== 0)
       return;
+    (_b = (_a = event.target) == null ? void 0 : _a.releasePointerCapture) == null || _b.call(_a, event.pointerId);
     const { userSelectionRect } = store.getState();
-    !userSelectionActive && userSelectionRect && event.target === container2.current && (onClick == null || onClick(event)), store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), resetUserSelection(), onSelectionEnd == null || onSelectionEnd(event);
-  }, onMouseLeave = (event) => {
-    userSelectionActive && (store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), onSelectionEnd == null || onSelectionEnd(event)), resetUserSelection();
-  }, hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-  return jsxs("div", { className: cc(["react-flow__pane", { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container2), onContextMenu: wrapHandler(onContextMenu, container2), onWheel: wrapHandler(onWheel, container2), onMouseEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : void 0, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : void 0, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container2, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
+    !userSelectionActive && userSelectionRect && event.target === container2.current && (onClick == null || onClick(event)), prevSelectedNodesCount.current > 0 && store.setState({ nodesSelectionActive: !0 }), resetUserSelection(), onSelectionEnd == null || onSelectionEnd(event), selectionKeyPressed && (selectionInProgress.current = !1);
+  };
+  return jsxs("div", { className: cc(["react-flow__pane", { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container2), onContextMenu: wrapHandler(onContextMenu, container2), onWheel: wrapHandler(onWheel, container2), onPointerEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown2 : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : void 0, onPointerLeave: onPaneMouseLeave, ref: container2, 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);
@@ -4438,24 +4481,24 @@ function useMoveSelectedNodes() {
 }
 const NodeIdContext = createContext(null), Provider = NodeIdContext.Provider;
 NodeIdContext.Consumer;
-const useNodeId = () => useContext(NodeIdContext), selector$i = (s) => ({
+const useNodeId = () => useContext(NodeIdContext), selector$h = (s) => ({
   connectOnClick: s.connectOnClick,
   noPanClassName: s.noPanClassName,
   rfId: s.rfId
 }), connectingSelector = (nodeId, handleId, type) => (state) => {
-  const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, connectionMode, connectionStatus } = state, connectingTo = (endHandle == null ? void 0 : endHandle.nodeId) === nodeId && (endHandle == null ? void 0 : endHandle.handleId) === handleId && (endHandle == null ? void 0 : endHandle.type) === type;
+  const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state, { fromHandle, toHandle, isValid } = connection, connectingTo = (toHandle == null ? void 0 : toHandle.nodeId) === nodeId && (toHandle == null ? void 0 : toHandle.id) === handleId && (toHandle == null ? void 0 : toHandle.type) === type;
   return {
-    connectingFrom: (startHandle == null ? void 0 : startHandle.nodeId) === nodeId && (startHandle == null ? void 0 : startHandle.handleId) === handleId && (startHandle == null ? void 0 : startHandle.type) === type,
+    connectingFrom: (fromHandle == null ? void 0 : fromHandle.nodeId) === nodeId && (fromHandle == null ? void 0 : fromHandle.id) === handleId && (fromHandle == null ? void 0 : fromHandle.type) === type,
     connectingTo,
-    clickConnecting: (clickHandle == null ? void 0 : clickHandle.nodeId) === nodeId && (clickHandle == null ? void 0 : clickHandle.handleId) === handleId && (clickHandle == null ? void 0 : clickHandle.type) === type,
-    isPossibleEndHandle: connectionMode === ConnectionMode.Strict ? (startHandle == null ? void 0 : startHandle.type) !== type : nodeId !== (startHandle == null ? void 0 : startHandle.nodeId) || handleId !== (startHandle == null ? void 0 : startHandle.handleId),
-    connectionInProcess: !!startHandle,
-    valid: connectingTo && connectionStatus === "valid"
+    clickConnecting: (clickHandle == null ? void 0 : clickHandle.nodeId) === nodeId && (clickHandle == null ? void 0 : clickHandle.id) === handleId && (clickHandle == null ? void 0 : clickHandle.type) === type,
+    isPossibleEndHandle: connectionMode === ConnectionMode.Strict ? (fromHandle == null ? void 0 : fromHandle.type) !== type : nodeId !== (fromHandle == null ? void 0 : fromHandle.nodeId) || handleId !== (fromHandle == null ? void 0 : fromHandle.id),
+    connectionInProcess: !!fromHandle,
+    valid: connectingTo && isValid
   };
 };
 function HandleComponent({ type = "source", position = Position.Top, isValidConnection, isConnectable = !0, isConnectableStart = !0, isConnectableEnd = !0, id: id2, onConnect, children: children2, className, onMouseDown, onTouchStart, ...rest }, ref) {
   var _a, _b;
-  const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
+  const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore(selector$h, shallow), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
   nodeId || (_b = (_a = store.getState()).onError) == null || _b.call(_a, "010", errorMessages.error010());
   const onConnectExtended = (params) => {
     const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState(), edgeParams = {
@@ -4492,7 +4535,8 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
         onConnect: onConnectExtended,
         isValidConnection: isValidConnection || currentStore.isValidConnection,
         getTransform: () => store.getState().transform,
-        getConnectionStartHandle: () => store.getState().connectionStartHandle
+        getFromHandle: () => store.getState().connection.fromHandle,
+        autoPanSpeed: currentStore.autoPanSpeed
       });
     }
     isMouseTriggered ? onMouseDown == null || onMouseDown(event) : onTouchStart == null || onTouchStart(event);
@@ -4501,7 +4545,7 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
     if (!nodeId || !connectionClickStartHandle && !isConnectableStart)
       return;
     if (!connectionClickStartHandle) {
-      onClickConnectStart == null || onClickConnectStart(event.nativeEvent, { nodeId, handleId, handleType: type }), store.setState({ connectionClickStartHandle: { nodeId, type, handleId } });
+      onClickConnectStart == null || onClickConnectStart(event.nativeEvent, { nodeId, handleId, handleType: type }), store.setState({ connectionClickStartHandle: { nodeId, type, id: handleId } });
       return;
     }
     const doc = getHostForElement(event.target), isValidConnectionHandler = isValidConnection || isValidConnectionStore, { connection, isValid } = XYHandle.isValid(event.nativeEvent, {
@@ -4512,7 +4556,7 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
       },
       connectionMode,
       fromNodeId: connectionClickStartHandle.nodeId,
-      fromHandleId: connectionClickStartHandle.handleId || null,
+      fromHandleId: connectionClickStartHandle.id || null,
       fromType: connectionClickStartHandle.type,
       isValidConnection: isValidConnectionHandler,
       flowId,
@@ -4577,9 +4621,8 @@ function getNodeInlineStyleDimensions(node) {
     height: node.height ?? ((_d = node.style) == null ? void 0 : _d.height)
   };
 }
-const selector$h = (s) => {
+const selector$g = (s) => {
   const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
-    nodeOrigin: s.nodeOrigin,
     filter: (node) => !!node.selected
   });
   return {
@@ -4590,7 +4633,7 @@ const selector$h = (s) => {
   };
 };
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
-  const store = useStoreApi(), { width, height, transformString, userSelectionActive } = useStore(selector$h, shallow), moveSelectedNodes = useMoveSelectedNodes(), nodeRef = useRef(null);
+  const store = useStoreApi(), { width, height, transformString, userSelectionActive } = useStore(selector$g, shallow), moveSelectedNodes = useMoveSelectedNodes(), nodeRef = useRef(null);
   if (useEffect(() => {
     var _a;
     disableKeyboardA11y || (_a = nodeRef.current) == null || _a.focus({
@@ -4616,19 +4659,19 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     height
   } }) });
 }
-const selector$g = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
-function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, 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$g), selectionKeyPressed = useKeyPress(selectionKeyCode), panActivationKeyPressed = useKeyPress(panActivationKeyCode), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, isSelecting = selectionKeyPressed || userSelectionActive || selectionOnDrag && panOnDrag !== !0;
-  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, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
+const win = typeof window < "u" ? window : void 0, selector$f = (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, isSelecting = selectionKeyPressed || userSelectionActive || selectionOnDrag && panOnDrag !== !0;
+  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, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
-const FlowRenderer = memo(FlowRendererComponent), selector$f = (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$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());
 function useVisibleNodeIds(onlyRenderVisible) {
-  return useStore(useCallback(selector$f(onlyRenderVisible), [onlyRenderVisible]), shallow);
+  return useStore(useCallback(selector$e(onlyRenderVisible), [onlyRenderVisible]), shallow);
 }
-const selector$e = (s) => s.updateNodeInternals;
+const selector$d = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-  const updateNodeInternals2 = useStore(selector$e), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries2) => {
+  const updateNodeInternals2 = useStore(selector$d), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries2) => {
     const updates = /* @__PURE__ */ new Map();
     entries2.forEach((entry) => {
       const id2 = entry.target.getAttribute("data-id");
@@ -4656,7 +4699,7 @@ function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver }) {
     }
   }, [node.id, nodeType, node.sourcePosition, node.targetPosition]), nodeRef;
 }
-function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes: nodeTypes2, nodeExtent, nodeOrigin, onError }) {
+function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes: nodeTypes2, nodeExtent, onError }) {
   const { node, internals, isParent } = useStore((s) => {
     const node2 = s.nodeLookup.get(id2), isParent2 = s.parentLookup.has(id2);
     return {
@@ -4677,11 +4720,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
   }), moveSelectedNodes = useMoveSelectedNodes();
   if (node.hidden)
     return null;
-  const nodeDimensions = getNodeDimensions(node), inlineDimensions = getNodeInlineStyleDimensions(node), clampedPosition = nodeExtent ? clampPosition(internals.positionAbsolute, nodeExtent) : internals.positionAbsolute, positionWithOrigin = getPositionWithOrigin({
-    ...clampedPosition,
-    ...nodeDimensions,
-    origin: node.origin || nodeOrigin
-  }), hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave, onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...internals.userNode }) : void 0, onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...internals.userNode }) : void 0, onMouseLeaveHandler = onMouseLeave ? (event) => onMouseLeave(event, { ...internals.userNode }) : void 0, onContextMenuHandler = onContextMenu ? (event) => onContextMenu(event, { ...internals.userNode }) : void 0, onDoubleClickHandler = onDoubleClick ? (event) => onDoubleClick(event, { ...internals.userNode }) : void 0, onSelectNodeHandler = (event) => {
+  const nodeDimensions = getNodeDimensions(node), inlineDimensions = getNodeInlineStyleDimensions(node), clampedPosition = nodeExtent ? clampPosition(internals.positionAbsolute, nodeExtent) : internals.positionAbsolute, hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave, onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...internals.userNode }) : void 0, onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...internals.userNode }) : void 0, onMouseLeaveHandler = onMouseLeave ? (event) => onMouseLeave(event, { ...internals.userNode }) : void 0, onContextMenuHandler = onContextMenu ? (event) => onContextMenu(event, { ...internals.userNode }) : void 0, onDoubleClickHandler = onDoubleClick ? (event) => onDoubleClick(event, { ...internals.userNode }) : void 0, onSelectNodeHandler = (event) => {
     const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
     isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0) && handleNodeClick({
       id: id2,
@@ -4722,14 +4761,14 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     }
   ]), ref: nodeRef, style: {
     zIndex: internals.z,
-    transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
+    transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
     pointerEvents: hasPointerEvents ? "all" : "none",
     visibility: hasDimensions ? "visible" : "hidden",
     ...node.style,
     ...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$d = (s) => ({
+const selector$c = (s) => ({
   nodesDraggable: s.nodesDraggable,
   nodesConnectable: s.nodesConnectable,
   nodesFocusable: s.nodesFocusable,
@@ -4737,7 +4776,7 @@ const selector$d = (s) => ({
   onError: s.onError
 });
 function NodeRendererComponent(props) {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$d, shallow), nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements), resizeObserver = useResizeObserver();
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$c, shallow), 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
@@ -4762,7 +4801,7 @@ function NodeRendererComponent(props) {
     //   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.
-    jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver, nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError }, nodeId)
+    jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, 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, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver, nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError }, nodeId)
   )) });
 }
 NodeRendererComponent.displayName = "NodeRenderer";
@@ -4961,15 +5000,15 @@ const builtinEdgeTypes = {
 function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type }) {
   return jsx("circle", { onMouseDown, onMouseEnter, onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" });
 }
-function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, setUpdating, setUpdateHover }) {
+function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover }) {
   const store = useStoreApi(), handleEdgeUpdater = (event, isSourceHandle) => {
     if (event.button !== 0)
       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;
-    setUpdating(!0), onEdgeUpdateStart == null || onEdgeUpdateStart(event, edge, handleType);
-    const _onEdgeUpdateEnd = (evt) => {
-      setUpdating(!1), onEdgeUpdateEnd == null || onEdgeUpdateEnd(evt, edge, handleType);
-    }, onConnectEdge = (connection) => onEdgeUpdate == null ? void 0 : onEdgeUpdate(edge, connection);
+    setReconnecting(!0), onReconnectStart == null || onReconnectStart(event, edge, handleType);
+    const _onReconnectEnd = (evt) => {
+      setReconnecting(!1), onReconnectEnd == null || onReconnectEnd(evt, edge, handleType);
+    }, onConnectEdge = (connection) => onReconnect == null ? void 0 : onReconnect(edge, connection);
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
       connectionMode,
@@ -4988,21 +5027,21 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
       onConnect: onConnectEdge,
       onConnectStart,
       onConnectEnd,
-      onEdgeUpdateEnd: _onEdgeUpdateEnd,
+      onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
-      getConnectionStartHandle: () => store.getState().connectionStartHandle
+      getFromHandle: () => store.getState().connection.fromHandle
     });
-  }, onEdgeUpdaterSourceMouseDown = (event) => handleEdgeUpdater(event, !0), onEdgeUpdaterTargetMouseDown = (event) => handleEdgeUpdater(event, !1), onEdgeUpdaterMouseEnter = () => setUpdateHover(!0), onEdgeUpdaterMouseOut = () => setUpdateHover(!1);
-  return jsxs(Fragment, { children: [(isUpdatable === "source" || isUpdatable === !0) && jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterSourceMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "source" }), (isUpdatable === "target" || isUpdatable === !0) && jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterTargetMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "target" })] });
+  }, onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, !0), onReconnectTargetMouseDown = (event) => handleEdgeUpdater(event, !1), onReconnectMouseEnter = () => setUpdateHover(!0), onReconnectMouseOut = () => setUpdateHover(!1);
+  return jsxs(Fragment, { children: [(isReconnectable === "source" || isReconnectable === !0) && jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: reconnectRadius, onMouseDown: onReconnectSourceMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "source" }), (isReconnectable === "target" || isReconnectable === !0) && jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: reconnectRadius, onMouseDown: onReconnectTargetMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "target" })] });
 }
-function EdgeWrapper({ id: id2, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes: edgeTypes2, noPanClassName, onError, disableKeyboardA11y }) {
+function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes: edgeTypes2, noPanClassName, onError, disableKeyboardA11y }) {
   let edge = useStore((s) => s.edgeLookup.get(id2));
   const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
   edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
   let edgeType = edge.type || "default", EdgeComponent = (edgeTypes2 == null ? void 0 : edgeTypes2[edgeType]) || builtinEdgeTypes[edgeType];
   EdgeComponent === void 0 && (onError == null || onError("011", errorMessages.error011(edgeType)), edgeType = "default", EdgeComponent = builtinEdgeTypes.default);
-  const isFocusable = !!(edge.focusable || edgesFocusable && typeof edge.focusable > "u"), isUpdatable = typeof onEdgeUpdate < "u" && (edge.updatable || edgesUpdatable && typeof edge.updatable > "u"), isSelectable = !!(edge.selectable || elementsSelectable && typeof edge.selectable > "u"), edgeRef = useRef(null), [updateHover, setUpdateHover] = useState(!1), [updating, setUpdating] = useState(!1), store = useStoreApi(), { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(useCallback((store2) => {
+  const isFocusable = !!(edge.focusable || edgesFocusable && typeof edge.focusable > "u"), isReconnectable = typeof onReconnect < "u" && (edge.reconnectable || edgesReconnectable && typeof edge.reconnectable > "u"), isSelectable = !!(edge.selectable || elementsSelectable && typeof edge.selectable > "u"), edgeRef = useRef(null), [updateHover, setUpdateHover] = useState(!1), [reconnecting, setReconnecting] = useState(!1), store = useStoreApi(), { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(useCallback((store2) => {
     const sourceNode = store2.nodeLookup.get(edge.source), targetNode = store2.nodeLookup.get(edge.target);
     if (!sourceNode || !targetNode)
       return {
@@ -5064,25 +5103,25 @@ function EdgeWrapper({ id: id2, edgesFocusable, edgesUpdatable, elementsSelectab
       updating: updateHover,
       selectable: isSelectable
     }
-  ]), 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: [!updating && 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 }), isUpdatable && jsx(EdgeUpdateAnchors, { edge, isUpdatable, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, setUpdateHover, setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle })] }) });
+  ]), 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$c = (s) => ({
+const selector$b = (s) => ({
   width: s.width,
   height: s.height,
   edgesFocusable: s.edgesFocusable,
-  edgesUpdatable: s.edgesUpdatable,
+  edgesReconnectable: s.edgesReconnectable,
   elementsSelectable: s.elementsSelectable,
   connectionMode: s.connectionMode,
   onError: s.onError
 });
-function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes: edgeTypes2, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, disableKeyboardA11y }) {
-  const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector$c, shallow), 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, edgesUpdatable, elementsSelectable, noPanClassName, onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, onError, edgeTypes: edgeTypes2, disableKeyboardA11y }, id2))] });
+function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes: edgeTypes2, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y }) {
+  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$b, shallow), 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: edgeTypes2, disableKeyboardA11y }, id2))] });
 }
 EdgeRendererComponent.displayName = "EdgeRenderer";
-const EdgeRenderer = memo(EdgeRendererComponent), selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const EdgeRenderer = memo(EdgeRendererComponent), selector$a = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children: children2 }) {
-  const transform2 = useStore(selector$b);
+  const transform2 = useStore(selector$a);
   return jsx("div", { className: "react-flow__viewport xyflow__viewport react-flow__container", style: { transform: transform2 }, children: children2 });
 }
 function useOnInitHandler(onInit) {
@@ -5091,70 +5130,68 @@ function useOnInitHandler(onInit) {
     !isInitialized.current && rfInstance.viewportInitialized && onInit && (setTimeout(() => onInit(rfInstance), 1), isInitialized.current = !0);
   }, [onInit, rfInstance.viewportInitialized]);
 }
-const selector$a = (state) => {
+const selector$9 = (state) => {
   var _a;
   return (_a = state.panZoom) == null ? void 0 : _a.syncViewport;
 };
 function useViewportSync(viewport) {
-  const syncViewport = useStore(selector$a), store = useStoreApi();
+  const syncViewport = useStore(selector$9), store = useStoreApi();
   return useEffect(() => {
     viewport && (syncViewport == null || syncViewport(viewport), store.setState({ transform: [viewport.x, viewport.y, viewport.zoom] }));
   }, [viewport, syncViewport]), null;
 }
-const oppositePosition = {
-  [Position.Left]: Position.Right,
-  [Position.Right]: Position.Left,
-  [Position.Top]: Position.Bottom,
-  [Position.Bottom]: Position.Top
-}, ConnectionLine = ({ nodeId, handleType, style: style2, type = ConnectionLineType.Bezier, CustomComponent, connectionStatus }) => {
-  const { fromNode, handleId, toX, toY, connectionMode } = useStore(useCallback((s) => {
-    var _a;
-    return {
-      fromNode: s.nodeLookup.get(nodeId),
-      handleId: (_a = s.connectionStartHandle) == null ? void 0 : _a.handleId,
-      toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
-      toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
-      connectionMode: s.connectionMode
-    };
-  }, [nodeId]), shallow), fromHandleBounds = fromNode == null ? void 0 : fromNode.internals.handleBounds;
-  let handleBounds = fromHandleBounds == null ? void 0 : fromHandleBounds[handleType];
-  if (connectionMode === ConnectionMode.Loose && (handleBounds = handleBounds || (fromHandleBounds == null ? void 0 : fromHandleBounds[handleType === "source" ? "target" : "source"])), !fromNode || !handleBounds)
-    return null;
-  const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0], fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2, fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0, fromX = fromNode.internals.positionAbsolute.x + fromHandleX, fromY = fromNode.internals.positionAbsolute.y + fromHandleY, fromPosition = fromHandle == null ? void 0 : fromHandle.position, toPosition = fromPosition ? oppositePosition[fromPosition] : null;
-  if (!fromPosition || !toPosition)
-    return 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);
+}
+const selector$7 = (s) => ({
+  nodesConnectable: s.nodesConnectable,
+  isValid: s.connection.isValid,
+  inProgress: s.connection.inProgress,
+  width: s.width,
+  height: s.height
+});
+function ConnectionLineWrapper({ containerStyle: containerStyle2, style: style2, type, component }) {
+  const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector$7, shallow);
+  return !(width && nodesConnectable && inProgress) ? null : jsx("svg", { style: containerStyle2, width, height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(["react-flow__connection", getConnectionStatus(isValid)]), children: jsx(ConnectionLine, { style: style2, type, CustomComponent: component, isValid }) }) });
+}
+const ConnectionLine = ({ style: style2, type = ConnectionLineType.Bezier, CustomComponent, isValid }) => {
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+  if (!inProgress)
+    return;
   if (CustomComponent)
-    return jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style2, fromNode, fromHandle, fromX, fromY, toX, toY, fromPosition, toPosition, connectionStatus });
-  let dAttr = "";
+    return jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style2, fromNode, fromHandle, fromX: from.x, fromY: from.y, toX: to.x, toY: to.y, fromPosition, toPosition, connectionStatus: getConnectionStatus(isValid), toNode, toHandle });
+  let path = "";
   const pathParams = {
-    sourceX: fromX,
-    sourceY: fromY,
+    sourceX: from.x,
+    sourceY: from.y,
     sourcePosition: fromPosition,
-    targetX: toX,
-    targetY: toY,
+    targetX: to.x,
+    targetY: to.y,
     targetPosition: toPosition
   };
-  return type === ConnectionLineType.Bezier ? [dAttr] = getBezierPath(pathParams) : type === ConnectionLineType.Step ? [dAttr] = getSmoothStepPath({
-    ...pathParams,
-    borderRadius: 0
-  }) : type === ConnectionLineType.SmoothStep ? [dAttr] = getSmoothStepPath(pathParams) : type === ConnectionLineType.SimpleBezier ? [dAttr] = getSimpleBezierPath(pathParams) : dAttr = `M${fromX},${fromY} ${toX},${toY}`, jsx("path", { d: dAttr, fill: "none", className: "react-flow__connection-path", style: style2 });
+  switch (type) {
+    case ConnectionLineType.Bezier:
+      [path] = getBezierPath(pathParams);
+      break;
+    case ConnectionLineType.SimpleBezier:
+      [path] = getSimpleBezierPath(pathParams);
+      break;
+    case ConnectionLineType.Step:
+      [path] = getSmoothStepPath({
+        ...pathParams,
+        borderRadius: 0
+      });
+      break;
+    case ConnectionLineType.SmoothStep:
+      [path] = getSmoothStepPath(pathParams);
+      break;
+    default:
+      [path] = getStraightPath(pathParams);
+  }
+  return jsx("path", { d: path, fill: "none", className: "react-flow__connection-path", style: style2 });
 };
 ConnectionLine.displayName = "ConnectionLine";
-const selector$9 = (s) => {
-  var _a, _b;
-  return {
-    nodeId: (_a = s.connectionStartHandle) == null ? void 0 : _a.nodeId,
-    handleType: (_b = s.connectionStartHandle) == null ? void 0 : _b.type,
-    nodesConnectable: s.nodesConnectable,
-    connectionStatus: s.connectionStatus,
-    width: s.width,
-    height: s.height
-  };
-};
-function ConnectionLineWrapper({ containerStyle: containerStyle2, style: style2, type, component }) {
-  const { nodeId, handleType, nodesConnectable, width, height, connectionStatus } = useStore(selector$9, shallow);
-  return !(nodeId && handleType && width && nodesConnectable) ? null : jsx("svg", { style: containerStyle2, width, height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(["react-flow__connection", connectionStatus]), children: jsx(ConnectionLine, { nodeId, handleType, style: style2, type, CustomComponent: component, connectionStatus }) }) });
-}
 const emptyTypes = {};
 function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes = emptyTypes) {
   useRef(nodeOrEdgeTypes), useStoreApi(), useEffect(() => {
@@ -5164,20 +5201,19 @@ function useStylesLoadedWarning() {
   useStoreApi(), useRef(!1), useEffect(() => {
   }, []);
 }
-function GraphViewComponent({ nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange }) {
-  return useNodeOrEdgeTypesWarning(nodeTypes2), useNodeOrEdgeTypesWarning(edgeTypes2), useStylesLoadedWarning(), useOnInitHandler(onInit), useViewportSync(viewport), jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onEdgeUpdate, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
+function GraphViewComponent({ nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange }) {
+  return useNodeOrEdgeTypesWarning(nodeTypes2), useNodeOrEdgeTypesWarning(edgeTypes2), useStylesLoadedWarning(), useOnInitHandler(onInit), useViewportSync(viewport), jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
 }
 GraphViewComponent.displayName = "GraphView";
-const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2 } = {}) => {
-  const nodeLookup = /* @__PURE__ */ new Map(), parentLookup = /* @__PURE__ */ new Map(), connectionLookup = /* @__PURE__ */ new Map(), edgeLookup = /* @__PURE__ */ new Map(), storeEdges = defaultEdges ?? edges ?? [], storeNodes = defaultNodes ?? nodes ?? [];
+const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2, nodeOrigin } = {}) => {
+  const nodeLookup = /* @__PURE__ */ new Map(), parentLookup = /* @__PURE__ */ new Map(), connectionLookup = /* @__PURE__ */ new Map(), edgeLookup = /* @__PURE__ */ new Map(), storeEdges = defaultEdges ?? edges ?? [], storeNodes = defaultNodes ?? nodes ?? [], storeNodeOrigin = nodeOrigin ?? [0, 0];
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges), adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
-    nodeOrigin: [0, 0],
+    nodeOrigin: storeNodeOrigin,
     elevateNodesOnSelect: !1
   });
   let transform2 = [0, 0, 1];
   if (fitView2 && width && height) {
     const bounds = getInternalNodesBounds(nodeLookup, {
-      nodeOrigin: [0, 0],
       filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
     }), { x, y, zoom: zoom2 } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
     transform2 = [x, y, zoom2];
@@ -5205,13 +5241,11 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     nodesSelectionActive: !1,
     userSelectionActive: !1,
     userSelectionRect: null,
-    connectionPosition: { x: 0, y: 0 },
-    connectionStatus: null,
     connectionMode: ConnectionMode.Strict,
     domNode: null,
     paneDragging: !1,
     noPanClassName: "nopan",
-    nodeOrigin: [0, 0],
+    nodeOrigin: storeNodeOrigin,
     nodeDragThreshold: 1,
     snapGrid: [15, 15],
     snapToGrid: !1,
@@ -5219,7 +5253,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     nodesConnectable: !0,
     nodesFocusable: !0,
     edgesFocusable: !0,
-    edgesUpdatable: !0,
+    edgesReconnectable: !0,
     elementsSelectable: !0,
     elevateNodesOnSelect: !0,
     elevateEdgesOnSelect: !1,
@@ -5228,13 +5262,13 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     fitViewOnInitOptions: void 0,
     selectNodesOnDrag: !0,
     multiSelectionActive: !1,
-    connectionStartHandle: null,
-    connectionEndHandle: null,
+    connection: { ...initialConnection },
     connectionClickStartHandle: null,
     connectOnClick: !0,
     ariaLiveMessage: "",
     autoPanOnConnect: !0,
     autoPanOnNodeDrag: !0,
+    autoPanSpeed: 15,
     connectionRadius: 20,
     onError: devWarn,
     isValidConnection: void 0,
@@ -5242,11 +5276,11 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     lib: "react",
     debug: !1
   };
-}, createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1 }) => createWithEqualityFn((set2, get2) => ({
-  ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, defaultNodes, defaultEdges }),
+}, createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, nodeOrigin }) => createWithEqualityFn((set2, get2) => ({
+  ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, nodeOrigin, defaultNodes, defaultEdges }),
   setNodes: (nodes2) => {
-    const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get2();
-    adoptUserNodes(nodes2, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: !0 }), set2({ nodes: nodes2 });
+    const { nodeLookup, parentLookup, nodeOrigin: nodeOrigin2, elevateNodesOnSelect } = get2();
+    adoptUserNodes(nodes2, nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2, elevateNodesOnSelect, checkEquality: !0 }), set2({ nodes: nodes2 });
   },
   setEdges: (edges2) => {
     const { connectionLookup, edgeLookup } = get2();
@@ -5266,12 +5300,12 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
   // changes its dimensions, this function is called to measure the
   // new dimensions and update the nodes.
   updateNodeInternals: (updates) => {
-    const { triggerNodeChanges, fitView: fitView2, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug } = get2(), { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
+    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, { nodeOrigin });
+    updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2 });
     let nextFitViewDone = fitViewDone;
-    !fitViewDone && fitViewOnInit && (nextFitViewDone = fitView2({
+    !fitViewDone && fitViewOnInit && (nextFitViewDone = fitViewSync({
       ...fitViewOnInitOptions,
       nodes: fitViewOnInitOptions == null ? void 0 : fitViewOnInitOptions.nodes
     })), set2({ fitViewDone: nextFitViewDone }), (changes == null ? void 0 : changes.length) > 0 && (debug && console.log("React Flow: trigger node changes", changes), triggerNodeChanges == null || triggerNodeChanges(changes));
@@ -5296,7 +5330,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
       }), change.position.x = Math.max(0, change.position.x), change.position.y = Math.max(0, change.position.y)), changes.push(change);
     }
     if (parentExpandChildren.length > 0) {
-      const { nodeLookup, parentLookup } = get2(), parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
+      const { nodeLookup, parentLookup, nodeOrigin: nodeOrigin2 } = get2(), parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin2);
       changes.push(...parentExpandChanges);
     }
     get2().triggerNodeChanges(changes);
@@ -5355,6 +5389,10 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     var _a;
     (_a = get2().panZoom) == null || _a.setTranslateExtent(translateExtent), set2({ translateExtent });
   },
+  setPaneClickDistance: (clickDistance) => {
+    var _a;
+    (_a = get2().panZoom) == null || _a.setClickDistance(clickDistance);
+  },
   resetSelectedElements: () => {
     const { edges: edges2, nodes: nodes2, triggerNodeChanges, triggerEdgeChanges } = get2(), nodeChanges = nodes2.reduce((res, node) => node.selected ? [...res, createSelectionChange(node.id, !1)] : res, []), edgeChanges = edges2.reduce((res, edge) => edge.selected ? [...res, createSelectionChange(edge.id, !1)] : res, []);
     triggerNodeChanges(nodeChanges), triggerEdgeChanges(edgeChanges);
@@ -5380,32 +5418,46 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     return panBy({ delta, panZoom, transform: transform2, translateExtent, width: width2, height: height2 });
   },
   fitView: (options) => {
-    const { panZoom, width: width2, height: height2, minZoom, maxZoom, nodeOrigin, nodeLookup } = get2();
-    return panZoom ? fitView({
-      nodeLookup,
+    const { panZoom, width: width2, height: height2, minZoom, maxZoom, nodeLookup } = get2();
+    if (!panZoom)
+      return Promise.resolve(!1);
+    const fitViewNodes = getFitViewNodes(nodeLookup, options);
+    return fitView({
+      nodes: fitViewNodes,
       width: width2,
       height: height2,
       panZoom,
       minZoom,
-      maxZoom,
-      nodeOrigin
-    }, options) : !1;
+      maxZoom
+    }, options);
   },
-  cancelConnection: () => set2({
-    connectionStatus: null,
-    connectionStartHandle: null,
-    connectionEndHandle: null
-  }),
-  updateConnection: (params) => {
-    const { connectionPosition } = get2(), currentConnection = {
-      ...params,
-      connectionPosition: params.connectionPosition ?? connectionPosition
-    };
-    set2(currentConnection);
+  // we can't call an asnychronous function in updateNodeInternals
+  // for that we created this sync version of fitView
+  fitViewSync: (options) => {
+    const { panZoom, width: width2, height: height2, minZoom, maxZoom, nodeLookup } = get2();
+    if (!panZoom)
+      return !1;
+    const fitViewNodes = getFitViewNodes(nodeLookup, options);
+    return fitView({
+      nodes: fitViewNodes,
+      width: width2,
+      height: height2,
+      panZoom,
+      minZoom,
+      maxZoom
+    }, options), fitViewNodes.size > 0;
+  },
+  cancelConnection: () => {
+    set2({
+      connection: { ...initialConnection }
+    });
+  },
+  updateConnection: (connection) => {
+    set2({ connection });
   },
   reset: () => set2({ ...getInitialState() })
 }), Object.is);
-function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, children: children2 }) {
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, nodeOrigin, children: children2 }) {
   const [store] = useState(() => createStore({
     nodes,
     edges,
@@ -5413,12 +5465,13 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
     defaultEdges,
     width,
     height,
-    fitView: fitView2
+    fitView: fitView2,
+    nodeOrigin
   }));
   return jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children2 }) });
 }
-function Wrapper({ children: children2, nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2 }) {
-  return useContext(StoreContext) ? jsx(Fragment, { children: children2 }) : jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, children: children2 });
+function Wrapper({ children: children2, nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2, nodeOrigin }) {
+  return useContext(StoreContext) ? jsx(Fragment, { children: children2 }) : jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, nodeOrigin, children: children2 });
 }
 const wrapperStyle = {
   width: "100%",
@@ -5427,17 +5480,17 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children: children2, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, ...rest }, ref) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode);
-  return jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeOrigin, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesUpdatable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, debug }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+  return jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, nodeOrigin, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, paneClickDistance, debug }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
-const selector$8 = (s) => {
+const selector$6 = (s) => {
   var _a;
   return (_a = s.domNode) == null ? void 0 : _a.querySelector(".react-flow__edgelabel-renderer");
 };
 function EdgeLabelRenderer({ children: children2 }) {
-  const edgeLabelRenderer = useStore(selector$8);
+  const edgeLabelRenderer = useStore(selector$6);
   return edgeLabelRenderer ? createPortal(children2, edgeLabelRenderer) : null;
 }
 function useOnViewportChange({ onStart, onChange, onEnd }) {
@@ -5488,7 +5541,7 @@ const defaultSize = {
   [BackgroundVariant.Dots]: 1,
   [BackgroundVariant.Lines]: 1,
   [BackgroundVariant.Cross]: 6
-}, selector$4 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
+}, selector$3$1 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 function BackgroundComponent({
   id: id2,
   variant = BackgroundVariant.Dots,
@@ -5504,7 +5557,7 @@ function BackgroundComponent({
   className,
   patternClassName
 }) {
-  const ref = useRef(null), { transform: transform2, patternId } = useStore(selector$4, shallow), 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$1, shallow), 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 || ""}`;
   return jsxs("svg", { className: cc(["react-flow__background", className]), style: {
     ...style2,
     ...containerStyle,
@@ -5532,13 +5585,13 @@ function UnlockIcon() {
 function ControlButton({ children: children2, className, ...rest }) {
   return jsx("button", { type: "button", className: cc(["react-flow__controls-button", className]), ...rest, children: children2 });
 }
-const selector$3 = (s) => ({
+const selector$2$1 = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   minZoomReached: s.transform[2] <= s.minZoom,
   maxZoomReached: s.transform[2] >= s.maxZoom
 });
 function ControlsComponent({ style: style2, showZoom = !0, showFitView = !0, showInteractive = !0, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children: children2, position = "bottom-left", orientation = "vertical", "aria-label": ariaLabel = "React Flow controls" }) {
-  const store = useStoreApi(), { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow), { zoomIn, zoomOut, fitView: fitView2 } = useReactFlow(), onZoomInHandler = () => {
+  const store = useStoreApi(), { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$2$1, shallow), { zoomIn, zoomOut, fitView: fitView2 } = useReactFlow(), onZoomInHandler = () => {
     zoomIn(), onZoomIn == null || onZoomIn();
   }, onZoomOutHandler = () => {
     zoomOut(), onZoomOut == null || onZoomOut();
@@ -5563,7 +5616,7 @@ function MiniMapNodeComponent({ id: id2, x, y, width, height, style: style2, col
     strokeWidth
   }, shapeRendering, onClick: onClick ? (event) => onClick(event, id2) : void 0 });
 }
-const MiniMapNode = memo(MiniMapNodeComponent), selector$2$1 = (s) => s.nodeOrigin, selectorNodeIds = (s) => s.nodes.map((node) => node.id), getAttrFunction = (func) => func instanceof Function ? func : () => func;
+const MiniMapNode = memo(MiniMapNodeComponent), selectorNodeIds = (s) => s.nodes.map((node) => node.id), getAttrFunction = (func) => func instanceof Function ? func : () => func;
 function MiniMapNodes({
   nodeStrokeColor,
   nodeColor,
@@ -5575,19 +5628,19 @@ function MiniMapNodes({
   nodeComponent: NodeComponent = MiniMapNode,
   onClick
 }) {
-  const nodeIds = useStore(selectorNodeIds, shallow), nodeOrigin = useStore(selector$2$1), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
+  const nodeIds = useStore(selectorNodeIds, shallow), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
   return jsx(Fragment, { children: nodeIds.map((nodeId) => (
     // The split of responsibilities between MiniMapNodes and
     // NodeComponentWrapper may appear weird. However, it’s designed to
     // minimize the cost of updates when individual nodes change.
     //
     // For more details, see a similar commit in `NodeRenderer/index.tsx`.
-    jsx(NodeComponentWrapper, { id: nodeId, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, NodeComponent, onClick, shapeRendering }, nodeId)
+    jsx(NodeComponentWrapper, { id: nodeId, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, NodeComponent, onClick, shapeRendering }, nodeId)
   )) });
 }
-function NodeComponentWrapperInner({ id: id2, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick }) {
+function NodeComponentWrapperInner({ id: id2, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick }) {
   const { node, x, y } = useStore((s) => {
-    const node2 = s.nodeLookup.get(id2), { x: x2, y: y2 } = getNodePositionWithOrigin(node2, nodeOrigin).positionAbsolute;
+    const node2 = s.nodeLookup.get(id2), { x: x2, y: y2 } = node2.internals.positionAbsolute;
     return {
       node: node2,
       x: x2,
@@ -5610,9 +5663,8 @@ const defaultWidth = 200, defaultHeight = 150, selector$1$1 = (s) => {
   };
   return {
     viewBB,
-    boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
+    boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
     rfId: s.rfId,
-    nodeOrigin: s.nodeOrigin,
     panZoom: s.panZoom,
     translateExtent: s.translateExtent,
     flowWidth: s.width,
@@ -5710,19 +5762,19 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
         onChange: (change, childChanges) => {
           const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState(), changes = [], nextPosition = { x: change.x, y: change.y }, node = nodeLookup.get(id2);
           if (node && node.expandParent && node.parentId) {
-            const child = {
+            const origin = node.origin ?? nodeOrigin, width = change.width ?? node.measured.width, height = change.height ?? node.measured.height, child = {
               id: node.id,
               parentId: node.parentId,
               rect: {
-                width: change.width ?? node.measured.width,
-                height: change.height ?? node.measured.height,
+                width,
+                height,
                 ...evaluateAbsolutePosition({
                   x: change.x ?? node.position.x,
                   y: change.y ?? node.position.y
-                }, node.parentId, nodeLookup, node.origin ?? nodeOrigin)
+                }, { width, height }, node.parentId, nodeLookup, origin)
               }
             }, parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
-            changes.push(...parentExpandChanges), nextPosition.x = change.x ? Math.max(0, change.x) : void 0, nextPosition.y = change.y ? Math.max(0, change.y) : void 0;
+            changes.push(...parentExpandChanges), nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : void 0, nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : void 0;
           }
           if (nextPosition.x !== void 0 && nextPosition.y !== void 0) {
             const positionChange = {
@@ -5833,30 +5885,7 @@ function useTilg$1(...args) {
 tilg.exports = production;
 var tilgExports = tilg.exports;
 const useTilg = /* @__PURE__ */ getDefaultExportFromCjs(tilgExports);
-var rootClassName = "likec4-diagram-root", keepAspectRatioContainer = "_2h8g8h0", cssReactFlow = "_2h8g8h1", cssDisablePan = "_2h8g8h2", cssTransparentBg = "_2h8g8h3", cssNoControls = "_2h8g8h4";
-function KeepAspectRatioContainer({
-  children: children2,
-  width,
-  height,
-  enabled,
-  className,
-  style: style2,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...rest,
-      className: clsx(keepAspectRatioContainer, className),
-      style: enabled ? {
-        ...style2,
-        aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-        maxHeight: `var(--likec4-view-max-height, ${Math.ceil(height)}px)`
-      } : style2,
-      children: children2
-    }
-  );
-}
+var rootClassName = "likec4-diagram-root", cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
 function EnsureMantine({ children: children2 }) {
   if (!useContext(MantineContext))
     throw new Error("LikeC4Diagram must be a child of MantineProvider");
@@ -7011,24 +7040,27 @@ function useDiagramStoreApi() {
   const store = useContext(DiagramContext);
   if (store === null)
     throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  return useMemo(
-    () => ({
-      getState: store.getState,
-      setState: store.setState,
-      subscribe: store.subscribe
-    }),
-    [store]
-  );
+  return store;
 }
-function WhenInitialized({ children: children2 }) {
-  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
-  return useEffect(() => {
-    if (!isInitialized)
-      return diagramApi.subscribe(
-        (s) => s.initialized,
-        setIsInitialized
-      );
-  }, [isInitialized]), isInitialized ? /* @__PURE__ */ jsx(Fragment, { children: children2 }) : null;
+function useNavigationHistory() {
+  const store = useDiagramStoreApi(), viewId = useDiagramState((s) => s.view.id), [historyViewId, historyOps, {
+    history,
+    current: historyIndex
+  }] = useStateHistory(viewId), hasBack = historyIndex > 0, hasForward = historyIndex < history.length - 1;
+  return useUpdateEffect(() => {
+    viewId !== historyViewId && historyOps.set(viewId);
+  }, [viewId]), useUpdateEffect(() => {
+    var _a, _b;
+    viewId !== historyViewId && ((_b = (_a = store.getState()).onNavigateTo) == null || _b.call(_a, historyViewId));
+  }, [historyViewId]), useMemo(() => ({
+    hasBack,
+    hasForward,
+    ops: historyOps
+  }), [
+    hasBack,
+    hasForward,
+    historyOps
+  ]);
 }
 const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
 function crt(v) {
@@ -7977,12 +8009,12 @@ function bezierControlPoints(diagramEdge) {
     inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
       const { x, y } = bezier.get(t2);
       handles.push({
-        x: toDomPrecision(x),
-        y: toDomPrecision(y)
+        x: Math.round(x),
+        y: Math.round(y)
       });
     }), bezierPoints = rest, start2 = end;
   }
-  return invariant(bezierPoints.length === 0, "all points should be consumed"), diagramEdge.dir === "back" && handles.length > 0 && handles.reverse(), handles;
+  return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
 }
 const isClose = (a, b) => Math.abs(a - b) < 3.1;
 function isSamePoint$1(a, b) {
@@ -7994,7 +8026,7 @@ function useXYStore(selector2, equalityFn) {
   return useStore(
     // @ts-expect-error - types are not correct
     selector2,
-    equalityFn ?? shallowEqual
+    shallowEqual
   );
 }
 const useXYStoreApi = useStoreApi;
@@ -8145,24 +8177,23 @@ function useLayoutConstraints() {
         x: event.clientX,
         y: event.clientY
       };
-      const { xyflow } = diagramApi.getState();
-      solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
+      const { xyflow, cancelSaveManualLayout } = diagramApi.getState();
+      cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
     },
     onNodeDrag: (_event, xynode) => {
       var _a;
       invariant(solverRef.current, "solverRef.current should be defined"), (_a = solverRef.current) == null || _a.onNodeDrag(xynode);
     },
     onNodeDragStop: (event, _xynode) => {
-      isSamePoint$1(dragStartedAt.current, { x: event.clientX, y: event.clientY }) || diagramApi.getState().triggerSaveManualLayout(xyflowApi), solverRef.current = void 0;
+      isSamePoint$1(dragStartedAt.current, { x: event.clientX, y: event.clientY }) || diagramApi.getState().triggerSaveManualLayout(), solverRef.current = void 0;
     }
   }), [xyflowApi, diagramApi]);
 }
 const ZIndexes = {
-  Compound: 1,
-  Edge: 2,
-  Element: 3
+  Compound: 2,
+  Edge: 4,
+  Element: 6
 }, MinZoom = 0.1, StringSet = Set, DEFAULT_PROPS = {
-  viewSyncState: "synced",
   viewSyncDebounceTimeout: null,
   initialized: !1,
   xyflowSynced: !1,
@@ -8186,13 +8217,15 @@ const ZIndexes = {
   onCanvasClick: null,
   onCanvasDblClick: null
 }, noReplace = !1;
-let storeDevId = 1;
+let StoreDevId = 1;
 const EmptyStringSet = new StringSet();
 function createDiagramStore(props) {
+  const storeDevId = "DiagramStore" + String(StoreDevId++).padStart(2, "0");
   return createWithEqualityFn(
     subscribeWithSelector(
       devtools(
         (set2, get2) => ({
+          storeDevId,
           ...DEFAULT_PROPS,
           ...props,
           isDynamicView: () => {
@@ -8202,7 +8235,6 @@ function createDiagramStore(props) {
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
-              viewSyncState,
               xyflow,
               dimmed: dimmed2,
               xyflowSynced,
@@ -8216,18 +8248,13 @@ function createDiagramStore(props) {
               hoveredEdgeId,
               hoveredNodeId
             } = get2();
-            if (viewSyncDebounceTimeout && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null), shallowEqual(current, nextView)) {
-              (!xyflowSynced || viewSyncState === "changed") && set2(
-                {
-                  viewSyncState: "synced",
-                  xyflowSynced: !0
-                },
-                noReplace,
-                "updateView: xyflow synced"
-              ), DEV && console.debug("store: skip updateView");
+            if (shallowEqual(current, nextView)) {
+              DEV && console.debug("store: skip updateView");
               return;
             }
-            if (current.id === nextView.id) {
+            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null);
+            const isSameView = current.id === nextView.id;
+            if (isSameView) {
               const nodeIds = new StringSet(nextView.nodes.map((n) => n.id)), edgeIds = new StringSet(nextView.edges.map((e) => e.id));
               if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep)) && (activeDynamicViewStep = null), xyflowSynced = deepEqual([current.nodes, current.edges], [nextView.nodes, nextView.edges]), dimmed2.size > 0) {
                 let nextDimmed = new StringSet([...dimmed2].filter((id2) => nodeIds.has(id2) || edgeIds.has(id2)));
@@ -8245,7 +8272,6 @@ function createDiagramStore(props) {
             }
             set2(
               {
-                viewSyncState: "synced",
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
@@ -8260,7 +8286,7 @@ function createDiagramStore(props) {
                 dimmed: dimmed2
               },
               noReplace,
-              "update-view"
+              isSameView ? "update-view [same]" : "update-view [another]"
             );
           },
           focusOnNode: (nodeId) => {
@@ -8283,16 +8309,16 @@ function createDiagramStore(props) {
             }
           },
           setHoveredNode: (nodeId) => {
-            nodeId !== get2().hoveredNodeId && set2({ hoveredNodeId: nodeId }, noReplace, nodeId ? "setHoveredNode" : "unsetHoveredNode");
+            nodeId !== get2().hoveredNodeId && set2({ hoveredNodeId: nodeId });
           },
           setHoveredEdge: (edgeId) => {
-            edgeId !== get2().hoveredEdgeId && set2({ hoveredEdgeId: edgeId }, noReplace, edgeId ? "setHoveredEdge" : "unsetHoveredEdge");
+            edgeId !== get2().hoveredEdgeId && set2({ hoveredEdgeId: edgeId });
           },
           setLastClickedNode: (nodeId) => {
-            nodeId !== get2().lastClickedNodeId && set2({ lastClickedNodeId: nodeId }, noReplace, nodeId ? "setLastClickedNode" : "unsetLastClickedNode");
+            nodeId !== get2().lastClickedNodeId && set2({ lastClickedNodeId: nodeId });
           },
           setLastClickedEdge: (edgeId) => {
-            edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? "setLastClickedEdge" : "unsetLastClickedEdge");
+            edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId });
           },
           resetLastClicked: () => {
             let {
@@ -8326,7 +8352,7 @@ function createDiagramStore(props) {
               if (!change.targets.includes(origin.id))
                 return origin;
               let element2 = origin;
-              for (const [key, value] of entries.strict(change.style))
+              for (const [key, value] of entries(change.style))
                 switch (key) {
                   case "shape":
                     value !== element2.shape && (element2 = {
@@ -8363,19 +8389,25 @@ function createDiagramStore(props) {
                 }
               return element2 !== origin ? (hasChanges = !0, element2) : origin;
             });
-            hasChanges && (updateView({
+            hasChanges && updateView({
               ...view,
               nodes
-            }), onChange && set2({ viewSyncState: "changed" }, noReplace, "change sync state")), onChange == null || onChange({ change });
+            }), onChange == null || onChange({ change });
           },
-          triggerSaveManualLayout: (xystore) => {
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get2();
+            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set2({ viewSyncDebounceTimeout: null }));
+          },
+          triggerSaveManualLayout: () => {
             let { viewSyncDebounceTimeout: debounced, onChange } = get2();
             if (!onChange) {
               DEV && console.debug("ignore triggerSaveManualLayout, as no onChange handler is set");
               return;
             }
             debounced && clearTimeout(debounced), debounced = setTimeout(() => {
-              const { nodeLookup } = xystore.getState(), { xyflow, onChange: onChange2 } = get2(), movedNodes = new StringSet(), nodes = reduce([...nodeLookup.values()], (acc, node) => {
+              const { xyflow, onChange: onChange2, xystore } = get2(), { nodeLookup } = xystore.getState();
+              set2({ viewSyncDebounceTimeout: null });
+              const movedNodes = new StringSet(), nodes = reduce([...nodeLookup.values()], (acc, node) => {
                 const dimensions = getNodeDimensions(node);
                 return isSamePoint$1(node.internals.positionAbsolute, node.data.element.position) || movedNodes.add(node.id), acc[node.data.fqn] = {
                   x: node.internals.positionAbsolute.x,
@@ -8388,25 +8420,31 @@ function createDiagramStore(props) {
                 return !controlPoints && (movedNodes.has(source) || movedNodes.has(target)) && (controlPoints = bezierControlPoints(data.edge)), controlPoints && (acc[data.edge.id] = {
                   controlPoints
                 }), acc;
-              }, {}), change = {
+              }, {});
+              if (movedNodes.size === 0 && isEmpty(edges)) {
+                DEV && console.debug("ignore triggerSaveManualLayout, as no changes detected");
+                return;
+              }
+              const change = {
                 op: "save-manual-layout",
                 nodes,
                 edges
               };
-              DEV && console.debug("triggerSaveManualLayout", change), set2({ viewSyncDebounceTimeout: null }, noReplace, "clear debounce timeout"), onChange2 == null || onChange2({ change });
-            }, 5e3), set2(
+              DEV && console.debug("triggerSaveManualLayout", change), onChange2 == null || onChange2({ change });
+            }, 2e3), set2(
               {
-                viewSyncDebounceTimeout: debounced,
-                viewSyncState: "changed"
+                viewSyncDebounceTimeout: debounced
               },
               noReplace,
-              "change sync state"
+              "debounce sync state"
             );
           },
           triggerOnNavigateTo: (xynodeId, event) => {
             var _a, _b;
-            const { xyflow, view } = get2(), xynode = xyflow.getInternalNode(xynodeId), element2 = xynode == null ? void 0 : xynode.data.element;
-            invariant(!!xynode && (element2 == null ? void 0 : element2.navigateTo), `node is not navigable: ${xynodeId}`), set2(
+            const { xyflow, view } = get2(), xynode = xyflow.getInternalNode(xynodeId);
+            invariant(!!xynode, `node not found: ${xynodeId}`);
+            const element2 = xynode.data.element;
+            invariant(element2.navigateTo, `node is not navigable: ${xynodeId}`), set2(
               {
                 lastClickedNodeId: xynodeId,
                 lastOnNavigate: {
@@ -8432,15 +8470,16 @@ function createDiagramStore(props) {
               xynode.internals.userNode
             );
           },
-          fitDiagram: (xyStore) => {
-            const { width, height, panZoom } = xyStore.getState(), { fitViewPadding, view, focusedNodeId } = get2(), bounds = {
+          fitDiagram: (duration = 500) => {
+            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get2(), { width, height, panZoom, transform: transform2 } = xystore.getState(), bounds = {
               x: 0,
               y: 0,
               width: view.width,
               height: view.height
-            }, viewport = getViewportForBounds(bounds, width, height, MinZoom, 1, fitViewPadding);
-            panZoom == null || panZoom.setViewport(viewport, { duration: 500 }), focusedNodeId && set2(
+            }, maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
+            panZoom == null || panZoom.setViewport(viewport, { duration }), (focusedNodeId ?? activeDynamicViewStep) !== null && set2(
               {
+                activeDynamicViewStep: null,
                 focusedNodeId: null,
                 dimmed: EmptyStringSet
               },
@@ -8449,7 +8488,7 @@ function createDiagramStore(props) {
             );
           },
           nextDynamicStep: (increment = 1) => {
-            const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get2();
+            const { view, activeDynamicViewStep, xyflow, xystore, fitViewPadding } = get2();
             invariant(view.__ === "dynamic", "view is not dynamic");
             const nextStep = (activeDynamicViewStep ?? 0) + increment;
             if (nextStep <= 0 || nextStep > view.edges.length)
@@ -8472,33 +8511,38 @@ function createDiagramStore(props) {
               }
               dimmed2.add(n.id);
             }
-            xyflow.fitView({
+            const { fitView: fitView2, transform: transform2 } = xystore.getState();
+            fitView2({
               duration: 400,
-              maxZoom: 1,
+              includeHiddenNodes: !0,
+              maxZoom: Math.max(1, transform2[2]),
               minZoom: MinZoom,
-              padding: fitViewPadding,
+              padding: Math.max(fitViewPadding, 0.2),
               nodes: selected2
-            }), set2({
-              focusedNodeId: null,
-              activeDynamicViewStep: nextStep,
-              dimmed: dimmed2
-            });
+            }), set2(
+              {
+                focusedNodeId: null,
+                activeDynamicViewStep: nextStep,
+                dimmed: dimmed2
+              },
+              noReplace,
+              "nextDynamicStep"
+            );
           },
           stopDynamicView: () => {
-            const { xyflow, fitViewPadding } = get2();
-            set2({
-              activeDynamicViewStep: null,
-              dimmed: EmptyStringSet
-            }), xyflow.fitView({
-              duration: 400,
-              maxZoom: 1,
-              minZoom: MinZoom,
-              padding: fitViewPadding
-            });
+            get2().activeDynamicViewStep !== null && (set2(
+              {
+                activeDynamicViewStep: null,
+                focusedNodeId: null,
+                dimmed: EmptyStringSet
+              },
+              noReplace,
+              "stopDynamicView"
+            ), get2().fitDiagram());
           }
         }),
         {
-          name: `DiagramStore ${storeDevId++} - ${props.view.id}`,
+          name: `${storeDevId} - ${props.view.id}`,
           enabled: DEV
         }
       )
@@ -8507,28 +8551,52 @@ function createDiagramStore(props) {
   );
 }
 const DiagramContext = createContext(null);
-function DiagramContextProvider({ children: children2, view, ...props }) {
-  const xyflow = useXYFlow(), store = useRef();
+function DiagramContextProvider({
+  children: children2,
+  view,
+  className,
+  keepAspectRatio,
+  ...props
+}) {
+  const containerRef = useRef(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef();
   return store.current || (store.current = createDiagramStore({
+    xystore,
     xyflow,
     view,
+    getContainer: () => containerRef.current,
     ...props
   })), useEffect(
     () => {
-      var _a, _b;
-      ((_a = store.current) == null ? void 0 : _a.getState().xyflow) !== xyflow && ((_b = store.current) == null || _b.setState({ xyflow }, !1, "update xyflow"));
+      if (!store.current) return;
+      const state = store.current.getState();
+      (state.xyflow !== xyflow || state.xystore !== xystore) && store.current.setState({ xyflow, xystore }, !1, "update xyflow and xystore");
     },
-    [xyflow]
+    [xyflow, xystore]
   ), useUpdateEffect(
     () => {
       if (!store.current) return;
       const state = store.current.getState();
-      state.view !== view && state.updateView(view), hasSubObject(state, props) || store.current.setState(props, !1, "update incoming props");
+      state.view !== view && state.updateView(view);
+      const newProps = pickBy(props, isNonNullish);
+      hasSubObject(state, newProps) || store.current.setState(newProps, !1, "update incoming props");
     },
-    [view, props]
-  ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
+    [view, props],
+    shallowEqual
+  ), /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      ...keepAspectRatio && {
+        style: {
+          aspectRatio: `${Math.ceil(view.width)}/${Math.ceil(view.height)}`,
+          maxHeight: Math.ceil(view.height)
+        }
+      },
+      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 })
+    }
+  );
 }
-const nodeZIndex = (node) => node.level + 1;
 function diagramViewToXYFlowData(view, opts) {
   var _a, _b;
   const isDynamicView = view.__ === "dynamic", editor = {
@@ -8539,15 +8607,15 @@ function diagramViewToXYFlowData(view, opts) {
     new Array()
   ), ns = "", nodeById = (id2) => nonNullable(nodeLookup.get(id2), `Node not found: ${id2}`);
   let next;
-  for (; next = traverse.pop(); ) {
+  for (; next = traverse.shift(); ) {
     const { node, parent } = next;
-    node.children.length > 0 && traverse.unshift(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
+    node.children.length > 0 && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
     const isCompound = hasAtLeast$1(node.children, 1), position = {
       x: node.position[0],
       y: node.position[1]
     };
     parent && (position.x -= parent.position[0], position.y -= parent.position[1]);
-    const id2 = ns + node.id;
+    const id2 = ns + node.id, draggable = opts.draggable && (!parent || parent.children.length > 1);
     editor.nodes.push({
       id: id2,
       type: isCompound ? "compound" : "element",
@@ -8555,72 +8623,44 @@ function diagramViewToXYFlowData(view, opts) {
         fqn: node.id,
         element: node
       },
-      draggable: opts.draggable && (!parent || parent.children.length > 1),
+      draggable,
       selectable: opts.selectable,
       deletable: !1,
       position,
-      zIndex: nodeZIndex(node),
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       hidden: !1,
-      /*       initialWidth: node.width,
-      initialHeight: node.height, */
+      initialWidth: node.width,
+      initialHeight: node.height,
       width: node.width,
       height: node.height,
-      // measured: {
-      //   width: node.width,
-      //   height: node.height
-      // },
       ...parent && {
         parentId: ns + parent.id
+      },
+      ...isCompound && {
+        dragHandle: ".likec4-compound-title"
       }
-      // handles: [
-      //   ...outEdges.map(out => ({
-      //     id: `${out.id}`,
-      //     type: 'source' as const,
-      //     position: Position.Bottom,
-      //     x: out.points[0][0],
-      //     y: out.points[0][1],
-      //     width: 10,
-      //     height: 10
-      //   })),
-      //   ...inEdges.map(out => ({
-      //     id: out.id,
-      //     type: 'target' as const,
-      //     position: Position.Top,
-      //     x: out.points[0][0],
-      //     y: out.points[0][1],
-      //     width: 10,
-      //     height: 10
-      //   }))
-      // ],
     });
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id2 = ns + edge.id;
-    invariant(hasAtLeast$1(edge.points, 2), "edge should have at least 2 points");
-    const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)));
-    editor.edges.push({
+    invariant(hasAtLeast$1(edge.points, 2), "edge should have at least 2 points"), editor.edges.push({
       id: id2,
       type: "relationship",
       source: ns + source,
       target: ns + target,
-      zIndex: level,
+      zIndex: ZIndexes.Edge,
+      selectable: opts.selectable,
       deletable: !1,
       data: {
         edge,
         type: "bezier",
         controlPoints: ((_b = (_a = view.manualLayout) == null ? void 0 : _a.edges[edge.id]) == null ? void 0 : _b.controlPoints) || null,
-        headPoint: edge.headArrowPoint ?? null,
-        tailPoint: edge.tailArrowPoint ?? null,
         stepNum: isDynamicView ? extractStep(edge.id) : null,
         label: edge.labelBBox ? {
           bbox: edge.labelBBox,
-          // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
           text: edge.label ?? ""
         } : null
       },
-      // markerEnd: {
-      //   type: MarkerType.ArrowClosed
-      // },
       interactionWidth: 20
     });
   }
@@ -8634,14 +8674,14 @@ function FitViewOnViewportResize({ diagramApi, xyflowApi }) {
   return useDebouncedEffect(
     () => {
       const { focusedNodeId, fitDiagram } = diagramApi.getState();
-      focusedNodeId || prevDimensionsRef.current === dimensions || (fitDiagram(xyflowApi), prevDimensionsRef.current = dimensions);
+      focusedNodeId || prevDimensionsRef.current === dimensions || (fitDiagram(300), prevDimensionsRef.current = dimensions);
     },
     [dimensions, diagramApi, xyflowApi],
-    250,
+    300,
     1e3
   ), null;
 }
-function selector$2({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }) {
+function selector$3({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }) {
   const viewId = view.id + "_" + view.autoLayout + "_" + s.fitViewPadding, waitCorrection = lastOnNavigate && lastOnNavigate.toView === view.id && lastOnNavigate.positionCorrected === !1, elTo = waitCorrection ? view.nodes.find((n) => n.id === lastOnNavigate.element.id) : void 0;
   return waitCorrection && elTo ? {
     viewId,
@@ -8667,7 +8707,7 @@ function FitViewOnDiagramChange() {
     waitCorrection,
     elFrom,
     elTo
-  } = useDiagramState(selector$2, shallowEqual), diagramApi = useDiagramStoreApi(), processedRef = useRef(pendingViewId);
+  } = useDiagramState(selector$3, shallowEqual), diagramApi = useDiagramStoreApi(), processedRef = useRef(pendingViewId), durationRef = useRef(300);
   return useEffect(() => {
     if (!(!xyflowSynced || pendingViewId === processedRef.current)) {
       if (waitCorrection) {
@@ -8683,57 +8723,62 @@ function FitViewOnDiagramChange() {
           x: toDomPrecision(fromPos.x - toPos.x),
           y: toDomPrecision(fromPos.y - toPos.y)
         };
-        xyflowApi.getState().panBy(diff), diagramApi.setState({ lastOnNavigate: null });
+        xyflowApi.getState().panBy(diff), durationRef.current = 500, diagramApi.setState({ lastOnNavigate: null });
         return;
       }
-      processedRef.current = pendingViewId, diagramApi.getState().fitDiagram(xyflowApi);
+      processedRef.current = pendingViewId, diagramApi.getState().fitDiagram(durationRef.current), durationRef.current = 300;
     }
   }, [pendingViewId, xyflowSynced, waitCorrection]), !viewportChanged && xyflowSynced ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { xyflowApi, diagramApi }) : null;
 }
 function SelectEdgesOnNodeFocus() {
-  const focusedNodeId = useDiagramState((s) => s.focusedNodeId), diagramStore = useDiagramStoreApi(), xyflowApi = useXYStoreApi();
-  return useUpdateEffect(() => {
-    if (!focusedNodeId) {
-      xyflowApi.getState().resetSelectedElements();
-      return;
-    }
-    const edgeChanges = [], nodeChanges = [], { edgeLookup, nodeLookup, transform: transform2, triggerNodeChanges, fitView: fitView2, triggerEdgeChanges } = xyflowApi.getState(), fitViewNodes = /* @__PURE__ */ new Set();
-    fitViewNodes.add(nonNullable(nodeLookup.get(focusedNodeId)));
-    for (const [, edge] of edgeLookup)
-      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-        edgeChanges.push({
+  const diagramStore = useDiagramStoreApi();
+  return useEffect(
+    () => diagramStore.subscribe((s) => s.focusedNodeId, (focusedNodeId) => {
+      if (!focusedNodeId)
+        return;
+      const edgeChanges = [], nodeChanges = [], {
+        edgeLookup,
+        nodeLookup,
+        width,
+        height,
+        panZoom,
+        transform: transform2,
+        triggerNodeChanges,
+        triggerEdgeChanges
+      } = diagramStore.getState().xystore.getState();
+      let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)));
+      for (const [, edge] of edgeLookup) {
+        if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+          const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source, nd = nodeToRect(nonNullable(nodeLookup.get(anotherNodeId)));
+          focusBounds = getBoundsOfRects(focusBounds, nd);
+        }
+        edge.selected && edgeChanges.push({
           id: edge.id,
           type: "select",
-          selected: !0
+          selected: !1
         });
-        const anotherNode = nonNullable(nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source));
-        fitViewNodes.add(anotherNode);
-      } else edge.selected && edgeChanges.push({
-        id: edge.id,
-        type: "select",
-        selected: !1
-      });
-    for (const [, node] of nodeLookup)
-      node.selected && node.id !== focusedNodeId && nodeChanges.push({
-        id: node.id,
+      }
+      for (const [, node] of nodeLookup)
+        node.selected && node.id !== focusedNodeId && nodeChanges.push({
+          id: node.id,
+          type: "select",
+          selected: !1
+        });
+      nodeChanges.push({
+        id: focusedNodeId,
         type: "select",
-        selected: !1
+        selected: !0
+      }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges);
+      const maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds(focusBounds, width, height, MinZoom, maxZoom, 0.2);
+      panZoom == null || panZoom.setViewport(viewport, {
+        duration: 350
       });
-    nodeChanges.push({
-      id: focusedNodeId,
-      type: "select",
-      selected: !0
-    }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges), fitView2({
-      duration: 350,
-      padding: 0.1,
-      minZoom: MinZoom,
-      maxZoom: Math.max(1, transform2[2]),
-      nodes: Array.from(fitViewNodes)
-    });
-  }, [diagramStore, xyflowApi, focusedNodeId]), null;
+    }),
+    [diagramStore]
+  ), null;
 }
 function SyncWithDiagram() {
-  const xyflowSynced = useDiagramState((s) => s.xyflowSynced), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
+  const xyflowSynced = useDiagramState((s) => s.xyflowSynced), diagramStoreApi = useDiagramStoreApi();
   return useEffect(() => {
     if (xyflowSynced)
       return;
@@ -8741,7 +8786,8 @@ function SyncWithDiagram() {
       view,
       nodesDraggable,
       nodesSelectable,
-      focusedNodeId
+      focusedNodeId,
+      xystore
     } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData(view, {
       draggable: nodesDraggable,
       selectable: nodesSelectable || focusedNodeId !== null
@@ -8750,7 +8796,7 @@ function SyncWithDiagram() {
       edgeLookup,
       setNodes,
       setEdges
-    } = xyflowApi.getState();
+    } = xystore.getState();
     setNodes(updates.nodes.map((update) => {
       var _a;
       const existing = (_a = nodeLookup.get(update.id)) == null ? void 0 : _a.internals.userNode;
@@ -8760,8 +8806,8 @@ function SyncWithDiagram() {
       } : update;
     })), setEdges(updates.edges.map((update) => {
       const existing = edgeLookup.get(update.id);
-      return existing ? deepEqual(existing.data.controlPoints, update.data.controlPoints) && deepEqual(existing.data.edge, update.data.edge) ? existing : {
-        ...existing,
+      return existing ? deepEqual(existing.data.controlPoints, update.data.controlPoints) && deepEqual(existing.markerStart, update.markerStart) && deepEqual(existing.markerEnd, update.markerEnd) && deepEqual(existing.data.edge, update.data.edge) ? existing : {
+        ...omit(existing, ["data", "markerStart", "markerEnd"]),
         ...update,
         data: {
           ...existing.data,
@@ -8775,40 +8821,225 @@ function SyncWithDiagram() {
       !1,
       "xyflowSynced"
     );
-  }, [xyflowSynced, xyflowApi, diagramStoreApi]), null;
-}
-var container$4 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", cssEdgePath = "bexn7q7", varLabelX = "var(--bexn7q8)", varLabelY = "var(--bexn7q9)", edgeLabel = "bexn7qb", stepEdgeNumber = "bexn7qc", edgeLabelText = "bexn7qd";
-function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight
-  } = getNodeDimensions(intersectionNode), intersectionNodePosition = intersectionNode.internals.positionAbsolute, w = intersectionNodeWidth / 2, h = intersectionNodeHeight / 2, x2 = intersectionNodePosition.x + w, y2 = intersectionNodePosition.y + h, xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h), yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h), a = 1 / (Math.abs(xx1) + Math.abs(yy1)), xx3 = a * xx1, yy3 = a * yy1, x = w * (xx3 + yy3) + x2, y = h * (-xx3 + yy3) + y2;
-  return { x, y };
+  }, [xyflowSynced, diagramStoreApi]), null;
 }
-function bezierPath(bezierSpline) {
-  let [start2, ...points] = bezierSpline;
-  invariant(start2, "start should be defined");
-  let path = `M ${start2[0]},${start2[1]}`;
-  for (; hasAtLeast$1(points, 3); ) {
-    const [cp1, cp2, end, ...rest] = points;
-    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
+const Open = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-4 -4 14 16",
+    refX: 5,
+    refY: 4,
+    markerWidth: "7",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0,0 L7,4 L0,8 L4,4 Z",
+        stroke: "context-stroke",
+        fill: "context-stroke",
+        strokeDasharray: 0,
+        strokeWidth: 1,
+        strokeLinecap: "round"
+      }
+    )
   }
-  return invariant(points.length === 0, "all points should be consumed"), path;
-}
-const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
-  const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
-  return isSame(ax, bx) && isSame(ay, by);
-}, sameControlPoints = (a, b) => a === b ? !0 : !a || !b || a.length !== b.length ? !1 : a.every((ap, i) => isSamePoint(ap, b[i])), isEqualProps$2 = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge = /* @__PURE__ */ memo(function({
+), Arrow = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-1 -1 12 10",
+    refX: 4,
+    refY: 3,
+    markerWidth: "8",
+    markerHeight: "6",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+        fill: "context-stroke",
+        strokeWidth: 0
+      }
+    )
+  }
+), OArrow = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-1 -1 12 10",
+    refX: 4,
+    refY: 3,
+    markerWidth: "8",
+    markerHeight: "6",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+        stroke: "context-stroke",
+        fill: "var(--likec4-background-color)",
+        strokeWidth: 1.25,
+        strokeLinejoin: "miter",
+        strokeLinecap: "square"
+      }
+    )
+  }
+), Diamond = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-4 -4 16 14",
+    refX: 5,
+    refY: 4,
+    markerWidth: "10",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5,0 L10,4 L5,8 L0,4 Z",
+        fill: "context-stroke",
+        strokeWidth: 0,
+        strokeLinecap: "round"
+      }
+    )
+  }
+), ODiamond = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-4 -4 16 14",
+    refX: 6,
+    refY: 4,
+    markerWidth: "10",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5,0 L10,4 L5,8 L0,4 Z",
+        stroke: "context-stroke",
+        fill: "var(--likec4-background-color)",
+        strokeWidth: 1.25,
+        strokeLinecap: "round"
+      }
+    )
+  }
+), Dot = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "0 0 10 10",
+    refX: 4,
+    refY: 4,
+    markerWidth: "6",
+    markerHeight: "6",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "circle",
+      {
+        strokeWidth: 0,
+        fill: "context-stroke",
+        cx: 4,
+        cy: 4,
+        r: 3
+      }
+    )
+  }
+), ODot = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "0 0 10 10",
+    refX: 4,
+    refY: 4,
+    markerWidth: "6",
+    markerHeight: "6",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "circle",
+      {
+        strokeWidth: 1.25,
+        stroke: "context-stroke",
+        fill: "var(--likec4-background-color)",
+        cx: 4,
+        cy: 4,
+        r: 3
+      }
+    )
+  }
+), EdgeMarkers = {
+  Arrow,
+  OArrow,
+  Open,
+  Diamond,
+  ODiamond,
+  Dot,
+  ODot
+};
+var container$4 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", controlDragging = "bexn7q6", cssEdgePath = "bexn7q8", varLabelX = "var(--bexn7q9)", varLabelY = "var(--bexn7qa)", edgeLabel = "bexn7qc", stepEdgeNumber = "bexn7qd", edgeLabelText = "bexn7qe";
+function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight
+  } = getNodeDimensions(intersectionNode), intersectionNodePosition = intersectionNode.internals.positionAbsolute, w = intersectionNodeWidth / 2, h = intersectionNodeHeight / 2, x2 = intersectionNodePosition.x + w, y2 = intersectionNodePosition.y + h, xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h), yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h), a = 1 / (Math.abs(xx1) + Math.abs(yy1)), xx3 = a * xx1, yy3 = a * yy1, x = w * (xx3 + yy3) + x2, y = h * (-xx3 + yy3) + y2;
+  return { x, y };
+}
+const toMarker = (arrowType) => {
+  if (!(!arrowType || arrowType === "none"))
+    switch (arrowType) {
+      case "normal":
+      case "crow":
+        return "Arrow";
+      case "onormal":
+        return "OArrow";
+      case "diamond":
+        return "Diamond";
+      case "odiamond":
+        return "ODiamond";
+      case "open":
+      case "vee":
+        return "Open";
+      case "dot":
+        return "Dot";
+      case "odot":
+        return "ODot";
+      default:
+        nonexhaustive(arrowType);
+    }
+};
+function bezierPath(bezierSpline) {
+  let [start2, ...points] = bezierSpline;
+  invariant(start2, "start should be defined");
+  let path = `M ${start2[0]},${start2[1]}`;
+  for (; hasAtLeast$1(points, 3); ) {
+    const [cp1, cp2, end, ...rest] = points;
+    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
+  }
+  return invariant(points.length === 0, "all points should be consumed"), path;
+}
+const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
+  return isSame(ax, bx) && isSame(ay, by);
+}, sameControlPoints = (a, b) => a === b ? !0 : !a || !b || a.length !== b.length ? !1 : a.every((ap, i) => isSamePoint(ap, b[i])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge = /* @__PURE__ */ memo(function({
   id: id2,
   data,
-  selected: _selected,
+  selected: selected2,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
   style: style2,
   source,
   target,
   interactionWidth
 }) {
-  var _a, _b;
-  const diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState((s) => ({
+  const [isControlPointDragging, setIsControlPointDragging] = useState(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState((s) => ({
     isEditable: s.readonly !== !0,
     isEdgePathEditable: s.readonly !== !0 && s.experimentalEdgeEditing === !0,
     isActive: s.focusedNodeId === source || s.focusedNodeId === target || s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
@@ -8835,12 +9066,18 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   let edgePath;
   if (isModified) {
     labelX = labelPos.x, labelY = labelPos.y;
-    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5]), targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5]), points = [
-      sourceCenterPos.positionAbsolute,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)),
+    const sourceCenterPos = { x: sourceX, y: sourceY }, targetCenterPos = { x: targetX, y: targetY }, points = diagramEdge.dir === "back" ? [
+      targetCenterPos,
+      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos),
+      sourceCenterPos
+    ] : [
+      sourceCenterPos,
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos),
       ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)),
-      targetCenterPos.positionAbsolute
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos),
+      targetCenterPos
     ];
     edgePath = nonNullable(curve(points));
   } else
@@ -8857,53 +9094,65 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
   }, [edgePath]);
   const onControlPointerDown = (index2, e) => {
     const { domNode } = xyflowStore.getState();
-    if (!domNode) return;
+    if (!domNode || e.pointerType !== "mouse")
+      return;
     const { xyflow } = diagramStore.getState();
+    if (e.button === 2 && controlPoints.length > 1) {
+      const newControlPoints = controlPoints.slice();
+      newControlPoints.splice(index2, 1), e.stopPropagation(), setTimeout(() => {
+        xyflow.updateEdgeData(id2, { controlPoints: newControlPoints });
+      }, 10);
+      return;
+    }
+    if (e.button !== 0)
+      return;
     e.stopPropagation();
     let hasMoved = !1, pointer2 = { x: e.clientX, y: e.clientY };
     const onPointerMove = (e2) => {
       if (!isSamePoint(pointer2, [e2.clientX, e2.clientY])) {
-        hasMoved = !0, pointer2 = { x: e2.clientX, y: e2.clientY };
+        setIsControlPointDragging(!0), hasMoved || diagramStore.getState().cancelSaveManualLayout(), hasMoved = !0, pointer2 = { x: e2.clientX, y: e2.clientY };
         const { x, y } = xyflow.screenToFlowPosition(pointer2, { snapToGrid: !1 }), newControlPoints = controlPoints.slice();
         newControlPoints[index2] = {
-          x: toDomPrecision(x),
-          y: toDomPrecision(y)
+          x: Math.round(x),
+          y: Math.round(y)
         }, xyflow.updateEdgeData(id2, { controlPoints: newControlPoints });
       }
     }, onPointerUp = () => {
-      domNode.removeEventListener("pointermove", onPointerMove), domNode.removeEventListener("pointerup", onPointerUp), hasMoved && diagramStore.getState().triggerSaveManualLayout(xyflowStore);
+      setIsControlPointDragging(!1), domNode.removeEventListener("pointermove", onPointerMove), domNode.removeEventListener("pointerup", onPointerUp), hasMoved && diagramStore.getState().triggerSaveManualLayout();
     };
     domNode.addEventListener("pointermove", onPointerMove), domNode.addEventListener("pointerup", onPointerUp, { once: !0 });
-  }, marker = `url(#arrow-${id2})`;
-  let markerStart = diagramEdge.tailArrow ? marker : void 0, markerEnd = diagramEdge.headArrow ? marker : void 0;
-  return isModified && diagramEdge.dir === "back" && ([markerStart, markerEnd] = [markerEnd, markerStart]), /* @__PURE__ */ jsxs(
+  };
+  let markerStartName = toMarker(diagramEdge.tail), markerEndName = toMarker(diagramEdge.head ?? "normal");
+  diagramEdge.dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
+  return /* @__PURE__ */ jsxs(
     "g",
     {
       className: clsx([
         container$4,
-        isDimmed && dimmed$2
+        isDimmed && dimmed$2,
+        isControlPointDragging && controlDragging
       ]),
       "data-likec4-color": color2,
       "data-edge-dir": diagramEdge.dir,
       "data-edge-active": isActive,
       "data-edge-hovered": isHovered,
       children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: clsx("react-flow__edge-interaction"),
+            d: edgePath,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: interactionWidth ?? 10
+          }
+        ),
         /* @__PURE__ */ jsxs("g", { className: markerContext, children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-            "marker",
-            {
-              id: `arrow-${id2}`,
-              viewBox: "0 0 16 10",
-              refX: isModified ? "15" : "1",
-              refY: "5",
-              markerWidth: "5",
-              markerHeight: "4",
-              markerUnits: "strokeWidth",
-              preserveAspectRatio: "xMaxYMid meet",
-              orient: "auto-start-reverse",
-              children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 16 5 L 0 10 z", stroke: "context-stroke", fill: "context-stroke" })
-            }
-          ) }),
+          /* @__PURE__ */ jsxs("defs", { children: [
+            MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id2 }),
+            MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id2 })
+          ] }),
           /* @__PURE__ */ jsx(
             "path",
             {
@@ -8922,68 +9171,97 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
               style: style2,
               strokeLinecap: "round",
               strokeDasharray,
-              markerStart,
-              markerEnd
+              markerStart: MarkerStart ? `url(#start${id2})` : void 0,
+              markerEnd: MarkerEnd ? `url(#end${id2})` : void 0
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(
-          "path",
+        isEdgePathEditable && /* @__PURE__ */ jsx(
+          "g",
           {
-            className: clsx("react-flow__edge-interaction"),
-            d: edgePath,
-            fill: "none",
-            strokeOpacity: 0,
-            strokeWidth: interactionWidth ?? 10
+            onContextMenu: (e) => {
+              e.preventDefault(), e.stopPropagation();
+            },
+            children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                onPointerDown: (e) => onControlPointerDown(i, e),
+                className: controlPoint,
+                cx: p.x,
+                cy: p.y,
+                r: 3
+              },
+              i
+            ))
           }
         ),
-        isEdgePathEditable && controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-          "circle",
+        (data.label || isStepEdge) && /* @__PURE__ */ jsx(
+          EdgeLabel,
           {
-            onPointerDown: (e) => onControlPointerDown(i, e),
-            className: controlPoint,
-            cx: p.x,
-            cy: p.y,
-            r: 3
-          },
-          i
-        )),
-        (data.label || isStepEdge) && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: clsx([
-              container$4,
-              edgeLabel,
-              isDimmed && dimmed$2
-            ]),
-            "data-likec4-color": color2,
-            style: {
-              ...assignInlineVars({
-                [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
-                [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
-              }),
-              ...isEdgePathEditable && {
-                pointerEvents: "none"
-              },
-              ...data.label && {
-                maxWidth: data.label.bbox.width + 12
-              },
-              zIndex: ((_a = edgeLookup.get(id2)) == null ? void 0 : _a.zIndex) ?? ZIndexes.Edge
-            },
-            mod: {
-              "data-edge-hovered": isHovered,
-              "data-edge-active": isActive
-            },
-            children: [
-              isStepEdge && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: data.stepNum }),
-              ((_b = data.label) == null ? void 0 : _b.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: data.label.text })
-            ]
+            isDimmed,
+            color: color2,
+            isModified,
+            labelX,
+            labelY,
+            isEdgePathEditable,
+            selected: selected2 ?? !1,
+            stepNum: data.stepNum,
+            label: data.label,
+            zIndex: edgeLookup.get(id2).zIndex ?? ZIndexes.Edge,
+            isHovered,
+            isActive,
+            isStepEdge
           }
-        ) })
+        )
       ]
     }
   );
-}, isEqualProps$2);
+}, isEqualProps$2), EdgeLabel = memo(({
+  isDimmed,
+  color: color2,
+  isModified,
+  labelX,
+  labelY,
+  isEdgePathEditable,
+  selected: selected2,
+  label,
+  stepNum,
+  isHovered,
+  isActive,
+  zIndex
+}) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+  Box,
+  {
+    className: clsx([
+      "nodrag nopan",
+      container$4,
+      edgeLabel,
+      isDimmed && dimmed$2
+    ]),
+    style: {
+      ...assignInlineVars({
+        [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
+        [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
+      }),
+      ...isEdgePathEditable && selected2 && {
+        pointerEvents: "none"
+      },
+      ...label && {
+        maxWidth: label.bbox.width + 18
+      },
+      zIndex
+    },
+    mod: {
+      "data-likec4-color": color2,
+      "data-edge-hovered": isHovered,
+      "data-edge-active": isActive
+    },
+    children: [
+      stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
+      isTruthy(label == null ? void 0 : label.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: label.text })
+    ]
+  }
+) }), deepEqual);
 function NavigateToBtn({ xynodeId, className }) {
   const diagramApi = useDiagramStoreApi();
   return /* @__PURE__ */ jsx(
@@ -9008,14 +9286,13 @@ function NavigateToBtn({ xynodeId, className }) {
     }
   );
 }
-var container$3 = "lbtzdo0", dimmed$1 = "lbtzdo1", varOpacity = "var(--lbtzdo2)", varBorderTransparency = "var(--lbtzdo3)", compoundBody = "lbtzdo4", transparent = "lbtzdo6", title$2 = "lbtzdo7", titleWithNavigation = "lbtzdo8", indicator$1 = "lbtzdoc", navigateBtn = "lbtzdoe";
+var container$3 = "lbtzdo0", nodeHandlerInCenter = "lbtzdo1", dimmed$1 = "lbtzdo2", varOpacity = "var(--lbtzdo3)", varBorderTransparency = "var(--lbtzdo4)", compoundBody = "lbtzdo5", transparent = "lbtzdo7", title$2 = "lbtzdo8", titleWithNavigation = "lbtzdo9", indicator$1 = "lbtzdod", navigateBtn = "lbtzdof";
 const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.data.element, next.data.element), CompoundNodeMemo = /* @__PURE__ */ memo(function({
   id: id2,
   data: {
     element: element2
   }
 }) {
-  DEV && useTilg();
   const { color: color2, style: style2, depth = 1, ...compound } = element2, opacity = clamp$1((style2.opacity ?? 100) / 100, {
     min: 0,
     max: 1
@@ -9027,138 +9304,118 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
     isDimmed: s.dimmed.has(id2),
     hasOnNavigateTo: !!s.onNavigateTo
   })), isnavigable = !!compound.navigateTo && hasOnNavigateTo;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: clsx(
-        container$3,
-        "likec4-compound-node",
-        opacity < 1 && "likec4-compound-transparent",
-        isDimmed && dimmed$1
-      ),
-      mod: {
-        "compound-depth": depth,
-        "likec4-color": color2,
-        hovered: isHovered
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "target",
-            position: Position.Top,
-            style: { visibility: "hidden" }
-          }
-        ),
-        /* @__PURE__ */ jsx("svg", { className: indicator$1, children: /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: 0,
-            y: 0,
-            width: "100%",
-            height: "100%",
-            rx: 6
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              compoundBody,
-              opacity < 1 && transparent,
-              "likec4-compound"
-            ),
-            style: opacity < 1 ? {
-              ...assignInlineVars({
-                [varBorderTransparency]: `${borderTransparency}%`,
-                [varOpacity]: opacity.toFixed(2)
-              }),
-              borderStyle: style2.border ?? "dashed"
-            } : void 0,
-            children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                component: "div",
-                className: clsx(
-                  title$2,
-                  isnavigable && titleWithNavigation,
-                  "likec4-compound-title"
-                ),
-                children: compound.title
-              }
-            )
-          }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        className: nodeHandlerInCenter
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx(
+          container$3,
+          "likec4-compound-node",
+          opacity < 1 && "likec4-compound-transparent",
+          isDimmed && dimmed$1
         ),
-        isnavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: navigateBtn }),
-        /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "source",
-            position: Position.Bottom,
-            style: { visibility: "hidden" }
-          }
-        )
-      ]
-    }
-  );
+        mod: {
+          "compound-depth": depth,
+          "likec4-color": color2,
+          hovered: isHovered
+        },
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: indicator$1, children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 0,
+              y: 0,
+              width: "100%",
+              height: "100%",
+              rx: 6
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                compoundBody,
+                opacity < 1 && transparent,
+                "likec4-compound"
+              ),
+              style: opacity < 1 ? {
+                ...assignInlineVars({
+                  [varBorderTransparency]: `${borderTransparency}%`,
+                  [varOpacity]: opacity.toFixed(2)
+                }),
+                borderStyle: style2.border ?? "dashed"
+              } : void 0,
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  className: clsx(
+                    title$2,
+                    isnavigable && titleWithNavigation,
+                    "likec4-compound-title"
+                  ),
+                  children: compound.title
+                }
+              )
+            }
+          ),
+          isnavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: navigateBtn })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Top,
+        className: nodeHandlerInCenter
+      }
+    )
+  ] });
 }, isEqualProps$1);
-var container$2 = "_1b6tkn2", dimmed = "_1b6tkn3", indicator = "_1b6tkn5", fillElementFill = "_1b6tkn6", fillMixStroke = "_1b6tkn8", title$1 = "_1b6tkn9", description$1 = "_1b6tkna", technology = "_1b6tknb", element = "_1b6tknc", iconMaxH = "var(--_1b6tknd)", elementIcon = "_1b6tkne", cssShapeSvg = "_1b6tknh", cssNavigateBtn = "_1b6tkni";
+var container$2 = "_1b6tkn2", handleCenter = "_1b6tkn3", containerAnimated = "_1b6tkn4", dimmed = "_1b6tkn5", indicator = "_1b6tkn8", fillElementFill = "_1b6tkn9", fillMixStroke = "_1b6tknb", title$1 = "_1b6tknc", description$1 = "_1b6tknd", technology = "_1b6tkne", element = "_1b6tknf", iconOffsetY = "var(--_1b6tkng)", elementIcon = "_1b6tkni", cssShapeSvg = "_1b6tknk", cssNavigateBtn = "_1b6tknl";
 function ElementIcon({
-  node,
-  paddingY = 32
+  node: {
+    icon,
+    title: title2,
+    labelBBox
+  }
 }) {
-  if (!node.icon)
-    return null;
-  const firstLabel = node.labels[0];
-  if (!firstLabel)
-    return null;
-  const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25), maxIconHeight = Math.floor(firstLabelY - paddingY - 16);
-  return /* @__PURE__ */ jsx(
+  return icon ? /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(elementIcon, "likec4-element-icon"),
-      style: assignInlineVars({ iconMaxH }, {
-        iconMaxH: maxIconHeight + "px"
+      style: assignInlineVars({ iconOffsetY }, {
+        iconOffsetY: labelBBox.y + "px"
       }),
       children: /* @__PURE__ */ jsx(
         "img",
         {
-          src: node.icon,
-          alt: node.title
+          src: icon,
+          alt: title2
         }
       )
     }
-  );
+  ) : null;
 }
-const Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ref,
-    className: clsx("icon icon-tabler", className),
-    stroke: "currentColor",
-    fill: "currentColor",
-    strokeWidth: "0",
-    viewBox: "0 0 20 20",
-    height: "20",
-    width: "20",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z",
-        clipRule: "evenodd"
-      }
-    )
-  }
-));
 var elementLink = "_4ysv0o0", trigger = "_4ysv0o1";
+const selector$2 = (s) => {
+  const target = s.getContainer();
+  return target ? { target } : null;
+};
 function ElementLink({
   element: element2
 }) {
   invariant(element2.links, "ElementLink: links are required");
-  const id2 = useId();
+  const id2 = useId(), portalProps = useDiagramState(selector$2);
   return /* @__PURE__ */ jsx("div", { className: elementLink, "data-likec4-linkid": id2, children: /* @__PURE__ */ jsxs(
     HoverCard,
     {
@@ -9171,7 +9428,7 @@ function ElementLink({
       transitionProps: {
         transition: "pop"
       },
-      withinPortal: !1,
+      ...portalProps ? { portalProps } : { withinPortal: !1 },
       floatingStrategy: "fixed",
       openDelay: 350,
       closeDelay: 800,
@@ -9186,7 +9443,7 @@ function ElementLink({
             className: clsx("nodrag nopan", trigger),
             autoFocus: !1,
             children: [
-              /* @__PURE__ */ jsx(Link, {}),
+              /* @__PURE__ */ jsx(IconLink, { size: 12 }),
               /* @__PURE__ */ jsx("span", { children: "links" })
             ]
           }
@@ -9371,13 +9628,13 @@ const selectedScale = 1.015, variants = {
   idle: (_, { scale }) => ({
     scale: 1,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   selected: (_, { scale }) => ({
     scale: selectedScale,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   // dimmed: {
@@ -9401,29 +9658,26 @@ const selectedScale = 1.015, variants = {
   //     delay: 1
   //   }
   // }),
-  hovered: (_, { scale }) => ({
-    scale: 1.06,
-    transition: {
-      delay: isNumber(scale) && scale !== 1 && scale !== selectedScale ? 0 : 0.15
-    }
-  }),
+  hovered: {
+    scale: 1.06
+  },
   tap: {
     scale: 0.975
   }
   // tap: {
   //   scale: 0.9
   // }
-}, isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data.element, next.data.element), ElementNodeMemo = memo(function({
+}, isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual(prev.draggable ?? !1, next.draggable ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data.element, next.data.element), ElementNodeMemo = memo(function({
   id: id2,
   data: {
     element: element$1
   },
   dragging,
+  // draggable = false,
   selected: selected2 = !1,
   width,
   height
 }) {
-  DEV && useTilg();
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id2,
     isDimmed: s.dimmed.has(id2),
@@ -9446,209 +9700,234 @@ const selectedScale = 1.015, variants = {
       animate = "selected";
       break;
   }
-  return /* @__PURE__ */ jsxs(
-    m.div,
-    {
-      id: id2,
-      className: clsx([
-        container$2,
-        isDimmed && dimmed,
-        "likec4-element-node"
-      ]),
-      "data-likec4-color": element$1.color,
-      "data-likec4-shape": element$1.shape,
-      variants,
-      initial: !1,
-      animate,
-      ...isInteractive && {
-        whileTap: dragging ? animate : "tap"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "target",
-            position: Position.Top,
-            style: { visibility: "hidden" }
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            className: clsx(
-              cssShapeSvg
-            ),
-            viewBox: `0 0 ${w} ${h}`,
-            width: w,
-            height: h,
-            children: [
-              /* @__PURE__ */ jsx("g", { className: indicator, children: /* @__PURE__ */ jsx(
-                SelectedIndicator,
-                {
-                  shape: element$1.shape,
-                  w,
-                  h
-                }
-              ) }),
-              /* @__PURE__ */ jsx(
-                ElementShapeSvg,
-                {
-                  shape: element$1.shape,
-                  w,
-                  h
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: clsx(element, "likec4-element"), children: [
-          element$1.icon && /* @__PURE__ */ jsx(ElementIcon, { node: element$1 }),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: clsx(title$1, "likec4-element-title"),
-              children: element$1.title
-            }
-          ),
-          element$1.technology && /* @__PURE__ */ jsx(
-            Text,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        className: handleCenter
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        id: id2,
+        className: clsx([
+          container$2,
+          isDimmed && dimmed,
+          animate !== "idle" && containerAnimated,
+          "likec4-element-node"
+        ]),
+        "data-hovered": !dragging && isHovered,
+        "data-likec4-color": element$1.color,
+        "data-likec4-shape": element$1.shape,
+        variants,
+        initial: !1,
+        animate,
+        ...isInteractive && {
+          whileTap: dragging ? animate : "tap"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
             {
-              component: "div",
-              className: clsx(technology, "likec4-element-technology"),
-              children: element$1.technology
+              className: clsx(
+                cssShapeSvg
+              ),
+              viewBox: `0 0 ${w} ${h}`,
+              width: w,
+              height: h,
+              children: [
+                /* @__PURE__ */ jsx("g", { className: indicator, children: /* @__PURE__ */ jsx(
+                  SelectedIndicator,
+                  {
+                    shape: element$1.shape,
+                    w,
+                    h
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  ElementShapeSvg,
+                  {
+                    shape: element$1.shape,
+                    w,
+                    h
+                  }
+                )
+              ]
             }
           ),
-          element$1.description && /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: clsx(description$1, "likec4-element-description"),
-              children: element$1.description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "source",
-            position: Position.Bottom,
-            style: { visibility: "hidden" }
-          }
-        ),
-        isHovercards && element$1.links && /* @__PURE__ */ jsx(ElementLink, { element: element$1 }),
-        isNavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: cssNavigateBtn })
-      ]
-    }
-  );
+          /* @__PURE__ */ jsxs("div", { className: clsx(element, "likec4-element"), children: [
+            /* @__PURE__ */ jsx(ElementIcon, { node: element$1 }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                component: "div",
+                className: clsx(title$1, "likec4-element-title"),
+                children: element$1.title
+              }
+            ),
+            element$1.technology && /* @__PURE__ */ jsx(
+              Text,
+              {
+                component: "div",
+                className: clsx(technology, "likec4-element-technology"),
+                children: element$1.technology
+              }
+            ),
+            element$1.description && /* @__PURE__ */ jsx(
+              Text,
+              {
+                component: "div",
+                className: clsx(description$1, "likec4-element-description"),
+                children: element$1.description
+              }
+            )
+          ] }),
+          isHovercards && element$1.links && /* @__PURE__ */ jsx(ElementLink, { element: element$1 }),
+          isNavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: cssNavigateBtn })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Top,
+        className: handleCenter
+      }
+    )
+  ] });
 }, isEqualProps);
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), lastClickTimestamp = useRef(), dblclickTimeout = useRef(), dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
-    dblclickTimeout.current = void 0;
-  }, 250), !1), lastClickWasRecent = (ms = 1500) => lastClickTimestamp.current && Date.now() - lastClickTimestamp.current < ms, hoveredNodeFromOnEdgeEnterRef = useRef("");
-  return useMemo(() => ({
-    onDoubleClick: (event) => {
-      const {
-        fitViewEnabled,
-        onCanvasDblClick,
-        resetLastClicked,
-        fitDiagram
-      } = diagramApi.getState();
-      fitViewEnabled && (fitDiagram(xyflowApi), onCanvasDblClick || event.stopPropagation()), resetLastClicked(), onCanvasDblClick == null || onCanvasDblClick(event);
-    },
-    onPaneClick: (event) => {
-      if (dbclickLock())
-        return;
-      const {
-        focusedNodeId,
-        activeDynamicViewStep,
-        fitDiagram,
-        onCanvasClick,
-        resetLastClicked
-      } = diagramApi.getState();
-      (focusedNodeId || activeDynamicViewStep) && (fitDiagram(xyflowApi), onCanvasClick || event.stopPropagation()), resetLastClicked(), onCanvasClick == null || onCanvasClick(event);
-    },
-    onNodeContextMenu: (event, xynode) => {
-      var _a, _b;
-      diagramApi.getState().setLastClickedNode(xynode.id), (_b = (_a = diagramApi.getState()).onNodeContextMenu) == null || _b.call(_a, {
-        element: xynode.data.element,
-        xynode,
-        event
-      });
-    },
-    onPaneContextMenu: (event) => {
-      var _a, _b;
-      diagramApi.getState().resetLastClicked(), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
-    },
-    onEdgeContextMenu: (event, xyedge) => {
-      var _a, _b;
-      diagramApi.getState().setLastClickedEdge(xyedge.id), (_b = (_a = diagramApi.getState()).onEdgeContextMenu) == null || _b.call(_a, {
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      });
-    },
-    onNodeClick: (event, xynode) => {
-      const {
-        zoomable,
-        fitViewEnabled,
-        focusedNodeId,
-        focusOnNode,
-        onNodeClick,
-        lastClickedNodeId,
-        setLastClickedNode
-      } = diagramApi.getState();
-      setLastClickedNode(xynode.id);
-      const focusPossible = zoomable && fitViewEnabled, shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = isNullish(focusedNodeId) && lastClickedNodeId === xynode.id && lastClickWasRecent();
-      focusPossible && (shallChangeFocus || clickedRecently) && (focusOnNode(xynode.id), onNodeClick || event.stopPropagation()), lastClickTimestamp.current = Date.now(), onNodeClick == null || onNodeClick({
-        element: xynode.data.element,
-        xynode,
-        event
-      });
-    },
-    onNodeDoubleClick: (event, xynode) => {
-      const {
-        focusedNodeId,
-        zoomable,
-        fitViewEnabled,
-        fitDiagram,
-        focusOnNode,
-        setLastClickedNode
-      } = diagramApi.getState();
-      setLastClickedNode(xynode.id), (focusedNodeId || zoomable && fitViewEnabled) && (focusedNodeId === xynode.id ? fitDiagram(xyflowApi) : focusOnNode(xynode.id), event.stopPropagation());
-    },
-    onEdgeClick: (event, xyedge) => {
-      diagramApi.getState().setLastClickedEdge(xyedge.id);
-      const { focusedNodeId, focusOnNode, onEdgeClick } = diagramApi.getState();
-      focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target) && (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      });
-    },
-    onMoveEnd: (event, _viewport) => {
-      const viewportChanged = !!event;
-      viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
-    },
-    onNodeMouseEnter: (_event, xynode) => {
-      hoveredNodeFromOnEdgeEnterRef.current = "", diagramApi.getState().setHoveredNode(xynode.id);
-    },
-    onNodeMouseLeave: (_event, xynode) => {
-      const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
-      hoveredNodeId === xynode.id && setHoveredNode(null);
-    },
-    onEdgeMouseEnter: (_event, { id: id2, source, target }) => {
-      const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState();
-      if (setHoveredEdge(id2), (focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
-        const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source;
-        setHoveredNode(next);
+  const diagramApi = useDiagramStoreApi(), lastClickTimestamp = useRef(), dblclickTimeout = useRef(), hoveredNodeFromOnEdgeEnterRef = useRef("");
+  return useMemo(() => {
+    const dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+      dblclickTimeout.current = void 0;
+    }, 250), !1), lastClickWasRecent = (ms = 1500) => lastClickTimestamp.current && Date.now() - lastClickTimestamp.current < ms;
+    return {
+      onDoubleClick: (event) => {
+        const {
+          fitViewEnabled,
+          onCanvasDblClick,
+          resetLastClicked,
+          fitDiagram
+        } = diagramApi.getState();
+        fitViewEnabled && (fitDiagram(), onCanvasDblClick || event.stopPropagation()), resetLastClicked(), onCanvasDblClick == null || onCanvasDblClick(event);
+      },
+      onPaneClick: (event) => {
+        if (dbclickLock())
+          return;
+        const {
+          focusedNodeId,
+          activeDynamicViewStep,
+          fitDiagram,
+          onCanvasClick,
+          resetLastClicked
+        } = diagramApi.getState();
+        (focusedNodeId ?? activeDynamicViewStep) !== null && (fitDiagram(), onCanvasClick || event.stopPropagation()), resetLastClicked(), onCanvasClick == null || onCanvasClick(event);
+      },
+      onNodeContextMenu: (event, xynode) => {
+        var _a, _b;
+        diagramApi.getState().setLastClickedNode(xynode.id), (_b = (_a = diagramApi.getState()).onNodeContextMenu) == null || _b.call(_a, {
+          element: xynode.data.element,
+          xynode,
+          event
+        });
+      },
+      onPaneContextMenu: (event) => {
+        var _a, _b;
+        diagramApi.getState().resetLastClicked(), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
+      },
+      onEdgeContextMenu: (event, xyedge) => {
+        var _a, _b;
+        diagramApi.getState().setLastClickedEdge(xyedge.id), (_b = (_a = diagramApi.getState()).onEdgeContextMenu) == null || _b.call(_a, {
+          edge: xyedge.data.edge,
+          xyedge,
+          event
+        });
+      },
+      onNodeClick: (event, xynode) => {
+        const {
+          zoomable,
+          fitViewEnabled,
+          focusedNodeId,
+          fitDiagram,
+          focusOnNode,
+          onNodeClick,
+          lastClickedNodeId,
+          setLastClickedNode
+        } = diagramApi.getState();
+        setLastClickedNode(xynode.id);
+        const focusPossible = zoomable && fitViewEnabled, shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent();
+        if (focusPossible) {
+          let stopPropagation = !1;
+          switch (!0) {
+            case (!focusedNodeId && clickedRecently):
+            case shallChangeFocus:
+              stopPropagation = !0, focusOnNode(xynode.id);
+              break;
+            case (focusedNodeId === xynode.id && clickedRecently):
+              stopPropagation = !0, fitDiagram();
+              break;
+          }
+          !onNodeClick && stopPropagation && event.stopPropagation();
+        }
+        lastClickTimestamp.current = Date.now(), onNodeClick == null || onNodeClick({
+          element: xynode.data.element,
+          xynode,
+          event
+        });
+      },
+      onNodeDoubleClick: (event, xynode) => {
+        const {
+          focusedNodeId,
+          zoomable,
+          fitViewEnabled,
+          fitDiagram,
+          focusOnNode,
+          setLastClickedNode
+        } = diagramApi.getState();
+        setLastClickedNode(xynode.id), lastClickTimestamp.current = Date.now(), (focusedNodeId || zoomable && fitViewEnabled) && (focusedNodeId === xynode.id ? fitDiagram() : focusOnNode(xynode.id), event.stopPropagation());
+      },
+      onEdgeClick: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id);
+        const {
+          focusedNodeId,
+          focusOnNode,
+          onEdgeClick
+        } = diagramApi.getState();
+        focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target) && (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
+          edge: xyedge.data.edge,
+          xyedge,
+          event
+        });
+      },
+      onMoveEnd: (event, _viewport) => {
+        const viewportChanged = !!event;
+        viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
+      },
+      onNodeMouseEnter: (_event, xynode) => {
+        hoveredNodeFromOnEdgeEnterRef.current = "", diagramApi.getState().setHoveredNode(xynode.id);
+      },
+      onNodeMouseLeave: (_event, xynode) => {
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
+        hoveredNodeId === xynode.id && setHoveredNode(null);
+      },
+      onEdgeMouseEnter: (_event, { id: id2, source, target }) => {
+        const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState();
+        if (setHoveredEdge(id2), (focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
+          const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source;
+          setHoveredNode(next);
+        }
+      },
+      onEdgeMouseLeave: (_event, xyedge) => {
+        const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState();
+        hoveredEdgeId === xyedge.id && setHoveredEdge(null), hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current && setHoveredNode(null), hoveredNodeFromOnEdgeEnterRef.current = "";
       }
-    },
-    onEdgeMouseLeave: (_event, xyedge) => {
-      const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState();
-      hoveredEdgeId === xyedge.id && setHoveredEdge(null), hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current && setHoveredNode(null), hoveredNodeFromOnEdgeEnterRef.current = "";
-    }
-  }), [diagramApi, xyflowApi]);
+    };
+  }, [diagramApi]);
 }
 const nodeTypes = {
   element: ElementNodeMemo,
@@ -9733,9 +10012,6 @@ function XYFlow({
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo,
       edgesFocusable: hasOnEdgeClick,
-      ...!nodesSelectable && {
-        selectionKeyCode: null
-      },
       nodesDraggable,
       ...nodesDraggable && {
         onNodeDragStart: layoutConstraints.onNodeDragStart,
@@ -9745,6 +10021,7 @@ function XYFlow({
       zoomOnDoubleClick: !1,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
+      selectionKeyCode: null,
       onDoubleClick: handlers.onDoubleClick,
       onPaneClick: handlers.onPaneClick,
       onMoveEnd: handlers.onMoveEnd,
@@ -9771,7 +10048,68 @@ function XYFlow({
     }
   );
 }
-var container$1 = "hbkbtj0", paper = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
+var panel$1 = "_19mimxc0";
+function BackwardForwardPanel() {
+  const { hasBack, hasForward, ops } = useNavigationHistory();
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      className: clsx(
+        "react-flow__panel",
+        panel$1,
+        "likec4-navigation-panel"
+      ),
+      gap: "xs",
+      children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+        hasBack && /* @__PURE__ */ jsx(
+          m.div,
+          {
+            layout: !0,
+            initial: { opacity: 0.05, transform: "translateX(-10px)" },
+            animate: { opacity: 1, transform: "translateX(0)" },
+            exit: {
+              opacity: 0.05,
+              transform: "translateX(-10px)"
+            },
+            children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "light",
+                color: "gray",
+                onClick: () => ops.back(),
+                children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+              }
+            )
+          },
+          "back"
+        ),
+        hasForward && /* @__PURE__ */ jsx(
+          m.div,
+          {
+            layout: !0,
+            initial: { opacity: 0.05, transform: "translateX(10px)" },
+            animate: { opacity: 1, transform: "translateX(0)" },
+            exit: {
+              opacity: 0,
+              transform: "translateX(10px)"
+            },
+            children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "light",
+                color: "gray",
+                onClick: () => ops.forward(),
+                children: /* @__PURE__ */ jsx(IconChevronRight, {})
+              }
+            )
+          },
+          "forward"
+        )
+      ] })
+    }
+  );
+}
+var container$1 = "hbkbtj0", card = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
 const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
@@ -9796,16 +10134,31 @@ function DiagramTitlePanel() {
       style: {
         transformOrigin: "left center"
       },
-      children: /* @__PURE__ */ jsx(
-        Paper,
+      children: /* @__PURE__ */ jsxs(
+        Card,
         {
           radius: "sm",
-          withBorder: !isCollapsed,
-          className: paper,
-          p: isCollapsed ? "xs" : "lg",
+          className: card,
+          withBorder: !0,
+          p: "md",
+          pb: isCollapsed ? "sm" : "md",
           onDoubleClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", justify: "stretch", align: "stretch", children: [
-            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", onClick: toggle, style: { cursor: "pointer" }, children: [
+          children: [
+            /* @__PURE__ */ jsx(CardSection, { mb: isCollapsed ? 10 : "sm", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: !0,
+                size: "xs",
+                h: "sm",
+                py: 2,
+                radius: "0",
+                variant: isCollapsed ? "light" : "subtle",
+                color: "gray",
+                onClick: toggle,
+                children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: isCollapsed ? 0 : "sm", children: [
               /* @__PURE__ */ jsx(
                 Text,
                 {
@@ -9903,7 +10256,7 @@ function DiagramTitlePanel() {
                 }
               )
             ] })
-          ] })
+          ]
         }
       )
     },
@@ -9946,6 +10299,8 @@ function DynamicViewWalkthrough() {
     Box,
     {
       className: clsx("react-flow__panel", container),
+      onClick: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
       children: [
         isNullish(activeDynamicViewStep) && /* @__PURE__ */ jsx(
           Button,
@@ -9958,7 +10313,7 @@ function DynamicViewWalkthrough() {
             children: "Start"
           }
         ),
-        isNumber(activeDynamicViewStep) && /* @__PURE__ */ jsxs(Button.Group, { className: buttons, children: [
+        isNumber(activeDynamicViewStep) && /* @__PURE__ */ jsxs(ButtonGroup, { className: buttons, children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -10006,17 +10361,16 @@ const {
   { key: "primary", value: primary.fill },
   { key: "secondary", value: secondary.fill },
   { key: "muted", value: muted.fill }
-], colors = keys.strict(otherColors).map((key) => ({
+], colors = keys(otherColors).map((key) => ({
   key,
   value: defaultTheme.elements[key].fill
-}));
-function NodeOptions({ selectedNodeIds }) {
+})), NodeOptions = memo(({ selectedNodeIds }) => {
   const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
   if (!hasAtLeast$1(nodes, 1))
     return null;
   if (nodes.length !== selectedNodeIds.length)
     throw new Error("NodeOptions: nodes and props.nodes should have the same length");
-  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showOpacityOption = rest.length === 0 && firstNode.type === "compound", triggerChange = (style2) => {
+  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showOpacityOption = firstNode.type === "compound" && (rest.length === 0 || rest.every((node) => node.type === "compound")), triggerChange = (style2) => {
     const targets = nodes.map((node) => node.data.element.id);
     invariant(hasAtLeast$1(targets, 1), "At least one target is required"), diagramApi.getState().triggerChangeElementStyle({
       op: "change-element-style",
@@ -10024,8 +10378,14 @@ function NodeOptions({ selectedNodeIds }) {
       targets
     });
   };
-  return /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" }) }),
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Text, { fz: rem(9), fw: "500", c: "dimmed", children: [
+        "ELEMENT",
+        rest.length > 0 ? "S" : ""
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" })
+    ] }),
     showShapeOption && /* @__PURE__ */ jsx(
       ShapeOption,
       {
@@ -10046,6 +10406,7 @@ function NodeOptions({ selectedNodeIds }) {
     ),
     showOpacityOption && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Divider, { label: "opacity and border", labelPosition: "left" }),
+      /* @__PURE__ */ jsx(Space, { h: "xs" }),
       /* @__PURE__ */ jsx(
         OpacityOption,
         {
@@ -10055,6 +10416,7 @@ function NodeOptions({ selectedNodeIds }) {
           }
         }
       ),
+      /* @__PURE__ */ jsx(Space, { h: "sm" }),
       /* @__PURE__ */ jsx(
         BorderStyleOption,
         {
@@ -10067,7 +10429,7 @@ function NodeOptions({ selectedNodeIds }) {
     ] }, firstNode.id),
     /* @__PURE__ */ jsx(NavigateToOption, { nodes })
   ] });
-}
+}, (prevProps, nextProps) => shallowEqual(prevProps.selectedNodeIds, nextProps.selectedNodeIds));
 function Colors({
   nodes: [firstNode, ...nodes],
   onColorChange
@@ -10155,20 +10517,22 @@ function NavigateToOption({
   const isMultiple = nodes.length >= 1;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Divider, { label: "navigate to", labelPosition: "left" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        mt: "xs",
-        size: "xs",
-        variant: "filled",
-        value: isMultiple ? null : node.data.element.navigateTo ?? null,
-        disabled: isMultiple,
-        placeholder: isMultiple ? "[ multiple ]" : "select",
-        data: node.data.element.navigateTo ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }] : [],
-        allowDeselect: !0,
-        checkIconPosition: "right"
-      }
-    )
+    isMultiple && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "[ multiple ]" }),
+    !isMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Space, { h: "xs" }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "xs",
+          variant: "filled",
+          value: node.data.element.navigateTo ?? null,
+          placeholder: "select",
+          data: node.data.element.navigateTo ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }] : [],
+          allowDeselect: !0,
+          checkIconPosition: "right"
+        }
+      )
+    ] })
   ] });
 }
 function OpacityOption({
@@ -10182,7 +10546,6 @@ function OpacityOption({
   }, [selectedOpacity]), /* @__PURE__ */ jsx(
     Slider,
     {
-      mt: "xs",
       size: "sm",
       color: "dark",
       value,
@@ -10199,7 +10562,7 @@ function BorderStyleOption({
   const [value, setValue] = useState(selecteBorderStyle);
   return useUpdateEffect(() => {
     setValue(selecteBorderStyle);
-  }, [selecteBorderStyle]), /* @__PURE__ */ jsx(Box, { mt: "md", children: /* @__PURE__ */ jsx(
+  }, [selecteBorderStyle]), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       size: "xs",
@@ -10219,14 +10582,25 @@ function BorderStyleOption({
   ) });
 }
 var panel = "_1lmzt1h0";
-const OptionsPanelMemo = memo(function() {
-  const isFocusDisabled = useDiagramState((s) => isNullish(s.focusedNodeId)), [selectedNodes, setSelectedNodes] = useState([]);
-  return useOnSelectionChange({
-    onChange: ({ nodes }) => {
-      const next = nodes.map((n) => n.id);
-      setSelectedNodes((prev) => deepEqual(prev, next) ? prev : next);
-    }
-  }), /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isFocusDisabled && selectedNodes.length > 0 && /* @__PURE__ */ jsx(
+function OptionsPanel() {
+  const { isFocused, viewId } = useDiagramState((s) => ({
+    viewId: s.view.id,
+    isFocused: s.focusedNodeId !== null || s.activeDynamicViewStep !== null
+  })), [selected2, setSelected] = useState({
+    nodes: [],
+    edges: []
+  });
+  useOnSelectionChange({
+    onChange: ({ nodes: nodes2, edges }) => {
+      const newSelected = {
+        nodes: nodes2.map((n) => n.id).sort(),
+        edges: edges.map((e) => e.id).sort()
+      };
+      deepEqual(selected2, newSelected) || setSelected(newSelected);
+    }
+  });
+  const { nodes } = selected2, hasAnySelection = !isFocused && nodes.length > 0;
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: hasAnySelection && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0, scale: 0.85 },
@@ -10238,12 +10612,14 @@ const OptionsPanelMemo = memo(function() {
       transition: { duration: 0.14 },
       className: clsx("react-flow__panel", panel),
       style: {
-        transformOrigin: "center right"
+        transformOrigin: "center right",
+        maxWidth: "320px"
       },
-      children: /* @__PURE__ */ jsx(Card, { shadow: "sm", children: /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
-    }
+      children: /* @__PURE__ */ jsx(Card, { shadow: "md", children: nodes.length > 0 && /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: nodes }) })
+    },
+    viewId
   ) });
-}), OptionsPanel2 = OptionsPanelMemo;
+}
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -10267,10 +10643,11 @@ const XYFlowInner = memo(function({
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
   const {
-    isDynamicView: isDynamicView2,
+    isDynamicView,
     isDynamicViewActive,
     readonly
   } = useDiagramState((s) => ({
@@ -10281,9 +10658,10 @@ const XYFlowInner = memo(function({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     background !== "transparent" && background !== "solid" && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
     controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
-    readonly === !1 && /* @__PURE__ */ jsx(OptionsPanel2, {}),
+    readonly === !1 && /* @__PURE__ */ jsx(OptionsPanel, {}),
     !isDynamicViewActive && showDiagramTitle === !0 && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
-    isDynamicView2 && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardPanel, {}),
     children2
   ] });
 }, shallowEqual);
@@ -10301,6 +10679,7 @@ function LikeC4Diagram({
   controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
+  showNavigationButtons = !1,
   enableDynamicViewWalkthrough = !0,
   initialWidth,
   initialHeight,
@@ -10339,6 +10718,8 @@ function LikeC4Diagram({
         DiagramContextProvider,
         {
           view,
+          keepAspectRatio,
+          className: clsx(rootClassName, className),
           readonly,
           pannable,
           zoomable,
@@ -10358,26 +10739,18 @@ function LikeC4Diagram({
           onNavigateTo,
           onCanvasDblClick,
           children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
-            KeepAspectRatioContainer,
+            LikeC4DiagramInnerMemo,
             {
-              className: clsx(rootClassName, className),
-              enabled: keepAspectRatio,
-              width: view.width,
-              height: view.height,
-              children: /* @__PURE__ */ jsx(
-                LikeC4DiagramInnerMemo,
-                {
-                  defaultNodes: initialRef.current.defaultNodes,
-                  defaultEdges: initialRef.current.defaultEdges,
-                  fitView: fitView2,
-                  zoomable,
-                  background,
-                  controls,
-                  pannable,
-                  showDiagramTitle,
-                  enableDynamicViewWalkthrough
-                }
-              )
+              defaultNodes: initialRef.current.defaultNodes,
+              defaultEdges: initialRef.current.defaultEdges,
+              fitView: fitView2,
+              zoomable,
+              background,
+              controls,
+              pannable,
+              showDiagramTitle,
+              showNavigationButtons,
+              enableDynamicViewWalkthrough
             }
           ) })
         }
@@ -10394,9 +10767,21 @@ const LikeC4DiagramInnerMemo = memo(function({
   defaultNodes,
   defaultEdges,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
-  return DEV && useTilg(), /* @__PURE__ */ jsxs(Fragment, { children: [
+  DEV && useTilg();
+  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
+  return useEffect(() => {
+    if (!isInitialized)
+      return diagramApi.subscribe(
+        (s) => s.initialized,
+        setIsInitialized,
+        {
+          fireImmediately: !0
+        }
+      );
+  }, [isInitialized]), /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       XYFlow,
       {
@@ -10412,6 +10797,7 @@ const LikeC4DiagramInnerMemo = memo(function({
         children: /* @__PURE__ */ jsx(
           XYFlowInner,
           {
+            showNavigationButtons,
             showDiagramTitle,
             enableDynamicViewWalkthrough,
             background,
@@ -10420,7 +10806,7 @@ const LikeC4DiagramInnerMemo = memo(function({
         )
       }
     ),
-    /* @__PURE__ */ jsxs(WhenInitialized, { children: [
+    isInitialized && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SyncWithDiagram, {}),
       fitView2 && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
       fitView2 && zoomable && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})