likec4 1.28.0 → 1.29.0

package/__app__/src/main.js

@@ -1,6 +1,6 @@
 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, 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, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, flushSync } from "react-dom";
@@ -719,7 +719,7 @@ function useHovered() {
   const [hovered, setHovered] = useState(-1);
   return [hovered, { setHovered, resetHovered: () => setHovered(-1) }];
 }
-function clamp$5(value, min2, max2) {
+function clamp$4(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$5(position.x, 0, 1),
-    y: clamp$5(position.y, 0, 1)
+    x: clamp$4(position.x, 0, 1),
+    y: clamp$4(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$5((x2 - rect.left) / rect.width, 0, 1);
+            const _x = clamp$4((x2 - rect.left) / rect.width, 0, 1);
             onChange({
               x: dir === "ltr" ? _x : 1 - _x,
-              y: clamp$5((y2 - rect.top) / rect.height, 0, 1)
+              y: clamp$4((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$4(start2, value, end) {
+function clamp$3(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$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;
+    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;
     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$4(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp$3(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$4(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp$3(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$3(value, [min2, max2]) {
+function clamp$2(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$3(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$2(scrollPos, scrollClampRange);
   return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
 }
 function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes2, dir = "ltr") {
@@ -5945,7 +5945,7 @@ const defaultProps$1y = {
           {
             ...getStyles2("scrollbar"),
             orientation: "horizontal",
-            "data-hidden": type === "never" || !horizontalThumbVisible || void 0,
+            "data-hidden": type === "never" || offsetScrollbars === "present" && !horizontalThumbVisible ? !0 : void 0,
             forceMount: !0,
             onMouseEnter: () => setScrollbarHovered(!0),
             onMouseLeave: () => setScrollbarHovered(!1),
@@ -5957,7 +5957,7 @@ const defaultProps$1y = {
           {
             ...getStyles2("scrollbar"),
             orientation: "vertical",
-            "data-hidden": type === "never" || !verticalThumbVisible || void 0,
+            "data-hidden": type === "never" || offsetScrollbars === "present" && !verticalThumbVisible ? !0 : void 0,
             forceMount: !0,
             onMouseEnter: () => setScrollbarHovered(!0),
             onMouseLeave: () => setScrollbarHovered(!1),
@@ -10433,6 +10433,14 @@ var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u"
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2.default : x2;
 }
+var useIsomorphicLayoutEffect_cjs = {}, hasRequiredUseIsomorphicLayoutEffect_cjs;
+function requireUseIsomorphicLayoutEffect_cjs() {
+  return hasRequiredUseIsomorphicLayoutEffect_cjs || (hasRequiredUseIsomorphicLayoutEffect_cjs = 1, function(exports) {
+    Object.defineProperty(exports, "__esModule", { value: !0 });
+    var react = React__default, isClient = typeof document < "u", index2 = isClient ? react.useLayoutEffect : react.useEffect;
+    exports.default = index2;
+  }(useIsomorphicLayoutEffect_cjs)), useIsomorphicLayoutEffect_cjs;
+}
 var classes$f = { root: "m_6e45937b", loader: "m_e8eb006c", overlay: "m_df587f17" };
 const defaultProps$u = {
   transitionProps: { transition: "fade", duration: 0 },
@@ -11705,7 +11713,7 @@ const defaultProps$c = {
   });
   useEffect(() => {
     selectFirstOptionOnChange && combobox.selectFirstOption();
-  }, [selectFirstOptionOnChange, _value]), useEffect(() => {
+  }, [selectFirstOptionOnChange, search]), useEffect(() => {
     value === null && handleSearchChange(""), typeof value == "string" && selectedOption && (previousSelectedOption?.value !== selectedOption.value || previousSelectedOption?.label !== selectedOption.label) && handleSearchChange(selectedOption.label);
   }, [value, selectedOption]);
   const clearButton = /* @__PURE__ */ jsx(
@@ -12157,11 +12165,15 @@ const defaultProps$a = {
     varsResolver: varsResolver$6,
     unstyled
   }), { dir } = useDirection(), [hovered, setHovered] = useState(!1), [_value, setValue] = useUncontrolled({
-    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),
+    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),
     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(
+  }), valueRef = useRef(_value), onChangeEndRef = useRef(onChangeEnd);
+  useEffect(() => {
+    onChangeEndRef.current = onChangeEnd;
+  }, [onChangeEnd]);
+  const 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 }) => {
       if (!disabled) {
         const nextValue = getChangeValue({
@@ -12180,86 +12192,88 @@ const defaultProps$a = {
       }
     },
     [disabled, min2, max2, step, precision, setValue, marks, restrictToMarks]
-  ), { ref: container2, active } = useMove(
-    handleChange,
-    {
-      onScrubEnd: () => !disabled && onChangeEnd?.(
-        restrictToMarks && marks?.length ? findClosestNumber(
-          valueRef.current,
-          marks.map((mark) => mark.value)
-        ) : valueRef.current
-      )
-    },
-    dir
+  ), handleScrubEnd = useCallback(() => {
+    if (!disabled && onChangeEndRef.current) {
+      const finalValue = restrictToMarks && marks?.length ? findClosestNumber(
+        valueRef.current,
+        marks.map((mark) => mark.value)
+      ) : valueRef.current;
+      onChangeEndRef.current(finalValue);
+    }
+  }, [disabled, marks, restrictToMarks]), { ref: container2, active } = useMove(handleChange, { onScrubEnd: handleScrubEnd }, dir), callOnChangeEnd = useCallback(
+    (value2) => {
+      !disabled && onChangeEndRef.current && onChangeEndRef.current(value2);
+    },
+    [disabled]
   ), handleTrackKeydownCapture = (event) => {
     if (!disabled)
       switch (event.key) {
         case "ArrowUp": {
           if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
             const nextValue2 = getNextMarkValue(_value, marks);
-            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            setValue(nextValue2), callOnChangeEnd(nextValue2);
             break;
           }
           const nextValue = getFloatingValue(
             Math.min(Math.max(_value + step, min2), max2),
             precision
           );
-          setValue(nextValue), onChangeEnd?.(nextValue);
+          setValue(nextValue), callOnChangeEnd(nextValue);
           break;
         }
         case "ArrowRight": {
           if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
             const nextValue2 = dir === "rtl" ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);
-            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            setValue(nextValue2), callOnChangeEnd(nextValue2);
             break;
           }
           const nextValue = getFloatingValue(
             Math.min(Math.max(dir === "rtl" ? _value - step : _value + step, min2), max2),
             precision
           );
-          setValue(nextValue), onChangeEnd?.(nextValue);
+          setValue(nextValue), callOnChangeEnd(nextValue);
           break;
         }
         case "ArrowDown": {
           if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
             const nextValue2 = getPreviousMarkValue(_value, marks);
-            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            setValue(nextValue2), callOnChangeEnd(nextValue2);
             break;
           }
           const nextValue = getFloatingValue(
             Math.min(Math.max(_value - step, min2), max2),
             precision
           );
-          setValue(nextValue), onChangeEnd?.(nextValue);
+          setValue(nextValue), callOnChangeEnd(nextValue);
           break;
         }
         case "ArrowLeft": {
           if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
             const nextValue2 = dir === "rtl" ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);
-            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            setValue(nextValue2), callOnChangeEnd(nextValue2);
             break;
           }
           const nextValue = getFloatingValue(
             Math.min(Math.max(dir === "rtl" ? _value + step : _value - step, min2), max2),
             precision
           );
-          setValue(nextValue), onChangeEnd?.(nextValue);
+          setValue(nextValue), callOnChangeEnd(nextValue);
           break;
         }
         case "Home": {
           if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
-            setValue(getFirstMarkValue(marks)), onChangeEnd?.(getFirstMarkValue(marks));
+            setValue(getFirstMarkValue(marks)), callOnChangeEnd(getFirstMarkValue(marks));
             break;
           }
-          setValue(min2), onChangeEnd?.(min2);
+          setValue(min2), callOnChangeEnd(min2);
           break;
         }
         case "End": {
           if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
-            setValue(getLastMarkValue(marks)), onChangeEnd?.(getLastMarkValue(marks));
+            setValue(getLastMarkValue(marks)), callOnChangeEnd(getLastMarkValue(marks));
             break;
           }
-          setValue(max2), onChangeEnd?.(max2);
+          setValue(max2), callOnChangeEnd(max2);
           break;
         }
       }
@@ -12969,7 +12983,7 @@ function useTree({
   onNodeCollapse,
   onNodeExpand
 } = {}) {
-  const [data, setData] = useState([]), [expandedState, setExpandedState] = useState(initialExpandedState), [selectedState, setSelectedState] = useState(initialSelectedState), [checkedState, setCheckedState] = useState(initialCheckedState), [anchorNode, setAnchorNode] = useState(null), [hoveredNode, setHoveredNode] = useState(null), initialize = useCallback(
+  const [data, setData] = useState([]), [expandedState, setExpandedState] = useState(initialExpandedState), [selectedState, setSelectedState] = useState(initialSelectedState), [checkedState, setCheckedState] = useState(initialCheckedState), [anchorNode, setAnchorNode] = useState(null), [hoveredNode, setHoveredNode2] = useState(null), initialize = useCallback(
     (_data) => {
       setExpandedState((current) => getInitialTreeExpandedState(current, _data, selectedState)), setCheckedState((current) => getInitialCheckedState(current, _data)), setData(_data);
     },
@@ -13058,7 +13072,7 @@ function useTree({
     clearSelected,
     setSelectedState,
     hoveredNode,
-    setHoveredNode,
+    setHoveredNode: setHoveredNode2,
     getCheckedNodes: () => getAllCheckedNodes(data, checkedState).result,
     isNodeChecked: (value) => memoizedIsNodeChecked(value, data, checkedState),
     isNodeIndeterminate: (value) => memoizedIsNodeIndeterminate(value, data, checkedState)
@@ -17001,210 +17015,11 @@ const AnimatePresence = ({ children: children2, custom: custom5, initial = !0, o
     return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : !1, custom: custom5, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, anchorX, children: child }, key2);
   }) });
 }, DeprecatedLayoutGroupContext = createContext(null);
-function addUniqueItem(arr, item) {
-  arr.indexOf(item) === -1 && arr.push(item);
-}
-function removeItem(arr, item) {
-  const index2 = arr.indexOf(item);
-  index2 > -1 && arr.splice(index2, 1);
-}
-let invariant = () => {
-};
-const MotionGlobalConfig = {
-  useManualTiming: !1
-};
-// @__NO_SIDE_EFFECTS__
-function memo(callback) {
-  let result;
-  return () => (result === void 0 && (result = callback()), result);
-}
-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;
-};
-class SubscriptionManager {
-  constructor() {
-    this.subscriptions = [];
-  }
-  add(handler) {
-    return addUniqueItem(this.subscriptions, handler), () => removeItem(this.subscriptions, handler);
-  }
-  notify(a2, b2, c2) {
-    const numSubscriptions = this.subscriptions.length;
-    if (numSubscriptions)
-      if (numSubscriptions === 1)
-        this.subscriptions[0](a2, b2, c2);
-      else
-        for (let i2 = 0; i2 < numSubscriptions; i2++) {
-          const handler = this.subscriptions[i2];
-          handler && handler(a2, b2, c2);
-        }
-  }
-  getSize() {
-    return this.subscriptions.length;
-  }
-  clear() {
-    this.subscriptions.length = 0;
-  }
-}
-const secondsToMilliseconds = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3, millisecondsToSeconds = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
-function velocityPerSecond(velocity, frameDuration) {
-  return frameDuration ? velocity * (1e3 / frameDuration) : 0;
-}
-const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
-class GroupAnimation {
-  constructor(animations2) {
-    this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
-  }
-  get finished() {
-    return Promise.all(this.animations.map((animation) => animation.finished));
-  }
-  /**
-   * TODO: Filter out cancelled or stopped animations before returning
-   */
-  getAll(propName) {
-    return this.animations[0][propName];
-  }
-  setAll(propName, newValue) {
-    for (let i2 = 0; i2 < this.animations.length; i2++)
-      this.animations[i2][propName] = newValue;
-  }
-  attachTimeline(timeline, fallback) {
-    const subscriptions = this.animations.map((animation) => {
-      if (supportsScrollTimeline() && animation.attachTimeline)
-        return animation.attachTimeline(timeline);
-      if (typeof fallback == "function")
-        return fallback(animation);
-    });
-    return () => {
-      subscriptions.forEach((cancel, i2) => {
-        cancel && cancel(), this.animations[i2].stop();
-      });
-    };
-  }
-  get time() {
-    return this.getAll("time");
-  }
-  set time(time2) {
-    this.setAll("time", time2);
-  }
-  get speed() {
-    return this.getAll("speed");
-  }
-  set speed(speed) {
-    this.setAll("speed", speed);
-  }
-  get startTime() {
-    return this.getAll("startTime");
-  }
-  get duration() {
-    let max2 = 0;
-    for (let i2 = 0; i2 < this.animations.length; i2++)
-      max2 = Math.max(max2, this.animations[i2].duration);
-    return max2;
-  }
-  runAll(methodName) {
-    this.animations.forEach((controls) => controls[methodName]());
-  }
-  flatten() {
-    this.runAll("flatten");
-  }
-  play() {
-    this.runAll("play");
-  }
-  pause() {
-    this.runAll("pause");
-  }
-  cancel() {
-    this.runAll("cancel");
-  }
-  complete() {
-    this.runAll("complete");
-  }
-}
-class GroupAnimationWithThen extends GroupAnimation {
-  then(onResolve, _onReject) {
-    return this.finished.finally(onResolve).then(() => {
-    });
-  }
-}
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", supportsFlags = {};
-function memoSupports(callback, supportsFlag) {
-  const memoized = /* @__PURE__ */ memo(callback);
-  return () => supportsFlags[supportsFlag] ?? memoized();
-}
-const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
-  try {
-    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
-  } catch {
-    return !1;
-  }
-  return !0;
-}, "linearEasing"), generateLinearEasing = (easing, duration, resolution = 10) => {
-  let points = "";
-  const numPoints = Math.max(Math.round(duration / resolution), 2);
-  for (let i2 = 0; i2 < numPoints; i2++)
-    points += easing(i2 / (numPoints - 1)) + ", ";
-  return `linear(${points.substring(0, points.length - 2)})`;
-}, cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
-  linear: "linear",
-  ease: "ease",
-  easeIn: "ease-in",
-  easeOut: "ease-out",
-  easeInOut: "ease-in-out",
-  circIn: /* @__PURE__ */ cubicBezierAsString([0, 0.65, 0.55, 1]),
-  circOut: /* @__PURE__ */ cubicBezierAsString([0.55, 0, 1, 0.45]),
-  backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
-  backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
-};
-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;
+function useIsMounted() {
+  const isMounted = useRef(!1);
+  return useIsomorphicLayoutEffect$2(() => (isMounted.current = !0, () => {
+    isMounted.current = !1;
+  }), []), isMounted;
 }
 const stepsOrder = [
   "read",
@@ -17258,7 +17073,9 @@ function createRenderStep(runNextFrame, stepName) {
   };
   return step;
 }
-const maxElapsed = 40;
+const MotionGlobalConfig = {
+  useManualTiming: !1
+}, maxElapsed = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   let runNextFrame = !1, useDefaultElapsed = !0;
   const state = {
@@ -17279,321 +17096,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
       steps[stepsOrder[i2]].cancel(process2);
   }, state, steps };
 }
-const { schedule: frame$1, cancel: cancelFrame, state: frameData, steps: frameSteps } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$3, !0), { schedule: microtask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, !1);
-let now$1;
-function clearTime() {
-  now$1 = void 0;
-}
-const time = {
-  now: () => (now$1 === void 0 && time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now()), now$1),
-  set: (newTime) => {
-    now$1 = newTime, queueMicrotask(clearTime);
-  }
-}, isDragging = {
-  x: !1,
-  y: !1
-};
-function isDragActive() {
-  return isDragging.x || isDragging.y;
-}
-function setDragLock(axis) {
-  return axis === "x" || axis === "y" ? isDragging[axis] ? null : (isDragging[axis] = !0, () => {
-    isDragging[axis] = !1;
-  }) : isDragging.x || isDragging.y ? null : (isDragging.x = isDragging.y = !0, () => {
-    isDragging.x = isDragging.y = !1;
-  });
-}
-function resolveElements(elementOrSelector, scope, selectorCache) {
-  if (elementOrSelector instanceof EventTarget)
-    return [elementOrSelector];
-  if (typeof elementOrSelector == "string") {
-    let root2 = document;
-    const elements = selectorCache?.[elementOrSelector] ?? root2.querySelectorAll(elementOrSelector);
-    return elements ? Array.from(elements) : [];
-  }
-  return Array.from(elementOrSelector);
-}
-function setupGesture(elementOrSelector, options) {
-  const elements = resolveElements(elementOrSelector), gestureAbortController = new AbortController(), eventOptions = {
-    passive: !0,
-    ...options,
-    signal: gestureAbortController.signal
-  };
-  return [elements, eventOptions, () => gestureAbortController.abort()];
-}
-function isValidHover(event) {
-  return !(event.pointerType === "touch" || isDragActive());
-}
-function hover(elementOrSelector, onHoverStart, options = {}) {
-  const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options), onPointerEnter = (enterEvent) => {
-    if (!isValidHover(enterEvent))
-      return;
-    const { target } = enterEvent, onHoverEnd = onHoverStart(target, enterEvent);
-    if (typeof onHoverEnd != "function" || !target)
-      return;
-    const onPointerLeave = (leaveEvent) => {
-      isValidHover(leaveEvent) && (onHoverEnd(leaveEvent), target.removeEventListener("pointerleave", onPointerLeave));
-    };
-    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-  };
-  return elements.forEach((element) => {
-    element.addEventListener("pointerenter", onPointerEnter, eventOptions);
-  }), cancel;
-}
-const isNodeOrChild = (parent, child) => child ? parent === child ? !0 : isNodeOrChild(parent, child.parentElement) : !1, isPrimaryPointer = (event) => event.pointerType === "mouse" ? typeof event.button != "number" || event.button <= 0 : event.isPrimary !== !1, focusableElements = /* @__PURE__ */ new Set([
-  "BUTTON",
-  "INPUT",
-  "SELECT",
-  "TEXTAREA",
-  "A"
-]);
-function isElementKeyboardAccessible(element) {
-  return focusableElements.has(element.tagName) || element.tabIndex !== -1;
-}
-const isPressing = /* @__PURE__ */ new WeakSet();
-function filterEvents(callback) {
-  return (event) => {
-    event.key === "Enter" && callback(event);
-  };
-}
-function firePointerEvent(target, type) {
-  target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: !0, bubbles: !0 }));
-}
-const enableKeyboardPress = (focusEvent, eventOptions) => {
-  const element = focusEvent.currentTarget;
-  if (!element)
-    return;
-  const handleKeydown = filterEvents(() => {
-    if (isPressing.has(element))
-      return;
-    firePointerEvent(element, "down");
-    const handleKeyup = filterEvents(() => {
-      firePointerEvent(element, "up");
-    }), handleBlur = () => firePointerEvent(element, "cancel");
-    element.addEventListener("keyup", handleKeyup, eventOptions), element.addEventListener("blur", handleBlur, eventOptions);
-  });
-  element.addEventListener("keydown", handleKeydown, eventOptions), element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
-};
-function isValidPressEvent(event) {
-  return isPrimaryPointer(event) && !isDragActive();
-}
-function press(targetOrSelector, onPressStart, options = {}) {
-  const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options), startPress = (startEvent) => {
-    const target = startEvent.currentTarget;
-    if (!isValidPressEvent(startEvent) || isPressing.has(target))
-      return;
-    isPressing.add(target);
-    const onPressEnd = onPressStart(target, startEvent), onPointerEnd = (endEvent, success) => {
-      window.removeEventListener("pointerup", onPointerUp), window.removeEventListener("pointercancel", onPointerCancel), !(!isValidPressEvent(endEvent) || !isPressing.has(target)) && (isPressing.delete(target), typeof onPressEnd == "function" && onPressEnd(endEvent, { success }));
-    }, onPointerUp = (upEvent) => {
-      onPointerEnd(upEvent, target === window || target === document || options.useGlobalTarget || isNodeOrChild(target, upEvent.target));
-    }, onPointerCancel = (cancelEvent) => {
-      onPointerEnd(cancelEvent, !1);
-    };
-    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.hasAttribute("tabindex") && (target.tabIndex = 0));
-  }), cancelEvents;
-}
-const MAX_VELOCITY_DELTA = 30, isFloat = (value) => !isNaN(parseFloat(value));
-class MotionValue {
-  /**
-   * @param init - The initiating value
-   * @param config - Optional configuration options
-   *
-   * -  `transformer`: A function to transform incoming values with.
-   */
-  constructor(init2, options = {}) {
-    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;
-  }
-  setCurrent(current) {
-    this.current = current, this.updatedAt = time.now(), this.canTrackVelocity === null && current !== void 0 && (this.canTrackVelocity = isFloat(this.current));
-  }
-  setPrevFrameValue(prevFrameValue = this.current) {
-    this.prevFrameValue = prevFrameValue, this.prevUpdatedAt = this.updatedAt;
-  }
-  /**
-   * Adds a function that will be notified when the `MotionValue` is updated.
-   *
-   * It returns a function that, when called, will cancel the subscription.
-   *
-   * When calling `onChange` inside a React component, it should be wrapped with the
-   * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-   * from the `useEffect` function to ensure you don't add duplicate subscribers..
-   *
-   * ```jsx
-   * export const MyComponent = () => {
-   *   const x = useMotionValue(0)
-   *   const y = useMotionValue(0)
-   *   const opacity = useMotionValue(1)
-   *
-   *   useEffect(() => {
-   *     function updateOpacity() {
-   *       const maxXY = Math.max(x.get(), y.get())
-   *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-   *       opacity.set(newOpacity)
-   *     }
-   *
-   *     const unsubscribeX = x.on("change", updateOpacity)
-   *     const unsubscribeY = y.on("change", updateOpacity)
-   *
-   *     return () => {
-   *       unsubscribeX()
-   *       unsubscribeY()
-   *     }
-   *   }, [])
-   *
-   *   return <motion.div style={{ x }} />
-   * }
-   * ```
-   *
-   * @param subscriber - A function that receives the latest value.
-   * @returns A function that, when called, will cancel this subscription.
-   *
-   * @deprecated
-   */
-  onChange(subscription) {
-    return this.on("change", subscription);
-  }
-  on(eventName, callback) {
-    this.events[eventName] || (this.events[eventName] = new SubscriptionManager());
-    const unsubscribe = this.events[eventName].add(callback);
-    return eventName === "change" ? () => {
-      unsubscribe(), frame$1.read(() => {
-        this.events.change.getSize() || this.stop();
-      });
-    } : unsubscribe;
-  }
-  clearListeners() {
-    for (const eventManagers in this.events)
-      this.events[eventManagers].clear();
-  }
-  /**
-   * Attaches a passive effect to the `MotionValue`.
-   */
-  attach(passiveEffect, stopPassiveEffect) {
-    this.passiveEffect = passiveEffect, this.stopPassiveEffect = stopPassiveEffect;
-  }
-  /**
-   * Sets the state of the `MotionValue`.
-   *
-   * @remarks
-   *
-   * ```jsx
-   * const x = useMotionValue(0)
-   * x.set(10)
-   * ```
-   *
-   * @param latest - Latest value to set.
-   * @param render - Whether to notify render subscribers. Defaults to `true`
-   *
-   * @public
-   */
-  set(v, render = !0) {
-    !render || !this.passiveEffect ? this.updateAndNotify(v, render) : this.passiveEffect(v, this.updateAndNotify);
-  }
-  setWithVelocity(prev, current, delta) {
-    this.set(current), this.prev = void 0, this.prevFrameValue = prev, this.prevUpdatedAt = this.updatedAt - delta;
-  }
-  /**
-   * Set the state of the `MotionValue`, stopping any active animations,
-   * effects, and resets velocity to `0`.
-   */
-  jump(v, endAnimation = !0) {
-    this.updateAndNotify(v), this.prev = v, this.prevUpdatedAt = this.prevFrameValue = void 0, endAnimation && this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
-  }
-  /**
-   * Returns the latest state of `MotionValue`
-   *
-   * @returns - The latest state of `MotionValue`
-   *
-   * @public
-   */
-  get() {
-    return this.current;
-  }
-  /**
-   * @public
-   */
-  getPrevious() {
-    return this.prev;
-  }
-  /**
-   * Returns the latest velocity of `MotionValue`
-   *
-   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-   *
-   * @public
-   */
-  getVelocity() {
-    const currentTime = time.now();
-    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA)
-      return 0;
-    const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-    return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
-  }
-  /**
-   * Registers a new animation to control this `MotionValue`. Only one
-   * animation can drive a `MotionValue` at one time.
-   *
-   * ```jsx
-   * value.start()
-   * ```
-   *
-   * @param animation - A function that starts the provided animation
-   */
-  start(startAnimation) {
-    return this.stop(), new Promise((resolve) => {
-      this.hasAnimated = !0, this.animation = startAnimation(resolve), this.events.animationStart && this.events.animationStart.notify();
-    }).then(() => {
-      this.events.animationComplete && this.events.animationComplete.notify(), this.clearAnimation();
-    });
-  }
-  /**
-   * Stop the currently active animation.
-   *
-   * @public
-   */
-  stop() {
-    this.animation && (this.animation.stop(), this.events.animationCancel && this.events.animationCancel.notify()), this.clearAnimation();
-  }
-  /**
-   * Returns `true` if this value is currently animating.
-   *
-   * @public
-   */
-  isAnimating() {
-    return !!this.animation;
-  }
-  clearAnimation() {
-    delete this.animation;
-  }
-  /**
-   * Destroy and clean up subscribers to this `MotionValue`.
-   *
-   * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-   * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-   * created a `MotionValue` via the `motionValue` function.
-   *
-   * @public
-   */
-  destroy() {
-    this.clearListeners(), this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
-  }
-}
-function motionValue(init2, options) {
-  return new MotionValue(init2, options);
-}
-function useIsMounted() {
-  const isMounted = useRef(!1);
-  return useIsomorphicLayoutEffect$2(() => (isMounted.current = !0, () => {
-    isMounted.current = !1;
-  }), []), isMounted;
-}
+const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any, { schedule: frame$1, cancel: cancelFrame, state: frameData, steps: frameSteps } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$3, !0);
 function useForceUpdate() {
   const isMounted = useIsMounted(), [forcedRenderCount, setForcedRenderCount] = useState(0), forceRender = useCallback(() => {
     isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
@@ -17797,7 +17300,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
     [visualElement]
   );
 }
-const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({});
+const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({}), { schedule: microtask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, !1);
 function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
   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, {
@@ -17824,7 +17327,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
   }), visualElement;
 }
 function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
