likec4 1.27.3 → 1.28.1

package/__app__/src/main.js

@@ -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(
@@ -12161,7 +12169,11 @@ const defaultProps$a = {
     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,201 +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);
-}
-const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
-let invariant = noop$3;
-const MotionGlobalConfig = {
-  useManualTiming: !1
-};
-// @__NO_SIDE_EFFECTS__
-function memo(callback) {
-  let result;
-  return () => (result === void 0 && (result = callback()), result);
-}
-const 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 BaseGroupPlaybackControls {
-  constructor(animations2) {
-    this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
-  }
-  get finished() {
-    return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
-  }
-  /**
-   * 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 GroupPlaybackControls extends BaseGroupPlaybackControls {
-  then(onResolve, onReject) {
-    return Promise.all(this.animations).then(onResolve).catch(onReject);
-  }
-}
-function getValueTransition$1(transition, key2) {
-  return transition ? transition[key2] || transition.default || transition : void 0;
-}
-const maxGeneratorDuration = 2e4;
-function calcGeneratorDuration(generator) {
-  let duration = 0;
-  const timeStep = 50;
-  let state = generator.next(duration);
-  for (; !state.done && duration < maxGeneratorDuration; )
-    duration += timeStep, state = generator.next(duration);
-  return duration >= maxGeneratorDuration ? 1 / 0 : duration;
-}
-function createGeneratorEasing(options, scale2 = 100, createGenerator) {
-  const generator = createGenerator({ ...options, keyframes: [0, scale2] }), duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-  return {
-    type: "keyframes",
-    ease: (progress2) => generator.next(duration * progress2).value / scale2,
-    duration: /* @__PURE__ */ millisecondsToSeconds(duration)
-  };
-}
-function isGenerator(type) {
-  return typeof type == "function";
-}
-function attachTimeline(animation, timeline) {
-  animation.timeline = timeline, animation.onfinish = null;
-}
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", supportsFlags = {
-  linearEasing: void 0
-};
-function memoSupports(callback, supportsFlag) {
-  const memoized = /* @__PURE__ */ memo(callback);
-  return () => {
-    var _a;
-    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : 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(/* @__PURE__ */ progress(0, numPoints - 1, i2)) + ", ";
-  return `linear(${points.substring(0, points.length - 2)})`;
-};
-function isWaapiSupportedEasing(easing) {
-  return !!(typeof easing == "function" && supportsLinearEasing() || !easing || typeof easing == "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
-}
-const cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
-  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])
+let invariant = () => {
 };
