@likec4/diagram 1.19.2 → 1.20.1

package/dist/overlays/overlay/Overlay.css.js

@@ -0,0 +1,93 @@
+import "../../node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/FloatingIndicator/FloatingIndicator.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Accordion/Accordion.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Affix/Affix.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Text/Text.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Combobox/Combobox.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/InlineInput/InlineInput.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Checkbox/CheckboxCard/CheckboxCard.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Checkbox/Checkbox.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Avatar/Avatar.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/BackgroundImage/BackgroundImage.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Badge/Badge.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Blockquote/Blockquote.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Breadcrumbs/Breadcrumbs.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Burger/Burger.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Button/Button.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Card/Card.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Center/Center.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Chip/Chip.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Code/Code.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/ColorSwatch/ColorSwatch.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/ColorPicker/ColorPicker.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/ColorInput/ColorInput.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Container/Container.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Dialog/Dialog.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Divider/Divider.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Drawer/Drawer.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Grid/Grid.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Mark/Mark.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Image/Image.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Indicator/Indicator.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Kbd/Kbd.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/List/List.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/LoadingOverlay/LoadingOverlay.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Menu/Menu.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Modal/Modal.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Pill/Pill.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/PillsInput/PillsInput.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/NavLink/NavLink.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Notification/Notification.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/NumberInput/NumberInput.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Pagination/Pagination.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/PasswordInput/PasswordInput.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/PinInput/PinInput.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Progress/Progress.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Radio/RadioCard/RadioCard.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Radio/RadioIndicator/RadioIndicator.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Radio/Radio.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Rating/Rating.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Tooltip/Tooltip.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/RingProgress/RingProgress.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/SegmentedControl/SegmentedControl.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/SemiCircleProgress/SemiCircleProgress.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/SimpleGrid/SimpleGrid.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Skeleton/Skeleton.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Slider/Slider.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Spoiler/Spoiler.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Stack/Stack.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js";
+/* empty css                           */
+var dialog = "_1njqisf1";
+var body = "_1njqisf2";
+export {
+  body,
+  dialog
+};

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

@@ -0,0 +1,8 @@
+import { HTMLMotionProps } from 'framer-motion';
+import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+type OverlayProps = PropsWithChildren<HTMLMotionProps<'dialog'> & {
+    onClose: () => void;
+    onClick?: never;
+}>;
+export declare const Overlay: ForwardRefExoticComponent<Omit<OverlayProps, "ref"> & RefAttributes<HTMLDialogElement>>;
+export {};

package/dist/overlays/overlay/Overlay.js

