@likec4/diagram 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -6,15 +6,17 @@ import { createContext, memo, useState, forwardRef, useCallback, useMemo, useEff
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { shallow } from "zustand/shallow";
 import { createPortal } from "react-dom";
-import { Box, MantineContext, Stack, Text, TooltipGroup, Divider, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Card, ActionIcon, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Group, Anchor, CopyButton, Button, useMantineColorScheme } from "@mantine/core";
-import { invariant, isAncestor, nonNullable, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
+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 { subscribeWithSelector, devtools } from "zustand/middleware";
-import { useFirstMountState, useCustomCompareEffect, useDebouncedCallback, useRafEffect, useDebouncedEffect } from "@react-hookz/web";
-import { AnimatePresence, motion } from "framer-motion";
-import { isNullish, keys, hasAtLeast, takeWhile, clamp as clamp$1, isNumber } from "remeda";
-var rootClassName = "likec4-diagram-root";
+import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect } from "@react-hookz/web";
+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";
 function cc(names) {
   if (typeof names == "string" || typeof names == "number")
     return "" + names;
@@ -30,10 +32,10 @@ function cc(names) {
 var noop$1 = { value: () => {
 } };
 function dispatch() {
-  for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {
-    if (!(t = arguments[i] + "") || t in _ || /[\s.]/.test(t))
-      throw new Error("illegal type: " + t);
-    _[t] = [];
+  for (var i = 0, n = arguments.length, _ = {}, t2; i < n; ++i) {
+    if (!(t2 = arguments[i] + "") || t2 in _ || /[\s.]/.test(t2))
+      throw new Error("illegal type: " + t2);
+    _[t2] = [];
   }
   return new Dispatch(_);
 }
@@ -41,53 +43,53 @@ function Dispatch(_) {
   this._ = _;
 }
 function parseTypenames$1(typenames, types) {
-  return typenames.trim().split(/^|\s+/).map(function(t) {
-    var name = "", i = t.indexOf(".");
-    if (i >= 0 && (name = t.slice(i + 1), t = t.slice(0, i)), t && !types.hasOwnProperty(t))
-      throw new Error("unknown type: " + t);
-    return { type: t, name };
+  return typenames.trim().split(/^|\s+/).map(function(t2) {
+    var name = "", i = t2.indexOf(".");
+    if (i >= 0 && (name = t2.slice(i + 1), t2 = t2.slice(0, i)), t2 && !types.hasOwnProperty(t2))
+      throw new Error("unknown type: " + t2);
+    return { type: t2, name };
   });
 }
 Dispatch.prototype = dispatch.prototype = {
   constructor: Dispatch,
   on: function(typename, callback) {
-    var _ = this._, T = parseTypenames$1(typename + "", _), t, i = -1, n = T.length;
+    var _ = this._, T = parseTypenames$1(typename + "", _), t2, i = -1, n = T.length;
     if (arguments.length < 2) {
       for (; ++i < n; )
-        if ((t = (typename = T[i]).type) && (t = get$2(_[t], typename.name)))
-          return t;
+        if ((t2 = (typename = T[i]).type) && (t2 = get$2(_[t2], typename.name)))
+          return t2;
       return;
     }
     if (callback != null && typeof callback != "function")
       throw new Error("invalid callback: " + callback);
     for (; ++i < n; )
-      if (t = (typename = T[i]).type)
-        _[t] = set$1(_[t], typename.name, callback);
+      if (t2 = (typename = T[i]).type)
+        _[t2] = set$1(_[t2], typename.name, callback);
       else if (callback == null)
-        for (t in _)
-          _[t] = set$1(_[t], typename.name, null);
+        for (t2 in _)
+          _[t2] = set$1(_[t2], typename.name, null);
     return this;
   },
   copy: function() {
     var copy = {}, _ = this._;
-    for (var t in _)
-      copy[t] = _[t].slice();
+    for (var t2 in _)
+      copy[t2] = _[t2].slice();
     return new Dispatch(copy);
   },
   call: function(type, that) {
     if ((n = arguments.length - 2) > 0)
-      for (var args = new Array(n), i = 0, n, t; i < n; ++i)
+      for (var args = new Array(n), i = 0, n, t2; i < n; ++i)
         args[i] = arguments[i + 2];
     if (!this._.hasOwnProperty(type))
       throw new Error("unknown type: " + type);
-    for (t = this._[type], i = 0, n = t.length; i < n; ++i)
-      t[i].value.apply(that, args);
+    for (t2 = this._[type], i = 0, n = t2.length; i < n; ++i)
+      t2[i].value.apply(that, args);
   },
   apply: function(type, that, args) {
     if (!this._.hasOwnProperty(type))
       throw new Error("unknown type: " + type);
-    for (var t = this._[type], i = 0, n = t.length; i < n; ++i)
-      t[i].value.apply(that, args);
+    for (var t2 = this._[type], i = 0, n = t2.length; i < n; ++i)
+      t2[i].value.apply(that, args);
   }
 };
 function get$2(type, name) {
@@ -569,9 +571,9 @@ function contextListener(listener) {
   };
 }
 function parseTypenames(typenames) {
-  return typenames.trim().split(/^|\s+/).map(function(t) {
-    var name = "", i = t.indexOf(".");
-    return i >= 0 && (name = t.slice(i + 1), t = t.slice(0, i)), { type: t, name };
+  return typenames.trim().split(/^|\s+/).map(function(t2) {
+    var name = "", i = t2.indexOf(".");
+    return i >= 0 && (name = t2.slice(i + 1), t2 = t2.slice(0, i)), { type: t2, name };
   });
 }
 function onRemove(typename) {
@@ -598,13 +600,13 @@ function onAdd(typename, value, options) {
   };
 }
 function selection_on(typename, value, options) {
-  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t2;
   if (arguments.length < 2) {
     var on = this.node().__on;
     if (on) {
       for (var j = 0, m = on.length, o; j < m; ++j)
         for (i = 0, o = on[j]; i < n; ++i)
-          if ((t = typenames[i]).type === o.type && t.name === o.name)
+          if ((t2 = typenames[i]).type === o.type && t2.name === o.name)
             return o.value;
     }
     return;
@@ -1125,8 +1127,8 @@ function hslConvert(o) {
   if (o instanceof Hsl)
     return o;
   o = o.rgb();
-  var r2 = o.r / 255, g = o.g / 255, b = o.b / 255, min = Math.min(r2, g, b), max = Math.max(r2, g, b), h = NaN, s = max - min, l = (max + min) / 2;
-  return s ? (r2 === max ? h = (g - b) / s + (g < b) * 6 : g === max ? h = (b - r2) / s + 2 : h = (r2 - g) / s + 4, s /= l < 0.5 ? max + min : 2 - max - min, h *= 60) : s = l > 0 && l < 1 ? 0 : h, new Hsl(h, s, l, o.opacity);
+  var r2 = o.r / 255, g = o.g / 255, b = o.b / 255, min2 = Math.min(r2, g, b), max2 = Math.max(r2, g, b), h = NaN, s = max2 - min2, l = (max2 + min2) / 2;
+  return s ? (r2 === max2 ? h = (g - b) / s + (g < b) * 6 : g === max2 ? h = (b - r2) / s + 2 : h = (r2 - g) / s + 4, s /= l < 0.5 ? max2 + min2 : 2 - max2 - min2, h *= 60) : s = l > 0 && l < 1 ? 0 : h, new Hsl(h, s, l, o.opacity);
 }
 function hsl(h, s, l, opacity) {
   return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity ?? 1);
@@ -1172,13 +1174,13 @@ function hsl2rgb(h, m1, m2) {
 }
 const constant$1 = (x) => () => x;
 function linear(a, d) {
-  return function(t) {
-    return a + t * d;
+  return function(t2) {
+    return a + t2 * d;
   };
 }
 function exponential(a, b, y) {
-  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
-    return Math.pow(a + t * b, y);
+  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t2) {
+    return Math.pow(a + t2 * b, y);
   };
 }
 function gamma(y) {
@@ -1194,15 +1196,15 @@ const interpolateRgb = function rgbGamma(y) {
   var color2 = gamma(y);
   function rgb$1(start2, end) {
     var r2 = color2((start2 = rgb(start2)).r, (end = rgb(end)).r), g = color2(start2.g, end.g), b = color2(start2.b, end.b), opacity = nogamma(start2.opacity, end.opacity);
-    return function(t) {
-      return start2.r = r2(t), start2.g = g(t), start2.b = b(t), start2.opacity = opacity(t), start2 + "";
+    return function(t2) {
+      return start2.r = r2(t2), start2.g = g(t2), start2.b = b(t2), start2.opacity = opacity(t2), start2 + "";
     };
   }
   return rgb$1.gamma = rgbGamma, rgb$1;
 }(1);
 function interpolateNumber(a, b) {
-  return a = +a, b = +b, function(t) {
-    return a * (1 - t) + b * t;
+  return a = +a, b = +b, function(t2) {
+    return a * (1 - t2) + b * t2;
   };
 }
 var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g, reB = new RegExp(reA.source, "g");
@@ -1212,17 +1214,17 @@ function zero(b) {
   };
 }
 function one(b) {
-  return function(t) {
-    return b(t) + "";
+  return function(t2) {
+    return b(t2) + "";
   };
 }
 function interpolateString(a, b) {
   var bi = reA.lastIndex = reB.lastIndex = 0, am, bm, bs, i = -1, s = [], q = [];
   for (a = a + "", b = b + ""; (am = reA.exec(a)) && (bm = reB.exec(b)); )
     (bs = bm.index) > bi && (bs = b.slice(bi, bs), s[i] ? s[i] += bs : s[++i] = bs), (am = am[0]) === (bm = bm[0]) ? s[i] ? s[i] += bm : s[++i] = bm : (s[++i] = null, q.push({ i, x: interpolateNumber(am, bm) })), bi = reB.lastIndex;
-  return bi < b.length && (bs = b.slice(bi), s[i] ? s[i] += bs : s[++i] = bs), s.length < 2 ? q[0] ? one(q[0].x) : zero(b) : (b = q.length, function(t) {
+  return bi < b.length && (bs = b.slice(bi), s[i] ? s[i] += bs : s[++i] = bs), s.length < 2 ? q[0] ? one(q[0].x) : zero(b) : (b = q.length, function(t2) {
     for (var i2 = 0, o; i2 < b; ++i2)
-      s[(o = q[i2]).i] = o.x(t);
+      s[(o = q[i2]).i] = o.x(t2);
     return s.join("");
   });
 }
@@ -1279,9 +1281,9 @@ function interpolateTransform(parse, pxComma, pxParen, degParen) {
   }
   return function(a, b) {
     var s = [], q = [];
-    return a = parse(a), b = parse(b), translate(a.translateX, a.translateY, b.translateX, b.translateY, s, q), rotate(a.rotate, b.rotate, s, q), skewX(a.skewX, b.skewX, s, q), scale(a.scaleX, a.scaleY, b.scaleX, b.scaleY, s, q), a = b = null, function(t) {
+    return a = parse(a), b = parse(b), translate(a.translateX, a.translateY, b.translateX, b.translateY, s, q), rotate(a.rotate, b.rotate, s, q), skewX(a.skewX, b.skewX, s, q), scale(a.scaleX, a.scaleY, b.scaleX, b.scaleY, s, q), a = b = null, function(t2) {
       for (var i = -1, n = q.length, o; ++i < n; )
-        s[(o = q[i]).i] = o.x(t);
+        s[(o = q[i]).i] = o.x(t2);
       return s.join("");
     };
   };
@@ -1300,17 +1302,17 @@ const interpolateZoom = function zoomRho(rho, rho2, rho4) {
   function zoom2(p0, p1) {
     var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], ux1 = p1[0], uy1 = p1[1], w1 = p1[2], dx = ux1 - ux0, dy = uy1 - uy0, d2 = dx * dx + dy * dy, i, S;
     if (d2 < epsilon2)
-      S = Math.log(w1 / w0) / rho, i = function(t) {
+      S = Math.log(w1 / w0) / rho, i = function(t2) {
         return [
-          ux0 + t * dx,
-          uy0 + t * dy,
-          w0 * Math.exp(rho * t * S)
+          ux0 + t2 * dx,
+          uy0 + t2 * dy,
+          w0 * Math.exp(rho * t2 * S)
         ];
       };
     else {
       var d1 = Math.sqrt(d2), b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1), b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1), r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0), r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
-      S = (r1 - r0) / rho, i = function(t) {
-        var s = t * S, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
+      S = (r1 - r0) / rho, i = function(t2) {
+        var s = t2 * S, coshr0 = cosh(r0), u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
         return [
           ux0 + u * dx,
           uy0 + u * dy,
@@ -1349,13 +1351,13 @@ Timer.prototype = timer.prototype = {
   }
 };
 function timer(callback, delay, time) {
-  var t = new Timer();
-  return t.restart(callback, delay, time), t;
+  var t2 = new Timer();
+  return t2.restart(callback, delay, time), t2;
 }
 function timerFlush() {
   now(), ++frame;
-  for (var t = taskHead, e; t; )
-    (e = clockNow - t._time) >= 0 && t._call.call(void 0, e), t = t._next;
+  for (var t2 = taskHead, e; t2; )
+    (e = clockNow - t2._time) >= 0 && t2._call.call(void 0, e), t2 = t2._next;
   --frame;
 }
 function wake() {
@@ -1383,10 +1385,10 @@ function sleep(time) {
   }
 }
 function timeout(callback, delay, time) {
-  var t = new Timer();
-  return delay = delay == null ? 0 : +delay, t.restart((elapsed) => {
-    t.stop(), callback(elapsed + delay);
-  }, delay, time), t;
+  var t2 = new Timer();
+  return delay = delay == null ? 0 : +delay, t2.restart((elapsed) => {
+    t2.stop(), callback(elapsed + delay);
+  }, delay, time), t2;
 }
 var emptyOn = dispatch("start", "end", "cancel", "interrupt"), emptyTween = [], CREATED = 0, SCHEDULED = 1, STARTING = 2, STARTED = 3, RUNNING = 4, ENDING = 5, ENDED = 6;
 function schedule(node, name, id2, index2, group, timing) {
@@ -1454,8 +1456,8 @@ function create(node, id2, self) {
     }
   }
   function tick(elapsed) {
-    for (var t = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1), i = -1, n = tween.length; ++i < n; )
-      tween[i].call(node, t);
+    for (var t2 = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1), i = -1, n = tween.length; ++i < n; )
+      tween[i].call(node, t2);
     self.state === ENDING && (self.on.call("end", node, node.__data__, self.index, self.group), stop());
   }
   function stop() {
@@ -1507,12 +1509,12 @@ function tweenFunction(id2, name, value) {
     var schedule2 = set(this, id2), tween = schedule2.tween;
     if (tween !== tween0) {
       tween1 = (tween0 = tween).slice();
-      for (var t = { name, value }, i = 0, n = tween1.length; i < n; ++i)
+      for (var t2 = { name, value }, i = 0, n = tween1.length; i < n; ++i)
         if (tween1[i].name === name) {
-          tween1[i] = t;
+          tween1[i] = t2;
           break;
         }
-      i === n && tween1.push(t);
+      i === n && tween1.push(t2);
     }
     schedule2.tween = tween1;
   };
@@ -1520,9 +1522,9 @@ 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, t; i < n; ++i)
-      if ((t = tween[i]).name === name)
-        return t.value;
+    for (var tween = get$1(this.node(), id2).tween, i = 0, n = tween.length, t2; i < n; ++i)
+      if ((t2 = tween[i]).name === name)
+        return t2.value;
     return null;
   }
   return this.each((value == null ? tweenRemove : tweenFunction)(id2, name, value));
@@ -1583,13 +1585,13 @@ function transition_attr(name, value) {
   return this.attrTween(name, typeof value == "function" ? (fullname.local ? attrFunctionNS : attrFunction)(fullname, i, tweenValue(this, "attr." + name, value)) : value == null ? (fullname.local ? attrRemoveNS : attrRemove)(fullname) : (fullname.local ? attrConstantNS : attrConstant)(fullname, i, value));
 }
 function attrInterpolate(name, i) {
-  return function(t) {
-    this.setAttribute(name, i.call(this, t));
+  return function(t2) {
+    this.setAttribute(name, i.call(this, t2));
   };
 }
 function attrInterpolateNS(fullname, i) {
-  return function(t) {
-    this.setAttributeNS(fullname.space, fullname.local, i.call(this, t));
+  return function(t2) {
+    this.setAttributeNS(fullname.space, fullname.local, i.call(this, t2));
   };
 }
 function attrTweenNS(fullname, value) {
@@ -1689,9 +1691,9 @@ function transition_merge(transition) {
   return new Transition(merges, this._parents, this._name, this._id);
 }
 function start(name) {
-  return (name + "").trim().split(/^|\s+/).every(function(t) {
-    var i = t.indexOf(".");
-    return i >= 0 && (t = t.slice(0, i)), !t || t === "start";
+  return (name + "").trim().split(/^|\s+/).every(function(t2) {
+    var i = t2.indexOf(".");
+    return i >= 0 && (t2 = t2.slice(0, i)), !t2 || t2 === "start";
   });
 }
 function onFunction(id2, name, listener) {
@@ -1779,15 +1781,15 @@ function transition_style(name, value, priority) {
   return value == null ? this.styleTween(name, styleNull(name, i)).on("end.style." + name, styleRemove(name)) : typeof value == "function" ? this.styleTween(name, styleFunction(name, i, tweenValue(this, "style." + name, value))).each(styleMaybeRemove(this._id, name)) : this.styleTween(name, styleConstant(name, i, value), priority).on("end.style." + name, null);
 }
 function styleInterpolate(name, i, priority) {
-  return function(t) {
-    this.style.setProperty(name, i.call(this, t), priority);
+  return function(t2) {
+    this.style.setProperty(name, i.call(this, t2), priority);
   };
 }
 function styleTween(name, value, priority) {
-  var t, i0;
+  var t2, i0;
   function tween() {
     var i = value.apply(this, arguments);
-    return i !== i0 && (t = (i0 = i) && styleInterpolate(name, i, priority)), t;
+    return i !== i0 && (t2 = (i0 = i) && styleInterpolate(name, i, priority)), t2;
   }
   return tween._value = value, tween;
 }
@@ -1816,8 +1818,8 @@ function transition_text(value) {
   return this.tween("text", typeof value == "function" ? textFunction(tweenValue(this, "text", value)) : textConstant(value == null ? "" : value + ""));
 }
 function textInterpolate(i) {
-  return function(t) {
-    this.textContent = i.call(this, t);
+  return function(t2) {
+    this.textContent = i.call(this, t2);
   };
 }
 function textTween(value) {
@@ -1904,8 +1906,8 @@ Transition.prototype = {
   end: transition_end,
   [Symbol.iterator]: selection_prototype[Symbol.iterator]
 };
-function cubicInOut(t) {
-  return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
+function cubicInOut(t2) {
+  return ((t2 *= 2) <= 1 ? t2 * t2 * t2 : (t2 -= 2) * t2 * t2 + 2) / 2;
 }
 var defaultTiming = {
   time: null,
@@ -2050,8 +2052,8 @@ function zoom() {
     }, null, event);
   }, zoom2.translateTo = function(selection2, x, y, p, event) {
     zoom2.transform(selection2, function() {
-      var e = extent.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p == "function" ? p.apply(this, arguments) : p;
-      return constrain(identity.translate(p0[0], p0[1]).scale(t.k).translate(
+      var e = extent.apply(this, arguments), t2 = this.__zoom, p0 = p == null ? centroid(e) : typeof p == "function" ? p.apply(this, arguments) : p;
+      return constrain(identity.translate(p0[0], p0[1]).scale(t2.k).translate(
         typeof x == "function" ? -x.apply(this, arguments) : -x,
         typeof y == "function" ? -y.apply(this, arguments) : -y
       ), e, translateExtent);
@@ -2074,14 +2076,14 @@ function zoom() {
       gesture(this, arguments).event(event).end();
     }).tween("zoom", function() {
       var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p = point == null ? centroid(e) : typeof point == "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a = that.__zoom, b = typeof transform2 == "function" ? transform2.apply(that, args) : transform2, i = interpolate2(a.invert(p).concat(w / a.k), b.invert(p).concat(w / b.k));
-      return function(t) {
-        if (t === 1)
-          t = b;
+      return function(t2) {
+        if (t2 === 1)
+          t2 = b;
         else {
-          var l = i(t), k = w / l[2];
-          t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k);
+          var l = i(t2), k = w / l[2];
+          t2 = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k);
         }
-        g.zoom(null, t);
+        g.zoom(null, t2);
       };
     });
   }
@@ -2123,15 +2125,15 @@ function zoom() {
   function wheeled(event, ...args) {
     if (!filter2.apply(this, arguments))
       return;
-    var g = gesture(this, args).event(event), t = this.__zoom, k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta2.apply(this, arguments)))), p = pointer(event);
+    var g = gesture(this, args).event(event), t2 = this.__zoom, k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t2.k * Math.pow(2, wheelDelta2.apply(this, arguments)))), p = pointer(event);
     if (g.wheel)
-      (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) && (g.mouse[1] = t.invert(g.mouse[0] = p)), clearTimeout(g.wheel);
+      (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) && (g.mouse[1] = t2.invert(g.mouse[0] = p)), clearTimeout(g.wheel);
     else {
-      if (t.k === k)
+      if (t2.k === k)
         return;
-      g.mouse = [p, t.invert(p)], interrupt(this), g.start();
+      g.mouse = [p, t2.invert(p)], interrupt(this), g.start();
     }
-    noevent(event), g.wheel = setTimeout(wheelidled, wheelDelay), g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
+    noevent(event), g.wheel = setTimeout(wheelidled, wheelDelay), g.zoom("mouse", constrain(translate(scale(t2, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
     function wheelidled() {
       g.wheel = null, g.end();
     }
@@ -2160,9 +2162,9 @@ function zoom() {
   }
   function touchstarted(event, ...args) {
     if (filter2.apply(this, arguments)) {
-      var touches = event.touches, n = touches.length, g = gesture(this, args, event.changedTouches.length === n).event(event), started, i, t, p;
+      var touches = event.touches, n = touches.length, g = gesture(this, args, event.changedTouches.length === n).event(event), started, i, t2, p;
       for (nopropagation(event), i = 0; i < n; ++i)
-        t = touches[i], p = pointer(t, this), p = [p, this.__zoom.invert(p), t.identifier], g.touch0 ? !g.touch1 && g.touch0[2] !== p[2] && (g.touch1 = p, g.taps = 0) : (g.touch0 = p, started = !0, g.taps = 1 + !!touchstarting);
+        t2 = touches[i], p = pointer(t2, this), p = [p, this.__zoom.invert(p), t2.identifier], g.touch0 ? !g.touch1 && g.touch0[2] !== p[2] && (g.touch1 = p, g.taps = 0) : (g.touch0 = p, started = !0, g.taps = 1 + !!touchstarting);
       touchstarting && (touchstarting = clearTimeout(touchstarting)), started && (g.taps < 2 && (touchfirst = p[0], touchstarting = setTimeout(function() {
         touchstarting = null;
       }, touchDelay)), interrupt(this), g.start());
@@ -2170,29 +2172,29 @@ function zoom() {
   }
   function touchmoved(event, ...args) {
     if (this.__zooming) {
-      var g = gesture(this, args).event(event), touches = event.changedTouches, n = touches.length, i, t, p, l;
+      var g = gesture(this, args).event(event), touches = event.changedTouches, n = touches.length, i, t2, p, l;
       for (noevent(event), i = 0; i < n; ++i)
-        t = touches[i], p = pointer(t, this), g.touch0 && g.touch0[2] === t.identifier ? g.touch0[0] = p : g.touch1 && g.touch1[2] === t.identifier && (g.touch1[0] = p);
-      if (t = g.that.__zoom, g.touch1) {
+        t2 = touches[i], p = pointer(t2, this), g.touch0 && g.touch0[2] === t2.identifier ? g.touch0[0] = p : g.touch1 && g.touch1[2] === t2.identifier && (g.touch1[0] = p);
+      if (t2 = g.that.__zoom, g.touch1) {
         var p0 = g.touch0[0], l0 = g.touch0[1], p1 = g.touch1[0], l1 = g.touch1[1], dp = (dp = p1[0] - p0[0]) * dp + (dp = p1[1] - p0[1]) * dp, dl = (dl = l1[0] - l0[0]) * dl + (dl = l1[1] - l0[1]) * dl;
-        t = scale(t, Math.sqrt(dp / dl)), p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2], l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];
+        t2 = scale(t2, Math.sqrt(dp / dl)), p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2], l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];
       } else if (g.touch0)
         p = g.touch0[0], l = g.touch0[1];
       else
         return;
-      g.zoom("touch", constrain(translate(t, p, l), g.extent, translateExtent));
+      g.zoom("touch", constrain(translate(t2, p, l), g.extent, translateExtent));
     }
   }
   function touchended(event, ...args) {
     if (this.__zooming) {
-      var g = gesture(this, args).event(event), touches = event.changedTouches, n = touches.length, i, t;
+      var g = gesture(this, args).event(event), touches = event.changedTouches, n = touches.length, i, t2;
       for (nopropagation(event), touchending && clearTimeout(touchending), touchending = setTimeout(function() {
         touchending = null;
       }, touchDelay), i = 0; i < n; ++i)
-        t = touches[i], g.touch0 && g.touch0[2] === t.identifier ? delete g.touch0 : g.touch1 && g.touch1[2] === t.identifier && delete g.touch1;
+        t2 = touches[i], g.touch0 && g.touch0[2] === t2.identifier ? delete g.touch0 : g.touch1 && g.touch1[2] === t2.identifier && delete g.touch1;
       if (g.touch1 && !g.touch0 && (g.touch0 = g.touch1, delete g.touch1), g.touch0)
         g.touch0[1] = this.__zoom.invert(g.touch0[0]);
-      else if (g.end(), g.taps === 2 && (t = pointer(t, this), Math.hypot(touchfirst[0] - t[0], touchfirst[1] - t[1]) < tapDistance)) {
+      else if (g.end(), g.taps === 2 && (t2 = pointer(t2, this), Math.hypot(touchfirst[0] - t2[0], touchfirst[1] - t2[1]) < tapDistance)) {
         var p = select(this).on("dblclick.zoom");
         p && p.apply(this, arguments);
       }
@@ -2267,7 +2269,7 @@ var Position;
 (function(Position2) {
   Position2.Left = "left", Position2.Top = "top", Position2.Right = "right", Position2.Bottom = "bottom";
 })(Position || (Position = {}));
-const isEdgeBase = (element) => "id" in element && "source" in element && "target" in element, isNodeBase = (element) => "id" in element && "position" in element && !("source" in element) && !("target" in element), getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
+const isEdgeBase = (element2) => "id" in element2 && "source" in element2 && "target" in element2, isNodeBase = (element2) => "id" in element2 && "position" in element2 && !("source" in element2) && !("target" in element2), getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
   const { width, height } = getNodeDimensions(node), positionAbsolute = "internals" in node ? node.internals.positionAbsolute : node.position, origin = node.origin || nodeOrigin, offsetX = width * origin[0], offsetY = height * origin[1];
   return {
     position: {
@@ -2385,10 +2387,10 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
   });
   return typeof onBeforeDeleteResult == "boolean" ? onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] } : onBeforeDeleteResult;
 }
-const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max), clampPosition = (position = { x: 0, y: 0 }, extent) => ({
+const clamp = (val, min2 = 0, max2 = 1) => Math.min(Math.max(val, min2), max2), clampPosition = (position = { x: 0, y: 0 }, extent) => ({
   x: clamp(position.x, extent[0][0], extent[1][0]),
   y: clamp(position.y, extent[0][1], extent[1][1])
-}), calcAutoPanVelocity = (value, min, max) => value < min ? clamp(Math.abs(value - min), 1, 50) / 50 : value > max ? -clamp(Math.abs(value - max), 1, 50) / 50 : 0, calcAutoPan = (pos, bounds) => {
+}), calcAutoPanVelocity = (value, min2, max2) => value < min2 ? clamp(Math.abs(value - min2), 1, 50) / 50 : value > max2 ? -clamp(Math.abs(value - max2), 1, 50) / 50 : 0, calcAutoPan = (pos, bounds) => {
   const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20, yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20;
   return [xMovement, yMovement];
 }, getBoundsOfBoxes = (box1, box2) => ({
@@ -2487,9 +2489,9 @@ function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = !1, transfo
 const getDimensions = (node) => ({
   width: node.offsetWidth,
   height: node.offsetHeight
-}), getHostForElement = (element) => {
+}), getHostForElement = (element2) => {
   var _a;
-  return ((_a = element.getRootNode) == null ? void 0 : _a.call(element)) || (window == null ? void 0 : window.document);
+  return ((_a = element2.getRootNode) == null ? void 0 : _a.call(element2)) || (window == null ? void 0 : window.document);
 }, inputTags = ["INPUT", "SELECT", "TEXTAREA"];
 function isInputDOMNode(event) {
   var _a, _b;
@@ -3958,10 +3960,10 @@ function applyChanges(changes, elements) {
       const elementChanges = changesMap.get(change.id);
       elementChanges ? elementChanges.push(change) : changesMap.set(change.id, [change]);
     }
-  for (const element of elements) {
-    const changes2 = changesMap.get(element.id);
+  for (const element2 of elements) {
+    const changes2 = changesMap.get(element2.id);
     if (!changes2) {
-      updatedElements.push(element);
+      updatedElements.push(element2);
       continue;
     }
     if (changes2[0].type === "remove")
@@ -3970,25 +3972,25 @@ function applyChanges(changes, elements) {
       updatedElements.push({ ...changes2[0].item });
       continue;
     }
-    const updatedElement = { ...element };
+    const updatedElement = { ...element2 };
     for (const change of changes2)
       applyChange(change, updatedElement);
     updatedElements.push(updatedElement);
   }
   return updatedElements;
 }
-function applyChange(change, element) {
+function applyChange(change, element2) {
   switch (change.type) {
     case "select": {
-      element.selected = change.selected;
+      element2.selected = change.selected;
       break;
     }
     case "position": {
-      typeof change.position < "u" && (element.position = change.position), typeof change.dragging < "u" && (element.dragging = change.dragging);
+      typeof change.position < "u" && (element2.position = change.position), typeof change.dragging < "u" && (element2.dragging = change.dragging);
       break;
     }
     case "dimensions": {
-      typeof change.dimensions < "u" && (element.measured ?? (element.measured = {}), element.measured.width = change.dimensions.width, element.measured.height = change.dimensions.height, change.setAttributes && (element.width = change.dimensions.width, element.height = change.dimensions.height)), typeof change.resizing == "boolean" && (element.resizing = change.resizing);
+      typeof change.dimensions < "u" && (element2.measured ?? (element2.measured = {}), element2.measured.width = change.dimensions.width, element2.measured.height = change.dimensions.height, change.setAttributes && (element2.width = change.dimensions.width, element2.height = change.dimensions.height)), typeof change.resizing == "boolean" && (element2.resizing = change.resizing);
       break;
     }
   }
@@ -4031,7 +4033,7 @@ function elementToRemoveChange(item) {
     type: "remove"
   };
 }
-const isNode = (element) => isNodeBase(element);
+const isNode = (element2) => isNodeBase(element2);
 function fixedForwardRef(render) {
   return forwardRef(render);
 }
@@ -4669,9 +4671,9 @@ function useVisibleNodeIds(onlyRenderVisible) {
 }
 const selector$e = (s) => s.updateNodeInternals;
 function useResizeObserver() {
-  const updateNodeInternals2 = useStore(selector$e), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
+  const updateNodeInternals2 = useStore(selector$e), [resizeObserver] = useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries2) => {
     const updates = /* @__PURE__ */ new Map();
-    entries.forEach((entry) => {
+    entries2.forEach((entry) => {
       const id2 = entry.target.getAttribute("data-id");
       updates.set(id2, {
         id: id2,
@@ -5481,6 +5483,16 @@ function EdgeLabelRenderer({ children: children2 }) {
   const edgeLabelRenderer = useStore(selector$8);
   return edgeLabelRenderer ? createPortal(children2, edgeLabelRenderer) : null;
 }
+function useOnViewportChange({ onStart, onChange, onEnd }) {
+  const store = useStoreApi();
+  useEffect(() => {
+    store.setState({ onViewportChangeStart: onStart });
+  }, [onStart]), useEffect(() => {
+    store.setState({ onViewportChange: onChange });
+  }, [onChange]), useEffect(() => {
+    store.setState({ onViewportChangeEnd: onEnd });
+  }, [onEnd]);
+}
 function useOnSelectionChange({ onChange }) {
   const store = useStoreApi();
   useEffect(() => {
@@ -5491,19 +5503,6 @@ function useOnSelectionChange({ onChange }) {
     };
   }, [onChange]);
 }
-const selector$6 = (options) => (s) => {
-  if (s.nodeLookup.size === 0)
-    return !1;
-  for (const [, { hidden, internals }] of s.nodeLookup)
-    if ((options.includeHiddenNodes || !hidden) && (internals.handleBounds === void 0 || !nodeHasDimensions(internals.userNode)))
-      return !1;
-  return !0;
-}, defaultOptions = {
-  includeHiddenNodes: !1
-};
-function useNodesInitialized(options = defaultOptions) {
-  return useStore(selector$6(options));
-}
 function useNodesData(nodeIds) {
   return useStore(useCallback((s) => {
     const data = [], isArrayOfIds = Array.isArray(nodeIds), _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
@@ -5607,7 +5606,7 @@ function MiniMapNodeComponent({ id: id2, x, y, width, height, style: style2, col
     strokeWidth
   }, shapeRendering, onClick: onClick ? (event) => onClick(event, id2) : void 0 });
 }
-const MiniMapNode = memo(MiniMapNodeComponent), selector$2 = (s) => s.nodeOrigin, selectorNodeIds = (s) => s.nodes.map((node) => node.id), getAttrFunction = (func) => func instanceof Function ? func : () => func;
+const MiniMapNode = memo(MiniMapNodeComponent), selector$2$1 = (s) => s.nodeOrigin, selectorNodeIds = (s) => s.nodes.map((node) => node.id), getAttrFunction = (func) => func instanceof Function ? func : () => func;
 function MiniMapNodes({
   nodeStrokeColor,
   nodeColor,
@@ -5619,7 +5618,7 @@ function MiniMapNodes({
   nodeComponent: NodeComponent = MiniMapNode,
   onClick
 }) {
-  const nodeIds = useStore(selectorNodeIds, shallow), nodeOrigin = useStore(selector$2), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
+  const nodeIds = useStore(selectorNodeIds, shallow), nodeOrigin = useStore(selector$2$1), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
   return jsx(Fragment, { children: nodeIds.map((nodeId) => (
     // The split of responsibilities between MiniMapNodes and
     // NodeComponentWrapper may appear weird. However, it’s designed to
@@ -5645,7 +5644,7 @@ function NodeComponentWrapperInner({ id: id2, nodeOrigin, nodeColorFunc, nodeStr
 }
 const NodeComponentWrapper = memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = memo(MiniMapNodes);
-const defaultWidth = 200, defaultHeight = 150, selector$1 = (s) => {
+const defaultWidth = 200, defaultHeight = 150, selector$1$1 = (s) => {
   const viewBB = {
     x: -s.transform[0] / s.transform[2],
     y: -s.transform[1] / s.transform[2],
@@ -5688,7 +5687,7 @@ function MiniMapComponent({
   zoomStep = 10,
   offsetScale = 5
 }) {
-  const store = useStoreApi(), svg = useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1, shallow), elementWidth = (style2 == null ? void 0 : style2.width) ?? defaultWidth, elementHeight = (style2 == null ? void 0 : style2.height) ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset = offsetScale * viewScale, x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset, y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset, width = viewWidth + offset * 2, height = viewHeight + offset * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = useRef(0), minimapInstance = useRef();
+  const store = useStoreApi(), svg = useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1$1, shallow), elementWidth = (style2 == null ? void 0 : style2.width) ?? defaultWidth, elementHeight = (style2 == null ? void 0 : style2.height) ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset = offsetScale * viewScale, x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset, y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset, width = viewWidth + offset * 2, height = viewHeight + offset * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = useRef(0), minimapInstance = useRef();
   viewScaleRef.current = viewScale, useEffect(() => {
     if (svg.current && panZoom)
       return minimapInstance.current = XYMinimap({
@@ -5840,25 +5839,25 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
 }
 memo(ResizeControl);
 function r(e) {
-  var t, f, n = "";
+  var t2, f, n = "";
   if (typeof e == "string" || typeof e == "number")
     n += e;
   else if (typeof e == "object")
     if (Array.isArray(e)) {
       var o = e.length;
-      for (t = 0; t < o; t++)
-        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+      for (t2 = 0; t2 < o; t2++)
+        e[t2] && (f = r(e[t2])) && (n && (n += " "), n += f);
     } else
       for (f in e)
         e[f] && (n && (n += " "), n += f);
   return n;
 }
 function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
-    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  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;
 }
-var keepAspectRatioContainer = "_2h8g8h0", cssReactFlow = "_2h8g8h1", cssDisablePan = "_2h8g8h2", cssTransparentBg = "_2h8g8h3", cssNoControls = "_2h8g8h4";
+var rootClassName = "likec4-diagram-root", keepAspectRatioContainer = "_2h8g8h0", cssReactFlow = "_2h8g8h1", cssDisablePan = "_2h8g8h2", cssTransparentBg = "_2h8g8h3", cssNoControls = "_2h8g8h4";
 function KeepAspectRatioContainer({
   children: children2,
   width,
@@ -5876,7 +5875,7 @@ function KeepAspectRatioContainer({
       style: enabled ? {
         ...style2,
         aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-        maxHeight: Math.ceil(height)
+        maxHeight: `var(--likec4-view-max-height, ${Math.ceil(height)}px)`
       } : style2,
       children: children2
     }
@@ -5995,8 +5994,8 @@ class IndexedMap {
     if (i === void 0)
       return;
     this.index[key.id()] = void 0;
-    const pair = this.array[i], last = this.array.pop();
-    return pair !== last && (this.array[i] = last, this.index[last.first.id()] = i), pair;
+    const pair = this.array[i], last2 = this.array.pop();
+    return pair !== last2 && (this.array[i] = last2, this.index[last2.first.id()] = i), pair;
   }
   /**
    * Create a copy of this associative array.
@@ -6017,10 +6016,10 @@ class Pair {
    * @param first The first item of the pair.
    * @param second The second item of the pair.
    */
-  constructor(first, second) {
+  constructor(first2, second) {
     __publicField(this, "first");
     __publicField(this, "second");
-    this.first = first, this.second = second;
+    this.first = first2, this.second = second;
   }
   /**
    * Create a copy of the pair.
@@ -6434,7 +6433,7 @@ class Solver {
    * @return {Constraint[]}
    */
   getConstraints() {
-    return this._cnMap.array.map(({ first }) => first);
+    return this._cnMap.array.map(({ first: first2 }) => first2);
   }
   /**
    * Add an edit variable to the solver.
@@ -6771,7 +6770,7 @@ class Solver {
    * @private
    */
   _getMarkerLeavingSymbol(marker) {
-    let dmax = Number.MAX_VALUE, r1 = dmax, r2 = dmax, invalid = INVALID_SYMBOL, first = invalid, second = invalid, third = invalid, rows = this._rowMap;
+    let dmax = Number.MAX_VALUE, r1 = dmax, r2 = dmax, invalid = INVALID_SYMBOL, first2 = invalid, second = invalid, third = invalid, rows = this._rowMap;
     for (let i = 0, n = rows.size(); i < n; ++i) {
       let pair = rows.itemAt(i), row = pair.second, c = row.coefficientFor(marker);
       if (c === 0)
@@ -6781,13 +6780,13 @@ class Solver {
         third = symbol;
       else if (c < 0) {
         let r3 = -row.constant() / c;
-        r3 < r1 && (r1 = r3, first = symbol);
+        r3 < r1 && (r1 = r3, first2 = symbol);
       } else {
         let r3 = row.constant() / c;
         r3 < r2 && (r2 = r3, second = symbol);
       }
     }
-    return first !== invalid ? first : second !== invalid ? second : third;
+    return first2 !== invalid ? first2 : second !== invalid ? second : third;
   }
   /**
    * Remove the effects of a constraint on the objective function.
@@ -7220,15 +7219,18 @@ const ZIndexes = {
   Compound: 1,
   Edge: 2,
   Element: 3
-}, MinZoom = 0.05, DEFAULT_PROPS = {
+}, 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,
@@ -7241,7 +7243,7 @@ const ZIndexes = {
   onCanvasDblClick: null
 }, noReplace = !1;
 let storeDevId = 1;
-const containsWithId = (arr, id2) => arr.some((x) => x.id === id2);
+const EmptyStringSet = new StringSet();
 function createDiagramStore(props) {
   return createWithEqualityFn(
     subscribeWithSelector(
@@ -7249,39 +7251,76 @@ function createDiagramStore(props) {
         (set2, get2) => ({
           ...DEFAULT_PROPS,
           ...props,
-          updateView: (view) => {
+          isDynamicView: () => {
+            var _a;
+            return ((_a = get2().view) == null ? void 0 : _a.__) === "dynamic";
+          },
+          updateView: (nextView) => {
             let {
-              view: currentView,
+              dimmed: dimmed2,
+              xyflowSynced,
+              view: current,
               lastOnNavigate,
               previousViews,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
+              activeDynamicViewStep,
               hoveredEdgeId,
               hoveredNodeId
             } = get2();
-            if (shallowEqual(currentView, view)) {
-              DEV && console.debug("store: skip updateView");
+            if (shallowEqual(current, nextView)) {
+              xyflowSynced || set2({ xyflowSynced: !0 }, noReplace, "updateView: xyflow synced"), DEV && console.debug("store: skip updateView");
               return;
             }
-            lastOnNavigate && lastOnNavigate.toView !== view.id && lastOnNavigate.fromView !== view.id && (lastOnNavigate = null), currentView.id === view.id ? (lastClickedNodeId && !containsWithId(view.nodes, lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !containsWithId(view.nodes, focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId) && (hoveredEdgeId = null)) : (lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, previousViews = [
-              currentView,
-              ...previousViews.filter((v) => v.id !== view.id && v.id !== currentView.id)
-            ]), set2(
+            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,
+                view: nextView,
+                activeDynamicViewStep,
+                xyflowSynced,
                 lastOnNavigate,
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
-                hoveredNodeId
+                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");
           },
@@ -7294,66 +7333,103 @@ function createDiagramStore(props) {
           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;
-            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map();
+            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) {
-              if (change.op === "change-shape") {
-                for (const target of change.targets)
-                  newShapes.set(target, change.shape);
-                continue;
-              }
-              if (change.op === "change-color") {
-                for (const target of change.targets)
-                  newColor.set(target, change.color);
-                continue;
-              }
-              nonexhaustive(change);
+              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) => {
-                let { data } = node;
-                const shape = newShapes.get(data.fqn);
-                shape && shape !== data.element.shape && (node = {
-                  ...node,
-                  data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      shape
-                    }
+                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
                   }
-                }, data = node.data);
-                const color2 = newColor.get(data.fqn);
-                return color2 && color2 !== data.element.color && (node = {
+                }), element2 === node.data.element ? node : {
                   ...node,
                   data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      color: color2
-                    }
+                    ...node.data,
+                    element: element2
                   }
-                }), node;
+                };
               })
             ), (_b = (_a = get2()).onChange) == null || _b.call(_a, { changes });
           },
           triggerOnNavigateTo: (xynodeId, event) => {
             var _a, _b;
-            const { xyflow, view } = get2(), xynode = xyflow.getInternalNode(xynodeId), element = xynode == null ? void 0 : xynode.data.element;
-            invariant(!!xynode && (element == null ? void 0 : element.navigateTo), `node is not navigable: ${xynodeId}`);
+            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: element.navigateTo,
-                  element,
+                  toView: element2.navigateTo,
+                  element: element2,
                   elementCenterScreenPosition: xyflow.flowToScreenPosition({
                     x: xynode.internals.positionAbsolute.x + dimensions.width / 2,
                     y: xynode.internals.positionAbsolute.y + dimensions.height / 2
@@ -7365,22 +7441,72 @@ function createDiagramStore(props) {
               "triggerOnNavigateTo"
             ), (_b = (_a = get2()).onNavigateTo) == null || _b.call(
               _a,
-              element.navigateTo,
+              element2.navigateTo,
               event,
-              element,
+              element2,
               xynode.internals.userNode
             );
           },
-          fitDiagram: (centerNode) => {
-            const { fitViewPadding, xyflow, focusedNodeId } = get2();
+          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({
-              includeHiddenNodes: !0,
-              duration: centerNode && focusedNodeId ? 300 : 400,
-              padding: centerNode ? 0 : fitViewPadding,
+              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,
-              ...centerNode && { nodes: [centerNode] }
-            }), centerNode && focusedNodeId !== centerNode.id && set2({ focusedNodeId: centerNode.id }, noReplace, "focus node"), !centerNode && focusedNodeId && set2({ focusedNodeId: null }, noReplace, "unfocus");
+              minZoom: MinZoom,
+              padding: fitViewPadding
+            });
           }
         }),
         {
@@ -7399,211 +7525,966 @@ function DiagramContextProvider({ children: children2, view, ...props }) {
     xyflow,
     view,
     ...props
-  })), useUpdateEffect(
-    () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.setState({ xyflow }, !1, "update xyflow");
-    },
-    [xyflow],
-    Object.is
-  ), useUpdateEffect(
+  })), useEffect(
     () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.getState().updateView(view);
+      var _a, _b;
+      ((_a = store.current) == null ? void 0 : _a.getState().xyflow) !== xyflow && ((_b = store.current) == null || _b.setState({ xyflow }, !1, "update xyflow"));
     },
-    [view]
+    [xyflow]
   ), useUpdateEffect(
     () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.setState(props, !1, "update incoming props");
+      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");
     },
-    [props]
+    [view, props]
   ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
 }
-const {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements, themedColors = [
-  { key: "primary", value: primary.fill },
-  { key: "secondary", value: secondary.fill },
-  { key: "muted", value: muted.fill }
-], colors = keys.strict(otherColors).map((key) => ({
-  key,
-  value: defaultTheme.elements[key].fill
-}));
-function NodeOptions({ selectedNodeIds }) {
-  const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
-  if (!hasAtLeast(nodes, 1))
-    return null;
-  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes;
-  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 ]" }) }),
-    showShapeOption && /* @__PURE__ */ jsx(
-      ShapeOption,
+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;
+    }
+    if (order < 4) {
+      let mt2 = mt * mt, t22 = t2 * t2, a, b, c, d = 0;
+      order === 2 ? (p = [p[0], p[1], p[2], ZERO], a = mt2, b = mt * t2 * 2, c = t22) : order === 3 && (a = mt2 * mt, b = mt2 * t2 * 3, c = mt * t22 * 3, d = t2 * t22);
+      const ret = {
+        x: a * p[0].x + b * p[1].x + c * p[2].x + d * p[3].x,
+        y: a * p[0].y + b * p[1].y + c * p[2].y + d * p[3].y,
+        t: t2
+      };
+      return _3d && (ret.z = a * p[0].z + b * p[1].z + c * p[2].z + d * p[3].z), ret;
+    }
+    const dCpts = JSON.parse(JSON.stringify(points));
+    for (; dCpts.length > 1; ) {
+      for (let i = 0; i < dCpts.length - 1; i++)
+        dCpts[i] = {
+          x: dCpts[i].x + (dCpts[i + 1].x - dCpts[i].x) * t2,
+          y: dCpts[i].y + (dCpts[i + 1].y - dCpts[i].y) * t2
+        }, typeof dCpts[i].z < "u" && (dCpts[i].z = dCpts[i].z + (dCpts[i + 1].z - dCpts[i].z) * t2);
+      dCpts.splice(dCpts.length - 1, 1);
+    }
+    return dCpts[0].t = t2, dCpts[0];
+  },
+  computeWithRatios: function(t2, points, ratios, _3d) {
+    const mt = 1 - t2, r2 = ratios, p = points;
+    let f1 = r2[0], f2 = r2[1], f3 = r2[2], f4 = r2[3], d;
+    if (f1 *= mt, f2 *= t2, p.length === 2)
+      return d = f1 + f2, {
+        x: (f1 * p[0].x + f2 * p[1].x) / d,
+        y: (f1 * p[0].y + f2 * p[1].y) / d,
+        z: _3d ? (f1 * p[0].z + f2 * p[1].z) / d : !1,
+        t: t2
+      };
+    if (f1 *= mt, f2 *= 2 * mt, f3 *= t2 * t2, p.length === 3)
+      return d = f1 + f2 + f3, {
+        x: (f1 * p[0].x + f2 * p[1].x + f3 * p[2].x) / d,
+        y: (f1 * p[0].y + f2 * p[1].y + f3 * p[2].y) / d,
+        z: _3d ? (f1 * p[0].z + f2 * p[1].z + f3 * p[2].z) / d : !1,
+        t: t2
+      };
+    if (f1 *= mt, f2 *= 1.5 * mt, f3 *= 3 * mt, f4 *= t2 * t2 * t2, p.length === 4)
+      return d = f1 + f2 + f3 + f4, {
+        x: (f1 * p[0].x + f2 * p[1].x + f3 * p[2].x + f4 * p[3].x) / d,
+        y: (f1 * p[0].y + f2 * p[1].y + f3 * p[2].y + f4 * p[3].y) / d,
+        z: _3d ? (f1 * p[0].z + f2 * p[1].z + f3 * p[2].z + f4 * p[3].z) / d : !1,
+        t: t2
+      };
+  },
+  derive: function(points, _3d) {
+    const dpoints = [];
+    for (let p = points, d = p.length, c = d - 1; d > 1; d--, c--) {
+      const list = [];
+      for (let j = 0, dpt; j < c; j++)
+        dpt = {
+          x: c * (p[j + 1].x - p[j].x),
+          y: c * (p[j + 1].y - p[j].y)
+        }, _3d && (dpt.z = c * (p[j + 1].z - p[j].z)), list.push(dpt);
+      dpoints.push(list), p = list;
+    }
+    return dpoints;
+  },
+  between: function(v, m, M) {
+    return m <= v && v <= M || utils.approximately(v, m) || utils.approximately(v, M);
+  },
+  approximately: function(a, b, precision) {
+    return abs$1(a - b) <= (precision || epsilon);
+  },
+  length: function(derivativeFn) {
+    const len = utils.Tvalues.length;
+    let sum = 0;
+    for (let i = 0, t2; i < len; i++)
+      t2 = 0.5 * utils.Tvalues[i] + 0.5, sum += utils.Cvalues[i] * utils.arcfn(t2, derivativeFn);
+    return 0.5 * sum;
+  },
+  map: function(v, ds, de, ts, te) {
+    const d1 = de - ds, d2 = te - ts, v2 = v - ds, r2 = v2 / d1;
+    return ts + d2 * r2;
+  },
+  lerp: function(r2, v1, v2) {
+    const ret = {
+      x: v1.x + r2 * (v2.x - v1.x),
+      y: v1.y + r2 * (v2.y - v1.y)
+    };
+    return v1.z !== void 0 && v2.z !== void 0 && (ret.z = v1.z + r2 * (v2.z - v1.z)), ret;
+  },
+  pointToString: function(p) {
+    let s = p.x + "/" + p.y;
+    return typeof p.z < "u" && (s += "/" + p.z), s;
+  },
+  pointsToString: function(points) {
+    return "[" + points.map(utils.pointToString).join(", ") + "]";
+  },
+  copy: function(obj) {
+    return JSON.parse(JSON.stringify(obj));
+  },
+  angle: function(o, v1, v2) {
+    const dx1 = v1.x - o.x, dy1 = v1.y - o.y, dx2 = v2.x - o.x, dy2 = v2.y - o.y, cross = dx1 * dy2 - dy1 * dx2, dot = dx1 * dx2 + dy1 * dy2;
+    return atan2(cross, dot);
+  },
+  // round as string, to avoid rounding errors
+  round: function(v, d) {
+    const s = "" + v, pos = s.indexOf(".");
+    return parseFloat(s.substring(0, pos + 1 + d));
+  },
+  dist: function(p1, p2) {
+    const dx = p1.x - p2.x, dy = p1.y - p2.y;
+    return sqrt$1(dx * dx + dy * dy);
+  },
+  closest: function(LUT, point) {
+    let mdist = pow(2, 63), mpos, d;
+    return LUT.forEach(function(p, idx) {
+      d = utils.dist(point, p), d < mdist && (mdist = d, mpos = idx);
+    }), { mdist, mpos };
+  },
+  abcratio: function(t2, n) {
+    if (n !== 2 && n !== 3)
+      return !1;
+    if (typeof t2 > "u")
+      t2 = 0.5;
+    else if (t2 === 0 || t2 === 1)
+      return t2;
+    const bottom = pow(t2, n) + pow(1 - t2, n), top = bottom - 1;
+    return abs$1(top / bottom);
+  },
+  projectionratio: function(t2, n) {
+    if (n !== 2 && n !== 3)
+      return !1;
+    if (typeof t2 > "u")
+      t2 = 0.5;
+    else if (t2 === 0 || t2 === 1)
+      return t2;
+    const top = pow(1 - t2, n), bottom = pow(t2, n) + top;
+    return top / bottom;
+  },
+  lli8: function(x1, y1, x2, y2, x3, y3, x4, y4) {
+    const nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4), ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4), d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+    return d == 0 ? !1 : { x: nx / d, y: ny / d };
+  },
+  lli4: function(p1, p2, p3, p4) {
+    const x1 = p1.x, y1 = p1.y, x2 = p2.x, y2 = p2.y, x3 = p3.x, y3 = p3.y, x4 = p4.x, y4 = p4.y;
+    return utils.lli8(x1, y1, x2, y2, x3, y3, x4, y4);
+  },
+  lli: function(v1, v2) {
+    return utils.lli4(v1, v1.c, v2, v2.c);
+  },
+  makeline: function(p1, p2) {
+    return new Bezier(
+      p1.x,
+      p1.y,
+      (p1.x + p2.x) / 2,
+      (p1.y + p2.y) / 2,
+      p2.x,
+      p2.y
+    );
+  },
+  findbbox: function(sections) {
+    let mx = nMax, my = nMax, MX = nMin, MY = nMin;
+    return sections.forEach(function(s) {
+      const bbox = s.bbox();
+      mx > bbox.x.min && (mx = bbox.x.min), my > bbox.y.min && (my = bbox.y.min), MX < bbox.x.max && (MX = bbox.x.max), MY < bbox.y.max && (MY = bbox.y.max);
+    }), {
+      x: { min: mx, mid: (mx + MX) / 2, max: MX, size: MX - mx },
+      y: { min: my, mid: (my + MY) / 2, max: MY, size: MY - my }
+    };
+  },
+  shapeintersections: function(s1, bbox1, s2, bbox2, curveIntersectionThreshold) {
+    if (!utils.bboxoverlap(bbox1, bbox2))
+      return [];
+    const intersections = [], a1 = [s1.startcap, s1.forward, s1.back, s1.endcap], a2 = [s2.startcap, s2.forward, s2.back, s2.endcap];
+    return a1.forEach(function(l1) {
+      l1.virtual || a2.forEach(function(l2) {
+        if (l2.virtual)
+          return;
+        const iss = l1.intersects(l2, curveIntersectionThreshold);
+        iss.length > 0 && (iss.c1 = l1, iss.c2 = l2, iss.s1 = s1, iss.s2 = s2, intersections.push(iss));
+      });
+    }), intersections;
+  },
+  makeshape: function(forward, back, curveIntersectionThreshold) {
+    const bpl = back.points.length, fpl = forward.points.length, start2 = utils.makeline(back.points[bpl - 1], forward.points[0]), end = utils.makeline(forward.points[fpl - 1], back.points[0]), shape = {
+      startcap: start2,
+      forward,
+      back,
+      endcap: end,
+      bbox: utils.findbbox([start2, forward, back, end])
+    };
+    return shape.intersections = function(s2) {
+      return utils.shapeintersections(
+        shape,
+        shape.bbox,
+        s2,
+        s2.bbox,
+        curveIntersectionThreshold
+      );
+    }, shape;
+  },
+  getminmax: function(curve2, d, list) {
+    if (!list)
+      return { min: 0, max: 0 };
+    let min2 = nMax, max2 = nMin, t2, c;
+    list.indexOf(0) === -1 && (list = [0].concat(list)), list.indexOf(1) === -1 && list.push(1);
+    for (let i = 0, len = list.length; i < len; i++)
+      t2 = list[i], c = curve2.get(t2), c[d] < min2 && (min2 = c[d]), c[d] > max2 && (max2 = c[d]);
+    return { min: min2, mid: (min2 + max2) / 2, max: max2, size: max2 - min2 };
+  },
+  align: function(points, line2) {
+    const tx = line2.p1.x, ty = line2.p1.y, a = -atan2(line2.p2.y - ty, line2.p2.x - tx), d = function(v) {
+      return {
+        x: (v.x - tx) * cos$1(a) - (v.y - ty) * sin$1(a),
+        y: (v.x - tx) * sin$1(a) + (v.y - ty) * cos$1(a)
+      };
+    };
+    return points.map(d);
+  },
+  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) {
+      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);
+      } else if (b2 !== c2 && d2 === 0)
+        return [(2 * b2 - c2) / (2 * b2 - 2 * c2)].filter(reduce);
+      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);
+      const q3 = sqrt$1(b * b - 4 * a * c), a2 = 2 * a;
+      return [(q3 - b) / a2, (-b - q3) / a2].filter(reduce);
+    }
+    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);
+    } 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);
       {
-        nodes,
-        onShapeChange: (shape) => {
-          const targets = [];
-          for (const nd of nodes)
-            nd.data.element.shape !== shape && targets.push(nd.data.element.id);
-          hasAtLeast(targets, 1) && diagramApi.getState().triggerOnChange([{
-            op: "change-shape",
-            shape,
-            targets
-          }]);
-        }
+        const sd = sqrt$1(discriminant);
+        return u1 = crt(-q2 + sd), v1 = crt(q2 + sd), [u1 - v1 - a / 3].filter(reduce);
       }
-    ),
-    /* @__PURE__ */ jsx(
-      Colors,
-      {
-        nodes,
-        onColorChange: (color2) => {
-          const targets = [];
-          for (const nd of nodes)
-            nd.data.element.color !== color2 && targets.push(nd.data.element.id);
-          hasAtLeast(targets, 1) && diagramApi.getState().triggerOnChange([{
-            op: "change-color",
-            color: color2,
-            targets
-          }]);
-        }
+    }
+  },
+  droots: function(p) {
+    if (p.length === 3) {
+      const a = p[0], b = p[1], c = p[2], d = a - 2 * b + c;
+      if (d !== 0) {
+        const m1 = -sqrt$1(b * b - a * c), m2 = -a + b, v1 = -(m1 + m2) / d, v2 = -(-m1 + m2) / d;
+        return [v1, v2];
+      } else if (b !== c && d === 0)
+        return [(2 * b - c) / (2 * (b - c))];
+      return [];
+    }
+    if (p.length === 2) {
+      const a = p[0], b = p[1];
+      return a !== b ? [a / (a - b)] : [];
+    }
+    return [];
+  },
+  curvature: function(t2, d1, d2, _3d, kOnly) {
+    let num, dnm, adk, dk, k = 0, r2 = 0;
+    const d = utils.compute(t2, d1), dd = utils.compute(t2, d2), qdsum = d.x * d.x + d.y * d.y;
+    if (_3d ? (num = sqrt$1(
+      pow(d.y * dd.z - dd.y * d.z, 2) + pow(d.z * dd.x - dd.z * d.x, 2) + pow(d.x * dd.y - dd.x * d.y, 2)
+    ), dnm = pow(qdsum + d.z * d.z, 3 / 2)) : (num = d.x * dd.y - d.y * dd.x, dnm = pow(qdsum, 3 / 2)), num === 0 || dnm === 0)
+      return { k: 0, r: 0 };
+    if (k = num / dnm, r2 = dnm / num, !kOnly) {
+      const pk = utils.curvature(t2 - 1e-3, d1, d2, _3d, !0).k, nk = utils.curvature(t2 + 1e-3, d1, d2, _3d, !0).k;
+      dk = (nk - k + (k - pk)) / 2, adk = (abs$1(nk - k) + abs$1(k - pk)) / 2;
+    }
+    return { k, r: r2, dk, adk };
+  },
+  inflections: function(points) {
+    if (points.length < 4)
+      return [];
+    const p = utils.align(points, { p1: points[0], p2: points.slice(-1)[0] }), a = p[2].x * p[1].y, b = p[3].x * p[1].y, c = p[1].x * p[2].y, d = p[3].x * p[2].y, v1 = 18 * (-3 * a + 2 * b + 3 * c - d), v2 = 18 * (3 * a - b - 3 * c), v3 = 18 * (c - a);
+    if (utils.approximately(v1, 0)) {
+      if (!utils.approximately(v2, 0)) {
+        let t2 = -v3 / v2;
+        if (0 <= t2 && t2 <= 1)
+          return [t2];
       }
-    ),
-    /* @__PURE__ */ jsx(NavigateToOption, { nodes })
-  ] });
-}
-function Colors({
-  nodes: [firstNode, ...nodes],
-  onColorChange
-}) {
-  let selectedColor = firstNode.data.element.color;
-  takeWhile(nodes, (node) => node.data.element.color !== selectedColor ? (selectedColor = null, !1) : !0);
-  const changeColor = (color2) => () => {
-    selectedColor !== color2 && onColorChange(color2);
-  };
-  return /* @__PURE__ */ jsx(Box, { 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,
-      {
-        label: key,
-        fz: "xs",
-        color: "dark",
-        offset: 2,
-        transitionProps: { duration: 140, transition: "slide-up" },
-        children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: value,
-            size: 20,
-            withShadow: !0,
-            onClick: changeColor(key),
-            style: { color: "#fff", cursor: "pointer" },
-            children: selectedColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(12), height: rem(12) } })
+      return [];
+    }
+    const d2 = 2 * v1;
+    if (utils.approximately(d2, 0))
+      return [];
+    const trm = v2 * v2 - 4 * v1 * v3;
+    if (trm < 0)
+      return [];
+    const sq = Math.sqrt(trm);
+    return [(sq - v2) / d2, -(v2 + sq) / d2].filter(function(r2) {
+      return 0 <= r2 && r2 <= 1;
+    });
+  },
+  bboxoverlap: function(b1, b2) {
+    const dims = ["x", "y"], len = dims.length;
+    for (let i = 0, dim, l, t2, d; i < len; i++)
+      if (dim = dims[i], l = b1[dim].mid, t2 = b2[dim].mid, d = (b1[dim].size + b2[dim].size) / 2, abs$1(l - t2) >= d)
+        return !1;
+    return !0;
+  },
+  expandbox: function(bbox, _bbox) {
+    _bbox.x.min < bbox.x.min && (bbox.x.min = _bbox.x.min), _bbox.y.min < bbox.y.min && (bbox.y.min = _bbox.y.min), _bbox.z && _bbox.z.min < bbox.z.min && (bbox.z.min = _bbox.z.min), _bbox.x.max > bbox.x.max && (bbox.x.max = _bbox.x.max), _bbox.y.max > bbox.y.max && (bbox.y.max = _bbox.y.max), _bbox.z && _bbox.z.max > bbox.z.max && (bbox.z.max = _bbox.z.max), bbox.x.mid = (bbox.x.min + bbox.x.max) / 2, bbox.y.mid = (bbox.y.min + bbox.y.max) / 2, bbox.z && (bbox.z.mid = (bbox.z.min + bbox.z.max) / 2), bbox.x.size = bbox.x.max - bbox.x.min, bbox.y.size = bbox.y.max - bbox.y.min, bbox.z && (bbox.z.size = bbox.z.max - bbox.z.min);
+  },
+  pairiteration: function(c1, c2, curveIntersectionThreshold) {
+    const c1b = c1.bbox(), c2b = c2.bbox(), r2 = 1e5, threshold = curveIntersectionThreshold || 0.5;
+    if (c1b.x.size + c1b.y.size < threshold && c2b.x.size + c2b.y.size < threshold)
+      return [
+        (r2 * (c1._t1 + c1._t2) / 2 | 0) / r2 + "/" + (r2 * (c2._t1 + c2._t2) / 2 | 0) / r2
+      ];
+    let cc1 = c1.split(0.5), cc2 = c2.split(0.5), pairs = [
+      { left: cc1.left, right: cc2.left },
+      { left: cc1.left, right: cc2.right },
+      { left: cc1.right, right: cc2.right },
+      { left: cc1.right, right: cc2.left }
+    ];
+    pairs = pairs.filter(function(pair) {
+      return utils.bboxoverlap(pair.left.bbox(), pair.right.bbox());
+    });
+    let results = [];
+    return pairs.length === 0 || (pairs.forEach(function(pair) {
+      results = results.concat(
+        utils.pairiteration(pair.left, pair.right, threshold)
+      );
+    }), results = results.filter(function(v, i) {
+      return results.indexOf(v) === i;
+    })), results;
+  },
+  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;
+  },
+  numberSort: function(a, b) {
+    return a - b;
+  }
+};
+class PolyBezier {
+  constructor(curves) {
+    this.curves = [], this._3d = !1, curves && (this.curves = curves, this._3d = this.curves[0]._3d);
+  }
+  valueOf() {
+    return this.toString();
+  }
+  toString() {
+    return "[" + this.curves.map(function(curve2) {
+      return utils.pointsToString(curve2.points);
+    }).join(", ") + "]";
+  }
+  addCurve(curve2) {
+    this.curves.push(curve2), this._3d = this._3d || curve2._3d;
+  }
+  length() {
+    return this.curves.map(function(v) {
+      return v.length();
+    }).reduce(function(a, b) {
+      return a + b;
+    });
+  }
+  curve(idx) {
+    return this.curves[idx];
+  }
+  bbox() {
+    const c = this.curves;
+    for (var bbox = c[0].bbox(), i = 1; i < c.length; i++)
+      utils.expandbox(bbox, c[i].bbox());
+    return bbox;
+  }
+  offset(d) {
+    const offset = [];
+    return this.curves.forEach(function(v) {
+      offset.push(...v.offset(d));
+    }), new PolyBezier(offset);
+  }
+}
+const { abs, min, max, cos, sin, acos, sqrt } = Math, pi = Math.PI;
+class Bezier {
+  constructor(coords) {
+    let args = coords && coords.forEach ? coords : Array.from(arguments).slice(), coordlen = !1;
+    if (typeof args[0] == "object") {
+      coordlen = args.length;
+      const newargs = [];
+      args.forEach(function(point2) {
+        ["x", "y", "z"].forEach(function(d) {
+          typeof point2[d] < "u" && newargs.push(point2[d]);
+        });
+      }), args = newargs;
+    }
+    let higher = !1;
+    const len = args.length;
+    if (coordlen) {
+      if (coordlen > 4) {
+        if (arguments.length !== 1)
+          throw new Error(
+            "Only new Bezier(point[]) is accepted for 4th and higher order curves"
+          );
+        higher = !0;
+      }
+    } else if (len !== 6 && len !== 8 && len !== 9 && len !== 12 && arguments.length !== 1)
+      throw new Error(
+        "Only new Bezier(point[]) is accepted for 4th and higher order curves"
+      );
+    const _3d = this._3d = !higher && (len === 9 || len === 12) || coords && coords[0] && typeof coords[0].z < "u", points = this.points = [];
+    for (let idx = 0, step = _3d ? 3 : 2; idx < len; idx += step) {
+      var point = {
+        x: args[idx],
+        y: args[idx + 1]
+      };
+      _3d && (point.z = args[idx + 2]), points.push(point);
+    }
+    const order = this.order = points.length - 1, dims = this.dims = ["x", "y"];
+    _3d && dims.push("z"), this.dimlen = dims.length;
+    const aligned = utils.align(points, { p1: points[0], p2: points[order] }), baselength = utils.dist(points[0], points[order]);
+    this._linear = aligned.reduce((t2, p) => t2 + abs(p.y), 0) < baselength / 50, this._lut = [], this._t1 = 0, this._t2 = 1, this.update();
+  }
+  static quadraticFromPoints(p1, p2, p3, t2) {
+    if (typeof t2 > "u" && (t2 = 0.5), t2 === 0)
+      return new Bezier(p2, p2, p3);
+    if (t2 === 1)
+      return new Bezier(p1, p2, p2);
+    const abc = Bezier.getABC(2, p1, p2, p3, t2);
+    return new Bezier(p1, abc.A, p3);
+  }
+  static cubicFromPoints(S, B, E, t2, d1) {
+    typeof t2 > "u" && (t2 = 0.5);
+    const abc = Bezier.getABC(3, S, B, E, t2);
+    typeof d1 > "u" && (d1 = utils.dist(B, abc.C));
+    const d2 = d1 * (1 - t2) / t2, selen = utils.dist(S, E), lx = (E.x - S.x) / selen, ly = (E.y - S.y) / selen, bx1 = d1 * lx, by1 = d1 * ly, bx2 = d2 * lx, by2 = d2 * ly, e1 = { x: B.x - bx1, y: B.y - by1 }, e2 = { x: B.x + bx2, y: B.y + by2 }, A = abc.A, v1 = { x: A.x + (e1.x - A.x) / (1 - t2), y: A.y + (e1.y - A.y) / (1 - t2) }, v2 = { x: A.x + (e2.x - A.x) / t2, y: A.y + (e2.y - A.y) / t2 }, nc1 = { x: S.x + (v1.x - S.x) / t2, y: S.y + (v1.y - S.y) / t2 }, nc2 = {
+      x: E.x + (v2.x - E.x) / (1 - t2),
+      y: E.y + (v2.y - E.y) / (1 - t2)
+    };
+    return new Bezier(S, nc1, nc2, E);
+  }
+  static getUtils() {
+    return utils;
+  }
+  getUtils() {
+    return Bezier.getUtils();
+  }
+  static get PolyBezier() {
+    return PolyBezier;
+  }
+  valueOf() {
+    return this.toString();
+  }
+  toString() {
+    return utils.pointsToString(this.points);
+  }
+  toSVG() {
+    if (this._3d)
+      return !1;
+    const p = this.points, x = p[0].x, y = p[0].y, s = ["M", x, y, this.order === 2 ? "Q" : "C"];
+    for (let i = 1, last2 = p.length; i < last2; i++)
+      s.push(p[i].x), s.push(p[i].y);
+    return s.join(" ");
+  }
+  setRatios(ratios) {
+    if (ratios.length !== this.points.length)
+      throw new Error("incorrect number of ratio values");
+    this.ratios = ratios, this._lut = [];
+  }
+  verify() {
+    const print = this.coordDigest();
+    print !== this._print && (this._print = print, this.update());
+  }
+  coordDigest() {
+    return this.points.map(function(c, pos) {
+      return "" + pos + c.x + c.y + (c.z ? c.z : 0);
+    }).join("");
+  }
+  update() {
+    this._lut = [], this.dpoints = utils.derive(this.points, this._3d), this.computedirection();
+  }
+  computedirection() {
+    const points = this.points, angle = utils.angle(points[0], points[this.order], points[1]);
+    this.clockwise = angle > 0;
+  }
+  length() {
+    return utils.length(this.derivative.bind(this));
+  }
+  static getABC(order = 2, S, B, E, t2 = 0.5) {
+    const u = utils.projectionratio(t2, order), um = 1 - u, C = {
+      x: u * S.x + um * E.x,
+      y: u * S.y + um * E.y
+    }, s = utils.abcratio(t2, order);
+    return { A: {
+      x: B.x + (B.x - C.x) / s,
+      y: B.y + (B.y - C.y) / s
+    }, B, C, S, E };
+  }
+  getABC(t2, B) {
+    B = B || this.get(t2);
+    let S = this.points[0], E = this.points[this.order];
+    return Bezier.getABC(this.order, S, B, E, t2);
+  }
+  getLUT(steps) {
+    if (this.verify(), steps = steps || 100, this._lut.length === steps + 1)
+      return this._lut;
+    this._lut = [], steps++, this._lut = [];
+    for (let i = 0, p, t2; i < steps; i++)
+      t2 = i / (steps - 1), p = this.compute(t2), p.t = t2, this._lut.push(p);
+    return this._lut;
+  }
+  on(point, error) {
+    error = error || 5;
+    const lut = this.getLUT(), hits = [];
+    for (let i = 0, c, t2 = 0; i < lut.length; i++)
+      c = lut[i], utils.dist(c, point) < error && (hits.push(c), t2 += i / lut.length);
+    return hits.length ? t /= hits.length : !1;
+  }
+  project(point) {
+    const LUT = this.getLUT(), l = LUT.length - 1, closest = utils.closest(LUT, point), mpos = closest.mpos, t1 = (mpos - 1) / l, t2 = (mpos + 1) / l, step = 0.1 / l;
+    let mdist = closest.mdist, t3 = t1, ft = t3, p;
+    mdist += 1;
+    for (let d; t3 < t2 + step; t3 += step)
+      p = this.compute(t3), d = utils.dist(point, p), d < mdist && (mdist = d, ft = t3);
+    return ft = ft < 0 ? 0 : ft > 1 ? 1 : ft, p = this.compute(ft), p.t = ft, p.d = mdist, p;
+  }
+  get(t2) {
+    return this.compute(t2);
+  }
+  point(idx) {
+    return this.points[idx];
+  }
+  compute(t2) {
+    return this.ratios ? utils.computeWithRatios(t2, this.points, this.ratios, this._3d) : utils.compute(t2, this.points, this._3d, this.ratios);
+  }
+  raise() {
+    const p = this.points, np = [p[0]], k = p.length;
+    for (let i = 1, pi2, pim; i < k; i++)
+      pi2 = p[i], pim = p[i - 1], np[i] = {
+        x: (k - i) / k * pi2.x + i / k * pim.x,
+        y: (k - i) / k * pi2.y + i / k * pim.y
+      };
+    return np[k] = p[k - 1], new Bezier(np);
+  }
+  derivative(t2) {
+    return utils.compute(t2, this.dpoints[0], this._3d);
+  }
+  dderivative(t2) {
+    return utils.compute(t2, this.dpoints[1], this._3d);
+  }
+  align() {
+    let p = this.points;
+    return new Bezier(utils.align(p, { p1: p[0], p2: p[p.length - 1] }));
+  }
+  curvature(t2) {
+    return utils.curvature(t2, this.dpoints[0], this.dpoints[1], this._3d);
+  }
+  inflections() {
+    return utils.inflections(this.points);
+  }
+  normal(t2) {
+    return this._3d ? this.__normal3(t2) : this.__normal2(t2);
+  }
+  __normal2(t2) {
+    const d = this.derivative(t2), q = sqrt(d.x * d.x + d.y * d.y);
+    return { t: t2, x: -d.y / q, y: d.x / q };
+  }
+  __normal3(t2) {
+    const r1 = this.derivative(t2), r2 = this.derivative(t2 + 0.01), q1 = sqrt(r1.x * r1.x + r1.y * r1.y + r1.z * r1.z), q2 = sqrt(r2.x * r2.x + r2.y * r2.y + r2.z * r2.z);
+    r1.x /= q1, r1.y /= q1, r1.z /= q1, r2.x /= q2, r2.y /= q2, r2.z /= q2;
+    const c = {
+      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;
+    const R = [
+      c.x * c.x,
+      c.x * c.y - c.z,
+      c.x * c.z + c.y,
+      c.x * c.y + c.z,
+      c.y * c.y,
+      c.y * c.z - c.x,
+      c.x * c.z - c.y,
+      c.y * c.z + c.x,
+      c.z * c.z
+    ];
+    return {
+      t: t2,
+      x: R[0] * r1.x + R[1] * r1.y + R[2] * r1.z,
+      y: R[3] * r1.x + R[4] * r1.y + R[5] * r1.z,
+      z: R[6] * r1.x + R[7] * r1.y + R[8] * r1.z
+    };
+  }
+  hull(t2) {
+    let p = this.points, _p = [], q = [], idx = 0;
+    for (q[idx++] = p[0], q[idx++] = p[1], q[idx++] = p[2], this.order === 3 && (q[idx++] = p[3]); p.length > 1; ) {
+      _p = [];
+      for (let i = 0, pt, l = p.length - 1; i < l; i++)
+        pt = utils.lerp(t2, p[i], p[i + 1]), q[idx++] = pt, _p.push(pt);
+      p = _p;
+    }
+    return q;
+  }
+  split(t1, t2) {
+    if (t1 === 0 && t2)
+      return this.split(t2).left;
+    if (t2 === 1)
+      return this.split(t1).right;
+    const q = this.hull(t1), result = {
+      left: this.order === 2 ? new Bezier([q[0], q[3], q[5]]) : new Bezier([q[0], q[4], q[7], q[9]]),
+      right: this.order === 2 ? new Bezier([q[5], q[4], q[2]]) : new Bezier([q[9], q[8], q[6], q[3]]),
+      span: q
+    };
+    return result.left._t1 = utils.map(0, 0, 1, this._t1, this._t2), result.left._t2 = utils.map(t1, 0, 1, this._t1, this._t2), result.right._t1 = utils.map(t1, 0, 1, this._t1, this._t2), result.right._t2 = utils.map(1, 0, 1, this._t1, this._t2), t2 ? (t2 = utils.map(t2, t1, 1, 0, 1), result.right.split(t2).left) : result;
+  }
+  extrema() {
+    const result = {};
+    let roots = [];
+    return this.dims.forEach(
+      (function(dim) {
+        let mfn = function(v) {
+          return v[dim];
+        }, p = this.dpoints[0].map(mfn);
+        result[dim] = utils.droots(p), this.order === 3 && (p = this.dpoints[1].map(mfn), result[dim] = result[dim].concat(utils.droots(p))), result[dim] = result[dim].filter(function(t2) {
+          return t2 >= 0 && t2 <= 1;
+        }), roots = roots.concat(result[dim].sort(utils.numberSort));
+      }).bind(this)
+    ), result.values = roots.sort(utils.numberSort).filter(function(v, idx) {
+      return roots.indexOf(v) === idx;
+    }), result;
+  }
+  bbox() {
+    const extrema = this.extrema(), result = {};
+    return this.dims.forEach(
+      (function(d) {
+        result[d] = utils.getminmax(this, d, extrema[d]);
+      }).bind(this)
+    ), result;
+  }
+  overlaps(curve2) {
+    const lbbox = this.bbox(), tbbox = curve2.bbox();
+    return utils.bboxoverlap(lbbox, tbbox);
+  }
+  offset(t2, d) {
+    if (typeof d < "u") {
+      const c = this.get(t2), n = this.normal(t2), ret = {
+        c,
+        n,
+        x: c.x + n.x * d,
+        y: c.y + n.y * d
+      };
+      return this._3d && (ret.z = c.z + n.z * d), ret;
+    }
+    if (this._linear) {
+      const nv = this.normal(0), coords = this.points.map(function(p) {
+        const ret = {
+          x: p.x + t2 * nv.x,
+          y: p.y + t2 * nv.y
+        };
+        return p.z && nv.z && (ret.z = p.z + t2 * nv.z), ret;
+      });
+      return [new Bezier(coords)];
+    }
+    return this.reduce().map(function(s) {
+      return s._linear ? s.offset(t2)[0] : s.scale(t2);
+    });
+  }
+  simple() {
+    if (this.order === 3) {
+      const a1 = utils.angle(this.points[0], this.points[3], this.points[1]), a2 = utils.angle(this.points[0], this.points[3], this.points[2]);
+      if (a1 > 0 && a2 < 0 || a1 < 0 && a2 > 0)
+        return !1;
+    }
+    const n1 = this.normal(0), n2 = this.normal(1);
+    let s = n1.x * n2.x + n1.y * n2.y;
+    return this._3d && (s += n1.z * n2.z), abs(acos(s)) < pi / 3;
+  }
+  reduce() {
+    let i, t1 = 0, t2 = 0, step = 0.01, segment, pass1 = [], pass2 = [], extrema = this.extrema().values;
+    for (extrema.indexOf(0) === -1 && (extrema = [0].concat(extrema)), extrema.indexOf(1) === -1 && extrema.push(1), t1 = extrema[0], i = 1; i < extrema.length; i++)
+      t2 = extrema[i], segment = this.split(t1, t2), segment._t1 = t1, segment._t2 = t2, pass1.push(segment), t1 = t2;
+    return pass1.forEach(function(p1) {
+      for (t1 = 0, t2 = 0; t2 <= 1; )
+        for (t2 = t1 + step; t2 <= 1 + step; t2 += step)
+          if (segment = p1.split(t1, t2), !segment.simple()) {
+            if (t2 -= step, abs(t1 - t2) < step)
+              return [];
+            segment = p1.split(t1, t2), segment._t1 = utils.map(t1, 0, 1, p1._t1, p1._t2), segment._t2 = utils.map(t2, 0, 1, p1._t1, p1._t2), pass2.push(segment), t1 = t2;
+            break;
           }
-        )
-      },
-      key
-    )) }),
-    /* @__PURE__ */ jsx(Flex, { mt: "sm", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        label: key,
-        fz: "xs",
-        color: "dark",
-        offset: 2,
-        transitionProps: { duration: 140, transition: "slide-up" },
-        children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: value,
-            size: 20,
-            onClick: changeColor(key),
-            style: { color: "#fff", cursor: "pointer" },
-            children: selectedColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(12), height: rem(12) } })
+      t1 < 1 && (segment = p1.split(t1, 1), segment._t1 = utils.map(t1, 0, 1, p1._t1, p1._t2), segment._t2 = p1._t2, pass2.push(segment));
+    }), pass2;
+  }
+  translate(v, d1, d2) {
+    d2 = typeof d2 == "number" ? d2 : d1;
+    const o = this.order;
+    let d = this.points.map((_, i) => (1 - i / o) * d1 + i / o * d2);
+    return new Bezier(
+      this.points.map((p, i) => ({
+        x: p.x + v.x * d[i],
+        y: p.y + v.y * d[i]
+      }))
+    );
+  }
+  scale(d) {
+    const order = this.order;
+    let distanceFn = !1;
+    if (typeof d == "function" && (distanceFn = d), distanceFn && order === 2)
+      return this.raise().scale(distanceFn);
+    const clockwise = this.clockwise, points = this.points;
+    if (this._linear)
+      return this.translate(
+        this.normal(0),
+        distanceFn ? distanceFn(0) : d,
+        distanceFn ? distanceFn(1) : d
+      );
+    const r1 = distanceFn ? distanceFn(0) : d, r2 = distanceFn ? distanceFn(1) : d, v = [this.offset(0, 10), this.offset(1, 10)], np = [], o = utils.lli4(v[0], v[0].c, v[1], v[1].c);
+    if (!o)
+      throw new Error("cannot scale this curve. Try reducing it first.");
+    return [0, 1].forEach(function(t2) {
+      const p = np[t2 * order] = utils.copy(points[t2 * order]);
+      p.x += (t2 ? r2 : r1) * v[t2].n.x, p.y += (t2 ? r2 : r1) * v[t2].n.y;
+    }), distanceFn ? ([0, 1].forEach(function(t2) {
+      if (!(order === 2 && t2)) {
+        var p = points[t2 + 1], ov = {
+          x: p.x - o.x,
+          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] = {
+          x: p.x + rc * ov.x,
+          y: p.y + rc * ov.y
+        };
+      }
+    }), new Bezier(np)) : ([0, 1].forEach((t2) => {
+      if (order === 2 && t2)
+        return;
+      const p = np[t2 * order], d2 = this.derivative(t2), p2 = { x: p.x + d2.x, y: p.y + d2.y };
+      np[t2 + 1] = utils.lli4(p, p2, o, points[t2 + 1]);
+    }), new Bezier(np));
+  }
+  outline(d1, d2, d3, d4) {
+    if (d2 = d2 === void 0 ? d1 : d2, this._linear) {
+      const n = this.normal(0), start2 = this.points[0], end = this.points[this.points.length - 1];
+      let s, mid, e;
+      d3 === void 0 && (d3 = d1, d4 = d2), s = { x: start2.x + n.x * d1, y: start2.y + n.y * d1 }, e = { x: end.x + n.x * d3, y: end.y + n.y * d3 }, mid = { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 };
+      const fline = [s, mid, e];
+      s = { x: start2.x - n.x * d2, y: start2.y - n.y * d2 }, e = { x: end.x - n.x * d4, y: end.y - n.y * d4 }, mid = { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 };
+      const bline = [e, mid, s], ls2 = utils.makeline(bline[2], fline[0]), le2 = utils.makeline(fline[2], bline[0]), segments2 = [ls2, new Bezier(fline), le2, new Bezier(bline)];
+      return new PolyBezier(segments2);
+    }
+    const reduced = this.reduce(), len = reduced.length, fcurves = [];
+    let bcurves = [], p, alen = 0, tlen = this.length();
+    const graduated = typeof d3 < "u" && typeof d4 < "u";
+    function linearDistanceFunction(s, e, tlen2, alen2, slen) {
+      return function(v) {
+        const f1 = alen2 / tlen2, f2 = (alen2 + slen) / tlen2, d = e - s;
+        return utils.map(v, 0, 1, s + f1 * d, s + f2 * d);
+      };
+    }
+    reduced.forEach(function(segment) {
+      const slen = segment.length();
+      graduated ? (fcurves.push(
+        segment.scale(linearDistanceFunction(d1, d3, tlen, alen, slen))
+      ), bcurves.push(
+        segment.scale(linearDistanceFunction(-d2, -d4, tlen, alen, slen))
+      )) : (fcurves.push(segment.scale(d1)), bcurves.push(segment.scale(-d2))), alen += slen;
+    }), bcurves = bcurves.map(function(s) {
+      return p = s.points, p[3] ? s.points = [p[3], p[2], p[1], p[0]] : s.points = [p[2], p[1], p[0]], s;
+    }).reverse();
+    const fs = fcurves[0].points[0], fe = fcurves[len - 1].points[fcurves[len - 1].points.length - 1], bs = bcurves[len - 1].points[bcurves[len - 1].points.length - 1], be = bcurves[0].points[0], ls = utils.makeline(bs, fs), le = utils.makeline(fe, be), segments = [ls].concat(fcurves).concat([le]).concat(bcurves);
+    return new PolyBezier(segments);
+  }
+  outlineshapes(d1, d2, curveIntersectionThreshold) {
+    d2 = d2 || d1;
+    const outline = this.outline(d1, d2).curves, shapes = [];
+    for (let i = 1, len = outline.length; i < len / 2; i++) {
+      const shape = utils.makeshape(
+        outline[i],
+        outline[len - i],
+        curveIntersectionThreshold
+      );
+      shape.startcap.virtual = i > 1, shape.endcap.virtual = i < len / 2 - 1, shapes.push(shape);
+    }
+    return shapes;
+  }
+  intersects(curve2, curveIntersectionThreshold) {
+    return curve2 ? curve2.p1 && curve2.p2 ? this.lineIntersects(curve2) : (curve2 instanceof Bezier && (curve2 = curve2.reduce()), this.curveintersects(
+      this.reduce(),
+      curve2,
+      curveIntersectionThreshold
+    )) : this.selfintersects(curveIntersectionThreshold);
+  }
+  lineIntersects(line2) {
+    const mx = min(line2.p1.x, line2.p2.x), my = min(line2.p1.y, line2.p2.y), MX = max(line2.p1.x, line2.p2.x), MY = max(line2.p1.y, line2.p2.y);
+    return utils.roots(this.points, line2).filter((t2) => {
+      var p = this.get(t2);
+      return utils.between(p.x, mx, MX) && utils.between(p.y, my, MY);
+    });
+  }
+  selfintersects(curveIntersectionThreshold) {
+    const reduced = this.reduce(), len = reduced.length - 2, results = [];
+    for (let i = 0, result, left, right; i < len; i++)
+      left = reduced.slice(i, i + 1), right = reduced.slice(i + 2), result = this.curveintersects(left, right, curveIntersectionThreshold), results.push(...result);
+    return results;
+  }
+  curveintersects(c1, c2, curveIntersectionThreshold) {
+    const pairs = [];
+    c1.forEach(function(l) {
+      c2.forEach(function(r2) {
+        l.overlaps(r2) && pairs.push({ left: l, right: r2 });
+      });
+    });
+    let intersections = [];
+    return pairs.forEach(function(pair) {
+      const result = utils.pairiteration(
+        pair.left,
+        pair.right,
+        curveIntersectionThreshold
+      );
+      result.length > 0 && (intersections = intersections.concat(result));
+    }), intersections;
+  }
+  arcs(errorThreshold) {
+    return errorThreshold = errorThreshold || 0.5, this._iterate(errorThreshold, []);
+  }
+  _error(pc, np1, s, e) {
+    const q = (e - s) / 4, c1 = this.get(s + q), c2 = this.get(e - q), ref = utils.dist(pc, np1), d1 = utils.dist(pc, c1), d2 = utils.dist(pc, c2);
+    return abs(d1 - ref) + abs(d2 - ref);
+  }
+  _iterate(errorThreshold, circles) {
+    let t_s = 0, t_e = 1, safety;
+    do {
+      safety = 0, t_e = 1;
+      let np1 = this.get(t_s), np2, np3, arc, prev_arc, curr_good = !1, prev_good = !1, done, t_m = t_e, prev_e = 1;
+      do
+        if (prev_good = curr_good, prev_arc = arc, t_m = (t_s + t_e) / 2, np2 = this.get(t_m), np3 = this.get(t_e), arc = utils.getccenter(np1, np2, np3), arc.interval = {
+          start: t_s,
+          end: t_e
+        }, curr_good = this._error(arc, np1, t_s, t_e) <= errorThreshold, done = prev_good && !curr_good, done || (prev_e = t_e), curr_good) {
+          if (t_e >= 1) {
+            if (arc.interval.end = prev_e = 1, prev_arc = arc, t_e > 1) {
+              let d = {
+                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));
+            }
+            break;
           }
-        )
-      },
-      key
-    )) })
-  ] }) });
-}
-function ShapeOption({
-  nodes: [firstNode, ...nodes],
-  onShapeChange
-}) {
-  let selectedShape = firstNode.data.element.shape;
-  return takeWhile(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Divider, { label: "shape", labelPosition: "left" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        mt: "xs",
-        size: "xs",
-        variant: "filled",
-        value: selectedShape,
-        placeholder: "[ multiple ]",
-        data: ElementShapes,
-        allowDeselect: !1,
-        checkIconPosition: "right",
-        onChange: (value) => {
-          !value || value === selectedShape || onShapeChange(value);
-        }
-      }
-    )
-  ] });
-}
-function NavigateToOption({
-  nodes: [node, ...nodes]
-}) {
-  const isMultiple = nodes.length >= 1;
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Divider, { label: "navigate to", labelPosition: "left" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        mt: "xs",
-        size: "xs",
-        variant: "filled",
-        value: isMultiple ? null : node.data.element.navigateTo ?? null,
-        disabled: isMultiple,
-        placeholder: isMultiple ? "[ multiple ]" : "select",
-        data: node.data.element.navigateTo ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }] : [],
-        allowDeselect: !0,
-        checkIconPosition: "right"
-      }
-    )
-  ] });
+          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;
+  }
 }
-var panel = "_1lmzt1h0";
-const OptionsPanelMemo = /* @__PURE__ */ memo(function() {
-  const [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: selectedNodes.length > 0 && /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, scale: 0.85 },
-      animate: { opacity: 1, scale: 1 },
-      exit: {
-        opacity: 0,
-        scale: 0.85
-      },
-      transition: { duration: 0.14 },
-      className: clsx("react-flow__panel", panel),
-      style: {
-        transformOrigin: "center right"
-      },
-      children: /* @__PURE__ */ jsx(Card, { shadow: "sm", children: /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
-    }
-  ) });
-}), OptionsPanel2 = OptionsPanelMemo;
 function deriveEdgePoints(bezierSpline) {
   let [start2, ...bezierPoints] = bezierSpline;
   invariant(start2, "start should be defined");
@@ -7611,25 +8492,17 @@ function deriveEdgePoints(bezierSpline) {
     // start
   ];
   for (; hasAtLeast(bezierPoints, 3); ) {
-    const [cp1, cp2, end, ...rest] = bezierPoints, [centerX, centerY] = getBezierEdgeCenter({
-      sourceX: start2[0],
-      sourceY: start2[1],
-      targetX: end[0],
-      targetY: end[1],
-      sourceControlX: cp1[0],
-      sourceControlY: cp1[1],
-      targetControlX: cp2[0],
-      targetControlY: cp2[1]
-    });
-    handles.push(
-      [centerX, centerY]
-    ), bezierPoints = rest, start2 = end;
+    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 nodeZIndex = (node) => node.level + 1;
 function diagramViewToXYFlowData(view, opts) {
-  const editor = {
+  const isDynamicView = view.__ === "dynamic", editor = {
     nodes: [],
     edges: []
   }, nodeLookup = /* @__PURE__ */ new Map(), traverse = view.nodes.reduce(
@@ -7709,10 +8582,11 @@ function diagramViewToXYFlowData(view, opts) {
         controlPoints,
         headPoint: edge.headArrowPoint ?? null,
         tailPoint: edge.tailArrowPoint ?? null,
-        label: edge.labelBBox && edge.label ? {
+        stepNum: isDynamicView ? extractStep(edge.id) : null,
+        label: edge.labelBBox ? {
           bbox: edge.labelBBox,
           // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
-          text: edge.label
+          text: edge.label ?? ""
         } : null
       },
       // markerEnd: {
@@ -7723,126 +8597,162 @@ 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)}`;
 }
-function FitViewOnViewportResize({ diagramApi }) {
+function FitViewOnViewportResize({ diagramApi, xyflowApi }) {
   const dimensions = useXYStore(selectDimensions), prevDimensionsRef = useRef(dimensions);
   return useDebouncedEffect(
     () => {
-      prevDimensionsRef.current !== dimensions && (diagramApi.getState().fitDiagram(), prevDimensionsRef.current = dimensions);
+      const { focusedNodeId, fitDiagram } = diagramApi.getState();
+      focusedNodeId || prevDimensionsRef.current === dimensions || (fitDiagram(xyflowApi), prevDimensionsRef.current = dimensions);
     },
-    [dimensions],
-    150
+    [dimensions, diagramApi, xyflowApi],
+    200,
+    800
   ), null;
 }
-const diagramChangeId = (s) => s.view.id + "_" + s.view.autoLayout + "_" + s.fitViewPadding;
-function FitViewOnDiagramChanges() {
-  const diagramApi = useDiagramStoreApi(), [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged), [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState())), [pendingChangeId, setPending] = useState(processedChangeId), isReady = useNodesInitialized({
-    includeHiddenNodes: !0
-  }), schedulePending = useDebouncedCallback(
-    (pendingChangeId2) => {
-      setPending(pendingChangeId2);
-    },
-    [setPending],
-    75
-  );
-  return useEffect(
-    () => diagramApi.subscribe(
-      (s) => diagramChangeId(s),
-      schedulePending
-    ),
-    [diagramApi, schedulePending]
-  ), useEffect(
-    () => diagramApi.subscribe(
-      (s) => s.viewportChanged,
-      setViewportMoved
-    ),
-    [diagramApi]
-  ), useRafEffect(
-    () => {
-      !isReady || processedChangeId === pendingChangeId || (diagramApi.getState().fitDiagram(), setProcessed(pendingChangeId));
-    },
-    [isReady, processedChangeId, pendingChangeId]
-  ), !viewportMoved && isReady ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
-}
-const selectFitViewFlag = (s) => s.fitViewEnabled, FitViewOnDiagramChange = memo(() => useDiagramState(selectFitViewFlag) ? /* @__PURE__ */ jsx(FitViewOnDiagramChanges, {}) : null);
-function toDomPrecision(v) {
-  return v === null ? 0.01 : Math.round(v * 100) / 100;
+function selector$2({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }) {
+  const viewId = view.id + "_" + view.autoLayout + "_" + s.fitViewPadding, waitCorrection = lastOnNavigate && lastOnNavigate.toView === view.id && lastOnNavigate.positionCorrected === !1, elTo = waitCorrection ? view.nodes.find((n) => n.id === lastOnNavigate.element.id) : void 0;
+  return waitCorrection && elTo ? {
+    viewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection: !0,
+    elFrom: lastOnNavigate.element,
+    elTo
+  } : {
+    viewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection: !1,
+    fromElement: null,
+    toElement: null
+  };
 }
-const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId), SyncWithDiagram = memo(() => {
-  const _xyflow = useXYFlow(), xyflowRef = useRef(_xyflow);
-  xyflowRef.current = _xyflow;
-  const xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
-  return useEffect(() => diagramStoreApi.subscribe(
-    // selector
-    (state) => ({
-      viewId: state.view.id,
-      nodes: state.view.nodes,
-      edges: state.view.edges,
-      draggable: state.nodesDraggable,
-      selectable: state.nodesSelectable
-    }),
-    // listener
-    ({ viewId, nodes, edges, ...opts }) => {
-      const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
-      if (xyflowRef.current.setNodes(
-        (prev) => updates.nodes.map((update) => {
-          const existing = prev.find(isSameNode(update));
-          return existing ? deepEqual(existing.data.element, update.data.element) ? existing : {
-            ...existing,
-            ...update
-          } : update;
-        })
-      ), xyflowRef.current.setEdges(
-        (prev) => updates.edges.map((update) => {
-          const existing = prev.find((e) => e.id === update.id);
-          return existing ? deepEqual(existing.data, update.data) ? existing : {
-            ...existing,
-            ...update
-          } : update;
-        })
-      ), (lastOnNavigate == null ? void 0 : lastOnNavigate.toView) === viewId && lastOnNavigate.positionCorrected !== !0) {
-        const elFrom = lastOnNavigate.element, elTo = nodes.find((n) => n.id === elFrom.id);
-        if (elTo) {
-          const centerFrom = lastOnNavigate.elementCenterScreenPosition;
-          let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              const v = xyflowRef.current.getViewport();
-              nextZoom < v.zoom && (nextZoom = Math.max(nextZoom, v.zoom * 0.5), xyflowRef.current.setViewport({
-                x: v.x,
-                y: v.y,
-                zoom: nextZoom
-              }));
-              const centerTo = xyflowRef.current.flowToScreenPosition({
-                x: elTo.position[0] + elTo.width / 2,
-                y: elTo.position[1] + elTo.height / 2
-              }), diff = {
-                x: toDomPrecision(centerFrom.x - centerTo.x),
-                y: toDomPrecision(centerFrom.y - centerTo.y)
-              };
-              xyflowApi.getState().panBy(diff);
-            });
-          });
-        }
-        diagramStoreApi.setState(
-          {
-            lastOnNavigate: {
-              ...lastOnNavigate,
-              positionCorrected: !0
-            }
-          },
-          !1,
-          "positionCorrected"
-        );
+function FitViewOnDiagramChange() {
+  const xyflowApi = useXYStoreApi(), {
+    viewId: pendingViewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection,
+    elFrom,
+    elTo
+  } = useDiagramState(selector$2), 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
+        }), diff = {
+          x: toDomPrecision(centerFrom.x - centerTo.x),
+          y: toDomPrecision(centerFrom.y - centerTo.y)
+        };
+        xyflowApi.getState().panBy(diff), diagramApi.setState({ lastOnNavigate: null });
+        return;
       }
-    },
-    {
-      equalityFn: shallowEqual
+      processedRef.current = pendingViewId, diagramApi.getState().fitDiagram(xyflowApi);
     }
-  ), [xyflowApi, diagramStoreApi]), null;
-});
+  }, [pendingViewId, xyflowSynced, waitCorrection]), !viewportChanged && xyflowSynced ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { xyflowApi, diagramApi }) : null;
+}
+function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState((s) => s.focusedNodeId), diagramStore = useDiagramStoreApi(), xyflowApi = useXYStoreApi();
+  return useUpdateEffect(() => {
+    if (!focusedNodeId) {
+      xyflowApi.getState().resetSelectedElements();
+      return;
+    }
+    const edgeChanges = [], nodeChanges = [], { edgeLookup, nodeLookup, transform: transform2, triggerNodeChanges, fitView: fitView2, triggerEdgeChanges } = xyflowApi.getState(), fitViewNodes = /* @__PURE__ */ new Set();
+    fitViewNodes.add(nonNullable(nodeLookup.get(focusedNodeId)));
+    for (const [, edge] of edgeLookup)
+      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+        edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !0
+        });
+        const anotherNode = nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source);
+        anotherNode && fitViewNodes.add(anotherNode);
+      } else
+        edge.selected && edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !1
+        });
+    for (const [, node] of nodeLookup)
+      node.selected && node.id !== focusedNodeId && nodeChanges.push({
+        id: node.id,
+        type: "select",
+        selected: !1
+      });
+    nodeChanges.push({
+      id: focusedNodeId,
+      type: "select",
+      selected: !0
+    }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges), fitView2({
+      includeHiddenNodes: !0,
+      duration: 300,
+      padding: 0.1,
+      minZoom: MinZoom,
+      maxZoom: Math.max(1, transform2[2]),
+      nodes: Array.from(fitViewNodes)
+    });
+  }, [diagramStore, xyflowApi, focusedNodeId]), null;
+}
+function SyncWithDiagram() {
+  const xyflowSynced = useDiagramState((s) => s.xyflowSynced), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
+  return useEffect(() => {
+    if (xyflowSynced)
+      return;
+    const {
+      view,
+      nodesDraggable,
+      nodesSelectable,
+      focusedNodeId
+    } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData(view, {
+      draggable: nodesDraggable,
+      selectable: nodesSelectable || focusedNodeId !== null
+    }), {
+      nodeLookup,
+      edgeLookup,
+      setNodes,
+      setEdges
+    } = xyflowApi.getState();
+    setNodes(updates.nodes.map((update) => {
+      var _a;
+      const existing = (_a = nodeLookup.get(update.id)) == null ? void 0 : _a.internals.userNode;
+      return existing && existing.type === update.type && deepEqual(existing.parentId, update.parentId) ? deepEqual(existing.data.element, update.data.element) ? existing : {
+        ...existing,
+        ...update
+      } : update;
+    })), setEdges(updates.edges.map((update) => {
+      const existing = edgeLookup.get(update.id);
+      return existing ? deepEqual(existing.data.edge, update.data.edge) ? existing : {
+        ...existing,
+        ...update
+      } : update;
+    })), diagramStoreApi.setState(
+      {
+        xyflowSynced: !0
+      },
+      !1,
+      "xyflowSynced"
+    );
+  }, [xyflowSynced, xyflowApi, diagramStoreApi]), null;
+}
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);
   return matches ? matches[1] : variable;
@@ -7888,7 +8798,14 @@ function assignInlineVars(varsOrContract, tokens) {
     writable: !1
   }), styles;
 }
-var container$2 = "bexn7q0", edgePathBg = "bexn7q1", fillStrokeCtx = "bexn7q2", cssEdgePath = "bexn7q3", varLabelX = "var(--bexn7q4)", varLabelY = "var(--bexn7q5)", edgeLabel = "bexn7q7", edgeLabelBody = "bexn7q8";
+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]) {
+  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,
@@ -7950,28 +8867,29 @@ function bezierPath(bezierSpline) {
   }
   return invariant(points.length === 0, "all points should be consumed"), path;
 }
-const isSamePoint = (a, b) => Math.abs(a - b) < 2.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 && isSamePoint(prev.sourceX, next.sourceX) && isSamePoint(prev.sourceY, next.sourceY) && isSamePoint(prev.targetX, next.targetX) && isSamePoint(prev.targetY, next.targetY) && deepEqual(prev.data, next.data), RelationshipEdge = /* @__PURE__ */ memo(function({
+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({
   id: id2,
   data,
   selected: _selected,
-  markerEnd: _markerEnd,
   style: style2,
   source,
   target,
   interactionWidth
 }) {
-  var _a, _b, _c;
-  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`), isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position);
-  invariant(data, "data is required");
-  const {
-    edge
-  } = data, color2 = edge.color ?? "gray", isHovered = useDiagramState((s) => s.hoveredEdgeId === id2), line = edge.line ?? "dashed", isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
+  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,
+    isHovered: s.hoveredEdgeId === id2,
+    isDimmed: s.dimmed.has(id2)
+  })), line2 = diagramEdge.line ?? "dashed", 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 (isNotModified)
-    edgePath = bezierPath(edge.points), labelX = ((_a = data.label) == null ? void 0 : _a.bbox.x) ?? 0, labelY = ((_b = data.label) == null ? void 0 : _b.bbox.y) ?? 0;
+  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,
@@ -7982,55 +8900,96 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       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],
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)),
+      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
+    ]);
   }
-  return /* @__PURE__ */ jsxs("g", { className: clsx(container$2), "data-likec4-color": color2, "data-edge-hovered": isHovered, children: [
-    /* @__PURE__ */ jsx("g", { className: clsx(fillStrokeCtx), children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-      "marker",
-      {
-        id: `arrow-${id2}`,
-        viewBox: "0 0 10 8",
-        refX: "0",
-        refY: "4",
-        markerWidth: "5",
-        markerHeight: "5",
-        markerUnits: "strokeWidth",
-        preserveAspectRatio: "xMaxYMid meet",
-        orient: "auto-start-reverse",
-        children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 4 L 0 8 z", stroke: "context-stroke", fill: "context-stroke" })
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      RelationshipPath,
-      {
-        edgePath,
-        interactionWidth: interactionWidth ?? 10,
-        strokeDasharray,
-        markerStart: edge.tailArrow ? marker : void 0,
-        markerEnd: edge.headArrow ? marker : void 0,
-        style: style2
-      }
-    ),
-    data.label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: clsx(container$2, edgeLabel),
-        "data-likec4-color": color2,
-        style: {
-          ...assignInlineVars({
-            [varLabelX]: toDomPrecision(labelX) + "px",
-            [varLabelY]: toDomPrecision(labelY) + "px"
-          }),
-          maxWidth: data.label.bbox.width + 10,
-          zIndex: ((_c = edgeLookup.get(id2)) == null ? void 0 : _c.zIndex) ?? ZIndexes.Edge
-        },
-        mod: {
-          "data-edge-hovered": isHovered
-        },
-        children: /* @__PURE__ */ jsx(Box, { className: edgeLabelBody, children: data.label.text })
-      }
-    ) })
-  ] });
-}, isEqualProps), RelationshipPath = memo(({
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: clsx([
+        container$4,
+        isDimmed && dimmed$2
+      ]),
+      "data-likec4-color": color2,
+      "data-edge-dir": diagramEdge.dir,
+      "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,
+          {
+            edgePath,
+            interactionWidth: interactionWidth ?? 10,
+            strokeDasharray,
+            markerStart: diagramEdge.tailArrow ? marker : void 0,
+            markerEnd: diagramEdge.headArrow ? marker : void 0,
+            style: style2
+          }
+        ),
+        isModified && controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: controlPoint,
+            cx: p[0],
+            cy: p[1],
+            r: 3
+          },
+          i
+        )),
+        (data.label || isStepEdge) && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: clsx([
+              container$4,
+              edgeLabel,
+              isDimmed && dimmed$2
+            ]),
+            "data-likec4-color": color2,
+            style: {
+              ...assignInlineVars({
+                [varLabelX]: Math.floor(labelX) + "px",
+                [varLabelY]: Math.floor(labelY) + "px"
+              }),
+              ...data.label && {
+                maxWidth: data.label.bbox.width + 12
+              },
+              zIndex: ((_c = edgeLookup.get(id2)) == null ? void 0 : _c.zIndex) ?? ZIndexes.Edge
+            },
+            mod: {
+              "data-edge-hovered": isHovered,
+              "data-edge-active": isActive
+            },
+            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 })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}, isEqualProps), RelationshipPath = ({
   edgePath,
   interactionWidth,
   strokeDasharray,
@@ -8069,7 +9028,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       strokeWidth: interactionWidth
     }
   )
-] })), Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+] }), Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "svg",
   {
     ref,
@@ -8122,6 +9081,7 @@ function NavigateToBtn({ xynodeId, className }) {
     {
       className: clsx("nodrag nopan", className),
       radius: "xl",
+      onPointerDownCapture: (e) => e.stopPropagation(),
       onClick: (event) => {
         event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
       },
@@ -8130,27 +9090,29 @@ function NavigateToBtn({ xynodeId, className }) {
     }
   );
 }
-var container$1 = "lbtzdo0", varTransparency = "var(--lbtzdo1)", compoundBody = "lbtzdo2", transparent = "lbtzdo5", title$1 = "lbtzdo6", indicator$1 = "lbtzdoa", navigateBtn = "lbtzdoc";
+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({
   id: id2,
   data: {
-    element
+    element: element2
   }
 }) {
-  const { color: color2, style: style2, depth = 1, ...compound } = element, opacity = style2.opacity ?? 100, { isHovered, hasOnNavigateTo } = useDiagramState((s) => ({
+  const { color: color2, style: style2, depth = 1, ...compound } = element2, opacity = style2.opacity ?? 100, { 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: 98
+    max: 99
   });
   return /* @__PURE__ */ jsxs(
     Box,
     {
       className: clsx(
-        container$1,
+        container$3,
         "likec4-compound-node",
-        opacity < 100 && "likec4-compound-transparent"
+        opacity < 100 && "likec4-compound-transparent",
+        isDimmed && dimmed$1
       ),
       mod: {
         "compound-depth": depth,
@@ -8192,7 +9154,7 @@ const CompoundNodeMemo = /* @__PURE__ */ memo(function({
               Text,
               {
                 component: "div",
-                className: clsx(title$1, "likec4-compound-title"),
+                className: clsx(title$2, "likec4-compound-title"),
                 children: compound.title
               }
             )
@@ -8211,7 +9173,7 @@ const CompoundNodeMemo = /* @__PURE__ */ memo(function({
     }
   );
 });
-var container = "_1b6tkn2", indicator = "_1b6tkn4", fillElementFill = "_1b6tkn5", fillMixStroke = "_1b6tkn7", title = "_1b6tkn8", description = "_1b6tkn9", technology = "_1b6tkna", cssElement = "_1b6tknb", iconMaxH = "var(--_1b6tknc)", elementIcon = "_1b6tknd", cssShapeSvg = "_1b6tkng", cssNavigateBtn = "_1b6tknh";
+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";
 function ElementIcon({
   node,
   paddingY = 32
@@ -8241,9 +9203,9 @@ function ElementIcon({
 }
 var elementLink = "_4ysv0o0", trigger = "_4ysv0o1";
 function ElementLink({
-  element
+  element: element2
 }) {
-  invariant(element.links, "ElementLink: links are required");
+  invariant(element2.links, "ElementLink: links are required");
   const id2 = useId();
   return /* @__PURE__ */ jsx("div", { className: elementLink, "data-likec4-linkid": id2, children: /* @__PURE__ */ jsxs(
     HoverCard,
@@ -8277,10 +9239,28 @@ function ElementLink({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(HoverCardDropdown, { onClick: (e) => e.stopPropagation(), p: "xs", children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
-          /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: clamp$1(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", fz: "13", truncate: "end", children: link }) }),
-          /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Button, { size: "compact-xs", fz: "12", onClick: copy, color: copied ? "teal" : "gray", children: copied ? "Copied" : "Copy" }) })
-        ] }, link)) }) })
+        /* @__PURE__ */ jsx(
+          HoverCardDropdown,
+          {
+            onPointerDownCapture: (e) => e.stopPropagation(),
+            onClick: (e) => e.stopPropagation(),
+            p: "xs",
+            children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element2.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
+              /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: clamp$1(element2.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", fz: "13", truncate: "end", 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)) })
+          }
+        )
       ]
     }
   ) });
@@ -8448,6 +9428,13 @@ const selectedScale = 1.015, variants = {
       delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
     }
   }),
+  // dimmed: {
+  //   filter: 'brightness(0.5)',
+  //   transition: {
+  //     duration: 0.8,
+  //     ease: 'easeInOut',
+  //   }
+  // },
   // dragging: {
   //   scale: selectedScale
   // },
@@ -8478,19 +9465,20 @@ const selectedScale = 1.015, variants = {
 function ElementNode({
   id: id2,
   data: {
-    element
+    element: element$1
   },
   dragging,
   selected: selected2 = !1,
   width,
   height
 }) {
-  const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s) => ({
+  const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id2,
+    isDimmed: s.dimmed.has(id2),
     isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
     hasOnNavigateTo: !!s.onNavigateTo
-  })), isNavigable = hasOnNavigateTo && !!element.navigateTo, w = toDomPrecision(width ?? element.width), h = toDomPrecision(height ?? element.height);
+  })), isNavigable = hasOnNavigateTo && !!element$1.navigateTo, w = toDomPrecision(width ?? element$1.width), h = toDomPrecision(height ?? element$1.height);
   let animate = "idle";
   switch (!0) {
     case (dragging && selected2):
@@ -8510,9 +9498,13 @@ function ElementNode({
     motion.div,
     {
       id: id2,
-      className: clsx(container, "likec4-element-node"),
-      "data-likec4-color": element.color,
-      "data-likec4-shape": element.shape,
+      className: clsx([
+        container$2,
+        isDimmed && dimmed,
+        "likec4-element-node"
+      ]),
+      "data-likec4-color": element$1.color,
+      "data-likec4-shape": element$1.shape,
       variants,
       initial: !1,
       animate,
@@ -8531,7 +9523,9 @@ function ElementNode({
         /* @__PURE__ */ jsxs(
           "svg",
           {
-            className: cssShapeSvg,
+            className: clsx(
+              cssShapeSvg
+            ),
             viewBox: `0 0 ${w} ${h}`,
             width: w,
             height: h,
@@ -8539,7 +9533,7 @@ function ElementNode({
               /* @__PURE__ */ jsx("g", { className: indicator, children: /* @__PURE__ */ jsx(
                 SelectedIndicator,
                 {
-                  shape: element.shape,
+                  shape: element$1.shape,
                   w,
                   h
                 }
@@ -8547,7 +9541,7 @@ function ElementNode({
               /* @__PURE__ */ jsx(
                 ElementShapeSvg,
                 {
-                  shape: element.shape,
+                  shape: element$1.shape,
                   w,
                   h
                 }
@@ -8555,30 +9549,30 @@ function ElementNode({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: clsx(cssElement, "likec4-element"), children: [
-          element.icon && /* @__PURE__ */ jsx(ElementIcon, { node: element }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(element, "likec4-element"), children: [
+          element$1.icon && /* @__PURE__ */ jsx(ElementIcon, { node: element$1 }),
           /* @__PURE__ */ jsx(
             Text,
             {
               component: "div",
-              className: clsx(title, "likec4-element-title"),
-              children: element.title
+              className: clsx(title$1, "likec4-element-title"),
+              children: element$1.title
             }
           ),
-          element.technology && /* @__PURE__ */ jsx(
+          element$1.technology && /* @__PURE__ */ jsx(
             Text,
             {
               component: "div",
               className: clsx(technology, "likec4-element-technology"),
-              children: element.technology
+              children: element$1.technology
             }
           ),
-          element.description && /* @__PURE__ */ jsx(
+          element$1.description && /* @__PURE__ */ jsx(
             Text,
             {
               component: "div",
-              className: clsx(description, "likec4-element-description"),
-              children: element.description
+              className: clsx(description$1, "likec4-element-description"),
+              children: element$1.description
             }
           )
         ] }),
@@ -8590,7 +9584,7 @@ function ElementNode({
             style: { visibility: "hidden" }
           }
         ),
-        isHovercards && element.links && /* @__PURE__ */ jsx(ElementLink, { element }),
+        isHovercards && element$1.links && /* @__PURE__ */ jsx(ElementLink, { element: element$1 }),
         isNavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: cssNavigateBtn })
       ]
     }
@@ -8608,39 +9602,31 @@ function literalToEnum(value) {
       nonexhaustive(value);
   }
 }
-const XYFlowBackground = memo(({ background }) => {
+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 });
-}, deepEqual);
+}
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
     dblclickTimeout.current = void 0;
-  }, 250), !1);
+  }, 250), !1), hoveredNodeFromOnEdgeEnterRef = useRef("");
   return useMemo(() => ({
     onDoubleClick: (event) => {
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
-      const diagramState = diagramApi.getState();
-      if (diagramState.onCanvasDblClick) {
-        diagramState.onCanvasDblClick(event);
-        return;
-      }
-      if (diagramState.fitViewEnabled && diagramState.zoomable) {
-        diagramState.fitDiagram(), event.stopPropagation();
-        return;
-      }
+      const {
+        fitViewEnabled,
+        onCanvasDblClick,
+        resetLastClicked,
+        fitDiagram
+      } = diagramApi.getState();
+      fitViewEnabled && (fitDiagram(xyflowApi), onCanvasDblClick || event.stopPropagation()), resetLastClicked(), onCanvasDblClick == null || onCanvasDblClick(event);
     },
     onPaneClick: (event) => {
-      if (dbclickGuarg())
+      if (dbclickLock())
         return;
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
-      const { focusedNodeId, fitDiagram, onCanvasClick } = diagramApi.getState();
-      if (onCanvasClick) {
-        onCanvasClick(event);
-        return;
-      }
-      focusedNodeId && (fitDiagram(), event.stopPropagation());
+      const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState();
+      focusedNodeId && (fitDiagram(xyflowApi), onCanvasClick || event.stopPropagation()), resetLastClicked(), onCanvasClick == null || onCanvasClick(event);
     },
     onNodeContextMenu: (event, xynode) => {
       var _a, _b;
@@ -8652,7 +9638,7 @@ function useXYFlowEvents() {
     },
     onPaneContextMenu: (event) => {
       var _a, _b;
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
+      diagramApi.getState().resetLastClicked(), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
     },
     onEdgeContextMenu: (event, xyedge) => {
       var _a, _b;
@@ -8663,25 +9649,33 @@ function useXYFlowEvents() {
       });
     },
     onNodeClick: (event, xynode) => {
-      diagramApi.getState().setLastClickedNode(xynode.id);
-      const { focusedNodeId, fitDiagram, onNodeClick } = diagramApi.getState();
-      if (onNodeClick) {
-        onNodeClick({
-          element: xynode.data.element,
-          xynode,
-          event
-        });
-        return;
-      }
-      focusedNodeId && focusedNodeId !== xynode.id && (fitDiagram(xynode), event.stopPropagation());
+      const {
+        focusedNodeId,
+        focusOnNode,
+        onNodeClick,
+        setLastClickedNode
+      } = diagramApi.getState();
+      setLastClickedNode(xynode.id), focusedNodeId && focusedNodeId !== xynode.id && (focusOnNode(xynode.id), onNodeClick || event.stopPropagation()), onNodeClick == null || onNodeClick({
+        element: xynode.data.element,
+        xynode,
+        event
+      });
     },
     onNodeDoubleClick: (event, xynode) => {
-      const { zoomable, fitDiagram, onNodeClick } = diagramApi.getState();
-      onNodeClick || zoomable && (fitDiagram(xynode), event.stopPropagation());
+      const {
+        focusedNodeId,
+        zoomable,
+        fitViewEnabled,
+        fitDiagram,
+        focusOnNode,
+        setLastClickedNode
+      } = diagramApi.getState();
+      setLastClickedNode(xynode.id), (focusedNodeId || zoomable && fitViewEnabled) && (focusedNodeId === xynode.id ? fitDiagram(xyflowApi) : focusOnNode(xynode.id), event.stopPropagation());
     },
     onEdgeClick: (event, xyedge) => {
-      var _a, _b;
-      diagramApi.getState().setLastClickedEdge(xyedge.id), (_b = (_a = diagramApi.getState()).onEdgeClick) == null || _b.call(_a, {
+      diagramApi.getState().setLastClickedEdge(xyedge.id);
+      const { focusedNodeId, focusOnNode, onEdgeClick } = diagramApi.getState();
+      focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target) && (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
         relation: xyedge.data.edge,
         xyedge,
         event
@@ -8692,16 +9686,24 @@ function useXYFlowEvents() {
       viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
     },
     onNodeMouseEnter: (event, xynode) => {
-      diagramApi.getState().setHoveredNode(xynode.id);
+      hoveredNodeFromOnEdgeEnterRef.current = "";
+      const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
+      hoveredNodeId !== xynode.id && setHoveredNode(xynode.id);
     },
     onNodeMouseLeave: (event, xynode) => {
-      diagramApi.getState().setHoveredNode(null);
+      const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
+      hoveredNodeId === xynode.id && setHoveredNode(null);
     },
-    onEdgeMouseEnter: (event, xyedge) => {
-      diagramApi.getState().setHoveredEdge(xyedge.id);
+    onEdgeMouseEnter: (event, { id: id2, source, target }) => {
+      const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState();
+      if (setHoveredEdge(id2), (focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
+        const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source;
+        setHoveredNode(next);
+      }
     },
     onEdgeMouseLeave: (event, xyedge) => {
-      diagramApi.getState().setHoveredEdge(null);
+      const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState();
+      hoveredEdgeId === xyedge.id && setHoveredEdge(null), hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current && (hoveredNodeFromOnEdgeEnterRef.current = "", setHoveredNode(null));
     }
   }), [diagramApi, xyflowApi]);
 }
@@ -8710,8 +9712,8 @@ const nodeTypes = {
   compound: CompoundNodeMemo
 }, edgeTypes = {
   relationship: RelationshipEdge
-}, selector = (s) => ({
-  nodesSelectable: s.nodesSelectable,
+}, selector$1 = (s) => ({
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
@@ -8724,25 +9726,36 @@ const nodeTypes = {
   zoomable: s.zoomable,
   pannable: s.pannable
 });
-function XYFlowWrapper({
+function XYFlow({
   className,
   children: children2,
   defaultNodes,
   defaultEdges,
-  controls,
-  background,
   style: style2
 }) {
-  const diagramApi = useDiagramStoreApi(), {
+  const xyflowApi = useXYStoreApi(), diagramApi = useDiagramStoreApi(), {
     nodesSelectable,
     nodesDraggable,
     fitView: fitView2,
     fitViewPadding,
     pannable,
     zoomable,
-    ...editor
-  } = useDiagramState(selector), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents(), isBgWithPattern = background !== "transparent" && background !== "solid", { colorScheme } = useMantineColorScheme(), colorMode = colorScheme !== "auto" ? colorScheme : void 0;
-  return /* @__PURE__ */ jsxs(
+    hasOnNodeClick,
+    hasOnNavigateTo,
+    hasOnNodeContextMenu,
+    hasOnCanvasContextMenu,
+    hasOnEdgeContextMenu,
+    hasOnEdgeClick
+  } = useDiagramState(selector$1), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents(), { colorScheme } = useMantineColorScheme(), colorMode = colorScheme !== "auto" ? colorScheme : void 0;
+  return useOnViewportChange({
+    onEnd: ({ x, y, zoom: zoom2 }) => {
+      const rounded = {
+        x: Math.round(x),
+        y: Math.round(y)
+      };
+      (x !== rounded.x || y !== rounded.y) && xyflowApi.setState({ transform: [rounded.x, rounded.y, zoom2] });
+    }
+  }), /* @__PURE__ */ jsx(
     index,
     {
       className,
@@ -8773,8 +9786,8 @@ function XYFlowWrapper({
       panOnScroll: pannable,
       panOnDrag: pannable,
       elementsSelectable: nodesSelectable,
-      nodesFocusable: nodesDraggable || nodesSelectable || editor.hasOnNodeClick || editor.hasOnNavigateTo,
-      edgesFocusable: editor.hasOnEdgeClick,
+      nodesFocusable: nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo,
+      edgesFocusable: hasOnEdgeClick,
       ...!nodesSelectable && {
         selectionKeyCode: null
       },
@@ -8800,24 +9813,502 @@ function XYFlowWrapper({
       onInit: () => {
         diagramApi.setState({ initialized: !0 }, !1, "initialized");
       },
-      ...editor.hasOnNodeContextMenu && {
+      ...hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       },
-      ...editor.hasOnEdgeContextMenu && {
+      ...hasOnEdgeContextMenu && {
         onEdgeContextMenu: handlers.onEdgeContextMenu
       },
-      ...editor.hasOnCanvasContextMenu && {
+      ...hasOnCanvasContextMenu && {
         onPaneContextMenu: handlers.onPaneContextMenu
       },
+      children: children2
+    }
+  );
+}
+var container$1 = "_2jkb2y0", buttons = "_2jkb2y1", btn = "_2jkb2y3";
+function DynamicViewWalkthrough() {
+  const {
+    nextDynamicStep,
+    stopDynamicView,
+    activeDynamicViewStep,
+    hasNextSteps
+  } = useDiagramState((s) => ({
+    nextDynamicStep: s.nextDynamicStep,
+    stopDynamicView: s.stopDynamicView,
+    activeDynamicViewStep: s.activeDynamicViewStep,
+    hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
+  })), buttonProps = {
+    className: btn,
+    size: "compact-xl",
+    radius: "xl"
+  }, nextStep = (increment = 1) => (e) => {
+    e.stopPropagation(), nextDynamicStep(increment);
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: clsx("react-flow__panel", container$1),
       children: [
-        isBgWithPattern && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
-        controls && /* @__PURE__ */ jsx(Controls, {}),
-        children2
+        isNullish(activeDynamicViewStep) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...buttonProps,
+            className: clsx(buttons, btn),
+            rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
+            onClick: nextStep(),
+            px: "xl",
+            children: "Start"
+          }
+        ),
+        isNumber(activeDynamicViewStep) && /* @__PURE__ */ jsxs(Button.Group, { className: buttons, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...buttonProps,
+              pl: "lg",
+              disabled: activeDynamicViewStep === 1,
+              onClick: nextStep(-1),
+              children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...buttonProps,
+              px: "sm",
+              onClick: (e) => {
+                e.stopPropagation(), stopDynamicView();
+              },
+              children: /* @__PURE__ */ jsx(IconPlayerStopFilled, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...buttonProps,
+              pr: "lg",
+              disabled: !hasNextSteps,
+              onClick: nextStep(),
+              children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
+            }
+          )
+        ] })
       ]
     }
   );
 }
-const XYFlow = memo(XYFlowWrapper);
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements, themedColors = [
+  { key: "primary", value: primary.fill },
+  { key: "secondary", value: secondary.fill },
+  { key: "muted", value: muted.fill }
+], colors = keys.strict(otherColors).map((key) => ({
+  key,
+  value: defaultTheme.elements[key].fill
+}));
+function NodeOptions({ selectedNodeIds }) {
+  const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
+  if (!hasAtLeast(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([{
+      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 ]" }) }),
+    showShapeOption && /* @__PURE__ */ jsx(
+      ShapeOption,
+      {
+        nodes,
+        onShapeChange: (shape) => {
+          triggerChange({ shape });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Colors,
+      {
+        nodes,
+        onColorChange: (color2) => {
+          triggerChange({ color: color2 });
+        }
+      }
+    ),
+    showOpacityOption && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Divider, { label: "opacity and border", labelPosition: "left" }),
+      /* @__PURE__ */ jsx(
+        OpacityOption,
+        {
+          node: firstNode,
+          onOpacityChange: (opacity) => {
+            triggerChange({ opacity });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BorderStyleOption,
+        {
+          node: firstNode,
+          onChange: (border) => {
+            triggerChange({ border });
+          }
+        }
+      )
+    ] }, firstNode.id),
+    /* @__PURE__ */ jsx(NavigateToOption, { nodes })
+  ] });
+}
+function Colors({
+  nodes: [firstNode, ...nodes],
+  onColorChange
+}) {
+  let selectedColor = firstNode.data.element.color;
+  takeWhile(nodes, (node) => node.data.element.color !== selectedColor ? (selectedColor = null, !1) : !0);
+  const changeColor = (color2) => () => {
+    selectedColor !== color2 && onColorChange(color2);
+  };
+  return /* @__PURE__ */ jsx(Box, { 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,
+      {
+        label: key,
+        fz: "xs",
+        color: "dark",
+        offset: 2,
+        transitionProps: { duration: 140, transition: "slide-up" },
+        children: /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            color: value,
+            size: 20,
+            withShadow: !0,
+            onClick: changeColor(key),
+            style: { color: "#fff", cursor: "pointer" },
+            children: selectedColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(12), height: rem(12) } })
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsx(Flex, { mt: "sm", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: key,
+        fz: "xs",
+        color: "dark",
+        offset: 2,
+        transitionProps: { duration: 140, transition: "slide-up" },
+        children: /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            color: value,
+            size: 20,
+            onClick: changeColor(key),
+            style: { color: "#fff", cursor: "pointer" },
+            children: selectedColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(12), height: rem(12) } })
+          }
+        )
+      },
+      key
+    )) })
+  ] }) });
+}
+function ShapeOption({
+  nodes: [firstNode, ...nodes],
+  onShapeChange
+}) {
+  let selectedShape = firstNode.data.element.shape;
+  return takeWhile(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Divider, { label: "shape", labelPosition: "left" }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        mt: "xs",
+        size: "xs",
+        variant: "filled",
+        value: selectedShape,
+        placeholder: "[ multiple ]",
+        data: ElementShapes,
+        allowDeselect: !1,
+        checkIconPosition: "right",
+        onChange: (value) => {
+          !value || value === selectedShape || onShapeChange(value);
+        }
+      }
+    )
+  ] });
+}
+function NavigateToOption({
+  nodes: [node, ...nodes]
+}) {
+  const isMultiple = nodes.length >= 1;
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Divider, { label: "navigate to", labelPosition: "left" }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        mt: "xs",
+        size: "xs",
+        variant: "filled",
+        value: isMultiple ? null : node.data.element.navigateTo ?? null,
+        disabled: isMultiple,
+        placeholder: isMultiple ? "[ multiple ]" : "select",
+        data: node.data.element.navigateTo ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }] : [],
+        allowDeselect: !0,
+        checkIconPosition: "right"
+      }
+    )
+  ] });
+}
+function OpacityOption({
+  node,
+  onOpacityChange
+}) {
+  let selectedOpacity = node.data.element.style.opacity ?? 100;
+  const [value, setValue] = useState(selectedOpacity);
+  return useEffect(() => {
+    setValue(selectedOpacity);
+  }, [selectedOpacity]), /* @__PURE__ */ jsx(
+    Slider,
+    {
+      mt: "xs",
+      size: "sm",
+      color: "dark",
+      value,
+      onChange: setValue,
+      onChangeEnd: onOpacityChange
+    }
+  );
+}
+function BorderStyleOption({
+  node,
+  onChange
+}) {
+  let selecteBorderStyle = node.data.element.style.border ?? "dashed";
+  const [value, setValue] = useState(selecteBorderStyle);
+  return useEffect(() => {
+    setValue(selecteBorderStyle);
+  }, [selecteBorderStyle]), /* @__PURE__ */ jsx(Box, { mt: "md", children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fullWidth: !0,
+      withItemsBorders: !1,
+      value,
+      onChange: (v) => {
+        setValue(v), onChange(v);
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  ) });
+}
+var panel = "_1lmzt1h0";
+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,
+    {
+      initial: { opacity: 0, scale: 0.85 },
+      animate: { opacity: 1, scale: 1 },
+      exit: {
+        opacity: 0,
+        scale: 0.85
+      },
+      transition: { duration: 0.14 },
+      className: clsx("react-flow__panel", panel),
+      style: {
+        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
+  ) });
+}
+function XYFlowInner({
+  children: children2,
+  background,
+  controls,
+  showDiagramTitle,
+  enableDynamicViewWalkthrough
+}) {
+  const {
+    isDynamicView: isDynamicView2,
+    isDynamicViewActive,
+    readonly
+  } = useDiagramState((s) => ({
+    isDynamicView: s.isDynamicView(),
+    readonly: s.readonly,
+    isDynamicViewActive: isNonNull(s.activeDynamicViewStep)
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    background !== "transparent" && background !== "solid" && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
+    controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
+    readonly === !1 && /* @__PURE__ */ jsx(OptionsPanel, {}),
+    !isDynamicViewActive && showDiagramTitle === !0 && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
+    isDynamicView2 && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    children2
+  ] });
+}
 function LikeC4Diagram({
   view,
   className,
@@ -8829,8 +10320,10 @@ function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = "dots",
-  controls = !1,
+  controls = !readonly,
   showElementLinks = !0,
+  showDiagramTitle = !0,
+  enableDynamicViewWalkthrough = !0,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -8844,6 +10337,7 @@ function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu
 }) {
+  console.log("LikeC4Diagram");
   const initialRef = useRef();
   if (!initialRef.current) {
     const initial = diagramViewToXYFlowData(view, {
@@ -8862,7 +10356,7 @@ function LikeC4Diagram({
     {
       fitView: fitView2,
       ...initialRef.current,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         DiagramContextProvider,
         {
           view,
@@ -8883,15 +10377,15 @@ function LikeC4Diagram({
           onChange,
           onNavigateTo,
           onCanvasDblClick,
-          children: [
-            /* @__PURE__ */ jsx(
-              KeepAspectRatioContainer,
-              {
-                className: clsx(rootClassName, className),
-                enabled: keepAspectRatio,
-                width: view.width,
-                height: view.height,
-                children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(
+            KeepAspectRatioContainer,
+            {
+              className: clsx(rootClassName, className),
+              enabled: keepAspectRatio,
+              width: view.width,
+              height: view.height,
+              children: [
+                /* @__PURE__ */ jsx(
                   XYFlow,
                   {
                     className: clsx(
@@ -8901,20 +10395,27 @@ function LikeC4Diagram({
                       pannable !== !0 && cssDisablePan,
                       background === "transparent" && cssTransparentBg
                     ),
-                    background,
-                    controls,
                     defaultNodes: initialRef.current.defaultNodes,
                     defaultEdges: initialRef.current.defaultEdges,
-                    children: readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel2, {})
+                    children: /* @__PURE__ */ jsx(
+                      XYFlowInner,
+                      {
+                        showDiagramTitle,
+                        enableDynamicViewWalkthrough,
+                        background,
+                        controls
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(WhenInitialized, { children: [
-              /* @__PURE__ */ jsx(SyncWithDiagram, {}),
-              /* @__PURE__ */ jsx(FitViewOnDiagramChange, {})
-            ] })
-          ]
+                ),
+                /* @__PURE__ */ jsxs(WhenInitialized, { children: [
+                  /* @__PURE__ */ jsx(SyncWithDiagram, {}),
+                  fitView2 && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
+                  fitView2 && zoomable && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
+                ] })
+              ]
+            }
+          )
         }
       )
     }
@@ -8939,6 +10440,8 @@ function StaticLikeC4Diagram({
       controls: !1,
       background,
       showElementLinks: !0,
+      showDiagramTitle: !1,
+      enableDynamicViewWalkthrough: !1,
       nodesSelectable: !1,
       nodesDraggable: !1,
       ...rest