-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];
-}
-const stepsOrder = [
+const noop$3 = /* @__NO_SIDE_EFFECTS__ */ (any) => any, MotionGlobalConfig = {
+  useManualTiming: !1
+}, stepsOrder = [
   "read",
   // Read
   "resolveKeyframes",
@@ -17268,316 +17092,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) {
-  var _a;
-  if (elementOrSelector instanceof EventTarget)
-    return [elementOrSelector];
-  if (typeof elementOrSelector == "string") {
-    let root2 = document;
-    const elements = (_a = selectorCache?.[elementOrSelector]) !== null && _a !== void 0 ? _a : root2.querySelectorAll(elementOrSelector);
-    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.tabIndex === null && (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.1", 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);
-}
+const { schedule: frame$1, cancel: cancelFrame, state: frameData, steps: frameSteps } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$3, !0);
 function useIsMounted() {
   const isMounted = useRef(!1);
   return useIsomorphicLayoutEffect$2(() => (isMounted.current = !0, () => {
@@ -17787,9 +17302,8 @@ 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 { schedule: microtask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, !1), camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), SwitchLayoutGroupContext = createContext({});
 function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-  var _a, _b;
   const { visualElement: parent } = useContext(MotionContext), lazyContext = useContext(LazyContext), presenceContext = useContext(PresenceContext), reducedMotionConfig = useContext(MotionConfigContext).reducedMotion, visualElementRef = useRef(null);
   createVisualElement = createVisualElement || lazyContext.renderer, !visualElementRef.current && createVisualElement && (visualElementRef.current = createVisualElement(Component2, {
     visualState,
@@ -17805,13 +17319,12 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
   useInsertionEffect$1(() => {
     visualElement && isMounted.current && visualElement.update(props, presenceContext);
   });
-  const optimisedAppearId = props[optimizedAppearDataAttribute], wantsHandoff = useRef(!!optimisedAppearId && !(!((_a = window.MotionHandoffIsComplete) === null || _a === void 0) && _a.call(window, optimisedAppearId)) && ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+  const optimisedAppearId = props[optimizedAppearDataAttribute], wantsHandoff = useRef(!!optimisedAppearId && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
   return useIsomorphicLayoutEffect$2(() => {
     visualElement && (isMounted.current = !0, window.MotionIsMounted = !0, visualElement.updateFeatures(), microtask.render(visualElement.render), wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges());
   }), useEffect(() => {
     visualElement && (!wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges(), wantsHandoff.current && (queueMicrotask(() => {
-      var _a2;
-      (_a2 = window.MotionHandoffMarkAsComplete) === null || _a2 === void 0 || _a2.call(window, optimisedAppearId);
+      window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
     }), wantsHandoff.current = !1));
   }), visualElement;
 }
@@ -17840,7 +17353,6 @@ function getClosestProjectingNode(visualElement) {
     return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
 function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component: Component2 }) {
-  var _a, _b;
   function MotionComponent(props, externalRef) {
     let MeasureLayout2;
     const configAndProps = {
@@ -17855,7 +17367,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     }
     return jsxs(MotionContext.Provider, { value: context2, children: [MeasureLayout2 && context2.visualElement ? jsx(MeasureLayout2, { visualElement: context2.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context2.visualElement, externalRef), visualState, isStatic, context2.visualElement)] });
   }
-  MotionComponent.displayName = `motion.${typeof Component2 == "string" ? Component2 : `create(${(_b = (_a = Component2.displayName) !== null && _a !== void 0 ? _a : Component2.name) !== null && _b !== void 0 ? _b : ""})`}`;
+  MotionComponent.displayName = `motion.${typeof Component2 == "string" ? Component2 : `create(${Component2.displayName ?? Component2.name ?? ""})`}`;
   const ForwardRefMotionComponent = forwardRef(MotionComponent);
   return ForwardRefMotionComponent[motionComponentSymbol] = Component2, ForwardRefMotionComponent;
 }
@@ -18244,10 +17756,9 @@ function makeLatestValues(props, context2, presenceContext, scrapeMotionValues)
   return values2;
 }
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-  var _a;
   const { style: style2 } = props, newValues = {};
   for (const key2 in style2)
-    (isMotionValue(style2[key2]) || prevProps.style && isMotionValue(prevProps.style[key2]) || isForcedMotionValue(key2, props) || ((_a = visualElement?.getValue(key2)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== void 0) && (newValues[key2] = style2[key2]);
+    (isMotionValue(style2[key2]) || prevProps.style && isMotionValue(prevProps.style[key2]) || isForcedMotionValue(key2, props) || visualElement?.getValue(key2)?.liveStyle !== void 0) && (newValues[key2] = style2[key2]);
   return newValues;
 }
 const htmlMotionConfig = {
@@ -18360,6 +17871,9 @@ function resolveVariant(visualElement, definition, custom5) {
   const props = visualElement.getProps();
   return resolveVariantFromProps(props, definition, custom5 !== void 0 ? custom5 : props.custom, visualElement);
 }
+function getValueTransition$1(transition, key2) {
+  return transition?.[key2] ?? transition?.default ?? transition;
+}
 const positionalKeys = /* @__PURE__ */ new Set([
   "width",
   "height",
@@ -18369,6 +17883,242 @@ const positionalKeys = /* @__PURE__ */ new Set([
   "bottom",
   ...transformPropOrder
 ]);
+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;
+}
+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);
+  }
+}, 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 setMotionValue(visualElement, key2, value) {
   visualElement.hasValue(key2) ? visualElement.getValue(key2).set(value) : visualElement.addValue(key2, motionValue(value));
 }
@@ -18392,6 +18142,147 @@ function addValueToWillChange(visualElement, key2) {
 function getOptimisedAppearId(visualElement) {
   return visualElement.props[optimizedAppearDataAttribute];
 }
+const secondsToMilliseconds = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3, millisecondsToSeconds = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
+// @__NO_SIDE_EFFECTS__
+function memo(callback) {
+  let result;
+  return () => (result === void 0 && (result = callback()), result);
+}
+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 isWaapiSupportedEasing(easing) {
+  return !!(typeof easing == "function" && supportsLinearEasing() || !easing || typeof easing == "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
+}
+function attachTimeline(animation, timeline) {
+  animation.timeline = timeline, animation.onfinish = null;
+}
 const calcBezier = (t2, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t2 + (3 * a2 - 6 * a1)) * t2 + 3 * a1) * t2, subdivisionPrecision = 1e-7, subdivisionMaxIterations = 12;
 function binarySubdivide(x2, lowerBound, upperBound, mX1, mX2) {
   let currentX, currentT, i2 = 0;
@@ -18455,8 +18346,7 @@ const hex$1 = {
   transform: (v) => typeof v == "string" ? v : v.hasOwnProperty("red") ? rgba$1.transform(v) : hsla$1.transform(v)
 }, colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 function test(v) {
-  var _a, _b;
-  return isNaN(v) && typeof v == "string" && (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
+  return isNaN(v) && typeof v == "string" && (v.match(floatRegex)?.length || 0) + (v.match(colorRegex)?.length || 0) > 0;
 }
 const NUMBER_TOKEN = "number", COLOR_TOKEN = "color", VAR_TOKEN = "var", VAR_FUNCTION_TOKEN = "var(", SPLIT_TOKEN = "${}", complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
 function analyseComplexValue(value) {
@@ -18638,8 +18528,7 @@ function measureAllKeyframes() {
       element.render();
       const restore = transformsToRestore.get(element);
       restore && restore.forEach(([key2, value]) => {
-        var _a;
-        (_a = element.getValue(key2)) === null || _a === void 0 || _a.set(value);
+        element.getValue(key2)?.set(value);
       });
     }), resolversToMeasure.forEach((resolver) => resolver.measureEndState()), resolversToMeasure.forEach((resolver) => {
       resolver.suspendedScrollY !== void 0 && window.scrollTo(0, resolver.suspendedScrollY);
@@ -18765,14 +18654,13 @@ class DOMKeyframesResolver extends KeyframeResolver {
     measureKeyframe !== void 0 && element.getValue(name, measureKeyframe).jump(measureKeyframe, !1);
   }
   measureEndState() {
-    var _a;
     const { element, name, unresolvedKeyframes } = this;
     if (!element || !element.current)
       return;
     const value = element.getValue(name);
     value && value.jump(this.measuredOrigin, !1);
     const finalKeyframeIndex = unresolvedKeyframes.length - 1, finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
-    unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)), finalKeyframe !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = finalKeyframe), !((_a = this.removedTransforms) === null || _a === void 0) && _a.length && this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
+    unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)), finalKeyframe !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = finalKeyframe), this.removedTransforms?.length && this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
       element.getValue(unsetTransformName).set(unsetTransformValue);
     }), this.resolveNoneKeyframes();
   }
@@ -18877,6 +18765,15 @@ class BaseAnimation {
     });
   }
 }
+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;
+}
 const mixNumber$1 = (from, to, progress2) => from + (to - from) * progress2;
 function hueToRgb(p2, q, t2) {
   return t2 < 0 && (t2 += 1), t2 > 1 && (t2 -= 1), t2 < 1 / 6 ? p2 + (q - p2) * 6 * t2 : t2 < 1 / 2 ? q : t2 < 2 / 3 ? p2 + (q - p2) * (2 / 3 - t2) * 6 : p2;
@@ -18946,10 +18843,9 @@ function mixObject(a2, b2) {
   };
 }
 function matchOrder(origin, target) {
-  var _a;
   const orderedOrigin = [], pointers = { color: 0, var: 0, number: 0 };
   for (let i2 = 0; i2 < target.values.length; i2++) {
-    const type = target.types[i2], originIndex = origin.indexes[type][pointers[type]], originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+    const type = target.types[i2], originIndex = origin.indexes[type][pointers[type]], originValue = origin.values[originIndex] ?? 0;
     orderedOrigin[i2] = originValue, pointers[type]++;
   }
   return orderedOrigin;
@@ -18961,6 +18857,14 @@ const mixComplex = (origin, target) => {
 function mix(from, to, p2) {
   return typeof from == "number" && typeof to == "number" && typeof p2 == "number" ? mixNumber$1(from, to, p2) : getMixer(from)(from, to);
 }
+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 velocitySampleDuration = 5;
 function calcGeneratorVelocity(resolveValue, t2, current) {
   const prevT = Math.max(t2 - velocitySampleDuration, 0);
@@ -19113,10 +19017,16 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
     toString: () => {
       const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration), easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
       return calculatedDuration + "ms " + easing;
+    },
+    toTransition: () => {
     }
   };
   return generator;
 }
