likec4 1.9.0 → 1.10.1

package/dist/__app__/src/chunks/{likec4-BqIZe8Y0.js → likec4-BFZn233G.js}

@@ -2307,6 +2307,17 @@ const isEdgeBase = (element) => "id" in element && "source" in element && "targe
     x: node.position.x - offsetX,
     y: node.position.y - offsetY
   };
+}, getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: void 0 }) => {
+  if (nodes.length === 0)
+    return { x: 0, y: 0, width: 0, height: 0 };
+  const box = nodes.reduce((currBox, nodeOrId) => {
+    const isId = typeof nodeOrId == "string";
+    let currentNode = !params.nodeLookup && !isId ? nodeOrId : void 0;
+    params.nodeLookup && (currentNode = isId ? params.nodeLookup.get(nodeOrId) : isInternalNodeBase(nodeOrId) ? nodeOrId : params.nodeLookup.get(nodeOrId.id));
+    const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
+    return getBoundsOfBoxes(currBox, nodeBox);
+  }, { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 });
+  return boxToRect(box);
 }, getInternalNodesBounds = (nodeLookup, params = {}) => {
   if (nodeLookup.size === 0)
     return { x: 0, y: 0, width: 0, height: 0 };
@@ -2349,30 +2360,26 @@ async function fitView({ nodes, width, height, panZoom, minZoom, maxZoom }, opti
   const bounds = getInternalNodesBounds(nodes), viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
   return await panZoom.setViewport(viewport, { duration: options?.duration }), Promise.resolve(!0);
 }
-function clampNodeExtent(node, extent) {
-  return !extent || extent === "parent" ? extent : [extent[0], [extent[1][0] - (node.measured?.width ?? 0), extent[1][1] - (node.measured?.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 ? parentNode.internals.positionAbsolute : { x: 0, y: 0 }, origin = node.origin ?? nodeOrigin;
-  let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
+  let extent = nodeExtent;
   if (node.extent === "parent" && !node.expandParent)
     if (!parentNode)
       onError?.("005", errorMessages.error005());
     else {
-      const nodeWidth = node.measured.width, nodeHeight = node.measured.height, parentWidth = parentNode.measured.width, parentHeight = parentNode.measured.height;
-      nodeWidth && nodeHeight && parentWidth && parentHeight && (currentExtent = [
+      const parentWidth = parentNode.measured.width, parentHeight = parentNode.measured.height;
+      parentWidth && parentHeight && (extent = [
         [parentX, parentY],
-        [parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight]
+        [parentX + parentWidth, parentY + parentHeight]
       ]);
     }
-  else parentNode && isCoordinateExtent(node.extent) && (currentExtent = [
+  else parentNode && isCoordinateExtent(node.extent) && (extent = [
     [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
     [node.extent[1][0] + parentX, node.extent[1][1] + parentY]
   ]);
-  const positionAbsolute = isCoordinateExtent(currentExtent) ? clampPosition(nextPosition, currentExtent) : nextPosition;
+  const positionAbsolute = isCoordinateExtent(extent) ? clampPosition(nextPosition, extent, node.measured) : nextPosition;
   return {
     position: {
-      // 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]
     },
@@ -2401,10 +2408,18 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
   });
   return typeof onBeforeDeleteResult == "boolean" ? onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] } : onBeforeDeleteResult;
 }
-const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max), 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, min, max) => value < min ? clamp(Math.abs(value - min), 1, min) / min : value > max ? -clamp(Math.abs(value - max), 1, min) / min : 0, calcAutoPan = (pos, bounds, speed = 15, distance2 = 40) => {
+const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max), clampPosition = (position = { x: 0, y: 0 }, extent, dimensions) => ({
+  x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),
+  y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0))
+});
+function clampPositionToParent(childPosition, childDimensions, parent) {
+  const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent), { x: parentX, y: parentY } = parent.internals.positionAbsolute;
+  return clampPosition(childPosition, [
+    [parentX, parentY],
+    [parentX + parentWidth, parentY + parentHeight]
+  ], childDimensions);
+}
+const calcAutoPanVelocity = (value, min, max) => value < min ? clamp(Math.abs(value - min), 1, min) / min : value > max ? -clamp(Math.abs(value - max), 1, min) / min : 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) => ({
@@ -2759,63 +2774,83 @@ function createMarkerIds(edges, { id: id2, defaultColor, defaultMarkerStart, def
 }
 const defaultOptions = {
   nodeOrigin: [0, 0],
+  nodeExtent: infiniteExtent,
   elevateNodesOnSelect: !0,
   defaults: {}
 }, adoptUserNodesDefaultOptions = {
   ...defaultOptions,
   checkEquality: !0
 };
+function mergeObjects(base, incoming) {
+  const result = { ...base };
+  for (const key in incoming)
+    incoming[key] !== void 0 && (result[key] = incoming[key]);
+  return result;
+}
 function updateAbsolutePositions(nodeLookup, parentLookup, options) {
-  const _options = { ...defaultOptions, ...options };
+  const _options = mergeObjects(defaultOptions, options);
   for (const node of nodeLookup.values())
-    node.parentId && updateChildPosition(node, nodeLookup, parentLookup, _options);
+    node.parentId && updateChildNode(node, nodeLookup, parentLookup, _options);
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
-  const _options = { ...adoptUserNodesDefaultOptions, ...options }, tmpLookup = new Map(nodeLookup);
+  const _options = mergeObjects(adoptUserNodesDefaultOptions, options), tmpLookup = new Map(nodeLookup), selectedNodeZ = _options?.elevateNodesOnSelect ? 1e3 : 0;
   nodeLookup.clear(), parentLookup.clear();
-  const selectedNodeZ = options?.elevateNodesOnSelect ? 1e3 : 0;
   for (const userNode of nodes) {
     let internalNode = tmpLookup.get(userNode.id);
-    _options.checkEquality && userNode === internalNode?.internals.userNode || (internalNode = {
-      ..._options.defaults,
-      ...userNode,
-      measured: {
-        width: userNode.measured?.width,
-        height: userNode.measured?.height
-      },
-      internals: {
-        positionAbsolute: getNodePositionWithOrigin(userNode, _options.nodeOrigin),
-        // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
-        handleBounds: userNode.measured ? internalNode?.internals.handleBounds : void 0,
-        z: calculateZ(userNode, selectedNodeZ),
-        userNode
-      }
-    }), nodeLookup.set(userNode.id, internalNode), userNode.parentId && updateChildPosition(internalNode, nodeLookup, parentLookup, options);
+    if (_options.checkEquality && userNode === internalNode?.internals.userNode)
+      nodeLookup.set(userNode.id, internalNode);
+    else {
+      const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
+      internalNode = {
+        ..._options.defaults,
+        ...userNode,
+        measured: {
+          width: userNode.measured?.width,
+          height: userNode.measured?.height
+        },
+        internals: {
+          positionAbsolute: clampedPosition,
+          // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
+          handleBounds: userNode.measured ? internalNode?.internals.handleBounds : void 0,
+          z: calculateZ(userNode, selectedNodeZ),
+          userNode
+        }
+      }, nodeLookup.set(userNode.id, internalNode);
+    }
+    userNode.parentId && updateChildNode(internalNode, nodeLookup, parentLookup, options);
   }
 }
-function updateChildPosition(node, nodeLookup, parentLookup, options) {
-  const _options = { ...defaultOptions, ...options }, parentId = node.parentId, parentNode = nodeLookup.get(parentId);
+function updateParentLookup(node, parentLookup) {
+  if (!node.parentId)
+    return;
+  const childNodes = parentLookup.get(node.parentId);
+  childNodes ? childNodes.set(node.id, node) : parentLookup.set(node.parentId, /* @__PURE__ */ new Map([[node.id, node]]));
+}
+function updateChildNode(node, nodeLookup, parentLookup, options) {
+  const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options), parentId = node.parentId, parentNode = nodeLookup.get(parentId);
   if (!parentNode) {
     console.warn(`Parent node ${parentId} not found. Please make sure that parent nodes are in front of their child nodes in the nodes array.`);
     return;
   }
-  const childNodes = parentLookup.get(parentId);
-  childNodes ? childNodes.set(node.id, node) : parentLookup.set(parentId, /* @__PURE__ */ new Map([[node.id, node]]));
-  const selectedNodeZ = options?.elevateNodesOnSelect ? 1e3 : 0, { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin, selectedNodeZ), currPosition = node.internals.positionAbsolute, positionChanged = x !== currPosition.x || y !== currPosition.y;
+  updateParentLookup(node, parentLookup);
+  const selectedNodeZ = elevateNodesOnSelect ? 1e3 : 0, { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ), { positionAbsolute } = node.internals, positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
   (positionChanged || z !== node.internals.z) && (node.internals = {
     ...node.internals,
-    positionAbsolute: positionChanged ? { x, y } : currPosition,
+    positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
     z
   });
 }
 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;
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ) {
+  const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin;
+  let absolutePosition = clampPosition({ x: parentX + clampedPosition.x, y: parentY + clampedPosition.y }, nodeExtent, childDimensions);
+  childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
+  const childZ = calculateZ(childNode, selectedNodeZ), parentZ = parentNode.internals.z ?? 0;
   return {
-    x: parentNode.internals.positionAbsolute.x + position.x,
-    y: parentNode.internals.positionAbsolute.y + position.y,
+    x: absolutePosition.x,
+    y: absolutePosition.y,
     z: parentZ > childZ ? parentZ : childZ
   };
 }
@@ -2857,7 +2892,7 @@ function handleExpandParent(children2, nodeLookup, parentLookup, nodeOrigin = [0
     });
   }), changes;
 }
