likec4 1.27.2 → 1.28.0

package/__app__/src/main.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, isValidElement, Component, memo as memo$2, useSyncExternalStore, createRef, useTransition as useTransition$1, useDeferredValue, use, StrictMode } from "react";
+import React__default, { useState, Fragment, createContext, useContext, useRef, useEffect, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, useId as useId$2, forwardRef, cloneElement, Children, createElement, useInsertionEffect as useInsertionEffect$1, isValidElement, Component, memo as memo$2, useSyncExternalStore, createRef, useDeferredValue, use, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, flushSync } from "react-dom";
-import { ComponentName, withOverviewGraph, isDevelopment, krokiD2SvgUrl, useHashHistory, basepath } from "./const.js";
+import { ComponentName, useHashHistory, withOverviewGraph, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
 import { projects, isSingleProject } from "likec4:projects";
 import { createLikeC4Model } from "likec4/model";
 import { invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, compareNatural, DiagramNode, nameFromFqn, nonNullable, defaultTheme, ElementShapes, toArray, ifind, DefaultMap, ancestorsFqn, isScopedElementView, isDeploymentView, Queue, ElementKind, delay as delay$1, isAncestor, sortParentsFirst, ifilter, whereOperatorAsPredicate, getBBoxCenter, getParallelStepsPrefix, ComputedView, isDescendantOf } from "@likec4/core";
@@ -719,7 +719,7 @@ function useHovered() {
   const [hovered, setHovered] = useState(-1);
   return [hovered, { setHovered, resetHovered: () => setHovered(-1) }];
 }
-function clamp$4(value, min2, max2) {
+function clamp$5(value, min2, max2) {
   return min2 === void 0 && max2 === void 0 ? value : min2 !== void 0 && max2 === void 0 ? Math.max(value, min2) : Math.min(min2 === void 0 && max2 !== void 0 ? value : Math.max(value, min2), max2);
 }
 function randomId(prefix2 = "mantine-") {
@@ -1060,8 +1060,8 @@ function useMergedRef(...refs) {
 }
 function clampUseMovePosition(position) {
   return {
-    x: clamp$4(position.x, 0, 1),
-    y: clamp$4(position.y, 0, 1)
+    x: clamp$5(position.x, 0, 1),
+    y: clamp$5(position.y, 0, 1)
   };
 }
 function useMove(onChange, handlers, dir = "ltr") {
@@ -1075,10 +1075,10 @@ function useMove(onChange, handlers, dir = "ltr") {
           node2.style.userSelect = "none";
           const rect = node2.getBoundingClientRect();
           if (rect.width && rect.height) {
-            const _x = clamp$4((x2 - rect.left) / rect.width, 0, 1);
+            const _x = clamp$5((x2 - rect.left) / rect.width, 0, 1);
             onChange({
               x: dir === "ltr" ? _x : 1 - _x,
-              y: clamp$4((y2 - rect.top) / rect.height, 0, 1)
+              y: clamp$5((y2 - rect.top) / rect.height, 0, 1)
             });
           }
         }
@@ -3400,7 +3400,7 @@ const min$1 = Math.min, max$1 = Math.max, round = Math.round, floor = Math.floor
   start: "end",
   end: "start"
 };
-function clamp$3(start2, value, end) {
+function clamp$4(start2, value, end) {
   return max$1(start2, min$1(value, end));
 }
 function evaluate(value, param) {
@@ -3671,7 +3671,7 @@ const arrow$3 = (options) => ({
     }, axis = getAlignmentAxis(placement), length = getAxisLength(axis), arrowDimensions = await platform2.getDimensions(element), isYAxis = axis === "y", minProp = isYAxis ? "top" : "left", maxProp = isYAxis ? "bottom" : "right", clientProp = isYAxis ? "clientHeight" : "clientWidth", endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length], startDiff = coords[axis] - rects.reference[axis], arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
     let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
     (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) && (clientSize = elements.floating[clientProp] || rects.floating[length]);
-    const centerToReference = endDiff / 2 - startDiff / 2, largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1, minPadding = min$1(paddingObject[minProp], largestPossiblePadding), maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding), min$1$1 = minPadding, max2 = clientSize - arrowDimensions[length] - maxPadding, center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference, offset2 = clamp$3(min$1$1, center, max2), shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0, alignmentOffset = shouldAddOffset ? center < min$1$1 ? center - min$1$1 : center - max2 : 0;
+    const centerToReference = endDiff / 2 - startDiff / 2, largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1, minPadding = min$1(paddingObject[minProp], largestPossiblePadding), maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding), min$1$1 = minPadding, max2 = clientSize - arrowDimensions[length] - maxPadding, center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference, offset2 = clamp$4(min$1$1, center, max2), shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0, alignmentOffset = shouldAddOffset ? center < min$1$1 ? center - min$1$1 : center - max2 : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
       data: {
@@ -3925,11 +3925,11 @@ const offset$3 = function(options) {
       let mainAxisCoord = coords[mainAxis], crossAxisCoord = coords[crossAxis];
       if (checkMainAxis) {
         const minSide = mainAxis === "y" ? "top" : "left", maxSide = mainAxis === "y" ? "bottom" : "right", min2 = mainAxisCoord + overflow[minSide], max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp$3(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp$4(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left", maxSide = crossAxis === "y" ? "bottom" : "right", min2 = crossAxisCoord + overflow[minSide], max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp$3(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp$4(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -5488,11 +5488,11 @@ function linearScale(input2, output) {
     return output[0] + ratio * (value - input2[0]);
   };
 }
-function clamp$2(value, [min2, max2]) {
+function clamp$3(value, [min2, max2]) {
   return Math.min(max2, Math.max(min2, value));
 }
 function getThumbOffsetFromScroll(scrollPos, sizes2, dir = "ltr") {
-  const thumbSizePx = getThumbSize(sizes2), scrollbarPadding = sizes2.scrollbar.paddingStart + sizes2.scrollbar.paddingEnd, scrollbar = sizes2.scrollbar.size - scrollbarPadding, maxScrollPos = sizes2.content - sizes2.viewport, maxThumbPos = scrollbar - thumbSizePx, scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0], scrollWithoutMomentum = clamp$2(scrollPos, scrollClampRange);
+  const thumbSizePx = getThumbSize(sizes2), scrollbarPadding = sizes2.scrollbar.paddingStart + sizes2.scrollbar.paddingEnd, scrollbar = sizes2.scrollbar.size - scrollbarPadding, maxScrollPos = sizes2.content - sizes2.viewport, maxThumbPos = scrollbar - thumbSizePx, scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0], scrollWithoutMomentum = clamp$3(scrollPos, scrollClampRange);
   return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
 }
 function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes2, dir = "ltr") {
@@ -12157,9 +12157,9 @@ const defaultProps$a = {
     varsResolver: varsResolver$6,
     unstyled
   }), { dir } = useDirection(), [hovered, setHovered] = useState(!1), [_value, setValue] = useUncontrolled({
-    value: typeof value == "number" ? clamp$4(value, min2, max2) : value,
-    defaultValue: typeof defaultValue == "number" ? clamp$4(defaultValue, min2, max2) : defaultValue,
-    finalValue: clamp$4(0, min2, max2),
+    value: typeof value == "number" ? clamp$5(value, min2, max2) : value,
+    defaultValue: typeof defaultValue == "number" ? clamp$5(defaultValue, min2, max2) : defaultValue,
+    finalValue: clamp$5(0, min2, max2),
     onChange
   }), valueRef = useRef(_value), root2 = useRef(null), thumb = useRef(null), position = getPosition({ value: _value, min: min2, max: max2 }), scaledValue = scale2(_value), _label = typeof label2 == "function" ? label2(scaledValue) : label2, precision = _precision ?? getPrecision(step), handleChange = useCallback(
     ({ x: x2 }) => {
@@ -17008,8 +17008,8 @@ function removeItem(arr, item) {
   const index2 = arr.indexOf(item);
   index2 > -1 && arr.splice(index2, 1);
 }
-const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
-let invariant = noop$3;
+let invariant = () => {
+};
 const MotionGlobalConfig = {
   useManualTiming: !1
 };
@@ -17018,7 +17018,7 @@ function memo(callback) {
   let result;
   return () => (result === void 0 && (result = callback()), result);
 }
-const progress = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
+const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any, progress = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
   const toFromDifference = to - from;
   return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 };
@@ -17052,12 +17052,12 @@ function velocityPerSecond(velocity, frameDuration) {
   return frameDuration ? velocity * (1e3 / frameDuration) : 0;
 }
 const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
-class BaseGroupPlaybackControls {
+class GroupAnimation {
   constructor(animations2) {
     this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
   }
   get finished() {
-    return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+    return Promise.all(this.animations.map((animation) => animation.finished));
   }
   /**
    * TODO: Filter out cancelled or stopped animations before returning
@@ -17122,46 +17122,16 @@ class BaseGroupPlaybackControls {
     this.runAll("complete");
   }
 }
-class GroupPlaybackControls extends BaseGroupPlaybackControls {
-  then(onResolve, onReject) {
-    return Promise.all(this.animations).then(onResolve).catch(onReject);
+class GroupAnimationWithThen extends GroupAnimation {
+  then(onResolve, _onReject) {
+    return this.finished.finally(onResolve).then(() => {
+    });
   }
 }
-function getValueTransition$1(transition, key2) {
-  return transition ? transition[key2] || transition.default || transition : void 0;
-}
-const maxGeneratorDuration = 2e4;
-function calcGeneratorDuration(generator) {
-  let duration = 0;
-  const timeStep = 50;
-  let state = generator.next(duration);
-  for (; !state.done && duration < maxGeneratorDuration; )
-    duration += timeStep, state = generator.next(duration);
-  return duration >= maxGeneratorDuration ? 1 / 0 : duration;
-}
-function createGeneratorEasing(options, scale2 = 100, createGenerator) {
-  const generator = createGenerator({ ...options, keyframes: [0, scale2] }), duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-  return {
-    type: "keyframes",
-    ease: (progress2) => generator.next(duration * progress2).value / scale2,
-    duration: /* @__PURE__ */ millisecondsToSeconds(duration)
-  };
-}
-function isGenerator(type) {
-  return typeof type == "function";
-}
-function attachTimeline(animation, timeline) {
-  animation.timeline = timeline, animation.onfinish = null;
-}
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", supportsFlags = {
-  linearEasing: void 0
-};
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", supportsFlags = {};
 function memoSupports(callback, supportsFlag) {
   const memoized = /* @__PURE__ */ memo(callback);
-  return () => {
-    var _a;
-    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
-  };
+  return () => supportsFlags[supportsFlag] ?? memoized();
 }
 const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
   try {
@@ -17174,13 +17144,9 @@ const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
   let points = "";
   const numPoints = Math.max(Math.round(duration / resolution), 2);
   for (let i2 = 0; i2 < numPoints; i2++)
-    points += easing(/* @__PURE__ */ progress(0, numPoints - 1, i2)) + ", ";
+    points += easing(i2 / (numPoints - 1)) + ", ";
   return `linear(${points.substring(0, points.length - 2)})`;
-};
-function isWaapiSupportedEasing(easing) {
-  return !!(typeof easing == "function" && supportsLinearEasing() || !easing || typeof easing == "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
-}
-const cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
+}, cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
   linear: "linear",
   ease: "ease",
   easeIn: "ease-in",
@@ -17195,6 +17161,51 @@ function mapEasingToNativeEasing(easing, duration) {
   if (easing)
     return typeof easing == "function" && supportsLinearEasing() ? generateLinearEasing(easing, duration) : isBezierDefinition(easing) ? cubicBezierAsString(easing) : Array.isArray(easing) ? easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut) : supportedWaapiEasing[easing];
 }
+function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}, pseudoElement = void 0) {
+  const keyframeOptions = {
+    [valueName]: keyframes2
+  };
+  times && (keyframeOptions.offset = times);
+  const easing = mapEasingToNativeEasing(ease2, duration);
+  return Array.isArray(easing) && (keyframeOptions.easing = easing), element.animate(keyframeOptions, {
+    delay: delay2,
+    duration,
+    easing: Array.isArray(easing) ? "linear" : easing,
+    fill: "both",
+    iterations: repeat + 1,
+    direction: repeatType === "reverse" ? "alternate" : "normal",
+    pseudoElement
+  });
+}
+function isGenerator(type) {
+  return typeof type == "function" && "applyToOptions" in type;
+}
+function getValueTransition$1(transition, key2) {
+  return transition?.[key2] ?? transition?.default ?? transition;
+}
+const maxGeneratorDuration = 2e4;
+function calcGeneratorDuration(generator) {
+  let duration = 0;
+  const timeStep = 50;
+  let state = generator.next(duration);
+  for (; !state.done && duration < maxGeneratorDuration; )
+    duration += timeStep, state = generator.next(duration);
+  return duration >= maxGeneratorDuration ? 1 / 0 : duration;
+}
+function createGeneratorEasing(options, scale2 = 100, createGenerator) {
+  const generator = createGenerator({ ...options, keyframes: [0, scale2] }), duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+  return {
+    type: "keyframes",
+    ease: (progress2) => generator.next(duration * progress2).value / scale2,
+    duration: /* @__PURE__ */ millisecondsToSeconds(duration)
+  };
+}
+function isWaapiSupportedEasing(easing) {
+  return !!(typeof easing == "function" && supportsLinearEasing() || !easing || typeof easing == "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
+}
+function attachTimeline(animation, timeline) {
+  animation.timeline = timeline, animation.onfinish = null;
+}
 const stepsOrder = [
   "read",
   // Read
@@ -17293,12 +17304,11 @@ function setDragLock(axis) {
   });
 }
 function resolveElements(elementOrSelector, scope, selectorCache) {
-  var _a;
   if (elementOrSelector instanceof EventTarget)
     return [elementOrSelector];
   if (typeof elementOrSelector == "string") {
     let root2 = document;
-    const elements = (_a = selectorCache?.[elementOrSelector]) !== null && _a !== void 0 ? _a : root2.querySelectorAll(elementOrSelector);
+    const elements = selectorCache?.[elementOrSelector] ?? root2.querySelectorAll(elementOrSelector);
     return elements ? Array.from(elements) : [];
   }
   return Array.from(elementOrSelector);
@@ -17383,7 +17393,7 @@ function press(targetOrSelector, onPressStart, options = {}) {
     window.addEventListener("pointerup", onPointerUp, eventOptions), window.addEventListener("pointercancel", onPointerCancel, eventOptions);
   };
   return targets.forEach((target) => {
-    (options.useGlobalTarget ? window : target).addEventListener("pointerdown", startPress, eventOptions), target instanceof HTMLElement && (target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions)), !isElementKeyboardAccessible(target) && target.tabIndex === null && (target.tabIndex = 0));
+    (options.useGlobalTarget ? window : target).addEventListener("pointerdown", startPress, eventOptions), target instanceof HTMLElement && (target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions)), !isElementKeyboardAccessible(target) && !target.hasAttribute("tabindex") && (target.tabIndex = 0));
   }), cancelEvents;
 }
 const MAX_VELOCITY_DELTA = 30, isFloat = (value) => !isNaN(parseFloat(value));
