likec4 1.14.0 → 1.15.0

package/dist/__app__/src/chunks/{main-l0NUY_pP.js → main-Q7z-4OPp.js}

@@ -3,7 +3,7 @@ import * as React from "react";
 import { createContext as createContext$1, useContext as useContext$1, useId as useId$1, useEffect as useEffect$1, useCallback as useCallback$1, Component, useLayoutEffect as useLayoutEffect$1, useRef as useRef$1, useInsertionEffect, useMemo as useMemo$1, forwardRef as forwardRef$1, Fragment, createElement as createElement$1, Children, isValidElement, useState as useState$1, memo as memo$1, Suspense, lazy, useSyncExternalStore, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./tanstack-router-CfO1HFS2.js";
-import { e as Container, f as Title, a as Text$6, G as Group, g as Button, h as useMergedRef, t as themeToVars, i as useMantineStyleNonce, M as MantineContext, j as useComputedColorScheme, k as Popover, l as PopoverTarget, B as Box, T as ThemeIcon, m as PopoverDropdown, S as ScrollAreaAutosize, c as clsx, A as ActionIcon$1, n as Stack$1, o as useTree, p as Tree, q as useLocalStorage, r as useStateHistory, s as Space, v as SegmentedControl, w as useHotkeys, F as FocusTrap, x as Tooltip$3, y as Menu, z as MenuTarget, D as MenuDropdown, E as MenuLabel, H as MenuDivider, J as TooltipGroup, K as MenuItem, L as CloseButton, N as keys$1, O as ColorSwatch, Q as Divider, R as Flex, U as CheckIcon, V as rem, W as Slider, P as Paper, X as useDebouncedValue, Y as HoverCard, Z as HoverCardTarget, _ as UnstyledButton, $ as HoverCardDropdown, a0 as Anchor, a1 as CopyButton$1, C as Card, b as CardSection, a2 as Spoiler, a3 as Badge, a4 as ButtonGroup, a5 as Tabs, a6 as TabsList, a7 as TabsTab, a8 as TabsPanel, a9 as useHover, aa as FloatingIndicator, ab as useUncontrolled, ac as clampUseMovePosition, ad as useMove, ae as ActionIconGroup, af as Overlay, ag as Notification, ah as Code, ai as createTheme, aj as MantineProvider, ak as useInViewport, al as SimpleGrid, u as useMantineColorScheme, am as Drawer, an as ScrollArea, ao as Alert, ap as Select, aq as ModalRoot, ar as ModalOverlay, as as ModalContent, at as ModalBody, au as useMantineTheme, av as useMediaQuery, aw as useDisclosure, ax as LoadingOverlay, ay as useCallbackRef, az as Burger, aA as Loader } from "./mantine-BQY2cnn-.js";
+import { e as Container, f as Title, a as Text$6, G as Group, g as Button, h as useMergedRef, t as themeToVars, i as useMantineStyleNonce, M as MantineContext, j as useComputedColorScheme, k as Popover, l as PopoverTarget, B as Box, T as ThemeIcon, m as PopoverDropdown, S as ScrollAreaAutosize, c as clsx, A as ActionIcon$1, n as Stack$1, o as useTree, p as Tree, q as useLocalStorage, r as useStateHistory, s as Space, v as SegmentedControl, w as useHotkeys, F as FocusTrap, x as Tooltip$3, y as Menu, z as MenuTarget, D as MenuDropdown, E as MenuLabel, H as MenuDivider, J as TooltipGroup, K as MenuItem, L as CloseButton, N as keys$1, O as ColorSwatch, Q as Divider, R as Flex, U as CheckIcon, V as rem, W as Slider, P as Paper, X as useDebouncedValue, Y as HoverCard, Z as HoverCardTarget, _ as UnstyledButton, $ as HoverCardDropdown, a0 as Anchor, a1 as CopyButton$1, C as Card, b as CardSection, a2 as Spoiler, a3 as Badge, a4 as ButtonGroup, a5 as Tabs, a6 as TabsList, a7 as TabsTab, a8 as TabsPanel, a9 as useHover, aa as FloatingIndicator, ab as useUncontrolled, ac as clampUseMovePosition, ad as useMove, ae as ActionIconGroup, af as Overlay, ag as Notification, ah as Code, ai as createTheme, aj as MantineProvider, ak as useInViewport, al as SimpleGrid, u as useMantineColorScheme, am as Drawer, an as ScrollArea, ao as Alert, ap as Select, aq as ModalRoot, ar as ModalOverlay, as as ModalContent, at as ModalBody, au as useMantineTheme, av as useMediaQuery, aw as useDisclosure, ax as LoadingOverlay, ay as useCallbackRef, az as Burger, aA as Loader } from "./mantine-Dx0sIYv1.js";
 import { withOverviewGraph, ComponentName, isDevelopment, krokiD2SvgUrl, basepath, useHashHistory } from "../const.js";
 import { useLikeC4ModelAtom } from "virtual:likec4/model";
 import { g as getDefaultExportFromCjs, d as useReactFlow, e as useStoreApi, f as useStore$1, h as useNodesData, j as getNodeDimensions, k as createWithEqualityFn, l as applyNodeChanges, m as applyEdgeChanges, n as getViewportForBounds, o as getBoundsOfRects, s as shallow$1, p as boxToRect, q as useStoreWithEqualityFn, M as MarkerType, H as Handle, P as Position, r as getBezierPath, B as BaseEdge, E as EdgeLabelRenderer, i as index, t as Panel$1, V as ViewportPortal, R as ReactFlowProvider, N as NodeToolbar, v as useOnViewportChange, b as Background, c as BackgroundVariant } from "./likec4-zEZHE7gJ.js";
@@ -5240,7 +5240,7 @@ function useAnimate() {
     scope.animations.forEach((animation) => animation.stop());
   }), [scope, animate];
 }
