@likec4/diagram 1.55.1 → 1.57.0

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -1,551 +1,520 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { autoUpdate, computePosition, offset, autoPlacement, size, hide } from '@floating-ui/dom';
-import { nameFromFqn } from '@likec4/core';
-import { cx, css } from '@likec4/styles/css';
-import { VStack, HStack, Box, styled } from '@likec4/styles/jsx';
-import { bleed } from '@likec4/styles/patterns';
-import { Divider, ScrollAreaAutosize, Button, TooltipGroup, ActionIcon, Text, Tooltip as Tooltip$1 } from '@mantine/core';
-import { useActorRef, useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import { memo, useEffect, useCallback, useRef, useState, useLayoutEffect, Fragment, forwardRef } from 'react';
-import { isEmpty, pipe, map, filter, isTruthy, partition, clamp, entries } from 'remeda';
-import { Link } from '../../components/Link.js';
-import { PortalToContainer } from '../../components/PortalToContainer.js';
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
-import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-import { useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
-import { RelationshipPopoverActorLogic } from './actor.js';
-import { Endpoint, RelationshipTitle } from './components.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useRootContainerRef } from '../../context/RootContainerContext.js';
-import { roundDpr } from '../../utils/roundDpr.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import { Markdown } from '../../base-primitives/Markdown.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { roundDpr } from "../../utils/roundDpr.js";
+import { useRootContainerRef } from "../../context/RootContainerContext.js";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext, useOnDiagramEvent } from "../../hooks/useDiagram.js";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { findDiagramEdge, findDiagramNode } from "../state/utils.js";
+import { Markdown } from "../../base-primitives/Markdown.js";
+import { Link } from "../../components/Link.js";
+import { PortalToContainer } from "../../components/PortalToContainer.js";
+import { RelationshipPopoverActorLogic } from "./actor.js";
+import { Endpoint, RelationshipTitle } from "./components.js";
+import { css, cx } from "@likec4/styles/css";
+import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from "@tabler/icons-react";
+import { Fragment, forwardRef, memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+import { clamp, entries, filter, isEmpty, isTruthy, map, partition, pipe } from "remeda";
+import { nameFromFqn } from "@likec4/core";
+import { ActionIcon, Button, Divider, ScrollAreaAutosize, Text, Tooltip, TooltipGroup } from "@mantine/core";
+import { useActorRef, useSelector } from "@xstate/react";
+import { Box as Box$1, HStack, VStack, styled } from "@likec4/styles/jsx";
+import { bleed } from "@likec4/styles/patterns";
+import { autoPlacement, autoUpdate, computePosition, hide, offset, size } from "@floating-ui/dom";
+//#region src/likec4diagram/relationship-popover/RelationshipPopover.tsx
 function selectDiagramContext(c) {
-  let selected = null;
-  for (const edge of c.xyedges) {
-    if (edge.selected) {
-      if (selected) {
-        selected = null;
-        break;
-      }
-      selected = edge.data.id;
-    }
-  }
-  return {
-    viewId: c.view.id,
-    selected
-  };
+	let selected = null;
+	for (const edge of c.xyedges) if (edge.selected) {
+		if (selected) {
+			selected = null;
+			break;
+		}
+		selected = edge.data.id;
+	}
+	return {
+		viewId: c.view.id,
+		selected
+	};
 }
-const RelationshipPopover = memo(() => {
-  const likec4model = useLikeC4Model();
-  const actorRef = useActorRef(RelationshipPopoverActorLogic);
-  const diagram = useDiagram();
-  const { viewId, selected } = useDiagramContext(selectDiagramContext);
-  const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
-  useOnDiagramEvent("navigateTo", () => {
-    actorRef.send({ type: "close" });
-  });
-  useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
-    actorRef.send({ type: "xyedge.mouseEnter", edgeId: edge.data.id });
-  });
-  useOnDiagramEvent("edgeMouseLeave", () => {
-    actorRef.send({ type: "xyedge.mouseLeave" });
-  });
-  useOnDiagramEvent("walkthroughStarted", () => {
-    actorRef.send({ type: "close" });
-  });
-  useEffect(() => {
-    if (selected) {
-      actorRef.send({ type: "xyedge.select", edgeId: selected });
-    } else {
-      actorRef.send({ type: "xyedge.unselect" });
-    }
-  }, [selected]);
-  const onMouseEnter = useCallback((event) => {
-    if (!openedEdgeId) {
-      return;
-    }
-    actorRef.send({ type: "dropdown.mouseEnter" });
-    const edge = diagram.findEdge(openedEdgeId);
-    if (edge && !edge.data.hovered) {
-      diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
-    }
-  }, [actorRef, diagram, openedEdgeId]);
-  const onMouseLeave = useCallback((event) => {
-    if (!openedEdgeId) {
-      return;
-    }
-    actorRef.send({ type: "dropdown.mouseLeave" });
-    const edge = diagram.findEdge(openedEdgeId);
-    if (edge?.data.hovered) {
-      diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
-    }
-  }, [actorRef, diagram, openedEdgeId]);
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
-    (ctx) => {
-      const diagramEdge2 = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
-      const sourceNode2 = diagramEdge2 ? findDiagramNode(ctx, diagramEdge2.source) : null;
-      const targetNode2 = diagramEdge2 ? findDiagramNode(ctx, diagramEdge2.target) : null;
-      return {
-        diagramEdge: diagramEdge2,
-        sourceNode: sourceNode2,
-        targetNode: targetNode2
-      };
-    },
-    shallowEqual,
-    [openedEdgeId]
-  );
-  if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) {
-    return null;
-  }
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map((id) => {
-      try {
-        return likec4model.relationship(id);
-      } catch (e) {
-        console.error(
-          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
-          e
-        );
-        return null;
-      }
-    }),
-    filter(isTruthy),
-    partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id)
-  );
-  if (direct.length === 0 && nested.length === 0) {
-    console.warn("No relationships found  diagram edge", {
-      diagramEdge,
-      sourceNode,
-      targetNode
-    });
-    return null;
-  }
-  return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(
-    RelationshipPopoverInternal,
-    {
-      viewId,
-      direct,
-      nested,
-      diagramEdge,
-      sourceNode,
-      targetNode,
-      onMouseEnter,
-      onMouseLeave
-    }
-  ) });
+var RelationshipPopover = memo(() => {
+	const likec4model = useLikeC4Model();
+	const actorRef = useActorRef(RelationshipPopoverActorLogic);
+	const diagram = useDiagram();
+	const { viewId, selected } = useDiagramContext(selectDiagramContext);
+	const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
+	useOnDiagramEvent("navigateTo", () => {
+		actorRef.send({ type: "close" });
+	});
+	useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
+		actorRef.send({
+			type: "xyedge.mouseEnter",
+			edgeId: edge.data.id
+		});
+	});
+	useOnDiagramEvent("edgeMouseLeave", () => {
+		actorRef.send({ type: "xyedge.mouseLeave" });
+	});
+	useOnDiagramEvent("walkthroughStarted", () => {
+		actorRef.send({ type: "close" });
+	});
+	useEffect(() => {
+		if (selected) actorRef.send({
+			type: "xyedge.select",
+			edgeId: selected
+		});
+		else actorRef.send({ type: "xyedge.unselect" });
+	}, [selected]);
+	const onMouseEnter = useCallback((event) => {
+		if (!openedEdgeId) return;
+		actorRef.send({ type: "dropdown.mouseEnter" });
+		const edge = diagram.findEdge(openedEdgeId);
+		if (edge && !edge.data.hovered) diagram.send({
+			type: "xyflow.edgeMouseEnter",
+			edge,
+			event
+		});
+	}, [
+		actorRef,
+		diagram,
+		openedEdgeId
+	]);
+	const onMouseLeave = useCallback((event) => {
+		if (!openedEdgeId) return;
+		actorRef.send({ type: "dropdown.mouseLeave" });
+		const edge = diagram.findEdge(openedEdgeId);
+		if (edge?.data.hovered) diagram.send({
+			type: "xyflow.edgeMouseLeave",
+			edge,
+			event
+		});
+	}, [
+		actorRef,
+		diagram,
+		openedEdgeId
+	]);
+	const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => {
+		const diagramEdge = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
+		return {
+			diagramEdge,
+			sourceNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.source) : null,
+			targetNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.target) : null
+		};
+	}, shallowEqual, [openedEdgeId]);
+	if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) return null;
+	const [direct, nested] = pipe(diagramEdge.relations, map((id) => {
+		try {
+			return likec4model.relationship(id);
+		} catch (e) {
+			console.error(`View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`, e);
+			return null;
+		}
+	}), filter(isTruthy), partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id));
+	if (direct.length === 0 && nested.length === 0) {
+		console.warn("No relationships found  diagram edge", {
+			diagramEdge,
+			sourceNode,
+			targetNode
+		});
+		return null;
+	}
+	return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(RelationshipPopoverInternal, {
+		viewId,
+		direct,
+		nested,
+		diagramEdge,
+		sourceNode,
+		targetNode,
+		onMouseEnter,
+		onMouseLeave
+	}) });
 });