@@ -17395,7 +17405,7 @@ class MotionValue {
    * -  `transformer`: A function to transform incoming values with.
    */
   constructor(init2, options = {}) {
-    this.version = "12.6.1", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "12.6.3", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init2), this.owner = options.owner;
@@ -17789,7 +17799,6 @@ function useMotionRef(visualState, visualElement, externalRef) {
 }
 const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({});
 function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-  var _a, _b;
   const { visualElement: parent } = useContext(MotionContext), lazyContext = useContext(LazyContext), presenceContext = useContext(PresenceContext), reducedMotionConfig = useContext(MotionConfigContext).reducedMotion, visualElementRef = useRef(null);
   createVisualElement = createVisualElement || lazyContext.renderer, !visualElementRef.current && createVisualElement && (visualElementRef.current = createVisualElement(Component2, {
     visualState,
@@ -17805,13 +17814,12 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
   useInsertionEffect$1(() => {
     visualElement && isMounted.current && visualElement.update(props, presenceContext);
   });
-  const optimisedAppearId = props[optimizedAppearDataAttribute], wantsHandoff = useRef(!!optimisedAppearId && !(!((_a = window.MotionHandoffIsComplete) === null || _a === void 0) && _a.call(window, optimisedAppearId)) && ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+  const optimisedAppearId = props[optimizedAppearDataAttribute], wantsHandoff = useRef(!!optimisedAppearId && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
   return useIsomorphicLayoutEffect$2(() => {
     visualElement && (isMounted.current = !0, window.MotionIsMounted = !0, visualElement.updateFeatures(), microtask.render(visualElement.render), wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges());
   }), useEffect(() => {
     visualElement && (!wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges(), wantsHandoff.current && (queueMicrotask(() => {
-      var _a2;
-      (_a2 = window.MotionHandoffMarkAsComplete) === null || _a2 === void 0 || _a2.call(window, optimisedAppearId);
+      window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
     }), wantsHandoff.current = !1));
   }), visualElement;
 }
@@ -17840,7 +17848,6 @@ function getClosestProjectingNode(visualElement) {
     return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component: Component2 }) {
-  var _a, _b;
   function MotionComponent(props, externalRef) {
     let MeasureLayout2;
     const configAndProps = {
@@ -17855,7 +17862,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     }
     return jsxs(MotionContext.Provider, { value: context2, children: [MeasureLayout2 && context2.visualElement ? jsx(MeasureLayout2, { visualElement: context2.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context2.visualElement, externalRef), visualState, isStatic, context2.visualElement)] });
   }
-  MotionComponent.displayName = `motion.${typeof Component2 == "string" ? Component2 : `create(${(_b = (_a = Component2.displayName) !== null && _a !== void 0 ? _a : Component2.name) !== null && _b !== void 0 ? _b : ""})`}`;
+  MotionComponent.displayName = `motion.${typeof Component2 == "string" ? Component2 : `create(${Component2.displayName ?? Component2.name ?? ""})`}`;
   const ForwardRefMotionComponent = forwardRef(MotionComponent);
   return ForwardRefMotionComponent[motionComponentSymbol] = Component2, ForwardRefMotionComponent;
 }
@@ -17903,13 +17910,13 @@ const transformPropOrder = [
 function isForcedMotionValue(key2, { layout: layout2, layoutId }) {
   return transformProps.has(key2) || key2.startsWith("origin") || (layout2 || layoutId !== void 0) && (!!scaleCorrectors[key2] || key2 === "opacity");
 }
-const isMotionValue = (value) => !!(value && value.getVelocity), getValueAsType = (value, type) => type && typeof value == "number" ? type.transform(value) : value, clamp$1 = (min2, max2, v) => v > max2 ? max2 : v < min2 ? min2 : v, number = {
+const isMotionValue = (value) => !!(value && value.getVelocity), getValueAsType = (value, type) => type && typeof value == "number" ? type.transform(value) : value, clamp$2 = (min2, max2, v) => v > max2 ? max2 : v < min2 ? min2 : v, number = {
   test: (v) => typeof v == "number",
   parse: parseFloat,
   transform: (v) => v
 }, alpha = {
   ...number,
-  transform: (v) => clamp$1(0, 1, v)
+  transform: (v) => clamp$2(0, 1, v)
 }, scale = {
   ...number,
   default: 1
@@ -18244,10 +18251,9 @@ function makeLatestValues(props, context2, presenceContext, scrapeMotionValues)
   return values2;
 }
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-  var _a;
   const { style: style2 } = props, newValues = {};
   for (const key2 in style2)
-    (isMotionValue(style2[key2]) || prevProps.style && isMotionValue(prevProps.style[key2]) || isForcedMotionValue(key2, props) || ((_a = visualElement?.getValue(key2)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== void 0) && (newValues[key2] = style2[key2]);
+    (isMotionValue(style2[key2]) || prevProps.style && isMotionValue(prevProps.style[key2]) || isForcedMotionValue(key2, props) || visualElement?.getValue(key2)?.liveStyle !== void 0) && (newValues[key2] = style2[key2]);
   return newValues;
 }
 const htmlMotionConfig = {
@@ -18424,7 +18430,7 @@ const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){
     [cName]: parseFloat(c2),
     alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
   };
-}, clampRgbUnit = (v) => clamp$1(0, 255, v), rgbUnit = {
+}, clampRgbUnit = (v) => clamp$2(0, 255, v), rgbUnit = {
   ...number,
   transform: (v) => Math.round(clampRgbUnit(v))
 }, rgba$1 = {
@@ -18455,8 +18461,7 @@ const hex$1 = {
   transform: (v) => typeof v == "string" ? v : v.hasOwnProperty("red") ? rgba$1.transform(v) : hsla$1.transform(v)
 }, colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 function test(v) {
-  var _a, _b;
-  return isNaN(v) && typeof v == "string" && (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
+  return isNaN(v) && typeof v == "string" && (v.match(floatRegex)?.length || 0) + (v.match(colorRegex)?.length || 0) > 0;
 }
 const NUMBER_TOKEN = "number", COLOR_TOKEN = "color", VAR_TOKEN = "var", VAR_FUNCTION_TOKEN = "var(", SPLIT_TOKEN = "${}", complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
 function analyseComplexValue(value) {
@@ -18638,8 +18643,7 @@ function measureAllKeyframes() {
       element.render();
       const restore = transformsToRestore.get(element);
       restore && restore.forEach(([key2, value]) => {
-        var _a;
-        (_a = element.getValue(key2)) === null || _a === void 0 || _a.set(value);
+        element.getValue(key2)?.set(value);
       });
     }), resolversToMeasure.forEach((resolver) => resolver.measureEndState()), resolversToMeasure.forEach((resolver) => {
       resolver.suspendedScrollY !== void 0 && window.scrollTo(0, resolver.suspendedScrollY);
@@ -18765,14 +18769,13 @@ class DOMKeyframesResolver extends KeyframeResolver {
     measureKeyframe !== void 0 && element.getValue(name, measureKeyframe).jump(measureKeyframe, !1);
   }
   measureEndState() {
-    var _a;
     const { element, name, unresolvedKeyframes } = this;
     if (!element || !element.current)
       return;
     const value = element.getValue(name);
     value && value.jump(this.measuredOrigin, !1);
     const finalKeyframeIndex = unresolvedKeyframes.length - 1, finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
-    unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)), finalKeyframe !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = finalKeyframe), !((_a = this.removedTransforms) === null || _a === void 0) && _a.length && this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
+    unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)), finalKeyframe !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = finalKeyframe), this.removedTransforms?.length && this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
       element.getValue(unsetTransformName).set(unsetTransformValue);
     }), this.resolveNoneKeyframes();
   }
@@ -18946,10 +18949,9 @@ function mixObject(a2, b2) {
   };
 }
 function matchOrder(origin, target) {
-  var _a;
   const orderedOrigin = [], pointers = { color: 0, var: 0, number: 0 };
   for (let i2 = 0; i2 < target.values.length; i2++) {
-    const type = target.types[i2], originIndex = origin.indexes[type][pointers[type]], originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+    const type = target.types[i2], originIndex = origin.indexes[type][pointers[type]], originValue = origin.values[originIndex] ?? 0;
     orderedOrigin[i2] = originValue, pointers[type]++;
   }
   return orderedOrigin;
@@ -18997,7 +18999,7 @@ const springDefaults = {
 }, safeMin = 1e-3;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope, derivative, dampingRatio = 1 - bounce;
-  dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio), duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration)), dampingRatio < 1 ? (envelope = (undampedFreq2) => {
+  dampingRatio = clamp$2(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio), duration = clamp$2(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration)), dampingRatio < 1 ? (envelope = (undampedFreq2) => {
     const exponentialDecay = undampedFreq2 * dampingRatio, delta = exponentialDecay * duration, a2 = exponentialDecay - velocity, b2 = calcAngularFreq(undampedFreq2, dampingRatio), c2 = Math.exp(-delta);
     return safeMin - a2 / b2 * c2;
   }, derivative = (undampedFreq2) => {
@@ -19051,7 +19053,7 @@ function getSpringOptions(options) {
   };
   if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys))
     if (options.visualDuration) {
-      const visualDuration = options.visualDuration, root2 = 2 * Math.PI / (visualDuration * 1.2), stiffness = root2 * root2, damping = 2 * clamp$1(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
+      const visualDuration = options.visualDuration, root2 = 2 * Math.PI / (visualDuration * 1.2), stiffness = root2 * root2, damping = 2 * clamp$2(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
       springOptions = {
         ...springOptions,
         mass: springDefaults.mass,
@@ -19113,10 +19115,16 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
     toString: () => {
       const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration), easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
       return calculatedDuration + "ms " + easing;
+    },
+    toTransition: () => {
     }
   };
   return generator;
 }
+spring.applyToOptions = (options) => {
+  const generatorOptions = createGeneratorEasing(options, 100, spring);
+  return options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut", options.duration = /* @__PURE__ */ secondsToMilliseconds(generatorOptions.duration), options.type = "keyframes", options;
+};
 function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min: min2, max: max2, restDelta = 0.5, restSpeed }) {
   const origin = keyframes2[0], state = {
     done: !1,
@@ -19200,7 +19208,7 @@ function interpolate$1(input2, output, { clamp: isClamp = !0, ease: ease2, mixer
     const progressInRange = /* @__PURE__ */ progress(input2[i2], input2[i2 + 1], v);
     return mixers[i2](progressInRange);
   };
-  return isClamp ? (v) => interpolator(clamp$1(input2[0], input2[inputLength - 1], v)) : interpolator;
+  return isClamp ? (v) => interpolator(clamp$2(input2[0], input2[inputLength - 1], v)) : interpolator;
 }
 function fillOffset(offset2, remaining) {
   const min2 = offset2[offset2.length - 1];
@@ -19310,7 +19318,7 @@ class MainThreadAnimation extends BaseAnimation {
     if (repeat) {
       const progress2 = Math.min(this.currentTime, totalDuration) / resolvedDuration;
       let currentIteration = Math.floor(progress2), iterationProgress = progress2 % 1;
-      !iterationProgress && progress2 >= 1 && (iterationProgress = 1), iterationProgress === 1 && currentIteration--, currentIteration = Math.min(currentIteration, repeat + 1), !!(currentIteration % 2) && (repeatType === "reverse" ? (iterationProgress = 1 - iterationProgress, repeatDelay && (iterationProgress -= repeatDelay / resolvedDuration)) : repeatType === "mirror" && (frameGenerator = mirroredGenerator)), elapsed = clamp$1(0, 1, iterationProgress) * resolvedDuration;
+      !iterationProgress && progress2 >= 1 && (iterationProgress = 1), iterationProgress === 1 && currentIteration--, currentIteration = Math.min(currentIteration, repeat + 1), !!(currentIteration % 2) && (repeatType === "reverse" ? (iterationProgress = 1 - iterationProgress, repeatDelay && (iterationProgress -= repeatDelay / resolvedDuration)) : repeatType === "mirror" && (frameGenerator = mirroredGenerator)), elapsed = clamp$2(0, 1, iterationProgress) * resolvedDuration;
     }
     const state = isInDelayPhase ? { done: !1, value: keyframes2[0] } : frameGenerator.next(elapsed);
     mapPercentToKeyframes && (state.value = mapPercentToKeyframes(state.value));
@@ -19349,12 +19357,11 @@ class MainThreadAnimation extends BaseAnimation {
     this.holdTime !== null ? this.startTime = now2 - this.holdTime : this.startTime ? this.state === "finished" && (this.startTime = now2) : this.startTime = startTime ?? this.calcStartTime(), this.state === "finished" && this.updateFinishedPromise(), this.cancelTime = this.startTime, this.holdTime = null, this.state = "running", this.driver.start();
   }
   pause() {
-    var _a;
     if (!this._resolved) {
       this.pendingPlayState = "paused";
       return;
     }
-    this.state = "paused", this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
+    this.state = "paused", this.holdTime = this.currentTime ?? 0;
   }
   complete() {
     this.state !== "running" && this.play(), this.pendingPlayState = this.state = "finished", this.holdTime = null;
@@ -19376,6 +19383,9 @@ class MainThreadAnimation extends BaseAnimation {
   sample(time2) {
     return this.startTime = 0, this.tick(time2, !0);
   }
+  get finished() {
+    return this.currentFinishedPromise;
+  }
 }
 const acceleratedValues = /* @__PURE__ */ new Set([
   "opacity",
@@ -19385,21 +19395,7 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
   // or until we implement support for linear() easing.
   // "background-color"
-]);
-function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}) {
-  const keyframeOptions = { [valueName]: keyframes2 };
-  times && (keyframeOptions.offset = times);
-  const easing = mapEasingToNativeEasing(ease2, duration);
-  return Array.isArray(easing) && (keyframeOptions.easing = easing), element.animate(keyframeOptions, {
-    delay: delay2,
-    duration,
-    easing: Array.isArray(easing) ? "linear" : easing,
-    fill: "both",
-    iterations: repeat + 1,
-    direction: repeatType === "reverse" ? "alternate" : "normal"
-  });
-}
-const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), sampleDelta = 10, maxDuration = 2e4;
+]), supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), sampleDelta = 10, maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
   return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
@@ -19486,6 +19482,9 @@ class AcceleratedAnimation extends BaseAnimation {
     const { animation } = resolved;
     return animation.playbackRate;
   }
+  get finished() {
+    return this.resolved.animation.finished;
+  }
   set speed(newSpeed) {
     const { resolved } = this;
     if (!resolved)
@@ -19635,7 +19634,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     if (finalKeyframe !== void 0)
       return frame$1.update(() => {
         options.onUpdate(finalKeyframe), options.onComplete();
-      }), new GroupPlaybackControls([]);
+      }), new GroupAnimationWithThen([]);
   }
   return !isHandoff && AcceleratedAnimation.supports(options) ? new AcceleratedAnimation(options) : new MainThreadAnimation(options);
 };
