@likec4/diagram 1.19.2 → 1.20.1

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,20 +1,22 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { invariant, isScopedElementView, isDeploymentView } from "@likec4/core";
+import { isScopedElementView, isDeploymentView } from "@likec4/core";
 import { Divider as Divider$1, Tooltip as Tooltip$1, Text, RemoveScroll, Card, FocusTrap, FocusTrapInitialFocus, Box, Group, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, UnstyledButton, ThemeIcon, CopyButton, Anchor, Code } from "@mantine/core";
-import { useViewportSize, useSessionStorage } from "@mantine/hooks";
+import { useViewportSize, useSessionStorage, useDebouncedCallback } from "@mantine/hooks";
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2, IconCheck, IconCopy } from "@tabler/icons-react";
-import clsx from "clsx";
+import "clsx";
 import { useDragControls, useMotionValue, m } from "framer-motion";
-import { memo, useCallback, useRef, useEffect } from "react";
-import { pick, pipe, map, partition, find, only, clamp, isNullish } from "remeda";
-import { useOverlayDialog } from "../OverlayContext.js";
-import { propertyLabel, dialog, card, cardHeader, title, tabsRoot, tabsList, tabsTab, tabsPanel, propertiesGrid, resizeHandle, elementIcon, viewButton, viewButtonTitle, elementLink } from "./ElementDetailsCard.css.js";
+import { memo, useCallback, useRef, useLayoutEffect } from "react";
+import { pipe, map, partition, only, clamp, isNullish } from "remeda";
+import { useDiagram } from "../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../hooks/useDiagramContext.js";
+import { propertyLabel, elementIcon, dialog, card, cardHeader, title, tabsRoot, tabsList, tabsTab, tabsPanel, propertiesGrid, resizeHandle, viewButton, viewButtonTitle, elementLink } from "./ElementDetailsCard.css.js";
 import { TabPanelDeployments } from "./TabPanelDeployments.js";
 import { TabPanelRelationships } from "./TabPanelRelationships.js";
 import { TabPanelStructure } from "./TabPanelStructure.js";
