@likec4/diagram 1.2.2 → 1.4.0

package/dist/index.mjs

@@ -2,21 +2,22 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, memo, useState, forwardRef, useCallback, useMemo, useEffect, useRef, useContext, useLayoutEffect, useId } from "react";
+import { createContext, memo, useState, forwardRef, useCallback, useMemo, useRef, useEffect, useContext, useLayoutEffect, useId } from "react";
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { shallow } from "zustand/shallow";
 import { createPortal } from "react-dom";
-import { Box, MantineContext, ActionIcon, Text, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, useMantineColorScheme, Divider, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Slider, SegmentedControl, Card, Paper, Spoiler } from "@mantine/core";
-import { isNullish, entries, hasSubObject, hasAtLeast, first, last, zip, clamp as clamp$1, isNumber, keys, takeWhile, isNonNull } from "remeda";
-import { invariant, isAncestor, nonNullable, StepEdgeId, nonexhaustive, extractStep, defaultTheme, ElementShapes } from "@likec4/core";
 import { DEV } from "esm-env";
 import { shallowEqual, deepEqual } from "fast-equals";
+import { m, AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
+import { Box, MantineContext, ActionIcon, Text, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, Divider, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Slider, SegmentedControl } from "@mantine/core";
+import { isArray, isNullish, entries, reduce, isEmpty, hasSubObject, hasAtLeast as hasAtLeast$1, isTruthy, first, last, clamp as clamp$1, isNumber, keys, takeWhile, isNonNull } from "remeda";
+import { invariant, hasAtLeast, isAncestor, nonNullable, StepEdgeId, nonexhaustive, extractStep, defaultTheme, ElementShapes } from "@likec4/core";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
-import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect } from "@react-hookz/web";
+import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect, useIsomorphicLayoutEffect as useIsomorphicLayoutEffect$1 } from "@react-hookz/web";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { line, curveCatmullRomOpen } from "d3-shape";
-import { motion, AnimatePresence } from "framer-motion";
-import { useLocalStorage } from "@mantine/hooks";
-import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
+import { IconZoomScan, IconChevronLeft, IconChevronRight, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from "@tabler/icons-react";
+import { useStateHistory, useLocalStorage, useHotkeys } from "@mantine/hooks";
 function cc(names) {
   if (typeof names == "string" || typeof names == "number") return "" + names;
   let out = "";
@@ -52,7 +53,7 @@ Dispatch.prototype = dispatch.prototype = {
   on: function(typename, callback) {
     var _ = this._, T = parseTypenames$1(typename + "", _), t2, i = -1, n = T.length;
     if (arguments.length < 2) {
-      for (; ++i < n; ) if ((t2 = (typename = T[i]).type) && (t2 = get$2(_[t2], typename.name))) return t2;
+      for (; ++i < n; ) if ((t2 = (typename = T[i]).type) && (t2 = get$1(_[t2], typename.name))) return t2;
       return;
     }
     if (callback != null && typeof callback != "function") throw new Error("invalid callback: " + callback);
@@ -76,7 +77,7 @@ Dispatch.prototype = dispatch.prototype = {
     for (var t2 = this._[type], i = 0, n = t2.length; i < n; ++i) t2[i].value.apply(that, args);
   }
 };
-function get$2(type, name) {
+function get$1(type, name) {
   for (var i = 0, n = type.length, c; i < n; ++i)
     if ((c = type[i]).name === name)
       return c.value;
@@ -125,7 +126,7 @@ function selector$5(selector2) {
 }
 function selection_select(select2) {
   typeof select2 != "function" && (select2 = selector$5(select2));
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i)
       (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode);
   return new Selection$1(subgroups, this._parents);
@@ -148,7 +149,7 @@ function arrayAll(select2) {
 }
 function selection_selectAll(select2) {
   typeof select2 == "function" ? select2 = arrayAll(select2) : select2 = selectorAll(select2);
-  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, subgroups = [], parents = [], j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i)
       (node = group[i]) && (subgroups.push(select2.call(node, node.__data__, i, group)), parents.push(node));
   return new Selection$1(subgroups, parents);
@@ -189,7 +190,7 @@ function selection_selectChildren(match) {
 }
 function selection_filter(match) {
   typeof match != "function" && (match = matcher(match));
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i)
       (node = group[i]) && match.call(node, node.__data__, i, group) && subgroup.push(node);
   return new Selection$1(subgroups, this._parents);
@@ -245,7 +246,7 @@ function selection_data(value, key) {
   if (!arguments.length) return Array.from(this, datum);
   var bind = key ? bindKey : bindIndex, parents = this._parents, groups = this._groups;
   typeof value != "function" && (value = constant$3(value));
-  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+  for (var m2 = groups.length, update = new Array(m2), enter = new Array(m2), exit = new Array(m2), j = 0; j < m2; ++j) {
     var parent = parents[j], group = groups[j], groupLength = group.length, data = arraylike(value.call(parent, parent && parent.__data__, j, parents)), dataLength = data.length, enterGroup = enter[j] = new Array(dataLength), updateGroup = update[j] = new Array(dataLength), exitGroup = exit[j] = new Array(groupLength);
     bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
     for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0)
@@ -267,7 +268,7 @@ function selection_join(onenter, onupdate, onexit) {
   return typeof onenter == "function" ? (enter = onenter(enter), enter && (enter = enter.selection())) : enter = enter.append(onenter + ""), onupdate != null && (update = onupdate(update), update && (update = update.selection())), onexit == null ? exit.remove() : onexit(exit), enter && update ? enter.merge(update).order() : update;
 }
 function selection_merge(context) {
-  for (var selection2 = context.selection ? context.selection() : context, groups0 = this._groups, groups1 = selection2._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j)
+  for (var selection2 = context.selection ? context.selection() : context, groups0 = this._groups, groups1 = selection2._groups, m0 = groups0.length, m1 = groups1.length, m2 = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m2; ++j)
     for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i)
       (node = group0[i] || group1[i]) && (merge[i] = node);
   for (; j < m0; ++j)
@@ -275,7 +276,7 @@ function selection_merge(context) {
   return new Selection$1(merges, this._parents);
 }
 function selection_order() {
-  for (var groups = this._groups, j = -1, m = groups.length; ++j < m; )
+  for (var groups = this._groups, j = -1, m2 = groups.length; ++j < m2; )
     for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0; )
       (node = group[i]) && (next && node.compareDocumentPosition(next) ^ 4 && next.parentNode.insertBefore(node, next), next = node);
   return this;
@@ -285,7 +286,7 @@ function selection_sort(compare) {
   function compareNode(a, b) {
     return a && b ? compare(a.__data__, b.__data__) : !a - !b;
   }
-  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+  for (var groups = this._groups, m2 = groups.length, sortgroups = new Array(m2), j = 0; j < m2; ++j) {
     for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i)
       (node = group[i]) && (sortgroup[i] = node);
     sortgroup.sort(compareNode);
@@ -303,7 +304,7 @@ function selection_nodes() {
   return Array.from(this);
 }
 function selection_node() {
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j)
+  for (var groups = this._groups, j = 0, m2 = groups.length; j < m2; ++j)
     for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
       var node = group[i];
       if (node) return node;
@@ -319,7 +320,7 @@ function selection_empty() {
   return !this.node();
 }
 function selection_each(callback) {
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j)
+  for (var groups = this._groups, j = 0, m2 = groups.length; j < m2; ++j)
     for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i)
       (node = group[i]) && callback.call(node, node.__data__, i, group);
   return this;
@@ -556,7 +557,7 @@ function onRemove(typename) {
   return function() {
     var on = this.__on;
     if (on) {
-      for (var j = 0, i = -1, m = on.length, o; j < m; ++j)
+      for (var j = 0, i = -1, m2 = on.length, o; j < m2; ++j)
         o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name ? this.removeEventListener(o.type, o.listener, o.options) : on[++i] = o;
       ++i ? on.length = i : delete this.__on;
     }
@@ -566,7 +567,7 @@ function onAdd(typename, value, options) {
   return function() {
     var on = this.__on, o, listener = contextListener(value);
     if (on) {
-      for (var j = 0, m = on.length; j < m; ++j)
+      for (var j = 0, m2 = on.length; j < m2; ++j)
         if ((o = on[j]).type === typename.type && o.name === typename.name) {
           this.removeEventListener(o.type, o.listener, o.options), this.addEventListener(o.type, o.listener = listener, o.options = options), o.value = value;
           return;
@@ -580,7 +581,7 @@ function selection_on(typename, value, options) {
   if (arguments.length < 2) {
     var on = this.node().__on;
     if (on) {
-      for (var j = 0, m = on.length, o; j < m; ++j)
+      for (var j = 0, m2 = on.length, o; j < m2; ++j)
         for (i = 0, o = on[j]; i < n; ++i)
           if ((t2 = typenames[i]).type === o.type && t2.name === o.name)
             return o.value;
@@ -608,7 +609,7 @@ function selection_dispatch(type, params) {
   return this.each((typeof params == "function" ? dispatchFunction : dispatchConstant)(type, params));
 }
 function* selection_iterator() {
-  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j)
+  for (var groups = this._groups, j = 0, m2 = groups.length; j < m2; ++j)
     for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i)
       (node = group[i]) && (yield node);
 }
@@ -1029,8 +1030,8 @@ function color_formatRgb() {
   return this.rgb().formatRgb();
 }
 function color(format) {
-  var m, l;
-  return format = (format + "").trim().toLowerCase(), (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, (m & 15) << 4 | m & 15, 1) : l === 8 ? rgba(m >> 24 & 255, m >> 16 & 255, m >> 8 & 255, (m & 255) / 255) : l === 4 ? rgba(m >> 12 & 15 | m >> 8 & 240, m >> 8 & 15 | m >> 4 & 240, m >> 4 & 15 | m & 240, ((m & 15) << 4 | m & 15) / 255) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format) ? rgbn(named[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
+  var m2, l;
+  return format = (format + "").trim().toLowerCase(), (m2 = reHex.exec(format)) ? (l = m2[1].length, m2 = parseInt(m2[1], 16), l === 6 ? rgbn(m2) : l === 3 ? new Rgb(m2 >> 8 & 15 | m2 >> 4 & 240, m2 >> 4 & 15 | m2 & 240, (m2 & 15) << 4 | m2 & 15, 1) : l === 8 ? rgba(m2 >> 24 & 255, m2 >> 16 & 255, m2 >> 8 & 255, (m2 & 255) / 255) : l === 4 ? rgba(m2 >> 12 & 15 | m2 >> 8 & 240, m2 >> 8 & 15 | m2 >> 4 & 240, m2 >> 4 & 15 | m2 & 240, ((m2 & 15) << 4 | m2 & 15) / 255) : null) : (m2 = reRgbInteger.exec(format)) ? new Rgb(m2[1], m2[2], m2[3], 1) : (m2 = reRgbPercent.exec(format)) ? new Rgb(m2[1] * 255 / 100, m2[2] * 255 / 100, m2[3] * 255 / 100, 1) : (m2 = reRgbaInteger.exec(format)) ? rgba(m2[1], m2[2], m2[3], m2[4]) : (m2 = reRgbaPercent.exec(format)) ? rgba(m2[1] * 255 / 100, m2[2] * 255 / 100, m2[3] * 255 / 100, m2[4]) : (m2 = reHslPercent.exec(format)) ? hsla(m2[1], m2[2] / 100, m2[3] / 100, 1) : (m2 = reHslaPercent.exec(format)) ? hsla(m2[1], m2[2] / 100, m2[3] / 100, m2[4]) : named.hasOwnProperty(format) ? rgbn(named[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
 }
 function rgbn(n) {
   return new Rgb(n >> 16 & 255, n >> 8 & 255, n & 255, 1);
@@ -1218,8 +1219,8 @@ function decompose(a, b, c, d, e, f) {
 }
 var svgNode;
 function parseCss(value) {
-  const m = new (typeof DOMMatrix == "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
-  return m.isIdentity ? identity$1 : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
+  const m2 = new (typeof DOMMatrix == "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
+  return m2.isIdentity ? identity$1 : decompose(m2.a, m2.b, m2.c, m2.d, m2.e, m2.f);
 }
 function parseSvg(value) {
   return value == null || (svgNode || (svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g")), svgNode.setAttribute("transform", value), !(value = svgNode.transform.baseVal.consolidate())) ? identity$1 : (value = value.matrix, decompose(value.a, value.b, value.c, value.d, value.e, value.f));
@@ -1377,16 +1378,16 @@ function schedule(node, name, id2, index2, group, timing) {
   });
 }
 function init(node, id2) {
-  var schedule2 = get$1(node, id2);
+  var schedule2 = get(node, id2);
   if (schedule2.state > CREATED) throw new Error("too late; already scheduled");
   return schedule2;
 }
 function set(node, id2) {
-  var schedule2 = get$1(node, id2);
+  var schedule2 = get(node, id2);
   if (schedule2.state > STARTED) throw new Error("too late; already running");
   return schedule2;
 }
-function get$1(node, id2) {
+function get(node, id2) {
   var schedule2 = node.__transition;
   if (!schedule2 || !(schedule2 = schedule2[id2])) throw new Error("transition not found");
   return schedule2;
@@ -1478,7 +1479,7 @@ function tweenFunction(id2, name, value) {
 function transition_tween(name, value) {
   var id2 = this._id;
   if (name += "", arguments.length < 2) {
-    for (var tween = get$1(this.node(), id2).tween, i = 0, n = tween.length, t2; i < n; ++i)
+    for (var tween = get(this.node(), id2).tween, i = 0, n = tween.length, t2; i < n; ++i)
       if ((t2 = tween[i]).name === name)
         return t2.value;
     return null;
@@ -1491,7 +1492,7 @@ function tweenValue(transition, name, value) {
     var schedule2 = set(this, id2);
     (schedule2.value || (schedule2.value = {}))[name] = value.apply(this, arguments);
   }), function(node) {
-    return get$1(node, id2).value[name];
+    return get(node, id2).value[name];
   };
 }
 function interpolate(a, b) {
@@ -1586,7 +1587,7 @@ function delayConstant(id2, value) {
 }
 function transition_delay(value) {
   var id2 = this._id;
-  return arguments.length ? this.each((typeof value == "function" ? delayFunction : delayConstant)(id2, value)) : get$1(this.node(), id2).delay;
+  return arguments.length ? this.each((typeof value == "function" ? delayFunction : delayConstant)(id2, value)) : get(this.node(), id2).delay;
 }
 function durationFunction(id2, value) {
   return function() {
@@ -1600,7 +1601,7 @@ function durationConstant(id2, value) {
 }
 function transition_duration(value) {
   var id2 = this._id;
-  return arguments.length ? this.each((typeof value == "function" ? durationFunction : durationConstant)(id2, value)) : get$1(this.node(), id2).duration;
+  return arguments.length ? this.each((typeof value == "function" ? durationFunction : durationConstant)(id2, value)) : get(this.node(), id2).duration;
 }
 function easeConstant(id2, value) {
   if (typeof value != "function") throw new Error();
@@ -1610,7 +1611,7 @@ function easeConstant(id2, value) {
 }
 function transition_ease(value) {
   var id2 = this._id;
-  return arguments.length ? this.each(easeConstant(id2, value)) : get$1(this.node(), id2).ease;
+  return arguments.length ? this.each(easeConstant(id2, value)) : get(this.node(), id2).ease;
 }
 function easeVarying(id2, value) {
   return function() {
@@ -1625,14 +1626,14 @@ function transition_easeVarying(value) {
 }
 function transition_filter(match) {
   typeof match != "function" && (match = matcher(match));
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i)
       (node = group[i]) && match.call(node, node.__data__, i, group) && subgroup.push(node);
   return new Transition(subgroups, this._parents, this._name, this._id);
 }
 function transition_merge(transition) {
   if (transition._id !== this._id) throw new Error();
-  for (var groups0 = this._groups, groups1 = transition._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j)
+  for (var groups0 = this._groups, groups1 = transition._groups, m0 = groups0.length, m1 = groups1.length, m2 = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m2; ++j)
     for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i)
       (node = group0[i] || group1[i]) && (merge[i] = node);
   for (; j < m0; ++j)
@@ -1654,7 +1655,7 @@ function onFunction(id2, name, listener) {
 }
 function transition_on(name, listener) {
   var id2 = this._id;
-  return arguments.length < 2 ? get$1(this.node(), id2).on.on(name) : this.each(onFunction(id2, name, listener));
+  return arguments.length < 2 ? get(this.node(), id2).on.on(name) : this.each(onFunction(id2, name, listener));
 }
 function removeFunction(id2) {
   return function() {
@@ -1669,18 +1670,18 @@ function transition_remove() {
 function transition_select(select2) {
   var name = this._name, id2 = this._id;
   typeof select2 != "function" && (select2 = selector$5(select2));
-  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i)
-      (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode, schedule(subgroup[i], name, id2, i, subgroup, get$1(node, id2)));
+      (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode, schedule(subgroup[i], name, id2, i, subgroup, get(node, id2)));
   return new Transition(subgroups, this._parents, name, id2);
 }
 function transition_selectAll(select2) {
   var name = this._name, id2 = this._id;
   typeof select2 != "function" && (select2 = selectorAll(select2));
-  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, subgroups = [], parents = [], j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i)
       if (node = group[i]) {
-        for (var children2 = select2.call(node, node.__data__, i, group), child, inherit2 = get$1(node, id2), k = 0, l = children2.length; k < l; ++k)
+        for (var children2 = select2.call(node, node.__data__, i, group), child, inherit2 = get(node, id2), k = 0, l = children2.length; k < l; ++k)
           (child = children2[k]) && schedule(child, name, id2, k, children2, inherit2);
         subgroups.push(children2), parents.push(node);
       }
@@ -1782,10 +1783,10 @@ function transition_textTween(value) {
   return this.tween(key, textTween(value));
 }
 function transition_transition() {
-  for (var name = this._name, id0 = this._id, id1 = newId(), groups = this._groups, m = groups.length, j = 0; j < m; ++j)
+  for (var name = this._name, id0 = this._id, id1 = newId(), groups = this._groups, m2 = groups.length, j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i)
       if (node = group[i]) {
-        var inherit2 = get$1(node, id0);
+        var inherit2 = get(node, id0);
         schedule(node, name, id1, i, group, {
           time: inherit2.time + inherit2.delay + inherit2.duration,
           delay: 0,
@@ -1866,7 +1867,7 @@ function inherit(node, id2) {
 function selection_transition(name) {
   var id2, timing;
   name instanceof Transition ? (id2 = name._id, name = name._name) : (id2 = newId(), (timing = defaultTiming).time = now(), name = name == null ? null : name + "");
-  for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j)
+  for (var groups = this._groups, m2 = groups.length, j = 0; j < m2; ++j)
     for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i)
       (node = group[i]) && schedule(node, name, id2, i, group, timing || inherit(node, id2));
   return new Transition(groups, this._parents, name, id2);
@@ -2401,7 +2402,7 @@ function evaluateAbsolutePosition(position, parentId, nodeLookup, nodeOrigin = [
   let nextParentId = parentId;
   const positionAbsolute = { ...position };
   for (; nextParentId; ) {
-    const parent = nodeLookup.get(parentId);
+    const parent = nodeLookup.get(nextParentId);
     if (nextParentId = parent == null ? void 0 : parent.parentId, parent) {
       const origin = parent.origin || nodeOrigin, xOffset = (parent.measured.width ?? 0) * origin[0], yOffset = (parent.measured.height ?? 0) * origin[1];
       positionAbsolute.x += parent.position.x - xOffset, positionAbsolute.y += parent.position.y - yOffset;
@@ -2436,21 +2437,21 @@ const isMouseEvent = (event) => "clientX" in event, getEventPosition = (event, b
     x: evtX - ((bounds == null ? void 0 : bounds.left) ?? 0),
     y: evtY - ((bounds == null ? void 0 : bounds.top) ?? 0)
   };
-}, getHandleBounds = (selector2, nodeElement, zoom2, nodeOrigin = [0, 0]) => {
+}, getHandleBounds = (selector2, nodeElement, nodeBounds, zoom2, nodeOrigin = [0, 0]) => {
   const handles = nodeElement.querySelectorAll(selector2);
   if (!handles || !handles.length)
     return null;
-  const handlesArray = Array.from(handles), nodeBounds = nodeElement.getBoundingClientRect(), nodeOffset = {
-    x: nodeBounds.width * nodeOrigin[0],
-    y: nodeBounds.height * nodeOrigin[1]
+  const handlesArray = Array.from(handles), nodeOffset = {
+    x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
+    y: nodeBounds.top + nodeBounds.height * nodeOrigin[1]
   };
   return handlesArray.map((handle) => {
     const handleBounds = handle.getBoundingClientRect();
     return {
       id: handle.getAttribute("data-handleid"),
       position: handle.getAttribute("data-handlepos"),
-      x: (handleBounds.left - nodeBounds.left - nodeOffset.x) / zoom2,
-      y: (handleBounds.top - nodeBounds.top - nodeOffset.y) / zoom2,
+      x: (handleBounds.left - nodeOffset.x) / zoom2,
+      y: (handleBounds.top - nodeOffset.y) / zoom2,
       ...getDimensions(handle)
     };
   });
@@ -2637,14 +2638,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 == null ? void 0 : targetHandleBounds.target) ?? [] : ((targetHandleBounds == null ? void 0 : targetHandleBounds.target) ?? []).concat((targetHandleBounds == null ? void 0 : targetHandleBounds.source) ?? []),
     params.targetHandle
-  ), sourcePosition = (sourceHandle == null ? void 0 : sourceHandle.position) || Position.Bottom, targetPosition = (targetHandle == null ? void 0 : targetHandle.position) || Position.Top;
+  );
   if (!sourceHandle || !targetHandle)
     return (_a = params.onError) == null || _a.call(params, "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 == null ? void 0 : sourceHandle.position) || Position.Bottom, targetPosition = (targetHandle == null ? void 0 : targetHandle.position) || Position.Top, [sourceX, sourceY] = getHandlePosition(sourceNode, sourceHandle, sourcePosition), [targetX, targetY] = getHandlePosition(targetNode, targetHandle, targetPosition);
   return {
     sourceX,
     sourceY,
@@ -2665,9 +2666,9 @@ function toHandleBounds(handles) {
     target
   };
 }
-function getHandlePosition(position, node, handle = null) {
+function getHandlePosition(node, handle, fallbackPosition = Position.Left) {
   const x = ((handle == null ? void 0 : handle.x) ?? 0) + node.internals.positionAbsolute.x, y = ((handle == null ? void 0 : handle.y) ?? 0) + node.internals.positionAbsolute.y, { width, height } = handle ?? getNodeDimensions(node);
-  switch (position) {
+  switch ((handle == null ? void 0 : handle.position) ?? fallbackPosition) {
     case Position.Top:
       return [x + width / 2, y];
     case Position.Right:
@@ -2816,21 +2817,24 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
       }, updatedInternals = !0;
     else if (node) {
       const dimensions = getDimensions(update.nodeElement), dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
-      !!(dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force)) && (node.measured = dimensions, node.internals = {
-        ...node.internals,
-        handleBounds: {
-          source: getHandleBounds(".source", update.nodeElement, zoom2, node.origin || nodeOrigin),
-          target: getHandleBounds(".target", update.nodeElement, zoom2, node.origin || nodeOrigin)
-        }
-      }, updatedInternals = !0, dimensionChanged && (changes.push({
-        id: node.id,
-        type: "dimensions",
-        dimensions
-      }), node.expandParent && node.parentId && parentExpandChildren.push({
-        id: node.id,
-        parentId: node.parentId,
-        rect: nodeToRect(node, nodeOrigin)
-      })));
+      if (!!(dimensions.width && dimensions.height && (dimensionChanged || !node.internals.handleBounds || update.force))) {
+        const nodeBounds = update.nodeElement.getBoundingClientRect();
+        node.measured = dimensions, node.internals = {
+          ...node.internals,
+          handleBounds: {
+            source: getHandleBounds(".source", update.nodeElement, nodeBounds, zoom2, node.origin || nodeOrigin),
+            target: getHandleBounds(".target", update.nodeElement, nodeBounds, zoom2, node.origin || nodeOrigin)
+          }
+        }, updatedInternals = !0, dimensionChanged && (changes.push({
+          id: node.id,
+          type: "dimensions",
+          dimensions
+        }), node.expandParent && node.parentId && parentExpandChildren.push({
+          id: node.id,
+          parentId: node.parentId,
+          rect: nodeToRect(node, nodeOrigin)
+        }));
+      }
     }
   }), parentExpandChildren.length > 0) {
     const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
@@ -2935,7 +2939,7 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup }) {
   ];
 }
 function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop }) {
-  let lastPos = { x: null, y: null }, autoPanId = 0, dragItems = /* @__PURE__ */ new Map(), autoPanStarted = !1, mousePosition = { x: 0, y: 0 }, containerBounds = null, dragStarted = !1, d3Selection = null;
+  let lastPos = { x: null, y: null }, autoPanId = 0, dragItems = /* @__PURE__ */ new Map(), autoPanStarted = !1, mousePosition = { x: 0, y: 0 }, containerBounds = null, dragStarted = !1, d3Selection = null, abortDrag = !1;
   function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
     d3Selection = select(domNode);
     function updateNodes({ x, y }, dragEvent) {
@@ -3005,16 +3009,18 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     }
     const d3DragInstance = drag().on("start", (event) => {
       const { domNode: domNode2, nodeDragThreshold, transform: transform2, snapGrid, snapToGrid } = getStoreItems();
-      nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), containerBounds = (domNode2 == null ? void 0 : domNode2.getBoundingClientRect()) || null, mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+      abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), containerBounds = (domNode2 == null ? void 0 : domNode2.getBoundingClientRect()) || null, mousePosition = getEventPosition(event.sourceEvent, containerBounds);
     }).on("drag", (event) => {
       const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
-      if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
-        const x = pointerPos.xSnapped - (lastPos.x ?? 0), y = pointerPos.ySnapped - (lastPos.y ?? 0);
-        Math.sqrt(x * x + y * y) > nodeDragThreshold && startDrag(event);
+      if (event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 && (abortDrag = !0), !abortDrag) {
+        if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
+          const x = pointerPos.xSnapped - (lastPos.x ?? 0), y = pointerPos.ySnapped - (lastPos.y ?? 0);
+          Math.sqrt(x * x + y * y) > nodeDragThreshold && startDrag(event);
+        }
+        (lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted && (mousePosition = getEventPosition(event.sourceEvent, containerBounds), updateNodes(pointerPos, event.sourceEvent));
       }
-      (lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted && (mousePosition = getEventPosition(event.sourceEvent, containerBounds), updateNodes(pointerPos, event.sourceEvent));
     }).on("end", (event) => {
-      if (dragStarted && (autoPanStarted = !1, dragStarted = !1, cancelAnimationFrame(autoPanId), dragItems.size > 0)) {
+      if (!(!dragStarted || abortDrag) && (autoPanStarted = !1, dragStarted = !1, cancelAnimationFrame(autoPanId), dragItems.size > 0)) {
         const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
         if (updateNodePositions(dragItems, !1), onDragStop || onNodeDragStop || !nodeId && onSelectionDragStop) {
           const [currentNode, currentNodes] = getEventHandlerParams({
@@ -3040,13 +3046,19 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
   };
 }
 function getHandles(node, handleBounds, type, currentHandle) {
-  return (handleBounds[type] || []).reduce((res, h) => (`${node.id}-${h.id}-${type}` !== currentHandle && res.push({
-    id: h.id || null,
-    type,
-    nodeId: node.id,
-    x: node.internals.positionAbsolute.x + h.x + h.width / 2,
-    y: node.internals.positionAbsolute.y + h.y + h.height / 2
-  }), res), []);
+  return (handleBounds[type] || []).reduce((res, handle) => {
+    if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
+      const [x, y] = getHandlePosition(node, handle);
+      res.push({
+        id: handle.id || null,
+        type,
+        nodeId: node.id,
+        x,
+        y
+      });
+    }
+    return res;
+  }, []);
 }
 function getClosestHandle(pos, connectionRadius, handles) {
   let closestHandles = [], minDistance = 1 / 0;
@@ -3077,7 +3089,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, y } = getEventPosition(event), clickedHandle = doc == null ? void 0 : doc.elementFromPoint(x, y), handleType = getHandleType(edgeUpdaterType, clickedHandle), containerBounds = domNode == null ? void 0 : domNode.getBoundingClientRect();
@@ -3099,11 +3111,11 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
   connectionStartHandle = {
     nodeId,
     handleId,
-    type: handleType
+    type: handleType,
+    position: (clickedHandle == null ? void 0 : 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 == null || onConnectStart(event, { nodeId, handleId, handleType });
@@ -3133,7 +3145,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     });
   }
   function onPointerUp(event2) {
-    (closestHandle || handleDomNode) && connection && isValid && (onConnect == null || onConnect(connection)), onConnectEnd == null || onConnectEnd(event2), edgeUpdaterType && (onEdgeUpdateEnd == null || 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 == null || onConnect(connection)), onConnectEnd == null || onConnectEnd(event2), edgeUpdaterType && (onReconnectEnd == null || 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);
 }
@@ -3154,11 +3166,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;
 }
@@ -3288,10 +3303,15 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
 }
 function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib }) {
   return (event) => {
+    var _a;
     const zoomScroll = zoomActivationKeyPressed || zoomOnScroll, pinchZoom = zoomOnPinch && event.ctrlKey;
     if (event.button === 1 && event.type === "mousedown" && (isWrappedWithClass(event, `${lib}-flow__node`) || isWrappedWithClass(event, `${lib}-flow__edge`)))
       return !0;
-    if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch || userSelectionActive || isWrappedWithClass(event, noWheelClassName) && event.type === "wheel" || isWrappedWithClass(event, noPanClassName) && (event.type !== "wheel" || panOnScroll && event.type === "wheel" && !zoomActivationKeyPressed) || !zoomOnPinch && event.ctrlKey && event.type === "wheel" || !zoomScroll && !panOnScroll && !pinchZoom && event.type === "wheel" || !panOnDrag && (event.type === "mousedown" || event.type === "touchstart") || Array.isArray(panOnDrag) && !panOnDrag.includes(event.button) && event.type === "mousedown")
+    if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch || userSelectionActive || isWrappedWithClass(event, noWheelClassName) && event.type === "wheel" || isWrappedWithClass(event, noPanClassName) && (event.type !== "wheel" || panOnScroll && event.type === "wheel" && !zoomActivationKeyPressed) || !zoomOnPinch && event.ctrlKey && event.type === "wheel")
+      return !1;
+    if (!zoomOnPinch && event.type === "touchstart" && ((_a = event.touches) == null ? void 0 : _a.length) > 1)
+      return event.preventDefault(), !1;
+    if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === "wheel" || !panOnDrag && (event.type === "mousedown" || event.type === "touchstart") || Array.isArray(panOnDrag) && !panOnDrag.includes(event.button) && event.type === "mousedown")
       return !1;
     const buttonAllowed = Array.isArray(panOnDrag) && panOnDrag.includes(event.button) || !event.button || event.button <= 1;
     return (!event.ctrlKey || event.type === "wheel") && buttonAllowed;
@@ -3672,7 +3692,7 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   "nodesConnectable",
   "nodesFocusable",
   "edgesFocusable",
-  "edgesUpdatable",
+  "edgesReconnectable",
   "elevateNodesOnSelect",
   "elevateEdgesOnSelect",
   "minZoom",
@@ -3964,7 +3984,7 @@ function elementToRemoveChange(item) {
     type: "remove"
   };
 }
-const isNode = (element2) => isNodeBase(element2);
+const isNode = (element2) => isNodeBase(element2), isEdge = (element2) => isEdgeBase(element2);
 function fixedForwardRef(render) {
   return forwardRef(render);
 }
@@ -4026,6 +4046,8 @@ function useReactFlow() {
   const viewportHelper = useViewportHelper(), store = useStoreApi(), batchContext = useBatchContext(), viewportInitialized = useStore(selector$m), generalHelper = useMemo(() => {
     const getInternalNode = (id2) => store.getState().nodeLookup.get(id2), setNodes = (payload) => {
       batchContext.nodeQueue.push(payload);
+    }, setEdges = (payload) => {
+      batchContext.edgeQueue.push(payload);
     }, getNodeRect = (node) => {
       var _a, _b;
       const { nodeLookup, nodeOrigin } = store.getState(), nodeToUse = isNode(node) ? node : nodeLookup.get(node.id), position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin) : nodeToUse.position, nodeWithPosition = {
@@ -4044,6 +4066,14 @@ function useReactFlow() {
         }
         return node;
       }));
+    }, updateEdge = (id2, edgeUpdate, options = { replace: !1 }) => {
+      setEdges((prevEdges) => prevEdges.map((edge) => {
+        if (edge.id === id2) {
+          const nextEdge = typeof edgeUpdate == "function" ? edgeUpdate(edge) : edgeUpdate;
+          return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
+        }
+        return edge;
+      }));
     };
     return {
       getNodes: () => store.getState().nodes.map((n) => ({ ...n })),
@@ -4058,9 +4088,7 @@ function useReactFlow() {
       },
       getEdge: (id2) => store.getState().edgeLookup.get(id2),
       setNodes,
-      setEdges: (payload) => {
-        batchContext.edgeQueue.push(payload);
-      },
+      setEdges,
       addNodes: (payload) => {
         const newNodes = Array.isArray(payload) ? payload : [payload];
         batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
@@ -4122,6 +4150,13 @@ function useReactFlow() {
           const nextData = typeof dataUpdate == "function" ? dataUpdate(node) : dataUpdate;
           return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
         }, options);
+      },
+      updateEdge,
+      updateEdgeData: (id2, dataUpdate, options = { replace: !1 }) => {
+        updateEdge(id2, (edge) => {
+          const nextData = typeof dataUpdate == "function" ? dataUpdate(edge) : dataUpdate;
+          return options.replace ? { ...edge, data: nextData } : { ...edge, data: { ...edge.data, ...nextData } };
+        }, options);
       }
     };
   }, []);
@@ -4131,9 +4166,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 });
   useEffect(() => {
     if (deleteKeyPressed) {
       const { edges, nodes } = store.getState();
@@ -4263,10 +4298,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 = useRef(null), store = useStoreApi(), prevSelectedNodesCount = useRef(0), prevSelectedEdgesCount = useRef(0), containerBounds = useRef(), edgeIdLookup = useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow), resetUserSelection = () => {
+function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
+  const container2 = useRef(null), store = useStoreApi(), prevSelectedNodesCount = useRef(0), prevSelectedEdgesCount = useRef(0), containerBounds = useRef(), edgeIdLookup = useRef(/* @__PURE__ */ new Map()), { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow), hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive), selectionInProgress = 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 == null || onPaneClick(event), store.getState().resetSelectedElements(), store.setState({ nodesSelectionActive: !1 });
   }, onContextMenu = (event) => {
     if (Array.isArray(panOnDrag) && (panOnDrag != null && panOnDrag.includes(2))) {
@@ -4274,14 +4313,14 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       return;
     }
     onPaneContextMenu == null || onPaneContextMenu(event);
-  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onMouseDown = (event) => {
-    var _a, _b;
+  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onPointerDown2 = (event) => {
+    var _a, _b, _c;
     const { resetSelectedElements, domNode, edgeLookup } = store.getState();
-    if (containerBounds.current = domNode == null ? void 0 : domNode.getBoundingClientRect(), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container2.current || !containerBounds.current)
+    if (containerBounds.current = domNode == null ? void 0 : domNode.getBoundingClientRect(), (_a = container2.current) == null || _a.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)
-      edgeIdLookup.current.set(edge.source, ((_a = edgeIdLookup.current.get(edge.source)) == null ? void 0 : _a.add(id2)) || /* @__PURE__ */ new Set([id2])), edgeIdLookup.current.set(edge.target, ((_b = edgeIdLookup.current.get(edge.target)) == null ? void 0 : _b.add(id2)) || /* @__PURE__ */ new Set([id2]));
+      edgeIdLookup.current.set(edge.source, ((_b = edgeIdLookup.current.get(edge.source)) == null ? void 0 : _b.add(id2)) || /* @__PURE__ */ new Set([id2])), edgeIdLookup.current.set(edge.target, ((_c = edgeIdLookup.current.get(edge.target)) == null ? void 0 : _c.add(id2)) || /* @__PURE__ */ new Set([id2]));
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
     resetSelectedElements(), store.setState({
       userSelectionRect: {
@@ -4293,10 +4332,11 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         y
       }
     }), onSelectionStart == null || 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,
@@ -4327,15 +4367,15 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
       userSelectionActive: !0,
       nodesSelectionActive: !1
     });
-  }, onMouseUp = (event) => {
+  }, onPointerUp = (event) => {
+    var _a;
     if (event.button !== 0)
       return;
+    (_a = container2.current) == null || _a.releasePointerCapture(event.pointerId);
     const { userSelectionRect } = store.getState();
-    !userSelectionActive && userSelectionRect && event.target === container2.current && (onClick == null || onClick(event)), store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), resetUserSelection(), onSelectionEnd == null || onSelectionEnd(event);
-  }, onMouseLeave = (event) => {
-    userSelectionActive && (store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), onSelectionEnd == null || onSelectionEnd(event)), resetUserSelection();
-  }, hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-  return 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, jsx(UserSelection, {})] });
+    !userSelectionActive && userSelectionRect && event.target === container2.current && (onClick == null || onClick(event)), store.setState({ nodesSelectionActive: prevSelectedNodesCount.current > 0 }), resetUserSelection(), onSelectionEnd == null || onSelectionEnd(event), selectionKeyPressed && (selectionInProgress.current = !1);
+  };
+  return 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, jsx(UserSelection, {})] });
 }
 function handleNodeClick({ id: id2, store, unselect = !1, nodeRef }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState(), node = nodeLookup.get(id2);
@@ -4590,10 +4630,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(selector$g), selectionKeyPressed = useKeyPress(selectionKeyCode), panActivationKeyPressed = useKeyPress(panActivationKeyCode), panOnDrag = panActivationKeyPressed || _panOnDrag, panOnScroll = panActivationKeyPressed || _panOnScroll, isSelecting = selectionKeyPressed || userSelectionActive || selectionOnDrag && panOnDrag !== !0;
-  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, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
+  const { nodesSelectionActive, userSelectionActive } = useStore(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 }), 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: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
 }
 FlowRendererComponent.displayName = "FlowRenderer";
 const FlowRenderer = 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());
@@ -4608,7 +4648,8 @@ function useResizeObserver() {
       const id2 = entry.target.getAttribute("data-id");
       updates.set(id2, {
         id: id2,
-        nodeElement: entry.target
+        nodeElement: entry.target,
+        force: !0
       });
     }), updateNodeInternals2(updates);
   }));
@@ -4617,10 +4658,10 @@ function useResizeObserver() {
   }, [resizeObserver]), resizeObserver;
 }
 function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver }) {
-  const store = useStoreApi(), nodeRef = useRef(null), observedNode = useRef(null), prevSourcePosition = useRef(node.sourcePosition), prevTargetPosition = useRef(node.targetPosition), prevType = useRef(nodeType), isInitialized = hasDimensions && !!node.internals.handleBounds && !node.hidden;
+  const store = useStoreApi(), nodeRef = useRef(null), observedNode = useRef(null), prevSourcePosition = useRef(node.sourcePosition), prevTargetPosition = useRef(node.targetPosition), prevType = useRef(nodeType), isInitialized = hasDimensions && !!node.internals.handleBounds;
   return useEffect(() => {
-    nodeRef.current && (!isInitialized || observedNode.current !== nodeRef.current) && (observedNode.current && (resizeObserver == null || resizeObserver.unobserve(observedNode.current)), resizeObserver == null || resizeObserver.observe(nodeRef.current), observedNode.current = nodeRef.current);
-  }, [isInitialized]), useEffect(() => () => {
+    nodeRef.current && !node.hidden && (!isInitialized || observedNode.current !== nodeRef.current) && (observedNode.current && (resizeObserver == null || resizeObserver.unobserve(observedNode.current)), resizeObserver == null || resizeObserver.observe(nodeRef.current), observedNode.current = nodeRef.current);
+  }, [isInitialized, node.hidden]), useEffect(() => () => {
     observedNode.current && (resizeObserver == null || resizeObserver.unobserve(observedNode.current), observedNode.current = null);
   }, []), useEffect(() => {
     if (nodeRef.current) {
@@ -4700,7 +4741,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     visibility: hasDimensions ? "visible" : "hidden",
     ...node.style,
     ...inlineDimensions
-  }, "data-id": id2, "data-testid": `rf__node-${id2}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: isFocusable ? "button" : void 0, "aria-describedby": disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id2, children: jsx(NodeComponent, { id: id2, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging, dragHandle: node.dragHandle, zIndex: internals.z, ...nodeDimensions }) }) });
+  }, "data-id": id2, "data-testid": `rf__node-${id2}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : void 0, tabIndex: isFocusable ? 0 : void 0, role: isFocusable ? "button" : void 0, "aria-describedby": disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id2, children: jsx(NodeComponent, { id: id2, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, selectable: isSelectable, draggable: isDraggable, deletable: node.deletable ?? !0, isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging, dragHandle: node.dragHandle, zIndex: internals.z, parentId: node.parentId, ...nodeDimensions }) }) });
 }
 const selector$d = (s) => ({
   nodesDraggable: s.nodesDraggable,
@@ -4792,18 +4833,18 @@ const Marker = ({ id: id2, type, color: color2, width = 12.5, height = 12.5, mar
 MarkerDefinitions.displayName = "MarkerDefinitions";
 var MarkerDefinitions$1 = memo(MarkerDefinitions);
 function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = !0, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children: children2, className, ...rest }) {
-  const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 }), edgeTextClasses = cc(["react-flow__edge-textwrapper", className]), onEdgeTextRefChange = useCallback((edgeRef) => {
-    if (edgeRef === null)
-      return;
-    const textBbox = edgeRef.getBBox();
-    setEdgeTextBbox({
-      x: textBbox.x,
-      y: textBbox.y,
-      width: textBbox.width,
-      height: textBbox.height
-    });
-  }, []);
-  return typeof label > "u" || !label ? null : jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? "visible" : "hidden", ...rest, children: [labelShowBg && jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius }), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: onEdgeTextRefChange, style: labelStyle, children: label }), children2] });
+  const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 }), edgeTextClasses = cc(["react-flow__edge-textwrapper", className]), edgeTextRef = useRef(null);
+  return useEffect(() => {
+    if (edgeTextRef.current) {
+      const textBbox = edgeTextRef.current.getBBox();
+      setEdgeTextBbox({
+        x: textBbox.x,
+        y: textBbox.y,
+        width: textBbox.width,
+        height: textBbox.height
+      });
+    }
+  }, [label]), typeof label > "u" || !label ? null : jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? "visible" : "hidden", ...rest, children: [labelShowBg && jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius }), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: edgeTextRef, style: labelStyle, children: label }), children2] });
 }
 EdgeTextComponent.displayName = "EdgeText";
 const EdgeText = memo(EdgeTextComponent);