@@ -19644,12 +19643,11 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key2) {
   return needsAnimating[key2] = !1, shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
-  var _a;
   let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
   transitionOverride && (transition = transitionOverride);
   const animations2 = [], animationTypeState = type && visualElement.animationState && visualElement.animationState.getState()[type];
   for (const key2 in target) {
-    const value = visualElement.getValue(key2, (_a = visualElement.latestValues[key2]) !== null && _a !== void 0 ? _a : null), valueTarget = target[key2];
+    const value = visualElement.getValue(key2, visualElement.latestValues[key2] ?? null), valueTarget = target[key2];
     if (valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key2))
       continue;
     const valueTransition = {
@@ -19675,8 +19673,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
   }), animations2;
 }
 function animateVariant(visualElement, variant, options = {}) {
-  var _a;
-  const resolved = resolveVariant(visualElement, variant, options.type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
+  const resolved = resolveVariant(visualElement, variant, options.type === "exit" ? visualElement.presenceContext?.custom : void 0);
   let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
   options.transitionOverride && (transition = options.transitionOverride);
   const getAnimation = resolved ? () => Promise.all(animateTarget(visualElement, resolved, options)) : () => Promise.resolve(), getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size ? (forwardDelay = 0) => {
@@ -19750,8 +19747,7 @@ function animateList(visualElement) {
 function createAnimationState(visualElement) {
   let animate2 = animateList(visualElement), state = createState(), isInitialRender = !0;
   const buildResolvedTypeValues = (type) => (acc, definition) => {
-    var _a;
-    const resolved = resolveVariant(visualElement, definition, type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
+    const resolved = resolveVariant(visualElement, definition, type === "exit" ? visualElement.presenceContext?.custom : void 0);
     if (resolved) {
       const { transition, transitionEnd, ...target } = resolved;
       acc = { ...acc, ...target, ...transitionEnd };
@@ -19815,13 +19811,9 @@ function createAnimationState(visualElement) {
     return isInitialRender && (props.initial === !1 || props.initial === props.animate) && !visualElement.manuallyAnimateOnMount && (shouldAnimate = !1), isInitialRender = !1, shouldAnimate ? animate2(animations2) : Promise.resolve();
   }
   function setActive(type, isActive) {
-    var _a;
     if (state[type].isActive === isActive)
       return Promise.resolve();
-    (_a = visualElement.variantChildren) === null || _a === void 0 || _a.forEach((child) => {
-      var _a2;
-      return (_a2 = child.animationState) === null || _a2 === void 0 ? void 0 : _a2.setActive(type, isActive);
-    }), state[type].isActive = isActive;
+    visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive)), state[type].isActive = isActive;
     const animations2 = animateChanges(type);
     for (const key2 in state)
       state[key2].protectedKeys = {};
@@ -19890,8 +19882,7 @@ class AnimationFeature extends Feature {
     animate2 !== prevAnimate && this.updateAnimationControlsSubscription();
   }
   unmount() {
-    var _a;
-    this.node.animationState.reset(), (_a = this.unmountControls) === null || _a === void 0 || _a.call(this);
+    this.node.animationState.reset(), this.unmountControls?.();
   }
 }
 let id$2 = 0;
@@ -20169,7 +20160,7 @@ function calcViewportConstraints(layoutBox, constraintsBox) {
 function calcOrigin(source, target) {
   let origin = 0.5;
   const sourceLength = calcLength(source), targetLength = calcLength(target);
-  return targetLength > sourceLength ? origin = /* @__PURE__ */ progress(target.min, target.max - sourceLength, source.min) : sourceLength > targetLength && (origin = /* @__PURE__ */ progress(source.min, source.max - targetLength, target.min)), clamp$1(0, 1, origin);
+  return targetLength > sourceLength ? origin = /* @__PURE__ */ progress(target.min, target.max - sourceLength, source.min) : sourceLength > targetLength && (origin = /* @__PURE__ */ progress(source.min, source.max - targetLength, target.min)), clamp$2(0, 1, origin);
 }
 function rebaseAxisConstraints(layout2, constraints) {
   const relativeConstraints = {};
@@ -20230,10 +20221,7 @@ class VisualElementDragControls {
         return;
       }
       this.updateAxis("x", info.point, offset2), this.updateAxis("y", info.point, offset2), this.visualElement.render(), onDrag && onDrag(event, info);
-    }, onSessionEnd = (event, info) => this.stop(event, info), resumeAnimation = () => eachAxis((axis) => {
-      var _a;
-      return this.getAnimationState(axis) === "paused" && ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
-    }), { dragSnapToOrigin } = this.getProps();
+    }, onSessionEnd = (event, info) => this.stop(event, info), resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play()), { dragSnapToOrigin } = this.getProps();
     this.panSession = new PanSession(originEvent, {
       onSessionStart,
       onStart,
@@ -20271,8 +20259,7 @@ class VisualElementDragControls {
     this.constraints && this.constraints[axis] && (next = applyConstraints(next, this.constraints[axis], this.elastic[axis])), axisValue.set(next);
   }
   resolveConstraints() {
-    var _a;
-    const { dragConstraints, dragElastic } = this.getProps(), layout2 = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(!1) : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout, prevConstraints = this.constraints;
+    const { dragConstraints, dragElastic } = this.getProps(), layout2 = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(!1) : this.visualElement.projection?.layout, prevConstraints = this.constraints;
     dragConstraints && isRefObject(dragConstraints) ? this.constraints || (this.constraints = this.resolveRefConstraints()) : dragConstraints && layout2 ? this.constraints = calcRelativeConstraints(layout2.layoutBox, dragConstraints) : this.constraints = !1, this.elastic = resolveDragElastic(dragElastic), prevConstraints !== this.constraints && layout2 && this.constraints && !this.hasMutatedConstraints && eachAxis((axis) => {
       this.constraints !== !1 && this.getAxisMotionValue(axis) && (this.constraints[axis] = rebaseAxisConstraints(layout2.layoutBox[axis], this.constraints[axis]));
     });
@@ -20321,14 +20308,10 @@ class VisualElementDragControls {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
   }
   pauseAnimation() {
-    eachAxis((axis) => {
-      var _a;
-      return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause();
-    });
+    eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
   }
   getAnimationState(axis) {
-    var _a;
-    return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
+    return this.getAxisMotionValue(axis).animation?.state;
   }
   /**
    * Drag works differently depending on which props are provided.
@@ -20859,7 +20842,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       this.isUpdating || this.nodes.forEach(clearIsLayoutDirty), this.isUpdating = !1, this.nodes.forEach(resetTransformStyle), this.nodes.forEach(updateLayout), this.nodes.forEach(notifyLayoutUpdate), this.clearAllSnapshots();
       const now2 = time.now();
-      frameData.delta = clamp$1(0, 1e3 / 60, now2 - frameData.timestamp), frameData.timestamp = now2, frameData.isProcessing = !0, frameSteps.update.process(frameData), frameSteps.preRender.process(frameData), frameSteps.render.process(frameData), frameData.isProcessing = !1;
+      frameData.delta = clamp$2(0, 1e3 / 60, now2 - frameData.timestamp), frameData.timestamp = now2, frameData.isProcessing = !0, frameSteps.update.process(frameData), frameSteps.preRender.process(frameData), frameSteps.render.process(frameData), frameData.isProcessing = !1;
     }
     didUpdate() {
       this.updateScheduled || (this.updateScheduled = !0, microtask.read(this.scheduleUpdate));
@@ -20923,21 +20906,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
     }
     measurePageBox() {
-      var _a;
       const { visualElement } = this.options;
       if (!visualElement)
         return createBox();
       const box = visualElement.measureViewportBox();
-      if (!(((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot))) {
+      if (!(this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot))) {
         const { scroll } = this.root;
         scroll && (translateAxis(box.x, scroll.offset.x), translateAxis(box.y, scroll.offset.y));
       }
       return box;
     }
     removeElementScroll(box) {
-      var _a;
       const boxWithoutScroll = createBox();
-      if (copyBoxInto(boxWithoutScroll, box), !((_a = this.scroll) === null || _a === void 0) && _a.wasRoot)
+      if (copyBoxInto(boxWithoutScroll, box), this.scroll?.wasRoot)
         return boxWithoutScroll;
       for (let i2 = 0; i2 < this.path.length; i2++) {
         const node2 = this.path[i2], { scroll, options } = node2;
@@ -20987,11 +20968,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.relativeParent && this.relativeParent.resolvedRelativeTargetAt !== frameData.timestamp && this.relativeParent.resolveTargetDelta(!0);
     }
     resolveTargetDelta(forceRecalculation = !1) {
-      var _a;
       const lead = this.getLead();
       this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty), this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty), this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
       const isShared = !!this.resumingFrom || this !== lead;
-      if (!(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || !((_a = this.parent) === null || _a === void 0) && _a.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize))
+      if (!(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || this.parent?.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize))
         return;
       const { layout: layout2, layoutId } = this.options;
       if (!(!this.layout || !(layout2 || layoutId))) {
@@ -21014,10 +20994,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return !!((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
     }
     calcProjection() {
-      var _a;
       const lead = this.getLead(), isShared = !!this.resumingFrom || this !== lead;
       let canSkip = !0;
-      if ((this.isProjectionDirty || !((_a = this.parent) === null || _a === void 0) && _a.isProjectionDirty) && (canSkip = !1), isShared && (this.isSharedProjectionDirty || this.isTransformDirty) && (canSkip = !1), this.resolvedRelativeTargetAt === frameData.timestamp && (canSkip = !1), canSkip)
+      if ((this.isProjectionDirty || this.parent?.isProjectionDirty) && (canSkip = !1), isShared && (this.isSharedProjectionDirty || this.isTransformDirty) && (canSkip = !1), this.resolvedRelativeTargetAt === frameData.timestamp && (canSkip = !1), canSkip)
         return;
       const { layout: layout2, layoutId } = this.options;
       if (this.isTreeAnimating = !!(this.parent && this.parent.isTreeAnimating || this.currentAnimation || this.pendingAnimation), this.isTreeAnimating || (this.targetDelta = this.relativeTarget = void 0), !this.layout || !(layout2 || layoutId))
@@ -21039,8 +21018,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.isVisible = !0;
     }
     scheduleRender(notifyAll = !0) {
-      var _a;
-      if ((_a = this.options.visualElement) === null || _a === void 0 || _a.scheduleRender(), notifyAll) {
+      if (this.options.visualElement?.scheduleRender(), notifyAll) {
         const stack = this.getStack();
         stack && stack.scheduleRender();
       }
@@ -21110,14 +21088,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return stack ? stack.lead === this : !0;
     }
     getLead() {
-      var _a;
       const { layoutId } = this.options;
-      return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
+      return layoutId ? this.getStack()?.lead || this : this;
     }
     getPrevLead() {
-      var _a;
       const { layoutId } = this.options;
-      return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : void 0;
+      return layoutId ? this.getStack()?.prevLead : void 0;
     }
     getStack() {
       const { layoutId } = this.options;
@@ -21150,7 +21126,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       visualElement.scheduleRender();
     }
     getProjectionStyles(styleProp) {
-      var _a, _b;
       if (!this.instance || this.isSVG)
         return;
       if (!this.isVisible)
@@ -21168,7 +21143,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       const valuesToRender = lead.animationValues || lead.latestValues;
       this.applyTransformsToTarget(), styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender), transformTemplate && (styles.transform = transformTemplate(valuesToRender, styles.transform));
       const { x: x2, y: y2 } = this.projectionDelta;
-      styles.transformOrigin = `${x2.origin * 100}% ${y2.origin * 100}% 0`, lead.animationValues ? styles.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit : styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
+      styles.transformOrigin = `${x2.origin * 100}% ${y2.origin * 100}% 0`, lead.animationValues ? styles.opacity = lead === this ? valuesToRender.opacity ?? this.latestValues.opacity ?? 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit : styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
       for (const key2 in scaleCorrectors) {
         if (valuesToRender[key2] === void 0)
           continue;
@@ -21187,10 +21162,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     }
     // Only run on root
     resetTree() {
-      this.root.nodes.forEach((node2) => {
-        var _a;
-        return (_a = node2.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
-      }), this.root.nodes.forEach(clearMeasurements), this.root.sharedNodes.clear();
+      this.root.nodes.forEach((node2) => node2.currentAnimation?.stop()), this.root.nodes.forEach(clearMeasurements), this.root.sharedNodes.clear();
     }
   };
 }
@@ -21198,8 +21170,7 @@ function updateLayout(node2) {
   node2.updateLayout();
 }
 function notifyLayoutUpdate(node2) {
-  var _a;
-  const snapshot = ((_a = node2.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node2.snapshot;
+  const snapshot = node2.resumeFrom?.snapshot || node2.snapshot;
   if (node2.isLead() && node2.layout && snapshot && node2.hasListeners("didUpdate")) {
     const { layoutBox: layout2, measuredBox: measuredLayout } = node2.layout, { animationType } = node2.options, isShared = snapshot.source !== node2.layout.source;
     animationType === "size" ? eachAxis((axis) => {
@@ -21301,8 +21272,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
   return animationType === "position" || animationType === "preserve-aspect" && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
 }
 function checkNodeWasScrollRoot(node2) {
-  var _a;
-  return node2 !== node2.root && ((_a = node2.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+  return node2 !== node2.root && node2.scroll?.wasRoot;
 }
 const DocumentProjectionNode = createProjectionNode({
   attachResizeListener: (ref, notify2) => addDomEvent(ref, "resize", notify2),
@@ -21665,8 +21635,7 @@ class VisualElement {
    * directly from the instance (which might have performance implications).
    */
   readValue(key2, target) {
-    var _a;
-    let value = this.latestValues[key2] !== void 0 || !this.current ? this.latestValues[key2] : (_a = this.getBaseTargetFromProps(this.props, key2)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key2, this.options);
+    let value = this.latestValues[key2] !== void 0 || !this.current ? this.latestValues[key2] : this.getBaseTargetFromProps(this.props, key2) ?? this.readValueFromInstance(this.current, key2, this.options);
     return value != null && (typeof value == "string" && (isNumericalString(value) || isZeroValueString(value)) ? value = parseFloat(value) : !findValueType(value) && complex.test(target) && (value = getAnimatableNone(key2, target)), this.setBaseTarget(key2, isMotionValue(value) ? value.get() : value)), isMotionValue(value) ? value.get() : value;
   }
   /**
@@ -21681,11 +21650,10 @@ class VisualElement {
    * props.
    */
   getBaseTarget(key2) {
-    var _a;
     const { initial } = this.props;
     let valueFromInitial;
     if (typeof initial == "string" || typeof initial == "object") {
-      const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+      const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
       variant && (valueFromInitial = variant[key2]);
     }
     if (initial && valueFromInitial !== void 0)
@@ -21823,8 +21791,7 @@ function calculateRepeatDuration(duration, repeat, _repeatDelay) {
   return duration * (repeat + 1);
 }
 function calcNextTime(current, next, prev, labels) {
-  var _a;
-  return typeof next == "number" ? next : next.startsWith("-") || next.startsWith("+") ? Math.max(0, current + parseFloat(next)) : next === "<" ? prev : (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+  return typeof next == "number" ? next : next.startsWith("-") || next.startsWith("+") ? Math.max(0, current + parseFloat(next)) : next === "<" ? prev : labels.get(next) ?? current;
 }
 function eraseKeyframes(sequence, startTime, endTime) {
   for (let i2 = 0; i2 < sequence.length; i2++) {
@@ -22044,7 +22011,7 @@ function isSequence(value) {
 function createScopedAnimate(scope) {
   function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
     let animations2 = [];
-    return isSequence(subjectOrSequence) ? animations2 = animateSequence(subjectOrSequence, optionsOrKeyframes, scope) : animations2 = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope), new GroupPlaybackControls(animations2);
+    return isSequence(subjectOrSequence) ? animations2 = animateSequence(subjectOrSequence, optionsOrKeyframes, scope) : animations2 = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope), new GroupAnimationWithThen(animations2);
   }
   return scopedAnimate;
 }
@@ -24744,18 +24711,18 @@ const errorMessages = {
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
 ], elementSelectionKeys = ["Enter", " ", "Escape"];
-var ConnectionMode;
+var ConnectionMode$1;
 (function(ConnectionMode2) {
   ConnectionMode2.Strict = "strict", ConnectionMode2.Loose = "loose";
-})(ConnectionMode || (ConnectionMode = {}));
-var PanOnScrollMode;
+})(ConnectionMode$1 || (ConnectionMode$1 = {}));
+var PanOnScrollMode$1;
 (function(PanOnScrollMode2) {
   PanOnScrollMode2.Free = "free", PanOnScrollMode2.Vertical = "vertical", PanOnScrollMode2.Horizontal = "horizontal";
-})(PanOnScrollMode || (PanOnScrollMode = {}));
-var SelectionMode;
+})(PanOnScrollMode$1 || (PanOnScrollMode$1 = {}));
+var SelectionMode$1;
 (function(SelectionMode2) {
   SelectionMode2.Partial = "partial", SelectionMode2.Full = "full";
-})(SelectionMode || (SelectionMode = {}));
+})(SelectionMode$1 || (SelectionMode$1 = {}));
 const initialConnection = {
   inProgress: !1,
   isValid: null,
@@ -24768,29 +24735,29 @@ const initialConnection = {
   toPosition: null,
   toNode: null
 };
-var ConnectionLineType;
+var ConnectionLineType$1;
 (function(ConnectionLineType2) {
   ConnectionLineType2.Bezier = "default", ConnectionLineType2.Straight = "straight", ConnectionLineType2.Step = "step", ConnectionLineType2.SmoothStep = "smoothstep", ConnectionLineType2.SimpleBezier = "simplebezier";
-})(ConnectionLineType || (ConnectionLineType = {}));
-var MarkerType;
+})(ConnectionLineType$1 || (ConnectionLineType$1 = {}));
+var MarkerType$1;
 (function(MarkerType2) {
   MarkerType2.Arrow = "arrow", MarkerType2.ArrowClosed = "arrowclosed";
-})(MarkerType || (MarkerType = {}));
-var Position;
+})(MarkerType$1 || (MarkerType$1 = {}));
+var Position$1;
 (function(Position2) {
   Position2.Left = "left", Position2.Top = "top", Position2.Right = "right", Position2.Bottom = "bottom";
-})(Position || (Position = {}));
+})(Position$1 || (Position$1 = {}));
 const oppositePosition = {
-  [Position.Left]: Position.Right,
-  [Position.Right]: Position.Left,
-  [Position.Top]: Position.Bottom,
-  [Position.Bottom]: Position.Top
+  [Position$1.Left]: Position$1.Right,
+  [Position$1.Right]: Position$1.Left,
+  [Position$1.Top]: Position$1.Bottom,
+  [Position$1.Bottom]: Position$1.Top
 };
 function getConnectionStatus(isValid) {
   return isValid === null ? null : isValid ? "valid" : "invalid";
 }
