@likec4/diagram 1.22.0 → 1.23.0

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Image/Image.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Indicator/Indicator.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/InlineInput/InlineInput.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Kbd/Kbd.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/List/List.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/LoadingOverlay/LoadingOverlay.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Mark/Mark.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Menu/Menu.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Modal/Modal.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/NavLink/NavLink.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Notification/Notification.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/NumberInput/NumberInput.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Pagination/Pagination.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/PasswordInput/PasswordInput.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Pill/Pill.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/PillsInput/PillsInput.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/PinInput/PinInput.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Progress/Progress.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Radio/Radio.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Radio/RadioCard/RadioCard.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Radio/RadioIndicator/RadioIndicator.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Rating/Rating.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/RingProgress/RingProgress.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/SegmentedControl/SegmentedControl.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/SemiCircleProgress/SemiCircleProgress.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/SimpleGrid/SimpleGrid.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Skeleton/Skeleton.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Slider/Slider.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Spoiler/Spoiler.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Stack/Stack.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/TableOfContents/TableOfContents.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Text/Text.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/node_modules/.pnpm/@mantine_core@7.17.0_@mantine_hooks@7.17.0_react@19.0.0__@types_react@19.0.8_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js

@@ -0,0 +1 @@
+

package/dist/overlays/Overlays.d.ts

@@ -1,2 +1,5 @@
+import { OverlaysActorRef } from './overlaysActor';
 import { MemoExoticComponent } from 'react';
-export declare const Overlays: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const Overlays: MemoExoticComponent<({ overlaysActorRef }: {
+    overlaysActorRef: OverlaysActorRef;
+}) => import("react/jsx-runtime").JSX.Element>;

package/dist/overlays/Overlays.js

@@ -1,15 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Notification, Code, Group, Button } from "@mantine/core";
-import { useCallbackRef } from "@mantine/hooks";
+import { nonexhaustive } from "@likec4/core";
+import { Box, Notification, ScrollAreaAutosize, Code, Group, Button } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
-import { deepEqual } from "fast-equals";
+import { useSelector } from "@xstate/react";
 import { useReducedMotion, AnimatePresence } from "framer-motion";
 import { animate } from "framer-motion/dom";
 import { memo, useMemo, useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { useDiagram } from "../hooks/useDiagram.js";
-import { useDiagramActorState } from "../hooks/useDiagramActor.js";
-import { ElementDetailsCard } from "./element-details/ElementDetailsCard.js";
+import { isNonNullish } from "remeda";
+import { ElementDetails } from "./element-details/ElementDetails.js";
 import { Overlay } from "./overlay/Overlay.js";
 import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
 import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
@@ -31,40 +30,48 @@ function Fallback({ error, resetErrorBoundary }) {
       p: "xl",
       withCloseButton: false,
       children: [
-        /* @__PURE__ */ jsx(Code, { block: true, children: errorString }),
+        /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: "100%", mah: 400, children: /* @__PURE__ */ jsx(Code, { block: true, children: errorString }) }),
         /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "xl", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
       ]
     }
   ) });
 }
