@likec4/diagram 1.43.0 → 1.44.0

package/dist/overlays/overlaysActor.js

@@ -1,6 +1,6 @@
 import { getHotkeyHandler } from '@mantine/hooks';
 import { last, isString, reverse } from 'remeda';
-import { setup, stopChild, spawnChild, enqueueActions, fromCallback, assertEvent } from 'xstate';
+import { setup, fromCallback, assertEvent } from 'xstate';
 import { elementDetailsLogic } from './element-details/actor.js';
 import { relationshipDetailsLogic } from './relationship-details/actor.js';
 import { relationshipsBrowserLogic } from './relationships-browser/actor.js';
@@ -19,7 +19,7 @@ const hotkeyLogic = fromCallback(({ sendBack }) => {
     document.body.removeEventListener("keydown", handler, { capture: true });
   };
 });
-const _overlaysActorLogic = setup({
+const machine = setup({
   types: {
     context: {},
     events: {},
@@ -32,119 +32,6 @@ const _overlaysActorLogic = setup({
     relationshipsBrowser: relationshipsBrowserLogic,
     hotkey: hotkeyLogic
   },
-  actions: {
-    "closeLastOverlay": enqueueActions(({ context, enqueue }) => {
-      if (context.overlays.length === 0) {
-        return;
-      }
-      const lastOverlay = last(context.overlays)?.id;
-      if (!lastOverlay) {
-        return;
-      }
-      enqueue.sendTo(lastOverlay, { type: "close" });
-      enqueue.stopChild(lastOverlay);
-      enqueue.assign({
-        overlays: context.overlays.filter((o) => o.id !== lastOverlay)
-      });
-    }),
-    "closeSpecificOverlay": enqueueActions(({ context, enqueue }, params) => {
-      const toClose = context.overlays.find((o) => o.id === params.actorId)?.id;
-      if (toClose) {
-        enqueue.sendTo(toClose, { type: "close" });
-        enqueue.stopChild(toClose);
-        enqueue.assign({
-          overlays: context.overlays.filter((o) => o.id !== toClose)
-        });
-      }
-    }),
-    "closeAllOverlays": enqueueActions(({ context, enqueue }) => {
-      for (const { id } of reverse(context.overlays)) {
-        enqueue.sendTo(id, { type: "close" });
-        enqueue.stopChild(id);
-      }
-      enqueue.assign({ overlays: [] });
-    }),
-    "openElementDetails": enqueueActions(({ context, enqueue, event }) => {
-      assertEvent(event, "open.elementDetails");
-      if (context.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject)) {
-        return;
-      }
-      const id = `elementDetails-${context.seq}`;
-      enqueue.spawnChild("elementDetails", {
-        id,
-        input: event
-      });
-      enqueue.assign({
-        seq: context.seq + 1,
-        overlays: [
-          ...context.overlays,
-          {
-            type: "elementDetails",
-            id,
-            subject: event.subject
-          }
-        ]
-      });
-    }),
-    "openRelationshipDetails": enqueueActions(({ context, enqueue, event }) => {
-      assertEvent(event, "open.relationshipDetails");
-      const currentOverlay = last(context.overlays);
-      if (currentOverlay?.type === "relationshipDetails") {
-        enqueue.sendTo(currentOverlay.id, {
-          ...event,
-          type: "navigate.to"
-        });
-        return;
-      }
-      const id = `relationshipDetails-${context.seq}`;
-      enqueue.spawnChild("relationshipDetails", {
-        id,
-        input: event
-      });
-      enqueue.assign({
-        seq: context.seq + 1,
-        overlays: [
-          ...context.overlays,
-          {
-            type: "relationshipDetails",
-            id
-          }
-        ]
-      });
-    }),
-    "openRelationshipsBrowser": enqueueActions(({ context, enqueue, event }) => {
-      assertEvent(event, "open.relationshipsBrowser");
-      const currentOverlay = last(context.overlays);
-      if (currentOverlay?.type === "relationshipsBrowser") {
-        enqueue.sendTo(currentOverlay.id, {
-          type: "navigate.to",
-          subject: event.subject,
-          viewId: event.viewId
-        });
-        return;
-      }
-      const id = `relationshipsBrowser-${context.seq}`;
-      enqueue.spawnChild("relationshipsBrowser", {
-        id,
-        input: event
-      });
-      enqueue.assign({
-        seq: context.seq + 1,
-        overlays: [
-          ...context.overlays,
-          {
-            type: "relationshipsBrowser",
-            id,
-            subject: event.subject
-          }
-        ]
-      });
-    }),
-    "listenToEsc": spawnChild("hotkey", {
-      id: "hotkey"
-    }),
-    "stopListeningToEsc": stopChild("hotkey")
-  },
   guards: {
     "has overlays?": ({ context }) => context.overlays.length > 0,
     "close specific overlay?": ({ context, event }) => {
@@ -160,7 +47,124 @@ const _overlaysActorLogic = setup({
       return lastOverlay?.type === "relationshipsBrowser";
     }
   }
-}).createMachine({
+});
+const closeLastOverlay = () => machine.enqueueActions(({ context, enqueue }) => {
+  if (context.overlays.length === 0) {
+    return;
+  }
+  const lastOverlay = last(context.overlays)?.id;
+  if (!lastOverlay) {
+    return;
+  }
+  enqueue.sendTo(lastOverlay, { type: "close" });
+  enqueue.stopChild(lastOverlay);
+  enqueue.assign({
+    overlays: context.overlays.filter((o) => o.id !== lastOverlay)
+  });
+});
+const closeSpecificOverlay = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "close");
+  const actorId = event.actorId;
+  if (!isString(actorId)) {
+    return;
+  }
+  const toClose = context.overlays.find((o) => o.id === actorId)?.id;
+  if (toClose) {
+    enqueue.sendTo(toClose, { type: "close" });
+    enqueue.stopChild(toClose);
+    enqueue.assign({
+      overlays: context.overlays.filter((o) => o.id !== toClose)
+    });
+  }
+});
+const closeAllOverlays = () => machine.enqueueActions(({ context, enqueue }) => {
+  for (const { id } of reverse(context.overlays)) {
+    enqueue.sendTo(id, { type: "close" });
+    enqueue.stopChild(id);
+  }
+  enqueue.assign({ overlays: [] });
+});
+const openElementDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "open.elementDetails");
+  if (context.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject)) {
+    return;
+  }
+  const id = `elementDetails-${context.seq}`;
+  enqueue.spawnChild("elementDetails", {
+    id,
+    input: event
+  });
+  enqueue.assign({
+    seq: context.seq + 1,
+    overlays: [
+      ...context.overlays,
+      {
+        type: "elementDetails",
+        id,
+        subject: event.subject
+      }
+    ]
+  });
+});
+const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "open.relationshipDetails");
+  const currentOverlay = last(context.overlays);
+  if (currentOverlay?.type === "relationshipDetails") {
+    enqueue.sendTo(currentOverlay.id, {
+      ...event,
+      type: "navigate.to"
+    });
+    return;
+  }
+  const id = `relationshipDetails-${context.seq}`;
+  enqueue.spawnChild("relationshipDetails", {
+    id,
+    input: event
+  });
+  enqueue.assign({
+    seq: context.seq + 1,
+    overlays: [
+      ...context.overlays,
+      {
+        type: "relationshipDetails",
+        id
+      }
+    ]
+  });
+});
+const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "open.relationshipsBrowser");
+  const currentOverlay = last(context.overlays);
+  if (currentOverlay?.type === "relationshipsBrowser") {
+    enqueue.sendTo(currentOverlay.id, {
+      type: "navigate.to",
+      subject: event.subject,
+      viewId: event.viewId
+    });
+    return;
+  }
+  const id = `relationshipsBrowser-${context.seq}`;
+  enqueue.spawnChild("relationshipsBrowser", {
+    id,
+    input: event
+  });
+  enqueue.assign({
+    seq: context.seq + 1,
+    overlays: [
+      ...context.overlays,
+      {
+        type: "relationshipsBrowser",
+        id,
+        subject: event.subject
+      }
+    ]
+  });
+});
+const listenToEsc = () => machine.spawnChild("hotkey", {
+  id: "hotkey"
+});
+const stopListeningToEsc = () => machine.stopChild("hotkey");
+const _overlaysActorLogic = machine.createMachine({
   id: "overlays",
   context: () => ({
     seq: 1,
@@ -169,17 +173,17 @@ const _overlaysActorLogic = setup({
   initial: "idle",
   on: {
     "open.elementDetails": {
-      actions: "openElementDetails",
+      actions: openElementDetails(),
       target: ".active",
       reenter: false
     },
     "open.relationshipDetails": {
-      actions: "openRelationshipDetails",
+      actions: openRelationshipDetails(),
       target: ".active",
       reenter: false
     },
     "open.relationshipsBrowser": {
-      actions: "openRelationshipsBrowser",
+      actions: openRelationshipsBrowser(),
       target: ".active",
       reenter: false
     }
@@ -187,27 +191,24 @@ const _overlaysActorLogic = setup({
   states: {
     idle: {},
     active: {
-      entry: "listenToEsc",
-      exit: "stopListeningToEsc",
+      entry: listenToEsc(),
+      exit: stopListeningToEsc(),
       on: {
         "close": [
           {
             guard: "close specific overlay?",
-            actions: {
-              type: "closeSpecificOverlay",
-              params: ({ event }) => ({ actorId: event.actorId })
-            },
+            actions: closeSpecificOverlay(),
             target: "closing"
           },
           {
-            actions: "closeLastOverlay",
+            actions: closeLastOverlay(),
             target: "closing"
           }
         ],
         "close.all": {
           actions: [
-            "closeAllOverlays",
-            "stopListeningToEsc"
+            closeAllOverlays(),
+            stopListeningToEsc()
           ],
           target: "idle"
         }
@@ -220,15 +221,15 @@ const _overlaysActorLogic = setup({
           target: "active"
         },
         {
-          actions: "stopListeningToEsc",
+          actions: stopListeningToEsc(),
           target: "idle"
         }
       ]
     }
   },
   exit: [
-    "stopListeningToEsc",
-    "closeAllOverlays"
+    stopListeningToEsc(),
+    closeAllOverlays()
   ]
 });
 const overlaysActorLogic = _overlaysActorLogic;

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

@@ -17,9 +17,9 @@ import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -148,6 +148,7 @@ const RelationshipDetailsInner = memo(() => {
         browser.send({ type: "xyflow.selectionChange", ...params });
       }),
       nodesDraggable: false,
+      nodesSelectable: true,
       fitView: false,
       pannable: true,
       zoomable: true,

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

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

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

@@ -1,6 +1,6 @@
 import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId } from '@likec4/core';
 import { EdgeChange, NodeChange, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
-import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
+import { ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
 import { RelationshipDetailsTypes } from './_types';
 import { LayoutResult } from './layout';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
@@ -131,6 +131,10 @@ declare const _relationshipDetailsLogic: StateMachine<Readonly<{
         type: "updateLayoutData";
         params: NonReducibleUnknown;
     };
+    "open relationship source": {
+        type: "open relationship source";
+        params: NonReducibleUnknown;
+    };
 }>, Values<{
     isReady: {
         type: "isReady";
@@ -430,6 +434,10 @@ declare const _relationshipDetailsLogic: StateMachine<Readonly<{
                             type: "updateLayoutData";
                             params: NonReducibleUnknown;
                         };
+                        "open relationship source": {
+                            type: "open relationship source";
+                            params: NonReducibleUnknown;
+                        };
                     }>, Values<{
                         isReady: {
                             type: "isReady";
@@ -531,6 +539,9 @@ declare const _relationshipDetailsLogic: StateMachine<Readonly<{
                 readonly 'xyflow.paneDblClick': {
                     readonly actions: "xyflow:fitDiagram";
                 };
+                readonly 'xyflow.edgeClick': {
+                    readonly actions: "open relationship source";
+                };
                 readonly 'navigate.to': {
                     readonly actions: ActionFunction<Readonly<{
                         subject: Subject;
@@ -644,7 +655,8 @@ declare const _relationshipDetailsLogic: StateMachine<Readonly<{
         };
     };
 }>;
-export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof _relationshipDetailsLogic> {
+type InferredMachine = typeof _relationshipDetailsLogic;
+export interface RelationshipDetailsLogic extends InferredMachine {
 }
 export declare const relationshipDetailsLogic: RelationshipDetailsLogic;
 export interface RelationshipDetailsActorRef extends ActorRefFromLogic<RelationshipDetailsLogic> {

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

@@ -2,12 +2,13 @@ import { invariant } from '@likec4/core';
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { prop, isString } from 'remeda';
-import { setup, assign, assertEvent, cancel, raise, enqueueActions } from 'xstate';
+import { setup, enqueueActions, assign, assertEvent, cancel, raise } from 'xstate';
 import { MinZoom } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';
+import { typedSystem } from '../../likec4diagram/state/utils.js';
 import { layoutResultToXYFlow } from './layout-to-xyflow.js';
-import { Base } from '../../base/types.js';
+import { Base } from '../../base/Base.js';
 
 function inputToSubject(input) {
   if ("edgeId" in input) {
@@ -49,7 +50,7 @@ const _relationshipDetailsLogic = setup({
           minZoom: MinZoom,
           maxZoom,
           padding: ViewPadding,
-          ...duration > 0 && { duration }
+          ...duration > 0 && { duration, interpolate: "smooth" }
         }).catch(console.error);
       }
     },
@@ -100,6 +101,16 @@ const _relationshipDetailsLogic = setup({
         xyedges: updateEdges(context.xyedges, xyedges),
         bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds
       };
+    }),
+    "open relationship source": enqueueActions(({ system, event }) => {
+      if (event.type !== "xyflow.edgeClick") {
+        return;
+      }
+      const diagramActor = typedSystem(system).diagramActorRef;
+      const relationId = event.edge.data.relationId;
+      if (relationId) {
+        diagramActor.send({ type: "open.source", relation: relationId });
+      }
     })
   },
   guards: {
@@ -246,6 +257,9 @@ const _relationshipDetailsLogic = setup({
         "xyflow.paneDblClick": {
           actions: "xyflow:fitDiagram"
         },
+        "xyflow.edgeClick": {
+          actions: "open relationship source"
+        },
         "navigate.to": {
           actions: assign({
             subject: ({ event }) => inputToSubject(event.params),

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

@@ -1,11 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useCurrentViewId } from '../../../hooks/useCurrentView.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

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

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getBezierPath } from '@xyflow/system';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { memoEdge } from '../../../base-primitives/memoEdge.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';

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

@@ -3,7 +3,10 @@ import { ElementActions } from './ElementActions.js';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
 import { memoNode } from '../../../base-primitives/memoNode.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';

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

@@ -1,8 +1,8 @@
 import { nonNullable } from '@likec4/core';
-import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { createContext, useMemo, useContext } from 'react';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 
 const RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {

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

@@ -1,22 +1,23 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
-import { useCallbackRef, useStateHistory } from '@mantine/hooks';
+import { useStateHistory } from '@mantine/hooks';
 import { useRafEffect } from '@react-hookz/web';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
 import { useRef, memo, useEffect } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -103,6 +104,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
         browser.send({ type: "xyflow.selectionChange", ...params });
       }),
       nodesDraggable: false,
+      nodesSelectable: true,
       pannable: true,
       zoomable: true,
       children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})

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

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;