-const getEdgeLabelElement = (edgeId, container) => {
-  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
+var getEdgeLabelElement = (edgeId, container) => {
+	return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
 };
-const POPOVER_PADDING = 8;
-const RelationshipPopoverInternal = ({
-  viewId,
-  diagramEdge,
-  direct,
-  nested,
-  sourceNode,
-  targetNode,
-  onMouseEnter,
-  onMouseLeave
-}) => {
-  const ref = useRef(null);
-  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
-  const { onOpenSource } = useDiagramEventHandlers();
-  const containerRef = useRootContainerRef();
-  const [referenceEl, setReferenceEl] = useState(null);
-  useLayoutEffect(() => {
-    setReferenceEl(getEdgeLabelElement(diagramEdge.id, containerRef.current));
-  }, [diagramEdge]);
-  useEffect(() => {
-    const reference = referenceEl;
-    const popper = ref.current;
-    if (!reference || !popper) {
-      return;
-    }
-    let wasCanceled = false;
-    const update = () => {
-      void computePosition(reference, popper, {
-        placement: "bottom-start",
-        middleware: [
-          offset(4),
-          autoPlacement({
-            crossAxis: true,
-            // padding: POPOVER_PADDING,
-            allowedPlacements: [
-              "bottom-start",
-              "bottom-end",
-              "left-start",
-              "top-start",
-              "top-end",
-              "right-start",
-              "right-end",
-              "left-end"
-            ]
-          }),
-          size({
-            apply({ availableHeight, availableWidth, elements }) {
-              if (wasCanceled) {
-                return;
-              }
-              Object.assign(elements.floating.style, {
-                maxWidth: `${clamp(roundDpr(availableWidth), { min: 220, max: 400 })}px`,
-                maxHeight: `${clamp(roundDpr(availableHeight), { min: 100, max: 500 })}px`
-              });
-            }
-          }),
-          hide({
-            padding: POPOVER_PADDING * 2
-          })
-        ]
-      }).then(({ x, y, middlewareData }) => {
-        if (wasCanceled) {
-          return;
-        }
-        popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`;
-        popper.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
-      });
-    };
-    const cleanup = autoUpdate(reference, popper, update, {
-      ancestorResize: false,
-      animationFrame: true
-    });
-    return () => {
-      wasCanceled = true;
-      cleanup();
-    };
-  }, [referenceEl]);
-  const diagram = useDiagram();
-  const renderRelationship = useCallback(
-    (relationship, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(
-        Relationship,
-        {
-          viewId,
-          relationship,
-          sourceNode,
-          targetNode,
-          onNavigateTo: enableNavigateTo ? (viewId2) => {
-            diagram.navigateTo(viewId2);
-          } : void 0,
-          ...onOpenSource && enableVscode && {
-            onOpenSource: () => onOpenSource({ relation: relationship.id })
-          }
-        }
-      )
-    ] }, relationship.id),
-    [viewId, sourceNode, targetNode, diagram, enableNavigateTo, onOpenSource, enableVscode]
-  );
-  return /* @__PURE__ */ jsx(
-    ScrollAreaAutosize,
-    {
-      ref,
-      onMouseEnter,
-      onMouseLeave,
-      type: "auto",
-      scrollbars: "y",
-      scrollbarSize: 6,
-      styles: {
-        viewport: {
-          overscrollBehavior: "contain",
-          minWidth: 200,
-          minHeight: 40
-        }
-      },
-      className: cx(
-        css({
-          layerStyle: "likec4.dropdown",
-          p: "0",
-          pointerEvents: {
-            base: "all",
-            _whenPanning: "none"
-          },
-          position: "absolute",
-          top: "0",
-          left: "0",
-          width: "max-content",
-          cursor: "default"
-        })
-      ),
-      children: /* @__PURE__ */ jsxs(
-        VStack,
-        {
-          css: {
-            gap: "3",
-            padding: "4",
-            paddingTop: "2"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "default",
-                color: "gray",
-                size: "compact-xs",
-                style: {
-                  alignSelf: "flex-start",
-                  fontWeight: "medium",
-                  ["--button-fz"]: "var(--font-sizes-xxs)"
-                },
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.openRelationshipDetails(diagramEdge.id);
-                },
-                children: "browse relationships"
-              }
-            ),
-            direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }),
-              direct.map(renderRelationship)
-            ] }),
-            nested.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(
-                Label,
-                {
-                  css: {
-                    mt: direct.length > 0 ? "2" : "0"
-                  },
-                  children: "RESOLVED FROM NESTED"
-                }
-              ),
-              nested.map(renderRelationship)
-            ] })
-          ]
-        }
-      )
-    }
-  );
+var POPOVER_PADDING = 8;
+var RelationshipPopoverInternal = ({ viewId, diagramEdge, direct, nested, sourceNode, targetNode, onMouseEnter, onMouseLeave }) => {
+	const ref = useRef(null);
+	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
+	const { onOpenSource } = useDiagramEventHandlers();
+	const containerRef = useRootContainerRef();
+	const [referenceEl, setReferenceEl] = useState(null);
+	useLayoutEffect(() => {
+		setReferenceEl(getEdgeLabelElement(diagramEdge.id, containerRef.current));
+	}, [diagramEdge]);
+	useEffect(() => {
+		const reference = referenceEl;
+		const popper = ref.current;
+		if (!reference || !popper) return;
+		let wasCanceled = false;
+		const update = () => {
+			computePosition(reference, popper, {
+				placement: "bottom-start",
+				middleware: [
+					offset(4),
+					autoPlacement({
+						crossAxis: true,
+						allowedPlacements: [
+							"bottom-start",
+							"bottom-end",
+							"left-start",
+							"top-start",
+							"top-end",
+							"right-start",
+							"right-end",
+							"left-end"
+						]
+					}),
+					size({ apply({ availableHeight, availableWidth, elements }) {
+						if (wasCanceled) return;
+						Object.assign(elements.floating.style, {
+							maxWidth: `${clamp(roundDpr(availableWidth), {
+								min: 220,
+								max: 400
+							})}px`,
+							maxHeight: `${clamp(roundDpr(availableHeight), {
+								min: 100,
+								max: 500
+							})}px`
+						});
+					} }),
+					hide({ padding: POPOVER_PADDING * 2 })
+				]
+			}).then(({ x, y, middlewareData }) => {
+				if (wasCanceled) return;
+				popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`;
+				popper.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
+			});
+		};
+		const cleanup = autoUpdate(reference, popper, update, {
+			ancestorResize: false,
+			animationFrame: true
+		});
+		return () => {
+			wasCanceled = true;
+			cleanup();
+		};
+	}, [referenceEl]);
+	const diagram = useDiagram();
+	const renderRelationship = useCallback((relationship, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Relationship, {
+		viewId,
+		relationship,
+		sourceNode,
+		targetNode,
+		onNavigateTo: enableNavigateTo ? (viewId) => {
+			diagram.navigateTo(viewId);
+		} : void 0,
+		...onOpenSource && enableVscode && { onOpenSource: () => onOpenSource({ relation: relationship.id }) }
+	})] }, relationship.id), [
+		viewId,
+		sourceNode,
+		targetNode,
+		diagram,
+		enableNavigateTo,
+		onOpenSource,
+		enableVscode
+	]);
+	return /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+		ref,
+		onMouseEnter,
+		onMouseLeave,
+		type: "auto",
+		scrollbars: "y",
+		scrollbarSize: 6,
+		styles: { viewport: {
+			overscrollBehavior: "contain",
+			minWidth: 200,
+			minHeight: 40
+		} },
+		className: cx(css({
+			layerStyle: "likec4.dropdown",
+			p: "0",
+			pointerEvents: {
+				base: "all",
+				_whenPanning: "none"
+			},
+			position: "absolute",
+			top: "0",
+			left: "0",
+			width: "max-content",
+			cursor: "default"
+		})),
+		children: /* @__PURE__ */ jsxs(VStack, {
+			css: {
+				gap: "3",
+				padding: "4",
+				paddingTop: "2"
+			},
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					color: "gray",
+					size: "compact-xs",
+					style: {
+						alignSelf: "flex-start",
+						fontWeight: "medium",
+						["--button-fz"]: "var(--font-sizes-xxs)"
+					},
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.openRelationshipDetails(diagramEdge.id);
+					},
+					children: "browse relationships"
+				}),
+				direct.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }), direct.map(renderRelationship)] }),
+				nested.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, {
+					css: { mt: direct.length > 0 ? "2" : "0" },
+					children: "RESOLVED FROM NESTED"
+				}), nested.map(renderRelationship)] })
+			]
+		})
+	});
 };
