npm - likec4 - Versions diffs - 1.38.1 → 1.39.1 - Mend

likec4 1.38.1 → 1.39.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/__app__/src/main.js +634 -501
package/__app__/src/style.css +1 -1
package/dist/cli/index.mjs +639 -848
package/dist/config/index.d.mts +52 -0
package/dist/config/index.mjs +1 -0
package/dist/index.d.mts +6 -3
package/dist/index.mjs +2 -2
package/dist/shared/likec4.BYm60UP0.mjs +257 -0
package/dist/shared/likec4.C8DLF79h.d.mts +1660 -0
package/dist/shared/{likec4.CunVXntg.mjs → likec4.CzlvWep1.mjs} +2791 -2825
package/dist/shared/likec4.DfOb2tZw.mjs +143 -0
package/dist/shared/{likec4.B2TmMA5i.d.mts → likec4.yf56CCfj.d.mts} +655 -2308
package/dist/vite-plugin/index.d.mts +9 -2
package/dist/vite-plugin/index.mjs +2 -2
package/icons/all.d.ts +25 -0
package/icons/all.js +50 -0
package/icons/azure/ai-at-edge.js +1 -0
package/icons/azure/azure-consumption-commitment.js +1 -0
package/icons/azure/azure-managed-redis.js +1 -0
package/icons/azure/breeze.js +1 -0
package/icons/azure/data-virtualization.js +1 -0
package/icons/azure/edge-actions.js +1 -0
package/icons/azure/edge-storage-accelerator.js +1 -0
package/icons/azure/engage-center-connect.js +1 -0
package/icons/azure/external-id-modified.js +1 -0
package/icons/azure/external-id.js +1 -0
package/icons/azure/frd-qa.js +1 -0
package/icons/azure/hybrid-connectivity-hub.js +1 -0
package/icons/azure/landing-zone.js +1 -0
package/icons/azure/load-balancer-hub.js +1 -1
package/icons/azure/logic-apps-template.js +1 -0
package/icons/azure/network-foundation-hub.js +1 -0
package/icons/azure/network-security-hub.js +1 -0
package/icons/azure/planetary-computer-pro.js +1 -0
package/icons/azure/promethus.js +1 -0
package/icons/azure/service-group-relationships.js +1 -0
package/icons/azure/service-groups.js +1 -0
package/icons/azure/sql-database-fleet-manager.js +1 -0
package/icons/azure/storage-hubs.js +1 -0
package/icons/azure/toolchain-orchestrator.js +1 -0
package/icons/azure/vpnclient-windows.js +1 -0
package/icons/azure/workload-orchestration.js +1 -0
package/package.json +38 -27
package/react/index.d.mts +237 -222
package/react/index.mjs +51 -51
package/dist/shared/likec4.DkfFVqY-.mjs +0 -257

package/__app__/src/main.js CHANGED Viewed

