likec4 1.3.0 → 1.4.0

package/dist/__app__/src/main.mjs

@@ -5692,9 +5692,9 @@ function createHistory(opts) {
   let blockers = [];
   const notify = () => {
     location = opts.getLocation(), subscribers.forEach((subscriber) => subscriber());
-  }, tryNavigation = async (task) => {
+  }, tryNavigation = async (task, navigateOpts) => {
     var _a;
-    if (typeof document < "u" && blockers.length) {
+    if (!(navigateOpts?.ignoreBlocker ?? !1) && typeof document < "u" && blockers.length) {
       for (const blocker of blockers)
         if (!await blocker()) {
           (_a = opts.onBlocked) == null || _a.call(opts, notify);
@@ -5710,30 +5710,30 @@ function createHistory(opts) {
     subscribe: (cb2) => (subscribers.add(cb2), () => {
       subscribers.delete(cb2);
     }),
-    push: (path, state) => {
+    push: (path, state, navigateOpts) => {
       state = assignKey(state), tryNavigation(() => {
         opts.pushState(path, state), notify();
-      });
+      }, navigateOpts);
     },
-    replace: (path, state) => {
+    replace: (path, state, navigateOpts) => {
       state = assignKey(state), tryNavigation(() => {
         opts.replaceState(path, state), notify();
-      });
+      }, navigateOpts);
     },
-    go: (index2) => {
+    go: (index2, navigateOpts) => {
       tryNavigation(() => {
         opts.go(index2), notify();
-      });
+      }, navigateOpts);
     },
-    back: () => {
+    back: (navigateOpts) => {
       tryNavigation(() => {
         opts.back(), notify();
-      });
+      }, navigateOpts);
     },
-    forward: () => {
+    forward: (navigateOpts) => {
       tryNavigation(() => {
         opts.forward(), notify();
-      });
+      }, navigateOpts);
     },
     createHref: (str) => opts.createHref(str),
     block: (blocker) => (blockers.push(blocker), blockers.length === 1 && addEventListener(beforeUnloadEvent, beforeUnloadListener, {
@@ -5759,9 +5759,9 @@ function assignKey(state) {
   };
 }
 function createBrowserHistory(opts) {
-  const win = opts?.window ?? (typeof document < "u" ? window : void 0), originalPushState = win.history.pushState, originalReplaceState = win.history.replaceState, createHref = opts?.createHref ?? ((path) => path), parseLocation = opts?.parseLocation ?? (() => parseHref(
-    `${win.location.pathname}${win.location.search}${win.location.hash}`,
-    win.history.state
+  const win2 = opts?.window ?? (typeof document < "u" ? window : void 0), originalPushState = win2.history.pushState, originalReplaceState = win2.history.replaceState, createHref = opts?.createHref ?? ((path) => path), parseLocation = opts?.parseLocation ?? (() => parseHref(
+    `${win2.location.pathname}${win2.location.search}${win2.location.hash}`,
+    win2.history.state
   ));
   let currentLocation = parseLocation(), rollbackLocation;
   const getLocation = () => currentLocation;
@@ -5769,7 +5769,7 @@ function createBrowserHistory(opts) {
   const flush = () => {
     if (!next)
       return;
-    (next.isPush ? originalPushState : originalReplaceState).call(win.history, next.state, "", next.href), next = void 0, scheduled = void 0, rollbackLocation = void 0;
+    (next.isPush ? originalPushState : originalReplaceState).call(win2.history, next.state, "", next.href), next = void 0, scheduled = void 0, rollbackLocation = void 0;
   }, queueHistoryAction = (type, destHref, state) => {
     const href = createHref(destHref);
     scheduled || (rollbackLocation = currentLocation), currentLocation = parseHref(destHref, state), next = {
@@ -5783,35 +5783,35 @@ function createBrowserHistory(opts) {
     getLocation,
     pushState: (href, state) => queueHistoryAction("push", href, state),
     replaceState: (href, state) => queueHistoryAction("replace", href, state),
-    back: () => win.history.back(),
-    forward: () => win.history.forward(),
-    go: (n2) => win.history.go(n2),
+    back: () => win2.history.back(),
+    forward: () => win2.history.forward(),
+    go: (n2) => win2.history.go(n2),
     createHref: (href) => createHref(href),
     flush,
     destroy: () => {
-      win.history.pushState = originalPushState, win.history.replaceState = originalReplaceState, win.removeEventListener(pushStateEvent, onPushPop), win.removeEventListener(popStateEvent, onPushPop);
+      win2.history.pushState = originalPushState, win2.history.replaceState = originalReplaceState, win2.removeEventListener(pushStateEvent, onPushPop), win2.removeEventListener(popStateEvent, onPushPop);
     },
     onBlocked: (onUpdate) => {
       rollbackLocation && currentLocation !== rollbackLocation && (currentLocation = rollbackLocation, onUpdate());
     }
   });
-  return win.addEventListener(pushStateEvent, onPushPop), win.addEventListener(popStateEvent, onPushPop), win.history.pushState = function(...args) {
-    const res = originalPushState.apply(win.history, args);
+  return win2.addEventListener(pushStateEvent, onPushPop), win2.addEventListener(popStateEvent, onPushPop), win2.history.pushState = function(...args) {
+    const res = originalPushState.apply(win2.history, args);
     return onPushPop(), res;
-  }, win.history.replaceState = function(...args) {
-    const res = originalReplaceState.apply(win.history, args);
+  }, win2.history.replaceState = function(...args) {
+    const res = originalReplaceState.apply(win2.history, args);
     return onPushPop(), res;
   }, history;
 }
 function createHashHistory(opts) {
-  const win = opts?.window ?? (typeof document < "u" ? window : void 0);
+  const win2 = opts?.window ?? (typeof document < "u" ? window : void 0);
   return createBrowserHistory({
-    window: win,
+    window: win2,
     parseLocation: () => {
-      const hashHref = win.location.hash.split("#").slice(1).join("#") ?? "/";
-      return parseHref(hashHref, win.history.state);
+      const hashHref = win2.location.hash.split("#").slice(1).join("#") ?? "/";
+      return parseHref(hashHref, win2.history.state);
     },
-    createHref: (href) => `${win.location.pathname}${win.location.search}#${href}`
+    createHref: (href) => `${win2.location.pathname}${win2.location.search}#${href}`
   });
 }
 function createMemoryHistory(opts = {
@@ -6008,8 +6008,7 @@ function encode(obj, pfx) {
   return (pfx || "") + str;
 }
 function toValue(mix2) {
-  if (!mix2)
-    return "";
+  if (!mix2) return "";
   const str = decodeURIComponent(mix2);
   return str === "false" ? !1 : str === "true" ? !0 : +str * 0 === 0 && +str + "" === str ? +str : str;
 }
@@ -6233,8 +6232,7 @@ function useRouterState(opts) {
   return useStore$2((opts?.router || contextRouter).__store, opts?.select);
 }
 function notFound(options = {}) {
-  if (options.isNotFound = !0, options.throw)
-    throw options;
+  if (options.isNotFound = !0, options.throw) throw options;
   return options;
 }
 function isNotFound(obj) {
@@ -6387,8 +6385,7 @@ function Match({ matchId }) {
       getResetKey: () => resetKey,
       errorComponent: routeErrorComponent || ErrorComponent,
       onCatch: (error, errorInfo) => {
-        if (isNotFound(error))
-          throw error;
+        if (isNotFound(error)) throw error;
         routeOnCatch?.(error, errorInfo);
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6610,19 +6607,23 @@ function interpolatePath({
   leaveWildcards,
   leaveParams
 }) {
-  const interpolatedPathSegments = parsePathname(path);
+  const interpolatedPathSegments = parsePathname(path), encodedParams = {};
+  for (const [key, value] of Object.entries(params)) {
+    const isValueString = typeof value == "string";
+    ["*", "_splat"].includes(key) ? encodedParams[key] = isValueString ? encodeURI(value) : value : encodedParams[key] = isValueString ? encodeURIComponent(value) : value;
+  }
   return joinPaths(
     interpolatedPathSegments.map((segment) => {
       if (segment.type === "wildcard") {
-        const value = params._splat;
+        const value = encodedParams._splat;
         return leaveWildcards ? `${segment.value}${value ?? ""}` : value;
       }
       if (segment.type === "param") {
         if (leaveParams) {
-          const value = params[segment.value];
+          const value = encodedParams[segment.value];
           return `${segment.value}${value ?? ""}`;
         }
-        return params[segment.value.substring(1)] ?? "undefined";
+        return encodedParams[segment.value.substring(1)] ?? "undefined";
       }
       return segment.value;
     })
@@ -6634,7 +6635,20 @@ function matchPathname(basepath2, currentPathname, matchLocation) {
     return pathParams ?? {};
 }
 function removeBasepath(basepath2, pathname) {
-  return basepath2 != "/" ? pathname.replace(basepath2, "") : pathname;
+  switch (!0) {
+    case basepath2 === "/":
+      return pathname;
+    case pathname === basepath2:
+      return "";
+    case pathname.length < basepath2.length:
+      return pathname;
+    case pathname[basepath2.length] !== "/":
+      return pathname;
+    case pathname.startsWith(basepath2):
+      return pathname.slice(basepath2.length);
+    default:
+      return pathname;
+  }
 }
 function matchByPath(basepath2, from, matchLocation) {
   from = removeBasepath(basepath2, from);
@@ -6968,8 +6982,6 @@ class Router {
         let nextParams = (dest.params ?? !0) === !0 ? prevParams : { ...prevParams, ...functionalUpdate(dest.params, prevParams) };
         Object.keys(nextParams).length > 0 && matches?.map((d) => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach((fn) => {
           nextParams = { ...nextParams, ...fn(nextParams) };
-        }), Object.keys(nextParams).forEach((key) => {
-          ["*", "_splat"].includes(key) ? nextParams[key] = encodeURI(nextParams[key]) : nextParams[key] = encodeURIComponent(nextParams[key]);
         }), pathname = interpolatePath({
           path: pathname,
           params: nextParams ?? {},
@@ -7024,6 +7036,7 @@ class Router {
     }, this.commitLocation = async ({
       startTransition,
       viewTransition,
+      ignoreBlocker,
       ...next
     }) => {
       const isSameState = () => {
@@ -7053,7 +7066,8 @@ class Router {
           }
         }, (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? !1) && (nextHistory.state.__tempKey = this.tempLocationKey)), this.shouldViewTransition = viewTransition, this.history[next.replace ? "replace" : "push"](
           nextHistory.href,
-          nextHistory.state
+          nextHistory.state,
+          { ignoreBlocker }
         );
       }
       return this.resetNextScroll = next.resetScroll ?? !0, this.latestLoadPromise;
@@ -7062,6 +7076,7 @@ class Router {
       resetScroll,
       startTransition,
       viewTransition,
+      ignoreBlocker,
       ...rest
     } = {}) => {
       const location = this.buildLocation(rest);
@@ -7070,7 +7085,8 @@ class Router {
         startTransition,
         viewTransition,
         replace,
-        resetScroll
+        resetScroll,
+        ignoreBlocker
       });
     }, this.navigate = ({ from, to, __isRedirect, ...rest }) => {
       const toString = String(to);
@@ -7197,8 +7213,7 @@ class Router {
           };
         }), updated;
       }, handleRedirectAndNotFound = (match, err) => {
-        if (isResolvedRedirect(err))
-          throw err;
+        if (isResolvedRedirect(err)) throw err;
         if (isRedirect(err) || isNotFound(err)) {
           if (updateMatch(match.id, (prev) => ({
             ...prev,
@@ -7206,7 +7221,7 @@ class Router {
             isFetching: !1,
             error: err
           })), err.routeId || (err.routeId = match.routeId), isRedirect(err))
-            throw rendered = !0, err = this.resolveRedirect(err), err;
+            throw rendered = !0, err = this.resolveRedirect({ ...err, _fromLocation: location }), err;
           if (isNotFound(err))
             throw this.handleNotFound(matches, err), err;
         }
@@ -7494,7 +7509,7 @@ class Router {
       }, next = this.buildLocation(matchLocation);
       if (opts?.pending && this.state.status !== "pending")
         return !1;
-      const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation, match = matchPathname(this.basepath, baseLocation.pathname, {
+      const baseLocation = (opts?.pending === void 0 ? !this.state.isLoading : opts.pending) ? this.latestLocation : this.state.resolvedLocation, match = matchPathname(this.basepath, baseLocation.pathname, {
         ...opts,
         to: next.pathname
       });
@@ -7763,6 +7778,7 @@ function useLinkProps(options) {
     onMouseEnter,
     onMouseLeave,
     onTouchStart,
+    ignoreBlocker,
     ...rest
   } = options;
   let type = "internal";
@@ -7813,7 +7829,8 @@ function useLinkProps(options) {
         replace,
         resetScroll,
         startTransition,
-        viewTransition
+        viewTransition,
+        ignoreBlocker
       });
     }
   }, doPreload = () => {
@@ -7823,8 +7840,7 @@ function useLinkProps(options) {
   }, handleFocus = (e2) => {
     disabled || preload && doPreload();
   }, handleTouchStart = handleFocus, handleEnter = (e2) => {
-    if (disabled)
-      return;
+    if (disabled) return;
     const eventTarget = e2.target || {};
     if (preload) {
       if (eventTarget.preloadTimeout)
@@ -7834,8 +7850,7 @@ function useLinkProps(options) {
       }, preloadDelay);
     }
   }, handleLeave = (e2) => {
-    if (disabled)
-      return;
+    if (disabled) return;
     const eventTarget = e2.target || {};
     eventTarget.preloadTimeout && (clearTimeout(eventTarget.preloadTimeout), eventTarget.preloadTimeout = null);
   }, composeHandlers = (handlers) => (e2) => {
@@ -7909,8 +7924,7 @@ function useScrollRestoration(options) {
     const getKey = options?.getKey || defaultGetKey, { history } = window;
     history.scrollRestoration = "manual";
     const onScroll = (event) => {
-      if (weakScrolledElements.has(event.target))
-        return;
+      if (weakScrolledElements.has(event.target)) return;
       weakScrolledElements.add(event.target);
       let elementSelector = "";
       if (event.target === document || event.target === window)
@@ -9152,6 +9166,34 @@ function useMounted() {
   const [mounted, setMounted] = reactExports.useState(!1);
   return reactExports.useEffect(() => setMounted(!0), []), mounted;
 }
+function useStateHistory(initialValue) {
+  const [state, setState] = reactExports.useState({
+    history: [initialValue],
+    current: 0
+  }), set2 = reactExports.useCallback(
+    (val) => setState((currentState) => {
+      const nextState = [...currentState.history.slice(0, currentState.current + 1), val];
+      return {
+        history: nextState,
+        current: nextState.length - 1
+      };
+    }),
+    []
+  ), back = reactExports.useCallback(
+    (steps2 = 1) => setState((currentState) => ({
+      history: currentState.history,
+      current: Math.max(0, currentState.current - steps2)
+    })),
+    []
+  ), forward = reactExports.useCallback(
+    (steps2 = 1) => setState((currentState) => ({
+      history: currentState.history,
+      current: Math.min(currentState.history.length - 1, currentState.current + steps2)
+    })),
+    []
+  ), handlers = reactExports.useMemo(() => ({ set: set2, forward, back }), []);
+  return [state.history[state.current], handlers, state];
+}
 function getEnv() {
   return typeof process < "u" && process.env ? "production" : "development";
 }
@@ -10990,11 +11032,11 @@ const Corner = reactExports.forwardRef((props2, ref) => {
 }), ScrollAreaCorner = reactExports.forwardRef((props2, ref) => {
   const ctx = useScrollAreaContext(), hasBothScrollbarsVisible = !!(ctx.scrollbarX && ctx.scrollbarY);
   return ctx.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Corner, { ...props2, ref }) : null;
-}), defaultProps$1n = {
+}), defaultProps$1l = {
   scrollHideDelay: 1e3,
   type: "hover"
 }, ScrollAreaRoot = reactExports.forwardRef((_props, ref) => {
-  const props2 = useProps("ScrollAreaRoot", defaultProps$1n, _props), { type, scrollHideDelay, scrollbars, ...others } = props2, [scrollArea, setScrollArea] = reactExports.useState(null), [viewport, setViewport] = reactExports.useState(null), [content2, setContent] = reactExports.useState(null), [scrollbarX, setScrollbarX] = reactExports.useState(null), [scrollbarY, setScrollbarY] = reactExports.useState(null), [cornerWidth, setCornerWidth] = reactExports.useState(0), [cornerHeight, setCornerHeight] = reactExports.useState(0), [scrollbarXEnabled, setScrollbarXEnabled] = reactExports.useState(!1), [scrollbarYEnabled, setScrollbarYEnabled] = reactExports.useState(!1), rootRef = useMergedRef(ref, (node) => setScrollArea(node));
+  const props2 = useProps("ScrollAreaRoot", defaultProps$1l, _props), { type, scrollHideDelay, scrollbars, ...others } = props2, [scrollArea, setScrollArea] = reactExports.useState(null), [viewport, setViewport] = reactExports.useState(null), [content2, setContent] = reactExports.useState(null), [scrollbarX, setScrollbarX] = reactExports.useState(null), [scrollbarY, setScrollbarY] = reactExports.useState(null), [cornerWidth, setCornerWidth] = reactExports.useState(0), [cornerHeight, setCornerHeight] = reactExports.useState(0), [scrollbarXEnabled, setScrollbarXEnabled] = reactExports.useState(!1), [scrollbarYEnabled, setScrollbarYEnabled] = reactExports.useState(!1), rootRef = useMergedRef(ref, (node) => setScrollArea(node));
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScrollAreaProvider,
     {
@@ -11403,17 +11445,17 @@ const Thumb$1 = reactExports.forwardRef((props2, forwardedRef) => {
   }
 );
 ScrollAreaViewport.displayName = "@mantine/core/ScrollAreaViewport";
-var __default__$C = { root: "m_d57069b5", viewport: "m_c0783ff9", viewportInner: "m_f8f631dd", scrollbar: "m_c44ba933", thumb: "m_d8b5e363", corner: "m_21657268" };
-const classes$A = __default__$C, defaultProps$1m = {
+var __default__$A = { root: "m_d57069b5", viewport: "m_c0783ff9", viewportInner: "m_f8f631dd", scrollbar: "m_c44ba933", thumb: "m_d8b5e363", corner: "m_21657268" };
+const classes$y = __default__$A, defaultProps$1k = {
   scrollHideDelay: 1e3,
   type: "hover",
   scrollbars: "xy"
-}, varsResolver$C = (_, { scrollbarSize }) => ({
+}, varsResolver$B = (_, { scrollbarSize }) => ({
   root: {
     "--scrollarea-scrollbar-size": rem(scrollbarSize)
   }
 }), ScrollArea = factory((_props, ref) => {
-  const props2 = useProps("ScrollArea", defaultProps$1m, _props), {
+  const props2 = useProps("ScrollArea", defaultProps$1k, _props), {
     classNames,
     className,
     style: style2,
@@ -11433,14 +11475,14 @@ const classes$A = __default__$C, defaultProps$1m = {
   } = props2, [scrollbarHovered, setScrollbarHovered] = reactExports.useState(!1), getStyles2 = useStyles({
     name: "ScrollArea",
     props: props2,
-    classes: classes$A,
+    classes: classes$y,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$C
+    varsResolver: varsResolver$B
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     ScrollAreaRoot,
@@ -11522,7 +11564,7 @@ const ScrollAreaAutosize = factory((props2, ref) => {
     style: style2,
     vars,
     ...others
-  } = useProps("ScrollAreaAutosize", defaultProps$1m, props2);
+  } = useProps("ScrollAreaAutosize", defaultProps$1k, props2);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...others, ref, style: [{ display: "flex", overflow: "auto" }, style2], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { style: { display: "flex", flexDirection: "column", flex: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScrollArea,
     {
@@ -11544,16 +11586,16 @@ const ScrollAreaAutosize = factory((props2, ref) => {
     }
   ) }) });
 });
-ScrollArea.classes = classes$A;
+ScrollArea.classes = classes$y;
 ScrollAreaAutosize.displayName = "@mantine/core/ScrollAreaAutosize";
-ScrollAreaAutosize.classes = classes$A;
+ScrollAreaAutosize.classes = classes$y;
 ScrollArea.Autosize = ScrollAreaAutosize;
-var __default__$B = { root: "m_87cf2631" };
-const classes$z = __default__$B, defaultProps$1l = {
+var __default__$z = { root: "m_87cf2631" };
+const classes$x = __default__$z, defaultProps$1j = {
   __staticSelector: "UnstyledButton"
 }, UnstyledButton = polymorphicFactory(
   (_props, ref) => {
-    const props2 = useProps("UnstyledButton", defaultProps$1l, _props), {
+    const props2 = useProps("UnstyledButton", defaultProps$1j, _props), {
       className,
       component = "button",
       __staticSelector,
@@ -11565,7 +11607,7 @@ const classes$z = __default__$B, defaultProps$1l = {
     } = props2, getStyles2 = useStyles({
       name: __staticSelector,
       props: props2,
-      classes: classes$z,
+      classes: classes$x,
       className,
       style: style2,
       classNames,
@@ -11584,13 +11626,13 @@ const classes$z = __default__$B, defaultProps$1l = {
     );
   }
 );
-UnstyledButton.classes = classes$z;
+UnstyledButton.classes = classes$x;
 UnstyledButton.displayName = "@mantine/core/UnstyledButton";
-var __default__$A = { root: "m_515a97f8" };
-const classes$y = __default__$A, defaultProps$1k = {}, VisuallyHidden = factory((_props, ref) => {
-  const props2 = useProps("VisuallyHidden", defaultProps$1k, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props2, getStyles2 = useStyles({
+var __default__$y = { root: "m_515a97f8" };
+const classes$w = __default__$y, defaultProps$1i = {}, VisuallyHidden = factory((_props, ref) => {
+  const props2 = useProps("VisuallyHidden", defaultProps$1i, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props2, getStyles2 = useStyles({
     name: "VisuallyHidden",
-    classes: classes$y,
+    classes: classes$w,
     props: props2,
     className,
     style: style2,
@@ -11600,16 +11642,16 @@ const classes$y = __default__$A, defaultProps$1k = {}, VisuallyHidden = factory(
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", ref, ...getStyles2("root"), ...others });
 });
-VisuallyHidden.classes = classes$y;
+VisuallyHidden.classes = classes$w;
 VisuallyHidden.displayName = "@mantine/core/VisuallyHidden";
-var __default__$z = { root: "m_1b7284a3" };
-const classes$x = __default__$z, defaultProps$1j = {}, varsResolver$B = (_, { radius, shadow }) => ({
+var __default__$x = { root: "m_1b7284a3" };
+const classes$v = __default__$x, defaultProps$1h = {}, varsResolver$A = (_, { radius, shadow }) => ({
   root: {
     "--paper-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--paper-shadow": getShadow(shadow)
   }
 }), Paper = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Paper", defaultProps$1j, _props), {
+  const props2 = useProps("Paper", defaultProps$1h, _props), {
     classNames,
     className,
     style: style2,
@@ -11625,14 +11667,14 @@ const classes$x = __default__$z, defaultProps$1j = {}, varsResolver$B = (_, { ra
   } = props2, getStyles2 = useStyles({
     name: "Paper",
     props: props2,
-    classes: classes$x,
+    classes: classes$v,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$B
+    varsResolver: varsResolver$A
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -11645,7 +11687,7 @@ const classes$x = __default__$z, defaultProps$1j = {}, varsResolver$B = (_, { ra
     }
   );
 });
-Paper.classes = classes$x;
+Paper.classes = classes$v;
 Paper.displayName = "@mantine/core/Paper";
 function getNodeName(node) {
   return isNode$1(node) ? (node.nodeName || "").toLowerCase() : "#document";
@@ -11732,8 +11774,8 @@ function getNearestOverflowAncestor(node) {
 function getOverflowAncestors(node, list, traverseIframes) {
   var _node$ownerDocument2;
   list === void 0 && (list = []), traverseIframes === void 0 && (traverseIframes = !0);
-  const scrollableAncestor = getNearestOverflowAncestor(node), isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body), win = getWindow(scrollableAncestor);
-  return isBody ? list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []) : list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  const scrollableAncestor = getNearestOverflowAncestor(node), isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body), win2 = getWindow(scrollableAncestor);
+  return isBody ? list.concat(win2, win2.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win2.frameElement && traverseIframes ? getOverflowAncestors(win2.frameElement) : []) : list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function activeElement(doc) {
   let activeElement2 = doc.activeElement;
@@ -12477,10 +12519,10 @@ function getScale(element2) {
 }
 const noOffsets = /* @__PURE__ */ createCoords(0);
 function getVisualOffsets(element2) {
-  const win = getWindow(element2);
-  return !isWebKit() || !win.visualViewport ? noOffsets : {
-    x: win.visualViewport.offsetLeft,
-    y: win.visualViewport.offsetTop
+  const win2 = getWindow(element2);
+  return !isWebKit() || !win2.visualViewport ? noOffsets : {
+    x: win2.visualViewport.offsetLeft,
+    y: win2.visualViewport.offsetTop
   };
 }
 function shouldAddVisualOffsets(element2, isFixed, floatingOffsetParent) {
@@ -12494,8 +12536,8 @@ function getBoundingClientRect(element2, includeScale, isFixedStrategy, offsetPa
   const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
   let x2 = (clientRect.left + visualOffsets.x) / scale2.x, y2 = (clientRect.top + visualOffsets.y) / scale2.y, width = clientRect.width / scale2.x, height = clientRect.height / scale2.y;
   if (domElement) {
-    const win = getWindow(domElement), offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-    let currentWin = win, currentIFrame = currentWin.frameElement;
+    const win2 = getWindow(domElement), offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win2, currentIFrame = currentWin.frameElement;
     for (; currentIFrame && offsetParent && offsetWin !== currentWin; ) {
       const iframeScale = getScale(currentIFrame), iframeRect = currentIFrame.getBoundingClientRect(), css = getComputedStyle$2(currentIFrame), left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x, top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x2 *= iframeScale.x, y2 *= iframeScale.y, width *= iframeScale.x, height *= iframeScale.y, x2 += left, y2 += top, currentWin = getWindow(currentIFrame), currentIFrame = currentWin.frameElement;
@@ -12562,7 +12604,7 @@ function getDocumentRect(element2) {
   };
 }
 function getViewportRect(element2, strategy) {
-  const win = getWindow(element2), html = getDocumentElement(element2), visualViewport = win.visualViewport;
+  const win2 = getWindow(element2), html = getDocumentElement(element2), visualViewport = win2.visualViewport;
   let width = html.clientWidth, height = html.clientHeight, x2 = 0, y2 = 0;
   if (visualViewport) {
     width = visualViewport.width, height = visualViewport.height;
@@ -13513,15 +13555,15 @@ function useFocus(context, props2) {
   return reactExports.useEffect(() => {
     if (!enabled)
       return;
-    const win = getWindow(domReference);
+    const win2 = getWindow(domReference);
     function onBlur() {
       !open && isHTMLElement(domReference) && domReference === activeElement(getDocument(domReference)) && (blockFocusRef.current = !0);
     }
     function onKeyDown() {
       keyboardModalityRef.current = !0;
     }
-    return win.addEventListener("blur", onBlur), win.addEventListener("keydown", onKeyDown, !0), () => {
-      win.removeEventListener("blur", onBlur), win.removeEventListener("keydown", onKeyDown, !0);
+    return win2.addEventListener("blur", onBlur), win2.addEventListener("keydown", onKeyDown, !0), () => {
+      win2.removeEventListener("blur", onBlur), win2.removeEventListener("keydown", onKeyDown, !0);
     };
   }, [domReference, open, enabled]), reactExports.useEffect(() => {
     if (!enabled)
@@ -13823,8 +13865,8 @@ function createPortalNode(props2) {
   const node = document.createElement("div");
   return node.setAttribute("data-portal", "true"), typeof props2.className == "string" && node.classList.add(...props2.className.split(" ").filter(Boolean)), typeof props2.style == "object" && Object.assign(node.style, props2.style), typeof props2.id == "string" && node.setAttribute("id", props2.id), node;
 }
-const defaultProps$1i = {}, Portal = reactExports.forwardRef((props2, ref) => {
-  const { children: children2, target, ...others } = useProps("Portal", defaultProps$1i, props2), [mounted, setMounted] = reactExports.useState(!1), nodeRef = reactExports.useRef(null);
+const defaultProps$1g = {}, Portal = reactExports.forwardRef((props2, ref) => {
+  const { children: children2, target, ...others } = useProps("Portal", defaultProps$1g, props2), [mounted, setMounted] = reactExports.useState(!1), nodeRef = reactExports.useRef(null);
   return useIsomorphicEffect(() => (setMounted(!0), nodeRef.current = target ? typeof target == "string" ? document.querySelector(target) : target : createPortalNode(others), assignRef(ref, nodeRef.current), !target && nodeRef.current && document.body.appendChild(nodeRef.current), () => {
     !target && nodeRef.current && document.body.removeChild(nodeRef.current);
   }), [target]), !mounted || !nodeRef.current ? null : reactDomExports.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 }), nodeRef.current);
@@ -14050,9 +14092,9 @@ function Transition$1({
   ) });
 }
 Transition$1.displayName = "@mantine/core/Transition";
-var __default__$y = { dropdown: "m_38a85659", arrow: "m_a31dc6c1" };
-const classes$w = __default__$y, defaultProps$1h = {}, PopoverDropdown = factory((_props, ref) => {
-  const props2 = useProps("PopoverDropdown", defaultProps$1h, _props), {
+var __default__$w = { dropdown: "m_38a85659", arrow: "m_a31dc6c1" };
+const classes$u = __default__$w, defaultProps$1f = {}, PopoverDropdown = factory((_props, ref) => {
+  const props2 = useProps("PopoverDropdown", defaultProps$1f, _props), {
     className,
     style: style2,
     vars,
@@ -14136,15 +14178,15 @@ const classes$w = __default__$y, defaultProps$1h = {}, PopoverDropdown = factory
     }
   ) });
 });
-PopoverDropdown.classes = classes$w;
+PopoverDropdown.classes = classes$u;
 PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
-const defaultProps$1g = {
+const defaultProps$1e = {
   refProp: "ref",
   popupType: "dialog"
 }, PopoverTarget = factory((props2, ref) => {
   const { children: children2, refProp, popupType, ...others } = useProps(
     "PopoverTarget",
-    defaultProps$1g,
+    defaultProps$1e,
     props2
   );
   if (!isElement$1(children2))
@@ -14256,7 +14298,7 @@ function usePopover(options) {
     onToggle
   };
 }
-const defaultProps$1f = {
+const defaultProps$1d = {
   position: "bottom",
   offset: 8,
   positionDependencies: [],
@@ -14276,14 +14318,14 @@ const defaultProps$1f = {
   zIndex: getDefaultZIndex("popover"),
   __staticSelector: "Popover",
   width: "max-content"
-}, varsResolver$A = (_, { radius, shadow }) => ({
+}, varsResolver$z = (_, { radius, shadow }) => ({
   dropdown: {
     "--popover-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--popover-shadow": getShadow(shadow)
   }
 });
 function Popover(_props) {
-  const props2 = useProps("Popover", defaultProps$1f, _props), {
+  const props2 = useProps("Popover", defaultProps$1d, _props), {
     children: children2,
     position,
     offset: offset2,
@@ -14327,13 +14369,13 @@ function Popover(_props) {
   } = props2, getStyles2 = useStyles({
     name: __staticSelector,
     props: props2,
-    classes: classes$w,
+    classes: classes$u,
     classNames,
     styles,
     unstyled,
     rootSelector: "dropdown",
     vars,
-    varsResolver: varsResolver$A
+    varsResolver: varsResolver$z
   }), arrowRef = reactExports.useRef(null), [targetNode, setTargetNode] = reactExports.useState(null), [dropdownNode, setDropdownNode] = reactExports.useState(null), { dir } = useDirection(), uid = useId$2(id2), popover = usePopover({
     middlewares,
     width,
@@ -14417,29 +14459,29 @@ Popover.Target = PopoverTarget;
 Popover.Dropdown = PopoverDropdown;
 Popover.displayName = "@mantine/core/Popover";
 Popover.extend = (input) => input;
-var __default__$x = { root: "m_5ae2e3c", barsLoader: "m_7a2bd4cd", bar: "m_870bb79", "bars-loader-animation": "m_5d2b3b9d", dotsLoader: "m_4e3f22d7", dot: "m_870c4af", "loader-dots-animation": "m_aac34a1", ovalLoader: "m_b34414df", "oval-loader-animation": "m_f8e89c4b" };
-const classes$v = __default__$x, Bars = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { component: "span", className: clsx(classes$v.barsLoader, className), ...others, ref, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$v.bar }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$v.bar }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$v.bar })
-] })), Dots = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { component: "span", className: clsx(classes$v.dotsLoader, className), ...others, ref, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$v.dot }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$v.dot }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$v.dot })
-] })), Oval = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", className: clsx(classes$v.ovalLoader, className), ...others, ref })), defaultLoaders = {
+var __default__$v = { root: "m_5ae2e3c", barsLoader: "m_7a2bd4cd", bar: "m_870bb79", "bars-loader-animation": "m_5d2b3b9d", dotsLoader: "m_4e3f22d7", dot: "m_870c4af", "loader-dots-animation": "m_aac34a1", ovalLoader: "m_b34414df", "oval-loader-animation": "m_f8e89c4b" };
+const classes$t = __default__$v, Bars = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { component: "span", className: clsx(classes$t.barsLoader, className), ...others, ref, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.bar }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.bar }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.bar })
+] })), Dots = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { component: "span", className: clsx(classes$t.dotsLoader, className), ...others, ref, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.dot }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.dot }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.dot })
+] })), Oval = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", className: clsx(classes$t.ovalLoader, className), ...others, ref })), defaultLoaders = {
   bars: Bars,
   oval: Oval,
   dots: Dots
-}, defaultProps$1e = {
+}, defaultProps$1c = {
   loaders: defaultLoaders,
   type: "oval"
-}, varsResolver$z = (theme2, { size: size2, color: color2 }) => ({
+}, varsResolver$y = (theme2, { size: size2, color: color2 }) => ({
   root: {
     "--loader-size": getSize(size2, "loader-size"),
     "--loader-color": color2 ? getThemeColor(color2, theme2) : void 0
   }
 }), Loader = factory((_props, ref) => {
-  const props2 = useProps("Loader", defaultProps$1e, _props), {
+  const props2 = useProps("Loader", defaultProps$1c, _props), {
     size: size2,
     color: color2,
     type,
@@ -14456,14 +14498,14 @@ const classes$v = __default__$x, Bars = reactExports.forwardRef(({ className, ..
   } = props2, getStyles2 = useStyles({
     name: "Loader",
     props: props2,
-    classes: classes$v,
+    classes: classes$t,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$z
+    varsResolver: varsResolver$y
   });
   return children2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...getStyles2("root"), ref, ...others, children: children2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -14478,15 +14520,15 @@ const classes$v = __default__$x, Bars = reactExports.forwardRef(({ className, ..
   );
 });
 Loader.defaultLoaders = defaultLoaders;
-Loader.classes = classes$v;
+Loader.classes = classes$t;
 Loader.displayName = "@mantine/core/Loader";
-var __default__$w = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21" };
-const classes$u = __default__$w, defaultProps$1d = {
+var __default__$u = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21" };
+const classes$s = __default__$u, defaultProps$1b = {
   orientation: "horizontal"
-}, varsResolver$y = (_, { borderWidth }) => ({
+}, varsResolver$x = (_, { borderWidth }) => ({
   group: { "--ai-border-width": rem(borderWidth) }
 }), ActionIconGroup = factory((_props, ref) => {
-  const props2 = useProps("ActionIconGroup", defaultProps$1d, _props), {
+  const props2 = useProps("ActionIconGroup", defaultProps$1b, _props), {
     className,
     style: style2,
     classNames,
@@ -14498,17 +14540,17 @@ const classes$u = __default__$w, defaultProps$1d = {
     variant,
     mod,
     ...others
-  } = useProps("ActionIconGroup", defaultProps$1d, _props), getStyles2 = useStyles({
+  } = useProps("ActionIconGroup", defaultProps$1b, _props), getStyles2 = useStyles({
     name: "ActionIconGroup",
     props: props2,
-    classes: classes$u,
+    classes: classes$s,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$y,
+    varsResolver: varsResolver$x,
     rootSelector: "group"
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -14523,9 +14565,9 @@ const classes$u = __default__$w, defaultProps$1d = {
     }
   );
 });
-ActionIconGroup.classes = classes$u;
+ActionIconGroup.classes = classes$s;
 ActionIconGroup.displayName = "@mantine/core/ActionIconGroup";
-const defaultProps$1c = {}, varsResolver$x = (theme2, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
+const defaultProps$1a = {}, varsResolver$w = (theme2, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -14545,7 +14587,7 @@ const defaultProps$1c = {}, varsResolver$x = (theme2, { size: size2, radius, var
     }
   };
 }, ActionIcon = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("ActionIcon", defaultProps$1c, _props), {
+  const props2 = useProps("ActionIcon", defaultProps$1a, _props), {
     className,
     unstyled,
     variant,
@@ -14571,12 +14613,12 @@ const defaultProps$1c = {}, varsResolver$x = (theme2, { size: size2, radius, var
     props: props2,
     className,
     style: style2,
-    classes: classes$u,
+    classes: classes$s,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$x
+    varsResolver: varsResolver$w
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     UnstyledButton,
@@ -14596,7 +14638,7 @@ const defaultProps$1c = {}, varsResolver$x = (theme2, { size: size2, radius, var
     }
   );
 });
-ActionIcon.classes = classes$u;
+ActionIcon.classes = classes$s;
 ActionIcon.displayName = "@mantine/core/ActionIcon";
 ActionIcon.Group = ActionIconGroup;
 const CloseIcon = reactExports.forwardRef(
@@ -14622,17 +14664,17 @@ const CloseIcon = reactExports.forwardRef(
   )
 );
 CloseIcon.displayName = "@mantine/core/CloseIcon";
-var __default__$v = { root: "m_86a44da5", "root--subtle": "m_220c80f2" };
-const classes$t = __default__$v, defaultProps$1b = {
+var __default__$t = { root: "m_86a44da5", "root--subtle": "m_220c80f2" };
+const classes$r = __default__$t, defaultProps$19 = {
   variant: "subtle"
-}, varsResolver$w = (_, { size: size2, radius, iconSize }) => ({
+}, varsResolver$v = (_, { size: size2, radius, iconSize }) => ({
   root: {
     "--cb-size": getSize(size2, "cb-size"),
     "--cb-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--cb-icon-size": rem(iconSize)
   }
 }), CloseButton = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("CloseButton", defaultProps$1b, _props), {
+  const props2 = useProps("CloseButton", defaultProps$19, _props), {
     iconSize,
     children: children2,
     vars,
@@ -14653,12 +14695,12 @@ const classes$t = __default__$v, defaultProps$1b = {
     props: props2,
     className,
     style: style2,
-    classes: classes$t,
+    classes: classes$r,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$w
+    varsResolver: varsResolver$v
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     UnstyledButton,
@@ -14677,19 +14719,19 @@ const classes$t = __default__$v, defaultProps$1b = {
     }
   );
 });
-CloseButton.classes = classes$t;
+CloseButton.classes = classes$r;
 CloseButton.displayName = "@mantine/core/CloseButton";
 function filterFalsyChildren(children2) {
   return reactExports.Children.toArray(children2).filter(Boolean);
 }
-var __default__$u = { root: "m_4081bf90" };
-const classes$s = __default__$u, defaultProps$1a = {
+var __default__$s = { root: "m_4081bf90" };
+const classes$q = __default__$s, defaultProps$18 = {
   preventGrowOverflow: !0,
   gap: "md",
   align: "center",
   justify: "flex-start",
   wrap: "wrap"
-}, varsResolver$v = (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({
+}, varsResolver$u = (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({
   root: {
     "--group-child-width": grow && preventGrowOverflow ? childWidth : void 0,
     "--group-gap": getSpacing(gap),
@@ -14698,7 +14740,7 @@ const classes$s = __default__$u, defaultProps$1a = {
     "--group-wrap": wrap
   }
 }), Group = factory((_props, ref) => {
-  const props2 = useProps("Group", defaultProps$1a, _props), {
+  const props2 = useProps("Group", defaultProps$18, _props), {
     classNames,
     className,
     style: style2,
@@ -14722,12 +14764,12 @@ const classes$s = __default__$u, defaultProps$1a = {
     stylesCtx,
     className,
     style: style2,
-    classes: classes$s,
+    classes: classes$q,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$v
+    varsResolver: varsResolver$u
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -14742,12 +14784,12 @@ const classes$s = __default__$u, defaultProps$1a = {
     }
   );
 });
-Group.classes = classes$s;
+Group.classes = classes$q;
 Group.displayName = "@mantine/core/Group";
-var __default__$t = { root: "m_9814e45f" };
-const classes$r = __default__$t, defaultProps$19 = {
+var __default__$r = { root: "m_9814e45f" };
+const classes$p = __default__$r, defaultProps$17 = {
   zIndex: getDefaultZIndex("modal")
-}, varsResolver$u = (_, { gradient, color: color2, backgroundOpacity, blur, radius, zIndex }) => ({
+}, varsResolver$t = (_, { gradient, color: color2, backgroundOpacity, blur, radius, zIndex }) => ({
   root: {
     "--overlay-bg": gradient || (color2 !== void 0 || backgroundOpacity !== void 0) && rgba$2(color2 || "#000", backgroundOpacity ?? 0.6) || void 0,
     "--overlay-filter": blur ? `blur(${rem(blur)})` : void 0,
@@ -14755,7 +14797,7 @@ const classes$r = __default__$t, defaultProps$19 = {
     "--overlay-z-index": zIndex?.toString()
   }
 }), Overlay = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Overlay", defaultProps$19, _props), {
+  const props2 = useProps("Overlay", defaultProps$17, _props), {
     classNames,
     className,
     style: style2,
@@ -14776,18 +14818,18 @@ const classes$r = __default__$t, defaultProps$19 = {
   } = props2, getStyles2 = useStyles({
     name: "Overlay",
     props: props2,
-    classes: classes$r,
+    classes: classes$p,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$u
+    varsResolver: varsResolver$t
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ref, ...getStyles2("root"), mod: [{ center, fixed }, mod], ...others, children: children2 });
 });
-Overlay.classes = classes$r;
+Overlay.classes = classes$p;
 Overlay.displayName = "@mantine/core/Overlay";
 const [ModalBaseProvider, useModalBaseContext] = createSafeContext(
   "ModalBase component was not found in tree"
@@ -14886,7 +14928,7 @@ function useModalBodyId() {
   const ctx = useModalBaseContext();
   return reactExports.useEffect(() => (ctx.setBodyMounted(!0), () => ctx.setBodyMounted(!1)), []), ctx.getBodyId();
 }
-var __default__$s = { title: "m_615af6c9", header: "m_b5489c3c", inner: "m_60c222c7", content: "m_fd1ab0aa", close: "m_606cb269", body: "m_5df29311" };
+var __default__$q = { title: "m_615af6c9", header: "m_b5489c3c", inner: "m_60c222c7", content: "m_fd1ab0aa", close: "m_606cb269", body: "m_5df29311" };
 const ModalBaseBody = reactExports.forwardRef(
   ({ className, ...others }, ref) => {
     const bodyId = useModalBodyId(), ctx = useModalBaseContext();
@@ -14896,7 +14938,7 @@ const ModalBaseBody = reactExports.forwardRef(
         ref,
         ...others,
         id: bodyId,
-        className: clsx({ [__default__$s.body]: !ctx.unstyled }, className)
+        className: clsx({ [__default__$q.body]: !ctx.unstyled }, className)
       }
     );
   }
@@ -14913,7 +14955,7 @@ const ModalBaseCloseButton = reactExports.forwardRef(
         onClick: (event) => {
           ctx.onClose(), onClick?.(event);
         },
-        className: clsx({ [__default__$s.close]: !ctx.unstyled }, className),
+        className: clsx({ [__default__$q.close]: !ctx.unstyled }, className),
         unstyled: ctx.unstyled
       }
     );
@@ -14934,7 +14976,7 @@ const ModalBaseContent = reactExports.forwardRef(
           "div",
           {
             ...innerProps,
-            className: clsx({ [__default__$s.inner]: !ctx.unstyled }, innerProps.className),
+            className: clsx({ [__default__$q.inner]: !ctx.unstyled }, innerProps.className),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(FocusTrap, { active: ctx.opened && ctx.trapFocus, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               Paper,
               {
@@ -14947,7 +14989,7 @@ const ModalBaseContent = reactExports.forwardRef(
                 "aria-labelledby": ctx.titleMounted ? ctx.getTitleId() : void 0,
                 ref,
                 style: [style2, transitionStyles],
-                className: clsx({ [__default__$s.content]: !ctx.unstyled }, className),
+                className: clsx({ [__default__$q.content]: !ctx.unstyled }, className),
                 unstyled: ctx.unstyled,
                 children: others.children
               }
@@ -14965,7 +15007,7 @@ const ModalBaseContent = reactExports.forwardRef(
       {
         component: "header",
         ref,
-        className: clsx({ [__default__$s.header]: !ctx.unstyled }, className),
+        className: clsx({ [__default__$q.header]: !ctx.unstyled }, className),
         ...others
       }
     );
@@ -15013,7 +15055,7 @@ const ModalBaseTitle = reactExports.forwardRef(
       {
         component: "h2",
         ref,
-        className: clsx({ [__default__$s.title]: !ctx.unstyled }, className),
+        className: clsx({ [__default__$q.title]: !ctx.unstyled }, className),
         ...others,
         id: id2
       }
@@ -15032,13 +15074,13 @@ const [InputWrapperProvider, useInputWrapperContext] = createOptionalContext({
   inputId: void 0,
   labelId: void 0
 });
-var __default__$r = { wrapper: "m_6c018570", input: "m_8fb7ebe7", section: "m_82577fc2", placeholder: "m_88bacfd0", root: "m_46b77525", label: "m_8fdc1311", required: "m_78a94662", error: "m_8f816625", description: "m_fe47ce59" };
-const classes$q = __default__$r, defaultProps$18 = {}, varsResolver$t = (_, { size: size2 }) => ({
+var __default__$p = { wrapper: "m_6c018570", input: "m_8fb7ebe7", section: "m_82577fc2", placeholder: "m_88bacfd0", root: "m_46b77525", label: "m_8fdc1311", required: "m_78a94662", error: "m_8f816625", description: "m_fe47ce59" };
+const classes$o = __default__$p, defaultProps$16 = {}, varsResolver$s = (_, { size: size2 }) => ({
   description: {
     "--input-description-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputDescription = factory((_props, ref) => {
-  const props2 = useProps("InputDescription", defaultProps$18, _props), {
+  const props2 = useProps("InputDescription", defaultProps$16, _props), {
     classNames,
     className,
     style: style2,
@@ -15050,10 +15092,10 @@ const classes$q = __default__$r, defaultProps$18 = {}, varsResolver$t = (_, { si
     __inheritStyles = !0,
     variant,
     ...others
-  } = useProps("InputDescription", defaultProps$18, props2), ctx = useInputWrapperContext(), _getStyles = useStyles({
+  } = useProps("InputDescription", defaultProps$16, props2), ctx = useInputWrapperContext(), _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props: props2,
-    classes: classes$q,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15061,7 +15103,7 @@ const classes$q = __default__$r, defaultProps$18 = {}, varsResolver$t = (_, { si
     unstyled,
     rootSelector: "description",
     vars,
-    varsResolver: varsResolver$t
+    varsResolver: varsResolver$s
   }), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -15075,14 +15117,14 @@ const classes$q = __default__$r, defaultProps$18 = {}, varsResolver$t = (_, { si
     }
   );
 });
-InputDescription.classes = classes$q;
+InputDescription.classes = classes$o;
 InputDescription.displayName = "@mantine/core/InputDescription";
-const defaultProps$17 = {}, varsResolver$s = (_, { size: size2 }) => ({
+const defaultProps$15 = {}, varsResolver$r = (_, { size: size2 }) => ({
   error: {
     "--input-error-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputError = factory((_props, ref) => {
-  const props2 = useProps("InputError", defaultProps$17, _props), {
+  const props2 = useProps("InputError", defaultProps$15, _props), {
     classNames,
     className,
     style: style2,
@@ -15097,7 +15139,7 @@ const defaultProps$17 = {}, varsResolver$s = (_, { size: size2 }) => ({
   } = props2, _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props: props2,
-    classes: classes$q,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15105,7 +15147,7 @@ const defaultProps$17 = {}, varsResolver$s = (_, { size: size2 }) => ({
     unstyled,
     rootSelector: "error",
     vars,
-    varsResolver: varsResolver$s
+    varsResolver: varsResolver$r
   }), ctx = useInputWrapperContext(), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -15119,17 +15161,17 @@ const defaultProps$17 = {}, varsResolver$s = (_, { size: size2 }) => ({
     }
   );
 });
-InputError.classes = classes$q;
+InputError.classes = classes$o;
 InputError.displayName = "@mantine/core/InputError";
-const defaultProps$16 = {
+const defaultProps$14 = {
   labelElement: "label"
-}, varsResolver$r = (_, { size: size2 }) => ({
+}, varsResolver$q = (_, { size: size2 }) => ({
   label: {
     "--input-label-size": getFontSize(size2),
     "--input-asterisk-color": void 0
   }
 }), InputLabel = factory((_props, ref) => {
-  const props2 = useProps("InputLabel", defaultProps$16, _props), {
+  const props2 = useProps("InputLabel", defaultProps$14, _props), {
     classNames,
     className,
     style: style2,
@@ -15146,10 +15188,10 @@ const defaultProps$16 = {
     variant,
     mod,
     ...others
-  } = useProps("InputLabel", defaultProps$16, props2), _getStyles = useStyles({
+  } = useProps("InputLabel", defaultProps$14, props2), _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props: props2,
-    classes: classes$q,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15157,7 +15199,7 @@ const defaultProps$16 = {
     unstyled,
     rootSelector: "label",
     vars,
-    varsResolver: varsResolver$r
+    varsResolver: varsResolver$q
   }), ctx = useInputWrapperContext(), getStyles2 = ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Box,
@@ -15180,10 +15222,10 @@ const defaultProps$16 = {
     }
   );
 });
-InputLabel.classes = classes$q;
+InputLabel.classes = classes$o;
 InputLabel.displayName = "@mantine/core/InputLabel";
-const defaultProps$15 = {}, InputPlaceholder = factory((_props, ref) => {
-  const props2 = useProps("InputPlaceholder", defaultProps$15, _props), {
+const defaultProps$13 = {}, InputPlaceholder = factory((_props, ref) => {
+  const props2 = useProps("InputPlaceholder", defaultProps$13, _props), {
     classNames,
     className,
     style: style2,
@@ -15195,10 +15237,10 @@ const defaultProps$15 = {}, InputPlaceholder = factory((_props, ref) => {
     error,
     mod,
     ...others
-  } = useProps("InputPlaceholder", defaultProps$15, props2), getStyles2 = useStyles({
+  } = useProps("InputPlaceholder", defaultProps$13, props2), getStyles2 = useStyles({
     name: ["InputPlaceholder", __staticSelector],
     props: props2,
-    classes: classes$q,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15218,17 +15260,17 @@ const defaultProps$15 = {}, InputPlaceholder = factory((_props, ref) => {
     }
   );
 });
-InputPlaceholder.classes = classes$q;
+InputPlaceholder.classes = classes$o;
 InputPlaceholder.displayName = "@mantine/core/InputPlaceholder";
 function getInputOffsets(inputWrapperOrder, { hasDescription, hasError }) {
   const inputIndex = inputWrapperOrder.findIndex((part) => part === "input"), aboveInput = inputWrapperOrder.slice(0, inputIndex), belowInput = inputWrapperOrder.slice(inputIndex + 1), offsetTop = hasDescription && aboveInput.includes("description") || hasError && aboveInput.includes("error");
   return { offsetBottom: hasDescription && belowInput.includes("description") || hasError && belowInput.includes("error"), offsetTop };
 }
-const defaultProps$14 = {
+const defaultProps$12 = {
   labelElement: "label",
   inputContainer: (children2) => children2,
   inputWrapperOrder: ["label", "description", "input", "error"]
-}, varsResolver$q = (_, { size: size2 }) => ({
+}, varsResolver$p = (_, { size: size2 }) => ({
   label: {
     "--input-label-size": getFontSize(size2),
     "--input-asterisk-color": void 0
@@ -15240,7 +15282,7 @@ const defaultProps$14 = {
     "--input-description-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputWrapper = factory((_props, ref) => {
-  const props2 = useProps("InputWrapper", defaultProps$14, _props), {
+  const props2 = useProps("InputWrapper", defaultProps$12, _props), {
     classNames,
     className,
     style: style2,
@@ -15269,14 +15311,14 @@ const defaultProps$14 = {
   } = props2, getStyles2 = useStyles({
     name: ["InputWrapper", __staticSelector],
     props: __stylesApiProps || props2,
-    classes: classes$q,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$q
+    varsResolver: varsResolver$p
   }), sharedProps = {
     size: size2,
     variant,
@@ -15352,15 +15394,15 @@ const defaultProps$14 = {
     }
   );
 });
-InputWrapper.classes = classes$q;
+InputWrapper.classes = classes$o;
 InputWrapper.displayName = "@mantine/core/InputWrapper";
-const defaultProps$13 = {
+const defaultProps$11 = {
   variant: "default",
   leftSectionPointerEvents: "none",
   rightSectionPointerEvents: "none",
   withAria: !0,
   withErrorStyles: !0
-}, varsResolver$p = (_, props2, ctx) => ({
+}, varsResolver$o = (_, props2, ctx) => ({
   wrapper: {
     "--input-margin-top": ctx.offsetTop ? "calc(var(--mantine-spacing-xs) / 2)" : void 0,
     "--input-margin-bottom": ctx.offsetBottom ? "calc(var(--mantine-spacing-xs) / 2)" : void 0,
@@ -15374,7 +15416,7 @@ const defaultProps$13 = {
     "--input-right-section-pointer-events": props2.rightSectionPointerEvents
   }
 }), Input = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Input", defaultProps$13, _props), {
+  const props2 = useProps("Input", defaultProps$11, _props), {
     classNames,
     className,
     style: style2,
@@ -15409,7 +15451,7 @@ const defaultProps$13 = {
   } = props2, { styleProps, rest } = extractStyleProps(others), ctx = useInputWrapperContext(), stylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop }, getStyles2 = useStyles({
     name: ["Input", __staticSelector],
     props: __stylesApiProps || props2,
-    classes: classes$q,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15418,7 +15460,7 @@ const defaultProps$13 = {
     stylesCtx,
     rootSelector: "wrapper",
     vars,
-    varsResolver: varsResolver$p
+    varsResolver: varsResolver$o
   }), ariaAttributes = withAria ? {
     required,
     disabled,
@@ -15488,7 +15530,7 @@ const defaultProps$13 = {
     }
   );
 });
-Input.classes = classes$q;
+Input.classes = classes$o;
 Input.Wrapper = InputWrapper;
 Input.Label = InputLabel;
 Input.Error = InputError;
@@ -15565,11 +15607,11 @@ function useInputProps(component, defaultProps2, _props) {
     }
   };
 }
-const defaultProps$12 = {
+const defaultProps$10 = {
   __staticSelector: "InputBase",
   withAria: !0
 }, InputBase = polymorphicFactory((props2, ref) => {
-  const { inputProps, wrapperProps, ...others } = useInputProps("InputBase", defaultProps$12, props2);
+  const { inputProps, wrapperProps, ...others } = useInputProps("InputBase", defaultProps$10, props2);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Input.Wrapper, { ...wrapperProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { ...inputProps, ...others, ref }) });
 });
 InputBase.classes = { ...Input.classes, ...Input.Wrapper.classes };
@@ -15583,9 +15625,9 @@ const FLEX_STYLE_PROPS_DATA = {
   wrap: { type: "identity", property: "flexWrap" },
   direction: { type: "identity", property: "flexDirection" }
 };
-var __default__$q = { root: "m_8bffd616" };
-const classes$p = __default__$q, defaultProps$11 = {}, Flex = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Flex", defaultProps$11, _props), {
+var __default__$o = { root: "m_8bffd616" };
+const classes$n = __default__$o, defaultProps$$ = {}, Flex = polymorphicFactory((_props, ref) => {
+  const props2 = useProps("Flex", defaultProps$$, _props), {
     classNames,
     className,
     style: style2,
@@ -15602,7 +15644,7 @@ const classes$p = __default__$q, defaultProps$11 = {}, Flex = polymorphicFactory
     ...others
   } = props2, getStyles2 = useStyles({
     name: "Flex",
-    classes: classes$p,
+    classes: classes$n,
     props: props2,
     className,
     style: style2,
@@ -15637,7 +15679,7 @@ const classes$p = __default__$q, defaultProps$11 = {}, Flex = polymorphicFactory
     )
   ] });
 });
-Flex.classes = classes$p;
+Flex.classes = classes$n;
 Flex.displayName = "@mantine/core/Flex";
 function isParent(parentElement, childElement) {
   if (!childElement || !parentElement)
@@ -15703,13 +15745,13 @@ function useFloatingIndicator({
     () => document.documentElement
   ), { initialized, hidden: hidden2 };
 }
-var __default__$p = { root: "m_96b553a6" };
-const classes$o = __default__$p, defaultProps$10 = {}, varsResolver$o = (_theme, { transitionDuration }) => ({
+var __default__$n = { root: "m_96b553a6" };
+const classes$m = __default__$n, defaultProps$_ = {}, varsResolver$n = (_theme, { transitionDuration }) => ({
   root: {
     "--transition-duration": typeof transitionDuration == "number" ? `${transitionDuration}ms` : transitionDuration
   }
 }), FloatingIndicator = factory((_props, ref) => {
-  const props2 = useProps("FloatingIndicator", defaultProps$10, _props), {
+  const props2 = useProps("FloatingIndicator", defaultProps$_, _props), {
     classNames,
     className,
     style: style2,
@@ -15724,7 +15766,7 @@ const classes$o = __default__$p, defaultProps$10 = {}, varsResolver$o = (_theme,
     ...others
   } = props2, getStyles2 = useStyles({
     name: "FloatingIndicator",
-    classes: classes$o,
+    classes: classes$m,
     props: props2,
     className,
     style: style2,
@@ -15732,7 +15774,7 @@ const classes$o = __default__$p, defaultProps$10 = {}, varsResolver$o = (_theme,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$o
+    varsResolver: varsResolver$n
   }), innerRef = reactExports.useRef(null), { initialized, hidden: hidden2 } = useFloatingIndicator({
     target,
     parent,
@@ -15742,9 +15784,9 @@ const classes$o = __default__$p, defaultProps$10 = {}, varsResolver$o = (_theme,
   return !target || !parent ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ref: mergedRef, mod: [{ initialized, hidden: hidden2 }, mod], ...getStyles2("root"), ...others });
 });
 FloatingIndicator.displayName = "@mantine/core/FloatingIndicator";
-FloatingIndicator.classes = classes$o;
-var __default__$o = { root: "m_66836ed3", wrapper: "m_a5d60502", body: "m_667c2793", title: "m_6a03f287", label: "m_698f4f23", icon: "m_667f2a6a", message: "m_7fa78076", closeButton: "m_87f54839" };
-const classes$n = __default__$o, defaultProps$$ = {}, varsResolver$n = (theme2, { radius, color: color2, variant, autoContrast }) => {
+FloatingIndicator.classes = classes$m;
+var __default__$m = { root: "m_66836ed3", wrapper: "m_a5d60502", body: "m_667c2793", title: "m_6a03f287", label: "m_698f4f23", icon: "m_667f2a6a", message: "m_7fa78076", closeButton: "m_87f54839" };
+const classes$l = __default__$m, defaultProps$Z = {}, varsResolver$m = (theme2, { radius, color: color2, variant, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -15760,7 +15802,7 @@ const classes$n = __default__$o, defaultProps$$ = {}, varsResolver$n = (theme2,
     }
   };
 }, Alert = factory((_props, ref) => {
-  const props2 = useProps("Alert", defaultProps$$, _props), {
+  const props2 = useProps("Alert", defaultProps$Z, _props), {
     classNames,
     className,
     style: style2,
@@ -15781,7 +15823,7 @@ const classes$n = __default__$o, defaultProps$$ = {}, varsResolver$n = (theme2,
     ...others
   } = props2, getStyles2 = useStyles({
     name: "Alert",
-    classes: classes$n,
+    classes: classes$l,
     props: props2,
     className,
     style: style2,
@@ -15789,7 +15831,7 @@ const classes$n = __default__$o, defaultProps$$ = {}, varsResolver$n = (theme2,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$n
+    varsResolver: varsResolver$m
   }), rootId = useId$2(id2), titleId = title2 && `${rootId}-title` || void 0, bodyId = `${rootId}-body`;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -15824,19 +15866,19 @@ const classes$n = __default__$o, defaultProps$$ = {}, varsResolver$n = (theme2,
     }
   );
 });
-Alert.classes = classes$n;
+Alert.classes = classes$l;
 Alert.displayName = "@mantine/core/Alert";
-var __default__$n = { root: "m_b6d8b162" };
-const classes$m = __default__$n;
+var __default__$l = { root: "m_b6d8b162" };
+const classes$k = __default__$l;
 function getTextTruncate(truncate) {
   if (truncate === "start")
     return "start";
   if (truncate === "end" || truncate)
     return "end";
 }
-const defaultProps$_ = {
+const defaultProps$Y = {
   inherit: !1
-}, varsResolver$m = (theme2, { variant, lineClamp, gradient, size: size2, color: color2 }) => ({
+}, varsResolver$l = (theme2, { variant, lineClamp, gradient, size: size2, color: color2 }) => ({
   root: {
     "--text-fz": getFontSize(size2),
     "--text-lh": getLineHeight(size2),
@@ -15845,7 +15887,7 @@ const defaultProps$_ = {
     "--text-color": color2 ? getThemeColor(color2, theme2) : void 0
   }
 }), Text = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Text", defaultProps$_, _props), {
+  const props2 = useProps("Text", defaultProps$Y, _props), {
     lineClamp,
     truncate,
     inline: inline2,
@@ -15866,14 +15908,14 @@ const defaultProps$_ = {
   } = props2, getStyles2 = useStyles({
     name: ["Text", __staticSelector],
     props: props2,
-    classes: classes$m,
+    classes: classes$k,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$m
+    varsResolver: varsResolver$l
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
@@ -15896,15 +15938,15 @@ const defaultProps$_ = {
     }
   );
 });
-Text.classes = classes$m;
+Text.classes = classes$k;
 Text.displayName = "@mantine/core/Text";
-var __default__$m = { root: "m_849cf0da" };
-const defaultProps$Z = {
+var __default__$k = { root: "m_849cf0da" };
+const defaultProps$X = {
   underline: "hover"
 }, Anchor = polymorphicFactory((props2, ref) => {
   const { underline, className, unstyled, mod, ...others } = useProps(
     "Anchor",
-    defaultProps$Z,
+    defaultProps$X,
     props2
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15912,7 +15954,7 @@ const defaultProps$Z = {
     {
       component: "a",
       ref,
-      className: clsx({ [__default__$m.root]: !unstyled }, className),
+      className: clsx({ [__default__$k.root]: !unstyled }, className),
       ...others,
       mod: [{ underline }, mod],
       __staticSelector: "Anchor",
@@ -15920,7 +15962,7 @@ const defaultProps$Z = {
     }
   );
 });
-Anchor.classes = __default__$m;
+Anchor.classes = __default__$k;
 Anchor.displayName = "@mantine/core/Anchor";
 function parseItem(item) {
   return typeof item == "string" ? { value: item, label: item } : "value" in item && !("label" in item) ? { value: item.value, label: item.value, disabled: item.disabled } : typeof item == "number" ? { value: item.toString(), label: item.toString() } : "group" in item ? {
@@ -15934,17 +15976,17 @@ function getParsedComboboxData(data) {
 function getOptionsLockup(options) {
   return options.reduce((acc, item) => "group" in item ? { ...acc, ...getOptionsLockup(item.items) } : (acc[item.value] = item, acc), {});
 }
-var __default__$l = { dropdown: "m_88b62a41", options: "m_b2821a6e", option: "m_92253aa5", search: "m_985517d8", empty: "m_2530cd1d", header: "m_858f94bd", footer: "m_82b967cb", group: "m_254f3e4f", groupLabel: "m_2bb2e9e5", chevron: "m_2943220b", optionsDropdownOption: "m_390b5f4", optionsDropdownCheckIcon: "m_8ee53fc2" };
-const classes$l = __default__$l, defaultProps$Y = {
+var __default__$j = { dropdown: "m_88b62a41", options: "m_b2821a6e", option: "m_92253aa5", search: "m_985517d8", empty: "m_2530cd1d", header: "m_858f94bd", footer: "m_82b967cb", group: "m_254f3e4f", groupLabel: "m_2bb2e9e5", chevron: "m_2943220b", optionsDropdownOption: "m_390b5f4", optionsDropdownCheckIcon: "m_8ee53fc2" };
+const classes$j = __default__$j, defaultProps$W = {
   error: null
-}, varsResolver$l = (_, { size: size2 }) => ({
+}, varsResolver$k = (_, { size: size2 }) => ({
   chevron: {
     "--combobox-chevron-size": getSize(size2, "combobox-chevron-size")
   }
 }), ComboboxChevron = factory((_props, ref) => {
-  const props2 = useProps("ComboboxChevron", defaultProps$Y, _props), { size: size2, error, style: style2, className, classNames, styles, unstyled, vars, mod, ...others } = props2, getStyles2 = useStyles({
+  const props2 = useProps("ComboboxChevron", defaultProps$W, _props), { size: size2, error, style: style2, className, classNames, styles, unstyled, vars, mod, ...others } = props2, getStyles2 = useStyles({
     name: "ComboboxChevron",
-    classes: classes$l,
+    classes: classes$j,
     props: props2,
     style: style2,
     className,
@@ -15952,7 +15994,7 @@ const classes$l = __default__$l, defaultProps$Y = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$l,
+    varsResolver: varsResolver$k,
     rootSelector: "chevron"
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15979,7 +16021,7 @@ const classes$l = __default__$l, defaultProps$Y = {
     }
   );
 });
-ComboboxChevron.classes = classes$l;
+ComboboxChevron.classes = classes$j;
 ComboboxChevron.displayName = "@mantine/core/ComboboxChevron";
 const [ComboboxProvider, useComboboxContext] = createSafeContext(
   "Combobox component was not found in tree"
@@ -16003,10 +16045,10 @@ const [ComboboxProvider, useComboboxContext] = createSafeContext(
   )
 );
 ComboboxClearButton.displayName = "@mantine/core/ComboboxClearButton";
-const defaultProps$X = {}, ComboboxDropdown = factory((props2, ref) => {
+const defaultProps$V = {}, ComboboxDropdown = factory((props2, ref) => {
   const { classNames, styles, className, style: style2, hidden: hidden2, ...others } = useProps(
     "ComboboxDropdown",
-    defaultProps$X,
+    defaultProps$V,
     props2
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16020,12 +16062,12 @@ const defaultProps$X = {}, ComboboxDropdown = factory((props2, ref) => {
     }
   );
 });
-ComboboxDropdown.classes = classes$l;
+ComboboxDropdown.classes = classes$j;
 ComboboxDropdown.displayName = "@mantine/core/ComboboxDropdown";
-const defaultProps$W = {
+const defaultProps$U = {
   refProp: "ref"
 }, ComboboxDropdownTarget = factory((props2, ref) => {
-  const { children: children2, refProp } = useProps("ComboboxDropdownTarget", defaultProps$W, props2);
+  const { children: children2, refProp } = useProps("ComboboxDropdownTarget", defaultProps$U, props2);
   if (useComboboxContext(), !isElement$1(children2))
     throw new Error(
       "Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -16033,10 +16075,10 @@ const defaultProps$W = {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Target, { ref, refProp, children: children2 });
 });
 ComboboxDropdownTarget.displayName = "@mantine/core/ComboboxDropdownTarget";
-const defaultProps$V = {}, ComboboxEmpty = factory((props2, ref) => {
+const defaultProps$T = {}, ComboboxEmpty = factory((props2, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxEmpty",
-    defaultProps$V,
+    defaultProps$T,
     props2
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16048,7 +16090,7 @@ const defaultProps$V = {}, ComboboxEmpty = factory((props2, ref) => {
     }
   );
 });
-ComboboxEmpty.classes = classes$l;
+ComboboxEmpty.classes = classes$j;
 ComboboxEmpty.displayName = "@mantine/core/ComboboxEmpty";
 function useComboboxTargetProps({
   onKeyDown,
@@ -16084,7 +16126,7 @@ function useComboboxTargetProps({
     onKeyDown: handleKeyDown
   };
 }
-const defaultProps$U = {
+const defaultProps$S = {
   refProp: "ref",
   targetType: "input",
   withKeyboardNavigation: !0,
@@ -16101,7 +16143,7 @@ const defaultProps$U = {
     targetType,
     autoComplete,
     ...others
-  } = useProps("ComboboxEventsTarget", defaultProps$U, props2);
+  } = useProps("ComboboxEventsTarget", defaultProps$S, props2);
   if (!isElement$1(children2))
     throw new Error(
       "Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -16121,10 +16163,10 @@ const defaultProps$U = {
   });
 });
 ComboboxEventsTarget.displayName = "@mantine/core/ComboboxEventsTarget";
-const defaultProps$T = {}, ComboboxFooter = factory((props2, ref) => {
+const defaultProps$R = {}, ComboboxFooter = factory((props2, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxFooter",
-    defaultProps$T,
+    defaultProps$R,
     props2
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16139,12 +16181,12 @@ const defaultProps$T = {}, ComboboxFooter = factory((props2, ref) => {
     }
   );
 });
-ComboboxFooter.classes = classes$l;
+ComboboxFooter.classes = classes$j;
 ComboboxFooter.displayName = "@mantine/core/ComboboxFooter";
-const defaultProps$S = {}, ComboboxGroup = factory((props2, ref) => {
+const defaultProps$Q = {}, ComboboxGroup = factory((props2, ref) => {
   const { classNames, className, style: style2, styles, vars, children: children2, label, ...others } = useProps(
     "ComboboxGroup",
-    defaultProps$S,
+    defaultProps$Q,
     props2
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -16160,12 +16202,12 @@ const defaultProps$S = {}, ComboboxGroup = factory((props2, ref) => {
     }
   );
 });
-ComboboxGroup.classes = classes$l;
+ComboboxGroup.classes = classes$j;
 ComboboxGroup.displayName = "@mantine/core/ComboboxGroup";
-const defaultProps$R = {}, ComboboxHeader = factory((props2, ref) => {
+const defaultProps$P = {}, ComboboxHeader = factory((props2, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxHeader",
-    defaultProps$R,
+    defaultProps$P,
     props2
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16180,7 +16222,7 @@ const defaultProps$R = {}, ComboboxHeader = factory((props2, ref) => {
     }
   );
 });
-ComboboxHeader.classes = classes$l;
+ComboboxHeader.classes = classes$j;
 ComboboxHeader.displayName = "@mantine/core/ComboboxHeader";
 function ComboboxHiddenInput({
   value,
@@ -16197,8 +16239,8 @@ function ComboboxHiddenInput({
   );
 }
 ComboboxHiddenInput.displayName = "@mantine/core/ComboboxHiddenInput";
-const defaultProps$Q = {}, ComboboxOption = factory((_props, ref) => {
-  const props2 = useProps("ComboboxOption", defaultProps$Q, _props), {
+const defaultProps$O = {}, ComboboxOption = factory((_props, ref) => {
+  const props2 = useProps("ComboboxOption", defaultProps$O, _props), {
     classNames,
     className,
     style: style2,
@@ -16239,10 +16281,10 @@ const defaultProps$Q = {}, ComboboxOption = factory((_props, ref) => {
     }
   );
 });
-ComboboxOption.classes = classes$l;
+ComboboxOption.classes = classes$j;
 ComboboxOption.displayName = "@mantine/core/ComboboxOption";
-const defaultProps$P = {}, ComboboxOptions = factory((_props, ref) => {
-  const props2 = useProps("ComboboxOptions", defaultProps$P, _props), { classNames, className, style: style2, styles, id: id2, onMouseDown, labelledBy, ...others } = props2, ctx = useComboboxContext(), _id = useId$2(id2);
+const defaultProps$N = {}, ComboboxOptions = factory((_props, ref) => {
+  const props2 = useProps("ComboboxOptions", defaultProps$N, _props), { classNames, className, style: style2, styles, id: id2, onMouseDown, labelledBy, ...others } = props2, ctx = useComboboxContext(), _id = useId$2(id2);
   return reactExports.useEffect(() => {
     ctx.store.setListId(_id);
   }, [_id]), /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16260,13 +16302,13 @@ const defaultProps$P = {}, ComboboxOptions = factory((_props, ref) => {
     }
   );
 });
-ComboboxOptions.classes = classes$l;
+ComboboxOptions.classes = classes$j;
 ComboboxOptions.displayName = "@mantine/core/ComboboxOptions";
-const defaultProps$O = {
+const defaultProps$M = {
   withAriaAttributes: !0,
   withKeyboardNavigation: !0
 }, ComboboxSearch = factory((_props, ref) => {
-  const props2 = useProps("ComboboxSearch", defaultProps$O, _props), {
+  const props2 = useProps("ComboboxSearch", defaultProps$M, _props), {
     classNames,
     styles,
     unstyled,
@@ -16297,9 +16339,9 @@ const defaultProps$O = {
     }
   );
 });
-ComboboxSearch.classes = classes$l;
+ComboboxSearch.classes = classes$j;
 ComboboxSearch.displayName = "@mantine/core/ComboboxSearch";
-const defaultProps$N = {
+const defaultProps$L = {
   refProp: "ref",
   targetType: "input",
   withKeyboardNavigation: !0,
@@ -16316,7 +16358,7 @@ const defaultProps$N = {
     targetType,
     autoComplete,
     ...others
-  } = useProps("ComboboxTarget", defaultProps$N, props2);
+  } = useProps("ComboboxTarget", defaultProps$L, props2);
   if (!isElement$1(children2))
     throw new Error(
       "Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -16493,13 +16535,13 @@ function useCombobox({
     focusTarget
   };
 }
-const defaultProps$M = {
+const defaultProps$K = {
   keepMounted: !0,
   withinPortal: !0,
   resetSelectionOnOptionHover: !1,
   width: "target",
   transitionProps: { transition: "fade", duration: 0 }
-}, varsResolver$k = (_, { size: size2, dropdownPadding }) => ({
+}, varsResolver$j = (_, { size: size2, dropdownPadding }) => ({
   options: {
     "--combobox-option-fz": getFontSize(size2),
     "--combobox-option-padding": getSize(size2, "combobox-option-padding")
@@ -16511,7 +16553,7 @@ const defaultProps$M = {
   }
 });
 function Combobox(_props) {
-  const props2 = useProps("Combobox", defaultProps$M, _props), {
+  const props2 = useProps("Combobox", defaultProps$K, _props), {
     classNames,
     styles,
     unstyled,
@@ -16528,13 +16570,13 @@ function Combobox(_props) {
     ...others
   } = props2, uncontrolledStore = useCombobox(), store = controlledStore || uncontrolledStore, getStyles2 = useStyles({
     name: __staticSelector || "Combobox",
-    classes: classes$l,
+    classes: classes$j,
     props: props2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$k
+    varsResolver: varsResolver$j
   }), onDropdownClose = () => {
     onClose?.(), store.closeDropdown();
   };
@@ -16565,7 +16607,7 @@ function Combobox(_props) {
 }
 const extendCombobox = (c) => c;
 Combobox.extend = extendCombobox;
-Combobox.classes = classes$l;
+Combobox.classes = classes$j;
 Combobox.displayName = "@mantine/core/Combobox";
 Combobox.Target = ComboboxTarget;
 Combobox.Dropdown = ComboboxDropdown;
@@ -16667,7 +16709,7 @@ function Option({
   renderOption
 }) {
   if (!isOptionsGroup(data)) {
-    const checked = isValueChecked(value, data.value), check = withCheckIcon && checked && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, { className: classes$l.optionsDropdownCheckIcon }), defaultContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    const checked = isValueChecked(value, data.value), check = withCheckIcon && checked && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, { className: classes$j.optionsDropdownCheckIcon }), defaultContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       checkIconPosition === "left" && check,
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: data.label }),
       checkIconPosition === "right" && check
@@ -16677,7 +16719,7 @@ function Option({
       {
         value: data.value,
         disabled: data.disabled,
-        className: clsx({ [classes$l.optionsDropdownOption]: !unstyled }),
+        className: clsx({ [classes$j.optionsDropdownOption]: !unstyled }),
         "data-reverse": checkIconPosition === "right" || void 0,
         "data-checked": checked || void 0,
         "aria-selected": checked,
@@ -16752,79 +16794,8 @@ function OptionsDropdown({
     isEmpty2 && nothingFoundMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Empty, { children: nothingFoundMessage })
   ] }) });
 }
-var __default__$k = { root: "m_347db0ec", "root--dot": "m_fbd81e3d", label: "m_5add502a", section: "m_91fdda9b" };
-const classes$k = __default__$k, defaultProps$L = {}, varsResolver$j = (theme2, { radius, color: color2, gradient, variant, size: size2, autoContrast }) => {
-  const colors2 = theme2.variantColorResolver({
-    color: color2 || theme2.primaryColor,
-    theme: theme2,
-    gradient,
-    variant: variant || "filled",
-    autoContrast
-  });
-  return {
-    root: {
-      "--badge-height": getSize(size2, "badge-height"),
-      "--badge-padding-x": getSize(size2, "badge-padding-x"),
-      "--badge-fz": getSize(size2, "badge-fz"),
-      "--badge-radius": radius === void 0 ? void 0 : getRadius(radius),
-      "--badge-bg": color2 || variant ? colors2.background : void 0,
-      "--badge-color": color2 || variant ? colors2.color : void 0,
-      "--badge-bd": color2 || variant ? colors2.border : void 0,
-      "--badge-dot-color": variant === "dot" ? getThemeColor(color2, theme2) : void 0
-    }
-  };
-}, Badge = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Badge", defaultProps$L, _props), {
-    classNames,
-    className,
-    style: style2,
-    styles,
-    unstyled,
-    vars,
-    radius,
-    color: color2,
-    gradient,
-    leftSection,
-    rightSection,
-    children: children2,
-    variant,
-    fullWidth,
-    autoContrast,
-    circle,
-    mod,
-    ...others
-  } = props2, getStyles2 = useStyles({
-    name: "Badge",
-    props: props2,
-    classes: classes$k,
-    className,
-    style: style2,
-    classNames,
-    styles,
-    unstyled,
-    vars,
-    varsResolver: varsResolver$j
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Box,
-    {
-      variant,
-      mod: [{ block: fullWidth, circle }, mod],
-      ...getStyles2("root", { variant }),
-      ref,
-      ...others,
-      children: [
-        leftSection && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ...getStyles2("section"), "data-position": "left", children: leftSection }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ...getStyles2("label"), children: children2 }),
-        rightSection && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ...getStyles2("section"), "data-position": "right", children: rightSection })
-      ]
-    }
-  );
-});
-Badge.classes = classes$k;
-Badge.displayName = "@mantine/core/Badge";
-var __default__$j = { root: "m_fea6bf1a", burger: "m_d4fb9cad" };
-const classes$j = __default__$j, defaultProps$K = {}, varsResolver$i = (theme2, { color: color2, size: size2, transitionDuration, transitionTimingFunction }) => ({
+var __default__$i = { root: "m_fea6bf1a", burger: "m_d4fb9cad" };
+const classes$i = __default__$i, defaultProps$J = {}, varsResolver$i = (theme2, { color: color2, size: size2, transitionDuration, transitionTimingFunction }) => ({
   root: {
     "--burger-color": color2 ? getThemeColor(color2, theme2) : void 0,
     "--burger-size": getSize(size2, "burger-size"),
@@ -16832,7 +16803,7 @@ const classes$j = __default__$j, defaultProps$K = {}, varsResolver$i = (theme2,
     "--burger-transition-timing-function": transitionTimingFunction
   }
 }), Burger = factory((_props, ref) => {
-  const props2 = useProps("Burger", defaultProps$K, _props), {
+  const props2 = useProps("Burger", defaultProps$J, _props), {
     classNames,
     className,
     style: style2,
@@ -16846,7 +16817,7 @@ const classes$j = __default__$j, defaultProps$K = {}, varsResolver$i = (theme2,
     ...others
   } = props2, getStyles2 = useStyles({
     name: "Burger",
-    classes: classes$j,
+    classes: classes$i,
     props: props2,
     className,
     style: style2,
@@ -16861,15 +16832,15 @@ const classes$j = __default__$j, defaultProps$K = {}, varsResolver$i = (theme2,
     children2
   ] });
 });
-Burger.classes = classes$j;
+Burger.classes = classes$i;
 Burger.displayName = "@mantine/core/Burger";
-var __default__$i = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844" };
-const classes$i = __default__$i, defaultProps$J = {
+var __default__$h = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844" };
+const classes$h = __default__$h, defaultProps$I = {
   orientation: "horizontal"
 }, varsResolver$h = (_, { borderWidth }) => ({
   group: { "--button-border-width": rem(borderWidth) }
 }), ButtonGroup = factory((_props, ref) => {
-  const props2 = useProps("ButtonGroup", defaultProps$J, _props), {
+  const props2 = useProps("ButtonGroup", defaultProps$I, _props), {
     className,
     style: style2,
     classNames,
@@ -16881,10 +16852,10 @@ const classes$i = __default__$i, defaultProps$J = {
     variant,
     mod,
     ...others
-  } = useProps("ButtonGroup", defaultProps$J, _props), getStyles2 = useStyles({
+  } = useProps("ButtonGroup", defaultProps$I, _props), getStyles2 = useStyles({
     name: "ButtonGroup",
     props: props2,
-    classes: classes$i,
+    classes: classes$h,
     className,
     style: style2,
     classNames,
@@ -16906,14 +16877,14 @@ const classes$i = __default__$i, defaultProps$J = {
     }
   );
 });
-ButtonGroup.classes = classes$i;
+ButtonGroup.classes = classes$h;
 ButtonGroup.displayName = "@mantine/core/ButtonGroup";
 const loaderTransition = {
   in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },
   out: { opacity: 0, transform: "translate(-50%, -200%)" },
   common: { transformOrigin: "center" },
   transitionProperty: "transform, opacity"
-}, defaultProps$I = {}, varsResolver$g = (theme2, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
+}, defaultProps$H = {}, varsResolver$g = (theme2, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -16936,7 +16907,7 @@ const loaderTransition = {
     }
   };
 }, Button = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Button", defaultProps$I, _props), {
+  const props2 = useProps("Button", defaultProps$H, _props), {
     style: style2,
     vars,
     className,
@@ -16961,7 +16932,7 @@ const loaderTransition = {
   } = props2, getStyles2 = useStyles({
     name: "Button",
     props: props2,
-    classes: classes$i,
+    classes: classes$h,
     className,
     style: style2,
     classNames,
@@ -17007,15 +16978,15 @@ const loaderTransition = {
     }
   );
 });
-Button.classes = classes$i;
+Button.classes = classes$h;
 Button.displayName = "@mantine/core/Button";
 Button.Group = ButtonGroup;
 const [CardProvider, useCardContext] = createSafeContext(
   "Card component was not found in tree"
 );
-var __default__$h = { root: "m_e615b15f", section: "m_599a2148" };
-const classes$h = __default__$h, defaultProps$H = {}, CardSection = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("CardSection", defaultProps$H, _props), { classNames, className, style: style2, styles, vars, withBorder, inheritPadding, mod, ...others } = props2, ctx = useCardContext();
+var __default__$g = { root: "m_e615b15f", section: "m_599a2148" };
+const classes$g = __default__$g, defaultProps$G = {}, CardSection = polymorphicFactory((_props, ref) => {
+  const props2 = useProps("CardSection", defaultProps$G, _props), { classNames, className, style: style2, styles, vars, withBorder, inheritPadding, mod, ...others } = props2, ctx = useCardContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
     {
@@ -17026,17 +16997,17 @@ const classes$h = __default__$h, defaultProps$H = {}, CardSection = polymorphicF
     }
   );
 });
-CardSection.classes = classes$h;
+CardSection.classes = classes$g;
 CardSection.displayName = "@mantine/core/CardSection";
-const defaultProps$G = {}, varsResolver$f = (_, { padding }) => ({
+const defaultProps$F = {}, varsResolver$f = (_, { padding }) => ({
   root: {
     "--card-padding": getSpacing(padding)
   }
 }), Card = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Card", defaultProps$G, _props), { classNames, className, style: style2, styles, unstyled, vars, children: children2, padding, ...others } = props2, getStyles2 = useStyles({
+  const props2 = useProps("Card", defaultProps$F, _props), { classNames, className, style: style2, styles, unstyled, vars, children: children2, padding, ...others } = props2, getStyles2 = useStyles({
     name: "Card",
     props: props2,
-    classes: classes$h,
+    classes: classes$g,
     className,
     style: style2,
     classNames,
@@ -17050,26 +17021,9 @@ const defaultProps$G = {}, varsResolver$f = (_, { padding }) => ({
   }) : child);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CardProvider, { value: { getStyles: getStyles2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Paper, { ref, unstyled, ...getStyles2("root"), ...others, children: content2 }) });
 });
-Card.classes = classes$h;
+Card.classes = classes$g;
 Card.displayName = "@mantine/core/Card";
 Card.Section = CardSection;
-var __default__$g = { root: "m_4451eb3a" };
-const classes$g = __default__$g, defaultProps$F = {}, Center = polymorphicFactory((_props, ref) => {
-  const props2 = useProps("Center", defaultProps$F, _props), { classNames, className, style: style2, styles, unstyled, vars, inline: inline2, mod, ...others } = props2, getStyles2 = useStyles({
-    name: "Center",
-    props: props2,
-    classes: classes$g,
-    className,
-    style: style2,
-    classNames,
-    styles,
-    unstyled,
-    vars
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ref, mod: [{ inline: inline2 }, mod], ...getStyles2("root"), ...others });
-});
-Center.classes = classes$g;
-Center.displayName = "@mantine/core/Center";
 var __default__$f = { root: "m_b183c0a2" };
 const classes$f = __default__$f, defaultProps$E = {}, varsResolver$e = (theme2, { color: color2 }) => ({
   root: {
@@ -22391,14 +22345,14 @@ function getEdgePosition(params) {
     // when connection type is loose we can define all handles as sources and connect source -> source
     params.connectionMode === ConnectionMode.Strict ? targetHandleBounds?.target ?? [] : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []),
     params.targetHandle
-  ), sourcePosition = sourceHandle?.position || Position.Bottom, targetPosition = targetHandle?.position || Position.Top;
+  );
   if (!sourceHandle || !targetHandle)
     return params.onError?.("008", errorMessages.error008(sourceHandle ? "target" : "source", {
       id: params.id,
       sourceHandle: params.sourceHandle,
       targetHandle: params.targetHandle
     })), null;
-  const [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle), [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
+  const sourcePosition = sourceHandle?.position || Position.Bottom, targetPosition = targetHandle?.position || Position.Top, [sourceX, sourceY] = getHandlePosition(sourceNode, sourceHandle, sourcePosition), [targetX, targetY] = getHandlePosition(targetNode, targetHandle, targetPosition);
   return {
     sourceX,
     sourceY,
@@ -22419,9 +22373,9 @@ function toHandleBounds(handles) {
     target
   };
 }
-function getHandlePosition(position, node, handle = null) {
+function getHandlePosition(node, handle, fallbackPosition = Position.Left) {
   const x2 = (handle?.x ?? 0) + node.internals.positionAbsolute.x, y2 = (handle?.y ?? 0) + node.internals.positionAbsolute.y, { width, height } = handle ?? getNodeDimensions(node);
-  switch (position) {
+  switch (handle?.position ?? fallbackPosition) {
     case Position.Top:
       return [x2 + width / 2, y2];
     case Position.Right:
@@ -22790,13 +22744,19 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
   };
 }
 function getHandles(node, handleBounds, type, currentHandle) {
-  return (handleBounds[type] || []).reduce((res, h2) => (`${node.id}-${h2.id}-${type}` !== currentHandle && res.push({
-    id: h2.id || null,
-    type,
-    nodeId: node.id,
-    x: node.internals.positionAbsolute.x + h2.x + h2.width / 2,
-    y: node.internals.positionAbsolute.y + h2.y + h2.height / 2
-  }), res), []);
+  return (handleBounds[type] || []).reduce((res, handle) => {
+    if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
+      const [x2, y2] = getHandlePosition(node, handle);
+      res.push({
+        id: handle.id || null,
+        type,
+        nodeId: node.id,
+        x: x2,
+        y: y2
+      });
+    }
+    return res;
+  }, []);
 }
 function getClosestHandle(pos, connectionRadius, handles) {
   let closestHandles = [], minDistance = 1 / 0;
@@ -22827,7 +22787,7 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
 }
 const alwaysValid = () => !0;
 let connectionStartHandle = null;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy: panBy2, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, getConnectionStartHandle }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy: panBy2, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getConnectionStartHandle }) {
   const doc = getHostForElement(event.target);
   let autoPanId = 0, closestHandle;
   const { x: x2, y: y2 } = getEventPosition(event), clickedHandle = doc?.elementFromPoint(x2, y2), handleType = getHandleType(edgeUpdaterType, clickedHandle), containerBounds = domNode?.getBoundingClientRect();
@@ -22849,11 +22809,11 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   connectionStartHandle = {
     nodeId,
     handleId,
-    type: handleType
+    type: handleType,
+    position: clickedHandle?.getAttribute("data-handlepos") || Position.Top
   }, updateConnection({
     connectionPosition,
     connectionStatus: null,
-    // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
     connectionStartHandle,
     connectionEndHandle: null
   }), onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -22883,7 +22843,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     });
   }
   function onPointerUp(event2) {
-    (closestHandle || handleDomNode) && connection && isValid && onConnect?.(connection), onConnectEnd?.(event2), edgeUpdaterType && onEdgeUpdateEnd?.(event2), cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, handleDomNode = null, connectionStartHandle = null, doc.removeEventListener("mousemove", onPointerMove), doc.removeEventListener("mouseup", onPointerUp), doc.removeEventListener("touchmove", onPointerMove), doc.removeEventListener("touchend", onPointerUp);
+    (closestHandle || handleDomNode) && connection && isValid && onConnect?.(connection), onConnectEnd?.(event2), edgeUpdaterType && onReconnectEnd?.(event2), cancelConnection(), cancelAnimationFrame(autoPanId), autoPanStarted = !1, isValid = !1, connection = null, handleDomNode = null, connectionStartHandle = null, doc.removeEventListener("mousemove", onPointerMove), doc.removeEventListener("mouseup", onPointerUp), doc.removeEventListener("touchmove", onPointerMove), doc.removeEventListener("touchend", onPointerUp);
   }
   doc.addEventListener("mousemove", onPointerMove), doc.addEventListener("mouseup", onPointerUp), doc.addEventListener("touchmove", onPointerMove), doc.addEventListener("touchend", onPointerUp);
 }
@@ -22904,11 +22864,14 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
       target: isTarget ? fromNodeId : handleNodeId,
       targetHandle: isTarget ? fromHandleId : handleId
     };
-    result.connection = connection, connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId) && (result.endHandle = {
+    result.connection = connection;
+    const isValid = connectable && connectableEnd && (connectionMode === ConnectionMode.Strict ? isTarget && handleType === "source" || !isTarget && handleType === "target" : handleNodeId !== fromNodeId || handleId !== fromHandleId);
+    result.isValid = isValid && isValidConnection(connection), result.endHandle = {
       nodeId: handleNodeId,
       handleId,
-      type: handleType
-    }, result.isValid = isValidConnection(connection));
+      type: handleType,
+      position: handleToCheck.getAttribute("data-handlepos")
+    };
   }
   return result;
 }
@@ -23378,16 +23341,14 @@ function shallow$1(objA, objB) {
   if (typeof objA != "object" || objA === null || typeof objB != "object" || objB === null)
     return !1;
   if (objA instanceof Map && objB instanceof Map) {
-    if (objA.size !== objB.size)
-      return !1;
+    if (objA.size !== objB.size) return !1;
     for (const [key, value] of objA)
       if (!Object.is(value, objB.get(key)))
         return !1;
     return !0;
   }
   if (objA instanceof Set && objB instanceof Set) {
-    if (objA.size !== objB.size)
-      return !1;
+    if (objA.size !== objB.size) return !1;
     for (const value of objA)
       if (!objB.has(value))
         return !1;
@@ -23481,7 +23442,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "nodesConnectable",
   "nodesFocusable",
   "edgesFocusable",
-  "edgesUpdatable",
+  "edgesReconnectable",
   "elevateNodesOnSelect",
   "elevateEdgesOnSelect",
   "minZoom",
@@ -23843,7 +23804,7 @@ function useReactFlow() {
         }
         return node;
       }));
-    }, updateEdge2 = (id2, edgeUpdate, options = { replace: !1 }) => {
+    }, updateEdge = (id2, edgeUpdate, options = { replace: !1 }) => {
       setEdges((prevEdges) => prevEdges.map((edge) => {
         if (edge.id === id2) {
           const nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
@@ -23925,9 +23886,9 @@ function useReactFlow() {
           return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
         }, options);
       },
-      updateEdge: updateEdge2,
+      updateEdge,
       updateEdgeData: (id2, dataUpdate, options = { replace: !1 }) => {
-        updateEdge2(id2, (edge) => {
+        updateEdge(id2, (edge) => {
           const nextData = typeof dataUpdate == "function" ? dataUpdate(edge) : dataUpdate;
           return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
         }, options);
@@ -23940,9 +23901,9 @@ function useReactFlow() {
     viewportInitialized
   }), [viewportInitialized]);
 }
-const selected = (item) => item.selected, deleteKeyOptions = { actInsideInputWithModifier: !1 };
+const selected = (item) => item.selected, deleteKeyOptions = { actInsideInputWithModifier: !1 }, win$1 = typeof window < "u" ? window : void 0;
 function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }) {
-  const store = useStoreApi(), { deleteElements } = useReactFlow(), deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions), multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
+  const store = useStoreApi(), { deleteElements } = useReactFlow(), deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions), multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win$1 });
   reactExports.useEffect(() => {
     if (deleteKeyPressed) {
       const { edges, nodes } = store.getState();
@@ -24069,10 +24030,14 @@ const wrapHandler = (handler, containerRef) => (event) => {
   elementsSelectable: s.elementsSelectable,
   dragging: s.paneDragging
 });
-function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
-  const container2 = reactExports.useRef(null), store = useStoreApi(), prevSelectedNodesCount = reactExports.useRef(0), prevSelectedEdgesCount = reactExports.useRef(0), containerBounds = reactExports.useRef(), edgeIdLookup = reactExports.useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore$1(selector$j, shallow$1), resetUserSelection = () => {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+  const container2 = reactExports.useRef(null), store = useStoreApi(), prevSelectedNodesCount = reactExports.useRef(0), prevSelectedEdgesCount = reactExports.useRef(0), containerBounds = reactExports.useRef(), edgeIdLookup = reactExports.useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore$1(selector$j, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), selectionInProgress = reactExports.useRef(!1), resetUserSelection = () => {
     store.setState({ userSelectionActive: !1, userSelectionRect: null }), prevSelectedNodesCount.current = 0, prevSelectedEdgesCount.current = 0;
   }, onClick = (event) => {
+    if (selectionInProgress.current) {
+      selectionInProgress.current = !1;
+      return;
+    }
     onPaneClick?.(event), store.getState().resetSelectedElements(), store.setState({ nodesSelectionActive: !1 });
   }, onContextMenu = (event) => {
     if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
@@ -24080,9 +24045,9 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       return;
     }
     onPaneContextMenu?.(event);
-  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onMouseDown = (event) => {
+  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onPointerDown2 = (event) => {
     const { resetSelectedElements, domNode, edgeLookup } = store.getState();
-    if (containerBounds.current = domNode?.getBoundingClientRect(), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container2.current || !containerBounds.current)
+    if (containerBounds.current = domNode?.getBoundingClientRect(), container2.current?.setPointerCapture(event.pointerId), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container2.current || !containerBounds.current)
       return;
     edgeIdLookup.current = /* @__PURE__ */ new Map();
     for (const [id2, edge] of edgeLookup)
@@ -24098,10 +24063,11 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         y: y2
       }
     }), onSelectionStart?.(event);
-  }, onMouseMove = (event) => {
+  }, onPointerMove = (event) => {
     const { userSelectionRect, edgeLookup, transform: transform2, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
-    if (!isSelecting || !containerBounds.current || !userSelectionRect)
+    if (!containerBounds.current || !userSelectionRect)
       return;
+    selectionInProgress.current = !0;
     const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current), { startX, startY } = userSelectionRect, nextUserSelectRect = {
       startX,
       startY,
@@ -24132,15 +24098,14 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       userSelectionActive: !0,
       nodesSelectionActive: !1
     });
-  }, onMouseUp = (event) => {
+  }, onPointerUp = (event) => {
     if (event.button !== 0)
       return;
+    container2.current?.releasePointerCapture(event.pointerId);
     const { userSelectionRect } = store.getState();
-    !userSelectionActive && userSelectionRect && event.target === container2.current && onClick?.(event), store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), resetUserSelection(), onSelectionEnd?.(event);
-  }, onMouseLeave = (event) => {
-    userSelectionActive && (store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), onSelectionEnd?.(event)), resetUserSelection();
-  }, hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-  return jsxRuntimeExports.jsxs("div", { className: cc(["react-flow__pane", { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container2), onContextMenu: wrapHandler(onContextMenu, container2), onWheel: wrapHandler(onWheel, container2), onMouseEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : void 0, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : void 0, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container2, style: containerStyle, children: [children2, jsxRuntimeExports.jsx(UserSelection, {})] });
+    !userSelectionActive && userSelectionRect && event.target === container2.current && onClick?.(event), store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), resetUserSelection(), onSelectionEnd?.(event), selectionKeyPressed && (selectionInProgress.current = !1);
+  };
+  return jsxRuntimeExports.jsxs("div", { className: cc(["react-flow__pane", { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container2), onContextMenu: wrapHandler(onContextMenu, container2), onWheel: wrapHandler(onWheel, container2), onPointerEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onPointerDown: hasActiveSelection ? onPointerDown2 : onPaneMouseMove, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : void 0, onPointerLeave: onPaneMouseLeave, ref: container2, style: containerStyle, children: [children2, jsxRuntimeExports.jsx(UserSelection, {})] });
 }
 function handleNodeClick({ id: id2, store, unselect = !1, nodeRef }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState(), node = nodeLookup.get(id2);
@@ -24387,10 +24352,10 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     height
   } }) });
 }
-const selector$g = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
+const win = typeof window < "u" ? window : void 0, selector$g = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
 function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
-  const { nodesSelectionActive, userSelectionActive } = useStore$1(selector$g), selectionKeyPressed = useKeyPress(selectionKeyCode), panActivationKeyPressed = useKeyPress(panActivationKeyCode), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, isSelecting = selectionKeyPressed || userSelectionActive || selectionOnDrag && panOnDrag !== !0;
-  return useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }), jsxRuntimeExports.jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, children: jsxRuntimeExports.jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, children: [children2, nodesSelectionActive && jsxRuntimeExports.jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
+  const { nodesSelectionActive, userSelectionActive } = useStore$1(selector$g), selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }), panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, isSelecting = selectionKeyPressed || userSelectionActive || selectionOnDrag && panOnDrag !== !0;
+  return useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }), jsxRuntimeExports.jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, children: jsxRuntimeExports.jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, children: [children2, nodesSelectionActive && jsxRuntimeExports.jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
 const FlowRenderer = reactExports.memo(FlowRendererComponent), selector$f = (onlyRenderVisible) => (s) => onlyRenderVisible ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, !0).map((node) => node.id) : Array.from(s.nodeLookup.keys());
@@ -24725,15 +24690,15 @@ const builtinEdgeTypes = {
 function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type }) {
   return jsxRuntimeExports.jsx("circle", { onMouseDown, onMouseEnter, onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" });
 }
-function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, setUpdating, setUpdateHover }) {
+function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onReconnect, onReconnectStart, onReconnectEnd, setReconnecting, setUpdateHover }) {
   const store = useStoreApi(), handleEdgeUpdater = (event, isSourceHandle) => {
     if (event.button !== 0)
       return;
     const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy: panBy2, updateConnection } = store.getState(), nodeId = isSourceHandle ? edge.target : edge.source, handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null, handleType = isSourceHandle ? "target" : "source", isTarget = isSourceHandle;
-    setUpdating(!0), onEdgeUpdateStart?.(event, edge, handleType);
-    const _onEdgeUpdateEnd = (evt) => {
-      setUpdating(!1), onEdgeUpdateEnd?.(evt, edge, handleType);
-    }, onConnectEdge = (connection) => onEdgeUpdate?.(edge, connection);
+    setReconnecting(!0), onReconnectStart?.(event, edge, handleType);
+    const _onReconnectEnd = (evt) => {
+      setReconnecting(!1), onReconnectEnd?.(evt, edge, handleType);
+    }, onConnectEdge = (connection) => onReconnect?.(edge, connection);
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
       connectionMode,
@@ -24752,21 +24717,21 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
       onConnect: onConnectEdge,
       onConnectStart,
       onConnectEnd,
-      onEdgeUpdateEnd: _onEdgeUpdateEnd,
+      onReconnectEnd: _onReconnectEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
       getConnectionStartHandle: () => store.getState().connectionStartHandle
     });
-  }, onEdgeUpdaterSourceMouseDown = (event) => handleEdgeUpdater(event, !0), onEdgeUpdaterTargetMouseDown = (event) => handleEdgeUpdater(event, !1), onEdgeUpdaterMouseEnter = () => setUpdateHover(!0), onEdgeUpdaterMouseOut = () => setUpdateHover(!1);
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(isUpdatable === "source" || isUpdatable === !0) && jsxRuntimeExports.jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterSourceMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "source" }), (isUpdatable === "target" || isUpdatable === !0) && jsxRuntimeExports.jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterTargetMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "target" })] });
+  }, onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, !0), onReconnectTargetMouseDown = (event) => handleEdgeUpdater(event, !1), onReconnectMouseEnter = () => setUpdateHover(!0), onReconnectMouseOut = () => setUpdateHover(!1);
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(isReconnectable === "source" || isReconnectable === !0) && jsxRuntimeExports.jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: reconnectRadius, onMouseDown: onReconnectSourceMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "source" }), (isReconnectable === "target" || isReconnectable === !0) && jsxRuntimeExports.jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: reconnectRadius, onMouseDown: onReconnectTargetMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "target" })] });
 }
-function EdgeWrapper({ id: id2, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes: edgeTypes2, noPanClassName, onError, disableKeyboardA11y }) {
+function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, rfId, edgeTypes: edgeTypes2, noPanClassName, onError, disableKeyboardA11y }) {
   let edge = useStore$1((s) => s.edgeLookup.get(id2));
   const defaultEdgeOptions = useStore$1((s) => s.defaultEdgeOptions);
   edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
   let edgeType = edge.type || "default", EdgeComponent = edgeTypes2?.[edgeType] || builtinEdgeTypes[edgeType];
   EdgeComponent === void 0 && (onError?.("011", errorMessages.error011(edgeType)), edgeType = "default", EdgeComponent = builtinEdgeTypes.default);
-  const isFocusable = !!(edge.focusable || edgesFocusable && typeof edge.focusable > "u"), isUpdatable = typeof onEdgeUpdate < "u" && (edge.updatable || edgesUpdatable && typeof edge.updatable > "u"), isSelectable = !!(edge.selectable || elementsSelectable && typeof edge.selectable > "u"), edgeRef = reactExports.useRef(null), [updateHover, setUpdateHover] = reactExports.useState(!1), [updating, setUpdating] = reactExports.useState(!1), store = useStoreApi(), { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore$1(reactExports.useCallback((store2) => {
+  const isFocusable = !!(edge.focusable || edgesFocusable && typeof edge.focusable > "u"), isReconnectable = typeof onReconnect < "u" && (edge.reconnectable || edgesReconnectable && typeof edge.reconnectable > "u"), isSelectable = !!(edge.selectable || elementsSelectable && typeof edge.selectable > "u"), edgeRef = reactExports.useRef(null), [updateHover, setUpdateHover] = reactExports.useState(!1), [reconnecting, setReconnecting] = reactExports.useState(!1), store = useStoreApi(), { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore$1(reactExports.useCallback((store2) => {
     const sourceNode = store2.nodeLookup.get(edge.source), targetNode = store2.nodeLookup.get(edge.target);
     if (!sourceNode || !targetNode)
       return {
@@ -24826,20 +24791,20 @@ function EdgeWrapper({ id: id2, edgesFocusable, edgesUpdatable, elementsSelectab
       updating: updateHover,
       selectable: isSelectable
     }
-  ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: isFocusable ? "button" : "img", "data-id": id2, "data-testid": `rf__edge-${id2}`, "aria-label": edge.ariaLabel === null ? void 0 : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : void 0, ref: edgeRef, children: [!updating && jsxRuntimeExports.jsx(EdgeComponent, { id: id2, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? !0, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: "pathOptions" in edge ? edge.pathOptions : void 0, interactionWidth: edge.interactionWidth }), isUpdatable && jsxRuntimeExports.jsx(EdgeUpdateAnchors, { edge, isUpdatable, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, setUpdateHover, setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle })] }) });
+  ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: isFocusable ? "button" : "img", "data-id": id2, "data-testid": `rf__edge-${id2}`, "aria-label": edge.ariaLabel === null ? void 0 : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : void 0, ref: edgeRef, children: [!reconnecting && jsxRuntimeExports.jsx(EdgeComponent, { id: id2, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, selectable: isSelectable, deletable: edge.deletable ?? !0, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: "pathOptions" in edge ? edge.pathOptions : void 0, interactionWidth: edge.interactionWidth }), isReconnectable && jsxRuntimeExports.jsx(EdgeUpdateAnchors, { edge, isReconnectable, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, setUpdateHover, setReconnecting, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle })] }) });
 }
 const selector$c = (s) => ({
   width: s.width,
   height: s.height,
   edgesFocusable: s.edgesFocusable,
-  edgesUpdatable: s.edgesUpdatable,
+  edgesReconnectable: s.edgesReconnectable,
   elementsSelectable: s.elementsSelectable,
   connectionMode: s.connectionMode,
   onError: s.onError
 });
-function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes: edgeTypes2, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, disableKeyboardA11y }) {
-  const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore$1(selector$c, shallow$1), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
-  return jsxRuntimeExports.jsxs("div", { className: "react-flow__edges", children: [jsxRuntimeExports.jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId }), edgeIds.map((id2) => jsxRuntimeExports.jsx(EdgeWrapper, { id: id2, edgesFocusable, edgesUpdatable, elementsSelectable, noPanClassName, onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, onError, edgeTypes: edgeTypes2, disableKeyboardA11y }, id2))] });
+function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes: edgeTypes2, noPanClassName, onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, reconnectRadius, onEdgeDoubleClick, onReconnectStart, onReconnectEnd, disableKeyboardA11y }) {
+  const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore$1(selector$c, shallow$1), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
+  return jsxRuntimeExports.jsxs("div", { className: "react-flow__edges", children: [jsxRuntimeExports.jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId }), edgeIds.map((id2) => jsxRuntimeExports.jsx(EdgeWrapper, { id: id2, edgesFocusable, edgesReconnectable, elementsSelectable, noPanClassName, onReconnect, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, reconnectRadius, onDoubleClick: onEdgeDoubleClick, onReconnectStart, onReconnectEnd, rfId, onError, edgeTypes: edgeTypes2, disableKeyboardA11y }, id2))] });
 }
 EdgeRendererComponent.displayName = "EdgeRenderer";
 const EdgeRenderer = reactExports.memo(EdgeRendererComponent), selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
@@ -24866,17 +24831,19 @@ const oppositePosition = {
   [Position.Top]: Position.Bottom,
   [Position.Bottom]: Position.Top
 }, ConnectionLine = ({ nodeId, handleType, style: style2, type = ConnectionLineType.Bezier, CustomComponent, connectionStatus }) => {
-  const { fromNode, handleId, toX, toY, connectionMode } = useStore$1(reactExports.useCallback((s) => ({
+  const { fromNode, handleId, toX, toY, connectionMode, endPosition, isValid } = useStore$1(reactExports.useCallback((s) => ({
     fromNode: s.nodeLookup.get(nodeId),
     handleId: s.connectionStartHandle?.handleId,
     toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
     toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
-    connectionMode: s.connectionMode
+    connectionMode: s.connectionMode,
+    endPosition: s.connectionEndHandle?.position,
+    isValid: s.connectionStatus === "valid"
   }), [nodeId]), shallow$1), fromHandleBounds = fromNode?.internals.handleBounds;
   let handleBounds = fromHandleBounds?.[handleType];
   if (connectionMode === ConnectionMode.Loose && (handleBounds = handleBounds || fromHandleBounds?.[handleType === "source" ? "target" : "source"]), !fromNode || !handleBounds)
     return null;
-  const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0], fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2, fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0, fromX = fromNode.internals.positionAbsolute.x + fromHandleX, fromY = fromNode.internals.positionAbsolute.y + fromHandleY, fromPosition = fromHandle?.position, toPosition = fromPosition ? oppositePosition[fromPosition] : null;
+  const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0], fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2, fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0, fromX = fromNode.internals.positionAbsolute.x + fromHandleX, fromY = fromNode.internals.positionAbsolute.y + fromHandleY, fromPosition = fromHandle?.position, toPosition = isValid && endPosition ? endPosition : fromPosition ? oppositePosition[fromPosition] : null;
   if (!fromPosition || !toPosition)
     return null;
   if (CustomComponent)
@@ -24917,8 +24884,8 @@ function useStylesLoadedWarning() {
   useStoreApi(), reactExports.useRef(!1), reactExports.useEffect(() => {
   }, []);
 }
-function GraphViewComponent({ nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange }) {
-  return useNodeOrEdgeTypesWarning(nodeTypes2), useNodeOrEdgeTypesWarning(edgeTypes2), useStylesLoadedWarning(), useOnInitHandler(onInit), useViewportSync(viewport), jsxRuntimeExports.jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxRuntimeExports.jsxs(Viewport, { children: [jsxRuntimeExports.jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onEdgeUpdate, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsxRuntimeExports.jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsxRuntimeExports.jsx("div", { className: "react-flow__edgelabel-renderer" }), jsxRuntimeExports.jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), jsxRuntimeExports.jsx("div", { className: "react-flow__viewport-portal" })] }) });
+function GraphViewComponent({ nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange }) {
+  return useNodeOrEdgeTypesWarning(nodeTypes2), useNodeOrEdgeTypesWarning(edgeTypes2), useStylesLoadedWarning(), useOnInitHandler(onInit), useViewportSync(viewport), jsxRuntimeExports.jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxRuntimeExports.jsxs(Viewport, { children: [jsxRuntimeExports.jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsxRuntimeExports.jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsxRuntimeExports.jsx("div", { className: "react-flow__edgelabel-renderer" }), jsxRuntimeExports.jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), jsxRuntimeExports.jsx("div", { className: "react-flow__viewport-portal" })] }) });
 }
 GraphViewComponent.displayName = "GraphView";
 const GraphView = reactExports.memo(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2 } = {}) => {
@@ -24972,7 +24939,7 @@ const GraphView = reactExports.memo(GraphViewComponent), getInitialState = ({ no
     nodesConnectable: !0,
     nodesFocusable: !0,
     edgesFocusable: !0,
-    edgesUpdatable: !0,
+    edgesReconnectable: !0,
     elementsSelectable: !0,
     elevateNodesOnSelect: !0,
     elevateEdgesOnSelect: !1,
@@ -25179,9 +25146,9 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children: children2, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, ...rest }, ref) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode);
-  return jsxRuntimeExports.jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxRuntimeExports.jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, children: [jsxRuntimeExports.jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeOrigin, nodeExtent, viewport, onViewportChange }), jsxRuntimeExports.jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesUpdatable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, debug }), jsxRuntimeExports.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntimeExports.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntimeExports.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+  return jsxRuntimeExports.jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxRuntimeExports.jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, children: [jsxRuntimeExports.jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeOrigin, nodeExtent, viewport, onViewportChange }), jsxRuntimeExports.jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, debug }), jsxRuntimeExports.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntimeExports.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntimeExports.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
 const selector$8 = (s) => s.domNode?.querySelector(".react-flow__edgelabel-renderer");
@@ -25199,16 +25166,6 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
     store.setState({ onViewportChangeEnd: onEnd });
   }, [onEnd]);
 }
-function useOnSelectionChange({ onChange }) {
-  const store = useStoreApi();
-  reactExports.useEffect(() => {
-    const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];
-    return store.setState({ onSelectionChangeHandlers: nextOnSelectionChangeHandlers }), () => {
-      const nextHandlers = store.getState().onSelectionChangeHandlers.filter((fn) => fn !== onChange);
-      store.setState({ onSelectionChangeHandlers: nextHandlers });
-    };
-  }, [onChange]);
-}
 function useNodesData(nodeIds) {
   return useStore$1(reactExports.useCallback((s) => {
     const data = [], isArrayOfIds = Array.isArray(nodeIds), _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
@@ -25854,7 +25811,12 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   }, {}), cancel: (process2) => stepsOrder.forEach((key) => steps2[key].cancel(process2)), state, steps: steps2 };
 }
 const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, !1);
-function useVisualElement(Component, visualState, props2, createVisualElement) {
+function isRefObject(ref) {
+  return ref && typeof ref == "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+}
+const SwitchLayoutGroupContext = reactExports.createContext({});
+let scheduleHandoffComplete = !1;
+function useVisualElement(Component, visualState, props2, createVisualElement, ProjectionNodeConstructor) {
   const { visualElement: parent } = reactExports.useContext(MotionContext), lazyContext = reactExports.useContext(LazyContext), presenceContext = reactExports.useContext(PresenceContext), reducedMotionConfig = reactExports.useContext(MotionConfigContext).reducedMotion, visualElementRef = reactExports.useRef();
   createVisualElement = createVisualElement || lazyContext.renderer, !visualElementRef.current && createVisualElement && (visualElementRef.current = createVisualElement(Component, {
     visualState,
@@ -25864,19 +25826,44 @@ function useVisualElement(Component, visualState, props2, createVisualElement) {
     blockInitialAnimation: presenceContext ? presenceContext.initial === !1 : !1,
     reducedMotionConfig
   }));
-  const visualElement = visualElementRef.current;
-  reactExports.useInsertionEffect(() => {
+  const visualElement = visualElementRef.current, initialLayoutGroupConfig = reactExports.useContext(SwitchLayoutGroupContext);
+  visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg") && createProjectionNode(visualElementRef.current, props2, ProjectionNodeConstructor, initialLayoutGroupConfig), reactExports.useInsertionEffect(() => {
     visualElement && visualElement.update(props2, presenceContext);
   });
   const wantsHandoff = reactExports.useRef(!!(props2[optimizedAppearDataAttribute] && !window.HandoffComplete));
   return useIsomorphicLayoutEffect$2(() => {
-    visualElement && (microtask.postRender(visualElement.render), wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges());
+    visualElement && (visualElement.updateFeatures(), microtask.render(visualElement.render), wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges());
   }), reactExports.useEffect(() => {
-    visualElement && (visualElement.updateFeatures(), !wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges(), wantsHandoff.current && (wantsHandoff.current = !1, window.HandoffComplete = !0));
+    visualElement && (!wantsHandoff.current && visualElement.animationState && visualElement.animationState.animateChanges(), wantsHandoff.current && (wantsHandoff.current = !1, scheduleHandoffComplete || (scheduleHandoffComplete = !0, queueMicrotask(completeHandoff))));
   }), visualElement;
 }
-function isRefObject(ref) {
-  return ref && typeof ref == "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+function completeHandoff() {
+  window.HandoffComplete = !0;
+}
+function createProjectionNode(visualElement, props2, ProjectionNodeConstructor, initialPromotionConfig) {
+  const { layoutId, layout, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = props2;
+  visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props2["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)), visualElement.projection.setOptions({
+    layoutId,
+    layout,
+    alwaysMeasureLayout: !!drag2 || dragConstraints && isRefObject(dragConstraints),
+    visualElement,
+    scheduleRender: () => visualElement.scheduleRender(),
+    /**
+     * TODO: Update options in an effect. This could be tricky as it'll be too late
+     * to update by the time layout animations run.
+     * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+     * ensuring it gets called if there's no potential layout animations.
+     *
+     */
+    animationType: typeof layout == "string" ? layout : "both",
+    initialPromotionConfig,
+    layoutScroll,
+    layoutRoot
+  });
+}
+function getClosestProjectingNode(visualElement) {
+  if (visualElement)
+    return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
 function useMotionRef(visualState, visualElement, externalRef) {
   return reactExports.useCallback(
@@ -25960,7 +25947,8 @@ function loadFeatures(features) {
       ...features[key]
     };
 }
-const LayoutGroupContext = reactExports.createContext({}), SwitchLayoutGroupContext = reactExports.createContext({}), motionComponentSymbol = Symbol.for("motionComponentSymbol");
+const LayoutGroupContext = reactExports.createContext({}), motionComponentSymbol = Symbol.for("motionComponentSymbol"), noop$2 = (any) => any;
+let invariant$1 = noop$2;
 function createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component }) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props2, externalRef) {
@@ -25971,15 +25959,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
       layoutId: useLayoutId(props2)
     }, { isStatic } = configAndProps, context = useCreateMotionContext(props2), visualState = useVisualState(props2, isStatic);
     if (!isStatic && isBrowser$1) {
-      context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
-      const initialLayoutGroupConfig = reactExports.useContext(SwitchLayoutGroupContext), isStrict = reactExports.useContext(LazyContext).strict;
-      context.visualElement && (MeasureLayout = context.visualElement.loadFeatures(
-        // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-        configAndProps,
-        isStrict,
-        preloadedFeatures,
-        initialLayoutGroupConfig
-      ));
+      useStrictMode();
+      const layoutProjection = getProjectionFunctionality(configAndProps);
+      MeasureLayout = layoutProjection.MeasureLayout, context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
     }
     return jsxRuntimeExports.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? jsxRuntimeExports.jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component, props2, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
   }
@@ -25990,6 +25972,19 @@ function useLayoutId({ layoutId }) {
   const layoutGroupId = reactExports.useContext(LayoutGroupContext).id;
   return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
 }
+function useStrictMode(configAndProps, preloadedFeatures) {
+  reactExports.useContext(LazyContext).strict;
+}
+function getProjectionFunctionality(props2) {
+  const { drag: drag2, layout } = featureDefinitions;
+  if (!drag2 && !layout)
+    return {};
+  const combined = { ...drag2, ...layout };
+  return {
+    MeasureLayout: drag2?.isEnabled(props2) || layout?.isEnabled(props2) ? combined.MeasureLayout : void 0,
+    ProjectionNode: combined.ProjectionNode
+  };
+}
 function createMotionProxy(createConfig) {
   function custom5(Component, customMotionComponentConfig = {}) {
     return createMotionComponent(createConfig(Component, customMotionComponentConfig));
@@ -26463,7 +26458,7 @@ function makeLatestValues(props2, context, presenceContext, scrapeMotionValues)
       values2[key] = transitionEnd[key];
   }), values2;
 }
-const noop$2 = (any) => any, { schedule: frame, cancel: cancelFrame, state: frameData, steps } = createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$2, !0), svgMotionConfig = {
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps } = createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$2, !0), svgMotionConfig = {
   useVisualState: makeUseVisualState({
     scrapeMotionValuesFromProps,
     createRenderState: createSvgRenderState,
@@ -26788,7 +26783,6 @@ const time = {
 function isNone(value) {
   return typeof value == "number" ? value === 0 : value !== null ? value === "none" || value === "0" || isZeroValueString(value) : !0;
 }
-let invariant$1 = noop$2;
 const isNumericalString = (v2) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v2), splitCSSVariableRegex = (
   // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
   /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
@@ -27067,8 +27061,8 @@ class DOMKeyframesResolver extends KeyframeResolver {
       return;
     super.readKeyframes();
     for (let i = 0; i < unresolvedKeyframes.length; i++) {
-      const keyframe = unresolvedKeyframes[i];
-      if (typeof keyframe == "string" && isCSSVariableToken(keyframe)) {
+      let keyframe = unresolvedKeyframes[i];
+      if (typeof keyframe == "string" && (keyframe = keyframe.trim(), isCSSVariableToken(keyframe))) {
         const resolved = getVariableValue(keyframe, element2.current);
         resolved !== void 0 && (unresolvedKeyframes[i] = resolved), i === unresolvedKeyframes.length - 1 && (this.finalKeyframe = keyframe);
       }
@@ -27394,25 +27388,30 @@ function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
     alpha: alpha2
   };
 }
+function mixImmediate(a, b) {
+  return (p2) => p2 > 0 ? b : a;
+}
 const mixLinearColor = (from, to, v2) => {
   const fromExpo = from * from, expo = v2 * (to * to - fromExpo) + fromExpo;
   return expo < 0 ? 0 : Math.sqrt(expo);
 }, colorTypes = [hex, rgba, hsla], getColorType = (v2) => colorTypes.find((type) => type.test(v2));
 function asRGBA(color2) {
   const type = getColorType(color2);
+  if (!type)
+    return !1;
   let model = type.parse(color2);
   return type === hsla && (model = hslaToRgba(model)), model;
 }
 const mixColor = (from, to) => {
-  const fromRGBA = asRGBA(from), toRGBA = asRGBA(to), blended = { ...fromRGBA };
+  const fromRGBA = asRGBA(from), toRGBA = asRGBA(to);
+  if (!fromRGBA || !toRGBA)
+    return mixImmediate(from, to);
+  const blended = { ...fromRGBA };
   return (v2) => (blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v2), blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v2), blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v2), blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v2), rgba.transform(blended));
 }, invisibleValues = /* @__PURE__ */ new Set(["none", "hidden"]);
 function mixVisibility(origin, target) {
   return invisibleValues.has(origin) ? (p2) => p2 <= 0 ? origin : target : (p2) => p2 >= 1 ? target : origin;
 }
-function mixImmediate(a, b) {
-  return (p2) => p2 > 0 ? b : a;
-}
 function mixNumber(a, b) {
   return (p2) => mixNumber$1(a, b, p2);
 }
@@ -27872,6 +27871,81 @@ class AcceleratedAnimation extends BaseAnimation {
     !motionValue2.owner.getProps().onUpdate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
   }
 }
+function observeTimeline(update, timeline) {
+  let prevProgress;
+  const onFrame = () => {
+    const { currentTime } = timeline, progress2 = (currentTime === null ? 0 : currentTime.value) / 100;
+    prevProgress !== progress2 && update(progress2), prevProgress = progress2;
+  };
+  return frame.update(onFrame, !0), () => cancelFrame(onFrame);
+}
+const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
+class GroupPlaybackControls {
+  constructor(animations2) {
+    this.stop = () => this.runAll("stop"), this.animations = animations2.filter(Boolean);
+  }
+  then(onResolve, onReject) {
+    return Promise.all(this.animations).then(onResolve).catch(onReject);
+  }
+  /**
+   * TODO: Filter out cancelled or stopped animations before returning
+   */
+  getAll(propName) {
+    return this.animations[0][propName];
+  }
+  setAll(propName, newValue) {
+    for (let i = 0; i < this.animations.length; i++)
+      this.animations[i][propName] = newValue;
+  }
+  attachTimeline(timeline) {
+    const cancelAll = this.animations.map((animation) => {
+      if (supportsScrollTimeline() && animation.attachTimeline)
+        animation.attachTimeline(timeline);
+      else
+        return animation.pause(), observeTimeline((progress2) => {
+          animation.time = animation.duration * progress2;
+        }, timeline);
+    });
+    return () => {
+      cancelAll.forEach((cancelTimeline, i) => {
+        cancelTimeline && cancelTimeline(), this.animations[i].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 duration() {
+    let max2 = 0;
+    for (let i = 0; i < this.animations.length; i++)
+      max2 = Math.max(max2, this.animations[i].duration);
+    return max2;
+  }
+  runAll(methodName) {
+    this.animations.forEach((controls) => controls[methodName]());
+  }
+  play() {
+    this.runAll("play");
+  }
+  pause() {
+    this.runAll("pause");
+  }
+  cancel() {
+    this.runAll("cancel");
+  }
+  complete() {
+    this.runAll("complete");
+  }
+}
 const animateMotionValue = (name, value, target, transition = {}, element2, isHandoff) => (onComplete) => {
   const valueTransition = getValueTransition(transition, name) || {}, delay = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
@@ -27899,12 +27973,10 @@ const animateMotionValue = (name, value, target, transition = {}, element2, isHa
   let shouldSkip = !1;
   if ((options.type === !1 || options.duration === 0 && !options.repeatDelay) && (options.duration = 0, options.delay === 0 && (shouldSkip = !0)), shouldSkip && !isHandoff && value.get() !== void 0) {
     const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
-    if (finalKeyframe !== void 0) {
-      frame.update(() => {
+    if (finalKeyframe !== void 0)
+      return frame.update(() => {
         options.onUpdate(finalKeyframe), options.onComplete();
-      });
-      return;
-    }
+      }), new GroupPlaybackControls([]);
   }
   return !isHandoff && AcceleratedAnimation.supports(options) ? new AcceleratedAnimation(options) : new MainThreadAnimation(options);
 };
@@ -27954,7 +28026,7 @@ class MotionValue {
    * @internal
    */
   constructor(init2, options = {}) {
-    this.version = "11.2.4", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
+    this.version = "11.2.12", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v2), 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;
@@ -28153,6 +28225,9 @@ function setTarget(visualElement, definition) {
     setMotionValue(visualElement, key, value);
   }
 }
+function getOptimisedAppearId(visualElement) {
+  return visualElement.getProps()[optimizedAppearDataAttribute];
+}
 function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
   const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== !0;
   return needsAnimating[key] = !1, shouldBlock;
@@ -28174,7 +28249,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     };
     let isHandoff = !1;
     if (window.HandoffAppearAnimations) {
-      const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
+      const appearId = getOptimisedAppearId(visualElement);
       if (appearId) {
         const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
         elapsed !== null && (valueTransition.elapsed = elapsed, isHandoff = !0);
@@ -28240,9 +28315,7 @@ function animateList(visualElement) {
   return (animations2) => Promise.all(animations2.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
 }
 function createAnimationState(visualElement) {
-  let animate = animateList(visualElement);
-  const state = createState();
-  let isInitialRender = !0;
+  let animate = 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);
@@ -28320,7 +28393,10 @@ function createAnimationState(visualElement) {
     animateChanges,
     setActive,
     setAnimateFunction,
-    getState: () => state
+    getState: () => state,
+    reset: () => {
+      state = createState(), isInitialRender = !0;
+    }
   };
 }
 function checkVariantsDidChange(prev, next) {
@@ -28356,7 +28432,7 @@ class AnimationFeature extends Feature {
   }
   updateAnimationControlsSubscription() {
     const { animate } = this.node.getProps();
-    this.unmount(), isAnimationControls(animate) && (this.unmount = animate.subscribe(this.node));
+    isAnimationControls(animate) && (this.unmountControls = animate.subscribe(this.node));
   }
   /**
    * Subscribe any provided AnimationControls to the component's VisualElement
@@ -28369,6 +28445,8 @@ class AnimationFeature extends Feature {
     animate !== prevAnimate && this.updateAnimationControlsSubscription();
   }
   unmount() {
+    var _a;
+    this.node.animationState.reset(), (_a = this.unmountControls) === null || _a === void 0 || _a.call(this);
   }
 }
 let id = 0;
@@ -28453,7 +28531,7 @@ function updateMotionValuesFromProps(element2, next, prev) {
     next[key] === void 0 && element2.removeValue(key);
   return next;
 }
-const visualElementStore = /* @__PURE__ */ new WeakMap(), valueTypes = [...dimensionValueTypes, color, complex], findValueType = (v2) => valueTypes.find(testValueType(v2)), featureNames = Object.keys(featureDefinitions), numFeatures = featureNames.length, propEventHandlers = [
+const visualElementStore = /* @__PURE__ */ new WeakMap(), valueTypes = [...dimensionValueTypes, color, complex], findValueType = (v2) => valueTypes.find(testValueType(v2)), propEventHandlers = [
   "AnimationStart",
   "AnimationComplete",
   "Update",
@@ -28462,10 +28540,6 @@ const visualElementStore = /* @__PURE__ */ new WeakMap(), valueTypes = [...dimen
   "LayoutAnimationStart",
   "LayoutAnimationComplete"
 ], numVariantProps = variantProps.length;
-function getClosestProjectingNode(visualElement) {
-  if (visualElement)
-    return visualElement.options.allowProjection !== !1 ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
-}
 class VisualElement {
   /**
    * This method takes React props and returns found MotionValues. For example, HTML
@@ -28493,12 +28567,13 @@ class VisualElement {
     this.current = instance, visualElementStore.set(instance, this), this.projection && !this.projection.instance && this.projection.mount(instance), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((value, key) => this.bindToMotionValue(key, value)), hasReducedMotionListener.current || initPrefersReducedMotion(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : prefersReducedMotion.current, this.parent && this.parent.children.add(this), this.update(this.props, this.presenceContext);
   }
   unmount() {
-    var _a;
     visualElementStore.delete(this.current), this.projection && this.projection.unmount(), cancelFrame(this.notifyUpdate), cancelFrame(this.render), this.valueSubscriptions.forEach((remove2) => remove2()), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
     for (const key in this.events)
       this.events[key].clear();
-    for (const key in this.features)
-      (_a = this.features[key]) === null || _a === void 0 || _a.unmount();
+    for (const key in this.features) {
+      const feature = this.features[key];
+      feature && (feature.unmount(), feature.isMounted = !1);
+    }
     this.current = null;
   }
   bindToMotionValue(key, value) {
@@ -28512,40 +28587,17 @@ class VisualElement {
   sortNodePosition(other) {
     return !this.current || !this.sortInstanceNodePosition || this.type !== other.type ? 0 : this.sortInstanceNodePosition(this.current, other.current);
   }
-  loadFeatures({ children: children2, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {
-    let ProjectionNodeConstructor, MeasureLayout;
-    for (let i = 0; i < numFeatures; i++) {
-      const name = featureNames[i], { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent } = featureDefinitions[name];
-      ProjectionNode && (ProjectionNodeConstructor = ProjectionNode), isEnabled(renderedProps) && (!this.features[name] && FeatureConstructor && (this.features[name] = new FeatureConstructor(this)), MeasureLayoutComponent && (MeasureLayout = MeasureLayoutComponent));
-    }
-    if ((this.type === "html" || this.type === "svg") && !this.projection && ProjectionNodeConstructor) {
-      this.projection = new ProjectionNodeConstructor(this.latestValues, getClosestProjectingNode(this.parent));
-      const { layoutId, layout, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = renderedProps;
-      this.projection.setOptions({
-        layoutId,
-        layout,
-        alwaysMeasureLayout: !!drag2 || dragConstraints && isRefObject(dragConstraints),
-        visualElement: this,
-        scheduleRender: () => this.scheduleRender(),
-        /**
-         * TODO: Update options in an effect. This could be tricky as it'll be too late
-         * to update by the time layout animations run.
-         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-         * ensuring it gets called if there's no potential layout animations.
-         *
-         */
-        animationType: typeof layout == "string" ? layout : "both",
-        initialPromotionConfig: initialLayoutGroupConfig,
-        layoutScroll,
-        layoutRoot
-      });
-    }
-    return MeasureLayout;
-  }
   updateFeatures() {
-    for (const key in this.features) {
-      const feature = this.features[key];
-      feature.isMounted ? feature.update() : (feature.mount(), feature.isMounted = !0);
+    let key = "animation";
+    for (key in featureDefinitions) {
+      const featureDefinition = featureDefinitions[key];
+      if (!featureDefinition)
+        continue;
+      const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
+      if (!this.features[key] && FeatureConstructor && isEnabled(this.props) && (this.features[key] = new FeatureConstructor(this)), this.features[key]) {
+        const feature = this.features[key];
+        feature.isMounted ? feature.update() : (feature.mount(), feature.isMounted = !0);
+      }
     }
   }
   triggerBuild() {
@@ -30720,24 +30772,7 @@ function useDiagramStoreApi() {
   const store = reactExports.useContext(DiagramContext);
   if (store === null)
     throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  return reactExports.useMemo(
-    () => ({
-      getState: store.getState,
-      setState: store.setState,
-      subscribe: store.subscribe
-    }),
-    [store]
-  );
-}
-function WhenInitialized({ children: children2 }) {
-  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = reactExports.useState(diagramApi.getState().initialized);
-  return reactExports.useEffect(() => {
-    if (!isInitialized)
-      return diagramApi.subscribe(
-        (s) => s.initialized,
-        setIsInitialized
-      );
-  }, [isInitialized]), isInitialized ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 }) : null;
+  return store;
 }
 const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
 function crt(v2) {
@@ -31850,8 +31885,8 @@ function useLayoutConstraints() {
         x: event.clientX,
         y: event.clientY
       };
-      const { xyflow } = diagramApi.getState();
-      solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
+      const { xyflow, cancelSaveManualLayout } = diagramApi.getState();
+      cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
     },
     onNodeDrag: (_event, xynode) => {
       invariant(solverRef.current, "solverRef.current should be defined"), solverRef.current?.onNodeDrag(xynode);
@@ -31896,8 +31931,7 @@ const trackedConnections = /* @__PURE__ */ new Map(), getTrackedConnectionState
   let isRecording = !0;
   api.setState = (state, replace, nameOrAction) => {
     const r2 = set2(state, replace);
-    if (!isRecording)
-      return r2;
+    if (!isRecording) return r2;
     const action = nameOrAction === void 0 ? { type: anonymousActionType || "anonymous" } : typeof nameOrAction == "string" ? { type: nameOrAction } : nameOrAction;
     return store === void 0 ? (connection?.send(action, get2()), r2) : (connection?.send(
       {
@@ -31993,8 +32027,7 @@ const trackedConnections = /* @__PURE__ */ new Map(), getTrackedConnectionState
             });
           case "IMPORT_STATE": {
             const { nextLiftedState } = message.payload, lastComputedState = (_a = nextLiftedState.computedStates.slice(-1)[0]) == null ? void 0 : _a.state;
-            if (!lastComputedState)
-              return;
+            if (!lastComputedState) return;
             setStateFromDevtools(store === void 0 ? lastComputedState : lastComputedState[store]), connection?.send(
               null,
               // FIXME no-any
@@ -32041,7 +32074,6 @@ const trackedConnections = /* @__PURE__ */ new Map(), getTrackedConnectionState
   Edge: 2,
   Element: 3
 }, MinZoom = 0.1, StringSet = Set, DEFAULT_PROPS = {
-  viewSyncState: "synced",
   viewSyncDebounceTimeout: null,
   initialized: !1,
   xyflowSynced: !1,
@@ -32078,7 +32110,6 @@ function createDiagramStore(props2) {
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
-              viewSyncState,
               xyflow,
               dimmed: dimmed2,
               xyflowSynced,
@@ -32092,17 +32123,8 @@ function createDiagramStore(props2) {
               hoveredEdgeId,
               hoveredNodeId
             } = get2();
-            if (viewSyncDebounceTimeout && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null), shallowEqual(current, nextView)) {
-              (!xyflowSynced || viewSyncState === "changed") && set2(
-                {
-                  viewSyncState: "synced",
-                  xyflowSynced: !0
-                },
-                noReplace,
-                "updateView: xyflow synced"
-              );
+            if (viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null), shallowEqual(current, nextView))
               return;
-            }
             if (current.id === nextView.id) {
               const nodeIds = new StringSet(nextView.nodes.map((n2) => n2.id)), edgeIds = new StringSet(nextView.edges.map((e2) => e2.id));
               if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep)) && (activeDynamicViewStep = null), xyflowSynced = deepEqual([current.nodes, current.edges], [nextView.nodes, nextView.edges]), dimmed2.size > 0) {
@@ -32121,7 +32143,6 @@ function createDiagramStore(props2) {
             }
             set2(
               {
-                viewSyncState: "synced",
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
@@ -32159,16 +32180,16 @@ function createDiagramStore(props2) {
             }
           },
           setHoveredNode: (nodeId) => {
-            nodeId !== get2().hoveredNodeId && set2({ hoveredNodeId: nodeId }, noReplace, nodeId ? "setHoveredNode" : "unsetHoveredNode");
+            nodeId !== get2().hoveredNodeId && set2({ hoveredNodeId: nodeId });
           },
           setHoveredEdge: (edgeId) => {
-            edgeId !== get2().hoveredEdgeId && set2({ hoveredEdgeId: edgeId }, noReplace, edgeId ? "setHoveredEdge" : "unsetHoveredEdge");
+            edgeId !== get2().hoveredEdgeId && set2({ hoveredEdgeId: edgeId });
           },
           setLastClickedNode: (nodeId) => {
-            nodeId !== get2().lastClickedNodeId && set2({ lastClickedNodeId: nodeId }, noReplace, nodeId ? "setLastClickedNode" : "unsetLastClickedNode");
+            nodeId !== get2().lastClickedNodeId && set2({ lastClickedNodeId: nodeId });
           },
           setLastClickedEdge: (edgeId) => {
-            edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? "setLastClickedEdge" : "unsetLastClickedEdge");
+            edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId });
           },
           resetLastClicked: () => {
             let {
@@ -32237,15 +32258,21 @@ function createDiagramStore(props2) {
                 }
               return element2 !== origin ? (hasChanges = !0, element2) : origin;
             });
-            hasChanges && (updateView({
+            hasChanges && updateView({
               ...view,
               nodes
-            }), onChange && set2({ viewSyncState: "changed" }, noReplace, "change sync state")), onChange?.({ change });
+            }), onChange?.({ change });
+          },
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get2();
+            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set2({ viewSyncDebounceTimeout: null }));
           },
           triggerSaveManualLayout: (xystore) => {
             let { viewSyncDebounceTimeout: debounced, onChange } = get2();
             onChange && (debounced && clearTimeout(debounced), debounced = setTimeout(() => {
-              const { nodeLookup } = xystore.getState(), { xyflow, onChange: onChange2 } = get2(), movedNodes = new StringSet(), nodes = reduce([...nodeLookup.values()], (acc, node) => {
+              const { nodeLookup } = xystore.getState(), { xyflow, onChange: onChange2 } = get2();
+              set2({ viewSyncDebounceTimeout: null });
+              const movedNodes = new StringSet(), nodes = reduce([...nodeLookup.values()], (acc, node) => {
                 const dimensions = getNodeDimensions(node);
                 return isSamePoint$1(node.internals.positionAbsolute, node.data.element.position) || movedNodes.add(node.id), acc[node.data.fqn] = {
                   x: node.internals.positionAbsolute.x,
@@ -32258,19 +32285,20 @@ function createDiagramStore(props2) {
                 return !controlPoints && (movedNodes.has(source) || movedNodes.has(target)) && (controlPoints = bezierControlPoints(data.edge)), controlPoints && (acc[data.edge.id] = {
                   controlPoints
                 }), acc;
-              }, {}), change = {
+              }, {});
+              if (movedNodes.size === 0 && isEmpty(edges))
+                return;
+              onChange2?.({ change: {
                 op: "save-manual-layout",
                 nodes,
                 edges
-              };
-              set2({ viewSyncDebounceTimeout: null }, noReplace, "clear debounce timeout"), onChange2?.({ change });
-            }, 5e3), set2(
+              } });
+            }, 2e3), set2(
               {
-                viewSyncDebounceTimeout: debounced,
-                viewSyncState: "changed"
+                viewSyncDebounceTimeout: debounced
               },
               noReplace,
-              "change sync state"
+              "debounce sync state"
             ));
           },
           triggerOnNavigateTo: (xynodeId, event) => {
@@ -33130,7 +33158,7 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
     let hasMoved = !1, pointer2 = { x: e2.clientX, y: e2.clientY };
     const onPointerMove = (e22) => {
       if (!isSamePoint(pointer2, [e22.clientX, e22.clientY])) {
-        hasMoved = !0, pointer2 = { x: e22.clientX, y: e22.clientY };
+        hasMoved || diagramStore.getState().cancelSaveManualLayout(), hasMoved = !0, pointer2 = { x: e22.clientX, y: e22.clientY };
         const { x: x2, y: y2 } = xyflow.screenToFlowPosition(pointer2, { snapToGrid: !1 }), newControlPoints = controlPoints.slice();
         newControlPoints[index2] = {
           x: toDomPrecision(x2),
@@ -33155,6 +33183,16 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
       "data-edge-active": isActive,
       "data-edge-hovered": isHovered,
       children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            className: clsx("react-flow__edge-interaction"),
+            d: edgePath,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: interactionWidth ?? 10
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: markerContext, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "marker",
@@ -33194,16 +33232,6 @@ const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "path",
-          {
-            className: clsx("react-flow__edge-interaction"),
-            d: edgePath,
-            fill: "none",
-            strokeOpacity: 0,
-            strokeWidth: interactionWidth ?? 10
-          }
-        ),
         isEdgePathEditable && controlPoints.map((p2, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "circle",
           {
@@ -33274,7 +33302,7 @@ var defaultAttributes = {
 };
 const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   const Component = reactExports.forwardRef(
-    ({ color: color2 = "currentColor", size: size2 = 24, stroke = 2, className, children: children2, ...rest }, ref) => reactExports.createElement(
+    ({ color: color2 = "currentColor", size: size2 = 24, stroke = 2, title: title2, className, children: children2, ...rest }, ref) => reactExports.createElement(
       "svg",
       {
         ref,
@@ -33291,6 +33319,7 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
         ...rest
       },
       [
+        title2 && reactExports.createElement("title", { key: "svg-title" }, title2),
         ...iconNode.map(([tag, attrs]) => reactExports.createElement(tag, attrs)),
         ...Array.isArray(children2) ? children2 : [children2]
       ]
@@ -33303,11 +33332,14 @@ var IconArrowLeft = createReactComponent("outline", "arrow-left", "IconArrowLeft
 var IconBrandReact = createReactComponent("outline", "brand-react", "IconBrandReact", [["path", { d: "M6.306 8.711c-2.602 .723 -4.306 1.926 -4.306 3.289c0 2.21 4.477 4 10 4c.773 0 1.526 -.035 2.248 -.102", key: "svg-0" }], ["path", { d: "M17.692 15.289c2.603 -.722 4.308 -1.926 4.308 -3.289c0 -2.21 -4.477 -4 -10 -4c-.773 0 -1.526 .035 -2.25 .102", key: "svg-1" }], ["path", { d: "M6.305 15.287c-.676 2.615 -.485 4.693 .695 5.373c1.913 1.105 5.703 -1.877 8.464 -6.66c.387 -.67 .733 -1.339 1.036 -2", key: "svg-2" }], ["path", { d: "M17.694 8.716c.677 -2.616 .487 -4.696 -.694 -5.376c-1.913 -1.105 -5.703 1.877 -8.464 6.66c-.387 .67 -.733 1.34 -1.037 2", key: "svg-3" }], ["path", { d: "M12 5.424c-1.925 -1.892 -3.82 -2.766 -5 -2.084c-1.913 1.104 -1.226 5.877 1.536 10.66c.386 .67 .793 1.304 1.212 1.896", key: "svg-4" }], ["path", { d: "M12 18.574c1.926 1.893 3.821 2.768 5 2.086c1.913 -1.104 1.226 -5.877 -1.536 -10.66c-.375 -.65 -.78 -1.283 -1.212 -1.897", key: "svg-5" }], ["path", { d: "M11.5 12.866a1 1 0 1 0 1 -1.732a1 1 0 0 0 -1 1.732z", key: "svg-6" }]]);
 var IconCheck = createReactComponent("outline", "check", "IconCheck", [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]]);
 var IconChevronDown = createReactComponent("outline", "chevron-down", "IconChevronDown", [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]]);
+var IconChevronLeft = createReactComponent("outline", "chevron-left", "IconChevronLeft", [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]]);
+var IconChevronRight = createReactComponent("outline", "chevron-right", "IconChevronRight", [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]]);
 var IconCopy = createReactComponent("outline", "copy", "IconCopy", [["path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]]);
 var IconExternalLink = createReactComponent("outline", "external-link", "IconExternalLink", [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]]);
 var IconFile = createReactComponent("outline", "file", "IconFile", [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }]]);
 var IconFolderOpen = createReactComponent("outline", "folder-open", "IconFolderOpen", [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", key: "svg-0" }]]);
 var IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "IconLayoutDashboard", [["path", { d: "M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-0" }], ["path", { d: "M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-1" }], ["path", { d: "M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-2" }], ["path", { d: "M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-3" }]]);
+var IconMenu = createReactComponent("outline", "menu", "IconMenu", [["path", { d: "M4 8l16 0", key: "svg-0" }], ["path", { d: "M4 16l16 0", key: "svg-1" }]]);
 var IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars", [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]]);
 var IconShare = createReactComponent("outline", "share", "IconShare", [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]]);
 var IconSun = createReactComponent("outline", "sun", "IconSun", [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]]);
@@ -33434,7 +33466,7 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
     }
   );
 }, isEqualProps$1);
-var container$2 = "_14ylloj2", dimmed = "_14ylloj3", indicator = "_14ylloj5", fillElementFill = "_14ylloj6", fillMixStroke = "_14ylloj8", title$1 = "_14ylloj9", description$1 = "_14ylloja", technology = "_14yllojb", element = "_14yllojc", iconMaxH = "var(--_14yllojd)", elementIcon = "_14ylloje", cssShapeSvg = "_14yllojh", cssNavigateBtn = "_14ylloji";
+var container$2 = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed = "_14ylloj4", indicator = "_14ylloj6", fillElementFill = "_14ylloj7", fillMixStroke = "_14ylloj9", title$1 = "_14ylloja", description$1 = "_14yllojb", technology = "_14yllojc", element = "_14yllojd", iconMaxH = "var(--_14ylloje)", elementIcon = "_14yllojf", cssShapeSvg = "_14ylloji", cssNavigateBtn = "_14yllojj";
 function ElementIcon({
   node,
   paddingY = 32
@@ -33703,13 +33735,13 @@ const selectedScale = 1.015, variants = {
   idle: (_, { scale: scale2 }) => ({
     scale: 1,
     transition: {
-      delay: isNumber(scale2) && scale2 > selectedScale ? 0.075 : 0
+      delay: isNumber(scale2) && scale2 > selectedScale ? 0.09 : 0
     }
   }),
   selected: (_, { scale: scale2 }) => ({
     scale: selectedScale,
     transition: {
-      delay: isNumber(scale2) && scale2 > selectedScale ? 0.075 : 0
+      delay: isNumber(scale2) && scale2 > selectedScale ? 0.09 : 0
     }
   }),
   // dimmed: {
@@ -33733,12 +33765,9 @@ const selectedScale = 1.015, variants = {
   //     delay: 1
   //   }
   // }),
-  hovered: (_, { scale: scale2 }) => ({
-    scale: 1.06,
-    transition: {
-      delay: isNumber(scale2) && scale2 !== 1 && scale2 !== selectedScale ? 0 : 0.15
-    }
-  }),
+  hovered: {
+    scale: 1.06
+  },
   tap: {
     scale: 0.975
   }
@@ -33784,8 +33813,10 @@ const selectedScale = 1.015, variants = {
       className: clsx([
         container$2,
         isDimmed && dimmed,
+        animate !== "idle" && containerAnimated,
         "likec4-element-node"
       ]),
+      "data-hovered": !dragging && isHovered,
       "data-likec4-color": element$1.color,
       "data-likec4-shape": element$1.shape,
       variants,
@@ -34098,7 +34129,87 @@ function XYFlow({
     }
   );
 }
-var container$1 = "_19ci0hj0", paper = "_19ci0hj1", title = "_19ci0hj2", description = "_19ci0hj3";
+function useNavigationHistory() {
+  const store = useDiagramStoreApi(), viewId = useDiagramState((s) => s.view.id), [historyViewId, historyOps, {
+    history,
+    current: historyIndex
+  }] = useStateHistory(viewId), hasBack = historyIndex > 0, hasForward = historyIndex < history.length - 1;
+  return useUpdateEffect(() => {
+    viewId !== historyViewId && historyOps.set(viewId);
+  }, [viewId]), useUpdateEffect(() => {
+    viewId !== historyViewId && store.getState().onNavigateTo?.(historyViewId);
+  }, [historyViewId]), reactExports.useMemo(() => ({
+    hasBack,
+    hasForward,
+    ops: historyOps
+  }), [
+    hasBack,
+    hasForward,
+    historyOps
+  ]);
+}
+var panel$1 = "ufby1u0";
+function BackwardForwardPanel() {
+  const { hasBack, hasForward, ops } = useNavigationHistory();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Group,
+    {
+      className: clsx(
+        "react-flow__panel",
+        panel$1,
+        "likec4-navigation-panel"
+      ),
+      gap: "xs",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AnimatePresence, { children: [
+        hasBack && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          m.div,
+          {
+            layout: !0,
+            initial: { opacity: 0.05, transform: "translateX(-10px)" },
+            animate: { opacity: 1, transform: "translateX(0)" },
+            exit: {
+              opacity: 0.05,
+              transform: "translateX(-10px)"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ActionIcon,
+              {
+                variant: "light",
+                color: "gray",
+                onClick: () => ops.back(),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronLeft, {})
+              }
+            )
+          },
+          "back"
+        ),
+        hasForward && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          m.div,
+          {
+            layout: !0,
+            initial: { opacity: 0.05, transform: "translateX(10px)" },
+            animate: { opacity: 1, transform: "translateX(0)" },
+            exit: {
+              opacity: 0,
+              transform: "translateX(10px)"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ActionIcon,
+              {
+                variant: "light",
+                color: "gray",
+                onClick: () => ops.forward(),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronRight, {})
+              }
+            )
+          },
+          "forward"
+        )
+      ] })
+    }
+  );
+}
+var container$1 = "_19ci0hj0", card = "_19ci0hj1", title = "_19ci0hj2", description = "_19ci0hj3";
 const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
@@ -34123,16 +34234,29 @@ function DiagramTitlePanel() {
       style: {
         transformOrigin: "left center"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Paper,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Card,
         {
           radius: "sm",
-          withBorder: !isCollapsed,
-          className: paper,
-          p: isCollapsed ? "xs" : "lg",
+          className: card,
+          p: "md",
           onDoubleClick: (e2) => e2.stopPropagation(),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { gap: "sm", justify: "stretch", align: "stretch", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { justify: "stretch", wrap: "nowrap", onClick: toggle, style: { cursor: "pointer" }, children: [
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CardSection, { mb: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                fullWidth: !0,
+                size: "xs",
+                h: "sm",
+                py: 2,
+                radius: "0",
+                variant: "subtle",
+                color: "gray",
+                onClick: toggle,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconMenu, { size: 11, opacity: 0.7 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: isCollapsed ? 0 : "sm", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Text,
                 {
@@ -34230,7 +34354,7 @@ function DiagramTitlePanel() {
                 }
               )
             ] })
-          ] })
+          ]
         }
       )
     },
@@ -34546,14 +34670,16 @@ function BorderStyleOption({
   ) });
 }
 var panel = "_12rmdgk0";
-const OptionsPanelMemo = reactExports.memo(function() {
-  const isFocusDisabled = useDiagramState((s) => isNullish(s.focusedNodeId)), [selectedNodes, setSelectedNodes] = reactExports.useState([]);
-  return useOnSelectionChange({
-    onChange: ({ nodes }) => {
-      const next = nodes.map((n2) => n2.id);
-      setSelectedNodes((prev) => deepEqual(prev, next) ? prev : next);
-    }
-  }), /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { mode: "wait", children: isFocusDisabled && selectedNodes.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+const Empty = [];
+function OptionsPanel() {
+  const { isFocusDisabled, viewId } = useDiagramState((s) => ({
+    viewId: s.view.id,
+    isFocusDisabled: s.focusedNodeId === null && s.activeDynamicViewStep === null
+  })), selectedNodes = useXYStore(
+    reactExports.useCallback((s) => s.elementsSelectable && isFocusDisabled ? reduce(s.nodes, (acc, n2) => (n2.selected && acc.push(n2.id), acc), []) : Empty, [isFocusDisabled]),
+    shallowEqual
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { mode: "wait", children: selectedNodes.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
     m.div,
     {
       initial: { opacity: 0, scale: 0.85 },
@@ -34568,9 +34694,10 @@ const OptionsPanelMemo = reactExports.memo(function() {
         transformOrigin: "center right"
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { shadow: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
-    }
+    },
+    viewId
   ) });
-}), OptionsPanel2 = OptionsPanelMemo;
+}
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -34594,10 +34721,11 @@ const XYFlowInner = reactExports.memo(function({
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
   const {
-    isDynamicView: isDynamicView2,
+    isDynamicView,
     isDynamicViewActive,
     readonly
   } = useDiagramState((s) => ({
@@ -34608,9 +34736,10 @@ const XYFlowInner = reactExports.memo(function({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     isBgWithPattern && /* @__PURE__ */ jsxRuntimeExports.jsx(XYFlowBackground, { background }),
     controls && /* @__PURE__ */ jsxRuntimeExports.jsx(Controls, { position: "bottom-right" }),
-    readonly === !1 && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsPanel2, {}),
+    readonly === !1 && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsPanel, {}),
     isDiagramTitleVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(DiagramTitlePanel, {}),
-    isDynamicView2 && enableDynamicViewWalkthrough && /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicViewWalkthrough, {}),
+    isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicViewWalkthrough, {}),
+    showNavigationButtons && /* @__PURE__ */ jsxRuntimeExports.jsx(BackwardForwardPanel, {}),
     children2
   ] });
 }, shallowEqual);
@@ -34628,6 +34757,7 @@ function LikeC4Diagram({
   controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
+  showNavigationButtons = !1,
   enableDynamicViewWalkthrough = !0,
   initialWidth,
   initialHeight,
@@ -34701,6 +34831,7 @@ function LikeC4Diagram({
                   controls,
                   pannable,
                   showDiagramTitle,
+                  showNavigationButtons,
                   enableDynamicViewWalkthrough
                 }
               )
@@ -34720,9 +34851,20 @@ const LikeC4DiagramInnerMemo = reactExports.memo(function({
   defaultNodes,
   defaultEdges,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = reactExports.useState(diagramApi.getState().initialized);
+  return reactExports.useEffect(() => {
+    if (!isInitialized)
+      return diagramApi.subscribe(
+        (s) => s.initialized,
+        setIsInitialized,
+        {
+          fireImmediately: !0
+        }
+      );
+  }, [isInitialized]), /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       XYFlow,
       {
@@ -34738,6 +34880,7 @@ const LikeC4DiagramInnerMemo = reactExports.memo(function({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           XYFlowInner,
           {
+            showNavigationButtons,
             showDiagramTitle,
             enableDynamicViewWalkthrough,
             background,
@@ -34746,7 +34889,7 @@ const LikeC4DiagramInnerMemo = reactExports.memo(function({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(WhenInitialized, { children: [
+    isInitialized && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(SyncWithDiagram, {}),
       fitView2 && /* @__PURE__ */ jsxRuntimeExports.jsx(FitViewOnDiagramChange, {}),
       fitView2 && zoomable && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectEdgesOnNodeFocus, {})
@@ -34907,7 +35050,7 @@ function useLikeC4View(id2) {
     keys: [id2]
   })[id2] ?? null;
 }
-var previewBg = "_15b5f732", svgContainer = "_1dn84dq1", cssViewOutlet = "_1dn84dq2", cssCaptureGesturesLayer = "_1dn84dq3", cssExportView = "_1dn84dq4", cssExportBox = "_1dn84dq5", cssWebcomponentView = "_1dn84dq6", cssWebcomponentIframeContainer = "_1dn84dq7";
+var previewBg = "_15b5f732", svgContainer = "_1dn84dq1", cssViewOutlet = "_1dn84dq3", cssCaptureGesturesLayer = "_1dn84dq4", cssExportView = "_1dn84dq5", cssExportBox = "_1dn84dq6", cssWebcomponentView = "_1dn84dq7", cssWebcomponentIframeContainer = "_1dn84dq8";
 const Route$9 = createFileRoute("/")({
   component: IndexPage
 });
@@ -35233,7 +35376,7 @@ function ColorSchemeToggle() {
     }
   );
 }
-var cssHeader = "yr9aef1", cssDiagramTitle = "yr9aef2";
+var cssHeader = "yr9aef0";
 const AlertLocalhost = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Alert,
   {
@@ -35406,24 +35549,36 @@ function ShareModal({
 }
 function Header({ diagram }) {
   const { breakpoints } = useMantineTheme(), isTablet = useMediaQuery(`(min-width: ${breakpoints.md})`) ?? !1, [opened, { open, close }] = useDisclosure(!1);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: cssHeader, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { flex: 1, visibleFrom: "xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DiagramTitle, { diagram }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { gap: isTablet ? "xs" : 4, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewPageButton, { isTablet }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ColorSchemeToggle, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { orientation: "vertical" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ml: "xs", size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsxRuntimeExports.jsx(IconShare, { size: 14 }), onClick: open, children: "Share" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ExportButton, { diagram })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ShareModal,
-      {
-        opened,
-        onClose: close,
-        diagram
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Paper,
+    {
+      className: cssHeader,
+      pos: "fixed",
+      top: "0.5rem",
+      right: "0.5rem",
+      py: 5,
+      px: "md",
+      radius: "sm",
+      shadow: "xl",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { gap: isTablet ? "xs" : 4, wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ViewPageButton, { isTablet }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ColorSchemeToggle, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { orientation: "vertical" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ml: "xs", size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsxRuntimeExports.jsx(IconShare, { size: 14 }), onClick: open, children: "Share" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ExportButton, { diagram })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ShareModal,
+          {
+            opened,
+            onClose: close,
+            diagram
+          }
+        )
+      ]
+    }
+  );
 }
 const viewPages = [
   {
@@ -35461,58 +35616,35 @@ function ViewPageButton({
   const { viewId } = useParams({
     from: "/view/$viewId"
   }), routerState = useRouterState(), matchedRoute = findLast(routerState.matches, ({ routeId }) => routeIds.includes(routeId)), matched = (matchedRoute && viewPages.find(({ route }) => route === matchedRoute.routeId)) ?? viewPages[0];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    matched.route === "/view/$viewId" && /* @__PURE__ */ jsxRuntimeExports.jsx(Center, { h: "100%", visibleFrom: "md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Link$1,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 100, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MenuTarget, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
       {
-        to: "/view/$viewId/editor",
-        params: { viewId },
-        style: {
-          display: "inline-block",
-          lineHeight: "16px"
-        },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Badge,
-          {
-            size: "xs",
-            radius: "xs",
-            variant: "gradient",
-            gradient: { from: "pink", to: "violet", deg: 90 },
-            children: "editor preview"
-          }
-        )
+        leftSection: matched.icon,
+        variant: "subtle",
+        size: isTablet ? "sm" : "xs",
+        color: "gray",
+        rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
+        children: matched.title
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 100, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(MenuTarget, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          leftSection: matched.icon,
-          variant: "subtle",
-          size: isTablet ? "sm" : "xs",
-          color: "gray",
-          rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronDown, { opacity: 0.5, size: 14 }),
-          children: matched.title
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(MenuDropdown, { children: viewPages.map(({ route, icon, title: title2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        MenuItem,
-        {
-          component: Link$1,
-          to: route,
-          search: !0,
-          params: { viewId },
-          leftSection: icon,
-          ...route === matched.route ? { bg: "gray" } : {},
-          style: {
-            whiteSpace: "nowrap"
-          },
-          children: title2
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MenuDropdown, { children: viewPages.map(({ route, icon, title: title2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MenuItem,
+      {
+        component: Link$1,
+        to: route,
+        search: !0,
+        params: { viewId },
+        leftSection: icon,
+        ...route === matched.route ? { bg: "gray" } : {},
+        style: {
+          whiteSpace: "nowrap"
         },
-        route
-      )) })
-    ] })
-  ] });
+        children: title2
+      },
+      route
+    )) })
+  ] }) });
 }
 function downloadImage(name, dataUrl) {
   const a = document.createElement("a");
@@ -35562,22 +35694,6 @@ function ExportButton({ diagram }) {
     ] })
   ] });
 }
-function DiagramTitle({ diagram }) {
-  const hasDescription = !isEmpty(diagram.description?.trim());
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { closeDelay: 500, position: "bottom-start", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: cssDiagramTitle, children: diagram.title || "Untitled" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardDropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: "xs", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardItem, { title: "view id", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Code, { color: "gray", children: diagram.id }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardItem, { title: "description", children: hasDescription ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "p", style: { whiteSpace: "pre-line" }, children: diagram.description?.trim() }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "dimmed", fz: "xs", children: "no description" }) })
-    ] }) })
-  ] });
-}
-function HoverCardItem({ title: title2, children: children2 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "xs", c: "dimmed", children: title2 }),
-    children2
-  ] });
-}
 const Route$7 = createFileRoute("/view/$viewId")({
   component: ViewLayout
 });
@@ -35748,6 +35864,7 @@ function ViewReact() {
       readonly: !0,
       controls: !1,
       fitViewPadding: 0.08,
+      showNavigationButtons: !0,
       onNavigateTo: (viewId2) => {
         router.navigate({
           to: "/view/$viewId",
@@ -37218,7 +37335,7 @@ function CopyButton({ text }) {
 function CopyToClipboard({ text }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { text }) });
 }
-var cssScrollArea = "_5k2wbq0", cssCodeBlock = "_5k2wbq1";
+var cssScrollArea = "_5k2wbq0", cssCodeBlock = "_5k2wbq1", viewWithTopPadding = "_5k2wbq2";
 const Route$3 = createFileRoute("/view/$viewId/mmd")({
   component: ViewAsMmd
 }), renderSvg = async (viewId, diagram) => {
@@ -37240,7 +37357,7 @@ function ViewAsMmd() {
   const { viewId } = Route$3.useParams(), source = useData$1(), [mmdSvg, { execute }] = useAsync(renderSvg, null);
   return reactExports.useEffect(() => {
     execute(viewId, source);
-  }, [source]), /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelGroup, { direction: "horizontal", autoSaveId: "viewAsMmd", children: [
+  }, [source]), /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsMmd", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Panel, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
@@ -37282,6 +37399,7 @@ function ViewEditor() {
       readonly: !1,
       nodesDraggable: !0,
       experimentalEdgeEditing: !0,
+      showNavigationButtons: !0,
       fitViewPadding: 0.08,
       onNavigateTo: (viewId2) => {
         router.navigate({
@@ -37312,7 +37430,7 @@ const Route$1 = createFileRoute("/view/$viewId/dot")({
 });
 function ViewAsDot() {
   const { dot, dotSvg } = Route$1.useLoaderData();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelGroup, { direction: "horizontal", autoSaveId: "viewAsDot", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsDot", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Panel, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
@@ -37352,7 +37470,7 @@ const Route2 = createFileRoute("/view/$viewId/d2")({
 };
 function ViewAsD2() {
   const source = useData();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelGroup, { direction: "horizontal", autoSaveId: "viewAsD2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsD2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Panel, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {