@likec4/diagram 1.0.2 → 1.1.0

package/dist/index.mjs

@@ -6,12 +6,12 @@ import { createContext, memo, useState, forwardRef, useCallback, useMemo, useEff
 import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
 import { shallow } from "zustand/shallow";
 import { createPortal } from "react-dom";
-import { 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, Stack, Text, TooltipGroup, Divider, Flex, Tooltip, ColorSwatch, CheckIcon, rem, Select, Card, ActionIcon, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Group, Anchor, CopyButton, Button, useMantineColorScheme } from "@mantine/core";
 import { invariant, isAncestor, nonNullable, nonexhaustive, defaultTheme, ElementShapes } from "@likec4/core";
 import { DEV } from "esm-env";
 import { shallowEqual, deepEqual } from "fast-equals";
 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";
 var rootClassName = "likec4-diagram-root";
@@ -874,7 +874,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 +1026,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 +1064,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 +1072,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 +1120,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 +1134,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 +1270,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 +1279,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 +2039,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 +2057,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 +2131,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 +2154,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 +2175,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 +3625,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 +3636,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 +3645,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 +3948,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 +3971,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;
     }
   }
@@ -5320,13 +5320,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 +5334,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);
@@ -5751,22 +5751,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 +5776,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 +5858,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 +6504,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 +7224,7 @@ const ZIndexes = {
   initialized: !1,
   previousViews: [],
   viewportChanged: !1,
+  focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
@@ -7230,6 +7254,7 @@ function createDiagramStore(props) {
               view: currentView,
               lastOnNavigate,
               previousViews,
+              focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               hoveredEdgeId,
@@ -7239,7 +7264,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 +7274,7 @@ function createDiagramStore(props) {
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
+                focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId
               },
@@ -7275,18 +7301,18 @@ function createDiagramStore(props) {
           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);
+            for (const change of changes) {
+              if (change.op === "change-shape") {
+                for (const target of change.targets)
+                  newShapes.set(target, change.shape);
                 continue;
               }
-              if (change2.op === "change-color") {
-                for (const target of change2.targets)
-                  newColor.set(target, change2.color);
+              if (change.op === "change-color") {
+                for (const target of change.targets)
+                  newColor.set(target, change.color);
                 continue;
               }
-              nonexhaustive(change2);
+              nonexhaustive(change);
             }
             get2().xyflow.setNodes(
               (nodes) => nodes.map((node) => {
@@ -7345,15 +7371,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,
-              padding: fitViewPadding,
+              duration: centerNode && focusedNodeId ? 300 : 400,
+              padding: centerNode ? 0 : 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 +7420,6 @@ 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,
-    {
-      ...rest,
-      className: clsx(wrapper, className),
-      style: enabled ? {
-        ...style2,
-        aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-        maxHeight: Math.ceil(height)
-      } : style2,
-      children: children2
-    }
-  );
-}
 const {
   primary,
   secondary,
@@ -7660,10 +7663,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,21 +7738,25 @@ 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, schedulePending]
+  ), useEffect(
+    () => diagramApi.subscribe(
+      (s) => s.viewportChanged,
+      setViewportMoved
     ),
     [diagramApi]
   ), useRafEffect(
@@ -7795,25 +7802,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 +7888,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 = "bexn7q0", edgePathBg = "bexn7q1", fillStrokeCtx = "bexn7q2", cssEdgePath = "bexn7q3", varLabelX = "var(--bexn7q4)", varLabelY = "var(--bexn7q5)", edgeLabel = "bexn7q7", edgeLabelBody = "bexn7q8";
 function getNodeIntersection(intersectionNode, targetNode) {
   const {
     width: intersectionNodeWidth,
@@ -7973,7 +7983,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
     });
     edgePath = _edgePath, labelX = _labelX, labelY = _labelY;
   }
-  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",
       {
@@ -8003,7 +8013,7 @@ const isSamePoint = (a, b) => Math.abs(a - b) < 2.1, isSamePosition = (a, [bx, b
     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({
@@ -8059,475 +8069,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 +8123,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 +8171,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 +8181,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 +8436,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 +8462,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 +8487,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 +8499,7 @@ function ElementNode({
     case dragging:
       animate = "idle";
       break;
-    case ((isInteractive || hasOnNavigateTo) && isHovered):
+    case (isInteractive && isHovered):
       animate = "hovered";
       break;
     case selected2:
@@ -9067,31 +8615,32 @@ const XYFlowBackground = memo(({ background }) => {
   return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
 }, deepEqual);
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef();
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = useRef(), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+    dblclickTimeout.current = void 0;
+  }, 250), !1);
   return useMemo(() => ({
-    onPaneClick: (event) => {
-      var _a;
-      diagramApi.setState(
-        {
-          lastClickedNodeId: null,
-          lastClickedEdgeId: null
-        },
-        !1,
-        "onPaneClick"
-      );
+    onDoubleClick: (event) => {
+      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
       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;
+      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
+      const { focusedNodeId, fitDiagram, onCanvasClick } = diagramApi.getState();
+      if (onCanvasClick) {
+        onCanvasClick(event);
+        return;
+      }
+      focusedNodeId && (fitDiagram(), event.stopPropagation());
     },
     onNodeContextMenu: (event, xynode) => {
       var _a, _b;
@@ -9114,12 +8663,21 @@ 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) => {
+      const { zoomable, fitDiagram, onNodeClick } = diagramApi.getState();
+      onNodeClick || zoomable && (fitDiagram(xynode), event.stopPropagation());
     },
     onEdgeClick: (event, xyedge) => {
       var _a, _b;
@@ -9132,6 +8690,18 @@ function useXYFlowEvents() {
     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);
     }
   }), [diagramApi, xyflowApi]);
 }
@@ -9151,15 +8721,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 +8738,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 +8779,27 @@ 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,
       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
       },
@@ -9302,6 +8867,8 @@ function LikeC4Diagram({
         {
           view,
           readonly,
+          pannable,
+          zoomable,
           fitViewEnabled: fitView2,
           fitViewPadding,
           showElementLinks,
@@ -9318,7 +8885,7 @@ function LikeC4Diagram({
           onCanvasDblClick,
           children: [
             /* @__PURE__ */ jsx(
-              KeepAspectRatio,
+              KeepAspectRatioContainer,
               {
                 className: clsx(rootClassName, className),
                 enabled: keepAspectRatio,
@@ -9338,8 +8905,6 @@ function LikeC4Diagram({
                     controls,
                     defaultNodes: initialRef.current.defaultNodes,
                     defaultEdges: initialRef.current.defaultEdges,
-                    pannable,
-                    zoomable,
                     children: readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel2, {})
                   }
                 )