@likec4/diagram 1.20.1 → 1.20.2

package/dist/likec4diagram/state/syncManualLayoutActor.d.ts

@@ -23,7 +23,7 @@ export declare const syncManualLayoutActor: StateMachine<Readonly<Input>, Events
 }, {
     type: "same view";
     params: unknown;
-}, "timeout", "stopped" | "paused" | "synced" | "pending" | "idle", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, "timeout", "stopped" | "synced" | "pending" | "idle" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly initial: "idle";
     readonly context: ({ input }: {
         spawn: {

package/dist/likec4diagram/types.d.ts

@@ -10,6 +10,7 @@ type NonOptional<T extends object> = Simplify<{
 }>;
 export declare namespace Types {
     type LeafNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'position'>> & {
+        isMultiple?: boolean | undefined;
         icon: string | null;
     }>;
     /**

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { container, card, title, description } from "./DiagramTitlePanel.css.js";
-import { Link } from "./Link.js";
+import { Link } from "../../../base/Link.js";
 const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",
@@ -140,10 +140,11 @@ function DiagramTitlePanel() {
               links && /* @__PURE__ */ jsx(
                 Stack,
                 {
-                  gap: 3,
+                  mt: "xs",
+                  gap: 4,
                   justify: "stretch",
                   align: "stretch",
-                  children: links.map((link) => /* @__PURE__ */ jsx(Link, { link }, link.url))
+                  children: links.map((link) => /* @__PURE__ */ jsx(Link, { value: link }, link.url))
                 }
               )
             ] })

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -3,6 +3,7 @@ import { useDeepCompareMemo } from "@react-hookz/web";
 import { pick, hasAtLeast } from "remeda";
 import { ZIndexes } from "../base/const.js";
 function viewToNodesEdge(opts) {
+  var _a;
   const {
     view,
     nodesDraggable: draggable,
@@ -94,7 +95,8 @@ function viewToNodesEdge(opts) {
       shape: node.shape,
       style: node.style,
       icon: node.icon ?? null,
-      position: node.position
+      position: node.position,
+      isMultiple: ((_a = node.style) == null ? void 0 : _a.multiple) ?? false
     };
     if (node.kind === ElementKind.Group) {
       xynodes.push({

package/dist/overlays/element-details/ElementDetailsCard.css.d.ts

@@ -12,5 +12,4 @@ export declare const tabsTab: string;
 export declare const tabsPanel: string;
 export declare const propertiesGrid: string;
 export declare const propertyLabel: string;
-export declare const elementLink: string;
 export declare const resizeHandle: string;

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

@@ -12,14 +12,12 @@ var tabsTab = "paikoyd";
 var tabsPanel = "paikoye";
 var propertiesGrid = "paikoyf";
 var propertyLabel = "paikoyg";
-var elementLink = "paikoyh";
-var resizeHandle = "paikoyi";
+var resizeHandle = "paikoyh";
 export {
   card,
   cardHeader,
   dialog,
   elementIcon,
-  elementLink,
   propertiesGrid,
   propertyLabel,
   resizeHandle,

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

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { 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, Code } from "@mantine/core";
 import { useViewportSize, useSessionStorage, useDebouncedCallback } from "@mantine/hooks";
-import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2, IconCheck, IconCopy } from "@tabler/icons-react";
+import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
 import "clsx";
 import { useDragControls, useMotionValue, m } from "framer-motion";
 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 { propertyLabel, elementIcon, dialog, card, cardHeader, title, tabsRoot, tabsList, tabsTab, tabsPanel, propertiesGrid, resizeHandle, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
 import { TabPanelDeployments } from "./TabPanelDeployments.js";
 import { TabPanelRelationships } from "./TabPanelRelationships.js";
 import { TabPanelStructure } from "./TabPanelStructure.js";
@@ -17,6 +17,7 @@ import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { IconRenderer } from "../../context/IconRenderer.js";
 import { IfEnabled } from "../../context/DiagramFeatures.js";
+import { Link } from "../../base/Link.js";
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -344,7 +345,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
                     elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
                     elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
-                      /* @__PURE__ */ jsx(Stack, { gap: "xs", align: "flex-start", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(ElementLink, { value: link }, i)) })
+                      /* @__PURE__ */ jsx(Stack, { gap: "xs", align: "flex-start", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
                     ] }),
                     elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
                   ] }) }) }),