-const isEdgeBase = (element) => "id" in element && "source" in element && "target" in element, isNodeBase = (element) => "id" in element && "position" in element && !("source" in element) && !("target" in element), isInternalNodeBase = (element) => "id" in element && "internals" in element && !("source" in element) && !("target" in element), getNodePositionWithOrigin = (node2, nodeOrigin = [0, 0]) => {
-  const { width, height } = getNodeDimensions(node2), origin = node2.origin ?? nodeOrigin, offsetX = width * origin[0], offsetY = height * origin[1];
+const isEdgeBase = (element) => "id" in element && "source" in element && "target" in element, isNodeBase = (element) => "id" in element && "position" in element && !("source" in element) && !("target" in element), isInternalNodeBase$1 = (element) => "id" in element && "internals" in element && !("source" in element) && !("target" in element), getNodePositionWithOrigin$1 = (node2, nodeOrigin = [0, 0]) => {
+  const { width, height } = getNodeDimensions$1(node2), origin = node2.origin ?? nodeOrigin, offsetX = width * origin[0], offsetY = height * origin[1];
   return {
     x: node2.position.x - offsetX,
     y: node2.position.y - offsetY
@@ -24801,11 +24768,11 @@ const isEdgeBase = (element) => "id" in element && "source" in element && "targe
   const box = nodes.reduce((currBox, nodeOrId) => {
     const isId = typeof nodeOrId == "string";
     let currentNode = !params.nodeLookup && !isId ? nodeOrId : void 0;
-    params.nodeLookup && (currentNode = isId ? params.nodeLookup.get(nodeOrId) : isInternalNodeBase(nodeOrId) ? nodeOrId : params.nodeLookup.get(nodeOrId.id));
+    params.nodeLookup && (currentNode = isId ? params.nodeLookup.get(nodeOrId) : isInternalNodeBase$1(nodeOrId) ? nodeOrId : params.nodeLookup.get(nodeOrId.id));
     const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
-    return getBoundsOfBoxes(currBox, nodeBox);
+    return getBoundsOfBoxes$1(currBox, nodeBox);
   }, { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 });
-  return boxToRect(box);
+  return boxToRect$1(box);
 }, getInternalNodesBounds = (nodeLookup, params = {}) => {
   if (nodeLookup.size === 0)
     return { x: 0, y: 0, width: 0, height: 0 };
@@ -24813,9 +24780,9 @@ const isEdgeBase = (element) => "id" in element && "source" in element && "targe
   return nodeLookup.forEach((node2) => {
     if (params.filter === void 0 || params.filter(node2)) {
       const nodeBox = nodeToBox(node2);
-      box = getBoundsOfBoxes(box, nodeBox);
+      box = getBoundsOfBoxes$1(box, nodeBox);
     }
-  }), boxToRect(box);
+  }), boxToRect$1(box);
 }, getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = !1, excludeNonSelectableNodes = !1) => {
   const paneRect = {
     ...pointToRendererPoint(rect, [tx, ty, tScale]),
@@ -24826,7 +24793,7 @@ const isEdgeBase = (element) => "id" in element && "source" in element && "targe
     const { measured, selectable = !0, hidden: hidden2 = !1 } = node2;
     if (excludeNonSelectableNodes && !selectable || hidden2)
       continue;
-    const width = measured.width ?? node2.width ?? node2.initialWidth ?? null, height = measured.height ?? node2.height ?? node2.initialHeight ?? null, overlappingArea = getOverlappingArea(paneRect, nodeToRect(node2)), area = (width ?? 0) * (height ?? 0), partiallyVisible = partially && overlappingArea > 0;
+    const width = measured.width ?? node2.width ?? node2.initialWidth ?? null, height = measured.height ?? node2.height ?? node2.initialHeight ?? null, overlappingArea = getOverlappingArea(paneRect, nodeToRect$1(node2)), area = (width ?? 0) * (height ?? 0), partiallyVisible = partially && overlappingArea > 0;
     (!node2.internals.handleBounds || partiallyVisible || overlappingArea >= area || node2.dragging) && visibleNodes.push(node2);
   }
   return visibleNodes;
@@ -24845,7 +24812,7 @@ function getFitViewNodes(nodeLookup, options) {
 async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
   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);
+  const nodesToFit = getFitViewNodes(nodes, options), bounds = getInternalNodesBounds(nodesToFit), viewport = getViewportForBounds$1(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
   return await panZoom.setViewport(viewport, { duration: options?.duration }), Promise.resolve(!0);
 }
 function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError }) {
@@ -24896,37 +24863,37 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
   });
   return typeof onBeforeDeleteResult == "boolean" ? onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] } : onBeforeDeleteResult;
 }
-const clamp = (val, min2 = 0, max2 = 1) => Math.min(Math.max(val, min2), max2), clampPosition = (position = { x: 0, y: 0 }, extent, dimensions) => ({
-  x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),
-  y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0))
+const clamp$1 = (val, min2 = 0, max2 = 1) => Math.min(Math.max(val, min2), max2), clampPosition = (position = { x: 0, y: 0 }, extent, dimensions) => ({
+  x: clamp$1(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),
+  y: clamp$1(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0))
 });
 function clampPositionToParent(childPosition, childDimensions, parent) {
-  const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent), { x: parentX, y: parentY } = parent.internals.positionAbsolute;
+  const { width: parentWidth, height: parentHeight } = getNodeDimensions$1(parent), { x: parentX, y: parentY } = parent.internals.positionAbsolute;
   return clampPosition(childPosition, [
     [parentX, parentY],
     [parentX + parentWidth, parentY + parentHeight]
   ], childDimensions);
 }
-const calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs(value - min2), 1, min2) / min2 : value > max2 ? -clamp(Math.abs(value - max2), 1, min2) / min2 : 0, calcAutoPan = (pos, bounds, speed = 15, distance2 = 40) => {
+const calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp$1(Math.abs(value - min2), 1, min2) / min2 : value > max2 ? -clamp$1(Math.abs(value - max2), 1, min2) / min2 : 0, calcAutoPan = (pos, bounds, speed = 15, distance2 = 40) => {
   const xMovement = calcAutoPanVelocity(pos.x, distance2, bounds.width - distance2) * speed, yMovement = calcAutoPanVelocity(pos.y, distance2, bounds.height - distance2) * speed;
   return [xMovement, yMovement];
-}, getBoundsOfBoxes = (box1, box2) => ({
+}, getBoundsOfBoxes$1 = (box1, box2) => ({
   x: Math.min(box1.x, box2.x),
   y: Math.min(box1.y, box2.y),
   x2: Math.max(box1.x2, box2.x2),
   y2: Math.max(box1.y2, box2.y2)
-}), rectToBox = ({ x: x2, y: y2, width, height }) => ({
+}), rectToBox$1 = ({ x: x2, y: y2, width, height }) => ({
   x: x2,
   y: y2,
   x2: x2 + width,
   y2: y2 + height
-}), boxToRect = ({ x: x2, y: y2, x2: x22, y2: y22 }) => ({
+}), boxToRect$1 = ({ x: x2, y: y2, x2: x22, y2: y22 }) => ({
   x: x2,
   y: y2,
   width: x22 - x2,
   height: y22 - y2
-}), nodeToRect = (node2, nodeOrigin = [0, 0]) => {
-  const { x: x2, y: y2 } = isInternalNodeBase(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin(node2, nodeOrigin);
+}), nodeToRect$1 = (node2, nodeOrigin = [0, 0]) => {
+  const { x: x2, y: y2 } = isInternalNodeBase$1(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin$1(node2, nodeOrigin);
   return {
     x: x2,
     y: y2,
@@ -24934,14 +24901,14 @@ const calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs
     height: node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0
   };
 }, nodeToBox = (node2, nodeOrigin = [0, 0]) => {
-  const { x: x2, y: y2 } = isInternalNodeBase(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin(node2, nodeOrigin);
+  const { x: x2, y: y2 } = isInternalNodeBase$1(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin$1(node2, nodeOrigin);
   return {
     x: x2,
     y: y2,
     x2: x2 + (node2.measured?.width ?? node2.width ?? node2.initialWidth ?? 0),
     y2: y2 + (node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0)
   };
-}, getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2))), getOverlappingArea = (rectA, rectB) => {
+}, getBoundsOfRects$1 = (rect1, rect2) => boxToRect$1(getBoundsOfBoxes$1(rectToBox$1(rect1), rectToBox$1(rect2))), getOverlappingArea = (rectA, rectB) => {
   const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)), yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
   return Math.ceil(xOverlap * yOverlap);
 }, isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y), isNumeric = (n2) => !isNaN(n2) && isFinite(n2), devWarn = (id2, message) => {
@@ -24954,11 +24921,11 @@ const calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs
     y: (y2 - ty) / tScale
   };
   return snapToGrid ? snapPosition(position, snapGrid) : position;