-  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = props;
+  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
   visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)), visualElement.projection.setOptions({
     layoutId,
     layout: layout2,
@@ -17839,6 +17342,7 @@ function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor,
      */
     animationType: typeof layout2 == "string" ? layout2 : "both",
     initialPromotionConfig,
+    crossfade: layoutCrossfade,
     layoutScroll,
     layoutRoot
   });
@@ -17847,6 +17351,8 @@ function getClosestProjectingNode(visualElement) {
   if (visualElement)
     return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
+let invariant = () => {
+};
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component: Component2 }) {
   function MotionComponent(props, externalRef) {
     let MeasureLayout2;
@@ -17910,13 +17416,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$2 = (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$1 = (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$2(0, 1, v)
+  transform: (v) => clamp$1(0, 1, v)
 }, scale = {
   ...number,
   default: 1
@@ -18375,6 +17881,243 @@ const positionalKeys = /* @__PURE__ */ new Set([
   "bottom",
   ...transformPropOrder
 ]);
+let now$1;
+function clearTime() {
+  now$1 = void 0;
+}
+const time = {
+  now: () => (now$1 === void 0 && time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now()), now$1),
+  set: (newTime) => {
+    now$1 = newTime, queueMicrotask(clearTime);
+  }
+};
+function addUniqueItem(arr, item) {
+  arr.indexOf(item) === -1 && arr.push(item);
+}
+function removeItem(arr, item) {
+  const index2 = arr.indexOf(item);
+  index2 > -1 && arr.splice(index2, 1);
+}
+class SubscriptionManager {
+  constructor() {
+    this.subscriptions = [];
+  }
+  add(handler) {
+    return addUniqueItem(this.subscriptions, handler), () => removeItem(this.subscriptions, handler);
+  }
+  notify(a2, b2, c2) {
+    const numSubscriptions = this.subscriptions.length;
+    if (numSubscriptions)
+      if (numSubscriptions === 1)
+        this.subscriptions[0](a2, b2, c2);
+      else
+        for (let i2 = 0; i2 < numSubscriptions; i2++) {
+          const handler = this.subscriptions[i2];
+          handler && handler(a2, b2, c2);
+        }
+  }
+  getSize() {
+    return this.subscriptions.length;
+  }
+  clear() {
+    this.subscriptions.length = 0;
+  }
+}
+function velocityPerSecond(velocity, frameDuration) {
+  return frameDuration ? velocity * (1e3 / frameDuration) : 0;
+}
+const MAX_VELOCITY_DELTA = 30, isFloat = (value) => !isNaN(parseFloat(value));
+class MotionValue {
+  /**
+   * @param init - The initiating value
+   * @param config - Optional configuration options
+   *
+   * -  `transformer`: A function to transform incoming values with.
+   */
+  constructor(init2, options = {}) {
+    this.version = "12.7.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;
+  }
+  setCurrent(current) {
+    this.current = current, this.updatedAt = time.now(), this.canTrackVelocity === null && current !== void 0 && (this.canTrackVelocity = isFloat(this.current));
+  }
+  setPrevFrameValue(prevFrameValue = this.current) {
+    this.prevFrameValue = prevFrameValue, this.prevUpdatedAt = this.updatedAt;
+  }
+  /**
+   * Adds a function that will be notified when the `MotionValue` is updated.
+   *
+   * It returns a function that, when called, will cancel the subscription.
+   *
+   * When calling `onChange` inside a React component, it should be wrapped with the
+   * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+   * from the `useEffect` function to ensure you don't add duplicate subscribers..
+   *
+   * ```jsx
+   * export const MyComponent = () => {
+   *   const x = useMotionValue(0)
+   *   const y = useMotionValue(0)
+   *   const opacity = useMotionValue(1)
+   *
+   *   useEffect(() => {
+   *     function updateOpacity() {
+   *       const maxXY = Math.max(x.get(), y.get())
+   *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+   *       opacity.set(newOpacity)
+   *     }
+   *
+   *     const unsubscribeX = x.on("change", updateOpacity)
+   *     const unsubscribeY = y.on("change", updateOpacity)
+   *
+   *     return () => {
+   *       unsubscribeX()
+   *       unsubscribeY()
+   *     }
+   *   }, [])
+   *
+   *   return <motion.div style={{ x }} />
+   * }
+   * ```
+   *
+   * @param subscriber - A function that receives the latest value.
+   * @returns A function that, when called, will cancel this subscription.
+   *
+   * @deprecated
+   */
+  onChange(subscription) {
+    return this.on("change", subscription);
+  }
+  on(eventName, callback) {
+    this.events[eventName] || (this.events[eventName] = new SubscriptionManager());
+    const unsubscribe = this.events[eventName].add(callback);
+    return eventName === "change" ? () => {
+      unsubscribe(), frame$1.read(() => {
+        this.events.change.getSize() || this.stop();
+      });
+    } : unsubscribe;
+  }
+  clearListeners() {
+    for (const eventManagers in this.events)
+      this.events[eventManagers].clear();
+  }
+  /**
+   * Attaches a passive effect to the `MotionValue`.
+   */
+  attach(passiveEffect, stopPassiveEffect) {
+    this.passiveEffect = passiveEffect, this.stopPassiveEffect = stopPassiveEffect;
+  }
+  /**
+   * Sets the state of the `MotionValue`.
+   *
+   * @remarks
+   *
+   * ```jsx
+   * const x = useMotionValue(0)
+   * x.set(10)
+   * ```
+   *
+   * @param latest - Latest value to set.
+   * @param render - Whether to notify render subscribers. Defaults to `true`
+   *
+   * @public
+   */
+  set(v, render = !0) {
+    !render || !this.passiveEffect ? this.updateAndNotify(v, render) : this.passiveEffect(v, this.updateAndNotify);
+  }
+  setWithVelocity(prev, current, delta) {
+    this.set(current), this.prev = void 0, this.prevFrameValue = prev, this.prevUpdatedAt = this.updatedAt - delta;
+  }
+  /**
+   * Set the state of the `MotionValue`, stopping any active animations,
+   * effects, and resets velocity to `0`.
+   */
+  jump(v, endAnimation = !0) {
+    this.updateAndNotify(v), this.prev = v, this.prevUpdatedAt = this.prevFrameValue = void 0, endAnimation && this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
+  }
+  /**
+   * Returns the latest state of `MotionValue`
+   *
+   * @returns - The latest state of `MotionValue`
+   *
+   * @public
+   */
+  get() {
+    return this.current;
+  }
+  /**
+   * @public
+   */
+  getPrevious() {
+    return this.prev;
+  }
+  /**
+   * Returns the latest velocity of `MotionValue`
+   *
+   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+   *
+   * @public
+   */
+  getVelocity() {
+    const currentTime = time.now();
+    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA)
+      return 0;
+    const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
+    return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
+  }
+  /**
+   * Registers a new animation to control this `MotionValue`. Only one
+   * animation can drive a `MotionValue` at one time.
+   *
+   * ```jsx
+   * value.start()
+   * ```
+   *
+   * @param animation - A function that starts the provided animation
+   */
+  start(startAnimation) {
+    return this.stop(), new Promise((resolve) => {
+      this.hasAnimated = !0, this.animation = startAnimation(resolve), this.events.animationStart && this.events.animationStart.notify();
+    }).then(() => {
+      this.events.animationComplete && this.events.animationComplete.notify(), this.clearAnimation();
+    });
+  }
+  /**
+   * Stop the currently active animation.
+   *
+   * @public
+   */
+  stop() {
+    this.animation && (this.animation.stop(), this.events.animationCancel && this.events.animationCancel.notify()), this.clearAnimation();
+  }
+  /**
+   * Returns `true` if this value is currently animating.
+   *
+   * @public
+   */
+  isAnimating() {
+    return !!this.animation;
+  }
+  clearAnimation() {
+    delete this.animation;
+  }
+  /**
+   * Destroy and clean up subscribers to this `MotionValue`.
+   *
+   * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+   * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+   * created a `MotionValue` via the `motionValue` function.
+   *
+   * @public
+   */
+  destroy() {
+    this.clearListeners(), this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
+  }
+}
+function motionValue(init2, options) {
+  return new MotionValue(init2, options);
+}
 function setMotionValue(visualElement, key2, value) {
   visualElement.hasValue(key2) ? visualElement.getValue(key2).set(value) : visualElement.addValue(key2, motionValue(value));
 }
@@ -18394,6 +18137,10 @@ function addValueToWillChange(visualElement, key2) {
   const willChange = visualElement.getValue("willChange");
   if (isWillChangeMotionValue(willChange))
     return willChange.add(key2);
+  if (!willChange && MotionGlobalConfig.WillChange) {
+    const newWillChange = new MotionGlobalConfig.WillChange("auto");
+    visualElement.addValue("willChange", newWillChange), newWillChange.add(key2);
+  }
 }
 function getOptimisedAppearId(visualElement) {
   return visualElement.props[optimizedAppearDataAttribute];
@@ -18430,7 +18177,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$2(0, 255, v), rgbUnit = {
+}, clampRgbUnit = (v) => clamp$1(0, 255, v), rgbUnit = {
   ...number,
   transform: (v) => Math.round(clampRgbUnit(v))
 }, rgba$1 = {
@@ -18783,6 +18530,9 @@ class DOMKeyframesResolver extends KeyframeResolver {
 const isAnimatable = (value, name) => name === "zIndex" ? !1 : !!(typeof value == "number" || Array.isArray(value) || typeof value == "string" && // It's animatable if we have a string
 (complex.test(value) || value === "0") && // And it contains numbers and/or colors
 !value.startsWith("url("));
+function isGenerator(type) {
+  return typeof type == "function" && "applyToOptions" in type;
+}
 function hasKeyframesChanged(keyframes2) {
   const current = keyframes2[0];
   if (keyframes2.length === 1)
@@ -18996,10 +18746,10 @@ const springDefaults = {
   // in seconds
   minDamping: 0.05,
   maxDamping: 1
-}, safeMin = 1e-3;
+}, secondsToMilliseconds = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3, millisecondsToSeconds = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3, 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$2(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio), duration = clamp$2(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration)), dampingRatio < 1 ? (envelope = (undampedFreq2) => {
+  dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio), duration = clamp$1(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) => {
@@ -19038,7 +18788,47 @@ function approximateRoot(envelope, derivative, initialGuess) {
 function calcAngularFreq(undampedFreq, dampingRatio) {
   return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
-const durationKeys = ["duration", "bounce"], physicsKeys = ["stiffness", "damping", "mass"];
+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)
+  };
+}
+const supportsFlags = {};
+// @__NO_SIDE_EFFECTS__
+function memo(callback) {
+  let result;
+  return () => (result === void 0 && (result = callback()), result);
+}
+function memoSupports(callback, supportsFlag) {
+  const memoized = /* @__PURE__ */ memo(callback);
+  return () => supportsFlags[supportsFlag] ?? memoized();
+}
+const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
+  try {
+    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+  } catch {
+    return !1;
+  }
+  return !0;
+}, "linearEasing"), generateLinearEasing = (easing, duration, resolution = 10) => {
+  let points = "";
+  const numPoints = Math.max(Math.round(duration / resolution), 2);
+  for (let i2 = 0; i2 < numPoints; i2++)
+    points += easing(i2 / (numPoints - 1)) + ", ";
+  return `linear(${points.substring(0, points.length - 2)})`;
+}, durationKeys = ["duration", "bounce"], physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys2) {
   return keys2.some((key2) => options[key2] !== void 0);
 }
@@ -19053,7 +18843,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$2(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$1(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
       springOptions = {
         ...springOptions,
         mass: springDefaults.mass,
@@ -19157,7 +18947,7 @@ function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstan
     }
   };
 }
-const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1), easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1), easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", easingLookup = {
+const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1), easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1), easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", easingLookup = {
   linear: noop$3,
   easeIn,
   easeInOut,
