@likec4/diagram 1.36.1 → 1.37.0

package/src/custom/{customNodes.tsx → customNodes.ts}

@@ -1,39 +1,43 @@
 import type { DeployedInstanceModel, DeploymentNodeModel, NodeModel } from '@likec4/core/model'
 import type { Any } from '@likec4/core/types'
-import { DEV } from 'esm-env'
-import type { ReactNode } from 'react'
+import type { FunctionComponent } from 'react'
+import { jsx } from 'react/jsx-runtime'
 import { customNode } from '../base/primitives'
 import type { NodeProps } from '../base/types'
 import type { Types } from '../likec4diagram/types'
 import { useLikeC4ViewModel } from '../likec4model/useLikeC4Model'
 
-function customDiagramNode<
-  P extends {
-    nodeProps: NodeProps<Types.NodeData>
-    nodeModel: NodeModel
-  },
->(
-  Node: (props: P) => ReactNode,
-): (props: P['nodeProps']) => ReactNode {
-  return customNode((props) => {
-    const viewModel = useLikeC4ViewModel(props.data.viewId)
+type CustomDiagramNodeProps = {
+  nodeProps: NodeProps<Types.NodeData, string>
+  nodeModel: NodeModel
+}
+type CustomNodeComponent<P extends CustomDiagramNodeProps> = (
+  impl: FunctionComponent<P>,
+) => FunctionComponent<P['nodeProps']>
+
+function customDiagramNode<const P extends CustomDiagramNodeProps>(
+  Node: FunctionComponent<P>,
+): FunctionComponent<P['nodeProps']> {
+  return customNode((props: NodeProps<Types.NodeData, string>) => {
+    // @ts-ignore because dts-bundler fails to infer types
+    const viewId = props.data.viewId
+    const viewModel = useLikeC4ViewModel(viewId)
     if (!viewModel) {
-      if (DEV) {
-        throw new Error(`View "${props.data.viewId}" not found, requested by customNode "${props.id}"`)
-      }
-      console.error(`View "${props.data.viewId}" not found in likec4model`, { props })
+      console.error(`View "${viewId}" not found, requested by customNode "${props.data.id}"`, { props })
+      return null
+    }
+    const model = viewModel.findNode(props.data.id)
+    if (!model) {
+      console.error(
+        `Node "${props.id}" not found in view "${viewId}", requested by customNode "${props.data.id}"`,
+        { props },
+      )
       return null
     }
-    const model = viewModel.node(props.id)
-    // @ts-ignore
-    return <Node nodeProps={props} nodeModel={model} />
-  }) as (props: P['nodeProps']) => ReactNode
+    return jsx(Node, { nodeProps: props, nodeModel: model })
+  }) as any
 }
 
-export type CustomElementNodeProps<M extends Any = Any> = {
-  nodeProps: NodeProps<Types.ElementNodeData, 'element'>
-  nodeModel: NodeModel.WithElement<M>
-}
 /**
  * Node that will be used to render the element from the model.
  * It is a leaf node, i.e. it does not have children.
@@ -87,12 +91,12 @@ export type CustomElementNodeProps<M extends Any = Any> = {
  * ))
  * ```
  */
-export const elementNode = customDiagramNode<CustomElementNodeProps>
-
-export type CustomDeploymentNodeProps<M extends Any = Any> = {
-  nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>
-  nodeModel: NodeModel.WithDeploymentElement<M>
+export const elementNode: CustomNodeComponent<CustomElementNodeProps> = customDiagramNode as any
+export type CustomElementNodeProps = {
+  nodeProps: NodeProps<Types.ElementNodeData, 'element'>
+  nodeModel: NodeModel.WithElement<Any>
 }
+
 /**
  * Node that will be used to render the element from deployment model.
  * It is a leaf node, i.e. it does not have children.
@@ -141,12 +145,12 @@ export type CustomDeploymentNodeProps<M extends Any = Any> = {
  * ))
  * ```
  */
-export const deploymentNode = customDiagramNode<CustomDeploymentNodeProps>
-
-export type CustomCompoundElementNodeProps<M extends Any = Any> = {
-  nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>
-  nodeModel: NodeModel.WithElement<M>
+export const deploymentNode: CustomNodeComponent<CustomDeploymentNodeProps> = customDiagramNode as any
+export type CustomDeploymentNodeProps = {
+  nodeProps: NodeProps<Types.DeploymentElementNodeData, 'deployment'>
+  nodeModel: NodeModel.WithDeploymentElement<Any>
 }
+
 /**
  * Node that will be used to render the compound element from the model.
  * It is a container node, i.e. it has children.
@@ -185,12 +189,12 @@ export type CustomCompoundElementNodeProps<M extends Any = Any> = {
  * ))
  * ```
  */
-export const compoundElementNode = customDiagramNode<CustomCompoundElementNodeProps>
-
-export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
-  nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>
-  nodeModel: NodeModel.WithDeploymentElement<M>
+export const compoundElementNode: CustomNodeComponent<CustomCompoundElementNodeProps> = customDiagramNode as any
+export type CustomCompoundElementNodeProps = {
+  nodeProps: NodeProps<Types.CompoundElementNodeData, 'compound-element'>
+  nodeModel: NodeModel.WithElement<Any>
 }
+
 /**
  * Node that will be used to render the compound from the deployment model.
  * It is a container node, i.e. it has children.
@@ -223,12 +227,12 @@ export type CustomCompoundDeploymentNodeProps<M extends Any = Any> = {
  *   </CompoundNodeContainer>
  * ```
  */
-export const compoundDeploymentNode = customDiagramNode<CustomCompoundDeploymentNodeProps>
-
-export type CustomViewGroupNodeProps<M extends Any = Any> = {
-  nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>
-  nodeModel: NodeModel.IsGroup<M>
+export const compoundDeploymentNode: CustomNodeComponent<CustomCompoundDeploymentNodeProps> = customDiagramNode as any
+export type CustomCompoundDeploymentNodeProps = {
+  nodeProps: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>
+  nodeModel: NodeModel.WithDeploymentElement<Any>
 }
+
 /**
  * Node that will be used to render the view group from the model.
  *
@@ -254,14 +258,16 @@ export type CustomViewGroupNodeProps<M extends Any = Any> = {
  *   </CompoundNodeContainer>
  * ```
  */
-export const viewGroupNode = customDiagramNode<CustomViewGroupNodeProps>
+export const viewGroupNode: CustomNodeComponent<CustomViewGroupNodeProps> = customDiagramNode as any
+export type CustomViewGroupNodeProps = {
+  nodeProps: NodeProps<Types.ViewGroupNodeData, 'view-group'>
+  nodeModel: NodeModel.IsGroup<Any>
+}
 
 export interface CustomNodes {
-  element?: undefined | ((props: NodeProps<Types.ElementNodeData, 'element'>) => ReactNode)
-  deployment?: undefined | ((props: NodeProps<Types.DeploymentElementNodeData, 'deployment'>) => ReactNode)
-  compoundElement?: undefined | ((props: NodeProps<Types.CompoundElementNodeData, 'compound-element'>) => ReactNode)
-  compoundDeployment?:
-    | undefined
-    | ((props: NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>) => ReactNode)
-  viewGroup?: undefined | ((props: NodeProps<Types.ViewGroupNodeData, 'view-group'>) => ReactNode)
+  element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>
+  deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>
+  compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>
+  compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>
+  viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>
 }

package/src/custom/hooks.ts

@@ -21,6 +21,7 @@ export {
   useDiagram,
   useDiagramActorRef,
   useDiagramContext,
+  useOnDiagramEvent,
 } from '../hooks/useDiagram'
 export {
   useXYFlow,
@@ -39,6 +40,12 @@ export {
   useLikeC4Specification,
   useLikeC4ViewModel,
 } from '../likec4model/useLikeC4Model'
+export {
+  useHasProjects,
+  useLikeC4ProjectId,
+  useLikeC4Projects,
+  useLikeC4ProjectsContext,
+} from '../likec4model/useLikeC4Project'
 
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps'
 export { useSetState } from '../hooks/useSetState'

package/src/globals.css

@@ -1,3 +1,7 @@
+.likec4-shadow-root dialog {
+  color: var(--mantine-color-text);
+}
+
 .likec4-root {
   overflow: hidden;
   position: relative;
@@ -12,38 +16,87 @@
 .likec4-root .react-flow:is(.not-initialized) {
   opacity: 0;
 }
+
+.likec4-root .react-flow {
+  contain: paint;
+  --xy-background-color: var(--colors-likec4-background);
+  --xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background));
+}
+
+.likec4-root .react-flow:is(.bg-transparent) {
+  background: transparent !important;
+  --xy-background-color: transparent !important;
+}
+
+.likec4-root .react-flow .react-flow__pane {
+  user-select: none;
+  --webkit-user-select: none;
+}
+
+.likec4-static-view .react-flow .react-flow__attribution {
+  display: none;
+}
+
 :where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon {
   width: 75%;
   height: 75%;
 }
 
-.likec4-root :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+.likec4-root .likec4-edge-label-container {
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: auto;
+  height: auto;
+}
+
+.likec4-root :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) {
+  opacity: 0.25;
+}
+.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]) {
   opacity: 0.25;
 }
 
 .likec4-root:not([data-likec4-reduced-graphics])
-  :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) {
+  filter: grayscale(85%) blur(3px);
+}
+.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]) {
   filter: grayscale(85%) blur(3px);
 }
 
 .likec4-root:not([data-likec4-reduced-graphics])