@@ -0,0 +1,86 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { RemoveScroll, Box } from "@mantine/core";
+import { useMergedRef } from "@mantine/hooks";
+import { useSyncedRef, useDebouncedCallback } from "@react-hookz/web";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { forwardRef, useState, useRef, useLayoutEffect } from "react";
+import { dialog, body } from "./Overlay.css.js";
+const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
+  const [opened, setOpened] = useState(false);
+  const dialogRef = useRef(null);
+  const onCloseRef = useSyncedRef(onClose);
+  const close = useDebouncedCallback(
+    () => {
+      onCloseRef.current();
+    },
+    [],
+    50
+  );
+  useLayoutEffect(() => {
+    var _a;
+    const cancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    (_a = dialogRef.current) == null ? void 0 : _a.addEventListener("cancel", cancel, { capture: true });
+    return () => {
+      var _a2;
+      (_a2 = dialogRef.current) == null ? void 0 : _a2.removeEventListener("cancel", cancel, { capture: true });
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    m.dialog,
+    {
+      ref: useMergedRef(ref, dialogRef),
+      className: clsx(dialog, className),
+      initial: {
+        "--backdrop-blur": "0px",
+        "--backdrop-opacity": "5%",
+        opacity: 0.85,
+        translateY: 12
+        // opacity: 02.8,
+      },
+      animate: {
+        "--backdrop-blur": "6px",
+        "--backdrop-opacity": "60%",
+        translateY: 0,
+        opacity: 1
+        // transition: {
+        //   delay: 0.25,
+        // }
+      },
+      onAnimationStart: () => {
+        var _a;
+        (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+        setOpened(true);
+      },
+      exit: {
+        opacity: 0.1,
+        translateY: -10,
+        "--backdrop-blur": "0px",
+        "--backdrop-opacity": "0%",
+        transition: {
+          duration: 0.1
+        }
+      },
+      onClick: (e) => {
+        var _a, _b;
+        if (((_b = (_a = e.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
+          e.stopPropagation();
+          close();
+        }
+      },
+      onClose: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(Box, { className: body, children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+    }
+  );
+});
+export {
+  Overlay
+};

package/dist/overlays/relationship-details/RelationshipDetails.d.ts

@@ -0,0 +1,5 @@
+import { RelationshipDetailsActorRef } from './actor';
+export type RelationshipDetailsProps = {
+    actorRef: RelationshipDetailsActorRef;
+};
+export declare function RelationshipDetails({ actorRef }: RelationshipDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -0,0 +1,189 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Group } from "@mantine/core";
+import { useStateHistory, useCallbackRef } from "@mantine/hooks";
+import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { ReactFlowProvider, useNodesState, useEdgesState, Panel } from "@xyflow/react";
+import clsx from "clsx";
+import { LayoutGroup, AnimatePresence, m } from "framer-motion";
+import { useRef, memo, useEffect } from "react";
+import { BaseXYFlow } from "../../base/BaseXYFlow.js";
+import { updateEdges } from "../../base/updateEdges.js";
+import { updateNodes } from "../../base/updateNodes.js";
+import { edgeTypes } from "./custom/edgeTypes.js";
+import { nodeTypes } from "./custom/nodeTypes.js";
+import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipsBrowserState } from "./hooks.js";
+import { SelectEdge } from "./SelectEdge.js";
+import { useLayoutedDetails } from "./useLayoutedDetails.js";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
+function RelationshipDetails({ actorRef }) {
+  const initialRef = useRef(null);
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultNodes: [],
+      defaultEdges: []
+    };
+  }
+  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) });
+}
+const selector = (state) => ({
+  edgeId: state.context.edgeId,
+  view: state.context.view,
+  initialized: state.context.initialized
+});
+const RelationshipDetailsInner = memo(() => {
+  const browser = useRelationshipDetails();
+  const {
+    edgeId,
+    view,
+    initialized
+  } = useRelationshipsBrowserState(selector);
+  const {
+    edge,
+    xynodes,
+    xyedges,
+    bounds
+  } = useLayoutedDetails(edgeId, view);
+  const [nodes, setNodes, onNodesChange] = useNodesState(xynodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges);
+  useUpdateEffect(() => {
+    setNodes(updateNodes(xynodes));
+    setEdges(updateEdges(xyedges));
+  }, [xynodes, xyedges]);
+  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId);
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      historyOps.set(edgeId);
+    }
+  }, [edgeId]);
+  useEffect(() => {
+  }, [historyEdgeId]);
+  const hasStepBack = current > 0;
+  const hasStepForward = current + 1 < history.length;
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+    BaseXYFlow,
+    {
+      id: "relationship-details",
+      nodes,
+      edges,
+      className: clsx(initialized ? "initialized" : "not-initialized"),
+      nodeTypes,
+      edgeTypes,
+      onEdgesChange,
+      onNodesChange,
+      fitViewPadding: 0.05,
+      onInit: useCallbackRef((instance) => {
+        browser.send({ type: "xyflow.init", instance });
+      }),
+      onNodeClick: useCallbackRef((e, node) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.nodeClick", node });
+      }),
+      onEdgeClick: useCallbackRef((e, edge2) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.edgeClick", edge: edge2 });
+      }),
+      onPaneClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.paneClick" });
+      }),
+      onViewportResize: () => {
+        browser.send({ type: "xyflow.resized" });
+      },
+      nodesDraggable: false,
+      fitView: false,
+      pannable: true,
+      zoomable: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          TopLeftPanel,
+          {
+            edge,
+            view,
+            hasStepBack,
+            hasStepForward,
+            onStepBack: () => historyOps.back(),
+            onStepForward: () => historyOps.forward()
+          }
+        ),
+        /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            color: "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              browser.close();
+            },
+            children: /* @__PURE__ */ jsx(IconX, {})
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+const TopLeftPanel = ({
+  edge,
+  view,
+  hasStepBack,
+  hasStepForward,
+  onStepBack,
+  onStepForward
+}) => {
+  useRelationshipDetails();
+  return /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsx(Group, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
+    hasStepBack && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(-5px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0.05,
+          transform: "translateX(-10px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            color: "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              onStepBack();
+            },
+            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+          }
+        )
+      },
+      "back"
+    ),
+    hasStepForward && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(5px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0,
+          transform: "translateX(5px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            color: "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              onStepForward();
+            },
+            children: /* @__PURE__ */ jsx(IconChevronRight, {})
+          }
+        )
+      },
+      "forward"
+    ),
+    /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", ml: "sm", children: /* @__PURE__ */ jsx(SelectEdge, { edge, view }) })
+  ] }) }) });
+};
+export {
+  RelationshipDetails
+};