-const Relationship = forwardRef(({
-  viewId,
-  relationship: r,
-  sourceNode,
-  targetNode,
-  onNavigateTo,
-  onOpenSource
-}, ref) => {
-  const sourceId = getEndpointId(r, "source", sourceNode);
-  const targetId = getEndpointId(r, "target", targetNode);
-  const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
-  const links = r.links;
-  const metadataEntries = r.hasMetadata() ? entries(r.getMetadata()).sort(([a], [b]) => a.localeCompare(b)) : null;
-  const metadataTooltipLabel = metadataEntries && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          fontWeight: "bold",
-          fontSize: "10px",
-          color: "#868e96",
-          marginBottom: "2px",
-          letterSpacing: "0.5px",
-          textTransform: "uppercase"
-        },
-        children: "Metadata"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          borderTop: "1px solid rgba(0, 0, 0, 0.1)",
-          paddingTop: "6px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "6px"
-        },
-        children: metadataEntries.map(([key, value]) => {
-          const displayValue = Array.isArray(value) ? value.join(", ") : value;
-          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", fontSize: "12px", lineHeight: "1.4" }, children: [
-            /* @__PURE__ */ jsxs(
-              "span",
-              {
-                style: {
-                  fontWeight: "bold",
-                  minWidth: "110px",
-                  color: "#495057"
-                },
-                children: [
-                  key,
-                  ":"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  color: "#212529",
-                  wordBreak: "break-word",
-                  flex: 1
-                },
-                children: displayValue
-              }
-            )
-          ] }, key);
-        })
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsxs(
-    VStack,
-    {
-      ref,
-      className: bleed({
-        block: "2",
-        inline: "2",
-        paddingY: "2.5",
-        paddingX: "2",
-        gap: "1",
-        rounded: "sm",
-        backgroundColor: {
-          _hover: {
-            base: "mantine.colors.gray[1]",
-            _dark: "mantine.colors.dark[5]/70"
-          }
-        }
-      }),
-      children: [
-        /* @__PURE__ */ jsx(HStack, { gap: "0.5", children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 200, children: [
-          /* @__PURE__ */ jsx(Tooltip, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Endpoint, { likec4color: sourceNode.color, children: sourceId.short }) }),
-          /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-          /* @__PURE__ */ jsx(Tooltip, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Endpoint, { likec4color: targetNode.color, children: targetId.short }) }),
-          navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              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, { label: "Open source", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              size: "sm",
-              radius: "sm",
-              variant: "default",
-              onClick: (event) => {
-                event.stopPropagation();
-                onOpenSource();
-              },
-              role: "button",
-              children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
-            }
-          ) })
-        ] }) }),
-        /* @__PURE__ */ jsxs(HStack, { gap: "xs", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(RelationshipTitle, { children: r.title || "untitled" }),
-          metadataTooltipLabel && /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              label: metadataTooltipLabel,
-              w: 350,
-              position: "right",
-              offset: 10,
-              openDelay: 300,
-              withArrow: true,
-              bg: "white",
-              c: "dark",
-              withinPortal: true,
-              styles: {
-                tooltip: {
-                  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-                  border: "1px solid #dee2e6"
-                }
-              },
-              children: /* @__PURE__ */ jsx(Box, { display: "inline-flex", children: /* @__PURE__ */ jsx(
-                IconInfoCircle,
-                {
-                  size: 14,
-                  opacity: 0.5,
-                  style: { flexShrink: 0, cursor: "help" }
-                }
-              ) })
-            }
-          )
-        ] }),
-        r.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "kind" }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all", wordBreak: "break-word", minWidth: 0 }), children: r.kind })
-        ] }),
-        r.technology && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "technology" }),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "xs",
-              className: css({ userSelect: "all", wordBreak: "break-word", minWidth: 0 }),
-              children: r.technology
-            }
-          )
-        ] }),
-        r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx(Label, { children: "description" }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              css: {
-                paddingLeft: "2.5",
-                py: "1.5",
-                borderLeft: "2px dotted",
-                borderLeftColor: {
-                  base: "mantine.colors.gray[3]",
-                  _dark: "mantine.colors.dark[4]"
-                }
-              },
-              children: /* @__PURE__ */ jsx(Markdown, { value: r.summary, fontSize: "sm", textScale: 0.875 })
-            }
-          )
-        ] }),
-        links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx(Label, { children: "links" }),
-          /* @__PURE__ */ jsx(HStack, { gap: "1", flexWrap: "wrap", children: links.map((link) => /* @__PURE__ */ jsx(Link, { size: "sm", value: link }, link.url)) })
-        ] })
-      ]
-    }
-  );
+var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode, onNavigateTo, onOpenSource }, ref) => {
+	const sourceId = getEndpointId(r, "source", sourceNode);
+	const targetId = getEndpointId(r, "target", targetNode);
+	const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
+	const links = r.links;
+	const metadataEntries = r.hasMetadata() ? entries(r.getMetadata()).sort(([a], [b]) => a.localeCompare(b)) : null;
+	const metadataTooltipLabel = metadataEntries && /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "6px"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontWeight: "bold",
+				fontSize: "10px",
+				color: "#868e96",
+				marginBottom: "2px",
+				letterSpacing: "0.5px",
+				textTransform: "uppercase"
+			},
+			children: "Metadata"
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				borderTop: "1px solid rgba(0, 0, 0, 0.1)",
+				paddingTop: "6px",
+				display: "flex",
+				flexDirection: "column",
+				gap: "6px"
+			},
+			children: metadataEntries.map(([key, value]) => {
+				const displayValue = Array.isArray(value) ? value.join(", ") : value;
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: "12px",
+						fontSize: "12px",
+						lineHeight: "1.4"
+					},
+					children: [/* @__PURE__ */ jsxs("span", {
+						style: {
+							fontWeight: "bold",
+							minWidth: "110px",
+							color: "#495057"
+						},
+						children: [key, ":"]
+					}), /* @__PURE__ */ jsx("span", {
+						style: {
+							color: "#212529",
+							wordBreak: "break-word",
+							flex: 1
+						},
+						children: displayValue
+					})]
+				}, key);
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(VStack, {
+		ref,
+		className: bleed({
+			block: "2",
+			inline: "2",
+			paddingY: "2.5",
+			paddingX: "2",
+			gap: "1",
+			rounded: "sm",
+			backgroundColor: { _hover: {
+				base: "mantine.colors.gray[1]",
+				_dark: "mantine.colors.dark[5]/70"
+			} }
+		}),
+		children: [
+			/* @__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(Endpoint, {
+								likec4color: sourceNode.color,
+								children: sourceId.short
+							})
+						}),
+						/* @__PURE__ */ jsx(IconArrowRight, {
+							stroke: 2.5,
+							size: "11px",
+							opacity: .65
+						}),
+						/* @__PURE__ */ jsx(Tooltip$1, {
+							label: targetId.full,
+							offset: 2,
+							position: "top-start",
+							children: /* @__PURE__ */ jsx(Endpoint, {
+								likec4color: targetNode.color,
+								children: targetId.short
+							})
+						}),
+						navigateTo && /* @__PURE__ */ jsx(Tooltip$1, {
+							label: "Open dynamic view",
+							children: /* @__PURE__ */ jsx(ActionIcon, {
+								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, {
+								size: "sm",
+								radius: "sm",
+								variant: "default",
+								onClick: (event) => {
+									event.stopPropagation();
+									onOpenSource();
+								},
+								role: "button",
+								children: /* @__PURE__ */ jsx(IconFileSymlink, {
+									size: "80%",
+									stroke: 2
+								})
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs(HStack, {
+				gap: "xs",
+				alignItems: "center",
+				children: [/* @__PURE__ */ jsx(RelationshipTitle, { children: r.title || "untitled" }), metadataTooltipLabel && /* @__PURE__ */ jsx(Tooltip$1, {
+					label: metadataTooltipLabel,
+					w: 350,
+					position: "right",
+					offset: 10,
+					openDelay: 300,
+					withArrow: true,
+					bg: "white",
+					c: "dark",
+					withinPortal: true,
+					styles: { tooltip: {
+						boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+						border: "1px solid #dee2e6"
+					} },
+					children: /* @__PURE__ */ jsx(Box$1, {
+						display: "inline-flex",
+						children: /* @__PURE__ */ jsx(IconInfoCircle, {
+							size: 14,
+							opacity: .5,
+							style: {
+								flexShrink: 0,
+								cursor: "help"
+							}
+						})
+					})
+				})]
+			}),
+			r.kind && /* @__PURE__ */ jsxs(HStack, {
+				gap: "2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "kind" }), /* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					className: css({
+						userSelect: "all",
+						wordBreak: "break-word",
+						minWidth: 0
+					}),
+					children: r.kind
+				})]
+			}),
+			r.technology && /* @__PURE__ */ jsxs(HStack, {
+				gap: "2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "technology" }), /* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					className: css({
+						userSelect: "all",
+						wordBreak: "break-word",
+						minWidth: 0
+					}),
+					children: r.technology
+				})]
+			}),
+			r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "description" }), /* @__PURE__ */ jsx(Box$1, {
+				css: {
+					paddingLeft: "2.5",
+					py: "1.5",
+					borderLeft: "2px dotted",
+					borderLeftColor: {
+						base: "mantine.colors.gray[3]",
+						_dark: "mantine.colors.dark[4]"
+					}
+				},
+				children: /* @__PURE__ */ jsx(Markdown, {
+					value: r.summary,
+					fontSize: "sm",
+					textScale: .875
+				})
+			})] }),
+			links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "links" }), /* @__PURE__ */ jsx(HStack, {
+				gap: "1",
+				flexWrap: "wrap",
+				children: links.map((link) => /* @__PURE__ */ jsx(Link, {
+					size: "sm",
+					value: link
+				}, link.url))
+			})] })
+		]
+	});
 });
-const Label = styled("div", {
-  base: {
-    display: "block",
-    fontSize: "xxs",
-    fontWeight: "medium",
-    userSelect: "none",
-    lineHeight: "sm",
-    color: "text.dimmed"
-  }
-});
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  label: "",
-  children: null,
-  offset: 8,
-  withinPortal: false
+var Label = styled("div", { base: {
+	display: "block",
+	fontSize: "xxs",
+	fontWeight: "medium",
+	userSelect: "none",
+	lineHeight: "sm",
+	color: "text.dimmed"
+} });
+var Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	label: "",
+	children: null,
+	offset: 8,
+	withinPortal: false
 });
 function getEndpointId(r, endpoint, diagramNode) {
-  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
-  const full = r[endpoint].id;
-  const short = nameFromFqn(diagramNodeId) + full.slice(diagramNodeId.length);
-  return { full, short };
+	const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
+	const full = r[endpoint].id;
+	return {
+		full,
+		short: nameFromFqn(diagramNodeId) + full.slice(diagramNodeId.length)
+	};
 }
-
+//#endregion
 export { RelationshipPopover };