-import { useXYFlow, useXYInternalNode } from "../../hooks/useXYFlow.js";
-import { useLikeC4CurrentViewModel } from "../../likec4model/useLikeC4Model.js";
-import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
+import { IconRenderer } from "../../context/IconRenderer.js";
+import { IfEnabled } from "../../context/DiagramFeatures.js";
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -45,35 +47,30 @@ const PropertyLabel = Text.withProps({
 const MIN_PADDING = 24;
 const TABS = ["Properties", "Relationships", "Views", "Structure", "Deployments"];
 const ElementDetailsCard = memo(({ fqn }) => {
-  var _a;
+  var _a, _b, _c;
+  const {
+    viewId,
+    fromNode,
+    rectFromNode
+  } = useDiagramContext((s) => {
+    var _a2, _b2;
+    return {
+      viewId: s.view.id,
+      fromNode: ((_a2 = s.activeElementDetails) == null ? void 0 : _a2.fromNode) ?? null,
+      rectFromNode: ((_b2 = s.activeElementDetails) == null ? void 0 : _b2.nodeRectScreen) ?? null
+    };
+  });
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
-  const xyflow = useXYFlow();
-  const xynode = useXYInternalNode(fqn);
-  invariant(xynode, `XYNode with id ${fqn} not found`);
-  const overlay = useOverlayDialog();
   const [activeTab, setActiveTab] = useSessionStorage({
     key: `likec4:element-details:active-tab`,
     defaultValue: "Properties"
   });
-  const diagramApi = useDiagramStoreApi();
-  const viewModel = useLikeC4CurrentViewModel();
-  const {
-    view: currentView,
-    renderIcon,
-    onOpenSource
-  } = useDiagramState(pick(["view", "renderIcon", "onNavigateTo", "onOpenSource"]));
-  const diagramNode = currentView.nodes.find((n) => n.id === fqn);
-  invariant(diagramNode, `DiagramNode with fqn ${fqn} not found`);
-  const nodeModel = viewModel.findNode(fqn);
-  invariant(nodeModel && nodeModel.hasElement(), `NodeModel with fqn ${fqn} not found`);
-  const elementModel = nodeModel.element;
-  const viewId = viewModel.id;
-  const elementIcon2 = ElementIcon({
-    element: nodeModel.$node,
-    viewId,
-    renderIcon
-  });
+  const diagram = useDiagram();
+  const likec4model = useLikeC4Model(true);
+  const viewModel = likec4model.view(viewId);
+  const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
+  const elementModel = viewModel.$model.element(fqn);
   const [viewsOf, otherViews] = pipe(
     [...elementModel.views()],
     map((v) => v.$view),
@@ -82,33 +79,23 @@ const ElementDetailsCard = memo(({ fqn }) => {
       return isScopedElementView(v) && v.viewOf === fqn;
     })
   );
-  const defaultView = ((_a = nodeModel.navigateTo) == null ? void 0 : _a.$view) ?? find(viewsOf, (v) => v.id !== viewModel.id) ?? null;
-  const defaultLink = only(nodeModel.links);
-  const onNavigateToCb = useCallback((toView, e) => {
-    e == null ? void 0 : e.stopPropagation();
-    const { onNavigateTo } = diagramApi.getState();
-    if (!onNavigateTo) {
-      return;
-    }
-    overlay.close(() => {
-      diagramApi.setState({
-        lastOnNavigate: {
-          fromView: viewModel.id,
-          toView,
-          fromNode: fqn
-        }
-      });
-      onNavigateTo(toView);
-    });
-  }, [fqn, viewModel.id]);
+  let defaultView = ((_a = nodeModel == null ? void 0 : nodeModel.navigateTo) == null ? void 0 : _a.$view) ?? ((_b = elementModel.defaultView) == null ? void 0 : _b.$view) ?? null;
+  if ((defaultView == null ? void 0 : defaultView.id) === viewId) {
+    defaultView = null;
+  }
+  const defaultLink = only(elementModel.links);
   const controls = useDragControls();
-  const isCompound = nodeModel.children.length > 0;
-  const fromPositon = xyflow.flowToScreenPosition({
-    x: xynode.internals.positionAbsolute.x + diagramNode.width / 2,
-    y: xynode.internals.positionAbsolute.y + (isCompound ? 0 : diagramNode.height / 2)
-  });
+  const isCompound = (((_c = nodeModel == null ? void 0 : nodeModel.$node.children) == null ? void 0 : _c.length) ?? 0) > 0;
   const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
   const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
+  const fromPositon = rectFromNode ? {
+    x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
+    y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
+  } : {
+    x: windowWidth / 2,
+    y: windowHeight / 2
+  };
+  const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1;
   const left = Math.round(
     clamp(fromPositon.x - _width / 2, {
       min: MIN_PADDING,
@@ -121,44 +108,76 @@ const ElementDetailsCard = memo(({ fqn }) => {
       max: windowHeight - _height - MIN_PADDING
     })
   );
+  const originX = clamp((fromPositon.x - left) / _width, {
+    min: 0.1,
+    max: 0.9
+  });
+  const originY = clamp((fromPositon.y - top) / _height, {
+    min: 0.1,
+    max: 0.9
+  });
   const width = useMotionValue(_width);
   const height = useMotionValue(_height);
+  useUpdateEffect(() => {
+    width.set(_width);
+    height.set(_height);
+  }, [_width, _height]);
   const handleDrag = useCallback((_, info) => {
     width.set(Math.max(width.get() + info.delta.x, 320));
     height.set(Math.max(height.get() + info.delta.y, 300));
   }, []);
   const ref = useRef(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     var _a2;
     (_a2 = ref.current) == null ? void 0 : _a2.showModal();
   }, []);
+  const diagramApi = useDiagram();
+  const close = useDebouncedCallback(
+    () => {
+      diagramApi.closeOverlay();
+    },
+    50
+  );
+  const notation = (nodeModel == null ? void 0 : nodeModel.$node.notation) ?? null;
+  const elementIcon$1 = IconRenderer({
+    element: {
+      id: fqn,
+      title: elementModel.title,
+      icon: (nodeModel == null ? void 0 : nodeModel.icon) ?? elementModel.icon
+    },
+    className: elementIcon
+  });
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
       className: dialog,
+      layoutRoot: true,
       initial: {
         "--backdrop-blur": "0px",
-        "--backdrop-opacity": "0%"
+        "--backdrop-opacity": "10%"
       },
       animate: {
-        "--backdrop-blur": "1px",
-        "--backdrop-opacity": "50%"
+        "--backdrop-blur": "3px",
+        "--backdrop-opacity": "60%"
       },
       exit: {
         "--backdrop-blur": "0px",
-        "--backdrop-opacity": "0%"
+        "--backdrop-opacity": "0%",
+        transition: {
+          duration: 0.1
+        }
       },
       onClick: (e) => {
-        var _a2, _b;
-        if (((_b = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
+        var _a2, _b2;
+        if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
           e.stopPropagation();
-          overlay.close();
+          close();
         }
       },
       onClose: (e) => {
         e.stopPropagation();
-        overlay.close();
+        close();
       },
       children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
         Card,
@@ -172,33 +191,35 @@ const ElementDetailsCard = memo(({ fqn }) => {
           shadow: "md",
           component: m.div,
           className: card,
-          layoutId: `${viewId}:element:${fqn}`,
+          layoutId: fqn,
           initial: {
             top,
             left,
             width: _width,
             height: _height,
-            opacity: 0
+            opacity: 0,
+            originX,
+            originY,
+            scale: Math.max(fromScale, 0.7)
           },
           animate: {
-            opacity: 1
+            opacity: 1,
+            scale: 1
           },
           exit: {
-            opacity: 0
+            opacity: 0,
+            scale: 0.9,
+            translateY: -10,
+            transition: {
+              duration: 0.1
+            }
           },
           style: {
             // `style` prop in Mantine doesn't accept motion values
             width,
             height
           },
-          onKeyDown: (e) => {
-            if (e.key === "Escape") {
-              e.preventDefault();
-              e.stopPropagation();
-              overlay.close();
-            }
-          },
-          "data-likec4-color": nodeModel.color,
+          "data-likec4-color": (nodeModel == null ? void 0 : nodeModel.color) ?? elementModel.color,
           children: /* @__PURE__ */ jsxs(FocusTrap, { children: [
             /* @__PURE__ */ jsx(FocusTrapInitialFocus, {}),
             /* @__PURE__ */ jsxs(
@@ -209,7 +230,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
                 children: [
                   /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
                     /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
-                      elementIcon2,
+                      elementIcon$1,
                       /* @__PURE__ */ jsxs(Box, { children: [
                         /* @__PURE__ */ jsx(
                           Text,
@@ -221,7 +242,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
                             children: elementModel.title
                           }
                         ),
-                        nodeModel.$node.notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: nodeModel.$node.notation })
+                        notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsx(
@@ -230,7 +251,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
                         size: "lg",
                         onClick: (e) => {
                           e.stopPropagation();
-                          overlay.close();
+                          close();
                         }
                       }
                     )
@@ -269,22 +290,21 @@ const ElementDetailsCard = memo(({ fqn }) => {
                               children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: "65%" } })
                             }
                           ),
-                          onOpenSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
                             ActionIcon,
                             {
                               size: "lg",
                               variant: "default",
                               radius: "sm",
                               onClick: (e) => {
-                                var _a2, _b;
                                 e.stopPropagation();
-                                (_b = (_a2 = diagramApi.getState()).onOpenSource) == null ? void 0 : _b.call(_a2, {
+                                diagram.openSource({
                                   element: elementModel.id
                                 });
                               },
                               children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
                             }
-                          ) }),
+                          ) }) }),
                           defaultView && /* @__PURE__ */ jsx(Tooltip, { label: "Open default view", children: /* @__PURE__ */ jsx(
                             ActionIcon,
                             {
@@ -292,7 +312,8 @@ const ElementDetailsCard = memo(({ fqn }) => {
                               variant: "default",
                               radius: "sm",
                               onClick: (e) => {
-                                onNavigateToCb(defaultView.id, e);
+                                e.stopPropagation();
+                                diagram.navigateTo(defaultView.id, fromNode ?? void 0);
                               },
                               children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
                             }
@@ -327,12 +348,12 @@ const ElementDetailsCard = memo(({ fqn }) => {
                     ] }),
                     elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
                   ] }) }) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Relationships", children: activeTab === "Relationships" && /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(TabsPanel, { value: "Relationships", children: nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
                     TabPanelRelationships,
                     {
                       element: elementModel,
                       node: nodeModel,
-                      currentView
+                      currentView: diagram.currentView()
                     }
                   ) }),
                   /* @__PURE__ */ jsx(TabsPanel, { value: "Views", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
@@ -342,7 +363,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
                         ViewButton,
                         {
                           view,
-                          onNavigateTo: onNavigateToCb
+                          onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
                         },
                         view.id
                       )) })