-const selector = (s) => {
-  var _a, _b, _c;
-  return {
-    relationshipsBrowserActor: s.children.relationshipsBrowser,
-    relationshipDetailsActor: s.children.relationshipDetails,
-    viewId: s.context.view.id,
-    activeElementDetailsOf: ((_a = s.context.activeElementDetails) == null ? void 0 : _a.fqn) ?? null,
-    fromNode: ((_b = s.context.activeElementDetails) == null ? void 0 : _b.fromNode) ?? null,
-    rectFromNode: ((_c = s.context.activeElementDetails) == null ? void 0 : _c.nodeRectScreen) ?? null
-  };
+const selectOverlays = (s) => {
+  return s.context.overlays.map((overlay) => {
+    switch (overlay.type) {
+      case "relationshipsBrowser":
+        return s.children[overlay.id] ? {
+          type: overlay.type,
+          actorRef: s.children[overlay.id]
+        } : null;
+      case "relationshipDetails":
+        return s.children[overlay.id] ? {
+          type: overlay.type,
+          actorRef: s.children[overlay.id]
+        } : null;
+      case "elementDetails":
+        return s.children[overlay.id] ? {
+          type: overlay.type,
+          actorRef: s.children[overlay.id]
+        } : null;
+      default:
+        nonexhaustive(overlay);
+    }
+  }).filter(isNonNullish);
 };
-const equals = (a, b) => a.relationshipDetailsActor == b.relationshipDetailsActor && a.relationshipsBrowserActor == b.relationshipsBrowserActor && a.activeElementDetailsOf === b.activeElementDetailsOf && a.viewId === b.viewId && a.fromNode === b.fromNode && deepEqual(a.rectFromNode, b.rectFromNode);
-const Overlays = memo(() => {
+const compareSelectOverlays = (a, b) => {
+  return a.length === b.length && a.every((overlay, i) => {
+    return overlay.actorRef === b[i].actorRef;
+  });
+};
+const Overlays = memo(({ overlaysActorRef }) => {
   const xyflowDomNode = useXYStore((s) => s.domNode);
   const xyflowRendererDom = useMemo(() => (xyflowDomNode == null ? void 0 : xyflowDomNode.querySelector(".react-flow__renderer")) ?? null, [
     xyflowDomNode
   ]);
-  const diagram = useDiagram();
-  const {
-    relationshipsBrowserActor,
-    relationshipDetailsActor,
-    activeElementDetailsOf,
-    viewId,
-    fromNode,
-    rectFromNode
-  } = useDiagramActorState(selector, equals);
+  const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
   const isMotionReduced = useReducedMotion() ?? false;
-  const isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor || !!relationshipDetailsActor;
+  const isActiveOverlay = overlays.length > 0;
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
     animate(xyflowRendererDom, {
@@ -75,38 +82,43 @@ const Overlays = memo(() => {
       duration: isActiveOverlay ? 0.35 : 0.17
     });
   }, [isActiveOverlay, xyflowRendererDom]);
-  const onClose = useCallbackRef(() => {
-    diagram.closeOverlay();
+  const close = (actorRef) => {
+    overlaysActorRef.send({ type: "close", actorId: actorRef.id });
+  };
+  const overlaysReact = overlays.map((overlay) => {
+    switch (overlay.type) {
+      case "relationshipsBrowser":
+        return /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            onClose: () => close(overlay.actorRef),
+            children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: overlay.actorRef })
+          },
+          overlay.actorRef.sessionId
+        );
+      case "relationshipDetails":
+        return /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            onClose: () => close(overlay.actorRef),
+            children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: overlay.actorRef })
+          },
+          overlay.actorRef.sessionId
+        );
+      case "elementDetails":
+        return /* @__PURE__ */ jsx(
+          ElementDetails,
+          {
+            actorRef: overlay.actorRef,
+            onClose: () => close(overlay.actorRef)
+          },
+          overlay.actorRef.sessionId
+        );
+      default:
+        nonexhaustive(overlay);
+    }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsxs(ErrorBoundary, { FallbackComponent: Fallback, onReset: onClose, children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: onClose, children: relationshipsBrowserActor && /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        onClose: () => relationshipsBrowserActor.send({ type: "close" }),
-        children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor })
-      },
-      "relationships-browser"
-    ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: onClose, children: relationshipDetailsActor && /* @__PURE__ */ jsx(
-      Overlay,
-      {
-        onClose: () => relationshipDetailsActor.send({ type: "close" }),
-        children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: relationshipDetailsActor })
-      },
-      "relationship-details"
-    ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: !!activeElementDetailsOf && /* @__PURE__ */ jsx(
-      ElementDetailsCard,
-      {
-        fqn: activeElementDetailsOf,
-        viewId,
-        fromNode,
-        rectFromNode,
-        onClose
-      },
-      "element-details"
-    ) })
-  ] }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) });
 });
 Overlays.displayName = "Overlays";
 export {

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

@@ -0,0 +1,6 @@
+import { ElementDetailsActorRef } from './actor';
+export type ElementDetailsProps = {
+    actorRef: ElementDetailsActorRef;
+    onClose: () => void;
+};
+export declare function ElementDetails({ actorRef, onClose, }: ElementDetailsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallbackRef } from "@mantine/hooks";
+import { useSelector } from "@xstate/react";
+import { shallowEqual } from "fast-equals";
+import { ElementDetailsActorContext } from "./actorContext.js";
+import { ElementDetailsCard } from "./ElementDetailsCard.js";
+function ElementDetails({
+  actorRef,
+  onClose
+}) {
+  const props = useSelector(
+    actorRef,
+    useCallbackRef((s) => ({
+      viewId: s.context.currentView.id,
+      fromNode: s.context.initiatedFrom.node,
+      rectFromNode: s.context.initiatedFrom.clientRect,
+      fqn: s.context.subject
+    })),
+    shallowEqual
+  );
+  return /* @__PURE__ */ jsx(ElementDetailsActorContext, { value: actorRef, children: /* @__PURE__ */ jsx(
+    ElementDetailsCard,
+    {
+      onClose,
+      ...props
+    }
+  ) });
+}
+export {
+  ElementDetails
+};

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

@@ -154,6 +154,7 @@ function ElementDetailsCard({
       ref,
       className: dialog,
       layout: true,
+      layoutRoot: true,
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "10%"
@@ -234,9 +235,7 @@ function ElementDetailsCard({
                         /* @__PURE__ */ jsx(
                           Text,
                           {
-                            component: m.div,
-                            layout: "position",
-                            layoutId: `${viewId}:element:title:${fqn}`,
+                            component: "div",
                             className: title,
                             children: elementModel.title
                           }
@@ -297,9 +296,6 @@ function ElementDetailsCard({
                               radius: "sm",
                               onClick: (e) => {
                                 e.stopPropagation();
-                                diagram.openSource({
-                                  element: elementModel.id
-                                });
                               },
                               children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
                             }
@@ -354,12 +350,11 @@ function ElementDetailsCard({
                         enableRelationshipBrowser: false,
                         enableNavigateTo: false
                       },
-                      children: opened && !!nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
+                      children: opened && activeTab === "Relationships" && /* @__PURE__ */ jsx(
                         TabPanelRelationships,
                         {
                           element: elementModel,
-                          node: nodeModel,
-                          currentView: diagram.currentView()
+                          node: nodeModel ?? null
                         }
                       )
                     }

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

@@ -19,7 +19,7 @@ const DeployedInstanceRenderer = ({
   instance
 }) => {
   const diagram = useDiagram();
-  const currentViewId = diagram.currentView().id;
+  const currentViewId = diagram.currentView.id;
   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 }) }),

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

@@ -1,8 +1,7 @@
-import { DiagramView, LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core';
 type RelationshipsTabPanelProps = {
-    currentView: DiagramView;
-    node: LikeC4Model.Node;
+    node: LikeC4Model.Node | null;
     element: LikeC4Model.Element;
 };
-export declare function TabPanelRelationships({ currentView, node, element, }: RelationshipsTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanelRelationships({ node, element, }: RelationshipsTabPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,23 +1,34 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { nameFromFqn } from "@likec4/core";
-import { Stack, Group, Box, ThemeIcon, Text, Paper } from "@mantine/core";
+import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, Paper } from "@mantine/core";
 import { IconArrowRight, IconInfoCircle } from "@tabler/icons-react";
-import { useActorRef } from "@xstate/react";
+import { useSelector } from "@xstate/react";
 import { useState } from "react";
 import { unique } from "remeda";
-import { relationshipsBrowserActor } from "../relationships-browser/actor.js";
 import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.js";
+import { useElementDetailsActorRef } from "./actorContext.js";
 import { fqn, xyflow, relationshipStat } from "./TabPanelRelationships.css.js";
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  openDelay: 600,
+  closeDelay: 120,
+  label: "",
+  children: null,
+  offset: 8,
+  withinPortal: false
+});
 function TabPanelRelationships({
-  currentView,
   node,
   element
 }) {
+  const delailsActor = useElementDetailsActorRef();
+  const relationshipsBrowserActor = useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]);
   const [scope, setScope] = 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));
-  const outgoingInView = unique([...node.outgoing()].flatMap((e) => e.$edge.relations));
+  const incomingInView = node ? unique([...node.incoming()].flatMap((e) => e.$edge.relations)) : [];
+  const outgoingInView = node ? unique([...node.outgoing()].flatMap((e) => e.$edge.relations)) : [];
   const notIncludedRelations = [
     ...incoming,
     ...outgoing
@@ -45,7 +56,7 @@ function TabPanelRelationships({
           }
         )
       ] }) }),
-      notIncludedRelations > 0 && /* @__PURE__ */ jsxs(
+      notIncludedRelations > 0 && /* @__PURE__ */ jsx(Tooltip, { label: "Current view does not include some relationships", children: /* @__PURE__ */ jsxs(
         Group,
         {
           mt: "xs",
@@ -62,9 +73,9 @@ function TabPanelRelationships({
             ] })
           ]
         }
-      )
+      ) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: xyflow, children: /* @__PURE__ */ jsx(EmbeddedRelationshipsBrowser, { subjectId: element.id, currentView }) })
+    /* @__PURE__ */ jsx(Box, { className: xyflow, children: relationshipsBrowserActor && /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }) })
   ] });
 }
 function RelationshipsStat({
@@ -96,17 +107,6 @@ function RelationshipsStat({
     }
   );
 }
-const EmbeddedRelationshipsBrowser = ({ subjectId, currentView }) => {
-  const actor = useActorRef(relationshipsBrowserActor, {
-    input: {
-      subject: subjectId,
-      scope: currentView,
-      closeable: false,
-      enableNavigationMenu: false
-    }
-  });
-  return /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: actor });
-};
 export {
   TabPanelRelationships
 };