likec4 1.13.0 → 1.15.0

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

@@ -2,16 +2,16 @@ import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 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-C6UpMKjv.js";
-import { e as Container, f as Title, a as Text$4, G as Group, g as Button, t as themeToVars, h as useMantineStyleNonce, M as MantineContext, i as useMergedRef, j as useTimeout, c as clsx, B as Box, A as ActionIcon$1, P as Paper, k as Code, l as useTree, m as useComputedColorScheme, n as Popover, o as PopoverTarget, p as PopoverDropdown, S as ScrollAreaAutosize, q as Tree, T as ThemeIcon, r as useLocalStorage, s as useStateHistory, v as Space, w as SegmentedControl, x as useHotkeys, y as Tooltip$3, z as Menu, D as MenuTarget, E as MenuDropdown, F as MenuLabel, H as MenuDivider, J as Stack$1, K as TooltipGroup, L as MenuItem, N as CloseButton, O as keys$1, Q as ColorSwatch, R as Divider, U as Flex, V as CheckIcon, W as rem, X as Slider, Y as useDebouncedValue, Z as HoverCard, _ as HoverCardTarget, $ as UnstyledButton, a0 as HoverCardDropdown, a1 as Anchor, a2 as CopyButton$1, C as Card, b as CardSection, a3 as Spoiler, a4 as Badge, a5 as ButtonGroup, a6 as Tabs, a7 as TabsList, a8 as TabsTab, a9 as TabsPanel, aa as useHover, ab as FloatingIndicator, ac as useUncontrolled, ad as clampUseMovePosition, ae as useMove, af as ActionIconGroup, ag as Overlay, ah as Notification, 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-5H3V65ZR.js";
+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-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, R as ReactFlowProvider, N as NodeToolbar, v as useOnViewportChange, b as Background, c as BackgroundVariant } from "./likec4-B4TbAFjc.js";
+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";
 import { RenderIcon } from "../icons.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