@@ -19177,6 +18967,9 @@ const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1), easeOut = /* @__PURE_
   } else if (typeof definition == "string")
     return easingLookup[definition];
   return definition;
+}, progress = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 };
 function createMixers(output, ease2, customMixer) {
   const mixers = [], mixerFactory = customMixer || mix, numMixers = output.length - 1;
@@ -19208,7 +19001,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$2(input2[0], input2[inputLength - 1], v)) : interpolator;
+  return isClamp ? (v) => interpolator(clamp$1(input2[0], input2[inputLength - 1], v)) : interpolator;
 }
 function fillOffset(offset2, remaining) {
   const min2 = offset2[offset2.length - 1];
@@ -19318,7 +19111,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$2(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$1(0, 1, iterationProgress) * resolvedDuration;
     }
     const state = isInDelayPhase ? { done: !1, value: keyframes2[0] } : frameGenerator.next(elapsed);
     mapPercentToKeyframes && (state.value = mapPercentToKeyframes(state.value));
@@ -19395,7 +19188,44 @@ 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"
-]), supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), sampleDelta = 10, maxDuration = 2e4;
+]), supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
+  linear: "linear",
+  ease: "ease",
+  easeIn: "ease-in",
+  easeOut: "ease-out",
+  easeInOut: "ease-in-out",
+  circIn: /* @__PURE__ */ cubicBezierAsString([0, 0.65, 0.55, 1]),
+  circOut: /* @__PURE__ */ cubicBezierAsString([0.55, 0, 1, 0.45]),
+  backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+  backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
+};
+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 attachTimeline(animation, timeline) {
+  animation.timeline = timeline, animation.onfinish = null;
+}
+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 sampleDelta = 10, maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
   return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
@@ -19604,6 +19434,86 @@ const underDampedSpring = {
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
   return !!Object.keys(transition).length;
 }
+function getValueTransition$1(transition, key2) {
+  return transition?.[key2] ?? transition?.default ?? transition;
+}
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
+class GroupAnimation {
+  constructor(animations2) {
+    this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
+  }
+  get finished() {
+    return Promise.all(this.animations.map((animation) => animation.finished));
+  }
+  /**
+   * TODO: Filter out cancelled or stopped animations before returning
+   */
+  getAll(propName) {
+    return this.animations[0][propName];
+  }
+  setAll(propName, newValue) {
+    for (let i2 = 0; i2 < this.animations.length; i2++)
+      this.animations[i2][propName] = newValue;
+  }
+  attachTimeline(timeline, fallback) {
+    const subscriptions = this.animations.map((animation) => {
+      if (supportsScrollTimeline() && animation.attachTimeline)
+        return animation.attachTimeline(timeline);
+      if (typeof fallback == "function")
+        return fallback(animation);
+    });
+    return () => {
+      subscriptions.forEach((cancel, i2) => {
+        cancel && cancel(), this.animations[i2].stop();
+      });
+    };
+  }
+  get time() {
+    return this.getAll("time");
+  }
+  set time(time2) {
+    this.setAll("time", time2);
+  }
+  get speed() {
+    return this.getAll("speed");
+  }
+  set speed(speed) {
+    this.setAll("speed", speed);
+  }
+  get startTime() {
+    return this.getAll("startTime");
+  }
+  get duration() {
+    let max2 = 0;
+    for (let i2 = 0; i2 < this.animations.length; i2++)
+      max2 = Math.max(max2, this.animations[i2].duration);
+    return max2;
+  }
+  runAll(methodName) {
+    this.animations.forEach((controls) => controls[methodName]());
+  }
+  flatten() {
+    this.runAll("flatten");
+  }
+  play() {
+    this.runAll("play");
+  }
+  pause() {
+    this.runAll("pause");
+  }
+  cancel() {
+    this.runAll("cancel");
+  }
+  complete() {
+    this.runAll("complete");
+  }
+}
+class GroupAnimationWithThen extends GroupAnimation {
+  then(onResolve, _onReject) {
+    return this.finished.finally(onResolve).then(() => {
+    });
+  }
+}
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
   const valueTransition = getValueTransition$1(transition, name) || {}, delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
@@ -19919,6 +19829,7 @@ const animations = {
 function addDomEvent(target, eventName, handler, options = { passive: !0 }) {
   return target.addEventListener(eventName, handler, options), () => target.removeEventListener(eventName, handler);
 }
+const isPrimaryPointer = (event) => event.pointerType === "mouse" ? typeof event.button != "number" || event.button <= 0 : event.isPrimary !== !1;
 function extractEventInfo(event) {
   return {
     point: {
@@ -20160,7 +20071,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$2(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$1(0, 1, origin);
 }
 function rebaseAxisConstraints(layout2, constraints) {
   const relativeConstraints = {};
@@ -20182,6 +20093,20 @@ function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
 function resolvePointElastic(dragElastic, label2) {
   return typeof dragElastic == "number" ? dragElastic : dragElastic[label2] || 0;
 }
+const isDragging = {
+  x: !1,
+  y: !1
+};
+function isDragActive() {
+  return isDragging.x || isDragging.y;
+}
+function setDragLock(axis) {
+  return axis === "x" || axis === "y" ? isDragging[axis] ? null : (isDragging[axis] = !0, () => {
+    isDragging[axis] = !1;
+  }) : isDragging.x || isDragging.y ? null : (isDragging.x = isDragging.y = !0, () => {
+    isDragging.x = isDragging.y = !1;
+  });
+}
 const elementDragControls = /* @__PURE__ */ new WeakMap();
 class VisualElementDragControls {
   constructor(visualElement) {
@@ -20580,12 +20505,7 @@ function delay(callback, timeout2) {
 }
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"], numBorders = borders.length, asNumber = (value) => typeof value == "string" ? parseFloat(value) : value, isPx = (value) => typeof value == "number" || px.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
-  shouldCrossfadeOpacity ? (target.opacity = mixNumber$1(
-    0,
-    // TODO Reinstate this if only child
-    lead.opacity !== void 0 ? lead.opacity : 1,
-    easeCrossfadeIn(progress2)
-  ), target.opacityExit = mixNumber$1(follow.opacity !== void 0 ? follow.opacity : 1, 0, easeCrossfadeOut(progress2))) : isOnlyMember && (target.opacity = mixNumber$1(follow.opacity !== void 0 ? follow.opacity : 1, lead.opacity !== void 0 ? lead.opacity : 1, progress2));
+  shouldCrossfadeOpacity ? (target.opacity = mixNumber$1(0, lead.opacity ?? 1, easeCrossfadeIn(progress2)), target.opacityExit = mixNumber$1(follow.opacity ?? 1, 0, easeCrossfadeOut(progress2))) : isOnlyMember && (target.opacity = mixNumber$1(follow.opacity ?? 1, lead.opacity ?? 1, progress2));
   for (let i2 = 0; i2 < numBorders; i2++) {
     const borderLabel = `border${borders[i2]}Radius`;
     let followRadius = getRadius(follow, borderLabel), leadRadius = getRadius(lead, borderLabel);
@@ -20842,7 +20762,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$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;
+      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;
     }
     didUpdate() {
       this.updateScheduled || (this.updateScheduled = !0, microtask.read(this.scheduleUpdate));
@@ -21309,6 +21229,43 @@ const DocumentProjectionNode = createProjectionNode({
     MeasureLayout
   }
 };
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  if (elementOrSelector instanceof EventTarget)
+    return [elementOrSelector];
+  if (typeof elementOrSelector == "string") {
+    let root2 = document;
+    const elements = selectorCache?.[elementOrSelector] ?? root2.querySelectorAll(elementOrSelector);
+    return elements ? Array.from(elements) : [];
+  }
+  return Array.from(elementOrSelector);
+}
+function setupGesture(elementOrSelector, options) {
+  const elements = resolveElements(elementOrSelector), gestureAbortController = new AbortController(), eventOptions = {
+    passive: !0,
+    ...options,
+    signal: gestureAbortController.signal
+  };
+  return [elements, eventOptions, () => gestureAbortController.abort()];
+}
+function isValidHover(event) {
+  return !(event.pointerType === "touch" || isDragActive());
+}
+function hover(elementOrSelector, onHoverStart, options = {}) {
+  const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options), onPointerEnter = (enterEvent) => {
+    if (!isValidHover(enterEvent))
+      return;
+    const { target } = enterEvent, onHoverEnd = onHoverStart(target, enterEvent);
+    if (typeof onHoverEnd != "function" || !target)
+      return;
+    const onPointerLeave = (leaveEvent) => {
+      isValidHover(leaveEvent) && (onHoverEnd(leaveEvent), target.removeEventListener("pointerleave", onPointerLeave));
+    };
+    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+  };
+  return elements.forEach((element) => {
+    element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+  }), cancel;
+}
 function handleHoverEvent(node2, event, lifecycle) {
   const { props } = node2;
   node2.animationState && props.whileHover && node2.animationState.setActive("whileHover", lifecycle === "Start");
@@ -21345,6 +21302,62 @@ class FocusGesture extends Feature {
   unmount() {
   }
 }
+const isNodeOrChild = (parent, child) => child ? parent === child ? !0 : isNodeOrChild(parent, child.parentElement) : !1, focusableElements = /* @__PURE__ */ new Set([
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "A"
+]);
+function isElementKeyboardAccessible(element) {
+  return focusableElements.has(element.tagName) || element.tabIndex !== -1;
+}
+const isPressing = /* @__PURE__ */ new WeakSet();
+function filterEvents(callback) {
+  return (event) => {
+    event.key === "Enter" && callback(event);
+  };
+}
+function firePointerEvent(target, type) {
+  target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: !0, bubbles: !0 }));
+}
+const enableKeyboardPress = (focusEvent, eventOptions) => {
+  const element = focusEvent.currentTarget;
+  if (!element)
+    return;
+  const handleKeydown = filterEvents(() => {
+    if (isPressing.has(element))
+      return;
+    firePointerEvent(element, "down");
+    const handleKeyup = filterEvents(() => {
+      firePointerEvent(element, "up");
+    }), handleBlur = () => firePointerEvent(element, "cancel");
+    element.addEventListener("keyup", handleKeyup, eventOptions), element.addEventListener("blur", handleBlur, eventOptions);
+  });
+  element.addEventListener("keydown", handleKeydown, eventOptions), element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+};
+function isValidPressEvent(event) {
+  return isPrimaryPointer(event) && !isDragActive();
+}
+function press(targetOrSelector, onPressStart, options = {}) {
+  const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options), startPress = (startEvent) => {
+    const target = startEvent.currentTarget;
+    if (!isValidPressEvent(startEvent) || isPressing.has(target))
+      return;
+    isPressing.add(target);
+    const onPressEnd = onPressStart(target, startEvent), onPointerEnd = (endEvent, success) => {
+      window.removeEventListener("pointerup", onPointerUp), window.removeEventListener("pointercancel", onPointerCancel), !(!isValidPressEvent(endEvent) || !isPressing.has(target)) && (isPressing.delete(target), typeof onPressEnd == "function" && onPressEnd(endEvent, { success }));
+    }, onPointerUp = (upEvent) => {
+      onPointerEnd(upEvent, target === window || target === document || options.useGlobalTarget || isNodeOrChild(target, upEvent.target));
+    }, onPointerCancel = (cancelEvent) => {
+      onPointerEnd(cancelEvent, !1);
+    };
+    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.hasAttribute("tabindex") && (target.tabIndex = 0));
+  }), cancelEvents;
+}
 function handlePressEvent(node2, event, lifecycle) {
   const { props } = node2;
   if (node2.current instanceof HTMLButtonElement && node2.current.disabled)
@@ -24711,18 +24724,18 @@ const errorMessages = {
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]
 ], elementSelectionKeys = ["Enter", " ", "Escape"];
-var ConnectionMode$1;
+var ConnectionMode;
 (function(ConnectionMode2) {
   ConnectionMode2.Strict = "strict", ConnectionMode2.Loose = "loose";
-})(ConnectionMode$1 || (ConnectionMode$1 = {}));
-var PanOnScrollMode$1;
+})(ConnectionMode || (ConnectionMode = {}));
+var PanOnScrollMode;
 (function(PanOnScrollMode2) {
   PanOnScrollMode2.Free = "free", PanOnScrollMode2.Vertical = "vertical", PanOnScrollMode2.Horizontal = "horizontal";
-})(PanOnScrollMode$1 || (PanOnScrollMode$1 = {}));
-var SelectionMode$1;
+})(PanOnScrollMode || (PanOnScrollMode = {}));
+var SelectionMode;
 (function(SelectionMode2) {
   SelectionMode2.Partial = "partial", SelectionMode2.Full = "full";
-})(SelectionMode$1 || (SelectionMode$1 = {}));
+})(SelectionMode || (SelectionMode = {}));
 const initialConnection = {
   inProgress: !1,
   isValid: null,
@@ -24735,44 +24748,44 @@ const initialConnection = {
   toPosition: null,
   toNode: null
 };
-var ConnectionLineType$1;
+var ConnectionLineType;
 (function(ConnectionLineType2) {
   ConnectionLineType2.Bezier = "default", ConnectionLineType2.Straight = "straight", ConnectionLineType2.Step = "step", ConnectionLineType2.SmoothStep = "smoothstep", ConnectionLineType2.SimpleBezier = "simplebezier";
-})(ConnectionLineType$1 || (ConnectionLineType$1 = {}));
-var MarkerType$1;
+})(ConnectionLineType || (ConnectionLineType = {}));
+var MarkerType;
 (function(MarkerType2) {
   MarkerType2.Arrow = "arrow", MarkerType2.ArrowClosed = "arrowclosed";
-})(MarkerType$1 || (MarkerType$1 = {}));
-var Position$1;
+})(MarkerType || (MarkerType = {}));
+var Position;
 (function(Position2) {
   Position2.Left = "left", Position2.Top = "top", Position2.Right = "right", Position2.Bottom = "bottom";
-})(Position$1 || (Position$1 = {}));
+})(Position || (Position = {}));
 const oppositePosition = {
-  [Position$1.Left]: Position$1.Right,
-  [Position$1.Right]: Position$1.Left,
-  [Position$1.Top]: Position$1.Bottom,
-  [Position$1.Bottom]: Position$1.Top
+  [Position.Left]: Position.Right,
+  [Position.Right]: Position.Left,
+  [Position.Top]: Position.Bottom,
+  [Position.Bottom]: Position.Top
 };
 function getConnectionStatus(isValid) {
   return isValid === null ? null : isValid ? "valid" : "invalid";
 }