-var rootClassName = "likec4-diagram-root", s$1 = { done: !1, hasNext: !1 };
+var rootClassName = "likec4-diagram-root", s$2 = { done: !1, hasNext: !1 };
 function x$1(t2, ...o2) {
   let n2 = t2, u2 = o2.map((e2) => "lazy" in e2 ? f$2(e2) : void 0), p2 = 0;
   for (; p2 < o2.length; ) {
@@ -5263,7 +5263,7 @@ function x$1(t2, ...o2) {
 }
 function A(t2, o2, n2) {
   if (n2.length === 0) return o2.push(t2), !1;
-  let u2 = t2, p2 = s$1, e2 = !1;
+  let u2 = t2, p2 = s$2, e2 = !1;
   for (let [r2, a2] of n2.entries()) {
     let { index: y2, items: i2 } = a2;
     if (i2.push(u2), p2 = a2(u2, y2, i2), a2.index += 1, p2.hasNext) {
@@ -5302,23 +5302,23 @@ function i$8(...e2) {
 }
 function o$7() {
   let e2 = /* @__PURE__ */ new Set();
-  return (t2) => e2.has(t2) ? s$1 : (e2.add(t2), { done: !1, hasNext: !0, next: t2 });
+  return (t2) => e2.has(t2) ? s$2 : (e2.add(t2), { done: !1, hasNext: !0, next: t2 });
 }
-function u$8(t2, n2, a2) {
+function u$9(t2, n2, a2) {
   let o2 = (r2) => t2(r2, ...n2);
   return a2 === void 0 ? o2 : Object.assign(o2, { lazy: a2, lazyArgs: n2 });
 }
-function u$7(r2, n2, a2) {
+function u$8(r2, n2, a2) {
   let o2 = r2.length - n2.length;
   if (o2 === 0) return r2(...n2);
-  if (o2 === 1) return u$8(r2, n2, a2);
+  if (o2 === 1) return u$9(r2, n2, a2);
   throw new Error("Wrong number of arguments");
 }
 function r$4(...n2) {
-  return u$7(Object.values, n2);
+  return u$8(Object.values, n2);
 }
-function u$6(...e2) {
-  return u$7(i$7, e2);
+function u$7(...e2) {
+  return u$8(i$7, e2);
 }
 function i$7(e2, a2) {
   let n2 = [];
@@ -5329,26 +5329,26 @@ function i$7(e2, a2) {
   return n2;
 }
 function i$6(...e2) {
-  return u$7(r$3, e2);
+  return u$8(r$3, e2);
 }
 var r$3 = (e2, t2) => e2.length >= t2, T$1 = { asc: (r2, n2) => r2 > n2, desc: (r2, n2) => r2 < n2 };
 function m$2(r2, n2) {
   let [e2, ...o2] = n2;
-  if (!s(e2)) {
-    let t2 = u$5(...o2);
+  if (!s$1(e2)) {
+    let t2 = u$6(...o2);
     return r2(e2, t2);
   }
-  let a2 = u$5(e2, ...o2);
+  let a2 = u$6(e2, ...o2);
   return (t2) => r2(t2, a2);
 }
-function u$5(r2, n2, ...e2) {
-  let o2 = typeof r2 == "function" ? r2 : r2[0], a2 = typeof r2 == "function" ? "asc" : r2[1], { [a2]: t2 } = T$1, i2 = n2 === void 0 ? void 0 : u$5(n2, ...e2);
+function u$6(r2, n2, ...e2) {
+  let o2 = typeof r2 == "function" ? r2 : r2[0], a2 = typeof r2 == "function" ? "asc" : r2[1], { [a2]: t2 } = T$1, i2 = n2 === void 0 ? void 0 : u$6(n2, ...e2);
   return (y2, c) => {
     let l2 = o2(y2), p2 = o2(c);
     return t2(l2, p2) ? 1 : t2(p2, l2) ? -1 : i2?.(y2, c) ?? 0;
   };
 }
-function s(r2) {
+function s$1(r2) {
   if (d$2(r2)) return !0;
   if (typeof r2 != "object" || !Array.isArray(r2)) return !1;
   let [n2, e2, ...o2] = r2;
@@ -5356,7 +5356,7 @@ function s(r2) {
 }
 var d$2 = (r2) => typeof r2 == "function" && r2.length === 1;
 function m$1(...r2) {
-  return u$7(o$6, r2);
+  return u$8(o$6, r2);
 }
 function o$6(r2, t2) {
   let e2 = [...r2];
@@ -5367,11 +5367,11 @@ function a$3(...r2) {
 }
 var o$5 = (r2, n2) => [...r2].sort(n2);
 function l$2(...e2) {
-  return u$7(u$4, e2);
+  return u$8(u$5, e2);
 }
-var u$4 = (e2, a2, n2) => e2.reduce(a2, n2);
+var u$5 = (e2, a2, n2) => e2.reduce(a2, n2);
 function t$7(...e2) {
-  return u$7(r$2, e2);
+  return u$8(r$2, e2);
 }
 function r$2(e2) {
   return [...e2].reverse();
@@ -5386,16 +5386,16 @@ function b(t2) {
     return t2(e2 * n2) / n2;
   };
 }
-function p$2(...o2) {
-  return u$7(t$6, o2);
+function p$3(...o2) {
+  return u$8(t$6, o2);
 }
 var t$6 = (o2, e2) => o2[e2];
 function t$5(...n2) {
-  return u$7(o$4, n2);
+  return u$8(o$4, n2);
 }
 var o$4 = (n2) => n2.length === 1 ? n2[0] : void 0;
 function d$1(...r2) {
-  return u$7(i$5, r2);
+  return u$8(i$5, r2);
 }
 var i$5 = (r2, t2) => {
   let a2 = [[], []];
@@ -5403,16 +5403,16 @@ var i$5 = (r2, t2) => {
   return a2;
 };
 function t$4(...n2) {
-  return u$7(Object.keys, n2);
+  return u$8(Object.keys, n2);
 }
 function a$2(...e2) {
-  return u$7(n$5, e2);
+  return u$8(n$5, e2);
 }
 var n$5 = (e2) => e2.at(-1);
 function m(...a2) {
-  return u$7(o$3, a2, p$1);
+  return u$8(o$3, a2, p$2);
 }
-var o$3 = (a2, e2) => a2.map(e2), p$1 = (a2) => (e2, r2, t2) => ({ done: !1, hasNext: !0, next: a2(e2, r2, t2) });
+var o$3 = (a2, e2) => a2.map(e2), p$2 = (a2) => (e2, r2, t2) => ({ done: !1, hasNext: !0, next: a2(e2, r2, t2) });
 function t$3(r2) {
   return typeof r2 == "string";
 }
@@ -5443,15 +5443,15 @@ function n$1(e2) {
 function n(e2) {
   return e2 === void 0 ? !0 : typeof e2 == "string" || Array.isArray(e2) ? e2.length === 0 : Object.keys(e2).length === 0;
 }
-function u$3(...e2) {
-  return u$7(o$1, e2, i$4);
+function u$4(...e2) {
+  return u$8(o$1, e2, i$4);
 }
 function o$1(e2, r2) {
   return e2.forEach(r2), e2;
 }
 var i$4 = (e2) => (r2, n2, t2) => (e2(r2, n2, t2), { done: !1, hasNext: !0, next: r2 });
 function i$3(...e2) {
-  return u$7(a$1, e2);
+  return u$8(a$1, e2);
 }
 function a$1(e2, o2) {
   let r2 = {};
@@ -5459,9 +5459,9 @@ function a$1(e2, o2) {
   return r2;
 }
 function i$2(...e2) {
-  return u$7(p, e2);
+  return u$8(p$1, e2);
 }
-var p = (e2, a2) => {
+var p$1 = (e2, a2) => {
   let n2 = {};
   for (let [d2, t2] of e2.entries()) {
     let y2 = a2(t2, d2, e2);
@@ -5473,33 +5473,54 @@ var p = (e2, a2) => {
   return n2;
 };
 function T(...a2) {
-  return u$7(l, a2, y$2);
+  return u$8(l, a2, y$3);
 }
-var l = (a2, e2) => a2.filter(e2), y$2 = (a2) => (e2, t2, o2) => a2(e2, t2, o2) ? { done: !1, hasNext: !0, next: e2 } : s$1, e$1 = (n2) => Object.assign(n2, { single: !0 });
+var l = (a2, e2) => a2.filter(e2), y$3 = (a2) => (e2, t2, o2) => a2(e2, t2, o2) ? { done: !1, hasNext: !0, next: e2 } : s$2, e$1 = (n2) => Object.assign(n2, { single: !0 });
 function f(...e2) {
-  return u$7(i$1, e2, e$1(u$2));
+  return u$8(i$1, e2, e$1(u$3));
 }
-var i$1 = (e2, n2) => e2.find(n2), u$2 = (e2) => (n2, t2, o2) => e2(n2, t2, o2) ? { done: !0, hasNext: !0, next: n2 } : s$1;
+var i$1 = (e2, n2) => e2.find(n2), u$3 = (e2) => (n2, t2, o2) => e2(n2, t2, o2) ? { done: !0, hasNext: !0, next: n2 } : s$2;
 function d(...e2) {
-  return u$7(r$1, e2, e$1(o));
+  return u$8(r$1, e2, e$1(o));
 }
 var r$1 = ([e2]) => e2, o = () => a, a = (e2) => ({ hasNext: !0, next: e2, done: !0 });
 function t$2(...r2) {
-  return u$7(Object.entries, r2);
+  return u$8(Object.entries, r2);
+}
+function p(...n2) {
+  return u$8(u$2, n2);
+}
+function u$2(n2, t2 = [], r2 = []) {
+  if (typeof n2 == "function") return n2;
+  if (typeof n2 != "object" || n2 === null || n2 instanceof Date || n2 instanceof RegExp) return structuredClone(n2);
+  let o2 = t2.indexOf(n2);
+  return o2 >= 0 ? r2[o2] : (t2.push(n2), Array.isArray(n2) ? y$2(n2, t2, r2) : s(n2, t2, r2));
+}
+function s(n2, t2, r2) {
+  let o2 = {};
+  r2.push(o2);
+  for (let [e2, c] of Object.entries(n2)) o2[e2] = u$2(c, t2, r2);
+  return o2;
+}
+function y$2(n2, t2, r2) {
+  let o2 = [];
+  r2.push(o2);
+  for (let [e2, c] of n2.entries()) o2[e2] = u$2(c, t2, r2);
+  return o2;
 }
 function t$1(...a2) {
-  return u$7(e, a2);
+  return u$8(e, a2);
 }
 var e = (a2, o2) => o2.every((l2) => l2(a2));
 function y$1(...a2) {
-  return u$7(r, a2);
+  return u$8(r, a2);
 }
 var r = (a2, o2) => o2.some((e2) => e2(a2));
 function u$1(...e2) {
-  return u$7(b(Math.ceil), e2);
+  return u$8(b(Math.ceil), e2);
 }
 function u(...n2) {
-  return u$7(i, n2);
+  return u$8(i, n2);
 }
 var i = (n2, { min: e2, max: r2 }) => e2 !== void 0 && n2 < e2 ? e2 : r2 !== void 0 && n2 > r2 ? r2 : n2;
 function nonNullable(value, message) {
@@ -5514,6 +5535,10 @@ function invariant(condition, message) {
 function nonexhaustive(value) {
   throw new Error(`NonExhaustive value: ${value}`);
 }
+var ElementKind;
+((ElementKind2) => {
+  ElementKind2.Group = "@group";
+})(ElementKind || (ElementKind = {}));
 const ElementShapes = [
   "rectangle",
   "person",
@@ -5568,6 +5593,13 @@ function extractStep(id2) {
 function getParallelStepsPrefix(id2) {
   return isStepEdgeId(id2) && id2.includes(".") ? id2.slice(0, id2.indexOf(".") + 1) : null;
 }
+var ComputedNode;
+((ComputedNode2) => {
+  function isNodesGroup(node2) {
+    return node2.kind === ElementKind.Group;
+  }
+  ComputedNode2.isNodesGroup = isNodesGroup;
+})(ComputedNode || (ComputedNode = {}));
 function getBBoxCenter({
   x: x2,
   y: y2,
@@ -5579,6 +5611,13 @@ function getBBoxCenter({
     y: y2 + height / 2
   };
 }
+var DiagramNode;
+((DiagramNode2) => {
+  function isNodesGroup(node2) {
+    return node2.kind === ElementKind.Group;
+  }
+  DiagramNode2.isNodesGroup = isNodesGroup;
+})(DiagramNode || (DiagramNode = {}));
 var naturalCompareLite = { exports: {} };
 naturalCompareLite.exports;
 /*
@@ -6210,14 +6249,22 @@ class Leaf extends Rect {
   }
 }
 function createLayoutConstraints(xyflowApi, editingNodeIds) {
-  const { parentLookup, nodeLookup } = xyflowApi.getState(), rects = /* @__PURE__ */ new Map(), traverse = new Array();
+  const { parentLookup, nodeLookup } = xyflowApi.getState(), rects = /* @__PURE__ */ new Map(), ancestorsOf = (nodeId) => {
+    const ancestors = [];
+    let parent = nodeLookup.get(nodeId)?.parentId, parentNode;
+    for (; parent && (parentNode = nodeLookup.get(parent)); )
+      ancestors.push(parentNode.id), parent = parentNode.parentId;
+    return ancestors;
+  }, ancestorsOfDraggingNodes = new Set(
+    editingNodeIds.flatMap(ancestorsOf)
+  ), traverse = new Array();
   for (const [, xynode] of nodeLookup)
     e$3(xynode.parentId) && traverse.push({
       xynode,
       parent: null
     });
   for (; traverse.length > 0; ) {
-    const { xynode, parent } = traverse.shift(), shouldTraverse = !editingNodeIds.has(xynode.id) && xynode.type === "compound" && editingNodeIds.values().some((x2) => isAncestor(xynode.id, x2)), rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
+    const { xynode, parent } = traverse.shift(), shouldTraverse = !editingNodeIds.includes(xynode.id) && xynode.type === "compound" && ancestorsOfDraggingNodes.has(xynode.id), rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
     rects.set(xynode.id, rect), shouldTraverse && parentLookup.get(xynode.id)?.forEach((child) => {
       traverse.push({
         xynode: child,
@@ -6264,9 +6311,14 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   function onMove(updater) {
     rectsToUpdate.length !== 0 && (animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null, updater(
-        [
-          ...editingNodeIds.values().filter((id2) => rects.has(id2) && nodeLookup.has(id2)).map((id2) => ({ rect: nonNullable(rects.get(id2)), node: nodeLookup.get(id2) }))
-        ]
+        x$1(
+          editingNodeIds,
+          T((id2) => rects.has(id2) && nodeLookup.has(id2)),
+          m((id2) => ({
+            rect: nonNullable(rects.get(id2)),
+            node: nonNullable(nodeLookup.get(id2))
+          }))
+        )
       ), updateXYFlowNodes();
     }));
   }
@@ -6281,13 +6333,16 @@ function useLayoutConstraints() {
     onNodeDragStart: (_event, xynode) => {
       const { cancelSaveManualLayout, xystore } = diagramApi.getState(), { nodeLookup } = xystore.getState();
       cancelSaveManualLayout();
-      const draggingNodes = new Set(
-        nodeLookup.values().filter((x2) => x2.dragging === !0 || x2.id === xynode.id || x2.selected).filter((x2) => x2.draggable === !0).map((x2) => x2.id)
+      const draggingNodes = x$1(
+        Array.from(nodeLookup.values()),
+        T((n2) => n2.dragging === !0 || n2.id === xynode.id || n2.selected === !0),
+        T((n2) => n2.draggable !== !1),
+        m((x2) => x2.id)
       );
-      solverRef.current = createLayoutConstraints(xystore, draggingNodes);
+      i$6(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, draggingNodes));
     },
     onNodeDrag: () => {
-      invariant(solverRef.current, "solverRef.current should be defined"), solverRef.current.onMove((nodes) => {
+      solverRef.current?.onMove((nodes) => {
         nodes.forEach(({ rect, node: node2 }) => {
           rect.positionAbsolute = node2.internals.positionAbsolute;
         });
@@ -7282,38 +7337,47 @@ function diagramViewToXYFlowData(view, opts) {
   const ns = "", nodeById = (id2) => nonNullable(nodeLookup.get(id2), `Node not found: ${id2}`);
   let next;
   for (; next = traverse.shift(); ) {
-    const { node: node2, parent } = next, isCompound = i$6(node2.children, 1);
+    const { node: node2, parent } = next, isCompound = i$6(node2.children, 1) || node2.kind == ElementKind.Group;
     isCompound && traverse.push(...node2.children.map((child) => ({ node: nodeById(child), parent: node2 })));
     const position2 = {
       x: node2.position[0],
       y: node2.position[1]
     };
     parent && (position2.x -= parent.position[0], position2.y -= parent.position[1]);
-    const id2 = ns + node2.id, draggable = opts.draggable;
-    xynodes.push({
-      id: id2,
-      type: isCompound ? "compound" : "element",
-      data: {
-        fqn: node2.id,
-        element: node2
-      },
-      draggable,
-      selectable: opts.selectable,
+    const base = {
+      id: ns + node2.id,
+      draggable: opts.draggable,
+      selectable: opts.selectable && node2.kind !== ElementKind.Group,
       focusable: opts.selectable && !isCompound,
       deletable: !1,
       position: position2,
       zIndex: isCompound ? ZIndexes$2.Compound : ZIndexes$2.Element,
       width: node2.width,
       height: node2.height,
-      hidden: !visiblePredicate(node2),
-      // parentId: parent ? ns + parent.id : null,
+      hidden: node2.kind !== ElementKind.Group && !visiblePredicate(node2),
       ...parent && {
         parentId: ns + parent.id
-      },
-      ...isCompound && {
+      }
+    };
+    xynodes.push(
+      isCompound ? {
+        ...base,
+        type: "compound",
+        data: {
+          fqn: node2.id,
+          isViewGroup: node2.kind === ElementKind.Group,
+          element: node2
+        },
         dragHandle: ".likec4-compound-title"
+      } : {
+        ...base,
+        type: "element",
+        data: {
+          fqn: node2.id,
+          element: node2
+        }
       }
-    });
+    );
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id2 = ns + edge.id;
@@ -7475,13 +7539,13 @@ function createDiagramStore(props2) {
             });
             update.xynodes = update.xynodes.map((update2) => {
               const existing = xynodes2.find((n2) => n2.id === update2.id);
-              return existing && existing.type === update2.type && deepEqual(existing.parentId ?? null, update2.parentId ?? null) ? existing.hidden === update2.hidden && existing.width === update2.width && existing.height === update2.height && deepEqual(existing.position, update2.position) && deepEqual(existing.data.element, update2.data.element) ? existing : {
+              return existing && existing.type === update2.type && deepEqual(existing.parentId ?? null, update2.parentId ?? null) ? existing.width === update2.width && existing.height === update2.height && deepEqual(existing.hidden ?? !1, update2.hidden ?? !1) && deepEqual(existing.position, update2.position) && deepEqual(existing.data, update2.data) ? existing : {
                 ...existing,
                 ...update2
               } : update2;
             }), isSameView && !nextView.hasLayoutDrift && (update.xyedges = update.xyedges.map((update2) => {
               const existing = xyedges2.find((n2) => n2.id === update2.id);
-              return existing ? existing.hidden === update2.hidden && deepEqual(existing.data.label, update2.data.label) && deepEqual(existing.data.controlPoints, update2.data.controlPoints) && deepEqual(existing.data.edge, update2.data.edge) ? existing : {
+              return existing ? deepEqual(existing.hidden ?? !1, update2.hidden ?? !1) && deepEqual(existing.data.label, update2.data.label) && deepEqual(existing.data.controlPoints, update2.data.controlPoints) && deepEqual(existing.data.edge, update2.data.edge) ? existing : {
                 ...existing,
                 ...update2,
                 data: {
@@ -7871,7 +7935,7 @@ function createDiagramStore(props2) {
             ));
           },
           highlightByElementNotation: (notation, onlyOfKind) => {
-            const { xynodes: xynodes2, xyedges: xyedges2 } = get(), dimmed2 = new StringSet(m(xyedges2, p$2("id")));
+            const { xynodes: xynodes2, xyedges: xyedges2 } = get(), dimmed2 = new StringSet(m(xyedges2, p$3("id")));
             xynodes2.forEach(({ id: id2, data }) => {
               const node2 = data.element;
               (node2.shape !== notation.shape || node2.color !== notation.color || !notation.kinds.includes(node2.kind) || onlyOfKind && node2.kind !== onlyOfKind) && dimmed2.add(id2);
@@ -7912,7 +7976,12 @@ function createDiagramStore(props2) {
             }
           },
           align: (mode) => {
-            const { scheduleSaveManualLayout, xystore } = get(), { nodeLookup, parentLookup } = xystore.getState(), selectedNodes = new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)), nodesToAlign = new Set(selectedNodes.difference(new Set(parentLookup.keys()))), constraints = createLayoutConstraints(xystore, nodesToAlign);
+            const { scheduleSaveManualLayout, xystore } = get(), { nodeLookup, parentLookup } = xystore.getState(), nodesToAlign = [...new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)).difference(new Set(parentLookup.keys()))];
+            if (!i$6(nodesToAlign, 2)) {
+              console.warn("At least 2 nodes must be selected to align");
+              return;
+            }
+            const constraints = createLayoutConstraints(xystore, nodesToAlign);
             let getEdgePosition, getPosition, propertyToEdit;
             switch (mode) {
               case "Left":
@@ -7966,7 +8035,7 @@ function DiagramContextProvider({
     xyflow,
     view,
     getContainer,
-    whereFilter: structuredClone(whereFilter),
+    whereFilter: p(whereFilter),
     ...props2
   })), useUpdateEffect(
     () => store.current?.setState({ xyflow, xystore, getContainer }, !1, "update xyflow and xystore"),
@@ -7977,7 +8046,7 @@ function DiagramContextProvider({
   ), useUpdateEffect(
     () => {
       const current = store.current;
-      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
+      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: p(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
     },
     [view, whereFilter],
     (a2, b2) => shallowEqual(a2[0], b2[0]) && deepEqual(a2[1], b2[1])
@@ -11149,8 +11218,7 @@ createGlobalThemeContract({
     borderRadius: "node-border-radius"
   }
 }, (value) => `xy-${value}`);
-const mantine = themeToVars({});
-function LikeC4CustomColors({ customColors }) {
+const mantine = themeToVars({}), LikeC4CustomColors = memo$1(({ customColors }) => {
   function toStyle(name, colorValues) {
     const rules = new Array(
       ...t$2(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
@@ -11169,8 +11237,9 @@ function LikeC4CustomColors({ customColors }) {
   }
   const styles = t$2(customColors).map(([name, color2]) => toStyle(name, color2)).join(`
 `), nonce = useMantineStyleNonce()?.();
-  return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, ...nonce && { nonce } }) });
-}
+  return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
+}, deepEqual);
+LikeC4CustomColors.displayName = "LikeC4CustomColors";
 var cssReactFlow = "_17jps3v0", notInitialized = "_17jps3v1", cssDisablePan = "_17jps3v2", cssTransparentBg = "_17jps3v3", cssNoControls = "_17jps3v4";
 const LikeC4ModelContext = createContext$1(null);
 function useLikeC4Model(strict, type) {
@@ -13766,7 +13835,7 @@ function createNode$1(nodeType, element, ctx) {
     return node2;
   const g = ctx.g, parent = x$1(
     element.ancestors(),
-    u$6((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
+    u$7((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
     d(),
     (found) => found ? createNode$1("compound", found, ctx) : null
   ), xynode = {
@@ -13830,7 +13899,7 @@ function layout$1(edgeId, view, likec4model) {
     [...all],
     m$1(compareFqnHierarchically),
     t$7(),
-    u$3((id2) => {
+    u$4((id2) => {
       const element = likec4model.element(id2);
       createNode$1("element", element, ctx);
     })
@@ -13869,8 +13938,8 @@ function layout$1(edgeId, view, likec4model) {
       port,
       topY: nodebounds(port).position.y
     })),
-    a$3(p$2("topY")),
-    m(p$2("port"))
+    a$3(p$3("topY")),
+    m(p$3("port"))
   ), xynodes = [...ctx.xynodes.values()].map((node2) => (node2.data.ports.in.length > 1 && (node2.data.ports.in = sortedPorts(node2.data.ports.in)), node2.data.ports.out.length > 1 && (node2.data.ports.out = sortedPorts(node2.data.ports.out)), {
     ...node2,
     ...nodebounds(node2.id, node2.parentId)
@@ -14606,7 +14675,7 @@ const classes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   // Spacer between elements in a compound node
   // 0 means no spacer
   spacerHeight: 0,
-  compoundLabelHeight: 5
+  compoundLabelHeight: 1
 }, ZIndexes = {
   empty: 2,
   compound: 2,
@@ -14624,9 +14693,8 @@ function createGraph() {
     rankdir: "LR"
   }), g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel })), g.setDefaultNodeLabel(() => ({})), ["incomers", "subject", "outgoers"].reduce((prev, column) => {
     const c = graphColumn(column);
-    return g.setNode(c.id, {}), g.setNode(c.anchor, { width: 40, height: 5 }), g.setParent(c.anchor, c.id), prev && g.setEdge(prev, c.anchor, {
-      width: 0,
-      weight: 10
+    return g.setNode(c.id, {}), g.setNode(c.anchor, { width: 40, height: 2 }), g.setParent(c.anchor, c.id), prev && g.setEdge(prev, c.anchor, {
+      width: 0
     }), c.anchor;
   }, null), g;
 }
@@ -14694,7 +14762,7 @@ function createNode(column, nodeType, element, ctx) {
     return invariant(node2.type !== "empty", `Node ${element.id} is empty`), node2;
   const g = ctx.g, parent = x$1(
     element.ancestors(),
-    u$6((ancestor) => !isAncestor(ancestor.id, ctx.subjectId)),
+    u$7((ancestor) => !isAncestor(ancestor.id, ctx.subjectId)),
     f(
       (ancestor) => ctx.diagramNodes.has(ancestor.id) || ctx.connected[column].has(ancestor.id) || ctx.scope === "global" && ctx.subjectElement.ascendingSiblings().some((s2) => s2.id === ancestor.id)
     ),
@@ -14712,9 +14780,7 @@ function createNode(column, nodeType, element, ctx) {
   };
   xynodes.set(element.id, xynode);
   const k = graphId(xynode);
-  g.setNode(k.id, sized()), xynode.type === "compound" && (g.setNode(k.id, {
-    padding: 40
-  }), g.setNode(k.port, {
+  g.setNode(k.id, sized()), xynode.type === "compound" && (g.setNode(k.port, {
     width: Sizes.nodeWidth - Sizes.dagre.ranksep,
     height: Sizes.compoundLabelHeight
   }), g.setParent(k.port, k.id));
@@ -14775,7 +14841,7 @@ function processRelations(props2) {
     t$2(),
     m$1((a2, b2) => compareFqnHierarchically(a2[0], b2[0])),
     t$7(),
-    u$3(([sourceId, relations]) => {
+    u$4(([sourceId, relations]) => {
       try {
         props2.forEachIncoming(sourceId, relations);
       } catch (e2) {
@@ -14788,7 +14854,7 @@ function processRelations(props2) {
     t$2(),
     m$1((a2, b2) => compareFqnHierarchically(a2[0], b2[0])),
     t$7(),
-    u$3(([targetId, relations]) => {
+    u$4(([targetId, relations]) => {
       try {
         props2.forEachOutgoing(targetId, relations);
       } catch (e2) {
@@ -14888,8 +14954,8 @@ function layout(subjectId, view, likec4model, scope) {
       port,
       topY: nodebounds(port.id).position.y
     })),
-    a$3(p$2("topY")),
-    m(p$2("port"))
+    a$3(p$3("topY")),
+    m(p$3("port"))
   );
   for (const node2 of xynodes) {
     if (node2.type === "empty") {
@@ -15266,7 +15332,7 @@ const nodeTypes$1 = {
     ...edge,
     animated: animated && isConnected
   };
-}), onlyOneUnique = (data, property) => t$5(i$8(m(data.relations, p$2(property)))), RelationshipsXYFlow = memo$1(function({ subjectId }) {
+}), onlyOneUnique = (data, property) => t$5(i$8(m(data.relations, p$3(property)))), RelationshipsXYFlow = memo$1(function({ subjectId }) {
   const diagramStore = useDiagramStoreApi(), lastClickedNodeRef = useRef$1(null), [_scope, setScope] = useLocalStorage({
     key: "likec4:scope-relationships-of",
     getInitialValueInEffect: !1,
@@ -15458,7 +15524,7 @@ const nodeTypes$1 = {
         ),
         /* @__PURE__ */ jsx(Space, { w: 2 }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", pos: "relative", wrap: "nowrap", flex: "1 0 auto", children: [
-          /* @__PURE__ */ jsx(Box, { fz: "sm", fw: "400", style: { whiteSpace: "nowrap" }, children: "Relationships of" }),
+          /* @__PURE__ */ jsx(Box, { fz: "sm", fw: "400", style: { whiteSpace: "nowrap", userSelect: "none" }, children: "Relationships of" }),
           /* @__PURE__ */ jsx(Box, { flex: "1 0 auto", children: /* @__PURE__ */ jsx(
             SelectElement,
             {
@@ -16583,7 +16649,6 @@ function bezierPath(bezierSpline) {
 const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => isSame(n$2(a2) ? a2[0] : a2.x, n$2(b2) ? b2[0] : b2.x) && isSame(n$2(a2) ? a2[1] : a2.y, n$2(b2) ? b2[1] : b2.y), sameControlPoints = (a2, b2) => a2 === b2 ? !0 : !a2 || !b2 || a2.length !== b2.length ? !1 : a2.every((ap, i2) => isSamePoint(ap, b2[i2])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y), RelationshipEdge = memo$1(function({
   id: id2,
   data,
-  selected,
   sourceX,
   sourceY,
   targetX,
@@ -16757,9 +16822,9 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => is
   };
   let markerStartName = toMarker(diagramEdge.tail), markerEndName = toMarker(diagramEdge.head ?? "normal");
   diagramEdge.dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
-  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null;
-  let labelZIndex = 1 + (isHovered ? ZIndexes$2.Element : edgeLookup.get(id2).zIndex ?? ZIndexes$2.Edge);
-  return isEdgePathEditable && selected && (labelZIndex = (edgeLookup.get(id2).zIndex ?? ZIndexes$2.Edge) - 1), /* @__PURE__ */ jsxs(
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null, edgeZIndex = edgeLookup.get(id2).zIndex ?? ZIndexes$2.Edge;
+  let labelZIndex;
+  return isEdgePathEditable ? labelZIndex = edgeZIndex - 1 : isHovered ? labelZIndex = ZIndexes$2.Element + 1 : labelZIndex = edgeZIndex + 1, /* @__PURE__ */ jsxs(
     "g",
     {
       className: clsx(
@@ -17374,15 +17439,11 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.sel
   selected = !1,
   dragging = !1,
   data: {
-    element: {
-      color: color2,
-      style,
-      depth = 1,
-      ...element
-    }
+    isViewGroup,
+    element
   }
 }) {
-  const opacity = u((style.opacity ?? 100) / 100, {
+  const { depth, style, color: color2 } = element, isNotViewGroup = !isViewGroup, opacity = u((style.opacity ?? 100) / 100, {
     min: 0,
     max: 1
   }), borderTransparency = u(50 - opacity * 50, {
@@ -17406,7 +17467,7 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.sel
     isInteractive: s2.nodesDraggable || s2.nodesSelectable || s2.enableRelationshipsBrowser || !!s2.onNavigateTo && !!element.navigateTo,
     hasOnNavigateTo: !!s2.onNavigateTo,
     enableRelationshipsMode: s2.enableRelationshipsBrowser
-  })), isNavigable = !!element.navigateTo && hasOnNavigateTo, _isToolbarVisible = isEditable && (isHovered || !1), [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300), [animateVariants, animateHandlers] = useFramerAnimateVariants();
+  })), isNavigable = isNotViewGroup && !!element.navigateTo && hasOnNavigateTo, hasRelationshipsBrowser = isNotViewGroup && enableRelationshipsMode, _isToolbarVisible = isNotViewGroup && isEditable && (isHovered || !1), [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 300), [animateVariants, animateHandlers] = useFramerAnimateVariants();
   let animate;
   switch (!0) {
     case (dragging && selected):
@@ -17498,7 +17559,7 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.sel
                   component: "div",
                   className: clsx(
                     title$1,
-                    (isNavigable || enableRelationshipsMode) && titleWithNavigation,
+                    (isNavigable || hasRelationshipsBrowser) && titleWithNavigation,
                     "likec4-compound-title"
                   ),
                   children: element.title
@@ -17523,7 +17584,7 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.sel
             },
             "navigate"
           ),
-          enableRelationshipsMode && /* @__PURE__ */ jsx(
+          hasRelationshipsBrowser && /* @__PURE__ */ jsx(
             Tooltip$3,
             {
               fz: "xs",
@@ -19228,9 +19289,10 @@ function LikeC4Diagram({
     initialWidth: initialWidth ?? view.bounds.width,
     initialHeight: initialHeight ?? view.bounds.height
   });
-  return readonly !== !0 && where && console.warn("where filter is only supported in readonly mode"), useEffect$1(() => {
-    hasLikec4model || (showRelationshipDetails && console.warn("Invalid showRelationshipDetails=true, requires LikeC4ModelProvider"), enableRelationshipsBrowser && console.warn("Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider"));
-  }, []), /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: !0, children: /* @__PURE__ */ jsxs(
+  return useEffect$1(() => {
+    readonly !== !0 && where != null && console.warn(`Ignore filter, supported in readonly mode only
+`, { where }), !hasLikec4model && (showRelationshipDetails && console.warn("Invalid showRelationshipDetails=true, requires LikeC4ModelProvider"), enableRelationshipsBrowser && console.warn("Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider"));
+  }), /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: !0, children: /* @__PURE__ */ jsxs(
     ReactFlowProvider,
     {
       fitView,
@@ -19260,7 +19322,7 @@ function LikeC4Diagram({
             enableDynamicViewWalkthrough,
             enableFocusMode,
             enableRelationshipsBrowser: enableRelationshipsBrowser && hasLikec4model,
-            whereFilter: readonly !== !0 ? where ?? null : null,
+            whereFilter: readonly ? where ?? null : null,
             renderIcon: renderIcon ?? null,
             onCanvasClick: onCanvasClick ?? null,
             onCanvasContextMenu: onCanvasContextMenu ?? null,
@@ -19483,7 +19545,7 @@ function DiagramPreview$1({ diagram }) {
     }
   ) });
 }
-const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-Cvy2bmWn.js"));
+const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-BwT9t8VB.js"));
 function WithOverviewGraph() {
   return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(OverviewGraph, {}) });
 }
@@ -22312,5 +22374,5 @@ export {
   createReactComponent as c,
   e$3 as e,
   nonexhaustive as n,
-  u$7 as u
+  u$8 as u
 };