-var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root$1 = "_1u4wf803", description$2 = "_1u4wf804", title$4 = "_1u4wf805";
+var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root = "_1u4wf803", description$2 = "_1u4wf804", title$4 = "_1u4wf805";
 function NotFound() {
-  return /* @__PURE__ */ jsx(Container, { className: root$1, children: /* @__PURE__ */ jsxs("div", { className: inner, children: [
+  return /* @__PURE__ */ jsx(Container, { className: root, children: /* @__PURE__ */ jsxs("div", { className: inner, children: [
     /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 362 145", className: image, children: /* @__PURE__ */ jsx(
       "path",
       {
@@ -21,7 +21,7 @@ function NotFound() {
     ) }),
     /* @__PURE__ */ jsxs("div", { className: content, children: [
       /* @__PURE__ */ jsx(Title, { className: title$4, children: "Nothing to see here" }),
-      /* @__PURE__ */ jsx(Text$4, { c: "dimmed", size: "lg", ta: "center", className: description$2, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
+      /* @__PURE__ */ jsx(Text$6, { c: "dimmed", size: "lg", ta: "center", className: description$2, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
       /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Button, { component: Link, to: "/", search: !0, startTransition: !0, size: "md", children: "Take me back to home page" }) })
     ] })
   ] }) });
@@ -343,7 +343,7 @@ const variantPriorityOrder = [
   ease: [0.25, 0.1, 0.35, 1],
   duration: 0.3
 }, getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => keyframes2.length > 2 ? keyframesTransition : transformProps.has(valueKey) ? valueKey.startsWith("scale") ? criticallyDampedSpring(keyframes2[1]) : underDampedSpring : ease;
-function getValueTransition(transition, key) {
+function getValueTransition$1(transition, key) {
   return transition ? transition[key] || transition.default || transition : void 0;
 }
 const MotionGlobalConfig = {
@@ -354,7 +354,7 @@ function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyf
   const resolvedKeyframes = keyframes2.filter(isNotNull), index2 = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
   return !index2 || finalKeyframe === void 0 ? resolvedKeyframes[index2] : finalKeyframe;
 }
-const noop$1 = (any) => any;
+const noop$2 = (any) => any;
 function createRenderStep(runNextFrame) {
   let thisFrame = /* @__PURE__ */ new Set(), nextFrame = /* @__PURE__ */ new Set(), isProcessing = !1, flushNextFrame = !1;
   const toKeepAlive = /* @__PURE__ */ new WeakSet();
@@ -427,7 +427,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
       steps[stepsOrder[i2]].cancel(process2);
   }, state, steps };
 }
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$1, !0), calcBezier = (t2, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t2 + (3 * a2 - 6 * a1)) * t2 + 3 * a1) * t2, subdivisionPrecision = 1e-7, subdivisionMaxIterations = 12;
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame < "u" ? requestAnimationFrame : noop$2, !0), calcBezier = (t2, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t2 + (3 * a2 - 6 * a1)) * t2 + 3 * a1) * t2, subdivisionPrecision = 1e-7, subdivisionMaxIterations = 12;
 function binarySubdivide(x2, lowerBound, upperBound, mX1, mX2) {
   let currentX, currentT, i2 = 0;
   do
@@ -437,7 +437,7 @@ function binarySubdivide(x2, lowerBound, upperBound, mX1, mX2) {
 }
 function cubicBezier(mX1, mY1, mX2, mY2) {
   if (mX1 === mY1 && mX2 === mY2)
-    return noop$1;
+    return noop$2;
   const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
   return (t2) => t2 === 0 || t2 === 1 ? t2 : calcBezier(getTForX(t2), mY1, mY2);
 }
@@ -445,7 +445,7 @@ const mirrorEasing = (easing) => (p2) => p2 <= 0.5 ? easing(2 * p2) / 2 : (2 - e
 function isNone(value) {
   return typeof value == "number" ? value === 0 : value !== null ? value === "none" || value === "0" || isZeroValueString(value) : !0;
 }
-let invariant$1 = noop$1;
+let invariant$1 = noop$2;
 const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v), checkStringStartsWith = (token) => (key) => typeof key == "string" && key.startsWith(token), isCSSVariableName = /* @__PURE__ */ checkStringStartsWith("--"), startsAsVariableToken = /* @__PURE__ */ checkStringStartsWith("var(--"), isCSSVariableToken = (value) => startsAsVariableToken(value) ? singleCssVariableRegex.test(value.split("/*")[0].trim()) : !1, singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, splitCSSVariableRegex = (
   // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
   /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
@@ -1112,7 +1112,7 @@ function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstan
   };
 }
 const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1), easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1), easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] == "number", easingLookup = {
-  linear: noop$1,
+  linear: noop$2,
   easeIn,
   easeInOut,
   easeOut,
@@ -1223,7 +1223,7 @@ function createMixers(output, ease2, customMixer) {
   for (let i2 = 0; i2 < numMixers; i2++) {
     let mixer = mixerFactory(output[i2], output[i2 + 1]);
     if (ease2) {
-      const easingFunction = Array.isArray(ease2) ? ease2[i2] || noop$1 : ease2;
+      const easingFunction = Array.isArray(ease2) ? ease2[i2] || noop$2 : ease2;
       mixer = pipe(easingFunction, mixer);
     }
     mixers.push(mixer);
@@ -1618,11 +1618,11 @@ class AcceleratedAnimation extends BaseAnimation {
     else {
       const { resolved } = this;
       if (!resolved)
-        return noop$1;
+        return noop$2;
       const { animation } = resolved;
       attachTimeline(animation, timeline);
     }
-    return noop$1;
+    return noop$2;
   }
   play() {
     if (this.isStopped)
@@ -1749,7 +1749,7 @@ function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildr
   return !!Object.keys(transition).length;
 }
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-  const valueTransition = getValueTransition(transition, name) || {}, delay2 = valueTransition.delay || transition.delay || 0;
+  const valueTransition = getValueTransition$1(transition, name) || {}, delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
   elapsed = elapsed - secondsToMilliseconds(delay2);
   let options = {
@@ -1825,7 +1825,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.11.7", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "11.11.9", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time$1.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init), this.owner = options.owner;
@@ -2032,20 +2032,12 @@ const isMotionValue = (value) => !!(value && value.getVelocity);
 function isWillChangeMotionValue(value) {
   return !!(isMotionValue(value) && value.add);
 }
-function getWillChangeName(name) {
-  if (transformProps.has(name))
-    return "transform";
-  if (acceleratedValues.has(name))
-    return camelToDash(name);
-}
 function addValueToWillChange(visualElement, key) {
-  var _a;
   if (!visualElement.applyWillChange)
     return;
   const willChange = visualElement.getValue("willChange");
   if (isWillChangeMotionValue(willChange))
     return willChange.add(key);
-  !(!((_a = visualElement.props.style) === null || _a === void 0) && _a.willChange) && getWillChangeName(key) && visualElement.setStaticValue("willChange", "transform");
 }
 function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
   const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== !0;
@@ -2062,7 +2054,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
       continue;
     const valueTransition = {
       delay: delay2,
-      ...getValueTransition(transition || {}, key)
+      ...getValueTransition$1(transition || {}, key)
     };
     let isHandoff = !1;
     if (window.MotionHandoffAnimation) {
@@ -2846,11 +2838,11 @@ function getCurrentDirection(offset, lockThreshold = 10) {
 }
 class DragGesture extends Feature {
   constructor(node2) {
-    super(node2), this.removeGroupControls = noop$1, this.removeListeners = noop$1, this.controls = new VisualElementDragControls(node2);
+    super(node2), this.removeGroupControls = noop$2, this.removeListeners = noop$2, this.controls = new VisualElementDragControls(node2);
   }
   mount() {
     const { dragControls } = this.node.getProps();
-    dragControls && (this.removeGroupControls = dragControls.subscribe(this.controls)), this.removeListeners = this.controls.addListeners() || noop$1;
+    dragControls && (this.removeGroupControls = dragControls.subscribe(this.controls)), this.removeListeners = this.controls.addListeners() || noop$2;
   }
   unmount() {
     this.removeGroupControls(), this.removeListeners();
@@ -2861,7 +2853,7 @@ const asyncHandler = (handler) => (event, info) => {
 };
 class PanGesture extends Feature {
   constructor() {
-    super(...arguments), this.removePointerDownListener = noop$1;
+    super(...arguments), this.removePointerDownListener = noop$2;
   }
   onPointerDown(pointerDownEvent) {
     this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
@@ -3021,7 +3013,7 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
 function getRadius(values, radiusName) {
   return values[radiusName] !== void 0 ? values[radiusName] : values.borderRadius;
 }
-const easeCrossfadeIn = /* @__PURE__ */ compress(0, 0.5, circOut), easeCrossfadeOut = /* @__PURE__ */ compress(0.5, 0.95, noop$1);
+const easeCrossfadeIn = /* @__PURE__ */ compress(0, 0.5, circOut), easeCrossfadeOut = /* @__PURE__ */ compress(0.5, 0.95, noop$2);
 function compress(min2, max2, easing) {
   return (p2) => p2 < min2 ? 0 : p2 > max2 ? 1 : easing(progress(min2, max2, p2));
 }
@@ -3242,7 +3234,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
         if (this.options.layoutRoot || this.resumeFrom && this.resumeFrom.instance || hasOnlyRelativeTargetChanged || hasLayoutChanged && (targetChanged || !this.currentAnimation)) {
           this.resumeFrom && (this.resumingFrom = this.resumeFrom, this.resumingFrom.resumingFrom = void 0), this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
           const animationOptions = {
-            ...getValueTransition(layoutTransition, "layout"),
+            ...getValueTransition$1(layoutTransition, "layout"),
             onPlay: onLayoutAnimationStart,
             onComplete: onLayoutAnimationComplete
           };
@@ -3735,7 +3727,7 @@ function hasOpacityCrossfade(node2) {
 const defaultLayoutTransition = {
   duration: 0.45,
   ease: [0.4, 0, 0.1, 1]
-}, userAgentContains = (string) => typeof navigator < "u" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(string), roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") ? Math.round : noop$1;
+}, userAgentContains = (string) => typeof navigator < "u" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(string), roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") ? Math.round : noop$2;
 function roundAxis(axis) {
   axis.min = roundPoint(axis.min), axis.max = roundPoint(axis.max);
 }
@@ -3835,7 +3827,7 @@ function fireSyntheticPointerEvent(name, handler) {
 }
 class PressGesture extends Feature {
   constructor() {
-    super(...arguments), this.removeStartListeners = noop$1, this.removeEndListeners = noop$1, this.removeAccessibleListeners = noop$1, this.startPointerPress = (startEvent, startInfo) => {
+    super(...arguments), this.removeStartListeners = noop$2, this.removeEndListeners = noop$2, this.removeAccessibleListeners = noop$2, this.startPointerPress = (startEvent, startInfo) => {
       if (this.isPressing)
         return;
       this.removeEndListeners();
@@ -3963,7 +3955,7 @@ const gestureAnimations = {
   hover: {
     Feature: HoverGesture
   }
-}, layout$2 = {
+}, layout$3 = {
   layout: {
     ProjectionNode: HTMLProjectionNode,
     MeasureLayout
@@ -4231,6 +4223,12 @@ function useConstant(init) {
   const ref = useRef$1(null);
   return ref.current === null && (ref.current = init()), ref.current;
 }
+function getWillChangeName(name) {
+  if (transformProps.has(name))
+    return "transform";
+  if (acceleratedValues.has(name))
+    return camelToDash(name);
+}
 function makeState({ applyWillChange = !1, scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount: onMount2 }, props2, context, presenceContext, isStatic) {
   const state = {
     latestValues: makeLatestValues(props2, context, presenceContext, isStatic ? !1 : applyWillChange, scrapeMotionValuesFromProps2),
@@ -4254,9 +4252,7 @@ function forEachDefinition(props2, definition, callback) {
 }
 function makeLatestValues(props2, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
   var _a;
-  const values = {};
-  let applyWillChange = shouldApplyWillChange && ((_a = props2.style) === null || _a === void 0 ? void 0 : _a.willChange) === void 0;
-  const motionValues = scrapeMotionValues(props2, {});
+  const values = {}, willChange = /* @__PURE__ */ new Set(), applyWillChange = shouldApplyWillChange && ((_a = props2.style) === null || _a === void 0 ? void 0 : _a.willChange) === void 0, motionValues = scrapeMotionValues(props2, {});
   for (const key in motionValues)
     values[key] = resolveMotionValue(motionValues[key]);
   let { initial, animate } = props2;
@@ -4276,13 +4272,12 @@ function makeLatestValues(props2, context, presenceContext, shouldApplyWillChang
     }
     for (const key in transitionEnd)
       values[key] = transitionEnd[key];
-  }), applyWillChange && animate && initial !== !1 && !isAnimationControls(animate) && forEachDefinition(props2, animate, (target) => {
-    for (const key in target)
-      if (getWillChangeName(key)) {
-        values.willChange = "transform";
-        return;
-      }
-  }), values;
+  }), applyWillChange && (animate && initial !== !1 && !isAnimationControls(animate) && forEachDefinition(props2, animate, (target) => {
+    for (const name in target) {
+      const memberName = getWillChangeName(name);
+      memberName && willChange.add(memberName);
+    }
+  }), willChange.size && (values.willChange = Array.from(willChange).join(","))), values;
 }
 const createHtmlRenderState = () => ({
   style: {},
@@ -4990,9 +4985,262 @@ const shouldInheritGroup = (inherit) => inherit === !0, shouldInheritId = (inher
 }, domMax = {
   ...domAnimation,
   ...drag,
-  ...layout$2
+  ...layout$3
+};
+function resolveElements(elements, scope, selectorCache) {
+  var _a;
+  if (typeof elements == "string") {
+    let root2 = document;
+    scope && (invariant$1(!!scope.current), root2 = scope.current), selectorCache ? ((_a = selectorCache[elements]) !== null && _a !== void 0 || (selectorCache[elements] = root2.querySelectorAll(elements)), elements = selectorCache[elements]) : elements = root2.querySelectorAll(elements);
+  } else elements instanceof Element && (elements = [elements]);
+  return Array.from(elements || []);
+}
+function useUnmountEffect$1(callback) {
+  return useEffect$1(() => () => callback(), []);
+}
+function createGeneratorEasing(options, scale2 = 100, createGenerator) {
+  const generator = createGenerator({ ...options, keyframes: [0, scale2] }), duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+  return {
+    type: "keyframes",
+    ease: (progress2) => generator.next(duration * progress2).value / scale2,
+    duration: millisecondsToSeconds(duration)
+  };
+}
+function isDOMKeyframes(keyframes2) {
+  return typeof keyframes2 == "object" && !Array.isArray(keyframes2);
+}
+function resolveSubjects(subject, keyframes2, scope, selectorCache) {
+  return typeof subject == "string" && isDOMKeyframes(keyframes2) ? resolveElements(subject, scope, selectorCache) : subject instanceof NodeList ? Array.from(subject) : Array.isArray(subject) ? subject : [subject];
+}
+function calcNextTime(current, next, prev, labels) {
+  var _a;
+  return typeof next == "number" ? next : next.startsWith("-") || next.startsWith("+") ? Math.max(0, current + parseFloat(next)) : next === "<" ? prev : (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+}
+const wrap = (min2, max2, v) => {
+  const rangeSize = max2 - min2;
+  return ((v - min2) % rangeSize + rangeSize) % rangeSize + min2;
 };
-var rootClassName = "likec4-diagram-root", s$1 = { done: !1, hasNext: !1 };
+function getEasingForSegment(easing, i2) {
+  return isEasingArray(easing) ? easing[wrap(0, easing.length, i2)] : easing;
+}
+function eraseKeyframes(sequence, startTime, endTime) {
+  for (let i2 = 0; i2 < sequence.length; i2++) {
+    const keyframe = sequence[i2];
+    keyframe.at > startTime && keyframe.at < endTime && (removeItem(sequence, keyframe), i2--);
+  }
+}
+function addKeyframes(sequence, keyframes2, easing, offset, startTime, endTime) {
+  eraseKeyframes(sequence, startTime, endTime);
+  for (let i2 = 0; i2 < keyframes2.length; i2++)
+    sequence.push({
+      value: keyframes2[i2],
+      at: mixNumber$1(startTime, endTime, offset[i2]),
+      easing: getEasingForSegment(easing, i2)
+    });
+}
+function compareByTime(a2, b2) {
+  return a2.at === b2.at ? a2.value === null ? 1 : b2.value === null ? -1 : 0 : a2.at - b2.at;
+}
+const defaultSegmentEasing = "easeInOut";
+function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators2) {
+  const defaultDuration = defaultTransition.duration || 0.3, animationDefinitions = /* @__PURE__ */ new Map(), sequences = /* @__PURE__ */ new Map(), elementCache = {}, timeLabels = /* @__PURE__ */ new Map();
+  let prevTime = 0, currentTime = 0, totalDuration = 0;
+  for (let i2 = 0; i2 < sequence.length; i2++) {
+    const segment = sequence[i2];
+    if (typeof segment == "string") {
+      timeLabels.set(segment, currentTime);
+      continue;
+    } else if (!Array.isArray(segment)) {
+      timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
+      continue;
+    }
+    let [subject, keyframes2, transition = {}] = segment;
+    transition.at !== void 0 && (currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels));
+    let maxDuration2 = 0;
+    const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
+      const valueKeyframesAsList = keyframesAsList(valueKeyframes), { delay: delay2 = 0, times = defaultOffset(valueKeyframesAsList), type = "keyframes", ...remainingTransition } = valueTransition;
+      let { ease: ease2 = defaultTransition.ease || "easeOut", duration } = valueTransition;
+      const calculatedDelay = typeof delay2 == "function" ? delay2(elementIndex, numSubjects) : delay2, numKeyframes = valueKeyframesAsList.length, createGenerator = isGenerator(type) ? type : generators2?.[type];
+      if (numKeyframes <= 2 && createGenerator) {
+        let absoluteDelta = 100;
+        if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList)) {
+          const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
+          absoluteDelta = Math.abs(delta);
+        }
+        const springTransition = { ...remainingTransition };
+        duration !== void 0 && (springTransition.duration = secondsToMilliseconds(duration));
+        const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+        ease2 = springEasing.ease, duration = springEasing.duration;
+      }
+      duration ?? (duration = defaultDuration);
+      const startTime = currentTime + calculatedDelay, targetTime = startTime + duration;
+      times.length === 1 && times[0] === 0 && (times[1] = 1);
+      const remainder = times.length - valueKeyframesAsList.length;
+      remainder > 0 && fillOffset(times, remainder), valueKeyframesAsList.length === 1 && valueKeyframesAsList.unshift(null), addKeyframes(valueSequence, valueKeyframesAsList, ease2, times, startTime, targetTime), maxDuration2 = Math.max(calculatedDelay + duration, maxDuration2), totalDuration = Math.max(targetTime, totalDuration);
+    };
+    if (isMotionValue(subject)) {
+      const subjectSequence = getSubjectSequence(subject, sequences);
+      resolveValueSequence(keyframes2, transition, getValueSequence("default", subjectSequence));
+    } else {
+      const subjects = resolveSubjects(subject, keyframes2, scope, elementCache), numSubjects = subjects.length;
+      for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
+        keyframes2 = keyframes2, transition = transition;
+        const thisSubject = subjects[subjectIndex], subjectSequence = getSubjectSequence(thisSubject, sequences);
+        for (const key in keyframes2)
+          resolveValueSequence(keyframes2[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
+      }
+    }
+    prevTime = currentTime, currentTime += maxDuration2;
+  }
+  return sequences.forEach((valueSequences, element) => {
+    for (const key in valueSequences) {
+      const valueSequence = valueSequences[key];
+      valueSequence.sort(compareByTime);
+      const keyframes2 = [], valueOffset = [], valueEasing = [];
+      for (let i2 = 0; i2 < valueSequence.length; i2++) {
+        const { at, value, easing } = valueSequence[i2];
+        keyframes2.push(value), valueOffset.push(progress(0, totalDuration, at)), valueEasing.push(easing || "easeOut");
+      }
+      valueOffset[0] !== 0 && (valueOffset.unshift(0), keyframes2.unshift(keyframes2[0]), valueEasing.unshift(defaultSegmentEasing)), valueOffset[valueOffset.length - 1] !== 1 && (valueOffset.push(1), keyframes2.push(null)), animationDefinitions.has(element) || animationDefinitions.set(element, {
+        keyframes: {},
+        transition: {}
+      });
+      const definition = animationDefinitions.get(element);
+      definition.keyframes[key] = keyframes2, definition.transition[key] = {
+        ...defaultTransition,
+        duration: totalDuration,
+        ease: valueEasing,
+        times: valueOffset,
+        ...sequenceTransition
+      };
+    }
+  }), animationDefinitions;
+}
+function getSubjectSequence(subject, sequences) {
+  return !sequences.has(subject) && sequences.set(subject, {}), sequences.get(subject);
+}
+function getValueSequence(name, sequences) {
+  return sequences[name] || (sequences[name] = []), sequences[name];
+}
+function keyframesAsList(keyframes2) {
+  return Array.isArray(keyframes2) ? keyframes2 : [keyframes2];
+}
+function getValueTransition(transition, key) {
+  return transition && transition[key] ? {
+    ...transition,
+    ...transition[key]
+  } : { ...transition };
+}
+const isNumber = (keyframe) => typeof keyframe == "number", isNumberKeyframesArray = (keyframes2) => keyframes2.every(isNumber);
+function isObjectKey(key, object2) {
+  return key in object2;
+}
+class ObjectVisualElement extends VisualElement {
+  constructor() {
+    super(...arguments), this.type = "object";
+  }
+  readValueFromInstance(instance, key) {
+    if (isObjectKey(key, instance)) {
+      const value = instance[key];
+      if (typeof value == "string" || typeof value == "number")
+        return value;
+    }
+  }
+  getBaseTargetFromProps() {
+  }
+  removeValueFromRenderState(key, renderState) {
+    delete renderState.output[key];
+  }
+  measureInstanceViewportBox() {
+    return createBox();
+  }
+  build(renderState, latestValues) {
+    Object.assign(renderState.output, latestValues);
+  }
+  renderInstance(instance, { output }) {
+    Object.assign(instance, output);
+  }
+  sortInstanceNodePosition() {
+    return 0;
+  }
+}
+function createDOMVisualElement(element) {
+  const options = {
+    presenceContext: null,
+    props: {},
+    visualState: {
+      renderState: {
+        transform: {},
+        transformOrigin: {},
+        style: {},
+        vars: {},
+        attrs: {}
+      },
+      latestValues: {}
+    }
+  }, node2 = isSVGElement(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+  node2.mount(element), visualElementStore.set(element, node2);
+}
+function createObjectVisualElement(subject) {
+  const options = {
+    presenceContext: null,
+    props: {},
+    visualState: {
+      renderState: {
+        output: {}
+      },
+      latestValues: {}
+    }
+  }, node2 = new ObjectVisualElement(options);
+  node2.mount(subject), visualElementStore.set(subject, node2);
+}
+function isSingleValue(subject, keyframes2) {
+  return isMotionValue(subject) || typeof subject == "number" || typeof subject == "string" && !isDOMKeyframes(keyframes2);
+}
+function animateSubject(subject, keyframes2, options, scope) {
+  const animations2 = [];
+  if (isSingleValue(subject, keyframes2))
+    animations2.push(animateSingleValue(subject, isDOMKeyframes(keyframes2) && keyframes2.default || keyframes2, options && (options.default || options)));
+  else {
+    const subjects = resolveSubjects(subject, keyframes2, scope), numSubjects = subjects.length;
+    for (let i2 = 0; i2 < numSubjects; i2++) {
+      const thisSubject = subjects[i2], createVisualElement = thisSubject instanceof Element ? createDOMVisualElement : createObjectVisualElement;
+      visualElementStore.has(thisSubject) || createVisualElement(thisSubject);
+      const visualElement = visualElementStore.get(thisSubject), transition = { ...options };
+      "delay" in transition && typeof transition.delay == "function" && (transition.delay = transition.delay(i2, numSubjects)), animations2.push(...animateTarget(visualElement, { ...keyframes2, transition }, {}));
+    }
+  }
+  return animations2;
+}
+function animateSequence(sequence, options, scope) {
+  const animations2 = [];
+  return createAnimationsFromSequence(sequence, options, scope, { spring }).forEach(({ keyframes: keyframes2, transition }, subject) => {
+    animations2.push(...animateSubject(subject, keyframes2, transition));
+  }), animations2;
+}
+function isSequence(value) {
+  return Array.isArray(value) && Array.isArray(value[0]);
+}
+function createScopedAnimate(scope) {
+  function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
+    let animations2 = [];
+    isSequence(subjectOrSequence) ? animations2 = animateSequence(subjectOrSequence, optionsOrKeyframes, scope) : animations2 = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
+    const animation = new GroupPlaybackControls(animations2);
+    return scope && scope.animations.push(animation), animation;
+  }
+  return scopedAnimate;
+}
+function useAnimate() {
+  const scope = useConstant(() => ({
+    current: null,
+    // Will be hydrated by React
+    animations: []
+  })), animate = useConstant(() => createScopedAnimate(scope));
+  return useUnmountEffect$1(() => {
+    scope.animations.forEach((animation) => animation.stop());
+  }), [scope, animate];
+}
+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; ) {
@@ -5015,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) {
@@ -5049,23 +5297,30 @@ function f$1(t2, i2) {
   }
   throw new Error("Wrong number of arguments");
 }
-function u$8(t2, n2, a2) {
+function i$8(...e2) {
+  return f$1(o$7, e2);
+}
+function o$7() {
+  let e2 = /* @__PURE__ */ new Set();
+  return (t2) => e2.has(t2) ? s$2 : (e2.add(t2), { done: !1, hasNext: !0, next: t2 });
+}
+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$8, e2);
+function u$7(...e2) {
+  return u$8(i$7, e2);
 }
-function i$8(e2, a2) {
+function i$7(e2, a2) {
   let n2 = [];
   for (let [o2, r2] of e2.entries()) {
     if (!a2(r2, o2, e2)) break;
@@ -5073,34 +5328,27 @@ function i$8(e2, a2) {
   }
   return n2;
 }
-function i$7(...e2) {
-  return f$1(o$7, 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 });
-}
 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;
@@ -5108,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];
@@ -5119,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();
@@ -5138,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 = [[], []];
@@ -5155,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";
 }
@@ -5195,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 = {};
@@ -5211,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);
@@ -5225,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) {
@@ -5266,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",
@@ -5320,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,
@@ -5331,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;
 /*
@@ -5376,6 +5663,22 @@ function isAncestor(...args) {
   const ancestor = isString(args[0]) ? args[0] : args[0].id;
   return (isString(args[1]) ? args[1] : args[1].id).startsWith(ancestor + ".");
 }
+function commonAncestor(first, second) {
+  const parentA = parentFqn(first), parentB = parentFqn(second);
+  if (parentA === parentB)
+    return parentA;
+  if (!parentA || !parentB)
+    return null;
+  const a2 = first.split("."), b2 = second.split(".");
+  let ancestor = null;
+  for (; a2.length > 1 && b2.length > 1 && a2[0] && a2[0] === b2[0]; )
+    ancestor = ancestor ? `${ancestor}.${a2[0]}` : a2[0], a2.shift(), b2.shift();
+  return ancestor;
+}
+function parentFqn(fqn) {
+  const lastDot = fqn.lastIndexOf(".");
+  return lastDot > 0 ? fqn.slice(0, lastDot) : null;
+}
 function ancestorsFqn(fqn) {
   const path = fqn.split(".");
   return path.pop(), path.length === 0 ? [] : path.reduce((acc, part, idx) => idx === 0 ? (acc.push(part), acc) : (acc.unshift(`${acc[0]}.${part}`), acc), []);
@@ -5526,6 +5829,17 @@ const blue$1 = {
   relationships: RelationshipColors,
   font: "Arial",
   shadow: "#0a0a0a"
+}, compareRelations = (a2, b2) => {
+  const parentA = commonAncestor(a2.source, a2.target), parentB = commonAncestor(b2.source, b2.target);
+  if (parentA && !parentB)
+    return 1;
+  if (!parentA && parentB)
+    return -1;
+  const compareParents = parentA && parentB ? compareFqnHierarchically(parentA, parentB) : 0;
+  if (compareParents !== 0)
+    return compareParents;
+  const compareSource = compareFqnHierarchically(a2.source, b2.source);
+  return compareSource !== 0 ? compareSource : compareFqnHierarchically(a2.target, b2.target);
 };
 function useSyncedRef(value) {
   const ref = useRef$1(value);
@@ -5562,7 +5876,8 @@ function useDebouncedCallback(callback, deps, delay2, maxWait = 0) {
     }), wrapped;
   }, [delay2, maxWait, ...deps]);
 }
-const isBrowser = typeof window < "u" && typeof navigator < "u" && typeof document < "u", basicDepsComparator = (d1, d2) => {
+const noop$1 = () => {
+}, isBrowser = typeof window < "u" && typeof navigator < "u" && typeof document < "u", basicDepsComparator = (d1, d2) => {
   if (d1 === d2)
     return !0;
   if (d1.length !== d2.length)
@@ -5586,6 +5901,10 @@ function useFirstMountState() {
   }, []), isFirstMount.current;
 }
 const useIsomorphicLayoutEffect$1 = isBrowser ? useLayoutEffect$1 : useEffect$1;
+function useUpdateEffect$1(effect, deps) {
+  const isFirstMount = useFirstMountState();
+  useEffect$1(isFirstMount ? noop$1 : effect, deps);
+}
 function useAsync(asyncFn, initialValue) {
   const [state, setState] = useState$1({
     status: "not-executed",
@@ -5870,7 +6189,7 @@ class VectorImpl {
 function vector(source) {
   return VectorImpl.create(source);
 }
-const ZIndexes$1 = {
+const ZIndexes$2 = {
   Compound: 2,
   Edge: 4,
   Element: 6
@@ -5930,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,
@@ -5984,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();
     }));
   }
@@ -6001,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;
         });
@@ -7002,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$1.Compound : ZIndexes$1.Element,
+      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;
@@ -7046,7 +7390,7 @@ function diagramViewToXYFlowData(view, opts) {
       type: "relationship",
       source: ns + source,
       target: ns + target,
-      zIndex: ZIndexes$1.Edge,
+      zIndex: ZIndexes$2.Edge,
       selectable: opts.selectable,
       hidden: !visiblePredicate(edge),
       deletable: !1,
@@ -7195,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: {
@@ -7488,17 +7832,11 @@ function createDiagramStore(props2) {
               "goForward"
             ), onNavigateTo(stepForward.viewId));
           },
-          openOverlay: (overlay2) => {
-            set(
-              {
-                activeOverlay: overlay2
-              },
-              noReplace,
-              "openOverlay"
-            );
+          openOverlay: (overlay) => {
+            deepEqual(overlay, get().activeOverlay) || set({ activeOverlay: overlay }, noReplace, "openOverlay");
           },
           closeOverlay: () => {
-            set(
+            get().activeOverlay !== null && set(
               {
                 activeOverlay: null
               },
@@ -7508,7 +7846,7 @@ function createDiagramStore(props2) {
           },
           fitDiagram: (duration = 500) => {
             const { fitViewPadding, view, xystore } = get(), { width: width2, height, panZoom, transform } = xystore.getState(), bounds = view.bounds, maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(bounds, width2, height, MinZoom, maxZoom, fitViewPadding);
-            panZoom?.setViewport(viewport, { duration });
+            panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
           },
           nextDynamicStep: (increment = 1) => {
             const { activeWalkthrough, xyedges: xyedges2, activateWalkthrough } = get(), stepId = activeWalkthrough?.stepId;
@@ -7586,18 +7924,18 @@ function createDiagramStore(props2) {
             ), get().fitDiagram());
           },
           onInit: (instance) => {
-            const { xyflow, initialized } = get();
-            (!initialized || xyflow !== instance) && set(
+            const { xyflow, initialized, fitViewEnabled, fitDiagram } = get();
+            (!initialized || xyflow !== instance) && (fitViewEnabled && fitDiagram(0), set(
               {
                 xyflow: instance,
                 initialized: !0
               },
               noReplace,
               "onInit"
-            );
+            ));
           },
           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);
@@ -7638,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":
@@ -7686,13 +8029,13 @@ function DiagramContextProvider({
   whereFilter,
   ...props2
 }) {
-  const containerRef = useRef$1(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef$1(), getContainer = useCallback$1(() => containerRef.current, [containerRef]);
-  return store.current || (store.current = createDiagramStore({
+  const [scope, animate] = useAnimate(), containerRef = useRef$1(null), ref = useMergedRef(scope, containerRef), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef$1(), getContainer = useCallback$1(() => containerRef.current, [containerRef]);
+  store.current || (store.current = createDiagramStore({
     xystore,
     xyflow,
     view,
     getContainer,
-    whereFilter: structuredClone(whereFilter),
+    whereFilter: p(whereFilter),
     ...props2
   })), useUpdateEffect(
     () => store.current?.setState({ xyflow, xystore, getContainer }, !1, "update xyflow and xystore"),
@@ -7703,14 +8046,24 @@ 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])
-  ), /* @__PURE__ */ jsx(
+  );
+  const api = store.current;
+  return useEffect$1(() => api.subscribe((s2) => !!s2.activeOverlay, (isActiveOverlay) => {
+    animate(".likec4-diagram .react-flow__renderer", {
+      filter: isActiveOverlay ? "grayscale(0.85) brightness(0.5)" : "grayscale(0) brightness()",
+      scale: isActiveOverlay ? 0.97 : 1,
+      transform: isActiveOverlay ? "translateY(8px)" : "translateY(0)"
+    }, {
+      duration: isActiveOverlay ? 0.5 : 0.16
+    });
+  }), [api]), /* @__PURE__ */ jsx(
     "div",
     {
-      ref: containerRef,
+      ref,
       className,
       ...keepAspectRatio && {
         style: {
@@ -7718,7 +8071,7 @@ function DiagramContextProvider({
           maxHeight: Math.ceil(view.bounds.height)
         }
       },
-      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children })
+      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: api, children })
     }
   );
 }
@@ -10865,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};`),
@@ -10885,9 +11237,10 @@ 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 } }) });
-}
-var cssReactFlow = "_17jps3v0", cssDisablePan = "_17jps3v1", cssTransparentBg = "_17jps3v2", cssNoControls = "_17jps3v3";
+  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) {
   const model = useContext$1(LikeC4ModelContext);
@@ -11099,6 +11452,13 @@ var IconFolderOpen = createReactComponent("outline", "folder-open", "IconFolderO
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconHelpCircle = createReactComponent("outline", "help-circle", "IconHelpCircle", [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]]);
+/**
+ * @license @tabler/icons-react v3.17.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconInfoCircle = createReactComponent("outline", "info-circle", "IconInfoCircle", [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 9h.01", key: "svg-1" }], ["path", { d: "M11 12h1v4h1", key: "svg-2" }]]);
 /**
  * @license @tabler/icons-react v3.17.0 - MIT
  *
@@ -11280,126 +11640,25 @@ var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled",
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var IconStarFilled = createReactComponent("filled", "star-filled", "IconStarFilled", [["path", { d: "M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z", key: "svg-0" }]]), dialog = "_1robbpb4";
+var IconStarFilled = createReactComponent("filled", "star-filled", "IconStarFilled", [["path", { d: "M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z", key: "svg-0" }]]);
 const OverlayContext = createContext$1({});
 function useOverlayDialog() {
   return useContext$1(OverlayContext);
 }
-const OverlayDialog = forwardRef$1(({
-  className,
-  children,
-  onClose,
-  ...props2
-}, forwardedRef) => {
-  const onCloseRef = useSyncedRef(onClose), api = useDiagramStoreApi(), [opened, setOpened] = useState$1(!1), dialogRef = useRef$1(null), ref = useMergedRef(dialogRef, forwardedRef);
-  useDebouncedEffect(
-    () => {
-      dialogRef.current?.showModal();
-    },
-    [],
-    30
-  ), useDebouncedEffect(
-    () => {
-      setOpened(!0);
-    },
-    [],
-    80
-  );
-  const { start: triggerOnClose } = useTimeout(() => {
-    onCloseRef.current?.();
-  }, 300), ctxValue = useMemo$1(() => ({
-    openOverlay: api.getState().openOverlay,
-    close: () => {
-      dialogRef.current?.close();
-    }
-  }), [api]);
-  return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      "aria-modal": "true",
-      ref,
-      className: clsx(dialog, className),
-      onClick: (e2) => {
-        e2.target?.nodeName?.toUpperCase() === "DIALOG" && (e2.stopPropagation(), dialogRef.current?.close());
-      },
-      onClose: (e2) => {
-        e2.stopPropagation(), triggerOnClose();
-      },
-      ...props2,
-      children: children({
-        opened,
-        ...ctxValue
-      })
-    }
-  ) });
-}), OverlayDialogCloseButton = () => {
-  const { close } = useOverlayDialog();
-  return /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
-    ActionIcon$1,
-    {
-      variant: "default",
-      size: "lg",
-      autoFocus: !0,
-      onClick: (e2) => {
-        e2.stopPropagation(), close();
-      },
-      children: /* @__PURE__ */ jsx(IconX, {})
-    }
-  ) });
-};
-var dependencyViewContainer = "_1m627kc0";
-function EdgeDetailsOverlay({ edgeId }) {
-  const diagramApi = useDiagramStoreApi(), edge = useDiagramState((s2) => s2.xyedges.find((e2) => e2.id === edgeId));
-  return invariant(edge, `Edge with id ${edgeId} not found`), /* @__PURE__ */ jsx(
-    OverlayDialog,
-    {
-      onClose: () => {
-        diagramApi.getState().closeOverlay();
-      },
-      "data-likec4-color": "gray",
-      children: ({ close }) => /* @__PURE__ */ jsxs(Paper, { className: dependencyViewContainer, children: [
-        /* @__PURE__ */ jsx("div", { children: "edge" }),
-        /* @__PURE__ */ jsx(Code, { block: !0, children: JSON.stringify(edge, null, 2) }),
-        /* @__PURE__ */ jsx(
-          ActionIcon$1,
-          {
-            variant: "default",
-            color: "gray",
-            autoFocus: !0,
-            onClick: (e2) => {
-              e2.stopPropagation(), close();
-            },
-            children: /* @__PURE__ */ jsx(IconX, {})
-          }
-        )
-      ] })
-    }
-  );
-}
-var node = "_1nudxvt0", label = "_1nudxvt1";
-const classes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  get label() {
-    return label;
-  },
-  get node() {
-    return node;
-  }
-}, Symbol.toStringTag, { value: "Module" })), SelectElement = ({
-  subject,
-  viewId,
-  scope,
-  onSelect
+var edgeSource = "qaevzq1 qaevzq0", edgeArrow = "qaevzq2 qaevzq0", edgeTarget = "qaevzq3 qaevzq0", edgeLabel$3 = "qaevzq4", edgeRow = "qaevzq5", edgeGrid = "qaevzq6", edgeDataGrid = "qaevzq7";
+const SelectEdge = ({
+  edge,
+  view
 }) => {
-  const viewport = useRef$1(null), data = useLikeC4ElementsTree(scope === "view" ? viewId : void 0), tree = useTree({
-    multiple: !1
+  const overlay = useOverlayDialog(), viewport = useRef$1(null), theme2 = useComputedColorScheme(), edgeSource$1 = view.nodes.find((n2) => n2.id === edge.source), edgeTarget$1 = view.nodes.find((n2) => n2.id === edge.target), edges = view.edges.map((edge2) => {
+    const source = view.nodes.find((n2) => n2.id === edge2.source), target = view.nodes.find((n2) => n2.id === edge2.target);
+    return {
+      id: edge2.id,
+      source,
+      target,
+      label: edge2.label
+    };
   });
-  useEffect$1(() => {
-    ancestorsFqn(subject.id).reverse().forEach((id2) => {
-      tree.expand(id2);
-    }), tree.select(subject.id);
-  }, [subject.id]);
-  const theme2 = useComputedColorScheme();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -11411,89 +11670,93 @@ const classes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       onOpen: () => {
         setTimeout(() => {
-          const item = viewport.current?.querySelector(`[data-value="${subject.id}"]`);
-          console.log("item", item), item?.scrollIntoView({ behavior: "instant", block: "nearest" });
+          viewport.current?.querySelector(`[data-edge-id="${edge.id}"]`)?.scrollIntoView({ behavior: "instant", block: "nearest" });
         }, 100);
       },
       children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsxs(
           Button,
           {
             size: "xs",
             variant: "light",
             color: theme2 === "light" ? "dark" : "gray",
             fw: "500",
-            maw: 250,
             style: { padding: "0.25rem 0.75rem" },
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
-            children: subject.title
-          }
-        ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(
-          Tree,
-          {
-            allowRangeSelection: !1,
-            selectOnClick: !1,
-            tree,
-            data,
-            classNames: classes,
-            levelOffset: 8,
-            styles: {
-              label: {
-                paddingTop: 5,
-                paddingBottom: 6
-              }
-            },
-            renderNode: ({ node: node2, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsxs(Group, { gap: 2, wrap: "nowrap", ...elementProps, py: "3", children: [
+            children: [
               /* @__PURE__ */ jsx(
-                ActionIcon$1,
+                Box,
                 {
-                  variant: "subtle",
-                  size: 18,
-                  c: "dimmed",
-                  style: {
-                    visibility: hasChildren ? "visible" : "hidden"
+                  className: edgeSource,
+                  maw: 160,
+                  p: 0,
+                  mod: {
+                    "likec4-color": edgeSource$1.color
                   },
-                  children: /* @__PURE__ */ jsx(
-                    IconChevronRight,
-                    {
-                      stroke: 3.5,
-                      style: {
-                        transition: "transform 150ms ease",
-                        transform: `rotate(${expanded ? "90deg" : "0"})`,
-                        width: "80%"
-                      }
-                    }
-                  )
+                  children: /* @__PURE__ */ jsx(Text$6, { component: "span", truncate: !0, children: edgeSource$1.title })
                 }
               ),
+              /* @__PURE__ */ jsx(ThemeIcon, { color: "dark", variant: "transparent", size: "xs", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } }) }),
               /* @__PURE__ */ jsx(
                 Box,
                 {
-                  flex: "1 1 100%",
-                  w: "100%",
-                  onClick: (e2) => {
-                    e2.stopPropagation(), onSelect(node2.value), tree.select(node2.value), tree.expand(node2.value);
+                  className: edgeTarget,
+                  maw: 160,
+                  p: 0,
+                  mod: {
+                    "likec4-color": edgeTarget$1.color
                   },
-                  children: /* @__PURE__ */ jsx(
-                    Text$4,
-                    {
-                      fz: "sm",
-                      fw: selected ? "600" : "400",
-                      truncate: "end",
-                      children: node2.label
-                    }
-                  )
+                  children: /* @__PURE__ */ jsx(Text$6, { component: "span", truncate: !0, children: edgeTarget$1.title })
                 }
               )
-            ] })
+            ]
           }
-        ) }) })
+        ) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 420, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", children: edges.map((e2) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: edgeRow,
+            "data-selected": e2.id === edge.id,
+            onClick: (event) => {
+              event.stopPropagation(), overlay.openOverlay({
+                edgeDetails: e2.id
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: edgeSource,
+                  maw: 160,
+                  mod: {
+                    "edge-id": e2.id,
+                    "likec4-color": e2.source.color
+                  },
+                  children: /* @__PURE__ */ jsx(Text$6, { component: "span", truncate: !0, children: e2.source.title })
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { className: edgeArrow, children: /* @__PURE__ */ jsx(ThemeIcon, { color: "dark", variant: "transparent", size: "xs", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } }) }) }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: edgeTarget,
+                  maw: 160,
+                  mod: {
+                    "likec4-color": e2.target.color
+                  },
+                  children: /* @__PURE__ */ jsx(Text$6, { component: "span", truncate: !0, children: e2.target.title })
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { className: edgeLabel$3, children: /* @__PURE__ */ jsx(Text$6, { component: "span", truncate: !0, children: e2.label || "untitled" }) })
+            ]
+          },
+          e2.id
+        )) }) }) })
       ]
     }
   );
 };
-var root = "likec4-relationships-xyflow", overlay = "kvs8dr1", DEFAULT_EDGE_NAME = "\0", GRAPH_NODE = "\0", EDGE_KEY_DELIM = "
";
+var DEFAULT_EDGE_NAME = "\0", GRAPH_NODE = "\0", EDGE_KEY_DELIM = "
";
 let Graph$a = class {
   _isDirected = !0;
   _isMultigraph = !1;
@@ -13293,8 +13556,8 @@ function positionY(g) {
   });
 }
 let acyclic = acyclic$1, normalize = normalize$1, rank = rank_1, normalizeRanks = util$d.normalizeRanks, parentDummyChains = parentDummyChains_1, removeEmptyRanks = util$d.removeEmptyRanks, nestingGraph = nestingGraph$1, addBorderSegments = addBorderSegments_1, coordinateSystem = coordinateSystem$1, order = order_1, position = position_1, util$1 = util$d, Graph$1 = graphlib.Graph;
-var layout_1 = layout$1;
-function layout$1(g, opts) {
+var layout_1 = layout$2;
+function layout$2(g, opts) {
   let time2 = opts && opts.debugTiming ? util$1.time : util$1.notime;
   time2("layout", () => {
     let layoutGraph = time2("  buildLayoutGraph", () => buildLayoutGraph(g));
@@ -13502,68 +13765,56 @@ var version = "1.1.4", dagre = {
   },
   version
 };
-const dagre$1 = /* @__PURE__ */ getDefaultExportFromCjs(dagre), graphColumn = (c) => ({
-  name: c,
-  id: `__${c}`,
-  anchor: `__${c}::anchor`
-}), Sizes = {
+const dagre$1 = /* @__PURE__ */ getDefaultExportFromCjs(dagre), Sizes$1 = {
   dagre: {
     ranksep: 40,
-    nodesep: 20,
-    edgesep: 20
+    nodesep: 25,
+    edgesep: 15
   },
   edgeLabel: {
-    width: 50
+    width: 120
   },
-  emptyNodeOffset: 100,
   nodeWidth: 270,
   hodeHeight: 160,
   // Spacer between elements in a compound node
   // 0 means no spacer
   spacerHeight: 0,
   compoundLabelHeight: 5
-}, ZIndexes = {
-  empty: 2,
+}, ZIndexes$1 = {
   compound: 2,
   edge: 3,
   element: 4,
   max: 5
 };
-function createGraph() {
+function createGraph$1() {
   const g = new dagre$1.graphlib.Graph({
     directed: !0,
     compound: !0
   });
   return g.setGraph({
-    ...Sizes.dagre,
+    ...Sizes$1.dagre,
     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: 50, height: 5 }), g.setParent(c.anchor, c.id), prev && g.setEdge(prev, c.anchor), c.anchor;
-  }, null), g;
+  }), g.setDefaultEdgeLabel(() => ({ ...Sizes$1.edgeLabel })), g.setDefaultNodeLabel(() => ({})), g;
 }
-const sized = (height = Sizes.hodeHeight) => ({
-  width: Sizes.nodeWidth,
+const sized$1 = (height = Sizes$1.hodeHeight) => ({
+  width: Sizes$1.nodeWidth,
   height
-}), graphId = (node2) => ({
+}), graphId$1 = (node2) => ({
   id: node2.id,
   port: node2.type === "compound" ? `${node2.id}::port` : node2.id,
-  // port: `${node.id}::port`,
-  // For nested nodes
   body: `${node2.id}`,
   spacer: `${node2.id}:spacer`
 });
-function nodeData(element, ctx) {
+function nodeData$1(element, ctx) {
   let diagramNode = ctx.diagramNodes.get(element.id);
-  const ancestor = diagramNode ?? (ctx.scope === "view" ? x$1(
+  const ancestor = diagramNode ?? x$1(
     element.ancestors(),
     m((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
     T(n$4),
     d()
-  ) : void 0);
+  );
   return {
     fqn: element.id,
-    existsInCurrentView: ctx.diagramNodes.has(element.id),
     element: {
       kind: element.kind,
       title: diagramNode?.title ?? element.title,
@@ -13573,67 +13824,42 @@ function nodeData(element, ctx) {
     },
     navigateTo: diagramNode?.navigateTo ?? d(element.viewsOf())?.id ?? null,
     ports: {
-      left: [],
-      right: []
+      in: [],
+      out: []
     }
   };
 }
-function createEmptyNode(column, ctx) {
-  const id2 = `${column}::empty`, xynodes = ctx.columns[column];
-  let node2 = xynodes.get(id2);
-  if (node2)
-    return invariant(node2.type === "empty", "Node is not empty"), node2;
-  const xynode = {
-    type: "empty",
-    id: id2,
-    position: { x: 0, y: 0 },
-    data: {
-      column
-    },
-    zIndex: ZIndexes.empty
-  };
-  xynodes.set(id2, xynode);
-  const k = graphId(xynode);
-  return ctx.g.setNode(k.id, {
-    width: 230,
-    height: 130
-  }), ctx.g.setParent(k.id, graphColumn(column).id), xynode;
-}
-function createNode(column, nodeType, element, ctx) {
-  const xynodes = ctx.columns[column];
-  let node2 = xynodes.get(element.id);
+function createNode$1(nodeType, element, ctx) {
+  let node2 = ctx.xynodes.get(element.id);
   if (node2)
-    return invariant(node2.type !== "empty", `Node ${element.id} is empty`), node2;
+    return node2;
   const g = ctx.g, parent = x$1(
     element.ancestors(),
-    u$6((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)
-    ),
-    (found) => found ? createNode(column, "compound", found, ctx) : null
+    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 = {
     type: nodeType,
-    id: `${column}::${element.id}`,
+    id: element.id,
     position: { x: 0, y: 0 },
     data: {
-      ...nodeData(element, ctx),
-      column
+      ...nodeData$1(element, ctx)
     },
-    zIndex: ZIndexes[nodeType],
+    zIndex: ZIndexes$1[nodeType],
     ...!!parent && { parentId: parent.id }
   };
-  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, {
-    width: Sizes.nodeWidth - Sizes.dagre.ranksep,
-    height: Sizes.compoundLabelHeight
-  }), g.setParent(k.port, k.id));
-  const parentGraphId = parent ? graphId(parent).body : graphColumn(column).id;
-  return g.setParent(k.id, parentGraphId), xynode;
-}
-function applyDagreLayout(g) {
+  ctx.xynodes.set(element.id, xynode);
+  const k = graphId$1(xynode);
+  if (g.setNode(k.id, sized$1()), xynode.type === "compound" && (g.setNode(k.port, {
+    width: Sizes$1.nodeWidth - Sizes$1.dagre.ranksep,
+    height: Sizes$1.compoundLabelHeight
+  }), g.setParent(k.port, k.id)), parent) {
+    const parentGraphId = graphId$1(parent).body;
+    g.setParent(k.id, parentGraphId);
+  }
+  return xynode;
+}
+function applyDagreLayout$1(g) {
   return dagre$1.layout(g), function nodeBounds(nodeId, relativeTo) {
     const { x: x2, y: y2, width: width2, height } = g.node(nodeId), pos = {
       position: {
@@ -13656,205 +13882,99 @@ function applyDagreLayout(g) {
     };
   };
 }
-function addEdge(ctx, props2) {
-  const { source, target, relations } = props2, ids = relations.map((r2) => r2.id).join("_"), label2 = t$5(relations)?.title ?? "untitled", isMultiple = relations.length > 1, edge = {
-    id: `rel${ctx.edges.length + 1}_${ids}`,
-    type: "relation",
-    source,
-    target,
-    sourceHandle: target,
-    targetHandle: source,
-    data: {
-      relations
-    },
-    label: isMultiple ? `${relations.length} relationships` : label2,
-    zIndex: ZIndexes.edge,
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-      width: isMultiple ? 7 : 9
-    },
-    style: {
-      strokeWidth: isMultiple ? 5 : 2.2,
-      strokeDasharray: isMultiple ? void 0 : "5, 5"
-    }
+function layout$1(edgeId, view, likec4model) {
+  const edge = view.edges.find((e2) => e2.id === edgeId);
+  invariant(edge, "edge not found");
+  const all = /* @__PURE__ */ new Set([edge.source, edge.target]), relations = edge.relations.map((r2) => {
+    const relation = likec4model.relationship(r2).relationship;
+    return all.add(relation.source), all.add(relation.target), relation;
+  }).sort(compareRelations).reverse(), diagramNodes = new Map(view.nodes.map((n2) => [n2.id, n2])), g = createGraph$1(), ctx = {
+    g,
+    xynodes: /* @__PURE__ */ new Map(),
+    edge,
+    diagramNodes,
+    edges: []
   };
-  ctx.edges.push(edge);
-}
-function processRelations(props2) {
   x$1(
-    props2.incoming,
-    i$2((r2) => r2.source),
-    t$2(),
-    m$1((a2, b2) => compareFqnHierarchically(a2[0], b2[0])),
+    [...all],
+    m$1(compareFqnHierarchically),
     t$7(),
-    u$3(([sourceId, relations]) => {
-      try {
-        props2.forEachIncoming(sourceId, relations);
-      } catch (e2) {
-        console.error("Error in forEachIncoming", e2);
-      }
+    u$4((id2) => {
+      const element = likec4model.element(id2);
+      createNode$1("element", element, ctx);
     })
-  ), x$1(
-    props2.outgoing,
-    i$2((r2) => r2.target),
-    t$2(),
-    m$1((a2, b2) => compareFqnHierarchically(a2[0], b2[0])),
-    t$7(),
-    u$3(([targetId, relations]) => {
-      try {
-        props2.forEachOutgoing(targetId, relations);
-      } catch (e2) {
-        console.error("Error in forEachOutgoing", e2);
+  ), relations.length === 1 && all.size < 4 && g.setDefaultEdgeLabel(() => ({ width: 250 }));
+  for (const relation of relations) {
+    const source = ctx.xynodes.get(relation.source);
+    invariant(source, "source node not found");
+    const target = ctx.xynodes.get(relation.target);
+    invariant(target, "target node not found"), source.data.ports.out.push(target.id), target.data.ports.in.push(source.id), g.setEdge(graphId$1(source).port, graphId$1(target).port);
+    const edge2 = {
+      id: relation.id,
+      type: "relation",
+      source: source.id,
+      target: target.id,
+      sourceHandle: target.id,
+      targetHandle: source.id,
+      data: {
+        relation
+      },
+      label: relation.title,
+      zIndex: ZIndexes$1.edge,
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 10
+      },
+      style: {
+        strokeWidth: 2.2,
+        strokeDasharray: "5, 5"
       }
-    })
-  );
-}
-function layout(subjectId, view, likec4model, scope) {
-  const diagramNodes = new Map(view.nodes.map((n2) => [n2.id, n2])), subjectElement = likec4model.element(subjectId);
-  diagramNodes.has(subjectId) || (scope = "global");
-  const g = createGraph(), ctx = {
-    scope,
-    g,
-    diagramNodes,
-    subjectId,
-    subjectElement,
-    connected: i$3(
-      ["incomers", "outgoers"],
-      (column) => new Set(subjectElement[column]().map((m2) => m2.id))
-    ),
-    columns: {
-      incomers: /* @__PURE__ */ new Map(),
-      outgoers: /* @__PURE__ */ new Map()
-    },
-    edges: []
-  }, subject = {
-    id: subjectElement.id,
-    type: "element",
-    position: { x: 0, y: 0 },
-    data: {
-      ...nodeData(subjectElement, ctx),
-      column: "subject"
-    },
-    zIndex: 3,
-    selectable: !1,
-    focusable: !1,
-    ...sized()
-  };
-  if (g.setNode(subject.id, sized()), g.setParent(subject.id, graphColumn("subject").id), processRelations({
-    // Based on the scope we pick relationships
-    ...scope === "global" ? {
-      incoming: subjectElement.incoming().map((r2) => r2.relationship),
-      outgoing: subjectElement.outgoing().map((r2) => r2.relationship)
-    } : {
-      incoming: likec4model.view(view.id).element(subjectId).incoming().flatMap((c) => c.relationships().map((r2) => r2.relationship)),
-      outgoing: likec4model.view(view.id).element(subjectId).outgoing().flatMap((c) => c.relationships().map((r2) => r2.relationship))
-    },
-    forEachIncoming(sourceId, relations) {
-      const source = createNode("incomers", "element", likec4model.element(sourceId), ctx);
-      g.setEdge(graphId(source).port, subject.id, {
-        weight: source.type === "compound" ? 0 : 1
-      });
-      const op = source.type === "compound" ? "unshift" : "push";
-      subject.data.ports.left[op]({
-        id: source.id,
-        type: "in"
-      }), source.data.ports.right.push({
-        id: subject.id,
-        type: "out"
-      }), addEdge(ctx, {
-        source: source.id,
-        target: subject.id,
-        relations
-      });
-    },
-    forEachOutgoing(targetId, relations) {
-      const target = createNode("outgoers", "element", likec4model.element(targetId), ctx);
-      g.setEdge(subjectElement.id, graphId(target).port, {
-        weight: target.type === "compound" ? 2 : 1
-      });
-      const op = target.type === "compound" ? "unshift" : "push";
-      subject.data.ports.right[op]({
-        id: target.id,
-        type: "out"
-      }), target.data.ports.left.push({
-        id: subject.id,
-        type: "in"
-      }), addEdge(ctx, {
-        source: subjectElement.id,
-        target: target.id,
-        relations
-      });
-    }
-  }), ctx.columns.incomers.size == 0) {
-    const source = createEmptyNode("incomers", ctx);
-    g.setEdge(graphId(source).port, subject.id);
-  }
-  if (ctx.columns.outgoers.size == 0) {
-    const target = createEmptyNode("outgoers", ctx);
-    g.setEdge(subject.id, graphId(target).port);
+    };
+    ctx.edges.push(edge2);
   }
-  const subjectPortsCount = Math.max(subject.data.ports.left.length, subject.data.ports.right.length);
-  subjectPortsCount > 2 && (g.node(subjectElement.id).height = Sizes.hodeHeight + (subjectPortsCount - 2) * 1);
-  const nodebounds = applyDagreLayout(ctx.g), xynodes = [
-    subject,
-    ...ctx.columns.incomers.values(),
-    ...ctx.columns.outgoers.values()
-  ].map((node2) => ({
-    ...node2,
-    ...nodebounds(node2.id, node2.parentId)
-  })), sortedPorts = (ports) => ports.length < 2 ? ports : x$1(
+  const nodebounds = applyDagreLayout$1(ctx.g), sortedPorts = (ports) => ports.length < 2 ? ports : x$1(
     ports,
     m((port) => ({
       port,
-      topY: nodebounds(port.id).position.y
+      topY: nodebounds(port).position.y
     })),
-    a$3(p$2("topY")),
-    m(p$2("port"))
-  );
-  for (const node2 of xynodes) {
-    if (node2.type === "empty") {
-      const subjectPosition = nodebounds(subject.id);
-      node2.position.y = subjectPosition.position.y + subjectPosition.height / 2 - node2.height / 2, node2.data.column === "incomers" ? node2.position.x = subjectPosition.position.x - node2.width - Sizes.emptyNodeOffset : node2.position.x = subjectPosition.position.x + subjectPosition.width + Sizes.emptyNodeOffset;
-      continue;
-    }
-    node2.data.ports.left.length > 0 && (node2.data.ports.left = sortedPorts(node2.data.ports.left)), node2.data.ports.right.length > 0 && (node2.data.ports.right = sortedPorts(node2.data.ports.right));
-  }
+    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)
+  }));
   return {
     view,
-    viewIncludesSubject: diagramNodes.has(subjectId),
-    subject: subjectElement,
+    edge,
     edges: ctx.edges,
-    nodes: xynodes
+    nodes: xynodes,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 0,
+      height: g.graph().height ?? 0
+    }
   };
 }
-function useLayoutedRelationships(scope) {
-  const {
-    subjectId,
-    view
-  } = useDiagramState((s2) => ({
-    subjectId: s2.activeOverlay?.relationshipsOf,
-    view: s2.view
-  }));
-  invariant(subjectId, "subject not found");
-  const likec4model = useLikeC4Model(!0);
-  return useMemo$1(() => layout(
-    subjectId,
+function useLayoutedEdgeDetails(edgeId) {
+  const view = useDiagramState((s2) => s2.view), likec4model = useLikeC4Model(!0);
+  return useMemo$1(() => layout$1(
+    edgeId,
     view,
-    likec4model,
-    scope
+    likec4model
   ), [
-    subjectId,
+    edgeId,
     view,
     likec4model,
-    layout,
-    scope
+    layout$1
   ]);
 }
-var elementNode = "_1ittjvh0", elementNodeContent = "_1ittjvh1", elementNodeTitle = "_1ittjvh2", elementNodeDescription = "_1ittjvh3", compoundNodeBody = "_1ittjvh4", compoundNodeTitle = "_1ittjvh5", cssShapeSvg$1 = "_1ittjvh6", edgePath = "_1ittjvh7", edgeLabel$1 = "_1ittjvh8", edgeLabelText$1 = "_1ittjvh9", emptyNode = "_1ittjvha", navigateBtnBox = "_1ittjvhb", navigateBtn$2 = "_1ittjvhc";
-const Text$3 = Text$4.withProps({
+var elementNode$1 = "xsefl30", elementNodeContent$1 = "xsefl31", elementNodeTitle$1 = "xsefl32", elementNodeDescription$1 = "xsefl33", compoundNodeBody$1 = "xsefl34", compoundNodeTitle$1 = "xsefl35", cssShapeSvg$2 = "xsefl36", edgePath$1 = "xsefl37", edgeLabel$2 = "xsefl38", edgeLabelText$2 = "xsefl39", edgeLabelTechnology$1 = "xsefl3a", navigateBtnBox$1 = "xsefl3b", navigateBtn$3 = "xsefl3c";
+const Text$5 = Text$6.withProps({
   component: "div"
 });
-function CompoundNode({
+function CompoundNode$1({
   data: {
     element,
     ports,
@@ -13868,15 +13988,15 @@ function CompoundNode({
       m$3.div,
       {
         className: clsx([
-          compoundNodeBody,
+          compoundNodeBody$1,
           "likec4-compound-node"
         ]),
-        "data-compound-depth": 2,
+        "data-compound-depth": 3,
         "data-likec4-color": element.color,
         animate: {
           opacity: data.dimmed ? 0.15 : 1,
           transition: {
-            delay: data.dimmed ? 0.8 : 0
+            delay: data.dimmed === !0 ? 0.4 : 0
           }
         },
         ...selectable && {
@@ -13890,15 +14010,15 @@ function CompoundNode({
             scale: 1
           }
         },
-        children: /* @__PURE__ */ jsx(Text$3, { className: compoundNodeTitle, maw: width2 - 20, children: element.title })
+        children: /* @__PURE__ */ jsx(Text$5, { className: compoundNodeTitle$1, maw: width2 - 20, children: element.title })
       }
     ),
-    ports.left.map(({ id: id2, type }, i2) => /* @__PURE__ */ jsx(
+    ports.out.map((id2, i2) => /* @__PURE__ */ jsx(
       Handle,
       {
         id: id2,
-        type: type === "in" ? "target" : "source",
-        position: Position.Left,
+        type: "source",
+        position: Position.Right,
         style: {
           visibility: "hidden",
           top: `${16 + 20 * i2}px`
@@ -13906,12 +14026,12 @@ function CompoundNode({
       },
       id2
     )),
-    ports.right.map(({ id: id2, type }, i2) => /* @__PURE__ */ jsx(
+    ports.in.map((id2, i2) => /* @__PURE__ */ jsx(
       Handle,
       {
         id: id2,
-        type: type === "in" ? "target" : "source",
-        position: Position.Right,
+        type: "target",
+        position: Position.Left,
         style: {
           visibility: "hidden",
           top: `${16 + 20 * i2}px`
@@ -13921,7 +14041,7 @@ function CompoundNode({
     ))
   ] });
 }
-var container$5 = "_14ylloj1", handleCenter = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed$2 = "_14ylloj4", indicator$1 = "_14ylloj7", fillElementFill = "_14ylloj8", fillMixStroke = "_14ylloja", hasIcon = "_14yllojb", title$3 = "_14ylloje", description$1 = "_14yllojf", technology = "_14yllojg", elementDataContainer = "_14yllojh", elementTextData = "_14ylloji", elementIcon = "_14yllojj", cssShapeSvg = "_14yllojm", navigateBtn$1 = "_14yllojn";
+var container$6 = "_14ylloj1", handleCenter = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed$2 = "_14ylloj4", indicator$1 = "_14ylloj7", fillElementFill = "_14ylloj8", fillMixStroke = "_14ylloja", hasIcon = "_14yllojb", title$3 = "_14ylloje", description$1 = "_14yllojf", technology = "_14yllojg", elementDataContainer = "_14yllojh", elementTextData = "_14ylloji", elementIcon = "_14yllojj", cssShapeSvg$1 = "_14yllojm", navigateBtn$2 = "_14yllojn";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2), rx = radius, ry = toDomPrecision(tilt * radius), tiltAdjustedHeight = height - 2 * ry;
   return {
@@ -14003,82 +14123,967 @@ function ElementShapeSvg({ shape, w, h }) {
             rx: 6,
             strokeWidth: 0
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            x: w - PersonIcon.width - 6,
-            y: h - PersonIcon.height,
-            width: PersonIcon.width,
-            height: PersonIcon.height,
-            viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
-            className: fillMixStroke,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeWidth: 0,
-                d: PersonIcon.path
-              }
-            )
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            x: w - PersonIcon.width - 6,
+            y: h - PersonIcon.height,
+            width: PersonIcon.width,
+            height: PersonIcon.height,
+            viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
+            className: fillMixStroke,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeWidth: 0,
+                d: PersonIcon.path
+              }
+            )
+          }
+        )
+      ] });
+    case "queue": {
+      const { path, rx, ry } = queueSVGPath(w, h);
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, className: fillMixStroke, strokeWidth: 2 })
+      ] });
+    }
+    case "storage":
+    case "cylinder": {
+      const { path, rx, ry } = cylinderSVGPath(w, h);
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, className: fillMixStroke, strokeWidth: 2 })
+      ] });
+    }
+    case "rectangle":
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          width: w,
+          height: h,
+          rx: 6,
+          strokeWidth: 0
+        }
+      );
+    default:
+      return nonexhaustive(shape);
+  }
+}
+function SelectedIndicator({ shape, w, h }) {
+  switch (shape) {
+    case "queue":
+      return /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+    case "storage":
+    case "cylinder":
+      return /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+    default:
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: -1,
+          y: -1,
+          width: w + 2,
+          height: h + 2,
+          rx: 6
+        }
+      );
+  }
+}
+const Action$2 = ActionIcon$1.withProps({
+  className: "nodrag nopan " + navigateBtn$3,
+  radius: "md",
+  role: "button",
+  onDoubleClick: stopPropagation$1,
+  onPointerDownCapture: stopPropagation$1
+}), Text$4 = Text$6.withProps({
+  component: "div"
+});
+function selector$6(s2) {
+  return {
+    currentViewId: s2.view.id,
+    onNavigateTo: s2.onNavigateTo,
+    onOpenSource: s2.onOpenSourceElement
+  };
+}
+function ElementNode$1({
+  data: {
+    element,
+    ports,
+    navigateTo,
+    ...data
+  },
+  selectable = !0,
+  width: w = 100,
+  height: h = 100
+}) {
+  const overlay = useOverlayDialog(), {
+    currentViewId,
+    onNavigateTo,
+    onOpenSource
+  } = useDiagramState(selector$6);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs(
+      m$3.div,
+      {
+        className: clsx([
+          elementNode$1,
+          "likec4-element-node"
+        ]),
+        "data-likec4-color": element.color,
+        "data-likec4-shape": element.shape,
+        animate: {
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed === !0 ? 0.4 : 0
+          }
+        },
+        ...selectable && {
+          whileHover: {
+            scale: 1.045,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 0.97
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: clsx(
+                cssShapeSvg$2
+              ),
+              viewBox: `0 0 ${w} ${h}`,
+              width: w,
+              height: h,
+              children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: element.shape, w, h })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: elementNodeContent$1, children: [
+            /* @__PURE__ */ jsx(Text$4, { className: elementNodeTitle$1, lineClamp: 2, children: element.title }),
+            element.description && /* @__PURE__ */ jsx(Text$4, { className: elementNodeDescription$1, lineClamp: 4, children: element.description })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox$1, children: [
+            navigateTo && onNavigateTo && navigateTo !== currentViewId && /* @__PURE__ */ jsx(
+              Action$2,
+              {
+                onClick: (event) => {
+                  event.stopPropagation(), setTimeout(() => onNavigateTo(navigateTo), 100), overlay.close();
+                },
+                children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, style: { width: "75%" } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action$2,
+              {
+                onClick: (event) => {
+                  event.stopPropagation(), overlay.openOverlay({
+                    relationshipsOf: data.fqn
+                  });
+                },
+                children: /* @__PURE__ */ jsx(IconTransform, { stroke: 1.8, style: { width: "72%" } })
+              }
+            ),
+            onOpenSource && /* @__PURE__ */ jsx(
+              Action$2,
+              {
+                onClick: (event) => {
+                  event.stopPropagation(), onOpenSource(data.fqn);
+                },
+                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "72%" } })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    ports.out.map((id2, i2) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: id2,
+        type: "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i2 + 1) * ((h - 30) / (ports.out.length + 1))}px`
+        }
+      },
+      id2
+    )),
+    ports.in.map((id2, i2) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: id2,
+        type: "target",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i2 + 1) * ((h - 30) / (ports.in.length + 1))}px`
+        }
+      },
+      id2
+    ))
+  ] });
+}
+function RelationshipEdge$2({
+  data,
+  label: label2,
+  ...props2
+}) {
+  const onNavigateTo = useDiagramState((s2) => s2.onNavigateTo), [edgePath2, labelX, labelY] = getBezierPath(props2), navigateTo = data.relation.navigateTo;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "g",
+      {
+        className: edgePath$1,
+        "data-edge-dimmed": data.dimmed,
+        "data-edge-hovered": data.hovered,
+        children: /* @__PURE__ */ jsx(
+          BaseEdge,
+          {
+            path: edgePath2,
+            ...props2
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+      Stack$1,
+      {
+        gap: 2,
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+          maxWidth: Math.abs(props2.targetX - props2.sourceX - 40),
+          zIndex: ZIndexes$1.max
+        },
+        className: clsx([
+          edgeLabel$2,
+          "nodrag nopan"
+        ]),
+        "data-edge-dimmed": data.dimmed,
+        "data-edge-hovered": data.hovered,
+        children: [
+          label2 && /* @__PURE__ */ jsx(Text$6, { component: "div", className: edgeLabelText$2, lineClamp: 3, children: label2 }),
+          data.relation.technology && /* @__PURE__ */ jsxs(Text$6, { component: "div", className: edgeLabelTechnology$1, children: [
+            "[ ",
+            data.relation.technology,
+            " ]"
+          ] }),
+          navigateTo && onNavigateTo && /* @__PURE__ */ jsx(Box, { ta: "center", mt: 4, children: /* @__PURE__ */ jsx(
+            ActionIcon$1,
+            {
+              variant: "default",
+              size: "sm",
+              radius: "sm",
+              onPointerDownCapture: stopPropagation$1,
+              onClick: (event) => {
+                event.stopPropagation(), onNavigateTo(navigateTo, event);
+              },
+              role: "button",
+              onDoubleClick: stopPropagation$1,
+              children: /* @__PURE__ */ jsx(IconZoomScan, {})
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+}
+const nodeTypes$2 = {
+  element: ElementNode$1,
+  compound: CompoundNode$1
+}, edgeTypes$2 = {
+  relation: RelationshipEdge$2
+}, resetDimmedAndHovered$1 = (xyflow) => {
+  xyflow.setEdges(
+    (edges) => edges.map((edge) => ({
+      ...edge,
+      data: {
+        ...edge.data,
+        dimmed: !1,
+        hovered: !1
+      },
+      animated: !1
+    }))
+  ), xyflow.setNodes(
+    (nodes) => nodes.map(
+      (n2) => ({
+        ...n2,
+        data: {
+          ...n2.data,
+          dimmed: !1,
+          hovered: !1
+        }
+      })
+    )
+  );
+}, EdgeDetailsXYFlow = memo$1(function({ edgeId }) {
+  const diagramStore = useDiagramStoreApi(), {
+    view,
+    edge,
+    edges,
+    nodes,
+    bounds
+  } = useLayoutedEdgeDetails(edgeId), boundsRef = useSyncedRef(bounds), xyflow = useReactFlow(), xystore = useStoreApi(), fitview = useDebouncedCallback(
+    () => {
+      const {
+        width: width2,
+        height
+      } = xystore.getState(), viewport = getViewportForBounds(
+        {
+          ...boundsRef.current,
+          height: Math.max(boundsRef.current.height + 100, height - 200)
+          // Add some padding to the bottom
+        },
+        width2,
+        height,
+        0.2,
+        1,
+        0.2
+      );
+      xyflow.setViewport(viewport, { duration: 350 });
+    },
+    [xyflow],
+    150
+  );
+  useEffect$1(() => {
+    xyflow.setNodes(nodes), xyflow.setEdges(edges);
+  }, [nodes, edges]);
+  const zoomable = !0;
+  return useUpdateEffect$1(() => fitview(), [edge.id]), /* @__PURE__ */ jsxs(
+    index,
+    {
+      defaultEdges: [],
+      defaultNodes: [],
+      nodeTypes: nodeTypes$2,
+      edgeTypes: edgeTypes$2,
+      defaultMarkerColor: "var(--xy-edge-stroke)",
+      zoomOnPinch: zoomable,
+      zoomOnScroll: !1,
+      zoomOnDoubleClick: !1,
+      maxZoom: 1.5,
+      minZoom: 0.1,
+      fitView: !0,
+      fitViewOptions: {
+        padding: 0.2,
+        maxZoom: 1,
+        minZoom: 0.1,
+        includeHiddenNodes: !0
+      },
+      preventScrolling: !0,
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: !0,
+      panOnDrag: !0,
+      elementsSelectable: !0,
+      nodesFocusable: !1,
+      edgesFocusable: !1,
+      nodesDraggable: !1,
+      onEdgeMouseEnter: (_, edge2) => {
+        xyflow.setEdges(
+          (edges2) => edges2.map((e2) => ({
+            ...e2,
+            data: {
+              ...e2.data,
+              dimmed: e2.id !== edge2.id,
+              hovered: e2.id === edge2.id
+            },
+            zIndex: e2.id === edge2.id ? ZIndexes$1.max : ZIndexes$1.edge,
+            animated: e2.id === edge2.id
+          }))
+        ), xyflow.setNodes(
+          (nodes2) => nodes2.map((n2) => ({
+            ...n2,
+            data: {
+              ...n2.data,
+              dimmed: n2.id !== edge2.source && n2.id !== edge2.target
+            }
+          }))
+        );
+      },
+      onEdgeMouseLeave: () => {
+        resetDimmedAndHovered$1(xyflow);
+      },
+      onEdgeClick: (e2, edge2) => {
+        e2.stopPropagation(), diagramStore.getState().onOpenSourceRelation?.(edge2.data.relation.id);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Panel$1, { position: "top-center", children: /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", children: /* @__PURE__ */ jsx(
+          SelectEdge,
+          {
+            view,
+            edge
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(EdgeData, { edge, top: bounds.height, width: bounds.width })
+      ]
+    }
+  );
+}), EdgeData = ({ edge, top, width: width2 }) => /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    maw: width2,
+    style: {
+      transform: `translate(100px, ${top + 32}px)`
+    },
+    children: /* @__PURE__ */ jsxs(Box, { className: edgeDataGrid, children: [
+      /* @__PURE__ */ jsx(Text$6, { size: "xs", fw: 500, c: "dimmed", children: "technology" }),
+      /* @__PURE__ */ jsx(Text$6, { children: edge.technology || "unknown" }),
+      /* @__PURE__ */ jsx(Text$6, { size: "xs", fw: 500, c: "dimmed", children: "description" }),
+      /* @__PURE__ */ jsx(Text$6, { children: edge.description || "no description" })
+    ] })
+  }
+) });
+var container$5 = "y6dq321", node = "_1nudxvt0", label = "_1nudxvt1";
+const classes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  get label() {
+    return label;
+  },
+  get node() {
+    return node;
+  }
+}, Symbol.toStringTag, { value: "Module" })), SelectElement = ({
+  subject,
+  viewId,
+  scope,
+  onSelect
+}) => {
+  const viewport = useRef$1(null), data = useLikeC4ElementsTree(scope === "view" ? viewId : void 0), tree = useTree({
+    multiple: !1
+  });
+  useEffect$1(() => {
+    ancestorsFqn(subject.id).reverse().forEach((id2) => {
+      tree.expand(id2);
+    }), tree.select(subject.id);
+  }, [subject.id]);
+  const theme2 = useComputedColorScheme();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "bottom",
+      shadow: "md",
+      keepMounted: !0,
+      withinPortal: !1,
+      closeOnClickOutside: !0,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      onOpen: () => {
+        setTimeout(() => {
+          const item = viewport.current?.querySelector(`[data-value="${subject.id}"]`);
+          console.log("item", item), item?.scrollIntoView({ behavior: "instant", block: "nearest" });
+        }, 100);
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "light",
+            color: theme2 === "light" ? "dark" : "gray",
+            fw: "500",
+            maw: 250,
+            style: { padding: "0.25rem 0.75rem" },
+            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+            children: subject.title
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(
+          Tree,
+          {
+            allowRangeSelection: !1,
+            selectOnClick: !1,
+            tree,
+            data,
+            classNames: classes,
+            levelOffset: 8,
+            styles: {
+              label: {
+                paddingTop: 5,
+                paddingBottom: 6
+              }
+            },
+            renderNode: ({ node: node2, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsxs(Group, { gap: 2, wrap: "nowrap", ...elementProps, py: "3", children: [
+              /* @__PURE__ */ jsx(
+                ActionIcon$1,
+                {
+                  variant: "subtle",
+                  size: 18,
+                  c: "dimmed",
+                  style: {
+                    visibility: hasChildren ? "visible" : "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    IconChevronRight,
+                    {
+                      stroke: 3.5,
+                      style: {
+                        transition: "transform 150ms ease",
+                        transform: `rotate(${expanded ? "90deg" : "0"})`,
+                        width: "80%"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  flex: "1 1 100%",
+                  w: "100%",
+                  onClick: (e2) => {
+                    e2.stopPropagation(), onSelect(node2.value), tree.select(node2.value), tree.expand(node2.value);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Text$6,
+                    {
+                      fz: "sm",
+                      fw: selected ? "600" : "400",
+                      truncate: "end",
+                      children: node2.label
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  );
+}, graphColumn = (c) => ({
+  name: c,
+  id: `__${c}`,
+  anchor: `__${c}::anchor`
+}), Sizes = {
+  dagre: {
+    ranksep: 40,
+    nodesep: 20,
+    edgesep: 20
+  },
+  edgeLabel: {
+    width: 60
+  },
+  emptyNodeOffset: 150,
+  nodeWidth: 270,
+  hodeHeight: 160,
+  // Spacer between elements in a compound node
+  // 0 means no spacer
+  spacerHeight: 0,
+  compoundLabelHeight: 1
+}, ZIndexes = {
+  empty: 2,
+  compound: 2,
+  edge: 3,
+  element: 4,
+  max: 5
+};
+function createGraph() {
+  const g = new dagre$1.graphlib.Graph({
+    directed: !0,
+    compound: !0
+  });
+  return g.setGraph({
+    ...Sizes.dagre,
+    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: 2 }), g.setParent(c.anchor, c.id), prev && g.setEdge(prev, c.anchor, {
+      width: 0
+    }), c.anchor;
+  }, null), g;
+}
+const sized = (height = Sizes.hodeHeight) => ({
+  width: Sizes.nodeWidth,
+  height
+}), graphId = (node2) => ({
+  id: node2.id,
+  port: node2.type === "compound" ? `${node2.id}::port` : node2.id,
+  // port: `${node.id}::port`,
+  // For nested nodes
+  body: `${node2.id}`,
+  spacer: `${node2.id}:spacer`
+});
+function nodeData(element, ctx) {
+  let diagramNode = ctx.diagramNodes.get(element.id);
+  const ancestor = diagramNode ?? (ctx.scope === "view" ? x$1(
+    element.ancestors(),
+    m((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
+    T(n$4),
+    d()
+  ) : void 0);
+  return {
+    fqn: element.id,
+    existsInCurrentView: ctx.diagramNodes.has(element.id),
+    element: {
+      kind: element.kind,
+      title: diagramNode?.title ?? element.title,
+      description: diagramNode?.description ?? element.element.description,
+      color: diagramNode?.color ?? ancestor?.color ?? element.color,
+      shape: diagramNode?.shape ?? element.shape
+    },
+    navigateTo: diagramNode?.navigateTo ?? d(element.viewsOf())?.id ?? null,
+    ports: {
+      left: [],
+      right: []
+    }
+  };
+}
+function createEmptyNode(column, ctx) {
+  const id2 = `${column}::empty`, xynodes = ctx.columns[column];
+  let node2 = xynodes.get(id2);
+  if (node2)
+    return invariant(node2.type === "empty", "Node is not empty"), node2;
+  const xynode = {
+    type: "empty",
+    id: id2,
+    position: { x: 0, y: 0 },
+    data: {
+      column
+    },
+    zIndex: ZIndexes.empty
+  };
+  xynodes.set(id2, xynode);
+  const k = graphId(xynode);
+  return ctx.g.setNode(k.id, {
+    width: 230,
+    height: 130
+  }), ctx.g.setParent(k.id, graphColumn(column).id), xynode;
+}
+function createNode(column, nodeType, element, ctx) {
+  const xynodes = ctx.columns[column];
+  let node2 = xynodes.get(element.id);
+  if (node2)
+    return invariant(node2.type !== "empty", `Node ${element.id} is empty`), node2;
+  const g = ctx.g, parent = x$1(
+    element.ancestors(),
+    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)
+    ),
+    (found) => found ? createNode(column, "compound", found, ctx) : null
+  ), xynode = {
+    type: nodeType,
+    id: `${column}::${element.id}`,
+    position: { x: 0, y: 0 },
+    data: {
+      ...nodeData(element, ctx),
+      column
+    },
+    zIndex: ZIndexes[nodeType],
+    ...!!parent && { parentId: parent.id }
+  };
+  xynodes.set(element.id, xynode);
+  const k = graphId(xynode);
+  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));
+  const parentGraphId = parent ? graphId(parent).body : graphColumn(column).id;
+  return g.setParent(k.id, parentGraphId), xynode;
+}
+function applyDagreLayout(g) {
+  return dagre$1.layout(g), function nodeBounds(nodeId, relativeTo) {
+    const { x: x2, y: y2, width: width2, height } = g.node(nodeId), pos = {
+      position: {
+        x: x2 - Math.round(width2 / 2),
+        y: y2 - Math.round(height / 2)
+      },
+      width: width2,
+      height
+    };
+    if (!relativeTo)
+      return pos;
+    const offset = nodeBounds(relativeTo).position;
+    return {
+      position: {
+        x: pos.position.x - offset.x,
+        y: pos.position.y - offset.y
+      },
+      width: pos.width,
+      height: pos.height
+    };
+  };
+}
+function addEdge(ctx, props2) {
+  const { source, target, relations } = props2, ids = relations.map((r2) => r2.id).join("_"), label2 = t$5(relations)?.title ?? "untitled", isMultiple = relations.length > 1, edge = {
+    id: `rel${ctx.edges.length + 1}_${ids}`,
+    type: "relation",
+    source,
+    target,
+    sourceHandle: target,
+    targetHandle: source,
+    data: {
+      relations
+    },
+    label: isMultiple ? `${relations.length} relationships` : label2,
+    zIndex: ZIndexes.edge,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: isMultiple ? 7 : 9
+    },
+    style: {
+      strokeWidth: isMultiple ? 5 : 2.2,
+      strokeDasharray: isMultiple ? void 0 : "5, 5"
+    }
+  };
+  ctx.edges.push(edge);
+}
+function processRelations(props2) {
+  x$1(
+    props2.incoming,
+    i$2((r2) => r2.source),
+    t$2(),
+    m$1((a2, b2) => compareFqnHierarchically(a2[0], b2[0])),
+    t$7(),
+    u$4(([sourceId, relations]) => {
+      try {
+        props2.forEachIncoming(sourceId, relations);
+      } catch (e2) {
+        console.error("Error in forEachIncoming", e2);
+      }
+    })
+  ), x$1(
+    props2.outgoing,
+    i$2((r2) => r2.target),
+    t$2(),
+    m$1((a2, b2) => compareFqnHierarchically(a2[0], b2[0])),
+    t$7(),
+    u$4(([targetId, relations]) => {
+      try {
+        props2.forEachOutgoing(targetId, relations);
+      } catch (e2) {
+        console.error("Error in forEachOutgoing", e2);
+      }
+    })
+  );
+}
+function layout(subjectId, view, likec4model, scope) {
+  const diagramNodes = new Map(view.nodes.map((n2) => [n2.id, n2])), subjectElement = likec4model.element(subjectId);
+  diagramNodes.has(subjectId) || (scope = "global");
+  const g = createGraph(), ctx = {
+    scope,
+    g,
+    diagramNodes,
+    subjectId,
+    subjectElement,
+    connected: i$3(
+      ["incomers", "outgoers"],
+      (column) => new Set(subjectElement[column]().map((m2) => m2.id))
+    ),
+    columns: {
+      incomers: /* @__PURE__ */ new Map(),
+      outgoers: /* @__PURE__ */ new Map()
+    },
+    edges: []
+  }, subject = {
+    id: subjectElement.id,
+    type: "element",
+    position: { x: 0, y: 0 },
+    data: {
+      ...nodeData(subjectElement, ctx),
+      column: "subject"
+    },
+    zIndex: 3,
+    selectable: !1,
+    focusable: !1,
+    ...sized()
+  };
+  if (g.setNode(subject.id, sized()), g.setParent(subject.id, graphColumn("subject").id), processRelations({
+    // Based on the scope we pick relationships
+    ...scope === "global" ? {
+      incoming: subjectElement.incoming().map((r2) => r2.relationship),
+      outgoing: subjectElement.outgoing().map((r2) => r2.relationship)
+    } : {
+      incoming: likec4model.view(view.id).element(subjectId).incoming().flatMap((c) => c.relationships().map((r2) => r2.relationship)),
+      outgoing: likec4model.view(view.id).element(subjectId).outgoing().flatMap((c) => c.relationships().map((r2) => r2.relationship))
+    },
+    forEachIncoming(sourceId, relations) {
+      const source = createNode("incomers", "element", likec4model.element(sourceId), ctx);
+      g.setEdge(graphId(source).port, subject.id), subject.data.ports.left.push({
+        id: source.id,
+        type: "in"
+      }), source.data.ports.right.push({
+        id: subject.id,
+        type: "out"
+      }), addEdge(ctx, {
+        source: source.id,
+        target: subject.id,
+        relations
+      });
+    },
+    forEachOutgoing(targetId, relations) {
+      const target = createNode("outgoers", "element", likec4model.element(targetId), ctx);
+      g.setEdge(subjectElement.id, graphId(target).port), subject.data.ports.right.push({
+        id: target.id,
+        type: "out"
+      }), target.data.ports.left.push({
+        id: subject.id,
+        type: "in"
+      }), addEdge(ctx, {
+        source: subjectElement.id,
+        target: target.id,
+        relations
+      });
+    }
+  }), ctx.columns.incomers.size == 0) {
+    const source = createEmptyNode("incomers", ctx);
+    g.setEdge(graphId(source).port, subject.id);
+  }
+  if (ctx.columns.outgoers.size == 0) {
+    const target = createEmptyNode("outgoers", ctx);
+    g.setEdge(subject.id, graphId(target).port);
+  }
+  const subjectPortsCount = Math.max(subject.data.ports.left.length, subject.data.ports.right.length);
+  subjectPortsCount > 2 && (g.node(subjectElement.id).height = Sizes.hodeHeight + (subjectPortsCount - 2) * 1);
+  const nodebounds = applyDagreLayout(ctx.g), xynodes = [
+    subject,
+    ...ctx.columns.incomers.values(),
+    ...ctx.columns.outgoers.values()
+  ].map((node2) => ({
+    ...node2,
+    ...nodebounds(node2.id, node2.parentId)
+  })), sortedPorts = (ports) => ports.length < 2 ? ports : x$1(
+    ports,
+    m((port) => ({
+      port,
+      topY: nodebounds(port.id).position.y
+    })),
+    a$3(p$3("topY")),
+    m(p$3("port"))
+  );
+  for (const node2 of xynodes) {
+    if (node2.type === "empty") {
+      const subjectPosition = nodebounds(subject.id);
+      if (node2.position.y = subjectPosition.position.y + subjectPosition.height / 2 - node2.height / 2, node2.data.column === "incomers")
+        node2.width = subjectPosition.position.x - Sizes.emptyNodeOffset - node2.position.x;
+      else {
+        const rightX = node2.position.x + node2.width;
+        node2.position.x = subjectPosition.position.x + subjectPosition.width + Sizes.emptyNodeOffset, node2.width = rightX - node2.position.x;
+      }
+      continue;
+    }
+    node2.data.ports.left.length > 1 && (node2.data.ports.left = sortedPorts(node2.data.ports.left)), node2.data.ports.right.length > 1 && (node2.data.ports.right = sortedPorts(node2.data.ports.right));
+  }
+  return {
+    view,
+    viewIncludesSubject: diagramNodes.has(subjectId),
+    subject: subjectElement,
+    edges: ctx.edges,
+    nodes: xynodes,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 0,
+      height: g.graph().height ?? 0
+    }
+  };
+}
+function useLayoutedRelationships(subjectId, scope) {
+  const view = useDiagramState((s2) => s2.view), likec4model = useLikeC4Model(!0);
+  return useMemo$1(() => layout(
+    subjectId,
+    view,
+    likec4model,
+    scope
+  ), [
+    subjectId,
+    view,
+    likec4model,
+    layout,
+    scope
+  ]);
+}
+var elementNode = "_1ittjvh0", elementNodeContent = "_1ittjvh1", elementNodeTitle = "_1ittjvh2", elementNodeDescription = "_1ittjvh3", compoundNodeBody = "_1ittjvh4", compoundNodeTitle = "_1ittjvh5", cssShapeSvg = "_1ittjvh6", edgePath = "_1ittjvh7", edgeLabel$1 = "_1ittjvh8", edgeLabelText$1 = "_1ittjvh9", edgeLabelTechnology = "_1ittjvha", emptyNode = "_1ittjvhb", navigateBtnBox = "_1ittjvhc", navigateBtn$1 = "_1ittjvhd";
+const Text$3 = Text$6.withProps({
+  component: "div"
+});
+function CompoundNode({
+  data: {
+    element,
+    ports,
+    ...data
+  },
+  width: width2 = 200,
+  selectable = !0
+}) {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      m$3.div,
+      {
+        className: clsx([
+          compoundNodeBody,
+          "likec4-compound-node"
+        ]),
+        "data-compound-depth": 3,
+        "data-likec4-color": element.color,
+        animate: {
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed === !0 ? 0.4 : 0
+          }
+        },
+        ...selectable && {
+          whileHover: {
+            scale: 1.04,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 1
           }
-        )
-      ] });
-    case "queue": {
-      const { path, rx, ry } = queueSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, className: fillMixStroke, strokeWidth: 2 })
-      ] });
-    }
-    case "storage":
-    case "cylinder": {
-      const { path, rx, ry } = cylinderSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, className: fillMixStroke, strokeWidth: 2 })
-      ] });
-    }
-    case "rectangle":
-      return /* @__PURE__ */ jsx(
-        "rect",
-        {
-          width: w,
-          height: h,
-          rx: 6,
-          strokeWidth: 0
+        },
+        children: /* @__PURE__ */ jsx(Text$3, { className: compoundNodeTitle, maw: width2 - 20, children: element.title })
+      }
+    ),
+    ports.left.map(({ id: id2, type }, i2) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: id2,
+        type: type === "in" ? "target" : "source",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${16 + 20 * i2}px`
         }
