@likec4/diagram 1.23.1 → 1.24.1

package/dist/overlays/overlay/Overlay.js

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { useState, useRef, useLayoutEffect } from "react";
 import { body, dialog } from "./Overlay.css.js";
+import { stopPropagation } from "../../utils/xyflow.js";
 function Overlay({ children, onClose, className, classes, ...rest }) {
   const [opened, setOpened] = useState(false);
   const dialogRef = useRef(null);
@@ -42,7 +43,7 @@ function Overlay({ children, onClose, className, classes, ...rest }) {
     m.dialog,
     {
       ref: dialogRef,
-      className: clsx(dialog, classes == null ? void 0 : classes.dialog, className),
+      className: clsx(dialog, classes == null ? void 0 : classes.dialog, className, RemoveScroll.classNames.fullWidth),
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "5%",
@@ -70,18 +71,20 @@ function Overlay({ children, onClose, className, classes, ...rest }) {
       },
       onClick: (e) => {
         var _a, _b, _c;
+        e.stopPropagation();
         if (((_b = (_a = e.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
-          e.stopPropagation();
           (_c = dialogRef.current) == null ? void 0 : _c.close();
           return;
         }
       },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
       onClose: (e) => {
         e.stopPropagation();
         close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(Box, { className: clsx(body, classes == null ? void 0 : classes.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx(Box, { className: clsx(body, classes == null ? void 0 : classes.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
     }
   );
 }

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

@@ -2,19 +2,16 @@ 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 { ReactFlowProvider, 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, useRelationshipDetailsState } 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) {
@@ -23,19 +20,23 @@ function RelationshipDetails({ actorRef }) {
       defaultEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) });
+  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) }) }) });
 }
 const selector = (state) => ({
   edgeId: state.context.edgeId,
   view: state.context.view,
-  initialized: state.context.initialized
+  initialized: state.context.initialized,
+  nodes: state.context.xynodes,
+  edges: state.context.xyedges
 });
 const RelationshipDetailsInner = memo(() => {
   const browser = useRelationshipDetails();
   const {
     edgeId,
     view,
-    initialized
+    initialized,
+    nodes,
+    edges
   } = useRelationshipDetailsState(selector);
   const {
     edge,
@@ -43,11 +44,8 @@ const RelationshipDetailsInner = memo(() => {
     xyedges,
     bounds
   } = useLayoutedDetails(edgeId, view);
-  const [nodes, setNodes, onNodesChange] = useNodesState(xynodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges);
-  useUpdateEffect(() => {
-    setNodes(updateNodes(xynodes));
-    setEdges(updateEdges(xyedges));
+  useEffect(() => {
+    browser.send({ type: "update.xydata", xynodes, xyedges });
   }, [xynodes, xyedges]);
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId);
   useEffect(() => {
@@ -56,20 +54,27 @@ const RelationshipDetailsInner = memo(() => {
     }
   }, [edgeId]);
   useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      browser.navigateTo(historyEdgeId);
+    }
   }, [historyEdgeId]);
   const hasStepBack = current > 0;
   const hasStepForward = current + 1 < history.length;
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
-      id: "relationship-details",
+      id: `relationships-details-${browser.actor.sessionId}`,
       nodes,
       edges,
       className: clsx(initialized ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
-      onEdgesChange,
-      onNodesChange,
+      onNodesChange: useCallbackRef((changes) => {
+        browser.send({ type: "xyflow.applyNodeChanges", changes });
+      }),
+      onEdgesChange: useCallbackRef((changes) => {
+        browser.send({ type: "xyflow.applyEdgeChanges", changes });
+      }),
       fitViewPadding: 0.05,
       onInit: useCallbackRef((instance) => {
         browser.send({ type: "xyflow.init", instance });
@@ -89,6 +94,15 @@ const RelationshipDetailsInner = memo(() => {
       onViewportResize: useCallbackRef(() => {
         browser.send({ type: "xyflow.resized" });
       }),
+      onEdgeMouseEnter: useCallbackRef((_event, edge2) => {
+        browser.send({ type: "xyflow.edgeMouseEnter", edge: edge2 });
+      }),
+      onEdgeMouseLeave: useCallbackRef((_event, edge2) => {
+        browser.send({ type: "xyflow.edgeMouseLeave", edge: edge2 });
+      }),
+      onSelectionChange: useCallbackRef((params) => {
+        browser.send({ type: "xyflow.selectionChange", ...params });
+      }),
       nodesDraggable: false,
       fitView: false,
       pannable: true,
@@ -119,7 +133,7 @@ const RelationshipDetailsInner = memo(() => {
         ) })
       ]
     }
-  ) });
+  );
 });
 const TopLeftPanel = ({
   edge,

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

@@ -1,7 +1,10 @@
-import { BBox, DiagramView, EdgeId } from '@likec4/core';
-import { ReactFlowInstance } from '@xyflow/react';
-import { ActorLogicFrom, ActorRefFromLogic, MachineSnapshot, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
+import { BBox, DiagramView, EdgeId, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { EdgeChange, NodeChange, ReactFlowInstance } from '@xyflow/react';
+import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
+import { Base } from '../../base';
 import { RelationshipDetailsTypes } from './_types';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
 export type Input = {
     edgeId: EdgeId;
@@ -10,6 +13,8 @@ export type Input = {
 export type Context = Readonly<Input & {
     xyflow: XYFLowInstance | null;
     initialized: boolean;
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
 }>;
 export type Events = {
     type: 'xyflow.init';
@@ -20,10 +25,34 @@ export type Events = {
 } | {
     type: 'xyflow.edgeClick';
     edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'xyflow.edgeMouseEnter';
+    edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'xyflow.edgeMouseLeave';
+    edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'dim.nonhovered.edges';
+} | {
+    type: 'undim.edges';
+} | {
+    type: 'xyflow.selectionChange';
+    nodes: RelationshipDetailsTypes.Node[];
+    edges: RelationshipDetailsTypes.Edge[];
+} | {
+    type: 'xyflow.applyNodeChanges';
+    changes: NodeChange<RelationshipDetailsTypes.Node>[];
+} | {
+    type: 'xyflow.applyEdgeChanges';
+    changes: EdgeChange<RelationshipDetailsTypes.Edge>[];
 } | {
     type: 'xyflow.paneClick';
 } | {
     type: 'xyflow.resized';
+} | {
+    type: 'update.xydata';
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
 } | {
     type: 'fitDiagram';
     duration?: number;
@@ -37,6 +66,8 @@ export type Events = {
 export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
     xyflow: XYFLowInstance | null;
     initialized: boolean;
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
 }>, Events, {}, never, {
     type: "xyflow:fitDiagram";
     params: {
@@ -62,10 +93,14 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
         self: ActorRef<MachineSnapshot<Readonly<Input & {
             xyflow: XYFLowInstance | null;
             initialized: boolean;
+            xynodes: RelationshipDetailsTypes.Node[];
+            xyedges: RelationshipDetailsTypes.Edge[];
         }>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
     }) => {
         initialized: false;
         xyflow: null;
+        xynodes: never[];
+        xyedges: never[];
         edgeId: EdgeId;
         view: DiagramView;
     };
@@ -76,6 +111,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
                     readonly actions: ActionFunction<Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                     }>, {
                         type: "xyflow.init";
                         instance: XYFLowInstance;
@@ -95,16 +132,123 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
                 };
             };
             readonly on: {
+                readonly 'xyflow.edgeMouseEnter': {
+                    readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>, CancelAction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, undefined, Events>, CancelAction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, undefined, Events>, ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>];
+                };
+                readonly 'xyflow.edgeMouseLeave': {
+                    readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseLeave";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>, CancelAction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseLeave";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, undefined, Events>, ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseLeave";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>];
+                };
+                readonly 'dim.nonhovered.edges': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "dim.nonhovered.edges";
+                    }, Events, undefined, never, never, never, never, never>;
+                };
+                readonly 'undim.edges': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "undim.edges";
+                    }, Events, undefined, never, never, never, never, never>;
+                };
+                readonly 'xyflow.selectionChange': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.selectionChange";
+                        nodes: RelationshipDetailsTypes.Node[];
+                        edges: RelationshipDetailsTypes.Edge[];
+                    }, Events, undefined, never, {
+                        type: "xyflow:fitDiagram";
+                        params: {
+                            duration?: number;
+                            bounds?: BBox;
+                        } | undefined;
+                    }, {
+                        type: "enable: navigate.to";
+                        params: unknown;
+                    }, never, EventObject>;
+                };
                 readonly 'navigate.to': {
                     readonly actions: readonly [ ActionFunction<Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                     }>, {
                         type: "navigate.to";
                         edgeId: EdgeId;
                     }, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                     }>, {
                         type: "navigate.to";
                         edgeId: EdgeId;
@@ -117,6 +261,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
             readonly exit: ActionFunction<Readonly<Input & {
                 xyflow: XYFLowInstance | null;
                 initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
             }>, Events, Events, undefined, never, never, never, never, never>;
         };
         readonly closed: {
@@ -131,6 +277,47 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
                     context: Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: {
+                            id: string;
+                            source: string;
+                            target: string;
+                            sourceHandle?: string | null;
+                            targetHandle?: string | null;
+                            animated?: boolean;
+                            hidden?: boolean;
+                            deletable?: boolean;
+                            selectable?: boolean;
+                            selected?: boolean;
+                            markerStart?: EdgeMarkerType;
+                            markerEnd?: EdgeMarkerType;
+                            zIndex?: number;
+                            ariaLabel?: string;
+                            interactionWidth?: number;
+                            label?: ReactNode;
+                            labelStyle?: CSSProperties;
+                            labelShowBg?: boolean;
+                            labelBgStyle?: CSSProperties;
+                            labelBgPadding?: [number, number];
+                            labelBgBorderRadius?: number;
+                            style?: CSSProperties;
+                            className?: string;
+                            reconnectable?: boolean | HandleType;
+                            focusable?: boolean;
+                            type: "relationship";
+                            data: {
+                                relationId: RelationId;
+                                color: Color | undefined;
+                                label: string | null;
+                                technology?: string | undefined | undefined;
+                                description?: string | undefined | undefined;
+                                navigateTo: ViewId | null;
+                                line: RelationshipLineType;
+                                hovered?: boolean;
+                                active?: boolean;
+                                dimmed?: Base.Dimmed;
+                            };
+                        }[];
                     }>;
                     event: {
                         type: "fitDiagram";
@@ -148,15 +335,53 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
             readonly actions: readonly [ CancelAction<Readonly<Input & {
                 xyflow: XYFLowInstance | null;
                 initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
             }>, {
                 type: "xyflow.resized";
             }, undefined, Events>, ActionFunction<Readonly<Input & {
                 xyflow: XYFLowInstance | null;
                 initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
             }>, {
                 type: "xyflow.resized";
             }, Events, undefined, never, never, never, never, never>];
         };