@@ -6,8 +6,9 @@ import { projects } from "likec4:projects";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { flushSync, createPortal } from "react-dom";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";
-import { isTagColorSpecified, invariant as invariant$2, hasAtLeast, nonexhaustive, isStepEdgeId, extractStep, nonNullable, defaultTheme, ElementShapes, toArray, ifirst, ifilter, compareNaturalHierarchically, compareNatural, RichText, ifind, DefaultMap, ancestorsFqn, nameFromFqn, isAncestor, sortParentsFirst, ThemeColors, Queue, whereOperatorAsPredicate, GroupElementKind, delay as delay$1, BBox, getParallelStepsPrefix, isDescendantOf } from "@likec4/core";
-import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core/types";
+import { isTagColorSpecified, nonexhaustive, invariant as invariant$3, isStepEdgeId, extractStep, nonNullable, defaultTheme, ElementShapes, RichText, ancestorsFqn, nameFromFqn, isAncestor as isAncestor$1, ThemeColors, Queue, whereOperatorAsPredicate, GroupElementKind, BBox, getParallelStepsPrefix } from "@likec4/core";
+import { invariant as invariant$2, toArray, ifirst, ifilter, compareNaturalHierarchically, nonexhaustive as nonexhaustive$1, compareNatural, ifind, nonNullable as nonNullable$1, DefaultMap, isAncestor, sortParentsFirst, nameFromFqn as nameFromFqn$1, delay as delay$1, isDescendantOf } from "@likec4/core/utils";
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, RichText as RichText$1 } from "@likec4/core/types";
 import { computeRelationshipsView, treeFromElements as treeFromElements$1 } from "@likec4/core/compute-view/relationships";
 import { normalizeViewPath, VIEW_FOLDERS_SEPARATOR, modelConnection } from "@likec4/core/model";
 var __assign = function() {
@@ -1329,10 +1330,10 @@ function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], tri
   }, [hotkeys]);
 }
 function useHover$1() {
-  const [hovered, setHovered2] = useState(!1), previousNode = useRef(null), handleMouseEnter = useCallback(() => {
-    setHovered2(!0);
+  const [hovered, setHovered] = useState(!1), previousNode = useRef(null), handleMouseEnter = useCallback(() => {
+    setHovered(!0);
   }, []), handleMouseLeave = useCallback(() => {
-    setHovered2(!1);
+    setHovered(!1);
   }, []);
   return { ref: useCallback(
     (node2) => {
@@ -1402,6 +1403,14 @@ function usePrevious$1(value) {
     ref.current = value;
   }, [value]), ref.current;
 }
+function useInViewport() {
+  const observer = useRef(null), [inViewport, setInViewport] = useState(!1);
+  return { ref: useCallback((node2) => {
+    typeof IntersectionObserver < "u" && (node2 && !observer.current ? observer.current = new IntersectionObserver(
+      (entries) => setInViewport(entries.some((entry) => entry.isIntersecting))
+    ) : observer.current?.disconnect(), node2 ? observer.current?.observe(node2) : setInViewport(!1));
+  }, []), inViewport };
+}
 function useMutationObserver(callback, options, target) {
   const observer = useRef(null), ref = useRef(null);
   return useEffect(() => {
@@ -4473,12 +4482,8 @@ function getWindowScrollBarX(element, rect) {
   const leftScroll = getNodeScroll(element).scrollLeft;
   return rect ? rect.left + leftScroll : getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  ignoreScrollbarX === void 0 && (ignoreScrollbarX = !1);
-  const htmlRect = documentElement.getBoundingClientRect(), x2 = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
-    // RTL <body> scrollbar.
-    getWindowScrollBarX(documentElement, htmlRect)
-  )), y2 = htmlRect.top + scroll.scrollTop;
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect(), x2 = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect), y2 = htmlRect.top + scroll.scrollTop;
   return {
     x: x2,
     y: y2
@@ -4503,7 +4508,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     const offsetRect = getBoundingClientRect(offsetParent);
     scale2 = getScale(offsetParent), offsets.x = offsetRect.x + offsetParent.clientLeft, offsets.y = offsetRect.y + offsetParent.clientTop;
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, !0) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale2.x,
     height: rect.height * scale2.y,
@@ -4525,6 +4530,7 @@ function getDocumentRect(element) {
     y: y2
   };
 }
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win2 = getWindow(element), html = getDocumentElement(element), visualViewport = win2.visualViewport;
   let width = html.clientWidth, height = html.clientHeight, x2 = 0, y2 = 0;
@@ -4533,6 +4539,11 @@ function getViewportRect(element, strategy) {
     const visualViewportBased = isWebKit();
     (!visualViewportBased || visualViewportBased && strategy === "fixed") && (x2 = visualViewport.offsetLeft, y2 = visualViewport.offsetTop);
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument, body2 = doc.body, bodyStyles = getComputedStyle(body2), bodyMarginInline = doc.compatMode === "CSS1Compat" && parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0, clippingStableScrollbarWidth = Math.abs(html.clientWidth - body2.clientWidth - bodyMarginInline);
+    clippingStableScrollbarWidth <= SCROLLBAR_MAX && (width -= clippingStableScrollbarWidth);
+  } else windowScrollbarX <= SCROLLBAR_MAX && (width += windowScrollbarX);
   return {
     width,
     height,
@@ -4850,7 +4861,7 @@ function useFloating$1(options) {
     transform: transform2 = !0,
     whileElementsMounted,
     open
-  } = options, [data, setData2] = React.useState({
+  } = options, [data, setData] = React.useState({
     x: 0,
     y: 0,
     strategy,
@@ -4881,12 +4892,12 @@ function useFloating$1(options) {
         isPositioned: openRef.current !== !1
       };
       isMountedRef.current && !deepEqual$2(dataRef.current, fullData) && (dataRef.current = fullData, ReactDOM.flushSync(() => {
-        setData2(fullData);
+        setData(fullData);
       }));
     });
   }, [latestMiddleware, placement, strategy, platformRef, openRef]);
   index$2(() => {
-    open === !1 && dataRef.current.isPositioned && (dataRef.current.isPositioned = !1, setData2((data2) => ({
+    open === !1 && dataRef.current.isPositioned && (dataRef.current.isPositioned = !1, setData((data2) => ({
       ...data2,
       isPositioned: !1
     })));
@@ -6184,10 +6195,10 @@ ScrollAreaScrollbar.displayName = "@mantine/core/ScrollAreaScrollbar";
 function addUnlinkedScrollListener(node2, handler = () => {
 }) {
   let prevPosition = { left: node2.scrollLeft, top: node2.scrollTop }, rAF = 0;
-  return function loop() {
+  return (function loop() {
     const position = { left: node2.scrollLeft, top: node2.scrollTop }, isHorizontalScroll = prevPosition.left !== position.left, isVerticalScroll = prevPosition.top !== position.top;
     (isHorizontalScroll || isVerticalScroll) && handler(), prevPosition = position, rAF = window.requestAnimationFrame(loop);
-  }(), () => window.cancelAnimationFrame(rAF);
+  })(), () => window.cancelAnimationFrame(rAF);
 }
 const Thumb$1 = forwardRef((props2, forwardedRef) => {
   const { style: style2, ...others } = props2, scrollAreaContext = useScrollAreaContext(), scrollbarContext = useScrollbarContext(), { onThumbPositionChange } = scrollbarContext, composedRef = useMergedRef(forwardedRef, (node2) => scrollbarContext.onThumbChange(node2)), removeUnlinkedScrollListenerRef = useRef(void 0), debounceScrollEnd = useDebouncedCallback$1(() => {
@@ -11120,12 +11131,12 @@ function getDefaultExportFromCjs(x2) {
 }
 var useIsomorphicLayoutEffect_cjs = {}, hasRequiredUseIsomorphicLayoutEffect_cjs;
 function requireUseIsomorphicLayoutEffect_cjs() {
-  return hasRequiredUseIsomorphicLayoutEffect_cjs || (hasRequiredUseIsomorphicLayoutEffect_cjs = 1, function(exports) {
+  return hasRequiredUseIsomorphicLayoutEffect_cjs || (hasRequiredUseIsomorphicLayoutEffect_cjs = 1, (function(exports) {
     Object.defineProperty(exports, "__esModule", { value: !0 });
     var react = React__default, isClient = typeof document < "u", noop2 = function() {
     }, index2 = isClient ? react.useLayoutEffect : noop2;
     exports.default = index2;
-  }(useIsomorphicLayoutEffect_cjs)), useIsomorphicLayoutEffect_cjs;
+  })(useIsomorphicLayoutEffect_cjs)), useIsomorphicLayoutEffect_cjs;
 }
 var classes$g = { root: "m_6e45937b", loader: "m_e8eb006c", overlay: "m_df587f17" };
 const defaultProps$i = {
@@ -13184,7 +13195,7 @@ const defaultProps$5 = {
     vars,
     varsResolver: varsResolver$6,
     unstyled
-  }), { dir } = useDirection(), [hovered, setHovered2] = useState(!1), [_value, setValue] = useUncontrolled({
+  }), { dir } = useDirection(), [hovered, setHovered] = useState(!1), [_value, setValue] = useUncontrolled({
     value: typeof value == "number" ? clamp$4(value, min2, max2) : value,
     defaultValue: typeof defaultValue == "number" ? clamp$4(defaultValue, min2, max2) : defaultValue,
     finalValue: clamp$4(0, min2, max2),
@@ -13321,8 +13332,8 @@ const defaultProps$5 = {
             disabled,
             containerProps: {
               ref: container2,
-              onMouseEnter: showLabelOnHover ? () => setHovered2(!0) : void 0,
-              onMouseLeave: showLabelOnHover ? () => setHovered2(!1) : void 0
+              onMouseEnter: showLabelOnHover ? () => setHovered(!0) : void 0,
+              onMouseLeave: showLabelOnHover ? () => setHovered(!1) : void 0
             },
             children: /* @__PURE__ */ jsx(
               Thumb,
@@ -14019,9 +14030,9 @@ function useTree({
   onNodeCollapse,
   onNodeExpand
 } = {}) {
-  const [data, setData2] = useState([]), [expandedState, setExpandedState] = useState(initialExpandedState), [selectedState, setSelectedState] = useState(initialSelectedState), [checkedState, setCheckedState] = useState(initialCheckedState), [anchorNode, setAnchorNode] = useState(null), [hoveredNode, setHoveredNode2] = useState(null), initialize = useCallback(
+  const [data, setData] = useState([]), [expandedState, setExpandedState] = useState(initialExpandedState), [selectedState, setSelectedState] = useState(initialSelectedState), [checkedState, setCheckedState] = useState(initialCheckedState), [anchorNode, setAnchorNode] = useState(null), [hoveredNode, setHoveredNode2] = useState(null), initialize = useCallback(
     (_data) => {
-      setExpandedState((current) => getInitialTreeExpandedState(current, _data, selectedState)), setCheckedState((current) => getInitialCheckedState(current, _data)), setData2(_data);
+      setExpandedState((current) => getInitialTreeExpandedState(current, _data, selectedState)), setCheckedState((current) => getInitialCheckedState(current, _data)), setData(_data);
     },
     [selectedState, checkedState]
   ), toggleExpanded = useCallback(
@@ -16015,7 +16026,7 @@ class RouterCore {
         const route = this.looseRoutesById[d2.routeId];
         if (!route.options.loader)
           return !0;
-        const gcTime = (d2.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1e3;
+        const gcTime = (d2.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 300 * 1e3;
         return !(d2.status !== "error" && Date.now() - d2.updatedAt < gcTime);
       };
       this.clearCache({ filter: filter2 });
@@ -21703,12 +21714,12 @@ class VisualElementDragControls {
       isRefObject(dragConstraints) && dragConstraints.current && (this.constraints = this.resolveRefConstraints());
     }, { projection } = this.visualElement, stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
     projection && !projection.layout && (projection.root && projection.root.updateScroll(), projection.updateLayout()), frame$1.read(measureDragConstraints);
-    const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints()), stopLayoutUpdateListener = projection.addEventListener("didUpdate", ({ delta, hasLayoutChanged }) => {
+    const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints()), stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
       this.isDragging && hasLayoutChanged && (eachAxis((axis) => {
         const motionValue2 = this.getAxisMotionValue(axis);
         motionValue2 && (this.originPoint[axis] += delta[axis].translate, motionValue2.set(motionValue2.get() + delta[axis].translate));
       }), this.visualElement.render());
-    });
+    }));
     return () => {
       stopResizeListener(), stopPointerListener(), stopMeasureLayoutListener(), stopLayoutUpdateListener && stopLayoutUpdateListener();
     };
@@ -24742,7 +24753,7 @@ function nogamma(a2, b2) {
   var d2 = b2 - a2;
   return d2 ? linear(a2, d2) : constant$2(isNaN(a2) ? b2 : a2);
 }
-const interpolateRgb = function rgbGamma(y2) {
+const interpolateRgb = (function rgbGamma(y2) {
   var color2 = gamma(y2);
   function rgb$1(start2, end) {
     var r2 = color2((start2 = rgb(start2)).r, (end = rgb(end)).r), g = color2(start2.g, end.g), b2 = color2(start2.b, end.b), opacity = nogamma(start2.opacity, end.opacity);
@@ -24751,7 +24762,7 @@ const interpolateRgb = function rgbGamma(y2) {
     };
   }
   return rgb$1.gamma = rgbGamma, rgb$1;
-}(1);
+})(1);
 function numberArray(a2, b2) {
   b2 || (b2 = []);
   var n2 = a2 ? Math.min(b2.length, a2.length) : 0, c2 = b2.slice(), i2;
@@ -24884,7 +24895,7 @@ function sinh(x2) {
 function tanh(x2) {
   return ((x2 = Math.exp(2 * x2)) - 1) / (x2 + 1);
 }
-const interpolateZoom = function zoomRho(rho, rho2, rho4) {
+const interpolateZoom = (function zoomRho(rho, rho2, rho4) {
   function zoom2(p0, p1) {
     var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], ux1 = p1[0], uy1 = p1[1], w1 = p1[2], dx = ux1 - ux0, dy = uy1 - uy0, d2 = dx * dx + dy * dy, i2, S;
     if (d2 < epsilon2)
@@ -24912,7 +24923,7 @@ const interpolateZoom = function zoomRho(rho, rho2, rho4) {
     var _1 = Math.max(1e-3, +_), _2 = _1 * _1, _4 = _2 * _2;
     return zoomRho(_1, _2, _4);
   }, zoom2;
-}(Math.SQRT2, 2, 4);
+})(Math.SQRT2, 2, 4);
 var frame = 0, timeout$1 = 0, interval = 0, pokeDelay = 1e3, taskHead, taskTail, clockLast = 0, clockNow = 0, clockSkew = 0, clock = typeof performance == "object" && performance.now ? performance : Date, setFrame = typeof window == "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(f2) {
   setTimeout(f2, 17);
 };
@@ -26087,7 +26098,7 @@ const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding)
   };
 }, isMacOs = () => typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0;
 function isCoordinateExtent(extent) {
-  return extent !== void 0 && extent !== "parent";
+  return extent != null && extent !== "parent";
 }
 function getNodeDimensions(node2) {
   return {
@@ -26739,8 +26750,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
           continue;
         let nextPosition = { x: x2 - dragItem.distance.x, y: y2 - dragItem.distance.y };
         snapToGrid && (nextPosition = multiDragSnapOffset ? {
-          x: nextPosition.x + multiDragSnapOffset.x,
-          y: nextPosition.y + multiDragSnapOffset.y
+          x: Math.round(nextPosition.x + multiDragSnapOffset.x),
+          y: Math.round(nextPosition.y + multiDragSnapOffset.y)
         } : snapPosition(nextPosition, snapGrid));
         let adjustedNodeExtent = null;
         if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {
@@ -28727,13 +28738,13 @@ const ArrowSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => {
     strokeWidth,
     ...color2 && { stroke: color2 }
   };
-  return jsx("polyline", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", points: "-5,-4 0,0 -5,4" });
+  return jsx("polyline", { className: "arrow", style: style2, strokeLinecap: "round", fill: "none", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4" });
 }, ArrowClosedSymbol = ({ color: color2 = "none", strokeWidth = 1 }) => {
   const style2 = {
     strokeWidth,
     ...color2 && { stroke: color2, fill: color2 }
   };
-  return jsx("polyline", { style: style2, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" });
+  return jsx("polyline", { className: "arrowclosed", style: style2, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" });
 }, MarkerSymbols = {
   [MarkerType.Arrow]: ArrowSymbol,
   [MarkerType.ArrowClosed]: ArrowClosedSymbol
@@ -30083,9 +30094,9 @@ function m$3(r2) {
 }
 var d$4 = (r2) => typeof r2 == "function" && r2.length === 1;
 function m$2(...r2) {
-  return u$8(o$8, r2);
+  return u$8(o$9, r2);
 }
-function o$8(r2, t2) {
+function o$9(r2, t2) {
   let e2 = [...r2];
   return e2.sort(t2), e2;
 }
@@ -30119,6 +30130,11 @@ function p$2(...e2) {
   return u$8(t$7, e2);
 }
 var t$7 = (e2, o2) => e2[o2];
+function o$8(r2, n2) {
+  let e2 = Math.ceil(r2), t2 = Math.floor(n2);
+  if (t2 < e2) throw new RangeError(`randomInteger: The range [${r2.toString()},${n2.toString()}] contains no integer`);
+  return Math.floor(Math.random() * (t2 - e2 + 1) + e2);
+}
 function a$5(...r2) {
   return u$8(o$7, r2);
 }
@@ -30397,9 +30413,9 @@ function createIsCircular(areItemsEqual) {
 function getStrictProperties(object2) {
   return getOwnPropertyNames(object2).concat(getOwnPropertySymbols(object2));
 }
-var hasOwn = Object.hasOwn || function(object2, property) {
+var hasOwn = Object.hasOwn || (function(object2, property) {
   return hasOwnProperty.call(object2, property);
-};
+});
 function sameValueZeroEqual(a2, b2) {
   return a2 === b2 || !a2 && !b2 && a2 !== a2 && b2 !== b2;
 }
@@ -31031,11 +31047,12 @@ function useTagSpecification(tag) {
 }
 const RootContainerContext = createContext(createRef());
 function RootContainer({
+  id: id2,
   className,
   reduceGraphics = !1,
   children: children2
 }) {
-  const id2 = useId$2(), ref = useRef(null), $isPanning = usePanningAtom();
+  const ref = useRef(null), $isPanning = usePanningAtom();
   return useEffect(() => $isPanning.listen((isPanning) => {
     ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
   }), [$isPanning]), /* @__PURE__ */ jsx(
@@ -32042,7 +32059,7 @@ function bezierControlPoints(diagramEdge) {
   const handles = [
     // start
   ];
-  for (; hasAtLeast(bezierPoints, 3); ) {
+  for (; i$8(bezierPoints, 3); ) {
     const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start2[0], start2[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
     inflections.length === 0 && inflections.push(0.5), inflections.forEach((t2) => {
       const { x: x2, y: y2 } = bezier.get(t2);
@@ -32073,7 +32090,7 @@ function bezierPath(bezierSpline) {
   let [start2, ...points] = bezierSpline;
   invariant$2(start2, "start should be defined");
   let path = `M ${start2[0]},${start2[1]}`;
-  for (; hasAtLeast(points, 3); ) {
+  for (; i$8(points, 3); ) {
     const [cp1, cp2, end, ...rest] = points;
     path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
   }
@@ -32100,38 +32117,45 @@ const ZIndexes = {
   Edge: 20,
   Element: 20,
   Max: 30
-}, MinZoom = 0.05, MaxZoom = 3, _setDimmed = (v, dimmed) => (v.data.dimmed ?? !1) === dimmed ? v : {
-  ...v,
-  data: {
-    ...v.data,
-    dimmed
-  }
-};
-function setDimmed(arg1, arg2) {
-  return arg2 !== void 0 ? _setDimmed(arg1, arg2) : (v) => _setDimmed(v, arg1);
-}
-const _setHovered = (v, hovered) => (v.data.hovered ?? !1) === hovered ? v : {
-  ...v,
-  data: {
-    ...v.data,
-    hovered
+}, MinZoom = 0.05, MaxZoom = 3;
+var Base;
+((Base2) => {
+  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? !1) === dimmed ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      dimmed
+    }
+  };
+  function setDimmed(arg1, arg2) {
+    return arg2 !== void 0 ? _setDimmed(arg1, arg2) : (v) => _setDimmed(v, arg1);
   }
-};
-function setHovered(arg1, arg2) {
-  return arg2 !== void 0 ? _setHovered(arg1, arg2) : (v) => _setHovered(v, arg1);
-}
-function _setData(value, state) {
-  return j(value.data, state) ? value : {
-    ...value,
+  Base2.setDimmed = setDimmed;
+  const _setHovered = (v, hovered) => (v.data.hovered ?? !1) === hovered ? v : {
+    ...v,
     data: {
-      ...value.data,
-      ...state
+      ...v.data,
+      hovered
     }
   };
-}
-function setData(arg1, arg2) {
-  return arg2 !== void 0 ? _setData(arg1, arg2) : (edge) => _setData(edge, arg1);
-}
+  function setHovered(arg1, arg2) {
+    return arg2 !== void 0 ? _setHovered(arg1, arg2) : (v) => _setHovered(v, arg1);
+  }
+  Base2.setHovered = setHovered;
+  function _setData(value, state) {
+    return j(value.data, state) ? value : {
+      ...value,
+      data: {
+        ...value.data,
+        ...state
+      }
+    };
+  }
+  function setData(arg1, arg2) {
+    return arg2 !== void 0 ? _setData(arg1, arg2) : (edge) => _setData(edge, arg1);
+  }
+  Base2.setData = setData;
+})(Base || (Base = {}));
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -32219,7 +32243,7 @@ const BaseXYFlow = ({
         node2.data.hovered || onNodesChange([{
           id: node2.id,
           type: "replace",
-          item: setHovered(node2, !0)
+          item: Base.setHovered(node2, !0)
         }]);
       }),
       onNodeMouseLeave: useCallbackRef((_event, node2) => {
@@ -32230,7 +32254,7 @@ const BaseXYFlow = ({
         node2.data.hovered && onNodesChange([{
           id: node2.id,
           type: "replace",
-          item: setHovered(node2, !1)
+          item: Base.setHovered(node2, !1)
         }]);
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
@@ -32241,7 +32265,7 @@ const BaseXYFlow = ({
         edge.data.hovered || onEdgesChange([{
           id: edge.id,
           type: "replace",
-          item: setHovered(edge, !0)
+          item: Base.setHovered(edge, !0)
         }]);
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
@@ -32252,7 +32276,7 @@ const BaseXYFlow = ({
         edge.data.hovered && onEdgesChange([{
           id: edge.id,
           type: "replace",
-          item: setHovered(edge, !1)
+          item: Base.setHovered(edge, !1)
         }]);
       }),
       onNodeDoubleClick: stopPropagation,
@@ -32589,9 +32613,9 @@ function requireRaiseB4a670a0_cjs() {
   }
   let executingCustomAction = !1;
   const $$ACTOR_TYPE = 1;
-  let ProcessingStatus = /* @__PURE__ */ function(ProcessingStatus2) {
+  let ProcessingStatus = /* @__PURE__ */ (function(ProcessingStatus2) {
     return ProcessingStatus2[ProcessingStatus2.NotStarted = 0] = "NotStarted", ProcessingStatus2[ProcessingStatus2.Running = 1] = "Running", ProcessingStatus2[ProcessingStatus2.Stopped = 2] = "Stopped", ProcessingStatus2;
-  }({});
+  })({});
   const defaultOptions2 = {
     clock: {
       setTimeout: (fn, ms) => setTimeout(fn, ms),
@@ -34779,9 +34803,9 @@ function requireLog63c8f21f_cjs() {
     }
     return emit3.type = "xstate.emit", emit3.event = eventOrExpr, emit3.resolve = resolveEmit, emit3.execute = executeEmit, emit3;
   }
-  let SpecialTargets = /* @__PURE__ */ function(SpecialTargets2) {
+  let SpecialTargets = /* @__PURE__ */ (function(SpecialTargets2) {
     return SpecialTargets2.Parent = "#_parent", SpecialTargets2.Internal = "#_internal", SpecialTargets2;
-  }({});
+  })({});
   function resolveSendTo(actorScope, snapshot, args, actionParams, {
     to,
     event: eventOrExpr,
@@ -35792,14 +35816,14 @@ CatmullRomOpen.prototype = {
     this._l01_a = this._l12_a, this._l12_a = this._l23_a, this._l01_2a = this._l12_2a, this._l12_2a = this._l23_2a, this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
   }
 };
-const curveCatmullRomOpen = function custom4(alpha2) {
+const curveCatmullRomOpen = (function custom4(alpha2) {
   function catmullRom(context2) {
     return alpha2 ? new CatmullRomOpen(context2, alpha2) : new CardinalOpen(context2, 0);
   }
   return catmullRom.alpha = function(alpha3) {
     return custom4(+alpha3);
   }, catmullRom;
-}(0.5), createRecipe = (name, defaultVariants, compoundVariants) => {
+})(0.5), createRecipe = (name, defaultVariants, compoundVariants) => {
   const getVariantProps2 = (variants) => ({
     [name]: "__ignore__",
     ...defaultVariants,
@@ -35970,11 +35994,16 @@ const curveCatmullRomOpen = function custom4(alpha2) {
   },
   getVariantProps: likec4tagFn.getVariantProps
 }), markdownBlockFn = /* @__PURE__ */ createRecipe("likec4-markdown-block", {
-  uselikec4palette: !1
+  uselikec4palette: !1,
+  value: "markdown"
 }, []), markdownBlockVariantMap = {
   uselikec4palette: [
     "true",
     "false"
+  ],
+  value: [
+    "markdown",
+    "plaintext"
   ]
 }, markdownBlockVariantKeys = Object.keys(markdownBlockVariantMap), markdownBlock = /* @__PURE__ */ Object.assign(memo$1(markdownBlockFn.recipeFn), {
   __recipe__: !0,
@@ -36458,7 +36487,7 @@ function EdgeContainer({
       "data-likec4-dimmed": isDimmed
     }
   };
-  return component === "svg" ? /* @__PURE__ */ jsx("svg", { style: style2, ...props2, children: children2 }) : (invariant$2(component === "g", 'EdgeContainer: component must be "g" or "svg"'), /* @__PURE__ */ jsx("g", { style: style2, ...props2, children: children2 }));
+  return component === "svg" ? /* @__PURE__ */ jsx("svg", { style: style2, ...props2, children: children2 }) : (invariant$3(component === "g", 'EdgeContainer: component must be "g" or "svg"'), /* @__PURE__ */ jsx("g", { style: style2, ...props2, children: children2 }));
 }
 const EdgeLabel = forwardRef(({
   edgeProps: {
@@ -36487,8 +36516,7 @@ const EdgeLabel = forwardRef(({
       className: cx(classes2.root, "likec4-edge-label", className),
       "data-edge-id": id2,
       animate: {
-        originY: 0.25,
-        scale: isHovered && !selected2 ? 1.08 : 1
+        scale: isHovered && !selected2 ? 1.06 : 1
       },
       ...rest,
       children: [
@@ -37491,7 +37519,8 @@ const MarkdownBlock = forwardRef(({
       ...props2,
       className: cx(
         markdownBlock({
-          uselikec4palette
+          uselikec4palette,
+          value: value.isMarkdown ? "markdown" : "plaintext"
         }),
         className
       ),
@@ -37551,7 +37580,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
               children: data.technology
             }
           ),
-          data.description?.nonEmpty && (data.description.isMarkdown ? /* @__PURE__ */ jsx(
+          data.description?.nonEmpty && /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
               className: cx(classes2.description, "likec4-element-description"),
@@ -37561,15 +37590,7 @@ function ElementTitle({ id: id2, data, iconSize: iconSize2 }) {
               maxHeight: data.description.isMarkdown ? "8rem" : void 0,
               lineClamp: isSmOrXs ? 3 : 5
             }
-          ) : /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: cx(classes2.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description.text
-            }
-          ))
+          )
         ] })
       ]
     }
@@ -37882,7 +37903,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       }
     }), buttons22;
   }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props2.id]);
-  return extraButtons && hasAtLeast(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props2, buttons: buttons2 });
+  return extraButtons && i$8(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props2, buttons: buttons2 });
 }, DeploymentElementActions = ({
   extraButtons,
   ...props2
@@ -37904,7 +37925,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       }
     }), buttons22;
   }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props2.id]);
-  return extraButtons && hasAtLeast(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props2, buttons: buttons2 });
+  return extraButtons && i$8(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props2, buttons: buttons2 });
 }, {
   primary,
   secondary,
@@ -37930,7 +37951,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
 function useHandlers(target, props2) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers(), diagram = useDiagram(), [originalColor, setOriginalColor] = useState(null), onColorPreview = useCallbackRef((color2) => {
     if (color2 === null) {
-      invariant$2(originalColor, "originalColor is null"), setOriginalColor(null), diagram.updateNodeData(props2.id, {
+      invariant$3(originalColor, "originalColor is null"), setOriginalColor(null), diagram.updateNodeData(props2.id, {
         color: originalColor
       });
       return;
@@ -39628,7 +39649,7 @@ const selector$7 = (state) => ({
       ] })
     ]
   }
-) }), SectionHeader = styled("div", {
+) }), SectionHeader$1 = styled("div", {
   base: {
     fontSize: "xs",
     color: "mantine.colors.dimmed",
@@ -39693,12 +39714,12 @@ const selector$7 = (state) => ({
           ] })
         ] }),
         links.length > 0 && /* @__PURE__ */ jsxs("section", { className: hstack({ alignItems: "baseline" }), children: [
-          /* @__PURE__ */ jsx(SectionHeader, { children: "Links" }),
+          /* @__PURE__ */ jsx(SectionHeader$1, { children: "Links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i2) => /* @__PURE__ */ jsx(Link, { value: link }, `${i2}-${link.url}`)) })
         ] }),
         description2.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
         description2.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
-          /* @__PURE__ */ jsx(SectionHeader, { children: "Description" }),
+          /* @__PURE__ */ jsx(SectionHeader$1, { children: "Description" }),
           /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
@@ -39838,7 +39859,8 @@ const selector$7 = (state) => ({
     hasNext,
     hasPrevious,
     currentStep,
-    totalSteps
+    totalSteps,
+    notes
   } = useDiagramContext((s2) => {
     const currentStepIndex = s2.xyedges.findIndex((e2) => e2.id === s2.activeWalkthrough?.stepId);
     return {
@@ -39846,7 +39868,8 @@ const selector$7 = (state) => ({
       hasNext: currentStepIndex < s2.xyedges.length - 1,
       hasPrevious: currentStepIndex > 0,
       currentStep: currentStepIndex + 1,
-      totalSteps: s2.xyedges.length
+      totalSteps: s2.xyedges.length,
+      notes: s2.xyedges[currentStepIndex]?.data?.notes ?? RichText.EMPTY
     };
   });
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: !0, children: [
@@ -39861,8 +39884,7 @@ const selector$7 = (state) => ({
         },
         rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
         children: "Stop"
-      },
-      "trigger-dynamic-walkthrough"
+      }
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,
@@ -40456,7 +40478,7 @@ function FolderColumnItem({ columnItem, ...props2 }) {
         columnItem.viewId
       );
     default:
-      nonexhaustive(columnItem);
+      nonexhaustive$1(columnItem);
   }
 }
 function SearchInput({ onKeyDown, ...props2 }) {
@@ -40522,7 +40544,297 @@ function SearchInput({ onKeyDown, ...props2 }) {
     }
   );
 }
-const NavigationPanel = memo$2(() => {
+const backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", level = "--_level", offset = "--_offset", inset = "--_inset", borderRadius = "--_border-radius", dialog$2 = css.raw({
+  boxSizing: "border-box",
+  margin: "0",
+  position: "fixed",
+  width: "100vw",
+  height: "100vh",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  background: "mantine.colors.defaultBorder/50",
+  shadow: "xl",
+  border: "transparent",
+  outline: "none",
+  borderRadius: `var(${borderRadius})`,
+  [backdropBlur$1]: "0px",
+  [level]: "0",
+  [offset]: "0px",
+  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
+  [backdropOpacity$1]: "0%",
+  [borderRadius]: "0px",
+  _backdrop: {
+    cursor: "zoom-out"
+  },
+  inset: "0",
+  padding: "0"
+}), body$1 = css.raw({
+  position: "relative",
+  containerName: "likec4-dialog",
+  containerType: "size",
+  border: "0 solid transparent",
+  overflow: "hidden",
+  width: "100%",
+  height: "100%",
+  background: "mantine.colors.body"
+}), overlay = sva({
+  slots: ["dialog", "body"],
+  base: {
+    dialog: dialog$2,
+    body: body$1
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        dialog: {
+          sm: {
+            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+            width: "calc(100vw - 2 * var(--_inset))",
+            height: "calc(100vh - var(--_offset) - var(--_inset))",
+            [borderRadius]: "6px",
+            padding: "1.5",
+            // 6px
+            [offset]: "1rem"
+          },
+          md: {
+            [offset]: "1rem"
+          },
+          lg: {
+            [offset]: "2rem"
+          },
+          xl: {
+            [offset]: "4rem"
+          }
+        },
+        body: {
+          sm: {
+            borderRadius: `calc(var(${borderRadius}) - 2px)`
+          }
+        }
+      },
+      true: {
+        dialog: {
+          inset: "0",
+          padding: "0"
+        }
+      }
+    },
+    // transparent: {
+    //   false: {
+    //   },
+    //   true: {
+    //     dialog: {
+    //       background: 'transparent',
+    //     },
+    //   },
+    // },
+    withBackdrop: {
+      false: {
+        dialog: {
+          _backdrop: {
+            display: "none"
+          }
+        }
+      },
+      true: {
+        dialog: {
+          _backdrop: {
+            backdropFilter: `blur(var(${backdropBlur$1}))`,
+            backgroundColor: {
+              _dark: `[rgb(34 34 34 / var(${backdropOpacity$1}))]`,
+              _light: `[rgb(15 15 15/ var(${backdropOpacity$1}))]`
+            }
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    fullscreen: !1,
+    withBackdrop: !0
+  }
+}), Overlay = forwardRef(({
+  onClose,
+  className,
+  classes: classes2,
+  overlayLevel = 0,
+  children: children2,
+  fullscreen = !1,
+  withBackdrop = !0,
+  backdrop,
+  openDelay = 130,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(openDelay === 0), focusTrapRef = useFocusTrap(opened), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const close = useDebouncedCallback(
+    () => {
+      isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
+    },
+    [],
+    50
+  );
+  useLayoutEffect$1(() => {
+    dialogRef.current?.open || dialogRef.current?.showModal();
+  }, []), useTimeoutEffect(() => {
+    setOpened(!0);
+  }, openDelay > 0 ? openDelay : void 0);
+  const styles = overlay({
+    fullscreen,
+    withBackdrop
+  });
+  let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
+  return backdrop?.opacity !== void 0 && (targetBackdropOpacity = `${backdrop.opacity * 100}%`), /* @__PURE__ */ jsx(
+    m$4.dialog,
+    {
+      ref: useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref
+      ),
+      className: cx(
+        classes2?.dialog,
+        className,
+        styles.dialog,
+        fullscreen && RemoveScroll.classNames.fullWidth
+      ),
+      layout: !0,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
+      },
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur$1]: "0px",
+          [backdropOpacity$1]: "0%",
+          scale: 0.95,
+          originY: 0,
+          translateY: -20,
+          opacity: 0
+        },
+        animate: {
+          [backdropBlur$1]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity$1]: targetBackdropOpacity,
+          scale: 1,
+          opacity: 1,
+          translateY: 0,
+          transition: {
+            delay: 0.075
+          }
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.98,
+          translateY: -20,
+          transition: {
+            duration: 0.1
+          },
+          [backdropBlur$1]: "0px",
+          [backdropOpacity$1]: "0%"
+        }
+      } : {
+        initial: {
+          [backdropBlur$1]: "8px",
+          [backdropOpacity$1]: targetBackdropOpacity
+        }
+      },
+      onClick: (e2) => {
+        if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
+        }
+      },
+      onCancel: (e2) => {
+        e2.preventDefault(), e2.stopPropagation(), close();
+      },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
+      onClose: (e2) => {
+        e2.stopPropagation(), close();
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            classes2?.body,
+            styles.body,
+            "overlay-body"
+          ),
+          children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 })
+        }
+      ) })
+    }
+  );
+});
+Overlay.displayName = "Overlay";
+const SectionHeader = styled("div", {
+  base: {
+    fontSize: "xs",
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    userSelect: "none",
+    mb: "xxs"
+  }
+});
+function selectWalkthroughNotes(s2) {
+  const isActive = n(s2.activeWalkthrough), activeStepIndex = isActive ? s2.xyedges.findIndex((e2) => e2.id === s2.activeWalkthrough?.stepId) : -1;
+  return {
+    isActive,
+    isParallel: isActive && n$5(s2.activeWalkthrough?.parallelPrefix),
+    hasNext: isActive && activeStepIndex < s2.xyedges.length - 1,
+    hasPrevious: isActive && activeStepIndex > 0,
+    notes: isActive ? s2.xyedges[activeStepIndex]?.data?.notes ?? RichText.EMPTY : null
+  };
+}
+const WalkthroughPanel = () => {
+  const { notes } = useDiagramContext(selectWalkthroughNotes);
+  return !notes || notes.isEmpty ? null : /* @__PURE__ */ jsx(styled.div, { position: "relative", children: /* @__PURE__ */ jsxs(
+    ScrollAreaAutosize,
+    {
+      className: cx(
+        "nowheel nopan nodrag",
+        vstack({
+          position: "absolute",
+          layerStyle: "likec4.dropdown",
+          gap: "sm",
+          padding: "md",
+          paddingTop: "xxs",
+          pointerEvents: "all",
+          maxWidth: "calc(100cqw - 32px)",
+          minWidth: "calc(100cqw - 50px)",
+          maxHeight: "calc(100cqh - 100px)",
+          width: "max-content",
+          cursor: "default",
+          overflow: "auto",
+          overscrollBehavior: "contain",
+          "@/sm": {
+            minWidth: 400,
+            maxWidth: 550
+          },
+          "@/lg": {
+            maxWidth: 700
+          }
+        })
+      ),
+      type: "scroll",
+      children: [
+        /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
+        /* @__PURE__ */ jsx(
+          MarkdownBlock,
+          {
+            value: notes,
+            fontSize: "sm",
+            emptyText: "No description",
+            className: css({
+              userSelect: "all"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}, NavigationPanel = memo$2(() => {
   const diagramActor = useDiagramActorRef(), viewModel = useCurrentViewModel(), { portalProps } = useMantinePortalProps(), actorRef = xstateReact_cjsExports.useActorRef(
     navigationPanelActorLogic,
     {
@@ -40566,7 +40878,8 @@ const NavigationPanel = memo$2(() => {
       },
       children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
         /* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
-        /* @__PURE__ */ jsx(EditorPanel, {})
+        /* @__PURE__ */ jsx(EditorPanel, {}),
+        /* @__PURE__ */ jsx(WalkthroughPanel, {})
       ] })
     }
   ) });
@@ -40749,7 +41062,7 @@ function useLikeC4ElementsTree(viewId) {
   const model = useLikeC4Model$1();
   return useMemo(() => viewId ? [...model.view(viewId).roots()].map(buildNode).sort(sortByLabel) : [...model.roots()].map(buildNode).sort(sortByLabel), [model, viewId ?? null]);
 }
-const backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", dialog$2 = css({
+const backdropBlur = "--_blur", backdropOpacity = "--_opacity", dialog$1 = css({
   boxSizing: "border-box",
   margin: "0",
   padding: "0",
@@ -40764,8 +41077,8 @@ const backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", dialog$2 = c
   _backdrop: {
     // WebkitBackdropFilter: `blur(${backdropBlur})`,
     backdropFilter: "auto",
-    backdropBlur: `var(${backdropBlur$1})`,
-    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity$1}, 5%))]`
+    backdropBlur: `var(${backdropBlur})`,
+    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
   }
 }), card$2 = css({
   position: "absolute",
@@ -43977,7 +44290,7 @@ function layoutRelationshipsView$1(data, scope) {
         y: position.y,
         position: [position.x, position.y],
         title: "empty node",
-        description: RichText.EMPTY,
+        description: RichText$1.EMPTY,
         technology: null,
         tags: [],
         links: [],
@@ -44016,7 +44329,7 @@ function layoutRelationshipsView$1(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText.from(element.description),
+      description: RichText$1.from(element.description),
       technology: element.technology,
       tags: [...element.tags],
       links: null,
@@ -44071,7 +44384,7 @@ function layoutRelationshipsView$1(data, scope) {
         relations,
         sourceHandle,
         targetHandle
-      } = nonNullable(f(edges, (e22) => e22.name === ename)), onlyRelation = t$6(relations), label2 = onlyRelation?.title ?? "untitled", isMultiple = relations.length > 1, navigateTo = t$6(i$9(relations.flatMap((r2) => r2.navigateTo?.id ? r2.navigateTo.id : [])));
+      } = nonNullable$1(f(edges, (e22) => e22.name === ename)), onlyRelation = t$6(relations), label2 = onlyRelation?.title ?? "untitled", isMultiple = relations.length > 1, navigateTo = t$6(i$9(relations.flatMap((r2) => r2.navigateTo?.id ? r2.navigateTo.id : [])));
       return acc.push({
         id: name,
         sourceFqn,
@@ -44899,19 +45212,19 @@ function ElementDetailsCard({
     m$4.dialog,
     {
       ref,
-      className: cx(dialog$2, RemoveScroll.classNames.fullWidth),
+      className: cx(dialog$1, RemoveScroll.classNames.fullWidth),
       layout: !0,
       initial: {
-        [backdropBlur$1]: "0px",
-        [backdropOpacity$1]: "5%"
+        [backdropBlur]: "0px",
+        [backdropOpacity]: "5%"
       },
       animate: {
-        [backdropBlur$1]: "3px",
-        [backdropOpacity$1]: "60%"
+        [backdropBlur]: "3px",
+        [backdropOpacity]: "60%"
       },
       exit: {
-        [backdropBlur$1]: "0px",
-        [backdropOpacity$1]: "0%",
+        [backdropBlur]: "0px",
+        [backdropOpacity]: "0%",
         transition: {
           duration: 0.1
         }
@@ -45321,230 +45634,6 @@ function ElementDetails({
     }
   ) });
 }
-const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_level", offset = "--_offset", inset = "--_inset", borderRadius = "--_border-radius", dialog$1 = css.raw({
-  boxSizing: "border-box",
-  margin: "0",
-  position: "fixed",
-  width: "100vw",
-  height: "100vh",
-  maxWidth: "100vw",
-  maxHeight: "100vh",
-  background: "mantine.colors.defaultBorder/50",
-  shadow: "xl",
-  border: "transparent",
-  outline: "none",
-  borderRadius: `var(${borderRadius})`,
-  [backdropBlur]: "0px",
-  [level]: "0",
-  [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
-  [backdropOpacity]: "0%",
-  [borderRadius]: "0px",
-  _backdrop: {
-    cursor: "zoom-out"
-  },
-  inset: "0",
-  padding: "0"
-}), body$1 = css.raw({
-  position: "relative",
-  containerName: "likec4-dialog",
-  containerType: "size",
-  border: "0 solid transparent",
-  overflow: "hidden",
-  width: "100%",
-  height: "100%",
-  background: "mantine.colors.body"
-}), overlay = sva({
-  slots: ["dialog", "body"],
-  base: {
-    dialog: dialog$1,
-    body: body$1
-  },
-  variants: {
-    fullscreen: {
-      false: {
-        dialog: {
-          sm: {
-            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
-            width: "calc(100vw - 2 * var(--_inset))",
-            height: "calc(100vh - var(--_offset) - var(--_inset))",
-            [borderRadius]: "6px",
-            padding: "1.5",
-            // 6px
-            [offset]: "1rem"
-          },
-          md: {
-            [offset]: "1rem"
-          },
-          lg: {
-            [offset]: "2rem"
-          },
-          xl: {
-            [offset]: "4rem"
-          }
-        },
-        body: {
-          sm: {
-            borderRadius: `calc(var(${borderRadius}) - 2px)`
-          }
-        }
-      },
-      true: {
-        dialog: {
-          inset: "0",
-          padding: "0"
-        }
-      }
-    },
-    // transparent: {
-    //   false: {
-    //   },
-    //   true: {
-    //     dialog: {
-    //       background: 'transparent',
-    //     },
-    //   },
-    // },
-    withBackdrop: {
-      false: {
-        dialog: {
-          _backdrop: {
-            display: "none"
-          }
-        }
-      },
-      true: {
-        dialog: {
-          _backdrop: {
-            backdropFilter: `blur(var(${backdropBlur}))`,
-            backgroundColor: {
-              _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-              _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`
-            }
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    fullscreen: !1,
-    withBackdrop: !0
-  }
-}), Overlay = forwardRef(({
-  onClose,
-  className,
-  classes: classes2,
-  overlayLevel = 0,
-  children: children2,
-  fullscreen = !1,
-  withBackdrop = !0,
-  backdrop,
-  openDelay = 130,
-  ...rest
-}, ref) => {
-  const [opened, setOpened] = useState(openDelay === 0), focusTrapRef = useFocusTrap(opened), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const close = useDebouncedCallback(
-    () => {
-      isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
-    },
-    [],
-    50
-  );
-  useLayoutEffect$1(() => {
-    dialogRef.current?.open || dialogRef.current?.showModal();
-  }, []), useTimeoutEffect(() => {
-    setOpened(!0);
-  }, openDelay > 0 ? openDelay : void 0);
-  const styles = overlay({
-    fullscreen,
-    withBackdrop
-  });
-  let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
-  return backdrop?.opacity !== void 0 && (targetBackdropOpacity = `${backdrop.opacity * 100}%`), /* @__PURE__ */ jsx(
-    m$4.dialog,
-    {
-      ref: useMergedRef(
-        dialogRef,
-        focusTrapRef,
-        ref
-      ),
-      className: cx(
-        classes2?.dialog,
-        className,
-        styles.dialog,
-        fullscreen && RemoveScroll.classNames.fullWidth
-      ),
-      layout: !0,
-      style: {
-        // @ts-ignore
-        [level]: overlayLevel
-      },
-      ...motionNotReduced ? {
-        initial: {
-          [backdropBlur]: "0px",
-          [backdropOpacity]: "0%",
-          scale: 0.95,
-          originY: 0,
-          translateY: -20,
-          opacity: 0
-        },
-        animate: {
-          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-          [backdropOpacity]: targetBackdropOpacity,
-          scale: 1,
-          opacity: 1,
-          translateY: 0,
-          transition: {
-            delay: 0.075
-          }
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.98,
-          translateY: -20,
-          transition: {
-            duration: 0.1
-          },
-          [backdropBlur]: "0px",
-          [backdropOpacity]: "0%"
-        }
-      } : {
-        initial: {
-          [backdropBlur]: "8px",
-          [backdropOpacity]: targetBackdropOpacity
-        }
-      },
-      onClick: (e2) => {
-        if (e2.stopPropagation(), e2.target?.nodeName?.toUpperCase() === "DIALOG") {
-          dialogRef.current?.close();
-          return;
-        }
-      },
-      onCancel: (e2) => {
-        e2.preventDefault(), e2.stopPropagation(), close();
-      },
-      onDoubleClick: stopPropagation,
-      onPointerDown: stopPropagation,
-      onClose: (e2) => {
-        e2.stopPropagation(), close();
-      },
-      ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(
-            classes2?.body,
-            styles.body,
-            "overlay-body"
-          ),
-          children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 })
-        }
-      ) })
-    }
-  );
-});
-Overlay.displayName = "Overlay";
 const finalize = (elements, explicits) => elements.size > 2 && explicits.size !== elements.size ? new Set(sortParentsFirst([
   ...treeFromElements$1(elements).flatten(),
   ...explicits
@@ -45558,7 +45647,7 @@ function computeEdgeDetailsViewData(edges, view) {
   };
   for (const edgeId of edges) {
     const edge = view.findEdge(edgeId), _relationships = edge ? [...edge.relationships("model")] : [];
-    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
+    if (!edge || !i$8(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
       continue;
     const source = edge.source.element, target = edge.target.element;
     addExplicit(source, "source"), addExplicit(target, "target");
@@ -46243,7 +46332,7 @@ const selectSubject = (state) => ({
   const actor = useRelationshipDetailsActor(), subject = xstateReact_cjsExports.useSelector(actor, selectSubject, deepEqual), likec4model = useLikeC4Model$1(), view = likec4model.findView(subject.viewId) ?? null, data = useMemo(() => {
     let data2;
     if ("edgeId" in subject && n$5(subject.edgeId)) {
-      invariant$2(view, `view ${subject.viewId} not found`);
+      invariant$3(view, `view ${subject.viewId} not found`);
       const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
       data2 = computeEdgeDetailsViewData([edge.id], view);
     } else if (subject.source && subject.target)
@@ -46344,7 +46433,7 @@ const selectSubject = (state) => ({
   if (!view || !view.isDiagram())
     return null;
   const edges = [...view.edges()];
-  let edge = "edgeId" in subject && n$5(subject.edgeId) ? edges.find((e2) => e2.id === subject.edgeId) : f(edges, (e2) => e2.source.element?.id === subject.source && e2.target.element?.id === subject.target) || f(edges, (e2) => (e2.source.element?.id === subject.source || isAncestor(e2.source.element?.id ?? "__", subject.source ?? "__")) && (e2.target.element?.id === subject.target || isAncestor(e2.target.element?.id ?? "__", subject.target ?? "__")));
+  let edge = "edgeId" in subject && n$5(subject.edgeId) ? edges.find((e2) => e2.id === subject.edgeId) : f(edges, (e2) => e2.source.element?.id === subject.source && e2.target.element?.id === subject.target) || f(edges, (e2) => (e2.source.element?.id === subject.source || isAncestor$1(e2.source.element?.id ?? "__", subject.source ?? "__")) && (e2.target.element?.id === subject.target || isAncestor$1(e2.target.element?.id ?? "__", subject.target ?? "__")));
   return edge ? /* @__PURE__ */ jsx(TopLeftPanelInner, { edge: edge.$edge, view: view.$view }) : null;
 }), TopLeftPanelInner = ({ edge, view }) => {
   const browser = useRelationshipDetails(), edgeId = edge.id, [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
@@ -47010,7 +47099,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
                   component: "div",
                   highlight: searchTerms,
                   className: cx(elementId, btn$1.descriptionColor),
-                  children: nameFromFqn(element.id)
+                  children: nameFromFqn$1(element.id)
                 }
               ) })
             ] }),
@@ -47732,13 +47821,16 @@ const scrollArea = css({
   fontSize: "xxs",
   fontWeight: 500,
   whiteSpace: "nowrap",
-  padding: "[2px 4px]",
+  paddingX: "1",
+  paddingY: "0.5",
   borderRadius: "[2px]",
-  background: "var(--likec4-palette-fill)/30",
-  lineHeight: "[1.11]",
-  mixBlendMode: "hard-light",
+  background: {
+    _light: "var(--likec4-palette-fill)/90",
+    _dark: "var(--likec4-palette-fill)/60"
+  },
+  lineHeight: "1",
   color: {
-    _light: "[color-mix(in srgb, var(--likec4-palette-stroke), {colors.likec4.mixColor} 60%)]",
+    _light: "var(--likec4-palette-hiContrast)",
     _dark: "var(--likec4-palette-loContrast)"
   }
 }), title$1 = css({
@@ -47764,9 +47856,9 @@ function selectDiagramContext(c2) {
 }
 const RelationshipPopover = memo$2(() => {
   const actorRef = xstateReact_cjsExports.useActorRef(RelationshipPopoverActorLogic), diagram = useDiagram(), { viewId, selected: selected2 } = useDiagramContext(selectDiagramContext), openedEdgeId = xstateReact_cjsExports.useSelector(actorRef, (s2) => s2.hasTag("opened") ? s2.context.edgeId : null);
-  useUpdateEffect(() => {
+  useOnDiagramEvent("viewChange", () => {
     actorRef.send({ type: "close" });
-  }, [viewId]), useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
+  }), useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
     actorRef.send({ type: "xyedge.mouseEnter", edgeId: edge.data.id });
   }), useOnDiagramEvent("edgeMouseLeave", () => {
     actorRef.send({ type: "xyedge.mouseLeave" });
@@ -47774,7 +47866,7 @@ const RelationshipPopover = memo$2(() => {
     actorRef.send({ type: "close" });
   }), useOnDiagramEvent("walkthroughStarted", () => {
     actorRef.send({ type: "close" });
-  }), useUpdateEffect(() => {
+  }), useEffect(() => {
     selected2 ? actorRef.send({ type: "xyedge.select", edgeId: selected2 }) : actorRef.send({ type: "xyedge.unselect" });
   }, [selected2]);
   const onMouseEnter = useCallback((event) => {
@@ -47812,7 +47904,7 @@ const RelationshipPopover = memo$2(() => {
       onMouseLeave
     }
   );
-}), getEdgeLabelElement = (edgeId, container2) => container2?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null, selectTransform = (s2) => roundDpr(s2.transform[0]) + " " + roundDpr(s2.transform[1]) + " " + s2.transform[2].toFixed(3), RelationshipPopoverInternal = ({
+}), getEdgeLabelElement = (edgeId, container2) => container2?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null, POPOVER_PADDING = 8, RelationshipPopoverInternal = ({
   viewId,
   diagramEdge,
   sourceNode,
@@ -47820,21 +47912,21 @@ const RelationshipPopover = memo$2(() => {
   onMouseEnter,
   onMouseLeave
 }) => {
-  const ref = useRef(null), { enableNavigateTo, enableVscode } = useEnabledFeatures(), { onOpenSource } = useDiagramEventHandlers(), { portalProps } = useMantinePortalProps(), [referenceEl, setReferenceEl] = useState(null), viewport = useXYStore(selectTransform);
+  const ref = useRef(null), { enableNavigateTo, enableVscode } = useEnabledFeatures(), { onOpenSource } = useDiagramEventHandlers(), { portalProps } = useMantinePortalProps(), [referenceEl, setReferenceEl] = useState(null);
   useEffect(() => {
     setReferenceEl(getEdgeLabelElement(diagramEdge.id, portalProps?.target));
-  }, [diagramEdge, viewport]), useEffect(() => {
+  }, [diagramEdge]), useEffect(() => {
     const reference = referenceEl, popper = ref.current;
     if (!reference || !popper)
       return;
     let wasCanceled = !1;
     const cleanup = autoUpdate(reference, popper, () => {
       computePosition(reference, popper, {
-        placement: "bottom",
+        placement: "bottom-start",
         middleware: [
           offset$2(2),
           autoPlacement({
-            padding: 16,
+            padding: POPOVER_PADDING,
             allowedPlacements: [
               "bottom-start",
               "bottom-end",
@@ -47847,21 +47939,24 @@ const RelationshipPopover = memo$2(() => {
             ]
           }),
           size$1({
-            padding: 16,
+            padding: POPOVER_PADDING,
             apply({ availableHeight, availableWidth, elements }) {
               wasCanceled || Object.assign(elements.floating.style, {
-                maxWidth: `${u(roundDpr(availableWidth), { min: 150, max: 400 })}px`,
+                maxWidth: `${u(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
                 maxHeight: `${u(roundDpr(availableHeight), { min: 0, max: 500 })}px`
               });
             }
           }),
           hide$1({
-            padding: 16
+            padding: POPOVER_PADDING * 2
           })
         ]
       }).then(({ x: x2, y: y2, middlewareData }) => {
         wasCanceled || (popper.style.transform = `translate(${roundDpr(x2)}px, ${roundDpr(y2)}px)`, popper.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible");
       });
+    }, {
+      ancestorResize: !1,
+      animationFrame: !0
     });
     return () => {
       wasCanceled = !0, cleanup();
@@ -47919,7 +48014,7 @@ const RelationshipPopover = memo$2(() => {
       styles: {
         viewport: {
           overscrollBehavior: "contain",
-          minWidth: 150
+          minWidth: 180
         }
       },
       className: cx(
@@ -47939,9 +48034,9 @@ const RelationshipPopover = memo$2(() => {
         VStack,
         {
           css: {
-            gap: "3.5",
+            gap: "3",
             padding: "4",
-            paddingTop: "2.5"
+            paddingTop: "2"
           },
           children: [
             /* @__PURE__ */ jsx(
@@ -47962,12 +48057,19 @@ const RelationshipPopover = memo$2(() => {
               }
             ),
             direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(Divider$1, { label: /* @__PURE__ */ jsx(Label, { children: "direct relationships" }), labelPosition: "left" }),
+              /* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }),
               direct.map(renderRelationship)
             ] }),
             nested.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              direct.length > 0 && /* @__PURE__ */ jsx(Space, {}),
-              /* @__PURE__ */ jsx(Divider$1, { label: /* @__PURE__ */ jsx(Label, { children: "resolved from nested" }), labelPosition: "left" }),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  css: {
+                    mt: direct.length > 0 ? "2" : "0"
+                  },
+                  children: "RESOLVED FROM NESTED"
+                }
+              ),
               nested.map(renderRelationship)
             ] })
           ]
@@ -47984,7 +48086,7 @@ const RelationshipPopover = memo$2(() => {
   onNavigateTo,
   onOpenSource
 }, ref) => {
-  const sourceId = getShortId(r2, r2.source.id, sourceNode), targetId = getShortId(r2, r2.target.id, targetNode), navigateTo = onNavigateTo && r2.navigateTo?.id !== viewId ? r2.navigateTo?.id : void 0, links = r2.links;
+  const sourceId = getEndpointId(r2, "source", sourceNode), targetId = getEndpointId(r2, "target", targetNode), navigateTo = onNavigateTo && r2.navigateTo?.id !== viewId ? r2.navigateTo?.id : void 0, links = r2.links;
   return /* @__PURE__ */ jsxs(
     VStack,
     {
@@ -47992,8 +48094,8 @@ const RelationshipPopover = memo$2(() => {
       className: bleed({
         block: "2",
         inline: "2",
-        paddingBlock: "2",
-        paddingInline: "2",
+        paddingY: "2.5",
+        paddingX: "2",
         gap: "1",
         rounded: "sm",
         backgroundColor: {
@@ -48004,42 +48106,40 @@ const RelationshipPopover = memo$2(() => {
         }
       }),
       children: [
-        /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
-          /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId }),
+        /* @__PURE__ */ jsx(HStack, { gap: "0.5", children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 200, children: [
+          /* @__PURE__ */ jsx(Tooltip$1, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId.short }) }),
           /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-          /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId }),
-          /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
-            navigateTo && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
-              ActionIcon$1,
-              {
-                size: "sm",
-                radius: "sm",
-                variant: "default",
-                onClick: (event) => {
-                  event.stopPropagation(), onNavigateTo?.(navigateTo);
-                },
-                style: {
-                  alignSelf: "flex-end"
-                },
-                role: "button",
-                children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
-              }
-            ) }),
-            onOpenSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open source", children: /* @__PURE__ */ jsx(
-              ActionIcon$1,
-              {
-                size: "sm",
-                radius: "sm",
-                variant: "default",
-                onClick: (event) => {
-                  event.stopPropagation(), onOpenSource();
-                },
-                role: "button",
-                children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
-              }
-            ) })
-          ] })
-        ] }),
+          /* @__PURE__ */ jsx(Tooltip$1, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId.short }) }),
+          navigateTo && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
+            ActionIcon$1,
+            {
+              size: "sm",
+              radius: "sm",
+              variant: "default",
+              onClick: (event) => {
+                event.stopPropagation(), onNavigateTo?.(navigateTo);
+              },
+              style: {
+                alignSelf: "flex-end"
+              },
+              role: "button",
+              children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
+            }
+          ) }),
+          onOpenSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Open source", children: /* @__PURE__ */ jsx(
+            ActionIcon$1,
+            {
+              size: "sm",
+              radius: "sm",
+              variant: "default",
+              onClick: (event) => {
+                event.stopPropagation(), onOpenSource();
+              },
+              role: "button",
+              children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
+            }
+          ) })
+        ] }) }),
         /* @__PURE__ */ jsx(Box, { className: title$1, children: r2.title || "untitled" }),
         r2.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label, { children: "kind" }),
@@ -48074,13 +48174,13 @@ const RelationshipPopover = memo$2(() => {
       ]
     }
   );
-}), Label = styled("span", {
+}), Label = styled("div", {
   base: {
-    display: "inline-block",
+    display: "block",
     fontSize: "xxs",
     fontWeight: 500,
     userSelect: "none",
-    lineHeight: "[1.11]",
+    lineHeight: "sm",
     color: "mantine.colors.dimmed"
   }
 }), Tooltip$1 = Tooltip$7.withProps({
@@ -48091,9 +48191,9 @@ const RelationshipPopover = memo$2(() => {
   offset: 8,
   withinPortal: !1
 });
-function getShortId(r2, actualEndpointId, diagramNode) {
-  const diagramNodeId = r2.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
-  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
+function getEndpointId(r2, endpoint2, diagramNode) {
+  const diagramNodeId = r2.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "", full = r2[endpoint2].id, short = nameFromFqn(diagramNodeId) + full.slice(diagramNodeId.length);
+  return { full, short };
 }
 const root = css({
   height: "30px",
@@ -50160,7 +50260,7 @@ const channels = new Channels({ r: 0, g: 0, b: 0, a: 0 }, "transparent"), Hex =
   for (const c2 in channels2)
     adjustments[c2] = delta(ch[c2], channels2[c2], Utils.channel.max[c2]);
   return adjust(color2, adjustments);
-}, globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}", scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`, whenDark = scheme("dark"), whenLight = scheme("light"), MAX_DEPTH = 5, generateCompoundColors = (name, colors2, depth) => {
+}, globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}", scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`, whenDark = scheme("dark"), whenLight = scheme("light"), MAX_DEPTH = 5, generateCompoundColors = (rootSelector, name, colors2, depth) => {
   const compoundDarkColor = (color2) => toHex(
     scale(color2, {
       l: -22 - 5 * depth,
@@ -50171,7 +50271,7 @@ const channels = new Channels({ r: 0, g: 0, b: 0, a: 0 }, "transparent"), Hex =
       l: -20 - 3 * depth,
       s: -3 - 6 * depth
     })
-  ), selector3 = `:where([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
+  ), selector3 = `:where(${rootSelector} [data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
   return `
 ${selector3} {
   --likec4-palette-fill: ${compoundLightColor(colors2.elements.fill)};
@@ -50183,8 +50283,8 @@ ${whenDark} ${selector3} {
 }
   `.trim();
 };
-function toStyle(name, colors2) {
-  const selector3 = `:where([data-likec4-color=${name}])`;
+function toStyle(rootSelector, name, colors2) {
+  const selector3 = `:where(${rootSelector} [data-likec4-color=${name}])`;
   return [
     `
 ${selector3} {
@@ -50204,37 +50304,67 @@ ${whenDark} ${selector3} {
 }
   `.trim(),
-    ...a$5(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(name, colors2, depth))
+    ...a$5(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors2, depth))
   ].join(`
 `);
 }
-const builtInColors = ThemeColors.map(
-  (color2) => toStyle(color2, {
-    elements: defaultTheme.elements[color2],
-    relationships: defaultTheme.relationships[color2]
-  })
-).join(`
-`);
-function generateCustomColorStyles(customColors) {
+function generateCustomColorStyles(customColors, rootSelector) {
   return C(
     t$1(customColors),
-    m$1(([name, color2]) => toStyle(name, color2)),
+    m$1(([name, color2]) => toStyle(rootSelector, name, color2)),
+    r$2(`
+`)
+  );
+}
+function generateBuiltInColorStyles(rootSelector) {
+  return C(
+    ThemeColors,
+    m$1(
+      (color2) => toStyle(rootSelector, color2, {
+        elements: defaultTheme.elements[color2],
+        relationships: defaultTheme.relationships[color2]
+      })
+    ),
     r$2(`
 `)
   );
 }
-function LikeC4Styles() {
-  const nonce = useMantineStyleNonce()?.(), { customColors } = useLikeC4Specification(), customColorsStyles = customColors ? generateCustomColorStyles(customColors) : "";
-  return /* @__PURE__ */ jsx(MemoizedStyles, { nonce, customColorsStyles, builtInColors });
+function LikeC4Styles({ id: id2 }) {
+  const rootSelector = `#${id2}`, nonce = useMantineStyleNonce()?.(), { customColors } = useLikeC4Specification(), customColorsStyles = customColors ? generateCustomColorStyles(customColors, rootSelector) : "", builtInColors = generateBuiltInColorStyles(rootSelector);
+  return /* @__PURE__ */ jsx(
+    MemoizedStyles,
+    {
+      id: id2,
+      nonce,
+      customColorsStyles,
+      builtInColors
+    }
+  );
 }
-const MemoizedStyles = memo$2(({ nonce, customColorsStyles, builtInColors: builtInColors2 }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-global": !0, dangerouslySetInnerHTML: { __html: globalsCss }, nonce }),
-  /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-colors": !0, dangerouslySetInnerHTML: { __html: builtInColors2 }, nonce }),
+const MemoizedStyles = memo$2(({ id: id2, nonce, customColorsStyles, builtInColors }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-global": id2,
+      dangerouslySetInnerHTML: { __html: globalsCss.replaceAll(".likec4-root", `#${id2}.likec4-root`) },
+      nonce
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-colors": id2,
+      dangerouslySetInnerHTML: { __html: builtInColors },
+      nonce
+    }
+  ),
   customColorsStyles && /* @__PURE__ */ jsx(
     "style",
     {
       type: "text/css",
-      "data-likec4-custom-colors": !0,
+      "data-likec4-custom-colors": id2,
       dangerouslySetInnerHTML: { __html: customColorsStyles },
       nonce
     }
@@ -50353,7 +50483,7 @@ function viewToNodesEdge$1(opts) {
         break;
       }
       case isCompound: {
-        invariant$2(!!modelFqn, "ModelRef expected"), xynodes.push(
+        invariant$3(!!modelFqn, "ModelRef expected"), xynodes.push(
           {
             ...base,
             type: "compound-element",
@@ -50383,7 +50513,7 @@ function viewToNodesEdge$1(opts) {
         break;
       }
       default:
-        invariant$2(!!modelFqn, "ModelRef expected"), xynodes.push(
+        invariant$3(!!modelFqn, "ModelRef expected"), xynodes.push(
           {
             ...base,
             type: "element",
@@ -50415,7 +50545,7 @@ function viewToNodesEdge$1(opts) {
         id: edge.id,
         label: edge.label,
         technology: edge.technology,
-        notes: edge.notes,
+        notes: RichText.from(edge.notes),
         navigateTo: edge.navigateTo,
         controlPoints: edge.controlPoints ?? null,
         labelBBox: edge.labelBBox ?? null,
@@ -50551,7 +50681,7 @@ function viewToNodesEdge(view) {
         break;
       }
       default:
-        invariant$2(fqn2, "Element should have either modelRef or deploymentRef"), xynodes.push(
+        invariant$3(fqn2, "Element should have either modelRef or deploymentRef"), xynodes.push(
           {
             ...base,
             type: "element",
@@ -50635,7 +50765,7 @@ const findRootSubject = (nodes) => nodes.find(
       xynodes: updateNodes(nodes, next.xynodes),
       xyedges: updateEdges(edges, next.xyedges)
     };
-  }, parent = nonNullable(self2._parent);
+  }, parent = nonNullable$1(self2._parent);
   let zoom2 = xyflow2.getZoom();
   const maxZoom = Math.max(zoom2, 1), nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding), nextSubjectNode = next.xynodes.find(
     (n2) => n2.type !== "empty" && n2.data.column === "subjects" && n2.data.fqn === subjectId
@@ -50679,7 +50809,7 @@ const findRootSubject = (nodes) => nodes.find(
     type: "update.xydata",
     xynodes: currentNodes,
     xyedges: []
-  }), await delay$1(120), next.xynodes = next.xynodes.map(setDimmed(!1)), signal.aborted || (await xyflow2.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom: zoom2, duration: 300 }), await xyflow2.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: zoom2 })), updateXYData();
+  }), await delay$1(120), next.xynodes = next.xynodes.map(Base.setDimmed(!1)), signal.aborted || (await xyflow2.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom: zoom2, duration: 300 }), await xyflow2.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: zoom2 })), updateXYData();
 }), relationshipsBrowserLogic = xstate_cjsExports.setup({
   types: {
     context: {},
@@ -50872,10 +51002,10 @@ const findRootSubject = (nodes) => nodes.find(
                 xstate_cjsExports.assign({
                   xyedges: ({ context: context2, event }) => {
                     const hasDimmed = context2.xyedges.some((edge) => edge.data.dimmed !== !1 || edge.selected);
-                    return context2.xyedges.map((edge) => edge.id === event.edge.id ? setData(edge, {
+                    return context2.xyedges.map((edge) => edge.id === event.edge.id ? Base.setData(edge, {
                       hovered: !0,
                       dimmed: !1
-                    }) : hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge);
+                    }) : hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge);
                   }
                 }),
                 xstate_cjsExports.cancel("undim.edges"),
@@ -50886,7 +51016,7 @@ const findRootSubject = (nodes) => nodes.find(
             "xyflow.edgeMouseLeave": {
               actions: [
                 xstate_cjsExports.assign({
-                  xyedges: ({ context: context2, event }) => context2.xyedges.map((edge) => edge.id === event.edge.id ? setHovered(edge, !1) : edge)
+                  xyedges: ({ context: context2, event }) => context2.xyedges.map((edge) => edge.id === event.edge.id ? Base.setHovered(edge, !1) : edge)
                 }),
                 xstate_cjsExports.cancel("dim.nonhovered.edges"),
                 xstate_cjsExports.raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
@@ -50895,13 +51025,13 @@ const findRootSubject = (nodes) => nodes.find(
             "dim.nonhovered.edges": {
               actions: xstate_cjsExports.assign({
                 xyedges: ({ context: context2 }) => context2.xyedges.map(
-                  (edge) => edge.data.hovered ? edge : setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : !0)
+                  (edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : !0)
                 )
               })
             },
             "undim.edges": {
               actions: xstate_cjsExports.assign({
-                xyedges: ({ context: context2 }) => context2.xyedges.map(setDimmed(!1))
+                xyedges: ({ context: context2 }) => context2.xyedges.map(Base.setDimmed(!1))
               })
             },
             "xyflow.selectionChange": {
@@ -50918,9 +51048,9 @@ const findRootSubject = (nodes) => nodes.find(
             input: ({ context: context2 }) => ({
               subjectId: context2.subject,
               navigateFromNode: context2.navigateFromNode,
-              xyflow: nonNullable(context2.xyflow),
-              xystore: nonNullable(context2.xystore),
-              update: nonNullable(context2.layouted)
+              xyflow: nonNullable$1(context2.xyflow),
+              xystore: nonNullable$1(context2.xystore),
+              update: nonNullable$1(context2.layouted)
             }),
             onDone: {
               target: "idle",
@@ -51145,7 +51275,7 @@ function layoutResultToXYFlow(layout2) {
   };
 }
 function inputToSubject(input2) {
-  return "edgeId" in input2 ? (invariant$2(t$3(input2.edgeId), "edgeId is required"), {
+  return "edgeId" in input2 ? (invariant$3(t$3(input2.edgeId), "edgeId is required"), {
     edgeId: input2.edgeId
   }) : {
     source: input2.source,
@@ -51163,7 +51293,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
       let { duration, bounds } = params ?? {};
       duration ??= 450;
       const { xyflow: xyflow2, xystore } = context2;
-      invariant$2(xyflow2, "xyflow is not initialized"), invariant$2(xystore, "xystore is not initialized"), bounds ??= context2.bounds;
+      invariant$3(xyflow2, "xyflow is not initialized"), invariant$3(xystore, "xystore is not initialized"), bounds ??= context2.bounds;
       const maxZoom = Math.max(xyflow2.getZoom(), 1);
       if (bounds) {
         const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
@@ -51177,7 +51307,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
         });
     },
     "xyflow:updateNodeInternals": ({ context: context2 }) => {
-      invariant$2(context2.xystore, "xystore is not initialized");
+      invariant$3(context2.xystore, "xystore is not initialized");
       const { domNode, updateNodeInternals: updateNodeInternals2 } = context2.xystore.getState(), nodeIds = new Set(context2.xyedges.flatMap((e2) => [e2.source, e2.target]));
       if (nodeIds.size === 0 || !domNode)
         return;
@@ -51276,10 +51406,10 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
                 const hasDimmed = context2.xyedges.some(
                   (edge) => edge.data.dimmed === !0 || edge.data.dimmed === "immediate"
                 );
-                return context2.xyedges.map((edge) => edge.id === event.edge.id ? setData(edge, {
+                return context2.xyedges.map((edge) => edge.id === event.edge.id ? Base.setData(edge, {
                   hovered: !0,
                   dimmed: !1
-                }) : hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge);
+                }) : hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge);
               }
             }),
             xstate_cjsExports.cancel("undim.edges"),
@@ -51290,7 +51420,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
         "xyflow.edgeMouseLeave": {
           actions: [
             xstate_cjsExports.assign({
-              xyedges: ({ context: context2, event }) => context2.xyedges.map((edge) => edge.id === event.edge.id ? setHovered(edge, !1) : edge)
+              xyedges: ({ context: context2, event }) => context2.xyedges.map((edge) => edge.id === event.edge.id ? Base.setHovered(edge, !1) : edge)
             }),
             xstate_cjsExports.cancel("dim.nonhovered.edges"),
             xstate_cjsExports.raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
@@ -51298,14 +51428,14 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
         },
         "dim.nonhovered.edges": {
           actions: xstate_cjsExports.assign({
-            xyedges: ({ context: context2 }) => context2.xyedges.map((edge) => setDimmed(edge, edge.data.hovered !== !0))
+            xyedges: ({ context: context2 }) => context2.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== !0))
           })
         },
         "undim.edges": {
           actions: xstate_cjsExports.assign({
             xyedges: ({ context: context2 }) => context2.xyedges.some((edge) => edge.selected === !0) ? context2.xyedges.map(
-              (edge) => setDimmed(edge, edge.selected !== !0 ? edge.data.dimmed || "immediate" : !1)
-            ) : context2.xyedges.map(setDimmed(!1))
+              (edge) => Base.setDimmed(edge, edge.selected !== !0 ? edge.data.dimmed || "immediate" : !1)
+            ) : context2.xyedges.map(Base.setDimmed(!1))
           })
         },
         "xyflow.selectionChange": {
@@ -51848,7 +51978,7 @@ class GridAligner extends Aligner {
         Array.from(layout2.nodePositions),
         m$1(([id2, position]) => {
           const originalRect = originalRects.get(id2);
-          return invariant$2(originalRect, `Could not find original rect for node ${id2}`), [i$6(originalRect, ["x", "y"]), position];
+          return invariant$3(originalRect, `Could not find original rect for node ${id2}`), [i$6(originalRect, ["x", "y"]), position];
         }),
         m$1(
           ([original, suggested]) => Math.abs(original[this.secondaryAxisCoord] - suggested[this.secondaryAxisCoord])
@@ -51860,7 +51990,7 @@ class GridAligner extends Aligner {
   }
   getGapsPositions(layer) {
     const result = [], { layout: layout2, nodes } = layer;
-    invariant$2(layout2, "Layout of the layer must be computed before calling getGapsPositions");
+    invariant$3(layout2, "Layout of the layer must be computed before calling getGapsPositions");
     for (let i2 = 1; i2 < nodes.length; i2++) {
       const previousNode = nodes[i2 - 1], currentNode = nodes[i2], previousNodePosition = layout2.nodePositions.get(previousNode.id), currentNodePosition = layout2.nodePositions.get(currentNode.id);
       result.push(
@@ -51871,7 +52001,7 @@ class GridAligner extends Aligner {
   }
   getNodePositions(layer) {
     const result = [], { layout: layout2, nodes } = layer;
-    invariant$2(layout2, "Layout of the layer must be computed before calling getGapsPositions");
+    invariant$3(layout2, "Layout of the layer must be computed before calling getGapsPositions");
     for (let i2 = 0; i2 < nodes.length; i2++) {
       const node2 = nodes[i2], nodePosition = layout2.nodePositions.get(node2.id);
       result.push(
@@ -52018,15 +52148,15 @@ function focusNodesEdges(params) {
   const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = params.context;
   if (!focusedNode)
     return {};
-  const focused = /* @__PURE__ */ new Set([focusedNode]), xyedges = _xyedges.map((edge) => edge.source === focusedNode || edge.target === focusedNode ? (focused.add(edge.source), focused.add(edge.target), setData(edge, {
+  const focused = /* @__PURE__ */ new Set([focusedNode]), xyedges = _xyedges.map((edge) => edge.source === focusedNode || edge.target === focusedNode ? (focused.add(edge.source), focused.add(edge.target), Base.setData(edge, {
     dimmed: !1,
     active: !0
-  })) : setData(edge, {
+  })) : Base.setData(edge, {
     dimmed: !0,
     active: !1
   }));
   return {
-    xynodes: _xynodes.map((n2) => setDimmed(n2, !focused.has(n2.id))),
+    xynodes: _xynodes.map((n2) => Base.setDimmed(n2, !focused.has(n2.id))),
     xyedges
   };
 }
@@ -52107,7 +52237,7 @@ function navigateBack({ context: context2 }) {
       history
     }
   } = context2;
-  invariant$2(currentIndex > 0, "Cannot navigate back");
+  invariant$3(currentIndex > 0, "Cannot navigate back");
   const stepCurrent = history[currentIndex], stepBack = history[currentIndex - 1];
   return {
     navigationHistory: {
@@ -52128,7 +52258,7 @@ function navigateForward({ context: context2 }) {
       history
     }
   } = context2;
-  invariant$2(currentIndex < history.length - 1, "Cannot navigate forward");
+  invariant$3(currentIndex < history.length - 1, "Cannot navigate forward");
   const stepCurrent = history[currentIndex], stepForward = history[currentIndex + 1];
   return {
     navigationHistory: {
@@ -52213,14 +52343,14 @@ function updateActiveWalkthrough({ context: context2 }) {
   return {
     xyedges: context2.xyedges.map((edge) => {
       const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
-      return setData(edge, {
+      return Base.setData(edge, {
         active,
         dimmed: !active
       });
     }),
     xynodes: context2.xynodes.map((node2) => {
       const dimmed = step.source !== node2.id && step.target !== node2.id;
-      return setDimmed(node2, dimmed);
+      return Base.setDimmed(node2, dimmed);
     })
   };
 }
@@ -52483,7 +52613,7 @@ const _diagramMachine = xstate_cjsExports.setup({
     },
     "xyflow:setViewportCenter": ({ context: context2 }, params) => {
       const { x: x2, y: y2 } = params;
-      invariant$2(context2.xyflow, "xyflow is not initialized");
+      invariant$3(context2.xyflow, "xyflow is not initialized");
       const zoom2 = context2.xyflow.getZoom();
       context2.xyflow.setCenter(Math.round(x2), Math.round(y2), { zoom: zoom2 });
     },
@@ -52574,16 +52704,16 @@ const _diagramMachine = xstate_cjsExports.setup({
       });
     }),
     onNodeMouseEnter: xstate_cjsExports.assign(({ context: context2 }, params) => ({
-      xynodes: context2.xynodes.map((n2) => n2.id === params.node.id ? setHovered(n2, !0) : n2)
+      xynodes: context2.xynodes.map((n2) => n2.id === params.node.id ? Base.setHovered(n2, !0) : n2)
     })),
     onNodeMouseLeave: xstate_cjsExports.assign(({ context: context2 }, params) => ({
-      xynodes: context2.xynodes.map((n2) => n2.id === params.node.id ? setHovered(n2, !1) : n2)
+      xynodes: context2.xynodes.map((n2) => n2.id === params.node.id ? Base.setHovered(n2, !1) : n2)
     })),
     onEdgeMouseEnter: xstate_cjsExports.enqueueActions(({ enqueue, context: context2, event }) => {
       xstate_cjsExports.assertEvent(event, "xyflow.edgeMouseEnter");
       let edge = event.edge;
       enqueue.assign({
-        xyedges: context2.xyedges.map((e2) => e2.id === event.edge.id ? (edge = setHovered(e2, !0), edge) : e2)
+        xyedges: context2.xyedges.map((e2) => e2.id === event.edge.id ? (edge = Base.setHovered(e2, !0), edge) : e2)
       }), enqueue.emit({
         type: "edgeMouseEnter",
         edge,
@@ -52594,7 +52724,7 @@ const _diagramMachine = xstate_cjsExports.setup({
       xstate_cjsExports.assertEvent(event, "xyflow.edgeMouseLeave");
       let edge = event.edge;
       enqueue.assign({
-        xyedges: context2.xyedges.map((e2) => e2.id === event.edge.id ? (edge = setHovered(e2, !1), edge) : e2)
+        xyedges: context2.xyedges.map((e2) => e2.id === event.edge.id ? (edge = Base.setHovered(e2, !1), edge) : e2)
       }), enqueue.emit({
         type: "edgeMouseLeave",
         edge,
@@ -52607,17 +52737,17 @@ const _diagramMachine = xstate_cjsExports.setup({
       return {
         xynodes: context2.xynodes.map((n2) => {
           const node2 = findDiagramNode(context2, n2.id);
-          return node2 && node2.notation === params.notation.title && node2.shape === params.notation.shape && node2.color === params.notation.color && kinds.includes(node2.kind) ? setDimmed(n2, !1) : setDimmed(n2, "immediate");
+          return node2 && node2.notation === params.notation.title && node2.shape === params.notation.shape && node2.color === params.notation.color && kinds.includes(node2.kind) ? Base.setDimmed(n2, !1) : Base.setDimmed(n2, "immediate");
         }),
-        xyedges: context2.xyedges.map(setDimmed("immediate"))
+        xyedges: context2.xyedges.map(Base.setDimmed("immediate"))
       };
     }),
     "tag.highlight": xstate_cjsExports.assign(({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "tag.highlight"), {
-      xynodes: context2.xynodes.map((n2) => n2.data.tags?.includes(event.tag) ? setDimmed(n2, !1) : setDimmed(n2, !0))
+      xynodes: context2.xynodes.map((n2) => n2.data.tags?.includes(event.tag) ? Base.setDimmed(n2, !1) : Base.setDimmed(n2, !0))
     })),
     "undim everything": xstate_cjsExports.assign(({ context: context2 }) => ({
-      xynodes: context2.xynodes.map(setDimmed(!1)),
-      xyedges: context2.xyedges.map(setData({
+      xynodes: context2.xynodes.map(Base.setDimmed(!1)),
+      xyedges: context2.xyedges.map(Base.setData({
         dimmed: !1,
         active: !1
       }))
@@ -52625,14 +52755,14 @@ const _diagramMachine = xstate_cjsExports.setup({
     "update active walkthrough": xstate_cjsExports.assign(updateActiveWalkthrough),
     "emit: walkthroughStarted": xstate_cjsExports.emit(({ context: context2 }) => {
       const edge = context2.xyedges.find((x2) => x2.id === context2.activeWalkthrough?.stepId);
-      return invariant$2(edge, "Invalid walkthrough state"), {
+      return invariant$3(edge, "Invalid walkthrough state"), {
         type: "walkthroughStarted",
         edge
       };
     }),
     "emit: walkthroughStep": xstate_cjsExports.emit(({ context: context2 }) => {
       const edge = context2.xyedges.find((x2) => x2.id === context2.activeWalkthrough?.stepId);
-      return invariant$2(edge, "Invalid walkthrough state"), {
+      return invariant$3(edge, "Invalid walkthrough state"), {
         type: "walkthroughStep",
         edge
       };
@@ -53150,8 +53280,8 @@ const _diagramMachine = xstate_cjsExports.setup({
     },
     "xyflow.viewportMoved": {
       actions: xstate_cjsExports.assign({
-        viewportChangedManually: ({ event }) => event.manually,
-        viewport: ({ event }) => event.viewport
+        viewportChangedManually: (({ event }) => event.manually),
+        viewport: (({ event }) => event.viewport)
       })
     },
     "xyflow.edgeEditingStarted": {
@@ -53256,9 +53386,9 @@ function DiagramActorProvider({
     actors: {
       syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
         actions: {
-          "trigger:OnChange": (_, params) => {
+          "trigger:OnChange": ((_, params) => {
             handlersRef.current.onChange?.(params);
-          }
+          })
         }
       })
     }
@@ -53383,7 +53513,7 @@ function LikeC4Diagram({
   renderNodes,
   children: children2
 }) {
-  const initialRef = useRef(null);
+  const id2 = useId$2().replace("mantine-", "likec4-"), initialRef = useRef(null);
   initialRef.current == null && (initialRef.current = {
     defaultEdges: [],
     defaultNodes: [],
@@ -53433,8 +53563,8 @@ function LikeC4Diagram({
                 onBurgerMenuClick
               },
               children: /* @__PURE__ */ jsxs(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: [
-                /* @__PURE__ */ jsx(LikeC4Styles, {}),
-                /* @__PURE__ */ jsx(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(LikeC4Styles, { id: id2 }),
+                /* @__PURE__ */ jsx(RootContainer, { id: id2, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,
@@ -53759,12 +53889,15 @@ function RouteComponent$1() {
   ) });
 }
 function ViewCard({ view }) {
-  const [visible2, setVisible] = useState(!1);
-  return useTimeoutEffect(() => {
-    setVisible(!0);
-  }, 100), /* @__PURE__ */ jsxs(
+  const [visible2, setVisible] = useState(!1), { ref, inViewport } = useInViewport();
+  return useEffect(() => {
+    if (!inViewport || visible2) return;
+    const tm = setTimeout(() => setVisible(!0), o$8(30, 80));
+    return () => clearTimeout(tm);
+  }, [inViewport]), /* @__PURE__ */ jsxs(
     Card,
     {
+      ref,
       shadow: "xs",
       padding: "lg",
       radius: "sm",
@@ -53974,7 +54107,7 @@ function buildDiagramTreeData(views, groupBy) {
         relativePath = "";
         break;
       default:
-        nonexhaustive(groupBy);
+        nonexhaustive$1(groupBy);
     }
     const parent = findParent(relativePath);
     parent.children.push({
@@ -54653,7 +54786,7 @@ function treeFromElements(elements) {
   ), acc), new DefaultMap(() => []));
   return {
     sorted,
-    byId: (id2) => nonNullable(map2.get(id2), `Element not found by id: ${id2}`),
+    byId: (id2) => nonNullable$1(map2.get(id2), `Element not found by id: ${id2}`),
     root: root2,
     parent: (el) => parents.get(el),
     children: (el) => children2.get(el)
@@ -55307,9 +55440,9 @@ const Panel = forwardRef((props2, ref) => createElement(PanelWithForwardedRef, {
 PanelWithForwardedRef.displayName = "Panel";
 Panel.displayName = "forwardRef(Panel)";
 let currentCursorStyle = null, prevRuleIndex = -1, styleElement = null;
-function getCursorStyle(state, constraintFlags) {
+function getCursorStyle(state, constraintFlags, isPointerDown2) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0, horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0, verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0, verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
   if (constraintFlags) {
-    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0, horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0, verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0, verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
     if (horizontalMin)
       return verticalMin ? "se-resize" : verticalMax ? "ne-resize" : "e-resize";
     if (horizontalMax)
@@ -55331,7 +55464,7 @@ function getCursorStyle(state, constraintFlags) {
 function resetGlobalCursorStyle() {
   styleElement !== null && (document.head.removeChild(styleElement), currentCursorStyle = null, styleElement = null, prevRuleIndex = -1);
 }
-function setGlobalCursorStyle(state, constraintFlags) {
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown2) {
   var _styleElement$sheet$i, _styleElement$sheet2;
   const style2 = getCursorStyle(state, constraintFlags);
   if (currentCursorStyle !== style2) {
@@ -55470,7 +55603,7 @@ function handlePointerDown(event) {
     target,
     x: x2,
     y: y2
-  }), updateListeners(), intersectingHandles.length > 0 && (updateResizeHandlerStates("down", event), event.preventDefault(), isWithinResizeHandle(target) || event.stopImmediatePropagation());
+  }), updateListeners(), intersectingHandles.length > 0 && (updateResizeHandlerStates("down", event), updateCursor(), event.preventDefault(), isWithinResizeHandle(target) || event.stopImmediatePropagation());
 }
 function handlePointerMove(event) {
   const {
@@ -55719,7 +55852,7 @@ function adjustLayoutByDelta({
         panelIndex: index2,
         size: unsafeSize
       });
-      if (!fuzzyNumbersEqual(prevSize, safeSize) && (deltaApplied += prevSize - safeSize, nextLayout[index2] = safeSize, deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), void 0, {
+      if (!fuzzyNumbersEqual(prevSize, safeSize) && (deltaApplied += prevSize - safeSize, nextLayout[index2] = safeSize, deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
@@ -56024,7 +56157,7 @@ function computePanelFlexBoxStyle({
 }) {
   const size2 = layout2[panelIndex];
   let flexGrow;
-  return size2 == null ? flexGrow = defaultSize2 != null ? defaultSize2.toPrecision(precision) : "1" : panelData.length === 1 ? flexGrow = "1" : flexGrow = size2.toPrecision(precision), {
+  return size2 == null ? flexGrow = defaultSize2 != null ? defaultSize2.toFixed(precision) : "1" : panelData.length === 1 ? flexGrow = "1" : flexGrow = size2.toFixed(precision), {
     flexBasis: 0,
     flexGrow,
     flexShrink: 1,