-      );
-    default:
-      return nonexhaustive(shape);
-  }
-}
-function SelectedIndicator({ shape, w, h }) {
-  switch (shape) {
-    case "queue":
-      return /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
-    case "storage":
-    case "cylinder":
-      return /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
-    default:
-      return /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: -1,
-          y: -1,
-          width: w + 2,
-          height: h + 2,
-          rx: 6
+      },
+      id2
+    )),
+    ports.right.map(({ id: id2, type }, i2) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: id2,
+        type: type === "in" ? "target" : "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${16 + 20 * i2}px`
         }
-      );
-  }
+      },
+      id2
+    ))
+  ] });
 }
-const Text$2 = Text$4.withProps({
+const Action$1 = ActionIcon$1.withProps({
+  className: "nodrag nopan " + navigateBtn$1,
+  radius: "md",
+  role: "button",
+  onDoubleClick: stopPropagation$1,
+  onPointerDownCapture: stopPropagation$1
+}), Text$2 = Text$6.withProps({
   component: "div"
 });
 function selector$5(s2) {
   return {
-    viewId: s2.view.id,
-    onNavigateTo: s2.onNavigateTo
+    currentViewId: s2.view.id,
+    onNavigateTo: s2.onNavigateTo,
+    onOpenSource: s2.onOpenSourceElement
   };
 }
 function ElementNode({
@@ -14092,9 +15097,10 @@ function ElementNode({
   width: w = 100,
   height: h = 100
 }) {
-  const overlay2 = useOverlayDialog(), {
-    viewId,
-    onNavigateTo
+  const overlay = useOverlayDialog(), {
+    currentViewId,
+    onNavigateTo,
+    onOpenSource
   } = useDiagramState(selector$5);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
@@ -14108,7 +15114,7 @@ function ElementNode({
         animate: {
           opacity: data.dimmed ? 0.15 : 1,
           transition: {
-            delay: data.dimmed ? 0.8 : 0
+            delay: data.dimmed === !0 ? 0.4 : 0
           }
         },
         ...selectable && {
@@ -14127,39 +15133,49 @@ function ElementNode({
             "svg",
             {
               className: clsx(
-                cssShapeSvg$1
+                cssShapeSvg
               ),
               viewBox: `0 0 ${w} ${h}`,
               width: w,
               height: h,
-              children: /* @__PURE__ */ jsx(
-                ElementShapeSvg,
-                {
-                  shape: element.shape,
-                  w,
-                  h
-                }
-              )
+              children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: element.shape, w, h })
             }
           ),
           /* @__PURE__ */ jsxs(Box, { className: elementNodeContent, children: [
             /* @__PURE__ */ jsx(Text$2, { className: elementNodeTitle, lineClamp: 2, children: element.title }),
             element.description && /* @__PURE__ */ jsx(Text$2, { className: elementNodeDescription, lineClamp: 4, children: element.description })
           ] }),
-          navigateTo && onNavigateTo && navigateTo !== viewId && /* @__PURE__ */ jsx(Box, { className: navigateBtnBox, children: /* @__PURE__ */ jsx(
-            ActionIcon$1,
-            {
-              className: clsx("nodrag nopan", navigateBtn$2),
-              radius: "md",
-              onClick: (event) => {
-                event.stopPropagation(), setTimeout(() => onNavigateTo(navigateTo), 200), overlay2.close();
-              },
-              role: "button",
-              onDoubleClick: stopPropagation$1,
-              onPointerDownCapture: stopPropagation$1,
-              children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, style: { width: "75%" } })
-            }
-          ) })
+          /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox, children: [
+            navigateTo && onNavigateTo && navigateTo !== currentViewId && /* @__PURE__ */ jsx(
+              Action$1,
+              {
+                onClick: (event) => {
+                  event.stopPropagation(), setTimeout(() => onNavigateTo(navigateTo), 100), overlay.close();
+                },
+                children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, style: { width: "75%" } })
+              }
+            ),
+            data.column !== "subject" && /* @__PURE__ */ jsx(
+              Action$1,
+              {
+                onClick: (event) => {
+                  event.stopPropagation(), overlay.openOverlay({
+                    relationshipsOf: data.fqn
+                  });
+                },
+                children: /* @__PURE__ */ jsx(IconTransform, { stroke: 1.8, style: { width: "72%" } })
+              }
+            ),
+            onOpenSource && /* @__PURE__ */ jsx(
+              Action$1,
+              {
+                onClick: (event) => {
+                  event.stopPropagation(), onOpenSource(data.fqn);
+                },
+                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "72%" } })
+              }
+            )
+          ] })
         ]
       }
     ),