@@ -353,7 +374,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
                         ViewButton,
                         {
                           view,
-                          onNavigateTo: onNavigateToCb
+                          onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
                         },
                         view.id
                       )) })
@@ -382,32 +403,6 @@ const ElementDetailsCard = memo(({ fqn }) => {
   );
 });
 ElementDetailsCard.displayName = "ElementDetailsCard";
-const ElementIcon = ({ element, viewId, renderIcon: RenderIcon }) => {
-  if (!element.icon || element.icon === "none") {
-    return null;
-  }
-  let icon = null;
-  if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
-    icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
-  } else if (RenderIcon) {
-    icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
-  }
-  if (!icon) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    m.div,
-    {
-      layoutId: `${viewId}:element:icon:${element.id}`,
-      className: clsx(
-        elementIcon,
-        "likec4-element-icon"
-      ),
-      "data-likec4-icon": element.icon,
-      children: icon
-    }
-  );
-};
 const ViewButton = ({
   view,
   onNavigateTo

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from "@mantine/core";
 import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
 import { memo, useMemo, useEffect } from "react";
-import { useLikeC4ElementModel } from "../../likec4model/useLikeC4Model.js";
-import { stopPropagation } from "../../xyflow/utils.js";
+import { useCurrentViewId } from "../../hooks/useCurrentViewId.js";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { treeNode, treeNodeLabel, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
-import { useCurrentViewId, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+import { stopPropagation } from "../../utils/xyflow.js";
 const DeploymentNodeRenderer = ({
   node
 }) => /* @__PURE__ */ jsxs(Group, { className: nodeLabel, gap: 6, align: "baseline", wrap: "nowrap", children: [
@@ -19,7 +19,6 @@ const DeployedInstanceRenderer = ({
   instance
 }) => {
   const currentViewId = useCurrentViewId();
-  const diagramApi = useDiagramStoreApi();
   const views = [...instance.views()];
   return /* @__PURE__ */ jsxs(Group, { className: instanceLabel, gap: 4, children: [
     /* @__PURE__ */ jsx(ThemeIcon, { color: "gray", variant: "transparent", size: "xs", flex: 0, children: /* @__PURE__ */ jsx(IconTarget, { stroke: 1.2 }) }),
@@ -56,9 +55,7 @@ const DeployedInstanceRenderer = ({
                   }
                 },
                 onClick: (e) => {
-                  var _a, _b;
                   e.stopPropagation();
-                  (_b = (_a = diagramApi.getState()).onNavigateTo) == null ? void 0 : _b.call(_a, view.id);
                 },
                 children: view.title
               },
@@ -71,7 +68,7 @@ const DeployedInstanceRenderer = ({
   ] });
 };
 const TabPanelDeployments = memo(({ elementFqn }) => {
-  const element = useLikeC4ElementModel(elementFqn);
+  const element = useLikeC4Model(true).element(elementFqn);
   const deployments = [...element.deployments()];
   const tree = useTree({
     multiple: false

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -2,10 +2,8 @@
 var fqn = "k4m020";
 var relationshipStat = "k4m021";
 var xyflow = "k4m022";
-var panelScope = "k4m023";
 export {
   fqn,
-  panelScope,
   relationshipStat,
   xyflow
 };

package/dist/overlays/element-details/TabPanelRelationships.d.ts

@@ -4,5 +4,5 @@ type RelationshipsTabPanelProps = {
     node: LikeC4Model.Node;
     element: LikeC4Model.Element;
 };
-export declare function TabPanelRelationships({ currentView, node, element }: RelationshipsTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanelRelationships({ currentView, node, element, }: RelationshipsTabPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -1,39 +1,31 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { nameFromFqn } from "@likec4/core";
-import { Stack, Group, Box, ThemeIcon, Text, SegmentedControl, Button, Paper } from "@mantine/core";
+import { Stack, Group, Box, ThemeIcon, Text, Paper } from "@mantine/core";
 import { useId } from "@mantine/hooks";
-import { IconArrowRight, IconInfoCircle, IconExternalLink } from "@tabler/icons-react";
-import { Panel } from "@xyflow/react";
+import { IconArrowRight, IconInfoCircle } from "@tabler/icons-react";
+import { useActorRef } from "@xstate/react";
 import { LayoutGroup } from "framer-motion";
-import { useState } from "react";
+import { useState, memo } from "react";
 import { unique } from "remeda";
-import { useOverlayDialog } from "../OverlayContext.js";
-import { RelationshipsXYFlow } from "../relationships-of/RelationshipsXYFlow.js";
-import { useLayoutedRelationships } from "../relationships-of/use-layouted-relationships.js";
-import { fqn, xyflow, panelScope, relationshipStat } from "./TabPanelRelationships.css.js";
-import { useDiagramState } from "../../hooks/useDiagramState.js";
+import { relationshipsBrowserActor } from "../relationships-browser/actor.js";
+import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.js";
+import { fqn, xyflow, relationshipStat } from "./TabPanelRelationships.css.js";
+import { DiagramFeatures } from "../../context/DiagramFeatures.js";
 function TabPanelRelationships({
   currentView,
   node,
   element
 }) {
   const layoutId = useId();
-  const enableRelationshipBrowser = useDiagramState((s) => s.enableRelationshipBrowser);
-  const overlay = useOverlayDialog();
-  const [scope, setScope] = useState("view");
-  const incoming = element.incoming().map((r) => r.id).toArray();
-  const outgoing = element.outgoing().map((r) => r.id).toArray();
+  useState("view");
+  const incoming = [...element.incoming()].map((r) => r.id);
+  const outgoing = [...element.outgoing()].map((r) => r.id);
   const incomingInView = unique(node.incoming().flatMap((e) => e.$edge.relations).toArray());
   const outgoingInView = unique(node.outgoing().flatMap((e) => e.$edge.relations).toArray());
   const notIncludedRelations = [
     ...incoming,
     ...outgoing
   ].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
-  const {
-    edges,
-    nodes,
-    bounds
-  } = useLayoutedRelationships(element.id, currentView, scope);
   return /* @__PURE__ */ jsxs(Stack, { gap: "xs", pos: "relative", w: "100%", h: "100%", children: [
     incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
       /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, { gap: 8, mb: 4, wrap: "nowrap", children: [
@@ -76,51 +68,7 @@ function TabPanelRelationships({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: xyflow, children: /* @__PURE__ */ jsx(LayoutGroup, { id: layoutId, children: /* @__PURE__ */ jsxs(
-      RelationshipsXYFlow,
-      {
-        subjectId: element.id,
-        bounds,
-        nodes,
-        edges,
-        view: currentView,
-        elementsSelectable: false,
-        children: [
-          /* @__PURE__ */ jsx(Panel, { position: "top-left", className: panelScope, children: /* @__PURE__ */ jsx(
-            SegmentedControl,
-            {
-              size: "xs",
-              withItemsBorders: false,
-              value: scope,
-              onChange: setScope,
-              data: [
-                { label: "Global", value: "global" },
-                { label: "View", value: "view" }
-              ]
-            }
-          ) }),
-          enableRelationshipBrowser && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "compact-sm",
-              variant: "default",
-              fz: "xs",
-              fw: 500,
-              rightSection: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: 16 } }),
-              onClick: (e) => {
-                e.stopPropagation();
-                overlay.close(() => {
-                  overlay.openOverlay({
-                    relationshipsOf: element.id
-                  });
-                });
-              },
-              children: "Open"
-            }
-          ) })
-        ]
-      }
-    ) }) })
+    /* @__PURE__ */ jsx(Box, { className: xyflow, children: /* @__PURE__ */ jsx(LayoutGroup, { id: layoutId, children: /* @__PURE__ */ jsx(EmbeddedRelationshipsBrowser, { subjectId: element.id, currentView }) }) })
   ] });
 }
 function RelationshipsStat({
@@ -152,6 +100,29 @@ function RelationshipsStat({
     }
   );
 }
+const EmbeddedRelationshipsBrowser = memo(
+  ({ subjectId, currentView }) => {
+    const actor = useActorRef(relationshipsBrowserActor, {
+      input: {
+        subject: subjectId,
+        scope: currentView,
+        closeable: false,
+        enableNavigationMenu: false
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      DiagramFeatures,
+      {
+        overrides: {
+          enableRelationshipBrowser: false,
+          enableNavigateTo: false
+        },
+        children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: actor })
+      }
+    );
+  },
+  (prev, next) => prev.subjectId === next.subjectId
+);
 export {
   TabPanelRelationships
 };

package/dist/overlays/element-details/TabPanelStructure.d.ts

@@ -17,9 +17,9 @@ export type TreeNodeData = ElementTreeNodeData | MessageNodeData;
 type TabPanelStructureProps = {
     element: LikeC4Model.Element;
 };
-export declare const ElementLabel: ({ element }: {
+export declare const ElementLabel: ({ element, }: {
     element: LikeC4Model.Element;
     type: "ancestor" | "current" | "descedant";
 }) => import("react/jsx-runtime").JSX.Element;
-export declare function TabPanelStructure({ element }: TabPanelStructureProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanelStructure({ element, }: TabPanelStructureProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/overlays/element-details/TabPanelStructure.js

@@ -38,7 +38,7 @@ function TabPanelStructure({
         messageNode(/* @__PURE__ */ jsx(Pill, { radius: "sm", children: "no nested" }))
       );
     }
-    let ancestor = element.ancestors().reduce((acc, parent) => ({
+    let ancestor = [...element.ancestors()].reduce((acc, parent) => ({
       label: /* @__PURE__ */ jsx(ElementLabel, { type: "ancestor", element: parent }),
       value: parent.id,
       element: parent,

package/dist/overlays/overlay/Overlay.css.d.ts

@@ -0,0 +1,2 @@
+export declare const dialog: string;
+export declare const body: string;