-}, rendererPointToPoint = ({ x: x2, y: y2 }, [tx, ty, tScale]) => ({
+}, rendererPointToPoint$1 = ({ x: x2, y: y2 }, [tx, ty, tScale]) => ({
   x: x2 * tScale + tx,
   y: y2 * tScale + ty
 });
-function parsePadding(padding, viewport) {
+function parsePadding$1(padding, viewport) {
   if (typeof padding == "number")
     return Math.floor(viewport - viewport / (1 + padding));
   if (typeof padding == "string" && padding.endsWith("px")) {
@@ -24973,9 +24940,9 @@ function parsePadding(padding, viewport) {
   }
   return console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`), 0;
 }
-function parsePaddings(padding, width, height) {
+function parsePaddings$1(padding, width, height) {
   if (typeof padding == "string" || typeof padding == "number") {
-    const paddingY = parsePadding(padding, height), paddingX = parsePadding(padding, width);
+    const paddingY = parsePadding$1(padding, height), paddingX = parsePadding$1(padding, width);
     return {
       top: paddingY,
       right: paddingX,
@@ -24986,13 +24953,13 @@ function parsePaddings(padding, width, height) {
     };
   }
   if (typeof padding == "object") {
-    const top = parsePadding(padding.top ?? padding.y ?? 0, height), bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height), left = parsePadding(padding.left ?? padding.x ?? 0, width), right = parsePadding(padding.right ?? padding.x ?? 0, width);
+    const top = parsePadding$1(padding.top ?? padding.y ?? 0, height), bottom = parsePadding$1(padding.bottom ?? padding.y ?? 0, height), left = parsePadding$1(padding.left ?? padding.x ?? 0, width), right = parsePadding$1(padding.right ?? padding.x ?? 0, width);
     return { top, right, bottom, left, x: left + right, y: top + bottom };
   }
   return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0 };
 }
-function calculateAppliedPaddings(bounds, x2, y2, zoom2, width, height) {
-  const { x: left, y: top } = rendererPointToPoint(bounds, [x2, y2, zoom2]), { x: boundRight, y: boundBottom } = rendererPointToPoint({ x: bounds.x + bounds.width, y: bounds.y + bounds.height }, [x2, y2, zoom2]), right = width - boundRight, bottom = height - boundBottom;
+function calculateAppliedPaddings$1(bounds, x2, y2, zoom2, width, height) {
+  const { x: left, y: top } = rendererPointToPoint$1(bounds, [x2, y2, zoom2]), { x: boundRight, y: boundBottom } = rendererPointToPoint$1({ x: bounds.x + bounds.width, y: bounds.y + bounds.height }, [x2, y2, zoom2]), right = width - boundRight, bottom = height - boundBottom;
   return {
     left: Math.floor(left),
     top: Math.floor(top),
@@ -25000,8 +24967,8 @@ function calculateAppliedPaddings(bounds, x2, y2, zoom2, width, height) {
     bottom: Math.floor(bottom)
   };
 }
-const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
-  const p2 = parsePaddings(padding, width, height), xZoom = (width - p2.x) / bounds.width, yZoom = (height - p2.y) / bounds.height, zoom2 = Math.min(xZoom, yZoom), clampedZoom = clamp(zoom2, minZoom, maxZoom), boundsCenterX = bounds.x + bounds.width / 2, boundsCenterY = bounds.y + bounds.height / 2, x2 = width / 2 - boundsCenterX * clampedZoom, y2 = height / 2 - boundsCenterY * clampedZoom, newPadding = calculateAppliedPaddings(bounds, x2, y2, clampedZoom, width, height), offset2 = {
+const getViewportForBounds$1 = (bounds, width, height, minZoom, maxZoom, padding) => {
+  const p2 = parsePaddings$1(padding, width, height), xZoom = (width - p2.x) / bounds.width, yZoom = (height - p2.y) / bounds.height, zoom2 = Math.min(xZoom, yZoom), clampedZoom = clamp$1(zoom2, minZoom, maxZoom), boundsCenterX = bounds.x + bounds.width / 2, boundsCenterY = bounds.y + bounds.height / 2, x2 = width / 2 - boundsCenterX * clampedZoom, y2 = height / 2 - boundsCenterY * clampedZoom, newPadding = calculateAppliedPaddings$1(bounds, x2, y2, clampedZoom, width, height), offset2 = {
     left: Math.min(newPadding.left - p2.left, 0),
     top: Math.min(newPadding.top - p2.top, 0),
     right: Math.min(newPadding.right - p2.right, 0),
@@ -25012,11 +24979,11 @@ const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding)
     y: y2 - offset2.top + offset2.bottom,
     zoom: clampedZoom
   };
-}, isMacOs = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
+}, isMacOs$1 = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
 function isCoordinateExtent(extent) {
   return extent !== void 0 && extent !== "parent";
 }
-function getNodeDimensions(node2) {
+function getNodeDimensions$1(node2) {
   return {
     width: node2.measured?.width ?? node2.width ?? node2.initialWidth ?? 0,
     height: node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0
@@ -25078,41 +25045,41 @@ const isMouseEvent = (event) => "clientX" in event, getEventPosition = (event, b
     };
   });
 };
-function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY }) {
+function getBezierEdgeCenter$1({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY }) {
   const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125, centerY2 = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125, offsetX = Math.abs(centerX - sourceX), offsetY = Math.abs(centerY2 - sourceY);
   return [centerX, centerY2, offsetX, offsetY];
 }
-function calculateControlOffset(distance2, curvature) {
+function calculateControlOffset$1(distance2, curvature) {
   return distance2 >= 0 ? 0.5 * distance2 : curvature * 25 * Math.sqrt(-distance2);
 }
-function getControlWithCurvature({ pos, x1, y1, x2, y2, c: c2 }) {
+function getControlWithCurvature$1({ pos, x1, y1, x2, y2, c: c2 }) {
   switch (pos) {
-    case Position.Left:
-      return [x1 - calculateControlOffset(x1 - x2, c2), y1];
-    case Position.Right:
-      return [x1 + calculateControlOffset(x2 - x1, c2), y1];
-    case Position.Top:
-      return [x1, y1 - calculateControlOffset(y1 - y2, c2)];
-    case Position.Bottom:
-      return [x1, y1 + calculateControlOffset(y2 - y1, c2)];
-  }
-}
-function getBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
-  const [sourceControlX, sourceControlY] = getControlWithCurvature({
+    case Position$1.Left:
+      return [x1 - calculateControlOffset$1(x1 - x2, c2), y1];
+    case Position$1.Right:
+      return [x1 + calculateControlOffset$1(x2 - x1, c2), y1];
+    case Position$1.Top:
+      return [x1, y1 - calculateControlOffset$1(y1 - y2, c2)];
+    case Position$1.Bottom:
+      return [x1, y1 + calculateControlOffset$1(y2 - y1, c2)];
+  }
+}
+function getBezierPath$1({ sourceX, sourceY, sourcePosition = Position$1.Bottom, targetX, targetY, targetPosition = Position$1.Top, curvature = 0.25 }) {
+  const [sourceControlX, sourceControlY] = getControlWithCurvature$1({
     pos: sourcePosition,
     x1: sourceX,
     y1: sourceY,
     x2: targetX,
     y2: targetY,
     c: curvature
-  }), [targetControlX, targetControlY] = getControlWithCurvature({
+  }), [targetControlX, targetControlY] = getControlWithCurvature$1({
     pos: targetPosition,
     x1: targetX,
     y1: targetY,
     x2: sourceX,
     y2: sourceY,
     c: curvature
-  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter$1({
     sourceX,
     sourceY,
     targetX,
@@ -25141,7 +25108,7 @@ function getElevatedEdgeZIndex({ sourceNode, targetNode, selected: selected2 = !
   return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform: transform2 }) {
-  const edgeBox = getBoundsOfBoxes(nodeToBox(sourceNode), nodeToBox(targetNode));
+  const edgeBox = getBoundsOfBoxes$1(nodeToBox(sourceNode), nodeToBox(targetNode));
   edgeBox.x === edgeBox.x2 && (edgeBox.x2 += 1), edgeBox.y === edgeBox.y2 && (edgeBox.y2 += 1);
   const viewRect = {
     x: -transform2[0] / transform2[2],
@@ -25149,7 +25116,7 @@ function isEdgeVisible({ sourceNode, targetNode, width, height, transform: trans
     width: width / transform2[2],
     height: height / transform2[2]
   };
-  return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;
+  return getOverlappingArea(viewRect, boxToRect$1(edgeBox)) > 0;
 }
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }) => `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`, connectionExists = (edge, edges) => edges.some((el) => el.source === edge.source && el.target === edge.target && (el.sourceHandle === edge.sourceHandle || !el.sourceHandle && !edge.sourceHandle) && (el.targetHandle === edge.targetHandle || !el.targetHandle && !edge.targetHandle)), addEdge = (edgeParams, edges) => {
   if (!edgeParams.source || !edgeParams.target)
@@ -25170,12 +25137,12 @@ function getStraightPath({ sourceX, sourceY, targetX, targetY }) {
   return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY];
 }
 const handleDirections = {
-  [Position.Left]: { x: -1, y: 0 },
-  [Position.Right]: { x: 1, y: 0 },
-  [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 = (a2, b2) => Math.sqrt(Math.pow(b2.x - a2.x, 2) + Math.pow(b2.y - a2.y, 2));
-function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset: offset2 }) {
+  [Position$1.Left]: { x: -1, y: 0 },
+  [Position$1.Right]: { x: 1, y: 0 },
+  [Position$1.Top]: { x: 0, y: -1 },
+  [Position$1.Bottom]: { x: 0, y: 1 }
+}, getDirection = ({ source, sourcePosition = Position$1.Bottom, target }) => sourcePosition === Position$1.Left || sourcePosition === Position$1.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 = (a2, b2) => Math.sqrt(Math.pow(b2.x - a2.x, 2) + Math.pow(b2.y - a2.y, 2));
+function getPoints({ source, sourcePosition = Position$1.Bottom, target, targetPosition = Position$1.Top, center, offset: offset2 }) {
   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,
@@ -25233,7 +25200,7 @@ function getBend(a2, b2, c2, size2) {
   const xDir = a2.x < c2.x ? 1 : -1, yDir = a2.y < c2.y ? -1 : 1;
   return `L ${x2},${y2 + bendSize * yDir}Q ${x2},${y2} ${x2 + bendSize * xDir},${y2}`;
 }
-function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius: borderRadius2 = 5, centerX, centerY: centerY2, offset: offset2 = 20 }) {
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position$1.Bottom, targetX, targetY, targetPosition = Position$1.Top, borderRadius: borderRadius2 = 5, centerX, centerY: centerY2, offset: offset2 = 20 }) {
   const [points, labelX, labelY, offsetX, offsetY] = getPoints({
     source: { x: sourceX, y: sourceY },
     sourcePosition,
@@ -25256,7 +25223,7 @@ function getEdgePosition(params) {
     return null;
   const sourceHandleBounds = sourceNode.internals.handleBounds || toHandleBounds(sourceNode.handles), targetHandleBounds = targetNode.internals.handleBounds || toHandleBounds(targetNode.handles), sourceHandle = getHandle$1(sourceHandleBounds?.source ?? [], params.sourceHandle), targetHandle = getHandle$1(
     // when connection type is loose we can define all handles as sources and connect source -> source
-    params.connectionMode === ConnectionMode.Strict ? targetHandleBounds?.target ?? [] : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
+    params.connectionMode === ConnectionMode$1.Strict ? targetHandleBounds?.target ?? [] : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
     params.targetHandle
   );
   if (!sourceHandle || !targetHandle)
@@ -25265,7 +25232,7 @@ function getEdgePosition(params) {
       sourceHandle: params.sourceHandle,
       targetHandle: params.targetHandle
     })), null;
-  const sourcePosition = sourceHandle?.position || Position.Bottom, targetPosition = targetHandle?.position || Position.Top, source = getHandlePosition(sourceNode, sourceHandle, sourcePosition), target = getHandlePosition(targetNode, targetHandle, targetPosition);
+  const sourcePosition = sourceHandle?.position || Position$1.Bottom, targetPosition = targetHandle?.position || Position$1.Top, source = getHandlePosition(sourceNode, sourceHandle, sourcePosition), target = getHandlePosition(targetNode, targetHandle, targetPosition);
   return {
     sourceX: source.x,
     sourceY: source.y,
@@ -25286,18 +25253,18 @@ function toHandleBounds(handles) {
     target
   };
 }
-function getHandlePosition(node2, handle, fallbackPosition = Position.Left, center = !1) {
-  const x2 = (handle?.x ?? 0) + node2.internals.positionAbsolute.x, y2 = (handle?.y ?? 0) + node2.internals.positionAbsolute.y, { width, height } = handle ?? getNodeDimensions(node2);
+function getHandlePosition(node2, handle, fallbackPosition = Position$1.Left, center = !1) {
+  const x2 = (handle?.x ?? 0) + node2.internals.positionAbsolute.x, y2 = (handle?.y ?? 0) + node2.internals.positionAbsolute.y, { width, height } = handle ?? getNodeDimensions$1(node2);
   if (center)
     return { x: x2 + width / 2, y: y2 + height / 2 };
   switch (handle?.position ?? fallbackPosition) {
-    case Position.Top:
+    case Position$1.Top:
       return { x: x2 + width / 2, y: y2 };
-    case Position.Right:
+    case Position$1.Right:
       return { x: x2 + width, y: y2 + height / 2 };
-    case Position.Bottom:
+    case Position$1.Bottom:
       return { x: x2 + width / 2, y: y2 + height };
-    case Position.Left:
+    case Position$1.Left:
       return { x: x2, y: y2 + height / 2 };
   }
 }
@@ -25324,16 +25291,16 @@ function getNodeToolbarTransform(nodeRect, viewport, position, offset2, align) {
     nodeRect.y * viewport.zoom + viewport.y - offset2
   ], shift2 = [-100 * alignmentOffset, -100];
   switch (position) {
-    case Position.Right:
+    case Position$1.Right:
       pos = [
         (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset2,
         (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
       ], shift2 = [0, -100 * alignmentOffset];
       break;
-    case Position.Bottom:
+    case Position$1.Bottom:
       pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset2, shift2[1] = 0;
       break;
-    case Position.Left:
+    case Position$1.Left:
       pos = [
         nodeRect.x * viewport.zoom + viewport.x - offset2,
         (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
@@ -25363,7 +25330,7 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
     if (node2.parentId)
       updateChildNode(node2, nodeLookup, parentLookup, _options);
     else {
-      const positionWithOrigin = getNodePositionWithOrigin(node2, _options.nodeOrigin), extent = isCoordinateExtent(node2.extent) ? node2.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node2));
+      const positionWithOrigin = getNodePositionWithOrigin$1(node2, _options.nodeOrigin), extent = isCoordinateExtent(node2.extent) ? node2.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions$1(node2));
       node2.internals.positionAbsolute = clampedPosition;
     }
 }
@@ -25377,7 +25344,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     if (_options.checkEquality && userNode === internalNode?.internals.userNode)
       nodeLookup.set(userNode.id, internalNode);
     else {
-      const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
+      const positionWithOrigin = getNodePositionWithOrigin$1(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions$1(userNode));
       internalNode = {
         ..._options.defaults,
         ...userNode,
@@ -25425,7 +25392,7 @@ function calculateZ(node2, selectedNodeZ) {
   return (isNumeric(node2.zIndex) ? node2.zIndex : 0) + (node2.selected ? selectedNodeZ : 0);
 }
 function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ) {
-  const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin;
+  const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions$1(childNode), positionWithOrigin = getNodePositionWithOrigin$1(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin;
   let absolutePosition = clampPosition({ x: parentX + clampedPosition.x, y: parentY + clampedPosition.y }, nodeExtent, childDimensions);
   childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
   const childZ = calculateZ(childNode, selectedNodeZ), parentZ = parentNode.internals.z ?? 0;
@@ -25441,11 +25408,11 @@ function handleExpandParent(children2, nodeLookup, parentLookup, nodeOrigin = [0
     const parent = nodeLookup.get(child.parentId);
     if (!parent)
       continue;
-    const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent), expandedRect = getBoundsOfRects(parentRect, child.rect);
+    const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect$1(parent), expandedRect = getBoundsOfRects$1(parentRect, child.rect);
     parentExpansions.set(child.parentId, { expandedRect, parent });
   }
   return parentExpansions.size > 0 && parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
-    const positionAbsolute = parent.internals.positionAbsolute, dimensions = getNodeDimensions(parent), origin = parent.origin ?? nodeOrigin, xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0, yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0, newWidth = Math.max(dimensions.width, Math.round(expandedRect.width)), newHeight = Math.max(dimensions.height, Math.round(expandedRect.height)), widthChange = (newWidth - dimensions.width) * origin[0], heightChange = (newHeight - dimensions.height) * origin[1];
+    const positionAbsolute = parent.internals.positionAbsolute, dimensions = getNodeDimensions$1(parent), origin = parent.origin ?? nodeOrigin, xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0, yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0, newWidth = Math.max(dimensions.width, Math.round(expandedRect.width)), newHeight = Math.max(dimensions.height, Math.round(expandedRect.height)), widthChange = (newWidth - dimensions.width) * origin[0], heightChange = (newHeight - dimensions.height) * origin[1];
     (xChange > 0 || yChange > 0 || widthChange || heightChange) && (changes.push({
       id: parentId,
       type: "position",
@@ -25517,7 +25484,7 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
       }), node2.expandParent && node2.parentId && parentExpandChildren.push({
         id: node2.id,
         parentId: node2.parentId,
-        rect: nodeToRect(newNode, nodeOrigin)
+        rect: nodeToRect$1(newNode, nodeOrigin)
       }));
     }
   }
@@ -25634,7 +25601,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
       let hasChange = !1, nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
       if (dragItems.size > 1 && nodeExtent) {
         const rect = getInternalNodesBounds(dragItems);
-        nodesBox = rectToBox(rect);
+        nodesBox = rectToBox$1(rect);
       }
       for (const [id2, dragItem] of dragItems) {
         if (!nodeLookup.has(id2))
@@ -25743,7 +25710,7 @@ function getNodesWithinDistance(position, nodeLookup, distance2) {
     height: distance2 * 2
   };
   for (const node2 of nodeLookup.values())
-    getOverlappingArea(rect, nodeToRect(node2)) > 0 && nodes.push(node2);
+    getOverlappingArea(rect, nodeToRect$1(node2)) > 0 && nodes.push(node2);
   return nodes;
 }
 const ADDITIONAL_DISTANCE = 250;
@@ -25806,7 +25773,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   }, fromNodeInternal = nodeLookup.get(nodeId), newConnection = {
     inProgress: !0,
     isValid: null,
-    from: getHandlePosition(fromNodeInternal, fromHandle, Position.Left, !0),
+    from: getHandlePosition(fromNodeInternal, fromHandle, Position$1.Left, !0),
     fromHandle,
     fromPosition: fromHandle.position,
     fromNode: fromNodeInternal,
@@ -25842,7 +25809,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       // from stays the same
       ...previousConnection,
       isValid,
-      to: closestHandle && isValid ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform2) : position,
+      to: closestHandle && isValid ? rendererPointToPoint$1({ x: closestHandle.x, y: closestHandle.y }, transform2) : position,
       toHandle: result.toHandle,
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
       toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null
@@ -25877,7 +25844,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
       targetHandle: isTarget ? fromHandleId : handleId
     };
     result.connection = connection;
-    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
+    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode$1.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
     result.isValid = isValid && isValidConnection(connection), result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, !1);
   }
   return result;
@@ -25944,7 +25911,7 @@ const viewChanged = (prevViewport, eventViewport) => prevViewport.x !== eventVie
   const hasDuration = typeof duration == "number" && duration > 0;
   return hasDuration || onEnd(), hasDuration ? selection2.transition().duration(duration).on("end", onEnd) : selection2;
 }, wheelDelta = (event) => {
-  const factor = event.ctrlKey && isMacOs() ? 10 : 1;
+  const factor = event.ctrlKey && isMacOs$1() ? 10 : 1;
   return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 2e-3) * factor;
 };
 function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, onPanZoomStart, onPanZoom, onPanZoomEnd }) {
@@ -25959,8 +25926,8 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
       return;
     }
     const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
-    let deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize, deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
-    !isMacOs() && event.shiftKey && panOnScrollMode !== PanOnScrollMode.Vertical && (deltaX = event.deltaY * deltaNormalize, deltaY = 0), d3Zoom.translateBy(
+    let deltaX = panOnScrollMode === PanOnScrollMode$1.Vertical ? 0 : event.deltaX * deltaNormalize, deltaY = panOnScrollMode === PanOnScrollMode$1.Horizontal ? 0 : event.deltaY * deltaNormalize;
+    !isMacOs$1() && event.shiftKey && panOnScrollMode !== PanOnScrollMode$1.Vertical && (deltaX = event.deltaY * deltaNormalize, deltaY = 0), d3Zoom.translateBy(
       d3Selection,
       -(deltaX / currentZoom) * panOnScrollSpeed,
       -(deltaY / currentZoom) * panOnScrollSpeed,
@@ -25975,7 +25942,8 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
 }
 function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
   return function(event, d2) {
-    if (!preventScrolling && event.type === "wheel" && !event.ctrlKey || isWrappedWithClass(event, noWheelClassName))
+    const isWheel = event.type === "wheel", preventZoom = !preventScrolling && isWheel && !event.ctrlKey, hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);
+    if (event.ctrlKey && isWheel && hasNoWheelClass && event.preventDefault(), preventZoom || hasNoWheelClass)
       return null;
     event.preventDefault(), d3ZoomHandler.call(this, event, d2);
   };
@@ -26035,7 +26003,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
   setViewportConstrained({
     x: viewport.x,
     y: viewport.y,
-    zoom: clamp(viewport.zoom, minZoom, maxZoom)
+    zoom: clamp$1(viewport.zoom, minZoom, maxZoom)
   }, [
     [0, 0],
     [bbox.width, bbox.height]
@@ -26159,10 +26127,10 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
     setClickDistance
   };
 }
-var ResizeControlVariant;
+var ResizeControlVariant$1;
 (function(ResizeControlVariant2) {
   ResizeControlVariant2.Line = "line", ResizeControlVariant2.Handle = "handle";
-})(ResizeControlVariant || (ResizeControlVariant = {}));
+})(ResizeControlVariant$1 || (ResizeControlVariant$1 = {}));
 function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY }) {
   const deltaWidth = width - prevWidth, deltaHeight = height - prevHeight, direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
   return deltaWidth && affectsX && (direction[0] = direction[0] * -1), deltaHeight && affectsY && (direction[1] = direction[1] * -1), direction;
@@ -26331,7 +26299,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
       }), nextValues = { ...prevValues, direction };
       shouldResize?.(event, nextValues) !== !1 && (onResize?.(event, nextValues), onChange(change, childChanges));
     }).on("end", (event) => {
-      onResizeEnd?.(event, { ...prevValues }), onEnd?.();
+      onResizeEnd?.(event, { ...prevValues }), onEnd?.({ ...prevValues });
     });
     selection2.call(dragHandler);
   }
@@ -26660,7 +26628,7 @@ const useViewportHelper = () => {
       }, { duration: options?.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     fitBounds: async (bounds, options) => {
-      const { width, height, minZoom, maxZoom, panZoom } = store.getState(), viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
+      const { width, height, minZoom, maxZoom, panZoom } = store.getState(), viewport = getViewportForBounds$1(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
       return panZoom ? (await panZoom.setViewport(viewport, { duration: options?.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     screenToFlowPosition: (clientPosition, options = {}) => {
@@ -26677,7 +26645,7 @@ const useViewportHelper = () => {
       const { transform: transform2, domNode } = store.getState();
       if (!domNode)
         return flowPosition;
-      const { x: domX, y: domY } = domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint(flowPosition, transform2);
+      const { x: domX, y: domY } = domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint$1(flowPosition, transform2);
       return {
         x: rendererPosition.x + domX,
         y: rendererPosition.y + domY
@@ -26804,12 +26772,12 @@ function BatchProvider({ children: children2 }) {
       next = typeof payload == "function" ? payload(next) : payload;
     if (hasDefaultNodes)
       setNodes(next);
-    else if (onNodesChange) {
+    else {
       const changes = getElementsDiffChanges({
         items: next,
         lookup: nodeLookup
       });
-      changes.length > 0 ? onNodesChange(changes) : fitViewQueued && window.requestAnimationFrame(() => {
+      changes.length > 0 ? onNodesChange?.(changes) : fitViewQueued && window.requestAnimationFrame(() => {
         const { fitViewQueued: fitViewQueued2, nodes: nodes2, setNodes: setNodes2 } = store.getState();
         fitViewQueued2 && setNodes2(nodes2);
       });
@@ -26846,7 +26814,7 @@ function useReactFlow() {
         width: nodeToUse.measured?.width ?? nodeToUse.width,
         height: nodeToUse.measured?.height ?? nodeToUse.height
       };
-      return nodeToRect(nodeWithPosition);
+      return nodeToRect$1(nodeWithPosition);
     }, updateNode = (id2, nodeUpdate, options = { replace: !1 }) => {
       setNodes((prevNodes) => prevNodes.map((node2) => {
         if (node2.id === id2) {
@@ -26919,7 +26887,7 @@ function useReactFlow() {
           const internalNode = store.getState().nodeLookup.get(n2.id);
           if (internalNode && !isRect && (n2.id === nodeOrRect.id || !internalNode.internals.positionAbsolute))
             return !1;
-          const currNodeRect = nodeToRect(hasNodesOption ? n2 : internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+          const currNodeRect = nodeToRect$1(hasNodesOption ? n2 : internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
           return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
         }) : [];
       },
@@ -27002,7 +26970,7 @@ const containerStyle = {
   userSelectionActive: s2.userSelectionActive,
   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 }) {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode$1.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: lib2 } = useStore$1(selector$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
   useResizeHandler(zoomPane);
   const onTransformChange = useCallback((transform2) => {
@@ -27096,7 +27064,7 @@ const wrapHandler = (handler, containerRef) => (event) => {
   connectionInProgress: s2.connection.inProgress,
   dragging: s2.paneDragging
 });
-function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode$1.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) => {
     if (selectionInProgress.current || connectionInProgress) {
       selectionInProgress.current = !1;
@@ -27138,7 +27106,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
       width: Math.abs(mouseX - startX),
       height: Math.abs(mouseY - startY)
     }, prevSelectedNodeIds = selectedNodeIds.current, prevSelectedEdgeIds = selectedEdgeIds.current;
-    selectedNodeIds.current = new Set(getNodesInside(nodeLookup, nextUserSelectRect, transform2, selectionMode === SelectionMode.Partial, !0).map((node2) => node2.id)), selectedEdgeIds.current = /* @__PURE__ */ new Set();
+    selectedNodeIds.current = new Set(getNodesInside(nodeLookup, nextUserSelectRect, transform2, selectionMode === SelectionMode$1.Partial, !0).map((node2) => node2.id)), selectedEdgeIds.current = /* @__PURE__ */ new Set();
     const edgesSelectable = defaultEdgeOptions?.selectable ?? !0;
     for (const nodeId of selectedNodeIds.current) {
       const connections = connectionLookup.get(nodeId);
@@ -27255,13 +27223,13 @@ const useNodeId = () => useContext(NodeIdContext), selector$g = (s2) => ({
     connectingFrom: fromHandle?.nodeId === nodeId && fromHandle?.id === handleId && fromHandle?.type === type,
     connectingTo,
     clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.id === handleId && clickHandle?.type === type,
-    isPossibleEndHandle: connectionMode === ConnectionMode.Strict ? fromHandle?.type !== type : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
+    isPossibleEndHandle: connectionMode === ConnectionMode$1.Strict ? fromHandle?.type !== type : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
     connectionInProcess: !!fromHandle,
     clickConnectionInProcess: !!clickHandle,
     valid: connectingTo && isValid
   };
 };
-function HandleComponent({ type = "source", position = Position.Top, isValidConnection, isConnectable = !0, isConnectableStart = !0, isConnectableEnd = !0, id: id2, onConnect, children: children2, className, onMouseDown, onTouchStart, ...rest }, ref) {
+function HandleComponent({ type = "source", position = Position$1.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);
   nodeId || store.getState().onError?.("010", errorMessages.error010());
   const onConnectExtended = (params) => {
@@ -27357,16 +27325,16 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
   ]), onMouseDown: onPointerDown2, onTouchStart: onPointerDown2, onClick: connectOnClick ? onClick : void 0, ref, ...rest, children: children2 });
 }
 const Handle = memo$2(fixedForwardRef(HandleComponent));
-function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
+function InputNode({ data, isConnectable, sourcePosition = Position$1.Bottom }) {
   return jsxs(Fragment$1, { children: [data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable })] });
 }
-function DefaultNode({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }) {
+function DefaultNode({ data, isConnectable, targetPosition = Position$1.Top, sourcePosition = Position$1.Bottom }) {
   return jsxs(Fragment$1, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable }), data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable })] });
 }
 function GroupNode() {
   return null;
 }
-function OutputNode({ data, isConnectable, targetPosition = Position.Top }) {
+function OutputNode({ data, isConnectable, targetPosition = Position$1.Top }) {
   return jsxs(Fragment$1, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable }), data?.label] });
 }
 const arrowKeyDiffs = {
@@ -27488,7 +27456,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
   }), moveSelectedNodes = useMoveSelectedNodes();
   if (node2.hidden)
     return null;
-  const nodeDimensions = getNodeDimensions(node2), inlineDimensions = getNodeInlineStyleDimensions(node2), hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave, onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...internals.userNode }) : void 0, onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...internals.userNode }) : void 0, onMouseLeaveHandler = onMouseLeave ? (event) => onMouseLeave(event, { ...internals.userNode }) : void 0, onContextMenuHandler = onContextMenu ? (event) => onContextMenu(event, { ...internals.userNode }) : void 0, onDoubleClickHandler = onDoubleClick ? (event) => onDoubleClick(event, { ...internals.userNode }) : void 0, onSelectNodeHandler = (event) => {
+  const nodeDimensions = getNodeDimensions$1(node2), inlineDimensions = getNodeInlineStyleDimensions(node2), hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave, onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...internals.userNode }) : void 0, onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...internals.userNode }) : void 0, onMouseLeaveHandler = onMouseLeave ? (event) => onMouseLeave(event, { ...internals.userNode }) : void 0, onContextMenuHandler = onContextMenu ? (event) => onContextMenu(event, { ...internals.userNode }) : void 0, onDoubleClickHandler = onDoubleClick ? (event) => onDoubleClick(event, { ...internals.userNode }) : void 0, onSelectNodeHandler = (event) => {
     const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
     isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0) && handleNodeClick({
       id: id2,
@@ -27603,8 +27571,8 @@ const ArrowSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => jsx("polyli
   fill: color2,
   strokeWidth
 }, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" }), MarkerSymbols = {
-  [MarkerType.Arrow]: ArrowSymbol,
-  [MarkerType.ArrowClosed]: ArrowClosedSymbol
+  [MarkerType$1.Arrow]: ArrowSymbol,
+  [MarkerType$1.ArrowClosed]: ArrowClosedSymbol
 };
 function useMarkerSymbol(type) {
   const store = useStoreApi();
@@ -27644,9 +27612,9 @@ function BaseEdge({ path, labelX, labelY, label: label2, labelStyle, labelShowBg
   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" }), label2 && isNumeric(labelX) && isNumeric(labelY) ? jsx(EdgeText, { x: labelX, y: labelY, label: label2, 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)];
+  return pos === Position$1.Left || pos === Position$1.Right ? [0.5 * (x1 + x2), y1] : [x1, 0.5 * (y1 + y2)];
 }
-function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top }) {
+function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position$1.Bottom, targetX, targetY, targetPosition = Position$1.Top }) {
   const [sourceControlX, sourceControlY] = getControl({
     pos: sourcePosition,
     x1: sourceX,
@@ -27659,7 +27627,7 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Botto
     y1: targetY,
     x2: sourceX,
     y2: sourceY
-  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter$1({
     sourceX,
     sourceY,
     targetX,
@@ -27678,7 +27646,7 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Botto
   ];
 }
 function createSimpleBezierEdge(params) {
-  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, interactionWidth }) => {
+  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition = Position$1.Bottom, targetPosition = Position$1.Top, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, interactionWidth }) => {
     const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
@@ -27694,7 +27662,7 @@ const SimpleBezierEdge = createSimpleBezierEdge({ isInternal: !1 }), SimpleBezie
 SimpleBezierEdge.displayName = "SimpleBezierEdge";
 SimpleBezierEdgeInternal.displayName = "SimpleBezierEdgeInternal";
 function createSmoothStepEdge(params) {
-  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, sourcePosition = Position.Bottom, targetPosition = Position.Top, markerEnd, markerStart, pathOptions, interactionWidth }) => {
+  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, sourcePosition = Position$1.Bottom, targetPosition = Position$1.Top, markerEnd, markerStart, pathOptions, interactionWidth }) => {
     const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
@@ -27730,8 +27698,8 @@ const StraightEdge = createStraightEdge({ isInternal: !1 }), StraightEdgeInterna
 StraightEdge.displayName = "StraightEdge";
 StraightEdgeInternal.displayName = "StraightEdgeInternal";
 function createBezierEdge(params) {
-  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, pathOptions, interactionWidth }) => {
-    const [path, labelX, labelY] = getBezierPath({
+  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition = Position$1.Bottom, targetPosition = Position$1.Top, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, pathOptions, interactionWidth }) => {
+    const [path, labelX, labelY] = getBezierPath$1({
       sourceX,
       sourceY,
       sourcePosition,
@@ -27759,7 +27727,7 @@ const builtinEdgeTypes = {
   targetY: null,
   sourcePosition: null,
   targetPosition: null
-}, shiftX = (x2, shift2, position) => position === Position.Left ? x2 - shift2 : position === Position.Right ? x2 + shift2 : x2, shiftY = (y2, shift2, position) => position === Position.Top ? y2 - shift2 : position === Position.Bottom ? y2 + shift2 : y2, EdgeUpdaterClassName = "react-flow__edgeupdater";
+}, shiftX = (x2, shift2, position) => position === Position$1.Left ? x2 - shift2 : position === Position$1.Right ? x2 + shift2 : x2, shiftY = (y2, shift2, position) => position === Position$1.Top ? y2 - shift2 : position === Position$1.Bottom ? y2 + shift2 : y2, EdgeUpdaterClassName = "react-flow__edgeupdater";
 function EdgeAnchor({ position, centerX, centerY: centerY2, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type }) {
   return jsx("circle", { onMouseDown, onMouseEnter, onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY2, radius, position), r: radius, stroke: "transparent", fill: "transparent" });
 }
@@ -27917,7 +27885,7 @@ function ConnectionLineWrapper({ containerStyle: containerStyle2, style: style2,
   const { nodesConnectable, width, height, isValid, inProgress } = useStore$1(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 }) => {
+const ConnectionLine = ({ style: style2, type = ConnectionLineType$1.Bezier, CustomComponent, isValid }) => {
   const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
   if (!inProgress)
     return;
@@ -27933,19 +27901,19 @@ const ConnectionLine = ({ style: style2, type = ConnectionLineType.Bezier, Custo
     targetPosition: toPosition
   };
   switch (type) {
-    case ConnectionLineType.Bezier:
-      [path] = getBezierPath(pathParams);
+    case ConnectionLineType$1.Bezier:
+      [path] = getBezierPath$1(pathParams);
       break;
-    case ConnectionLineType.SimpleBezier:
+    case ConnectionLineType$1.SimpleBezier:
       [path] = getSimpleBezierPath(pathParams);
       break;
-    case ConnectionLineType.Step:
+    case ConnectionLineType$1.Step:
       [path] = getSmoothStepPath({
         ...pathParams,
         borderRadius: 0
       });
       break;
-    case ConnectionLineType.SmoothStep:
+    case ConnectionLineType$1.SmoothStep:
       [path] = getSmoothStepPath(pathParams);
       break;
     default:
@@ -27978,7 +27946,7 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
   if (fitView && width && height) {
     const bounds = getInternalNodesBounds(nodeLookup, {
       filter: (node2) => !!((node2.width || node2.initialWidth) && (node2.height || node2.initialHeight))
-    }), { x: x2, y: y2, zoom: zoom2 } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+    }), { x: x2, y: y2, zoom: zoom2 } = getViewportForBounds$1(bounds, width, height, 0.5, 2, 0.1);
     transform2 = [x2, y2, zoom2];
   }
   return {
@@ -28004,7 +27972,7 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
     nodesSelectionActive: !1,
     userSelectionActive: !1,
     userSelectionRect: null,
-    connectionMode: ConnectionMode.Strict,
+    connectionMode: ConnectionMode$1.Strict,
     domNode: null,
     paneDragging: !1,
     noPanClassName: "nopan",
@@ -28224,7 +28192,7 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, 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: debug2, onScroll, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType$1.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode$1.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs$1() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs$1() ? "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$1.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: debug2, onScroll, ...rest }, ref) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode), wrapperOnScroll = useCallback((e2) => {
     e2.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" }), onScroll?.(e2);
   }, [onScroll]);
@@ -28359,7 +28327,7 @@ function MiniMapNodes({
 }
 function NodeComponentWrapperInner({ id: id2, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick }) {
   const { node: node2, x: x2, y: y2, width, height } = useStore$1((s2) => {
-    const node22 = s2.nodeLookup.get(id2), { x: x22, y: y22 } = node22.internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions(node22);
+    const { internals } = s2.nodeLookup.get(id2), node22 = internals.userNode, { x: x22, y: y22 } = internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions$1(node22);
     return {
       node: node22,
       x: x22,
@@ -28381,7 +28349,7 @@ const defaultWidth = 200, defaultHeight = 150, filterHidden = (node2) => !node2.
   };
   return {
     viewBB,
-    boundingRect: s2.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s2.nodeLookup, { filter: filterHidden }), viewBB) : viewBB,
+    boundingRect: s2.nodeLookup.size > 0 ? getBoundsOfRects$1(getInternalNodesBounds(s2.nodeLookup, { filter: filterHidden }), viewBB) : viewBB,
     rfId: s2.rfId,
     panZoom: s2.panZoom,
     translateExtent: s2.translateExtent,
@@ -28442,7 +28410,7 @@ function MiniMapComponent({
     const [x22, y22] = minimapInstance.current?.pointer(event) || [0, 0];
     onClick(event, { x: x22, y: y22 });
   } : void 0, onSvgNodeClick = onNodeClick ? useCallback((event, nodeId) => {
-    const node2 = store.getState().nodeLookup.get(nodeId);
+    const node2 = store.getState().nodeLookup.get(nodeId).internals.userNode;
     onNodeClick(event, node2);
   }, []) : void 0;
   return jsx(Panel, { position, style: {
@@ -28453,14 +28421,14 @@ function MiniMapComponent({
     "--xy-minimap-mask-stroke-width-props": typeof maskStrokeWidth == "number" ? maskStrokeWidth * viewScale : void 0,
     "--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 == "string" ? nodeStrokeWidth : 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: `${x2} ${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${x2 - 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$2(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, 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);
+function ResizeControl({ nodeId, position, variant = ResizeControlVariant$1.Handle, className, style: style2 = {}, children: children2, color: color2, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = !1, shouldResize, onResizeStart, onResize, onResizeEnd }) {
+  const contextNodeId = useNodeId(), id2 = typeof nodeId == "string" ? nodeId : contextNodeId, store = useStoreApi(), resizeControlRef = useRef(null), defaultPosition = variant === ResizeControlVariant$1.Line ? "right" : "bottom-right", controlPosition = position ?? defaultPosition, resizer = useRef(null);
   useEffect(() => {
     if (!(!resizeControlRef.current || !id2))
       return resizer.current || (resizer.current = XYResizer({
@@ -28524,11 +28492,15 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
           }
           triggerNodeChanges(changes);
         },
-        onEnd: () => {
+        onEnd: ({ width, height }) => {
           const dimensionChange = {
             id: id2,
             type: "dimensions",
-            resizing: !1
+            resizing: !1,
+            dimensions: {
+              width,
+              height
+            }
           };
           store.getState().triggerNodeChanges([dimensionChange]);
         }
@@ -28560,7 +28532,7 @@ 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;
+  const positionClassNames = controlPosition.split("-"), colorStyleProp = variant === ResizeControlVariant$1.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 });
 }
 memo$2(ResizeControl);
@@ -28582,7 +28554,7 @@ const nodeEqualityFn = (a2, b2) => a2?.internals.positionAbsolute.x !== b2?.inte
   zoom: state.transform[2],
   selectedNodesCount: state.nodes.filter((node2) => node2.selected).length
 });
-function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position.Top, offset: offset2 = 10, align = "center", ...rest }) {
+function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position$1.Top, offset: offset2 = 10, align = "center", ...rest }) {
   const contextNodeId = useNodeId(), nodesSelector2 = useCallback((state) => (Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""]).reduce((res, id2) => {
     const node2 = state.nodeLookup.get(id2);
     return node2 && res.set(node2.id, node2), res;
@@ -29850,6 +29822,165 @@ const useXYStoreApi = useStoreApi, useXYInternalNode = useInternalNode, selectZo
 function useIsZoomTooSmall() {
   return useStore$1(selectZoom);
 }
+var ConnectionMode;
+(function(ConnectionMode2) {
+  ConnectionMode2.Strict = "strict", ConnectionMode2.Loose = "loose";
+})(ConnectionMode || (ConnectionMode = {}));
+var PanOnScrollMode;
+(function(PanOnScrollMode2) {
+  PanOnScrollMode2.Free = "free", PanOnScrollMode2.Vertical = "vertical", PanOnScrollMode2.Horizontal = "horizontal";
+})(PanOnScrollMode || (PanOnScrollMode = {}));
+var SelectionMode;
+(function(SelectionMode2) {
+  SelectionMode2.Partial = "partial", SelectionMode2.Full = "full";
+})(SelectionMode || (SelectionMode = {}));
+var ConnectionLineType;
+(function(ConnectionLineType2) {
+  ConnectionLineType2.Bezier = "default", ConnectionLineType2.Straight = "straight", ConnectionLineType2.Step = "step", ConnectionLineType2.SmoothStep = "smoothstep", ConnectionLineType2.SimpleBezier = "simplebezier";
+})(ConnectionLineType || (ConnectionLineType = {}));
+var MarkerType;
+(function(MarkerType2) {
+  MarkerType2.Arrow = "arrow", MarkerType2.ArrowClosed = "arrowclosed";
+})(MarkerType || (MarkerType = {}));
+var Position;
+(function(Position2) {
+  Position2.Left = "left", Position2.Top = "top", Position2.Right = "right", Position2.Bottom = "bottom";
+})(Position || (Position = {}));
+Position.Left + "", Position.Right, Position.Right + "", Position.Left, Position.Top + "", Position.Bottom, Position.Bottom + "", Position.Top;
+const isInternalNodeBase = (element) => "id" in element && "internals" in element && !("source" in element) && !("target" in element), getNodePositionWithOrigin = (node2, nodeOrigin = [0, 0]) => {
+  const { width, height } = getNodeDimensions(node2), origin = node2.origin ?? nodeOrigin, offsetX = width * origin[0], offsetY = height * origin[1];
+  return {
+    x: node2.position.x - offsetX,
+    y: node2.position.y - offsetY
+  };
+}, clamp = (val, min2 = 0, max2 = 1) => Math.min(Math.max(val, min2), max2), getBoundsOfBoxes = (box1, box2) => ({
+  x: Math.min(box1.x, box2.x),
+  y: Math.min(box1.y, box2.y),
+  x2: Math.max(box1.x2, box2.x2),
+  y2: Math.max(box1.y2, box2.y2)
+}), rectToBox = ({ x: x2, y: y2, width, height }) => ({
+  x: x2,
+  y: y2,
+  x2: x2 + width,
+  y2: y2 + height
+}), boxToRect = ({ x: x2, y: y2, x2: x22, y2: y22 }) => ({
+  x: x2,
+  y: y2,
+  width: x22 - x2,
+  height: y22 - y2
+}), nodeToRect = (node2, nodeOrigin = [0, 0]) => {
+  const { x: x2, y: y2 } = isInternalNodeBase(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin(node2, nodeOrigin);
+  return {
+    x: x2,
+    y: y2,
+    width: node2.measured?.width ?? node2.width ?? node2.initialWidth ?? 0,
+    height: node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0
+  };
+}, getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2))), rendererPointToPoint = ({ x: x2, y: y2 }, [tx, ty, tScale]) => ({
+  x: x2 * tScale + tx,
+  y: y2 * tScale + ty
+});
+function parsePadding(padding, viewport) {
+  return Math.floor(viewport - viewport / (1 + padding));
+}
+function parsePaddings(padding, width, height) {
+  {
+    const paddingY = parsePadding(padding, height), paddingX = parsePadding(padding, width);
+    return {
+      top: paddingY,
+      right: paddingX,
+      bottom: paddingY,
+      left: paddingX,
+      x: paddingX * 2,
+      y: paddingY * 2
+    };
+  }
+}
+function calculateAppliedPaddings(bounds, x2, y2, zoom2, width, height) {
+  const { x: left, y: top } = rendererPointToPoint(bounds, [x2, y2, zoom2]), { x: boundRight, y: boundBottom } = rendererPointToPoint({ x: bounds.x + bounds.width, y: bounds.y + bounds.height }, [x2, y2, zoom2]), right = width - boundRight, bottom = height - boundBottom;
+  return {
+    left: Math.floor(left),
+    top: Math.floor(top),
+    right: Math.floor(right),
+    bottom: Math.floor(bottom)
+  };
+}
+const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
+  const p2 = parsePaddings(padding, width, height), xZoom = (width - p2.x) / bounds.width, yZoom = (height - p2.y) / bounds.height, zoom2 = Math.min(xZoom, yZoom), clampedZoom = clamp(zoom2, minZoom, maxZoom), boundsCenterX = bounds.x + bounds.width / 2, boundsCenterY = bounds.y + bounds.height / 2, x2 = width / 2 - boundsCenterX * clampedZoom, y2 = height / 2 - boundsCenterY * clampedZoom, newPadding = calculateAppliedPaddings(bounds, x2, y2, clampedZoom, width, height), offset2 = {
+    left: Math.min(newPadding.left - p2.left, 0),
+    top: Math.min(newPadding.top - p2.top, 0),
+    right: Math.min(newPadding.right - p2.right, 0),
+    bottom: Math.min(newPadding.bottom - p2.bottom, 0)
+  };
+  return {
+    x: x2 - offset2.left + offset2.right,
+    y: y2 - offset2.top + offset2.bottom,
+    zoom: clampedZoom
+  };
+}, isMacOs = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
+function getNodeDimensions(node2) {
+  return {
+    width: node2.measured?.width ?? node2.width ?? node2.initialWidth ?? 0,
+    height: node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0
+  };
+}
+function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY }) {
+  const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125, centerY2 = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125, offsetX = Math.abs(centerX - sourceX), offsetY = Math.abs(centerY2 - sourceY);
+  return [centerX, centerY2, offsetX, offsetY];
+}
+function calculateControlOffset(distance2, curvature) {
+  return distance2 >= 0 ? 0.5 * distance2 : curvature * 25 * Math.sqrt(-distance2);
+}
+function getControlWithCurvature({ pos, x1, y1, x2, y2, c: c2 }) {
+  switch (pos) {
+    case Position.Left:
+      return [x1 - calculateControlOffset(x1 - x2, c2), y1];
+    case Position.Right:
+      return [x1 + calculateControlOffset(x2 - x1, c2), y1];
+    case Position.Top:
+      return [x1, y1 - calculateControlOffset(y1 - y2, c2)];
+    case Position.Bottom:
+      return [x1, y1 + calculateControlOffset(y2 - y1, c2)];
+  }
+}
+function getBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
+  const [sourceControlX, sourceControlY] = getControlWithCurvature({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+    c: curvature
+  }), [targetControlX, targetControlY] = getControlWithCurvature({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+    c: curvature
+  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY
+  });
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY
+  ];
+}
+Position.Left + "", Position.Right + "", Position.Top + "", Position.Bottom + "";
+var ResizeControlVariant;
+(function(ResizeControlVariant2) {
+  ResizeControlVariant2.Line = "line", ResizeControlVariant2.Handle = "handle";
+})(ResizeControlVariant || (ResizeControlVariant = {}));
 const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
 function crt(v) {
   return v < 0 ? -pow(-v, 1 / 3) : pow(v, 1 / 3);
@@ -34023,38 +34154,28 @@ const useDiagramActorRef = () => {
   return ctx;
 };
 function useDiagram() {
-  const actor = useDiagramActorRef(), [, startTransition] = useTransition$1();
+  const actor = useDiagramActorRef();
   return useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          viewId,
-          ...fromNode && { fromNode }
-        });
+      actor.send({
+        type: "navigate.to",
+        viewId,
+        ...fromNode && { fromNode }
       });
     },
     navigate: (direction) => {
-      startTransition(() => {
-        actor.send({ type: `navigate.${direction}` });
-      });
+      actor.send({ type: `navigate.${direction}` });
     },
     fitDiagram: (duration = 350) => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram", duration });