+spring.applyToOptions = (options) => {
+  const generatorOptions = createGeneratorEasing(options, 100, spring);
+  return options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut", options.duration = /* @__PURE__ */ secondsToMilliseconds(generatorOptions.duration), options.type = "keyframes", options;
+};
 function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min: min2, max: max2, restDelta = 0.5, restSpeed }) {
   const origin = keyframes2[0], state = {
     done: !1,
@@ -19169,6 +19079,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;
@@ -19349,12 +19262,11 @@ class MainThreadAnimation extends BaseAnimation {
     this.holdTime !== null ? this.startTime = now2 - this.holdTime : this.startTime ? this.state === "finished" && (this.startTime = now2) : this.startTime = startTime ?? this.calcStartTime(), this.state === "finished" && this.updateFinishedPromise(), this.cancelTime = this.startTime, this.holdTime = null, this.state = "running", this.driver.start();
   }
   pause() {
-    var _a;
     if (!this._resolved) {
       this.pendingPlayState = "paused";
       return;
     }
-    this.state = "paused", this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
+    this.state = "paused", this.holdTime = this.currentTime ?? 0;
   }
   complete() {
     this.state !== "running" && this.play(), this.pendingPlayState = this.state = "finished", this.holdTime = null;
@@ -19376,6 +19288,9 @@ class MainThreadAnimation extends BaseAnimation {
   sample(time2) {
     return this.startTime = 0, this.tick(time2, !0);
   }
+  get finished() {
+    return this.currentFinishedPromise;
+  }
 }
 const acceleratedValues = /* @__PURE__ */ new Set([
   "opacity",
@@ -19385,21 +19300,7 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
   // or until we implement support for linear() easing.
   // "background-color"
-]);
-function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}) {
-  const keyframeOptions = { [valueName]: keyframes2 };
-  times && (keyframeOptions.offset = times);
-  const easing = mapEasingToNativeEasing(ease2, duration);
-  return Array.isArray(easing) && (keyframeOptions.easing = easing), element.animate(keyframeOptions, {
-    delay: delay2,
-    duration,
-    easing: Array.isArray(easing) ? "linear" : easing,
-    fill: "both",
-    iterations: repeat + 1,
-    direction: repeatType === "reverse" ? "alternate" : "normal"
-  });
-}
-const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), sampleDelta = 10, maxDuration = 2e4;
+]), supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")), sampleDelta = 10, maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
   return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
@@ -19486,6 +19387,9 @@ class AcceleratedAnimation extends BaseAnimation {
     const { animation } = resolved;
     return animation.playbackRate;
   }
+  get finished() {
+    return this.resolved.animation.finished;
+  }
   set speed(newSpeed) {
     const { resolved } = this;
     if (!resolved)
@@ -19635,7 +19539,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     if (finalKeyframe !== void 0)
       return frame$1.update(() => {
         options.onUpdate(finalKeyframe), options.onComplete();
-      }), new GroupPlaybackControls([]);
+      }), new GroupAnimationWithThen([]);
   }
   return !isHandoff && AcceleratedAnimation.supports(options) ? new AcceleratedAnimation(options) : new MainThreadAnimation(options);
 };
