@likec4/diagram 1.17.1 → 1.19.0

package/src/ui/top-left/TopLeftPanel.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   TooltipGroup
 } from '@mantine/core'
+import { openSpotlight } from '@mantine/spotlight'
 import {
   IconAlertTriangle,
   IconChevronLeft,
@@ -31,7 +32,6 @@ import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import * as css from './styles.css'
-import { openSpotlight } from '@mantine/spotlight'
 
 const historySelector = (s: DiagramState) => ({
   showBurgerMenu: !!s.onBurgerMenuClick,
@@ -158,7 +158,7 @@ export const TopLeftPanel = () => {
       showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
       showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
       showChangeAutoLayout: s.controls && s.isEditable() && isNotActive,
-      showGoToSource: s.controls && !!s.onOpenSourceView && isNotWalkthrough,
+      showGoToSource: s.controls && !!s.onOpenSource && isNotWalkthrough,
       viewportChanged: s.viewportChanged,
       showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
     })
@@ -179,10 +179,10 @@ export const TopLeftPanel = () => {
         {showNavigationButtons && <BackwardForwardButtons />}
         <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
           {enableSearch && (
-            <Tooltip label="Search">
+            <Tooltip label="Search (Ctrl+F or ⌘+F)">
               <ActionIcon
                 onClick={() => openSpotlight()}
-                >
+              >
                 <IconSearch />
               </ActionIcon>
             </Tooltip>
@@ -192,7 +192,7 @@ export const TopLeftPanel = () => {
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
-                  store.getState().onOpenSourceView?.()
+                  store.getState().onOpenSourceView()
                 }}>
                 <IconFileSymlink stroke={1.5} />
               </ActionIcon>

package/src/utils/types.ts

@@ -0,0 +1,6 @@
+import type { Edge, Node } from '@xyflow/react'
+import type { Merge } from 'type-fest'
+
+export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }
+
+export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -5,7 +5,7 @@ import { getBoundsOfRects, getViewportForBounds } from '@xyflow/system'
 import { useUpdateEffect } from '../hooks'
 import { useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import { MinZoom } from './const'
-import type { XYFlowEdge, XYFlowNode } from './types'
+import type { DiagramFlowTypes } from './types'
 import { nodeToRect } from './utils'
 
 export function SelectEdgesOnNodeFocus() {
@@ -22,8 +22,8 @@ export function SelectEdgesOnNodeFocus() {
       return
     }
 
-    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
-    const nodeChanges = [] as NodeChange<XYFlowNode>[]
+    const edgeChanges = [] as EdgeChange<DiagramFlowTypes.Edge>[]
+    const nodeChanges = [] as NodeChange<DiagramFlowTypes.Node>[]
     const {
       edgeLookup,
       nodeLookup,

package/src/xyflow/XYFlow.tsx

@@ -8,9 +8,9 @@ import { MaxZoom, MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
-import { XYFlowEdge, XYFlowNode } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
 import { useXYFlowEvents } from './useXYFlowEvents'
+import type { DiagramFlowTypes } from './types'
 
 const nodeTypes = {
   element: ElementNode,
@@ -117,7 +117,7 @@ export function XYFlow({
   // }, [])
 
   return (
-    <ReactFlow<XYFlowNode, XYFlowEdge>
+    <ReactFlow<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
       className={className}
       style={style}
       {...colorMode && { colorMode }}

package/src/xyflow/edges/EdgeLabel.tsx

@@ -1,8 +1,8 @@
-import { extractStep, isStepEdgeId, type ViewID } from '@likec4/core'
+import { type ViewId, extractStep, isStepEdgeId } from '@likec4/core'
 import {
+  type BoxProps,
   ActionIcon,
   Box,
-  type BoxProps,
   Button,
   CloseButton,
   Group,
@@ -11,7 +11,7 @@ import {
   PopoverTarget,
   ScrollAreaAutosize,
   Stack,
-  Text
+  Text,
 } from '@mantine/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import { IconZoomScan } from '@tabler/icons-react'
@@ -21,21 +21,21 @@ import { type PropsWithChildren, type ReactNode, useState } from 'react'
 import { isTruthy } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from '../../hooks'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import type { RelationshipData } from '../types'
+import type { DiagramFlowTypes } from '../types'
 import { stopPropagation } from '../utils'
 import * as edgesCss from './edges.css'
 import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
 
 export interface EdgeLabelProps extends Omit<BoxProps, 'label'> {
   isDimmed: boolean
-  edgeData: RelationshipData
+  edgeData: DiagramFlowTypes.DiagramEdgeData
 }
 
 export const EdgeLabel = ({
   isDimmed,
   edgeData: {
     label,
-    edge
+    edge,
   },
   ...props
 }: EdgeLabelProps) => {
@@ -43,11 +43,11 @@ export const EdgeLabel = ({
   const {
     enableRelationshipDetails,
     isActiveWalkthroughStep,
-    hasOnNavigateTo
+    hasOnNavigateTo,
   } = useDiagramState(s => ({
     enableRelationshipDetails: s.enableRelationshipDetails,
     isActiveWalkthroughStep: s.activeWalkthrough?.stepId === edge.id,
-    hasOnNavigateTo: !!s.onNavigateTo
+    hasOnNavigateTo: !!s.onNavigateTo,
   }))
   const notes = isActiveWalkthroughStep ? (edge.notes ?? null) : null
   const stepNum = isStepEdgeId(edge.id) ? extractStep(edge.id) : null
@@ -79,13 +79,20 @@ export const EdgeLabel = ({
               {stepNum}
             </Box>
           )}
-          {isTruthy(label?.text) && (
-            <Box className={edgesCss.edgeLabelText}>
-              {label.text}
-            </Box>
-          )}
-          {navigateTo && <NavigateToBtn viewId={navigateTo} />}
-        </Box>
+          <Stack gap={4} align="center">
+            {isTruthy(label?.text) && (
+              <Text component="div" className={edgesCss.edgeLabelText} lineClamp={5}>
+                {label.text}
+              </Text>
+            )}
+            {isTruthy(edge.technology) && (
+              <Text component="div" className={edgesCss.edgeLabelTechnology}>
+                {'[ ' + edge.technology + ' ]'}
+              </Text>
+            )}
+            {navigateTo && <NavigateToBtn viewId={navigateTo} />}
+          </Stack>
+        </Box>,
       )}
     </EdgeLabelRenderer>
   )
@@ -95,11 +102,11 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
   const {
     nextDynamicStep,
     hasNext,
-    hasPrevious
+    hasPrevious,
   } = useDiagramState(s => ({
     nextDynamicStep: s.nextDynamicStep,
     hasNext: s.activeWalkthrough?.hasNext ?? false,
-    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false
+    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false,
   }))
 
   const [isOpened, setIsOpened] = useState(false)
@@ -110,7 +117,7 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
       setIsOpened(true)
     },
     [],
-    300
+    300,
   )
 
   return (
@@ -162,7 +169,7 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
 }
 
 type NavigateToBtnProps = {
-  viewId: ViewID
+  viewId: ViewId
 }
 
 function NavigateToBtn({ viewId }: NavigateToBtnProps) {

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -20,11 +20,11 @@ import { useXYStoreApi } from '../../hooks/useXYFlow'
 import { vector, VectorImpl } from '../../utils/vector'
 import { ZIndexes } from '../const'
 import { EdgeMarkers, type EdgeMarkerType } from '../EdgeMarkers'
-import { type XYFlowEdge } from '../types'
 import { bezierControlPoints } from '../utils'
 import { EdgeLabel } from './EdgeLabel'
 import * as edgesCss from './edges.css'
 import { getNodeIntersectionFromCenterToPoint } from './utils'
+import type { DiagramFlowTypes } from '../types'
 // import { getEdgeParams } from './utils'
 
 // function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
@@ -115,7 +115,9 @@ const sameControlPoints = (a: XYPosition[] | null, b: XYPosition[] | null) => {
   return a.every((ap, i) => isSamePoint(ap, b[i]!))
 }
 
-const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>) => (
+type DiagramEdgeProps = EdgeProps<DiagramFlowTypes.Edge>
+
+const isEqualProps = (prev: DiagramEdgeProps, next: DiagramEdgeProps) => (
   prev.id === next.id
   && eq(prev.source, next.source)
   && eq(prev.target, next.target)
@@ -134,7 +136,7 @@ const curve = d3line<XYPosition>()
   .x(d => d.x)
   .y(d => d.y)
 
-export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
+export const RelationshipEdge = memo<DiagramEdgeProps>(function RelationshipEdgeR({
   id,
   data,
   sourceX,

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -16,13 +16,14 @@ import {
   Tooltip as MantineTooltip,
   TooltipGroup
 } from '@mantine/core'
-import { IconArrowRight, IconArrowsMaximize, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
+import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { forwardRef, Fragment, type MouseEventHandler, type PropsWithChildren, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pick, pipe } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useXYNodesData } from '../../hooks'
-import type { RelationshipData } from '../types'
+import { Link } from '../../ui/Link'
 import * as css from './RelationshipsDropdownMenu.css'
+import type { DiagramFlowTypes } from '../types'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
 
@@ -43,7 +44,7 @@ export function RelationshipsDropdownMenu({
   likec4model,
   children
 }: PropsWithChildren<{
-  edge: RelationshipData['edge']
+  edge: DiagramFlowTypes.DiagramEdgeData['edge']
   disabled?: boolean | undefined
   likec4model: LikeC4Model
 }>) {
@@ -72,7 +73,7 @@ export function RelationshipsDropdownMenu({
       }
     }),
     filter(isTruthy),
-    partition(r => r.relationship.source === edge.source && r.relationship.target === edge.target)
+    partition(r => r.source.id === edge.source && r.target.id === edge.target)
   )
 
   const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
@@ -84,7 +85,7 @@ export function RelationshipsDropdownMenu({
     }
   }, [edge.id, openOverlay, enableRelationshipBrowser])
 
-  const renderRelationship = (relationship: LikeC4Model.ViewModel.Relationship, index: number) => (
+  const renderRelationship = (relationship: LikeC4Model.AnyRelation, index: number) => (
     <Fragment key={relationship.id}>
       {index > 0 && <MenuDivider opacity={0.65} />}
       <MenuItem
@@ -155,8 +156,8 @@ export function RelationshipsDropdownMenu({
 const Relationship = forwardRef<
   HTMLDivElement,
   StackProps & {
-    relationship: LikeC4Model.ViewModel.Relationship
-    edge: RelationshipData['edge']
+    relationship: LikeC4Model.AnyRelation
+    edge: DiagramFlowTypes.DiagramEdgeData['edge']
     sourceNode: DiagramNode
     targetNode: DiagramNode
   }
@@ -175,12 +176,13 @@ const Relationship = forwardRef<
     hasOnNavigateTo
   } = useDiagramState(s => ({
     viewId: s.view.id,
-    hasOnOpenSourceRelation: !!s.onOpenSourceRelation,
+    hasOnOpenSourceRelation: !!s.onOpenSource,
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const sourceId = nameFromFqn(edge.source) + r.source.id.slice(edge.source.length)
   const targetId = nameFromFqn(edge.target) + r.target.id.slice(edge.target.length)
-  const navigateTo = hasOnNavigateTo && r.relationship.navigateTo !== viewId ? r.relationship.navigateTo : undefined
+  const navigateTo = hasOnNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : undefined
+  const links = r.links
 
   return (
     <Stack ref={ref} className={clsx(css.menuItemRelationship, className)} {...props}>
@@ -223,7 +225,9 @@ const Relationship = forwardRef<
                   onPointerDownCapture={stopPropagation}
                   onClick={event => {
                     event.stopPropagation()
-                    diagramApi.getState().onOpenSourceRelation?.(r.id)
+                    diagramApi.getState().onOpenSource?.({
+                      relation: r.id
+                    })
                   }}
                   role="button"
                 >
@@ -235,6 +239,15 @@ const Relationship = forwardRef<
         )}
       </Group>
       <Box className={css.title}>{r.title || 'untitled'}</Box>
+      {r.description && <Text size="xs" c="dimmed">{r.description}</Text>}
+      {links.length > 0 && (
+        <Stack
+          gap={3}
+          justify="stretch"
+          align="stretch">
+          {links.map((link) => <Link key={link.url} link={link} />)}
+        </Stack>
+      )}
     </Stack>
   )
 })

package/src/xyflow/edges/edges.css.ts

@@ -1,6 +1,6 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine, vars, xyvars } from '../../theme-vars'
+import { mantine, transitions, vars, xyvars } from '../../theme-vars'
 
 const mixColor = createVar('mix-color')
 
@@ -11,16 +11,16 @@ export const container = style({
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
     [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
-    [xyvars.edge.strokeWidth]: '3'
-  }
+    [xyvars.edge.strokeWidth]: '3',
+  },
 })
 
 globalStyle(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
   vars: {
     [mixColor]: `white`,
     [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-  }
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+  },
 })
 
 const isSelected = '.react-flow__edge.selected'
@@ -28,29 +28,29 @@ const isSelected = '.react-flow__edge.selected'
 globalStyle(`:where(${isSelected}) ${container}`, {
   vars: {
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3'
-  }
+    [xyvars.edge.strokeWidth]: '3',
+  },
 })
 
 globalStyle(`${container}:is([data-edge-hovered='true'],[data-edge-active='true'])`, {
   vars: {
     // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3'
-  }
+    [xyvars.edge.strokeWidth]: '3',
+  },
 })
 
 globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
   vars: {
-    [xyvars.edge.strokeWidth]: '4'
-  }
+    [xyvars.edge.strokeWidth]: '4',
+  },
 })
 
 globalStyle(`.likec4-diagram .react-flow__edges > svg`, {
-  mixBlendMode: 'plus-lighter'
+  mixBlendMode: 'plus-lighter',
 })
 globalStyle(`:where([data-mantine-color-scheme="light"]) .likec4-diagram .react-flow__edges > svg`, {
-  mixBlendMode: 'screen'
+  mixBlendMode: 'screen',
 })
 
 export const dimmed = style({})
@@ -60,7 +60,7 @@ globalStyle(`.likec4-diagram .react-flow__edges > svg:has(${dimmed})`, {
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter'
+  willChange: 'opacity, filter',
 })
 
 export const edgePathBg = style({
@@ -74,15 +74,15 @@ export const edgePathBg = style({
   selectors: {
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
       strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
-      strokeOpacity: 0.15
-    }
-  }
+      strokeOpacity: 0.15,
+    },
+  },
 })
 
 // To fix issue with marker not inheriting color from path - we need to create container
 export const markerContext = style({
   fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke
+  stroke: xyvars.edge.stroke,
 })
 
 export const controlPoint = style({
@@ -96,7 +96,7 @@ export const controlPoint = style({
   ':hover': {
     stroke: mantine.colors.primaryColors.filledHover,
     strokeWidth: 9,
-    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out'
+    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
   },
   selectors: {
     [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
@@ -104,26 +104,26 @@ export const controlPoint = style({
       transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
       transitionDelay: '50ms',
       fillOpacity: 1,
-      strokeWidth: 5
-    }
-  }
+      strokeWidth: 5,
+    },
+  },
 })
 
 export const controlDragging = style({
-  cursor: 'grabbing'
+  cursor: 'grabbing',
 })
 
 globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing !important'
+  cursor: 'grabbing !important',
 })
 
 const strokeKeyframes = keyframes({
   'from': {
-    strokeDashoffset: 18 * 2 + 10
+    strokeDashoffset: 18 * 2 + 10,
   },
   'to': {
-    strokeDashoffset: 10
-  }
+    strokeDashoffset: 10,
+  },
 })
 
 export const cssEdgePath = style({
@@ -136,20 +136,20 @@ export const cssEdgePath = style({
     [`:where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
-      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
     [`:where([data-edge-dir='back']) &`]: {
-      animationDirection: 'reverse'
+      animationDirection: 'reverse',
     },
     [`${dimmed} &`]: {
-      animationPlayState: 'paused'
-    }
-  }
+      animationPlayState: 'paused',
+    },
+  },
 })
 
 const labelBorderRadius = 2
@@ -167,12 +167,12 @@ export const stepEdgeNumber = style({
   fontVariantNumeric: 'tabular-nums',
   selectors: {
     [`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) &`]: {
-      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
     },
     [`:where([data-edge-active='true']) &`]: {
-      backgroundColor: 'transparent'
-    }
-  }
+      backgroundColor: 'transparent',
+    },
+  },
 })
 
 export const varLabelX = createVar('label-x')
@@ -197,43 +197,50 @@ export const edgeLabel = style({
   borderRadius: labelBorderRadius,
   transform: varTranslate,
   vars: {
-    [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`
+    [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`,
   },
   selectors: {
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-in-out',
-      transform: `${varTranslate} scale(1.12)`
+      transform: `${varTranslate} scale(1.12)`,
     },
     [`&:has(${stepEdgeNumber})`]: {
       padding: 0,
-      gap: 2
+      gap: 2,
     },
     [`&:is(${dimmed})`]: {
       opacity: 0.3,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-      willChange: 'opacity, filter'
-    }
-  }
+      willChange: 'opacity, filter',
+    },
+  },
 })
 
 export const edgeLabelText = style({
-  textAlign: 'center',
   whiteSpaceCollapse: 'preserve-breaks',
   fontSize: rem(14),
-  lineHeight: 1.185
+  lineHeight: 1.185,
+})
+
+export const edgeLabelTechnology = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: rem(11),
+  lineHeight: 1,
+  opacity: 0.75,
 })
 
 globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
-  padding: '2px 5px 4px 2px'
+  padding: '2px 5px 4px 2px',
 })
 
 export const edgeNoteCloseButton = style({
   position: 'absolute',
   top: 4,
   right: 4,
-  zIndex: 9
+  zIndex: 9,
 })
 
 export const edgeNoteText = style({
@@ -243,52 +250,39 @@ export const edgeNoteText = style({
   textWrap: 'pretty',
   lineHeight: 1.25,
   vars: {
-    '--text-fz': mantine.fontSizes.sm
+    '--text-fz': mantine.fontSizes.sm,
   },
   '@media': {
     [mantine.largerThan('md')]: {
       vars: {
-        '--text-fz': mantine.fontSizes.md
-      }
-    }
-  }
+        '--text-fz': mantine.fontSizes.md,
+      },
+    },
+  },
 })
 
 export const cssNavigateBtn = style({
   zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  position: 'absolute',
   pointerEvents: 'all',
-  left: '50%',
-  top: 'calc(100% + 1px)',
   color: xyvars.edge.labelColor,
   cursor: 'pointer',
-  transformOrigin: 'top center',
-  opacity: 0.8,
-  transition: 'all 150ms ease-in-out',
-  transform: 'translate(-50%, 0)',
-  transitionDelay: '0ms',
+  opacity: 1,
+  transition: transitions.fast,
   backgroundColor: 'var(--ai-bg)',
   vars: {
     '--ai-bg': vars.relation.labelBgColor,
-    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`
-  },
-  selectors: {
-    [`:is(${dimmed}) &`]: {
-      display: 'none'
-    }
+    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`,
   },
   ':hover': {
-    boxShadow: mantine.shadows.lg,
-    transform: 'translate(-50%, 0) scale(1.3)',
-    opacity: 1
+    transform: 'translateY(1px) scale(1.15)',
   },
   ':active': {
-    transform: 'translate(-50%, 0) scale(1.02)'
-  }
+    transform: 'translateY(-1px) scale(0.9)',
+  },
 })
 globalStyle(`${cssNavigateBtn} .tabler-icon`, {
-  width: '75%',
-  height: '75%',
-  strokeWidth: 2
+  width: '80%',
+  height: '80%',
+  strokeWidth: 2,
 })
 export const cssNavigateBtnIcon = style({})