@likec4/diagram 1.3.0 → 1.4.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 { Box, MantineContext, ActionIcon, Text, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, Divider, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Slider, SegmentedControl } from "@mantine/core";
+import { isArray, isNullish, entries, reduce, isEmpty, hasSubObject, hasAtLeast as hasAtLeast$1, 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, 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 = "";
@@ -2638,14 +2638,14 @@ 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, [sourceX, sourceY] = getHandlePosition(sourceNode, sourceHandle, sourcePosition), [targetX, targetY] = getHandlePosition(targetNode, targetHandle, targetPosition);
   return {
     sourceX,
     sourceY,
@@ -2666,9 +2666,9 @@ function toHandleBounds(handles) {
     target
   };
 }
-function getHandlePosition(position, node, handle = null) {
+function getHandlePosition(node, handle, fallbackPosition = Position.Left) {
   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) {
+  switch ((handle == null ? void 0 : handle.position) ?? fallbackPosition) {
     case Position.Top:
       return [x + width / 2, y];
     case Position.Right:
@@ -3046,13 +3046,19 @@ 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), []);
+  return (handleBounds[type] || []).reduce((res, handle) => {
+    if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
+      const [x, y] = getHandlePosition(node, handle);
+      res.push({
+        id: handle.id || null,
+        type,
+        nodeId: node.id,
+        x,
+        y
+      });
+    }
+    return res;
+  }, []);
 }
 function getClosestHandle(pos, connectionRadius, handles) {
   let closestHandles = [], minDistance = 1 / 0;
@@ -3083,7 +3089,7 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
 }
 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, getConnectionStartHandle }) {
   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();
@@ -3105,11 +3111,11 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   connectionStartHandle = {
     nodeId,
     handleId,
-    type: handleType
+    type: handleType,
+    position: (clickedHandle == null ? void 0 : clickedHandle.getAttribute("data-handlepos")) || Position.Top
   }, 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 });
@@ -3139,7 +3145,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     });
   }
   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, connectionStartHandle = 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);
 }
@@ -3160,11 +3166,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 = {
+    result.connection = connection;
+    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
+    result.isValid = isValid && isValidConnection(connection), result.endHandle = {
       nodeId: handleNodeId,
       handleId,
-      type: handleType
-    }, result.isValid = isValidConnection(connection));
+      type: handleType,
+      position: handleToCheck.getAttribute("data-handlepos")
+    };
   }
   return result;
 }
@@ -3683,7 +3692,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "nodesConnectable",
   "nodesFocusable",
   "edgesFocusable",
-  "edgesUpdatable",
+  "edgesReconnectable",
   "elevateNodesOnSelect",
   "elevateEdgesOnSelect",
   "minZoom",
@@ -4057,7 +4066,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 +4151,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 +4166,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();
@@ -4289,10 +4298,14 @@ const wrapHandler = (handler, containerRef) => (event) => {
   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$j, 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 +4313,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;
     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(), (_a = container2.current) == null || _a.setPointerCapture(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, ((_b = edgeIdLookup.current.get(edge.source)) == null ? void 0 : _b.add(id2)) || /* @__PURE__ */ new Set([id2])), edgeIdLookup.current.set(edge.target, ((_c = edgeIdLookup.current.get(edge.target)) == null ? void 0 : _c.add(id2)) || /* @__PURE__ */ new Set([id2]));
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
     resetSelectedElements(), store.setState({
       userSelectionRect: {
@@ -4319,10 +4332,11 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         y
       }
     }), onSelectionStart == null || onSelectionStart(event);
-  }, onMouseMove = (event) => {
+  }, onPointerMove = (event) => {
     const { userSelectionRect, edgeLookup, transform: transform2, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
-    if (!isSelecting || !containerBounds.current || !userSelectionRect)
+    if (!containerBounds.current || !userSelectionRect)
       return;
+    selectionInProgress.current = !0;
     const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current), { startX, startY } = userSelectionRect, nextUserSelectRect = {
       startX,
       startY,
@@ -4353,15 +4367,15 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       userSelectionActive: !0,
       nodesSelectionActive: !1
     });