@@ -14191,7 +15207,7 @@ function ElementNode({
     ))
   ] });
 }
-const Text$1 = Text$4.withProps({
+const Text$1 = Text$6.withProps({
   component: "div"
 });
 function EmptyNode({
@@ -14209,7 +15225,7 @@ function RelationshipEdge$1({
   label: label2,
   ...props2
 }) {
-  const [edgePath$1, labelX, labelY] = getBezierPath(props2), isMultiRelation = data.relations.length > 1;
+  const onNavigateTo = useDiagramState((s2) => s2.onNavigateTo), [edgePath$12, labelX, labelY] = getBezierPath(props2), navigateTo = onNavigateTo ? t$5(data.relations)?.navigateTo : void 0, isMultiRelation = data.relations.length > 1, technology2 = t$5(data.relations)?.technology;
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       "g",
@@ -14220,15 +15236,16 @@ function RelationshipEdge$1({
         children: /* @__PURE__ */ jsx(
           BaseEdge,
           {
-            path: edgePath$1,
+            path: edgePath$12,
             ...props2
           }
         )
       }
     ),
-    label2 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+      Stack$1,
       {
+        gap: 2,
         style: {
           position: "absolute",
           transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
@@ -14241,10 +15258,41 @@ function RelationshipEdge$1({
         ]),
         "data-edge-dimmed": data.dimmed,
         "data-edge-hovered": data.hovered,
-        children: /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
-          isMultiRelation && /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "orange", children: /* @__PURE__ */ jsx(IconBoxMultipleFilled, { style: { width: "80%" } }) }),
-          /* @__PURE__ */ jsx(Text$4, { fw: isMultiRelation ? "500" : "400", component: "div", className: edgeLabelText$1, lineClamp: 3, children: label2 })
-        ] })
+        children: [
+          label2 && /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+            isMultiRelation && /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "orange", children: /* @__PURE__ */ jsx(IconBoxMultipleFilled, { style: { width: "80%" } }) }),
+            /* @__PURE__ */ jsx(
+              Text$6,
+              {
+                fw: isMultiRelation ? "500" : "400",
+                component: "div",
+                className: edgeLabelText$1,
+                lineClamp: 3,
+                children: label2
+              }
+            )
+          ] }),
+          technology2 && /* @__PURE__ */ jsxs(Text$6, { component: "div", className: edgeLabelTechnology, children: [
+            "[ ",
+            technology2,
+            " ]"
+          ] }),
+          navigateTo && /* @__PURE__ */ jsx(Box, { ta: "center", mt: 4, children: /* @__PURE__ */ jsx(
+            ActionIcon$1,
+            {
+              variant: "default",
+              size: "sm",
+              radius: "sm",
+              onPointerDownCapture: stopPropagation$1,
+              onClick: (event) => {
+                event.stopPropagation(), onNavigateTo?.(navigateTo, event);
+              },
+              role: "button",
+              onDoubleClick: stopPropagation$1,
+              children: /* @__PURE__ */ jsx(IconZoomScan, {})
+            }
+          ) })
+        ]
       }
     ) })
   ] });
