@likec4/diagram 1.0.2 → 1.1.1

package/dist/index.mjs

@@ -2,18 +2,20 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => (__defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value), value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, memo, useState, forwardRef, useCallback, useMemo, useEffect, useRef, useContext, useLayoutEffect, useId } from "react";
+import { createContext, memo, useState, useEffect, useContext, useMemo, forwardRef, useCallback, useRef, useLayoutEffect, useId } from "react";
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { shallow } from "zustand/shallow";
 import { createPortal } from "react-dom";
-import { MantineContext, Box, 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 { Box, MantineContext, Paper, Stack, Group, Text, Spoiler, Button, Anchor, CopyButton, Divider, TooltipGroup, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Slider, SegmentedControl, Card, ActionIcon, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, useMantineColorScheme } from "@mantine/core";
 import { invariant, isAncestor, nonNullable, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
 import { DEV } from "esm-env";
 import { shallowEqual, deepEqual } from "fast-equals";
+import { isNullish, entries, keys, hasAtLeast, takeWhile, clamp as clamp$1, isNumber } from "remeda";
 import { subscribeWithSelector, devtools } from "zustand/middleware";
-import { useFirstMountState, useCustomCompareEffect, useDebouncedState, useRafEffect, useDebouncedEffect } from "@react-hookz/web";
+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";
+import { useLocalStorage } from "@mantine/hooks";
+import { line, curveCatmullRomOpen } from "d3-shape";
 var rootClassName = "likec4-diagram-root";
 function cc(names) {
   if (typeof names == "string" || typeof names == "number")
@@ -874,7 +876,7 @@ function extend(parent, definition) {
     prototype[key] = definition[key];
   return prototype;
 }
-function Color$1() {
+function Color() {
 }
 var darker = 0.7, brighter = 1 / darker, reI = "\\s*([+-]?\\d+)\\s*", reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*", reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*", reHex = /^#([0-9a-f]{3,8})$/, reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`), reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`), reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`), reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`), reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`), reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`), named = {
   aliceblue: 15792383,
@@ -1026,9 +1028,9 @@ var darker = 0.7, brighter = 1 / darker, reI = "\\s*([+-]?\\d+)\\s*", reN = "\\s
   yellow: 16776960,
   yellowgreen: 10145074
 };
-define(Color$1, color, {
-  copy(channels2) {
-    return Object.assign(new this.constructor(), this, channels2);
+define(Color, color, {
+  copy(channels) {
+    return Object.assign(new this.constructor(), this, channels);
   },
   displayable() {
     return this.rgb().displayable();
@@ -1064,7 +1066,7 @@ function rgba(r2, g, b, a) {
   return a <= 0 && (r2 = g = b = NaN), new Rgb(r2, g, b, a);
 }
 function rgbConvert(o) {
-  return o instanceof Color$1 || (o = color(o)), o ? (o = o.rgb(), new Rgb(o.r, o.g, o.b, o.opacity)) : new Rgb();
+  return o instanceof Color || (o = color(o)), o ? (o = o.rgb(), new Rgb(o.r, o.g, o.b, o.opacity)) : new Rgb();
 }
 function rgb(r2, g, b, opacity) {
   return arguments.length === 1 ? rgbConvert(r2) : new Rgb(r2, g, b, opacity ?? 1);
@@ -1072,7 +1074,7 @@ function rgb(r2, g, b, opacity) {
 function Rgb(r2, g, b, opacity) {
   this.r = +r2, this.g = +g, this.b = +b, this.opacity = +opacity;
 }
-define(Rgb, rgb, extend(Color$1, {
+define(Rgb, rgb, extend(Color, {
   brighter(k) {
     return k = k == null ? brighter : Math.pow(brighter, k), new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
   },
@@ -1120,7 +1122,7 @@ function hsla(h, s, l, a) {
 function hslConvert(o) {
   if (o instanceof Hsl)
     return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (o instanceof Color$1 || (o = color(o)), !o)
+  if (o instanceof Color || (o = color(o)), !o)
     return new Hsl();
   if (o instanceof Hsl)
     return o;
@@ -1134,7 +1136,7 @@ function hsl(h, s, l, opacity) {
 function Hsl(h, s, l, opacity) {
   this.h = +h, this.s = +s, this.l = +l, this.opacity = +opacity;
 }
-define(Hsl, hsl, extend(Color$1, {
+define(Hsl, hsl, extend(Color, {
   brighter(k) {
     return k = k == null ? brighter : Math.pow(brighter, k), new Hsl(this.h, this.s, this.l * k, this.opacity);
   },
@@ -1270,7 +1272,7 @@ function interpolateTransform(parse, pxComma, pxParen, degParen) {
   function skewX(a, b, s, q) {
     a !== b ? q.push({ i: s.push(pop(s) + "skewX(", null, degParen) - 2, x: interpolateNumber(a, b) }) : b && s.push(pop(s) + "skewX(" + b + degParen);
   }
-  function scale2(xa, ya, xb, yb, s, q) {
+  function scale(xa, ya, xb, yb, s, q) {
     if (xa !== xb || ya !== yb) {
       var i = s.push(pop(s) + "scale(", null, ",", null, ")");
       q.push({ i: i - 4, x: interpolateNumber(xa, xb) }, { i: i - 2, x: interpolateNumber(ya, yb) });
@@ -1279,7 +1281,7 @@ 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), scale2(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(t) {
       for (var i = -1, n = q.length, o; ++i < n; )
         s[(o = q[i]).i] = o.x(t);
       return s.join("");
@@ -2039,7 +2041,7 @@ function zoom() {
   }, zoom2.scaleTo = function(selection2, k, p, event) {
     zoom2.transform(selection2, function() {
       var e = extent.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p == "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k == "function" ? k.apply(this, arguments) : k;
-      return constrain(translate(scale2(t0, k1), p0, p1), e, translateExtent);
+      return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);
     }, p, event);
   }, zoom2.translateBy = function(selection2, x, y, event) {
     zoom2.transform(selection2, function() {
@@ -2057,7 +2059,7 @@ function zoom() {
       ), e, translateExtent);
     }, p, event);
   };
-  function scale2(transform2, k) {
+  function scale(transform2, k) {
     return k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], k)), k === transform2.k ? transform2 : new Transform(k, transform2.x, transform2.y);
   }
   function translate(transform2, p0, p1) {
@@ -2131,7 +2133,7 @@ function zoom() {
         return;
       g.mouse = [p, t.invert(p)], interrupt(this), g.start();
     }
-    noevent(event), g.wheel = setTimeout(wheelidled, wheelDelay), g.zoom("mouse", constrain(translate(scale2(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
+    noevent(event), g.wheel = setTimeout(wheelidled, wheelDelay), g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
     function wheelidled() {
       g.wheel = null, g.end();
     }
@@ -2154,7 +2156,7 @@ function zoom() {
   }
   function dblclicked(event, ...args) {
     if (filter2.apply(this, arguments)) {
-      var t0 = this.__zoom, p0 = pointer(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale2(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
+      var t0 = this.__zoom, p0 = pointer(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
       noevent(event), duration > 0 ? select(this).transition().duration(duration).call(schedule2, t1, p0, event) : select(this).call(zoom2.transform, t1, p0, event);
     }
   }
@@ -2175,7 +2177,7 @@ function zoom() {
         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) {
         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 = scale2(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];
+        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];
       } else if (g.touch0)
         p = g.touch0[0], l = g.touch0[1];
       else
@@ -3625,10 +3627,10 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
       const { transform: transform2, snapGrid, snapToGrid, nodeOrigin: storeNodeOrigin } = getStoreItems(), pointerPosition = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), childChanges = [];
       if (!node)
         return;
-      const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change2 = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x !== prevX && isWidthChange, isYPosChange = y !== prevY && isHeightChange;
+      const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues, change = {}, nodeOrigin = node.origin ?? storeNodeOrigin, { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent), isWidthChange = width !== prevWidth, isHeightChange = height !== prevHeight, isXPosChange = x !== prevX && isWidthChange, isYPosChange = y !== prevY && isHeightChange;
       if (!isXPosChange && !isYPosChange && !isWidthChange && !isHeightChange)
         return;
-      if ((isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) && (change2.x = isXPosChange ? x : prevValues.x, change2.y = isYPosChange ? y : prevValues.y, prevValues.x = change2.x, prevValues.y = change2.y, parentNode && node.expandParent && (change2.x && change2.x < 0 && (prevValues.x = 0, startValues.x = startValues.x - change2.x), change2.y && change2.y < 0 && (prevValues.y = 0, startValues.y = startValues.y - change2.y)), childNodes.length > 0)) {
+      if ((isXPosChange || isYPosChange || nodeOrigin[0] === 1 || nodeOrigin[1] == 1) && (change.x = isXPosChange ? x : prevValues.x, change.y = isYPosChange ? y : prevValues.y, prevValues.x = change.x, prevValues.y = change.y, parentNode && node.expandParent && (change.x && change.x < 0 && (prevValues.x = 0, startValues.x = startValues.x - change.x), change.y && change.y < 0 && (prevValues.y = 0, startValues.y = startValues.y - change.y)), childNodes.length > 0)) {
         const xChange = x - prevX, yChange = y - prevY;
         for (const childNode of childNodes)
           childNode.position = {
@@ -3636,7 +3638,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             y: childNode.position.y - yChange + nodeOrigin[1] * (height - prevHeight)
           }, childChanges.push(childNode);
       }
-      (isWidthChange || isHeightChange) && (change2.width = isWidthChange ? width : prevValues.width, change2.height = isHeightChange ? height : prevValues.height, prevValues.width = change2.width, prevValues.height = change2.height);
+      (isWidthChange || isHeightChange) && (change.width = isWidthChange ? width : prevValues.width, change.height = isHeightChange ? height : prevValues.height, prevValues.width = change.width, prevValues.height = change.height);
       const direction = getResizeDirection({
         width: prevValues.width,
         prevWidth,
@@ -3645,7 +3647,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         affectsX: controlDirection.affectsX,
         affectsY: controlDirection.affectsY
       }), nextValues = { ...prevValues, direction };
-      (shouldResize == null ? void 0 : shouldResize(event, nextValues)) !== !1 && (onResize == null || onResize(event, nextValues), onChange(change2, childChanges));
+      (shouldResize == null ? void 0 : shouldResize(event, nextValues)) !== !1 && (onResize == null || onResize(event, nextValues), onChange(change, childChanges));
     }).on("end", (event) => {
       onResizeEnd == null || onResizeEnd(event, { ...prevValues }), onEnd == null || onEnd();
     });
@@ -3948,15 +3950,15 @@ const useViewportHelper = () => {
 };
 function applyChanges(changes, elements) {
   const updatedElements = [], changesMap = /* @__PURE__ */ new Map();
-  for (const change2 of changes)
-    if (change2.type === "add") {
-      updatedElements.push(change2.item);
+  for (const change of changes)
+    if (change.type === "add") {
+      updatedElements.push(change.item);
       continue;
-    } else if (change2.type === "remove" || change2.type === "replace")
-      changesMap.set(change2.id, [change2]);
+    } else if (change.type === "remove" || change.type === "replace")
+      changesMap.set(change.id, [change]);
     else {
-      const elementChanges = changesMap.get(change2.id);
-      elementChanges ? elementChanges.push(change2) : changesMap.set(change2.id, [change2]);
+      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);
@@ -3971,24 +3973,24 @@ function applyChanges(changes, elements) {
       continue;
     }
     const updatedElement = { ...element };
-    for (const change2 of changes2)
-      applyChange(change2, updatedElement);
+    for (const change of changes2)
+      applyChange(change, updatedElement);
     updatedElements.push(updatedElement);
   }
   return updatedElements;
 }
-function applyChange(change2, element) {
-  switch (change2.type) {
+function applyChange(change, element) {
+  switch (change.type) {
     case "select": {
-      element.selected = change2.selected;
+      element.selected = change.selected;
       break;
     }
     case "position": {
-      typeof change2.position < "u" && (element.position = change2.position), typeof change2.dragging < "u" && (element.dragging = change2.dragging);
+      typeof change.position < "u" && (element.position = change.position), typeof change.dragging < "u" && (element.dragging = change.dragging);
       break;
     }
     case "dimensions": {
-      typeof change2.dimensions < "u" && (element.measured ?? (element.measured = {}), element.measured.width = change2.dimensions.width, element.measured.height = change2.dimensions.height, change2.setAttributes && (element.width = change2.dimensions.width, element.height = change2.dimensions.height)), typeof change2.resizing == "boolean" && (element.resizing = change2.resizing);
+      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);
       break;
     }
   }
@@ -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,
@@ -5320,13 +5322,13 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
   updateNodePositions: (nodeDragItems, dragging = !1) => {
     const parentExpandChildren = [], changes = [];
     for (const [id2, dragItem] of nodeDragItems) {
-      const change2 = {
+      const change = {
         id: id2,
         type: "position",
         position: dragItem.position,
         dragging
       };
-      dragItem != null && dragItem.expandParent && (dragItem != null && dragItem.parentId) && change2.position && (parentExpandChildren.push({
+      dragItem != null && dragItem.expandParent && (dragItem != null && dragItem.parentId) && change.position && (parentExpandChildren.push({
         id: id2,
         parentId: dragItem.parentId,
         rect: {
@@ -5334,7 +5336,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
           width: dragItem.measured.width,
           height: dragItem.measured.height
         }
-      }), change2.position.x = Math.max(0, change2.position.x), change2.position.y = Math.max(0, change2.position.y)), changes.push(change2);
+      }), change.position.x = Math.max(0, change.position.x), change.position.y = Math.max(0, change.position.y)), changes.push(change);
     }
     if (parentExpandChildren.length > 0) {
       const { nodeLookup, parentLookup } = get2(), parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
@@ -5645,7 +5647,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 +5690,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({
@@ -5751,22 +5753,22 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
             nodeOrigin
           };
         },
-        onChange: (change2, childChanges) => {
-          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState(), changes = [], nextPosition = { x: change2.x, y: change2.y }, node = nodeLookup.get(id2);
+        onChange: (change, childChanges) => {
+          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState(), changes = [], nextPosition = { x: change.x, y: change.y }, node = nodeLookup.get(id2);
           if (node && node.expandParent && node.parentId) {
             const child = {
               id: node.id,
               parentId: node.parentId,
               rect: {
-                width: change2.width ?? node.measured.width,
-                height: change2.height ?? node.measured.height,
+                width: change.width ?? node.measured.width,
+                height: change.height ?? node.measured.height,
                 ...evaluateAbsolutePosition({
-                  x: change2.x ?? node.position.x,
-                  y: change2.y ?? node.position.y
+                  x: change.x ?? node.position.x,
+                  y: change.y ?? node.position.y
                 }, node.parentId, nodeLookup, node.origin ?? nodeOrigin)
               }
             }, parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
-            changes.push(...parentExpandChanges), nextPosition.x = change2.x ? Math.max(0, change2.x) : void 0, nextPosition.y = change2.y ? Math.max(0, change2.y) : void 0;
+            changes.push(...parentExpandChanges), nextPosition.x = change.x ? Math.max(0, change.x) : void 0, nextPosition.y = change.y ? Math.max(0, change.y) : void 0;
           }
           if (nextPosition.x !== void 0 && nextPosition.y !== void 0) {
             const positionChange = {
@@ -5776,15 +5778,15 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
             };
             changes.push(positionChange);
           }
-          if (change2.width !== void 0 && change2.height !== void 0) {
+          if (change.width !== void 0 && change.height !== void 0) {
             const dimensionChange = {
               id: id2,
               type: "dimensions",
               resizing: !0,
               setAttributes: !0,
               dimensions: {
-                width: change2.width,
-                height: change2.height
+                width: change.width,
+                height: change.height
               }
             };
             changes.push(dimensionChange);
@@ -5858,7 +5860,30 @@ function clsx() {
     (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-var cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
+var keepAspectRatioContainer = "_2h8g8h0", cssReactFlow = "_2h8g8h1", cssDisablePan = "_2h8g8h2", cssTransparentBg = "_2h8g8h3", cssNoControls = "_2h8g8h4";
+function KeepAspectRatioContainer({
+  children: children2,
+  width,
+  height,
+  enabled,
+  className,
+  style: style2,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...rest,
+      className: clsx(keepAspectRatioContainer, className),
+      style: enabled ? {
+        ...style2,
+        aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
+        maxHeight: Math.ceil(height)
+      } : style2,
+      children: children2
+    }
+  );
+}
 function EnsureMantine({ children: children2 }) {
   if (!useContext(MantineContext))
     throw new Error("LikeC4Diagram must be a child of MantineProvider");
@@ -6481,9 +6506,9 @@ class Solver {
    * Update the values of the variables.
    */
   updateVariables() {
-    let vars2 = this._varMap, rows = this._rowMap;
-    for (let i = 0, n = vars2.size(); i < n; ++i) {
-      let pair = vars2.itemAt(i), rowPair = rows.find(pair.second);
+    let vars = this._varMap, rows = this._rowMap;
+    for (let i = 0, n = vars.size(); i < n; ++i) {
+      let pair = vars.itemAt(i), rowPair = rows.find(pair.second);
       rowPair !== void 0 ? pair.first.setValue(rowPair.second.constant()) : pair.first.setValue(0);
     }
   }
@@ -7201,6 +7226,7 @@ const ZIndexes = {
   initialized: !1,
   previousViews: [],
   viewportChanged: !1,
+  focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
@@ -7230,6 +7256,7 @@ function createDiagramStore(props) {
               view: currentView,
               lastOnNavigate,
               previousViews,
+              focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               hoveredEdgeId,
@@ -7239,7 +7266,7 @@ function createDiagramStore(props) {
               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), lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId) && (hoveredEdgeId = null)) : (lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, previousViews = [
+            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(
@@ -7249,6 +7276,7 @@ function createDiagramStore(props) {
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
+                focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId
               },
@@ -7268,51 +7296,87 @@ 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
+              },
+              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();
-            for (const change2 of changes) {
-              if (change2.op === "change-shape") {
-                for (const target of change2.targets)
-                  newShapes.set(target, change2.shape);
-                continue;
-              }
-              if (change2.op === "change-color") {
-                for (const target of change2.targets)
-                  newColor.set(target, change2.color);
-                continue;
-              }
-              nonexhaustive(change2);
+            DEV && console.debug("triggerOnChange", changes);
+            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map(), newOpacity = /* @__PURE__ */ new Map(), newBorder = /* @__PURE__ */ new Map();
+            for (const change of changes) {
+              change.op !== "change-element-style" && nonexhaustive(change.op);
+              for (const target of change.targets)
+                for (const [key, value] of entries.strict(change.style))
+                  switch (key) {
+                    case "shape":
+                      newShapes.set(target, value);
+                      break;
+                    case "color":
+                      newColor.set(target, value);
+                      break;
+                    case "opacity":
+                      newOpacity.set(target, value);
+                      break;
+                    case "border":
+                      newBorder.set(target, value);
+                      break;
+                    default:
+                      nonexhaustive(key);
+                  }
             }
             get2().xyflow.setNodes(
               (nodes) => nodes.map((node) => {
-                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 element = node.data.element;
+                const shape = newShapes.get(element.id);
+                shape && shape !== element.shape && (element = {
+                  ...element,
+                  shape
+                });
+                const color2 = newColor.get(element.id);
+                color2 && color2 !== element.color && (element = {
+                  ...element,
+                  color: color2
+                });
+                const opacity = newOpacity.get(element.id);
+                opacity && opacity !== ((_a2 = element.style) == null ? void 0 : _a2.opacity) && (element = {
+                  ...element,
+                  style: {
+                    ...element.style,
+                    opacity
                   }
-                }, data = node.data);
-                const color2 = newColor.get(data.fqn);
-                return color2 && color2 !== data.element.color && (node = {
+                });
+                const border = newBorder.get(element.id);
+                return border && border !== ((_b2 = element.style) == null ? void 0 : _b2.border) && (element = {
+                  ...element,
+                  style: {
+                    ...element.style,
+                    border
+                  }
+                }), element === node.data.element ? node : {
                   ...node,
                   data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      color: color2
-                    }
+                    ...node.data,
+                    element
                   }
-                }), node;
+                };
               })
             ), (_b = (_a = get2()).onChange) == null || _b.call(_a, { changes });
           },
@@ -7345,15 +7409,16 @@ function createDiagramStore(props) {
               xynode.internals.userNode
             );
           },
-          fitDiagram: () => {
-            const { fitViewPadding, xyflow } = get2();
+          fitDiagram: (centerNode) => {
+            const { fitViewPadding, xyflow, focusedNodeId } = get2();
             xyflow.fitView({
               includeHiddenNodes: !0,
-              duration: 400,
+              duration: centerNode && focusedNodeId ? 300 : 400,
               padding: fitViewPadding,
               minZoom: MinZoom,
-              maxZoom: 1
-            });
+              maxZoom: 1,
+              ...centerNode && { nodes: [centerNode] }
+            }), centerNode && focusedNodeId !== centerNode.id && set2({ focusedNodeId: centerNode.id }, noReplace, "focus node"), !centerNode && focusedNodeId && set2({ focusedNodeId: null }, noReplace, "unfocus");
           }
         }),
         {
@@ -7393,30 +7458,146 @@ function DiagramContextProvider({ children: children2, view, ...props }) {
     [props]
   ), /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children: children2 });
 }
-var wrapper = "_14qhjro0";
-function KeepAspectRatio({
-  children: children2,
-  width,
-  height,
-  enabled,
-  className,
-  style: style2,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    Box,
+var container$3 = "hbkbtj0", paper = "hbkbtj1", title$2 = "hbkbtj2", description$1 = "hbkbtj3";
+const selector$1 = (s) => ({
+  id: s.view.id,
+  title: s.view.title ?? "untitled",
+  description: s.view.description,
+  links: s.view.links
+});
+function DiagramTitlePanel() {
+  const { id: id2, title: title2, description: description2, links } = useDiagramState(selector$1), [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,
     {
-      ...rest,
-      className: clsx(wrapper, className),
-      style: enabled ? {
-        ...style2,
-        aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-        maxHeight: Math.ceil(height)
-      } : style2,
-      children: children2
-    }
-  );
+      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$3),
+      style: {
+        transformOrigin: "left center"
+      },
+      children: /* @__PURE__ */ jsx(
+        Paper,
+        {
+          radius: "sm",
+          withBorder: !isCollapsed,
+          className: paper,
+          p: isCollapsed ? "sm" : "md",
+          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$2,
+                  children: title2
+                }
+              ),
+              /* @__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: [
+              description2 && /* @__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$1,
+                      children: description2 || "no description"
+                    }
+                  )
+                }
+              ),
+              !description2 && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  component: "div",
+                  size: "xs",
+                  c: "dimmed",
+                  children: "no description"
+                }
+              ),
+              links && /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  gap: 3,
+                  justify: "stretch",
+                  align: "stretch",
+                  children: links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
+                    /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+                      Anchor,
+                      {
+                        href: link,
+                        target: "_blank",
+                        fz: "xs",
+                        truncate: "end",
+                        display: "inline-block",
+                        w: "100%",
+                        children: link
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        fz: "10",
+                        variant: "light",
+                        onClick: copy,
+                        color: copied ? "teal" : "gray",
+                        children: copied ? "copied" : "copy"
+                      }
+                    ) })
+                  ] }, link))
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    },
+    id2
+  ) });
 }
+var panel = "_1lmzt1h0";
 const {
   primary,
   secondary,
@@ -7434,7 +7615,16 @@ 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;
+  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(
@@ -7442,14 +7632,7 @@ function NodeOptions({ selectedNodeIds }) {
       {
         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
-          }]);
+          triggerChange({ shape });
         }
       }
     ),
@@ -7458,18 +7641,32 @@ function NodeOptions({ selectedNodeIds }) {
       {
         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
-          }]);
+          triggerChange({ color: color2 });
         }
       }
     ),
-    /* @__PURE__ */ jsx(NavigateToOption, { nodes })
+    /* @__PURE__ */ jsx(NavigateToOption, { nodes }),
+    /* @__PURE__ */ jsx(Box, { children: showOpacityOption && /* @__PURE__ */ jsxs(Fragment, { 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)
   ] });
 }
 function Colors({
@@ -7575,8 +7772,54 @@ function NavigateToOption({
     )
   ] });
 }
-var panel = "_1lmzt1h0";
-const OptionsPanelMemo = /* @__PURE__ */ memo(function() {
+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" }
+      ]
+    }
+  ) });
+}
+function OptionsPanel() {
   const [selectedNodes, setSelectedNodes] = useState([]);
   return useOnSelectionChange({
     onChange: ({ nodes }) => {
@@ -7600,7 +7843,7 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function() {
       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");
@@ -7660,10 +7903,10 @@ function diagramViewToXYFlowData(view, opts) {
       initialHeight: node.height, */
       width: node.width,
       height: node.height,
-      measured: {
-        width: node.width,
-        height: node.height
-      },
+      // measured: {
+      //   width: node.width,
+      //   height: node.height
+      // },
       ...parent && {
         parentId: ns + parent.id
       }
@@ -7735,28 +7978,32 @@ function FitViewOnViewportResize({ diagramApi }) {
 }
 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] = useDebouncedState(processedChangeId, 100), isReady = useNodesInitialized({
+  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) => ({
-        viewportMoved: s.viewportChanged,
-        changeid: diagramChangeId(s)
-      }),
-      ({ viewportMoved: viewportMoved2, changeid }) => {
-        setPending(changeid), setViewportMoved(viewportMoved2);
-      },
-      {
-        equalityFn: shallowEqual
-      }
+      (s) => diagramChangeId(s),
+      schedulePending
     ),
-    [diagramApi]
+    [diagramApi, schedulePending]
+  ), useEffect(
+    () => diagramApi.subscribe(
+      (s) => s.viewportChanged,
+      setViewportMoved
+    ),
+    [diagramApi, setViewportMoved]
   ), useRafEffect(
     () => {
       !isReady || processedChangeId === pendingChangeId || (diagramApi.getState().fitDiagram(), setProcessed(pendingChangeId));
     },
-    [isReady, processedChangeId, pendingChangeId]
+    [isReady, processedChangeId, pendingChangeId, diagramApi]
   ), !viewportMoved && isReady ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
 }
 const selectFitViewFlag = (s) => s.fitViewEnabled, FitViewOnDiagramChange = memo(() => useDiagramState(selectFitViewFlag) ? /* @__PURE__ */ jsx(FitViewOnDiagramChanges, {}) : null);
@@ -7772,13 +8019,19 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
     (state) => ({
       viewId: state.view.id,
       nodes: state.view.nodes,
-      edges: state.view.edges,
-      draggable: state.nodesDraggable,
-      selectable: state.nodesSelectable
+      edges: state.view.edges
     }),
     // listener
-    ({ viewId, nodes, edges, ...opts }) => {
-      const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
+    ({ viewId, nodes, edges }) => {
+      const {
+        lastOnNavigate,
+        nodesDraggable,
+        nodesSelectable,
+        focusedNodeId
+      } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, {
+        draggable: nodesDraggable,
+        selectable: nodesSelectable || focusedNodeId !== null
+      });
       if (xyflowRef.current.setNodes(
         (prev) => updates.nodes.map((update) => {
           const existing = prev.find(isSameNode(update));
@@ -7795,25 +8048,28 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
             ...update
           } : update;
         })
-      ), (lastOnNavigate == null ? void 0 : lastOnNavigate.toView) === viewId && !lastOnNavigate.positionCorrected) {
+      ), (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, nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
+          const centerFrom = lastOnNavigate.elementCenterScreenPosition;
+          let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
           requestAnimationFrame(() => {
-            const v = xyflowRef.current.getViewport();
-            nextZoom < v.zoom && xyflowRef.current.setViewport({
-              x: v.x,
-              y: v.y,
-              zoom: nextZoom
+            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);
             });
-            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(
@@ -7878,7 +8134,7 @@ function assignInlineVars(varsOrContract, tokens) {
     writable: !1
   }), styles;
 }
-var container$1 = "bexn7q0", edgePathBg = "bexn7q1", fillStrokeCtx = "bexn7q2", cssEdgePath = "bexn7q3", varLabelX = "var(--bexn7q4)", varLabelY = "var(--bexn7q5)", edgeLabel = "bexn7q7", edgeLabelBody = "bexn7q8";
+var container$2 = "bexn7q1", edgePathBg = "bexn7q2", fillStrokeCtx = "bexn7q3", cssEdgePath = "bexn7q6", varLabelX = "var(--bexn7q7)", varLabelY = "var(--bexn7q8)", edgeLabel = "bexn7qa", edgeLabelBody = "bexn7qb";
 function getNodeIntersection(intersectionNode, targetNode) {
   const {
     width: intersectionNodeWidth,
@@ -7940,28 +8196,23 @@ 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) < 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 && 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, next.data), curve = line().curve(curveCatmullRomOpen.alpha(1)), 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";
+  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), { edge: diagramEdge, controlPoints } = data, color2 = diagramEdge.color ?? "gray", isHovered = useDiagramState((s) => s.hoveredEdgeId === 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;
+    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,
@@ -7972,8 +8223,16 @@ 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],
+      [sx, sy],
+      ...controlPoints,
+      [tx, ty],
+      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
+    ]);
   }
-  return /* @__PURE__ */ jsxs("g", { className: clsx(container$1), "data-likec4-color": color2, "data-edge-hovered": isHovered, children: [
+  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",
       {
@@ -7995,15 +8254,15 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
         edgePath,
         interactionWidth: interactionWidth ?? 10,
         strokeDasharray,
-        markerStart: edge.tailArrow ? marker : void 0,
-        markerEnd: edge.headArrow ? marker : void 0,
+        markerStart: diagramEdge.tailArrow ? marker : void 0,
+        markerEnd: diagramEdge.headArrow ? marker : void 0,
         style: style2
       }
     ),
     data.label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
       Box,
       {
-        className: clsx(container$1, edgeLabel),
+        className: clsx(container$2, edgeLabel),
         "data-likec4-color": color2,
         style: {
           ...assignInlineVars({
@@ -8020,7 +8279,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       }
     ) })
   ] });
-}, isEqualProps), RelationshipPath = memo(({
+}, isEqualProps), RelationshipPath = ({
   edgePath,
   interactionWidth,
   strokeDasharray,
@@ -8059,475 +8318,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
       strokeWidth: interactionWidth
     }
   )
-] })), Channel = {
-  /* CLAMP */
-  min: {
-    r: 0,
-    g: 0,
-    b: 0,
-    s: 0,
-    l: 0,
-    a: 0
-  },
-  max: {
-    r: 255,
-    g: 255,
-    b: 255,
-    h: 360,
-    s: 100,
-    l: 100,
-    a: 1
-  },
-  clamp: {
-    r: (r2) => r2 >= 255 ? 255 : r2 < 0 ? 0 : r2,
-    g: (g) => g >= 255 ? 255 : g < 0 ? 0 : g,
-    b: (b) => b >= 255 ? 255 : b < 0 ? 0 : b,
-    h: (h) => h % 360,
-    s: (s) => s >= 100 ? 100 : s < 0 ? 0 : s,
-    l: (l) => l >= 100 ? 100 : l < 0 ? 0 : l,
-    a: (a) => a >= 1 ? 1 : a < 0 ? 0 : a
-  },
-  /* CONVERSION */
-  //SOURCE: https://planetcalc.com/7779
-  toLinear: (c) => {
-    const n = c / 255;
-    return c > 0.03928 ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92;
-  },
-  //SOURCE: https://gist.github.com/mjackson/5311256
-  hue2rgb: (p, q, t) => (t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p),
-  hsl2rgb: ({ h, s, l }, channel) => {
-    if (!s)
-      return l * 2.55;
-    h /= 360, s /= 100, l /= 100;
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
-    switch (channel) {
-      case "r":
-        return Channel.hue2rgb(p, q, h + 1 / 3) * 255;
-      case "g":
-        return Channel.hue2rgb(p, q, h) * 255;
-      case "b":
-        return Channel.hue2rgb(p, q, h - 1 / 3) * 255;
-    }
-  },
-  rgb2hsl: ({ r: r2, g, b }, channel) => {
-    r2 /= 255, g /= 255, b /= 255;
-    const max = Math.max(r2, g, b), min = Math.min(r2, g, b), l = (max + min) / 2;
-    if (channel === "l")
-      return l * 100;
-    if (max === min)
-      return 0;
-    const d = max - min, s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    if (channel === "s")
-      return s * 100;
-    switch (max) {
-      case r2:
-        return ((g - b) / d + (g < b ? 6 : 0)) * 60;
-      case g:
-        return ((b - r2) / d + 2) * 60;
-      case b:
-        return ((r2 - g) / d + 4) * 60;
-      default:
-        return -1;
-    }
-  }
-}, Lang = {
-  /* API */
-  clamp: (number, lower2, upper) => lower2 > upper ? Math.min(lower2, Math.max(upper, number)) : Math.min(upper, Math.max(lower2, number)),
-  round: (number) => Math.round(number * 1e10) / 1e10
-}, lang = Lang, Unit = {
-  /* API */
-  dec2hex: (dec) => {
-    const hex2 = Math.round(dec).toString(16);
-    return hex2.length > 1 ? hex2 : `0${hex2}`;
-  }
-}, unit = Unit, Utils = {
-  channel: Channel,
-  lang,
-  unit
-}, DEC2HEX = {};
-for (let i = 0; i <= 255; i++)
-  DEC2HEX[i] = Utils.unit.dec2hex(i);
-const TYPE = {
-  ALL: 0,
-  RGB: 1,
-  HSL: 2
-};
-class Type {
-  constructor() {
-    this.type = TYPE.ALL;
-  }
-  /* API */
-  get() {
-    return this.type;
-  }
-  set(type) {
-    if (this.type && this.type !== type)
-      throw new Error("Cannot change both RGB and HSL channels at the same time");
-    this.type = type;
-  }
-  reset() {
-    this.type = TYPE.ALL;
-  }
-  is(type) {
-    return this.type === type;
-  }
-}
-class Channels {
-  /* CONSTRUCTOR */
-  constructor(data, color2) {
-    this.color = color2, this.changed = !1, this.data = data, this.type = new Type();
-  }
-  /* API */
-  set(data, color2) {
-    return this.color = color2, this.changed = !1, this.data = data, this.type.type = TYPE.ALL, this;
-  }
-  /* HELPERS */
-  _ensureHSL() {
-    const data = this.data, { h, s, l } = data;
-    h === void 0 && (data.h = Utils.channel.rgb2hsl(data, "h")), s === void 0 && (data.s = Utils.channel.rgb2hsl(data, "s")), l === void 0 && (data.l = Utils.channel.rgb2hsl(data, "l"));
-  }
-  _ensureRGB() {
-    const data = this.data, { r: r2, g, b } = data;
-    r2 === void 0 && (data.r = Utils.channel.hsl2rgb(data, "r")), g === void 0 && (data.g = Utils.channel.hsl2rgb(data, "g")), b === void 0 && (data.b = Utils.channel.hsl2rgb(data, "b"));
-  }
-  /* GETTERS */
-  get r() {
-    const data = this.data, r2 = data.r;
-    return !this.type.is(TYPE.HSL) && r2 !== void 0 ? r2 : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "r"));
-  }
-  get g() {
-    const data = this.data, g = data.g;
-    return !this.type.is(TYPE.HSL) && g !== void 0 ? g : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "g"));
-  }
-  get b() {
-    const data = this.data, b = data.b;
-    return !this.type.is(TYPE.HSL) && b !== void 0 ? b : (this._ensureHSL(), Utils.channel.hsl2rgb(data, "b"));
-  }
-  get h() {
-    const data = this.data, h = data.h;
-    return !this.type.is(TYPE.RGB) && h !== void 0 ? h : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "h"));
-  }
-  get s() {
-    const data = this.data, s = data.s;
-    return !this.type.is(TYPE.RGB) && s !== void 0 ? s : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "s"));
-  }
-  get l() {
-    const data = this.data, l = data.l;
-    return !this.type.is(TYPE.RGB) && l !== void 0 ? l : (this._ensureRGB(), Utils.channel.rgb2hsl(data, "l"));
-  }
-  get a() {
-    return this.data.a;
-  }
-  /* SETTERS */
-  set r(r2) {
-    this.type.set(TYPE.RGB), this.changed = !0, this.data.r = r2;
-  }
-  set g(g) {
-    this.type.set(TYPE.RGB), this.changed = !0, this.data.g = g;
-  }
-  set b(b) {
-    this.type.set(TYPE.RGB), this.changed = !0, this.data.b = b;
-  }
-  set h(h) {
-    this.type.set(TYPE.HSL), this.changed = !0, this.data.h = h;
-  }
-  set s(s) {
-    this.type.set(TYPE.HSL), this.changed = !0, this.data.s = s;
-  }
-  set l(l) {
-    this.type.set(TYPE.HSL), this.changed = !0, this.data.l = l;
-  }
-  set a(a) {
-    this.changed = !0, this.data.a = a;
-  }
-}
-const Channels$1 = Channels, channels = new Channels$1({ r: 0, g: 0, b: 0, a: 0 }, "transparent"), Hex = {
-  /* VARIABLES */
-  re: /^#((?:[a-f0-9]{2}){2,4}|[a-f0-9]{3})$/i,
-  /* API */
-  parse: (color2) => {
-    if (color2.charCodeAt(0) !== 35)
-      return;
-    const match = color2.match(Hex.re);
-    if (!match)
-      return;
-    const hex2 = match[1], dec = parseInt(hex2, 16), length = hex2.length, hasAlpha = length % 4 === 0, isFullLength = length > 4, multiplier = isFullLength ? 1 : 17, bits = isFullLength ? 8 : 4, bitsOffset = hasAlpha ? 0 : -1, mask = isFullLength ? 255 : 15;
-    return channels.set({
-      r: (dec >> bits * (bitsOffset + 3) & mask) * multiplier,
-      g: (dec >> bits * (bitsOffset + 2) & mask) * multiplier,
-      b: (dec >> bits * (bitsOffset + 1) & mask) * multiplier,
-      a: hasAlpha ? (dec & mask) * multiplier / 255 : 1
-    }, color2);
-  },
-  stringify: (channels2) => {
-    const { r: r2, g, b, a } = channels2;
-    return a < 1 ? `#${DEC2HEX[Math.round(r2)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}${DEC2HEX[Math.round(a * 255)]}` : `#${DEC2HEX[Math.round(r2)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}`;
-  }
-}, HSL = {
-  /* VARIABLES */
-  re: /^hsla?\(\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?(?:deg|grad|rad|turn)?)\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?%)\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?%)(?:\s*?(?:,|\/)\s*?\+?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?(%)?))?\s*?\)$/i,
-  hueRe: /^(.+?)(deg|grad|rad|turn)$/i,
-  /* HELPERS */
-  _hue2deg: (hue) => {
-    const match = hue.match(HSL.hueRe);
-    if (match) {
-      const [, number, unit2] = match;
-      switch (unit2) {
-        case "grad":
-          return Utils.channel.clamp.h(parseFloat(number) * 0.9);
-        case "rad":
-          return Utils.channel.clamp.h(parseFloat(number) * 180 / Math.PI);
-        case "turn":
-          return Utils.channel.clamp.h(parseFloat(number) * 360);
-      }
-    }
-    return Utils.channel.clamp.h(parseFloat(hue));
-  },
-  /* API */
-  parse: (color2) => {
-    const charCode = color2.charCodeAt(0);
-    if (charCode !== 104 && charCode !== 72)
-      return;
-    const match = color2.match(HSL.re);
-    if (!match)
-      return;
-    const [, h, s, l, a, isAlphaPercentage] = match;
-    return channels.set({
-      h: HSL._hue2deg(h),
-      s: Utils.channel.clamp.s(parseFloat(s)),
-      l: Utils.channel.clamp.l(parseFloat(l)),
-      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
-    }, color2);
-  },
-  stringify: (channels2) => {
-    const { h, s, l, a } = channels2;
-    return a < 1 ? `hsla(${Utils.lang.round(h)}, ${Utils.lang.round(s)}%, ${Utils.lang.round(l)}%, ${a})` : `hsl(${Utils.lang.round(h)}, ${Utils.lang.round(s)}%, ${Utils.lang.round(l)}%)`;
-  }
-}, Keyword = {
-  /* VARIABLES */
-  colors: {
-    aliceblue: "#f0f8ff",
-    antiquewhite: "#faebd7",
-    aqua: "#00ffff",
-    aquamarine: "#7fffd4",
-    azure: "#f0ffff",
-    beige: "#f5f5dc",
-    bisque: "#ffe4c4",
-    black: "#000000",
-    blanchedalmond: "#ffebcd",
-    blue: "#0000ff",
-    blueviolet: "#8a2be2",
-    brown: "#a52a2a",
-    burlywood: "#deb887",
-    cadetblue: "#5f9ea0",
-    chartreuse: "#7fff00",
-    chocolate: "#d2691e",
-    coral: "#ff7f50",
-    cornflowerblue: "#6495ed",
-    cornsilk: "#fff8dc",
-    crimson: "#dc143c",
-    cyanaqua: "#00ffff",
-    darkblue: "#00008b",
-    darkcyan: "#008b8b",
-    darkgoldenrod: "#b8860b",
-    darkgray: "#a9a9a9",
-    darkgreen: "#006400",
-    darkgrey: "#a9a9a9",
-    darkkhaki: "#bdb76b",
-    darkmagenta: "#8b008b",
-    darkolivegreen: "#556b2f",
-    darkorange: "#ff8c00",
-    darkorchid: "#9932cc",
-    darkred: "#8b0000",
-    darksalmon: "#e9967a",
-    darkseagreen: "#8fbc8f",
-    darkslateblue: "#483d8b",
-    darkslategray: "#2f4f4f",
-    darkslategrey: "#2f4f4f",
-    darkturquoise: "#00ced1",
-    darkviolet: "#9400d3",
-    deeppink: "#ff1493",
-    deepskyblue: "#00bfff",
-    dimgray: "#696969",
-    dimgrey: "#696969",
-    dodgerblue: "#1e90ff",
-    firebrick: "#b22222",
-    floralwhite: "#fffaf0",
-    forestgreen: "#228b22",
-    fuchsia: "#ff00ff",
-    gainsboro: "#dcdcdc",
-    ghostwhite: "#f8f8ff",
-    gold: "#ffd700",
-    goldenrod: "#daa520",
-    gray: "#808080",
-    green: "#008000",
-    greenyellow: "#adff2f",
-    grey: "#808080",
-    honeydew: "#f0fff0",
-    hotpink: "#ff69b4",
-    indianred: "#cd5c5c",
-    indigo: "#4b0082",
-    ivory: "#fffff0",
-    khaki: "#f0e68c",
-    lavender: "#e6e6fa",
-    lavenderblush: "#fff0f5",
-    lawngreen: "#7cfc00",
-    lemonchiffon: "#fffacd",
-    lightblue: "#add8e6",
-    lightcoral: "#f08080",
-    lightcyan: "#e0ffff",
-    lightgoldenrodyellow: "#fafad2",
-    lightgray: "#d3d3d3",
-    lightgreen: "#90ee90",
-    lightgrey: "#d3d3d3",
-    lightpink: "#ffb6c1",
-    lightsalmon: "#ffa07a",
-    lightseagreen: "#20b2aa",
-    lightskyblue: "#87cefa",
-    lightslategray: "#778899",
-    lightslategrey: "#778899",
-    lightsteelblue: "#b0c4de",
-    lightyellow: "#ffffe0",
-    lime: "#00ff00",
-    limegreen: "#32cd32",
-    linen: "#faf0e6",
-    magenta: "#ff00ff",
-    maroon: "#800000",
-    mediumaquamarine: "#66cdaa",
-    mediumblue: "#0000cd",
-    mediumorchid: "#ba55d3",
-    mediumpurple: "#9370db",
-    mediumseagreen: "#3cb371",
-    mediumslateblue: "#7b68ee",
-    mediumspringgreen: "#00fa9a",
-    mediumturquoise: "#48d1cc",
-    mediumvioletred: "#c71585",
-    midnightblue: "#191970",
-    mintcream: "#f5fffa",
-    mistyrose: "#ffe4e1",
-    moccasin: "#ffe4b5",
-    navajowhite: "#ffdead",
-    navy: "#000080",
-    oldlace: "#fdf5e6",
-    olive: "#808000",
-    olivedrab: "#6b8e23",
-    orange: "#ffa500",
-    orangered: "#ff4500",
-    orchid: "#da70d6",
-    palegoldenrod: "#eee8aa",
-    palegreen: "#98fb98",
-    paleturquoise: "#afeeee",
-    palevioletred: "#db7093",
-    papayawhip: "#ffefd5",
-    peachpuff: "#ffdab9",
-    peru: "#cd853f",
-    pink: "#ffc0cb",
-    plum: "#dda0dd",
-    powderblue: "#b0e0e6",
-    purple: "#800080",
-    rebeccapurple: "#663399",
-    red: "#ff0000",
-    rosybrown: "#bc8f8f",
-    royalblue: "#4169e1",
-    saddlebrown: "#8b4513",
-    salmon: "#fa8072",
-    sandybrown: "#f4a460",
-    seagreen: "#2e8b57",
-    seashell: "#fff5ee",
-    sienna: "#a0522d",
-    silver: "#c0c0c0",
-    skyblue: "#87ceeb",
-    slateblue: "#6a5acd",
-    slategray: "#708090",
-    slategrey: "#708090",
-    snow: "#fffafa",
-    springgreen: "#00ff7f",
-    tan: "#d2b48c",
-    teal: "#008080",
-    thistle: "#d8bfd8",
-    transparent: "#00000000",
-    turquoise: "#40e0d0",
-    violet: "#ee82ee",
-    wheat: "#f5deb3",
-    white: "#ffffff",
-    whitesmoke: "#f5f5f5",
-    yellow: "#ffff00",
-    yellowgreen: "#9acd32"
-  },
-  /* API */
-  parse: (color2) => {
-    color2 = color2.toLowerCase();
-    const hex2 = Keyword.colors[color2];
-    if (hex2)
-      return Hex.parse(hex2);
-  },
-  stringify: (channels2) => {
-    const hex2 = Hex.stringify(channels2);
-    for (const name in Keyword.colors)
-      if (Keyword.colors[name] === hex2)
-        return name;
-  }
-}, RGB = {
-  /* VARIABLES */
-  re: /^rgba?\(\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))(?:\s*?(?:,|\/)\s*?\+?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?)))?\s*?\)$/i,
-  /* API */
-  parse: (color2) => {
-    const charCode = color2.charCodeAt(0);
-    if (charCode !== 114 && charCode !== 82)
-      return;
-    const match = color2.match(RGB.re);
-    if (!match)
-      return;
-    const [, r2, isRedPercentage, g, isGreenPercentage, b, isBluePercentage, a, isAlphaPercentage] = match;
-    return channels.set({
-      r: Utils.channel.clamp.r(isRedPercentage ? parseFloat(r2) * 2.55 : parseFloat(r2)),
-      g: Utils.channel.clamp.g(isGreenPercentage ? parseFloat(g) * 2.55 : parseFloat(g)),
-      b: Utils.channel.clamp.b(isBluePercentage ? parseFloat(b) * 2.55 : parseFloat(b)),
-      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
-    }, color2);
-  },
-  stringify: (channels2) => {
-    const { r: r2, g, b, a } = channels2;
-    return a < 1 ? `rgba(${Utils.lang.round(r2)}, ${Utils.lang.round(g)}, ${Utils.lang.round(b)}, ${Utils.lang.round(a)})` : `rgb(${Utils.lang.round(r2)}, ${Utils.lang.round(g)}, ${Utils.lang.round(b)})`;
-  }
-}, Color = {
-  /* VARIABLES */
-  format: {
-    keyword: Keyword,
-    hex: Hex,
-    rgb: RGB,
-    rgba: RGB,
-    hsl: HSL,
-    hsla: HSL
-  },
-  /* API */
-  parse: (color2) => {
-    if (typeof color2 != "string")
-      return color2;
-    const channels2 = Hex.parse(color2) || RGB.parse(color2) || HSL.parse(color2) || Keyword.parse(color2);
-    if (channels2)
-      return channels2;
-    throw new Error(`Unsupported color format: "${color2}"`);
-  },
-  stringify: (channels2) => !channels2.changed && channels2.color ? channels2.color : channels2.type.is(TYPE.HSL) || channels2.data.r === void 0 ? HSL.stringify(channels2) : channels2.a < 1 || !Number.isInteger(channels2.r) || !Number.isInteger(channels2.g) || !Number.isInteger(channels2.b) ? RGB.stringify(channels2) : Hex.stringify(channels2)
-}, change = (color2, channels2) => {
-  const ch = Color.parse(color2);
-  for (const c in channels2)
-    ch[c] = Utils.channel.clamp[c](channels2[c]);
-  return Color.stringify(ch);
-}, toHex = (color2) => Color.format.hex.stringify(Color.parse(color2)), adjust = (color2, channels2) => {
-  const ch = Color.parse(color2), changes = {};
-  for (const c in channels2)
-    channels2[c] && (changes[c] = ch[c] + channels2[c]);
-  return change(color2, changes);
-}, scale = (color2, channels2) => {
-  const ch = Color.parse(color2), adjustments = {}, delta = (amount, weight, max) => weight > 0 ? (max - amount) * weight / 100 : amount * weight / 100;
-  for (const c in channels2)
-    adjustments[c] = delta(ch[c], channels2[c], Utils.channel.max[c]);
-  return adjust(color2, adjustments);
-};
-var vars = { default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" } };
-const Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+] }), Link = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "svg",
   {
     ref,
@@ -8581,48 +8372,45 @@ function NavigateToBtn({ xynodeId, className }) {
       className: clsx("nodrag nopan", className),
       radius: "xl",
       onClick: (event) => {
-        diagramApi.getState().triggerOnNavigateTo(xynodeId, event), event.stopPropagation();
+        event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
       },
+      onDoubleClick: (event) => event.stopPropagation(),
       children: /* @__PURE__ */ jsx(ZoomIn, {})
     }
   );
 }
-var cssContainer = "lbtzdo0", cssCompound = "lbtzdo2", cssTitle = "lbtzdo4", cssIndicator = "lbtzdo6", cssNavigateBtn$1 = "lbtzdo7";
-const compoundColor = (color2, depth) => toHex(
-  scale(color2, {
-    l: -35 - 5 * depth,
-    s: -15 - 5 * depth
-  })
-), CompoundNodeMemo = /* @__PURE__ */ memo(function({
+var container$1 = "lbtzdo0", varTransparency = "var(--lbtzdo1)", compoundBody = "lbtzdo2", transparent = "lbtzdo5", title$1 = "lbtzdo6", indicator$1 = "lbtzdoa", navigateBtn = "lbtzdoc";
+const CompoundNodeMemo = /* @__PURE__ */ memo(function({
   id: id2,
   data: {
     element
   }
 }) {
-  const { color: color2, depth = 0, ...compound } = element, colors2 = useMemo(() => {
-    const colors22 = defaultTheme.elements[color2];
-    return {
-      fill: compoundColor(colors22.fill, depth),
-      stroke: compoundColor(colors22.stroke, depth)
-    };
-  }, [color2, depth]), { isHovered, hasOnNavigateTo } = useDiagramState((s) => ({
+  const { color: color2, style: style2, depth = 1, ...compound } = element, opacity = style2.opacity ?? 100, { isHovered, hasOnNavigateTo } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id2,
     hasOnNavigateTo: !!s.onNavigateTo
-  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo;
+  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo, transparency = clamp$1(100 - opacity, {
+    min: 0,
+    max: 98
+  });
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: clsx(cssContainer, "likec4-compound-node"),
-      style: assignInlineVars({ fill: vars.element.fill, stroke: vars.element.stroke }, {
-        fill: colors2.fill,
-        stroke: colors2.stroke
-      }),
+      className: clsx(
+        container$1,
+        "likec4-compound-node",
+        opacity < 100 && "likec4-compound-transparent"
+      ),
       mod: {
+        "compound-depth": depth,
         "likec4-color": color2,
         "likec4-shape": compound.shape,
         "likec4-navigable": isnavigable,
         hovered: isHovered
       },
+      style: assignInlineVars({
+        [varTransparency]: transparency + "%"
+      }),
       children: [
         /* @__PURE__ */ jsx(
           Handle,
@@ -8632,7 +8420,7 @@ const compoundColor = (color2, depth) => toHex(
             style: { visibility: "hidden" }
           }
         ),
-        /* @__PURE__ */ jsx("svg", { className: cssIndicator, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("svg", { className: indicator$1, children: /* @__PURE__ */ jsx(
           "rect",
           {
             x: 0,
@@ -8642,15 +8430,24 @@ const compoundColor = (color2, depth) => toHex(
             rx: 6
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: clsx(cssCompound, "likec4-compound"), children: /* @__PURE__ */ jsx(
-          Text,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            component: "div",
-            className: clsx(cssTitle, "likec4-compound-title"),
-            children: compound.title
+            className: clsx(compoundBody, opacity < 100 && transparent, "likec4-compound"),
+            style: {
+              borderStyle: opacity < 100 ? style2.border : void 0
+            },
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                component: "div",
+                className: clsx(title$1, "likec4-compound-title"),
+                children: compound.title
+              }
+            )
           }
-        ) }),
-        isnavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: cssNavigateBtn$1 }),
+        ),
+        isnavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id2, className: navigateBtn }),
         /* @__PURE__ */ jsx(
           Handle,
           {
@@ -8888,16 +8685,16 @@ function SelectedIndicator({ shape, w, h }) {
   }
 }
 const selectedScale = 1.015, variants = {
-  idle: (_, { scale: scale2 }) => ({
+  idle: (_, { scale }) => ({
     scale: 1,
     transition: {
-      delay: isNumber(scale2) && scale2 > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
     }
   }),
-  selected: (_, { scale: scale2 }) => ({
+  selected: (_, { scale }) => ({
     scale: selectedScale,
     transition: {
-      delay: isNumber(scale2) && scale2 > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
     }
   }),
   // dragging: {
@@ -8914,10 +8711,10 @@ const selectedScale = 1.015, variants = {
   //     delay: 1
   //   }
   // }),
-  hovered: (_, { scale: scale2 }) => ({
+  hovered: (_, { scale }) => ({
     scale: 1.06,
     transition: {
-      delay: isNumber(scale2) && scale2 !== 1 && scale2 !== selectedScale ? 0 : 0.15
+      delay: isNumber(scale) && scale !== 1 && scale !== selectedScale ? 0 : 0.15
     }
   }),
   tap: {
@@ -8939,7 +8736,7 @@ function ElementNode({
 }) {
   const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState((s) => ({
     isHovered: s.hoveredNodeId === id2,
-    isInteractive: s.nodesDraggable || s.nodesSelectable,
+    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);
@@ -8951,7 +8748,7 @@ function ElementNode({
     case dragging:
       animate = "idle";
       break;
-    case ((isInteractive || hasOnNavigateTo) && isHovered):
+    case (isInteractive && isHovered):
       animate = "hovered";
       break;
     case selected2:
@@ -9048,6 +8845,36 @@ function ElementNode({
     }
   );
 }
+function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState((s) => s.focusedNodeId), xyflowApi = useXYStoreApi();
+  return useUpdateEffect(() => {
+    const edgeChanges = [], nodeChanges = [], { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+    if (focusedNodeId) {
+      for (const edge of edges)
+        edge.source === focusedNodeId || edge.target === focusedNodeId ? edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !0
+        }) : edge.selected && edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !1
+        });
+      for (const node of nodes)
+        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), nodeChanges.length > 0 && triggerNodeChanges(nodeChanges);
+    } else
+      xyflowApi.getState().resetSelectedElements();
+  }, [focusedNodeId]), null;
+}
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -9065,33 +8892,38 @@ const XYFlowBackground = memo(({ background }) => {
     return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background) });
   const { variant, ...rest } = background;
   return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
-}, deepEqual);
+}, deepEqual), viewportDomNode = (state) => {
+  var _a;
+  return ((_a = state.domNode) == null ? void 0 : _a.querySelector(".react-flow__viewport")) ?? null;
+};
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef();
-  return useMemo(() => ({
-    onPaneClick: (event) => {
-      var _a;
-      diagramApi.setState(
-        {
-          lastClickedNodeId: null,
-          lastClickedEdgeId: null
-        },
-        !1,
-        "onPaneClick"
-      );
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), viewportRef = useRef(viewportDomNode(xyflowApi.getState())), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+    dblclickTimeout.current = void 0;
+  }, 250), !1), transformRef = useRef(""), cbRef = useRef();
+  return useEffect(() => xyflowApi.subscribe((state, prev) => {
+    (state.domNode !== prev.domNode || state.domNode && !viewportRef.current) && (viewportRef.current = viewportDomNode(state));
+  }), [xyflowApi]), useMemo(() => ({
+    onDoubleClick: (event) => {
+      diagramApi.getState().resetLastClicked();
       const diagramState = diagramApi.getState();
-      if (dblclickTimeout.current) {
-        if (window.clearTimeout(dblclickTimeout.current), dblclickTimeout.current = void 0, diagramState.onCanvasDblClick) {
-          diagramState.onCanvasDblClick(event);
-          return;
-        }
-        (_a = diagramState.onCanvasClick) == null || _a.call(diagramState, event), diagramState.fitViewEnabled && diagramState.viewportChanged && diagramState.fitDiagram();
+      if (diagramState.onCanvasDblClick) {
+        diagramState.onCanvasDblClick(event);
+        return;
+      }
+      if (diagramState.fitViewEnabled && diagramState.zoomable) {
+        diagramState.fitDiagram(), event.stopPropagation();
         return;
       }
-      dblclickTimeout.current = window.setTimeout(() => {
-        var _a2, _b;
-        dblclickTimeout.current = void 0, (_b = (_a2 = diagramApi.getState()).onCanvasClick) == null || _b.call(_a2, event);
-      }, 300);
+    },
+    onPaneClick: (event) => {
+      if (dbclickGuarg())
+        return;
+      const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState();
+      if (resetLastClicked(), onCanvasClick) {
+        onCanvasClick(event);
+        return;
+      }
+      focusedNodeId && (fitDiagram(), event.stopPropagation());
     },
     onNodeContextMenu: (event, xynode) => {
       var _a, _b;
@@ -9103,7 +8935,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;
@@ -9114,24 +8946,67 @@ function useXYFlowEvents() {
       });
     },
     onNodeClick: (event, xynode) => {
-      var _a, _b;
-      diagramApi.getState().setLastClickedNode(xynode.id), (_b = (_a = diagramApi.getState()).onNodeClick) == null || _b.call(_a, {
-        element: xynode.data.element,
-        xynode,
-        event
-      });
+      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());
+    },
+    onNodeDoubleClick: (event, xynode) => {
+      diagramApi.getState().setLastClickedNode(xynode.id);
+      const { zoomable, fitViewEnabled, fitDiagram, onNodeClick } = diagramApi.getState();
+      onNodeClick || zoomable && fitViewEnabled && (fitDiagram(xynode), event.stopPropagation());
     },
     onEdgeClick: (event, xyedge) => {
-      var _a, _b;
-      diagramApi.getState().setLastClickedEdge(xyedge.id), (_b = (_a = diagramApi.getState()).onEdgeClick) == null || _b.call(_a, {
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      });
+      diagramApi.getState().setLastClickedEdge(xyedge.id);
+      const { focusedNodeId, fitDiagram, onEdgeClick, xyflow } = diagramApi.getState();
+      if (onEdgeClick) {
+        onEdgeClick({
+          relation: xyedge.data.edge,
+          xyedge,
+          event
+        });
+        return;
+      }
+      if (focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)) {
+        const nextFocus = focusedNodeId === xyedge.source ? xyedge.target : xyedge.source;
+        fitDiagram(xyflow.getNode(nextFocus)), event.stopPropagation();
+      }
     },
     onMoveEnd: (event, _viewport) => {
       const viewportChanged = !!event;
       viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
+    },
+    onNodeMouseEnter: (event, xynode) => {
+      diagramApi.getState().setHoveredNode(xynode.id);
+    },
+    onNodeMouseLeave: (event, xynode) => {
+      diagramApi.getState().setHoveredNode(null);
+    },
+    onEdgeMouseEnter: (event, xyedge) => {
+      diagramApi.getState().setHoveredEdge(xyedge.id);
+    },
+    onEdgeMouseLeave: (event, xyedge) => {
+      diagramApi.getState().setHoveredEdge(null);
+    },
+    /**
+     * WOKAROUND:
+     * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+     * https://github.com/xyflow/xyflow/issues/3282
+     */
+    onViewportChange: ({ x, y, zoom: zoom2 }) => {
+      const scale = zoom2 != 1 ? zoom2.toFixed(6) : "1";
+      transformRef.current = `translate(${Math.round(x)}px, ${Math.round(y)}px) scale(${scale})`, cbRef.current ?? (cbRef.current = requestIdleCallback(() => {
+        cbRef.current = void 0, viewportRef.current && viewportRef.current.style.transform !== transformRef.current && (viewportRef.current.style.transform = transformRef.current);
+      }, {
+        timeout: 1e3
+      }));
     }
   }), [diagramApi, xyflowApi]);
 }
@@ -9141,7 +9016,7 @@ const nodeTypes = {
 }, edgeTypes = {
   relationship: RelationshipEdge
 }, selector = (s) => ({
-  nodesSelectable: s.nodesSelectable,
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
@@ -9151,15 +9026,14 @@ const nodeTypes = {
   hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
   hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
   hasOnEdgeClick: !!s.onEdgeClick,
-  hasOnCanvasClick: !!s.onCanvasClick || !!s.onCanvasDblClick
+  zoomable: s.zoomable,
+  pannable: s.pannable
 });
 function XYFlowWrapper({
   className,
   children: children2,
   defaultNodes,
   defaultEdges,
-  pannable,
-  zoomable,
   controls,
   background,
   style: style2
@@ -9169,6 +9043,8 @@ function XYFlowWrapper({
     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(
@@ -9208,33 +9084,28 @@ function XYFlowWrapper({
         selectionKeyCode: null
       },
       nodesDraggable,
-      ...nodesDraggable && layoutConstraints,
+      ...nodesDraggable && {
+        onNodeDragStart: layoutConstraints.onNodeDragStart,
+        onNodeDrag: layoutConstraints.onNodeDrag,
+        onNodeDragStop: layoutConstraints.onNodeDragStop
+      },
       zoomOnDoubleClick: !1,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
+      onDoubleClick: handlers.onDoubleClick,
       onPaneClick: handlers.onPaneClick,
-      ...editor.hasOnNodeClick && {
-        onNodeClick: handlers.onNodeClick
-      },
-      ...editor.hasOnEdgeClick && {
-        onEdgeClick: handlers.onEdgeClick
-      },
       onMoveEnd: handlers.onMoveEnd,
+      onNodeMouseEnter: handlers.onNodeMouseEnter,
+      onNodeMouseLeave: handlers.onNodeMouseLeave,
+      onEdgeMouseEnter: handlers.onEdgeMouseEnter,
+      onEdgeMouseLeave: handlers.onEdgeMouseLeave,
+      onNodeClick: handlers.onNodeClick,
+      onNodeDoubleClick: handlers.onNodeDoubleClick,
+      onEdgeClick: handlers.onEdgeClick,
+      onViewportChange: handlers.onViewportChange,
       onInit: () => {
         diagramApi.setState({ initialized: !0 }, !1, "initialized");
       },
-      onNodeMouseEnter: (_event, node) => {
-        diagramApi.getState().setHoveredNode(node.id);
-      },
-      onNodeMouseLeave: () => {
-        diagramApi.getState().setHoveredNode(null);
-      },
-      onEdgeMouseEnter: (_event, edge) => {
-        diagramApi.getState().setHoveredEdge(edge.id);
-      },
-      onEdgeMouseLeave: () => {
-        diagramApi.getState().setHoveredEdge(null);
-      },
       ...editor.hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       },
@@ -9246,7 +9117,8 @@ function XYFlowWrapper({
       },
       children: [
         isBgWithPattern && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
-        controls && /* @__PURE__ */ jsx(Controls, {}),
+        controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
+        zoomable && !editor.hasOnNodeClick && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {}),
         children2
       ]
     }
@@ -9266,6 +9138,7 @@ function LikeC4Diagram({
   background = "dots",
   controls = !1,
   showElementLinks = !0,
+  showDiagramTitle = !0,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -9302,6 +9175,8 @@ function LikeC4Diagram({
         {
           view,
           readonly,
+          pannable,
+          zoomable,
           fitViewEnabled: fitView2,
           fitViewPadding,
           showElementLinks,
@@ -9318,13 +9193,13 @@ function LikeC4Diagram({
           onCanvasDblClick,
           children: [
             /* @__PURE__ */ jsx(
-              KeepAspectRatio,
+              KeepAspectRatioContainer,
               {
                 className: clsx(rootClassName, className),
                 enabled: keepAspectRatio,
                 width: view.width,
                 height: view.height,
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxs(
                   XYFlow,
                   {
                     className: clsx(
@@ -9338,9 +9213,10 @@ function LikeC4Diagram({
                     controls,
                     defaultNodes: initialRef.current.defaultNodes,
                     defaultEdges: initialRef.current.defaultEdges,
-                    pannable,
-                    zoomable,
-                    children: readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel2, {})
+                    children: [
+                      readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel, {}),
+                      showDiagramTitle === !0 && /* @__PURE__ */ jsx(DiagramTitlePanel, {})
+                    ]
                   }
                 )
               }
@@ -9374,6 +9250,7 @@ function StaticLikeC4Diagram({
       controls: !1,
       background,
       showElementLinks: !0,
+      showDiagramTitle: !1,
       nodesSelectable: !1,
       nodesDraggable: !1,
       ...rest