@likec4/diagram 1.1.0 → 1.2.0

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -3,26 +3,18 @@ import { Box } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
+import { getNodePositionWithOrigin } from '@xyflow/system'
 import clsx from 'clsx'
+import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, memo } from 'react'
-import { hasAtLeast } from 'remeda'
+import { first, hasAtLeast, last, zip } from 'remeda'
 import { useDiagramState } from '../../state'
 import { ZIndexes } from '../const'
 import { useXYStoreApi } from '../hooks'
 import { type XYFlowEdge } from '../types'
-import { toDomPrecision } from '../utils'
-import {
-  container,
-  cssEdgePath,
-  edgeLabel,
-  edgeLabelBody,
-  edgePathBg,
-  fillStrokeCtx,
-  varLabelX,
-  varLabelY
-} from './edges.css'
-import { getEdgeParams } from './utils'
+import * as edgesCss from './edges.css'
+import { getEdgeParams, getNodeIntersectionFromCenterToPoint } from './utils'
 // import { getEdgeParams } from './utils'
 
 // function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size = 8): string {
@@ -70,9 +62,9 @@ function bezierPath(bezierSpline: NonEmptyArray<Point>) {
   return path
 }
 
-// If points are within 2px, consider them the same
+// If points are within 3px, consider them the same
 const isSamePoint = (a: number, b: number) => {
-  return Math.abs(a - b) < 2.1
+  return Math.abs(a - b) < 3.1
 }
 
 const isSamePosition = (a: XYPosition, [bx, by]: Point) => {
@@ -83,18 +75,25 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
   prev.id === next.id
   && prev.source === next.source
   && prev.target === next.target
+  && eq(prev.selected ?? false, next.selected ?? false)
   && isSamePoint(prev.sourceX, next.sourceX)
   && isSamePoint(prev.sourceY, next.sourceY)
   && isSamePoint(prev.targetX, next.targetX)
   && isSamePoint(prev.targetY, next.targetY)
-  && eq(prev.data, next.data)
+  && eq(prev.data.stepNum, next.data.stepNum)
+  && eq(prev.data.edge, next.data.edge)
+  && zip(prev.data.controlPoints, next.data.controlPoints).every(([a, b]) =>
+    isSamePoint(a[0], b[0]) && isSamePoint(a[1], b[1])
+  )
 )
 
+const curve = d3line<Point>()
+  .curve(curveCatmullRomOpen)
+
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
   selected: _selected,
-  markerEnd: _markerEnd,
   style,
   source,
   target,
@@ -104,19 +103,22 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   const sourceNode = nonNullable(nodeLookup.get(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(nodeLookup.get(target)!, `target node ${target} not found`)
 
-  const isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
-    && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
+  const isModified = !isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position)
+    || !isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position)
+
+  const { edge: diagramEdge, controlPoints } = data
 
-  invariant(data, 'data is required')
-  const {
-    edge
-  } = data
   // const edgePath = bezierPath(edge.points)
 
-  const color = edge.color ?? 'gray'
-  const isHovered = useDiagramState(s => s.hoveredEdgeId === id)
+  const color = diagramEdge.color ?? 'gray'
+  const isStepEdge = data.stepNum !== null
+  const { isActive, isHovered, isDimmed } = useDiagramState(s => ({
+    isActive: s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
+    isHovered: s.hoveredEdgeId === id,
+    isDimmed: s.dimmed.has(id)
+  }))
 
-  const line = edge.line ?? 'dashed'
+  const line = diagramEdge.line ?? 'dashed'
   const isDotted = line === 'dotted'
   const isDashed = isDotted || line === 'dashed'
 
@@ -131,8 +133,14 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   let edgePath: string, labelX: number, labelY: number
 