@@ -14255,7 +15303,7 @@ const nodeTypes$1 = {
   empty: EmptyNode
 }, edgeTypes$1 = {
   relation: RelationshipEdge$1
-}, resetDimmedAndHovered = (xyflow) => {
+}, findSubjectNode = (nodes) => nodes.find((n2) => n2.type === "element" && n2.data.column === "subject"), resetDimmedAndHovered = (xyflow) => {
   xyflow.setEdges(
     (edges) => edges.map((edge) => ({
       ...edge,
@@ -14284,7 +15332,7 @@ const nodeTypes$1 = {
     ...edge,
     animated: animated && isConnected
   };
-}), onlyOneUnique = (data, property) => t$5(i$7(m(data.relations, p$2(property)))), RelationshipsXYFlow = memo$1(function() {
+}), 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,
@@ -14294,58 +15342,86 @@ const nodeTypes$1 = {
     viewIncludesSubject,
     edges,
     nodes,
-    subject
-  } = useLayoutedRelationships(_scope), scope = viewIncludesSubject ? _scope : "global", showSubjectWarning = !viewIncludesSubject && _scope === "view", [historySubjectId, historyOps, { history, current }] = useStateHistory(subject.id), xyflow = useReactFlow(), xystore = useStoreApi(), overlay2 = useOverlayDialog();
+    subject,
+    bounds
+  } = useLayoutedRelationships(subjectId, _scope), scope = viewIncludesSubject ? _scope : "global", showSubjectWarning = !viewIncludesSubject && _scope === "view", [historySubjectId, historyOps, { history, current }] = useStateHistory(subject.id), xyflow = useReactFlow(), xystore = useStoreApi(), overlay = useOverlayDialog();
   useEffect$1(() => {
     historySubjectId !== subject.id && historyOps.set(subject.id);
   }, [subject.id]), useEffect$1(() => {
-    historySubjectId !== subject.id && overlay2.openOverlay({
+    historySubjectId !== subject.id && overlay.openOverlay({
       relationshipsOf: historySubjectId
     });
-  }, [historySubjectId]), useEffect$1(() => {
-    const nextSubjectNode = nodes.find(
-      (n2) => n2.type !== "empty" && n2.data.column === "subject"
-    );
-    nextSubjectNode ? nextSubjectNode.data.fqn !== subject.id && console.error(`Subject node mismatch, expected: ${subject.id} got: ${nextSubjectNode.data.fqn}`) : console.error("Subject node not found");
-    const existingNode = lastClickedNodeRef.current ?? xyflow.getNodes().find((n2) => n2.type !== "empty" && n2.data.column !== "subject" && n2.data.fqn === subject.id);
-    if (lastClickedNodeRef.current = null, nextSubjectNode && existingNode && existingNode.data.column !== "subject") {
-      const xynodeFrom = xyflow.getInternalNode(existingNode.id), fromPos = xyflow.flowToScreenPosition({
-        x: xynodeFrom.internals.positionAbsolute.x,
-        y: xynodeFrom.internals.positionAbsolute.y
-      }), toPos = xyflow.flowToScreenPosition({
-        x: nextSubjectNode.position.x,
-        y: nextSubjectNode.position.y
-      }), diff = {
-        x: fromPos.x - toPos.x,
-        y: fromPos.y - toPos.y
-      };
-      xystore.getState().panBy(diff), xystore.getState().setNodes(nodes), xystore.getState().setEdges(edges);
-      return;
-    }
-    xyflow.setNodes(nodes), xyflow.setEdges(edges);
-  }, [nodes, edges]);
-  const zoomable = !0;
-  return useDebouncedEffect(
+  }, [historySubjectId]);
+  const fitview = useDebouncedCallback(
     () => {
       xyflow.fitView({
         padding: 0.2,
         includeHiddenNodes: !0,
         maxZoom: 1,
-        duration: 450
+        duration: 500
       });
     },
-    [subject.id, scope],
-    200
-  ), /* @__PURE__ */ jsx(
+    [xyflow],
+    150
+  );
+  return useEffect$1(() => {
+    const {
+      nodes: _nodes,
+      edges: _edges,
+      setNodes,
+      setEdges,
+      width: width2,
+      height
+    } = xystore.getState(), nextSubjectNode = findSubjectNode(nodes), currentSubjectNode = findSubjectNode(_nodes);
+    if (nextSubjectNode?.data.fqn === currentSubjectNode?.data.fqn) {
+      setNodes(nodes), setEdges(edges);
+      return;
+    }
+    nextSubjectNode ? nextSubjectNode.data.fqn !== subject.id && console.error(`Subject node mismatch, expected: ${subject.id} got: ${nextSubjectNode.data.fqn}`) : console.error("Subject node not found");
+    const nextzoom = getViewportForBounds(bounds, width2, height, 0.2, 1, 0.2).zoom, nextSubjectCenter = nextSubjectNode && {
+      x: nextSubjectNode.position.x + (nextSubjectNode.width ?? 0) / 2,
+      y: nextSubjectNode.position.y + (nextSubjectNode.height ?? 0) / 2
+    }, existingNode = lastClickedNodeRef.current ?? xyflow.getNodes().find((n2) => n2.type !== "empty" && n2.data.column !== "subject" && n2.data.fqn === subject.id);
+    if (lastClickedNodeRef.current = null, nextSubjectCenter && existingNode) {
+      setNodes(_nodes.map((n2) => ({
+        ...n2,
+        data: {
+          ...n2.data,
+          dimmed: n2.id !== existingNode.id ? "immediate" : !1
+        }
+      }))), setEdges(_edges.map((e2) => ({
+        ...e2,
+        data: {
+          ...e2.data,
+          dimmed: !0
+        }
+      })));
+      const existingInternalNode = xyflow.getInternalNode(existingNode.id), existingDimensions = getNodeDimensions(existingInternalNode), existingCenter = {
+        x: existingInternalNode.internals.positionAbsolute.x + existingDimensions.width / 2,
+        y: existingInternalNode.internals.positionAbsolute.y + existingDimensions.height / 2
+      }, zoom = Math.min(
+        xyflow.getViewport().zoom,
+        nextzoom,
+        nextSubjectNode.width / existingDimensions.width,
+        nextSubjectNode.height / existingDimensions.height
+      );
+      let isCancelled = !1;
+      return xyflow.setCenter(existingCenter.x, existingCenter.y, { zoom, duration: 350 }).then(() => {
+        isCancelled || (setNodes(nodes), setEdges(edges), xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: nextzoom }), fitview());
+      }), () => {
+        isCancelled = !0;
+      };
+    }
+    setNodes(nodes), setEdges(edges), fitview();
+  }, [nodes, edges]), /* @__PURE__ */ jsx(
     index,
     {
-      className: root,
       defaultEdges: [],
       defaultNodes: [],
       nodeTypes: nodeTypes$1,
       edgeTypes: edgeTypes$1,
       defaultMarkerColor: "var(--xy-edge-stroke)",
-      zoomOnPinch: zoomable,
+      zoomOnPinch: !0,
       zoomOnScroll: !1,
       zoomOnDoubleClick: !1,
       maxZoom: 1.5,
@@ -14398,25 +15474,25 @@ const nodeTypes$1 = {
         resetDimmedAndHovered(xyflow);
       },
       onNodeClick: (e2, node2) => {
-        e2.stopPropagation(), node2.type !== "empty" && (subject.id !== node2.data.fqn && (lastClickedNodeRef.current = node2), overlay2.openOverlay({
+        e2.stopPropagation(), node2.type !== "empty" && (lastClickedNodeRef.current = node2, overlay.openOverlay({
           relationshipsOf: node2.data.fqn
         }));
       },
+      onNodeDoubleClick: (e2) => {
+        e2.stopPropagation();
+      },
       onDoubleClick: (e2) => {
-        e2.stopPropagation(), xyflow.fitView({
-          includeHiddenNodes: !0,
-          maxZoom: 1,
-          duration: 450
-        });
+        e2.stopPropagation(), fitview();
       },
       onEdgeClick: (e2, edge) => {
-        if (e2.stopPropagation(), edge.data.relations.length <= 1) {
-          const relationId = t$5(edge.data.relations)?.id;
-          relationId && diagramStore.getState().onOpenSourceRelation?.(relationId);
+        e2.stopPropagation();
+        const relationId = t$5(edge.data.relations)?.id;
+        if (relationId) {
+          diagramStore.getState().onOpenSourceRelation?.(relationId);
           return;
         }
         const nodeId = onlyOneUnique(edge.data, "source") ? edge.source : edge.target, next = xyflow.getNode(nodeId);
-        next && next.type !== "empty" && (lastClickedNodeRef.current = next, overlay2.openOverlay({
+        next && next.type !== "empty" && (lastClickedNodeRef.current = next, overlay.openOverlay({
           relationshipsOf: next.data.fqn
         }));
       },
@@ -14448,13 +15524,13 @@ 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,
             {
               scope,
               subject: subject.element,
-              onSelect: (fqn) => overlay2.openOverlay({
+              onSelect: (fqn) => overlay.openOverlay({
                 relationshipsOf: fqn
               }),
               viewId: view.id
@@ -14489,7 +15565,7 @@ const nodeTypes$1 = {
               onClick: (e2) => {
                 e2.stopPropagation(), setScope("global");
               },
-              children: /* @__PURE__ */ jsx(Text$4, { fw: 500, size: "xs", c: "orange", component: "div", children: "Current view doesn't include selected element, switched to Global" })
+              children: /* @__PURE__ */ jsx(Text$6, { fw: 500, size: "xs", c: "orange", component: "div", children: "Current view doesn't include this element, switched to Global" })
             }
           )
         ] }),
@@ -14521,38 +15597,78 @@ const nodeTypes$1 = {
       ] }) })
     }
   );
-}), RelationshipsOfOverlay = memo$1(() => {
-  const diagramApi = useDiagramStoreApi();
-  return /* @__PURE__ */ jsx(
-    OverlayDialog,
+}), Overlays = memo$1(() => {
+  const diagramStore = useDiagramStoreApi(), activeOverlay = useDiagramState((s2) => s2.activeOverlay), ctxValue = useMemo$1(() => ({
+    openOverlay: (overlay) => {
+      diagramStore.getState().openOverlay(overlay);
+    },
+    close: () => {
+      diagramStore.getState().closeOverlay();
+    }
+  }), [diagramStore]);
+  return useHotkeys(
+    !!activeOverlay ? [
+      ["Escape", (e2) => {
+        e2.stopImmediatePropagation(), diagramStore.getState().closeOverlay();
+      }, { preventDefault: !0 }]
+    ] : []
+  ), /* @__PURE__ */ jsx(OverlayContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(AnimatePresence, { children: activeOverlay && /* @__PURE__ */ jsx(
+    Box,
     {
-      className: overlay,
-      onClose: () => {
-        diagramApi.getState().closeOverlay();
-      },
+      component: m$3.div,
+      className: container$5,
       "data-likec4-color": "gray",
-      children: ({ opened }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        opened && /* @__PURE__ */ jsx(
+      initial: {
+        "--backdrop-blur": "0px",
+        "--backdrop-opacity": "60%",
+        opacity: 0,
+        translateY: -15
+      },
+      animate: {
+        "--backdrop-blur": "10px",
+        "--backdrop-opacity": "25%",
+        opacity: 1,
+        translateY: 0
+      },
+      exit: {
+        "--backdrop-blur": "1px",
+        "--backdrop-opacity": "90%",
+        translateY: -5,
+        opacity: 0
+      },
+      children: /* @__PURE__ */ jsxs(FocusTrap, { children: [
+        activeOverlay.relationshipsOf && /* @__PURE__ */ jsx(
           ReactFlowProvider,
           {
             defaultNodes: [],
             defaultEdges: [],
-            children: /* @__PURE__ */ jsx(RelationshipsXYFlow, {})
+            children: /* @__PURE__ */ jsx(RelationshipsXYFlow, { subjectId: activeOverlay.relationshipsOf })
           }
         ),
-        /* @__PURE__ */ jsx(OverlayDialogCloseButton, {})
+        activeOverlay.edgeDetails && /* @__PURE__ */ jsx(
+          ReactFlowProvider,
+          {
+            defaultNodes: [],
+            defaultEdges: [],
+            children: /* @__PURE__ */ jsx(EdgeDetailsXYFlow, { edgeId: activeOverlay.edgeDetails })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
+          ActionIcon$1,
+          {
+            variant: "default",
+            size: "lg",
+            "data-autofocus": !0,
+            autoFocus: !0,
+            onClick: (e2) => {
+              e2.stopPropagation(), ctxValue.close();
+            },
+            children: /* @__PURE__ */ jsx(IconX, {})
+          }
+        ) })
       ] })
     }
-  );
-}), Overlays = memo$1(() => {
-  const {
-    hasLikeC4Model,
-    activeOverlay
-  } = useDiagramState((s2) => ({
-    hasLikeC4Model: s2.hasLikeC4Model,
-    activeOverlay: s2.activeOverlay
-  }));
-  return activeOverlay ? hasLikeC4Model ? activeOverlay.relationshipsOf ? /* @__PURE__ */ jsx(RelationshipsOfOverlay, {}) : activeOverlay.edgeDetails ? /* @__PURE__ */ jsx(EdgeDetailsOverlay, { edgeId: activeOverlay.edgeDetails }) : null : (console.warn("LikeC4Model is not available, but overlays are active"), null) : null;
+  ) }) });
 });
 function selectXYFlowSize(state) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`;
@@ -15235,8 +16351,8 @@ function RelationshipsDropdownMenu({
   likec4model,
   children
 }) {
-  const portalProps = useMantinePortalProps(), [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target]);
-  if (!sourceXYNode || !targetXYNode) return children;
+  const openOverlay = useDiagramState((s2) => s2.openOverlay), portalProps = useMantinePortalProps(), [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target]);
+  invariant(sourceXYNode, `Source XYNode ${edge.source} not found for edge ${edge.id}`), invariant(targetXYNode, `Target XYNode ${edge.target} not found for edge ${edge.id}`);
   const [direct, nested] = x$1(
     edge.relations,
     m((id2) => {
@@ -15251,14 +16367,12 @@ function RelationshipsDropdownMenu({
     }),
     T(n$4),
     d$1((r2) => r2.relationship.source === edge.source && r2.relationship.target === edge.target)
-  );
-  if (direct.length + nested.length === 0)
-    return /* @__PURE__ */ jsx(Fragment$1, { children });
-  const renderRelationship = (relationship, index2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  ), renderRelationship = (relationship, index2) => /* @__PURE__ */ jsxs(Fragment, { children: [
     index2 > 0 && /* @__PURE__ */ jsx(MenuDivider, { opacity: 0.65 }),
     /* @__PURE__ */ jsx(
       MenuItem,
       {
+        onClick: onClickOpenOverlay,
         component: Relationship,
         relationship,
         sourceNode: sourceXYNode.data.element,
@@ -15266,8 +16380,12 @@ function RelationshipsDropdownMenu({
         edge
       }
     )
-  ] }, relationship.id);
-  return /* @__PURE__ */ jsxs(
+  ] }, relationship.id), onClickOpenOverlay = useCallback$1((e2) => {
+    e2.stopPropagation(), openOverlay({
+      edgeDetails: edge.id
+    });
+  }, [edge.id, openOverlay]);
+  return direct.length + nested.length === 0 ? /* @__PURE__ */ jsx(Fragment$1, { children }) : /* @__PURE__ */ jsxs(
     Menu,
     {
       trigger: "click-hover",
@@ -15289,7 +16407,6 @@ function RelationshipsDropdownMenu({
             onPointerDownCapture: stopPropagation,
             onPointerDown: stopPropagation,
             onClick: stopPropagation,
-            onDoubleClick: stopPropagation,
             children: [
               direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 /* @__PURE__ */ jsx(MenuLabel, { children: "direct relationships" }),
@@ -15299,7 +16416,16 @@ function RelationshipsDropdownMenu({
                 direct.length > 0 && /* @__PURE__ */ jsx(MenuDivider, {}),
                 /* @__PURE__ */ jsx(MenuLabel, { children: "resolved from nested" }),
                 nested.map(renderRelationship)
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 5, right: 6, children: /* @__PURE__ */ jsx(
+                ActionIcon$1,
+                {
+                  size: 24,
+                  variant: "subtle",
+                  onClick: onClickOpenOverlay,
+                  children: /* @__PURE__ */ jsx(IconInfoCircle, { style: { width: "70%" } })
+                }
+              ) })
             ]
           }
         )
@@ -15326,9 +16452,9 @@ const Relationship = forwardRef$1(({
   })), sourceId = nameFromFqn(edge.source) + r2.source.id.slice(edge.source.length), targetId = nameFromFqn(edge.target) + r2.target.id.slice(edge.target.length), navigateTo = hasOnNavigateTo && r2.relationship.navigateTo !== viewId ? r2.relationship.navigateTo : void 0;
   return /* @__PURE__ */ jsxs(Stack$1, { ref, className: clsx(menuItemRelationship, className), ...props2, children: [
     /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-      /* @__PURE__ */ jsx(Text$4, { component: "div", className: endpoint, "data-likec4-color": sourceNode.color, children: sourceId }),
+      /* @__PURE__ */ jsx(Text$6, { component: "div", className: endpoint, "data-likec4-color": sourceNode.color, children: sourceId }),
       /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: 11 }),
-      /* @__PURE__ */ jsx(Text$4, { component: "div", className: endpoint, "data-likec4-color": targetNode.color, children: targetId }),
+      /* @__PURE__ */ jsx(Text$6, { component: "div", className: endpoint, "data-likec4-color": targetNode.color, children: targetId }),
       (navigateTo || hasOnOpenSourceRelation) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
         /* @__PURE__ */ jsx(Space, { w: "xs" }),
         navigateTo && /* @__PURE__ */ jsx(Tooltip$2, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
@@ -15340,7 +16466,7 @@ const Relationship = forwardRef$1(({
             variant: "default",
             onPointerDownCapture: stopPropagation,
             onClick: (event) => {
-              diagramApi.getState().onNavigateTo?.(navigateTo, event);
+              event.stopPropagation(), diagramApi.getState().onNavigateTo?.(navigateTo, event);
             },
             role: "button",
             children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
@@ -15432,7 +16558,7 @@ const Relationship = forwardRef$1(({
             onClick: stopPropagation$1,
             onDoubleClick: stopPropagation$1,
             children: [
-              /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: 450, mah: 350, type: "scroll", mx: "auto", mt: 2, children: /* @__PURE__ */ jsx(Text$4, { component: "div", className: edgeNoteText, p: 4, children: notes }) }),
+              /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: 450, mah: 350, type: "scroll", mx: "auto", mt: 2, children: /* @__PURE__ */ jsx(Text$6, { component: "div", className: edgeNoteText, p: 4, children: notes }) }),
               /* @__PURE__ */ jsx(
                 CloseButton,
                 {
@@ -15523,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,
@@ -15697,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$1.Element : edgeLookup.get(id2).zIndex ?? ZIndexes$1.Edge);
-  return isEdgePathEditable && selected && (labelZIndex = (edgeLookup.get(id2).zIndex ?? ZIndexes$1.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(
@@ -15881,7 +17006,7 @@ function Toolbar({ element, children, ...props2 }) {
       onDoubleClick: stopPropagation$1,
       withBorder: !0,
       children: /* @__PURE__ */ jsxs(Stack$1, { gap: 4, children: [
-        /* @__PURE__ */ jsx(Box, { pl: 2, children: /* @__PURE__ */ jsx(Text$4, { c: "dimmed", fz: 10, fw: 500, children: element.id }) }),
+        /* @__PURE__ */ jsx(Box, { pl: 2, children: /* @__PURE__ */ jsx(Text$6, { c: "dimmed", fz: 10, fw: 500, children: element.id }) }),
         /* @__PURE__ */ jsx(Group, { gap: 3, children })
       ] })
     }
@@ -15983,7 +17108,7 @@ function GoToSourceButton({ elementId }) {
       onClick: (e2) => {
         e2.stopPropagation(), diagramApi.getState().onOpenSourceElement?.(elementId);
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "70%", stroke: 1.8 })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
     }
   ) });
 }
@@ -16314,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, {
@@ -16346,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):
@@ -16433,12 +17554,12 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.sel
                 }
               },
               children: /* @__PURE__ */ jsx(
-                Text$4,
+                Text$6,
                 {
                   component: "div",
                   className: clsx(
                     title$1,
-                    (isNavigable || enableRelationshipsMode) && titleWithNavigation,
+                    (isNavigable || hasRelationshipsBrowser) && titleWithNavigation,
                     "likec4-compound-title"
                   ),
                   children: element.title
@@ -16463,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",
@@ -16569,7 +17690,7 @@ function ElementLink({
     }
   );
 }
-const Text = Text$4.withProps({
+const Text = Text$6.withProps({
   component: "div"
 }), selectedScale = 1.015, VariantsRoot = {
   idle: (_, { scale: scale2 }) => ({
@@ -16728,7 +17849,7 @@ const VariantsRelationsBtnSingle = {
       {
         id: id2,
         className: clsx([
-          container$5,
+          container$6,
           isDimmed && dimmed$2,
           animate !== "idle" && containerAnimated,
           "likec4-element-node"
@@ -16747,7 +17868,7 @@ const VariantsRelationsBtnSingle = {
           onTapCancel: animateHandlers.onTapCancel
         },
         children: [
-          /* @__PURE__ */ jsxs("svg", { className: clsx(cssShapeSvg), viewBox: `0 0 ${w} ${h}`, width: w, height: h, children: [
+          /* @__PURE__ */ jsxs("svg", { className: clsx(cssShapeSvg$1), viewBox: `0 0 ${w} ${h}`, width: w, height: h, children: [
             /* @__PURE__ */ jsx("g", { className: indicator$1, children: /* @__PURE__ */ jsx(SelectedIndicator, { shape: element.shape, w, h }) }),
             /* @__PURE__ */ jsx(ElementShapeSvg, { shape: element.shape, w, h })
           ] }),
@@ -16776,7 +17897,7 @@ const VariantsRelationsBtnSingle = {
               component: m$3.div,
               variants: VariantsNavigate,
               "data-animate-target": "navigate",
-              className: clsx("nodrag nopan", navigateBtn$1),
+              className: clsx("nodrag nopan", navigateBtn$2),
               radius: "md",
               style: { zIndex: 100 },
               role: "button",
@@ -16792,7 +17913,7 @@ const VariantsRelationsBtnSingle = {
               component: m$3.div,
               variants: isNavigable ? VariantsRelationsBtn : VariantsRelationsBtnSingle,
               "data-animate-target": isNavigable ? "relations" : "navigate",
-              className: clsx("nodrag nopan", navigateBtn$1),
+              className: clsx("nodrag nopan", navigateBtn$2),
               radius: "md",
               style: {
                 left: isNavigable ? "calc(50% + 28px)" : "50%",
@@ -16945,7 +18066,16 @@ function useXYFlowEvents() {
             return;
           }
         }
-        n$4(focusedNodeId) ? (focusOnNode(connectedToFocusedNode && focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()) : nodesSelectable && (xystore.getState().addSelectedEdges([xyedge.id]), onEdgeClick || event.stopPropagation()), onEdgeClick?.(
+        if (n$4(focusedNodeId)) {
+          if (focusOnNode(connectedToFocusedNode && focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), !onEdgeClick) {
+            event.stopPropagation();
+            return;
+          }
+        } else if (nodesSelectable && (xystore.getState().addSelectedEdges([xyedge.id]), !onEdgeClick)) {
+          event.stopPropagation();
+          return;
+        }
+        onEdgeClick?.(
           xyedge.data.edge,
           event
         );
@@ -16958,13 +18088,21 @@ function useXYFlowEvents() {
           enableDynamicViewWalkthrough,
           focusOnNode,
           activeWalkthrough,
-          activateWalkthrough
+          activateWalkthrough,
+          openOverlay,
+          showRelationshipDetails
         } = diagramApi.getState();
         if (isDynamicView && enableDynamicViewWalkthrough) {
           const nextStep = xyedge.data.edge.id;
           activeWalkthrough?.stepId !== nextStep && (activateWalkthrough(nextStep), event.stopPropagation());
           return;
         }
+        if (showRelationshipDetails) {
+          openOverlay({
+            edgeDetails: xyedge.data.edge.id
+          }), event.stopPropagation();
+          return;
+        }
         if (enableFocusMode) {
           focusOnNode(xyedge.source), event.stopPropagation();
           return;
@@ -17070,7 +18208,7 @@ function XYFlow({
       zoomOnDoubleClick: !1,
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
-      fitView,
+      fitView: !1,
       fitViewOptions: useMemo$1(() => ({
         minZoom: MinZoom,
         maxZoom: 1,
@@ -17201,7 +18339,7 @@ function DiagramTitlePanel() {
               ) }),
               /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: "sm", children: [
                 /* @__PURE__ */ jsx(
-                  Text$4,
+                  Text$6,
                   {
                     component: "div",
                     flex: "1",
@@ -17213,7 +18351,7 @@ function DiagramTitlePanel() {
                   }
                 ),
                 /* @__PURE__ */ jsxs(
-                  Text$4,
+                  Text$6,
                   {
                     hidden: isCollapsed,
                     component: "div",
@@ -17243,7 +18381,7 @@ function DiagramTitlePanel() {
                   showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
                   hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
                   children: /* @__PURE__ */ jsx(
-                    Text$4,
+                    Text$6,
                     {
                       component: "div",
                       size: "sm",
@@ -17254,7 +18392,7 @@ function DiagramTitlePanel() {
                 }
               ),
               !description$12 && /* @__PURE__ */ jsx(
-                Text$4,
+                Text$6,
                 {
                   component: "div",
                   size: "xs",
@@ -17510,7 +18648,7 @@ const ElementNotation = ({ value }) => {
                 kind
               )) }),
               /* @__PURE__ */ jsx(
-                Text$4,
+                Text$6,
                 {
                   component: "div",
                   fz: "sm",
@@ -17728,14 +18866,14 @@ const selector = (state) => ({
               className: autolayoutIndicator
             }
           ),
-          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text$4, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
+          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text$6, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", justify: "stretch", maw: 160, children: [
             /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("TB"), onClick: setAutoLayout("TB"), children: "Top-Bottom" }),
             /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("BT"), onClick: setAutoLayout("BT"), children: "Bottom-Top" }),
             /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("LR"), onClick: setAutoLayout("LR"), children: "Left-Right" }),
             /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("RL"), onClick: setAutoLayout("RL"), children: "Right-Left" })
           ] }),
-          /* @__PURE__ */ jsx(Box, { my: 10, children: /* @__PURE__ */ jsx(Text$4, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Spacing:" }) }),
+          /* @__PURE__ */ jsx(Box, { my: 10, children: /* @__PURE__ */ jsx(Text$6, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Spacing:" }) }),
           /* @__PURE__ */ jsx(
             SpacingSliders,
             {
@@ -17786,7 +18924,7 @@ const selector = (state) => ({
         }
       }
     ),
-    /* @__PURE__ */ jsx(Box, { pos: "absolute", left: 2, bottom: 2, children: /* @__PURE__ */ jsxs(Text$4, { component: "div", fz: 8, c: "dimmed", fw: 500, children: [
+    /* @__PURE__ */ jsx(Box, { pos: "absolute", left: 2, bottom: 2, children: /* @__PURE__ */ jsxs(Text$6, { component: "div", fz: 8, c: "dimmed", fw: 500, children: [
       rankSepValue,
       ", ",
       nodeSepValue
@@ -17985,12 +19123,12 @@ const selector = (state) => ({
           withCloseButton: !1,
           title: "Manual layout issues",
           children: [
-            /* @__PURE__ */ jsxs(Text$4, { mt: 2, size: "sm", lh: "xs", children: [
+            /* @__PURE__ */ jsxs(Text$6, { mt: 2, size: "sm", lh: "xs", children: [
               "View contains new elements or their sizes have changed,",
               /* @__PURE__ */ jsx("br", {}),
               "last manual layout can not be applied."
             ] }),
-            /* @__PURE__ */ jsxs(Text$4, { mt: "xs", size: "sm", lh: "xs", children: [
+            /* @__PURE__ */ jsxs(Text$6, { mt: "xs", size: "sm", lh: "xs", children: [
               "Update view predicates or remove ",
               /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
             ] })
@@ -18151,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,
@@ -18183,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,
@@ -18227,7 +19366,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo$1(function({
     pannable: s2.pannable,
     fitView: s2.fitViewEnabled,
     enableFocusMode: s2.enableFocusMode,
-    enableOverlays: s2.enableRelationshipsBrowser
+    enableOverlays: s2.hasLikeC4Model && (s2.enableRelationshipsBrowser || s2.showRelationshipDetails)
   }));
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -18238,7 +19377,8 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo$1(function({
           cssReactFlow,
           cssNoControls,
           pannable !== !0 && cssDisablePan,
-          background === "transparent" && cssTransparentBg
+          background === "transparent" && cssTransparentBg,
+          isInitialized ? "initialized" : notInitialized
         ),
         children: /* @__PURE__ */ jsx(
           XYFlowInner,
@@ -18382,8 +19522,8 @@ const ViewCard = memo$1(({ viewId }) => {
       withBorder: !0,
       children: [
         /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(DiagramPreview$1, { diagram }) }),
-        /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", mb: "xs", children: /* @__PURE__ */ jsx(Text$4, { fw: 500, children: title2 }) }),
-        /* @__PURE__ */ jsx(Text$4, { size: "sm", c: "dimmed", children: description2 }),
+        /* @__PURE__ */ jsx(Group, { justify: "space-between", mt: "md", mb: "xs", children: /* @__PURE__ */ jsx(Text$6, { fw: 500, children: title2 }) }),
+        /* @__PURE__ */ jsx(Text$6, { size: "sm", c: "dimmed", children: description2 }),
         /* @__PURE__ */ jsx(Link, { to: "/view/$viewId", params: { viewId: id2 }, search: !0, className: cardLink })
       ]
     }
@@ -18405,7 +19545,7 @@ function DiagramPreview$1({ diagram }) {
     }
   ) });
 }
-const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-DrWsHFH4.js"));
+const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-BwT9t8VB.js"));
 function WithOverviewGraph() {
   return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(OverviewGraph, {}) });
 }
@@ -18529,7 +19669,7 @@ class ErrorBoundary extends Component {
         childToRender = fallbackRender(props2);
       else if (FallbackComponent)
         childToRender = createElement$1(FallbackComponent, props2);
-      else if (fallback === null || isValidElement(fallback))
+      else if (fallback !== void 0)
         childToRender = fallback;
       else
         throw error;
@@ -18908,7 +20048,7 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
     icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
     title: "Localhost URL",
     styles: { body: { gap: rem(4) } },
-    children: /* @__PURE__ */ jsx(Text$4, { c: "yellow", size: "sm", children: "You need to deploy your project to make it available on the internet" })
+    children: /* @__PURE__ */ jsx(Text$6, { c: "yellow", size: "sm", children: "You need to deploy your project to make it available on the internet" })
   }
 ), CopyButtonChild = ({ copied, copy }) => /* @__PURE__ */ jsx(
   Button,
@@ -18938,10 +20078,10 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
 `.trim();
   return /* @__PURE__ */ jsxs(Stack$1, { children: [
     code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$4, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$6, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
     /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$4, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$6, { fw: "500", size: "sm", children: "HTML" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(ActionIcon$1, { component: "a", href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(CopyButton$1, { value: code, timeout: 1500, children: CopyButtonChild })
@@ -18992,10 +20132,10 @@ function WebcomponentsPanel({ diagram }) {
   );
   return /* @__PURE__ */ jsxs(Stack$1, { children: [
     jscode.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$4, { size: "sm", children: "Add this script to your page:" }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$6, { size: "sm", children: "Add this script to your page:" }) }),
     /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$4, { fw: "500", size: "sm", children: "JavaScript" }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$6, { fw: "500", size: "sm", children: "JavaScript" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(ActionIcon$1, { component: "a", href: webcomponentPreview.href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(
@@ -19009,7 +20149,7 @@ function WebcomponentsPanel({ diagram }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: jscode }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text$4, { size: "sm", c: "dimmed", children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text$6, { size: "sm", c: "dimmed", children: [
         "This script defines a custom element (webcomponent) that renders your diagrams.",
         /* @__PURE__ */ jsx("br", {}),
         "Script must be inserted once in the ",
@@ -19022,7 +20162,7 @@ function WebcomponentsPanel({ diagram }) {
     ] }),
     /* @__PURE__ */ jsxs(Stack$1, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$4, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$6, { fw: "500", size: "sm", children: "HTML" }) }),
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
           CopyButton$1,
           {
@@ -19033,7 +20173,7 @@ function WebcomponentsPanel({ diagram }) {
         ) })
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: htmlCode }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text$4, { size: "sm", c: "dimmed", children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text$6, { size: "sm", c: "dimmed", children: [
         "Insert this code to your page. Page may have multiple ",
         /* @__PURE__ */ jsx("code", { children: "<likec4-view>" }),
         "."
@@ -19175,7 +20315,7 @@ function Fallback({ error, resetErrorBoundary }) {
   return useUpdateEffect(() => {
     resetErrorBoundary();
   }, [viewId]), isNotFound(error) ? /* @__PURE__ */ jsx(Container, { my: "md", children: /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", children: [
-    /* @__PURE__ */ jsxs(Text$4, { c: "orange", fz: "md", children: [
+    /* @__PURE__ */ jsxs(Text$6, { c: "orange", fz: "md", children: [
       "The diagram",
       " ",
       /* @__PURE__ */ jsx(Code, { color: "orange", children: viewId }),
@@ -21234,5 +22374,5 @@ export {
   createReactComponent as c,
   e$3 as e,
   nonexhaustive as n,
-  u$7 as u
+  u$8 as u
 };