-  }, onMouseUp = (event) => {
+  }, onPointerUp = (event) => {
+    var _a;
     if (event.button !== 0)
       return;
+    (_a = container2.current) == null || _a.releasePointerCapture(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)), store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 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);
@@ -4616,10 +4630,10 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     height
   } }) });
 }
-const selector$g = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
+const win = typeof window < "u" ? window : void 0, 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 { nodesSelectionActive, userSelectionActive } = useStore(selector$g), 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, 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());
@@ -4961,15 +4975,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 +5002,21 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
       onConnect: onConnectEdge,
       onConnectStart,
       onConnectEnd,
-      onEdgeUpdateEnd: _onEdgeUpdateEnd,
+      onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
       getConnectionStartHandle: () => store.getState().connectionStartHandle
     });
-  }, 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,20 +5078,20 @@ 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) => ({
   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$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, 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]})`;
@@ -5107,20 +5121,22 @@ const oppositePosition = {
   [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;
+  const { fromNode, handleId, toX, toY, connectionMode, endPosition, isValid } = useStore(useCallback((s) => {
+    var _a, _b;
     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
+      connectionMode: s.connectionMode,
+      endPosition: (_b = s.connectionEndHandle) == null ? void 0 : _b.position,
+      isValid: s.connectionStatus === "valid"
     };
   }, [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;
+  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 = isValid && endPosition ? endPosition : fromPosition ? oppositePosition[fromPosition] : null;
   if (!fromPosition || !toPosition)
     return null;
   if (CustomComponent)
@@ -5164,8 +5180,8 @@ 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, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, 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, 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, nodeOrigin, 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 } = {}) => {
@@ -5219,7 +5235,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,
@@ -5427,9 +5443,9 @@ 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, 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, 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, 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, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, 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, 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, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, debug }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
 const selector$8 = (s) => {
@@ -5450,16 +5466,6 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
     store.setState({ onViewportChangeEnd: onEnd });
   }, [onEnd]);
 }
-function useOnSelectionChange({ onChange }) {
-  const store = useStoreApi();
-  useEffect(() => {
-    const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];
-    return store.setState({ onSelectionChangeHandlers: nextOnSelectionChangeHandlers }), () => {
-      const nextHandlers = store.getState().onSelectionChangeHandlers.filter((fn) => fn !== onChange);
-      store.setState({ onSelectionChangeHandlers: nextHandlers });
-    };
-  }, [onChange]);
-}
 function useNodesData(nodeIds) {
   return useStore(useCallback((s) => {
     const data = [], isArrayOfIds = Array.isArray(nodeIds), _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
@@ -7011,24 +7017,7 @@ 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]
-  );
-}
-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;
+  return store;
 }
 const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
 function crt(v) {
@@ -8145,8 +8134,8 @@ 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;
@@ -8162,7 +8151,6 @@ const ZIndexes = {
   Edge: 2,
   Element: 3
 }, MinZoom = 0.1, StringSet = Set, DEFAULT_PROPS = {
-  viewSyncState: "synced",
   viewSyncDebounceTimeout: null,
   initialized: !1,
   xyflowSynced: !1,
@@ -8202,7 +8190,6 @@ function createDiagramStore(props) {
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
-              viewSyncState,
               xyflow,
               dimmed: dimmed2,
               xyflowSynced,
@@ -8216,15 +8203,8 @@ 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 (viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null), shallowEqual(current, nextView)) {
+              DEV && console.debug("store: skip updateView");
               return;
             }
             if (current.id === nextView.id) {
@@ -8245,7 +8225,6 @@ function createDiagramStore(props) {
             }
             set2(
               {
-                viewSyncState: "synced",
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
@@ -8283,16 +8262,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 {
@@ -8363,10 +8342,14 @@ 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 });
+          },
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get2();
+            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set2({ viewSyncDebounceTimeout: null }));
           },
           triggerSaveManualLayout: (xystore) => {
             let { viewSyncDebounceTimeout: debounced, onChange } = get2();
@@ -8375,7 +8358,9 @@ function createDiagramStore(props) {
               return;
             }
             debounced && clearTimeout(debounced), debounced = setTimeout(() => {
-              const { nodeLookup } = xystore.getState(), { xyflow, onChange: onChange2 } = get2(), movedNodes = new StringSet(), nodes = reduce([...nodeLookup.values()], (acc, node) => {
+              const { nodeLookup } = xystore.getState(), { xyflow, onChange: onChange2 } = get2();
+              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,19 +8373,23 @@ 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) => {
@@ -8863,7 +8852,7 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
     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 };
+        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),
@@ -8888,6 +8877,16 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
       "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",
@@ -8927,16 +8926,6 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: clsx("react-flow__edge-interaction"),
-            d: edgePath,
-            fill: "none",
-            strokeOpacity: 0,
-            strokeWidth: interactionWidth ?? 10
-          }
-        ),
         isEdgePathEditable && controlPoints.map((p, i) => /* @__PURE__ */ jsx(
           "circle",
           {
@@ -9102,7 +9091,7 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
     }
   );
 }, 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", containerAnimated = "_1b6tkn3", dimmed = "_1b6tkn4", indicator = "_1b6tkn6", fillElementFill = "_1b6tkn7", fillMixStroke = "_1b6tkn9", title$1 = "_1b6tkna", description$1 = "_1b6tknb", technology = "_1b6tknc", element = "_1b6tknd", iconMaxH = "var(--_1b6tkne)", elementIcon = "_1b6tknf", cssShapeSvg = "_1b6tkni", cssNavigateBtn = "_1b6tknj";
 function ElementIcon({
   node,
   paddingY = 32
@@ -9371,13 +9360,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,12 +9390,9 @@ 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
   }
@@ -9453,8 +9439,10 @@ const selectedScale = 1.015, variants = {
       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,
@@ -9771,7 +9759,88 @@ function XYFlow({
     }
   );
 }
-var container$1 = "hbkbtj0", paper = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
+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
+  ]);
+}
+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 +9865,29 @@ 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,
+          p: "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: 4, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: !0,
+                size: "xs",
+                h: "sm",
+                py: 2,
+                radius: "0",
+                variant: "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 +9985,7 @@ function DiagramTitlePanel() {
                 }
               )
             ] })
-          ] })
+          ]
         }
       )
     },
@@ -10219,14 +10301,16 @@ 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(
+const Empty = [];
+function OptionsPanel() {
+  const { isFocusDisabled, viewId } = useDiagramState((s) => ({
+    viewId: s.view.id,
+    isFocusDisabled: s.focusedNodeId === null && s.activeDynamicViewStep === null
+  })), selectedNodes = useXYStore(
+    useCallback((s) => s.elementsSelectable && isFocusDisabled ? reduce(s.nodes, (acc, n) => (n.selected && acc.push(n.id), acc), []) : Empty, [isFocusDisabled]),
+    shallowEqual
+  );
+  return DEV && useTilg(), /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: selectedNodes.length > 0 && /* @__PURE__ */ jsx(
     m.div,
     {
       initial: { opacity: 0, scale: 0.85 },
@@ -10241,9 +10325,10 @@ const OptionsPanelMemo = memo(function() {
         transformOrigin: "center right"
       },
       children: /* @__PURE__ */ jsx(Card, { shadow: "sm", children: /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
-    }
+    },
+    viewId
   ) });
-}), OptionsPanel2 = OptionsPanelMemo;
+}
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -10267,10 +10352,11 @@ const XYFlowInner = memo(function({
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
   const {
-    isDynamicView: isDynamicView2,
+    isDynamicView,
     isDynamicViewActive,
     readonly
   } = useDiagramState((s) => ({
@@ -10281,9 +10367,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 +10388,7 @@ function LikeC4Diagram({
   controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
+  showNavigationButtons = !1,
   enableDynamicViewWalkthrough = !0,
   initialWidth,
   initialHeight,
@@ -10375,6 +10463,7 @@ function LikeC4Diagram({
                   controls,
                   pannable,
                   showDiagramTitle,
+                  showNavigationButtons,
                   enableDynamicViewWalkthrough
                 }
               )
@@ -10394,9 +10483,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 +10513,7 @@ const LikeC4DiagramInnerMemo = memo(function({
         children: /* @__PURE__ */ jsx(
           XYFlowInner,
           {
+            showNavigationButtons,
             showDiagramTitle,
             enableDynamicViewWalkthrough,
             background,
@@ -10420,7 +10522,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, {})