package/dist/overlays/{edge-details → relationship-details}/SelectEdge.css.d.ts

@@ -5,3 +5,4 @@ export declare const edgeLabel: string;
 export declare const edgeRow: string;
 export declare const edgeGrid: string;
 export declare const edgeDataGrid: string;
+export declare const scrollArea: string;

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -0,0 +1,17 @@
+/* empty css                              */
+var edgeSource = "_1cwkcdb1 _1cwkcdb0";
+var edgeArrow = "_1cwkcdb2 _1cwkcdb0";
+var edgeTarget = "_1cwkcdb3 _1cwkcdb0";
+var edgeLabel = "_1cwkcdb4";
+var edgeRow = "_1cwkcdb5";
+var edgeGrid = "_1cwkcdb6";
+var scrollArea = "_1cwkcdb8";
+export {
+  edgeArrow,
+  edgeGrid,
+  edgeLabel,
+  edgeRow,
+  edgeSource,
+  edgeTarget,
+  scrollArea
+};

package/dist/overlays/{edge-details → relationship-details}/SelectEdge.d.ts

@@ -1,5 +1,5 @@
 import { DiagramEdge, DiagramView } from '@likec4/core';
-export declare const SelectEdge: ({ edge, view }: {
+export declare const SelectEdge: ({ edge, view, }: {
     edge: DiagramEdge;
     view: DiagramView;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/overlays/{edge-details → relationship-details}/SelectEdge.js

@@ -3,14 +3,16 @@ import "@likec4/core";
 import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from "@mantine/core";
 import { IconSelector, IconArrowRight } from "@tabler/icons-react";
 import { useRef } from "react";
-import { useOverlayDialog } from "../OverlayContext.js";
-import { edgeSource, edgeTarget, edgeGrid, edgeRow, edgeArrow, edgeLabel } from "./SelectEdge.css.js";
+import { useRelationshipDetails } from "./hooks.js";
+import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from "./SelectEdge.css.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
 const SelectEdge = ({
   edge,
   view
 }) => {
-  const overlay = useOverlayDialog();
+  const overlay = useRelationshipDetails();
   const viewport = useRef(null);
+  useMantinePortalProps();
   const theme = useComputedColorScheme();
   const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
   const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
@@ -27,7 +29,7 @@ const SelectEdge = ({
   return /* @__PURE__ */ jsxs(
     Popover,
     {
-      position: "bottom",
+      position: "bottom-start",
       shadow: "md",
       keepMounted: true,
       withinPortal: false,
@@ -79,16 +81,14 @@ const SelectEdge = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 420, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", children: edges.map((e) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 420, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", children: edges.map((e) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: edgeRow,
             "data-selected": e.id === edge.id,
             onClick: (event) => {
               event.stopPropagation();
-              overlay.openOverlay({
-                edgeDetails: e.id
-              });
+              overlay.navigateTo(e.id);
             },
             children: [
               /* @__PURE__ */ jsx(

package/dist/overlays/relationship-details/_types.d.ts

@@ -0,0 +1,36 @@
+import { Color, DiagramNode, Fqn, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
+export declare namespace RelationshipDetailsTypes {
+    /**
+     * The node's incoming and outgoing ports
+     */
+    type Ports = {
+        in: string[];
+        out: string[];
+    };
+    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style'>> & {
+        fqn: Fqn;
+        icon: string | null;
+        ports: Ports;
+    }>;
+    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
+        fqn: Fqn;
+        depth: number;
+        icon: string | null;
+        ports: Ports;
+    }>;
+    type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
+    type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
+    type Node = ElementNode | CompoundNode;
+    type NodeData = Node['data'];
+    type EdgeData = Base.EdgeData<{
+        relationId: RelationId;
+        color: Color | undefined;
+        label: string | null;
+        technology?: string | undefined;
+        description?: string | undefined;
+        navigateTo: ViewId | null;
+        line: RelationshipLineType;
+    }>;
+    type Edge = ReactFlowEdge<EdgeData, 'relationship'>;
+}

package/dist/overlays/relationship-details/actor.d.ts

@@ -0,0 +1,41 @@
+import { BBox, DiagramView, EdgeId } from '@likec4/core';
+import { ReactFlowInstance } from '@xyflow/react';
+import { ActorLogic, ActorRefFromLogic, MachineSnapshot, SnapshotFrom } from 'xstate';
+import { RelationshipDetailsTypes } from './_types';
+type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
+export type Input = {
+    edgeId: EdgeId;
+    view: DiagramView;
+};
+export type Context = Readonly<Input & {
+    xyflow: XYFLowInstance | null;
+    initialized: boolean;
+}>;
+export type Events = {
+    type: 'xyflow.init';
+    instance: XYFLowInstance;
+} | {
+    type: 'xyflow.nodeClick';
+    node: RelationshipDetailsTypes.Node;
+} | {
+    type: 'xyflow.edgeClick';
+    edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'xyflow.paneClick';
+} | {
+    type: 'xyflow.resized';
+} | {
+    type: 'fitDiagram';
+    duration?: number;
+    bounds?: BBox;
+} | {
+    type: 'navigate.to';
+    edgeId: EdgeId;
+} | {
+    type: 'close';
+};
+export declare const relationshipDetailsActor: ActorLogic<MachineSnapshot<Context, Events, any, "opening" | "active" | "closed", any, any, any, any>, Events, Input, any, any>;
+export type RelationshipDetailsLogic = typeof relationshipDetailsActor;
+export type RelationshipDetailsActorRef = ActorRefFromLogic<typeof relationshipDetailsActor>;
+export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsActorRef>;
+export {};

package/dist/overlays/relationship-details/actor.js

@@ -0,0 +1,113 @@
+import { invariant } from "@likec4/core";
+import "@xyflow/react";
+import { prop } from "remeda";
+import { setup, assign, raise, cancel } from "xstate";
+import { MinZoom } from "../../base/const.js";
+const relationshipDetailsActor = setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    "xyflow:fitDiagram": ({ context }, params) => {
+      const {
+        duration = 450,
+        bounds
+      } = params ?? {};
+      const { xyflow } = context;
+      invariant(xyflow, "xyflow is not initialized");
+      if (bounds) {
+        xyflow.fitBounds(bounds, duration > 0 ? { duration } : void 0);
+      } else {
+        const maxZoom = Math.max(xyflow.getZoom(), 1);
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: 0.1,
+          ...duration > 0 && { duration }
+        });
+      }
+    }
+  },
+  guards: {
+    "enable: navigate.to": () => true
+  }
+}).createMachine({
+  initial: "opening",
+  context: ({ input }) => ({
+    ...input,
+    initialized: false,
+    xyflow: null
+  }),
+  states: {
+    "opening": {
+      on: {
+        "xyflow.init": {
+          actions: assign({
+            initialized: true,
+            xyflow: ({ event }) => event.instance
+          }),
+          target: "active"
+        },
+        "close": {
+          target: "closed"
+        }
+      }
+    },
+    "active": {
+      entry: {
+        type: "xyflow:fitDiagram",
+        params: { duration: 0 }
+      },
+      on: {
+        // 'xyflow.nodeClick': {
+        //   actions: enqueueActions(({ event, enqueue }) => {
+        //     if ('fqn' in event.node.data) {
+        //       const fqn = event.node.data.fqn
+        //       enqueue.assign({
+        //         subject: fqn,
+        //       })
+        //       enqueue.raise({ type: 'fitDiagram' }, { delay: 50 })
+        //     }
+        //   }),
+        // },
+        "navigate.to": {
+          actions: [
+            assign({
+              edgeId: ({ event }) => event.edgeId
+            }),
+            raise({ type: "fitDiagram" }, { delay: 50 })
+          ]
+        },
+        "close": {
+          target: "closed"
+        }
+      },
+      exit: assign({
+        initialized: false,
+        xyflow: null
+      })
+    },
+    "closed": {
+      type: "final"
+    }
+  },
+  on: {
+    "fitDiagram": {
+      actions: {
+        type: "xyflow:fitDiagram",
+        params: prop("event")
+      }
+    },
+    "xyflow.resized": {
+      actions: [
+        cancel("fitDiagram"),
+        raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
+      ]
+    }
+  }
+});
+export {
+  relationshipDetailsActor
+};