@likec4/diagram 1.31.0 → 1.32.0

package/dist/hooks/useXYFlow.d.ts

@@ -2,7 +2,8 @@ import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId } from '@likec4/core';
+import { Dimmed } from '../base/types.Base';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -33,18 +34,18 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     data: {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../base").Base.Dimmed;
+        dimmed?: Dimmed;
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
         color: Color | undefined;
+        head: RelationshipArrowType | undefined;
         line: RelationshipLineType | undefined;
         dir: "forward" | "back" | "both" | undefined;
-        tail: RelationshipArrowType | undefined;
-        head: RelationshipArrowType | undefined;
         technology: string | undefined;
+        tail: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
-        navigateTo: ViewId<string> | undefined;
+        navigateTo: ViewId<string> | null | undefined;
         notes: string | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
@@ -82,18 +83,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -129,18 +130,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -175,18 +176,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -221,18 +222,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -267,18 +268,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -313,18 +314,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -360,18 +361,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -406,18 +407,18 @@ export declare const useXYStoreApi: () => {
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
+            dimmed?: Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
             color: Color | undefined;
+            head: RelationshipArrowType | undefined;
             line: RelationshipLineType | undefined;
             dir: "forward" | "back" | "both" | undefined;
-            tail: RelationshipArrowType | undefined;
-            head: RelationshipArrowType | undefined;
             technology: string | undefined;
+            tail: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
-            navigateTo: ViewId<string> | undefined;
+            navigateTo: ViewId<string> | null | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
@@ -426,4 +427,5 @@ export declare const useXYStoreApi: () => {
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
 export declare const useXYInternalNode: (id: string) => InternalNode<Types.Node> | undefined;
+export declare function useCurrentZoom(): number;
 export declare function useIsZoomTooSmall(): boolean;

package/dist/hooks/useXYFlow.js

@@ -11,9 +11,13 @@ function useXYStore(selector, equalityFn) {
 }
 const useXYStoreApi = useStoreApi;
 const useXYInternalNode = useInternalNode;
+const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
+function useCurrentZoom() {
+  return useStore(selectCurrentZoom);
+}
 const selectZoom = (state) => state.transform[2] < 0.2;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
 
-export { useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };

package/dist/index.js

@@ -9,7 +9,7 @@ export { useEnabledFeatures } from './context/DiagramFeatures.js';
 export { useCurrentViewId } from './hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
-export { useLikeC4Model } from './likec4model/useLikeC4Model.js';
+export { useLikeC4Model, useLikeC4Specification } from './likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
 export { useSetState } from './hooks/useSetState.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';

package/dist/likec4diagram/DiagramUI.js

@@ -1,7 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
+import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
+import { Search } from '../search/Search.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { Controls } from './ui/controls/Controls.js';
 import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
@@ -12,15 +14,18 @@ const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
-    enableDynamicViewWalkthrough
+    enableDynamicViewWalkthrough,
+    enableSearch
   } = useEnabledFeatures();
   const overlaysActorRef = useOverlaysActorRef();
+  const searchActorRef = useSearchActorRef();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableViewTitle && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
+    enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef })
   ] });
 });
 DiagramUI.displayName = "DiagramUI";

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, NamedExoticComponent } from 'react';
+import { PropsWithChildren } from 'react';
+import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps' | 'renderNodes'>>;
-export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps' | 'renderNodes'>>>;
+export declare function LikeC4DiagramXYFlow({ background, nodesDraggable, nodesSelectable, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,10 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual, deepEqual } from 'fast-equals';
-import { memo } from 'react';
+import { shallowEqual } from 'fast-equals';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
@@ -32,15 +31,14 @@ const selectXYProps = (ctx) => ({
   }
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
-const compareProps = (a, b) => a.nodesDraggable == b.nodesDraggable && a.nodesSelectable == b.nodesSelectable && a.children == b.children && deepEqual(a.background, b.background) && deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {}) && shallowEqual(a.renderNodes ?? {}, b.renderNodes ?? {});
-const LikeC4DiagramXYFlow = memo(({
+function LikeC4DiagramXYFlow({
   background = "dots",
   nodesDraggable = false,
   nodesSelectable = false,
   reactFlowProps = {},
   children,
   renderNodes
-}) => {
+}) {
   const diagram = useDiagram();
   const {
     initialized,
@@ -96,107 +94,106 @@ const LikeC4DiagramXYFlow = memo(({
   );
   useUpdateEffect(() => {
     console.warn("renderNodes changed - this might degrade performance");
-  }, [renderNodes]);
-  return /* @__PURE__ */ jsxs(
-    BaseXYFlow,
-    {
-      nodes,
-      edges,
-      className: cx(initialized ? "initialized" : "not-initialized"),
-      nodeTypes,
-      edgeTypes,
-      onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChanges", changes });
-      }),
-      onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
-      }),
-      background: initialized ? background : "transparent",
-      fitView: false,
-      onNodeClick: useCallbackRef((e, node) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.nodeClick", node });
-        onNodeClick?.(diagram.findDiagramNode(node.id), e);
-      }),
-      onEdgeClick: useCallbackRef((e, edge) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.edgeClick", edge });
-        onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
-      }),
-      onPaneClick: useCallbackRef((e) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.paneClick" });
-        onCanvasClick?.(e);
-      }),
-      onDoubleClick: useCallbackRef((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        diagram.send({ type: "xyflow.paneDblClick" });
-        onCanvasDblClick?.(e);
-      }),
-      onNodeMouseEnter: useCallbackRef((_event, node) => {
-        _event.stopPropagation();
-        if (!node.data.hovered) {
-          diagram.send({ type: "xyflow.nodeMouseEnter", node });
-        }
-      }),
-      onNodeMouseLeave: useCallbackRef((_event, node) => {
-        _event.stopPropagation();
-        if (node.data.hovered) {
-          diagram.send({ type: "xyflow.nodeMouseLeave", node });
-        }
-      }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        _event.stopPropagation();
-        if (!edge.data.hovered) {
-          diagram.send({ type: "xyflow.edgeMouseEnter", edge });
-        }
-      }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        _event.stopPropagation();
-        if (edge.data.hovered) {
-          diagram.send({ type: "xyflow.edgeMouseLeave", edge });
-        }
-      }),
-      ...props.pannable && {
-        onMove
-      },
-      onMoveEnd,
-      onInit: useCallbackRef((instance) => {
-        diagram.send({ type: "xyflow.init", instance });
-      }),
-      onNodeContextMenu: useCallbackRef((event, node) => {
-        const diagramNode = nonNullable(
-          diagram.findDiagramNode(node.id),
-          `diagramNode ${node.id} not found`
-        );
-        onNodeContextMenu?.(diagramNode, event);
-      }),
-      onEdgeContextMenu: useCallbackRef((event, edge) => {
-        const diagramEdge = nonNullable(
-          diagram.findDiagramEdge(edge.id),
-          `diagramEdge ${edge.id} not found`
-        );
-        onEdgeContextMenu?.(diagramEdge, event);
-      }),
-      onPaneContextMenu: useCallbackRef((event) => {
-        onCanvasContextMenu?.(event);
-      }),
-      ...enableFitView && {
-        onViewportResize
-      },
-      nodesDraggable: notReadOnly && nodesDraggable,
-      nodesSelectable,
-      ...notReadOnly && nodesDraggable && layoutConstraints,
-      ...props,
-      ...reactFlowProps,
-      children: [
-        /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI"),
+  }, [nodeTypes]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseXYFlow,
+      {
+        nodes,
+        edges,
+        className: cx(initialized ? "initialized" : "not-initialized"),
+        nodeTypes,
+        edgeTypes,
+        onNodesChange: useCallbackRef((changes) => {
+          diagram.send({ type: "xyflow.applyNodeChanges", changes });
+        }),
+        onEdgesChange: useCallbackRef((changes) => {
+          diagram.send({ type: "xyflow.applyEdgeChanges", changes });
+        }),
+        background: initialized ? background : "transparent",
+        fitView: false,
+        onNodeClick: useCallbackRef((e, node) => {
+          e.stopPropagation();
+          diagram.send({ type: "xyflow.nodeClick", node });
+          onNodeClick?.(diagram.findDiagramNode(node.id), e);
+        }),
+        onEdgeClick: useCallbackRef((e, edge) => {
+          e.stopPropagation();
+          diagram.send({ type: "xyflow.edgeClick", edge });
+          onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
+        }),
+        onPaneClick: useCallbackRef((e) => {
+          e.stopPropagation();
+          diagram.send({ type: "xyflow.paneClick" });
+          onCanvasClick?.(e);
+        }),
+        onDoubleClick: useCallbackRef((e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          diagram.send({ type: "xyflow.paneDblClick" });
+          onCanvasDblClick?.(e);
+        }),
+        onNodeMouseEnter: useCallbackRef((_event, node) => {
+          _event.stopPropagation();
+          if (!node.data.hovered) {
+            diagram.send({ type: "xyflow.nodeMouseEnter", node });
+          }
+        }),
+        onNodeMouseLeave: useCallbackRef((_event, node) => {
+          _event.stopPropagation();
+          if (node.data.hovered) {
+            diagram.send({ type: "xyflow.nodeMouseLeave", node });
+          }
+        }),
+        onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+          _event.stopPropagation();
+          if (!edge.data.hovered) {
+            diagram.send({ type: "xyflow.edgeMouseEnter", edge });
+          }
+        }),
+        onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+          _event.stopPropagation();
+          if (edge.data.hovered) {
+            diagram.send({ type: "xyflow.edgeMouseLeave", edge });
+          }
+        }),
+        ...props.pannable && {
+          onMove
+        },
+        onMoveEnd,
+        onInit: useCallbackRef((instance) => {
+          diagram.send({ type: "xyflow.init", instance });
+        }),
+        onNodeContextMenu: useCallbackRef((event, node) => {
+          const diagramNode = nonNullable(
+            diagram.findDiagramNode(node.id),
+            `diagramNode ${node.id} not found`
+          );
+          onNodeContextMenu?.(diagramNode, event);
+        }),
+        onEdgeContextMenu: useCallbackRef((event, edge) => {
+          const diagramEdge = nonNullable(
+            diagram.findDiagramEdge(edge.id),
+            `diagramEdge ${edge.id} not found`
+          );
+          onEdgeContextMenu?.(diagramEdge, event);
+        }),
+        onPaneContextMenu: useCallbackRef((event) => {
+          onCanvasContextMenu?.(event);
+        }),
+        ...enableFitView && {
+          onViewportResize
+        },
+        nodesDraggable: notReadOnly && nodesDraggable,
+        nodesSelectable,
+        ...notReadOnly && nodesDraggable && layoutConstraints,
+        ...props,
+        ...reactFlowProps,
         children