-      });
+      actor.send({ type: "fitDiagram", duration });
     },
     openRelationshipsBrowser: (fqn2) => {
-      startTransition(() => {
-        actor.send({ type: "open.relationshipsBrowser", fqn: fqn2 });
-      });
+      actor.send({ type: "open.relationshipsBrowser", fqn: fqn2 });
     },
     openSource: (params) => {
-      startTransition(() => {
-        actor.send({ type: "open.source", ...params });
-      });
+      actor.send({ type: "open.source", ...params });
     },
     openElementDetails: (fqn2, fromNode) => {
       actor.send({ type: "open.elementDetails", fqn: fqn2, fromNode });
@@ -35392,9 +35513,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: css({
+          style: {
             display: "contents"
-          }),
+          },
+          // Work around to keep same global selector data-likec4-dimmed
           ...isDimmed !== !1 && {
             "data-likec4-dimmed": isDimmed
           },
@@ -35692,14 +35814,13 @@ const EdgePath = forwardRef(({
   alignItems: "center"
 });
 function ElementActionButtons({
-  id: id2,
   selected: selected2 = !1,
   data: {
     hovered: isHovered = !1
   },
   buttons: buttons2
 }) {
-  const zoomTooSmall = useIsZoomTooSmall();
+  const id2 = useId$1(), zoomTooSmall = useIsZoomTooSmall();
   return !buttons2.length || zoomTooSmall ? null : /* @__PURE__ */ jsx(Box$1, { className: container$4, children: /* @__PURE__ */ jsx(
     Box$1,
     {
@@ -35718,21 +35839,24 @@ function ElementActionButtons({
       "data-likec4-hovered": isHovered,
       className: cx("nodrag nopan", actionButtons),
       children: buttons2.map((button2, index2) => /* @__PURE__ */ jsx(
-        m$2.div,
+        ActionIcon$1,
         {
+          component: m$2.button,
+          layout: !0,
+          className: actionBtn$1({}),
           initial: !1,
           whileTap: { scale: 1 },
           whileHover: {
             scale: 1.3
           },
-          onTap: (e2) => button2.onClick(e2),
-          onClick: stopPropagation$1,
+          onClick: button2.onClick,
           onDoubleClick: stopPropagation$1,
-          children: /* @__PURE__ */ jsx(ActionIcon$1, { className: actionBtn$1({}), children: button2.icon })
+          children: button2.icon
         },
-        `action-button-${id2}-${button2.key ?? index2}`
+        `${id2}-${button2.key ?? index2}`
       ))
-    }
+    },
+    `${id2}-action-buttons`
   ) });
 }
 const container$3 = css({
@@ -35764,11 +35888,13 @@ function ElementDetailsButton({
   icon: icon2,
   onClick
 }) {
+  const id2 = useId$1();
   return /* @__PURE__ */ jsx(Box$1, { className: cx(container$3, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon$1,
     {
       className: cx("nodrag nopan", actionBtn$1({ variant: "transparent" })),
       component: m$2.button,
+      layout: !0,
       initial: !1,
       style: {
         originX: 0.45,
@@ -35789,7 +35915,8 @@ function ElementDetailsButton({
       onClick,
       onDoubleClick: stopPropagation$1,
       children: icon2 ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-    }
+    },
+    id2
   ) });
 }
 const container$2 = css({
@@ -36432,8 +36559,8 @@ const style = {
   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 })
+  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position$1.Top, style }),
+  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position$1.Bottom, style })
 ] });
 class VectorImpl {
   constructor(x2, y2) {
@@ -37111,7 +37238,17 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
   }
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
+      /* @__PURE__ */ jsx(
+        EdgePath,
+        {
+          ...props,
+          svgPath: edgePath,
+          ref: svgPathRef,
+          ...enableEdgeEditing && {
+            onEdgePointerDown
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         EdgeLabelContainer,
         {
@@ -38358,7 +38495,7 @@ function useRelationshipsBrowserState(selector3, compare = shallowEqual) {
   return xstateReact_cjsExports.useSelector(actor, useCallbackRef(selector3), compare);
 }
 function useRelationshipsBrowser() {
-  const actor = useRelationshipsBrowserActor(), [, startTransition] = useTransition$1();
+  const actor = useRelationshipsBrowserActor();
   return useMemo(() => ({
     actor,
     get rootElementId() {
@@ -38379,12 +38516,10 @@ function useRelationshipsBrowser() {
       });
     },
     navigateTo: (subject, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          subject,
-          fromNode
-        });
+      actor.send({
+        type: "navigate.to",
+        subject,
+        fromNode
       });
     },
     fitDiagram: () => {
@@ -38534,7 +38669,7 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
   );
 }, ElementNode$1 = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m$2.div, layoutId: props.id, nodeProps: props, children: [
   /* @__PURE__ */ jsx(ElementShape, { ...props }),
-  /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler$1, { ...props }),
   /* @__PURE__ */ jsx(ElementActions$1, { ...props }),
   /* @__PURE__ */ jsx(ElementPorts$1, { ...props })
@@ -40881,7 +41016,7 @@ const dagre = /* @__PURE__ */ getDefaultExportFromCjs(dagreExports), Sizes$2 = {
     edgesep: 25
   },
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1
@@ -41073,7 +41208,7 @@ function layoutRelationshipsView$1(data, scope) {
     for (const edge of g.edges())
       g.setEdge(edge, {
         ...Sizes$2.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400
+        width: edgeCount > 25 ? 800 : 400
       });
   const dagreBounds = applyDagreLayout$2(g), _calculatedNodeBounds = C(
     nodeIds,
@@ -41163,8 +41298,6 @@ function layoutRelationshipsView$1(data, scope) {
           width,
           height
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -41205,8 +41338,6 @@ function layoutRelationshipsView$1(data, scope) {
         ...element.$element.style
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...children2.length > 0 && { depth: nodeDepth(id2) },
       children: children2,
       width,
@@ -42402,7 +42533,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   [backdropBlur]: "0px",
   [level]: "0",
   [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.5) * var(--_offset))",
+  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
   [backdropOpacity]: "0%",
   _backdrop: {
     cursor: "zoom-out",
@@ -42423,8 +42554,8 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
     height: "100vh"
   },
   sm: {
-    inset: "[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]",
-    width: "calc(100vw - var(--_offset) - var(--_inset))",
+    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+    width: "calc(100vw - 2 * var(--_inset))",
     height: "calc(100vh - var(--_offset) - var(--_inset))",
     [borderRadius]: "6px",
     padding: "6px",
@@ -42439,22 +42570,6 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   xl: {
     [offset]: "4rem"
   }
-  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
-  //     width: 'calc(100vw - 4rem)',
-  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
-  //   },
-  //   lg: {
-  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
-  //     width: 'calc(100vw - 8rem)',
-  //     height: 'calc(100vh - 8rem)',
-  //   },
-  //   xl: {
-  //     [borderRadius]: '8px',
-  //     padding: '8px',
-  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
-  //     width: 'calc(100vw - 10rem)',
-  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
-  //   },
 }), body = css.raw({
   position: "relative",
   containerName: "overlay-dialog",
@@ -42472,108 +42587,91 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   base: {
     dialog,
     body
-  },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: "0"
-        }
+  }
+}), Overlay = forwardRef(({
+  onClose,
+  className,
+  classes: classes2,
+  overlayLevel = 0,
+  children: children2,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(!1), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useSyncedRef(onClose), close = useDebouncedCallback(
+    () => {
+      isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
+    },
+    [],
+    50
+  );
+  useEffect(() => {
+    const cancel = (e2) => {
+      e2.preventDefault(), close();
+    };
+    return dialogRef.current?.addEventListener("cancel", cancel, { capture: !0 }), () => {
+      dialogRef.current?.removeEventListener("cancel", cancel, { capture: !0 });
+    };
+  }, []), useTimeoutEffect(() => {
+    dialogRef.current?.open || dialogRef.current?.showModal();
+  }, 30), useTimeoutEffect(() => {
+    setOpened(!0);
+  }, 120);
+  const styles = overlay({
+    level: overlayLevel
+  });
+  return /* @__PURE__ */ jsx(
+    m$2.dialog,
+    {
+      ref: useMergedRef(dialogRef, ref),
+      className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes2?.dialog, className),
+      layout: !0,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
       },
-      1: {
-        dialog: {
-          [level]: "1"
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%",
+          scale: overlayLevel > 0 ? 0.9 : 1.075,
+          opacity: 0
+        },
+        animate: {
+          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
+          scale: 1,
+          opacity: 1,
+          transition: {
+            delay: 0.075
+          }
+        },
+        exit: {
+          scale: 1.2,
+          opacity: 0,
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%"
         }
-      },
-      2: {
-        dialog: {
-          [level]: "2"
+      } : {
+        initial: {
+          [backdropBlur]: "8px",
+          [backdropOpacity]: "60%"
         }
       },
-      3: {
-        dialog: {
-          [level]: "3"
+      onClick: (e2) => {
+        if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
         }
-      }
-    }
-  }
-}), Overlay = forwardRef(
-  ({ children: children2, onClose, className, classes: classes2, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(!1), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useSyncedRef(onClose), close = useDebouncedCallback(
-      () => {
-        isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
       },
-      [],
-      50
-    );
-    useLayoutEffect$1(() => {
-      const cancel = (e2) => {
-        e2.preventDefault(), close();
-      };
-      return dialogRef.current?.addEventListener("cancel", cancel, { capture: !0 }), () => {
-        dialogRef.current?.removeEventListener("cancel", cancel, { capture: !0 });
-      };
-    }, []), useTimeoutEffect(() => {
-      dialogRef.current?.open || dialogRef.current?.showModal();
-    }, 20), useTimeoutEffect(() => {
-      setOpened(!0);
-    }, 120);
-    const styles = overlay({
-      level: overlayLevel
-    });
-    return /* @__PURE__ */ jsx(
-      m$2.dialog,
-      {
-        ref: useMergedRef(dialogRef, ref),
-        className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes2?.dialog, className),
-        layout: !0,
-        ...motionNotReduced ? {
-          initial: {
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%",
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
-            opacity: 0
-          },
-          animate: {
-            [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-            [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
-            scale: 1,
-            opacity: 1,
-            translateY: 0,
-            transition: {
-              delay: 0.075
-            }
-          },
-          exit: {
-            scale: 1.3,
-            opacity: 0,
-            translateY: -10,
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%"
-          }
-        } : {
-          initial: {
-            [backdropBlur]: "8px",
-            [backdropOpacity]: "60%"
-          }
-        },
-        onClick: (e2) => {
-          if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
-            dialogRef.current?.close();
-            return;
-          }
-        },
-        onDoubleClick: stopPropagation$1,
-        onPointerDown: stopPropagation$1,
-        onClose: (e2) => {
-          e2.stopPropagation(), close();
-        },
-        ...rest,
-        children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsx(Box$1, { className: cx(styles.body, "overlay-body", classes2?.body), children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) }) })
-      }
-    );
-  }
-);
+      onDoubleClick: stopPropagation$1,
+      onPointerDown: stopPropagation$1,
+      onClose: (e2) => {
+        e2.stopPropagation(), close();
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsx(Box$1, { className: cx(styles.body, "overlay-body", classes2?.body), children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) }) })
+    }
+  );
+});
 Overlay.displayName = "Overlay";
 var xstate_cjsExports = /* @__PURE__ */ requireXstate_cjs();
 function _update$1(current, update) {
@@ -43144,123 +43242,7 @@ const findRootSubject = (nodes) => nodes.find(
   //   xyedges: [],
   //   xynodes: [],
   // }),
-}), finalize = (elements, explicits) => elements.size > 2 && explicits.size !== elements.size ? new Set(sortParentsFirst([
-  ...treeFromElements$1(elements).flatten(),
-  ...explicits
-])) : elements.size > 1 ? new Set(sortParentsFirst([...elements])) : elements;
-function computeEdgeDetailsViewData(edges, view) {
-  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
-    sources: /* @__PURE__ */ new Set(),
-    targets: /* @__PURE__ */ new Set()
-  }, addExplicit = (el, type) => {
-    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
-  };
-  for (const edgeId of edges) {
-    const edge = view.findEdge(edgeId), _relationships = edge ? [...edge.relationships("model")] : [];
-    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
-      continue;
-    const source = edge.source.element, target = edge.target.element;
-    addExplicit(source, "source"), addExplicit(target, "target");
-    for (const relationship of _relationships) {
-      if (relationships.add(relationship), relationship.source !== source) {
-        addExplicit(relationship.source, "source");
-        for (const parent of relationship.source.ancestors()) {
-          if (parent === source)
-            break;
-          sources.add(parent);
-        }
-      }
-      if (relationship.target !== target) {
-        addExplicit(relationship.target, "target");
-        for (const parent of relationship.target.ancestors()) {
-          if (parent === target)
-            break;
-          targets.add(parent);
-        }
-      }
-    }
-  }
-  return {
-    sources: finalize(sources, explicit.sources),
-    targets: finalize(targets, explicit.targets),
-    relationships
-  };
-}
-function computeRelationshipDetailsViewData({
-  // relationships: _relationships,
-  source,
-  target
-}) {
-  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
-    sources: /* @__PURE__ */ new Set(),
-    targets: /* @__PURE__ */ new Set()
-  }, addExplicit = (el, type) => {
-    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
-  };
-  source && addExplicit(source, "source"), target && addExplicit(target, "target");
-  const [connection] = modelConnection.findConnection(source, target, "directed");
-  if (!connection)
-    return {
-      sources,
-      targets,
-      relationships
-    };
-  for (const relationship of connection.relations) {
-    const relationSource = relationship.source, relationTarget = relationship.target;
-    if (addExplicit(relationSource, "source"), addExplicit(relationTarget, "target"), relationships.add(relationship), source !== relationSource) {
-      invariant$2(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`);
-      for (const parent of relationSource.ancestors()) {
-        if (parent === source)
-          break;
-        sources.add(parent);
-      }
-    }
-    if (target !== relationTarget) {
-      invariant$2(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`);
-      for (const parent of relationTarget.ancestors()) {
-        if (parent === target)
-          break;
-        targets.add(parent);
-      }
-    }
-  }
-  return {
-    sources: finalize(sources, explicit.sources),
-    targets: finalize(targets, explicit.targets),
-    relationships
-  };
-}
-const RelationshipDetailsActorContext = createContext(null);
-function useRelationshipDetailsActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
-}
-function useRelationshipDetailsState(selector3, compare = shallowEqual) {
-  const select2 = useCallbackRef(selector3), actor = useRelationshipDetailsActor();
-  return xstateReact_cjsExports.useSelector(actor, select2, compare);
-}
-function useRelationshipDetails() {
-  const actor = useRelationshipDetailsActor(), [, startTransition] = useTransition$1();
-  return useMemo(() => ({
-    actor,
-    get rootElementId() {
-      return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
-    },
-    getState: () => actor.getSnapshot().context,
-    send: actor.send,
-    navigateTo: (...params) => {
-      params.length === 1 ? actor.send({ type: "navigate.to", params: { edgeId: params[0] } }) : actor.send({ type: "navigate.to", params: { source: params[0], target: params[1] } });
-    },
-    fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram" });
-      });
-    },
-    close: () => {
-      actor._parent ? actor._parent?.send({ type: "close", actorId: actor.id }) : actor.send({ type: "close" });
-    }
-  }), [actor]);
-}
-const Sizes$1 = {
+}), Sizes$1 = {
   dagre: {
     ranksep: 60,
     nodesep: 35,
@@ -43649,7 +43631,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
       invariant$2(xyflow2, "xyflow is not initialized"), invariant$2(xystore, "xystore is not initialized"), bounds ??= context2.bounds;
       const maxZoom = Math.max(xyflow2.getZoom(), 1);
       if (bounds) {
-        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
+        const { width, height } = xystore.getState(), viewport = getViewportForBounds$1(bounds, width, height, MinZoom, maxZoom, 0.1);
         xyflow2.setViewport(viewport, duration > 0 ? { duration } : void 0);
       } else
         xyflow2.fitView({
@@ -43800,12 +43782,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
           actions: [
             "updateLayoutData",
             xstate_cjsExports.cancel("fitDiagram"),
-            {
-              type: "xyflow:fitDiagram",
-              params: {
-                duration: 0
-              }
-            },
+            xstate_cjsExports.raise({ type: "fitDiagram", duration: 0 }, { id: "fitDiagram", delay: 50 }),
             xstate_cjsExports.raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
           ]
         },
@@ -43869,7 +43846,9 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
   }
 }), hotkeyLogic = xstate_cjsExports.fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "close" }), {
+    ["Escape", (event) => {
+      event.stopPropagation(), sendBack({ type: "close" });
+    }, {
       preventDefault: !0
     }]
   ]);