@@ -440,32 +441,6 @@ function ElementProperty({
     )
   ] });
 }
-function ElementLink({
-  value
-}) {
-  const url = new URL(value.url, window.location.href).toString();
-  return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Anchor, { href: url, target: "_blank", underline: "never", className: elementLink, children: /* @__PURE__ */ jsxs(Group, { gap: 4, align: "center", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        tabIndex: -1,
-        size: 24,
-        variant: copied ? "light" : "subtle",
-        color: copied ? "teal" : "gray",
-        onClick: (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          copy();
-        },
-        children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { style: { width: "65%", opacity: 0.8 } })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
-      /* @__PURE__ */ jsx(Text, { fz: "sm", truncate: true, lh: 1.3, fw: value.title ? 500 : 400, children: value.title || url }),
-      value.title && /* @__PURE__ */ jsx(Text, { component: "div", fz: 10, c: "dimmed", lh: 1.2, truncate: true, children: url })
-    ] })
-  ] }) }) });
-}
 function ElementMetata({
   value
 }) {

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

@@ -11,7 +11,7 @@ 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 { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState } from "./hooks.js";
 import { SelectEdge } from "./SelectEdge.js";
 import { useLayoutedDetails } from "./useLayoutedDetails.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
@@ -36,7 +36,7 @@ const RelationshipDetailsInner = memo(() => {
     edgeId,
     view,
     initialized
-  } = useRelationshipsBrowserState(selector);
+  } = useRelationshipDetailsState(selector);
   const {
     edge,
     xynodes,
@@ -86,9 +86,9 @@ const RelationshipDetailsInner = memo(() => {
         e.stopPropagation();
         browser.send({ type: "xyflow.paneClick" });
       }),
-      onViewportResize: () => {
+      onViewportResize: useCallbackRef(() => {
         browser.send({ type: "xyflow.resized" });
-      },
+      }),
       nodesDraggable: false,
       fitView: false,
       pannable: true,

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -2,14 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { IconZoomScan } from "@tabler/icons-react";
 import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useRelationshipDetails } from "../hooks.js";
 import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
 const ElementActions = (props) => {
   const { enableNavigateTo } = useEnabledFeature("NavigateTo");
   const diagram = useDiagram();
-  useRelationshipDetails();
   const buttons = [];
-  const { navigateTo, fqn } = props.data;
+  const { navigateTo } = props.data;
   if (navigateTo && enableNavigateTo) {
     buttons.push({
       key: "navigate",

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

@@ -7,9 +7,9 @@ export declare const edgeTypes: {
         target: string;
         style?: CSSProperties;
         id: string;
-        selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
+        selected?: boolean;
         animated?: boolean;
         sourceX: number;
         sourceY: number;

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

@@ -4,8 +4,8 @@ import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
 export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
-export declare function useRelationshipsBrowserActor(): RelationshipDetailsActorRef;
-export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
+export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
+export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 export declare function useRelationshipDetails(): {
     getState: () => Readonly< Input & {
         xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.Node, {

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

@@ -4,16 +4,16 @@ import { useSelector } from "@xstate/react";
 import { shallowEqual } from "fast-equals";
 import { createContext, useTransition, useMemo, useContext } from "react";
 const RelationshipDetailsActorContext = createContext(null);
-function useRelationshipsBrowserActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipsBrowserActorContext");
+function useRelationshipDetailsActor() {
+  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
 }
-function useRelationshipsBrowserState(selector, compare = shallowEqual) {
+function useRelationshipDetailsState(selector, compare = shallowEqual) {
   const select = useCallbackRef(selector);
-  const actor = useRelationshipsBrowserActor();
+  const actor = useRelationshipDetailsActor();
   return useSelector(actor, select, compare);
 }
 function useRelationshipDetails() {
-  const actor = useRelationshipsBrowserActor();
+  const actor = useRelationshipDetailsActor();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
     getState: () => actor.getSnapshot().context,
@@ -41,6 +41,6 @@ function useRelationshipDetails() {
 export {
   RelationshipDetailsActorContext,
   useRelationshipDetails,
-  useRelationshipsBrowserActor,
-  useRelationshipsBrowserState
+  useRelationshipDetailsActor,
+  useRelationshipDetailsState
 };

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

@@ -193,8 +193,8 @@ function layout(edge, view, likec4model) {
       type: "relationship",
       source: source.id,
       target: target.id,
-      sourceHandle: target.id,
-      targetHandle: source.id,
+      sourceHandle: source.id + "_out" + (source.data.ports.out.length - 1),
+      targetHandle: target.id + "_in" + (target.data.ports.in.length - 1),
       data: {
         relationId: relation.id,
         color: relation.color,
@@ -209,15 +209,12 @@ function layout(edge, view, likec4model) {
     ctx.xyedges.push(edge2);
   }
   const nodebounds = applyDagreLayout(ctx.g);
-  const sortedPorts = (ports) => {
-    if (ports.length < 2) {
-      return ports;
-    }
+  const sortedPorts = (nodeId, type, ports) => {
     return pipe(
       ports,
-      map((port) => {
+      map((port, index) => {
         return {
-          port,
+          port: nodeId + "_" + type + index,
           topY: nodebounds(port).position.y
         };
       }),
@@ -227,8 +224,8 @@ function layout(edge, view, likec4model) {
   };
   const xynodes = [...ctx.xynodes.values()].map((node) => {
     const { position, width, height } = nodebounds(node.id, node.parentId);
-    node.data.ports.in = sortedPorts(node.data.ports.in);
-    node.data.ports.out = sortedPorts(node.data.ports.out);
+    node.data.ports.in = sortedPorts(node.id, "in", node.data.ports.in);
+    node.data.ports.out = sortedPorts(node.id, "out", node.data.ports.out);
     if (node.type === "element") {
       node.data.width = width;
       node.data.height = height;

package/dist/overlays/relationships-browser/-useRelationshipsView.d.ts

@@ -19,7 +19,10 @@ export declare namespace LayoutRelationshipsViewResult {
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
     };
-    type Edge = DiagramEdge & {};
+    type Edge = DiagramEdge & {
+        sourceHandle: string;
+        targetHandle: string;
+    };
 }
 export declare function layoutRelationshipsView(data: RelationshipsViewData): LayoutRelationshipsViewResult;
 export declare function useRelationshipsView(fqn: Fqn): {

package/dist/overlays/relationships-browser/-useRelationshipsView.js

@@ -195,7 +195,9 @@ function layoutRelationshipsView(data) {
       edges.push({
         name,
         source: source.id,
+        sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
         target: target.id,
+        targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
         relations: map(grouped, prop("relation"))
       });
     })
@@ -309,15 +311,12 @@ function layoutRelationshipsView(data) {
     }
     return 1 + Math.max(...children.map(nodeDepth));
   }
-  const sortedPorts = (ports) => {
-    if (ports.length < 2) {
-      return ports;
-    }
+  const sortedPorts = (nodeId, type, ports) => {
     return pipe(
       ports,
-      map((port) => {
+      map((port, index) => {
         return {
-          port,
+          port: nodeId + "_" + type + index,
           topY: nodeBounds(port).position.y
         };
       }),
@@ -417,15 +416,15 @@ function layoutRelationshipsView(data) {
       height,
       column,
       ports: {
-        in: sortedPorts(inPorts),
-        out: sortedPorts(outPorts)
+        in: sortedPorts(id, "in", inPorts),
+        out: sortedPorts(id, "out", outPorts)
       }
     };
   });
   return {
     bounds: {
-      x: minX,
-      y: minY,
+      x: Math.min(minX, 0),
+      y: Math.min(minY, 0),
       width: g.graph().width ?? 100,
       height: g.graph().height ?? 100
     },
@@ -437,7 +436,7 @@ function layoutRelationshipsView(data) {
       if (!ename) {
         return acc;
       }
-      const { name, source, target, relations } = find(edges, (e2) => e2.name === ename);
+      const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, (e2) => e2.name === ename);
       const onlyRelation = only(relations);
       const label = (onlyRelation == null ? void 0 : onlyRelation.title) ?? "untitled";
       const isMultiple = relations.length > 1;
@@ -449,7 +448,9 @@ function layoutRelationshipsView(data) {
       acc.push({
         id: name,
         source,
+        sourceHandle,
         target,
+        targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,
         relations: relations.map((r) => r.id),
         parent: null,

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -1,13 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ActionIcon, Group, Box } from "@mantine/core";
-import { useStateHistory, useCallbackRef } from "@mantine/hooks";
+import { useCallbackRef, useStateHistory } from "@mantine/hooks";
 import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { ReactFlowProvider, Panel } from "@xyflow/react";
+import { ReactFlowProvider, useStoreApi, Panel } from "@xyflow/react";
 import clsx from "clsx";
+import { shallowEqual } from "fast-equals";
 import { LayoutGroup, AnimatePresence, m } from "framer-motion";
 import { useRef, memo, useEffect } from "react";
 import { BaseXYFlow } from "../../base/BaseXYFlow.js";
 import { useRelationshipsView } from "./-useRelationshipsView.js";
+import { ViewPadding } from "./const.js";
 import { edgeTypes } from "./custom/edgeTypes.js";
 import { nodeTypes } from "./custom/nodeTypes.js";
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
@@ -16,61 +18,43 @@ function RelationshipsBrowser({ actorRef }) {
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
-      defaultNodes: [],
-      defaultEdges: []
+      initialNodes: [],
+      initialEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {}) }) });
+  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) });
 }
 const selector = (state) => ({
-  subjectId: state.context.subject,
   initialized: state.context.initialized,
-  scope: state.context.scope,
+  isActive: state.hasTag("active"),
   nodes: state.context.xynodes,
-  edges: state.context.xyedges,
-  closeable: state.context.closeable,
-  enableNavigationMenu: state.context.enableNavigationMenu
+  edges: state.context.xyedges
 });
-const RelationshipsBrowserInner = memo(() => {
+const selectorEq = (a, b) => a.initialized === b.initialized && a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const RelationshipsBrowserXYFlow = memo(() => {
+  const xystore = useStoreApi();
   const browser = useRelationshipsBrowser();
   const {
-    subjectId,
     initialized,
-    scope,
+    isActive,
     nodes,
-    edges,
-    closeable,
-    enableNavigationMenu
-  } = useRelationshipsBrowserState(selector);
-  const layouted = useRelationshipsView(subjectId);
-  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      historyOps.set(subjectId);
-    }
-  }, [subjectId]);
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      browser.navigateTo(historySubjectId);
-    }
-  }, [historySubjectId]);
-  useEffect(() => {
-    browser.send({ type: "update.view", layouted });
-  }, [layouted]);
-  const hasStepBack = current > 0;
-  const hasStepForward = current + 1 < history.length;
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+    edges
+  } = useRelationshipsBrowserState(
+    selector,
+    selectorEq
+  );
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(
     BaseXYFlow,
     {
       id: "relationships-browser",
       nodes,
       edges,
-      className: clsx(initialized ? "initialized" : "not-initialized"),
+      className: clsx(initialized && isActive ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
-      fitViewPadding: 0.05,
+      fitViewPadding: ViewPadding,
       onInit: useCallbackRef((instance) => {
-        browser.send({ type: "xyflow.init", instance });
+        browser.send({ type: "xyflow.init", instance, store: xystore });
       }),
       onNodeClick: useCallbackRef((e, node) => {
         e.stopPropagation();
@@ -88,9 +72,9 @@ const RelationshipsBrowserInner = memo(() => {
         e.stopPropagation();
         browser.send({ type: "xyflow.paneDblClick" });
       }),
-      onViewportResize: () => {
+      onViewportResize: useCallbackRef(() => {
         browser.send({ type: "xyflow.resized" });
-      },
+      }),
       onNodesChange: useCallbackRef((changes) => {
         browser.send({ type: "xyflow.applyNodeChages", changes });
       }),
@@ -101,34 +85,65 @@ const RelationshipsBrowserInner = memo(() => {
       fitView: false,
       pannable: true,
       zoomable: true,
-      children: [
-        /* @__PURE__ */ jsx(
-          TopLeftPanel,
-          {
-            enableNavigationMenu,
-            subjectId,
-            hasStepBack,
-            hasStepForward,
-            onStepBack: () => historyOps.back(),
-            onStepForward: () => historyOps.forward()
-          }
-        ),
-        closeable && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            color: "gray",
-            onClick: (e) => {
-              e.stopPropagation();
-              browser.close();
-            },
-            children: /* @__PURE__ */ jsx(IconX, {})
-          }
-        ) })
-      ]
+      children: initialized && /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
     }
   ) });
 });
+const selector2 = (state) => ({
+  subjectId: state.context.subject,
+  closeable: state.context.closeable,
+  enableNavigationMenu: state.context.enableNavigationMenu
+});
+const RelationshipsBrowserInner = memo(() => {
+  const browser = useRelationshipsBrowser();
+  const {
+    subjectId,
+    closeable,
+    enableNavigationMenu
+  } = useRelationshipsBrowserState(selector2);
+  const layouted = useRelationshipsView(subjectId);
+  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      historyOps.set(subjectId);
+    }
+  }, [subjectId]);
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      browser.navigateTo(historySubjectId);
+    }
+  }, [historySubjectId]);
+  useEffect(() => {
+    browser.send({ type: "update.view", layouted });
+  }, [layouted]);
+  const hasStepBack = current > 0;
+  const hasStepForward = current + 1 < history.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TopLeftPanel,
+      {
+        enableNavigationMenu,
+        subjectId,
+        hasStepBack,
+        hasStepForward,
+        onStepBack: () => historyOps.back(),
+        onStepForward: () => historyOps.forward()
+      }
+    ),
+    closeable && /* @__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 = ({
   enableNavigationMenu,
   subjectId,

package/dist/overlays/relationships-browser/_types.d.ts

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, Fqn, RelationshipLineType, ViewId } from '@likec4/core';
+import { Color, DiagramNode, Fqn, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipsBrowserTypes {
     type Column = 'incomers' | 'subjects' | 'outgoers';
@@ -31,6 +31,7 @@ export declare namespace RelationshipsBrowserTypes {
     type Node = ElementNode | CompoundNode | EmptyNode;
     type NodeData = Node['data'];
     type EdgeData = Base.EdgeData<{
+        relations: NonEmptyArray<RelationId>;
         color: Color | undefined;
         label: string | null;
         navigateTo: ViewId | null;

package/dist/overlays/relationships-browser/actor.d.ts

@@ -1,9 +1,10 @@
 import { BBox, DiagramView, Fqn } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } from '@xyflow/react';
 import { ActorLogic, ActorRefFromLogic, MachineSnapshot, SnapshotFrom } from 'xstate';
 import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
+export type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>>;
 export type Input = {
     subject: Fqn;
     scope?: DiagramView | null;
@@ -14,14 +15,17 @@ export type Context = Readonly<Input & {
     closeable: boolean;
     enableNavigationMenu: boolean;
     xyflow: XYFLowInstance | null;
+    xystore: XYStoreApi | null;
     initialized: boolean;
     layouted: LayoutRelationshipsViewResult | null;
+    navigateFromNode: string | null;
     xynodes: RelationshipsBrowserTypes.Node[];
     xyedges: RelationshipsBrowserTypes.Edge[];
 }>;
 export type Events = {
     type: 'xyflow.init';
     instance: XYFLowInstance;
+    store: XYStoreApi;
 } | {
     type: 'xyflow.nodeClick';
     node: RelationshipsBrowserTypes.Node;
@@ -46,6 +50,8 @@ export type Events = {
 } | {
     type: 'xyflow.edgeMouseLeave';
     edge: RelationshipsBrowserTypes.Edge;
+} | {
+    type: 'xyflow.updateNodeInternals';
 } | {
     type: 'fitDiagram';
     duration?: number;
@@ -53,13 +59,20 @@ export type Events = {
 } | {
     type: 'navigate.to';
     subject: Fqn;
+    fromNode?: string | undefined;
+} | {
+    type: 'update.xydata';
+    xynodes: RelationshipsBrowserTypes.Node[];
+    xyedges: RelationshipsBrowserTypes.Edge[];
 } | {
     type: 'update.view';
     layouted: LayoutRelationshipsViewResult;
 } | {
     type: 'close';
 };
-export declare const relationshipsBrowserActor: ActorLogic<MachineSnapshot<Context, Events, any, "opening" | "active" | "closed", any, any, any, any>, Events, Input, any, any>;
+export declare const relationshipsBrowserActor: ActorLogic<MachineSnapshot<Context, Events, any, "initializing" | "waiting-data" | "closed" | {
+    active: "idle" | "layouting";
+}, "active", any, any, any>, Events, Input, any, any>;
 export type RelationshipsBrowserLogic = typeof relationshipsBrowserActor;
 export type RelationshipsBrowserActorRef = ActorRefFromLogic<typeof relationshipsBrowserActor>;
 export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserActorRef>;