@@ -19644,12 +19548,11 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key2) {
   return needsAnimating[key2] = !1, shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
-  var _a;
   let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
   transitionOverride && (transition = transitionOverride);
   const animations2 = [], animationTypeState = type && visualElement.animationState && visualElement.animationState.getState()[type];
   for (const key2 in target) {
-    const value = visualElement.getValue(key2, (_a = visualElement.latestValues[key2]) !== null && _a !== void 0 ? _a : null), valueTarget = target[key2];
+    const value = visualElement.getValue(key2, visualElement.latestValues[key2] ?? null), valueTarget = target[key2];
     if (valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key2))
       continue;
     const valueTransition = {
@@ -19675,8 +19578,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
   }), animations2;
 }
 function animateVariant(visualElement, variant, options = {}) {
-  var _a;
-  const resolved = resolveVariant(visualElement, variant, options.type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
+  const resolved = resolveVariant(visualElement, variant, options.type === "exit" ? visualElement.presenceContext?.custom : void 0);
   let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
   options.transitionOverride && (transition = options.transitionOverride);
   const getAnimation = resolved ? () => Promise.all(animateTarget(visualElement, resolved, options)) : () => Promise.resolve(), getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size ? (forwardDelay = 0) => {
@@ -19750,8 +19652,7 @@ function animateList(visualElement) {
 function createAnimationState(visualElement) {
   let animate2 = animateList(visualElement), state = createState(), isInitialRender = !0;
   const buildResolvedTypeValues = (type) => (acc, definition) => {
-    var _a;
-    const resolved = resolveVariant(visualElement, definition, type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
+    const resolved = resolveVariant(visualElement, definition, type === "exit" ? visualElement.presenceContext?.custom : void 0);
     if (resolved) {
       const { transition, transitionEnd, ...target } = resolved;
       acc = { ...acc, ...target, ...transitionEnd };
@@ -19815,13 +19716,9 @@ function createAnimationState(visualElement) {
     return isInitialRender && (props.initial === !1 || props.initial === props.animate) && !visualElement.manuallyAnimateOnMount && (shouldAnimate = !1), isInitialRender = !1, shouldAnimate ? animate2(animations2) : Promise.resolve();
   }
   function setActive(type, isActive) {
-    var _a;
     if (state[type].isActive === isActive)
       return Promise.resolve();
-    (_a = visualElement.variantChildren) === null || _a === void 0 || _a.forEach((child) => {
-      var _a2;
-      return (_a2 = child.animationState) === null || _a2 === void 0 ? void 0 : _a2.setActive(type, isActive);
-    }), state[type].isActive = isActive;
+    visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive)), state[type].isActive = isActive;
     const animations2 = animateChanges(type);
     for (const key2 in state)
       state[key2].protectedKeys = {};
@@ -19890,8 +19787,7 @@ class AnimationFeature extends Feature {
     animate2 !== prevAnimate && this.updateAnimationControlsSubscription();
   }
   unmount() {
-    var _a;
-    this.node.animationState.reset(), (_a = this.unmountControls) === null || _a === void 0 || _a.call(this);
+    this.node.animationState.reset(), this.unmountControls?.();
   }
 }
 let id$2 = 0;
@@ -19924,10 +19820,24 @@ const animations = {
   exit: {
     Feature: ExitAnimationFeature
   }
+}, 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 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: {
@@ -20230,10 +20140,7 @@ class VisualElementDragControls {
         return;
       }
       this.updateAxis("x", info.point, offset2), this.updateAxis("y", info.point, offset2), this.visualElement.render(), onDrag && onDrag(event, info);
-    }, onSessionEnd = (event, info) => this.stop(event, info), resumeAnimation = () => eachAxis((axis) => {
-      var _a;
-      return this.getAnimationState(axis) === "paused" && ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
-    }), { dragSnapToOrigin } = this.getProps();
+    }, onSessionEnd = (event, info) => this.stop(event, info), resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play()), { dragSnapToOrigin } = this.getProps();
     this.panSession = new PanSession(originEvent, {
       onSessionStart,
       onStart,
@@ -20271,8 +20178,7 @@ class VisualElementDragControls {
     this.constraints && this.constraints[axis] && (next = applyConstraints(next, this.constraints[axis], this.elastic[axis])), axisValue.set(next);
   }
   resolveConstraints() {
-    var _a;
-    const { dragConstraints, dragElastic } = this.getProps(), layout2 = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(!1) : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout, prevConstraints = this.constraints;
+    const { dragConstraints, dragElastic } = this.getProps(), layout2 = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(!1) : this.visualElement.projection?.layout, prevConstraints = this.constraints;
     dragConstraints && isRefObject(dragConstraints) ? this.constraints || (this.constraints = this.resolveRefConstraints()) : dragConstraints && layout2 ? this.constraints = calcRelativeConstraints(layout2.layoutBox, dragConstraints) : this.constraints = !1, this.elastic = resolveDragElastic(dragElastic), prevConstraints !== this.constraints && layout2 && this.constraints && !this.hasMutatedConstraints && eachAxis((axis) => {
       this.constraints !== !1 && this.getAxisMotionValue(axis) && (this.constraints[axis] = rebaseAxisConstraints(layout2.layoutBox[axis], this.constraints[axis]));
     });
@@ -20321,14 +20227,10 @@ class VisualElementDragControls {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
   }
   pauseAnimation() {
-    eachAxis((axis) => {
-      var _a;
-      return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause();
-    });
+    eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
   }
   getAnimationState(axis) {
-    var _a;
-    return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
+    return this.getAxisMotionValue(axis).animation?.state;
   }
   /**
    * Drag works differently depending on which props are provided.
@@ -20923,21 +20825,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
     }
     measurePageBox() {
-      var _a;
       const { visualElement } = this.options;
       if (!visualElement)
         return createBox();
       const box = visualElement.measureViewportBox();
-      if (!(((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot))) {
+      if (!(this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot))) {
         const { scroll } = this.root;
         scroll && (translateAxis(box.x, scroll.offset.x), translateAxis(box.y, scroll.offset.y));
       }
       return box;
     }
     removeElementScroll(box) {
-      var _a;
       const boxWithoutScroll = createBox();
-      if (copyBoxInto(boxWithoutScroll, box), !((_a = this.scroll) === null || _a === void 0) && _a.wasRoot)
+      if (copyBoxInto(boxWithoutScroll, box), this.scroll?.wasRoot)
         return boxWithoutScroll;
       for (let i2 = 0; i2 < this.path.length; i2++) {
         const node2 = this.path[i2], { scroll, options } = node2;
@@ -20987,11 +20887,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.relativeParent && this.relativeParent.resolvedRelativeTargetAt !== frameData.timestamp && this.relativeParent.resolveTargetDelta(!0);
     }
     resolveTargetDelta(forceRecalculation = !1) {
-      var _a;
       const lead = this.getLead();
       this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty), this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty), this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
       const isShared = !!this.resumingFrom || this !== lead;
-      if (!(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || !((_a = this.parent) === null || _a === void 0) && _a.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize))
+      if (!(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || this.parent?.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize))
         return;
       const { layout: layout2, layoutId } = this.options;
       if (!(!this.layout || !(layout2 || layoutId))) {
@@ -21014,10 +20913,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return !!((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
     }
     calcProjection() {
-      var _a;
       const lead = this.getLead(), isShared = !!this.resumingFrom || this !== lead;
       let canSkip = !0;
-      if ((this.isProjectionDirty || !((_a = this.parent) === null || _a === void 0) && _a.isProjectionDirty) && (canSkip = !1), isShared && (this.isSharedProjectionDirty || this.isTransformDirty) && (canSkip = !1), this.resolvedRelativeTargetAt === frameData.timestamp && (canSkip = !1), canSkip)
+      if ((this.isProjectionDirty || this.parent?.isProjectionDirty) && (canSkip = !1), isShared && (this.isSharedProjectionDirty || this.isTransformDirty) && (canSkip = !1), this.resolvedRelativeTargetAt === frameData.timestamp && (canSkip = !1), canSkip)
         return;
       const { layout: layout2, layoutId } = this.options;
       if (this.isTreeAnimating = !!(this.parent && this.parent.isTreeAnimating || this.currentAnimation || this.pendingAnimation), this.isTreeAnimating || (this.targetDelta = this.relativeTarget = void 0), !this.layout || !(layout2 || layoutId))
@@ -21039,8 +20937,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.isVisible = !0;
     }
     scheduleRender(notifyAll = !0) {
-      var _a;
-      if ((_a = this.options.visualElement) === null || _a === void 0 || _a.scheduleRender(), notifyAll) {
+      if (this.options.visualElement?.scheduleRender(), notifyAll) {
         const stack = this.getStack();
         stack && stack.scheduleRender();
       }
@@ -21110,14 +21007,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return stack ? stack.lead === this : !0;
     }
     getLead() {
-      var _a;
       const { layoutId } = this.options;
-      return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
+      return layoutId ? this.getStack()?.lead || this : this;
     }
     getPrevLead() {
-      var _a;
       const { layoutId } = this.options;
-      return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : void 0;
+      return layoutId ? this.getStack()?.prevLead : void 0;
     }
     getStack() {
       const { layoutId } = this.options;
@@ -21150,7 +21045,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       visualElement.scheduleRender();
     }
     getProjectionStyles(styleProp) {
-      var _a, _b;
       if (!this.instance || this.isSVG)
         return;
       if (!this.isVisible)
@@ -21168,7 +21062,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       const valuesToRender = lead.animationValues || lead.latestValues;
       this.applyTransformsToTarget(), styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender), transformTemplate && (styles.transform = transformTemplate(valuesToRender, styles.transform));
       const { x: x2, y: y2 } = this.projectionDelta;
-      styles.transformOrigin = `${x2.origin * 100}% ${y2.origin * 100}% 0`, lead.animationValues ? styles.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit : styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
+      styles.transformOrigin = `${x2.origin * 100}% ${y2.origin * 100}% 0`, lead.animationValues ? styles.opacity = lead === this ? valuesToRender.opacity ?? this.latestValues.opacity ?? 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit : styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
       for (const key2 in scaleCorrectors) {
         if (valuesToRender[key2] === void 0)
           continue;
@@ -21187,10 +21081,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     }
     // Only run on root
     resetTree() {
-      this.root.nodes.forEach((node2) => {
-        var _a;
-        return (_a = node2.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
-      }), this.root.nodes.forEach(clearMeasurements), this.root.sharedNodes.clear();
+      this.root.nodes.forEach((node2) => node2.currentAnimation?.stop()), this.root.nodes.forEach(clearMeasurements), this.root.sharedNodes.clear();
     }
   };
 }
@@ -21198,8 +21089,7 @@ function updateLayout(node2) {
   node2.updateLayout();
 }
 function notifyLayoutUpdate(node2) {
-  var _a;
-  const snapshot = ((_a = node2.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node2.snapshot;
+  const snapshot = node2.resumeFrom?.snapshot || node2.snapshot;
   if (node2.isLead() && node2.layout && snapshot && node2.hasListeners("didUpdate")) {
     const { layoutBox: layout2, measuredBox: measuredLayout } = node2.layout, { animationType } = node2.options, isShared = snapshot.source !== node2.layout.source;
     animationType === "size" ? eachAxis((axis) => {
@@ -21301,8 +21191,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
   return animationType === "position" || animationType === "preserve-aspect" && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
 }
 function checkNodeWasScrollRoot(node2) {
-  var _a;
-  return node2 !== node2.root && ((_a = node2.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+  return node2 !== node2.root && node2.scroll?.wasRoot;
 }
 const DocumentProjectionNode = createProjectionNode({
   attachResizeListener: (ref, notify2) => addDomEvent(ref, "resize", notify2),
@@ -21339,6 +21228,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");
@@ -21375,6 +21301,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)
@@ -21665,8 +21647,7 @@ class VisualElement {
    * directly from the instance (which might have performance implications).
    */
   readValue(key2, target) {
-    var _a;
-    let value = this.latestValues[key2] !== void 0 || !this.current ? this.latestValues[key2] : (_a = this.getBaseTargetFromProps(this.props, key2)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key2, this.options);
+    let value = this.latestValues[key2] !== void 0 || !this.current ? this.latestValues[key2] : this.getBaseTargetFromProps(this.props, key2) ?? this.readValueFromInstance(this.current, key2, this.options);
     return value != null && (typeof value == "string" && (isNumericalString(value) || isZeroValueString(value)) ? value = parseFloat(value) : !findValueType(value) && complex.test(target) && (value = getAnimatableNone(key2, target)), this.setBaseTarget(key2, isMotionValue(value) ? value.get() : value)), isMotionValue(value) ? value.get() : value;
   }
   /**
@@ -21681,11 +21662,10 @@ class VisualElement {
    * props.
    */
   getBaseTarget(key2) {
-    var _a;
     const { initial } = this.props;
     let valueFromInitial;
     if (typeof initial == "string" || typeof initial == "object") {
-      const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+      const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
       variant && (valueFromInitial = variant[key2]);
     }
     if (initial && valueFromInitial !== void 0)
@@ -21823,8 +21803,7 @@ function calculateRepeatDuration(duration, repeat, _repeatDelay) {
   return duration * (repeat + 1);
 }
 function calcNextTime(current, next, prev, labels) {
-  var _a;
-  return typeof next == "number" ? next : next.startsWith("-") || next.startsWith("+") ? Math.max(0, current + parseFloat(next)) : next === "<" ? prev : (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+  return typeof next == "number" ? next : next.startsWith("-") || next.startsWith("+") ? Math.max(0, current + parseFloat(next)) : next === "<" ? prev : labels.get(next) ?? current;
 }
 function eraseKeyframes(sequence, startTime, endTime) {
   for (let i2 = 0; i2 < sequence.length; i2++) {
@@ -22044,7 +22023,7 @@ function isSequence(value) {
 function createScopedAnimate(scope) {
   function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
     let animations2 = [];
-    return isSequence(subjectOrSequence) ? animations2 = animateSequence(subjectOrSequence, optionsOrKeyframes, scope) : animations2 = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope), new GroupPlaybackControls(animations2);
+    return isSequence(subjectOrSequence) ? animations2 = animateSequence(subjectOrSequence, optionsOrKeyframes, scope) : animations2 = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope), new GroupAnimationWithThen(animations2);
   }
   return scopedAnimate;
 }
@@ -24795,7 +24774,7 @@ const isEdgeBase = (element) => "id" in element && "source" in element && "targe
     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) => {
@@ -25975,7 +25954,8 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
 }
 function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
   return function(event, d2) {
-    if (!preventScrolling && event.type === "wheel" && !event.ctrlKey || isWrappedWithClass(event, noWheelClassName))
+    const isWheel = event.type === "wheel", preventZoom = !preventScrolling && isWheel && !event.ctrlKey, hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);
+    if (event.ctrlKey && isWheel && hasNoWheelClass && event.preventDefault(), preventZoom || hasNoWheelClass)
       return null;
     event.preventDefault(), d3ZoomHandler.call(this, event, d2);
   };
@@ -26331,7 +26311,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
       }), nextValues = { ...prevValues, direction };
       shouldResize?.(event, nextValues) !== !1 && (onResize?.(event, nextValues), onChange(change, childChanges));
     }).on("end", (event) => {
-      onResizeEnd?.(event, { ...prevValues }), onEnd?.();
+      onResizeEnd?.(event, { ...prevValues }), onEnd?.({ ...prevValues });
     });
     selection2.call(dragHandler);
   }
@@ -26804,12 +26784,12 @@ function BatchProvider({ children: children2 }) {
       next = typeof payload == "function" ? payload(next) : payload;
     if (hasDefaultNodes)
       setNodes(next);
-    else if (onNodesChange) {
+    else {
       const changes = getElementsDiffChanges({
         items: next,
         lookup: nodeLookup
       });
-      changes.length > 0 ? onNodesChange(changes) : fitViewQueued && window.requestAnimationFrame(() => {
+      changes.length > 0 ? onNodesChange?.(changes) : fitViewQueued && window.requestAnimationFrame(() => {
         const { fitViewQueued: fitViewQueued2, nodes: nodes2, setNodes: setNodes2 } = store.getState();
         fitViewQueued2 && setNodes2(nodes2);
       });
@@ -27678,7 +27658,7 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Botto
   ];
 }
 function createSimpleBezierEdge(params) {
-  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, interactionWidth }) => {
+  return memo$2(({ id: id2, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label: label2, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style: style2, markerEnd, markerStart, interactionWidth }) => {
     const [path, labelX, labelY] = getSimpleBezierPath({
       sourceX,
       sourceY,
@@ -28359,7 +28339,7 @@ function MiniMapNodes({
 }
 function NodeComponentWrapperInner({ id: id2, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick }) {
   const { node: node2, x: x2, y: y2, width, height } = useStore$1((s2) => {
-    const node22 = s2.nodeLookup.get(id2), { x: x22, y: y22 } = node22.internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions(node22);
+    const { internals } = s2.nodeLookup.get(id2), node22 = internals.userNode, { x: x22, y: y22 } = internals.positionAbsolute, { width: width2, height: height2 } = getNodeDimensions(node22);
     return {
       node: node22,
       x: x22,
@@ -28442,7 +28422,7 @@ function MiniMapComponent({
     const [x22, y22] = minimapInstance.current?.pointer(event) || [0, 0];
     onClick(event, { x: x22, y: y22 });
   } : void 0, onSvgNodeClick = onNodeClick ? useCallback((event, nodeId) => {
-    const node2 = store.getState().nodeLookup.get(nodeId);
+    const node2 = store.getState().nodeLookup.get(nodeId).internals.userNode;
     onNodeClick(event, node2);
   }, []) : void 0;
   return jsx(Panel, { position, style: {
@@ -28453,7 +28433,7 @@ function MiniMapComponent({
     "--xy-minimap-mask-stroke-width-props": typeof maskStrokeWidth == "number" ? maskStrokeWidth * viewScale : void 0,
     "--xy-minimap-node-background-color-props": typeof nodeColor == "string" ? nodeColor : void 0,
     "--xy-minimap-node-stroke-color-props": typeof nodeStrokeColor == "string" ? nodeStrokeColor : void 0,
-    "--xy-minimap-node-stroke-width-props": typeof nodeStrokeWidth == "string" ? nodeStrokeWidth : void 0
+    "--xy-minimap-node-stroke-width-props": typeof nodeStrokeWidth == "number" ? nodeStrokeWidth : void 0
   }, className: cc(["react-flow__minimap", className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x2} ${y2} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor, nodeStrokeColor, nodeBorderRadius, nodeClassName, nodeStrokeWidth, nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x2 - offset2},${y2 - offset2}h${width + offset2 * 2}v${height + offset2 * 2}h${-width - offset2 * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", pointerEvents: "none" })] }) });
 }
@@ -28524,11 +28504,15 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
           }
           triggerNodeChanges(changes);
         },
-        onEnd: () => {
+        onEnd: ({ width, height }) => {
           const dimensionChange = {
             id: id2,
             type: "dimensions",
-            resizing: !1
+            resizing: !1,
+            dimensions: {
+              width,
+              height
+            }
           };
           store.getState().triggerNodeChanges([dimensionChange]);
         }
@@ -28599,7 +28583,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];
@@ -28635,14 +28619,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;
@@ -28668,7 +28652,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();
@@ -28761,7 +28745,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) {
@@ -28874,7 +28858,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;
@@ -28891,7 +28875,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) {
@@ -28905,23 +28889,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);
 }
@@ -29013,70 +28986,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);
@@ -29775,10 +29742,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
@@ -30977,8 +30940,8 @@ const cssTransparentBg = css({
       edgesFocusable: !1,
       nodesDraggable,
       nodeDragThreshold: 4,
-      nodeClickDistance: 1.9,
-      paneClickDistance: 1.9,
+      nodeClickDistance: 3,
+      paneClickDistance: 3,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
       onNodesChange,
@@ -31033,15 +30996,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 });
@@ -34571,7 +34526,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] &": {
@@ -34622,7 +34577,7 @@ function CompoundActionButton({
         "compound-action"
       ),
       children: /* @__PURE__ */ jsx(
-        m$2.div,
+        MotionDiv,
         {
           initial: !1,
           animate: {
@@ -34680,7 +34635,7 @@ function CompoundDetailsButton({
       ),
       onClick: stopPropagation$1,
       children: /* @__PURE__ */ jsx(
-        m$2.div,
+        MotionDiv,
         {
           initial: !1,
           animate: {
@@ -35066,7 +35021,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"
@@ -35601,18 +35556,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]);
@@ -35622,10 +35579,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
       }
     ),
@@ -35683,18 +35645,17 @@ const EdgePath = forwardRef(({
   alignItems: "center"
 });
 function ElementActionButtons({
-  id: id2,
   selected: selected2 = !1,
   data: {
     hovered: isHovered = !1
   },
   buttons: buttons2
 }) {
-  const zoomTooSmall = useIsZoomTooSmall();
+  const id2 = useId$1(), zoomTooSmall = useIsZoomTooSmall();
   return !buttons2.length || zoomTooSmall ? null : /* @__PURE__ */ jsx(Box$1, { className: container$4, children: /* @__PURE__ */ jsx(
     Box$1,
     {
-      component: m$2.div,
+      component: MotionDiv,
       layoutRoot: !0,
       initial: !1,
       style: {
@@ -35711,8 +35672,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 },
@@ -35723,9 +35683,10 @@ function ElementActionButtons({
           onDoubleClick: stopPropagation$1,
           children: button2.icon
         },
-        `action-button-${id2}-${button2.key ?? index2}`
+        `${id2}-${button2.key ?? index2}`
       ))
-    }
+    },
+    `${id2}-action-buttons`
   ) });
 }
 const container$3 = css({
@@ -35757,11 +35718,12 @@ function ElementDetailsButton({
   icon: icon2,
   onClick
 }) {
+  const id2 = useId$1();
   return /* @__PURE__ */ jsx(Box$1, { className: cx(container$3, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon$1,
     {
       className: cx("nodrag nopan", actionBtn$1({ variant: "transparent" })),
-      component: m$2.button,
+      component: MotionButton,
       initial: !1,
       style: {
         originX: 0.45,
@@ -35782,7 +35744,8 @@ function ElementDetailsButton({
       onClick,
       onDoubleClick: stopPropagation$1,
       children: icon2 ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-    }
+    },
+    id2
   ) });
 }
 const container$2 = css({
@@ -35874,7 +35837,7 @@ const ElementNodeContainer = forwardRef(({
   return /* @__PURE__ */ jsx(
     Box$1,
     {
-      component: m$2.div,
+      component: MotionDiv,
       ref,
       className: cx(
         css({
@@ -36784,7 +36747,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}`,
@@ -37104,7 +37067,17 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
   }
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
+      /* @__PURE__ */ jsx(
+        EdgePath,
+        {
+          edgeProps: props,
+          svgPath: edgePath,
+          ref: svgPathRef,
+          ...enableEdgeEditing && {
+            onEdgePointerDown
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         EdgeLabelContainer,
         {
@@ -37143,7 +37116,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
             ))
           }
         )
@@ -38258,10 +38231,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 = {
@@ -38342,7 +38318,7 @@ const useElementDetailsActorRef = () => {
       }
     )
   );
-}), ViewPadding = 0.1, RelationshipsBrowserActorContext = createContext(null);
+}), RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
   return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
@@ -38436,13 +38412,12 @@ const RelationshipEdge$1 = customEdge((props) => {
     /* @__PURE__ */ jsx(
       EdgePath,
       {
-        ...edgeProps,
+        edgeProps,
         svgPath,
         ...markOrange && {
           strokeWidth: 5
         }
-      },
-      id2
+      }
     ),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
@@ -38459,7 +38434,7 @@ const RelationshipEdge$1 = customEdge((props) => {
         children: label2
       }
     )
-  ] }, id2);
+  ] });
 }), selectViewId = (s2) => s2.context.view.id;
 function useCurrentViewId() {
   const actorRef = useDiagramActorRef();
@@ -38523,9 +38498,9 @@ 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, iconSize: 40 }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler$1, { ...props }),
   /* @__PURE__ */ jsx(ElementActions$1, { ...props }),
   /* @__PURE__ */ jsx(ElementPorts$1, { ...props })
@@ -41288,6 +41263,7 @@ const node = css({
     enableSelectSubject: state.context.enableSelectSubject,
     enableChangeScope: state.context.enableChangeScope
   };
+}, setHoveredNode$2 = () => {
 }, SelectElement = memo$2(() => {
   const browser = useRelationshipsBrowser(), {
     subjectId,
@@ -41299,7 +41275,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);
@@ -41507,7 +41483,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 });
       }),
@@ -41889,13 +41864,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,
@@ -42426,22 +42404,6 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   xl: {
     [offset]: "4rem"
   }
-  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
-  //     width: 'calc(100vw - 4rem)',
-  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
-  //   },
-  //   lg: {
-  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
-  //     width: 'calc(100vw - 8rem)',
-  //     height: 'calc(100vh - 8rem)',
-  //   },
-  //   xl: {
-  //     [borderRadius]: '8px',
-  //     padding: '8px',
-  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
-  //     width: 'calc(100vw - 10rem)',
-  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
-  //   },
 }), body = css.raw({
   position: "relative",
   containerName: "overlay-dialog",
@@ -42459,112 +42421,101 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   base: {
     dialog,
     body
-  },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: "0"
-        }
+  }
+}), Overlay = forwardRef(({
+  onClose,
+  className,
+  classes: classes2,
+  overlayLevel = 0,
+  children: children2,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(!1), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useSyncedRef(onClose), close = useDebouncedCallback(
+    () => {
+      isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
+    },
+    [],
+    50
+  );
+  useEffect(() => {
+    const cancel = (e2) => {
+      e2.preventDefault(), e2.stopPropagation(), close();
+    };
+    return dialogRef.current?.addEventListener("cancel", cancel, { capture: !0 }), () => {
+      dialogRef.current?.removeEventListener("cancel", cancel, { capture: !0 });
+    };
+  }, []), useTimeoutEffect(() => {
+    dialogRef.current?.open || dialogRef.current?.showModal();
+  }, 30), useTimeoutEffect(() => {
+    setOpened(!0);
+  }, 120);
+  const styles = overlay({
+    level: overlayLevel
+  });
+  return /* @__PURE__ */ jsx(
+    m$2.dialog,
+    {
+      ref: useMergedRef(dialogRef, ref),
+      className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes2?.dialog, className),
+      layout: !0,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
       },
-      1: {
-        dialog: {
-          [level]: "1"
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%",
+          scale: overlayLevel > 0 ? 0.9 : 1.075,
+          opacity: 0
+        },
+        animate: {
+          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
+          scale: 1,
+          opacity: 1,
+          transition: {
+            delay: 0.075
+          }
+        },
+        exit: {
+          scale: 1.2,
+          opacity: 0,
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%"
         }
-      },
-      2: {
-        dialog: {
-          [level]: "2"
+      } : {
+        initial: {
+          [backdropBlur]: "8px",
+          [backdropOpacity]: "60%"
         }
       },
-      3: {
-        dialog: {
-          [level]: "3"
+      onClick: (e2) => {
+        if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
         }
-      }
-    }
-  }
-}), Overlay = forwardRef(
-  ({ children: children2, onClose, className, classes: classes2, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(!1), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useSyncedRef(onClose), close = useDebouncedCallback(
-      () => {
-        isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
       },
-      [],
-      50
-    );
-    useLayoutEffect$1(() => {
-      const cancel = (e2) => {
-        e2.preventDefault(), close();
-      };
-      return dialogRef.current?.addEventListener("cancel", cancel, { capture: !0 }), () => {
-        dialogRef.current?.removeEventListener("cancel", cancel, { capture: !0 });
-      };
-    }, []), useTimeoutEffect(() => {
-      dialogRef.current?.open || dialogRef.current?.showModal();
-    }, 20), useTimeoutEffect(() => {
-      setOpened(!0);
-    }, 120);
-    const styles = overlay({
-      level: overlayLevel
-    });
-    return /* @__PURE__ */ jsx(
-      m$2.dialog,
-      {
-        ref: useMergedRef(dialogRef, ref),
-        className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes2?.dialog, className),
-        layout: !0,
-        ...motionNotReduced ? {
-          initial: {
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%",
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
-            opacity: 0
-          },
-          animate: {
-            [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-            [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
-            scale: 1,
-            opacity: 1,
-            transition: {
-              delay: 0.075
-            }
-          },
-          exit: {
-            scale: 1.2,
-            opacity: 0,
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%"
-          }
-        } : {
-          initial: {
-            [backdropBlur]: "8px",
-            [backdropOpacity]: "60%"
-          }
-        },
-        onClick: (e2) => {
-          if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
-            dialogRef.current?.close();
-            return;
-          }
-        },
-        onDoubleClick: stopPropagation$1,
-        onPointerDown: stopPropagation$1,
-        onClose: (e2) => {
-          e2.stopPropagation(), close();
-        },
-        ...rest,
-        children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsx(Box$1, { className: cx(styles.body, "overlay-body", classes2?.body), children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) }) })
-      }
-    );
-  }
-);
+      onDoubleClick: stopPropagation$1,
+      onPointerDown: stopPropagation$1,
+      onClose: (e2) => {
+        e2.stopPropagation(), close();
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsx(Box$1, { className: cx(styles.body, "overlay-body", classes2?.body), children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) }) })
+    }
+  );
+});
 Overlay.displayName = "Overlay";
 var xstate_cjsExports = /* @__PURE__ */ requireXstate_cjs();
 function _update$1(current, update) {
   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) {
@@ -42573,10 +42524,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;
   });
@@ -42584,6 +42541,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),
@@ -42605,7 +42568,6 @@ function viewToNodesEdge$1(view) {
       draggable: !1,
       selectable: !0,
       focusable: !0,
-      deletable: !1,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       style: {
@@ -42698,7 +42660,7 @@ function viewToNodesEdge$1(view) {
       zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
-      deletable: !1,
+      // deletable: false,
       data: {
         sourceFqn: edge.sourceFqn,
         targetFqn: edge.targetFqn,
@@ -42748,7 +42710,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") {
@@ -42766,10 +42728,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,
@@ -42782,10 +42744,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: {},
@@ -43035,7 +42994,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 });
               })
@@ -43733,7 +43692,9 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
   }
 }), hotkeyLogic = xstate_cjsExports.fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "close" }), {
+    ["Escape", (event) => {
+      event.stopPropagation(), sendBack({ type: "close" });
+    }, {
       preventDefault: !0
     }]
   ]);
@@ -44018,7 +43979,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,
       {
@@ -44083,7 +44044,7 @@ const RelationshipEdge = customEdge((props) => {
   );
 }, ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
   /* @__PURE__ */ jsx(ElementShape, { ...props }),
-  /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
   /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
   /* @__PURE__ */ jsx(ElementActions, { ...props }),
   /* @__PURE__ */ jsx(ElementPorts, { ...props })
@@ -44247,9 +44208,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,
@@ -44360,27 +44319,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,
@@ -44390,10 +44350,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,
@@ -44472,7 +44431,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);
@@ -44597,7 +44557,7 @@ const selectOverlays = (s2) => s2.context.overlays.map((overlay2) => {
         return /* @__PURE__ */ jsx(
           Overlay,
           {
-            overlayLevel: Math.min(index2, 3),
+            overlayLevel: index2,
             onClose: () => close(overlay2.actorRef),
             children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay2.actorRef })
           },
@@ -44607,7 +44567,7 @@ const selectOverlays = (s2) => s2.context.overlays.map((overlay2) => {
         return /* @__PURE__ */ jsx(
           Overlay,
           {
-            overlayLevel: Math.min(index2, 3),
+            overlayLevel: index2,
             onClose: () => close(overlay2.actorRef),
             children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay2.actorRef })
           },
@@ -44948,17 +44908,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();
@@ -44998,14 +44958,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) => {
@@ -45030,7 +44990,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,
@@ -45067,7 +45027,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" })
@@ -45089,17 +45049,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 = {
@@ -45108,7 +45063,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: [],
@@ -45116,64 +45073,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({
@@ -45185,7 +45152,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,
       {
@@ -45212,7 +45179,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"),
@@ -45246,11 +45213,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;
@@ -45265,7 +45232,7 @@ function useHandleElementSelection() {
       scoped,
       others
     });
-  });
+  }, [setPickView, navigateTo]);
 }
 const backdrop = css({
   position: "fixed",
@@ -45470,7 +45437,7 @@ function LikeC4SearchInput() {
     }
   );
 }
-function LikeC4Search() {
+const LikeC4Search = memo$2(() => {
   const [searchOpened, searchOps] = useDisclosure(!1);
   useHotkeys([
     ["mod+k", () => searchOps.toggle(), {
@@ -45494,8 +45461,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,
@@ -45503,24 +45470,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) => {
@@ -45532,9 +45500,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,
@@ -45543,14 +45511,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",
@@ -45569,12 +45538,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,
@@ -45599,12 +45568,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({
@@ -46190,7 +46158,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(
@@ -46232,7 +46200,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,
@@ -47708,7 +47676,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,
@@ -47973,14 +47941,20 @@ function updateActiveWalkthrough({ context: context2 }) {
 }
 const hotkeyActorLogic = xstate_cjsExports.fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "key.esc" }), {
+    ["Escape", (event) => {
+      event.stopPropagation(), sendBack({ type: "key.esc" });
+    }, {
       preventDefault: !0
     }]
   ]), arrowshandler = getHotkeyHandler([
-    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" }), {
+    ["ArrowLeft", (event) => {
+      event.stopPropagation(), sendBack({ type: "key.arrow.left" });
+    }, {
       preventDefault: !0
     }],
-    ["ArrowRight", () => sendBack({ type: "key.arrow.right" }), {
+    ["ArrowRight", (event) => {
+      event.stopPropagation(), sendBack({ type: "key.arrow.right" });
+    }, {
       preventDefault: !0
     }]
   ]);
@@ -48376,7 +48350,6 @@ const diagramMachine = xstate_cjsExports.setup({
             type: "xyflow:fitDiagram",
             params: { duration: 0 }
           },
-          "startSyncLayout",
           xstate_cjsExports.assign(({ context: context2 }) => ({
             navigationHistory: {
               currentIndex: 0,
@@ -48386,7 +48359,8 @@ const diagramMachine = xstate_cjsExports.setup({
                 viewport: { ...context2.xyflow.getViewport() }
               }]
             }
-          }))
+          })),
+          "startSyncLayout"
         ],
         target: "ready"
       }, {
@@ -48752,7 +48726,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,
@@ -48761,13 +48735,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"
         }
@@ -48876,7 +48850,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);
@@ -50421,15 +50397,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=="
     });
@@ -50447,19 +50418,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
       }));
     },
@@ -50469,11 +50444,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,