@@ -44061,7 +44040,93 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     "stopListeningToEsc",
     "closeAllOverlays"
   ]
-}), RelationshipEdge = customEdge((props) => {
+}), finalize = (elements, explicits) => elements.size > 2 && explicits.size !== elements.size ? new Set(sortParentsFirst([
+  ...treeFromElements$1(elements).flatten(),
+  ...explicits
+])) : elements.size > 1 ? new Set(sortParentsFirst([...elements])) : elements;
+function computeEdgeDetailsViewData(edges, view) {
+  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
+    sources: /* @__PURE__ */ new Set(),
+    targets: /* @__PURE__ */ new Set()
+  }, addExplicit = (el, type) => {
+    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
+  };
+  for (const edgeId of edges) {
+    const edge = view.findEdge(edgeId), _relationships = edge ? [...edge.relationships("model")] : [];
+    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
+      continue;
+    const source = edge.source.element, target = edge.target.element;
+    addExplicit(source, "source"), addExplicit(target, "target");
+    for (const relationship of _relationships) {
+      if (relationships.add(relationship), relationship.source !== source) {
+        addExplicit(relationship.source, "source");
+        for (const parent of relationship.source.ancestors()) {
+          if (parent === source)
+            break;
+          sources.add(parent);
+        }
+      }
+      if (relationship.target !== target) {
+        addExplicit(relationship.target, "target");
+        for (const parent of relationship.target.ancestors()) {
+          if (parent === target)
+            break;
+          targets.add(parent);
+        }
+      }
+    }
+  }
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships
+  };
+}
+function computeRelationshipDetailsViewData({
+  // relationships: _relationships,
+  source,
+  target
+}) {
+  const sources = /* @__PURE__ */ new Set(), relationships = /* @__PURE__ */ new Set(), targets = /* @__PURE__ */ new Set(), explicit = {
+    sources: /* @__PURE__ */ new Set(),
+    targets: /* @__PURE__ */ new Set()
+  }, addExplicit = (el, type) => {
+    type === "source" ? (sources.add(el), explicit.sources.add(el)) : (targets.add(el), explicit.targets.add(el));
+  };
+  source && addExplicit(source, "source"), target && addExplicit(target, "target");
+  const [connection] = modelConnection.findConnection(source, target, "directed");
+  if (!connection)
+    return {
+      sources,
+      targets,
+      relationships
+    };
+  for (const relationship of connection.relations) {
+    const relationSource = relationship.source, relationTarget = relationship.target;
+    if (addExplicit(relationSource, "source"), addExplicit(relationTarget, "target"), relationships.add(relationship), source !== relationSource) {
+      invariant$2(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`);
+      for (const parent of relationSource.ancestors()) {
+        if (parent === source)
+          break;
+        sources.add(parent);
+      }
+    }
+    if (target !== relationTarget) {
+      invariant$2(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`);
+      for (const parent of relationTarget.ancestors()) {
+        if (parent === target)
+          break;
+        targets.add(parent);
+      }
+    }
+  }
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships
+  };
+}
+const RelationshipEdge = customEdge((props) => {
   const { enableNavigateTo } = useEnabledFeature("NavigateTo"), {
     sourceX,
     targetY,
@@ -44133,7 +44198,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
   );
 }, ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
   /* @__PURE__ */ jsx(ElementShape, { ...props }),
-  /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
   /* @__PURE__ */ jsx(ElementActions, { ...props }),
   /* @__PURE__ */ jsx(ElementPorts, { ...props })
@@ -44195,7 +44260,35 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     },
     id2
   ))
