@likec4/diagram 1.20.1 → 1.20.3

package/src/base/Link.css.ts

@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css'
+import { mantine } from '../theme-vars'
+import { easings, whereDark } from '../theme-vars.css'
+
+export const elementLink = style({
+  display: 'flex',
+  overflow: 'hidden',
+  alignItems: 'center',
+  gap: 3,
+  justifyContent: 'stretch',
+  // transition: transitions.fast,
+  border: `1px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.sm,
+  minHeight: 30,
+  padding: '3px 16px 3px 3px',
+  cursor: 'pointer',
+  color: mantine.colors.gray[7],
+  ':hover': {
+    // transitionTimingFunction: easings.out,
+    borderStyle: 'solid',
+    color: mantine.colors.defaultColor,
+    background: mantine.colors.defaultHover,
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      color: mantine.colors.dark[1],
+    },
+    [`&[data-size='sm']`]: {
+      minHeight: 22,
+      padding: '2px 8px 2px 2px',
+    },
+  },
+})
+
+export const linkIcon = style({
+  flex: 0,
+})
+
+export const linkTitleBox = style({
+  flex: '1 1 100%',
+  transition: `transform 130ms ${easings.inOut}`,
+  selectors: {
+    [`${elementLink}:hover &`]: {
+      transitionTimingFunction: easings.out,
+      transitionDelay: '50ms',
+      transform: 'translateX(1px)',
+    },
+  },
+})

package/src/base/Link.tsx

@@ -0,0 +1,66 @@
+import type { Link as LinkData } from '@likec4/core'
+import { ActionIcon, Anchor, Box, CopyButton, Text } from '@mantine/core'
+import { IconCheck, IconCopy } from '@tabler/icons-react'
+import { stopPropagation } from '../utils'
+import * as css from './Link.css'
+
+export function Link({
+  value,
+  size = 'md',
+}: {
+  size?: 'sm' | 'md'
+  value: LinkData
+}) {
+  const isNormalSize = size === 'md'
+  const url = new URL(value.url, window.location.href).toString()
+  return (
+    <CopyButton value={url}>
+      {({ copied, copy }) => (
+        <Anchor
+          href={url}
+          target="_blank"
+          underline="never"
+          className={css.elementLink}
+          data-size={size}
+          onClick={stopPropagation}>
+          <ActionIcon
+            className={css.linkIcon}
+            tabIndex={-1}
+            size={isNormalSize ? 24 : 20}
+            variant={copied ? 'light' : 'subtle'}
+            color={copied ? 'teal' : 'gray'}
+            onClick={e => {
+              e.stopPropagation()
+              e.preventDefault()
+              copy()
+            }}
+          >
+            {copied ? <IconCheck /> : <IconCopy style={{ width: '65%', opacity: 0.65 }} />}
+          </ActionIcon>
+          <Box className={css.linkTitleBox}>
+            <Text
+              component="div"
+              fz={isNormalSize ? 'xs' : 11}
+              truncate
+              lh={isNormalSize ? 1.3 : 1.2}
+              fw={value.title ? 500 : 400}>
+              {value.title || url}
+            </Text>
+            {value.title && (
+              <Text component="div" fz={isNormalSize ? 10 : 9} c={'dimmed'} lh={isNormalSize ? 1.2 : 1.1} truncate>
+                {url}
+              </Text>
+            )}
+          </Box>
+        </Anchor>
+      )}
+    </CopyButton>
+  )
+  // <Anchor href={value.url} fz={'sm'}>
+  //   {value.title || url}
+  // </Anchor><Button variant='default' size='sm'>
+  //     {value.title || value.url}
+  //   </Button>
+  //  </Box>
+  // )
+}

package/src/base/const.ts

@@ -2,6 +2,7 @@ export const ZIndexes = {
   Compound: 2,
   Edge: 4,
   Element: 6,
+  Max: 8,
 } as const
 
 export const MinZoom = 0.1

package/src/base/index.ts

@@ -8,3 +8,5 @@ export {
   type ReactFlowEdge,
   type ReactFlowNode,
 } from './types'
+
+export { Link } from './Link'

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Box } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import * as css from './CompoundActionButton.css'
@@ -19,7 +20,7 @@ export function CompoundActionButton({
   onClick,
 }: CompoundActionButtonProps) {
   return (
-    <Box className={clsx(css.container, 'compound-action')}>
+    <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'compound-action')}>
       <Box
         className={clsx('nodrag nopan', css.actionButton)}
         component={m.div}

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Box } from '@mantine/core'
 import { IconId } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import * as css from './CompoundDetailsButton.css'
@@ -19,7 +20,7 @@ export function CompoundDetailsButton({
   onClick,
 }: CompoundDetailsButtonProps) {
   return (
-    <Box className={clsx(css.container, 'details-button')} onClick={stopPropagation}>
+    <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')} onClick={stopPropagation}>
       <Box
         component={m.div}
         className={clsx('nodrag nopan', css.actionIconWrapper)}

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,7 +1,7 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { easings, mantine, transitions, vars, whereLight } from '../../../theme-vars'
+import { easings, mantine, vars, whereLight } from '../../../theme-vars'
 
 export const varCompoundOpacity = createVar('opacity')
 export const varBorderRadius = createVar('borderRadius')
@@ -9,15 +9,6 @@ export const varBorderTransparency = createVar('borderTransparency')
 export const varBorderColor = createVar('border-color')
 const varBorderWidth = createVar('border-width')
 
-export const dimmed = style({})
-globalStyle(`.react-flow__node:has(${dimmed})`, {
-  opacity: 0.25,
-  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',
-})
-
 export const container = style({
   position: 'relative',
   width: '100%',
@@ -31,6 +22,21 @@ export const container = style({
   },
 })
 
+globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
+  opacity: 0.25,
+  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',
+})
+
+globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
+  opacity: 0.25,
+  transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+  willChange: 'opacity, filter',
+})
+
 const outlineColor = fallbackVar(
   mantine.colors.primaryColors.outline,
   mantine.colors.primaryColors.filled,

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -54,7 +54,6 @@ export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundN
         component={m.div}
         className={clsx([
           css.container,
-          isDimmed && css.dimmed,
           'likec4-compound-node',
         ])}
         initial={false}
@@ -62,6 +61,7 @@ export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundN
         data-likec4-color={data.color}
         data-compound-depth={data.depth ?? 1}
         data-compound-transparent={isTransparent}
+        data-likec4-dimmed={isDimmed}
         data-likec4-shape={data.shape}
         style={assignInlineVars({
           [css.varCompoundOpacity]: opacity.toFixed(2),

package/src/base/primitives/customEdge.ts

@@ -17,6 +17,8 @@ export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData
   && eq(prev.target, next.target)
   && eq(prev.targetHandleId ?? null, next.targetHandleId ?? null)
   && eq(prev.selected ?? false, next.selected ?? false)
+  && eq(prev.sourcePosition, next.sourcePosition)
+  && eq(prev.targetPosition, next.targetPosition)
   && isSame(prev.sourceX, next.sourceX)
   && isSame(prev.sourceY, next.sourceY)
   && isSame(prev.targetX, next.targetX)

package/src/base/primitives/customNode.ts

@@ -11,6 +11,9 @@ export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData
   && eq(prev.dragging ?? false, next.dragging ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
+  && eq(prev.zIndex, next.zIndex)
+  && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
+  && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
   && eq(prev.data, next.data)
 )
 

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx'
 import { type PropsWithChildren, forwardRef } from 'react'
 import { isNumber, isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
+import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { ZIndexes } from '../../const'
 import type { EdgeProps } from '../../types'
 import * as css from './EdgeLabel.css'
@@ -59,6 +60,7 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
     children,
     ...rest
   }, ref) => {
+    const isZoomTooSmall = useIsZoomTooSmall()
     const stepNum = isStepEdgeId(id) ? extractStep(id) : null
 
     let zIndex = ZIndexes.Edge
@@ -70,7 +72,7 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
     let labelX = labelXY?.x ?? labelBBox?.x,
       labelY = labelXY?.y ?? labelBBox?.y
 
-    if (labelX === undefined || labelY === undefined) {
+    if (labelX === undefined || labelY === undefined || isZoomTooSmall) {
       return null
     }
 

package/src/base/primitives/edge/EdgePath.tsx

@@ -18,6 +18,7 @@ type Data = UndefinedOnPartialDeep<
 
 type EdgePathProps = EdgeProps<Data> & {
   svgPath: string
+  strokeWidth?: number
   onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined
 }
 
@@ -29,6 +30,7 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
     tail,
     head,
   },
+  strokeWidth,
   svgPath,
   style,
   interactionWidth,
@@ -78,6 +80,7 @@ export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
           className={clsx('react-flow__edge-path', css.cssEdgePath)}
           d={svgPath}
           style={style}
+          strokeWidth={strokeWidth}
           strokeLinecap={'round'}
           strokeDasharray={strokeDasharray}
           markerStart={MarkerStart ? `url(#start${id})` : undefined}

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Box } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import * as css from './ElementActionButtons.css'
@@ -21,7 +22,7 @@ export function ElementActionButtons({
     return null
   }
   return (
-    <Box className={css.container}>
+    <Box className={clsx(css.container, hiddenIfZoomTooSmall)}>
       <Box
         component={m.div}
         layoutRoot

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Box } from '@mantine/core'
 import { IconId } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
 import * as css from './ElementDetailsButton.css'
@@ -20,7 +21,7 @@ export function ElementDetailsButton({
   onClick,
 }: ElementDetailsButtonProps) {
   return (
-    <Box className={clsx(css.container, 'details-button')}>
+    <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')}>
       <Box
         className={clsx('nodrag nopan', css.actionIconWrapper)}
         component={m.div}

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -1,5 +1,5 @@
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { transitions, vars } from '../../../theme-vars'
+import { vars } from '../../../theme-vars'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
 
@@ -36,12 +36,17 @@ export const container = style({
   },
 })
 
-export const dimmed = style({})
-
-globalStyle(`.react-flow__node:has(${dimmed})`, {
+globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
   opacity: 0.25,
   transition: 'opacity 400ms ease-in-out, filter 500ms ease-in-out',
   transitionDelay: '50ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   willChange: 'opacity, filter',
 })
+
+globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
+  opacity: 0.25,
+  transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+  willChange: 'opacity, filter',
+})

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -48,11 +48,9 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         ref={ref}
         className={clsx([
           css.container,
-          isDimmed && css.dimmed,
           'likec4-element-node',
         ])}
         initial={false}
-        layoutRoot
         {...selectable && {
           animate: {
             scale,
@@ -62,6 +60,7 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         data-hovered={isHovered}
         data-likec4-color={data.color}
         data-likec4-shape={data.shape}
+        data-likec4-dimmed={isDimmed}
         {...rest}
       >
         {children}

package/src/base/primitives/element/ElementShape.tsx

@@ -1,6 +1,7 @@
 import { type DiagramNode, type ElementShape, nonexhaustive } from '@likec4/core'
+import clsx from 'clsx'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { toDomPrecision } from '../../../utils/xyflow'
-import type { NodeProps } from '../../types'
 import * as css from './ElementShape.css'
 
 export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
@@ -184,7 +185,7 @@ export function ElementShape(
   return (
     <>
       {isMultiple && (
-        <svg className={css.shapeSvgMultiple} viewBox={`0 0 ${w} ${h}`}>
+        <svg className={clsx(css.shapeSvgMultiple, hiddenIfZoomTooSmall)} viewBox={`0 0 ${w} ${h}`}>
           <ElementShapeSvg shape={data.shape} w={w} h={h} />
         </svg>
       )}
@@ -222,5 +223,5 @@ export function SelectedIndicator({ shape, w, h }: ElementShapeProps) {
       break
     }
   }
-  return <g className={css.indicator}>{svg}</g>
+  return <g className={clsx(css.indicator, hiddenIfZoomTooSmall)}>{svg}</g>
 }

package/src/base/primitives/element/ElementTitle.tsx

@@ -4,6 +4,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
 import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
+import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import type { NodeProps } from '../../types'
 import * as css from './ElementTitle.css'
 
@@ -57,7 +58,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         {data.technology && (
           <Text
             component="div"
-            className={clsx(css.technology, 'likec4-element-technology')}>
+            className={clsx(css.technology, hiddenIfZoomTooSmall, 'likec4-element-technology')}>
             {data.technology}
           </Text>
         )}

package/src/base/updateEdges.ts

@@ -1,5 +1,5 @@
 import { deepEqual as eq } from 'fast-equals'
-import { isDefined } from 'remeda'
+import { isDefined, omit } from 'remeda'
 import type { Base } from './types'
 
 function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
@@ -12,12 +12,13 @@ function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
         && eq(existing.sourceHandle ?? null, next.sourceHandle ?? null)
         && eq(existing.target, next.target)
         && eq(existing.targetHandle ?? null, next.targetHandle ?? null)
+        && eq(existing.zIndex ?? 0, next.zIndex ?? 0)
         && eq(existing.data, next.data)
       ) {
         return existing
       }
       return {
-        ...existing,
+        ...omit(existing, ['hidden', 'zIndex']),
         ...next,
         data: {
           ...existing.data,

package/src/base/updateNodes.ts

@@ -12,15 +12,16 @@ function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
         eq(existing.type, update.type)
         && eq(existingWidth, update.initialWidth)
         && eq(existingHeight, update.initialHeight)
+        && eq(existing.parentId ?? null, update.parentId ?? null)
         && eq(existing.hidden ?? false, update.hidden ?? false)
+        && eq(existing.zIndex ?? 0, update.zIndex ?? 0)
         && eq(existing.position, update.position)
         && eq(existing.data, update.data)
-        && eq(existing.parentId ?? null, update.parentId ?? null)
       ) {
         return existing
       }
       return {
-        ...omit(existing, ['measured', 'parentId']),
+        ...omit(existing, ['measured', 'parentId', 'hidden', 'zIndex']),
         ...update,
         // Force dimensions from update
         width: update.initialWidth,

package/src/context/DiagramFeatures.tsx

@@ -67,6 +67,7 @@ const validate = (features: EnabledFeatures) => {
       enableSearch = false
     }
   }
+
   if (enableReadOnly) {
     if (rest.enableEdgeEditing) {
       console.warn('enableEdgeEditing is ignored because enabled ReadOnly')

package/src/context/FramerMotionConfig.tsx

@@ -6,7 +6,7 @@ export const FramerMotionConfig = ({ children }: PropsWithChildren) => {
   const nonce = useMantineStyleNonce()?.()
   return (
     <LazyMotion features={domMax} strict>
-      <MotionConfig reducedMotion="user" {...nonce && { nonce }}>
+      <MotionConfig {...nonce && { nonce }}>
         {children}
       </MotionConfig>
     </LazyMotion>

package/src/hooks/useDiagramActor.ts

@@ -1,8 +1,7 @@
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { useActorRef } from '../likec4diagram/state/actorContext'
-import { useSelector } from '../likec4diagram/state/actorContext'
+import { useActorRef, useSelector } from '../likec4diagram/state/actorContext'
 import type { LikeC4ViewActorRef } from '../likec4diagram/state/machine'
 import { type MachineSnapshot } from '../likec4diagram/state/machine'
 import type { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualLayoutActor'
@@ -10,14 +9,17 @@ import type { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualL
 export function useDiagramActor(): LikeC4ViewActorRef {
   return useActorRef()
 }
-export function useDiagramActorState<T>(selector: (state: MachineSnapshot) => T, compare = shallowEqual): T {
+export function useDiagramActorState<T = unknown>(
+  selector: (state: MachineSnapshot) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+): T {
   const select = useCallbackRef((s: MachineSnapshot) => selector(s))
   return useSelector(select, compare)
 }
 
-export function useDiagramSyncLayoutState<T>(
+export function useDiagramSyncLayoutState<T = unknown>(
   selector: (state: SyncLayoutActorSnapshot) => T,
-  compare = shallowEqual,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
 ): T {
   const syncLayoutActorRef = useDiagramActorState(s => s.context.syncLayoutActorRef)
   const select = useCallbackRef(selector)

package/src/hooks/useDiagramContext.ts

@@ -3,7 +3,10 @@ import { shallowEqual } from 'fast-equals'
 import { useSelector } from '../likec4diagram/state/actorContext'
 import { type DiagramContext, type MachineSnapshot } from '../likec4diagram/state/machine'
 
-export function useDiagramContext<T>(selector: (state: DiagramContext) => T, compare = shallowEqual) {
+export function useDiagramContext<T = unknown>(
+  selector: (state: DiagramContext) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+) {
   const select = useCallbackRef((s: MachineSnapshot) => selector(s.context))
   return useSelector(select, compare)
 }

package/src/hooks/useXYFlow.ts

@@ -7,7 +7,7 @@ export const useXYFlow = useReactFlow<Types.Node, Types.Edge>
 
 export function useXYStore<StateSlice = unknown>(
   selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice,
-  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
+  equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean,
 ): StateSlice {
   return useStore(
     useCallbackRef(selector as any),
@@ -19,3 +19,8 @@ export const useXYStoreApi = useStoreApi<Types.Node, Types.Edge>
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
 export const useXYInternalNode = useInternalNode<Types.Node>
+
+const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
+export function useIsZoomTooSmall() {
+  return useStore(selectZoom)
+}

package/src/likec4diagram/XYFlow.tsx

@@ -1,6 +1,7 @@
 import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
+import { shallowEqual } from 'fast-equals'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base'
 import { useDiagramEventHandlers, useEnabledFeature } from '../context'
@@ -19,7 +20,18 @@ const selectXYProps = (ctx: DiagramContext) => ({
   pannable: ctx.pannable,
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
+  enableFitView: ctx.features.enableFitView,
+  enableReadOnly: ctx.features.enableReadOnly,
 })
+const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof selectXYProps>): boolean =>
+  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)
 
 type Picked = EnforceOptional<
   Pick<
@@ -37,8 +49,10 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
     initialized,
     nodes,
     edges,
+    enableReadOnly,
+    enableFitView,
     ...props
-  } = useDiagramContext(selectXYProps)
+  } = useDiagramContext(selectXYProps, equalsXYProps)
 
   const {
     onNodeContextMenu,
@@ -50,15 +64,14 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
     onCanvasDblClick,
   } = useDiagramEventHandlers()
 
-  const {
-    enableFitView,
-    enableReadOnly,
-  } = useEnabledFeature('ReadOnly', 'FitView')
-
   const notReadOnly = !enableReadOnly
 
   const layoutConstraints = useLayoutConstraints()
 
+  const onViewportResize = useCallbackRef(() => {
+    diagram.send({ type: 'xyflow.resized' })
+  })
+
   return (
     <BaseXYFlow<Types.Node, Types.Edge>
       nodes={nodes}
@@ -126,9 +139,7 @@ export const LikeC4DiagramXYFlow = ({ background, ...rest }: LikeC4DiagramXYFlow
         }),
       }}
       {...enableFitView && {
-        onViewportResize: () => {
-          diagram.send({ type: 'xyflow.resized' })
-        },
+        onViewportResize,
       }}
       {...(notReadOnly && rest.nodesDraggable && layoutConstraints)}
       {...props}

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

@@ -27,12 +27,12 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
+import { Link } from '../../../base'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { DiagramContext, useDiagramContext } from '../../../hooks/useDiagramContext'
 import { useLikeC4Model } from '../../../likec4model'
-import { Link } from '../../ui/diagram-title/Link'
 import * as css from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
@@ -252,7 +252,7 @@ const Relationship = forwardRef<
           gap={3}
           justify="stretch"
           align="stretch">
-          {links.map((link) => <Link key={link.url} link={link} />)}
+          {links.map((link) => <Link key={link.url} size="sm" value={link} />)}
         </Stack>
       )}
     </Stack>