@@ -4934,15 +4975,15 @@ const builtinEdgeTypes = {
 function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type }) {
   return 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 == null || onEdgeUpdateStart(event, edge, handleType);
-    const _onEdgeUpdateEnd = (evt) => {
-      setUpdating(!1), onEdgeUpdateEnd == null || onEdgeUpdateEnd(evt, edge, handleType);
-    }, onConnectEdge = (connection) => onEdgeUpdate == null ? void 0 : onEdgeUpdate(edge, connection);
+    setReconnecting(!0), onReconnectStart == null || onReconnectStart(event, edge, handleType);
+    const _onReconnectEnd = (evt) => {
+      setReconnecting(!1), onReconnectEnd == null || onReconnectEnd(evt, edge, handleType);
+    }, onConnectEdge = (connection) => onReconnect == null ? void 0 : onReconnect(edge, connection);
     XYHandle.onPointerDown(event.nativeEvent, {
       autoPanOnConnect,
       connectionMode,
@@ -4961,21 +5002,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 jsxs(Fragment, { children: [(isUpdatable === "source" || isUpdatable === !0) && jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterSourceMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "source" }), (isUpdatable === "target" || isUpdatable === !0) && 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 jsxs(Fragment, { children: [(isReconnectable === "source" || isReconnectable === !0) && jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: reconnectRadius, onMouseDown: onReconnectSourceMouseDown, onMouseEnter: onReconnectMouseEnter, onMouseOut: onReconnectMouseOut, type: "source" }), (isReconnectable === "target" || isReconnectable === !0) && 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((s) => s.edgeLookup.get(id2));
   const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
   edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
   let edgeType = edge.type || "default", EdgeComponent = (edgeTypes2 == null ? void 0 : edgeTypes2[edgeType]) || builtinEdgeTypes[edgeType];
   EdgeComponent === void 0 && (onError == null || 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 = useRef(null), [updateHover, setUpdateHover] = useState(!1), [updating, setUpdating] = useState(!1), store = useStoreApi(), { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(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 = useRef(null), [updateHover, setUpdateHover] = useState(!1), [reconnecting, setReconnecting] = useState(!1), store = useStoreApi(), { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(useCallback((store2) => {
     const sourceNode = store2.nodeLookup.get(edge.source), targetNode = store2.nodeLookup.get(edge.target);
     if (!sourceNode || !targetNode)
       return {
@@ -5037,20 +5078,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 && jsx(EdgeComponent, { id: id2, source: edge.source, target: edge.target, type: edge.type, selected: edge.selected, animated: edge.animated, 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 && 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 && 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 && 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(selector$c, shallow), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
-  return jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId }), edgeIds.map((id2) => 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(selector$c, shallow), edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
+  return jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId }), edgeIds.map((id2) => 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 = memo(EdgeRendererComponent), selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
@@ -5080,20 +5121,22 @@ 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(useCallback((s) => {
-    var _a;
+  const { fromNode, handleId, toX, toY, connectionMode, endPosition, isValid } = useStore(useCallback((s) => {
+    var _a, _b;
     return {
       fromNode: s.nodeLookup.get(nodeId),
       handleId: (_a = s.connectionStartHandle) == null ? void 0 : _a.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: (_b = s.connectionEndHandle) == null ? void 0 : _b.position,
+      isValid: s.connectionStatus === "valid"
     };
   }, [nodeId]), shallow), fromHandleBounds = fromNode == null ? void 0 : fromNode.internals.handleBounds;
   let handleBounds = fromHandleBounds == null ? void 0 : fromHandleBounds[handleType];
   if (connectionMode === ConnectionMode.Loose && (handleBounds = handleBounds || (fromHandleBounds == null ? void 0 : 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 == null ? void 0 : 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 == null ? void 0 : fromHandle.position, toPosition = isValid && endPosition ? endPosition : fromPosition ? oppositePosition[fromPosition] : null;
   if (!fromPosition || !toPosition)
     return null;
   if (CustomComponent)
@@ -5137,8 +5180,8 @@ function useStylesLoadedWarning() {
   useStoreApi(), useRef(!1), 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), 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: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onEdgeUpdate, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), 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), 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: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes2, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes2, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
 }
 GraphViewComponent.displayName = "GraphView";
 const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView2 } = {}) => {
@@ -5192,7 +5235,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
     nodesConnectable: !0,
     nodesFocusable: !0,
     edgesFocusable: !0,
-    edgesUpdatable: !0,
+    edgesReconnectable: !0,
     elementsSelectable: !0,
     elevateNodesOnSelect: !0,
     elevateEdgesOnSelect: !1,
@@ -5400,9 +5443,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 jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, children: [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 }), 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 }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+  return jsx("div", { ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), "data-testid": "rf__wrapper", id: id2, children: jsxs(Wrapper, { nodes, edges, width, height, fitView: fitView2, children: [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 }), 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 }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
 const selector$8 = (s) => {
@@ -5423,16 +5466,6 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
     store.setState({ onViewportChangeEnd: onEnd });
   }, [onEnd]);
 }
-function useOnSelectionChange({ onChange }) {
-  const store = useStoreApi();
-  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(useCallback((s) => {
     const data = [], isArrayOfIds = Array.isArray(nodeIds), _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
@@ -5781,6 +5814,31 @@ function clsx() {
   for (var e, t2, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t2 = r(e)) && (n && (n += " "), n += t2);
   return n;
 }
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+var tilg = { exports: {} }, __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __hasOwnProp = Object.prototype.hasOwnProperty, __export = (target, all) => {
+  for (var name in all)
+    __defProp2(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+}, __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: !0 }), mod), production_exports = {};
+__export(production_exports, {
+  default: () => useTilg$1
+});
+var production = __toCommonJS(production_exports);
+function useTilg$1(...args) {
+  return args.length ? args[0] : (_strings, ...innerArgs) => {
+    if (innerArgs && innerArgs.length)
+      return innerArgs[0];
+  };
+}
+tilg.exports = production;
+var tilgExports = tilg.exports;
+const useTilg = /* @__PURE__ */ getDefaultExportFromCjs(tilgExports);
 var rootClassName = "likec4-diagram-root", keepAspectRatioContainer = "_2h8g8h0", cssReactFlow = "_2h8g8h1", cssDisablePan = "_2h8g8h2", cssTransparentBg = "_2h8g8h3", cssNoControls = "_2h8g8h4";
 function KeepAspectRatioContainer({
   children: children2,
@@ -6959,592 +7017,89 @@ function useDiagramStoreApi() {
   const store = useContext(DiagramContext);
   if (store === null)
     throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  return useMemo(
-    () => ({
-      getState: store.getState,
-      setState: store.setState,
-      subscribe: store.subscribe
-    }),
-    [store]
-  );
-}
-function WhenInitialized({ children: children2 }) {
-  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
-  return useEffect(() => {
-    if (!isInitialized)
-      return diagramApi.subscribe(
-        (s) => s.initialized,
-        setIsInitialized
-      );
-  }, [isInitialized]), isInitialized ? /* @__PURE__ */ jsx(Fragment, { children: children2 }) : null;
-}
-const useXYFlow = useReactFlow, useXYNodesData = useNodesData;
-function useXYStore(selector2, equalityFn) {
-  return useStore(
-    // @ts-expect-error - types are not correct
-    selector2,
-    equalityFn ?? shallowEqual
-  );
-}
-const useXYStoreApi = useStoreApi;
-class Rect {
-  constructor() {
-    __publicField(this, "id");
-    __publicField(this, "minX", new Variable());
-    __publicField(this, "minY", new Variable());
-    __publicField(this, "maxX", new Variable());
-    __publicField(this, "maxY", new Variable());
-  }
-  get x() {
-    return this.minX;
-  }
-  get y() {
-    return this.minY;
-  }
-  get positionAbsolute() {
-    return {
-      x: this.x.value(),
-      y: this.y.value()
-    };
-  }
-  get dimensions() {
-    return {
-      width: this.maxX.value() - this.minX.value(),
-      height: this.maxY.value() - this.minY.value()
-    };
-  }
-  // Position relative to parent
-  get position() {
-    const positionAbsolute = this.positionAbsolute;
-    if (!this.parent)
-      return positionAbsolute;
-    const parentPosition = this.parent.positionAbsolute;
-    return {
-      x: positionAbsolute.x - parentPosition.x,
-      y: positionAbsolute.y - parentPosition.y
-    };
-  }
+  return store;
 }
-class Compound extends Rect {
-  constructor(solver, xynode, parent = null) {
-    super();
-    __publicField(this, "children", []);
-    this.solver = solver, this.parent = parent, this.id = xynode.id, solver.createConstraint(this.maxX, Operator.Ge, this.minX), solver.createConstraint(this.maxY, Operator.Ge, this.minY), parent && parent.addChild(this);
-  }
-  addChild(rect) {
-    this.children.push(rect);
-    const leftPadding = new Expression(
-      rect.minX,
-      [-1, this.minX]
-    ), { weak } = Strength;
-    this.solver.createConstraint(leftPadding, Operator.Ge, 40), this.solver.createConstraint(leftPadding, Operator.Eq, 40, weak);
-    const topPadding = new Expression(
-      rect.minY,
-      [-1, this.minY]
-    );
-    this.solver.createConstraint(topPadding, Operator.Ge, 60), this.solver.createConstraint(topPadding, Operator.Eq, 60, weak);
-    const rightPadding = new Expression(
-      this.maxX,
-      [-1, rect.maxX]
-    );
-    this.solver.createConstraint(rightPadding, Operator.Ge, 40), this.solver.createConstraint(rightPadding, Operator.Eq, 40, weak);
-    const bottomPadding = new Expression(
-      this.maxY,
-      [-1, rect.maxY]
-    );
-    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 40, weak);
-  }
+const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
+function crt(v) {
+  return v < 0 ? -pow(-v, 1 / 3) : pow(v, 1 / 3);
 }
-class Leaf extends Rect {
-  constructor(solver, xynode, parent = null, isEditing = !1) {
-    super(), this.parent = parent, this.isEditing = isEditing, this.id = xynode.id;
-    const x = Math.ceil(xynode.internals.positionAbsolute.x), y = Math.ceil(xynode.internals.positionAbsolute.y), { width, height } = getNodeDimensions(xynode);
-    if (this.maxX = new Expression(this.minX, Math.ceil(width)), this.maxY = new Expression(this.minY, Math.ceil(height)), isEditing) {
-      const superStrong = Strength.create(100, 0, 0);
-      solver.addEditVariable(this.minX, superStrong), solver.addEditVariable(this.minY, superStrong), solver.suggestValue(this.minX, x), solver.suggestValue(this.minY, y);
-    } else {
-      const halfMedium = Strength.create(0, 1, 0, 0.5);
-      solver.createConstraint(this.minX, Operator.Eq, x, halfMedium), solver.createConstraint(this.minY, Operator.Eq, y, halfMedium);
-    }
-    parent && parent.addChild(this);
-  }
-}
-function createLayoutConstraints(xyflow, xyflowApi, draggingNodeId) {
-  var _a;
-  const { parentLookup, nodeLookup } = xyflowApi.getState(), solver = new Solver(), rects = /* @__PURE__ */ new Map(), traverse = new Array();
-  for (const [, xynode] of nodeLookup)
-    isNullish(xynode.parentId) && traverse.push({
-      xynode,
-      parent: null
-    });
-  for (; traverse.length > 0; ) {
-    const { xynode, parent } = traverse.shift(), isDragging = xynode.dragging === !0 || xynode.id === draggingNodeId, shouldTraverse = !isDragging && xynode.type === "compound" && isAncestor(xynode.id, draggingNodeId), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
-    rects.set(xynode.id, rect), shouldTraverse && ((_a = parentLookup.get(xynode.id)) == null || _a.forEach((child) => {
-      traverse.push({
-        xynode: child,
-        parent: rect
-      });
-    }));
-  }
-  solver.updateVariables(), solver.maxIterations = 1e3;
-  function updateXYFlowNodes() {
-    solver.updateVariables(), xyflow.setNodes(
-      (nodes) => nodes.map((n) => {
-        if (n.id === draggingNodeId || n.dragging === !0)
-          return n;
-        const rect = rects.get(n.id);
-        if (!rect)
-          return n;
-        const dimensions = rect.dimensions, newXY = rect.position;
-        return newXY.x !== n.position.x || newXY.y !== n.position.y ? {
-          ...n,
-          position: rect.position,
-          width: dimensions.width,
-          height: dimensions.height,
-          measured: dimensions
-        } : dimensions.width !== n.width || dimensions.height !== n.height ? {
-          ...n,
-          width: dimensions.width,
-          height: dimensions.height,
-          measured: dimensions
-        } : n;
-      })
-    );
-  }
-  let animationFrameId = null;
-  function onNodeDrag(xynode) {
-    const pos = nodeLookup.get(xynode.id).internals.positionAbsolute, rect = nonNullable(rects.get(xynode.id));
-    solver.suggestValue(rect.minX, Math.ceil(pos.x)), solver.suggestValue(rect.minY, Math.ceil(pos.y)), animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
-      updateXYFlowNodes(), animationFrameId = null;
-    }));
-  }
-  return {
-    onNodeDrag,
-    updateXYFlowNodes
-  };
-}
-function useLayoutConstraints() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), solverRef = useRef();
-  return useMemo(() => ({
-    onNodeDragStart: (_event, xynode) => {
-      const { xyflow } = diagramApi.getState();
-      solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
-    },
-    onNodeDrag: (_event, xynode) => {
-      var _a;
-      invariant(solverRef.current, "solverRef.current should be defined"), (_a = solverRef.current) == null || _a.onNodeDrag(xynode);
-    },
-    onNodeDragStop: (_event, _xynode) => {
-      solverRef.current = void 0;
-    }
-  }), [xyflowApi]);
-}
-const ZIndexes = {
-  Compound: 1,
-  Edge: 2,
-  Element: 3
-}, MinZoom = 0.05, StringSet = Set, DEFAULT_PROPS = {
-  initialized: !1,
-  xyflowSynced: !1,
-  previousViews: [],
-  viewportChanged: !1,
-  activeDynamicViewStep: null,
-  focusedNodeId: null,
-  hoveredNodeId: null,
-  hoveredEdgeId: null,
-  lastClickedNodeId: null,
-  lastClickedEdgeId: null,
-  dimmed: new StringSet(),
-  lastOnNavigate: null,
-  onChange: null,
-  onNavigateTo: null,
-  onNodeClick: null,
-  onNodeContextMenu: null,
-  onCanvasContextMenu: null,
-  onEdgeClick: null,
-  onEdgeContextMenu: null,
-  onCanvasClick: null,
-  onCanvasDblClick: null
-}, noReplace = !1;
-let storeDevId = 1;
-const EmptyStringSet = new StringSet();
-function createDiagramStore(props) {
-  return createWithEqualityFn(
-    subscribeWithSelector(
-      devtools(
-        (set2, get2) => ({
-          ...DEFAULT_PROPS,
-          ...props,
-          isDynamicView: () => {
-            var _a;
-            return ((_a = get2().view) == null ? void 0 : _a.__) === "dynamic";
-          },
-          updateView: (nextView) => {
-            let {
-              dimmed: dimmed2,
-              xyflowSynced,
-              view: current,
-              lastOnNavigate,
-              previousViews,
-              focusedNodeId,
-              lastClickedNodeId,
-              lastClickedEdgeId,
-              activeDynamicViewStep,
-              hoveredEdgeId,
-              hoveredNodeId
-            } = get2();
-            if (shallowEqual(current, nextView)) {
-              xyflowSynced || set2({ xyflowSynced: !0 }, noReplace, "updateView: xyflow synced"), DEV && console.debug("store: skip updateView");
-              return;
-            }
-            if (current.id === nextView.id) {
-              const nodeIds = new StringSet(nextView.nodes.map((n) => n.id)), edgeIds = new StringSet(nextView.edges.map((e) => e.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, nextView.nodes) && deepEqual(current.edges, nextView.edges), !xyflowSynced) {
-                let nextDimmed = new StringSet([...dimmed2].filter((id2) => nodeIds.has(id2) || edgeIds.has(id2)));
-                nextDimmed.size !== dimmed2.size && (dimmed2 = nextDimmed);
-              }
-            } else
-              lastOnNavigate && lastOnNavigate.toView !== nextView.id && lastOnNavigate.fromView !== nextView.id && (lastOnNavigate = null), lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet, previousViews = [
-                current,
-                ...previousViews.filter((v) => v.id !== nextView.id && v.id !== current.id)
-              ], xyflowSynced = !1;
-            set2(
-              {
-                view: nextView,
-                activeDynamicViewStep,
-                xyflowSynced,
-                lastOnNavigate,
-                previousViews,
-                lastClickedNodeId,
-                lastClickedEdgeId,
-                focusedNodeId,
-                hoveredEdgeId,
-                hoveredNodeId,
-                dimmed: dimmed2
-              },
-              noReplace,
-              "update-view"
-            );
-          },
-          focusOnNode: (nodeId) => {
-            const { focusedNodeId, view } = get2();
-            if (nodeId !== focusedNodeId) {
-              const notDimmed = new StringSet([nodeId]), dimmed2 = new StringSet();
-              for (const edge of view.edges)
-                edge.source === nodeId || edge.target === nodeId ? (notDimmed.add(edge.source), notDimmed.add(edge.target)) : dimmed2.add(edge.id);
-              for (const node of view.nodes)
-                notDimmed.has(node.id) || dimmed2.add(node.id);
-              set2(
-                {
-                  activeDynamicViewStep: null,
-                  focusedNodeId: nodeId,
-                  dimmed: dimmed2
-                },
-                noReplace,
-                `focus on node: ${nodeId}`
-              );
-            }
-          },
-          setHoveredNode: (nodeId) => {
-            nodeId !== get2().hoveredNodeId && set2({ hoveredNodeId: nodeId }, noReplace, nodeId ? "setHoveredNode" : "unsetHoveredNode");
-          },
-          setHoveredEdge: (edgeId) => {
-            edgeId !== get2().hoveredEdgeId && set2({ hoveredEdgeId: edgeId }, noReplace, edgeId ? "setHoveredEdge" : "unsetHoveredEdge");
-          },
-          setLastClickedNode: (nodeId) => {
-            nodeId !== get2().lastClickedNodeId && set2({ lastClickedNodeId: nodeId }, noReplace, nodeId ? "setLastClickedNode" : "unsetLastClickedNode");
-          },
-          setLastClickedEdge: (edgeId) => {
-            edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? "setLastClickedEdge" : "unsetLastClickedEdge");
-          },
-          resetLastClicked: () => {
-            let {
-              focusedNodeId,
-              lastClickedNodeId,
-              lastClickedEdgeId
-            } = get2();
-            (focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set2(
-              {
-                focusedNodeId: null,
-                lastClickedNodeId: null,
-                lastClickedEdgeId: null,
-                dimmed: EmptyStringSet
-              },
-              noReplace,
-              "resetLastClicked"
-            );
-          },
-          getElement: (fqn) => {
-            const { view } = get2();
-            return view.nodes.find(({ id: id2 }) => id2 === fqn) ?? null;
-          },
-          triggerOnChange: (changes) => {
-            var _a, _b;
-            DEV && console.debug("triggerOnChange", changes);
-            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map(), newOpacity = /* @__PURE__ */ new Map(), newBorder = /* @__PURE__ */ new Map();
-            for (const change of changes) {
-              change.op !== "change-element-style" && nonexhaustive(change.op);
-              for (const target of change.targets)
-                for (const [key, value] of entries.strict(change.style))
-                  switch (key) {
-                    case "shape":
-                      newShapes.set(target, value);
-                      break;
-                    case "color":
-                      newColor.set(target, value);
-                      break;
-                    case "opacity":
-                      newOpacity.set(target, value);
-                      break;
-                    case "border":
-                      newBorder.set(target, value);
-                      break;
-                    default:
-                      nonexhaustive(key);
-                  }
-            }
-            get2().xyflow.setNodes(
-              (nodes) => nodes.map((node) => {
-                var _a2, _b2;
-                let element2 = node.data.element;
-                const shape = newShapes.get(element2.id);
-                shape && shape !== element2.shape && (element2 = {
-                  ...element2,
-                  shape
-                });
-                const color2 = newColor.get(element2.id);
-                color2 && color2 !== element2.color && (element2 = {
-                  ...element2,
-                  color: color2
-                });
-                const opacity = newOpacity.get(element2.id);
-                opacity && opacity !== ((_a2 = element2.style) == null ? void 0 : _a2.opacity) && (element2 = {
-                  ...element2,
-                  style: {
-                    ...element2.style,
-                    opacity
-                  }
-                });
-                const border = newBorder.get(element2.id);
-                return border && border !== ((_b2 = element2.style) == null ? void 0 : _b2.border) && (element2 = {
-                  ...element2,
-                  style: {
-                    ...element2.style,
-                    border
-                  }
-                }), element2 === node.data.element ? node : {
-                  ...node,
-                  data: {
-                    ...node.data,
-                    element: element2
-                  }
-                };
-              })
-            ), (_b = (_a = get2()).onChange) == null || _b.call(_a, { changes });
-          },
-          triggerOnNavigateTo: (xynodeId, event) => {
-            var _a, _b;
-            const { xyflow, view } = get2(), xynode = xyflow.getInternalNode(xynodeId), element2 = xynode == null ? void 0 : xynode.data.element;
-            invariant(!!xynode && (element2 == null ? void 0 : element2.navigateTo), `node is not navigable: ${xynodeId}`);
-            const dimensions = getNodeDimensions(xynode);
-            set2(
-              {
-                lastClickedNodeId: xynodeId,
-                lastOnNavigate: {
-                  fromView: view.id,
-                  toView: element2.navigateTo,
-                  element: element2,
-                  elementCenterScreenPosition: xyflow.flowToScreenPosition({
-                    x: xynode.internals.positionAbsolute.x + dimensions.width / 2,
-                    y: xynode.internals.positionAbsolute.y + dimensions.height / 2
-                  }),
-                  positionCorrected: !1
-                }
-              },
-              noReplace,
-              "triggerOnNavigateTo"
-            ), (_b = (_a = get2()).onNavigateTo) == null || _b.call(
-              _a,
-              element2.navigateTo,
-              event,
-              element2,
-              xynode.internals.userNode
-            );
-          },
-          fitDiagram: (xyStore) => {
-            const { width, height, panZoom } = xyStore.getState(), { fitViewPadding, view, focusedNodeId } = get2(), bounds = {
-              x: 0,
-              y: 0,
-              width: view.width,
-              height: view.height
-            }, viewport = getViewportForBounds(bounds, width, height, MinZoom, 1, fitViewPadding);
-            panZoom == null || panZoom.setViewport(viewport, { duration: 400 }), focusedNodeId && set2(
-              {
-                focusedNodeId: null,
-                dimmed: EmptyStringSet
-              },
-              noReplace,
-              "unfocus"
-            );
-          },
-          nextDynamicStep: (increment = 1) => {
-            const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get2();
-            invariant(view.__ === "dynamic", "view is not dynamic");
-            const nextStep = (activeDynamicViewStep ?? 0) + increment, edgeId = StepEdgeId(nextStep), dimmed2 = new StringSet();
-            let edge = null;
-            for (const e of xyflow.getEdges()) {
-              if (e.id === edgeId) {
-                edge = e;
-                continue;
-              }
-              dimmed2.add(e.id);
-            }
-            invariant(!!edge, `edge not found: ${edgeId}`);
-            const selected2 = [];
-            for (const n of xyflow.getNodes()) {
-              if (n.id === edge.source || n.id === edge.target) {
-                selected2.push(n);
-                continue;
-              }
-              dimmed2.add(n.id);
-            }
-            xyflow.fitView({
-              duration: 400,
-              maxZoom: 1,
-              minZoom: MinZoom,
-              padding: fitViewPadding,
-              nodes: selected2
-            }), set2({
-              focusedNodeId: null,
-              activeDynamicViewStep: nextStep,
-              dimmed: dimmed2
-            });
-          },
-          stopDynamicView: () => {
-            const { xyflow, fitViewPadding } = get2();
-            set2({
-              activeDynamicViewStep: null,
-              dimmed: EmptyStringSet
-            }), xyflow.fitView({
-              duration: 400,
-              maxZoom: 1,
-              minZoom: MinZoom,
-              padding: fitViewPadding
-            });
-          }
-        }),
-        {
-          name: `DiagramStore ${storeDevId++} - ${props.view.id}`,
-          enabled: DEV
-        }
-      )
-    ),
-    shallow
-  );
-}
-const DiagramContext = createContext(null);
-function DiagramContextProvider({ children: children2, view, ...props }) {
-  const xyflow = useXYFlow(), store = useRef();
-  return store.current || (store.current = createDiagramStore({
-    xyflow,
-    view,
-    ...props
-  })), useEffect(
-    () => {
-      var _a, _b;
-      ((_a = store.current) == null ? void 0 : _a.getState().xyflow) !== xyflow && ((_b = store.current) == null || _b.setState({ xyflow }, !1, "update xyflow"));
-    },
-    [xyflow]
-  ), useUpdateEffect(
-    () => {
-      if (!store.current) return;
-      const state = store.current.getState();
-      state.view !== view && state.updateView(view), hasSubObject(state, props) || store.current.setState(props, !1, "update incoming props");
-    },
-    [view, props]
-  ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
-}
-const { abs: abs$1, cos: cos$1, sin: sin$1, acos: acos$1, atan2, sqrt: sqrt$1, pow } = Math;
-function crt(v) {
-  return v < 0 ? -pow(-v, 1 / 3) : pow(v, 1 / 3);
-}
-const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = Number.MAX_SAFE_INTEGER || 9007199254740991, nMin = Number.MIN_SAFE_INTEGER || -9007199254740991, ZERO = { x: 0, y: 0, z: 0 }, utils = {
-  // Legendre-Gauss abscissae with n=24 (x_i values, defined at i=n as the roots of the nth order Legendre polynomial Pn(x))
-  Tvalues: [
-    -0.06405689286260563,
-    0.06405689286260563,
-    -0.1911188674736163,
-    0.1911188674736163,
-    -0.3150426796961634,
-    0.3150426796961634,
-    -0.4337935076260451,
-    0.4337935076260451,
-    -0.5454214713888396,
-    0.5454214713888396,
-    -0.6480936519369755,
-    0.6480936519369755,
-    -0.7401241915785544,
-    0.7401241915785544,
-    -0.820001985973903,
-    0.820001985973903,
-    -0.8864155270044011,
-    0.8864155270044011,
-    -0.9382745520027328,
-    0.9382745520027328,
-    -0.9747285559713095,
-    0.9747285559713095,
-    -0.9951872199970213,
-    0.9951872199970213
-  ],
-  // Legendre-Gauss weights with n=24 (w_i values, defined by a function linked to in the Bezier primer article)
-  Cvalues: [
-    0.12793819534675216,
-    0.12793819534675216,
-    0.1258374563468283,
-    0.1258374563468283,
-    0.12167047292780339,
-    0.12167047292780339,
-    0.1155056680537256,
-    0.1155056680537256,
-    0.10744427011596563,
-    0.10744427011596563,
-    0.09761865210411388,
-    0.09761865210411388,
-    0.08619016153195327,
-    0.08619016153195327,
-    0.0733464814110803,
-    0.0733464814110803,
-    0.05929858491543678,
-    0.05929858491543678,
-    0.04427743881741981,
-    0.04427743881741981,
-    0.028531388628933663,
-    0.028531388628933663,
-    0.0123412297999872,
-    0.0123412297999872
-  ],
-  arcfn: function(t2, derivativeFn) {
-    const d = derivativeFn(t2);
-    let l = d.x * d.x + d.y * d.y;
-    return typeof d.z < "u" && (l += d.z * d.z), sqrt$1(l);
-  },
-  compute: function(t2, points, _3d) {
-    if (t2 === 0)
-      return points[0].t = 0, points[0];
-    const order = points.length - 1;
-    if (t2 === 1)
-      return points[order].t = 1, points[order];
-    const mt = 1 - t2;
-    let p = points;
-    if (order === 0)
-      return points[0].t = t2, points[0];
-    if (order === 1) {
-      const ret = {
-        x: mt * p[0].x + t2 * p[1].x,
-        y: mt * p[0].y + t2 * p[1].y,
-        t: t2
-      };
-      return _3d && (ret.z = mt * p[0].z + t2 * p[1].z), ret;
+const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = Number.MAX_SAFE_INTEGER || 9007199254740991, nMin = Number.MIN_SAFE_INTEGER || -9007199254740991, ZERO = { x: 0, y: 0, z: 0 }, utils = {
+  // Legendre-Gauss abscissae with n=24 (x_i values, defined at i=n as the roots of the nth order Legendre polynomial Pn(x))
+  Tvalues: [
+    -0.06405689286260563,
+    0.06405689286260563,
+    -0.1911188674736163,
+    0.1911188674736163,
+    -0.3150426796961634,
+    0.3150426796961634,
+    -0.4337935076260451,
+    0.4337935076260451,
+    -0.5454214713888396,
+    0.5454214713888396,
+    -0.6480936519369755,
+    0.6480936519369755,
+    -0.7401241915785544,
+    0.7401241915785544,
+    -0.820001985973903,
+    0.820001985973903,
+    -0.8864155270044011,
+    0.8864155270044011,
+    -0.9382745520027328,
+    0.9382745520027328,
+    -0.9747285559713095,
+    0.9747285559713095,
+    -0.9951872199970213,
+    0.9951872199970213
+  ],
+  // Legendre-Gauss weights with n=24 (w_i values, defined by a function linked to in the Bezier primer article)
+  Cvalues: [
+    0.12793819534675216,
+    0.12793819534675216,
+    0.1258374563468283,
+    0.1258374563468283,
+    0.12167047292780339,
+    0.12167047292780339,
+    0.1155056680537256,
+    0.1155056680537256,
+    0.10744427011596563,
+    0.10744427011596563,
+    0.09761865210411388,
+    0.09761865210411388,
+    0.08619016153195327,
+    0.08619016153195327,
+    0.0733464814110803,
+    0.0733464814110803,
+    0.05929858491543678,
+    0.05929858491543678,
+    0.04427743881741981,
+    0.04427743881741981,
+    0.028531388628933663,
+    0.028531388628933663,
+    0.0123412297999872,
+    0.0123412297999872
+  ],
+  arcfn: function(t2, derivativeFn) {
+    const d = derivativeFn(t2);
+    let l = d.x * d.x + d.y * d.y;
+    return typeof d.z < "u" && (l += d.z * d.z), sqrt$1(l);
+  },
+  compute: function(t2, points, _3d) {
+    if (t2 === 0)
+      return points[0].t = 0, points[0];
+    const order = points.length - 1;
+    if (t2 === 1)
+      return points[order].t = 1, points[order];
+    const mt = 1 - t2;
+    let p = points;
+    if (order === 0)
+      return points[0].t = t2, points[0];
+    if (order === 1) {
+      const ret = {
+        x: mt * p[0].x + t2 * p[1].x,
+        y: mt * p[0].y + t2 * p[1].y,
+        t: t2
+      };
+      return _3d && (ret.z = mt * p[0].z + t2 * p[1].z), ret;
     }
     if (order < 4) {
       let mt2 = mt * mt, t22 = t2 * t2, a, b, c, d = 0;
@@ -7605,8 +7160,8 @@ const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = N
     }
     return dpoints;
   },
-  between: function(v, m, M) {
-    return m <= v && v <= M || utils.approximately(v, m) || utils.approximately(v, M);
+  between: function(v, m2, M) {
+    return m2 <= v && v <= M || utils.approximately(v, m2) || utils.approximately(v, M);
   },
   approximately: function(a, b, precision) {
     return abs$1(a - b) <= (precision || epsilon);
@@ -7757,38 +7312,38 @@ const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = N
   },
   roots: function(points, line2) {
     line2 = line2 || { p1: { x: 0, y: 0 }, p2: { x: 1, y: 0 } };
-    const order = points.length - 1, aligned = utils.align(points, line2), reduce = function(t2) {
+    const order = points.length - 1, aligned = utils.align(points, line2), reduce2 = function(t2) {
       return 0 <= t2 && t2 <= 1;
     };
     if (order === 2) {
       const a2 = aligned[0].y, b2 = aligned[1].y, c2 = aligned[2].y, d2 = a2 - 2 * b2 + c2;
       if (d2 !== 0) {
         const m1 = -sqrt$1(b2 * b2 - a2 * c2), m2 = -a2 + b2, v12 = -(m1 + m2) / d2, v2 = -(-m1 + m2) / d2;
-        return [v12, v2].filter(reduce);
+        return [v12, v2].filter(reduce2);
       } else if (b2 !== c2 && d2 === 0)
-        return [(2 * b2 - c2) / (2 * b2 - 2 * c2)].filter(reduce);
+        return [(2 * b2 - c2) / (2 * b2 - 2 * c2)].filter(reduce2);
       return [];
     }
     const pa = aligned[0].y, pb = aligned[1].y, pc = aligned[2].y, pd = aligned[3].y;
     let d = -pa + 3 * pb - 3 * pc + pd, a = 3 * pa - 6 * pb + 3 * pc, b = -3 * pa + 3 * pb, c = pa;
     if (utils.approximately(d, 0)) {
       if (utils.approximately(a, 0))
-        return utils.approximately(b, 0) ? [] : [-c / b].filter(reduce);
+        return utils.approximately(b, 0) ? [] : [-c / b].filter(reduce2);
       const q3 = sqrt$1(b * b - 4 * a * c), a2 = 2 * a;
-      return [(q3 - b) / a2, (-b - q3) / a2].filter(reduce);
+      return [(q3 - b) / a2, (-b - q3) / a2].filter(reduce2);
     }
     a /= d, b /= d, c /= d;
     const p = (3 * b - a * a) / 3, p3 = p / 3, q = (2 * a * a * a - 9 * a * b + 27 * c) / 27, q2 = q / 2, discriminant = q2 * q2 + p3 * p3 * p3;
     let u1, v1, x1, x2, x3;
     if (discriminant < 0) {
       const mp3 = -p / 3, mp33 = mp3 * mp3 * mp3, r2 = sqrt$1(mp33), t2 = -q / (2 * r2), cosphi = t2 < -1 ? -1 : t2 > 1 ? 1 : t2, phi = acos$1(cosphi), crtr = crt(r2), t1 = 2 * crtr;
-      return x1 = t1 * cos$1(phi / 3) - a / 3, x2 = t1 * cos$1((phi + tau) / 3) - a / 3, x3 = t1 * cos$1((phi + 2 * tau) / 3) - a / 3, [x1, x2, x3].filter(reduce);
+      return x1 = t1 * cos$1(phi / 3) - a / 3, x2 = t1 * cos$1((phi + tau) / 3) - a / 3, x3 = t1 * cos$1((phi + 2 * tau) / 3) - a / 3, [x1, x2, x3].filter(reduce2);
     } else {
       if (discriminant === 0)
-        return u1 = q2 < 0 ? crt(-q2) : -crt(q2), x1 = 2 * u1 - a / 3, x2 = -u1 - a / 3, [x1, x2].filter(reduce);
+        return u1 = q2 < 0 ? crt(-q2) : -crt(q2), x1 = 2 * u1 - a / 3, x2 = -u1 - a / 3, [x1, x2].filter(reduce2);
       {
         const sd = sqrt$1(discriminant);
-        return u1 = crt(-q2 + sd), v1 = crt(q2 + sd), [u1 - v1 - a / 3].filter(reduce);
+        return u1 = crt(-q2 + sd), v1 = crt(q2 + sd), [u1 - v1 - a / 3].filter(reduce2);
       }
     }
   },
@@ -7875,8 +7430,8 @@ const pi$1 = Math.PI, tau = 2 * pi$1, quart = pi$1 / 2, epsilon = 1e-6, nMax = N
   },
   getccenter: function(p1, p2, p3) {
     const dx1 = p2.x - p1.x, dy1 = p2.y - p1.y, dx2 = p3.x - p2.x, dy2 = p3.y - p2.y, dx1p = dx1 * cos$1(quart) - dy1 * sin$1(quart), dy1p = dx1 * sin$1(quart) + dy1 * cos$1(quart), dx2p = dx2 * cos$1(quart) - dy2 * sin$1(quart), dy2p = dx2 * sin$1(quart) + dy2 * cos$1(quart), mx1 = (p1.x + p2.x) / 2, my1 = (p1.y + p2.y) / 2, mx2 = (p2.x + p3.x) / 2, my2 = (p2.y + p3.y) / 2, mx1n = mx1 + dx1p, my1n = my1 + dy1p, mx2n = mx2 + dx2p, my2n = my2 + dy2p, arc = utils.lli8(mx1, my1, mx1n, my1n, mx2, my2, mx2n, my2n), r2 = utils.dist(arc, p1);
-    let s = atan2(p1.y - arc.y, p1.x - arc.x), m = atan2(p2.y - arc.y, p2.x - arc.x), e = atan2(p3.y - arc.y, p3.x - arc.x), _;
-    return s < e ? ((s > m || m > e) && (s += tau), s > e && (_ = e, e = s, s = _)) : e < m && m < s ? (_ = e, e = s, s = _) : e += tau, arc.s = s, arc.e = e, arc.r = r2, arc;
+    let s = atan2(p1.y - arc.y, p1.x - arc.x), m2 = atan2(p2.y - arc.y, p2.x - arc.x), e = atan2(p3.y - arc.y, p3.x - arc.x), _;
+    return s < e ? ((s > m2 || m2 > e) && (s += tau), s > e && (_ = e, e = s, s = _)) : e < m2 && m2 < s ? (_ = e, e = s, s = _) : e += tau, arc.s = s, arc.e = e, arc.r = r2, arc;
   },
   numberSort: function(a, b) {
     return a - b;
@@ -8110,8 +7665,8 @@ class Bezier {
       x: r2.y * r1.z - r2.z * r1.y,
       y: r2.z * r1.x - r2.x * r1.z,
       z: r2.x * r1.y - r2.y * r1.x
-    }, m = sqrt(c.x * c.x + c.y * c.y + c.z * c.z);
-    c.x /= m, c.y /= m, c.z /= m;
+    }, m2 = sqrt(c.x * c.x + c.y * c.y + c.z * c.z);
+    c.x /= m2, c.y /= m2, c.z /= m2;
     const R = [
       c.x * c.x,
       c.x * c.y - c.z,
@@ -8265,8 +7820,8 @@ class Bezier {
           y: p.y - o.y
         }, rc = distanceFn ? distanceFn((t2 + 1) / order) : d;
         distanceFn && !clockwise && (rc = -rc);
-        var m = sqrt(ov.x * ov.x + ov.y * ov.y);
-        ov.x /= m, ov.y /= m, np[t2 + 1] = {
+        var m2 = sqrt(ov.x * ov.x + ov.y * ov.y);
+        ov.x /= m2, ov.y /= m2, np[t2 + 1] = {
           x: p.x + rc * ov.x,
           y: p.y + rc * ov.y
         };
@@ -8382,38 +7937,589 @@ class Bezier {
                 x: arc.x + arc.r * cos(arc.e),
                 y: arc.y + arc.r * sin(arc.e)
               };
-              arc.e += utils.angle({ x: arc.x, y: arc.y }, d, this.get(1));
+              arc.e += utils.angle({ x: arc.x, y: arc.y }, d, this.get(1));
+            }
+            break;
+          }
+          t_e = t_e + (t_e - t_s) / 2;
+        } else
+          t_e = t_m;
+      while (!done && safety++ < 100);
+      if (safety >= 100)
+        break;
+      prev_arc = prev_arc || arc, circles.push(prev_arc), t_s = prev_e;
+    } while (t_e < 1);
+    return circles;
+  }
+}
+function toDomPrecision(v) {
+  return v === null ? 0.01 : Math.round(v * 100) / 100;
+}
+function bezierControlPoints(diagramEdge) {
+  let [start2, ...bezierPoints] = diagramEdge.points;
+  invariant(start2, "start should be defined");
+  const handles = [
+    // start
+  ];
+  for (; hasAtLeast(bezierPoints, 3); ) {
+    const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start2[0], start2[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
+    inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
+      const { x, y } = bezier.get(t2);
+      handles.push({
+        x: toDomPrecision(x),
+        y: toDomPrecision(y)
+      });
+    }), bezierPoints = rest, start2 = end;
+  }
+  return invariant(bezierPoints.length === 0, "all points should be consumed"), diagramEdge.dir === "back" && handles.length > 0 && handles.reverse(), handles;
+}
+const isClose = (a, b) => Math.abs(a - b) < 3.1;
+function isSamePoint$1(a, b) {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
+  return isClose(ax, bx) && isClose(ay, by);
+}
+const useXYFlow = useReactFlow, useXYNodesData = useNodesData;
+function useXYStore(selector2, equalityFn) {
+  return useStore(
+    // @ts-expect-error - types are not correct
+    selector2,
+    equalityFn ?? shallowEqual
+  );
+}
+const useXYStoreApi = useStoreApi;
+class Rect {
+  constructor() {
+    __publicField(this, "id");
+    __publicField(this, "minX", new Variable());
+    __publicField(this, "minY", new Variable());
+    __publicField(this, "maxX", new Variable());
+    __publicField(this, "maxY", new Variable());
+  }
+  get x() {
+    return this.minX;
+  }
+  get y() {
+    return this.minY;
+  }
+  get positionAbsolute() {
+    return {
+      x: this.x.value(),
+      y: this.y.value()
+    };
+  }
+  get dimensions() {
+    return {
+      width: this.maxX.value() - this.minX.value(),
+      height: this.maxY.value() - this.minY.value()
+    };
+  }
+  // Position relative to parent
+  get position() {
+    const positionAbsolute = this.positionAbsolute;
+    if (!this.parent)
+      return positionAbsolute;
+    const parentPosition = this.parent.positionAbsolute;
+    return {
+      x: positionAbsolute.x - parentPosition.x,
+      y: positionAbsolute.y - parentPosition.y
+    };
+  }
+}
+class Compound extends Rect {
+  constructor(solver, xynode, parent = null) {
+    super();
+    __publicField(this, "children", []);
+    this.solver = solver, this.parent = parent, this.id = xynode.id, solver.createConstraint(this.maxX, Operator.Ge, this.minX), solver.createConstraint(this.maxY, Operator.Ge, this.minY), parent && parent.addChild(this);
+  }
+  addChild(rect) {
+    this.children.push(rect);
+    const leftPadding = new Expression(
+      rect.minX,
+      [-1, this.minX]
+    ), { weak } = Strength;
+    this.solver.createConstraint(leftPadding, Operator.Ge, 40), this.solver.createConstraint(leftPadding, Operator.Eq, 40, weak);
+    const topPadding = new Expression(
+      rect.minY,
+      [-1, this.minY]
+    );
+    this.solver.createConstraint(topPadding, Operator.Ge, 60), this.solver.createConstraint(topPadding, Operator.Eq, 60, weak);
+    const rightPadding = new Expression(
+      this.maxX,
+      [-1, rect.maxX]
+    );
+    this.solver.createConstraint(rightPadding, Operator.Ge, 40), this.solver.createConstraint(rightPadding, Operator.Eq, 40, weak);
+    const bottomPadding = new Expression(
+      this.maxY,
+      [-1, rect.maxY]
+    );
+    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 40, weak);
+  }
+}
+class Leaf extends Rect {
+  constructor(solver, xynode, parent = null, isEditing = !1) {
+    super(), this.parent = parent, this.isEditing = isEditing, this.id = xynode.id;
+    const x = Math.ceil(xynode.internals.positionAbsolute.x), y = Math.ceil(xynode.internals.positionAbsolute.y), { width, height } = getNodeDimensions(xynode);
+    if (this.maxX = new Expression(this.minX, Math.ceil(width)), this.maxY = new Expression(this.minY, Math.ceil(height)), isEditing) {
+      const superStrong = Strength.create(100, 0, 0);
+      solver.addEditVariable(this.minX, superStrong), solver.addEditVariable(this.minY, superStrong), solver.suggestValue(this.minX, x), solver.suggestValue(this.minY, y);
+    } else {
+      const halfMedium = Strength.create(0, 1, 0, 0.5);
+      solver.createConstraint(this.minX, Operator.Eq, x, halfMedium), solver.createConstraint(this.minY, Operator.Eq, y, halfMedium);
+    }
+    parent && parent.addChild(this);
+  }
+}
+function createLayoutConstraints(xyflow, xyflowApi, draggingNodeId) {
+  var _a;
+  const { parentLookup, nodeLookup } = xyflowApi.getState(), solver = new Solver(), rects = /* @__PURE__ */ new Map(), traverse = new Array();
+  for (const [, xynode] of nodeLookup)
+    isNullish(xynode.parentId) && traverse.push({
+      xynode,
+      parent: null
+    });
+  for (; traverse.length > 0; ) {
+    const { xynode, parent } = traverse.shift(), isDragging = xynode.dragging === !0 || xynode.id === draggingNodeId, shouldTraverse = !isDragging && xynode.type === "compound" && isAncestor(xynode.id, draggingNodeId), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
+    rects.set(xynode.id, rect), shouldTraverse && ((_a = parentLookup.get(xynode.id)) == null || _a.forEach((child) => {
+      traverse.push({
+        xynode: child,
+        parent: rect
+      });
+    }));
+  }
+  solver.updateVariables(), solver.maxIterations = 1e3;
+  function updateXYFlowNodes() {
+    solver.updateVariables(), xyflow.setNodes(
+      (nodes) => nodes.map((n) => {
+        if (n.id === draggingNodeId || n.dragging === !0)
+          return n;
+        const rect = rects.get(n.id);
+        if (!rect)
+          return n;
+        const dimensions = rect.dimensions, newXY = rect.position;
+        return newXY.x !== n.position.x || newXY.y !== n.position.y ? {
+          ...n,
+          position: rect.position,
+          width: dimensions.width,
+          height: dimensions.height,
+          measured: dimensions
+        } : dimensions.width !== n.width || dimensions.height !== n.height ? {
+          ...n,
+          width: dimensions.width,
+          height: dimensions.height,
+          measured: dimensions
+        } : n;
+      })
+    );
+  }
+  let animationFrameId = null;
+  function onNodeDrag(xynode) {
+    const pos = nodeLookup.get(xynode.id).internals.positionAbsolute, rect = nonNullable(rects.get(xynode.id));
+    solver.suggestValue(rect.minX, Math.ceil(pos.x)), solver.suggestValue(rect.minY, Math.ceil(pos.y)), animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
+      updateXYFlowNodes(), animationFrameId = null;
+    }));
+  }
+  return {
+    onNodeDrag,
+    updateXYFlowNodes
+  };
+}
+function useLayoutConstraints() {
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), solverRef = useRef(), dragStartedAt = useRef({
+    x: 0,
+    y: 0
+  });
+  return useMemo(() => ({
+    onNodeDragStart: (event, xynode) => {
+      dragStartedAt.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const { xyflow, cancelSaveManualLayout } = diagramApi.getState();
+      cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id);
+    },
+    onNodeDrag: (_event, xynode) => {
+      var _a;
+      invariant(solverRef.current, "solverRef.current should be defined"), (_a = solverRef.current) == null || _a.onNodeDrag(xynode);
+    },
+    onNodeDragStop: (event, _xynode) => {
+      isSamePoint$1(dragStartedAt.current, { x: event.clientX, y: event.clientY }) || diagramApi.getState().triggerSaveManualLayout(xyflowApi), solverRef.current = void 0;
+    }
+  }), [xyflowApi, diagramApi]);
+}
+const ZIndexes = {
+  Compound: 1,
+  Edge: 2,
+  Element: 3
+}, MinZoom = 0.1, StringSet = Set, DEFAULT_PROPS = {
+  viewSyncDebounceTimeout: null,
+  initialized: !1,
+  xyflowSynced: !1,
+  previousViews: [],
+  viewportChanged: !1,
+  activeDynamicViewStep: null,
+  focusedNodeId: null,
+  hoveredNodeId: null,
+  hoveredEdgeId: null,
+  lastClickedNodeId: null,
+  lastClickedEdgeId: null,
+  dimmed: new StringSet(),
+  lastOnNavigate: null,
+  onChange: null,
+  onNavigateTo: null,
+  onNodeClick: null,
+  onNodeContextMenu: null,
+  onCanvasContextMenu: null,
+  onEdgeClick: null,
+  onEdgeContextMenu: null,
+  onCanvasClick: null,
+  onCanvasDblClick: null
+}, noReplace = !1;
+let storeDevId = 1;
+const EmptyStringSet = new StringSet();
+function createDiagramStore(props) {
+  return createWithEqualityFn(
+    subscribeWithSelector(
+      devtools(
+        (set2, get2) => ({
+          ...DEFAULT_PROPS,
+          ...props,
+          isDynamicView: () => {
+            var _a;
+            return ((_a = get2().view) == null ? void 0 : _a.__) === "dynamic";
+          },
+          updateView: (nextView) => {
+            let {
+              viewSyncDebounceTimeout,
+              xyflow,
+              dimmed: dimmed2,
+              xyflowSynced,
+              view: current,
+              lastOnNavigate,
+              previousViews,
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId,
+              activeDynamicViewStep,
+              hoveredEdgeId,
+              hoveredNodeId
+            } = get2();
+            if (viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null), shallowEqual(current, nextView)) {
+              DEV && console.debug("store: skip updateView");
+              return;
+            }
+            if (current.id === nextView.id) {
+              const nodeIds = new StringSet(nextView.nodes.map((n) => n.id)), edgeIds = new StringSet(nextView.edges.map((e) => e.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) {
+                let nextDimmed = new StringSet([...dimmed2].filter((id2) => nodeIds.has(id2) || edgeIds.has(id2)));
+                nextDimmed.size !== dimmed2.size && (dimmed2 = nextDimmed);
+              }
+            } else {
+              if (lastOnNavigate && lastOnNavigate.toView !== nextView.id && lastOnNavigate.fromView !== nextView.id && (lastOnNavigate = null), !lastOnNavigate) {
+                const zoom2 = xyflow.getZoom();
+                xyflow.setCenter(nextView.width / 2, nextView.height / 2, { zoom: zoom2 });
+              }
+              lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet, previousViews = [
+                current,
+                ...previousViews.filter((v) => v.id !== nextView.id && v.id !== current.id)
+              ], xyflowSynced = !1;
+            }
+            set2(
+              {
+                viewSyncDebounceTimeout,
+                view: nextView,
+                activeDynamicViewStep,
+                xyflowSynced,
+                lastOnNavigate,
+                previousViews,
+                lastClickedNodeId,
+                lastClickedEdgeId,
+                focusedNodeId,
+                hoveredEdgeId,
+                hoveredNodeId,
+                dimmed: dimmed2
+              },
+              noReplace,
+              "update-view"
+            );
+          },
+          focusOnNode: (nodeId) => {
+            const { focusedNodeId, view } = get2();
+            if (nodeId !== focusedNodeId) {
+              const notDimmed = new StringSet([nodeId]), dimmed2 = new StringSet();
+              for (const edge of view.edges)
+                edge.source === nodeId || edge.target === nodeId ? (notDimmed.add(edge.source), notDimmed.add(edge.target)) : dimmed2.add(edge.id);
+              for (const node of view.nodes)
+                notDimmed.has(node.id) || dimmed2.add(node.id);
+              set2(
+                {
+                  activeDynamicViewStep: null,
+                  focusedNodeId: nodeId,
+                  dimmed: dimmed2
+                },
+                noReplace,
+                `focus on node: ${nodeId}`
+              );
+            }
+          },
+          setHoveredNode: (nodeId) => {
+            nodeId !== get2().hoveredNodeId && set2({ hoveredNodeId: nodeId });
+          },
+          setHoveredEdge: (edgeId) => {
+            edgeId !== get2().hoveredEdgeId && set2({ hoveredEdgeId: edgeId });
+          },
+          setLastClickedNode: (nodeId) => {
+            nodeId !== get2().lastClickedNodeId && set2({ lastClickedNodeId: nodeId });
+          },
+          setLastClickedEdge: (edgeId) => {
+            edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId });
+          },
+          resetLastClicked: () => {
+            let {
+              activeDynamicViewStep,
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId
+            } = get2();
+            (activeDynamicViewStep || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set2(
+              {
+                activeDynamicViewStep: null,
+                focusedNodeId: null,
+                lastClickedNodeId: null,
+                lastClickedEdgeId: null,
+                dimmed: EmptyStringSet
+              },
+              noReplace,
+              "resetLastClicked"
+            );
+          },
+          getElement: (fqn) => {
+            const { view } = get2();
+            return view.nodes.find(({ id: id2 }) => id2 === fqn) ?? null;
+          },
+          triggerChangeElementStyle: (change) => {
+            DEV && console.debug("triggerChangeElementStyle", change);
+            const { view, updateView, onChange } = get2();
+            let hasChanges = !1;
+            const nodes = view.nodes.map((origin) => {
+              var _a, _b;
+              if (!change.targets.includes(origin.id))
+                return origin;
+              let element2 = origin;
+              for (const [key, value] of entries.strict(change.style))
+                switch (key) {
+                  case "shape":
+                    value !== element2.shape && (element2 = {
+                      ...element2,
+                      shape: value
+                    });
+                    break;
+                  case "color":
+                    value !== element2.color && (element2 = {
+                      ...element2,
+                      color: value
+                    });
+                    break;
+                  case "opacity":
+                    value !== ((_a = element2.style) == null ? void 0 : _a.opacity) && (element2 = {
+                      ...element2,
+                      style: {
+                        ...element2.style,
+                        opacity: value
+                      }
+                    });
+                    break;
+                  case "border":
+                    value !== ((_b = element2.style) == null ? void 0 : _b.border) && (element2 = {
+                      ...element2,
+                      style: {
+                        ...element2.style,
+                        border: value
+                      }
+                    });
+                    break;
+                  default:
+                    nonexhaustive(key);
+                }
+              return element2 !== origin ? (hasChanges = !0, element2) : origin;
+            });
+            hasChanges && updateView({
+              ...view,
+              nodes
+            }), onChange == null || onChange({ change });
+          },
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get2();
+            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set2({ viewSyncDebounceTimeout: null }));
+          },
+          triggerSaveManualLayout: (xystore) => {
+            let { viewSyncDebounceTimeout: debounced, onChange } = get2();
+            if (!onChange) {
+              DEV && console.debug("ignore triggerSaveManualLayout, as no onChange handler is set");
+              return;
+            }
+            debounced && clearTimeout(debounced), debounced = setTimeout(() => {
+              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,
+                  y: node.internals.positionAbsolute.y,
+                  width: dimensions.width,
+                  height: dimensions.height
+                }, acc;
+              }, {}), edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
+                let controlPoints = data.controlPoints;
+                return !controlPoints && (movedNodes.has(source) || movedNodes.has(target)) && (controlPoints = bezierControlPoints(data.edge)), controlPoints && (acc[data.edge.id] = {
+                  controlPoints
+                }), acc;
+              }, {});
+              if (movedNodes.size === 0 && isEmpty(edges)) {
+                DEV && console.debug("ignore triggerSaveManualLayout, as no changes detected");
+                return;
+              }
+              const change = {
+                op: "save-manual-layout",
+                nodes,
+                edges
+              };
+              DEV && console.debug("triggerSaveManualLayout", change), onChange2 == null || onChange2({ change });
+            }, 2e3), set2(
+              {
+                viewSyncDebounceTimeout: debounced
+              },
+              noReplace,
+              "debounce sync state"
+            );
+          },
+          triggerOnNavigateTo: (xynodeId, event) => {
+            var _a, _b;
+            const { xyflow, view } = get2(), xynode = xyflow.getInternalNode(xynodeId), element2 = xynode == null ? void 0 : xynode.data.element;
+            invariant(!!xynode && (element2 == null ? void 0 : element2.navigateTo), `node is not navigable: ${xynodeId}`), set2(
+              {
+                lastClickedNodeId: xynodeId,
+                lastOnNavigate: {
+                  fromView: view.id,
+                  toView: element2.navigateTo,
+                  element: element2,
+                  elementScreenPosition: xyflow.flowToScreenPosition({
+                    x: xynode.internals.positionAbsolute.x,
+                    // + dimensions.width / 2,
+                    y: xynode.internals.positionAbsolute.y
+                    // + dimensions.height / 2
+                  }),
+                  positionCorrected: !1
+                }
+              },
+              noReplace,
+              "triggerOnNavigateTo"
+            ), (_b = (_a = get2()).onNavigateTo) == null || _b.call(
+              _a,
+              element2.navigateTo,
+              event,
+              element2,
+              xynode.internals.userNode
+            );
+          },
+          fitDiagram: (xyStore) => {
+            const { width, height, panZoom } = xyStore.getState(), { fitViewPadding, view, focusedNodeId } = get2(), bounds = {
+              x: 0,
+              y: 0,
+              width: view.width,
+              height: view.height
+            }, viewport = getViewportForBounds(bounds, width, height, MinZoom, 1, fitViewPadding);
+            panZoom == null || panZoom.setViewport(viewport, { duration: 500 }), focusedNodeId && set2(
+              {
+                focusedNodeId: null,
+                dimmed: EmptyStringSet
+              },
+              noReplace,
+              "unfocus"
+            );
+          },
+          nextDynamicStep: (increment = 1) => {
+            const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get2();
+            invariant(view.__ === "dynamic", "view is not dynamic");
+            const nextStep = (activeDynamicViewStep ?? 0) + increment;
+            if (nextStep <= 0 || nextStep > view.edges.length)
+              return;
+            const edgeId = StepEdgeId(nextStep), dimmed2 = new StringSet();
+            let edge = null;
+            for (const e of xyflow.getEdges()) {
+              if (e.id === edgeId) {
+                edge = e;
+                continue;
+              }
+              dimmed2.add(e.id);
             }
-            break;
+            invariant(!!edge, `edge not found: ${edgeId}`);
+            const selected2 = [];
+            for (const n of xyflow.getNodes()) {
+              if (n.id === edge.source || n.id === edge.target) {
+                selected2.push(n);
+                continue;
+              }
+              dimmed2.add(n.id);
+            }
+            xyflow.fitView({
+              duration: 400,
+              maxZoom: 1,
+              minZoom: MinZoom,
+              padding: fitViewPadding,
+              nodes: selected2
+            }), set2({
+              focusedNodeId: null,
+              activeDynamicViewStep: nextStep,
+              dimmed: dimmed2
+            });
+          },
+          stopDynamicView: () => {
+            const { xyflow, fitViewPadding } = get2();
+            set2({
+              activeDynamicViewStep: null,
+              dimmed: EmptyStringSet
+            }), xyflow.fitView({
+              duration: 400,
+              maxZoom: 1,
+              minZoom: MinZoom,
+              padding: fitViewPadding
+            });
           }
-          t_e = t_e + (t_e - t_s) / 2;
-        } else
-          t_e = t_m;
-      while (!done && safety++ < 100);
-      if (safety >= 100)
-        break;
-      prev_arc = prev_arc || arc, circles.push(prev_arc), t_s = prev_e;
-    } while (t_e < 1);
-    return circles;
-  }
+        }),
+        {
+          name: `DiagramStore ${storeDevId++} - ${props.view.id}`,
+          enabled: DEV
+        }
+      )
+    ),
+    shallow
+  );
 }