-] }), edgeEnpoint = css.raw({
+] }), RelationshipDetailsActorContext = createContext(null);
+function useRelationshipDetailsActor() {
+  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+}
+function useRelationshipDetailsState(selector3, compare = shallowEqual) {
+  const select2 = useCallbackRef(selector3), actor = useRelationshipDetailsActor();
+  return xstateReact_cjsExports.useSelector(actor, select2, compare);
+}
+function useRelationshipDetails() {
+  const actor = useRelationshipDetailsActor();
+  return useMemo(() => ({
+    actor,
+    get rootElementId() {
+      return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
+    },
+    getState: () => actor.getSnapshot().context,
+    send: actor.send,
+    navigateTo: (...params) => {
+      params.length === 1 ? actor.send({ type: "navigate.to", params: { edgeId: params[0] } }) : actor.send({ type: "navigate.to", params: { source: params[0], target: params[1] } });
+    },
+    fitDiagram: () => {
+      actor.send({ type: "fitDiagram" });
+    },
+    close: () => {
+      actor._parent ? actor._parent?.send({ type: "close", actorId: actor.id }) : actor.send({ type: "close" });
+    }
+  }), [actor]);
+}
+const edgeEnpoint = css.raw({
   display: "inline-flex",
   alignItems: "center",
   padding: "6px 2px 0 2px",
@@ -44619,7 +44712,7 @@ const selectOverlays = (s2) => s2.context.overlays.map((overlay2) => {
         return /* @__PURE__ */ jsx(
           Overlay,
           {
-            overlayLevel: Math.min(index2, 3),
+            overlayLevel: index2,
             onClose: () => close(overlay2.actorRef),
             children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay2.actorRef })
           },
@@ -44629,7 +44722,7 @@ const selectOverlays = (s2) => s2.context.overlays.map((overlay2) => {
         return /* @__PURE__ */ jsx(
           Overlay,
           {
-            overlayLevel: Math.min(index2, 3),
+            overlayLevel: index2,
             onClose: () => close(overlay2.actorRef),
             children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay2.actorRef })
           },
@@ -47107,13 +47200,13 @@ const selectXYProps = (ctx) => ({
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    $isPanning.get() || $isPanning.set(!0);
-  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback$1(() => {
+    $isPanning.set(!0);
+  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback$1(() => {
     isPanning.clear(), $isPanning.get() && $isPanning.set(!1);
-  }, 120), onMove = useCallbackRef((event) => {
+  }, 200), onMove = useCallbackRef((event) => {
     event && ($isPanning.get() || isPanning.start(), notPanning());
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    event && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
@@ -47995,14 +48088,20 @@ function updateActiveWalkthrough({ context: context2 }) {
 }
 const hotkeyActorLogic = xstate_cjsExports.fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "key.esc" }), {
+    ["Escape", (event) => {
+      event.stopPropagation(), sendBack({ type: "key.esc" });
+    }, {
       preventDefault: !0
     }]
   ]), arrowshandler = getHotkeyHandler([
-    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" }), {
+    ["ArrowLeft", (event) => {
+      event.stopPropagation(), sendBack({ type: "key.arrow.left" });
+    }, {
       preventDefault: !0
     }],
-    ["ArrowRight", () => sendBack({ type: "key.arrow.right" }), {
+    ["ArrowRight", (event) => {
+      event.stopPropagation(), sendBack({ type: "key.arrow.right" });
+    }, {
       preventDefault: !0
     }]
   ]);
@@ -48212,7 +48311,7 @@ const diagramMachine = xstate_cjsExports.setup({
       const {
         bounds = context2.view.bounds,
         duration = 450
-      } = params ?? {}, { width, height, panZoom, transform: transform2 } = context2.xystore.getState(), maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds(
+      } = params ?? {}, { width, height, panZoom, transform: transform2 } = context2.xystore.getState(), maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds$1(
         bounds,
         width,
         height,
@@ -48223,7 +48322,7 @@ const diagramMachine = xstate_cjsExports.setup({
       viewport.x = Math.round(viewport.x), viewport.y = Math.round(viewport.y), panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:fitFocusedBounds": ({ context: context2 }) => {
-      const { bounds, duration = 450 } = focusedBounds({ context: context2 }), { width, height, panZoom, transform: transform2 } = context2.xystore.getState(), maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds(
+      const { bounds, duration = 450 } = focusedBounds({ context: context2 }), { width, height, panZoom, transform: transform2 } = context2.xystore.getState(), maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds$1(
         bounds,
         width,
         height,
@@ -49759,17 +49858,17 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
     children: copied ? "Copied" : "Copy to clipboard"
   }
 ), EmbedPanel = ({ diagram }) => {
-  const router = useRouter(), { colorScheme } = useMantineColorScheme(), [theme2, setTheme] = useState(colorScheme), padding = 20, url = new URL(
-    router.buildLocation({
-      to: "/embed/$viewId",
-      params: { viewId: diagram.id },
-      search: {
-        padding,
-        theme: theme2 !== "auto" ? theme2 : void 0
-      }
-    }).href,
-    window.location.href
-  ), width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2, href = url.href, code = `
+  const router = useRouter(), { colorScheme } = useMantineColorScheme(), [theme2, setTheme] = useState(colorScheme), padding = 20;
+  let location = router.buildLocation({
+    to: "/embed/$viewId",
+    params: { viewId: diagram.id },
+    search: {
+      padding,
+      theme: theme2 !== "auto" ? theme2 : void 0
+    }
+  }).href;
+  location = useHashHistory ? `#${location}` : location;
+  const url = new URL(location, window.location.href), width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2, href = url.href, code = `
 <div style="aspect-ratio:${width}/${height};width:100%;height:auto;max-width:${width}px;margin:0 auto">
   <iframe src="${href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
 </div>