-  :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed="true"]) {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed="true"]) {
   transition-property: opacity, filter;
   transition-timing-function: cubic-bezier(0.50, 0, 0.2, 1);
   transition-duration: 600ms;
 }
 
+.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed="true"]) {
+  transition-property: opacity, filter;
+  transition-timing-function: cubic-bezier(0.50, 0, 0.2, 1);
+  transition-duration: 600ms;
+}
+
+.likec4-root .react-flow :where(.react-flow__nodes, .react-flow__edges, .react-flow__edgelabel-renderer) {
+  display: contents;
+}
+
+.likec4-root .react-flow__node.draggable:has(.likec4-compound-node) {
+  cursor: default;
+}
+
 [data-mantine-color-scheme="dark"]
   .likec4-root:not([data-likec4-reduced-graphics])
   :where(.react-flow__edges, .react-flow__edgelabel-renderer)
-  > svg {
+  > :where(svg, .likec4-edge-label-container) {
   mix-blend-mode: plus-lighter;
 }
 
 [data-mantine-color-scheme="light"]
   .likec4-root:not([data-likec4-reduced-graphics])
   :where(.react-flow__edges, .react-flow__edgelabel-renderer)
-  > svg {
+  > :where(svg, .likec4-edge-label-container) {
   mix-blend-mode: screen;
 }
 

package/src/hooks/index.ts

@@ -2,4 +2,4 @@ export { useMantinePortalProps } from './useMantinePortalProps'
 export { useSetState } from './useSetState'
 export { useUpdateEffect } from './useUpdateEffect'
 export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
-export type { XYStoreApi } from './useXYFlow'
+export type { XYFlowInstance, XYStoreApi, XYStoreState } from './useXYFlow'

package/src/hooks/useDiagram.ts

@@ -3,8 +3,6 @@ import {
   type DiagramEdge,
   type DiagramNode,
   type DiagramView,
-  type EdgeId,
-  type Fqn,
   type NodeId,
   type NodeNotation as ElementNotation,
   type scalar,
@@ -13,7 +11,7 @@ import {
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { type DependencyList, useCallback, useMemo } from 'react'
+import { type DependencyList, useCallback, useEffect, useMemo, useRef } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
@@ -24,8 +22,7 @@ import type {
   DiagramActorRef,
   DiagramActorSnapshot,
   DiagramContext,
-  SyncLayoutActorRef,
-  SyncLayoutActorSnapshot,
+  DiagramEmittedEvents,
 } from '../state/types'
 import { findDiagramEdge, findDiagramNode } from '../state/utils'
 import { useDiagramActorRef } from './safeContext'
@@ -102,10 +99,15 @@ export interface DiagramApi {
    * @warning Do not use in render phase
    */
   findDiagramNode(xynodeId: string): DiagramNode | null
+  /**
+   * @warning Do not use in render phase
+   */
+  findEdge(xyedgeId: string): Types.Edge | null
   /**
    * @warning Do not use in render phase
    */
   findDiagramEdge(xyedgeId: string): DiagramEdge | null
+
   startWalkthrough(): void
   walkthroughStep(direction?: 'next' | 'previous'): void
   stopWalkthrough(): void
@@ -208,6 +210,9 @@ export function useDiagram(): DiagramApi {
     findDiagramNode: (xynodeId: string): DiagramNode | null => {
       return findDiagramNode(actor.getSnapshot().context, xynodeId)
     },
+    findEdge: (xyedgeId: string): Types.Edge | null => {
+      return actor.getSnapshot().context.xyedges.find(e => e.data.id === xyedgeId) ?? null
+    },
     /**
      * @warning Do not use in render phase
      */
@@ -264,3 +269,32 @@ export function useDiagramContext<T = unknown>(
   const select = useCallback((s: DiagramActorSnapshot) => selector(s.context), deps ?? [])
   return useXstateSelector(actorRef, select, compare)
 }
+
+type PickEmittedEvent<T extends DiagramEmittedEvents['type']> = DiagramEmittedEvents & { type: T }
+
+/**
+ * Subscribe to diagram emitted events
+ * @example
+ * ```tsx
+ * useOnDiagramEvent('navigateTo', ({viewId}) => {
+ *   console.log('Navigating to view', viewId)
+ * })
+ * ```
+ */
+export function useOnDiagramEvent<T extends DiagramEmittedEvents['type']>(
+  event: T,
+  callback: (event: PickEmittedEvent<T>) => void,
+): void {
+  const actorRef = useDiagramActorRef()
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
+
+  useEffect(() => {
+    const subscription = actorRef.on(event, (event) => {
+      callbackRef.current(event as DiagramEmittedEvents & { type: T })
+    })
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [actorRef])
+}

package/src/hooks/useXYFlow.ts

@@ -13,8 +13,10 @@ import type { Types } from '../likec4diagram/types'
 export const useXYFlow = useReactFlow<Types.Node, Types.Edge>
 export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>
 
+export type XYStoreState = ReactFlowState<Types.Node, Types.Edge>
+
 export function useXYStore<StateSlice = unknown>(
-  selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice,
+  selector: (state: XYStoreState) => StateSlice,
   equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean,
 ): StateSlice {
   return useStore(

package/src/index.ts

@@ -29,6 +29,7 @@ export type {
   CustomNodes,
   DiagramNodeWithNavigate,
   ElementIconRenderer,
+  ElementIconRendererProps,
   LikeC4ColorScheme,
   LikeC4DiagramEventHandlers,
   LikeC4DiagramProperties,

package/src/likec4diagram/DiagramUI.tsx

@@ -6,6 +6,7 @@ import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext'
 import { NavigationPanel } from '../navigationpanel'
 import { Overlays } from '../overlays/Overlays'
 import { Search } from '../search/Search'
+import { RelationshipPopover } from './relationship-popover/RelationshipPopover'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export const DiagramUI = memo(() => {
@@ -15,6 +16,7 @@ export const DiagramUI = memo(() => {
     enableNotations,
     enableDynamicViewWalkthrough,
     enableSearch,
+    enableRelationshipDetails,
   } = useEnabledFeatures()
   const overlaysActorRef = useOverlaysActorRef()
   const searchActorRef = useSearchActorRef()
@@ -37,6 +39,7 @@ export const DiagramUI = memo(() => {
         </>
       )}
       {enableSearch && searchActorRef && <Search searchActorRef={searchActorRef} />}
+      {enableRelationshipDetails && <RelationshipPopover />}
     </>
   )
 })

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -122,11 +122,9 @@ export function LikeC4DiagramXYFlow({
         return {
           element: renderNodes?.element ?? defaultNodeTypes.element,
           deployment: renderNodes?.deployment ?? defaultNodeTypes.deployment,
-          'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes['compound-element'],
-          'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes['compound-deployment'],
-          'view-group': renderNodes?.viewGroup ?? defaultNodeTypes['view-group'],
-        } satisfies {
-          [key in Types.Node['type']]: any
+          'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes.compoundElement,
+          'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes.compoundDeployment,
+          'view-group': renderNodes?.viewGroup ?? defaultNodeTypes.viewGroup,
         }
       },
       [renderNodes],
@@ -187,16 +185,16 @@ export function LikeC4DiagramXYFlow({
             diagram.send({ type: 'xyflow.nodeMouseLeave', node })
           }
         })}
-        onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-          _event.stopPropagation()
+        onEdgeMouseEnter={useCallbackRef((event, edge) => {
+          event.stopPropagation()
           if (!edge.data.hovered) {
-            diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
+            diagram.send({ type: 'xyflow.edgeMouseEnter', edge, event })
           }
         })}
-        onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-          _event.stopPropagation()
+        onEdgeMouseLeave={useCallbackRef((event, edge) => {
+          event.stopPropagation()
           if (edge.data.hovered) {
-            diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
+            diagram.send({ type: 'xyflow.edgeMouseLeave', edge, event })
           }
         })}
         {...props.pannable && {

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -19,16 +19,13 @@ import {
   EdgePath,
 } from '../../../base/primitives'
 import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import { useDiagram, useDiagramActorSnapshot } from '../../../hooks/useDiagram'
-import { useIsPanning } from '../../../hooks/useReducedGraphics'
+import { useDiagram } from '../../../hooks/useDiagram'
 import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks/useXYFlow'
-import type { DiagramActorSnapshot } from '../../../state/types'
+import { roundDpr } from '../../../utils/roundDpr'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
 import * as edgesCss from './edges.css'
-import { NotePopover } from './NotePopover'
-import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
 import { getNodeIntersectionFromCenterToPoint } from './utils'
 
 const curve = d3line<XYPosition>()
@@ -36,15 +33,15 @@ const curve = d3line<XYPosition>()
   .x(d => d.x)
   .y(d => d.y)
 
-const selectActiveStepId = (s: DiagramActorSnapshot) => s.context.activeWalkthrough?.stepId ?? null
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
-  const isPanning = useIsPanning()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()
   const diagram = useDiagram()
-  const activeWalkthroughStep = useDiagramActorSnapshot(selectActiveStepId)
-  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeatures()
+  const {
+    enableNavigateTo,
+    enableEdgeEditing,
+  } = useEnabledFeatures()
   const {
     id,
     source,
@@ -120,8 +117,8 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     if (!path) return
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5)
     const point = {
-      x: Math.round(dompoint.x),
-      y: Math.round(dompoint.y),
+      x: roundDpr(dompoint.x),
+      y: roundDpr(dompoint.y),
     }
     setLabelPos(current => isSamePoint(current, point) ? current : point)
   }, [edgePath])
@@ -166,13 +163,16 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       }
       if (!isSamePoint(pointer, clientPoint)) {
         setIsControlPointDragging(true)
-        hasMoved = true
+        if (!hasMoved) {
+          diagram.send({ type: 'xyflow.edgeEditingStarted', edge: props.data })
+          hasMoved = true
+        }
         pointer = clientPoint
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
         const cp = controlPoints.slice()
         cp[index] = {
-          x: Math.round(x),
-          y: Math.round(y),
+          x: roundDpr(x),
+          y: roundDpr(y),
         }
         diagram.updateEdgeData(id as EdgeId, {
           controlPoints: cp,
@@ -193,6 +193,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       }
       setIsControlPointDragging(false)
     }
+
     const onClick = (e: MouseEvent) => {
       e.stopPropagation()
       e.preventDefault()
@@ -307,40 +308,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     zIndex = ZIndexes.Element + 1
   }
 
-  let edgeLabel = (
-    <EdgeLabel edgeProps={props}>
-      {!isControlPointDragging && navigateTo && (
-        <EdgeActionButton
-          {...props}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.navigateTo(navigateTo)
-          }} />
-      )}
-    </EdgeLabel>
-  )
-
-  if (!isControlPointDragging && !isPanning) {
-    const notes = props.data.notes
-    if (notes && activeWalkthroughStep === props.id) {
-      edgeLabel = (
-        <NotePopover notes={notes.txt ?? notes.md}>
-          {edgeLabel}
-        </NotePopover>
-      )
-    } else if (enableRelationshipDetails) {
-      edgeLabel = (
-        <RelationshipsDropdownMenu
-          disabled={!!dimmed}
-          source={source}
-          target={target}
-          edgeId={edgeId}>
-          {edgeLabel}
-        </RelationshipsDropdownMenu>
-      )
-    }
-  }
-
   return (
     <>
       <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
@@ -359,7 +326,16 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
             translate: isModified ? 'translate(-50%, 0)' : undefined,
           }}
         >
-          {edgeLabel}
+          <EdgeLabel edgeProps={props}>
+            {navigateTo && (
+              <EdgeActionButton
+                {...props}
+                onClick={e => {
+                  e.stopPropagation()
+                  diagram.navigateTo(navigateTo)
+                }} />
+            )}
+          </EdgeLabel>
         </EdgeLabelContainer>
       </EdgeContainer>
       {/* Render control points above edge label  */}

package/src/likec4diagram/custom/index.ts

@@ -1,3 +1,4 @@
+import type { CustomNodes } from '../../custom/customNodes'
 import type { Types } from '../types'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import {
@@ -11,10 +12,10 @@ import {
 export const BuiltinNodes = {
   element: ElementNode,
   deployment: DeploymentNode,
-  'compound-element': CompoundElementNode,
-  'compound-deployment': CompoundDeploymentNode,
-  'view-group': ViewGroupNode,
-} satisfies { [key in Types.Node['type']]: any }
+  compoundElement: CompoundElementNode,
+  compoundDeployment: CompoundDeploymentNode,
+  viewGroup: ViewGroupNode,
+} satisfies Required<CustomNodes>
 
 export const edgeTypes = {
   relationship: RelationshipEdge,