-function deriveEdgePoints(bezierSpline) {
-  let [start2, ...bezierPoints] = bezierSpline;
-  invariant(start2, "start should be defined");
-  const handles = [
-    // start
-  ];
-  for (; hasAtLeast(bezierPoints, 3); ) {
-    const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start2[0], start2[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
-    inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
-      const { x, y } = bezier.get(t2);
-      handles.push([x, y]);
-    }), bezierPoints = rest, start2 = end;
-  }
-  return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
+const DiagramContext = createContext(null);
+function DiagramContextProvider({ children: children2, view, ...props }) {
+  const xyflow = useXYFlow(), store = useRef();
+  return store.current || (store.current = createDiagramStore({
+    xyflow,
+    view,
+    ...props
+  })), useEffect(
+    () => {
+      var _a, _b;
+      ((_a = store.current) == null ? void 0 : _a.getState().xyflow) !== xyflow && ((_b = store.current) == null || _b.setState({ xyflow }, !1, "update xyflow"));
+    },
+    [xyflow]
+  ), useUpdateEffect(
+    () => {
+      if (!store.current) return;
+      const state = store.current.getState();
+      state.view !== view && state.updateView(view), hasSubObject(state, props) || store.current.setState(props, !1, "update incoming props");
+    },
+    [view, props]
+  ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
 }
 const nodeZIndex = (node) => node.level + 1;
 function diagramViewToXYFlowData(view, opts) {
+  var _a, _b;
   const isDynamicView = view.__ === "dynamic", editor = {
     nodes: [],
     edges: []
@@ -8425,7 +8531,7 @@ function diagramViewToXYFlowData(view, opts) {
   for (; next = traverse.pop(); ) {
     const { node, parent } = next;
     node.children.length > 0 && traverse.unshift(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
-    const isCompound = hasAtLeast(node.children, 1), position = {
+    const isCompound = hasAtLeast$1(node.children, 1), position = {
       x: node.position[0],
       y: node.position[1]
     };
@@ -8478,8 +8584,8 @@ function diagramViewToXYFlowData(view, opts) {
     });
   }
   for (const edge of view.edges) {
-    const source = edge.source, target = edge.target, id2 = ns + edge.id, controlPoints = deriveEdgePoints(edge.points);
-    invariant(hasAtLeast(edge.points, 2), "edge should have at least 2 points");
+    const source = edge.source, target = edge.target, id2 = ns + edge.id;
+    invariant(hasAtLeast$1(edge.points, 2), "edge should have at least 2 points");
     const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)));
     editor.edges.push({
       id: id2,
@@ -8491,7 +8597,7 @@ function diagramViewToXYFlowData(view, opts) {
       data: {
         edge,
         type: "bezier",
-        controlPoints,
+        controlPoints: ((_b = (_a = view.manualLayout) == null ? void 0 : _a.edges[edge.id]) == null ? void 0 : _b.controlPoints) || null,
         headPoint: edge.headArrowPoint ?? null,
         tailPoint: edge.tailArrowPoint ?? null,
         stepNum: isDynamicView ? extractStep(edge.id) : null,
@@ -8509,9 +8615,6 @@ function diagramViewToXYFlowData(view, opts) {
   }
   return editor;
 }
-function toDomPrecision(v) {
-  return v === null ? 0.01 : Math.round(v * 100) / 100;
-}
 function selectDimensions(state) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`;
 }
@@ -8523,8 +8626,8 @@ function FitViewOnViewportResize({ diagramApi, xyflowApi }) {
       focusedNodeId || prevDimensionsRef.current === dimensions || (fitDiagram(xyflowApi), prevDimensionsRef.current = dimensions);
     },
     [dimensions, diagramApi, xyflowApi],
-    200,
-    800
+    250,
+    1e3
   ), null;
 }
 function selector$2({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }) {
@@ -8553,25 +8656,21 @@ function FitViewOnDiagramChange() {
     waitCorrection,
     elFrom,
     elTo
-  } = useDiagramState(selector$2), diagramApi = useDiagramStoreApi(), processedRef = useRef(pendingViewId);
+  } = useDiagramState(selector$2, shallowEqual), diagramApi = useDiagramStoreApi(), processedRef = useRef(pendingViewId);
   return useEffect(() => {
     if (!(!xyflowSynced || pendingViewId === processedRef.current)) {
-      if (waitCorrection && elTo && elFrom) {
-        const [x, y, zoom2] = xyflowApi.getState().transform, { xyflow, lastOnNavigate } = diagramApi.getState(), nextZoom = Math.min(
-          elFrom.width / elTo.width,
-          elFrom.height / elTo.height
-        ), centerFrom = lastOnNavigate.elementCenterScreenPosition;
-        nextZoom !== 1 && nextZoom < zoom2 && (xyflowApi.setState({ transform: [x, y, nextZoom] }), xyflow.setViewport({
-          x,
-          y,
-          zoom: nextZoom
-        }));
-        const centerTo = xyflow.flowToScreenPosition({
-          x: elTo.position[0] + elTo.width / 2,
-          y: elTo.position[1] + elTo.height / 2
+      if (waitCorrection) {
+        invariant(elTo, "elTo should be defined"), invariant(elFrom, "elFrom should be defined");
+        const { xyflow, lastOnNavigate } = diagramApi.getState();
+        invariant(lastOnNavigate, "lastOnNavigate should be defined");
+        const fromPos = lastOnNavigate.elementScreenPosition, toPos = xyflow.flowToScreenPosition({
+          x: elTo.position[0],
+          // + elFrom.width / 2,
+          y: elTo.position[1]
+          // + elFrom.height / 2
         }), diff = {
-          x: toDomPrecision(centerFrom.x - centerTo.x),
-          y: toDomPrecision(centerFrom.y - centerTo.y)
+          x: toDomPrecision(fromPos.x - toPos.x),
+          y: toDomPrecision(fromPos.y - toPos.y)
         };
         xyflowApi.getState().panBy(diff), diagramApi.setState({ lastOnNavigate: null });
         return;
@@ -8596,8 +8695,8 @@ function SelectEdgesOnNodeFocus() {
           type: "select",
           selected: !0
         });
-        const anotherNode = nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source);
-        anotherNode && fitViewNodes.add(anotherNode);
+        const anotherNode = nonNullable(nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source));
+        fitViewNodes.add(anotherNode);
       } else edge.selected && edgeChanges.push({
         id: edge.id,
         type: "select",
@@ -8614,8 +8713,7 @@ function SelectEdgesOnNodeFocus() {
       type: "select",
       selected: !0
     }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges), fitView2({
-      includeHiddenNodes: !0,
-      duration: 300,
+      duration: 350,
       padding: 0.1,
       minZoom: MinZoom,
       maxZoom: Math.max(1, transform2[2]),
@@ -8651,9 +8749,13 @@ function SyncWithDiagram() {
       } : update;
     })), setEdges(updates.edges.map((update) => {
       const existing = edgeLookup.get(update.id);
-      return existing ? deepEqual(existing.data.edge, update.data.edge) ? existing : {
+      return existing ? deepEqual(existing.data.controlPoints, update.data.controlPoints) && deepEqual(existing.data.edge, update.data.edge) ? existing : {
         ...existing,
-        ...update
+        ...update,
+        data: {
+          ...existing.data,
+          ...update.data
+        }
       } : update;
     })), diagramStoreApi.setState(
       {
@@ -8661,126 +8763,31 @@ function SyncWithDiagram() {
       },
       !1,
       "xyflowSynced"
-    );
-  }, [xyflowSynced, xyflowApi, diagramStoreApi]), null;
-}
-function getVarName(variable) {
-  var matches = variable.match(/^var\((.*)\)$/);
-  return matches ? matches[1] : variable;
-}
-function get(obj, path) {
-  var result = obj;
-  for (var key of path) {
-    if (!(key in result))
-      throw new Error("Path ".concat(path.join(" -> "), " does not exist in object"));
-    result = result[key];
-  }
-  return result;
-}
-function walkObject(obj, fn) {
-  var path = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [], clone = {};
-  for (var key in obj) {
-    var _value = obj[key], currentPath = [...path, key];
-    typeof _value == "string" || typeof _value == "number" || _value == null ? clone[key] = fn(_value, currentPath) : typeof _value == "object" && !Array.isArray(_value) ? clone[key] = walkObject(_value, fn, currentPath) : console.warn('Skipping invalid key "'.concat(currentPath.join("."), '". Should be a string, number, null or object. Received: "').concat(Array.isArray(_value) ? "Array" : typeof _value, '"'));
-  }
-  return clone;
-}
-function assignInlineVars(varsOrContract, tokens) {
-  var styles = {};
-  if (typeof tokens == "object") {
-    var _contract = varsOrContract;
-    walkObject(tokens, (value2, path) => {
-      if (value2 != null) {
-        var varName2 = get(_contract, path);
-        styles[getVarName(varName2)] = String(value2);
-      }
-    });
-  } else {
-    var _vars = varsOrContract;
-    for (var varName in _vars) {
-      var value = _vars[varName];
-      value != null && (styles[getVarName(varName)] = value);
-    }
-  }
-  return Object.defineProperty(styles, "toString", {
-    value: function() {
-      return Object.keys(this).map((key) => "".concat(key, ":").concat(this[key])).join(";");
-    },
-    writable: !1
-  }), styles;
+    );
+  }, [xyflowSynced, xyflowApi, diagramStoreApi]), null;
 }
 var container$4 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", cssEdgePath = "bexn7q7", varLabelX = "var(--bexn7q8)", varLabelY = "var(--bexn7q9)", edgeLabel = "bexn7qb", stepEdgeNumber = "bexn7qc", edgeLabelText = "bexn7qd";
-function getNodeIntersectionFromCenterToPoint(intersectionNode, [x1, y1]) {
+function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
   const {
     width: intersectionNodeWidth,
     height: intersectionNodeHeight
   } = getNodeDimensions(intersectionNode), intersectionNodePosition = intersectionNode.internals.positionAbsolute, w = intersectionNodeWidth / 2, h = intersectionNodeHeight / 2, x2 = intersectionNodePosition.x + w, y2 = intersectionNodePosition.y + h, xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h), yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h), a = 1 / (Math.abs(xx1) + Math.abs(yy1)), xx3 = a * xx1, yy3 = a * yy1, x = w * (xx3 + yy3) + x2, y = h * (-xx3 + yy3) + y2;
-  return [x, y];
-}
-function getNodeIntersection(intersectionNode, targetNode) {
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight
-  } = getNodeDimensions(intersectionNode), {
-    width: targetNodeWidth,
-    height: targetNodeHeight
-  } = getNodeDimensions(targetNode), intersectionNodePosition = intersectionNode.internals.positionAbsolute, targetPosition = targetNode.internals.positionAbsolute, w = intersectionNodeWidth / 2, h = intersectionNodeHeight / 2, x2 = intersectionNodePosition.x + w, y2 = intersectionNodePosition.y + h, x1 = targetPosition.x + targetNodeWidth / 2, y1 = targetPosition.y + targetNodeHeight / 2, xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h), yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h), a = 1 / (Math.abs(xx1) + Math.abs(yy1)), xx3 = a * xx1, yy3 = a * yy1, x = w * (xx3 + yy3) + x2, y = h * (-xx3 + yy3) + y2;
   return { x, y };
 }
-function getPointPosition(node, intersectionPoint) {
-  const n = {
-    // x: node.data.element.position[0],
-    // y: node.data.element.position[1],
-    ...node.internals.positionAbsolute,
-    ...getNodeDimensions(node)
-  }, nx = Math.round(n.x), ny = Math.round(n.y), px = Math.round(intersectionPoint.x), py = Math.round(intersectionPoint.y);
-  let handlePosition = Position.Top;
-  px <= nx + 1 ? handlePosition = Position.Left : px >= nx + n.width - 1 ? handlePosition = Position.Right : py <= ny + 1 ? handlePosition = Position.Top : py >= n.y + n.height - 1 && (handlePosition = Position.Bottom);
-  let handleWidth = 8, handleHeight = 8, offsetX = 0, offsetY = 0;
-  switch (handlePosition) {
-    case Position.Left:
-      offsetX = -handleWidth;
-      break;
-    case Position.Right:
-      offsetX = handleWidth;
-      break;
-    case Position.Top:
-      offsetY = -handleHeight;
-      break;
-    case Position.Bottom:
-      offsetY = handleHeight;
-      break;
-  }
-  return [
-    intersectionPoint.x + offsetX,
-    intersectionPoint.y + offsetY,
-    handlePosition
-  ];
-}
-function getEdgeParams(source, target) {
-  const sourceIntersectionPoint = getNodeIntersection(source, target), targetIntersectionPoint = getNodeIntersection(target, source), [sx, sy, sourcePos] = getPointPosition(source, sourceIntersectionPoint), [tx, ty, targetPos] = getPointPosition(target, targetIntersectionPoint);
-  return {
-    sx,
-    sy,
-    tx,
-    ty,
-    sourcePos,
-    targetPos
-  };
-}
 function bezierPath(bezierSpline) {
   let [start2, ...points] = bezierSpline;
   invariant(start2, "start should be defined");
   let path = `M ${start2[0]},${start2[1]}`;
-  for (; hasAtLeast(points, 3); ) {
+  for (; hasAtLeast$1(points, 3); ) {
     const [cp1, cp2, end, ...rest] = points;
     path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
   }
   return invariant(points.length === 0, "all points should be consumed"), path;
 }
-const isSamePoint = (a, b) => Math.abs(a - b) < 3.1, isSamePosition = (a, [bx, by]) => isSamePoint(a.x, bx) && isSamePoint(a.y, by), isEqualProps = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSamePoint(prev.sourceX, next.sourceX) && isSamePoint(prev.sourceY, next.sourceY) && isSamePoint(prev.targetX, next.targetX) && isSamePoint(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && deepEqual(prev.data.edge, next.data.edge) && zip(prev.data.controlPoints, next.data.controlPoints).every(
-  ([a, b]) => isSamePoint(a[0], b[0]) && isSamePoint(a[1], b[1])
-), curve = line().curve(curveCatmullRomOpen), RelationshipEdge = /* @__PURE__ */ memo(function({
+const isSame = (a, b) => Math.abs(a - b) < 3.1, isSamePoint = (a, b) => {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
+  return isSame(ax, bx) && isSame(ay, by);
+}, sameControlPoints = (a, b) => a === b ? !0 : !a || !b || a.length !== b.length ? !1 : a.every((ap, i) => isSamePoint(ap, b[i])), isEqualProps$2 = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge = /* @__PURE__ */ memo(function({
   id: id2,
   data,
   selected: _selected,
@@ -8789,38 +8796,76 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 3.1, isSamePosition = (a, [bx, b
   target,
   interactionWidth
 }) {
-  var _a, _b, _c, _d;
-  const { nodeLookup, edgeLookup } = useXYStoreApi().getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = !isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position), { edge: diagramEdge, controlPoints } = data, color2 = diagramEdge.color ?? "gray", isStepEdge = data.stepNum !== null, { isActive, isHovered, isDimmed } = useDiagramState((s) => ({
-    isActive: s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
+  var _a, _b;
+  const diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEditable, isEdgePathEditable, isHovered, isDimmed } = useDiagramState((s) => ({
+    isEditable: s.readonly !== !0,
+    isEdgePathEditable: s.readonly !== !0 && s.experimentalEdgeEditing === !0,
+    isActive: s.focusedNodeId === source || s.focusedNodeId === target || s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
     isHovered: s.hoveredEdgeId === id2,
     isDimmed: s.dimmed.has(id2)
-  })), line2 = diagramEdge.line ?? "dashed", isDotted = line2 === "dotted", isDashed = isDotted || line2 === "dashed";
+  })), { nodeLookup, edgeLookup } = xyflowStore.getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = isEditable && (isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position)), {
+    label,
+    edge: {
+      points: diagramEdgePoints,
+      line: line2 = "dashed",
+      color: color2 = "gray",
+      ...diagramEdge
+    }
+  } = data;
+  let controlPoints = data.controlPoints ?? bezierControlPoints(data.edge);
+  const isStepEdge = data.stepNum !== null, isDotted = line2 === "dotted", isDashed = isDotted || line2 === "dashed";
   let strokeDasharray;
   isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
-  const marker = `url(#arrow-${id2})`;
-  let edgePath, labelX, labelY;
-  if (!isModified)
-    edgePath = bezierPath(diagramEdge.points), labelX = ((_a = data.label) == null ? void 0 : _a.bbox.x) ?? 0, labelY = ((_b = data.label) == null ? void 0 : _b.bbox.y) ?? 0;
-  else {
-    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode), [_edgePath, _labelX, _labelY] = getBezierPath({
-      sourceX: sx,
-      sourceY: sy,
-      sourcePosition: sourcePos,
-      targetPosition: targetPos,
-      targetX: tx,
-      targetY: ty
-    });
-    edgePath = _edgePath, labelX = _labelX, labelY = _labelY;
-    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5]), targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5]);
-    edgePath = curve([
-      [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
+  let labelX = (label == null ? void 0 : label.bbox.x) ?? 0, labelY = (label == null ? void 0 : label.bbox.y) ?? 0;
+  const [labelPos, setLabelPosition] = useState({
+    x: labelX,
+    y: labelY
+  });
+  let edgePath;
+  if (isModified) {
+    labelX = labelPos.x, labelY = labelPos.y;
+    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5]), targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5]), points = [
+      sourceCenterPos.positionAbsolute,
       getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)),
       ...controlPoints,
       getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)),
-      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
-    ]);
-  }
-  return /* @__PURE__ */ jsxs(
+      targetCenterPos.positionAbsolute
+    ];
+    edgePath = nonNullable(curve(points));
+  } else
+    edgePath = bezierPath(diagramEdgePoints);
+  const svgPathRef = useRef(null);
+  useIsomorphicLayoutEffect$1(() => {
+    const path = svgPathRef.current;
+    if (!path) return;
+    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5), point = {
+      x: Math.round(dompoint.x),
+      y: Math.round(dompoint.y)
+    };
+    setLabelPosition((current) => isSamePoint(current, point) ? current : point);
+  }, [edgePath]);
+  const onControlPointerDown = (index2, e) => {
+    const { domNode } = xyflowStore.getState();
+    if (!domNode) return;
+    const { xyflow } = diagramStore.getState();
+    e.stopPropagation();
+    let hasMoved = !1, pointer2 = { x: e.clientX, y: e.clientY };
+    const onPointerMove = (e2) => {
+      if (!isSamePoint(pointer2, [e2.clientX, e2.clientY])) {
+        hasMoved || diagramStore.getState().cancelSaveManualLayout(), hasMoved = !0, pointer2 = { x: e2.clientX, y: e2.clientY };
+        const { x, y } = xyflow.screenToFlowPosition(pointer2, { snapToGrid: !1 }), newControlPoints = controlPoints.slice();
+        newControlPoints[index2] = {
+          x: toDomPrecision(x),
+          y: toDomPrecision(y)
+        }, xyflow.updateEdgeData(id2, { controlPoints: newControlPoints });
+      }
+    }, onPointerUp = () => {
+      domNode.removeEventListener("pointermove", onPointerMove), domNode.removeEventListener("pointerup", onPointerUp), hasMoved && diagramStore.getState().triggerSaveManualLayout(xyflowStore);
+    };
+    domNode.addEventListener("pointermove", onPointerMove), domNode.addEventListener("pointerup", onPointerUp, { once: !0 });
+  }, marker = `url(#arrow-${id2})`;
+  let markerStart = diagramEdge.tailArrow ? marker : void 0, markerEnd = diagramEdge.headArrow ? marker : void 0;
+  return isModified && diagramEdge.dir === "back" && ([markerStart, markerEnd] = [markerEnd, markerStart]), /* @__PURE__ */ jsxs(
     "g",
     {
       className: clsx([
@@ -8832,38 +8877,62 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 3.1, isSamePosition = (a, [bx, b
       "data-edge-active": isActive,
       "data-edge-hovered": isHovered,
       children: [
-        /* @__PURE__ */ jsx("g", { className: markerContext, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-          "marker",
-          {
-            id: `arrow-${id2}`,
-            viewBox: "0 0 16 10",
-            refX: isModified ? "12" : "10",
-            refY: "5",
-            markerWidth: "5",
-            markerHeight: "4",
-            markerUnits: "strokeWidth",
-            preserveAspectRatio: "xMaxYMid meet",
-            orient: "auto-start-reverse",
-            children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 16 5 L 0 10 z", stroke: "context-stroke", fill: "context-stroke" })
-          }
-        ) }) }),
         /* @__PURE__ */ jsx(
-          RelationshipPath,
+          "path",
           {
-            edgePath,
-            interactionWidth: interactionWidth ?? 10,
-            strokeDasharray,
-            markerStart: diagramEdge.tailArrow ? marker : void 0,
-            markerEnd: diagramEdge.headArrow ? marker : void 0,
-            style: style2
+            className: clsx("react-flow__edge-interaction"),
+            d: edgePath,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: interactionWidth ?? 10
           }
         ),
-        isModified && controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("g", { className: markerContext, children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+            "marker",
+            {
+              id: `arrow-${id2}`,
+              viewBox: "0 0 16 10",
+              refX: isModified ? "15" : "1",
+              refY: "5",
+              markerWidth: "5",
+              markerHeight: "4",
+              markerUnits: "strokeWidth",
+              preserveAspectRatio: "xMaxYMid meet",
+              orient: "auto-start-reverse",
+              children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 16 5 L 0 10 z", stroke: "context-stroke", fill: "context-stroke" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: clsx("react-flow__edge-path", edgePathBg),
+              d: edgePath,
+              style: style2,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ref: svgPathRef,
+              className: clsx("react-flow__edge-path", cssEdgePath),
+              d: edgePath,
+              style: style2,
+              strokeLinecap: "round",
+              strokeDasharray,
+              markerStart,
+              markerEnd
+            }
+          )
+        ] }),
+        isEdgePathEditable && controlPoints.map((p, i) => /* @__PURE__ */ jsx(
           "circle",
           {
+            onPointerDown: (e) => onControlPointerDown(i, e),
             className: controlPoint,
-            cx: p[0],
-            cy: p[1],
+            cx: p.x,
+            cy: p.y,
             r: 3
           },
           i
@@ -8879,13 +8948,16 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 3.1, isSamePosition = (a, [bx, b
             "data-likec4-color": color2,
             style: {
               ...assignInlineVars({
-                [varLabelX]: Math.floor(labelX) + "px",
-                [varLabelY]: Math.floor(labelY) + "px"
+                [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
+                [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
               }),
+              ...isEdgePathEditable && {
+                pointerEvents: "none"
+              },
               ...data.label && {
                 maxWidth: data.label.bbox.width + 12
               },
-              zIndex: ((_c = edgeLookup.get(id2)) == null ? void 0 : _c.zIndex) ?? ZIndexes.Edge
+              zIndex: ((_a = edgeLookup.get(id2)) == null ? void 0 : _a.zIndex) ?? ZIndexes.Edge
             },
             mod: {
               "data-edge-hovered": isHovered,
@@ -8893,148 +8965,71 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 3.1, isSamePosition = (a, [bx, b
             },
             children: [
               isStepEdge && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: data.stepNum }),
-              ((_d = data.label) == null ? void 0 : _d.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: data.label.text })
+              ((_b = data.label) == null ? void 0 : _b.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: data.label.text })
             ]
           }
         ) })
       ]
     }
   );
-}, isEqualProps), RelationshipPath = ({
-  edgePath,
-  interactionWidth,
-  strokeDasharray,
-  markerStart,
-  markerEnd,
-  style: style2
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      className: clsx("react-flow__edge-path", edgePathBg),
-      d: edgePath,
-      style: style2,
-      strokeLinecap: "round"
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      className: clsx("react-flow__edge-path", cssEdgePath),
-      d: edgePath,
-      style: style2,
-      strokeLinecap: "round",
-      strokeDasharray,
-      markerStart,
-      markerEnd
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      className: clsx("react-flow__edge-interaction"),
-      d: edgePath,
-      fill: "none",
-      strokeOpacity: 0,
-      strokeWidth: interactionWidth
-    }
-  )
-] }), Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    ref,
-    className: clsx("icon icon-tabler", className),
-    stroke: "currentColor",
-    fill: "currentColor",
-    strokeWidth: "0",
-    viewBox: "0 0 20 20",
-    height: "20",
-    width: "20",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z",
-        clipRule: "evenodd"
-      }
-    )
-  }
-)), ZoomIn = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    ref,
-    xmlns: "http://www.w3.org/2000/svg",
-    className: clsx("icon icon-tabler icon-tabler-zoom-in", className),
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    strokeWidth: "1.5",
-    stroke: "currentColor",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-      /* @__PURE__ */ jsx("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }),
-      /* @__PURE__ */ jsx("path", { d: "M7 10l6 0" }),
-      /* @__PURE__ */ jsx("path", { d: "M10 7l0 6" }),
-      /* @__PURE__ */ jsx("path", { d: "M21 21l-6 -6" })
-    ]
-  }
-));
+}, isEqualProps$2);
 function NavigateToBtn({ xynodeId, className }) {
   const diagramApi = useDiagramStoreApi();
   return /* @__PURE__ */ jsx(
     ActionIcon,
     {
       className: clsx("nodrag nopan", className),
-      radius: "xl",
+      radius: "md",
       onPointerDownCapture: (e) => e.stopPropagation(),
       onClick: (event) => {
         event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
       },
       onDoubleClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx(ZoomIn, {})
+      children: /* @__PURE__ */ jsx(
+        IconZoomScan,
+        {
+          style: {
+            width: "75%",
+            height: "75%"
+          }
+        }
+      )
     }
   );
 }
-var container$3 = "lbtzdo0", dimmed$1 = "lbtzdo1", varTransparency = "var(--lbtzdo2)", compoundBody = "lbtzdo3", transparent = "lbtzdo6", title$2 = "lbtzdo7", indicator$1 = "lbtzdob", navigateBtn = "lbtzdod";
-const CompoundNodeMemo = /* @__PURE__ */ memo(function({
+var container$3 = "lbtzdo0", dimmed$1 = "lbtzdo1", varOpacity = "var(--lbtzdo2)", varBorderTransparency = "var(--lbtzdo3)", compoundBody = "lbtzdo4", transparent = "lbtzdo6", title$2 = "lbtzdo7", titleWithNavigation = "lbtzdo8", indicator$1 = "lbtzdoc", navigateBtn = "lbtzdoe";
+const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.data.element, next.data.element), CompoundNodeMemo = /* @__PURE__ */ memo(function({
   id: id2,
   data: {
     element: element2
   }
 }) {
-  const { color: color2, style: style2, depth = 1, ...compound } = element2, opacity = style2.opacity ?? 100, { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState((s) => ({
+  DEV && useTilg();
+  const { color: color2, style: style2, depth = 1, ...compound } = element2, opacity = clamp$1((style2.opacity ?? 100) / 100, {
+    min: 0,
+    max: 1
+  }), borderTransparency = clamp$1(50 - opacity * 50, {
+    min: 0,
+    max: 50
+  }), { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id2,
     isDimmed: s.dimmed.has(id2),
     hasOnNavigateTo: !!s.onNavigateTo
-  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo, transparency = clamp$1(100 - opacity, {
-    min: 0,
-    max: 99
-  });
+  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo;
   return /* @__PURE__ */ jsxs(
     Box,
     {
       className: clsx(
         container$3,
         "likec4-compound-node",
-        opacity < 100 && "likec4-compound-transparent",
+        opacity < 1 && "likec4-compound-transparent",
         isDimmed && dimmed$1
       ),
       mod: {
         "compound-depth": depth,
         "likec4-color": color2,
-        "likec4-shape": compound.shape,
-        "likec4-navigable": isnavigable,
         hovered: isHovered
       },
-      style: assignInlineVars({
-        [varTransparency]: transparency + "%"
-      }),
       children: [
         /* @__PURE__ */ jsx(
           Handle,
@@ -9057,15 +9052,27 @@ const CompoundNodeMemo = /* @__PURE__ */ memo(function({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: clsx(compoundBody, opacity < 100 && transparent, "likec4-compound"),
-            style: {
-              borderStyle: opacity < 100 ? style2.border : void 0
-            },
+            className: clsx(
+              compoundBody,
+              opacity < 1 && transparent,
+              "likec4-compound"
+            ),
+            style: opacity < 1 ? {
+              ...assignInlineVars({
+                [varBorderTransparency]: `${borderTransparency}%`,
+                [varOpacity]: opacity.toFixed(2)
+              }),
+              borderStyle: style2.border ?? "dashed"
+            } : void 0,
             children: /* @__PURE__ */ jsx(
               Text,
               {
                 component: "div",
-                className: clsx(title$2, "likec4-compound-title"),
+                className: clsx(
+                  title$2,
+                  isnavigable && titleWithNavigation,
+                  "likec4-compound-title"
+                ),
                 children: compound.title
               }
             )
@@ -9083,8 +9090,8 @@ const CompoundNodeMemo = /* @__PURE__ */ memo(function({
       ]
     }
   );
-});
-var container$2 = "_1b6tkn2", dimmed = "_1b6tkn3", indicator = "_1b6tkn5", fillElementFill = "_1b6tkn6", fillMixStroke = "_1b6tkn8", title$1 = "_1b6tkn9", description$1 = "_1b6tkna", technology = "_1b6tknb", element = "_1b6tknc", iconMaxH = "var(--_1b6tknd)", elementIcon = "_1b6tkne", cssShapeSvg = "_1b6tknh", cssNavigateBtn = "_1b6tkni";
+}, isEqualProps$1);
+var container$2 = "_1b6tkn2", containerAnimated = "_1b6tkn3", dimmed = "_1b6tkn4", indicator = "_1b6tkn6", fillElementFill = "_1b6tkn7", fillMixStroke = "_1b6tkn9", title$1 = "_1b6tkna", description$1 = "_1b6tknb", technology = "_1b6tknc", element = "_1b6tknd", iconMaxH = "var(--_1b6tkne)", elementIcon = "_1b6tknf", cssShapeSvg = "_1b6tkni", cssNavigateBtn = "_1b6tknj";
 function ElementIcon({
   node,
   paddingY = 32
@@ -9112,6 +9119,29 @@ function ElementIcon({
     }
   );
 }
+const Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ref,
+    className: clsx("icon icon-tabler", className),
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 20 20",
+    height: "20",
+    width: "20",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+));
 var elementLink = "_4ysv0o0", trigger = "_4ysv0o1";
 function ElementLink({
   element: element2
@@ -9330,13 +9360,13 @@ const selectedScale = 1.015, variants = {
   idle: (_, { scale }) => ({
     scale: 1,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   selected: (_, { scale }) => ({
     scale: selectedScale,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   // dimmed: {
@@ -9360,20 +9390,16 @@ const selectedScale = 1.015, variants = {
   //     delay: 1
   //   }
   // }),
-  hovered: (_, { scale }) => ({
-    scale: 1.06,
-    transition: {
-      delay: isNumber(scale) && scale !== 1 && scale !== selectedScale ? 0 : 0.15
-    }
-  }),
+  hovered: {
+    scale: 1.06
+  },
   tap: {
     scale: 0.975
   }
   // tap: {
   //   scale: 0.9
   // }
-};
-function ElementNode({
+}, isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data.element, next.data.element), ElementNodeMemo = memo(function({
   id: id2,
   data: {
     element: element$1
@@ -9383,6 +9409,7 @@ function ElementNode({
   width,
   height
 }) {
+  DEV && useTilg();
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id2,
     isDimmed: s.dimmed.has(id2),
@@ -9406,14 +9433,16 @@ function ElementNode({
       break;
   }
   return /* @__PURE__ */ jsxs(
-    motion.div,
+    m.div,
     {
       id: id2,
       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,
@@ -9500,29 +9529,11 @@ function ElementNode({
       ]
     }
   );
-}
-function literalToEnum(value) {
-  switch (value) {
-    case "dots":
-      return BackgroundVariant.Dots;
-    case "lines":
-      return BackgroundVariant.Lines;
-    case "cross":
-      return BackgroundVariant.Cross;
-    default:
-      nonexhaustive(value);
-  }
-}
-function XYFlowBackground({ background }) {
-  if (typeof background == "string")
-    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background) });
-  const { variant, ...rest } = background;
-  return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
-}
+}, isEqualProps);
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), lastClickTimestamp = useRef(), dblclickTimeout = useRef(), dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
     dblclickTimeout.current = void 0;
-  }, 250), !1), hoveredNodeFromOnEdgeEnterRef = useRef("");
+  }, 250), !1), lastClickWasRecent = (ms = 1500) => lastClickTimestamp.current && Date.now() - lastClickTimestamp.current < ms, hoveredNodeFromOnEdgeEnterRef = useRef("");
   return useMemo(() => ({
     onDoubleClick: (event) => {
       const {
@@ -9536,8 +9547,14 @@ function useXYFlowEvents() {
     onPaneClick: (event) => {
       if (dbclickLock())
         return;
-      const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState();
-      focusedNodeId && (fitDiagram(xyflowApi), onCanvasClick || event.stopPropagation()), resetLastClicked(), onCanvasClick == null || onCanvasClick(event);
+      const {
+        focusedNodeId,
+        activeDynamicViewStep,
+        fitDiagram,
+        onCanvasClick,
+        resetLastClicked
+      } = diagramApi.getState();
+      (focusedNodeId || activeDynamicViewStep) && (fitDiagram(xyflowApi), onCanvasClick || event.stopPropagation()), resetLastClicked(), onCanvasClick == null || onCanvasClick(event);
     },
     onNodeContextMenu: (event, xynode) => {
       var _a, _b;
@@ -9561,12 +9578,17 @@ function useXYFlowEvents() {
     },
     onNodeClick: (event, xynode) => {
       const {
+        zoomable,
+        fitViewEnabled,
         focusedNodeId,
         focusOnNode,
         onNodeClick,
+        lastClickedNodeId,
         setLastClickedNode
       } = diagramApi.getState();
-      setLastClickedNode(xynode.id), focusedNodeId && focusedNodeId !== xynode.id && (focusOnNode(xynode.id), onNodeClick || event.stopPropagation()), onNodeClick == null || onNodeClick({
+      setLastClickedNode(xynode.id);
+      const focusPossible = zoomable && fitViewEnabled, shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = isNullish(focusedNodeId) && lastClickedNodeId === xynode.id && lastClickWasRecent();
+      focusPossible && (shallChangeFocus || clickedRecently) && (focusOnNode(xynode.id), onNodeClick || event.stopPropagation()), lastClickTimestamp.current = Date.now(), onNodeClick == null || onNodeClick({
         element: xynode.data.element,
         xynode,
         event
@@ -9597,9 +9619,7 @@ function useXYFlowEvents() {
       viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
     },
     onNodeMouseEnter: (_event, xynode) => {
-      hoveredNodeFromOnEdgeEnterRef.current = "";
-      const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
-      hoveredNodeId !== xynode.id && setHoveredNode(xynode.id);
+      hoveredNodeFromOnEdgeEnterRef.current = "", diagramApi.getState().setHoveredNode(xynode.id);
     },
     onNodeMouseLeave: (_event, xynode) => {
       const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
@@ -9614,12 +9634,12 @@ function useXYFlowEvents() {
     },
     onEdgeMouseLeave: (_event, xyedge) => {
       const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState();
-      hoveredEdgeId === xyedge.id && setHoveredEdge(null), hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current && (hoveredNodeFromOnEdgeEnterRef.current = "", setHoveredNode(null));
+      hoveredEdgeId === xyedge.id && setHoveredEdge(null), hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current && setHoveredNode(null), hoveredNodeFromOnEdgeEnterRef.current = "";
     }
   }), [diagramApi, xyflowApi]);
 }
 const nodeTypes = {
-  element: ElementNode,
+  element: ElementNodeMemo,
   compound: CompoundNodeMemo
 }, edgeTypes = {
   relationship: RelationshipEdge
@@ -9627,7 +9647,12 @@ const nodeTypes = {
   nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
-  fitViewPadding: s.fitViewPadding,
+  fitViewOptions: {
+    minZoom: MinZoom,
+    maxZoom: 1,
+    padding: s.fitViewPadding,
+    includeHiddenNodes: !0
+  },
   hasOnNavigateTo: !!s.onNavigateTo,
   hasOnNodeClick: !!s.onNodeClick,
   hasOnNodeContextMenu: !!s.onNodeContextMenu,
@@ -9638,17 +9663,19 @@ const nodeTypes = {
   pannable: s.pannable
 });
 function XYFlow({
+  colorMode = "system",
   className,
   children: children2,
   defaultNodes,
   defaultEdges,
   style: style2
 }) {
+  DEV && useTilg();
   const xyflowApi = useXYStoreApi(), diagramApi = useDiagramStoreApi(), {
     nodesSelectable,
     nodesDraggable,
     fitView: fitView2,
-    fitViewPadding,
+    fitViewOptions,
     pannable,
     zoomable,
     hasOnNodeClick,
@@ -9657,7 +9684,7 @@ function XYFlow({
     hasOnCanvasContextMenu,
     hasOnEdgeContextMenu,
     hasOnEdgeClick
-  } = useDiagramState(selector$1), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents(), { colorScheme } = useMantineColorScheme(), colorMode = colorScheme !== "auto" ? colorScheme : void 0;
+  } = useDiagramState(selector$1, deepEqual), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x, y, zoom: zoom2 }) => {
       const rounded = {
@@ -9684,12 +9711,7 @@ function XYFlow({
       maxZoom: zoomable ? 1.9 : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView: fitView2,
-      fitViewOptions: {
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: !0
-      },
+      fitViewOptions,
       preventScrolling: zoomable || pannable,
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",
@@ -9721,9 +9743,9 @@ function XYFlow({
       onNodeClick: handlers.onNodeClick,
       onNodeDoubleClick: handlers.onNodeDoubleClick,
       onEdgeClick: handlers.onEdgeClick,
-      onInit: () => {
+      onInit: useCallback(() => {
         diagramApi.setState({ initialized: !0 }, !1, "initialized");
-      },
+      }, [diagramApi]),
       ...hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       },
@@ -9737,9 +9759,242 @@ function XYFlow({
     }
   );
 }
-var container$1 = "_2jkb2y0", buttons = "_2jkb2y1", btn = "_2jkb2y3";
+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(() => {
+    var _a, _b;
+    viewId !== historyViewId && ((_b = (_a = store.getState()).onNavigateTo) == null || _b.call(_a, historyViewId));
+  }, [historyViewId]), useMemo(() => ({
+    hasBack,
+    hasForward,
+    ops: historyOps
+  }), [
+    hasBack,
+    hasForward,
+    historyOps
+  ]);
+}
+var panel$1 = "_19mimxc0";
+function BackwardForwardPanel() {
+  const { hasBack, hasForward, ops } = useNavigationHistory();
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      className: clsx(
+        "react-flow__panel",
+        panel$1,
+        "likec4-navigation-panel"
+      ),
+      gap: "xs",
+      children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+        hasBack && /* @__PURE__ */ 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__ */ jsx(
+              ActionIcon,
+              {
+                variant: "light",
+                color: "gray",
+                onClick: () => ops.back(),
+                children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+              }
+            )
+          },
+          "back"
+        ),
+        hasForward && /* @__PURE__ */ 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__ */ jsx(
+              ActionIcon,
+              {
+                variant: "light",
+                color: "gray",
+                onClick: () => ops.forward(),
+                children: /* @__PURE__ */ jsx(IconChevronRight, {})
+              }
+            )
+          },
+          "forward"
+        )
+      ] })
+    }
+  );
+}
+var container$1 = "hbkbtj0", card = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
+const selector = (s) => ({
+  id: s.view.id,
+  title: s.view.title ?? "untitled",
+  description: s.view.description,
+  links: s.view.links
+});
+function DiagramTitlePanel() {
+  const { id: id2, title: title$12, description: description$12, links } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
+    key: "diagram-title-panel-collapsed",
+    defaultValue: !1
+  }), toggle = () => setCollapsed((v) => !v);
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    m.div,
+    {
+      initial: { opacity: 0.05, scale: 0.7 },
+      animate: { opacity: 1, scale: 1 },
+      exit: {
+        opacity: 0.05,
+        scale: 0.6
+      },
+      className: clsx("react-flow__panel", container$1),
+      style: {
+        transformOrigin: "left center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        Card,
+        {
+          radius: "sm",
+          className: card,
+          p: "md",
+          onDoubleClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(CardSection, { mb: 4, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: !0,
+                size: "xs",
+                h: "sm",
+                py: 2,
+                radius: "0",
+                variant: "subtle",
+                color: "gray",
+                onClick: toggle,
+                children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: isCollapsed ? 0 : "sm", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  flex: "1",
+                  size: isCollapsed ? "sm" : "lg",
+                  fw: 500,
+                  lh: 1.1,
+                  className: title,
+                  children: title$12
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  hidden: isCollapsed,
+                  component: "div",
+                  flex: "0 0 auto",
+                  inline: !0,
+                  size: "xs",
+                  fz: 9,
+                  fw: 500,
+                  c: "dimmed",
+                  style: {
+                    userSelect: "all"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
+                      "id:",
+                      " "
+                    ] }),
+                    id2
+                  ]
+                }
+              )
+            ] }),
+            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              description$12 && /* @__PURE__ */ jsx(
+                Spoiler,
+                {
+                  maxHeight: 42,
+                  showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "show more" }),
+                  hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "hide" }),
+                  children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      component: "div",
+                      size: "sm",
+                      className: description,
+                      children: description$12 || "no description"
+                    }
+                  )
+                }
+              ),
+              !description$12 && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  size: "xs",
+                  c: "dimmed",
+                  children: "no description"
+                }
+              ),
+              links && /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  gap: 3,
+                  justify: "stretch",
+                  align: "stretch",
+                  children: links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
+                    /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+                      Anchor,
+                      {
+                        href: link,
+                        target: "_blank",
+                        fz: "xs",
+                        truncate: "end",
+                        display: "inline-block",
+                        w: "100%",
+                        children: link
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        fz: "10",
+                        variant: "light",
+                        onClick: copy,
+                        color: copied ? "teal" : "gray",
+                        children: copied ? "copied" : "copy"
+                      }
+                    ) })
+                  ] }, link))
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    },
+    id2
+  ) });
+}
+var container = "_2jkb2y0", buttons = "_2jkb2y1", btn = "_2jkb2y3";
 function DynamicViewWalkthrough() {
-  const {
+  const isMobile = useXYStore((s) => s.width <= 750), {
     nextDynamicStep,
     stopDynamicView,
     activeDynamicViewStep,
@@ -9749,17 +10004,30 @@ function DynamicViewWalkthrough() {
     stopDynamicView: s.stopDynamicView,
     activeDynamicViewStep: s.activeDynamicViewStep,
     hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
-  })), buttonProps = {
+  })), isActive = isNumber(activeDynamicViewStep);
+  useHotkeys(
+    isActive ? [
+      ["ArrowLeft", () => nextDynamicStep(-1)],
+      ["ArrowRight", () => nextDynamicStep()],
+      ["Escape", (e) => {
+        e.stopImmediatePropagation(), stopDynamicView();
+      }, { preventDefault: !0 }]
+    ] : [
+      ["ArrowLeft", () => nextDynamicStep()],
+      ["ArrowRight", () => nextDynamicStep()]
+    ]
+  );
+  const buttonProps = {
     className: btn,
-    size: "compact-xl",
-    radius: "xl"
+    size: isMobile ? "compact-md" : "lg",
+    radius: isMobile ? "lg" : "xl"
   }, nextStep = (increment = 1) => (e) => {
     e.stopPropagation(), nextDynamicStep(increment);
   };
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: clsx("react-flow__panel", container$1),
+      className: clsx("react-flow__panel", container),
       children: [
         isNullish(activeDynamicViewStep) && /* @__PURE__ */ jsx(
           Button,
@@ -9783,23 +10051,25 @@ function DynamicViewWalkthrough() {
               children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             Button,
             {
               ...buttonProps,
-              px: "sm",
+              px: hasNextSteps ? "md" : "xl",
               onClick: (e) => {
                 e.stopPropagation(), stopDynamicView();
               },
-              children: /* @__PURE__ */ jsx(IconPlayerStopFilled, {})
+              children: [
+                hasNextSteps && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
+                !hasNextSteps && "End"
+              ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          hasNextSteps && /* @__PURE__ */ jsx(
             Button,
             {
               ...buttonProps,
               pr: "lg",
-              disabled: !hasNextSteps,
               onClick: nextStep(),
               children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
             }
@@ -9824,20 +10094,20 @@ const {
 }));
 function NodeOptions({ selectedNodeIds }) {
   const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
-  if (!hasAtLeast(nodes, 1))
+  if (!hasAtLeast$1(nodes, 1))
     return null;
   if (nodes.length !== selectedNodeIds.length)
     throw new Error("NodeOptions: nodes and props.nodes should have the same length");
   const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showOpacityOption = rest.length === 0 && firstNode.type === "compound", triggerChange = (style2) => {
     const targets = nodes.map((node) => node.data.element.id);
-    invariant(hasAtLeast(targets, 1), "At least one target is required"), diagramApi.getState().triggerOnChange([{
+    invariant(hasAtLeast$1(targets, 1), "At least one target is required"), diagramApi.getState().triggerChangeElementStyle({
       op: "change-element-style",
       style: style2,
       targets
-    }]);
+    });
   };
   return /* @__PURE__ */ jsxs(Stack, { children: [
-    /* @__PURE__ */ jsx(Box, { maw: 200, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" }) }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" }) }),
     showShapeOption && /* @__PURE__ */ jsx(
       ShapeOption,
       {
@@ -9856,7 +10126,7 @@ function NodeOptions({ selectedNodeIds }) {
         }
       }
     ),
-    showOpacityOption && /* @__PURE__ */ jsxs(Box, { children: [
+    showOpacityOption && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Divider, { label: "opacity and border", labelPosition: "left" }),
       /* @__PURE__ */ jsx(
         OpacityOption,
@@ -9889,7 +10159,7 @@ function Colors({
   const changeColor = (color2) => () => {
     selectedColor !== color2 && onColorChange(color2);
   };
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 400, closeDelay: 300, children: [
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 400, closeDelay: 300, children: [
     /* @__PURE__ */ jsx(Divider, { label: "color", labelPosition: "left" }),
     /* @__PURE__ */ jsx(Flex, { mt: "xs", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
       Tooltip,
@@ -9941,7 +10211,7 @@ function ShapeOption({
   onShapeChange
 }) {
   let selectedShape = firstNode.data.element.shape;
-  return takeWhile(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs(Box, { children: [
+  return takeWhile(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Divider, { label: "shape", labelPosition: "left" }),
     /* @__PURE__ */ jsx(
       Select,
@@ -9965,7 +10235,7 @@ function NavigateToOption({
   nodes: [node, ...nodes]
 }) {
   const isMultiple = nodes.length >= 1;
-  return /* @__PURE__ */ jsxs(Box, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Divider, { label: "navigate to", labelPosition: "left" }),
     /* @__PURE__ */ jsx(
       Select,
@@ -9989,7 +10259,7 @@ function OpacityOption({
 }) {
   let selectedOpacity = node.data.element.style.opacity ?? 100;
   const [value, setValue] = useState(selectedOpacity);
-  return useEffect(() => {
+  return useUpdateEffect(() => {
     setValue(selectedOpacity);
   }, [selectedOpacity]), /* @__PURE__ */ jsx(
     Slider,
@@ -10009,7 +10279,7 @@ function BorderStyleOption({
 }) {
   let selecteBorderStyle = node.data.element.style.border ?? "dashed";
   const [value, setValue] = useState(selecteBorderStyle);
-  return useEffect(() => {
+  return useUpdateEffect(() => {
     setValue(selecteBorderStyle);
   }, [selecteBorderStyle]), /* @__PURE__ */ jsx(Box, { mt: "md", children: /* @__PURE__ */ jsx(
     SegmentedControl,
@@ -10031,15 +10301,17 @@ function BorderStyleOption({
   ) });
 }
 var panel = "_1lmzt1h0";
+const Empty = [];
 function OptionsPanel() {
-  const isFocusDisabled = useDiagramState((s) => isNullish(s.focusedNodeId)), [selectedNodes, setSelectedNodes] = useState([]);
-  return useOnSelectionChange({
-    onChange: ({ nodes }) => {
-      const next = nodes.map((n) => n.id).sort();
-      setSelectedNodes((prev) => shallowEqual(prev, next) ? prev : next);
-    }
-  }), /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isFocusDisabled && selectedNodes.length > 0 && /* @__PURE__ */ jsx(
-    motion.div,
+  const { isFocusDisabled, viewId } = useDiagramState((s) => ({
+    viewId: s.view.id,
+    isFocusDisabled: s.focusedNodeId === null && s.activeDynamicViewStep === null
+  })), selectedNodes = useXYStore(
+    useCallback((s) => s.elementsSelectable && isFocusDisabled ? reduce(s.nodes, (acc, n) => (n.selected && acc.push(n.id), acc), []) : Empty, [isFocusDisabled]),
+    shallowEqual
+  );
+  return DEV && useTilg(), /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: selectedNodes.length > 0 && /* @__PURE__ */ jsx(
+    m.div,
     {
       initial: { opacity: 0, scale: 0.85 },
       animate: { opacity: 1, scale: 1 },
@@ -10053,157 +10325,38 @@ function OptionsPanel() {
         transformOrigin: "center right"
       },
       children: /* @__PURE__ */ jsx(Card, { shadow: "sm", children: /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
-    }
-  ) });
-}
-var container = "hbkbtj0", paper = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
-const selector = (s) => ({
-  id: s.view.id,
-  title: s.view.title ?? "untitled",
-  description: s.view.description,
-  links: s.view.links
-});
-function DiagramTitlePanel() {
-  const { id: id2, title: title$12, description: description$12, links } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
-    key: "diagram-title-panel-collapsed",
-    defaultValue: !1
-  }), toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0.05, scale: 0.7 },
-      animate: { opacity: 1, scale: 1 },
-      exit: {
-        opacity: 0.05,
-        scale: 0.6
-      },
-      className: clsx("react-flow__panel", container),
-      style: {
-        transformOrigin: "left center"
-      },
-      children: /* @__PURE__ */ jsx(
-        Paper,
-        {
-          radius: "sm",
-          withBorder: !isCollapsed,
-          className: paper,
-          p: isCollapsed ? "xs" : "lg",
-          onDoubleClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", justify: "stretch", align: "stretch", children: [
-            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", onClick: toggle, style: { cursor: "pointer" }, children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  component: "div",
-                  flex: "1",
-                  size: isCollapsed ? "sm" : "lg",
-                  fw: 500,
-                  lh: 1.1,
-                  className: title,
-                  children: title$12
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Text,
-                {
-                  hidden: isCollapsed,
-                  component: "div",
-                  flex: "0 0 auto",
-                  inline: !0,
-                  size: "xs",
-                  fz: 9,
-                  fw: 500,
-                  c: "dimmed",
-                  style: {
-                    userSelect: "all"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
-                      "id:",
-                      " "
-                    ] }),
-                    id2
-                  ]
-                }
-              )
-            ] }),
-            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-              description$12 && /* @__PURE__ */ jsx(
-                Spoiler,
-                {
-                  maxHeight: 42,
-                  showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "show more" }),
-                  hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "hide" }),
-                  children: /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      component: "div",
-                      size: "sm",
-                      className: description,
-                      children: description$12 || "no description"
-                    }
-                  )
-                }
-              ),
-              !description$12 && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  component: "div",
-                  size: "xs",
-                  c: "dimmed",
-                  children: "no description"
-                }
-              ),
-              links && /* @__PURE__ */ jsx(
-                Stack,
-                {
-                  gap: 3,
-                  justify: "stretch",
-                  align: "stretch",
-                  children: links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
-                    /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-                      Anchor,
-                      {
-                        href: link,
-                        target: "_blank",
-                        fz: "xs",
-                        truncate: "end",
-                        display: "inline-block",
-                        w: "100%",
-                        children: link
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        size: "compact-xs",
-                        fz: "10",
-                        variant: "light",
-                        onClick: copy,
-                        color: copied ? "teal" : "gray",
-                        children: copied ? "copied" : "copy"
-                      }
-                    ) })
-                  ] }, link))
-                }
-              )
-            ] })
-          ] })
-        }
-      )
     },
-    id2
+    viewId
   ) });
 }
-function XYFlowInner({
+function literalToEnum(value) {
+  switch (value) {
+    case "dots":
+      return BackgroundVariant.Dots;
+    case "lines":
+      return BackgroundVariant.Lines;
+    case "cross":
+      return BackgroundVariant.Cross;
+    default:
+      nonexhaustive(value);
+  }
+}
+function XYFlowBackground({ background }) {
+  if (typeof background == "string")
+    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background) });
+  const { variant, ...rest } = background;
+  return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
+}
+const XYFlowInner = memo(function({
   children: children2,
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
   const {
-    isDynamicView: isDynamicView2,
+    isDynamicView,
     isDynamicViewActive,
     readonly
   } = useDiagramState((s) => ({
@@ -10216,10 +10369,11 @@ function XYFlowInner({
     controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
     readonly === !1 && /* @__PURE__ */ jsx(OptionsPanel, {}),
     !isDynamicViewActive && showDiagramTitle === !0 && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
-    isDynamicView2 && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardPanel, {}),
     children2
   ] });
-}
+}, shallowEqual);
 function LikeC4Diagram({
   view,
   className,
@@ -10231,13 +10385,15 @@ function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = "dots",
-  controls = !readonly,
+  controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
+  showNavigationButtons = !1,
   enableDynamicViewWalkthrough = !0,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
+  experimentalEdgeEditing = !1,
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -10248,7 +10404,7 @@ function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu
 }) {
-  console.log("LikeC4Diagram");
+  DEV && useTilg();
   const initialRef = useRef();
   if (!initialRef.current) {
     const initial = diagramViewToXYFlowData(view, {
@@ -10279,6 +10435,7 @@ function LikeC4Diagram({
           showElementLinks,
           nodesDraggable,
           nodesSelectable,
+          experimentalEdgeEditing,
           onCanvasClick,
           onCanvasContextMenu,
           onEdgeClick,
@@ -10288,50 +10445,90 @@ function LikeC4Diagram({
           onChange,
           onNavigateTo,
           onCanvasDblClick,
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
             KeepAspectRatioContainer,
             {
               className: clsx(rootClassName, className),
               enabled: keepAspectRatio,
               width: view.width,
               height: view.height,
-              children: [
-                /* @__PURE__ */ jsx(
-                  XYFlow,
-                  {
-                    className: clsx(
-                      "likec4-diagram",
-                      cssReactFlow,
-                      controls === !1 && cssNoControls,
-                      pannable !== !0 && cssDisablePan,
-                      background === "transparent" && cssTransparentBg
-                    ),
-                    defaultNodes: initialRef.current.defaultNodes,
-                    defaultEdges: initialRef.current.defaultEdges,
-                    children: /* @__PURE__ */ jsx(
-                      XYFlowInner,
-                      {
-                        showDiagramTitle,
-                        enableDynamicViewWalkthrough,
-                        background,
-                        controls
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxs(WhenInitialized, { children: [
-                  /* @__PURE__ */ jsx(SyncWithDiagram, {}),
-                  fitView2 && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
-                  fitView2 && zoomable && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
-                ] })
-              ]
+              children: /* @__PURE__ */ jsx(
+                LikeC4DiagramInnerMemo,
+                {
+                  defaultNodes: initialRef.current.defaultNodes,
+                  defaultEdges: initialRef.current.defaultEdges,
+                  fitView: fitView2,
+                  zoomable,
+                  background,
+                  controls,
+                  pannable,
+                  showDiagramTitle,
+                  showNavigationButtons,
+                  enableDynamicViewWalkthrough
+                }
+              )
             }
-          )
+          ) })
         }
       )
     }
   ) });
 }
+const LikeC4DiagramInnerMemo = memo(function({
+  background,
+  fitView: fitView2,
+  zoomable,
+  controls,
+  pannable,
+  defaultNodes,
+  defaultEdges,
+  showDiagramTitle,
+  showNavigationButtons,
+  enableDynamicViewWalkthrough
+}) {
+  DEV && useTilg();
+  const diagramApi = useDiagramStoreApi(), [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized);
+  return useEffect(() => {
+    if (!isInitialized)
+      return diagramApi.subscribe(
+        (s) => s.initialized,
+        setIsInitialized,
+        {
+          fireImmediately: !0
+        }
+      );
+  }, [isInitialized]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      XYFlow,
+      {
+        defaultNodes,
+        defaultEdges,
+        className: clsx(
+          "likec4-diagram",
+          cssReactFlow,
+          controls === !1 && cssNoControls,
+          pannable !== !0 && cssDisablePan,
+          background === "transparent" && cssTransparentBg
+        ),
+        children: /* @__PURE__ */ jsx(
+          XYFlowInner,
+          {
+            showNavigationButtons,
+            showDiagramTitle,
+            enableDynamicViewWalkthrough,
+            background,
+            controls
+          }
+        )
+      }
+    ),
+    isInitialized && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SyncWithDiagram, {}),
+      fitView2 && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
+      fitView2 && zoomable && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
+    ] })
+  ] });
+}, shallowEqual);
 function StaticLikeC4Diagram({
   view,
   fitView: fitView2 = !0,