-function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin) {
+function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent) {
   const viewportNode = domNode?.querySelector(".xyflow__viewport");
   let updatedInternals = !1;
   if (!viewportNode)
@@ -2874,15 +2909,16 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
       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 = {
+          const nodeBounds = update.nodeElement.getBoundingClientRect(), extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent;
+          let { positionAbsolute } = node.internals;
+          node.parentId && node.extent === "parent" ? positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId)) : extent && (positionAbsolute = clampPosition(positionAbsolute, extent, dimensions)), node.measured = dimensions, node.internals = {
             ...node.internals,
-            positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
+            positionAbsolute,
             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({
+          }, node.parentId && updateChildNode(node, nodeLookup, parentLookup, { nodeOrigin }), updatedInternals = !0, dimensionChanged && (changes.push({
             id: node.id,
             type: "dimensions",
             dimensions
@@ -3132,11 +3168,11 @@ function getClosestHandle(position, connectionRadius, nodeLookup, fromHandle) {
   }
   return closestHandles[0];
 }
-function getHandle(nodeId, handleType, handleId, nodeLookup, withAbsolutePosition = !1) {
+function getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode, withAbsolutePosition = !1) {
   const node = nodeLookup.get(nodeId);
   if (!node)
     return null;
-  const handles = node.internals.handleBounds?.[handleType], handle = (handleId ? handles?.find((h2) => h2.id === handleId) : handles?.[0]) ?? null;
+  const handles = connectionMode === "strict" ? node.internals.handleBounds?.[handleType] : [...node.internals.handleBounds?.source ?? [], ...node.internals.handleBounds?.target ?? []], handle = (handleId ? handles?.find((h2) => h2.id === handleId) : handles?.[0]) ?? null;
   return handle && withAbsolutePosition ? { ...handle, ...getHandlePosition(node, handle, handle.position, !0) } : handle;
 }
 function getHandleType(edgeUpdaterType, handleDomNode) {
@@ -3153,7 +3189,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   const { x, y } = getEventPosition(event), clickedHandle = doc?.elementFromPoint(x, y), handleType = getHandleType(edgeUpdaterType, clickedHandle), containerBounds = domNode?.getBoundingClientRect();
   if (!containerBounds || !handleType)
     return;
-  const fromHandleInternal = getHandle(nodeId, handleType, handleId, nodeLookup);
+  const fromHandleInternal = getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode);
   if (!fromHandleInternal)
     return;
   let position = getEventPosition(event, containerBounds), autoPanStarted = !1, connection = null, isValid = !1, handleDomNode = null;
@@ -3243,7 +3279,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
     };
     result.connection = connection;
     const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
-    result.isValid = isValid && isValidConnection(connection), result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, !1);
+    result.isValid = isValid && isValidConnection(connection), result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, !1);
   }
   return result;
 }