-      ]
-    }
-  );
-}, compareProps);
-LikeC4DiagramXYFlow.displayName = "LikeC4DiagramXYFlow";
+      }
+    ),
+    /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI")
+  ] });
+}
 
 export { LikeC4DiagramXYFlow };

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,7 +1,8 @@
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
+import { EdgeData, Dimmed } from '../../../base/types.Base';
 export declare const RelationshipEdge: FunctionComponent<{
     id: string;
     selected?: boolean;
@@ -29,21 +30,21 @@ export declare const RelationshipEdge: FunctionComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: import("../../../base").Base.EdgeData & {
+    data: EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
+        dimmed?: Dimmed;
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
         color: Color | undefined;
+        head: RelationshipArrowType | undefined;
         line: RelationshipLineType | undefined;
         dir: "forward" | "back" | "both" | undefined;
-        tail: RelationshipArrowType | undefined;
-        head: RelationshipArrowType | undefined;
         technology: string | undefined;
+        tail: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
-        navigateTo: ViewId<string> | undefined;
+        navigateTo: ViewId<string> | null | undefined;
         notes: string | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -158,6 +158,10 @@ const RelationshipEdge = customEdge((props) => {
       }
       setIsControlPointDragging(false);
     };
+    const onClick = (e2) => {
+      e2.stopPropagation();
+      e2.preventDefault();
+    };
     domNode.addEventListener("pointermove", onPointerMove, {
       capture: true
     });
@@ -165,6 +169,10 @@ const RelationshipEdge = customEdge((props) => {
       once: true,
       capture: true
     });
+    domNode.addEventListener("click", onClick, {
+      capture: true,
+      once: true
+    });
   };
   const onRmbControlPointerDown = (index, e, domNode) => {
     if (controlPoints.length <= 1) {

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { DiagramNode, nameFromFqn } from '@likec4/core';
+import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
 import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from '@tabler/icons-react';
@@ -33,13 +33,15 @@ const RelationshipsDropdownMenu = memo(({
   children
 }) => {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
-    useCallback((ctx) => ({
+    (ctx) => ({
       diagramEdge: findDiagramEdge(ctx, edgeId),
       sourceNode: findDiagramNode(ctx, source),
       targetNode: findDiagramNode(ctx, target)
-    }), [edgeId, source, target])
+    }),
+    void 0,
+    [edgeId, source, target]
   );
-  const likec4model = useLikeC4Model(true);
+  const likec4model = useLikeC4Model();
   const diagram = useDiagram();
   const portalProps = useMantinePortalProps();
   const onClickOpenOverlay = useCallback((e) => {
@@ -203,7 +205,7 @@ const Relationship = forwardRef(({
   ] });
 });
 function getShortId(r, actualEndpointId, diagramNode) {
-  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : DiagramNode.modelRef(diagramNode) || "";
+  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
   return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
 }