+        readonly 'update.xydata': {
+            readonly actions: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }>, {
+                type: "update.xydata";
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }, Events, undefined, never, never, never, never, never>;
+        };
+        readonly 'xyflow.applyNodeChanges': {
+            readonly actions: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }>, {
+                type: "xyflow.applyNodeChanges";
+                changes: NodeChange<RelationshipDetailsTypes.Node>[];
+            }, Events, undefined, never, never, never, never, never>;
+        };
+        readonly 'xyflow.applyEdgeChanges': {
+            readonly actions: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }>, {
+                type: "xyflow.applyEdgeChanges";
+                changes: EdgeChange<RelationshipDetailsTypes.Edge>[];
+            }, Events, undefined, never, never, never, never, never>;
+        };
     };
 }>;
 export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof relationshipDetailsLogic> {

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

@@ -1,8 +1,9 @@
 import { invariant } from "@likec4/core";
-import "@xyflow/react";
+import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { prop } from "remeda";
-import { setup, cancel, raise, assign } from "xstate";
+import { setup, assign, cancel, raise, enqueueActions } from "xstate";
 import { MinZoom } from "../../base/const.js";
+import { Base } from "../../base/types.js";
 const relationshipDetailsLogic = setup({
   types: {
     context: {},
@@ -38,7 +39,9 @@ const relationshipDetailsLogic = setup({
   context: ({ input }) => ({
     ...input,
     initialized: false,
-    xyflow: null
+    xyflow: null,
+    xynodes: [],
+    xyedges: []
   }),
   states: {
     "opening": {
@@ -61,17 +64,66 @@ const relationshipDetailsLogic = setup({
         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 })
-        //     }
-        //   }),
-        // },
+        "xyflow.edgeMouseEnter": {
+          actions: [
+            assign({
+              xyedges: ({ context, event }) => {
+                const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true);
+                return context.xyedges.map((edge) => {
+                  if (edge.id === event.edge.id) {
+                    return Base.setData(edge, {
+                      hovered: true,
+                      dimmed: false
+                    });
+                  }
+                  return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                });
+              }
+            }),
+            cancel("undim.edges"),
+            cancel("dim.nonhovered.edges"),
+            raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 100 })
+          ]
+        },
+        "xyflow.edgeMouseLeave": {
+          actions: [
+            assign({
+              xyedges: ({ context, event }) => context.xyedges.map((edge) => {
+                if (edge.id === event.edge.id) {
+                  return Base.setHovered(edge, false);
+                }
+                return edge;
+              })
+            }),
+            cancel("dim.nonhovered.edges"),
+            raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
+          ]
+        },
+        "dim.nonhovered.edges": {
+          actions: assign({
+            xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
+          })
+        },
+        "undim.edges": {
+          actions: assign({
+            xyedges: ({ context }) => {
+              const hasSelected = context.xyedges.some((edge) => edge.selected === true);
+              if (hasSelected) {
+                return context.xyedges.map(
+                  (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
+                );
+              }
+              return context.xyedges.map(Base.setDimmed(false));
+            }
+          })
+        },
+        "xyflow.selectionChange": {
+          actions: enqueueActions(({ event, context, enqueue }) => {
+            if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) {
+              enqueue.raise({ type: "undim.edges" });
+            }
+          })
+        },
         "navigate.to": {
           actions: [
             assign({
@@ -105,6 +157,26 @@ const relationshipDetailsLogic = setup({
         cancel("fitDiagram"),
         raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
       ]
+    },
+    "update.xydata": {
+      actions: assign({
+        xynodes: ({ event }) => event.xynodes,
+        xyedges: ({ event }) => event.xyedges
+      })
+    },
+    "xyflow.applyNodeChanges": {
+      actions: assign({
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes);
+        }
+      })
+    },
+    "xyflow.applyEdgeChanges": {
+      actions: assign({
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges);
+        }
+      })
     }
   }
 });

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

@@ -7,6 +7,7 @@ export declare const RelationshipDetailsActorContext: Context<RelationshipDetail
 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(): {
+    actor: RelationshipDetailsActorRef;
     getState: () => Readonly< Input & {
         xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.Node, {
             id: string;
@@ -51,6 +52,8 @@ export declare function useRelationshipDetails(): {
             viewportInitialized: boolean;
         }) | null;
         initialized: boolean;
+        xynodes: import("./_types").RelationshipDetailsTypes.Node[];
+        xyedges: import("./_types").RelationshipDetailsTypes.Edge[];
     }>;
     send: (event: Events) => void;
     navigateTo: (edgeId: EdgeId) => void;

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

@@ -16,6 +16,7 @@ function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
+    actor,
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     navigateTo: (edgeId) => {
@@ -32,9 +33,12 @@ function useRelationshipDetails() {
       });
     },
     close: () => {
-      startTransition(() => {
+      var _a;
+      if (actor._parent) {
+        (_a = actor._parent) == null ? void 0 : _a.send({ type: "close", actorId: actor.id });
+      } else {
         actor.send({ type: "close" });
-      });
+      }
     }
   }), [actor]);
 }

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

@@ -205,9 +205,9 @@ function layoutRelationshipsView(data) {
     if (node.isCompound) {
       continue;
     }
-    const edgeCount = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
-    if (edgeCount > 2) {
-      node.height = node.height + (edgeCount - 3) * 14;
+    const edgeCount2 = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
+    if (edgeCount2 > 2) {
+      node.height = node.height + (edgeCount2 - 3) * 14;
     }
   }
   const nodeIds = [
@@ -255,6 +255,15 @@ function layoutRelationshipsView(data) {
       portId: id
     });
   }
+  const edgeCount = g.edgeCount();
+  if (edgeCount > 10) {
+    for (const edge of g.edges()) {
+      g.setEdge(edge, {
+        ...Sizes.edgeLabel,
+        width: edgeCount > 30 ? 800 : 400
+      });
+    }
+  }
   const dagreBounds = applyDagreLayout(g);
   const _calculatedNodeBounds = pipe(
     nodeIds,