@likec4/diagram 1.36.1 → 1.37.0

package/bundle/{chunk-DHvr-RGh.js → chunk-DSORWspW.js}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, memo as memo$1, useSyncExternalStore, createRef } from "react";
+import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, memo as memo$1, createRef } from "react";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
@@ -790,8 +790,8 @@ var ReactRemoveScroll = React.forwardRef(function(props, ref) {
   return React.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: SideCar }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
-function keys$1(object) {
-  return Object.keys(object);
+function keys$1(object2) {
+  return Object.keys(object2);
 }
 function isObject(item) {
   return item && typeof item == "object" && !Array.isArray(item);
@@ -848,7 +848,7 @@ function isNumberLike(value) {
   }
   return !1;
 }
-function isElement$1(value) {
+function isElement$2(value) {
   return Array.isArray(value) || value === null ? !1 : typeof value == "object" ? value.type !== Fragment : !1;
 }
 function createSafeContext(errorMessage) {
@@ -2772,114 +2772,52 @@ const DirectionContext = createContext({
 function useDirection() {
   return useContext(DirectionContext);
 }
-function hasWindow() {
+function hasWindow$1() {
   return typeof window < "u";
 }
-function getNodeName(node) {
-  return isNode$1(node) ? (node.nodeName || "").toLowerCase() : "#document";
+function getNodeName$1(node) {
+  return isNode$2(node) ? (node.nodeName || "").toLowerCase() : "#document";
 }
-function getWindow(node) {
+function getWindow$1(node) {
   var _node$ownerDocument;
   return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
-function getDocumentElement(node) {
+function getDocumentElement$1(node) {
   var _ref;
-  return (_ref = (isNode$1(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-}
-function isNode$1(value) {
-  return hasWindow() ? value instanceof Node || value instanceof getWindow(value).Node : !1;
-}
-function isElement(value) {
-  return hasWindow() ? value instanceof Element || value instanceof getWindow(value).Element : !1;
-}
-function isHTMLElement(value) {
-  return hasWindow() ? value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement : !1;
+  return (_ref = (isNode$2(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
 }
-function isShadowRoot(value) {
-  return !hasWindow() || typeof ShadowRoot > "u" ? !1 : value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
-}
-function isOverflowElement(element) {
-  const {
-    overflow,
-    overflowX,
-    overflowY,
-    display
-  } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
-}
-function isTableElement(element) {
-  return ["table", "td", "th"].includes(getNodeName(element));
+function isNode$2(value) {
+  return hasWindow$1() ? value instanceof Node || value instanceof getWindow$1(value).Node : !1;
 }
-function isTopLayer(element) {
-  return [":popover-open", ":modal"].some((selector2) => {
-    try {
-      return element.matches(selector2);
-    } catch {
-      return !1;
-    }
-  });
+function isElement$1(value) {
+  return hasWindow$1() ? value instanceof Element || value instanceof getWindow$1(value).Element : !1;
 }
-function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit(), css2 = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
-  return ["transform", "translate", "scale", "rotate", "perspective"].some((value) => css2[value] ? css2[value] !== "none" : !1) || (css2.containerType ? css2.containerType !== "normal" : !1) || !webkit && (css2.backdropFilter ? css2.backdropFilter !== "none" : !1) || !webkit && (css2.filter ? css2.filter !== "none" : !1) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((value) => (css2.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css2.contain || "").includes(value));
+function isHTMLElement$1(value) {
+  return hasWindow$1() ? value instanceof HTMLElement || value instanceof getWindow$1(value).HTMLElement : !1;
 }
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  for (; isHTMLElement(currentNode) && !isLastTraversableNode(currentNode); ) {
-    if (isContainingBlock(currentNode))
-      return currentNode;
-    if (isTopLayer(currentNode))
-      return null;
-    currentNode = getParentNode(currentNode);
-  }
-  return null;
+function isShadowRoot$1(value) {
+  return !hasWindow$1() || typeof ShadowRoot > "u" ? !1 : value instanceof ShadowRoot || value instanceof getWindow$1(value).ShadowRoot;
 }
-function isWebKit() {
+function isWebKit$1() {
   return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
 }
-function isLastTraversableNode(node) {
-  return ["html", "body", "#document"].includes(getNodeName(node));
-}
-function getComputedStyle(element) {
-  return getWindow(element).getComputedStyle(element);
+function isLastTraversableNode$1(node) {
+  return ["html", "body", "#document"].includes(getNodeName$1(node));
 }
-function getNodeScroll(element) {
-  return isElement(element) ? {
-    scrollLeft: element.scrollLeft,
-    scrollTop: element.scrollTop
-  } : {
-    scrollLeft: element.scrollX,
-    scrollTop: element.scrollY
-  };
+function getComputedStyle$1(element) {
+  return getWindow$1(element).getComputedStyle(element);
 }
-function getParentNode(node) {
-  if (getNodeName(node) === "html")
+function getParentNode$1(node) {
+  if (getNodeName$1(node) === "html")
     return node;
   const result = (
     // Step into the shadow DOM of the parent of a slotted node.
     node.assignedSlot || // DOM Element detected.
     node.parentNode || // ShadowRoot detected.
-    isShadowRoot(node) && node.host || // Fallback.
-    getDocumentElement(node)
+    isShadowRoot$1(node) && node.host || // Fallback.
+    getDocumentElement$1(node)
   );
-  return isShadowRoot(result) ? result.host : result;
-}
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  return isLastTraversableNode(parentNode) ? node.ownerDocument ? node.ownerDocument.body : node.body : isHTMLElement(parentNode) && isOverflowElement(parentNode) ? parentNode : getNearestOverflowAncestor(parentNode);
-}
-function getOverflowAncestors(node, list, traverseIframes) {
-  var _node$ownerDocument2;
-  list === void 0 && (list = []), traverseIframes === void 0 && (traverseIframes = !0);
-  const scrollableAncestor = getNearestOverflowAncestor(node), isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body), win2 = getWindow(scrollableAncestor);
-  if (isBody) {
-    const frameElement = getFrameElement(win2);
-    return list.concat(win2, win2.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-  }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
-}
-function getFrameElement(win2) {
-  return win2.parent && Object.getPrototypeOf(win2.parent) ? win2.frameElement : null;
+  return isShadowRoot$1(result) ? result.host : result;
 }
 function activeElement(doc) {
   let activeElement2 = doc.activeElement;
@@ -2895,7 +2833,7 @@ function contains(parent, child) {
   const rootNode = child.getRootNode == null ? void 0 : child.getRootNode();
   if (parent.contains(child))
     return !0;
-  if (rootNode && isShadowRoot(rootNode)) {
+  if (rootNode && isShadowRoot$1(rootNode)) {
     let next = child;
     for (; next; ) {
       if (parent === next)
@@ -2962,9 +2900,9 @@ function getTarget(event) {
 }
 const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
 function isTypeableElement(element) {
-  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+  return isHTMLElement$1(element) && element.matches(TYPEABLE_SELECTOR);
 }
-const sides = ["top", "right", "bottom", "left"], min$1 = Math.min, max$1 = Math.max, round = Math.round, floor = Math.floor, createCoords = (v) => ({
+const sides = ["top", "right", "bottom", "left"], alignments = ["start", "end"], placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []), min$1 = Math.min, max$1 = Math.max, round = Math.round, floor = Math.floor, createCoords = (v) => ({
   x: v,
   y: v
 }), oppositeSideMap = {
@@ -2994,8 +2932,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === "y" ? "height" : "width";
 }
+const yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
 function getSideAxis(placement) {
-  return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
+  return yAxisSides.has(getSide(placement)) ? "y" : "x";
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -3013,15 +2952,15 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ["left", "right"], rlPlacement = ["right", "left"], tbPlacement = ["top", "bottom"], btPlacement = ["bottom", "top"];
 function getSideList(side, isStart, rtl) {
-  const lr = ["left", "right"], rl = ["right", "left"], tb = ["top", "bottom"], bt = ["bottom", "top"];
   switch (side) {
     case "top":
     case "bottom":
-      return rtl ? isStart ? rl : lr : isStart ? lr : rl;
+      return rtl ? isStart ? rlPlacement : lrPlacement : isStart ? lrPlacement : rlPlacement;
     case "left":
     case "right":
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -3260,7 +3199,79 @@ const arrow$3 = (options) => ({
       reset: shouldAddOffset
     };
   }
-}), flip$2 = function(options) {
+});
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  return (alignment ? [...allowedPlacements.filter((placement) => getAlignment(placement) === alignment), ...allowedPlacements.filter((placement) => getAlignment(placement) !== alignment)] : allowedPlacements.filter((placement) => getSide(placement) === placement)).filter((placement) => alignment ? getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : !1) : !0);
+}
+const autoPlacement$1 = function(options) {
+  return options === void 0 && (options = {}), {
+    name: "autoPlacement",
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform: platform2,
+        elements
+      } = state, {
+        crossAxis = !1,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = !0,
+        ...detectOverflowOptions
+      } = evaluate(options, state), placements$1 = alignment !== void 0 || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements, overflow = await detectOverflow(state, detectOverflowOptions), currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0, currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null)
+        return {};
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)));
+      if (placement !== currentPlacement)
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]], allOverflows = [...((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || [], {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }], nextPlacement = placements$1[currentIndex + 1];
+      if (nextPlacement)
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      const placementsSortedByMostSpace = allOverflows.map((d2) => {
+        const alignment2 = getAlignment(d2.placement);
+        return [d2.placement, alignment2 && crossAxis ? (
+          // Check along the mainAxis and main crossAxis side.
+          d2.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0)
+        ) : (
+          // Check only the mainAxis.
+          d2.overflows[0]
+        ), d2.overflows];
+      }).sort((a, b) => a[1] - b[1]), resetPlacement = ((_placementsThatFitOnE = placementsSortedByMostSpace.filter((d2) => d2[2].slice(
+        0,
+        // Aligned placements should not check their opposite crossAxis
+        // side.
+        getAlignment(d2[0]) ? 2 : 3
+      ).every((v) => v <= 0))[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      return resetPlacement !== placement ? {
+        data: {
+          index: currentIndex + 1,
+          overflows: allOverflows
+        },
+        reset: {
+          placement: resetPlacement
+        }
+      } : {};
+    }
+  };
+}, flip$2 = function(options) {
   return options === void 0 && (options = {}), {
     name: "flip",
     options,
@@ -3286,7 +3297,7 @@ const arrow$3 = (options) => ({
         return {};
       const side = getSide(placement), initialSideAxis = getSideAxis(initialPlacement), isBasePlacement = getSide(initialPlacement) === initialPlacement, rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)), fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement)), hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
       !specifiedFallbackPlacements && hasFallbackAxisSideDirection && fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
-      const placements = [initialPlacement, ...fallbackPlacements], overflow = await detectOverflow(state, detectOverflowOptions), overflows = [];
+      const placements2 = [initialPlacement, ...fallbackPlacements], overflow = await detectOverflow(state, detectOverflowOptions), overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis && overflows.push(overflow[side]), checkCrossAxis) {
         const sides2 = getAlignmentSides(placement, rects, rtl);
@@ -3297,21 +3308,19 @@ const arrow$3 = (options) => ({
         overflows
       }], !overflows.every((side2) => side2 <= 0)) {
         var _middlewareData$flip2, _overflowsData$filter;
-        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1, nextPlacement = placements[nextIndex];
-        if (nextPlacement) {
-          var _overflowsData$;
-          const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : !1, hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
-          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow)
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
-        }
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1, nextPlacement = placements2[nextIndex];
+        if (nextPlacement && (!(checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : !1) || // We leave the current main axis only if every placement on that axis
+        // overflows the main axis.
+        overflowsData.every((d2) => getSideAxis(d2.placement) === initialSideAxis ? d2.overflows[0] > 0 : !0)))
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
         let resetPlacement = (_overflowsData$filter = overflowsData.filter((d2) => d2.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
         if (!resetPlacement)
           switch (fallbackStrategy) {
@@ -3476,13 +3485,13 @@ const inline$2 = function(options) {
       } : {};
     }
   };
-};
+}, originSides = /* @__PURE__ */ new Set(["left", "top"]);
 async function convertValueToCoords(state, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state, rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)), side = getSide(placement), alignment = getAlignment(placement), isVertical = getSideAxis(placement) === "y", mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1, crossAxisMulti = rtl && isVertical ? -1 : 1, rawValue = evaluate(options, state);
+  } = state, rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)), side = getSide(placement), alignment = getAlignment(placement), isVertical = getSideAxis(placement) === "y", mainAxisMulti = originSides.has(side) ? -1 : 1, crossAxisMulti = rtl && isVertical ? -1 : 1, rawValue = evaluate(options, state);
   let {
     mainAxis,
     crossAxis,
@@ -3615,7 +3624,7 @@ const offset$3 = function(options) {
       }
       if (checkCrossAxis) {
         var _middlewareData$offse, _middlewareData$offse2;
-        const len = mainAxis === "y" ? "width" : "height", isOriginSide = ["top", "left"].includes(getSide(placement)), limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide && ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0) + (isOriginSide ? 0 : computedOffset.crossAxis), limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+        const len = mainAxis === "y" ? "width" : "height", isOriginSide = originSides.has(getSide(placement)), limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide && ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0) + (isOriginSide ? 0 : computedOffset.crossAxis), limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
         crossAxisCoord < limitMin ? crossAxisCoord = limitMin : crossAxisCoord > limitMax && (crossAxisCoord = limitMax);
       }
       return {
@@ -3665,6 +3674,120 @@ const offset$3 = function(options) {
     }
   };
 };
+function hasWindow() {
+  return typeof window < "u";
+}
+function getNodeName(node) {
+  return isNode$1(node) ? (node.nodeName || "").toLowerCase() : "#document";
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode$1(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode$1(value) {
+  return hasWindow() ? value instanceof Node || value instanceof getWindow(value).Node : !1;
+}
+function isElement(value) {
+  return hasWindow() ? value instanceof Element || value instanceof getWindow(value).Element : !1;
+}
+function isHTMLElement(value) {
+  return hasWindow() ? value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement : !1;
+}
+function isShadowRoot(value) {
+  return !hasWindow() || typeof ShadowRoot > "u" ? !1 : value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+const invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+}
+const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
+function isTableElement(element) {
+  return tableElements.has(getNodeName(element));
+}
+const topLayerSelectors = [":popover-open", ":modal"];
+function isTopLayer(element) {
+  return topLayerSelectors.some((selector2) => {
+    try {
+      return element.matches(selector2);
+    } catch {
+      return !1;
+    }
+  });
+}
+const transformProperties = ["transform", "translate", "scale", "rotate", "perspective"], willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"], containValues = ["paint", "layout", "strict", "content"];
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit(), css2 = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  return transformProperties.some((value) => css2[value] ? css2[value] !== "none" : !1) || (css2.containerType ? css2.containerType !== "normal" : !1) || !webkit && (css2.backdropFilter ? css2.backdropFilter !== "none" : !1) || !webkit && (css2.filter ? css2.filter !== "none" : !1) || willChangeValues.some((value) => (css2.willChange || "").includes(value)) || containValues.some((value) => (css2.contain || "").includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  for (; isHTMLElement(currentNode) && !isLastTraversableNode(currentNode); ) {
+    if (isContainingBlock(currentNode))
+      return currentNode;
+    if (isTopLayer(currentNode))
+      return null;
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
+}
+const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+function isLastTraversableNode(node) {
+  return lastTraversableNodeNames.has(getNodeName(node));
+}
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  return isElement(element) ? {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
+  } : {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html")
+    return node;
+  const result = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    node.assignedSlot || // DOM Element detected.
+    node.parentNode || // ShadowRoot detected.
+    isShadowRoot(node) && node.host || // Fallback.
+    getDocumentElement(node)
+  );
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  return isLastTraversableNode(parentNode) ? node.ownerDocument ? node.ownerDocument.body : node.body : isHTMLElement(parentNode) && isOverflowElement(parentNode) ? parentNode : getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  list === void 0 && (list = []), traverseIframes === void 0 && (traverseIframes = !0);
+  const scrollableAncestor = getNearestOverflowAncestor(node), isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body), win2 = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win2);
+    return list.concat(win2, win2.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win2) {
+  return win2.parent && Object.getPrototypeOf(win2.parent) ? win2.frameElement : null;
+}
 function getCssDimensions(element) {
   const css2 = getComputedStyle(element);
   let width = parseFloat(css2.width) || 0, height = parseFloat(css2.height) || 0;
@@ -3797,6 +3920,7 @@ function getViewportRect(element, strategy) {
     y: y2
   };
 }
+const absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, !0, strategy === "fixed"), top = clientRect.top + element.clientTop, left = clientRect.left + element.clientLeft, scale2 = isHTMLElement(element) ? getScale(element) : createCoords(1), width = element.clientWidth * scale2.x, height = element.clientHeight * scale2.y, x = left * scale2.x, y2 = top * scale2.y;
   return {
@@ -3838,7 +3962,7 @@ function getClippingElementAncestors(element, cache) {
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   for (; isElement(currentNode) && !isLastTraversableNode(currentNode); ) {
     const computedStyle = getComputedStyle(currentNode), currentNodeIsContaining = isContainingBlock(currentNode);
-    !currentNodeIsContaining && computedStyle.position === "fixed" && (currentContainingBlockComputedStyle = null), (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) ? result = result.filter((ancestor) => ancestor !== currentNode) : currentContainingBlockComputedStyle = computedStyle, currentNode = getParentNode(currentNode);
+    !currentNodeIsContaining && computedStyle.position === "fixed" && (currentContainingBlockComputedStyle = null), (elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode)) ? result = result.filter((ancestor) => ancestor !== currentNode) : currentContainingBlockComputedStyle = computedStyle, currentNode = getParentNode(currentNode);
   }
   return cache.set(element, result), result;
 }
@@ -4035,7 +4159,7 @@ function autoUpdate(reference, floating, update, options) {
     }), cleanupIo?.(), (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect(), resizeObserver = null, animationFrame && cancelAnimationFrame(frameId);
   };
 }
-const offset$2 = offset$3, shift$1 = shift$2, flip$1 = flip$2, size$1 = size$2, hide$1 = hide$2, arrow$2 = arrow$3, inline$1 = inline$2, limitShift$1 = limitShift$2, computePosition = (reference, floating, options) => {
+const offset$2 = offset$3, autoPlacement = autoPlacement$1, shift$1 = shift$2, flip$1 = flip$2, size$1 = size$2, hide$1 = hide$2, arrow$2 = arrow$3, inline$1 = inline$2, limitShift$1 = limitShift$2, computePosition = (reference, floating, options) => {
   const cache = /* @__PURE__ */ new Map(), mergedOptions = {
     platform,
     ...options
@@ -4407,7 +4531,7 @@ function useHover(context2, props) {
         }
       })(event));
     }
-    if (isElement(elements.domReference)) {
+    if (isElement$1(elements.domReference)) {
       var _elements$floating;
       const ref = elements.domReference;
       return open && ref.addEventListener("mouseleave", onScrollMouseLeave), (_elements$floating = elements.floating) == null || _elements$floating.addEventListener("mouseleave", onScrollMouseLeave), move && ref.addEventListener("mousemove", onMouseEnter, {
@@ -4422,7 +4546,7 @@ function useHover(context2, props) {
     if (enabled && open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
       performedPointerEventsMutationRef.current = !0;
       const floatingEl = elements.floating;
-      if (isElement(elements.domReference) && floatingEl) {
+      if (isElement$1(elements.domReference) && floatingEl) {
         var _tree$nodesRef$curren;
         const body2 = getDocument(elements.floating).body;
         body2.setAttribute(safePolygonIdentifier, "");
@@ -4638,22 +4762,22 @@ function useDismiss(context2, props) {
     if (endedOrStartedInsideRef.current = !1, outsidePressEvent === "click" && endedOrStartedInside || insideReactTree || typeof outsidePress == "function" && !outsidePress(event))
       return;
     const target = getTarget(event), inertSelector = "[" + createAttribute("inert") + "]", markers = getDocument(elements.floating).querySelectorAll(inertSelector);
-    let targetRootAncestor = isElement(target) ? target : null;
-    for (; targetRootAncestor && !isLastTraversableNode(targetRootAncestor); ) {
-      const nextParent = getParentNode(targetRootAncestor);
-      if (isLastTraversableNode(nextParent) || !isElement(nextParent))
+    let targetRootAncestor = isElement$1(target) ? target : null;
+    for (; targetRootAncestor && !isLastTraversableNode$1(targetRootAncestor); ) {
+      const nextParent = getParentNode$1(targetRootAncestor);
+      if (isLastTraversableNode$1(nextParent) || !isElement$1(nextParent))
         break;
       targetRootAncestor = nextParent;
     }
-    if (markers.length && isElement(target) && !isRootElement(target) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
+    if (markers.length && isElement$1(target) && !isRootElement(target) && // Clicked on a direct ancestor (e.g. FloatingOverlay).
     !contains(target, elements.floating) && // If the target root element contains none of the markers, then the
     // element was injected after the floating element rendered.
     Array.from(markers).every((marker) => !contains(targetRootAncestor, marker)))
       return;
-    if (isHTMLElement(target) && floating) {
+    if (isHTMLElement$1(target) && floating) {
       const canScrollX = target.clientWidth > 0 && target.scrollWidth > target.clientWidth, canScrollY = target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
       let xCond = canScrollY && event.offsetX > target.clientWidth;
-      if (canScrollY && getComputedStyle(target).direction === "rtl" && (xCond = event.offsetX <= target.offsetWidth - target.clientWidth), xCond || canScrollX && event.offsetY > target.clientHeight)
+      if (canScrollY && getComputedStyle$1(target).direction === "rtl" && (xCond = event.offsetX <= target.offsetWidth - target.clientWidth), xCond || canScrollX && event.offsetY > target.clientHeight)
         return;
     }
     const nodeId = (_dataRef$current$floa2 = dataRef.current.floatingContext) == null ? void 0 : _dataRef$current$floa2.nodeId, targetIsInsideChildren = tree && getChildren$1(tree.nodesRef.current, nodeId).some((node) => {
@@ -4701,13 +4825,13 @@ function useDismiss(context2, props) {
         },
         // 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
         // Only apply to WebKit for the test to remain 0ms.
-        isWebKit() ? 5 : 0
+        isWebKit$1() ? 5 : 0
       );
     }
     const doc = getDocument(elements.floating);
     escapeKey && (doc.addEventListener("keydown", escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown, escapeKeyCapture), doc.addEventListener("compositionstart", handleCompositionStart), doc.addEventListener("compositionend", handleCompositionEnd)), outsidePress && doc.addEventListener(outsidePressEvent, outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside, outsidePressCapture);
     let ancestors = [];
-    return ancestorScroll && (isElement(elements.domReference) && (ancestors = getOverflowAncestors(elements.domReference)), isElement(elements.floating) && (ancestors = ancestors.concat(getOverflowAncestors(elements.floating))), !isElement(elements.reference) && elements.reference && elements.reference.contextElement && (ancestors = ancestors.concat(getOverflowAncestors(elements.reference.contextElement)))), ancestors = ancestors.filter((ancestor) => {
+    return ancestorScroll && (isElement$1(elements.domReference) && (ancestors = getOverflowAncestors(elements.domReference)), isElement$1(elements.floating) && (ancestors = ancestors.concat(getOverflowAncestors(elements.floating))), !isElement$1(elements.reference) && elements.reference && elements.reference.contextElement && (ancestors = ancestors.concat(getOverflowAncestors(elements.reference.contextElement)))), ancestors = ancestors.filter((ancestor) => {
       var _doc$defaultView;
       return ancestor !== ((_doc$defaultView = doc.defaultView) == null ? void 0 : _doc$defaultView.visualViewport);
     }), ancestors.forEach((ancestor) => {
@@ -4797,16 +4921,16 @@ function useFloating(options) {
       }
     }
   }), setPositionReference = React.useCallback((node) => {
-    const computedPositionReference = isElement(node) ? {
+    const computedPositionReference = isElement$1(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       contextElement: node
     } : node;
     _setPositionReference(computedPositionReference), position.refs.setReference(computedPositionReference);
   }, [position.refs]), setReference = React.useCallback((node) => {
-    (isElement(node) || node === null) && (domReferenceRef.current = node, setDomReference(node)), (isElement(position.refs.reference.current) || position.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
+    (isElement$1(node) || node === null) && (domReferenceRef.current = node, setDomReference(node)), (isElement$1(position.refs.reference.current) || position.refs.reference.current === null || // Don't allow setting virtual elements using the old technique back to
     // `null` to support `positionReference` + an unstable `reference`
     // callback ref.
-    node !== null && !isElement(node)) && position.refs.setReference(node);
+    node !== null && !isElement$1(node)) && position.refs.setReference(node);
   }, [position.refs]), refs = React.useMemo(() => ({
     ...position.refs,
     setReference,
@@ -4847,9 +4971,9 @@ function useFocus(context2, props) {
   } = props, blockFocusRef = React.useRef(!1), timeoutRef = React.useRef(), keyboardModalityRef = React.useRef(!0);
   React.useEffect(() => {
     if (!enabled) return;
-    const win2 = getWindow(elements.domReference);
+    const win2 = getWindow$1(elements.domReference);
     function onBlur() {
-      !open && isHTMLElement(elements.domReference) && elements.domReference === activeElement(getDocument(elements.domReference)) && (blockFocusRef.current = !0);
+      !open && isHTMLElement$1(elements.domReference) && elements.domReference === activeElement(getDocument(elements.domReference)) && (blockFocusRef.current = !0);
     }
     function onKeyDown() {
       keyboardModalityRef.current = !0;
@@ -4881,7 +5005,7 @@ function useFocus(context2, props) {
     onFocus(event) {
       if (blockFocusRef.current) return;
       const target = getTarget(event.nativeEvent);
-      if (visibleOnly && isElement(target))
+      if (visibleOnly && isElement$1(target))
         try {
           if (isSafari() && isMac()) throw Error();
           if (!target.matches(":focus-visible")) return;
@@ -4893,7 +5017,7 @@ function useFocus(context2, props) {
     },
     onBlur(event) {
       blockFocusRef.current = !1;
-      const relatedTarget = event.relatedTarget, nativeEvent = event.nativeEvent, movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute("focus-guard")) && relatedTarget.getAttribute("data-type") === "outside";
+      const relatedTarget = event.relatedTarget, nativeEvent = event.nativeEvent, movedToFocusGuard = isElement$1(relatedTarget) && relatedTarget.hasAttribute(createAttribute("focus-guard")) && relatedTarget.getAttribute("data-type") === "outside";
       timeoutRef.current = window.setTimeout(() => {
         var _dataRef$current$floa;
         const activeEl = activeElement(elements.domReference ? elements.domReference.ownerDocument : document);
@@ -5575,7 +5699,7 @@ function FocusTrap({
   innerRef
 }) {
   const focusTrapRef = useFocusTrap(active), ref = useMergedRef(focusTrapRef, innerRef);
-  return isElement$1(children2) ? cloneElement(children2, { [refProp]: ref }) : children2;
+  return isElement$2(children2) ? cloneElement(children2, { [refProp]: ref }) : children2;
 }
 function FocusTrapInitialFocus(props) {
   return /* @__PURE__ */ jsx(VisuallyHidden, { tabIndex: -1, "data-autofocus": !0, ...props });
@@ -5688,7 +5812,7 @@ const defaultProps$h = {
     defaultProps$h,
     props
   );
-  if (!isElement$1(children2))
+  if (!isElement$2(children2))
     throw new Error(
       "Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
     );
@@ -6082,8 +6206,8 @@ Loader.displayName = "@mantine/core/Loader";
 var classes$c = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21", groupSection: "m_437b6484" };
 const defaultProps$e = {
   orientation: "horizontal"
-}, varsResolver$f = (_, { borderWidth: borderWidth2 }) => ({
-  group: { "--ai-border-width": rem(borderWidth2) }
+}, varsResolver$f = (_, { borderWidth }) => ({
+  group: { "--ai-border-width": rem(borderWidth) }
 }), ActionIconGroup = factory((_props, ref) => {
   const props = useProps("ActionIconGroup", defaultProps$e, _props), {
     className,
@@ -6093,7 +6217,7 @@ const defaultProps$e = {
     unstyled,
     orientation,
     vars,
-    borderWidth: borderWidth2,
+    borderWidth,
     variant,
     mod,
     attributes,
@@ -6625,8 +6749,8 @@ function CheckIcon({ size: size2, style: style2, ...others }) {
 var classes$7 = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844", groupSection: "m_70be2a01" };
 const defaultProps$b = {
   orientation: "horizontal"
-}, varsResolver$9 = (_, { borderWidth: borderWidth2 }) => ({
-  group: { "--button-border-width": rem(borderWidth2) }
+}, varsResolver$9 = (_, { borderWidth }) => ({
+  group: { "--button-border-width": rem(borderWidth) }
 }), ButtonGroup = factory((_props, ref) => {
   const props = useProps("ButtonGroup", defaultProps$b, _props), {
     className,
@@ -6636,7 +6760,7 @@ const defaultProps$b = {
     unstyled,
     orientation,
     vars,
-    borderWidth: borderWidth2,
+    borderWidth,
     variant,
     mod,
     attributes,
@@ -7177,7 +7301,7 @@ const MenuSubItem = polymorphicFactory((props, ref) => {
 MenuSubItem.classes = classes$4;
 MenuSubItem.displayName = "@mantine/core/MenuSubItem";
 function MenuSubTarget({ children: children2, refProp }) {
-  if (!isElement$1(children2))
+  if (!isElement$2(children2))
     throw new Error(
       "Menu.Sub.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
     );
@@ -7230,7 +7354,7 @@ const defaultProps$7 = {
   refProp: "ref"
 }, MenuTarget = forwardRef((props, ref) => {
   const { children: children2, refProp, ...others } = useProps("MenuTarget", defaultProps$7, props);
-  if (!isElement$1(children2))
+  if (!isElement$2(children2))
     throw new Error(
       "Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
     );
@@ -7471,7 +7595,7 @@ const defaultProps$5 = {
     position,
     defaultOpened
   });
-  if (!isElement$1(children2))
+  if (!isElement$2(children2))
     throw new Error(
       "[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported"
     );
@@ -7697,7 +7821,7 @@ const defaultProps$3 = {
     vars,
     varsResolver: varsResolver$3
   });
-  if (!target && !isElement$1(children2))
+  if (!target && !isElement$2(children2))
     return null;
   if (target) {
     const transition2 = getTransitionProps(transitionProps, { duration: 100, transition: "fade" });
@@ -9897,12 +10021,12 @@ function* selection_iterator() {
     for (var group = groups[j], i2 = 0, n2 = group.length, node; i2 < n2; ++i2)
       (node = group[i2]) && (yield node);
 }
-var root$1 = [null];
+var root = [null];
 function Selection$1(groups, parents) {
   this._groups = groups, this._parents = parents;
 }
 function selection() {
-  return new Selection$1([[document.documentElement]], root$1);
+  return new Selection$1([[document.documentElement]], root);
 }
 function selection_selection() {
   return this;
@@ -9946,7 +10070,7 @@ Selection$1.prototype = selection.prototype = {
   [Symbol.iterator]: selection_iterator
 };
 function select(selector2) {
-  return typeof selector2 == "string" ? new Selection$1([[document.querySelector(selector2)]], [document.documentElement]) : new Selection$1([[selector2]], root$1);
+  return typeof selector2 == "string" ? new Selection$1([[document.querySelector(selector2)]], [document.documentElement]) : new Selection$1([[selector2]], root);
 }
 function sourceEvent(event) {
   let sourceEvent2;
@@ -10458,11 +10582,47 @@ const interpolateRgb = function rgbGamma(y2) {
   }
   return rgb$1.gamma = rgbGamma, rgb$1;
 }(1);
+function numberArray(a, b) {
+  b || (b = []);
+  var n2 = a ? Math.min(b.length, a.length) : 0, c = b.slice(), i2;
+  return function(t2) {
+    for (i2 = 0; i2 < n2; ++i2) c[i2] = a[i2] * (1 - t2) + b[i2] * t2;
+    return c;
+  };
+}
+function isNumberArray(x) {
+  return ArrayBuffer.isView(x) && !(x instanceof DataView);
+}
+function genericArray(a, b) {
+  var nb = b ? b.length : 0, na = a ? Math.min(nb, a.length) : 0, x = new Array(na), c = new Array(nb), i2;
+  for (i2 = 0; i2 < na; ++i2) x[i2] = interpolate$1(a[i2], b[i2]);
+  for (; i2 < nb; ++i2) c[i2] = b[i2];
+  return function(t2) {
+    for (i2 = 0; i2 < na; ++i2) c[i2] = x[i2](t2);
+    return c;
+  };
+}
+function date(a, b) {
+  var d2 = /* @__PURE__ */ new Date();
+  return a = +a, b = +b, function(t2) {
+    return d2.setTime(a * (1 - t2) + b * t2), d2;
+  };
+}
 function interpolateNumber(a, b) {
   return a = +a, b = +b, function(t2) {
     return a * (1 - t2) + b * t2;
   };
 }
+function object(a, b) {
+  var i2 = {}, c = {}, k;
+  (a === null || typeof a != "object") && (a = {}), (b === null || typeof b != "object") && (b = {});
+  for (k in b)
+    k in a ? i2[k] = interpolate$1(a[k], b[k]) : c[k] = b[k];
+  return function(t2) {
+    for (k in i2) c[k] = i2[k](t2);
+    return c;
+  };
+}
 var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g, reB = new RegExp(reA.source, "g");
 function zero(b) {
   return function() {
@@ -10483,6 +10643,10 @@ function interpolateString(a, b) {
     return s2.join("");
   });
 }
+function interpolate$1(a, b) {
+  var t2 = typeof b, c;
+  return b == null || t2 === "boolean" ? constant$1(b) : (t2 === "number" ? interpolateNumber : t2 === "string" ? (c = color(b)) ? (b = c, interpolateRgb) : interpolateString : b instanceof color ? interpolateRgb : b instanceof Date ? date : isNumberArray(b) ? numberArray : Array.isArray(b) ? genericArray : typeof b.valueOf != "function" && typeof b.toString != "function" || isNaN(b) ? object : interpolateNumber)(a, b);
+}
 var degrees = 180 / Math.PI, identity$2 = {
   translateX: 0,
   translateY: 0,
@@ -11463,7 +11627,22 @@ const errorMessages = {
 }, infiniteExtent = [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
-], elementSelectionKeys = ["Enter", " ", "Escape"];
+], elementSelectionKeys = ["Enter", " ", "Escape"], defaultAriaLabelConfig = {
+  "node.a11yDescription.default": "Press enter or space to select a node. Press delete to remove it and escape to cancel.",
+  "node.a11yDescription.keyboardDisabled": "Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.",
+  "node.a11yDescription.ariaLiveMessage": ({ direction, x, y: y2 }) => `Moved selected node ${direction}. New position, x: ${x}, y: ${y2}`,
+  "edge.a11yDescription.default": "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.",
+  // Control elements
+  "controls.ariaLabel": "Control Panel",
+  "controls.zoomIn.ariaLabel": "Zoom In",
+  "controls.zoomOut.ariaLabel": "Zoom Out",
+  "controls.fitView.ariaLabel": "Fit View",
+  "controls.interactive.ariaLabel": "Toggle Interactivity",
+  // Mini map
+  "minimap.ariaLabel": "Mini Map",
+  // Handle
+  "handle.ariaLabel": "Handle"
+};
 var ConnectionMode;
 (function(ConnectionMode2) {
   ConnectionMode2.Strict = "strict", ConnectionMode2.Loose = "loose";
@@ -11566,11 +11745,15 @@ async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom },
   if (nodes.size === 0)
     return Promise.resolve(!0);
   const nodesToFit = getFitViewNodes(nodes, options), bounds = getInternalNodesBounds(nodesToFit), 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);
+  return await panZoom.setViewport(viewport, {
+    duration: options?.duration,
+    ease: options?.ease,
+    interpolate: options?.interpolate
+  }), Promise.resolve(!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 extent = nodeExtent;
+  let extent = node.extent || nodeExtent;
   if (node.extent === "parent" && !node.expandParent)
     if (!parentNode)
       onError?.("005", errorMessages.error005());
@@ -11767,6 +11950,9 @@ function withResolvers() {
     resolve = res, reject = rej;
   }), resolve, reject };
 }
+function mergeAriaLabelConfig(partial) {
+  return { ...defaultAriaLabelConfig, ...partial || {} };
+}
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = !1, transform: transform2, containerBounds }) {
   const { x, y: y2 } = getEventPosition(event), pointerPos = pointToRendererPoint({ x: x - (containerBounds?.left ?? 0), y: y2 - (containerBounds?.top ?? 0) }, transform2), { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
   return {
@@ -11860,11 +12046,11 @@ function getEdgeCenter({ sourceX, sourceY, targetX, targetY }) {
   const xOffset = Math.abs(targetX - sourceX) / 2, centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset, yOffset = Math.abs(targetY - sourceY) / 2, centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
   return [centerX, centerY, xOffset, yOffset];
 }
-function getElevatedEdgeZIndex({ sourceNode, targetNode, selected: selected2 = !1, zIndex = 0, elevateOnSelect = !1 }) {
-  if (!elevateOnSelect)
+function getElevatedEdgeZIndex({ sourceNode, targetNode, selected: selected2 = !1, zIndex, elevateOnSelect = !1 }) {
+  if (zIndex !== void 0)
     return zIndex;
-  const edgeOrConnectedNodeSelected = selected2 || targetNode.selected || sourceNode.selected, selectedZIndex = Math.max(sourceNode.internals.z || 0, targetNode.internals.z || 0, 1e3);
-  return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
+  const edgeZ = elevateOnSelect && selected2 ? 1e3 : 0, nodeZ = Math.max(sourceNode.parentId ? sourceNode.internals.z : 0, targetNode.parentId ? targetNode.internals.z : 0);
+  return edgeZ + nodeZ;
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform: transform2 }) {
   const edgeBox = getBoundsOfBoxes(nodeToBox(sourceNode), nodeToBox(targetNode));
@@ -11901,21 +12087,21 @@ const handleDirections = {
   [Position.Top]: { x: 0, y: -1 },
   [Position.Bottom]: { x: 0, y: 1 }
 }, getDirection = ({ source, sourcePosition = Position.Bottom, target }) => sourcePosition === Position.Left || sourcePosition === Position.Right ? source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 } : source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 }, distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
-function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset: offset2 }) {
+function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset: offset2, stepPosition }) {
   const sourceDir = handleDirections[sourcePosition], targetDir = handleDirections[targetPosition], sourceGapped = { x: source.x + sourceDir.x * offset2, y: source.y + sourceDir.y * offset2 }, targetGapped = { x: target.x + targetDir.x * offset2, y: target.y + targetDir.y * offset2 }, dir = getDirection({
     source: sourceGapped,
     sourcePosition,
     target: targetGapped
   }), dirAccessor = dir.x !== 0 ? "x" : "y", currDir = dir[dirAccessor];
   let points = [], centerX, centerY;
-  const sourceGapOffset = { x: 0, y: 0 }, targetGapOffset = { x: 0, y: 0 }, [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+  const sourceGapOffset = { x: 0, y: 0 }, targetGapOffset = { x: 0, y: 0 }, [, , defaultOffsetX, defaultOffsetY] = getEdgeCenter({
     sourceX: source.x,
     sourceY: source.y,
     targetX: target.x,
     targetY: target.y
   });
   if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-    centerX = center.x ?? defaultCenterX, centerY = center.y ?? defaultCenterY;
+    dirAccessor === "x" ? (centerX = center.x ?? sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition, centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2) : (centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2, centerY = center.y ?? sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition);
     const verticalSplit = [
       { x: centerX, y: sourceGapped.y },
       { x: centerX, y: targetGapped.y }
@@ -11959,14 +12145,15 @@ function getBend(a, b, c, size2) {
   const xDir = a.x < c.x ? 1 : -1, yDir = a.y < c.y ? -1 : 1;
   return `L ${x},${y2 + bendSize * yDir}Q ${x},${y2} ${x + bendSize * xDir},${y2}`;
 }
-function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius: borderRadius2 = 5, centerX, centerY, offset: offset2 = 20 }) {
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius: borderRadius2 = 5, centerX, centerY, offset: offset2 = 20, stepPosition = 0.5 }) {
   const [points, labelX, labelY, offsetX, offsetY] = getPoints({
     source: { x: sourceX, y: sourceY },
     sourcePosition,
     target: { x: targetX, y: targetY },
     targetPosition,
     center: { x: centerX, y: centerY },
-    offset: offset2
+    offset: offset2,
+    stepPosition
   });
   return [points.reduce((res, p, i2) => {
     let segment = "";
@@ -12158,7 +12345,7 @@ function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, select
   return {
     x: absolutePosition.x,
     y: absolutePosition.y,
-    z: parentZ > childZ ? parentZ : childZ
+    z: parentZ >= childZ ? parentZ + 1 : childZ
   };
 }
 function handleExpandParent(children2, nodeLookup, parentLookup, nodeOrigin = [0, 0]) {
@@ -12350,28 +12537,43 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = !0 })
     nodesFromDragItems
   ];
 }
+function calculateSnapOffset({ dragItems, snapGrid, x, y: y2 }) {
+  const refDragItem = dragItems.values().next().value;
+  if (!refDragItem)
+    return null;
+  const refPos = {
+    x: x - refDragItem.distance.x,
+    y: y2 - refDragItem.distance.y
+  }, refPosSnapped = snapPosition(refPos, snapGrid);
+  return {
+    x: refPosSnapped.x - refPos.x,
+    y: refPosSnapped.y - refPos.y
+  };
+}
 function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop }) {
-  let lastPos = { x: null, y: null }, autoPanId = 0, dragItems = /* @__PURE__ */ new Map(), autoPanStarted = !1, mousePosition = { x: 0, y: 0 }, containerBounds = null, dragStarted = !1, d3Selection = null, abortDrag = !1;
+  let lastPos = { x: null, y: null }, autoPanId = 0, dragItems = /* @__PURE__ */ new Map(), autoPanStarted = !1, mousePosition = { x: 0, y: 0 }, containerBounds = null, dragStarted = !1, d3Selection = null, abortDrag = !1, nodePositionsChanged = !1, dragEvent = null;
   function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId, nodeClickDistance = 0 }) {
     d3Selection = select(domNode);
-    function updateNodes({ x, y: y2 }, dragEvent) {
+    function updateNodes({ x, y: y2 }) {
       const { nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions } = getStoreItems();
       lastPos = { x, y: y2 };
-      let hasChange = !1, nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
-      if (dragItems.size > 1 && nodeExtent) {
-        const rect = getInternalNodesBounds(dragItems);
-        nodesBox = rectToBox(rect);
-      }
+      let hasChange = !1;
+      const isMultiDrag = dragItems.size > 1, nodesBox = isMultiDrag && nodeExtent ? rectToBox(getInternalNodesBounds(dragItems)) : null, multiDragSnapOffset = isMultiDrag && snapToGrid ? calculateSnapOffset({
+        dragItems,
+        snapGrid,
+        x,
+        y: y2
+      }) : null;
       for (const [id2, dragItem] of dragItems) {
         if (!nodeLookup.has(id2))
           continue;
         let nextPosition = { x: x - dragItem.distance.x, y: y2 - dragItem.distance.y };
-        snapToGrid && (nextPosition = snapPosition(nextPosition, snapGrid));
-        let adjustedNodeExtent = [
-          [nodeExtent[0][0], nodeExtent[0][1]],
-          [nodeExtent[1][0], nodeExtent[1][1]]
-        ];
-        if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
+        snapToGrid && (nextPosition = multiDragSnapOffset ? {
+          x: nextPosition.x + multiDragSnapOffset.x,
+          y: nextPosition.y + multiDragSnapOffset.y
+        } : snapPosition(nextPosition, snapGrid));
+        let adjustedNodeExtent = null;
+        if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {
           const { positionAbsolute: positionAbsolute2 } = dragItem.internals, x1 = positionAbsolute2.x - nodesBox.x + nodeExtent[0][0], x2 = positionAbsolute2.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0], y1 = positionAbsolute2.y - nodesBox.y + nodeExtent[0][1], y22 = positionAbsolute2.y + dragItem.measured.height - nodesBox.y2 + nodeExtent[1][1];
           adjustedNodeExtent = [
             [x1, y1],
@@ -12382,13 +12584,13 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
           nodeId: id2,
           nextPosition,
           nodeLookup,
-          nodeExtent: adjustedNodeExtent,
+          nodeExtent: adjustedNodeExtent || nodeExtent,
           nodeOrigin,
           onError
         });
         hasChange = hasChange || dragItem.position.x !== position.x || dragItem.position.y !== position.y, dragItem.position = position, dragItem.internals.positionAbsolute = positionAbsolute;
       }
-      if (hasChange && (updateNodePositions(dragItems, !0), dragEvent && (onDrag || onNodeDrag || !nodeId && onSelectionDrag))) {
+      if (nodePositionsChanged = nodePositionsChanged || hasChange, !!hasChange && (updateNodePositions(dragItems, !0), dragEvent && (onDrag || onNodeDrag || !nodeId && onSelectionDrag))) {
         const [currentNode, currentNodes] = getEventHandlerParams({
           nodeId,
           dragItems,
@@ -12406,7 +12608,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
         return;
       }
       const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
-      (xMovement !== 0 || yMovement !== 0) && (lastPos.x = (lastPos.x ?? 0) - xMovement / transform2[2], lastPos.y = (lastPos.y ?? 0) - yMovement / transform2[2], await panBy2({ x: xMovement, y: yMovement }) && updateNodes(lastPos, null)), autoPanId = requestAnimationFrame(autoPan);
+      (xMovement !== 0 || yMovement !== 0) && (lastPos.x = (lastPos.x ?? 0) - xMovement / transform2[2], lastPos.y = (lastPos.y ?? 0) - yMovement / transform2[2], await panBy2({ x: xMovement, y: yMovement }) && updateNodes(lastPos)), autoPanId = requestAnimationFrame(autoPan);
     }
     function startDrag(event) {
       const { nodeLookup, multiSelectionActive, nodesDraggable, transform: transform2, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges } = getStoreItems();
@@ -12423,21 +12625,21 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     }
     const d3DragInstance = drag().clickDistance(nodeClickDistance).on("start", (event) => {
       const { domNode: domNode2, nodeDragThreshold, transform: transform2, snapGrid, snapToGrid } = getStoreItems();
-      containerBounds = domNode2?.getBoundingClientRect() || null, abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds }), mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+      containerBounds = domNode2?.getBoundingClientRect() || null, abortDrag = !1, nodePositionsChanged = !1, dragEvent = event.sourceEvent, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds }), mousePosition = getEventPosition(event.sourceEvent, containerBounds);
     }).on("drag", (event) => {
       const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid, containerBounds });
-      if ((event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
+      if (dragEvent = event.sourceEvent, (event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
       nodeId && !nodeLookup.has(nodeId)) && (abortDrag = !0), !abortDrag) {
         if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
           const x = pointerPos.xSnapped - (lastPos.x ?? 0), y2 = pointerPos.ySnapped - (lastPos.y ?? 0);
           Math.sqrt(x * x + y2 * y2) > nodeDragThreshold && startDrag(event);
         }
-        (lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted && (mousePosition = getEventPosition(event.sourceEvent, containerBounds), updateNodes(pointerPos, event.sourceEvent));
+        (lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted && (mousePosition = getEventPosition(event.sourceEvent, containerBounds), updateNodes(pointerPos));
       }
     }).on("end", (event) => {
       if (!(!dragStarted || abortDrag) && (autoPanStarted = !1, dragStarted = !1, cancelAnimationFrame(autoPanId), dragItems.size > 0)) {
         const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
-        if (updateNodePositions(dragItems, !1), onDragStop || onNodeDragStop || !nodeId && onSelectionDragStop) {
+        if (nodePositionsChanged && (updateNodePositions(dragItems, !1), nodePositionsChanged = !1), onDragStop || onNodeDragStop || !nodeId && onSelectionDragStop) {
           const [currentNode, currentNodes] = getEventHandlerParams({
             nodeId,
             dragItems,
@@ -12508,16 +12710,17 @@ function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
   return isHandleValid ? isValid = !0 : isInsideConnectionRadius && !isHandleValid && (isValid = !1), isValid;
 }
 const alwaysValid = () => !0;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy: panBy2, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy: panBy2, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, handleDomNode }) {
   const doc = getHostForElement(event.target);
   let autoPanId = 0, closestHandle;
-  const { x, y: y2 } = getEventPosition(event), clickedHandle = doc?.elementFromPoint(x, y2), handleType = getHandleType(edgeUpdaterType, clickedHandle), containerBounds = domNode?.getBoundingClientRect();
+  const { x, y: y2 } = getEventPosition(event), handleType = getHandleType(edgeUpdaterType, handleDomNode), containerBounds = domNode?.getBoundingClientRect();
+  let connectionStarted = !1;
   if (!containerBounds || !handleType)
     return;
   const fromHandleInternal = getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode);
   if (!fromHandleInternal)
     return;
-  let position = getEventPosition(event, containerBounds), autoPanStarted = !1, connection = null, isValid = !1, handleDomNode = null;
+  let position = getEventPosition(event, containerBounds), autoPanStarted = !1, connection = null, isValid = !1, resultHandleDomNode = null;
   function autoPan() {
     if (!autoPanOnConnect || !containerBounds)
       return;
@@ -12529,7 +12732,8 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     nodeId,
     type: handleType,
     position: fromHandleInternal.position
-  }, fromNodeInternal = nodeLookup.get(nodeId), newConnection = {
+  }, fromNodeInternal = nodeLookup.get(nodeId);
+  let previousConnection = {
     inProgress: !0,
     isValid: null,
     from: getHandlePosition(fromNodeInternal, fromHandle, Position.Left, !0),
@@ -12541,10 +12745,17 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     toPosition: oppositePosition[fromHandle.position],
     toNode: null
   };
-  updateConnection(newConnection);
-  let previousConnection = newConnection;
-  onConnectStart?.(event, { nodeId, handleId, handleType });
+  function startConnection() {
+    connectionStarted = !0, updateConnection(previousConnection), onConnectStart?.(event, { nodeId, handleId, handleType });
+  }
+  dragThreshold === 0 && startConnection();
   function onPointerMove(event2) {
+    if (!connectionStarted) {
+      const { x: evtX, y: evtY } = getEventPosition(event2), dx = evtX - x, dy = evtY - y2;
+      if (!(dx * dx + dy * dy > dragThreshold * dragThreshold))
+        return;
+      startConnection();
+    }
     if (!getFromHandle() || !fromHandle) {
       onPointerUp(event2);
       return;
@@ -12563,8 +12774,8 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       flowId,
       nodeLookup
     });
-    handleDomNode = result.handleDomNode, connection = result.connection, isValid = isConnectionValid(!!closestHandle, result.isValid);
-    const newConnection2 = {
+    resultHandleDomNode = result.handleDomNode, connection = result.connection, isValid = isConnectionValid(!!closestHandle, result.isValid);
+    const newConnection = {
       // from stays the same
       ...previousConnection,
       isValid,
@@ -12573,15 +12784,18 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
       toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null
     };
-    isValid && closestHandle && previousConnection.toHandle && newConnection2.toHandle && previousConnection.toHandle.type === newConnection2.toHandle.type && previousConnection.toHandle.nodeId === newConnection2.toHandle.nodeId && previousConnection.toHandle.id === newConnection2.toHandle.id && previousConnection.to.x === newConnection2.to.x && previousConnection.to.y === newConnection2.to.y || (updateConnection(newConnection2), previousConnection = newConnection2);
+    isValid && closestHandle && previousConnection.toHandle && newConnection.toHandle && previousConnection.toHandle.type === newConnection.toHandle.type && previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId && previousConnection.toHandle.id === newConnection.toHandle.id && previousConnection.to.x === newConnection.to.x && previousConnection.to.y === newConnection.to.y || (updateConnection(newConnection), previousConnection = newConnection);
   }
   function onPointerUp(event2) {
-    (closestHandle || handleDomNode) && connection && isValid && onConnect?.(connection);
-    const { inProgress, ...connectionState } = previousConnection, finalConnectionState = {
-      ...connectionState,
-      toPosition: previousConnection.toHandle ? previousConnection.toPosition : null
-    };
-    onConnectEnd?.(event2, finalConnectionState), edgeUpdaterType && onReconnectEnd?.(event2, finalConnectionState), cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, handleDomNode = null, doc.removeEventListener("mousemove", onPointerMove), doc.removeEventListener("mouseup", onPointerUp), doc.removeEventListener("touchmove", onPointerMove), doc.removeEventListener("touchend", onPointerUp);
+    if (connectionStarted) {
+      (closestHandle || resultHandleDomNode) && connection && isValid && onConnect?.(connection);
+      const { inProgress, ...connectionState } = previousConnection, finalConnectionState = {
+        ...connectionState,
+        toPosition: previousConnection.toHandle ? previousConnection.toPosition : null
+      };
+      onConnectEnd?.(event2, finalConnectionState), edgeUpdaterType && onReconnectEnd?.(event2, finalConnectionState);
+    }
+    cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, resultHandleDomNode = 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);
 }
@@ -12614,12 +12828,11 @@ const XYHandle = {
 };
 function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
   const selection2 = select(domNode);
-  function update({ translateExtent, width, height, zoomStep = 10, pannable = !0, zoomable = !0, inversePan = !1 }) {
+  function update({ translateExtent, width, height, zoomStep = 1, pannable = !0, zoomable = !0, inversePan = !1 }) {
     const zoomHandler = (event) => {
-      const transform2 = getTransform();
       if (event.sourceEvent.type !== "wheel" || !panZoom)
         return;
-      const pinchDelta = -event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 2e-3) * zoomStep, nextZoom = transform2[2] * Math.pow(2, pinchDelta);
+      const transform2 = getTransform(), factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1, pinchDelta = -event.sourceEvent.deltaY * (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 2e-3) * zoomStep, nextZoom = transform2[2] * Math.pow(2, pinchDelta * factor);
       panZoom.scaleTo(nextZoom);
     };
     let panStart = [0, 0];
@@ -12665,10 +12878,10 @@ const viewChanged = (prevViewport, eventViewport) => prevViewport.x !== eventVie
   x: transform2.x,
   y: transform2.y,
   zoom: transform2.k
-}), viewportToTransform = ({ x, y: y2, zoom: zoom2 }) => identity$1.translate(x, y2).scale(zoom2), isWrappedWithClass = (event, className) => event.target.closest(`.${className}`), isRightClickPan = (panOnDrag, usedButton) => usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2), getD3Transition = (selection2, duration = 0, onEnd = () => {
+}), viewportToTransform = ({ x, y: y2, zoom: zoom2 }) => identity$1.translate(x, y2).scale(zoom2), isWrappedWithClass = (event, className) => event.target.closest(`.${className}`), isRightClickPan = (panOnDrag, usedButton) => usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2), defaultEase = (t2) => ((t2 *= 2) <= 1 ? t2 * t2 * t2 : (t2 -= 2) * t2 * t2 + 2) / 2, getD3Transition = (selection2, duration = 0, ease = defaultEase, onEnd = () => {
 }) => {
   const hasDuration = typeof duration == "number" && duration > 0;
-  return hasDuration || onEnd(), hasDuration ? selection2.transition().duration(duration).on("end", onEnd) : selection2;
+  return hasDuration || onEnd(), hasDuration ? selection2.transition().duration(duration).ease(ease).on("end", onEnd) : selection2;
 }, wheelDelta = (event) => {
   const factor = event.ctrlKey && isMacOs() ? 10 : 1;
   return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 2e-3) * factor;
@@ -12771,7 +12984,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
   d3ZoomInstance.wheelDelta(wheelDelta);
   function setTransform(transform2, options) {
     return d3Selection ? new Promise((resolve) => {
-      d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration, () => resolve(!0)), transform2);
+      d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? interpolate$1 : interpolateZoom).transform(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(!0)), transform2);
     }) : Promise.resolve(!1);
   }
   function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange }) {
@@ -12854,12 +13067,12 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
   }
   function scaleTo(zoom2, options) {
     return d3Selection ? new Promise((resolve) => {
-      d3ZoomInstance?.scaleTo(getD3Transition(d3Selection, options?.duration, () => resolve(!0)), zoom2);
+      d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? interpolate$1 : interpolateZoom).scaleTo(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(!0)), zoom2);
     }) : Promise.resolve(!1);
   }
   function scaleBy(factor, options) {
     return d3Selection ? new Promise((resolve) => {
-      d3ZoomInstance?.scaleBy(getD3Transition(d3Selection, options?.duration, () => resolve(!0)), factor);
+      d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? interpolate$1 : interpolateZoom).scaleBy(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(!0)), factor);
     }) : Promise.resolve(!1);
   }
   function setScaleExtent(scaleExtent) {
@@ -13145,7 +13358,7 @@ function requireWithSelector_production() {
   function is(x, y2) {
     return x === y2 && (x !== 0 || 1 / x === 1 / y2) || x !== x && y2 !== y2;
   }
-  var objectIs = typeof Object.is == "function" ? Object.is : is, useSyncExternalStore2 = shim2.useSyncExternalStore, useRef2 = React2.useRef, useEffect2 = React2.useEffect, useMemo2 = React2.useMemo, useDebugValue2 = React2.useDebugValue;
+  var objectIs = typeof Object.is == "function" ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React2.useRef, useEffect2 = React2.useEffect, useMemo2 = React2.useMemo, useDebugValue2 = React2.useDebugValue;
   return withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual2) {
     var instRef = useRef2(null);
     if (instRef.current === null) {
@@ -13179,7 +13392,7 @@ function requireWithSelector_production() {
       },
       [getSnapshot, getServerSnapshot, selector2, isEqual2]
     );
-    var value = useSyncExternalStore2(subscribe, instRef[0], instRef[1]);
+    var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
     return useEffect2(
       function() {
         inst.hasValue = !0, inst.value = value;
@@ -13250,7 +13463,7 @@ function shallow$1(objA, objB) {
   return !0;
 }
 const StoreContext = createContext(null), Provider$1 = StoreContext.Provider, zustandErrorMessage = errorMessages.error001();
-function useStore$1(selector2, equalityFn) {
+function useStore(selector2, equalityFn) {
   const store = useContext(StoreContext);
   if (store === null)
     throw new Error(zustandErrorMessage);
@@ -13276,17 +13489,18 @@ const style$1 = { display: "none" }, ariaLiveStyle = {
   overflow: "hidden",
   clip: "rect(0px, 0px, 0px, 0px)",
   clipPath: "inset(100%)"
-}, ARIA_NODE_DESC_KEY = "react-flow__node-desc", ARIA_EDGE_DESC_KEY = "react-flow__edge-desc", ARIA_LIVE_MESSAGE = "react-flow__aria-live", selector$o = (s2) => s2.ariaLiveMessage;
+}, ARIA_NODE_DESC_KEY = "react-flow__node-desc", ARIA_EDGE_DESC_KEY = "react-flow__edge-desc", ARIA_LIVE_MESSAGE = "react-flow__aria-live", ariaLiveSelector = (s2) => s2.ariaLiveMessage, ariaLabelConfigSelector = (s2) => s2.ariaLabelConfig;
 function AriaLiveMessage({ rfId }) {
-  const ariaLiveMessage = useStore$1(selector$o);
+  const ariaLiveMessage = useStore(ariaLiveSelector);
   return jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage });
 }
 function A11yDescriptions({ rfId, disableKeyboardA11y }) {
-  return jsxs(Fragment$1, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style$1, children: ["Press enter or space to select a node.", !disableKeyboardA11y && "You can then use the arrow keys to move the node around.", " Press delete to remove it and escape to cancel.", " "] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style$1, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId })] });
+  const ariaLabelConfig = useStore(ariaLabelConfigSelector);
+  return jsxs(Fragment$1, { children: [jsx("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style$1, children: disableKeyboardA11y ? ariaLabelConfig["node.a11yDescription.default"] : ariaLabelConfig["node.a11yDescription.keyboardDisabled"] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style$1, children: ariaLabelConfig["edge.a11yDescription.default"] }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId })] });
 }
-const selector$n = (s2) => s2.userSelectionActive ? "none" : "all", Panel = forwardRef(({ position = "top-left", children: children2, className, style: style2, ...rest }, ref) => {
-  const pointerEvents = useStore$1(selector$n), positionClasses = `${position}`.split("-");
-  return jsx("div", { className: cc(["react-flow__panel", className, ...positionClasses]), style: { ...style2, pointerEvents }, ref, ...rest, children: children2 });
+const Panel = forwardRef(({ position = "top-left", children: children2, className, style: style2, ...rest }, ref) => {
+  const positionClasses = `${position}`.split("-");
+  return jsx("div", { className: cc(["react-flow__panel", className, ...positionClasses]), style: style2, ref, ...rest, children: children2 });
 });
 Panel.displayName = "Panel";
 function Attribution({ proOptions, position = "bottom-right" }) {
@@ -13304,7 +13518,7 @@ function areEqual(a, b) {
   return shallow$1(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && shallow$1(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId));
 }
 function SelectionListenerInner({ onSelectionChange }) {
-  const store = useStoreApi(), { selectedNodes, selectedEdges } = useStore$1(selector$m, areEqual);
+  const store = useStoreApi(), { selectedNodes, selectedEdges } = useStore(selector$m, areEqual);
   return useEffect(() => {
     const params = { nodes: selectedNodes, edges: selectedEdges };
     onSelectionChange?.(params), store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
@@ -13312,7 +13526,7 @@ function SelectionListenerInner({ onSelectionChange }) {
 }
 const changeSelector = (s2) => !!s2.onSelectionChangeHandlers;
 function SelectionListener({ onSelectionChange }) {
-  const storeHasSelectionChangeHandlers = useStore$1(changeSelector);
+  const storeHasSelectionChangeHandlers = useStore(changeSelector);
   return onSelectionChange || storeHasSelectionChangeHandlers ? jsx(SelectionListenerInner, { onSelectionChange }) : null;
 }
 const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, reactFlowFieldsToTrack = [
@@ -13326,6 +13540,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "onClickConnectStart",
   "onClickConnectEnd",
   "nodesDraggable",
+  "autoPanOnNodeFocus",
   "nodesConnectable",
   "nodesFocusable",
   "edgesFocusable",
@@ -13367,10 +13582,12 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "isValidConnection",
   "selectNodesOnDrag",
   "nodeDragThreshold",
+  "connectionDragThreshold",
   "onBeforeDelete",
   "debug",
   "autoPanSpeed",
-  "paneClickDistance"
+  "paneClickDistance",
+  "ariaLabelConfig"
 ], fieldsToTrack = [...reactFlowFieldsToTrack, "rfId"], selector$l = (s2) => ({
   setNodes: s2.setNodes,
   setEdges: s2.setEdges,
@@ -13397,7 +13614,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   paneClickDistance: 0
 };
 function StoreUpdater(props) {
-  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore$1(selector$l, shallow$1), store = useStoreApi();
+  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore(selector$l, shallow$1), store = useStoreApi();
   useEffect(() => (setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges), () => {
     previousFields.current = initPrevValues, reset();
   }), []);
@@ -13406,7 +13623,7 @@ function StoreUpdater(props) {
     () => {
       for (const fieldName of fieldsToTrack) {
         const fieldValue = props[fieldName], previousFieldValue = previousFields.current[fieldName];
-        fieldValue !== previousFieldValue && (typeof props[fieldName] > "u" || (fieldName === "nodes" ? setNodes(fieldValue) : fieldName === "edges" ? setEdges(fieldValue) : fieldName === "minZoom" ? setMinZoom(fieldValue) : fieldName === "maxZoom" ? setMaxZoom(fieldValue) : fieldName === "translateExtent" ? setTranslateExtent(fieldValue) : fieldName === "nodeExtent" ? setNodeExtent(fieldValue) : fieldName === "paneClickDistance" ? setPaneClickDistance(fieldValue) : fieldName === "fitView" ? store.setState({ fitViewQueued: fieldValue }) : fieldName === "fitViewOptions" ? store.setState({ fitViewOptions: fieldValue }) : store.setState({ [fieldName]: fieldValue })));
+        fieldValue !== previousFieldValue && (typeof props[fieldName] > "u" || (fieldName === "nodes" ? setNodes(fieldValue) : fieldName === "edges" ? setEdges(fieldValue) : fieldName === "minZoom" ? setMinZoom(fieldValue) : fieldName === "maxZoom" ? setMaxZoom(fieldValue) : fieldName === "translateExtent" ? setTranslateExtent(fieldValue) : fieldName === "nodeExtent" ? setNodeExtent(fieldValue) : fieldName === "paneClickDistance" ? setPaneClickDistance(fieldValue) : fieldName === "ariaLabelConfig" ? store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) }) : fieldName === "fitView" ? store.setState({ fitViewQueued: fieldValue }) : fieldName === "fitViewOptions" ? store.setState({ fitViewOptions: fieldValue }) : store.setState({ [fieldName]: fieldValue })));
       }
       previousFields.current = props;
     },
@@ -13495,23 +13712,20 @@ const useViewportHelper = () => {
         x: viewport.x ?? tX,
         y: viewport.y ?? tY,
         zoom: viewport.zoom ?? tZoom
-      }, { duration: options?.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
+      }, options), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     getViewport: () => {
       const [x, y2, zoom2] = store.getState().transform;
       return { x, y: y2, zoom: zoom2 };
     },
-    setCenter: async (x, y2, options) => {
-      const { width, height, maxZoom, panZoom } = store.getState(), nextZoom = typeof options?.zoom < "u" ? options.zoom : maxZoom, centerX = width / 2 - x * nextZoom, centerY = height / 2 - y2 * nextZoom;
-      return panZoom ? (await panZoom.setViewport({
-        x: centerX,
-        y: centerY,
-        zoom: nextZoom
-      }, { duration: options?.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
-    },
+    setCenter: async (x, y2, options) => store.getState().setCenter(x, y2, options),
     fitBounds: async (bounds, options) => {
       const { width, height, minZoom, maxZoom, panZoom } = store.getState(), viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
-      return panZoom ? (await panZoom.setViewport(viewport, { duration: options?.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
+      return panZoom ? (await panZoom.setViewport(viewport, {
+        duration: options?.duration,
+        ease: options?.ease,
+        interpolate: options?.interpolate
+      }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     screenToFlowPosition: (clientPosition, options = {}) => {
       const { transform: transform2, snapGrid, snapToGrid, domNode } = store.getState();
@@ -13680,7 +13894,7 @@ function useBatchContext() {
 }
 const selector$k = (s2) => !!s2.panZoom;
 function useReactFlow() {
-  const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore$1(selector$k), generalHelper = useMemo(() => {
+  const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore(selector$k), generalHelper = useMemo(() => {
     const getInternalNode = (id2) => store.getState().nodeLookup.get(id2), setNodes = (payload) => {
       batchContext.nodeQueue.push(payload);
     }, setEdges = (payload) => {
@@ -13766,7 +13980,7 @@ function useReactFlow() {
           if (internalNode && !isRect && (n2.id === nodeOrRect.id || !internalNode.internals.positionAbsolute))
             return !1;
           const currNodeRect = nodeToRect(hasNodesOption ? n2 : internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
-          return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
+          return partially && overlappingArea > 0 || overlappingArea >= currNodeRect.width * currNodeRect.height || overlappingArea >= nodeRect.width * nodeRect.height;
         }) : [];
       },
       isNodeIntersecting: (nodeOrRect, area, partially = !0) => {
@@ -13849,7 +14063,7 @@ const containerStyle = {
   lib: s2.lib
 });
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = !0, children: children2, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
-  const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib } = useStore$1(selector$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
+  const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib } = useStore(selector$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
   useResizeHandler(zoomPane);
   const onTransformChange = useCallback((transform2) => {
     onViewportChange?.({ x: transform2[0], y: transform2[1], zoom: transform2[2] }), isControlledViewport || store.setState({ transform: transform2 });
@@ -13927,7 +14141,7 @@ const selector$i = (s2) => ({
   userSelectionRect: s2.userSelectionRect
 });
 function UserSelection() {
-  const { userSelectionActive, userSelectionRect } = useStore$1(selector$i, shallow$1);
+  const { userSelectionActive, userSelectionRect } = useStore(selector$i, shallow$1);
   return userSelectionActive && userSelectionRect ? jsx("div", { className: "react-flow__selection react-flow__container", style: {
     width: userSelectionRect.width,
     height: userSelectionRect.height,
@@ -13943,7 +14157,7 @@ const wrapHandler = (handler, containerRef) => (event) => {
   dragging: s2.paneDragging
 });
 function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
-  const store = useStoreApi(), { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore$1(selector$h, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), container2 = useRef(null), containerBounds = useRef(), selectedNodeIds = useRef(/* @__PURE__ */ new Set()), selectedEdgeIds = useRef(/* @__PURE__ */ new Set()), selectionInProgress = useRef(!1), selectionStarted = useRef(!1), onClick = (event) => {
+  const store = useStoreApi(), { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), container2 = useRef(null), containerBounds = useRef(), selectedNodeIds = useRef(/* @__PURE__ */ new Set()), selectedEdgeIds = useRef(/* @__PURE__ */ new Set()), selectionInProgress = useRef(!1), selectionStarted = useRef(!1), onClick = (event) => {
     if (selectionInProgress.current || connectionInProgress) {
       selectionInProgress.current = !1;
       return;
@@ -14108,7 +14322,7 @@ const useNodeId = () => useContext(NodeIdContext), selector$g = (s2) => ({
   };
 };
 function HandleComponent({ type = "source", position = Position.Top, isValidConnection, isConnectable = !0, isConnectableStart = !0, isConnectableEnd = !0, id: id2, onConnect, children: children2, className, onMouseDown, onTouchStart, ...rest }, ref) {
-  const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore$1(selector$g, shallow$1), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, clickConnectionInProcess, valid } = useStore$1(connectingSelector(nodeId, handleId, type), shallow$1);
+  const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore(selector$g, shallow$1), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, clickConnectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow$1);
   nodeId || store.getState().onError?.("010", errorMessages.error010());
   const onConnectExtended = (params) => {
     const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState(), edgeParams = {
@@ -14127,6 +14341,7 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
     if (isConnectableStart && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) {
       const currentStore = store.getState();
       XYHandle.onPointerDown(event.nativeEvent, {
+        handleDomNode: event.currentTarget,
         autoPanOnConnect: currentStore.autoPanOnConnect,
         connectionMode: currentStore.connectionMode,
         connectionRadius: currentStore.connectionRadius,
@@ -14146,7 +14361,8 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
         isValidConnection: isValidConnection || currentStore.isValidConnection,
         getTransform: () => store.getState().transform,
         getFromHandle: () => store.getState().connection.fromHandle,
-        autoPanSpeed: currentStore.autoPanSpeed
+        autoPanSpeed: currentStore.autoPanSpeed,
+        dragThreshold: currentStore.connectionDragThreshold
       });
     }
     isMouseTriggered ? onMouseDown?.(event) : onTouchStart?.(event);
@@ -14247,7 +14463,7 @@ const selector$f = (s2) => {
   };
 };
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
-  const store = useStoreApi(), { width, height, transformString, userSelectionActive } = useStore$1(selector$f, shallow$1), moveSelectedNodes = useMoveSelectedNodes(), nodeRef = useRef(null);
+  const store = useStoreApi(), { width, height, transformString, userSelectionActive } = useStore(selector$f, shallow$1), moveSelectedNodes = useMoveSelectedNodes(), nodeRef = useRef(null);
   if (useEffect(() => {
     disableKeyboardA11y || nodeRef.current?.focus({
       preventScroll: !0
@@ -14274,17 +14490,17 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
 }
 const win = typeof window < "u" ? window : void 0, selector$e = (s2) => ({ nodesSelectionActive: s2.nodesSelectionActive, userSelectionActive: s2.userSelectionActive });
 function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
-  const { nodesSelectionActive, userSelectionActive } = useStore$1(selector$e), selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }), panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, _selectionOnDrag = selectionOnDrag && panOnDrag !== !0, isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
+  const { nodesSelectionActive, userSelectionActive } = useStore(selector$e), selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }), panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, _selectionOnDrag = selectionOnDrag && panOnDrag !== !0, isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
   return useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }), jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
 const FlowRenderer = memo$1(FlowRendererComponent), selector$d = (onlyRenderVisible) => (s2) => onlyRenderVisible ? getNodesInside(s2.nodeLookup, { x: 0, y: 0, width: s2.width, height: s2.height }, s2.transform, !0).map((node) => node.id) : Array.from(s2.nodeLookup.keys());
 function useVisibleNodeIds(onlyRenderVisible) {
-  return useStore$1(useCallback(selector$d(onlyRenderVisible), [onlyRenderVisible]), shallow$1);
+  return useStore(useCallback(selector$d(onlyRenderVisible), [onlyRenderVisible]), shallow$1);
 }
 const selector$c = (s2) => s2.updateNodeInternals;
 function useResizeObserver() {
-  const updateNodeInternals2 = useStore$1(selector$c), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
+  const updateNodeInternals2 = useStore(selector$c), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
     const updates = /* @__PURE__ */ new Map();
     entries.forEach((entry) => {
       const id2 = entry.target.getAttribute("data-id");
@@ -14313,7 +14529,7 @@ function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver }) {
   }, [node.id, nodeType, node.sourcePosition, node.targetPosition]), nodeRef;
 }
 function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeClickDistance, onError }) {
-  const { node, internals, isParent: isParent2 } = useStore$1((s2) => {
+  const { node, internals, isParent: isParent2 } = useStore((s2) => {
     const node2 = s2.nodeLookup.get(id2), isParent22 = s2.parentLookup.has(id2);
     return {
       node: node2,
@@ -14322,7 +14538,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     };
   }, shallow$1);
   let nodeType = node.type || "default", NodeComponent = nodeTypes?.[nodeType] || builtinNodeTypes[nodeType];
-  NodeComponent === void 0 && (onError?.("003", errorMessages.error003(nodeType)), nodeType = "default", NodeComponent = builtinNodeTypes.default);
+  NodeComponent === void 0 && (onError?.("003", errorMessages.error003(nodeType)), nodeType = "default", NodeComponent = nodeTypes?.default || builtinNodeTypes.default);
   const isDraggable = !!(node.draggable || nodesDraggable && typeof node.draggable > "u"), isSelectable = !!(node.selectable || elementsSelectable && typeof node.selectable > "u"), isConnectable = !!(node.connectable || nodesConnectable && typeof node.connectable > "u"), isFocusable = !!(node.focusable || nodesFocusable && typeof node.focusable > "u"), store = useStoreApi(), hasDimensions = nodeHasDimensions(node), nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver }), dragging = useDrag({
     nodeRef,
     disabled: node.hidden || !isDraggable,
@@ -14342,7 +14558,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
       nodeRef
     }), onClick && onClick(event, { ...internals.userNode });
   }, onKeyDown = (event) => {
-    if (!(isInputDOMNode(event.nativeEvent) || disableKeyboardA11y))
+    if (!(isInputDOMNode(event.nativeEvent) || disableKeyboardA11y)) {
       if (elementSelectionKeys.includes(event.key) && isSelectable) {
         const unselect = event.key === "Escape";
         handleNodeClick({
@@ -14351,12 +14567,30 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
           unselect,
           nodeRef
         });
-      } else isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key) && (event.preventDefault(), store.setState({
-        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
-      }));
+      } else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+        event.preventDefault();
+        const { ariaLabelConfig } = store.getState();
+        store.setState({
+          ariaLiveMessage: ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({
+            direction: event.key.replace("Arrow", "").toLowerCase(),
+            x: ~~internals.positionAbsolute.x,
+            y: ~~internals.positionAbsolute.y
+          })
+        }), moveSelectedNodes({
+          direction: arrowKeyDiffs[event.key],
+          factor: event.shiftKey ? 4 : 1
+        });
+      }
+    }
+  }, onFocus = () => {
+    if (disableKeyboardA11y || !nodeRef.current?.matches(":focus-visible"))
+      return;
+    const { transform: transform2, width, height, autoPanOnNodeFocus, setCenter } = store.getState();
+    if (!autoPanOnNodeFocus)
+      return;
+    getNodesInside(/* @__PURE__ */ new Map([[id2, node]]), { x: 0, y: 0, width, height }, transform2, !0).length > 0 || setCenter(node.position.x + nodeDimensions.width / 2, node.position.y + nodeDimensions.height / 2, {
+      zoom: transform2[2]
+    });
   };
   return jsx("div", { className: cc([
     "react-flow__node",
@@ -14380,7 +14614,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     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: internals.positionAbsolute.x, positionAbsoluteY: internals.positionAbsolute.y, selected: node.selected ?? !1, 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, onFocus: isFocusable ? onFocus : void 0, role: node.ariaRole ?? (isFocusable ? "group" : void 0), "aria-roledescription": "node", "aria-describedby": disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, ...node.domAttributes, 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 ?? !1, 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 = (s2) => ({
   nodesDraggable: s2.nodesDraggable,
@@ -14390,7 +14624,7 @@ const selector$b = (s2) => ({
   onError: s2.onError
 });
 function NodeRendererComponent(props) {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore$1(selector$b, shallow$1), nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements), resizeObserver = useResizeObserver();
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$b, shallow$1), nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements), resizeObserver = useResizeObserver();
   return jsx("div", { className: "react-flow__nodes", style: containerStyle, children: nodeIds.map((nodeId) => (
     /*
      * The split of responsibilities between NodeRenderer and
@@ -14423,7 +14657,7 @@ function NodeRendererComponent(props) {
 NodeRendererComponent.displayName = "NodeRenderer";
 const NodeRenderer = memo$1(NodeRendererComponent);
 function useVisibleEdgeIds(onlyRenderVisible) {
-  return useStore$1(useCallback((s2) => {
+  return useStore(useCallback((s2) => {
     if (!onlyRenderVisible)
       return s2.edges.map((edge) => edge.id);
     const visibleEdgeIds = [];
@@ -14441,14 +14675,19 @@ function useVisibleEdgeIds(onlyRenderVisible) {
     return visibleEdgeIds;
   }, [onlyRenderVisible]), shallow$1);
 }
-const ArrowSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => jsx("polyline", { style: {
-  stroke: color2,
-  strokeWidth
-}, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", points: "-5,-4 0,0 -5,4" }), ArrowClosedSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => jsx("polyline", { style: {
-  stroke: color2,
-  fill: color2,
-  strokeWidth
-}, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" }), MarkerSymbols = {
+const ArrowSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => {
+  const style2 = {
+    strokeWidth,
+    ...color2 && { stroke: color2 }
+  };
+  return jsx("polyline", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", points: "-5,-4 0,0 -5,4" });
+}, ArrowClosedSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => {
+  const style2 = {
+    strokeWidth,
+    ...color2 && { stroke: color2, fill: color2 }
+  };
+  return jsx("polyline", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" });
+}, MarkerSymbols = {
   [MarkerType.Arrow]: ArrowSymbol,
   [MarkerType.ArrowClosed]: ArrowClosedSymbol
 };
@@ -14460,7 +14699,7 @@ const Marker = ({ id: id2, type, color: color2, width = 12.5, height = 12.5, mar
   const Symbol2 = useMarkerSymbol(type);
   return Symbol2 ? jsx("marker", { className: "react-flow__arrowhead", id: id2, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits, orient, refX: "0", refY: "0", children: jsx(Symbol2, { color: color2, strokeWidth }) }) : null;
 }, MarkerDefinitions = ({ defaultColor, rfId }) => {
-  const edges = useStore$1((s2) => s2.edges), defaultEdgeOptions = useStore$1((s2) => s2.defaultEdgeOptions), markers = useMemo(() => createMarkerIds(edges, {
+  const edges = useStore((s2) => s2.edges), defaultEdgeOptions = useStore((s2) => s2.defaultEdgeOptions), markers = useMemo(() => createMarkerIds(edges, {
     id: rfId,
     defaultColor,
     defaultMarkerStart: defaultEdgeOptions?.markerStart,
@@ -14487,7 +14726,7 @@ function EdgeTextComponent({ x, y: y2, label, labelStyle, labelShowBg = !0, labe
 EdgeTextComponent.displayName = "EdgeText";
 const EdgeText = memo$1(EdgeTextComponent);
 function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth = 20, ...props }) {
-  return jsxs(Fragment$1, { children: [jsx("path", { ...props, d: path, fill: "none", className: cc(["react-flow__edge-path", props.className]) }), interactionWidth && jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" }), label && isNumeric(labelX) && isNumeric(labelY) ? jsx(EdgeText, { x: labelX, y: labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius }) : null] });
+  return jsxs(Fragment$1, { children: [jsx("path", { ...props, d: path, fill: "none", className: cc(["react-flow__edge-path", props.className]) }), interactionWidth ? jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" }) : null, label && isNumeric(labelX) && isNumeric(labelY) ? jsx(EdgeText, { x: labelX, y: labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius }) : null] });
 }
 function getControl({ pos, x1, y1, x2, y2 }) {
   return pos === Position.Left || pos === Position.Right ? [0.5 * (x1 + x2), y1] : [x1, 0.5 * (y1 + y2)];
@@ -14549,7 +14788,8 @@ function createSmoothStepEdge(params) {
       targetY,
       targetPosition,
       borderRadius: pathOptions?.borderRadius,
-      offset: pathOptions?.offset
+      offset: pathOptions?.offset,
+      stepPosition: pathOptions?.stepPosition
     }), _id = params.isInternal ? void 0 : id2;
     return jsx(BaseEdge, { id: _id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, interactionWidth });
   });
@@ -14613,11 +14853,11 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
   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(), isTarget = oppositeHandle.type === "target";
-    setReconnecting(!0), onReconnectStart?.(event, edge, oppositeHandle.type);
-    const _onReconnectEnd = (evt, connectionState) => {
+    const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy: panBy2, updateConnection } = store.getState(), isTarget = oppositeHandle.type === "target", _onReconnectEnd = (evt, connectionState) => {
       setReconnecting(!1), onReconnectEnd?.(evt, edge, oppositeHandle.type, connectionState);
-    }, onConnectEdge = (connection) => onReconnect?.(edge, connection);
+    }, onConnectEdge = (connection) => onReconnect?.(edge, connection), _onConnectStart = (_event, params) => {
+      setReconnecting(!0), onReconnectStart?.(event, edge, oppositeHandle.type), onConnectStart?.(_event, params);
+    };
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
       connectionMode,
@@ -14634,23 +14874,25 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
       panBy: panBy2,
       isValidConnection,
       onConnect: onConnectEdge,
-      onConnectStart,
+      onConnectStart: _onConnectStart,
       onConnectEnd,
       onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
-      getFromHandle: () => store.getState().connection.fromHandle
+      getFromHandle: () => store.getState().connection.fromHandle,
+      dragThreshold: store.getState().connectionDragThreshold,
+      handleDomNode: event.currentTarget
     });
   }, 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$1, { 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$1((s2) => s2.edgeLookup.get(id2));
-  const defaultEdgeOptions = useStore$1((s2) => s2.defaultEdgeOptions);
+  let edge = useStore((s2) => s2.edgeLookup.get(id2));
+  const defaultEdgeOptions = useStore((s2) => s2.defaultEdgeOptions);
   edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
   let edgeType = edge.type || "default", EdgeComponent = edgeTypes?.[edgeType] || builtinEdgeTypes[edgeType];
-  EdgeComponent === void 0 && (onError?.("011", errorMessages.error011(edgeType)), edgeType = "default", EdgeComponent = builtinEdgeTypes.default);
-  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$1(useCallback((store2) => {
+  EdgeComponent === void 0 && (onError?.("011", errorMessages.error011(edgeType)), edgeType = "default", EdgeComponent = edgeTypes?.default || builtinEdgeTypes.default);
+  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 {
@@ -14710,7 +14952,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 })] }) });
+  ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: edge.ariaRole ?? (isFocusable ? "group" : "img"), "aria-roledescription": "edge", "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, ...edge.domAttributes, 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 = (s2) => ({
   edgesFocusable: s2.edgesFocusable,
@@ -14720,13 +14962,13 @@ const selector$a = (s2) => ({
   onError: s2.onError
 });
 function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y }) {
-  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore$1(selector$a, shallow$1), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
+  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector$a, shallow$1), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
   return jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId }), edgeIds.map((id2) => jsx(EdgeWrapper, { id: id2, edgesFocusable, edgesReconnectable, elementsSelectable, noPanClassName, onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart, onReconnectEnd, rfId, onError, edgeTypes, disableKeyboardA11y }, id2))] });
 }
 EdgeRendererComponent.displayName = "EdgeRenderer";
 const EdgeRenderer = memo$1(EdgeRendererComponent), selector$9 = (s2) => `translate(${s2.transform[0]}px,${s2.transform[1]}px) scale(${s2.transform[2]})`;
 function Viewport({ children: children2 }) {
-  const transform2 = useStore$1(selector$9);
+  const transform2 = useStore(selector$9);
   return jsx("div", { className: "react-flow__viewport xyflow__viewport react-flow__container", style: { transform: transform2 }, children: children2 });
 }
 function useOnInitHandler(onInit) {
@@ -14737,7 +14979,7 @@ function useOnInitHandler(onInit) {
 }
 const selector$8 = (state) => state.panZoom?.syncViewport;
 function useViewportSync(viewport) {
-  const syncViewport = useStore$1(selector$8), store = useStoreApi();
+  const syncViewport = useStore(selector$8), store = useStoreApi();
   return useEffect(() => {
     viewport && (syncViewport?.(viewport), store.setState({ transform: [viewport.x, viewport.y, viewport.zoom] }));
   }, [viewport, syncViewport]), null;
@@ -14750,7 +14992,7 @@ function getSelector(connectionSelector) {
 }
 function useConnection(connectionSelector) {
   const combinedSelector = getSelector();
-  return useStore$1(combinedSelector, shallow$1);
+  return useStore(combinedSelector, shallow$1);
 }
 const selector$7 = (s2) => ({
   nodesConnectable: s2.nodesConnectable,
@@ -14760,7 +15002,7 @@ const selector$7 = (s2) => ({
   height: s2.height
 });
 function ConnectionLineWrapper({ containerStyle: containerStyle2, style: style2, type, component }) {
-  const { nodesConnectable, width, height, isValid, inProgress } = useStore$1(selector$7, shallow$1);
+  const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector$7, shallow$1);
   return !(width && nodesConnectable && inProgress) ? null : jsx("svg", { style: containerStyle2, width, height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(["react-flow__connection", getConnectionStatus(isValid)]), children: jsx(ConnectionLine, { style: style2, type, CustomComponent: component, isValid }) }) });
 }
 const ConnectionLine = ({ style: style2, type = ConnectionLineType.Bezier, CustomComponent, isValid }) => {
@@ -14858,6 +15100,7 @@ const GraphView = memo$1(GraphViewComponent), getInitialState = ({ nodes, edges,
     noPanClassName: "nopan",
     nodeOrigin: storeNodeOrigin,
     nodeDragThreshold: 1,
+    connectionDragThreshold: 1,
     snapGrid: [15, 15],
     snapToGrid: !1,
     nodesDraggable: !0,
@@ -14879,13 +15122,15 @@ const GraphView = memo$1(GraphViewComponent), getInitialState = ({ nodes, edges,
     ariaLiveMessage: "",
     autoPanOnConnect: !0,
     autoPanOnNodeDrag: !0,
+    autoPanOnNodeFocus: !0,
     autoPanSpeed: 15,
     connectionRadius: 20,
     onError: devWarn,
     isValidConnection: void 0,
     onSelectionChangeHandlers: [],
     lib: "react",
-    debug: !1
+    debug: !1,
+    ariaLabelConfig: defaultAriaLabelConfig
   };
 }, createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent }) => createWithEqualityFn((set2, get2) => {
   async function resolveFitView() {
@@ -15053,6 +15298,17 @@ const GraphView = memo$1(GraphViewComponent), getInitialState = ({ nodes, edges,
       const { transform: transform2, width: width2, height: height2, panZoom, translateExtent } = get2();
       return panBy({ delta, panZoom, transform: transform2, translateExtent, width: width2, height: height2 });
     },
+    setCenter: async (x, y2, options) => {
+      const { width: width2, height: height2, maxZoom: maxZoom2, panZoom } = get2();
+      if (!panZoom)
+        return Promise.resolve(!1);
+      const nextZoom = typeof options?.zoom < "u" ? options.zoom : maxZoom2;
+      return await panZoom.setViewport({
+        x: width2 / 2 - x * nextZoom,
+        y: height2 / 2 - y2 * nextZoom,
+        zoom: nextZoom
+      }, { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }), Promise.resolve(!0);
+    },
     cancelConnection: () => {
       set2({
         connection: { ...initialConnection }
@@ -15091,20 +15347,20 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-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, 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, onScroll, ...rest }, ref) {
+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, autoPanOnNodeFocus, 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, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, onScroll, ariaLabelConfig, ...rest }, ref) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode), wrapperOnScroll = useCallback((e2) => {
     e2.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" }), onScroll?.(e2);
   }, [onScroll]);
-  return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, 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, 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", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, 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, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, paneClickDistance, debug, ariaLabelConfig }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
 const selector$6 = (s2) => s2.domNode?.querySelector(".react-flow__edgelabel-renderer");
 function EdgeLabelRenderer({ children: children2 }) {
-  const edgeLabelRenderer = useStore$1(selector$6);
+  const edgeLabelRenderer = useStore(selector$6);
   return edgeLabelRenderer ? createPortal(children2, edgeLabelRenderer) : null;
 }
 function useInternalNode(id2) {
-  return useStore$1(useCallback((s2) => s2.nodeLookup.get(id2), [id2]), shallow$1);
+  return useStore(useCallback((s2) => s2.nodeLookup.get(id2), [id2]), shallow$1);
 }
 function LinePattern({ dimensions, lineWidth, variant, className }) {
   return jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(["react-flow__background-pattern", variant, className]) });
@@ -15136,7 +15392,7 @@ function BackgroundComponent({
   className,
   patternClassName
 }) {
-  const ref = useRef(null), { transform: transform2, patternId } = useStore$1(selector$3, shallow$1), patternSize = size2 || 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(offset2) ? offset2 : [offset2, offset2], patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap, scaledOffset = [
+  const ref = useRef(null), { transform: transform2, patternId } = useStore(selector$3, shallow$1), patternSize = size2 || 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(offset2) ? offset2 : [offset2, offset2], 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 || ""}`;
@@ -15170,10 +15426,11 @@ function ControlButton({ children: children2, className, ...rest }) {
 const selector$2 = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   minZoomReached: s2.transform[2] <= s2.minZoom,
-  maxZoomReached: s2.transform[2] >= s2.maxZoom
+  maxZoomReached: s2.transform[2] >= s2.maxZoom,
+  ariaLabelConfig: s2.ariaLabelConfig
 });
-function ControlsComponent({ style: style2, showZoom = !0, showFitView = !0, showInteractive = !0, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children: children2, position = "bottom-left", orientation = "vertical", "aria-label": ariaLabel = "React Flow controls" }) {
-  const store = useStoreApi(), { isInteractive, minZoomReached, maxZoomReached } = useStore$1(selector$2, shallow$1), { zoomIn, zoomOut, fitView } = useReactFlow(), onZoomInHandler = () => {
+function ControlsComponent({ style: style2, showZoom = !0, showFitView = !0, showInteractive = !0, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children: children2, position = "bottom-left", orientation = "vertical", "aria-label": ariaLabel }) {
+  const store = useStoreApi(), { isInteractive, minZoomReached, maxZoomReached, ariaLabelConfig } = useStore(selector$2, shallow$1), { zoomIn, zoomOut, fitView } = useReactFlow(), onZoomInHandler = () => {
     zoomIn(), onZoomIn?.();
   }, onZoomOutHandler = () => {
     zoomOut(), onZoomOut?.();
@@ -15186,7 +15443,7 @@ function ControlsComponent({ style: style2, showZoom = !0, showFitView = !0, sho
       elementsSelectable: !isInteractive
     }), onInteractiveChange?.(!isInteractive);
   };
-  return jsxs(Panel, { className: cc(["react-flow__controls", orientation === "horizontal" ? "horizontal" : "vertical", className]), position, style: style2, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && jsxs(Fragment$1, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] }), showFitView && jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) }), showInteractive && jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) }), children2] });
+  return jsxs(Panel, { className: cc(["react-flow__controls", orientation === "horizontal" ? "horizontal" : "vertical", className]), position, style: style2, "data-testid": "rf__controls", "aria-label": ariaLabel ?? ariaLabelConfig["controls.ariaLabel"], children: [showZoom && jsxs(Fragment$1, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: ariaLabelConfig["controls.zoomIn.ariaLabel"], "aria-label": ariaLabelConfig["controls.zoomIn.ariaLabel"], disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: ariaLabelConfig["controls.zoomOut.ariaLabel"], "aria-label": ariaLabelConfig["controls.zoomOut.ariaLabel"], disabled: minZoomReached, children: jsx(MinusIcon, {}) })] }), showFitView && jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: ariaLabelConfig["controls.fitView.ariaLabel"], "aria-label": ariaLabelConfig["controls.fitView.ariaLabel"], children: jsx(FitViewIcon, {}) }), showInteractive && jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: ariaLabelConfig["controls.interactive.ariaLabel"], "aria-label": ariaLabelConfig["controls.interactive.ariaLabel"], children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) }), children2] });
 }
 ControlsComponent.displayName = "Controls";
 memo$1(ControlsComponent);
@@ -15212,7 +15469,7 @@ function MiniMapNodes({
   nodeComponent: NodeComponent = MiniMapNode,
   onClick
 }) {
-  const nodeIds = useStore$1(selectorNodeIds, shallow$1), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
+  const nodeIds = useStore(selectorNodeIds, shallow$1), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
   return jsx(Fragment$1, { children: nodeIds.map((nodeId) => (
     /*
      * The split of responsibilities between MiniMapNodes and
@@ -15225,7 +15482,7 @@ function MiniMapNodes({
   )) });
 }
 function NodeComponentWrapperInner({ id: id2, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick }) {
-  const { node, x, y: y2, width, height } = useStore$1((s2) => {
+  const { node, x, y: y2, width, height } = useStore((s2) => {
     const { internals } = s2.nodeLookup.get(id2), node2 = internals.userNode, { x: x2, y: y22 } = internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions(node2);
     return {
       node: node2,
@@ -15253,7 +15510,8 @@ const defaultWidth = 200, defaultHeight = 150, filterHidden = (node) => !node.hi
     panZoom: s2.panZoom,
     translateExtent: s2.translateExtent,
     flowWidth: s2.width,
-    flowHeight: s2.height
+    flowHeight: s2.height,
+    ariaLabelConfig: s2.ariaLabelConfig
   };
 }, ARIA_LABEL_KEY = "react-flow__minimap-desc";
 function MiniMapComponent({
@@ -15278,12 +15536,12 @@ function MiniMapComponent({
   onNodeClick,
   pannable = !1,
   zoomable = !1,
-  ariaLabel = "React Flow mini map",
+  ariaLabel,
   inversePan,
-  zoomStep = 10,
+  zoomStep = 1,
   offsetScale = 5
 }) {
-  const store = useStoreApi(), svg = useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore$1(selector$1, shallow$1), elementWidth = style2?.width ?? defaultWidth, elementHeight = style2?.height ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset2 = offsetScale * viewScale, x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset2, y2 = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset2, width = viewWidth + offset2 * 2, height = viewHeight + offset2 * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = useRef(0), minimapInstance = useRef();
+  const store = useStoreApi(), svg = useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, ariaLabelConfig } = useStore(selector$1, shallow$1), elementWidth = style2?.width ?? defaultWidth, elementHeight = style2?.height ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset2 = offsetScale * viewScale, x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset2, y2 = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset2, width = viewWidth + offset2 * 2, height = viewHeight + offset2 * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = useRef(0), minimapInstance = useRef();
   viewScaleRef.current = viewScale, useEffect(() => {
     if (svg.current && panZoom)
       return minimapInstance.current = XYMinimap({
@@ -15311,7 +15569,7 @@ function MiniMapComponent({
   } : void 0, onSvgNodeClick = onNodeClick ? useCallback((event, nodeId) => {
     const node = store.getState().nodeLookup.get(nodeId).internals.userNode;
     onNodeClick(event, node);
-  }, []) : void 0;
+  }, []) : void 0, _ariaLabel = ariaLabel ?? ariaLabelConfig["minimap.ariaLabel"];
   return jsx(Panel, { position, style: {
     ...style2,
     "--xy-minimap-background-color-props": typeof bgColor == "string" ? bgColor : void 0,
@@ -15321,13 +15579,17 @@ function MiniMapComponent({
     "--xy-minimap-node-background-color-props": typeof nodeColor == "string" ? nodeColor : void 0,
     "--xy-minimap-node-stroke-color-props": typeof nodeStrokeColor == "string" ? nodeStrokeColor : void 0,
     "--xy-minimap-node-stroke-width-props": typeof nodeStrokeWidth == "number" ? nodeStrokeWidth : void 0
-  }, className: cc(["react-flow__minimap", className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y2} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor, nodeStrokeColor, nodeBorderRadius, nodeClassName, nodeStrokeWidth, nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset2},${y2 - offset2}h${width + offset2 * 2}v${height + offset2 * 2}h${-width - offset2 * 2}z
+  }, className: cc(["react-flow__minimap", className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y2} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [_ariaLabel && jsx("title", { id: labelledBy, children: _ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor, nodeStrokeColor, nodeBorderRadius, nodeClassName, nodeStrokeWidth, nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset2},${y2 - offset2}h${width + offset2 * 2}v${height + offset2 * 2}h${-width - offset2 * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", pointerEvents: "none" })] }) });
 }
 MiniMapComponent.displayName = "MiniMap";
 memo$1(MiniMapComponent);
-function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style: style2 = {}, children: children2, color: color2, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = !1, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd }) {
-  const contextNodeId = useNodeId(), id2 = typeof nodeId == "string" ? nodeId : contextNodeId, store = useStoreApi(), resizeControlRef = useRef(null), defaultPosition = variant === ResizeControlVariant.Line ? "right" : "bottom-right", controlPosition = position ?? defaultPosition, resizer = useRef(null);
+const scaleSelector = (calculateScale) => (store) => calculateScale ? `${Math.max(1 / store.transform[2], 1)}` : void 0, defaultPositions = {
+  [ResizeControlVariant.Line]: "right",
+  [ResizeControlVariant.Handle]: "bottom-right"
+};
+function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style: style2 = void 0, children: children2, color: color2, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = !1, resizeDirection, autoScale = !0, shouldResize, onResizeStart, onResize, onResizeEnd }) {
+  const contextNodeId = useNodeId(), id2 = typeof nodeId == "string" ? nodeId : contextNodeId, store = useStoreApi(), resizeControlRef = useRef(null), isHandleControl = variant === ResizeControlVariant.Handle, scale2 = useStore(useCallback(scaleSelector(isHandleControl && autoScale), [isHandleControl, autoScale]), shallow$1), resizer = useRef(null), controlPosition = position ?? defaultPositions[variant];
   useEffect(() => {
     if (!(!resizeControlRef.current || !id2))
       return resizer.current || (resizer.current = XYResizer({
@@ -15432,13 +15694,17 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
     onResizeEnd,
     shouldResize
   ]);
-  const positionClassNames = controlPosition.split("-"), colorStyleProp = variant === ResizeControlVariant.Line ? "borderColor" : "backgroundColor", controlStyle = color2 ? { ...style2, [colorStyleProp]: color2 } : style2;
-  return jsx("div", { className: cc(["react-flow__resize-control", "nodrag", ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children2 });
+  const positionClassNames = controlPosition.split("-");
+  return jsx("div", { className: cc(["react-flow__resize-control", "nodrag", ...positionClassNames, variant, className]), ref: resizeControlRef, style: {
+    ...style2,
+    scale: scale2,
+    ...color2 && { [isHandleControl ? "backgroundColor" : "borderColor"]: color2 }
+  }, children: children2 });
 }
 memo$1(ResizeControl);
 const selector = (state) => state.domNode?.querySelector(".react-flow__renderer");
 function NodeToolbarPortal({ children: children2 }) {
-  const wrapperRef = useStore$1(selector);
+  const wrapperRef = useStore(selector);
   return wrapperRef ? createPortal(children2, wrapperRef) : null;
 }
 const nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x || a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y || a?.measured.width !== b?.measured.width || a?.measured.height !== b?.measured.height || a?.selected !== b?.selected || a?.internals.z !== b?.internals.z, nodesEqualityFn = (a, b) => {
@@ -15458,7 +15724,7 @@ function NodeToolbar({ nodeId, children: children2, className, style: style2, is
   const contextNodeId = useNodeId(), nodesSelector2 = useCallback((state) => (Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""]).reduce((res, id2) => {
     const node = state.nodeLookup.get(id2);
     return node && res.set(node.id, node), res;
-  }, /* @__PURE__ */ new Map()), [nodeId, contextNodeId]), nodes = useStore$1(nodesSelector2, nodesEqualityFn), { x, y: y2, zoom: zoom2, selectedNodesCount } = useStore$1(storeSelector, shallow$1);
+  }, /* @__PURE__ */ new Map()), [nodeId, contextNodeId]), nodes = useStore(nodesSelector2, nodesEqualityFn), { x, y: y2, zoom: zoom2, selectedNodesCount } = useStore(storeSelector, shallow$1);
   if (!(typeof isVisible == "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value?.selected && selectedNodesCount === 1) || !nodes.size)
     return null;
   const nodeRect = getInternalNodesBounds(nodes), nodesArray = Array.from(nodes.values()), zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1)), wrapperStyle2 = {
@@ -15662,11 +15928,11 @@ function createIsCircular(areItemsEqual) {
     return cache.delete(a), cache.delete(b), result;
   };
 }
-function getStrictProperties(object) {
-  return getOwnPropertyNames(object).concat(getOwnPropertySymbols(object));
+function getStrictProperties(object2) {
+  return getOwnPropertyNames(object2).concat(getOwnPropertySymbols(object2));
 }
-var hasOwn = Object.hasOwn || function(object, property) {
-  return hasOwnProperty.call(object, property);
+var hasOwn = Object.hasOwn || function(object2, property) {
+  return hasOwnProperty.call(object2, property);
 };
 function sameValueZeroEqual(a, b) {
   return a === b || !a && !b && a !== a && b !== b;
@@ -16169,21 +16435,6 @@ let atom = (initialValue) => {
   };
   return $atom;
 };
-function listenKeys($store, keys2, listener) {
-  let keysSet = new Set(keys2).add(void 0);
-  return $store.listen((value, oldValue, changed) => {
-    keysSet.has(changed) && listener(value, oldValue, changed);
-  });
-}
-let emit = (snapshotRef, onChange) => (value) => {
-  snapshotRef.current !== value && (snapshotRef.current = value, onChange());
-};
-function useStore(store, { keys: keys2, deps = [store, keys2] } = {}) {
-  let snapshotRef = useRef();
-  snapshotRef.current = store.get();
-  let subscribe = useCallback((onChange) => (emit(snapshotRef, onChange)(store.value), keys2?.length > 0 ? listenKeys(store, keys2, emit(snapshotRef, onChange)) : store.listen(emit(snapshotRef, onChange))), deps), get2 = () => snapshotRef.current;
-  return useSyncExternalStore(subscribe, get2, get2);
-}
 const ReduceGraphicsModeCtx = createContext(null);
 function useIsReducedGraphics() {
   const isReduced = useContext(ReduceGraphicsModeCtx);
@@ -16196,9 +16447,6 @@ function ReduceGraphicsContext({ reduceGraphics, children: children2 }) {
   const $isPanningRef = useRef(null);
   return $isPanningRef.current || ($isPanningRef.current = atom(reduceGraphics)), /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: children2 }) });
 }
-function useIsPanning() {
-  return useStore(usePanningAtom());
-}
 const LikeC4ModelContext = createContext(null), CurrentViewModelContext = createContext(null);
 function EnsureCurrentViewModel({ children: children2 }) {
   return useContext(CurrentViewModelContext) ? /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) : null;
@@ -16288,7 +16536,7 @@ function RootContainer({
 }) {
   const id2 = useId$1(), ref = useRef(null), $isPanning = usePanningAtom();
   return useEffect(() => $isPanning.listen((isPanning) => {
-    isPanning ? ref.current?.setAttribute("data-likec4-diagram-panning", "true") : ref.current?.removeAttribute("data-likec4-diagram-panning");
+    ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
   }), [$isPanning]), /* @__PURE__ */ jsx(
     Box,
     {
@@ -16327,18 +16575,29 @@ function useUpdateEffect(callback, deps, equalityFn, effectHook) {
 }
 const useXYFlow = useReactFlow;
 function useXYStore(selector2, equalityFn) {
-  return useStore$1(
+  return useStore(
     useCallbackRef(selector2),
     equalityFn ?? shallowEqual
   );
 }
 const useXYStoreApi = useStoreApi, useXYInternalNode = useInternalNode, selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
 function useCurrentZoom() {
-  return useStore$1(selectCurrentZoom);
+  return useStore(selectCurrentZoom);
 }
 const selectZoom = (state) => state.transform[2] < 0.2;
 function useIsZoomTooSmall() {
-  return useStore$1(selectZoom);
+  return useStore(selectZoom);
+}
+function getDevicePixelRatio() {
+  const dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : 1;
+  return u(Math.floor(dpr), {
+    min: 1,
+    max: 4
+  });
+}
+let knownDpr;
+function roundDpr(v) {
+  return knownDpr ??= getDevicePixelRatio(), knownDpr < 2 ? Math.round(v) : Math.round(v * knownDpr) / knownDpr;
 }
 const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
 function crt(v) {
@@ -17273,9 +17532,6 @@ class Bezier {
     return circles;
   }
 }
-function toDomPrecision(v) {
-  return v === null ? 0.01 : Math.round(v * 100) / 100;
-}
 function bezierControlPoints(diagramEdge) {
   let [start2, ...bezierPoints] = diagramEdge.points;
   invariant(start2, "start should be defined");
@@ -17684,7 +17940,11 @@ class Actor {
           return;
         const allListeners = [...listeners ? listeners.values() : [], ...wildcardListener ? wildcardListener.values() : []];
         for (const handler of allListeners)
-          handler(emittedEvent);
+          try {
+            handler(emittedEvent);
+          } catch (err) {
+            reportUnhandledError(err);
+          }
       },
       actionExecutor: (action) => {
         const exec = () => {
@@ -19199,6 +19459,7 @@ function useDiagram() {
      * @warning Do not use in render phase
      */
     findDiagramNode: (xynodeId) => findDiagramNode(actor.getSnapshot().context, xynodeId),
+    findEdge: (xyedgeId) => actor.getSnapshot().context.xyedges.find((e2) => e2.data.id === xyedgeId) ?? null,
     /**
      * @warning Do not use in render phase
      */
@@ -19234,6 +19495,17 @@ function useDiagramContext(selector2, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef(), select2 = useCallback((s2) => selector2(s2.context), deps ?? []);
   return useSelector(actorRef, select2, compare);
 }
+function useOnDiagramEvent(event, callback) {
+  const actorRef = useDiagramActorRef(), callbackRef = useRef(callback);
+  callbackRef.current = callback, useEffect(() => {
+    const subscription = actorRef.on(event, (event2) => {
+      callbackRef.current(event2);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [actorRef]);
+}
 const createRecipe = (name, defaultVariants, compoundVariants) => {
   const getVariantProps2 = (variants) => ({
     [name]: "__ignore__",
@@ -19307,6 +19579,35 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     return splitProps(props, actionBtnVariantKeys);
   },
   getVariantProps: actionBtnFn.getVariantProps
+}), compoundNodeFn = /* @__PURE__ */ createRecipe("likec4-compound-node", {}, []), compoundNodeVariantMap = {
+  isTransparent: [
+    "false",
+    "true"
+  ],
+  inverseColor: [
+    "true",
+    "false"
+  ],
+  borderStyle: [
+    "solid",
+    "dashed",
+    "dotted",
+    "none"
+  ]
+}, compoundNodeVariantKeys = Object.keys(compoundNodeVariantMap), compoundNode = /* @__PURE__ */ Object.assign(memo(compoundNodeFn.recipeFn), {
+  __recipe__: !0,
+  __name__: "compoundNode",
+  __getCompoundVariantCss__: compoundNodeFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: compoundNodeVariantKeys,
+  variantMap: compoundNodeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps(props, compoundNodeVariantKeys);
+  },
+  getVariantProps: compoundNodeFn.getVariantProps
 }), elementNodeIconFn = /* @__PURE__ */ createRecipe("likec4-element-node-icon", {}, []), elementNodeIconVariantMap = {}, elementNodeIconVariantKeys = Object.keys(elementNodeIconVariantMap), elementNodeIcon = /* @__PURE__ */ Object.assign(memo(elementNodeIconFn.recipeFn), {
   __recipe__: !0,
   __name__: "elementNodeIcon",
@@ -19321,6 +19622,25 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     return splitProps(props, elementNodeIconVariantKeys);
   },
   getVariantProps: elementNodeIconFn.getVariantProps
+}), elementShapeRecipeFn = /* @__PURE__ */ createRecipe("likec4-element-shape", {}, []), elementShapeRecipeVariantMap = {
+  shapetype: [
+    "html",
+    "svg"
+  ]
+}, elementShapeRecipeVariantKeys = Object.keys(elementShapeRecipeVariantMap), elementShapeRecipe = /* @__PURE__ */ Object.assign(memo(elementShapeRecipeFn.recipeFn), {
+  __recipe__: !0,
+  __name__: "elementShapeRecipe",
+  __getCompoundVariantCss__: elementShapeRecipeFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: elementShapeRecipeVariantKeys,
+  variantMap: elementShapeRecipeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps(props, elementShapeRecipeVariantKeys);
+  },
+  getVariantProps: elementShapeRecipeFn.getVariantProps
 }), likec4tagFn = /* @__PURE__ */ createRecipe("likec4-tag", {
   autoTextColor: !1
 }, []), likec4tagVariantMap = {
@@ -19433,19 +19753,7 @@ function createMinimalMotionComponent(Component, options) {
 }
 const MotionButton = /* @__PURE__ */ createMinimalMotionComponent("button"), MotionDiv = /* @__PURE__ */ createMinimalMotionComponent("div"), MotionSpan = /* @__PURE__ */ createMinimalMotionComponent("span"), compoundActionBtn = cva({
   base: {
-    transitionDuration: "normal",
-    "[data-compound-title-inverse] &": {
-      _dark: {
-        "--actionbtn-color": "color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))"
-      },
-      _light: {
-        "--actionbtn-color": "var(--likec4-palette-stroke)",
-        "--actionbtn-color-hovered": "var(--likec4-palette-stroke)",
-        "--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
-        "--actionbtn-bg-hovered": "var(--likec4-palette-fill)/50",
-        "--actionbtn-bg-hovered-btn": "var(--likec4-palette-fill)"
-      }
-    }
+    transitionDuration: "normal"
   },
   variants: {
     delay: {
@@ -19468,49 +19776,35 @@ function CompoundActionButton({
 }) {
   const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
   return /* @__PURE__ */ jsx(
-    Box,
+    MotionDiv,
     {
-      className: cx(
-        css({
-          position: "absolute",
-          top: "[5px]",
-          left: "[4px]",
-          _smallZoom: {
-            display: "none"
-          }
-        }),
-        "compound-action"
-      ),
+      initial: !1,
+      animate: {
+        scale: isHoverDebounced ? 1.2 : 1,
+        x: isHoverDebounced ? -1 : 0,
+        y: isHoverDebounced ? -1 : 0
+      },
+      whileHover: {
+        scale: 1.4,
+        x: -3,
+        y: -1
+      },
+      className: "likec4-compound-navigation compound-action",
+      whileTap: { scale: 1 },
+      onClick: stopPropagation,
       children: /* @__PURE__ */ jsx(
-        MotionDiv,
+        ActionIcon,
         {
-          initial: !1,
-          animate: {
-            scale: isHoverDebounced ? 1.2 : 1,
-            x: isHoverDebounced ? -1 : 0,
-            y: isHoverDebounced ? -1 : 0
-          },
-          whileHover: {
-            scale: 1.4,
-            x: -2,
-            y: -2
-          },
-          whileTap: { scale: 1 },
-          children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              className: cx(
-                "nodrag nopan",
-                compoundActionBtn({
-                  delay: isHovered && !isHoverDebounced
-                }),
-                actionBtn()
-              ),
-              onClick,
-              onDoubleClick: stopPropagation,
-              children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
-            }
-          )
+          className: cx(
+            "nodrag nopan",
+            compoundActionBtn({
+              delay: isHovered && !isHoverDebounced
+            }),
+            actionBtn({ variant: "transparent" })
+          ),
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconZoomScan, { stroke: 2 })
         }
       )
     }
@@ -19525,180 +19819,36 @@ function CompoundDetailsButton({
 }) {
   const isHoverDebounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)[0] && isHovered;
   return /* @__PURE__ */ jsx(
-    Box,
+    MotionDiv,
     {
-      className: cx(
-        css({
-          position: "absolute",
-          top: "0.5",
-          right: "0.5",
-          _smallZoom: {
-            display: "none"
-          }
-        }),
-        "details-button"
-      ),
-      onClick: stopPropagation,
+      initial: !1,
+      animate: {
+        scale: isHoverDebounced ? 1.2 : 1
+        // opacity: isHoverDebounced ? 1 : 0.6,
+      },
+      whileHover: {
+        scale: 1.4
+      },
+      whileTap: { scale: 1 },
+      className: "likec4-compound-details details-button",
       children: /* @__PURE__ */ jsx(
-        MotionDiv,
+        ActionIcon,
         {
-          initial: !1,
-          animate: {
-            scale: isHoverDebounced ? 1.2 : 1,
-            opacity: isHoverDebounced ? 1 : 0.6
-          },
-          whileHover: {
-            scale: 1.4
-          },
-          whileTap: { scale: 1 },
-          children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              className: cx(
-                "nodrag nopan",
-                compoundActionBtn({
-                  delay: isHovered && !isHoverDebounced
-                }),
-                css({
-                  _whenHovered: {
-                    opacity: 0.75
-                  },
-                  _hover: {
-                    opacity: 1
-                  }
-                }),
-                actionBtn({ variant: "transparent" })
-              ),
-              onClick,
-              onDoubleClick: stopPropagation,
-              children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-            }
-          )
+          className: cx(
+            "nodrag nopan",
+            compoundActionBtn({
+              delay: isHovered && !isHoverDebounced
+            }),
+            actionBtn({ variant: "transparent" })
+          ),
+          onClick,
+          onDoubleClick: stopPropagation,
+          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
         }
       )
     }
   );
 }
-const borderWidth = {
-  var: "--_border-width",
-  ref: "var(--_border-width, 2px)"
-}, borderRadius$1 = {
-  var: "--_border-radius",
-  ref: "var(--_border-radius, 4px)"
-}, compoundOpacity = {
-  var: "--_compound-opacity",
-  ref: "var(--_compound-opacity, 1)"
-}, borderOpacityPercent = {
-  var: "--_border-opacity-percent",
-  ref: "var(--_border-opacity-percent, 100%)"
-}, root = css.raw({
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  padding: "0",
-  margin: "0",
-  border: "transparent",
-  pointerEvents: "none",
-  _before: {
-    borderRadius: borderRadius$1.ref,
-    content: '" "',
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    border: "transparent",
-    background: "var(--likec4-palette-fill)",
-    backgroundClip: "padding-box",
-    transitionDelay: ".075ms"
-  },
-  _noReduceGraphics: {
-    _before: {
-      transition: "all {durations.slow} {easings.inOut}"
-    },
-    "&[data-likec4-hovered='true']": {
-      _before: {
-        transitionDelay: ".2s",
-        transitionTimingFunction: "in"
-      }
-    }
-  },
-  "&:is([data-compound-transparent])": {
-    _before: {
-      opacity: compoundOpacity.ref,
-      borderWidth: `calc(${borderWidth.ref} - 1px)`
-    }
-  }
-}), compoundBorder = css.raw({
-  borderRadius: borderRadius$1.ref,
-  padding: "0",
-  margin: "0",
-  transition: "all 250ms {easings.inOut}",
-  cursor: "default",
-  position: "absolute",
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  background: "transparent",
-  borderStyle: "dashed",
-  borderWidth: `[${borderWidth.ref}]`,
-  borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderOpacityPercent.ref}, transparent)]`
-}), indicatorSvg = css.raw({
-  position: "absolute",
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  overflow: "visible",
-  visibility: "hidden",
-  _whenFocused: {
-    visibility: "visible"
-  },
-  _whenSelected: {
-    visibility: "visible"
-  },
-  _whenPanning: {
-    display: "none"
-  }
-}), indicatorRect = css.raw({
-  stroke: "[color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))]",
-  strokeWidth: "4",
-  fill: "[none]",
-  animationStyle: "indicator",
-  _light: {
-    stroke: "[color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))]"
-  }
-}), compound = sva({
-  slots: ["root", "compoundBorder", "indicatorSvg", "indicatorRect"],
-  className: "compound-container",
-  base: {
-    root,
-    compoundBorder,
-    indicatorSvg,
-    indicatorRect
-  },
-  variants: {
-    isTransparent: {
-      false: {
-        root: {
-          _before: {
-            boxShadow: {
-              _noReduceGraphics: "0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)",
-              _whenSelected: "none",
-              _whenPanning: "none !important"
-            }
-          }
-        }
-      },
-      true: {
-        root: {}
-      }
-    }
-  }
-});
 function CompoundNodeContainer({
   nodeProps: {
     selected: isSelected = !1,
@@ -19713,136 +19863,46 @@ function CompoundNodeContainer({
   style: style2,
   ...rest
 }) {
-  const isReducedGraphics = useIsReducedGraphics(), isTransparent = e(data.style.opacity) && data.style.opacity < 99;
-  let opacity = u((data.style.opacity ?? 100) / 100, {
+  let opacity = u(data.style.opacity ?? 100, {
     min: 0,
-    max: 1
+    max: 100
   });
-  isTransparent && isHovered && !isReducedGraphics && (opacity = Math.min(opacity + 0.08, 1));
-  const MIN_OPACITY = 65, borderOpacity = MIN_OPACITY + u((100 - MIN_OPACITY) * opacity, {
+  const isTransparent = opacity < 99, MIN_OPACITY = 65, borderOpacity = MIN_OPACITY + u((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY
-  }), classes2 = compound({
-    isTransparent
+  }), compoundClass = compoundNode({
+    isTransparent,
+    inverseColor: opacity < 60,
+    borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
   }), depth = u(data.depth ?? 1, {
     min: 1,
     max: 5
   });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     m.div,
     {
       className: cx(
-        classes2.root,
-        "likec4-compound-node",
+        compoundClass,
         className
       ),
       initial: !1,
       "data-likec4-hovered": isHovered,
       "data-likec4-color": data.color,
       "data-compound-depth": depth,
-      ...isTransparent && {
-        "data-compound-transparent": !0,
-        "data-compound-title-inverse": opacity < 0.5
-      },
       ...isDimmed !== !1 && {
         "data-likec4-dimmed": isDimmed
       },
       style: {
         ...style2,
         // @ts-expect-error
-        [compoundOpacity.var]: opacity,
-        [borderWidth.var]: "3px",
-        [borderRadius$1.var]: "6px",
-        [borderOpacityPercent.var]: `${borderOpacity}%`
+        "--_border-transparency": `${borderOpacity}%`,
+        "--_compound-transparency": `${opacity}%`
       },
       ...rest,
-      children: [
-        isTransparent && data.style.border !== "none" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classes2.compoundBorder,
-            style: {
-              borderStyle: data.style.border ?? "dashed"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("svg", { className: classes2.indicatorSvg, children: /* @__PURE__ */ jsx(
-          "rect",
-          {
-            className: classes2.indicatorRect,
-            x: 0,
-            y: 0,
-            width: "100%",
-            height: "100%",
-            rx: 6
-          }
-        ) }),
-        children2
-      ]
+      children: children2
     }
   );
 }
-const titleContainer = css({
-  position: "absolute",
-  display: "flex",
-  alignItems: "center",
-  gap: "1.5",
-  // 6px
-  left: "[14px]",
-  top: "[4px]",
-  right: "[30px]",
-  width: "auto",
-  minHeight: "30px",
-  ":where(.react-flow__node.draggable) &": {
-    pointerEvents: "all",
-    cursor: "grab"
-  },
-  ".likec4-compound-node:has(.compound-action) &": {
-    paddingLeft: "[22px]"
-  }
-}), titleText = css({
-  flex: "1",
-  fontFamily: "likec4.compound",
-  fontWeight: 600,
-  fontSize: "15px",
-  textTransform: "uppercase",
-  letterSpacing: "0.2px",
-  color: "var(--likec4-palette-loContrast)",
-  "[data-compound-title-inverse] &": {
-    color: {
-      base: "[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]",
-      _light: "var(--likec4-palette-stroke)"
-    }
-  }
-}), iconSize = "20px", cssIcon = css({
-  flex: `0 0 ${iconSize}`,
-  height: `${iconSize}`,
-  width: `${iconSize}`,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  mixBlendMode: {
-    base: "hard-light",
-    _reduceGraphicsOnPan: "normal"
-  },
-  "& svg, & img": {
-    width: "100%",
-    height: "auto",
-    maxHeight: "100%",
-    pointerEvents: "none",
-    filter: {
-      base: [
-        "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-        "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-        "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-      ],
-      _reduceGraphicsOnPan: "none"
-    }
-  },
-  "& img": {
-    objectFit: "contain"
-  }
-});
 function CompoundTitle({ id: id2, data }) {
   const elementIcon = IconRenderer({
     element: {
@@ -19850,35 +19910,21 @@ function CompoundTitle({ id: id2, data }) {
       title: data.title,
       icon: data.icon
     },
-    className: cssIcon
+    className: "likec4-compound-icon"
   });
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: cx(
-        titleContainer,
-        "likec4-compound-title"
-      ),
-      children: [
-        elementIcon,
-        /* @__PURE__ */ jsx(Text, { className: titleText, truncate: "end", children: data.title })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "likec4-compound-title-container", children: [
+    elementIcon,
+    /* @__PURE__ */ jsx(Text, { component: "h3", className: "likec4-compound-title", truncate: "end", children: data.title })
+  ] });
+}
+function nodePropsEqual(prev, next) {
+  return prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 }
-const style = {
-  top: "50%",
-  left: "50%",
-  visibility: "hidden"
-}, DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
-] }), nodePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(prev.data, next.data);
 function customNode(Node2) {
-  const NodeComponent = memo$1((props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(Node2, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] }), nodePropsEqual);
+  const NodeComponent = memo$1(
+    Node2,
+    (prev, next) => nodePropsEqual(prev, next)
+  );
   return NodeComponent.displayName = "Node", NodeComponent;
 }
 const container$2 = css({
@@ -20127,107 +20173,8 @@ const ElementNodeContainer = forwardRef(({
   );
 });
 ElementNodeContainer.displayName = "ElementNodeContainer";
-const indicator = css({
-  _smallZoom: {
-    visibility: "hidden"
-  },
-  stroke: "var(--likec4-palette-loContrast)",
-  fill: "[none]",
-  strokeWidth: 8,
-  strokeOpacity: 0.8,
-  visibility: "hidden",
-  pointerEvents: "none",
-  _light: {
-    stroke: "[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]"
-  },
-  _whenFocused: {
-    visibility: "visible"
-  },
-  _groupFocusVisible: {
-    visibility: "visible"
-  },
-  _whenSelected: {
-    animationStyle: "indicator",
-    visibility: "visible"
-  }
-}), fillElementFill = css({
-  fill: "var(--likec4-palette-fill)"
-});
-css({
-  fill: "var(--likec4-palette-stroke)"
-});
-const fillMixStroke = css({
-  fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]",
-  ".shape-svg-multiple &": {
-    fill: "var(--likec4-palette-fill)"
-  }
-}), shapeBase = css.raw({
-  top: "0",
-  left: "0",
-  position: "absolute",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  fill: "var(--likec4-palette-fill)",
-  stroke: "var(--likec4-palette-stroke)",
-  overflow: "visible"
-  // zIndex is removed to improve rendering performance
-  // this forces to keep shape in the same layer as the node
-  // zIndex: -1,
-}), shapeSvgMultiple = cx(
-  "shape-svg-multiple",
-  css(shapeBase, {
-    transformOrigin: {
-      base: "50% 50%",
-      _shapeQueue: "75% 25%",
-      _shapeCylinder: "50% 100%",
-      _shapeStorage: "50% 100%"
-    },
-    transform: "translate(14px, 14px) perspective(300px) translateZ(-8px)",
-    filter: "brightness(0.65) saturate(0.8)",
-    stroke: "[none]",
-    display: {
-      _smallZoom: "none",
-      _reduceGraphicsOnPan: "none",
-      _whenSelected: "none",
-      _whenFocused: "none"
-    }
-  })
-), shapeSvg = css(shapeBase, {
-  transition: "fill 120ms linear, filter 130ms {easings.inOut}",
-  transitionDelay: "0ms",
-  filter: `
-      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
-      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
-    `,
-  _whenHovered: {
-    filter: `
-        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
-        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
-        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-        `
-  },
-  ":where([data-likec4-level='true']) &": {
-    filter: `
-        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
-        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
-        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-        `
-  },
-  _whenSelected: {
-    filter: "none"
-  },
-  _smallZoom: {
-    filter: "none"
-  },
-  _whenPanning: {
-    transition: "none",
-    filter: "none"
-  }
-});
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
-  const radius = Math.round(diameter / 2), rx = radius, ry = toDomPrecision(tilt * radius), tiltAdjustedHeight = height - 2 * ry;
+  const radius = Math.round(diameter / 2), rx = radius, ry = roundDpr(tilt * radius), tiltAdjustedHeight = height - 2 * ry;
   return {
     path: `  M ${diameter},${ry}
         a ${rx},${ry} 0,0,0 ${-diameter} 0
@@ -20241,7 +20188,7 @@ function cylinderSVGPath(diameter, height, tilt = 0.065) {
   };
 }
 function queueSVGPath(width, height, tilt = 0.185) {
-  const diameter = height, ry = Math.round(diameter / 2), rx = toDomPrecision(diameter / 2 * tilt), tiltAdjustedWidth = width - 2 * rx;
+  const diameter = height, ry = Math.round(diameter / 2), rx = roundDpr(diameter / 2 * tilt), tiltAdjustedWidth = width - 2 * rx;
   return {
     path: `
     M ${rx},0
@@ -20258,7 +20205,7 @@ const PersonIcon = {
   height: 120,
   path: "M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z"
 };
-function ElementShapeSvg({ shape, w, h }) {
+function ShapeSvg({ shape, w, h }) {
   switch (shape) {
     case "mobile":
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -20268,11 +20215,11 @@ function ElementShapeSvg({ shape, w, h }) {
             width: w,
             height: h,
             rx: 6,
-            className: fillMixStroke,
+            "data-likec4-fill": "mix-stroke",
             strokeWidth: 0
           }
         ),
-        /* @__PURE__ */ jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
+        /* @__PURE__ */ jsxs("g", { "data-likec4-fill": "fill", strokeWidth: 0, children: [
           /* @__PURE__ */ jsx("circle", { cx: 17, cy: h / 2, r: 12 }),
           /* @__PURE__ */ jsx("rect", { x: 33, y: 12, width: w - 44, height: h - 24, rx: 5 })
         ] })
@@ -20285,11 +20232,11 @@ function ElementShapeSvg({ shape, w, h }) {
             width: w,
             height: h,
             rx: 6,
-            className: fillMixStroke,
+            "data-likec4-fill": "mix-stroke",
             strokeWidth: 0
           }
         ),
-        /* @__PURE__ */ jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
+        /* @__PURE__ */ jsxs("g", { "data-likec4-fill": "fill", strokeWidth: 0, children: [
           /* @__PURE__ */ jsx("circle", { cx: 16, cy: 17, r: 7 }),
           /* @__PURE__ */ jsx("circle", { cx: 36, cy: 17, r: 7 }),
           /* @__PURE__ */ jsx("circle", { cx: 56, cy: 17, r: 7 }),
@@ -20316,7 +20263,7 @@ function ElementShapeSvg({ shape, w, h }) {
             width: PersonIcon.width,
             height: PersonIcon.height,
             viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
-            className: fillMixStroke,
+            "data-likec4-fill": "mix-stroke",
             children: /* @__PURE__ */ jsx(
               "path",
               {
@@ -20331,7 +20278,7 @@ function ElementShapeSvg({ shape, w, h }) {
       const { path, rx, ry } = queueSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, className: fillMixStroke, strokeWidth: 2 })
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
     case "storage":
@@ -20339,7 +20286,7 @@ function ElementShapeSvg({ shape, w, h }) {
       const { path, rx, ry } = cylinderSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, className: fillMixStroke, strokeWidth: 2 })
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
     case "rectangle":
@@ -20356,14 +20303,33 @@ function ElementShapeSvg({ shape, w, h }) {
       return nonexhaustive(shape);
   }
 }
+function ShapeHtml({ multiple, withOutLine }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: elementShapeRecipe({
+        shapetype: "html"
+      }),
+      children: [
+        multiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
+        withOutLine && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+      ]
+    }
+  );
+}
 function ElementShape({ data, width, height, withSelectedIndicator = !0 }) {
   let w = width && width > 10 ? width : data.width, h = height && height > 10 ? height : data.height;
   const isMultiple = data.style?.multiple ?? !1;
+  if (data.shape === "rectangle")
+    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: withSelectedIndicator });
+  const className = elementShapeRecipe({
+    shapetype: "svg"
+  });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className: cx(shapeSvgMultiple), viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
-    /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
+    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
+    /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
       withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
-      /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })
+      /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h })
     ] })
   ] });
 }
@@ -20392,10 +20358,10 @@ function SelectedIndicator({ shape, w, h }) {
       break;
     }
   }
-  return /* @__PURE__ */ jsx("g", { className: indicator, children: svg });
+  return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
 const ElementTag = forwardRef(
-  ({ tag, cursor = "default", className, ...props }, ref) => {
+  ({ tag, cursor, className, style: style2, ...props }, ref) => {
     const spec = useTagSpecification(tag);
     return /* @__PURE__ */ jsxs(
       Box,
@@ -20409,7 +20375,10 @@ const ElementTag = forwardRef(
           className
         ),
         ...props,
-        style: { cursor },
+        style: {
+          cursor,
+          ...style2
+        },
         children: [
           /* @__PURE__ */ jsx("span", { children: "#" }),
           /* @__PURE__ */ jsx("span", { children: tag })
@@ -20472,7 +20441,7 @@ const ElementTag = forwardRef(
             "data-likec4-tag": tag,
             className: css({
               layerStyle: "likec4.tag",
-              flex: 1,
+              flex: "1",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -20507,9 +20476,9 @@ const ElementTag = forwardRef(
           ElementTag,
           {
             tag,
+            cursor: "pointer",
             className: css({
               userSelect: "none",
-              cursor: "pointer",
               ...zoomIsLargeEnough && {
                 fontSize: "lg",
                 borderRadius: "[4px]",
@@ -20541,7 +20510,7 @@ const MarkdownBlock = forwardRef(({
 }, ref) => {
   if (value.isEmpty && hideIfEmpty)
     return null;
-  const content = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", style: { userSelect: "none" }, children: emptyText }) };
+  const content = value.nonEmpty ? value.isMarkdown ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx("p", { children: value.text }) } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", style: { userSelect: "none" }, children: emptyText }) };
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -20554,6 +20523,9 @@ const MarkdownBlock = forwardRef(({
         className
       ),
       style: {
+        ...props.fontSize && {
+          "--text-fz": `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`
+        },
         // @ts-expect-error
         "--mantine-scale": textScale
       },
@@ -20562,7 +20534,7 @@ const MarkdownBlock = forwardRef(({
   );
 });
 MarkdownBlock.displayName = "MarkdownBlock";
-function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
+function ElementTitle({ id: id2, data, iconSize }) {
   const elementIcon = IconRenderer({
     element: {
       id: id2,
@@ -20582,9 +20554,9 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
         classes2.root,
         "likec4-element"
       ),
-      style: e(iconSize2) ? {
+      style: e(iconSize) ? {
         // @ts-ignore
-        "--likec4-icon-size": `${iconSize2}px`
+        "--likec4-icon-size": `${iconSize}px`
       } : void 0,
       children: [
         elementIcon,
@@ -20606,7 +20578,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
               children: data.technology
             }
           ),
-          data.description && /* @__PURE__ */ jsx(
+          data.description?.nonEmpty && (data.description.isMarkdown ? /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
               className: cx(classes2.description, "likec4-element-description"),
@@ -20616,22 +20588,28 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
               maxHeight: data.description.isMarkdown ? "8rem" : void 0,
               lineClamp: isSmOrXs ? 3 : 5
             }
-          )
+          ) : /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "div",
+              className: cx(classes2.description, "likec4-element-description"),
+              lineClamp: isSmOrXs ? 3 : 5,
+              children: data.description.text
+            }
+          ))
         ] })
       ]
     }
   );
 }
-function useOptionalCurrentViewModel() {
-  return useContext(CurrentViewModelContext);
-}
-function useCurrentViewModel() {
-  const vm = useContext(CurrentViewModelContext);
-  if (!vm)
-    throw new Error("No LikeC4ViewModel in context found");
-  return vm;
-}
-const CompoundActions = (props) => {
+const style = {
+  top: "50%",
+  left: "50%",
+  visibility: "hidden"
+}, DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
+  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
+] }), CompoundActions = (props) => {
   const { enableNavigateTo } = useEnabledFeatures(), diagram = useDiagram(), { navigateTo } = props.data;
   return navigateTo && enableNavigateTo ? /* @__PURE__ */ jsx(
     CompoundActionButton,
@@ -20981,7 +20959,7 @@ function CompoundElementToolbar(props) {
       style: style2,
       modelFqn
     }
-  } = props, { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
+  } = props, { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props), opacity = style2?.opacity ?? 100;
   return /* @__PURE__ */ jsxs(
     Toolbar,
     {
@@ -20995,7 +20973,7 @@ function CompoundElementToolbar(props) {
             elementColor,
             onColorPreview,
             isOpacityEditable: !0,
-            elementOpacity: style2?.opacity,
+            elementOpacity: opacity,
             onChange,
             position: "left-start"
           }
@@ -21003,7 +20981,7 @@ function CompoundElementToolbar(props) {
         /* @__PURE__ */ jsx(
           BorderStyleOption,
           {
-            elementBorderStyle: style2?.border,
+            elementBorderStyle: style2?.border ?? (opacity < 99 ? "dashed" : "none"),
             onChange
           }
         ),
@@ -21240,7 +21218,7 @@ function CompoundDetailsButtonWithHandler(props) {
     }
   );
 }
-const ElementNode = customNode((props) => {
+const ElementNode = (props) => {
   const { enableElementTags, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -21251,9 +21229,9 @@ const ElementNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 ElementNode.displayName = "ElementNode";
-const DeploymentNode = customNode((props) => {
+const DeploymentNode = (props) => {
   const { enableElementTags, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -21264,9 +21242,9 @@ const DeploymentNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 DeploymentNode.displayName = "DeploymentNode";
-const CompoundElementNode = customNode((props) => {
+const CompoundElementNode = (props) => {
   const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -21275,9 +21253,9 @@ const CompoundElementNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 CompoundElementNode.displayName = "CompoundElementNode";
-const CompoundDeploymentNode = customNode((props) => {
+const CompoundDeploymentNode = (props) => {
   const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -21286,18 +21264,50 @@ const CompoundDeploymentNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 CompoundDeploymentNode.displayName = "CompoundDeploymentNode";
-const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+const ViewGroupNode = (props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
   /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
-] }));
+] });
 ViewGroupNode.displayName = "ViewGroupNode";
+function useOptionalCurrentViewModel() {
+  return useContext(CurrentViewModelContext);
+}
+function useCurrentViewModel() {
+  const vm = useContext(CurrentViewModelContext);
+  if (!vm)
+    throw new Error("No LikeC4ViewModel in context found");
+  return vm;
+}
 const selectViewId = (s2) => s2.context.view.id;
 function useCurrentViewId() {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, selectViewId);
 }
+const LikeC4ProjectsContext = createContext(null), emptyProjects = [];
+function useLikeC4Projects() {
+  const ctx = useContext(LikeC4ProjectsContext);
+  return ctx ? ctx.projects : emptyProjects;
+}
+const emptyOnProjectChange = () => {
+}, emptyContext = {
+  projects: emptyProjects,
+  onProjectChange: emptyOnProjectChange
+};
+function useLikeC4ProjectsContext() {
+  return useContext(LikeC4ProjectsContext) ?? emptyContext;
+}
+function useHasProjects() {
+  const ctx = useContext(LikeC4ProjectsContext);
+  return ctx ? ctx.projects.length > 1 : !1;
+}
+function useLikeC4ProjectId() {
+  const ctx = useContext(LikeC4ModelContext);
+  if (!ctx)
+    throw new Error("No LikeC4ModelContext found");
+  return ctx.projectId;
+}
 const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_level", offset = "--_offset", inset = "--_inset", borderRadius = "--_border-radius", dialog = css.raw({
   boxSizing: "border-box",
   margin: "0",
@@ -21538,7 +21548,7 @@ export {
   clsx as L,
   MantineContext as M,
   getThemeColor as N,
-  isElement$1 as O,
+  isElement$2 as O,
   Popover as P,
   getRefProp as Q,
   useUncontrolled as R,
@@ -21617,7 +21627,7 @@ export {
   loadExternalIsValidProp as ay,
   isMotionValue as az,
   useMantineTheme as b,
-  n$1 as b$,
+  Box as b$,
   css as b0,
   getPatternStyles as b1,
   patternFns as b2,
@@ -21654,11 +21664,11 @@ export {
   deepEqual as bX,
   ActionIcon as bY,
   IconZoomScan as bZ,
-  Box as b_,
+  MotionDiv as b_,
   stopPropagation as ba,
   cx as bb,
-  cva as bc,
-  useStore$1 as bd,
+  roundDpr as bc,
+  useStore as bd,
   useUpdateEffect as be,
   XSTATE_STOP as bf,
   cloneMachineSnapshot as bg,
@@ -21682,161 +21692,171 @@ export {
   getPersistedSnapshot as by,
   $$ACTOR_TYPE as bz,
   useMantineStyleNonce as c,
-  useCurrentViewModel as c$,
-  EdgeLabelRenderer as c0,
-  e as c1,
-  useDiagramContext as c2,
-  useDiagram as c3,
-  useMantinePortalProps as c4,
-  PopoverTarget as c5,
-  PopoverDropdown as c6,
-  Stack as c7,
-  Group as c8,
-  Button as c9,
-  ViewGroupNode as cA,
-  CompoundDeploymentNode as cB,
-  CompoundElementNode as cC,
-  DeploymentNode as cD,
-  ElementNode as cE,
-  n as cF,
-  MotionButton as cG,
-  useHover$1 as cH,
-  FloatingIndicator as cI,
-  Flex as cJ,
-  clampUseMovePosition as cK,
-  useMove as cL,
-  hstack as cM,
-  MotionDiv as cN,
-  shallowEqual as cO,
-  useSelector as cP,
-  useCurrentViewId as cQ,
-  isMacOs as cR,
-  IconId as cS,
-  HStack as cT,
-  ElementTag as cU,
-  MarkdownBlock as cV,
-  MotionSpan as cW,
-  Portal as cX,
-  Divider as cY,
-  o$1 as cZ,
-  useDiagramActorRef as c_,
-  IconCheck as ca,
-  useLikeC4Model as cb,
-  LikeC4ModelContext as cc,
-  findDiagramNode as cd,
-  findDiagramEdge as ce,
-  Menu as cf,
-  MenuTarget as cg,
-  MenuDropdown as ch,
-  MenuLabel as ci,
-  MenuDivider as cj,
-  MenuItem as ck,
-  useEnabledFeatures as cl,
-  useDiagramEventHandlers as cm,
-  TooltipGroup as cn,
-  Space as co,
-  Tooltip$1 as cp,
-  IfEnabled as cq,
-  IconFileSymlink as cr,
-  getNodeDimensions as cs,
-  useIsPanning as ct,
-  useXYFlow as cu,
-  useDiagramActorSnapshot as cv,
-  useXYInternalNode as cw,
-  isSamePoint as cx,
-  bezierControlPoints as cy,
-  bezierPath as cz,
+  CompoundNodeContainer as c$,
+  n$1 as c0,
+  EdgeLabelRenderer as c1,
+  e as c2,
+  getNodeDimensions as c3,
+  useXYFlow as c4,
+  useDiagram as c5,
+  useEnabledFeatures as c6,
+  useXYInternalNode as c7,
+  isSamePoint as c8,
+  bezierControlPoints as c9,
+  isMacOs as cA,
+  IconCheck as cB,
+  IconId as cC,
+  HStack as cD,
+  ElementTag as cE,
+  MarkdownBlock as cF,
+  cva as cG,
+  Button as cH,
+  MotionSpan as cI,
+  Portal as cJ,
+  useLikeC4ProjectsContext as cK,
+  useLikeC4ProjectId as cL,
+  Menu as cM,
+  MenuTarget as cN,
+  MenuDropdown as cO,
+  MenuItem as cP,
+  useLikeC4Model as cQ,
+  Divider as cR,
+  o$1 as cS,
+  useDiagramActorRef as cT,
+  useCurrentViewModel as cU,
+  useActorRef as cV,
+  useUpdateEffect$1 as cW,
+  Group as cX,
+  getBezierPath as cY,
+  ElementActionButtons as cZ,
+  IconTransform as c_,
+  bezierPath as ca,
+  ViewGroupNode as cb,
+  CompoundDeploymentNode as cc,
+  CompoundElementNode as cd,
+  DeploymentNode as ce,
+  ElementNode as cf,
+  useDiagramActorSnapshot as cg,
+  n as ch,
+  MotionButton as ci,
+  Tooltip$1 as cj,
+  useDiagramEventHandlers as ck,
+  useDiagramContext as cl,
+  useHover$1 as cm,
+  PopoverTarget as cn,
+  PopoverDropdown as co,
+  FloatingIndicator as cp,
+  Flex as cq,
+  clampUseMovePosition as cr,
+  useMove as cs,
+  useMantinePortalProps as ct,
+  hstack as cu,
+  TooltipGroup as cv,
+  shallowEqual as cw,
+  useSelector as cx,
+  useCurrentViewId as cy,
+  IconFileSymlink as cz,
   alpha$1 as d,
-  useCustomCompareEffect as d$,
-  useActorRef as d0,
-  useUpdateEffect$1 as d1,
-  getBezierPath as d2,
-  ElementActionButtons as d3,
-  IconTransform as d4,
-  customNode as d5,
-  CompoundNodeContainer as d6,
-  CompoundTitle as d7,
-  ElementNodeContainer as d8,
-  ElementShape as d9,
-  sva as dA,
-  t$2 as dB,
-  VisuallyHidden as dC,
-  IconOrShapeRenderer as dD,
-  FocusTrap as dE,
-  t$3 as dF,
-  useOptionalCurrentViewModel as dG,
-  ButtonGroup as dH,
-  EnsureCurrentViewModel as dI,
-  useIsReducedGraphics as dJ,
-  usePanningAtom as dK,
-  useTimeout as dL,
-  useCustomCompareMemo as dM,
-  useLikeC4Specification as dN,
-  r as dO,
-  applyEdgeChanges as dP,
-  applyNodeChanges as dQ,
-  getViewportForBounds as dR,
-  typedSystem as dS,
-  centerXYInternalNode as dT,
-  getBoundsOfRects as dU,
-  boxToRect as dV,
-  and as dW,
-  AllDisabled as dX,
-  focusedBounds as dY,
-  or as dZ,
-  nodeToRect as d_,
-  ElementTitle as da,
-  ElementTags as db,
-  ElementDetailsButton as dc,
-  Handle as dd,
-  Position as de,
-  getDefaultExportFromCjs as df,
-  l$1 as dg,
-  IconSelector as dh,
-  SegmentedControl as di,
-  ReactFlowProvider as dj,
-  useStoreApi as dk,
-  useReactFlow as dl,
-  Panel as dm,
-  m as dn,
-  u as dp,
-  useSyncedRef as dq,
-  IconRenderer as dr,
-  useTimeoutEffect as ds,
-  ReactRemoveScroll as dt,
-  ActionIconGroup as du,
-  DiagramFeatures as dv,
-  t$1 as dw,
-  useXYStore as dx,
-  useReducedMotionConfig as dy,
-  Overlay as dz,
+  getBoundsOfRects as d$,
+  CompoundTitle as d0,
+  CompoundDetailsButton as d1,
+  ElementNodeContainer as d2,
+  ElementShape as d3,
+  ElementTitle as d4,
+  ElementTags as d5,
+  Handle as d6,
+  Position as d7,
+  ElementDetailsButton as d8,
+  getDefaultExportFromCjs as d9,
+  IconOrShapeRenderer as dA,
+  FocusTrap as dB,
+  t$3 as dC,
+  useOnDiagramEvent as dD,
+  findDiagramEdge as dE,
+  findDiagramNode as dF,
+  autoUpdate as dG,
+  Space as dH,
+  computePosition as dI,
+  offset$2 as dJ,
+  autoPlacement as dK,
+  size$1 as dL,
+  hide$1 as dM,
+  useOptionalCurrentViewModel as dN,
+  ButtonGroup as dO,
+  EnsureCurrentViewModel as dP,
+  useIsReducedGraphics as dQ,
+  usePanningAtom as dR,
+  useTimeout as dS,
+  useCustomCompareMemo as dT,
+  useLikeC4Specification as dU,
+  r as dV,
+  applyEdgeChanges as dW,
+  applyNodeChanges as dX,
+  getViewportForBounds as dY,
+  typedSystem as dZ,
+  centerXYInternalNode as d_,
+  l$1 as da,
+  IconSelector as db,
+  SegmentedControl as dc,
+  ReactFlowProvider as dd,
+  useStoreApi as de,
+  useReactFlow as df,
+  Panel as dg,
+  m as dh,
+  Stack as di,
+  u as dj,
+  useSyncedRef as dk,
+  IconRenderer as dl,
+  useTimeoutEffect as dm,
+  ReactRemoveScroll as dn,
+  ActionIconGroup as dp,
+  IfEnabled as dq,
+  DiagramFeatures as dr,
+  t$1 as ds,
+  customNode as dt,
+  useXYStore as du,
+  useReducedMotionConfig as dv,
+  Overlay as dw,
+  sva as dx,
+  t$2 as dy,
+  VisuallyHidden as dz,
   em as e,
-  DiagramActorContextProvider as e0,
-  CurrentViewModelContext as e1,
-  IconRendererProvider as e2,
-  DiagramEventHandlers as e3,
-  ReduceGraphicsContext as e4,
-  RootContainer as e5,
-  useMutationObserver as e6,
-  shallowEqual$1 as e7,
-  useLikeC4ViewModel as e8,
-  useSetState as e9,
-  CompoundActionButton as ea,
-  CompoundDetailsButton as eb,
-  DefaultHandles as ec,
-  CompoundActions as ed,
-  CompoundDeploymentToolbar as ee,
-  CompoundDetailsButtonWithHandler as ef,
-  CompoundElementToolbar as eg,
-  DeploymentElementActions as eh,
-  DeploymentElementToolbar as ei,
-  ElementActions as ej,
-  ElementDetailsButtonWithHandler as ek,
-  ElementToolbar as el,
-  Toolbar as em,
-  IfNotEnabled as en,
-  IfNotReadOnly as eo,
-  IfReadOnly as ep,
+  boxToRect as e0,
+  and as e1,
+  AllDisabled as e2,
+  focusedBounds as e3,
+  or as e4,
+  nodeToRect as e5,
+  useCustomCompareEffect as e6,
+  DiagramActorContextProvider as e7,
+  CurrentViewModelContext as e8,
+  IconRendererProvider as e9,
+  DiagramEventHandlers as ea,
+  ReduceGraphicsContext as eb,
+  RootContainer as ec,
+  useMutationObserver as ed,
+  shallowEqual$1 as ee,
+  LikeC4ProjectsContext as ef,
+  LikeC4ModelContext as eg,
+  useLikeC4ViewModel as eh,
+  useHasProjects as ei,
+  useLikeC4Projects as ej,
+  useSetState as ek,
+  CompoundActionButton as el,
+  DefaultHandles as em,
+  CompoundActions as en,
+  CompoundDeploymentToolbar as eo,
+  CompoundDetailsButtonWithHandler as ep,
+  CompoundElementToolbar as eq,
+  DeploymentElementActions as er,
+  DeploymentElementToolbar as es,
+  ElementActions as et,
+  ElementDetailsButtonWithHandler as eu,
+  ElementToolbar as ev,
+  Toolbar as ew,
+  IfNotEnabled as ex,
+  IfNotReadOnly as ey,
+  IfReadOnly as ez,
   getPrimaryContrastColor as f,
   getPrimaryShade as g,
   deepMerge as h,