@@ -3387,7 +3423,7 @@ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, pan
     return (!event.ctrlKey || event.type === "wheel") && buttonAllowed;
   };
 }
-function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onTransformChange, onDraggingChange }) {
+function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
   const zoomPanValues = {
     isZoomingOrPanning: !1,
     usedRightMouseButton: !1,
@@ -3412,7 +3448,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
       d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration, () => resolve(!0)), transform2);
     }) : Promise.resolve(!1);
   }
-  function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib }) {
+  function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange }) {
     userSelectionActive && !zoomPanValues.isZoomingOrPanning && destroy();
     const wheelHandler = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive ? createPanOnScrollHandler({
       zoomPanValues,
@@ -4044,10 +4080,10 @@ const useViewportHelper = () => {
   }), []);
 };
 function applyChanges(changes, elements) {
-  const updatedElements = [], changesMap = /* @__PURE__ */ new Map();
+  const updatedElements = [], changesMap = /* @__PURE__ */ new Map(), addItemChanges = [];
   for (const change of changes)
     if (change.type === "add") {
-      updatedElements.push(change.item);
+      addItemChanges.push(change);
       continue;
     } else if (change.type === "remove" || change.type === "replace")
       changesMap.set(change.id, [change]);
@@ -4072,7 +4108,9 @@ function applyChanges(changes, elements) {
       applyChange(change, updatedElement);
     updatedElements.push(updatedElement);
   }
-  return updatedElements;
+  return addItemChanges.length && addItemChanges.forEach((change) => {
+    change.index !== void 0 ? updatedElements.splice(change.index, 0, { ...change.item }) : updatedElements.push({ ...change.item });
+  }), updatedElements;
 }
 function applyChange(change, element) {
   switch (change.type) {
@@ -4113,9 +4151,9 @@ function getSelectionChanges(items, selectedIds = /* @__PURE__ */ new Set(), mut
 }
 function getElementsDiffChanges({ items = [], lookup }) {
   const changes = [], itemsLookup = new Map(items.map((item) => [item.id, item]));
-  for (const item of items) {
+  for (const [index2, item] of items.entries()) {
     const lookupItem = lookup.get(item.id), storeItem = lookupItem?.internals?.userNode ?? lookupItem;
-    storeItem !== void 0 && storeItem !== item && changes.push({ id: item.id, item, type: "replace" }), storeItem === void 0 && changes.push({ item, type: "add" });
+    storeItem !== void 0 && storeItem !== item && changes.push({ id: item.id, item, type: "replace" }), storeItem === void 0 && changes.push({ item, type: "add", index: index2 });
   }
   for (const [id2] of lookup)
     itemsLookup.get(id2) === void 0 && changes.push({ id: id2, type: "remove" });
@@ -4296,7 +4334,12 @@ function useReactFlow() {
           const nextData = typeof dataUpdate == "function" ? dataUpdate(edge) : dataUpdate;
           return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
         }, options);
-      }
+      },
+      getNodesBounds: (nodes) => {
+        const { nodeLookup, nodeOrigin } = store.getState();
+        return getNodesBounds(nodes, { nodeLookup, nodeOrigin });
+      },
+      getHandleConnections: ({ type, id: id2, nodeId }) => Array.from(store.getState().connectionLookup.get(`${nodeId}-${type}-${id2 ?? null}`)?.values() ?? [])
     };
   }, []);
   return useMemo(() => ({
@@ -4347,7 +4390,11 @@ const containerStyle = {
 });
 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$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
-  return useResizeHandler(zoomPane), useEffect(() => {
+  useResizeHandler(zoomPane);
+  const onTransformChange = useCallback((transform2) => {
+    onViewportChange?.({ x: transform2[0], y: transform2[1], zoom: transform2[2] }), isControlledViewport || store.setState({ transform: transform2 });
+  }, [onViewportChange, isControlledViewport]);
+  return useEffect(() => {
     if (zoomPane.current) {
       panZoom.current = XYPanZoom({
         domNode: zoomPane.current,
@@ -4356,9 +4403,6 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
         translateExtent,
         viewport: defaultViewport2,
         paneClickDistance,
-        onTransformChange: (transform2) => {
-          onViewportChange?.({ x: transform2[0], y: transform2[1], zoom: transform2[2] }), isControlledViewport || store.setState({ transform: transform2 });
-        },
         onDraggingChange: (paneDragging) => store.setState({ paneDragging }),
         onPanZoomStart: (event, vp) => {
           const { onViewportChangeStart, onMoveStart } = store.getState();
@@ -4397,7 +4441,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
       noPanClassName,
       userSelectionActive,
       noWheelClassName,
-      lib
+      lib,
+      onTransformChange
     });
   }, [
     onPaneContextMenu,
@@ -4413,7 +4458,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
     noPanClassName,
     userSelectionActive,
     noWheelClassName,
-    lib
+    lib,
+    onTransformChange
   ]), jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children2 });
 }
 const selector$i = (s) => ({
@@ -4823,7 +4869,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, 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), 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,
@@ -4841,7 +4887,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
           nodeRef
         });
       } else isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key) && (store.setState({
-        ariaLiveMessage: `Moved selected node ${event.key.replace("Arrow", "").toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`
+        ariaLiveMessage: `Moved selected node ${event.key.replace("Arrow", "").toLowerCase()}. New position, x: ${~~internals.positionAbsolute.x}, y: ${~~internals.positionAbsolute.y}`
       }), moveSelectedNodes({
         direction: arrowKeyDiffs[event.key],
         factor: event.shiftKey ? 4 : 1
@@ -4864,12 +4910,12 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     }
   ]), ref: nodeRef, style: {
     zIndex: internals.z,
-    transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
+    transform: `translate(${internals.positionAbsolute.x}px,${internals.positionAbsolute.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 }) }) });
+  }, "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: internals.positionAbsolute.x, positionAbsoluteY: internals.positionAbsolute.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$b = (s) => ({
   nodesDraggable: s.nodesDraggable,
@@ -5096,25 +5142,25 @@ 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({ isReconnectable, reconnectRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover }) {
-  const store = useStoreApi(), handleEdgeUpdater = (event, isSourceHandle) => {
+function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover }) {
+  const store = useStoreApi(), handleEdgeUpdater = (event, oppositeHandle) => {
     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;
-    setReconnecting(!0), onReconnectStart?.(event, edge, handleType);
+    const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy: panBy2, updateConnection } = store.getState(), isTarget = oppositeHandle.type === "target";
+    setReconnecting(!0), onReconnectStart?.(event, edge, oppositeHandle.type);
     const _onReconnectEnd = (evt, connectionState) => {
-      setReconnecting(!1), onReconnectEnd?.(evt, edge, handleType, connectionState);
+      setReconnecting(!1), onReconnectEnd?.(evt, edge, oppositeHandle.type, connectionState);
     }, onConnectEdge = (connection) => onReconnect?.(edge, connection);
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
       connectionMode,
       connectionRadius,
       domNode,
-      handleId,
-      nodeId,
+      handleId: oppositeHandle.id,
+      nodeId: oppositeHandle.nodeId,
       nodeLookup,
       isTarget,
-      edgeUpdaterType: handleType,
+      edgeUpdaterType: oppositeHandle.type,
       lib,
       flowId,
       cancelConnection,
@@ -5128,8 +5174,8 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandl
       getTransform: () => store.getState().transform,
       getFromHandle: () => store.getState().connection.fromHandle
     });
-  }, 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" })] });
+  }, onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, { nodeId: edge.target, id: edge.targetHandle ?? null, type: "target" }), onReconnectTargetMouseDown = (event) => handleEdgeUpdater(event, { nodeId: edge.source, id: edge.sourceHandle ?? null, type: "source" }), onReconnectMouseEnter = () => setUpdateHover(!0), onReconnectMouseOut = () => setUpdateHover(!1);
+  return jsxs(Fragment, { children: [(isReconnectable === !0 || isReconnectable === "source") && jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: reconnectRadius, onMouseDown: onReconnectSourceMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "source" }), (isReconnectable === !0 || isReconnectable === "target") && jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: reconnectRadius, onMouseDown: onReconnectTargetMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "target" })] });
 }
 function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y }) {
   let edge = useStore((s) => s.edgeLookup.get(id2));
@@ -5197,7 +5243,7 @@ function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSele
       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: [!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 })] }) });
+  ]), 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 })] }) });
 }
 const selector$a = (s) => ({
   width: s.width,
@@ -5302,10 +5348,11 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
   return useNodeOrEdgeTypesWarning(nodeTypes), useNodeOrEdgeTypesWarning(edgeTypes), 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, 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, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, 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, 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];
+const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2, nodeOrigin, nodeExtent } = {}) => {
+  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], storeNodeExtent = nodeExtent ?? infiniteExtent;
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges), adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
     nodeOrigin: storeNodeOrigin,
+    nodeExtent: storeNodeExtent,
     elevateNodesOnSelect: !1
   });
   let transform2 = [0, 0, 1];
@@ -5334,7 +5381,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     minZoom: 0.5,
     maxZoom: 2,
     translateExtent: infiniteExtent,
-    nodeExtent: infiniteExtent,
+    nodeExtent: storeNodeExtent,
     nodesSelectionActive: !1,
     userSelectionActive: !1,
     userSelectionRect: null,
@@ -5373,11 +5420,16 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     lib: "react",
     debug: !1
   };
-}, 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 }),
+}, createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, nodeOrigin, nodeExtent }) => createWithEqualityFn((set2, get2) => ({
+  ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
   setNodes: (nodes2) => {
     const { nodeLookup, parentLookup, nodeOrigin: nodeOrigin2, elevateNodesOnSelect } = get2();
-    adoptUserNodes(nodes2, nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2, elevateNodesOnSelect, checkEquality: !0 }), set2({ nodes: nodes2 });
+    adoptUserNodes(nodes2, nodeLookup, parentLookup, {
+      nodeOrigin: nodeOrigin2,
+      nodeExtent,
+      elevateNodesOnSelect,
+      checkEquality: !0
+    }), set2({ nodes: nodes2 });
   },
   setEdges: (edges2) => {
     const { connectionLookup, edgeLookup } = get2();
@@ -5397,9 +5449,9 @@ 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, params = { triggerFitView: !0 }) => {
-    const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin: nodeOrigin2, debug, fitViewSync } = get2(), { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin2);
+    const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin: nodeOrigin2, nodeExtent: nodeExtent2, debug, fitViewSync } = get2(), { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin2, nodeExtent2);
     if (updatedInternals) {
-      if (updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2 }), params.triggerFitView) {
+      if (updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin: nodeOrigin2, nodeExtent: nodeExtent2 }), params.triggerFitView) {
         let nextFitViewDone = fitViewDone;
         !fitViewDone && fitViewOnInit && (nextFitViewDone = fitViewSync({
           ...fitViewOnInitOptions,
@@ -5495,21 +5547,14 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     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);
   },
-  setNodeExtent: (nodeExtent) => {
-    const { nodeLookup } = get2();
-    for (const [, node] of nodeLookup) {
-      const positionAbsolute = clampPosition(node.internals.positionAbsolute, nodeExtent);
-      nodeLookup.set(node.id, {
-        ...node,
-        internals: {
-          ...node.internals,
-          positionAbsolute
-        }
-      });
-    }
-    set2({
-      nodeExtent
-    });
+  setNodeExtent: (nextNodeExtent) => {
+    const { nodes: nodes2, nodeLookup, parentLookup, nodeOrigin: nodeOrigin2, elevateNodesOnSelect, nodeExtent: nodeExtent2 } = get2();
+    nextNodeExtent[0][0] === nodeExtent2[0][0] && nextNodeExtent[0][1] === nodeExtent2[0][1] && nextNodeExtent[1][0] === nodeExtent2[1][0] && nextNodeExtent[1][1] === nodeExtent2[1][1] || (adoptUserNodes(nodes2, nodeLookup, parentLookup, {
+      nodeOrigin: nodeOrigin2,
+      nodeExtent: nextNodeExtent,
+      elevateNodesOnSelect,
+      checkEquality: !1
+    }), set2({ nodeExtent: nextNodeExtent }));
   },
   panBy: (delta) => {
     const { transform: transform2, width: width2, height: height2, panZoom, translateExtent } = get2();
@@ -5555,7 +5600,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
   },
   reset: () => set2({ ...getInitialState() })
 }), Object.is);
-function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, nodeOrigin, children: children2 }) {
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, nodeOrigin, nodeExtent, children: children2 }) {
   const [store] = useState(() => createStore({
     nodes,
     edges,
@@ -5564,12 +5609,13 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
     width,
     height,
     fitView: fitView2,
-    nodeOrigin
+    nodeOrigin,
+    nodeExtent
   }));
   return jsx(Provider$1, { value: store, children: jsx(BatchProvider, { 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 });
+function Wrapper({ children: children2, nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2, nodeOrigin, nodeExtent }) {
+  return useContext(StoreContext) ? jsx(Fragment, { children: children2 }) : jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView2, nodeOrigin, nodeExtent, children: children2 });
 }
 const wrapperStyle = {
   width: "100%",
@@ -5580,7 +5626,7 @@ const wrapperStyle = {
 };
 function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, 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, nodeClickDistance = 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, nodeOrigin, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, 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, nodeClickDistance, 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 })] }) });
+  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, nodeExtent, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, 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, nodeClickDistance, 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$6 = (s) => s.domNode?.querySelector(".react-flow__edgelabel-renderer");
@@ -5660,7 +5706,10 @@ function BackgroundComponent({
   className,
   patternClassName
 }) {
-  const ref = useRef(null), { transform: transform2, patternId } = useStore(selector$3, shallow$1), patternSize = size || defaultSize[variant], isDots = variant === BackgroundVariant.Dots, isCross = variant === BackgroundVariant.Cross, gapXY = Array.isArray(gap) ? gap : [gap, gap], scaledGap = [gapXY[0] * transform2[2] || 1, gapXY[1] * transform2[2] || 1], scaledSize = patternSize * transform2[2], offsetXY = Array.isArray(offset) ? offset : [offset, offset], scaledOffset = [offsetXY[0] * transform2[2] || 1, offsetXY[1] * transform2[2] || 1], patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap, _patternId = `${patternId}${id2 || ""}`;
+  const ref = useRef(null), { transform: transform2, patternId } = useStore(selector$3, shallow$1), patternSize = size || defaultSize[variant], isDots = variant === BackgroundVariant.Dots, isCross = variant === BackgroundVariant.Cross, gapXY = Array.isArray(gap) ? gap : [gap, gap], scaledGap = [gapXY[0] * transform2[2] || 1, gapXY[1] * transform2[2] || 1], scaledSize = patternSize * transform2[2], offsetXY = Array.isArray(offset) ? offset : [offset, offset], patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap, scaledOffset = [
+    offsetXY[0] * transform2[2] || 1 + patternDimensions[0] / 2,
+    offsetXY[1] * transform2[2] || 1 + patternDimensions[1] / 2
+  ], _patternId = `${patternId}${id2 || ""}`;
   return jsxs("svg", { className: cc(["react-flow__background", className]), style: {
     ...style2,
     ...containerStyle,
@@ -5742,18 +5791,17 @@ function MiniMapNodes({
   )) });
 }
 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 } = node2.internals.positionAbsolute;
+  const { node, x, y, width, height } = useStore((s) => {
+    const node2 = s.nodeLookup.get(id2), { x: x2, y: y2 } = node2.internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions(node2);
     return {
       node: node2,
       x: x2,
-      y: y2
+      y: y2,
+      width: width2,
+      height: height2
     };
   }, shallow$1);
-  if (!node || node.hidden || !nodeHasDimensions(node))
-    return null;
-  const { width, height } = getNodeDimensions(node);
-  return jsx(NodeComponent, { x, y, width, height, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering, onClick, id: node.id });
+  return !node || node.hidden || !nodeHasDimensions(node) ? null : jsx(NodeComponent, { x, y, width, height, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering, onClick, id: node.id });
 }
 const NodeComponentWrapper = memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = memo(MiniMapNodes);