-  if (isNotModified) {
-    edgePath = bezierPath(edge.points)
+  if (!isModified) {
+    edgePath = bezierPath(diagramEdge.points)
+    // if (diagramEdge.tailArrowPoint) {
+    //   edgePath = `M ${diagramEdge.tailArrowPoint[0]},${diagramEdge.tailArrowPoint[1]} L ${edgePath.substring(1)}`
+    // }
+    // if (diagramEdge.headArrowPoint) {
+    //   edgePath += ` L ${diagramEdge.headArrowPoint[0]},${diagramEdge.headArrowPoint[1]}`
+    // }
     labelX = data.label?.bbox.x ?? 0
     labelY = data.label?.bbox.y ?? 0
   } else {
@@ -149,29 +157,42 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     edgePath = _edgePath
     labelX = _labelX
     labelY = _labelY
+
+    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5])
+    const targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5])
+
+    edgePath = curve([
+      [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints)!),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints)!),
+      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
+    ])!
   }
-  // const deferredEdgePath = edgePath
-  //   useTilg()`
-  //   ${id}
-  //   path=${edgePath}
-  //   isModified=${isModified}
-  // `
 
   return (
-    <g className={clsx(container)} data-likec4-color={color} data-edge-hovered={isHovered}>
-      <g className={clsx(fillStrokeCtx)}>
+    <g
+      className={clsx([
+        edgesCss.container,
+        isDimmed && edgesCss.dimmed
+      ])}
+      data-likec4-color={color}
+      data-edge-dir={diagramEdge.dir}
+      data-edge-active={isActive}
+      data-edge-hovered={isHovered}>
+      <g className={edgesCss.markerContext}>
         <defs>
           <marker
             id={`arrow-${id}`}
-            viewBox="0 0 10 8"
-            refX="0"
-            refY="4"
+            viewBox="0 0 16 10"
+            refX={isModified ? '12' : '10'}
+            refY="5"
             markerWidth="5"
-            markerHeight="5"
+            markerHeight="4"
             markerUnits="strokeWidth"
             preserveAspectRatio="xMaxYMid meet"
             orient="auto-start-reverse">
-            <path d="M 0 0 L 10 4 L 0 8 z" stroke="context-stroke" fill="context-stroke" />
+            <path d="M 0 0 L 16 5 L 0 10 z" stroke="context-stroke" fill="context-stroke" />
           </marker>
         </defs>
       </g>
@@ -179,41 +200,52 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
         edgePath={edgePath}
         interactionWidth={interactionWidth ?? 10}
         strokeDasharray={strokeDasharray}
-        markerStart={edge.tailArrow ? marker : undefined}
-        markerEnd={edge.headArrow ? marker : undefined}
+        markerStart={diagramEdge.tailArrow ? marker : undefined}
+        markerEnd={diagramEdge.headArrow ? marker : undefined}
         style={style} />
-      {
-        /*
-      {controlPoints.map((p, i) => (
+      {isModified && controlPoints.map((p, i) => (
         <circle
-          className={styles.controlPoint}
+          className={edgesCss.controlPoint}
           key={i}
           cx={p[0]}
           cy={p[1]}
-          r={5}
+          r={3}
         />
-      ))} */
-      }
-      {data.label && (
+      ))}
+      {(data.label || isStepEdge) && (
         <EdgeLabelRenderer>
           <Box
-            className={clsx(container, edgeLabel)}
+            className={clsx([
+              edgesCss.container,
+              edgesCss.edgeLabel,
+              isDimmed && edgesCss.dimmed
+            ])}
             data-likec4-color={color}
             style={{
               ...assignInlineVars({
-                [varLabelX]: toDomPrecision(labelX) + 'px',
-                [varLabelY]: toDomPrecision(labelY) + 'px'
+                [edgesCss.varLabelX]: Math.floor(labelX) + 'px',
+                [edgesCss.varLabelY]: Math.floor(labelY) + 'px'
+              }),
+              ...(data.label && {
+                maxWidth: data.label.bbox.width + 12
               }),
-              maxWidth: data.label.bbox.width + 10,
               zIndex: edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
             }}
             mod={{
-              'data-edge-hovered': isHovered
+              'data-edge-hovered': isHovered,
+              'data-edge-active': isActive
             }}
           >
-            <Box className={edgeLabelBody}>
-              {data.label.text}
-            </Box>
+            {isStepEdge && (
+              <Box className={edgesCss.stepEdgeNumber}>
+                {data.stepNum}
+              </Box>
+            )}
+            {data.label?.text && (
+              <Box className={edgesCss.edgeLabelText}>
+                {data.label.text}
+              </Box>
+            )}
             {
               /* <Popover
                 position="bottom"
@@ -246,30 +278,30 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
   )
 }, isEqualProps)
 
-const RelationshipPath = memo<{
-  edgePath: string
-  interactionWidth: number
-  strokeDasharray: string | undefined
-  markerStart: string | undefined
-  markerEnd: string | undefined
-  style: CSSProperties | undefined
-}>(({
+const RelationshipPath = ({
   edgePath,
   interactionWidth,
   strokeDasharray,
   markerStart,
   markerEnd,
   style
+}: {
+  edgePath: string
+  interactionWidth: number
+  strokeDasharray: string | undefined
+  markerStart: string | undefined
+  markerEnd: string | undefined
+  style: CSSProperties | undefined
 }) => (
   <>
     <path
-      className={clsx('react-flow__edge-path', edgePathBg)}
+      className={clsx('react-flow__edge-path', edgesCss.edgePathBg)}
       d={edgePath}
       style={style}
       strokeLinecap={'round'}
     />
     <path
-      className={clsx('react-flow__edge-path', cssEdgePath)}
+      className={clsx('react-flow__edge-path', edgesCss.cssEdgePath)}
       d={edgePath}
       style={style}
       strokeLinecap={'round'}
@@ -285,4 +317,4 @@ const RelationshipPath = memo<{
       strokeWidth={interactionWidth}
     />
   </>
-))
+)

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

@@ -1,78 +1,136 @@
 import { rem } from '@mantine/core'
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../mantine.css'
+import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from '../../theme.css'
 
+const mixColor = createVar('mix-color')
+
 export const container = style({
   vars: {
+    [mixColor]: `black`,
     [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, white 30%)`,
+    [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) 20%)`,
     [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 35%)`,
-    [xyvars.edge.strokeWidth]: '2.5px'
-  },
-  selectors: {
-    [mantine.darkSelector]: {
-      vars: {
-        [xyvars.edge.labelColor]: vars.relation.labelColor,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
-      }
-    }
-    // [mantine.lightSelector]: {
-    //   // mixBlendMode: 'luminosity',
-    //   vars: {
-    //     // [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, #000 85%)`
-    //   }
-    // }
+    [xyvars.edge.strokeWidth]: '2.2px'
+  }
+})
+
+export const dimmed = style({})
+
+globalStyle(`svg:has(${dimmed})`, {
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
+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 55%)`
+  }
+})
+
+const isSelected = '.react-flow__edge.selected'
+
+globalStyle(`:where(${isSelected}) ${container}`, {
+  vars: {
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
+    [xyvars.edge.strokeWidth]: '3px'
   }
 })
 
-globalStyle(`${container}[data-edge-hovered='true']`, {
+globalStyle(`${container}:is([data-edge-hovered='true'],[data-edge-active='true'])`, {
   vars: {
-    [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 30%)`,
+    // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
     [xyvars.edge.strokeWidth]: '3px'
   }
 })
+
+globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
+  vars: {
+    [xyvars.edge.strokeWidth]: '3.6px'
+  }
+})
 // globalStyle(`${container}[data-edge-hovered='true']`, {
 //   vars: {
 //     [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 35%)`
 //   },
 // })
 
-globalStyle(`.react-flow__edge.selected ${container}`, {
-  vars: {
-    [xyvars.edge.strokeWidth]: '2.5'
-  }
-})
-
 globalStyle(`.react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
-globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
-  mixBlendMode: 'lighten'
-})
+// globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
+//   mixBlendMode: 'lighten'
+// })
 
 export const edgePathBg = style({
-  strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
-  strokeOpacity: 0.1
+  strokeWidth: xyvars.edge.strokeWidth,
+  strokeOpacity: 0.08,
+  // transition: 'stroke-width 175ms ease-in-out',
+  // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
+  transitionProperty: 'stroke-width, stroke-opacity',
+  transitionDuration: '155ms',
+  transitionTimingFunction: 'ease-out',
+  selectors: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
+      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8px)`,
+      strokeOpacity: 0.15
+    }
+  }
 })
 
-export const fillStrokeCtx = style({
+// 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,
+  pointerEvents: 'none'
+})
+
+export const controlPoint = style({
+  fill: xyvars.edge.stroke,
+  stroke: xyvars.edge.stroke,
+  fillOpacity: 0.75,
+  strokeWidth: 1,
+  cursor: 'grab',
+  pointerEvents: 'visible',
   selectors: {
-    '.react-flow__edge.selected &': {
-      vars: {
-        [xyvars.edge.stroke]: xyvars.edge.strokeSelected
-      }
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
+      transition: 'all 150ms ease-out',
+      fillOpacity: 1,
+      strokeWidth: 3
     }
   }
 })
 
+const strokeKeyframes = generateIdentifier('strokeKeyframes')
+globalKeyframes(strokeKeyframes, {
+  'from': {
+    strokeDashoffset: 18 * 2
+  },
+  'to': {
+    strokeDashoffset: 1
+  }
+})
+
 export const cssEdgePath = style({
+  animationDuration: '800ms',
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'linear',
   selectors: {
-    [`${container}[data-edge-hovered='true'] &`]: {
+    [`:where([data-edge-hovered='true']) &`]: {
+      animationName: strokeKeyframes,
+      animationDelay: '350ms',
+      transition: 'all 130ms ease-out'
+    },
+    [`:where(${isSelected}, [data-edge-active='true']) &`]: {
+      animationName: strokeKeyframes,
+      animationDelay: '0ms',
       transition: 'all 130ms ease-out'
+    },
+    [`:where([data-edge-dir='back']) &`]: {
+      animationDirection: 'reverse'
     }
   }
 })
@@ -90,35 +148,52 @@ export const edgeLabel = style({
   pointerEvents: 'all',
   cursor: 'pointer',
   transformOrigin: '50% 50%',
-  textAlign: 'left',
   mixBlendMode: 'screen',
-  padding: '2px 6px 4px 6px',
-  width: 'max-content',
+  color: xyvars.edge.labelColor,
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: '3px',
   transform: varTranslate,
-  willChange: 'transform',
   vars: {
-    // [varTranslate]: `translate(calc(${varLabelX} - 50%), calc(${varLabelY} - 50%))`,
-    [varTranslate]: `translate(${varLabelX}, ${varLabelY})`,
-    [varLabelX]: '50%',
-    [varLabelY]: '50%'
+    [varTranslate]: `translate(${fallbackVar(varLabelX, '50%')}, ${fallbackVar(varLabelY, '50%')})`
   },
   selectors: {
-    // [mantine.darkSelector]: {
-    //   mixBlendMode: 'luminosity'
-    // },
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-out',
       transform: `${varTranslate} scale(1.1)`
+    },
+    [`&:is(${dimmed})`]: {
+      transition: 'filter 800ms ease-out',
+      filter: vars.filterDimmed
     }
   }
 })
 
-export const edgeLabelBody = style({
-  // display: 'inline',
-  color: xyvars.edge.labelColor,
+export const stepEdgeNumber = style({
+  position: 'absolute',
+  top: -2,
+  left: -2,
+  fontWeight: 500,
+  fontSize: rem(16),
+  lineHeight: 0.9,
+  padding: '4px 6px',
+  borderRadius: 99999,
+  textAlign: 'center',
+  minWidth: 22,
+  backgroundColor: xyvars.edge.labelBgColor,
+  transition: 'all 120ms ease-out',
+  transform: 'translateX(-100%)',
+  fontVariantNumeric: 'tabular-nums',
+  selectors: {
+    ':where([data-edge-hovered="true"],[data-edge-active="true"]) &': {
+      fontWeight: 600,
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 5%)`
+    }
+  }
+})
+
+export const edgeLabelText = style({
+  padding: '2px 6px 4px 6px',
+  textAlign: 'left',
   fontSize: rem(12.5),
-  lineHeight: 1.12,
-  transition: 'color 120ms ease-out'
+  lineHeight: 1.2
 })

package/src/xyflow/edges/utils.ts

@@ -1,7 +1,38 @@
+import type { Point } from '@likec4/core'
 import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import type { InternalXYFlowNode } from '../types'
 
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+export function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalXYFlowNode, [x1, y1]: Point) {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight
+  } = getNodeDimensions(intersectionNode)
+
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute
+
+  const w = intersectionNodeWidth / 2
+  const h = intersectionNodeHeight / 2
+
+  const x2 = intersectionNodePosition.x + w
+  const y2 = intersectionNodePosition.y + h
+  // const x1 = targetPoint.x
+  // const y1 = targetPoint.y
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+  const xx3 = a * xx1
+  const yy3 = a * yy1
+  const x = w * (xx3 + yy3) + x2
+  const y = h * (-xx3 + yy3) + y2
+
+  return [x, y] as const
+}
+
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: InternalXYFlowNode): XYPosition {

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -11,6 +11,11 @@ export const container = style({
   margin: 0
 })
 
+export const dimmed = style({
+  filter: vars.filterDimmed,
+  transition: 'filter 800ms ease-out'
+})
+
 export const varTransparency = createVar('transparency')
 
 const outlineColor = fallbackVar(
@@ -23,7 +28,7 @@ export const compoundBody = style({
   width: '100%',
   height: '100%',
   position: 'relative',
-  borderRadius: rem(6),
+  borderRadius: 6,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
   padding: 8,
   background: vars.element.fill,
@@ -43,7 +48,6 @@ export const compoundBody = style({
 const bgTransparency = createVar('bgTransparency')
 const bgTransparencyDelta = createVar('bgTransparencyDelta')
 export const transparent = style({
-  borderRadius: 8,
   borderStyle: 'dashed',
   borderWidth: 3,
   padding: 6,
@@ -58,19 +62,19 @@ export const transparent = style({
     '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
   },
   selectors: {
-    [`:where(${container}[data-hovered]) &`]: {
-      transitionDelay: '175ms',
+    [`:where(.react-flow__node.selected) &`]: {
+      transitionDelay: '50ms',
+      // borderColor: 'transparent',
       // transitionTimingFunction: 'ease-out',
       vars: {
-        [bgTransparencyDelta]: '15%'
+        [bgTransparencyDelta]: '5%'
       }
     },
-    [`:where(.react-flow__node.selected) &`]: {
-      transitionDelay: '50ms',
-      borderColor: 'transparent',
+    [`:where([data-hovered]) &`]: {
+      transitionDelay: '175ms',
       // transitionTimingFunction: 'ease-out',
       vars: {
-        [bgTransparencyDelta]: '25%'
+        [bgTransparencyDelta]: '15%'
       }
     }
   }
@@ -93,10 +97,10 @@ export const title = style({
   selectors: {
     [`:where([data-likec4-navigable='true']) &`]: {
       paddingLeft: 26
-    },
-    [`:where([data-mantine-color-scheme='light']) &`]: {
-      opacity: 1
     }
+    // [`:where([data-mantine-color-scheme='light']) &`]: {
+    //   opacity: 1
+    // }
   }
 })
 
@@ -106,6 +110,10 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   }
 })
 
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) ${title}`, {
+  opacity: 1
+})
+
 const indicatorKeyframes = generateIdentifier('indicator')
 globalKeyframes(indicatorKeyframes, {
   'from': {

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -37,15 +37,17 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   // const h = toDomPrecision(height ?? compound.height)
   const opacity = style.opacity ?? 100
 
-  const { isHovered, hasOnNavigateTo } = useDiagramState(s => ({
+  const { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
+    isDimmed: s.dimmed.has(id),
     hasOnNavigateTo: !!s.onNavigateTo
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
+  // invert opacity to transparency
   const transparency = clamp(100 - opacity, {
     min: 0,
-    max: 98
+    max: 99
   })
 
   return (
@@ -53,7 +55,8 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
       className={clsx(
         css.container,
         'likec4-compound-node',
-        opacity < 100 && 'likec4-compound-transparent'
+        opacity < 100 && 'likec4-compound-transparent',
+        isDimmed && css.dimmed
       )}
       mod={{
         'compound-depth': depth,