-const isEdgeBase = (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];
+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];
   return {
     x: node2.position.x - offsetX,
     y: node2.position.y - offsetY
   };
-}, getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: void 0 }) => {
+}, getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
   if (nodes.length === 0)
     return { x: 0, y: 0, width: 0, height: 0 };
   const box = nodes.reduce((currBox, nodeOrId) => {
     const isId = typeof nodeOrId == "string";
     let currentNode = !params.nodeLookup && !isId ? nodeOrId : void 0;
-    params.nodeLookup && (currentNode = isId ? params.nodeLookup.get(nodeOrId) : isInternalNodeBase$1(nodeOrId) ? nodeOrId : params.nodeLookup.get(nodeOrId.id));
+    params.nodeLookup && (currentNode = isId ? params.nodeLookup.get(nodeOrId) : isInternalNodeBase(nodeOrId) ? nodeOrId : params.nodeLookup.get(nodeOrId.id));
     const nodeBox = currentNode ? nodeToBox(currentNode, params.nodeOrigin) : { x: 0, y: 0, x2: 0, y2: 0 };
-    return getBoundsOfBoxes$1(currBox, nodeBox);
+    return getBoundsOfBoxes(currBox, nodeBox);
   }, { x: 1 / 0, y: 1 / 0, x2: -1 / 0, y2: -1 / 0 });
-  return boxToRect$1(box);
+  return boxToRect(box);
 }, getInternalNodesBounds = (nodeLookup, params = {}) => {
   if (nodeLookup.size === 0)
     return { x: 0, y: 0, width: 0, height: 0 };
@@ -24780,9 +24793,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$1(box, nodeBox);
+      box = getBoundsOfBoxes(box, nodeBox);
     }
-  }), boxToRect$1(box);
+  }), boxToRect(box);
 }, getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = !1, excludeNonSelectableNodes = !1) => {
   const paneRect = {
     ...pointToRendererPoint(rect, [tx, ty, tScale]),
@@ -24793,7 +24806,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$1(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(node2)), area = (width ?? 0) * (height ?? 0), partiallyVisible = partially && overlappingArea > 0;
     (!node2.internals.handleBounds || partiallyVisible || overlappingArea >= area || node2.dragging) && visibleNodes.push(node2);
   }
   return visibleNodes;
@@ -24812,7 +24825,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$1(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
+  const nodesToFit = getFitViewNodes(nodes, options), bounds = getInternalNodesBounds(nodesToFit), viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
   return await panZoom.setViewport(viewport, { duration: options?.duration }), Promise.resolve(!0);
 }
 function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError }) {
@@ -24863,37 +24876,37 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
   });
   return typeof onBeforeDeleteResult == "boolean" ? onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] } : onBeforeDeleteResult;
 }
-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))
+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))
 });
 function clampPositionToParent(childPosition, childDimensions, parent) {
-  const { width: parentWidth, height: parentHeight } = getNodeDimensions$1(parent), { x: parentX, y: parentY } = parent.internals.positionAbsolute;
+  const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent), { x: parentX, y: parentY } = parent.internals.positionAbsolute;
   return clampPosition(childPosition, [
     [parentX, parentY],
     [parentX + parentWidth, parentY + parentHeight]
   ], childDimensions);
 }
-const calcAutoPanVelocity = (value, 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 calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs(value - min2), 1, min2) / min2 : value > max2 ? -clamp(Math.abs(value - max2), 1, min2) / min2 : 0, calcAutoPan = (pos, bounds, speed = 15, distance2 = 40) => {
   const xMovement = calcAutoPanVelocity(pos.x, distance2, bounds.width - distance2) * speed, yMovement = calcAutoPanVelocity(pos.y, distance2, bounds.height - distance2) * speed;
   return [xMovement, yMovement];
-}, getBoundsOfBoxes$1 = (box1, box2) => ({
+}, 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$1 = ({ x: x2, y: y2, width, height }) => ({
+}), rectToBox = ({ x: x2, y: y2, width, height }) => ({
   x: x2,
   y: y2,
   x2: x2 + width,
   y2: y2 + height
-}), boxToRect$1 = ({ x: x2, y: y2, x2: x22, y2: y22 }) => ({
+}), boxToRect = ({ x: x2, y: y2, x2: x22, y2: y22 }) => ({
   x: x2,
   y: y2,
   width: x22 - x2,
   height: y22 - y2
-}), nodeToRect$1 = (node2, nodeOrigin = [0, 0]) => {
-  const { x: x2, y: y2 } = isInternalNodeBase$1(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin$1(node2, nodeOrigin);
+}), nodeToRect = (node2, nodeOrigin = [0, 0]) => {
+  const { x: x2, y: y2 } = isInternalNodeBase(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin(node2, nodeOrigin);
   return {
     x: x2,
     y: y2,
@@ -24901,14 +24914,14 @@ const calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp$1(Math.a
     height: node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0
   };
 }, nodeToBox = (node2, nodeOrigin = [0, 0]) => {
-  const { x: x2, y: y2 } = isInternalNodeBase$1(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin$1(node2, nodeOrigin);
+  const { x: x2, y: y2 } = isInternalNodeBase(node2) ? node2.internals.positionAbsolute : getNodePositionWithOrigin(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$1 = (rect1, rect2) => boxToRect$1(getBoundsOfBoxes$1(rectToBox$1(rect1), rectToBox$1(rect2))), getOverlappingArea = (rectA, rectB) => {
+}, getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2))), getOverlappingArea = (rectA, rectB) => {
   const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x)), yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
   return Math.ceil(xOverlap * yOverlap);
 }, isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y), isNumeric = (n2) => !isNaN(n2) && isFinite(n2), devWarn = (id2, message) => {
@@ -24921,11 +24934,11 @@ const calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp$1(Math.a
     y: (y2 - ty) / tScale
   };
   return snapToGrid ? snapPosition(position, snapGrid) : position;
-}, rendererPointToPoint$1 = ({ x: x2, y: y2 }, [tx, ty, tScale]) => ({
+}, rendererPointToPoint = ({ x: x2, y: y2 }, [tx, ty, tScale]) => ({
   x: x2 * tScale + tx,
   y: y2 * tScale + ty
 });
-function parsePadding$1(padding, viewport) {
+function parsePadding(padding, viewport) {
   if (typeof padding == "number")
     return Math.floor(viewport - viewport / (1 + padding));
   if (typeof padding == "string" && padding.endsWith("px")) {
@@ -24940,9 +24953,9 @@ function parsePadding$1(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$1(padding, width, height) {
+function parsePaddings(padding, width, height) {
   if (typeof padding == "string" || typeof padding == "number") {
-    const paddingY = parsePadding$1(padding, height), paddingX = parsePadding$1(padding, width);
+    const paddingY = parsePadding(padding, height), paddingX = parsePadding(padding, width);
     return {
       top: paddingY,
       right: paddingX,
@@ -24953,13 +24966,13 @@ function parsePaddings$1(padding, width, height) {
     };
   }
   if (typeof padding == "object") {
-    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);
+    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);
     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$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;
+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),
@@ -24967,8 +24980,8 @@ function calculateAppliedPaddings$1(bounds, x2, y2, zoom2, width, height) {
     bottom: Math.floor(bottom)
   };
 }
-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 = {
+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),
@@ -24979,11 +24992,11 @@ const getViewportForBounds$1 = (bounds, width, height, minZoom, maxZoom, padding
     y: y2 - offset2.top + offset2.bottom,
     zoom: clampedZoom
   };
-}, isMacOs$1 = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
+}, isMacOs = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
 function isCoordinateExtent(extent) {
   return extent !== void 0 && extent !== "parent";
 }
-function getNodeDimensions$1(node2) {
+function getNodeDimensions(node2) {
   return {
     width: node2.measured?.width ?? node2.width ?? node2.initialWidth ?? 0,
     height: node2.measured?.height ?? node2.height ?? node2.initialHeight ?? 0
@@ -25045,41 +25058,41 @@ const isMouseEvent = (event) => "clientX" in event, getEventPosition = (event, b
     };
   });
 };
-function getBezierEdgeCenter$1({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY }) {
+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$1(distance2, curvature) {
+function calculateControlOffset(distance2, curvature) {
   return distance2 >= 0 ? 0.5 * distance2 : curvature * 25 * Math.sqrt(-distance2);
 }
-function getControlWithCurvature$1({ pos, x1, y1, x2, y2, c: c2 }) {
+function getControlWithCurvature({ pos, x1, y1, x2, y2, c: c2 }) {
   switch (pos) {
-    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({
+    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$1({
+  }), [targetControlX, targetControlY] = getControlWithCurvature({
     pos: targetPosition,
     x1: targetX,
     y1: targetY,
     x2: sourceX,
     y2: sourceY,
     c: curvature
-  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter$1({
+  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
     sourceX,
     sourceY,
     targetX,
@@ -25108,7 +25121,7 @@ function getElevatedEdgeZIndex({ sourceNode, targetNode, selected: selected2 = !
   return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform: transform2 }) {
-  const edgeBox = getBoundsOfBoxes$1(nodeToBox(sourceNode), nodeToBox(targetNode));
+  const edgeBox = getBoundsOfBoxes(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],
@@ -25116,7 +25129,7 @@ function isEdgeVisible({ sourceNode, targetNode, width, height, transform: trans
     width: width / transform2[2],
     height: height / transform2[2]
   };
-  return getOverlappingArea(viewRect, boxToRect$1(edgeBox)) > 0;
+  return getOverlappingArea(viewRect, boxToRect(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)
@@ -25137,12 +25150,12 @@ function getStraightPath({ sourceX, sourceY, targetX, targetY }) {
   return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY];
 }
 const handleDirections = {
-  [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 }) {
+  [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 }) {
   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,
@@ -25200,7 +25213,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$1.Bottom, targetX, targetY, targetPosition = Position$1.Top, borderRadius: borderRadius2 = 5, centerX, centerY: centerY2, offset: offset2 = 20 }) {
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius: borderRadius2 = 5, centerX, centerY: centerY2, offset: offset2 = 20 }) {
   const [points, labelX, labelY, offsetX, offsetY] = getPoints({
     source: { x: sourceX, y: sourceY },
     sourcePosition,
@@ -25223,7 +25236,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$1.Strict ? targetHandleBounds?.target ?? [] : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
+    params.connectionMode === ConnectionMode.Strict ? targetHandleBounds?.target ?? [] : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
     params.targetHandle
   );
   if (!sourceHandle || !targetHandle)
@@ -25232,7 +25245,7 @@ function getEdgePosition(params) {
       sourceHandle: params.sourceHandle,
       targetHandle: params.targetHandle
     })), null;
-  const sourcePosition = sourceHandle?.position || Position$1.Bottom, targetPosition = targetHandle?.position || Position$1.Top, source = getHandlePosition(sourceNode, sourceHandle, sourcePosition), target = getHandlePosition(targetNode, targetHandle, targetPosition);
+  const sourcePosition = sourceHandle?.position || Position.Bottom, targetPosition = targetHandle?.position || Position.Top, source = getHandlePosition(sourceNode, sourceHandle, sourcePosition), target = getHandlePosition(targetNode, targetHandle, targetPosition);
   return {
     sourceX: source.x,
     sourceY: source.y,
@@ -25253,18 +25266,18 @@ function toHandleBounds(handles) {
     target
   };
 }
-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);
+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);
   if (center)
     return { x: x2 + width / 2, y: y2 + height / 2 };
   switch (handle?.position ?? fallbackPosition) {
-    case Position$1.Top:
+    case Position.Top:
       return { x: x2 + width / 2, y: y2 };
-    case Position$1.Right:
+    case Position.Right:
       return { x: x2 + width, y: y2 + height / 2 };
-    case Position$1.Bottom:
+    case Position.Bottom:
       return { x: x2 + width / 2, y: y2 + height };
-    case Position$1.Left:
+    case Position.Left:
       return { x: x2, y: y2 + height / 2 };
   }
 }
@@ -25291,16 +25304,16 @@ function getNodeToolbarTransform(nodeRect, viewport, position, offset2, align) {
     nodeRect.y * viewport.zoom + viewport.y - offset2
   ], shift2 = [-100 * alignmentOffset, -100];
   switch (position) {
-    case Position$1.Right:
+    case Position.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$1.Bottom:
+    case Position.Bottom:
       pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset2, shift2[1] = 0;
       break;
-    case Position$1.Left:
+    case Position.Left:
       pos = [
         nodeRect.x * viewport.zoom + viewport.x - offset2,
         (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
@@ -25330,7 +25343,7 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
     if (node2.parentId)
       updateChildNode(node2, nodeLookup, parentLookup, _options);
     else {
-      const positionWithOrigin = getNodePositionWithOrigin$1(node2, _options.nodeOrigin), extent = isCoordinateExtent(node2.extent) ? node2.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions$1(node2));
+      const positionWithOrigin = getNodePositionWithOrigin(node2, _options.nodeOrigin), extent = isCoordinateExtent(node2.extent) ? node2.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node2));
       node2.internals.positionAbsolute = clampedPosition;
     }
 }
@@ -25344,7 +25357,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     if (_options.checkEquality && userNode === internalNode?.internals.userNode)
       nodeLookup.set(userNode.id, internalNode);
     else {
-      const positionWithOrigin = getNodePositionWithOrigin$1(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions$1(userNode));
+      const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin), extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
       internalNode = {
         ..._options.defaults,
         ...userNode,
@@ -25392,7 +25405,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$1(childNode), positionWithOrigin = getNodePositionWithOrigin$1(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin;
+  const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute, childDimensions = getNodeDimensions(childNode), positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin), clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin;
   let absolutePosition = clampPosition({ x: parentX + clampedPosition.x, y: parentY + clampedPosition.y }, nodeExtent, childDimensions);
   childNode.extent === "parent" && (absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode));
   const childZ = calculateZ(childNode, selectedNodeZ), parentZ = parentNode.internals.z ?? 0;
@@ -25408,11 +25421,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$1(parent), expandedRect = getBoundsOfRects$1(parentRect, child.rect);
+    const parentRect = parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent), expandedRect = getBoundsOfRects(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$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];
+    const positionAbsolute = parent.internals.positionAbsolute, dimensions = getNodeDimensions(parent), origin = parent.origin ?? nodeOrigin, xChange = expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0, yChange = expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0, newWidth = Math.max(dimensions.width, Math.round(expandedRect.width)), newHeight = Math.max(dimensions.height, Math.round(expandedRect.height)), widthChange = (newWidth - dimensions.width) * origin[0], heightChange = (newHeight - dimensions.height) * origin[1];
     (xChange > 0 || yChange > 0 || widthChange || heightChange) && (changes.push({
       id: parentId,
       type: "position",
@@ -25484,7 +25497,7 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
       }), node2.expandParent && node2.parentId && parentExpandChildren.push({
         id: node2.id,
         parentId: node2.parentId,
-        rect: nodeToRect$1(newNode, nodeOrigin)
+        rect: nodeToRect(newNode, nodeOrigin)
       }));
     }
   }
@@ -25601,7 +25614,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$1(rect);
+        nodesBox = rectToBox(rect);
       }
       for (const [id2, dragItem] of dragItems) {
         if (!nodeLookup.has(id2))
@@ -25710,7 +25723,7 @@ function getNodesWithinDistance(position, nodeLookup, distance2) {
     height: distance2 * 2
   };
   for (const node2 of nodeLookup.values())
-    getOverlappingArea(rect, nodeToRect$1(node2)) > 0 && nodes.push(node2);
+    getOverlappingArea(rect, nodeToRect(node2)) > 0 && nodes.push(node2);
   return nodes;
 }
 const ADDITIONAL_DISTANCE = 250;
@@ -25773,7 +25786,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   }, fromNodeInternal = nodeLookup.get(nodeId), newConnection = {
     inProgress: !0,
     isValid: null,
-    from: getHandlePosition(fromNodeInternal, fromHandle, Position$1.Left, !0),
+    from: getHandlePosition(fromNodeInternal, fromHandle, Position.Left, !0),
     fromHandle,
     fromPosition: fromHandle.position,
     fromNode: fromNodeInternal,
@@ -25809,7 +25822,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       // from stays the same
       ...previousConnection,
       isValid,
-      to: closestHandle && isValid ? rendererPointToPoint$1({ x: closestHandle.x, y: closestHandle.y }, transform2) : position,
+      to: closestHandle && isValid ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform2) : position,
       toHandle: result.toHandle,
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
       toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null
@@ -25844,7 +25857,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
       targetHandle: isTarget ? fromHandleId : handleId
     };
     result.connection = connection;
-    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode$1.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
+    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
     result.isValid = isValid && isValidConnection(connection), result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, !1);
   }
   return result;
@@ -25911,7 +25924,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$1() ? 10 : 1;
+  const factor = event.ctrlKey && isMacOs() ? 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 }) {
@@ -25926,8 +25939,8 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
       return;
     }
     const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
-    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(
+    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(
       d3Selection,
       -(deltaX / currentZoom) * panOnScrollSpeed,
       -(deltaY / currentZoom) * panOnScrollSpeed,
@@ -26003,7 +26016,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
   setViewportConstrained({
     x: viewport.x,
     y: viewport.y,
-    zoom: clamp$1(viewport.zoom, minZoom, maxZoom)
+    zoom: clamp(viewport.zoom, minZoom, maxZoom)
   }, [
     [0, 0],
     [bbox.width, bbox.height]
@@ -26127,10 +26140,10 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
     setClickDistance
   };
 }
-var ResizeControlVariant$1;
+var ResizeControlVariant;
 (function(ResizeControlVariant2) {
   ResizeControlVariant2.Line = "line", ResizeControlVariant2.Handle = "handle";
-})(ResizeControlVariant$1 || (ResizeControlVariant$1 = {}));
+})(ResizeControlVariant || (ResizeControlVariant = {}));
 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;
@@ -26628,7 +26641,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$1(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
+      const { width, height, minZoom, maxZoom, panZoom } = store.getState(), viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
       return panZoom ? (await panZoom.setViewport(viewport, { duration: options?.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
     screenToFlowPosition: (clientPosition, options = {}) => {
@@ -26645,7 +26658,7 @@ const useViewportHelper = () => {
       const { transform: transform2, domNode } = store.getState();
       if (!domNode)
         return flowPosition;
-      const { x: domX, y: domY } = domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint$1(flowPosition, transform2);
+      const { x: domX, y: domY } = domNode.getBoundingClientRect(), rendererPosition = rendererPointToPoint(flowPosition, transform2);
       return {
         x: rendererPosition.x + domX,
         y: rendererPosition.y + domY
@@ -26814,7 +26827,7 @@ function useReactFlow() {
         width: nodeToUse.measured?.width ?? nodeToUse.width,
         height: nodeToUse.measured?.height ?? nodeToUse.height
       };
-      return nodeToRect$1(nodeWithPosition);
+      return nodeToRect(nodeWithPosition);
     }, updateNode = (id2, nodeUpdate, options = { replace: !1 }) => {
       setNodes((prevNodes) => prevNodes.map((node2) => {
         if (node2.id === id2) {
@@ -26887,7 +26900,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$1(hasNodesOption ? n2 : internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+          const currNodeRect = nodeToRect(hasNodesOption ? n2 : internalNode), overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
           return partially && overlappingArea > 0 || overlappingArea >= nodeRect.width * nodeRect.height;
         }) : [];
       },
@@ -26970,7 +26983,7 @@ const containerStyle = {
   userSelectionActive: s2.userSelectionActive,
   lib: s2.lib
 });
-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 }) {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = !0, children: children2, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
   const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib: lib2 } = useStore$1(selector$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
   useResizeHandler(zoomPane);
   const onTransformChange = useCallback((transform2) => {
@@ -27064,7 +27077,7 @@ const wrapHandler = (handler, containerRef) => (event) => {
   connectionInProgress: s2.connection.inProgress,
   dragging: s2.paneDragging
 });
-function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode$1.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
   const store = useStoreApi(), { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore$1(selector$h, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), container2 = useRef(null), containerBounds = useRef(), selectedNodeIds = useRef(/* @__PURE__ */ new Set()), selectedEdgeIds = useRef(/* @__PURE__ */ new Set()), selectionInProgress = useRef(!1), selectionStarted = useRef(!1), onClick = (event) => {
     if (selectionInProgress.current || connectionInProgress) {
       selectionInProgress.current = !1;
@@ -27106,7 +27119,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$1.Partial, !0).map((node2) => node2.id)), selectedEdgeIds.current = /* @__PURE__ */ new Set();
+    selectedNodeIds.current = new Set(getNodesInside(nodeLookup, nextUserSelectRect, transform2, selectionMode === SelectionMode.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);
@@ -27223,13 +27236,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$1.Strict ? fromHandle?.type !== type : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
+    isPossibleEndHandle: connectionMode === ConnectionMode.Strict ? fromHandle?.type !== type : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id,
     connectionInProcess: !!fromHandle,
     clickConnectionInProcess: !!clickHandle,
     valid: connectingTo && isValid
   };
 };
-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) {
+function HandleComponent({ type = "source", position = Position.Top, isValidConnection, isConnectable = !0, isConnectableStart = !0, isConnectableEnd = !0, id: id2, onConnect, children: children2, className, onMouseDown, onTouchStart, ...rest }, ref) {
   const handleId = id2 || null, isTarget = type === "target", store = useStoreApi(), nodeId = useNodeId(), { connectOnClick, noPanClassName, rfId } = useStore$1(selector$g, shallow$1), { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, clickConnectionInProcess, valid } = useStore$1(connectingSelector(nodeId, handleId, type), shallow$1);
   nodeId || store.getState().onError?.("010", errorMessages.error010());
   const onConnectExtended = (params) => {
@@ -27325,16 +27338,16 @@ function HandleComponent({ type = "source", position = Position$1.Top, isValidCo
   ]), 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$1.Bottom }) {
+function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
   return jsxs(Fragment$1, { children: [data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable })] });
 }
-function DefaultNode({ data, isConnectable, targetPosition = Position$1.Top, sourcePosition = Position$1.Bottom }) {
+function DefaultNode({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.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$1.Top }) {
+function OutputNode({ data, isConnectable, targetPosition = Position.Top }) {
   return jsxs(Fragment$1, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable }), data?.label] });
 }
 const arrowKeyDiffs = {
@@ -27456,7 +27469,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
   }), moveSelectedNodes = useMoveSelectedNodes();
   if (node2.hidden)
     return null;
-  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 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 { selectNodesOnDrag, nodeDragThreshold } = store.getState();
     isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0) && handleNodeClick({
       id: id2,
@@ -27571,8 +27584,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$1.Arrow]: ArrowSymbol,
-  [MarkerType$1.ArrowClosed]: ArrowClosedSymbol
+  [MarkerType.Arrow]: ArrowSymbol,
+  [MarkerType.ArrowClosed]: ArrowClosedSymbol
 };
 function useMarkerSymbol(type) {
   const store = useStoreApi();
@@ -27612,9 +27625,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$1.Left || pos === Position$1.Right ? [0.5 * (x1 + x2), y1] : [x1, 0.5 * (y1 + y2)];
+  return pos === Position.Left || pos === Position.Right ? [0.5 * (x1 + x2), y1] : [x1, 0.5 * (y1 + y2)];
 }
-function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position$1.Bottom, targetX, targetY, targetPosition = Position$1.Top }) {
+function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top }) {
   const [sourceControlX, sourceControlY] = getControl({
     pos: sourcePosition,
     x1: sourceX,
@@ -27627,7 +27640,7 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position$1.Bot
     y1: targetY,
     x2: sourceX,
     y2: sourceY
-  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter$1({
+  }), [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
     sourceX,
     sourceY,
     targetX,
@@ -27646,7 +27659,7 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position$1.Bot
   ];
 }
 function createSimpleBezierEdge(params) {
-  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 }) => {
+  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, interactionWidth }) => {
     const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
@@ -27662,7 +27675,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$1.Bottom, targetPosition = Position$1.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.Bottom, targetPosition = Position.Top, markerEnd, markerStart, pathOptions, interactionWidth }) => {
     const [path, labelX, labelY] = getSmoothStepPath({
       sourceX,
       sourceY,
@@ -27698,8 +27711,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$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({
+  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({
       sourceX,
       sourceY,
       sourcePosition,
@@ -27727,7 +27740,7 @@ const builtinEdgeTypes = {
   targetY: null,
   sourcePosition: null,
   targetPosition: null
-}, 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";
+}, 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";
 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" });
 }
@@ -27885,7 +27898,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$1.Bezier, CustomComponent, isValid }) => {
+const ConnectionLine = ({ style: style2, type = ConnectionLineType.Bezier, CustomComponent, isValid }) => {
   const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
   if (!inProgress)
     return;
@@ -27901,19 +27914,19 @@ const ConnectionLine = ({ style: style2, type = ConnectionLineType$1.Bezier, Cus
     targetPosition: toPosition
   };
   switch (type) {
-    case ConnectionLineType$1.Bezier:
-      [path] = getBezierPath$1(pathParams);
+    case ConnectionLineType.Bezier:
+      [path] = getBezierPath(pathParams);
       break;
-    case ConnectionLineType$1.SimpleBezier:
+    case ConnectionLineType.SimpleBezier:
       [path] = getSimpleBezierPath(pathParams);
       break;
-    case ConnectionLineType$1.Step:
+    case ConnectionLineType.Step:
       [path] = getSmoothStepPath({
         ...pathParams,
         borderRadius: 0
       });
       break;
-    case ConnectionLineType$1.SmoothStep:
+    case ConnectionLineType.SmoothStep:
       [path] = getSmoothStepPath(pathParams);
       break;
     default:
@@ -27946,7 +27959,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$1(bounds, width, height, 0.5, 2, 0.1);
+    }), { x: x2, y: y2, zoom: zoom2 } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
     transform2 = [x2, y2, zoom2];
   }
   return {
@@ -27972,7 +27985,7 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
     nodesSelectionActive: !1,
     userSelectionActive: !1,
     userSelectionRect: null,
-    connectionMode: ConnectionMode$1.Strict,
+    connectionMode: ConnectionMode.Strict,
     domNode: null,
     paneDragging: !1,
     noPanClassName: "nopan",
@@ -28192,7 +28205,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$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) {
+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) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode), wrapperOnScroll = useCallback((e2) => {
     e2.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" }), onScroll?.(e2);
   }, [onScroll]);
@@ -28327,7 +28340,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 { internals } = s2.nodeLookup.get(id2), node22 = internals.userNode, { x: x22, y: y22 } = internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions$1(node22);
+    const { internals } = s2.nodeLookup.get(id2), node22 = internals.userNode, { x: x22, y: y22 } = internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions(node22);
     return {
       node: node22,
       x: x22,
@@ -28349,7 +28362,7 @@ const defaultWidth = 200, defaultHeight = 150, filterHidden = (node2) => !node2.
   };
   return {
     viewBB,
-    boundingRect: s2.nodeLookup.size > 0 ? getBoundsOfRects$1(getInternalNodesBounds(s2.nodeLookup, { filter: filterHidden }), viewBB) : viewBB,
+    boundingRect: s2.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s2.nodeLookup, { filter: filterHidden }), viewBB) : viewBB,
     rfId: s2.rfId,
     panZoom: s2.panZoom,
     translateExtent: s2.translateExtent,
@@ -28427,8 +28440,8 @@ function MiniMapComponent({
 }
 MiniMapComponent.displayName = "MiniMap";
 memo$2(MiniMapComponent);
-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);
+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);
   useEffect(() => {
     if (!(!resizeControlRef.current || !id2))
       return resizer.current || (resizer.current = XYResizer({
@@ -28532,7 +28545,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant$1.Hand
     onResizeEnd,
     shouldResize
   ]);
-  const positionClassNames = controlPosition.split("-"), colorStyleProp = variant === ResizeControlVariant$1.Line ? "borderColor" : "backgroundColor", controlStyle = color2 ? { ...style2, [colorStyleProp]: color2 } : style2;
+  const positionClassNames = controlPosition.split("-"), colorStyleProp = variant === ResizeControlVariant.Line ? "borderColor" : "backgroundColor", controlStyle = color2 ? { ...style2, [colorStyleProp]: color2 } : style2;
   return jsx("div", { className: cc(["react-flow__resize-control", "nodrag", ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children2 });
 }
 memo$2(ResizeControl);
@@ -28554,7 +28567,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$1.Top, offset: offset2 = 10, align = "center", ...rest }) {
+function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position.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;
@@ -28571,7 +28584,7 @@ function NodeToolbar({ nodeId, children: children2, className, style: style2, is
 }
 var s$2 = { done: !1, hasNext: !1 };
 function C(t2, ...o2) {
-  let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? y$5(e2) : void 0), p2 = 0;
+  let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? y$4(e2) : void 0), p2 = 0;
   for (; p2 < o2.length; ) {
     if (u2[p2] === void 0 || !B(n2)) {
       let i2 = o2[p2];
@@ -28607,14 +28620,14 @@ function f$2(t2, o2, n2) {
   }
   return p2.hasNext && o2.push(u2), e2;
 }
-function y$5(t2) {
+function y$4(t2) {
   let { lazy: o2, lazyArgs: n2 } = t2, u2 = o2(...n2);
   return Object.assign(u2, { isSingle: o2.single ?? !1, index: 0, items: [] });
 }
 function B(t2) {
   return typeof t2 == "string" || typeof t2 == "object" && t2 !== null && Symbol.iterator in t2;
 }
-function y$4(t2, i2) {
+function y$3(t2, i2) {
   let a2 = i2.length - t2.length;
   if (a2 === 1) {
     let [n2, ...r2] = i2;
@@ -28640,7 +28653,7 @@ function r$6(...t2) {
   return u$7(Object.values, t2);
 }
 function i$8(...e2) {
-  return y$4(a$6, e2);
+  return y$3(a$6, e2);
 }
 function a$6() {
   let e2 = /* @__PURE__ */ new Set();
@@ -28733,7 +28746,7 @@ function i$4(e2, o2) {
   for (let [r2, n2] of Object.entries(e2)) o2(n2, r2, e2) && (t2[r2] = n2);
   return t2;
 }
-function y$3(...t2) {
+function y$2(...t2) {
   return u$7(f$1, t2);
 }
 function f$1(t2, e2) {
@@ -28846,7 +28859,7 @@ function u$3(n2, e2) {
   if (typeof n2 != "object" || typeof e2 != "object" || n2 === null || e2 === null || Object.getPrototypeOf(n2) !== Object.getPrototypeOf(e2)) return !1;
   if (Array.isArray(n2)) return l$1(n2, e2);
   if (n2 instanceof Map) return a$3(n2, e2);
-  if (n2 instanceof Set) return c$2(n2, e2);
+  if (n2 instanceof Set) return c$1(n2, e2);
   if (n2 instanceof Date) return n2.getTime() === e2.getTime();
   if (n2 instanceof RegExp) return n2.toString() === e2.toString();
   if (Object.keys(n2).length !== Object.keys(e2).length) return !1;
@@ -28863,7 +28876,7 @@ function a$3(n2, e2) {
   for (let [r2, t2] of n2.entries()) if (!e2.has(r2) || !u$3(t2, e2.get(r2))) return !1;
   return !0;
 }
-function c$2(n2, e2) {
+function c$1(n2, e2) {
   if (n2.size !== e2.size) return !1;
   let r2 = [...e2];
   for (let t2 of n2) {
@@ -28877,23 +28890,12 @@ function c$2(n2, e2) {
   return !0;
 }
 function j(...e2) {
-  return u$7(c$1, e2);
+  return u$7(c, e2);
 }
-function c$1(e2, u2) {
+function c(e2, u2) {
   for (let [t2, y2] of Object.entries(u2)) if (!Object.hasOwn(e2, t2) || !k(y2, e2[t2])) return !1;
   return !0;
 }
-function c(...e2) {
-  return u$7(y$2, e2);
-}
-function y$2(e2, o2) {
-  let r2 = {};
-  for (let [a2, n2] of e2.entries()) {
-    let d2 = o2(n2, a2, e2);
-    r2[d2] = n2;
-  }
-  return r2;
-}
 function i$2(...e2) {
   return u$7(a$2, e2);
 }
@@ -28985,70 +28987,64 @@ function useDebouncedEffect(callback, deps, delay2, maxWait = 0) {
   useEffect(useDebouncedCallback(callback, deps, delay2, maxWait), deps);
 }
 const { valueOf, toString: toString$1 } = Object.prototype, isEqual = (a2, b2) => {
-  if (a2 === b2)
-    return !0;
-  if (typeof a2 == "object" && typeof b2 == "object" && a2 && b2) {
-    if (a2.constructor !== b2.constructor)
+  const visited = /* @__PURE__ */ new WeakMap(), inner2 = (a3, b3) => {
+    if (a3 === b3)
+      return !0;
+    if (typeof a3 != "object" || typeof b3 != "object" || !a3 || !b3)
+      return a3 !== a3 && b3 !== b3;
+    if (Object.getPrototypeOf(a3) !== Object.getPrototypeOf(b3))
       return !1;
-    if (Array.isArray(a2)) {
-      const { length } = a2;
-      if (length !== b2.length)
+    const { constructor } = a3;
+    if (constructor === Date)
+      return a3.getTime() === b3.getTime();
+    if (constructor === RegExp)
+      return a3.source === b3.source && a3.flags === b3.flags;
+    if (constructor === Set) {
+      if (a3.size !== b3.size)
         return !1;
-      for (let i2 = length; i2-- !== 0; )
-        if (!isEqual(a2[i2], b2[i2]))
+      for (const value of a3)
+        if (!b3.has(value))
           return !1;
       return !0;
     }
-    if (a2 instanceof RegExp)
-      return a2.source === b2.source && a2.flags === b2.flags;
-    if (a2 instanceof Date)
-      return a2.getTime() === b2.getTime();
-    if (a2 instanceof Map && b2 instanceof Map) {
-      if (a2.size !== b2.size)
+    if (constructor === ArrayBuffer && (a3 = new DataView(a3), b3 = new DataView(b3)), constructor === DataView || ArrayBuffer.isView(a3)) {
+      if (constructor !== DataView && (a3 = new DataView(a3.buffer), b3 = new DataView(b3.buffer)), a3.byteLength !== b3.byteLength)
         return !1;
-      for (const entry of a2)
-        if (!b2.has(entry[0]) || !isEqual(entry[1], b2.get(entry[0])))
+      for (let i2 = a3.byteLength; i2-- !== 0; )
+        if (a3.getUint8(i2) !== b3.getUint8(i2))
           return !1;
       return !0;
     }
-    if (a2 instanceof Set && b2 instanceof Set) {
-      if (a2.size !== b2.size)
-        return !1;
-      for (const value of a2)
-        if (!b2.has(value))
-          return !1;
+    if (visited.has(a3) && visited.get(a3) === b3)
       return !0;
-    }
-    if (a2 instanceof DataView && b2 instanceof DataView) {
-      const { byteLength } = a2;
-      if (byteLength !== b2.byteLength)
+    if (visited.set(a3, b3), constructor === Array) {
+      if (a3.length !== b3.length)
         return !1;
-      for (let i2 = byteLength; i2-- !== 0; )
-        if (a2.getUint8(i2) !== b2.getUint8(i2))
+      for (let i2 = a3.length; i2-- !== 0; )
+        if (!inner2(a3[i2], b3[i2]))
           return !1;
       return !0;
     }
-    if (a2 instanceof ArrayBuffer && b2 instanceof ArrayBuffer && (a2 = new Uint8Array(a2), b2 = new Uint8Array(b2)), ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) {
-      const { length } = a2;
-      if (length !== b2.length)
+    if (constructor === Map) {
+      if (a3.size !== b3.size)
         return !1;
-      for (let i2 = length; i2-- !== 0; )
-        if (a2[i2] !== b2[i2])
+      for (const entry of a3)
+        if (!b3.has(entry[0]) || !inner2(entry[1], b3.get(entry[0])))
           return !1;
       return !0;
     }
-    if (a2.valueOf !== valueOf && typeof a2.valueOf == "function" && typeof b2.valueOf == "function")
-      return a2.valueOf() === b2.valueOf();
-    if (a2.toString !== toString$1 && typeof a2.toString == "function" && typeof b2.toString == "function")
-      return a2.toString() === b2.toString();
-    const aKeys = Object.keys(a2);
+    if (a3.valueOf !== valueOf && typeof a3.valueOf == "function" && typeof b3.valueOf == "function")
+      return a3.valueOf() === b3.valueOf();
+    if (a3.toString !== toString$1 && typeof a3.toString == "function" && typeof b3.toString == "function")
+      return a3.toString() === b3.toString();
+    const aKeys = Object.keys(a3);
     let key2;
     for (let l2 = aKeys.length; l2-- !== 0; )
-      if (key2 = aKeys[l2], !((key2 === "_owner" || key2 === "__v" || key2 === "__o") && Object.hasOwn(a2, "$$typeof")) && (!Object.hasOwn(b2, key2) || !isEqual(a2[key2], b2[key2])))
+      if (key2 = aKeys[l2], !Object.hasOwn(b3, key2) || !inner2(a3[key2], b3[key2]))
         return !1;
-    return Object.keys(b2).length === aKeys.length;
-  }
-  return a2 !== a2 && b2 !== b2;
+    return Object.keys(b3).length === aKeys.length;
+  };
+  return inner2(a2, b2);
 };
 function useDeepCompareEffect(callback, deps, effectHook = useEffect, ...effectHookRestArgs) {
   useCustomCompareEffect(callback, deps, isEqual, effectHook, ...effectHookRestArgs);
@@ -29622,12 +29618,7 @@ let epoch = 0, atom = (initialValue) => {
       epoch++;
       let runListenerQueue = !listenerQueue.length;
       for (let listener of listeners)
-        listenerQueue.push(
-          listener,
-          $atom.value,
-          oldValue,
-          changedKey
-        );
+        listenerQueue.push(listener, $atom.value, oldValue, changedKey);
       if (runListenerQueue) {
         for (lqIndex = 0; lqIndex < listenerQueue.length; lqIndex += QUEUE_ITEMS_PER_LISTENER)
           listenerQueue[lqIndex](
@@ -29747,10 +29738,6 @@ function RootContainer({
     Box,
     {
       className: cx("likec4-root", className),
-      css: {
-        // '--likec4-background-color': 'mantine.colors.body',
-        // '--colors-likec4-background': 'var(--mantine-color-body)',
-      },
       ref,
       ...reduceGraphics && {
         "data-likec4-reduced-graphics": !0
@@ -29822,165 +29809,6 @@ 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);
@@ -31108,8 +30936,8 @@ const cssTransparentBg = css({
       edgesFocusable: !1,
       nodesDraggable,
       nodeDragThreshold: 4,
-      nodeClickDistance: 1.9,
-      paneClickDistance: 1.9,
+      nodeClickDistance: 3,
+      paneClickDistance: 3,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
       onNodesChange,
@@ -31164,15 +30992,7 @@ const cssTransparentBg = css({
   const square = useStore$1(selectDimensions);
   return useUpdateEffect(onViewportResize, [square]), null;
 };
-var xstateReact_cjs = {}, useIsomorphicLayoutEffect_cjs = {}, hasRequiredUseIsomorphicLayoutEffect_cjs;
-function requireUseIsomorphicLayoutEffect_cjs() {
-  return hasRequiredUseIsomorphicLayoutEffect_cjs || (hasRequiredUseIsomorphicLayoutEffect_cjs = 1, function(exports) {
-    Object.defineProperty(exports, "__esModule", { value: !0 });
-    var react = React__default, isClient = typeof document < "u", index2 = isClient ? react.useLayoutEffect : react.useEffect;
-    exports.default = index2;
-  }(useIsomorphicLayoutEffect_cjs)), useIsomorphicLayoutEffect_cjs;
-}
-var xstate_cjs = {}, xstateActors_cjs = {}, raise60cebf03_cjs = {}, xstateDev_cjs = {}, hasRequiredXstateDev_cjs;
+var xstateReact_cjs = {}, xstate_cjs = {}, xstateActors_cjs = {}, raise60cebf03_cjs = {}, xstateDev_cjs = {}, hasRequiredXstateDev_cjs;
 function requireXstateDev_cjs() {
   if (hasRequiredXstateDev_cjs) return xstateDev_cjs;
   hasRequiredXstateDev_cjs = 1, Object.defineProperty(xstateDev_cjs, "__esModule", { value: !0 });
@@ -34147,7 +33967,7 @@ function focusedBounds(params) {
 }
 const DiagramActorSafeContext = createContext(null);
 DiagramActorSafeContext.displayName = "DiagramActorSafeContext";
-const useDiagramActorRef = () => {
+const DiagramActorContextProvider = DiagramActorSafeContext.Provider, useDiagramActorRef = () => {
   const ctx = useContext(DiagramActorSafeContext);
   if (ctx === null)
     throw new Error("DiagramActorRef is not provided");
@@ -34702,7 +34522,7 @@ const curveCatmullRomOpen = function custom4(alpha2) {
     return splitProps(props, actionBtnVariantKeys);
   },
   getVariantProps: actionBtnFn.getVariantProps
-}), compoundActionBtn = cva({
+}), MotionButton = /* @__PURE__ */ createMinimalMotionComponent("button"), MotionDiv = /* @__PURE__ */ createMinimalMotionComponent("div"), compoundActionBtn = cva({
   base: {
     transitionDuration: "normal",
     "[data-compound-title-inverse] &": {
@@ -34753,7 +34573,7 @@ function CompoundActionButton({
         "compound-action"
       ),
       children: /* @__PURE__ */ jsx(
-        m$2.div,
+        MotionDiv,
         {
           initial: !1,
           animate: {
@@ -34811,7 +34631,7 @@ function CompoundDetailsButton({
       ),
       onClick: stopPropagation$1,
       children: /* @__PURE__ */ jsx(
-        m$2.div,
+        MotionDiv,
         {
           initial: !1,
           animate: {
@@ -35137,7 +34957,7 @@ function CompoundTitle({ id: id2, data }) {
     }
   );
 }
-const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
+const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.animated ?? !1, next.animated ?? !1) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
 function customEdge(Edge) {
   return memo$2(Edge, edgePropsEqual);
 }
@@ -35197,7 +35017,7 @@ const isSelected$1 = ".react-flow__edge.selected", edgeStroke = "--xy-edge-strok
   fill: "[var(--xy-edge-stroke)]",
   stroke: "[var(--xy-edge-stroke)]"
 }), cssEdgePath = css({
-  fill: "[none]",
+  fill: "[none!]",
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
@@ -35413,6 +35233,9 @@ const translate = {
           padding: "0px"
         },
         labelContents: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
           padding: "2px 5px 4px 0px"
         },
         labelText: {
@@ -35441,9 +35264,9 @@ function EdgeLabel({
   const stepNum = isStepEdgeId(id2) ? extractStep(id2) : null, classes2 = labelsva({
     isStepEdge: stepNum !== null
   });
-  return /* @__PURE__ */ jsxs(Box$1, { className: cx(classes2.root, className), ...rest, children: [
-    stepNum !== null && /* @__PURE__ */ jsx(Box$1, { className: classes2.stepNumber, children: stepNum }),
-    /* @__PURE__ */ jsxs(Box$1, { className: classes2.labelContents, children: [
+  return /* @__PURE__ */ jsxs(Box, { className: cx(classes2.root, className), ...rest, children: [
+    stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes2.stepNumber, children: stepNum }),
+    /* @__PURE__ */ jsxs(Box, { className: classes2.labelContents, children: [
       n$5(label2) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes2.labelText, lineClamp: 5, children: label2 }),
       n$5(technology2) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes2.labelTechnology, children: "[ " + technology2 + " ]" }),
       children2
@@ -35732,18 +35555,20 @@ function arrowTypeToMarker(arrowType) {
     }
 }
 const EdgePath = forwardRef(({
-  id: id2,
-  data: {
-    line,
-    dir,
-    tail,
-    head
+  edgeProps: {
+    id: id2,
+    data: {
+      line,
+      dir,
+      tail,
+      head
+    },
+    style: style2,
+    interactionWidth
   },
+  onEdgePointerDown,
   strokeWidth,
-  svgPath,
-  style: style2,
-  interactionWidth,
-  onEdgePointerDown
+  svgPath
 }, svgPathRef) => {
   let markerStartName = arrowTypeToMarker(tail), markerEndName = arrowTypeToMarker(head ?? "normal");
   dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
@@ -35753,10 +35578,15 @@ const EdgePath = forwardRef(({
     /* @__PURE__ */ jsx(
       "path",
       {
-        className: cx("react-flow__edge-interaction", hideOnReducedGraphics),
+        className: cx(
+          "react-flow__edge-interaction",
+          hideOnReducedGraphics,
+          css({
+            fill: "[none]",
+            strokeOpacity: 0
+          })
+        ),
         d: svgPath,
-        fill: "none",
-        stroke: "transparent",
         strokeWidth: interactionWidth ?? 10
       }
     ),
@@ -35824,7 +35654,7 @@ function ElementActionButtons({
   return !buttons2.length || zoomTooSmall ? null : /* @__PURE__ */ jsx(Box$1, { className: container$4, children: /* @__PURE__ */ jsx(
     Box$1,
     {
-      component: m$2.div,
+      component: MotionDiv,
       layoutRoot: !0,
       initial: !1,
       style: {
@@ -35841,8 +35671,7 @@ function ElementActionButtons({
       children: buttons2.map((button2, index2) => /* @__PURE__ */ jsx(
         ActionIcon$1,
         {
-          component: m$2.button,
-          layout: !0,
+          component: MotionButton,
           className: actionBtn$1({}),
           initial: !1,
           whileTap: { scale: 1 },
@@ -35893,8 +35722,7 @@ function ElementDetailsButton({
     ActionIcon$1,
     {
       className: cx("nodrag nopan", actionBtn$1({ variant: "transparent" })),
-      component: m$2.button,
-      layout: !0,
+      component: MotionButton,
       initial: !1,
       style: {
         originX: 0.45,
@@ -36008,7 +35836,7 @@ const ElementNodeContainer = forwardRef(({
   return /* @__PURE__ */ jsx(
     Box$1,
     {
-      component: m$2.div,
+      component: MotionDiv,
       ref,
       className: cx(
         css({
@@ -36559,8 +36387,8 @@ const style = {
   left: "50%",
   visibility: "hidden"
 }, DefaultHandles = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position$1.Top, style }),
-  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position$1.Bottom, style })
+  /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style }),
+  /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style })
 ] });
 class VectorImpl {
   constructor(x2, y2) {
@@ -36918,7 +36746,7 @@ const stopPropagation = (e2) => e2.stopPropagation(), Tooltip$4 = Tooltip$5.with
     diagramEdge.relations,
     m((id2) => {
       try {
-        return likec4model.relationship(id2);
+        return likec4model.findRelationship(id2);
       } catch (e2) {
         return console.error(
           `View is cached and likec4model missing relationship ${id2} from ${sourceNode.id} -> ${targetNode.id}`,
@@ -37241,7 +37069,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       /* @__PURE__ */ jsx(
         EdgePath,
         {
-          ...props,
+          edgeProps: props,
           svgPath: edgePath,
           ref: svgPathRef,
           ...enableEdgeEditing && {
@@ -37287,7 +37115,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
                 cy: Math.round(p2.y),
                 r: 3
               },
-              i2
+              "controlPoints" + edgeId + "#" + i2
             ))
           }
         )
@@ -38402,10 +38230,13 @@ const useElementDetailsActorRef = () => {
       )
     ] })
   ] });
+}, setHoveredNode$3 = () => {
 }, TabPanelDeployments = memo$2(({ elementFqn }) => {
   const element = useLikeC4Model$1(!0).element(elementFqn), deployments = [...element.deployments()], tree = useTree({
     multiple: !1
-  }), data = useMemo(() => {
+  });
+  tree.setHoveredNode = setHoveredNode$3;
+  const data = useMemo(() => {
     let roots = [], treeItems = /* @__PURE__ */ new Map();
     for (const instance of element.deployments()) {
       let instanceNode = {
@@ -38486,7 +38317,7 @@ const useElementDetailsActorRef = () => {
       }
     )
   );
-}), ViewPadding = 0.1, RelationshipsBrowserActorContext = createContext(null);
+}), RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
   return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
@@ -38580,13 +38411,12 @@ const RelationshipEdge$1 = customEdge((props) => {
     /* @__PURE__ */ jsx(
       EdgePath,
       {
-        ...edgeProps,
+        edgeProps,
         svgPath,
         ...markOrange && {
           strokeWidth: 5
         }
-      },
-      id2
+      }
     ),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
@@ -38603,7 +38433,7 @@ const RelationshipEdge$1 = customEdge((props) => {
         children: label2
       }
     )
-  ] }, id2);
+  ] });
 }), selectViewId = (s2) => s2.context.view.id;
 function useCurrentViewId() {
   const actorRef = useDiagramActorRef();
@@ -38667,7 +38497,7 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
       }
     }
   );
-}, ElementNode$1 = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m$2.div, layoutId: props.id, nodeProps: props, children: [
+}, ElementNode$1 = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { component: MotionDiv, layoutId: props.id, nodeProps: props, children: [
   /* @__PURE__ */ jsx(ElementShape, { ...props }),
   /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler$1, { ...props }),
@@ -41432,6 +41262,7 @@ const node = css({
     enableSelectSubject: state.context.enableSelectSubject,
     enableChangeScope: state.context.enableChangeScope
   };
+}, setHoveredNode$2 = () => {
 }, SelectElement = memo$2(() => {
   const browser = useRelationshipsBrowser(), {
     subjectId,
@@ -41443,7 +41274,7 @@ const node = css({
   } = useRelationshipsBrowserState(selector2$1), root2 = useRef(null), viewport = useRef(null), subject = useLikeC4Model$1(!0).findElement(subjectId), data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0), tree = useTree({
     multiple: !1
   });
-  return useEffect(() => {
+  return tree.setHoveredNode = setHoveredNode$2, useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach((id2) => {
       tree.expand(id2);
     }), tree.select(subjectId);
@@ -41651,7 +41482,6 @@ const selector$4 = (state) => ({
       nodeTypes: nodeTypes$1,
       edgeTypes: edgeTypes$1,
       fitView: !1,
-      fitViewPadding: ViewPadding,
       onNodeClick: useCallbackRef((e2, node2) => {
         browser.send({ type: "xyflow.nodeClick", node: node2 });
       }),
@@ -42033,13 +41863,16 @@ const treeNodeLabel = css({
   }
 }), ElementLabel = ({
   element
-}) => /* @__PURE__ */ jsx(Box$1, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) });
+}) => /* @__PURE__ */ jsx(Box$1, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) }), setHoveredNode$1 = () => {
+};
 function TabPanelStructure({
   element
 }) {
   const tree = useTree({
     multiple: !1
-  }), data = useMemo(() => {
+  });
+  tree.setHoveredNode = setHoveredNode$1;
+  const data = useMemo(() => {
     let seq = 1;
     const messageNode = (label2) => ({
       label: label2,
@@ -42509,7 +42342,7 @@ function ElementDetails({
     })),
     shallowEqual
   );
-  return /* @__PURE__ */ jsx(ElementDetailsActorContext, { value: actorRef, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(
     ElementDetailsCard,
     {
       onClose,
@@ -42605,7 +42438,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   );
   useEffect(() => {
     const cancel = (e2) => {
-      e2.preventDefault(), close();
+      e2.preventDefault(), e2.stopPropagation(), close();
     };
     return dialogRef.current?.addEventListener("cancel", cancel, { capture: !0 }), () => {
       dialogRef.current?.removeEventListener("cancel", cancel, { capture: !0 });
@@ -42677,7 +42510,11 @@ var xstate_cjsExports = /* @__PURE__ */ requireXstate_cjs();
 function _update$1(current, update) {
   return update.map((next) => {
     const existing = current.find((n2) => n2.id === next.id);
-    return existing && existing.type === next.type && deepEqual(existing.hidden ?? !1, next.hidden ?? !1) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data) ? existing : next;
+    return existing && deepEqual(existing.type, next.type) ? deepEqual(existing.hidden ?? !1, next.hidden ?? !1) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data) ? existing : {
+      ...y$2(existing, ["hidden", "zIndex"]),
+      ...next,
+      data: next.data
+    } : next;
   });
 }
 function updateEdges(current, update) {
@@ -42686,10 +42523,16 @@ function updateEdges(current, update) {
 function _update(current, updated) {
   return updated.map((update) => {
     const existing = current.find((n2) => n2.id === update.id);
-    if (existing) {
+    if (existing && deepEqual(existing.type, update.type)) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? !1, update.hidden ?? !1) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data))
-        return existing;
+      return deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? !1, update.hidden ?? !1) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) ? existing : {
+        ...y$2(existing, ["measured", "parentId", "hidden", "zIndex"]),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: update.data
+      };
     }
     return update;
   });
@@ -42697,6 +42540,12 @@ function _update(current, updated) {
 function updateNodes(current, update) {
   return n(update) ? _update(current, update) : (update = current, (current2) => _update(current2, update));
 }
+const ViewPadding = {
+  top: "40px",
+  bottom: "16px",
+  left: "16px",
+  right: "16px"
+};
 function viewToNodesEdge$1(view) {
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), queue = Queue.from(view.nodes.reduce(
     (acc, node2) => (nodeLookup.set(node2.id, node2), node2.parent || acc.push({ node: node2, parent: null }), acc),
@@ -42718,7 +42567,6 @@ function viewToNodesEdge$1(view) {
       draggable: !1,
       selectable: !0,
       focusable: !0,
-      deletable: !1,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       style: {
@@ -42811,7 +42659,7 @@ function viewToNodesEdge$1(view) {
       zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
-      deletable: !1,
+      // deletable: false,
       data: {
         sourceFqn: edge.sourceFqn,
         targetFqn: edge.targetFqn,
@@ -42861,7 +42709,7 @@ const findRootSubject = (nodes) => nodes.find(
   const nextSubjectCenter = {
     x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
     y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
-  }, currentSubjectInternalNode = xyflow2.getInternalNode(currentSubjectNode.id), currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode), existingInternalNode = xyflow2.getInternalNode(existingNode.id), existingDimensions = getNodeDimensions(existingInternalNode), nested = /* @__PURE__ */ new Set();
+  }, currentSubjectInternalNode = xyflow2.getInternalNode(currentSubjectNode.id), currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode), nested = /* @__PURE__ */ new Set();
   return currentNodes.forEach((n2) => {
     if (n2.id !== existingNode.id) {
       if (n2.data.column === "subjects") {
@@ -42879,10 +42727,10 @@ const findRootSubject = (nodes) => nodes.find(
         dimmed: n2.data.column === "subjects" ? "immediate" : !0
       }
     } : {
-      ...y$3(n2, ["parentId"]),
+      ...y$2(n2, ["parentId"]),
       position: {
-        x: currentSubjectCenter.x - existingDimensions.width / 2,
-        y: currentSubjectCenter.y - existingDimensions.height / 2
+        x: currentSubjectCenter.x - n2.initialWidth / 2,
+        y: currentSubjectCenter.y - n2.initialHeight / 2
       },
       zIndex: ZIndexes.Max,
       hidden: !1,
@@ -42895,10 +42743,7 @@ const findRootSubject = (nodes) => nodes.find(
     type: "update.xydata",
     xynodes: currentNodes,
     xyedges: []
-  }), zoom2 = Math.min(
-    zoom2,
-    nextviewport.zoom
-  ), await delay$1(175), next.xynodes = next.xynodes.map(Base.setDimmed(!1)), signal.aborted || (await xyflow2.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom: zoom2, duration: 350 }), await xyflow2.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: zoom2 })), updateXYData();
+  }), await delay$1(120), next.xynodes = next.xynodes.map(Base.setDimmed(!1)), signal.aborted || (await xyflow2.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom: zoom2, duration: 300 }), await xyflow2.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: zoom2 })), updateXYData();
 }), relationshipsBrowserLogic = xstate_cjsExports.setup({
   types: {
     context: {},
@@ -43148,7 +42993,7 @@ const findRootSubject = (nodes) => nodes.find(
                   xynodes: event.output.xynodes,
                   xyedges: event.output.xyedges,
                   navigateFromNode: null
-                }), enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+                }), enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 50 });
                 for (let i2 = 0; i2 < 6; i2++)
                   enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i2 * 100 });
               })
@@ -43631,7 +43476,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$1(bounds, width, height, MinZoom, maxZoom, 0.1);
+        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
         xyflow2.setViewport(viewport, duration > 0 ? { duration } : void 0);
       } else
         xyflow2.fitView({
@@ -44133,7 +43978,7 @@ const RelationshipEdge = customEdge((props) => {
     data: { navigateTo }
   } = props, [svgPath, labelX, labelY] = getBezierPath(props), diagram = useDiagram();
   return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
-    /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+    /* @__PURE__ */ jsx(EdgePath, { edgeProps: props, svgPath }),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
       {
@@ -44362,9 +44207,7 @@ const scrollArea$1 = css({
   edge,
   view
 }) => {
-  const browser = useRelationshipDetails(), viewport = useRef(null);
-  useMantinePortalProps(), useComputedColorScheme();
-  const edgeSource$1 = view.nodes.find((n2) => n2.id === edge.source), edgeTarget$1 = view.nodes.find((n2) => n2.id === edge.target), edges = view.edges.flatMap((edge2) => {
+  const browser = useRelationshipDetails(), viewport = useRef(null), edgeSource$1 = view.nodes.find((n2) => n2.id === edge.source), edgeTarget$1 = view.nodes.find((n2) => n2.id === edge.target), edges = view.edges.flatMap((edge2) => {
     const source = view.nodes.find((n2) => n2.id === edge2.source), target = view.nodes.find((n2) => n2.id === edge2.target);
     return source && target ? {
       id: edge2.id,
@@ -44475,27 +44318,28 @@ function RelationshipDetails({ actorRef }) {
   return initialRef.current == null && (initialRef.current = {
     defaultNodes: [],
     defaultEdges: []
-  }), /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
-    /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: !1, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) }),
-    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {})
-  ] }) });
+  }), /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: !1, children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    /* @__PURE__ */ jsx(RelationshipDetailsInner, {}, "xyflow"),
+    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {}, "sync")
+  ] }) }) }) });
 }
 const selectSubject = (state) => ({
   ...state.context.subject,
   viewId: state.context.viewId
-});
-function SyncRelationshipDetailsXYFlow() {
+}), SyncRelationshipDetailsXYFlow = memo$2(() => {
   const actor = useRelationshipDetailsActor(), subject = xstateReact_cjsExports.useSelector(actor, selectSubject, deepEqual), likec4model = useLikeC4Model$1(!0), view = likec4model.findView(subject.viewId) ?? null, data = useMemo(() => {
     let data2;
-    if ("edgeId" in subject) {
+    if ("edgeId" in subject && n$5(subject.edgeId)) {
       invariant$2(view, `view ${subject.viewId} not found`);
       const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
       data2 = computeEdgeDetailsViewData([edge.id], view);
-    } else
+    } else if (subject.source && subject.target)
       data2 = computeRelationshipDetailsViewData({
         source: likec4model.element(subject.source),
         target: likec4model.element(subject.target)
       });
+    else
+      return null;
     return layoutRelationshipDetails(data2, view);
   }, [
     subject,
@@ -44505,10 +44349,9 @@ function SyncRelationshipDetailsXYFlow() {
   return useEffect(() => {
     instance.viewportInitialized && actor.send({ type: "xyflow.init", instance, store });
   }, [store, instance.viewportInitialized, actor]), useEffect(() => {
-    actor.send({ type: "update.layoutData", data });
+    data !== null && actor.send({ type: "update.layoutData", data });
   }, [data, actor]), null;
-}
-const selector$3 = ({ context: context2 }) => ({
+}), selector$3 = ({ context: context2 }) => ({
   // subject: context.subject,
   // view: state.context.view,
   initialized: context2.initialized.xydata && context2.initialized.xyflow,
@@ -44587,7 +44430,8 @@ const selector$3 = ({ context: context2 }) => ({
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual), view = useLikeC4Model$1(!0).findView(viewId);
   if (!view || !view.isDiagram())
     return null;
-  let edge = "edgeId" in subject ? view.findEdge(subject.edgeId) : ifind(view.edges(), (e2) => e2.source.element?.id === subject.source && e2.target.element?.id === subject.target) ?? ifind(view.edges(), (e2) => (e2.source.element?.id === subject.source || isAncestor(e2.source.element?.id ?? "--", subject.source)) && (e2.target.element?.id === subject.target || isAncestor(e2.target.element?.id ?? "", subject.target)));
+  const edges = [...view.edges()];
+  let edge = "edgeId" in subject && n$5(subject.edgeId) ? edges.find((e2) => e2.id === subject.edgeId) : f(edges, (e2) => e2.source.element?.id === subject.source && e2.target.element?.id === subject.target) || f(edges, (e2) => (e2.source.element?.id === subject.source || isAncestor(e2.source.element?.id ?? "--", subject.source ?? "__")) && (e2.target.element?.id === subject.target || isAncestor(e2.target.element?.id ?? "", subject.target ?? "__")));
   return edge ? /* @__PURE__ */ jsx(TopLeftPanelInner, { edge: edge.$edge, view: view.$view }) : null;
 }), TopLeftPanelInner = ({ edge, view }) => {
   const browser = useRelationshipDetails(), edgeId = edge.id, [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
@@ -45063,17 +44907,17 @@ function useIsPickViewActive() {
 }
 function useCloseSearchAndNavigateTo() {
   const diagram = useDiagram(), close = useCloseSearch();
-  return useCallbackRef((viewId, fromElementFqn) => {
+  return useCallback((viewId, fromElementFqn) => {
     close(() => {
       fromElementFqn ??= $pickView.get()?.elementFqn, setPickView(null);
       const fromNode = fromElementFqn ? diagram.getContext().view.nodes.find((n2) => DiagramNode.modelRef(n2) === fromElementFqn)?.id : void 0;
-      if (diagram.currentView.id === viewId && fromNode) {
-        diagram.focusNode(fromNode);
+      if (diagram.currentView.id !== viewId) {
+        diagram.navigateTo(viewId, fromNode);
         return;
       }
-      diagram.navigateTo(viewId, fromNode);
+      fromNode && diagram.focusNode(fromNode);
     });
-  });
+  }, [close, diagram]);
 }
 function stopAndPrevent(e2) {
   e2.stopPropagation(), e2.preventDefault();
@@ -45113,14 +44957,14 @@ css({
     opacity: 0.85
   }
 });
-const NothingFound = () => /* @__PURE__ */ jsx(Box$1, { className: emptyBoX, children: "Nothing found" });
+const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 function ViewsColumn() {
   const search = useNormalizedSearch();
   let views = [...useLikeC4Model$1(!0).views()];
   return search && (search.startsWith("kind:") ? views = [] : views = views.filter((view) => search.startsWith("#") ? view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1))) : (view.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search))), /* @__PURE__ */ jsxs(
     Stack,
     {
-      renderRoot: (props) => /* @__PURE__ */ jsx(m$2.div, { layout: !0, ...props }),
+      renderRoot: (props) => /* @__PURE__ */ jsx(MotionDiv, { layout: !0, ...props }),
       gap: 8,
       "data-likec4-search-views": !0,
       onKeyDown: (e2) => {
@@ -45145,7 +44989,7 @@ function ViewsColumn() {
             }
           }
         ) }),
-        views.map((view, i2) => /* @__PURE__ */ jsx(m$2.div, { layoutId: `@view${view.id}`, children: /* @__PURE__ */ jsx(
+        views.map((view, i2) => /* @__PURE__ */ jsx(MotionDiv, { layoutId: `@view${view.id}`, children: /* @__PURE__ */ jsx(
           ViewButton,
           {
             view,
@@ -45182,7 +45026,7 @@ function ViewButton({ className, view, loop = !1, search, ...props }) {
       }),
       children: [
         /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", className: btn$2.icon, children: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
-        /* @__PURE__ */ jsxs(Box$1, { style: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
           /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
             /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: btn$2.title, children: view.title || "untitled" }),
             isCurrentView && /* @__PURE__ */ jsx(Badge, { size: "xs", fz: 9, radius: "sm", children: "current" })
@@ -45204,17 +45048,12 @@ function ViewButton({ className, view, loop = !1, search, ...props }) {
 }
 const btn$1 = buttonsva();
 function ElementsColumn() {
-  const search = useNormalizedSearch(), model = useLikeC4Model$1(!0), {
-    all,
-    byid,
-    roots: data
-  } = useMemo(() => {
+  const search = useNormalizedSearch(), model = useLikeC4Model$1(!0), data = useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
     n$3(search) || search === "kind:" ? elements = model.elements() : elements = ifilter(model.elements(), (element) => search.startsWith("kind:") ? element.kind.toLocaleLowerCase().startsWith(search.slice(5)) : search.startsWith("#") ? element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1))) : (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search));
-    const { all: all2, roots } = C(
-      elements,
-      toArray(),
+    const byid = {}, { all, roots } = C(
+      [...elements],
       sortParentsFirst,
       l$4((acc, element) => {
         const treeItem = {
@@ -45223,7 +45062,9 @@ function ElementsColumn() {
           element,
           searchTerms,
           children: []
-        }, parent = acc.all.findLast((root2) => isAncestor(root2.value, treeItem.value));
+        };
+        byid[treeItem.value] = treeItem;
+        const parent = acc.all.findLast((root2) => isAncestor(root2.value, treeItem.value));
         return parent ? (parent.children.push(treeItem), parent.children.length > 1 && parent.children.sort(sortByLabel)) : acc.roots.push(treeItem), acc.all.push(treeItem), acc;
       }, {
         all: [],
@@ -45231,64 +45072,74 @@ function ElementsColumn() {
       })
     );
     return {
-      all: all2,
-      byid: c(all2, p$2("value")),
+      all,
+      byid,
       roots: roots.sort(sortByLabel)
     };
-  }, [model, search]), tree = useTree({
+  }, [model, search]), handleClick = useHandleElementSelection();
+  return data.all.length === 0 ? /* @__PURE__ */ jsx(NothingFound, {}) : /* @__PURE__ */ jsx(ElementsTree, { data, handleClick });
+}
+const setHoveredNode = () => {
+};
+function ElementsTree({
+  data: {
+    all,
+    byid,
+    roots
+  },
+  handleClick
+}) {
+  const tree = useTree({
     multiple: !1
   });
-  useEffect(() => {
+  tree.setHoveredNode = setHoveredNode, useEffect(() => {
     tree.collapseAllNodes();
     for (const nd of all)
       nd.children.length > 0 && tree.expand(nd.value);
   }, [all]);
-  const handleClick = useHandleElementSelection();
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    data.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
-    /* @__PURE__ */ jsx(
-      Tree,
-      {
-        "data-likec4-search-elements": !0,
-        allowRangeSelection: !1,
-        clearSelectionOnOutsideClick: !0,
-        selectOnClick: !1,
-        tree,
-        data,
-        levelOffset: "lg",
-        classNames: {
-          root: treeRoot,
-          node: cx(focusable, treeNode),
-          label: treeLabel,
-          subtree: treeSubtree
-        },
-        onKeyDownCapture: (e2) => {
-          const target = e2.target, id2 = target.getAttribute("data-value"), node2 = !!id2 && byid[id2];
-          if (node2) {
-            if (e2.key === "ArrowUp") {
-              id2 === data[0]?.value && (stopAndPrevent(e2), moveFocusToSearchInput());
-              return;
-            }
-            if (e2.key === "ArrowRight") {
-              if (node2.children.length > 0 && tree.expandedState[id2] === !1)
-                return;
-              const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = [...document.querySelectorAll(
-                `[data-likec4-search-views] .${focusable}`
-              )];
-              let view = viewButtons.length > 1 ? viewButtons.find((el, i2, all2) => centerY(el) > maxY || i2 === all2.length - 1) : null;
-              view ??= d(viewButtons), view && (stopAndPrevent(e2), view.focus());
-              return;
-            }
-            if (e2.key === " " || e2.key === "Enter") {
-              stopAndPrevent(e2), handleClick(node2.element);
-              return;
-            }
-          }
-        },
-        renderNode: ElementTreeNode
+  const onKeyDownCapture = useCallbackRef((e2) => {
+    const target = e2.target, id2 = target.getAttribute("data-value"), node2 = !!id2 && byid[id2];
+    if (node2) {
+      if (e2.key === "ArrowUp") {
+        id2 === roots[0]?.value && (stopAndPrevent(e2), moveFocusToSearchInput());
+        return;
       }
-    )
-  ] });
+      if (e2.key === "ArrowRight") {
+        if (node2.children.length > 0 && tree.expandedState[id2] === !1)
+          return;
+        const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = [...document.querySelectorAll(
+          `[data-likec4-search-views] .${focusable}`
+        )];
+        let view = viewButtons.length > 1 ? viewButtons.find((el, i2, all2) => centerY(el) > maxY || i2 === all2.length - 1) : null;
+        view ??= d(viewButtons), view && (stopAndPrevent(e2), view.focus());
+        return;
+      }
+      if (e2.key === " " || e2.key === "Enter") {
+        stopAndPrevent(e2), handleClick(node2.element);
+        return;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Tree,
+    {
+      "data-likec4-search-elements": !0,
+      allowRangeSelection: !1,
+      clearSelectionOnOutsideClick: !0,
+      selectOnClick: !1,
+      tree,
+      data: roots,
+      levelOffset: "lg",
+      classNames: {
+        root: treeRoot,
+        node: cx(focusable, treeNode),
+        label: treeLabel,
+        subtree: treeSubtree
+      },
+      onKeyDownCapture,
+      renderNode: ElementTreeNode
+    }
+  );
 }
 function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
   const { element, searchTerms } = node2, elementIcon$12 = IconOrShapeRenderer({
@@ -45300,7 +45151,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
     },
     className: cx(btn$1.icon, elementIcon)
   }), views = [...element.views()], handleClick = useHandleElementSelection(), key2 = `@tree.${node2.value}`;
-  return /* @__PURE__ */ jsxs(m$2.div, { layoutId: key2, ...elementProps, children: [
+  return /* @__PURE__ */ jsxs(MotionDiv, { layoutId: key2, ...elementProps, children: [
     /* @__PURE__ */ jsx(
       ActionIcon$1,
       {
@@ -45327,7 +45178,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
     /* @__PURE__ */ jsxs(
       UnstyledButton,
       {
-        component: m$2.button,
+        component: MotionButton,
         layout: !0,
         tabIndex: -1,
         className: clsx(btn$1.root, "group", "likec4-element-button"),
@@ -45361,11 +45212,11 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
         ]
       }
     )
-  ] }, key2);
+  ] });
 }
 function useHandleElementSelection() {
   const navigateTo = useCloseSearchAndNavigateTo();
-  return useCallbackRef((element) => {
+  return useCallback((element) => {
     const views = [...element.views()];
     if (views.length === 0)
       return;
@@ -45380,7 +45231,7 @@ function useHandleElementSelection() {
       scoped,
       others
     });
-  });
+  }, [setPickView, navigateTo]);
 }
 const backdrop = css({
   position: "fixed",
@@ -45585,7 +45436,7 @@ function LikeC4SearchInput() {
     }
   );
 }
-function LikeC4Search() {
+const LikeC4Search = memo$2(() => {
   const [searchOpened, searchOps] = useDisclosure(!1);
   useHotkeys([
     ["mod+k", () => searchOps.toggle(), {
@@ -45609,8 +45460,8 @@ function LikeC4Search() {
         }
       }
     ),
-    /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(RemoveScroll, { enabled: searchOpened, children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: searchOpened && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Portal, { ...portalProps, reuseTargetNode: !0, children: /* @__PURE__ */ jsxs(AnimatePresence, { onExitComplete, children: [
+      searchOpened && /* @__PURE__ */ jsx(
         m$2.div,
         {
           className: backdrop,
@@ -45618,24 +45469,25 @@ function LikeC4Search() {
           animate: {
             opacity: 1,
             transition: {
-              duration: 0.1
+              duration: 0.13
             }
           },
           exit: {
             opacity: 0,
             transition: {
-              duration: 0.075
+              duration: 0.13
             }
           }
         },
         "backdrop"
       ),
-      /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
-    ] }) }) }) })
+      searchOpened && /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
+    ] }) })
   ] });
-}
-function LikeC4SearchOverlay() {
-  const close = useCloseSearch(), ref = useFocusTrap();
+});
+LikeC4Search.displayName = "LikeC4Search";
+const LikeC4SearchOverlay = () => {
+  const close = useCloseSearch(), pickViewActive = useIsPickViewActive();
   return useWindowEvent(
     "keydown",
     (event) => {
@@ -45647,9 +45499,9 @@ function LikeC4SearchOverlay() {
   ), /* @__PURE__ */ jsxs(
     m$2.div,
     {
-      ref,
       className: root,
-      "data-likec4-search": !0,
+      "data-likec4-search": "true",
+      initial: !1,
       animate: {
         opacity: 1,
         scale: 1,
@@ -45658,14 +45510,15 @@ function LikeC4SearchOverlay() {
       exit: {
         opacity: 0,
         scale: 0.9,
+        translateY: -30,
         transition: {
-          duration: 0.1
+          duration: 0.13
         }
       },
       children: [
         /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(Box$1, { flex: 1, px: "sm", children: /* @__PURE__ */ jsx(LikeC4SearchInput, {}) }),
-          /* @__PURE__ */ jsx(Box$1, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { flex: 1, px: "sm", children: /* @__PURE__ */ jsx(LikeC4SearchInput, {}) }),
+          /* @__PURE__ */ jsx(Box, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(
             ActionIcon$1,
             {
               size: "lg",
@@ -45684,12 +45537,12 @@ function LikeC4SearchOverlay() {
         /* @__PURE__ */ jsxs(
           Grid,
           {
-            style: {
+            className: css({
               containerName: "likec4-search-elements",
               containerType: "size",
               overflow: "hidden",
               flexGrow: 1
-            },
+            }),
             children: [
               /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
                 ScrollArea,
@@ -45714,12 +45567,11 @@ function LikeC4SearchOverlay() {
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Box$1, {}),
-        /* @__PURE__ */ jsx(PickView, {})
+        pickViewActive && /* @__PURE__ */ jsx(PickView, {})
       ]
     }
   );
-}
+};
 function PickView() {
   const pickview$1 = usePickView(), focusTrapRef = useFocusTrap(!!pickview$1);
   return useFocusReturn({
@@ -46264,7 +46116,7 @@ const autolayoutButton = css({
       translateY: -10
     },
     align: "flex-start",
-    className: clsx(
+    className: cx(
       "react-flow__panel",
       panel,
       "likec4-top-left-panel"
@@ -46276,7 +46128,7 @@ const autolayoutButton = css({
         /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
           Group,
           {
-            className: clsx(navigationButtons, "likec4-navigation-webview"),
+            className: cx(navigationButtons, "likec4-navigation-webview"),
             gap: "xs",
             children: [
               burgerMenu,
@@ -46305,7 +46157,7 @@ const autolayoutButton = css({
     enableReadOnly,
     enableVscode
   } = useEnabledFeatures(), notReadOnly = !enableReadOnly, portalProps = useMantinePortalProps(), ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout;
-  return /* @__PURE__ */ jsx(LayoutGroup, { inherit: !1, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "wait", children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment$1, { children: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     ControlsLayout,
     {
       burgerMenu: onBurgerMenuClick && /* @__PURE__ */ jsx(
@@ -46347,7 +46199,7 @@ const autolayoutButton = css({
         ) })
       ] })
     }
-  ) }) });
+  ) });
 }), SyncLayoutBadge = () => useDiagramSyncLayoutState((s2) => s2.hasTag("pending")) ? /* @__PURE__ */ jsx(Badge, { color: "pink", radius: "xs", size: "xs", variant: "light", leftSection: /* @__PURE__ */ jsx(Loader, { color: "orange", size: 8 }), children: "Pending..." }) : null, card$1 = css({
   cursor: "default",
   minWidth: 200,
@@ -47823,7 +47675,7 @@ function mergeXYNodesEdges({ context: context2, event }) {
     if (existing) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
       return deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? !1, update.hidden ?? !1) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null) ? existing : {
-        ...y$3(existing, ["measured", "parentId"]),
+        ...y$2(existing, ["measured", "parentId"]),
         ...update,
         // Force dimensions from update
         width: update.initialWidth,
@@ -48277,6 +48129,7 @@ const diagramMachine = xstate_cjsExports.setup({
     "enabled: FitView": ({ context: context2 }) => context2.features.enableFitView,
     "enabled: FocusMode": ({ context: context2 }) => context2.features.enableFocusMode,
     "enabled: Readonly": ({ context: context2 }) => context2.features.enableReadOnly,
+    "enabled: RelationshipDetails": ({ context: context2 }) => context2.features.enableRelationshipDetails,
     "not readonly": ({ context: context2 }) => !context2.features.enableReadOnly,
     "is dynamic view": ({ context: context2 }) => context2.view.__ === "dynamic",
     "is another view": ({ context: context2, event }) => {
@@ -48289,7 +48142,8 @@ const diagramMachine = xstate_cjsExports.setup({
     "click: selected node": ({ event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), event.node.selected === !0),
     "click: same node": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.lastClickedNode?.id === event.node.id),
     "click: focused node": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.focusedNode === event.node.id),
-    "click: node has connections": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.xyedges.some((e2) => e2.source === event.node.id || e2.target === event.node.id))
+    "click: node has connections": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), context2.xyedges.some((e2) => e2.source === event.node.id || e2.target === event.node.id)),
+    "click: selected edge": ({ event }) => (xstate_cjsExports.assertEvent(event, "xyflow.edgeClick"), event.edge.selected === !0 || event.edge.data.active === !0)
   },
   actions: {
     "trigger:NavigateTo": (_, _params) => {
@@ -48311,7 +48165,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$1(
+      } = params ?? {}, { width, height, panZoom, transform: transform2 } = context2.xystore.getState(), maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds(
         bounds,
         width,
         height,
@@ -48322,7 +48176,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$1(
+      const { bounds, duration = 450 } = focusedBounds({ context: context2 }), { width, height, panZoom, transform: transform2 } = context2.xystore.getState(), maxZoom = Math.max(1, transform2[2]), viewport = getViewportForBounds(
         bounds,
         width,
         height,
@@ -48497,7 +48351,6 @@ const diagramMachine = xstate_cjsExports.setup({
             type: "xyflow:fitDiagram",
             params: { duration: 0 }
           },
-          "startSyncLayout",
           xstate_cjsExports.assign(({ context: context2 }) => ({
             navigationHistory: {
               currentIndex: 0,
@@ -48507,7 +48360,8 @@ const diagramMachine = xstate_cjsExports.setup({
                 viewport: { ...context2.xyflow.getViewport() }
               }]
             }
-          }))
+          })),
+          "startSyncLayout"
         ],
         target: "ready"
       }, {
@@ -48720,7 +48574,27 @@ const diagramMachine = xstate_cjsExports.setup({
                 focusedNode: ({ event }) => event.nodeId
               }),
               target: "focused"
-            }
+            },
+            "xyflow.edgeClick": [{
+              guard: xstate_cjsExports.and([
+                "is dynamic view",
+                "click: selected edge"
+              ]),
+              actions: xstate_cjsExports.raise(({ event }) => ({
+                type: "walkthrough.start",
+                stepId: event.edge.id
+              }))
+            }, {
+              guard: xstate_cjsExports.and([
+                "enabled: RelationshipDetails",
+                "click: selected edge"
+              ]),
+              actions: xstate_cjsExports.sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context: context2, event }) => ({
+                type: "open.relationshipDetails",
+                viewId: context2.view.id,
+                edgeId: event.edge.id
+              }))
+            }]
           }
         },
         focused: {
@@ -48733,12 +48607,12 @@ const diagramMachine = xstate_cjsExports.setup({
             xstate_cjsExports.spawnChild("hotkeyActorLogic", { id: "hotkey" }),
             "xyflow:fitFocusedBounds"
           ],
-          exit: xstate_cjsExports.enqueueActions(({ enqueue, context: context2 }) => {
-            enqueue.stopChild("hotkey"), context2.viewportBeforeFocus ? enqueue({ type: "xyflow:setViewport", params: { viewport: context2.viewportBeforeFocus } }) : enqueue({ type: "xyflow:fitDiagram" }), enqueue.assign((s2) => ({
-              ...unfocusNodesEdges(s2),
+          exit: xstate_cjsExports.enqueueActions(({ enqueue, context: context2, event }) => {
+            enqueue.stopChild("hotkey"), context2.viewportBeforeFocus ? enqueue({ type: "xyflow:setViewport", params: { viewport: context2.viewportBeforeFocus } }) : enqueue({ type: "xyflow:fitDiagram" }), enqueue.assign({
+              ...unfocusNodesEdges({ context: context2 }),
               viewportBeforeFocus: null,
               focusedNode: null
-            }));
+            });
           }),
           on: {
             "xyflow.nodeClick": [
@@ -48828,6 +48702,18 @@ const diagramMachine = xstate_cjsExports.setup({
                 }), enqueue.assign(updateActiveWalkthrough), enqueue("xyflow:fitFocusedBounds");
               })
             },
+            "xyflow.edgeClick": {
+              actions: [
+                xstate_cjsExports.assign(({ event, context: context2 }) => !isStepEdgeId(event.edge.id) || event.edge.id === context2.activeWalkthrough?.stepId ? {} : {
+                  activeWalkthrough: {
+                    stepId: event.edge.id,
+                    parallelPrefix: getParallelStepsPrefix(event.edge.id)
+                  }
+                }),
+                xstate_cjsExports.assign(updateActiveWalkthrough),
+                "xyflow:fitFocusedBounds"
+              ]
+            },
             "notations.unhighlight": {
               actions: xstate_cjsExports.assign((s2) => ({
                 ...updateActiveWalkthrough(s2)
@@ -48873,7 +48759,7 @@ const diagramMachine = xstate_cjsExports.setup({
         "update.view": {
           actions: xstate_cjsExports.enqueueActions(({ enqueue, context: context2, event }) => {
             const { fromNode, toNode } = findCorrespondingNode(context2, event);
-            fromNode && toNode ? (enqueue({
+            enqueue(fromNode && toNode ? {
               type: "xyflow:alignNodeFromToAfterNavigate",
               params: {
                 fromNode: fromNode.id,
@@ -48882,13 +48768,13 @@ const diagramMachine = xstate_cjsExports.setup({
                   y: toNode.position[1]
                 }
               }
-            }), enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 })) : (enqueue({
+            } : {
               type: "xyflow:setViewportCenter",
               params: getBBoxCenter(event.view.bounds)
-            }), enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 })), enqueue.assign(updateNavigationHistory), enqueue.assign({
+            }), enqueue.assign(updateNavigationHistory), enqueue.assign({
               ...mergeXYNodesEdges({ context: context2, event }),
               lastOnNavigate: null
-            }), enqueue("startSyncLayout");
+            }), enqueue("startSyncLayout"), enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 25 });
           }),
           target: "#idle"
         }
@@ -48997,7 +48883,9 @@ function DiagramActorProvider({
     diagramMachine.provide({
       actions: {
         "trigger:NavigateTo": (_, { viewId }) => {
-          handlersRef.current.onNavigateTo?.(viewId);
+          setTimeout(() => {
+            handlersRef.current.onNavigateTo?.(viewId);
+          }, 30);
         },
         "trigger:OnChange": (_, params) => {
           handlersRef.current.onChange?.(params);
@@ -49041,7 +48929,7 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = xstateReact_cjsExports.useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorSafeContext, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: children2 }) });
+  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: children2 }) });
 }
 function LikeC4Diagram({
   onCanvasClick,
@@ -49249,11 +49137,11 @@ function Fallback$1({ error, resetErrorBoundary }) {
 }
 const LikeC4ModelDataContext = createContext(null);
 function useLikeC4ModelDataContext() {
-  return use(LikeC4ModelDataContext);
+  return useContext(LikeC4ModelDataContext);
 }
 function LikeC4ModelContext({ likec4data, children: children2 }) {
   const $likec4model = useMemo(() => computed(likec4data, (data) => createLikeC4Model(data)), [likec4data]), model = useStore($likec4model);
-  return /* @__PURE__ */ jsx(LikeC4ModelDataContext, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children: children2 }) });
+  return /* @__PURE__ */ jsx(LikeC4ModelDataContext.Provider, { value: likec4data, children: /* @__PURE__ */ jsx(LikeC4ModelProvider, { likec4model: model, children: children2 }) });
 }
 css({
   position: "absolute",
@@ -50542,15 +50430,10 @@ async function downloadAsPng({
   pngFilename,
   viewport
 }) {
-  const { toBlob } = await import("./index-iX7kahqQ.js"), {
-    width,
-    height
-  } = viewport.getBoundingClientRect();
+  const { toBlob } = await import("./index-iX7kahqQ.js");
   try {
     const blob = await toBlob(viewport, {
       backgroundColor: "transparent",
-      width,
-      height,
       cacheBust: !0,
       imagePlaceholder: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     });
@@ -50568,19 +50451,23 @@ function ExportPage() {
     download = !1
   } = useSearch$1({
     strict: !1
-  }), { viewId } = useParams({ strict: !1 }), diagram = useCurrentDiagram(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
-  if (useTransparentBackground(), useEffect(() => {
-    document.querySelectorAll(".react-flow__viewport").forEach((el) => {
-      el.style.transform = "";
-    });
-  }), useDebouncedEffect(
+  }), diagram = useCurrentDiagram(), viewportRef = useRef(null), loadingOverlayRef = useRef(null), downloadedRef = useRef(!1);
+  if (useTransparentBackground(), useEffect(
+    () => {
+      if (!viewportRef.current)
+        return;
+      [...viewportRef.current.querySelectorAll(".react-flow__viewport")].forEach((el) => {
+        el.style.transform = "";
+      });
+    }
+  ), useDebouncedEffect(
     () => {
       const viewport = viewportRef.current;
       if (!download || !viewport || !diagram)
         return;
       const loadingOverlay = loadingOverlayRef.current;
       loadingOverlay && (loadingOverlay.style.display = "none"), !downloadedRef.current && (downloadedRef.current = !0, downloadAsPng({
-        pngFilename: viewId,
+        pngFilename: diagram.id,
         viewport
       }));
     },
@@ -50590,11 +50477,11 @@ function ExportPage() {
     throw notFound();
   const width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2;
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       ref: viewportRef,
-      className: cssExportView,
-      role: "presentation",
+      "data-testid": "export-page",
+      className: cx(cssExportView),
       style: {
         padding,
         minWidth: width,