likec4 1.44.0 → 1.45.0

package/__app__/src/vendors.js

@@ -1450,17 +1450,51 @@ function getRefProp(element) {
   const version2 = React__default.version;
   return typeof React__default.version != "string" || version2.startsWith("18.") ? element?.ref : element?.props?.ref;
 }
-function r$d(e2) {
+function findElementBySelector(selector2, root2 = document) {
+  const element = root2.querySelector(selector2);
+  if (element)
+    return element;
+  const allElements = root2.querySelectorAll("*");
+  for (let i2 = 0; i2 < allElements.length; i2 += 1) {
+    const el = allElements[i2];
+    if (el.shadowRoot) {
+      const shadowElement = findElementBySelector(selector2, el.shadowRoot);
+      if (shadowElement)
+        return shadowElement;
+    }
+  }
+  return null;
+}
+function findElementsBySelector(selector2, root2 = document) {
+  const results = [], elements = root2.querySelectorAll(selector2);
+  results.push(...Array.from(elements));
+  const allElements = root2.querySelectorAll("*");
+  for (let i2 = 0; i2 < allElements.length; i2 += 1) {
+    const el = allElements[i2];
+    if (el.shadowRoot) {
+      const shadowElements = findElementsBySelector(selector2, el.shadowRoot);
+      results.push(...shadowElements);
+    }
+  }
+  return results;
+}
+function getRootElement(targetElement) {
+  if (!targetElement)
+    return document;
+  const root2 = targetElement.getRootNode();
+  return root2 instanceof ShadowRoot || root2 instanceof Document ? root2 : document;
+}
+function r$f(e2) {
   var t2, f, n2 = "";
   if (typeof e2 == "string" || typeof e2 == "number") n2 += e2;
   else if (typeof e2 == "object") if (Array.isArray(e2)) {
     var o = e2.length;
-    for (t2 = 0; t2 < o; t2++) e2[t2] && (f = r$d(e2[t2])) && (n2 && (n2 += " "), n2 += f);
+    for (t2 = 0; t2 < o; t2++) e2[t2] && (f = r$f(e2[t2])) && (n2 && (n2 += " "), n2 += f);
   } else for (f in e2) e2[f] && (n2 && (n2 += " "), n2 += f);
   return n2;
 }
 function clsx() {
-  for (var e2, t2, f = 0, n2 = "", o = arguments.length; f < o; f++) (e2 = arguments[f]) && (t2 = r$d(e2)) && (n2 && (n2 += " "), n2 += t2);
+  for (var e2, t2, f = 0, n2 = "", o = arguments.length; f < o; f++) (e2 = arguments[f]) && (t2 = r$f(e2)) && (n2 && (n2 += " "), n2 += t2);
   return n2;
 }
 const EMPTY_CLASS_NAMES = {};
@@ -2436,43 +2470,43 @@ function MantineCssVariables({
   ) : null;
 }
 MantineCssVariables.displayName = "@mantine/CssVariables";
-function setColorSchemeAttribute(colorScheme, getRootElement) {
+function setColorSchemeAttribute(colorScheme, getRootElement2) {
   const hasDarkColorScheme = typeof window < "u" && "matchMedia" in window && window.matchMedia("(prefers-color-scheme: dark)")?.matches, computedColorScheme = colorScheme !== "auto" ? colorScheme : hasDarkColorScheme ? "dark" : "light";
-  getRootElement()?.setAttribute("data-mantine-color-scheme", computedColorScheme);
+  getRootElement2()?.setAttribute("data-mantine-color-scheme", computedColorScheme);
 }
 function useProviderColorScheme({
   manager,
   defaultColorScheme,
-  getRootElement,
+  getRootElement: getRootElement2,
   forceColorScheme
 }) {
   const media = useRef(null), [value, setValue] = useState(() => manager.get(defaultColorScheme)), colorSchemeValue = forceColorScheme || value, setColorScheme = useCallback(
     (colorScheme) => {
-      forceColorScheme || (setColorSchemeAttribute(colorScheme, getRootElement), setValue(colorScheme), manager.set(colorScheme));
+      forceColorScheme || (setColorSchemeAttribute(colorScheme, getRootElement2), setValue(colorScheme), manager.set(colorScheme));
     },
     [manager.set, colorSchemeValue, forceColorScheme]
   ), clearColorScheme = useCallback(() => {
-    setValue(defaultColorScheme), setColorSchemeAttribute(defaultColorScheme, getRootElement), manager.clear();
+    setValue(defaultColorScheme), setColorSchemeAttribute(defaultColorScheme, getRootElement2), manager.clear();
   }, [manager.clear, defaultColorScheme]);
   return useEffect(() => (manager.subscribe(setColorScheme), manager.unsubscribe), [manager.subscribe, manager.unsubscribe]), useIsomorphicEffect(() => {
-    setColorSchemeAttribute(manager.get(defaultColorScheme), getRootElement);
+    setColorSchemeAttribute(manager.get(defaultColorScheme), getRootElement2);
   }, []), useEffect(() => {
     if (forceColorScheme)
-      return setColorSchemeAttribute(forceColorScheme, getRootElement), () => {
+      return setColorSchemeAttribute(forceColorScheme, getRootElement2), () => {
       };
-    forceColorScheme === void 0 && setColorSchemeAttribute(value, getRootElement), typeof window < "u" && "matchMedia" in window && (media.current = window.matchMedia("(prefers-color-scheme: dark)"));
+    forceColorScheme === void 0 && setColorSchemeAttribute(value, getRootElement2), typeof window < "u" && "matchMedia" in window && (media.current = window.matchMedia("(prefers-color-scheme: dark)"));
     const listener = (event) => {
-      value === "auto" && setColorSchemeAttribute(event.matches ? "dark" : "light", getRootElement);
+      value === "auto" && setColorSchemeAttribute(event.matches ? "dark" : "light", getRootElement2);
     };
     return media.current?.addEventListener("change", listener), () => media.current?.removeEventListener("change", listener);
   }, [value, forceColorScheme]), { colorScheme: colorSchemeValue, setColorScheme, clearColorScheme };
 }
 function useRespectReduceMotion({
   respectReducedMotion,
-  getRootElement
+  getRootElement: getRootElement2
 }) {
   useIsomorphicEffect(() => {
-    respectReducedMotion && getRootElement()?.setAttribute("data-respect-reduced-motion", "true");
+    respectReducedMotion && getRootElement2()?.setAttribute("data-respect-reduced-motion", "true");
   }, [respectReducedMotion]);
 }
 function MantineProvider({
@@ -2487,7 +2521,7 @@ function MantineProvider({
   classNamesPrefix = "mantine",
   colorSchemeManager = localStorageColorSchemeManager(),
   defaultColorScheme = "light",
-  getRootElement = () => document.documentElement,
+  getRootElement: getRootElement2 = () => document.documentElement,
   cssVariablesResolver,
   forceColorScheme,
   stylesTransform,
@@ -2497,11 +2531,11 @@ function MantineProvider({
     defaultColorScheme,
     forceColorScheme,
     manager: colorSchemeManager,
-    getRootElement
+    getRootElement: getRootElement2
   });
   return useRespectReduceMotion({
     respectReducedMotion: theme?.respectReducedMotion || !1,
-    getRootElement
+    getRootElement: getRootElement2
   }), /* @__PURE__ */ jsx(
     MantineContext.Provider,
     {
@@ -2509,7 +2543,7 @@ function MantineProvider({
         colorScheme,
         setColorScheme,
         clearColorScheme,
-        getRootElement,
+        getRootElement: getRootElement2,
         classNamesPrefix,
         getStyleNonce,
         cssVariablesResolver,
@@ -8937,6 +8971,7 @@ const varsResolver$w = (theme, { radius, color: color2, variant, autoContrast })
     closeButtonLabel,
     variant,
     autoContrast,
+    role,
     attributes,
     ...others
   } = props2, getStyles2 = useStyles({
@@ -8959,8 +8994,8 @@ const varsResolver$w = (theme, { radius, color: color2, variant, autoContrast })
       ...getStyles2("root", { variant }),
       variant,
       ref,
+      role: role || "alert",
       ...others,
-      role: "alert",
       "aria-describedby": children2 ? bodyId : void 0,
       "aria-labelledby": title ? titleId : void 0,
       children: /* @__PURE__ */ jsxs("div", { ...getStyles2("wrapper"), children: [
@@ -9096,7 +9131,7 @@ function getParsedComboboxData(data) {
 function getOptionsLockup(options) {
   return options.reduce((acc, item) => "group" in item ? { ...acc, ...getOptionsLockup(item.items) } : (acc[item.value] = item, acc), {});
 }
-var classes$r = { dropdown: "m_88b62a41", search: "m_985517d8", options: "m_b2821a6e", option: "m_92253aa5", empty: "m_2530cd1d", header: "m_858f94bd", footer: "m_82b967cb", group: "m_254f3e4f", groupLabel: "m_2bb2e9e5", chevron: "m_2943220b", optionsDropdownOption: "m_390b5f4", optionsDropdownCheckIcon: "m_8ee53fc2" };
+var classes$r = { dropdown: "m_88b62a41", search: "m_985517d8", options: "m_b2821a6e", option: "m_92253aa5", empty: "m_2530cd1d", header: "m_858f94bd", footer: "m_82b967cb", group: "m_254f3e4f", groupLabel: "m_2bb2e9e5", chevron: "m_2943220b", optionsDropdownOption: "m_390b5f4", optionsDropdownCheckIcon: "m_8ee53fc2", optionsDropdownCheckPlaceholder: "m_a530ee0a" };
 const defaultProps$A = {
   error: null
 }, varsResolver$u = (theme, { size: size2, color: color2 }) => ({
@@ -9556,11 +9591,11 @@ function useCombobox({
     },
     [closeDropdown, openDropdown, dropdownOpened]
   ), clearSelectedItem = useCallback(() => {
-    const selected2 = document.querySelector(`#${listId.current} [data-combobox-selected]`);
+    const root2 = getRootElement(targetRef.current), selected2 = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root2);
     selected2?.removeAttribute("data-combobox-selected"), selected2?.removeAttribute("aria-selected");
   }, []), selectOption = useCallback(
     (index2) => {
-      const items = document.getElementById(listId.current)?.querySelectorAll("[data-combobox-option]");
+      const root2 = getRootElement(targetRef.current), list2 = findElementBySelector(`#${listId.current}`, root2), items = list2 ? findElementsBySelector("[data-combobox-option]", list2) : null;
       if (!items)
         return null;
       const nextIndex = index2 >= items.length ? 0 : index2 < 0 ? items.length - 1 : index2;
@@ -9568,49 +9603,43 @@ function useCombobox({
     },
     [scrollBehavior, clearSelectedItem]
   ), selectActiveOption = useCallback(() => {
-    const activeOption = document.querySelector(
-      `#${listId.current} [data-combobox-active]`
+    const root2 = getRootElement(targetRef.current), activeOption = findElementBySelector(
+      `#${listId.current} [data-combobox-active]`,
+      root2
     );
     if (activeOption) {
-      const items = document.querySelectorAll(
-        `#${listId.current} [data-combobox-option]`
-      ), index2 = Array.from(items).findIndex((option) => option === activeOption);
+      const index2 = findElementsBySelector(
+        `#${listId.current} [data-combobox-option]`,
+        root2
+      ).findIndex((option) => option === activeOption);
       return selectOption(index2);
     }
     return selectOption(0);
-  }, [selectOption]), selectNextOption = useCallback(
-    () => selectOption(
-      getNextIndex(
-        selectedOptionIndex.current,
-        document.querySelectorAll(`#${listId.current} [data-combobox-option]`),
-        loop
-      )
-    ),
-    [selectOption, loop]
-  ), selectPreviousOption = useCallback(
-    () => selectOption(
-      getPreviousIndex(
-        selectedOptionIndex.current,
-        document.querySelectorAll(`#${listId.current} [data-combobox-option]`),
-        loop
-      )
-    ),
-    [selectOption, loop]
-  ), selectFirstOption = useCallback(
-    () => selectOption(
-      getFirstIndex(
-        document.querySelectorAll(`#${listId.current} [data-combobox-option]`)
-      )
-    ),
-    [selectOption]
-  ), updateSelectedOptionIndex = useCallback(
+  }, [selectOption]), selectNextOption = useCallback(() => {
+    const root2 = getRootElement(targetRef.current), items = findElementsBySelector(
+      `#${listId.current} [data-combobox-option]`,
+      root2
+    );
+    return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));
+  }, [selectOption, loop]), selectPreviousOption = useCallback(() => {
+    const root2 = getRootElement(targetRef.current), items = findElementsBySelector(
+      `#${listId.current} [data-combobox-option]`,
+      root2
+    );
+    return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));
+  }, [selectOption, loop]), selectFirstOption = useCallback(() => {
+    const root2 = getRootElement(targetRef.current), items = findElementsBySelector(
+      `#${listId.current} [data-combobox-option]`,
+      root2
+    );
+    return selectOption(getFirstIndex(items));
+  }, [selectOption]), updateSelectedOptionIndex = useCallback(
     (target = "selected", options) => {
       selectedIndexUpdateTimeout.current = window.setTimeout(() => {
-        const items = document.querySelectorAll(
-          `#${listId.current} [data-combobox-option]`
-        ), index2 = Array.from(items).findIndex(
-          (option) => option.hasAttribute(`data-combobox-${target}`)
-        );
+        const root2 = getRootElement(targetRef.current), items = findElementsBySelector(
+          `#${listId.current} [data-combobox-option]`,
+          root2
+        ), index2 = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));
         selectedOptionIndex.current = index2, options?.scrollIntoView && items[index2]?.scrollIntoView({ block: "nearest", behavior: scrollBehavior });
       }, 0);
     },
@@ -9618,8 +9647,10 @@ function useCombobox({
   ), resetSelectedOption = useCallback(() => {
     selectedOptionIndex.current = -1, clearSelectedItem();
   }, [clearSelectedItem]), clickSelectedOption = useCallback(() => {
-    document.querySelectorAll(
-      `#${listId.current} [data-combobox-option]`
+    const root2 = getRootElement(targetRef.current);
+    findElementsBySelector(
+      `#${listId.current} [data-combobox-option]`,
+      root2
     )?.[selectedOptionIndex.current]?.click();
   }, []), setListId = useCallback((id2) => {
     listId.current = id2;
@@ -9828,13 +9859,14 @@ function isValueChecked(value, optionValue) {
 function Option({
   data,
   withCheckIcon,
+  withAlignedLabels,
   value,
   checkIconPosition,
   unstyled,
   renderOption
 }) {
   if (!isOptionsGroup(data)) {
-    const checked = isValueChecked(value, data.value), check2 = withCheckIcon && checked && /* @__PURE__ */ jsx(CheckIcon, { className: classes$r.optionsDropdownCheckIcon }), defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    const checked = isValueChecked(value, data.value), check2 = withCheckIcon && (checked ? /* @__PURE__ */ jsx(CheckIcon, { className: classes$r.optionsDropdownCheckIcon }) : withAlignedLabels ? /* @__PURE__ */ jsx("div", { className: classes$r.optionsDropdownCheckPlaceholder }) : null), defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
       checkIconPosition === "left" && check2,
       /* @__PURE__ */ jsx("span", { children: data.label }),
       checkIconPosition === "right" && check2
@@ -9860,6 +9892,7 @@ function Option({
       value,
       unstyled,
       withCheckIcon,
+      withAlignedLabels,
       checkIconPosition,
       renderOption
     },
@@ -9878,6 +9911,7 @@ function OptionsDropdown({
   withScrollArea = !0,
   filterOptions = !0,
   withCheckIcon = !1,
+  withAlignedLabels = !1,
   value,
   checkIconPosition,
   nothingFoundMessage,
@@ -9897,6 +9931,7 @@ function OptionsDropdown({
     {
       data: item,
       withCheckIcon,
+      withAlignedLabels,
       value,
       checkIconPosition,
       unstyled,
@@ -9920,7 +9955,7 @@ function OptionsDropdown({
   ] }) });
 }
 var classes$q = { root: "m_347db0ec", "root--dot": "m_fbd81e3d", label: "m_5add502a", section: "m_91fdda9b" };
-const varsResolver$s = (theme, { radius, color: color2, gradient, variant, size: size2, autoContrast }) => {
+const varsResolver$s = (theme, { radius, color: color2, gradient, variant, size: size2, autoContrast, circle }) => {
   const colors = theme.variantColorResolver({
     color: color2 || theme.primaryColor,
     theme,
@@ -9933,7 +9968,7 @@ const varsResolver$s = (theme, { radius, color: color2, gradient, variant, size:
       "--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$1(radius),
+      "--badge-radius": circle || radius === void 0 ? void 0 : getRadius$1(radius),
       "--badge-bg": color2 || variant ? colors.background : void 0,
       "--badge-color": color2 || variant ? colors.color : void 0,
       "--badge-bd": color2 || variant ? colors.border : void 0,
@@ -11483,6 +11518,7 @@ const defaultProps$g = {
   offset: 0,
   position: "right-start",
   transitionProps: { duration: 0 },
+  openDelay: 0,
   middlewares: {
     shift: {
       // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally
@@ -11491,11 +11527,11 @@ const defaultProps$g = {
   }
 };
 function MenuSub(_props) {
-  const { children: children2, closeDelay, ...others } = useProps("MenuSub", defaultProps$g, _props), id2 = useId$2(), [opened, { open, close }] = useDisclosure(!1), ctx = useSubMenuContext(), { openDropdown, closeDropdown } = useDelayedHover({
+  const { children: children2, closeDelay, openDelay, ...others } = useProps("MenuSub", defaultProps$g, _props), id2 = useId$2(), [opened, { open, close }] = useDisclosure(!1), ctx = useSubMenuContext(), { openDropdown, closeDropdown } = useDelayedHover({
     open,
     close,
     closeDelay,
-    openDelay: 0
+    openDelay
   });
   return /* @__PURE__ */ jsx(
     SubMenuProvider,
@@ -12713,6 +12749,7 @@ const defaultProps$6 = {
     rightSection,
     checkIconPosition,
     withCheckIcon,
+    withAlignedLabels,
     nothingFoundMessage,
     name,
     form,
@@ -12864,6 +12901,7 @@ const defaultProps$6 = {
               value: _value,
               checkIconPosition,
               withCheckIcon,
+              withAlignedLabels,
               nothingFoundMessage,
               unstyled,
               labelId: others.label ? `${_id}-label` : void 0,
@@ -17434,7 +17472,7 @@ function e$h(e2, t2, n2) {
   let r2 = (n3) => e2(n3, ...t2);
   return n2 === void 0 ? r2 : Object.assign(r2, { lazy: n2, lazyArgs: t2 });
 }
-function t$x(t2, n2, r2) {
+function t$w(t2, n2, r2) {
   let i2 = t2.length - n2.length;
   if (i2 === 0) return t2(...n2);
   if (i2 === 1) return e$h(t2, n2, r2);
@@ -17445,28 +17483,28 @@ const e$g = (e2) => (n2, r2) => {
   if (!Number.isInteger(r2)) throw TypeError(`precision must be an integer: ${r2.toString()}`);
   if (r2 > 15 || r2 < -15) throw RangeError("precision must be between -15 and 15");
   if (Number.isNaN(n2) || !Number.isFinite(n2)) return e2(n2);
-  let i2 = t$w(n2, r2), a2 = e2(i2);
-  return t$w(a2, -r2);
+  let i2 = t$v(n2, r2), a2 = e2(i2);
+  return t$v(a2, -r2);
 };
-function t$w(e2, t2) {
+function t$v(e2, t2) {
   let [n2, r2] = e2.toString().split("e"), i2 = (r2 === void 0 ? 0 : Number.parseInt(r2, 10)) + t2, a2 = `${n2}e${i2.toString()}`;
   return Number.parseFloat(a2);
 }
-function n$v(...n2) {
-  return t$x(e$g(Math.ceil), n2);
-}
-function t$v(...t2) {
-  return t$x(n$u, t2);
+function n$u(...n2) {
+  return t$w(e$g(Math.ceil), n2);
 }
-const n$u = (e2, { min: t2, max: n2 }) => t2 !== void 0 && e2 < t2 ? t2 : n2 !== void 0 && e2 > n2 ? n2 : e2;
 function t$u(...t2) {
-  return t$x(n$t, t2);
+  return t$w(n$t, t2);
 }
-const n$t = (e2, t2) => [...e2, ...t2], t$t = { done: !1, hasNext: !1 };
-function t$s(e2, ...t2) {
-  let a2 = e2, o = t2.map((e3) => "lazy" in e3 ? r$c(e3) : void 0), s = 0;
+const n$t = (e2, { min: t2, max: n2 }) => t2 !== void 0 && e2 < t2 ? t2 : n2 !== void 0 && e2 > n2 ? n2 : e2;
+function t$t(...t2) {
+  return t$w(n$s, t2);
+}
+const n$s = (e2, t2) => [...e2, ...t2], t$s = { done: !1, hasNext: !1 }, r$e = (e2) => ({ hasNext: !0, next: e2, done: !1 });
+function t$r(e2, ...t2) {
+  let a2 = e2, o = t2.map((e3) => "lazy" in e3 ? r$d(e3) : void 0), s = 0;
   for (; s < t2.length; ) {
-    if (o[s] === void 0 || !i$5(a2)) {
+    if (o[s] === void 0 || !i$7(a2)) {
       let e4 = t2[s];
       a2 = e4(a2), s += 1;
       continue;
@@ -17477,20 +17515,20 @@ function t$s(e2, ...t2) {
       if (t3 === void 0 || (e3.push(t3), t3.isSingle)) break;
     }
     let r2 = [];
-    for (let t3 of a2) if (n$s(t3, r2, e3)) break;
+    for (let t3 of a2) if (n$r(t3, r2, e3)) break;
     let { isSingle: c } = e3.at(-1);
     a2 = c ? r2[0] : r2, s += e3.length;
   }
   return a2;
 }
-function n$s(t2, r2, i2) {
+function n$r(t2, r2, i2) {
   if (i2.length === 0) return r2.push(t2), !1;
-  let a2 = t2, o = t$t, s = !1;
+  let a2 = t2, o = t$s, s = !1;
   for (let [e2, t3] of i2.entries()) {
     let { index: c, items: l } = t3;
     if (l.push(a2), o = t3(a2, c, l), t3.index += 1, o.hasNext) {
       if (o.hasMany ?? !1) {
-        for (let t4 of o.next) if (n$s(t4, r2, i2.slice(e2 + 1))) return !0;
+        for (let t4 of o.next) if (n$r(t4, r2, i2.slice(e2 + 1))) return !0;
         return s;
       }
       a2 = o.next;
@@ -17500,32 +17538,44 @@ function n$s(t2, r2, i2) {
   }
   return o.hasNext && r2.push(a2), s;
 }
-function r$c(e2) {
+function r$d(e2) {
   let { lazy: t2, lazyArgs: n2 } = e2, r2 = t2(...n2);
   return Object.assign(r2, { isSingle: t2.single ?? !1, index: 0, items: [] });
 }
-function i$5(e2) {
+function i$7(e2) {
   return typeof e2 == "string" || typeof e2 == "object" && !!e2 && Symbol.iterator in e2;
 }
-function t$r(t2, n2) {
+function t$q(t2, n2) {
   let r2 = n2.length - t2.length;
   if (r2 === 1) {
     let [r3, ...i2] = n2;
-    return t$s(r3, { lazy: t2, lazyArgs: i2 });
+    return t$r(r3, { lazy: t2, lazyArgs: i2 });
   }
   if (r2 === 0) {
     let r3 = { lazy: t2, lazyArgs: n2 };
-    return Object.assign((t3) => t$s(t3, r3), r3);
+    return Object.assign((t3) => t$r(t3, r3), r3);
   }
   throw Error("Wrong number of arguments");
 }
-function t$q(...t2) {
-  return t$x(n$r, t2);
+function r$c(...e2) {
+  return t$q(i$6, e2);
 }
-const n$r = (e2, t2) => e2.length >= t2, e$f = { asc: (e2, t2) => e2 > t2, desc: (e2, t2) => e2 < t2 };
-function t$p(e2, t2) {
+function i$6(n2) {
+  if (n2.length === 0) return r$e;
+  let r2 = /* @__PURE__ */ new Map();
+  for (let e2 of n2) r2.set(e2, (r2.get(e2) ?? 0) + 1);
+  return (t2) => {
+    let n3 = r2.get(t2);
+    return n3 === void 0 || n3 === 0 ? { done: !1, hasNext: !0, next: t2 } : (r2.set(t2, n3 - 1), t$s);
+  };
+}
+function t$p(...t2) {
+  return t$w(n$q, t2);
+}
+const n$q = (e2, t2) => e2.length >= t2, e$f = { asc: (e2, t2) => e2 > t2, desc: (e2, t2) => e2 < t2 };
+function t$o(e2, t2) {
   let [n2, ...a2] = t2;
-  if (!i$4(n2)) {
+  if (!i$5(n2)) {
     let t3 = r$b(...a2);
     return e2(n2, t3);
   }
@@ -17539,51 +17589,44 @@ function r$b(t2, n2, ...i2) {
     return s(n3, r2) ? 1 : s(r2, n3) ? -1 : c?.(e2, t3) ?? 0;
   };
 }
-function i$4(t2) {
+function i$5(t2) {
   if (a$3(t2)) return !0;
   if (typeof t2 != "object" || !Array.isArray(t2)) return !1;
   let [n2, r2, ...i2] = t2;
   return a$3(n2) && typeof r2 == "string" && r2 in e$f && i2.length === 0;
 }
 const a$3 = (e2) => typeof e2 == "function" && e2.length === 1;
-function t$o(...t2) {
-  return t$x(Object.entries, t2);
+function t$n(...t2) {
+  return t$w(Object.entries, t2);
 }
-function n$q(...t2) {
-  return t$x(r$a, t2, i$3);
+function n$p(...t2) {
+  return t$w(r$a, t2, i$4);
 }
-const r$a = (e2, t2) => e2.filter(t2), i$3 = (e2) => (n2, r2, i2) => e2(n2, r2, i2) ? { done: !1, hasNext: !0, next: n2 } : t$t, e$e = (e2) => Object.assign(e2, { single: !0 });
+const r$a = (e2, t2) => e2.filter(t2), i$4 = (e2) => (n2, r2, i2) => e2(n2, r2, i2) ? { done: !1, hasNext: !0, next: n2 } : t$s, e$e = (e2) => Object.assign(e2, { single: !0 });
 function r$9(...t2) {
-  return t$x(i$2, t2, e$e(a$2));
+  return t$w(i$3, t2, e$e(a$2));
 }
-const i$2 = (e2, t2) => e2.find(t2), a$2 = (e2) => (n2, r2, i2) => e2(n2, r2, i2) ? { done: !0, hasNext: !0, next: n2 } : t$t;
-function n$p(...n2) {
-  return t$x(r$8, n2, e$e(i$1));
+const i$3 = (e2, t2) => e2.find(t2), a$2 = (e2) => (n2, r2, i2) => e2(n2, r2, i2) ? { done: !0, hasNext: !0, next: n2 } : t$s;
+function n$o(...n2) {
+  return t$w(r$8, n2, e$e(i$2));
 }
-const r$8 = ([e2]) => e2, i$1 = () => a$1, a$1 = (e2) => ({ hasNext: !0, next: e2, done: !0 });
-function t$n(...t2) {
-  return t$x(n$o, t2, r$7);
+const r$8 = ([e2]) => e2, i$2 = () => a$1, a$1 = (e2) => ({ hasNext: !0, next: e2, done: !0 });
+function t$m(...t2) {
+  return t$w(n$n, t2, r$7);
 }
-const n$o = (e2, t2) => e2.flatMap(t2), r$7 = (e2) => (t2, n2, r2) => {
+const n$n = (e2, t2) => e2.flatMap(t2), r$7 = (e2) => (t2, n2, r2) => {
   let i2 = e2(t2, n2, r2);
   return Array.isArray(i2) ? { done: !1, hasNext: !0, hasMany: !0, next: i2 } : { done: !1, hasNext: !0, next: i2 };
 };
-function t$m(...t2) {
-  return t$x(n$n, t2, r$6);
-}
-function n$n(e2, t2) {
-  return e2.forEach(t2), e2;
-}
-const r$6 = (e2) => (t2, n2, r2) => (e2(t2, n2, r2), { done: !1, hasNext: !0, next: t2 });
 function t$l(...t2) {
-  return t$x(n$m, t2);
+  return t$w(n$m, t2);
 }
 function n$m(e2, t2) {
   for (let [n2, r2] of Object.entries(e2)) t2(r2, n2, e2);
   return e2;
 }
 function t$k(...t2) {
-  return t$x(n$l, t2);
+  return t$w(n$l, t2);
 }
 const n$l = (e2, t2) => {
   let n2 = /* @__PURE__ */ Object.create(null);
@@ -17597,13 +17640,13 @@ const n$l = (e2, t2) => {
   return Object.setPrototypeOf(n2, Object.prototype), n2;
 };
 function t$j(...t2) {
-  return t$x(n$k, t2);
+  return t$w(n$k, t2);
 }
 function n$k(e2, t2) {
   if (e2 === t2 || Object.is(e2, t2)) return !0;
   if (typeof e2 != "object" || typeof t2 != "object" || e2 === null || t2 === null || Object.getPrototypeOf(e2) !== Object.getPrototypeOf(t2)) return !1;
-  if (Array.isArray(e2)) return r$5(e2, t2);
-  if (e2 instanceof Map) return i(e2, t2);
+  if (Array.isArray(e2)) return r$6(e2, t2);
+  if (e2 instanceof Map) return i$1(e2, t2);
   if (e2 instanceof Set) return a(e2, t2);
   if (e2 instanceof Date) return e2.getTime() === t2.getTime();
   if (e2 instanceof RegExp) return e2.toString() === t2.toString();
@@ -17611,12 +17654,12 @@ function n$k(e2, t2) {
   for (let [r2, i2] of Object.entries(e2)) if (!(r2 in t2) || !n$k(i2, t2[r2])) return !1;
   return !0;
 }
-function r$5(e2, t2) {
+function r$6(e2, t2) {
   if (e2.length !== t2.length) return !1;
   for (let [r2, i2] of e2.entries()) if (!n$k(i2, t2[r2])) return !1;
   return !0;
 }
-function i(e2, t2) {
+function i$1(e2, t2) {
   if (e2.size !== t2.size) return !1;
   for (let [r2, i2] of e2.entries()) if (!t2.has(r2) || !n$k(i2, t2.get(r2))) return !1;
   return !0;
@@ -17635,23 +17678,12 @@ function a(e2, t2) {
   return !0;
 }
 function n$j(...t2) {
-  return t$x(r$4, t2);
+  return t$w(r$5, t2);
 }
-function r$4(e2, n2) {
+function r$5(e2, n2) {
   for (let [r2, i2] of Object.entries(n2)) if (!Object.hasOwn(e2, r2) || !t$j(i2, e2[r2])) return !1;
   return !0;
 }
-function t$i(...t2) {
-  return t$x(n$i, t2);
-}
-function n$i(e2, t2) {
-  let n2 = {};
-  for (let [r2, i2] of e2.entries()) {
-    let a2 = t2(i2, r2, e2);
-    n2[a2] = i2;
-  }
-  return n2;
-}
 function e$d(e2) {
   return Array.isArray(e2);
 }
@@ -17682,6 +17714,36 @@ function e$4(e2) {
   let t2 = Object.getPrototypeOf(e2);
   return t2 === null || t2 === Object.prototype;
 }
+function t$i(...t2) {
+  return t$w(n$i, t2);
+}
+function n$i(e2, t2) {
+  if (e2 === t2 || Object.is(e2, t2)) return !0;
+  if (typeof e2 != "object" || !e2 || typeof t2 != "object" || !t2) return !1;
+  if (e2 instanceof Map && t2 instanceof Map) return r$4(e2, t2);
+  if (e2 instanceof Set && t2 instanceof Set) return i(e2, t2);
+  let n2 = Object.keys(e2);
+  if (n2.length !== Object.keys(t2).length) return !1;
+  for (let r2 of n2) {
+    if (!Object.hasOwn(t2, r2)) return !1;
+    let { [r2]: n3 } = e2, { [r2]: i2 } = t2;
+    if (n3 !== i2 || !Object.is(n3, i2)) return !1;
+  }
+  return !0;
+}
+function r$4(e2, t2) {
+  if (e2.size !== t2.size) return !1;
+  for (let [n2, r2] of e2) {
+    let e3 = t2.get(n2);
+    if (r2 !== e3 || !Object.is(r2, e3)) return !1;
+  }
+  return !0;
+}
+function i(e2, t2) {
+  if (e2.size !== t2.size) return !1;
+  for (let n2 of e2) if (!t2.has(n2)) return !1;
+  return !0;
+}
 function e$3(e2) {
   return typeof e2 == "string";
 }
@@ -17689,22 +17751,22 @@ function e$2(e2) {
   return !!e2;
 }
 function t$h(...t2) {
-  return t$x(n$h, t2);
+  return t$w(n$h, t2);
 }
 const n$h = (e2, t2) => e2.join(t2);
 function t$g(...t2) {
-  return t$x(Object.keys, t2);
+  return t$w(Object.keys, t2);
 }
 function t$f(...t2) {
-  return t$x(n$g, t2);
+  return t$w(n$g, t2);
 }
 const n$g = (e2) => e2.at(-1);
 function t$e(...t2) {
-  return t$x(n$f, t2, r$3);
+  return t$w(n$f, t2, r$3);
 }
 const n$f = (e2, t2) => e2.map(t2), r$3 = (e2) => (t2, n2, r2) => ({ done: !1, hasNext: !0, next: e2(t2, n2, r2) });
 function t$d(...t2) {
-  return t$x(n$e, t2);
+  return t$w(n$e, t2);
 }
 function n$e(e2, t2) {
   let n2 = {};
@@ -17715,7 +17777,7 @@ function n$e(e2, t2) {
   return n2;
 }
 function t$c(...t2) {
-  return t$x(n$d, t2);
+  return t$w(n$d, t2);
 }
 function n$d(e2, t2) {
   let n2 = {};
@@ -17723,7 +17785,7 @@ function n$d(e2, t2) {
   return n2;
 }
 function n$c(...t2) {
-  return t$x(r$2, t2);
+  return t$w(r$2, t2);
 }
 function r$2(e2, n2) {
   let i2 = { ...e2, ...n2 };
@@ -17737,11 +17799,11 @@ function r$2(e2, n2) {
   return i2;
 }
 function n$b(...t2) {
-  return t$x(r$1, t2);
+  return t$w(r$1, t2);
 }
 function r$1(e2, n2) {
-  if (!t$q(n2, 1)) return { ...e2 };
-  if (!t$q(n2, 2)) {
+  if (!t$p(n2, 1)) return { ...e2 };
+  if (!t$p(n2, 2)) {
     let { [n2[0]]: t2, ...r3 } = e2;
     return r3;
   }
@@ -17750,11 +17812,11 @@ function r$1(e2, n2) {
   return r2;
 }
 function t$b(...t2) {
-  return t$x(n$a, t2);
+  return t$w(n$a, t2);
 }
 const n$a = (e2) => e2.length === 1 ? e2[0] : void 0;
 function t$a(...t2) {
-  return t$x(n$9, t2);
+  return t$w(n$9, t2);
 }
 const n$9 = (e2, t2) => {
   let n2 = [[], []];
@@ -17762,7 +17824,7 @@ const n$9 = (e2, t2) => {
   return n2;
 };
 function t$9(...t2) {
-  return t$x(n$8, t2);
+  return t$w(n$8, t2);
 }
 function n$8(e2, t2) {
   let n2 = {};
@@ -17770,7 +17832,7 @@ function n$8(e2, t2) {
   return n2;
 }
 function t$8(...t2) {
-  return t$x(n$7, t2);
+  return t$w(n$7, t2);
 }
 function n$7(e2, t2) {
   let n2 = {};
@@ -17794,7 +17856,7 @@ function e(e2, t2) {
   return Math.floor(Math.random() * (r2 - n2 + 1) + n2);
 }
 function t$6(...t2) {
-  return t$x(n$6, t2);
+  return t$w(n$6, t2);
 }
 function n$6(e2, t2) {
   let n2 = [];
@@ -17802,38 +17864,38 @@ function n$6(e2, t2) {
   return n2;
 }
 function t$5(...t2) {
-  return t$x(n$5, t2);
+  return t$w(n$5, t2);
 }
 const n$5 = (e2, t2, n2) => e2.reduce(t2, n2);
 function t$4(...t2) {
-  return t$x(n$4, t2);
+  return t$w(n$4, t2);
 }
 function n$4(e2) {
   return [...e2].reverse();
 }
 function t$3(...t2) {
-  return t$x(n$3, t2);
+  return t$w(n$3, t2);
 }
 function n$3(e2, t2) {
   let n2 = [...e2];
   return n2.sort(t2), n2;
 }
 function t$2(...t2) {
-  return t$p(n$2, t2);
+  return t$o(n$2, t2);
 }
 const n$2 = (e2, t2) => [...e2].sort(t2);
 function t$1(...t2) {
-  return t$x(n$1, t2);
+  return t$w(n$1, t2);
 }
 function n$1(e2, t2) {
   return t2(e2), e2;
 }
 function n(...e2) {
-  return t$r(r, e2);
+  return t$q(r, e2);
 }
 function r() {
   let t2 = /* @__PURE__ */ new Set();
-  return (n2) => t2.has(n2) ? t$t : (t2.add(n2), { done: !1, hasNext: !0, next: n2 });
+  return (n2) => t2.has(n2) ? t$s : (t2.add(n2), { done: !1, hasNext: !0, next: n2 });
 }
 function useSyncedRef(value) {
   const ref = useRef(value);
@@ -20238,7 +20300,8 @@ const initialConnection = {
   to: null,
   toHandle: null,
   toPosition: null,
-  toNode: null
+  toNode: null,
+  pointer: null
 };
 var ConnectionLineType;
 (function(ConnectionLineType2) {
@@ -21333,7 +21396,8 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     to: position,
     toHandle: null,
     toPosition: oppositePosition[fromHandle.position],
-    toNode: null
+    toNode: null,
+    pointer: position
   };
   function startConnection() {
     connectionStarted = !0, updateConnection(previousConnection), onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -21372,9 +21436,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
       to: result.toHandle && isValid ? rendererPointToPoint({ x: result.toHandle.x, y: result.toHandle.y }, transform2) : position,
       toHandle: result.toHandle,
       toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
-      toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null
+      toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null,
+      pointer: position
     };
-    isValid && closestHandle && previousConnection.toHandle && newConnection.toHandle && previousConnection.toHandle.type === newConnection.toHandle.type && previousConnection.toHandle.nodeId === newConnection.toHandle.nodeId && previousConnection.toHandle.id === newConnection.toHandle.id && previousConnection.to.x === newConnection.to.x && previousConnection.to.y === newConnection.to.y || (updateConnection(newConnection), previousConnection = newConnection);
+    updateConnection(newConnection), previousConnection = newConnection;
   }
   function onPointerUp(event2) {
     if (!("touches" in event2 && event2.touches.length > 0)) {
@@ -21554,7 +21619,7 @@ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, pan
     return (!event.ctrlKey || isWheelEvent) && buttonAllowed;
   };
 }
-function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
+function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
   const zoomPanValues = {
     isZoomingOrPanning: !1,
     usedRightMouseButton: !1,
@@ -21563,7 +21628,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
     timerId: void 0,
     panScrollTimeout: void 0,
     isPanScrolling: !1
-  }, bbox = domNode.getBoundingClientRect(), d3ZoomInstance = zoom().clickDistance(!isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance).scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent), d3Selection = select(domNode).call(d3ZoomInstance);
+  }, bbox = domNode.getBoundingClientRect(), d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent), d3Selection = select(domNode).call(d3ZoomInstance);
   setViewportConstrained({
     x: viewport.x,
     y: viewport.y,
@@ -21579,9 +21644,11 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
       d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? interpolate$2 : interpolateZoom).transform(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(!0)), transform2);
     }) : Promise.resolve(!1);
   }
-  function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib: lib2, onTransformChange, connectionInProgress }) {
+  function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib: lib2, onTransformChange, connectionInProgress, paneClickDistance, selectionOnDrag }) {
     userSelectionActive && !zoomPanValues.isZoomingOrPanning && destroy();
-    const wheelHandler = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive ? createPanOnScrollHandler({
+    const isPanOnScroll = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive;
+    d3ZoomInstance.clickDistance(selectionOnDrag ? 1 / 0 : !isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance);
+    const wheelHandler = isPanOnScroll ? createPanOnScrollHandler({
       zoomPanValues,
       noWheelClassName,
       d3Selection,
@@ -22072,7 +22139,6 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "onBeforeDelete",
   "debug",
   "autoPanSpeed",
-  "paneClickDistance",
   "ariaLabelConfig"
 ], fieldsToTrack = [...reactFlowFieldsToTrack, "rfId"], selector$l = (s) => ({
   setNodes: s.setNodes,
@@ -22082,8 +22148,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   setTranslateExtent: s.setTranslateExtent,
   setNodeExtent: s.setNodeExtent,
   reset: s.reset,
-  setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
-  setPaneClickDistance: s.setPaneClickDistance
+  setDefaultNodesAndEdges: s.setDefaultNodesAndEdges
 }), initPrevValues = {
   /*
    * these are values that are also passed directly to other components
@@ -22096,11 +22161,10 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   maxZoom: 2,
   elementsSelectable: !0,
   noPanClassName: "nopan",
-  rfId: "1",
-  paneClickDistance: 0
+  rfId: "1"
 };
 function StoreUpdater(props2) {
-  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance } = useStore$1(selector$l, shallow$1), store = useStoreApi();
+  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore$1(selector$l, shallow$1), store = useStoreApi();
   useEffect(() => (setDefaultNodesAndEdges(props2.defaultNodes, props2.defaultEdges), () => {
     previousFields.current = initPrevValues, reset();
   }), []);
@@ -22109,7 +22173,7 @@ function StoreUpdater(props2) {
     () => {
       for (const fieldName of fieldsToTrack) {
         const fieldValue = props2[fieldName], previousFieldValue = previousFields.current[fieldName];
-        fieldValue !== previousFieldValue && (typeof props2[fieldName] > "u" || (fieldName === "nodes" ? setNodes(fieldValue) : fieldName === "edges" ? setEdges(fieldValue) : fieldName === "minZoom" ? setMinZoom(fieldValue) : fieldName === "maxZoom" ? setMaxZoom(fieldValue) : fieldName === "translateExtent" ? setTranslateExtent(fieldValue) : fieldName === "nodeExtent" ? setNodeExtent(fieldValue) : fieldName === "paneClickDistance" ? setPaneClickDistance(fieldValue) : fieldName === "ariaLabelConfig" ? store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) }) : fieldName === "fitView" ? store.setState({ fitViewQueued: fieldValue }) : fieldName === "fitViewOptions" ? store.setState({ fitViewOptions: fieldValue }) : store.setState({ [fieldName]: fieldValue })));
+        fieldValue !== previousFieldValue && (typeof props2[fieldName] > "u" || (fieldName === "nodes" ? setNodes(fieldValue) : fieldName === "edges" ? setEdges(fieldValue) : fieldName === "minZoom" ? setMinZoom(fieldValue) : fieldName === "maxZoom" ? setMaxZoom(fieldValue) : fieldName === "translateExtent" ? setTranslateExtent(fieldValue) : fieldName === "nodeExtent" ? setNodeExtent(fieldValue) : fieldName === "ariaLabelConfig" ? store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue) }) : fieldName === "fitView" ? store.setState({ fitViewQueued: fieldValue }) : fieldName === "fitViewOptions" ? store.setState({ fitViewOptions: fieldValue }) : store.setState({ [fieldName]: fieldValue })));
       }
       previousFields.current = props2;
     },
@@ -22554,7 +22618,7 @@ const containerStyle = {
   lib: s.lib,
   connectionInProgress: s.connection.inProgress
 });
-function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = !0, children: children2, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = !0, children: children2, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag }) {
   const store = useStoreApi(), zoomPane = useRef(null), { userSelectionActive, lib: lib2, connectionInProgress } = useStore$1(selector$j, shallow$1), zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode), panZoom = useRef();
   useResizeHandler(zoomPane);
   const onTransformChange = useCallback((transform2) => {
@@ -22568,7 +22632,6 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
         maxZoom,
         translateExtent,
         viewport: defaultViewport2,
-        paneClickDistance,
         onDraggingChange: (paneDragging) => store.setState({ paneDragging }),
         onPanZoomStart: (event, vp) => {
           const { onViewportChangeStart, onMoveStart } = store.getState();
@@ -22609,7 +22672,9 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
       noWheelClassName,
       lib: lib2,
       onTransformChange,
-      connectionInProgress
+      connectionInProgress,
+      selectionOnDrag,
+      paneClickDistance
     });
   }, [
     onPaneContextMenu,
@@ -22627,7 +22692,9 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = !0, zoomOnPinch = !0, panO
     noWheelClassName,
     lib2,
     onTransformChange,
-    connectionInProgress
+    connectionInProgress,
+    selectionOnDrag,
+    paneClickDistance
   ]), jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children2 });
 }
 const selector$i = (s) => ({
@@ -22650,8 +22717,8 @@ const wrapHandler = (handler, containerRef) => (event) => {
   connectionInProgress: s.connection.inProgress,
   dragging: s.paneDragging
 });
-function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
-  const store = useStoreApi(), { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore$1(selector$h, shallow$1), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), container = useRef(null), containerBounds = useRef(), selectedNodeIds = useRef(/* @__PURE__ */ new Set()), selectedEdgeIds = useRef(/* @__PURE__ */ new Set()), selectionInProgress = useRef(!1), selectionStarted = useRef(!1), onClick = (event) => {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+  const store = useStoreApi(), { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore$1(selector$h, shallow$1), isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive), container = useRef(null), containerBounds = useRef(), selectedNodeIds = useRef(/* @__PURE__ */ new Set()), selectedEdgeIds = useRef(/* @__PURE__ */ new Set()), selectionInProgress = useRef(!1), onClick = (event) => {
     if (selectionInProgress.current || connectionInProgress) {
       selectionInProgress.current = !1;
       return;
@@ -22664,16 +22731,17 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     }
     onPaneContextMenu?.(event);
   }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onClickCapture = (event) => {
-    (selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed) && event.stopPropagation();
+    selectionInProgress.current && (event.stopPropagation(), selectionInProgress.current = !1);
   }, onPointerDownCapture = (event) => {
-    const { resetSelectedElements, domNode } = store.getState();
-    containerBounds.current = domNode?.getBoundingClientRect();
-    const isNoKeyEvent = event.target !== container.current && !!event.target.closest(".nokey"), isSelectionActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
-    if (!elementsSelectable || !isSelecting || event.button !== 0 || !containerBounds.current || isNoKeyEvent || !isSelectionActive || !event.isPrimary)
+    const { domNode } = store.getState();
+    if (containerBounds.current = domNode?.getBoundingClientRect(), !containerBounds.current)
       return;
-    event.stopPropagation(), event.preventDefault(), event.target?.setPointerCapture?.(event.pointerId), selectionStarted.current = !0, selectionInProgress.current = !1;
+    const eventTargetIsContainer = event.target === container.current;
+    if (!eventTargetIsContainer && !!event.target.closest(".nokey") || !isSelecting || !(selectionOnDrag && eventTargetIsContainer || selectionKeyPressed) || event.button !== 0 || !event.isPrimary)
+      return;
+    event.target?.setPointerCapture?.(event.pointerId), selectionInProgress.current = !1;
     const { x: x2, y: y2 } = getEventPosition(event.nativeEvent, containerBounds.current);
-    resetSelectedElements(), store.setState({
+    store.setState({
       userSelectionRect: {
         width: 0,
         height: 0,
@@ -22682,13 +22750,20 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         x: x2,
         y: y2
       }
-    }), onSelectionStart?.(event);
+    }), eventTargetIsContainer || (event.stopPropagation(), event.preventDefault());
   }, onPointerMove = (event) => {
-    const { userSelectionRect, transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions } = store.getState();
+    const { userSelectionRect, transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, resetSelectedElements } = store.getState();
     if (!containerBounds.current || !userSelectionRect)
       return;
+    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current), { startX, startY } = userSelectionRect;
+    if (!selectionInProgress.current) {
+      const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
+      if (Math.hypot(mouseX - startX, mouseY - startY) <= requiredDistance)
+        return;
+      resetSelectedElements(), onSelectionStart?.(event);
+    }
     selectionInProgress.current = !0;
-    const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current), { startX, startY } = userSelectionRect, nextUserSelectRect = {
+    const nextUserSelectRect = {
       startX,
       startY,
       x: mouseX < startX ? mouseX : startX,
@@ -22720,17 +22795,14 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
       nodesSelectionActive: !1
     });
   }, onPointerUp = (event) => {
-    if (event.button !== 0 || !selectionStarted.current)
-      return;
-    event.target?.releasePointerCapture?.(event.pointerId);
-    const { userSelectionRect } = store.getState();
-    !userSelectionActive && userSelectionRect && event.target === container.current && onClick?.(event), store.setState({
+    event.button === 0 && (event.target?.releasePointerCapture?.(event.pointerId), !userSelectionActive && event.target === container.current && store.getState().userSelectionRect && onClick?.(event), store.setState({
       userSelectionActive: !1,
-      userSelectionRect: null,
+      userSelectionRect: null
+    }), selectionInProgress.current && (onSelectionEnd?.(event), store.setState({
       nodesSelectionActive: selectedNodeIds.current.size > 0
-    }), onSelectionEnd?.(event), (selectionKeyPressed || selectionOnDrag) && (selectionInProgress.current = !1), selectionStarted.current = !1;
+    })));
   }, draggable = panOnDrag === !0 || Array.isArray(panOnDrag) && panOnDrag.includes(0);
-  return jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: hasActiveSelection ? void 0 : onPaneMouseEnter, onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove, onPointerUp: hasActiveSelection ? onPointerUp : void 0, onPointerDownCapture: hasActiveSelection ? onPointerDownCapture : void 0, onClickCapture: hasActiveSelection ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
+  return jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
 }
 function handleNodeClick({ id: id2, store, unselect = !1, nodeRef }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState(), node = nodeLookup.get(id2);
@@ -22989,7 +23061,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
 const win = typeof window < "u" ? window : void 0, selector$e = (s) => ({ nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive });
 function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
   const { nodesSelectionActive, userSelectionActive } = useStore$1(selector$e), selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win }), panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win }), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, _selectionOnDrag = selectionOnDrag && panOnDrag !== !0, isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
-  return useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }), jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
+  return useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }), jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
 const FlowRenderer = memo$2(FlowRendererComponent), selector$d = (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());
@@ -23506,11 +23578,11 @@ function ConnectionLineWrapper({ containerStyle: containerStyle2, style: style2,
   return !(width && nodesConnectable && inProgress) ? null : jsx("svg", { style: containerStyle2, width, height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(["react-flow__connection", getConnectionStatus(isValid)]), children: jsx(ConnectionLine, { style: style2, type, CustomComponent: component, isValid }) }) });
 }
 const ConnectionLine = ({ style: style2, type = ConnectionLineType.Bezier, CustomComponent, isValid }) => {
-  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition, pointer: pointer2 } = useConnection();
   if (!inProgress)
     return;
   if (CustomComponent)
-    return jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style2, fromNode, fromHandle, fromX: from.x, fromY: from.y, toX: to.x, toY: to.y, fromPosition, toPosition, connectionStatus: getConnectionStatus(isValid), toNode, toHandle });
+    return jsx(CustomComponent, { connectionLineType: type, connectionLineStyle: style2, fromNode, fromHandle, fromX: from.x, fromY: from.y, toX: to.x, toY: to.y, fromPosition, toPosition, connectionStatus: getConnectionStatus(isValid), toNode, toHandle, pointer: pointer2 });
   let path = "";
   const pathParams = {
     sourceX: from.x,
@@ -23775,9 +23847,6 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
     setTranslateExtent: (translateExtent) => {
       get2().panZoom?.setTranslateExtent(translateExtent), set2({ translateExtent });
     },
-    setPaneClickDistance: (clickDistance) => {
-      get2().panZoom?.setClickDistance(clickDistance);
-    },
     resetSelectedElements: () => {
       const { edges: edges2, nodes: nodes2, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get2();
       if (!elementsSelectable)
@@ -23847,11 +23916,11 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug: debug2, onScroll, ariaLabelConfig, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug: debug2, onScroll, ariaLabelConfig, ...rest }, ref) {
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode), wrapperOnScroll = useCallback((e2) => {
     e2.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" }), onScroll?.(e2);
   }, [onScroll]);
-  return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, paneClickDistance, debug: debug2, ariaLabelConfig }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+  return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug: debug2, ariaLabelConfig }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
 const selector$6 = (s) => s.domNode?.querySelector(".react-flow__edgelabel-renderer");
@@ -24256,9 +24325,12 @@ function getShortTag(value) {
 function getStrictProperties(object2) {
   return getOwnPropertyNames(object2).concat(getOwnPropertySymbols(object2));
 }
-var hasOwn = Object.hasOwn || (function(object2, property) {
-  return hasOwnProperty.call(object2, property);
-});
+var hasOwn = (
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  Object.hasOwn || (function(object2, property) {
+    return hasOwnProperty.call(object2, property);
+  })
+);
 function sameValueZeroEqual(a2, b) {
   return a2 === b || !a2 && !b && a2 !== a2 && b !== b;
 }
@@ -24365,7 +24437,7 @@ function areUrlsEqual(a2, b) {
 function isPropertyEqual(a2, b, state, property) {
   return (property === REACT_OWNER || property === PREACT_OWNER || property === PREACT_VNODE) && (a2.$$typeof || b.$$typeof) ? !0 : hasOwn(b, property) && state.equals(a2[property], b[property], property, property, a2, b, state);
 }
-var ARGUMENTS_TAG = "[object Arguments]", BOOLEAN_TAG = "[object Boolean]", DATE_TAG = "[object Date]", ERROR_TAG = "[object Error]", MAP_TAG = "[object Map]", NUMBER_TAG = "[object Number]", OBJECT_TAG = "[object Object]", REG_EXP_TAG = "[object RegExp]", SET_TAG = "[object Set]", STRING_TAG = "[object String]", URL_TAG = "[object URL]", isArray$1 = Array.isArray, isTypedArray = typeof ArrayBuffer == "function" && ArrayBuffer.isView ? ArrayBuffer.isView : null, assign$1 = Object.assign, getTag = Object.prototype.toString.call.bind(Object.prototype.toString);
+var ARGUMENTS_TAG = "[object Arguments]", BOOLEAN_TAG = "[object Boolean]", DATE_TAG = "[object Date]", ERROR_TAG = "[object Error]", MAP_TAG = "[object Map]", NUMBER_TAG = "[object Number]", OBJECT_TAG = "[object Object]", REG_EXP_TAG = "[object RegExp]", SET_TAG = "[object Set]", STRING_TAG = "[object String]", URL_TAG = "[object URL]", isArray$1 = Array.isArray, isTypedArray = typeof ArrayBuffer < "u" && typeof ArrayBuffer.isView == "function" ? ArrayBuffer.isView : null, assign$1 = Object.assign, getTag = Object.prototype.toString.call.bind(Object.prototype.toString);
 function createEqualityComparator(_a) {
   var areArraysEqual2 = _a.areArraysEqual, areDatesEqual2 = _a.areDatesEqual, areErrorsEqual2 = _a.areErrorsEqual, areFunctionsEqual2 = _a.areFunctionsEqual, areMapsEqual2 = _a.areMapsEqual, areNumbersEqual2 = _a.areNumbersEqual, areObjectsEqual2 = _a.areObjectsEqual, arePrimitiveWrappersEqual2 = _a.arePrimitiveWrappersEqual, areRegExpsEqual2 = _a.areRegExpsEqual, areSetsEqual2 = _a.areSetsEqual, areTypedArraysEqual2 = _a.areTypedArraysEqual, areUrlsEqual2 = _a.areUrlsEqual, unknownTagComparators = _a.unknownTagComparators;
   return function(a2, b, state) {
@@ -25459,8 +25531,7 @@ class Bezier {
   }
 }
 let listenerQueue = [], lqIndex = 0;
-const QUEUE_ITEMS_PER_LISTENER = 4;
-let atom = (initialValue) => {
+const QUEUE_ITEMS_PER_LISTENER = 4, atom = /* @__NO_SIDE_EFFECTS__ */ (initialValue) => {
   let listeners = [], $atom = {
     get() {
       return $atom.lc || $atom.listen(() => {
@@ -25504,8 +25575,7 @@ let atom = (initialValue) => {
     value: initialValue
   };
   return $atom;
-};
-const MOUNT = 5, UNMOUNT = 6, REVERT_MUTATION = 10;
+}, MOUNT = 5, UNMOUNT = 6, REVERT_MUTATION = 10;
 let on = (object2, listener, eventKey, mutateStore) => (object2.events = object2.events || {}, object2.events[eventKey + REVERT_MUTATION] || (object2.events[eventKey + REVERT_MUTATION] = mutateStore((eventProps) => {
   object2.events[eventKey].reduceRight((event, l) => (l(event), event), {
     shared: {},
@@ -31676,6 +31746,20 @@ function stopChild(actorRef) {
   }
   return stop.type = "xstate.stopChild", stop.actorRef = actorRef, stop.resolve = resolveStop, stop.execute = executeStop, stop;
 }
+function checkNot(snapshot, {
+  context,
+  event
+}, {
+  guards
+}) {
+  return !evaluateGuard(guards[0], context, event, snapshot);
+}
+function not(guard) {
+  function not2(_args, _params) {
+    return !1;
+  }
+  return not2.check = checkNot, not2.guards = [guard], not2;
+}
 function checkAnd(snapshot, {
   context,
   event
@@ -37178,7 +37262,7 @@ function cloneInputValue(nativeNode, clonedNode) {
 }
 function cloneSelectValue(nativeNode, clonedNode) {
   if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
-    const clonedSelect = clonedNode, selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
+    const selectedOption = Array.from(clonedNode.children).find((child) => nativeNode.value === child.getAttribute("value"));
     selectedOption && selectedOption.setAttribute("selected", "");
   }
 }
@@ -40918,17 +41002,17 @@ const stringbool = (...args) => _stringbool({
   Transform: ZodTransform
 }, ...args);
 export {
-  Tooltip as $,
+  t$l as $,
   MantineProvider as A,
   Background as B,
   useMantineStyleNonce as C,
   domMax as D,
   MotionConfig as E,
   e$a as F,
-  t$s as G,
+  t$r as G,
   t$h as H,
-  t$n as I,
-  t$o as J,
+  t$m as I,
+  t$n as J,
   useId$2 as K,
   LazyMotion as L,
   MantineContext as M,
@@ -40943,245 +41027,247 @@ export {
   emit as V,
   assertEvent as W,
   assign as X,
-  ActionIcon as Y,
-  MotionButton as Z,
-  MotionDiv as _,
+  getViewportForBounds as Y,
+  getNodesBounds as Z,
+  getEdgePosition as _,
   BackgroundVariant as a,
-  Tree as a$,
-  Breadcrumbs as a0,
-  Menu as a1,
-  UnstyledButton as a2,
-  Badge as a3,
-  SegmentedControl as a4,
-  Divider as a5,
-  AnimatePresence as a6,
-  useHover$1 as a7,
-  Popover as a8,
-  PopoverTarget as a9,
-  Space as aA,
-  Stack as aB,
-  CheckIcon as aC,
-  rem as aD,
-  useUpdateEffect as aE,
-  Slider as aF,
-  Paper as aG,
-  Group as aH,
-  MenuTarget as aI,
-  MenuDropdown as aJ,
-  MenuItem as aK,
-  useFocusTrap as aL,
-  useReducedMotionConfig as aM,
-  useTimeoutEffect as aN,
-  m as aO,
-  ReactRemoveScroll as aP,
-  useThrottledCallback as aQ,
-  Input as aR,
-  createScopedKeydownHandler as aS,
-  t$3 as aT,
-  Highlight as aU,
-  useMountEffect as aV,
-  e$8 as aW,
-  useActorRef as aX,
-  LayoutGroup as aY,
-  useTree as aZ,
-  Alert as a_,
-  PopoverDropdown as aa,
-  Box as ab,
-  FloatingIndicator as ac,
-  Flex as ad,
-  useDebouncedCallback as ae,
-  useUncontrolled as af,
-  clampUseMovePosition as ag,
-  useMove as ah,
-  useMergedRef as ai,
-  TooltipGroup as aj,
-  useDebouncedValue as ak,
-  e$2 as al,
-  EdgeLabelRenderer as am,
-  useDebouncedState as an,
-  NodeToolbar as ao,
-  Position as ap,
-  Handle as aq,
-  CopyButton as ar,
-  HoverCard as as,
-  HoverCardTarget as at,
-  HoverCardDropdown as au,
-  Notification as av,
-  isMacOs as aw,
-  Portal as ax,
-  NavLink as ay,
-  ColorSwatch as az,
+  HoverCardDropdown as a$,
+  t$k as a0,
+  e$1 as a1,
+  t$e as a2,
+  t$t as a3,
+  n$p as a4,
+  n$b as a5,
+  r$9 as a6,
+  t$b as a7,
+  n as a8,
+  dagre as a9,
+  Badge as aA,
+  SegmentedControl as aB,
+  Divider as aC,
+  AnimatePresence as aD,
+  useHover$1 as aE,
+  Popover as aF,
+  PopoverTarget as aG,
+  PopoverDropdown as aH,
+  Box as aI,
+  FloatingIndicator as aJ,
+  Flex as aK,
+  useDebouncedCallback as aL,
+  useUncontrolled as aM,
+  clampUseMovePosition as aN,
+  useMove as aO,
+  useMergedRef as aP,
+  TooltipGroup as aQ,
+  useDebouncedValue as aR,
+  EdgeLabelRenderer as aS,
+  e$5 as aT,
+  useDebouncedState as aU,
+  NodeToolbar as aV,
+  Position as aW,
+  Handle as aX,
+  CopyButton as aY,
+  HoverCard as aZ,
+  HoverCardTarget as a_,
+  t$5 as aa,
+  t$1 as ab,
+  t$2 as ac,
+  enqueueActions as ad,
+  cancel as ae,
+  fromPromise as af,
+  applyEdgeChanges as ag,
+  applyNodeChanges as ah,
+  e$6 as ai,
+  sendTo as aj,
+  stopChild as ak,
+  spawnChild as al,
+  e$3 as am,
+  not as an,
+  fromCallback as ao,
+  t$f as ap,
+  t$4 as aq,
+  getHotkeyHandler as ar,
+  e$2 as as,
+  ActionIcon as at,
+  MotionButton as au,
+  MotionDiv as av,
+  Tooltip as aw,
+  Breadcrumbs as ax,
+  Menu as ay,
+  UnstyledButton as az,
   useCustomCompareEffect as b,
-  useRerender as b$,
-  getBezierPath as b0,
-  t$l as b1,
-  t$k as b2,
-  e$1 as b3,
-  t$e as b4,
-  t$u as b5,
-  n$q as b6,
-  r$9 as b7,
-  t$b as b8,
-  n as b9,
-  VisuallyHidden as bA,
-  n$p as bB,
-  useWindowEvent as bC,
-  FocusTrap as bD,
-  Title as bE,
-  useFocusWithin as bF,
-  useCombobox as bG,
-  ComboboxOption as bH,
-  Combobox as bI,
-  ComboboxTarget as bJ,
-  ComboboxDropdown as bK,
-  ComboboxOptions as bL,
-  ComboboxEmpty as bM,
-  useHotkeys as bN,
-  Grid as bO,
-  GridCol as bP,
-  getNodesBounds as bQ,
-  getEdgePosition as bR,
-  autoUpdate as bS,
-  computePosition as bT,
-  offset$1 as bU,
-  autoPlacement as bV,
-  size$1 as bW,
-  hide$1 as bX,
-  useLocalStorage as bY,
-  Card as bZ,
-  n$v as b_,
-  dagre as ba,
-  t$5 as bb,
-  t$1 as bc,
-  t$2 as bd,
-  ReactFlowProvider as be,
-  useStateHistory as bf,
-  useRafEffect as bg,
-  Panel$1 as bh,
-  Anchor as bi,
-  Pill as bj,
-  useViewportSize as bk,
-  useSessionStorage as bl,
-  t$a as bm,
-  useDragControls as bn,
-  useMotionValue as bo,
-  CloseButton as bp,
-  ActionIconGroup as bq,
-  Tabs as br,
-  TabsList as bs,
-  TabsTab as bt,
-  TabsPanel as bu,
-  ScrollArea as bv,
-  e$6 as bw,
-  useCallbackRef as bx,
-  animate as by,
-  e$7 as bz,
+  Combobox as b$,
+  Notification as b0,
+  isMacOs as b1,
+  Portal as b2,
+  NavLink as b3,
+  ColorSwatch as b4,
+  Space as b5,
+  Stack as b6,
+  CheckIcon as b7,
+  rem as b8,
+  useUpdateEffect as b9,
+  useRafEffect as bA,
+  Panel$1 as bB,
+  Anchor as bC,
+  Pill as bD,
+  useViewportSize as bE,
+  useSessionStorage as bF,
+  t$a as bG,
+  useDragControls as bH,
+  useMotionValue as bI,
+  CloseButton as bJ,
+  ActionIconGroup as bK,
+  Tabs as bL,
+  TabsList as bM,
+  TabsTab as bN,
+  TabsPanel as bO,
+  ScrollArea as bP,
+  useCallbackRef as bQ,
+  animate as bR,
+  e$7 as bS,
+  VisuallyHidden as bT,
+  n$o as bU,
+  useWindowEvent as bV,
+  FocusTrap as bW,
+  Title as bX,
+  useFocusWithin as bY,
+  useCombobox as bZ,
+  ComboboxOption as b_,
+  Slider as ba,
+  Paper as bb,
+  Group as bc,
+  MenuTarget as bd,
+  MenuDropdown as be,
+  MenuItem as bf,
+  useFocusTrap as bg,
+  useReducedMotionConfig as bh,
+  useTimeoutEffect as bi,
+  m as bj,
+  ReactRemoveScroll as bk,
+  useThrottledCallback as bl,
+  Input as bm,
+  createScopedKeydownHandler as bn,
+  t$3 as bo,
+  Highlight as bp,
+  useMountEffect as bq,
+  e$8 as br,
+  useActorRef as bs,
+  LayoutGroup as bt,
+  useTree as bu,
+  Alert as bv,
+  Tree as bw,
+  getBezierPath as bx,
+  ReactFlowProvider as by,
+  useStateHistory as bz,
   useStoreApi as c,
-  ModalBody as c$,
-  t$f as c0,
-  d3line as c1,
-  curveCatmullRomOpen as c2,
-  getSmoothStepPath as c3,
-  t$m as c4,
-  produce as c5,
-  useTimeout as c6,
-  useDebouncedCallback$1 as c7,
-  useCustomCompareMemo as c8,
-  t$9 as c9,
-  t$c as cA,
-  useRouter as cB,
-  isNotFound as cC,
-  Container as cD,
-  Code as cE,
-  Link as cF,
-  useNavigate as cG,
-  createRootRouteWithContext as cH,
-  stripSearchParams as cI,
-  Outlet as cJ,
-  createFileRoute as cK,
-  useDocumentTitle as cL,
-  Loader as cM,
-  useStore as cN,
-  Navigate as cO,
-  useParams as cP,
-  SimpleGrid as cQ,
-  useInViewport as cR,
-  e as cS,
-  notFound as cT,
-  useComputedColorScheme as cU,
-  onMount as cV,
-  Drawer as cW,
-  Select as cX,
-  ModalRoot as cY,
-  ModalOverlay as cZ,
-  ModalContent as c_,
-  n$c as ca,
-  t$i as cb,
-  enqueueActions as cc,
-  cancel as cd,
-  fromPromise as ce,
-  getViewportForBounds as cf,
-  applyEdgeChanges as cg,
-  applyNodeChanges as ch,
-  sendTo as ci,
-  stopChild as cj,
-  spawnChild as ck,
-  e$3 as cl,
-  fromCallback as cm,
-  t$4 as cn,
-  getHotkeyHandler as co,
-  nodeToRect as cp,
-  and as cq,
-  or as cr,
-  t$8 as cs,
-  e$c as ct,
-  toRgba as cu,
-  t$6 as cv,
-  mix as cw,
-  toHex as cx,
-  scale as cy,
-  e$4 as cz,
+  ModalOverlay as c$,
+  ComboboxTarget as c0,
+  ComboboxDropdown as c1,
+  ComboboxOptions as c2,
+  ComboboxEmpty as c3,
+  useHotkeys as c4,
+  Grid as c5,
+  GridCol as c6,
+  autoUpdate as c7,
+  computePosition as c8,
+  offset$1 as c9,
+  scale as cA,
+  e$4 as cB,
+  t$c as cC,
+  useRouter as cD,
+  isNotFound as cE,
+  Container as cF,
+  Code as cG,
+  Link as cH,
+  useNavigate as cI,
+  createRootRouteWithContext as cJ,
+  stripSearchParams as cK,
+  Outlet as cL,
+  createFileRoute as cM,
+  useDocumentTitle as cN,
+  Loader as cO,
+  useStore as cP,
+  Navigate as cQ,
+  useParams as cR,
+  SimpleGrid as cS,
+  useInViewport as cT,
+  e as cU,
+  notFound as cV,
+  useComputedColorScheme as cW,
+  onMount as cX,
+  Drawer as cY,
+  Select as cZ,
+  ModalRoot as c_,
+  autoPlacement as ca,
+  size$1 as cb,
+  hide$1 as cc,
+  useLocalStorage as cd,
+  Card as ce,
+  n$u as cf,
+  useRerender as cg,
+  d3line as ch,
+  curveCatmullRomOpen as ci,
+  getSmoothStepPath as cj,
+  r$c as ck,
+  produce as cl,
+  useTimeout as cm,
+  useDebouncedCallback$1 as cn,
+  useCustomCompareMemo as co,
+  t$9 as cp,
+  n$c as cq,
+  nodeToRect as cr,
+  and as cs,
+  or as ct,
+  log as cu,
+  e$c as cv,
+  toRgba as cw,
+  t$6 as cx,
+  mix as cy,
+  toHex as cz,
   deepEqual as d,
-  useMatches as d0,
-  useMantineTheme as d1,
-  useMediaQuery as d2,
-  useDisclosure as d3,
-  useParentMatches as d4,
-  MenuLabel as d5,
-  useSearch as d6,
-  LoadingOverlay as d7,
-  toBlob as d8,
-  useAsync as d9,
-  PanelGroup as da,
-  Panel as db,
-  PanelResizeHandle as dc,
-  Burger as dd,
-  RouterProvider as de,
-  createRouter as df,
-  createHashHistory as dg,
-  createBrowserHistory as dh,
-  createTheme as di,
-  object as dj,
-  literal as dk,
-  stringbool as dl,
-  string as dm,
-  formatError as dn,
+  ModalContent as d0,
+  ModalBody as d1,
+  useMatches as d2,
+  useMantineTheme as d3,
+  useMediaQuery as d4,
+  useDisclosure as d5,
+  useParentMatches as d6,
+  MenuLabel as d7,
+  useSearch as d8,
+  LoadingOverlay as d9,
+  toBlob as da,
+  useAsync as db,
+  PanelGroup as dc,
+  Panel as dd,
+  PanelResizeHandle as de,
+  Burger as df,
+  RouterProvider as dg,
+  createRouter as dh,
+  createHashHistory as di,
+  createBrowserHistory as dj,
+  createTheme as dk,
+  object as dl,
+  literal as dm,
+  stringbool as dn,
+  string as dp,
+  formatError as dq,
   useStore$1 as e,
   useReactFlow as f,
-  t$q as g,
+  t$p as g,
   Bezier as h,
-  getNodeDimensions as i,
-  e$d as j,
-  e$5 as k,
-  useMantineColorScheme as l,
-  index as m,
+  e$d as i,
+  getNodeDimensions as j,
+  useMantineColorScheme as k,
+  index as l,
+  e$b as m,
   n$j as n,
-  e$b as o,
-  n$b as p,
+  t$8 as o,
+  t$i as p,
   createSafeContext as q,
   atom as r,
   shallowEqual as s,
-  t$v as t,
+  t$u as t,
   useFirstMountState as u,
   useIsomorphicLayoutEffect$3 as v,
   useSyncedRef as w,