@likec4/diagram 1.12.1 → 1.13.0

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

@@ -10,10 +10,17 @@ import {
   Text,
   UnstyledButton
 } from '@mantine/core'
-import { clampUseMovePosition, useMove, type UseMovePosition, useUncontrolled } from '@mantine/hooks'
+import {
+  clampUseMovePosition,
+  useHover,
+  useMergedRef,
+  useMove,
+  type UseMovePosition,
+  useUncontrolled
+} from '@mantine/hooks'
 import { useDebouncedCallback } from '@react-hookz/web'
 import { IconLayoutDashboard } from '@tabler/icons-react'
-import { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
@@ -32,6 +39,8 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
     viewId
   } = useDiagramState(selector)
 
+  const { ref, hovered: isSpacingHovered } = useHover()
+
   const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
     controlsRefs[name] = node
     setControlsRefs(controlsRefs)
@@ -50,7 +59,11 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
     })
   }
 
-  const setSpacing = (nodeSep: number, rankSep: number) => {
+  const setSpacing = (nodeSep: number | null, rankSep: number | null) => {
+    // Force fitDiagram
+    store.setState({
+      viewportChanged: false
+    })
     store.getState().onChange?.({
       change: {
         op: 'change-autolayout',
@@ -82,7 +95,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
           </ActionIcon>
         </Tooltip>
       </PopoverTarget>
-      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6}>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6} opacity={isSpacingHovered ? 0.6 : 1}>
         <Box pos={'relative'} ref={setRootRef}>
           <FloatingIndicator
             target={controlsRefs[autoLayout.direction]}
@@ -110,6 +123,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
             <Text inline fz={'xs'} c={'dimmed'} fw={500}>Spacing:</Text>
           </Box>
           <SpacingSliders
+            ref={ref}
             isVertical={autoLayout.direction === 'TB' || autoLayout.direction === 'BT'}
             key={viewId}
             nodeSep={autoLayout.nodeSep}
@@ -122,17 +136,18 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
   )
 }
 
-const SpacingSliders = ({
-  isVertical,
-  nodeSep,
-  rankSep,
-  onChange
-}: {
+const MAX_SPACING = 400
+const SpacingSliders = forwardRef<HTMLDivElement, {
   isVertical: boolean
   nodeSep: number | undefined
   rankSep: number | undefined
   onChange: (nodeSep: number, rankSep: number) => void
-}) => {
+}>(({
+  isVertical,
+  nodeSep,
+  rankSep,
+  onChange
+}, _ref) => {
   if (!isVertical) {
     ;[nodeSep, rankSep] = [rankSep, nodeSep]
   }
@@ -142,7 +157,7 @@ const SpacingSliders = ({
       if (!isVertical) {
         ;[x, y] = [y, x]
       }
-      onChange(Math.round(x * 500), Math.round(y * 500))
+      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
     },
     [onChange, isVertical],
     150,
@@ -151,22 +166,24 @@ const SpacingSliders = ({
 
   const [value, setValue] = useUncontrolled({
     defaultValue: clampUseMovePosition({
-      x: (nodeSep ?? 250) / 500,
-      y: (rankSep ?? 250) / 500
+      x: (nodeSep ?? 100) / MAX_SPACING,
+      y: (rankSep ?? 120) / MAX_SPACING
     }),
     onChange: propagateChange
   })
 
   const { ref } = useMove(setValue)
 
-  let nodeSepValue = Math.round(value.x * 500)
-  let rankSepValue = Math.round(value.y * 500)
+  let nodeSepValue = Math.round(value.x * MAX_SPACING)
+  let rankSepValue = Math.round(value.y * MAX_SPACING)
   if (!isVertical) {
     ;[nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue]
   }
 
+  const mergedRef = useMergedRef(ref, _ref)
+
   return (
-    <Box ref={ref} className={css.spacingSliderBody} pt={'100%'}>
+    <Box ref={mergedRef} className={css.spacingSliderBody} pt={'100%'}>
       <Box
         className={css.spacingSliderThumb}
         style={{
@@ -179,4 +196,4 @@ const SpacingSliders = ({
       </Box>
     </Box>
   )
-}
+})

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

@@ -0,0 +1,110 @@
+import { ActionIconGroup, Group, Popover, PopoverDropdown, type PopoverProps, PopoverTarget } from '@mantine/core'
+import {
+  IconLayoutAlignBottom,
+  IconLayoutAlignCenter,
+  IconLayoutAlignLeft,
+  IconLayoutAlignMiddle,
+  IconLayoutAlignRight,
+  IconLayoutAlignTop,
+  IconLayoutCollage,
+  IconRouteOff
+} from '@tabler/icons-react'
+import { useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { ActionIcon, Tooltip } from './_shared'
+
+const Action = ({
+  label,
+  icon,
+  onClick
+}: {
+  label: string
+  icon: React.ReactNode
+  onClick: React.MouseEventHandler
+}) => (
+  <Tooltip label={label} withinPortal={false} position="top">
+    <ActionIcon onClick={onClick}>
+      {icon}
+    </ActionIcon>
+  </Tooltip>
+)
+
+export const ManualLayoutToolsButton = (props: PopoverProps) => {
+  const store = useDiagramStoreApi()
+
+  return (
+    <Popover
+      position="right-start"
+      clickOutsideEvents={[
+        'pointerdown'
+      ]}
+      radius="xs"
+      shadow="lg"
+      offset={{
+        mainAxis: 10
+      }}
+      {...props}>
+      <PopoverTarget>
+        <Tooltip label="Manual layouting tools" withinPortal={false} position="top-end">
+          <ActionIcon>
+            <IconLayoutCollage />
+          </ActionIcon>
+        </Tooltip>
+      </PopoverTarget>
+      <PopoverDropdown p={0}>
+        <Group gap={'xs'}>
+          <ActionIconGroup pos={'relative'}>
+            <Action
+              label="Align left"
+              icon={<IconLayoutAlignLeft />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Left')
+              }} />
+            <Action
+              label="Align center"
+              icon={<IconLayoutAlignCenter />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Center')
+              }} />
+            <Action
+              label="Align right"
+              icon={<IconLayoutAlignRight />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Right')
+              }} />
+            <Action
+              label="Align top"
+              icon={<IconLayoutAlignTop />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Top')
+              }} />
+            <Action
+              label="Align middle"
+              icon={<IconLayoutAlignMiddle />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Middle')
+              }} />
+            <Action
+              label="Align bottom"
+              icon={<IconLayoutAlignBottom />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Bottom')
+              }} />
+          </ActionIconGroup>
+          <Action
+            label="Reset all control points"
+            icon={<IconRouteOff />}
+            onClick={e => {
+              e.stopPropagation()
+              store.getState().resetEdgeControlPoints()
+            }} />
+        </Group>
+      </PopoverDropdown>
+    </Popover>
+  )
+}

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

@@ -10,8 +10,7 @@ import {
   type PopoverProps,
   Stack,
   Text,
-  TooltipGroup,
-  type TooltipProps
+  TooltipGroup
 } from '@mantine/core'
 import {
   IconAlertTriangle,
@@ -19,8 +18,7 @@ import {
   IconChevronRight,
   IconFileSymlink,
   IconFocusCentered,
-  IconMenu2,
-  IconRouteOff
+  IconMenu2
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
@@ -30,12 +28,14 @@ import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
 import { mantine } from '../../theme-vars'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
+import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import * as css from './styles.css'
 
 const historySelector = (s: DiagramState) => ({
   showBurgerMenu: !!s.onBurgerMenuClick,
-  hasStepBack: s.navigationHistoryIndex > 0,
-  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1
+  hasStepBack: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex > 0,
+  hasStepForward: s.showNavigationButtons && !!s.onNavigateTo
+    && s.navigationHistoryIndex < s.navigationHistory.length - 1
 })
 
 const BackwardForwardButtons = () => {
@@ -135,22 +135,6 @@ const LayoutDriftNotification = (props: PopoverProps) => (
   </HoverCard>
 )
 
-const ResetControlPointsButton = (props: Omit<TooltipProps, 'label' | 'children'>) => {
-  const store = useDiagramStoreApi()
-
-  return (
-    <Tooltip label="Reset all control points" {...props}>
-      <ActionIcon
-        onClick={e => {
-          e.stopPropagation()
-          store.getState().resetEdgeControlPoints()
-        }}>
-        <IconRouteOff />
-      </ActionIcon>
-    </Tooltip>
-  )
-}
-
 export const TopLeftPanel = () => {
   const store = useDiagramStoreApi()
   const {
@@ -160,25 +144,25 @@ export const TopLeftPanel = () => {
     showChangeAutoLayout,
     showGoToSource,
     viewportChanged,
-    showResetControlPoints
+    showManualLayoutTools
   } = useDiagramState(s => {
     const isNotWalkthrough = isNullish(s.activeWalkthrough)
     const isNotFocused = isNullish(s.focusedNodeId)
     const isNotActive = isNotWalkthrough && isNotFocused
     return ({
-      showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
-      showFitDiagram: s.fitViewEnabled && s.zoomable && isNotWalkthrough,
-      showLayoutDriftWarning: !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
-      showChangeAutoLayout: s.isEditable() && isNotActive,
-      showGoToSource: !!s.onOpenSourceView && isNotWalkthrough,
+      showNavigationButtons: !!s.onBurgerMenuClick || (s.showNavigationButtons && !!s.onNavigateTo),
+      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,
       viewportChanged: s.viewportChanged,
-      showResetControlPoints: s.readonly !== true && s.experimentalEdgeEditing === true
+      showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
     })
   })
   const portalProps = useMantinePortalProps()
 
   return (
-    <TooltipGroup openDelay={500} closeDelay={150}>
+    <TooltipGroup openDelay={600} closeDelay={150}>
       <Stack
         className={clsx(
           'react-flow__panel',
@@ -203,7 +187,7 @@ export const TopLeftPanel = () => {
           )}
           {showChangeAutoLayout && <ChangeAutoLayoutButton {...portalProps} />}
           {showLayoutDriftWarning && <LayoutDriftNotification {...portalProps} />}
-          {showResetControlPoints && <ResetControlPointsButton {...portalProps} />}
+          {showManualLayoutTools && <ManualLayoutToolsButton {...portalProps} />}
           {showFitDiagram && (
             <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
               <ActionIcon

package/src/ui/top-left/_shared.ts

@@ -4,8 +4,8 @@ export const Tooltip = MantineTooltip.withProps({
   color: 'dark',
   fz: 'xs',
   position: 'right',
-  openDelay: 400,
-  closeDelay: 150,
+  openDelay: 600,
+  closeDelay: 120,
   label: '',
   children: null,
   offset: 8

package/src/xyflow/EdgeMarkers.tsx

@@ -39,6 +39,24 @@ const Arrow = (props: SVGProps<SVGMarkerElement>) => (
   </marker>
 )
 
+const Crow = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-1 -1 12 12"
+    refX={8}
+    refY={4}
+    markerWidth="8"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M 8 0 L 0 4 L 8 8 M 8 4 L 0 4"
+      fill="none"
+      strokeWidth={1}
+    />
+  </marker>
+)
+
 const OArrow = (props: SVGProps<SVGMarkerElement>) => (
   <marker
     viewBox="-1 -1 12 10"
@@ -139,6 +157,7 @@ const ODot = (props: SVGProps<SVGMarkerElement>) => (
 
 export const EdgeMarkers = {
   Arrow,
+  Crow,
   OArrow,
   Open,
   Diamond,

package/src/xyflow/XYFlowEvents.tsx

@@ -50,12 +50,9 @@ export function useXYFlowEvents() {
     }
 
     const lastClickWasRecent = (ms = 2000) => {
-      const prevTimestamp = lastClickTimestamp.current
-      lastClickTimestamp.current = Date.now()
-      if (prevTimestamp === undefined) {
-        return false
-      }
-      return prevTimestamp + ms > Date.now()
+      const prevTimestamp = lastClickTimestamp.current ?? 0
+      const now = lastClickTimestamp.current = Date.now()
+      return prevTimestamp + ms > now
     }
 
     return ({
@@ -68,16 +65,15 @@ export function useXYFlowEvents() {
           resetFocusAndLastClicked
         } = diagramApi.getState()
         resetFocusAndLastClicked()
-        if (!onCanvasDblClick) {
-          event.stopPropagation()
-        }
         if (zoomable && viewportChanged) {
           fitDiagram()
         }
+        if (!onCanvasDblClick) {
+          event.stopPropagation()
+        }
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {
-        console.log('onPaneClick')
         if (dbclickLock()) {
           return
         }
@@ -132,7 +128,7 @@ export function useXYFlowEvents() {
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
         // if user clicked on the same node twice in a short time, focus on it
-        const clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent()
+        const clickedRecently = lastClickWasRecent() && lastClickedNodeId === xynode.id
 
         if (clickedRecently && !!onOpenSourceElement) {
           onOpenSourceElement(xynode.data.element.id)
@@ -141,27 +137,27 @@ export function useXYFlowEvents() {
           }
         }
 
-        if (enableFocusMode || nodesSelectable) {
+        if (enableFocusMode) {
           switch (true) {
-            case enableFocusMode && clickedRecently && focusedNodeId === xynode.id: {
+            case clickedRecently && focusedNodeId === xynode.id: {
               focusOnNode(false)
               fitDiagram()
               break
             }
-            case enableFocusMode && shallChangeFocus:
-            case enableFocusMode && clickedRecently && focusedNodeId !== xynode.id: {
+            case (shallChangeFocus || clickedRecently): {
               focusOnNode(xynode.id)
               break
             }
-            case nodesSelectable: {
-              xystore.getState().addSelectedNodes([xynode.id])
-              break
-            }
-          }
-          if (!onNodeClick) {
-            event.stopPropagation()
           }
+        } else if (nodesSelectable) {
+          xystore.getState().addSelectedNodes([xynode.id])
+        }
+
+        if (!onNodeClick && (enableFocusMode || nodesSelectable)) {
+          event.stopPropagation()
+          return
         }
+
         onNodeClick?.(
           xynode.data.element,
           event
@@ -176,16 +172,17 @@ export function useXYFlowEvents() {
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
-        lastClickTimestamp.current = Date.now()
+        lastClickWasRecent()
         if (isNonNullish(focusedNodeId) || enableFocusMode) {
           // if we are already focused on the node, cancel
           if (focusedNodeId === xynode.id) {
+            focusOnNode(false)
             fitDiagram()
           } else {
             focusOnNode(xynode.id)
           }
-          event.stopPropagation()
         }
+        event.stopPropagation()
       },
       onEdgeClick: (event, xyedge) => {
         const {

package/src/xyflow/XYFlowInner.tsx

@@ -1,6 +1,5 @@
-import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { memo, type PropsWithChildren } from 'react'
+import { memo } from 'react'
 import { isNonNullish } from 'remeda'
 import { useDiagramState } from '../hooks/useDiagramState'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
@@ -10,26 +9,25 @@ import NotationPanel from '../ui/notation'
 import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
-type XYFlowInnerProps = PropsWithChildren<{
+type XYFlowInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
-  controls: boolean
   showDiagramTitle: boolean
-}>
+}
 
 export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
-  children,
   background,
-  controls,
   showDiagramTitle
 }: XYFlowInnerProps) {
   const {
     showNotations,
     isDynamicView,
+    showTopLeft,
     isDynamicViewActive,
     enableDynamicViewWalkthrough
   } = useDiagramState(s => ({
     showNotations: s.showNotations,
     isDynamicView: s.isDynamicView,
+    showTopLeft: s.controls || (s.showNavigationButtons && !!s.onNavigateTo) || !!s.onBurgerMenuClick,
     enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
     isDynamicViewActive: isNonNullish(s.activeWalkthrough)
   }))
@@ -40,12 +38,10 @@ export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
   return (
     <>
       {isBgWithPattern && <XYFlowBackground background={background} />}
-      {controls && <Controls showInteractive={false} position={'top-center'} />}
-      <TopLeftPanel />
+      {showTopLeft && <TopLeftPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
       {showNotations && <NotationPanel />}
-      {children}
     </>
   )
 }, shallowEqual)

package/src/xyflow/edges/EdgeLabel.tsx

@@ -22,6 +22,7 @@ import { isTruthy } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from '../../hooks'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import type { RelationshipData } from '../types'
+import { stopPropagation } from '../utils'
 import * as edgesCss from './edges.css'
 import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
 
@@ -125,9 +126,9 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
       <PopoverDropdown
         component={Stack}
         p={'xs'}
-        onPointerDownCapture={e => e.stopPropagation()}
-        onClick={e => e.stopPropagation()}
-        onDoubleClick={e => e.stopPropagation()}
+        onPointerDownCapture={stopPropagation}
+        onClick={stopPropagation}
+        onDoubleClick={stopPropagation}
       >
         <ScrollAreaAutosize maw={450} mah={350} type="scroll" mx={'auto'} mt={2}>
           <Text component="div" className={edgesCss.edgeNoteText} p={4}>{notes}</Text>
@@ -171,13 +172,13 @@ function NavigateToBtn({ viewId }: NavigateToBtnProps) {
       className={clsx('nodrag nopan', edgesCss.cssNavigateBtn)}
       size={'sm'}
       radius="sm"
-      onPointerDownCapture={e => e.stopPropagation()}
+      onPointerDownCapture={stopPropagation}
       onClick={event => {
         event.stopPropagation()
         diagramApi.getState().onNavigateTo?.(viewId, event)
       }}
       role="button"
-      onDoubleClick={event => event.stopPropagation()}
+      onDoubleClick={stopPropagation}
     >
       <IconZoomScan className={edgesCss.cssNavigateBtnIcon} />
     </ActionIcon>

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -63,8 +63,9 @@ const toMarker = (arrowType?: RelationshipArrowType): EdgeMarkerType | undefined
   }
   switch (arrowType) {
     case 'normal':
-    case 'crow':
       return 'Arrow' as const
+    case 'crow':
+      return 'Crow' as const
     case 'onormal':
       return 'OArrow' as const
     case 'diamond':
@@ -332,7 +333,7 @@ export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function Relationshi
   const onRmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {
     const { xyflow } = diagramStore.getState()
 
-    if(controlPoints.length <= 1) {
+    if (controlPoints.length <= 1) {
       return
     }
 
@@ -349,7 +350,7 @@ export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function Relationshi
       domNode.removeEventListener('pointerup', onPointerUp, {
         capture: true
       })
-      e.stopPropagation()      
+      e.stopPropagation()
     }
 
     domNode.addEventListener('pointerup', onPointerUp, {

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -122,6 +122,22 @@ export function RelationshipsDropdownMenu({
             {nested.map(renderRelationship)}
           </>
         )}
+        {
+          /* <Box pos={'absolute'} top={5} right={6}>
+          <ActionIcon
+            size={24}
+            variant="light"
+            onClick={e => {
+              e.stopPropagation()
+              diagramApi.getState().openOverlay({
+                edgeDetails: edge.id
+              })
+            }}
+          >
+            <IconArrowsMaximize style={{ width: '70%' }} />
+          </ActionIcon>
+        </Box> */
+        }
       </MenuDropdown>
     </Menu>
   )

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

@@ -45,23 +45,17 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
     [xyvars.edge.strokeWidth]: '4'
   }
 })
-// globalStyle(`${container}[data-edge-hovered='true']`, {
-//   vars: {
-//     [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 35%)`
-//   },
-// })
 
-globalStyle(`.react-flow__edges > svg`, {
+globalStyle(`.likec4-diagram .react-flow__edges > svg`, {
   mixBlendMode: 'plus-lighter'
 })
-
-// globalStyle(`:where([data-mantine-color-scheme="light"]) .react-flow__edges > svg`, {
-//   mixBlendMode: 'screen'
-// })
+globalStyle(`:where([data-mantine-color-scheme="light"]) .likec4-diagram .react-flow__edges > svg`, {
+  mixBlendMode: 'screen'
+})
 
 export const dimmed = style({})
 
-globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
+globalStyle(`.likec4-diagram .react-flow__edges > svg:has(${dimmed})`, {
   opacity: 0.6,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',