@likec4/diagram 1.17.0 → 1.18.0

package/src/state/diagramStore.ts

@@ -1,13 +1,13 @@
 import type {
+  ComputedNode,
   DiagramNode,
   DiagramView,
   EdgeId,
-  ElementKind,
   ElementNotation,
   Fqn,
   NodeId,
   ViewChange,
-  ViewID,
+  ViewId,
   XYPoint
 } from '@likec4/core'
 import {
@@ -17,17 +17,16 @@ import {
   isStepEdgeId,
   nonexhaustive,
   nonNullable,
-  StepEdgeId
+  type StepEdgeId
 } from '@likec4/core'
 import {
   applyEdgeChanges,
   applyNodeChanges,
   getViewportForBounds,
-  type InternalNode,
   type OnEdgesChange,
   type OnNodesChange
 } from '@xyflow/react'
-import { boxToRect, getBoundsOfRects, getNodeDimensions, type XYPosition } from '@xyflow/system'
+import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
@@ -46,9 +45,9 @@ import type {
 import { type Vector, vector } from '../utils/vector'
 import { MinZoom } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
-import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
+import { align, type AlignmentMode } from './diagramStore.layout'
 
 type RequiredOrNull<T> = {
   [P in keyof T]-?: NonNullable<T[P]> | null
@@ -73,6 +72,7 @@ export type DiagramInitialState = {
   enableElementDetails: boolean
   enableRelationshipBrowser: boolean
   enableRelationshipDetails: boolean
+  enableSearch: boolean
   renderIcon: ElementIconRenderer | null
   whereFilter: WhereOperator<string, string> | null
   // If Dynamic View
@@ -85,7 +85,7 @@ export type DiagramInitialState = {
   getContainer: () => HTMLDivElement | null
 } & RequiredOrNull<LikeC4DiagramEventHandlers>
 
-type AlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom'
+type NodeKind = ComputedNode['kind']
 
 const StringSet = Set<string>
 
@@ -132,12 +132,12 @@ export type DiagramState = Simplify<
     dimmed: ReadonlySet<string>
 
     lastOnNavigate: null | {
-      fromView: ViewID
-      toView: ViewID
-      fromNode: NodeId
+      fromView: ViewId
+      toView: ViewId
+      fromNode: NodeId | null
     }
     navigationHistory: Array<{
-      viewId: ViewID
+      viewId: ViewId
       nodeId: NodeId | null
     }>
     navigationHistoryIndex: number
@@ -186,10 +186,12 @@ export type DiagramState = Simplify<
     onNodesChange: OnNodesChange<XYFlowNode>
     onEdgesChange: OnEdgesChange<XYFlowEdge>
 
-    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void
 
     resetEdgeControlPoints: () => void
     align: (mode: AlignmentMode) => void
+
+    onOpenSourceView: () => void
   }
 >
 
@@ -850,10 +852,25 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
+          onOpenSourceView: () => {
+            const { view, onOpenSource } = get()
+            onOpenSource?.({
+              view: view.id
+            })
+          },
+
           openOverlay: (overlay) => {
             if (eq(overlay, get().activeOverlay)) {
               return
             }
+            if ('elementDetails' in overlay) {
+              const diagramNode = get().view.nodes.find(({ id }) => id === overlay.elementDetails)
+              if (!diagramNode || !diagramNode.modelRef) {
+                get().closeOverlay()
+                return
+              }
+            }
+
             set(
               {
                 activeWalkthrough: null,
@@ -992,7 +1009,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => {
+          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => {
             const { xynodes, xyedges } = get()
             const dimmed = new StringSet(map(xyedges, prop('id')))
             xynodes.forEach(({ id, data }) => {
@@ -1068,70 +1085,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               return vector(v).mul(scale).add(nodeCenter)
             }
           },
-          align: (mode: AlignmentMode) => {
-            const { scheduleSaveManualLayout, xystore } = get()
-            const { nodeLookup, parentLookup } = xystore.getState()
-
-            const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
-            const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))]
-
-            if (!hasAtLeast(nodesToAlign, 2)) {
-              console.warn('At least 2 nodes must be selected to align')
-              return
-            }
-            const constraints = createLayoutConstraints(xystore, nodesToAlign)
-
-            let getEdgePosition: (nodes: InternalNode<XYFlowNode>[]) => number
-            let getPosition: (alignTo: number, node: InternalNode<XYFlowNode>) => number
-            let propertyToEdit: keyof XYPosition
-
-            switch (mode) {
-              case 'Left':
-                getEdgePosition = nodes => Math.min(...nodes.map(n => n.internals.positionAbsolute.x))
-                propertyToEdit = 'x'
-                getPosition = (alignTo, _) => Math.floor(alignTo)
-                break
-              case 'Top':
-                getEdgePosition = nodes => Math.min(...nodes.map(n => n.internals.positionAbsolute.y))
-                propertyToEdit = 'y'
-                getPosition = (alignTo, _) => Math.floor(alignTo)
-                break
-              case 'Right':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.x + getNodeDimensions(n).width))
-                propertyToEdit = 'x'
-                getPosition = (alignTo, node) => Math.floor(alignTo - node.width!)
-                break
-              case 'Bottom':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.y + getNodeDimensions(n).height))
-                propertyToEdit = 'y'
-                getPosition = (alignTo, node) => Math.floor(alignTo - node.height!)
-                break
-              case 'Center':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.x + getNodeDimensions(n).width / 2))
-                propertyToEdit = 'x'
-                getPosition = (alignTo, node) => Math.floor(alignTo - getNodeDimensions(node).width / 2)
-                break
-              case 'Middle':
-                getEdgePosition = nodes =>
-                  Math.max(...nodes.map(n => n.internals.positionAbsolute.y + getNodeDimensions(n).height / 2))
-                propertyToEdit = 'y'
-                getPosition = (alignTo, node) => Math.floor(alignTo - getNodeDimensions(node).height / 2)
-                break
-            }
-
-            constraints.onMove((nodes) => {
-              const alignTo = getEdgePosition(nodes.map(({ node }) => node))
-
-              nodes.forEach(({ rect, node }) => {
-                rect.positionAbsolute = { ...rect.positionAbsolute, [propertyToEdit]: getPosition(alignTo, node) }
-              })
-            })
-
-            scheduleSaveManualLayout()
-          }
+          align: align(get)
         } satisfies DiagramState),
         {
           name: `${storeDevId} - ${props.view.id}`,

package/src/ui/DiagramTitlePanel.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../hooks'
 import * as css from './DiagramTitlePanel.css'
+import { Link } from './Link'
 
 const selector = (s: DiagramState) => ({
   id: s.view.id,
@@ -151,35 +152,7 @@ export default function DiagramTitlePanel() {
                   gap={3}
                   justify="stretch"
                   align="stretch">
-                  {links.map((link) => (
-                    <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
-                      <Box flex={'1'} style={{ overflow: 'hidden' }}>
-                        <Anchor
-                          href={link.url}
-                          target="_blank"
-                          fz="xs"
-                          truncate="end"
-                          display={'inline-block'}
-                          w={'100%'}>
-                          {link.title || link.url}
-                        </Anchor>
-                      </Box>
-                      <CopyButton value={link.url}>
-                        {({ copied, copy }) => (
-                          <Button
-                            size="compact-xs"
-                            fz={'10'}
-                            variant="light"
-                            onClick={copy}
-                            color={copied
-                              ? 'teal'
-                              : 'gray'}>
-                            {copied ? 'copied' : 'copy'}
-                          </Button>
-                        )}
-                      </CopyButton>
-                    </Group>
-                  ))}
+                  {links.map((link) => <Link link={link} />)}
                 </Stack>
               )}
             </>

package/src/ui/Link.tsx

@@ -0,0 +1,40 @@
+import type { Link } from '@likec4/core'
+import { Anchor, Box, Button, CopyButton, Group } from '@mantine/core'
+
+export function Link({ link }: { link: Link }) {
+  return (
+    <>
+      <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
+        <Box flex={'1'} style={{ overflow: 'hidden' }}>
+          <Anchor
+            href={link.url}
+            target="_blank"
+            fz="xs"
+            truncate="end"
+            display={'inline-block'}
+            w={'100%'}
+            onClick={(e) => e.stopPropagation()}>
+            {link.title || link.url}
+          </Anchor>
+        </Box>
+        <CopyButton value={link.url}>
+          {({ copied, copy }) => (
+            <Button
+              size="compact-xs"
+              fz={'10'}
+              variant="light"
+              onClick={(e) => {
+                e.stopPropagation()
+                copy()
+              }}
+              color={copied
+                ? 'teal'
+                : 'gray'}>
+              {copied ? 'copied' : 'copy'}
+            </Button>
+          )}
+        </CopyButton>
+      </Group>
+    </>
+  )
+}

package/src/ui/notation/NotationPanel.tsx

@@ -1,4 +1,4 @@
-import { type ElementKind, type ElementNotation as ElementNotationData } from '@likec4/core'
+import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import {
   ActionIcon,
   Badge,
@@ -29,13 +29,15 @@ import { vars } from '../../theme-vars'
 import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
 import * as css from './NotationPanel.css'
 
+type NodeKind = ComputedNode['kind']
+
 const ElementNotation = ({ value }: { value: ElementNotationData }) => {
   const {
     title,
     color = 'primary',
     shape = 'rectangle'
   } = value
-  const [onlyKind, setOnlyKind] = useState<ElementKind | null>(null)
+  const [onlyKind, setOnlyKind] = useState<NodeKind | null>(null)
   const diagramStore = useDiagramStoreApi()
   const w = 300
   const h = 200

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

@@ -137,7 +137,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
 }
 
 const MAX_SPACING = 400
-const SpacingSliders = forwardRef<HTMLDivElement, {
+const SpacingSliders = forwardRef<HTMLDivElement | null, {
   isVertical: boolean
   nodeSep: number | undefined
   rankSep: number | undefined
@@ -160,7 +160,7 @@ const SpacingSliders = forwardRef<HTMLDivElement, {
       onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
     },
     [onChange, isVertical],
-    150,
+    250,
     2000
   )
 

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

@@ -6,6 +6,7 @@ import {
   IconLayoutAlignMiddle,
   IconLayoutAlignRight,
   IconLayoutAlignTop,
+  IconLayoutBoardSplit,
   IconLayoutCollage,
   IconRouteOff
 } from '@tabler/icons-react'
@@ -53,6 +54,13 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
       <PopoverDropdown p={0}>
         <Group gap={'xs'}>
           <ActionIconGroup pos={'relative'}>
+            <Action
+              label="Align in columns"
+              icon={<IconLayoutBoardSplit />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Column')
+              }} />
             <Action
               label="Align left"
               icon={<IconLayoutAlignLeft />}
@@ -74,6 +82,13 @@ export const ManualLayoutToolsButton = (props: PopoverProps) => {
                 e.stopPropagation()
                 store.getState().align('Right')
               }} />
+            <Action
+              label="Align in rows"
+              icon={<IconLayoutBoardSplit style={{ transform: 'rotate(90deg)' }} />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Row')
+              }} />
             <Action
               label="Align top"
               icon={<IconLayoutAlignTop />}

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

@@ -12,13 +12,15 @@ import {
   Text,
   TooltipGroup
 } from '@mantine/core'
+import { openSpotlight } from '@mantine/spotlight'
 import {
   IconAlertTriangle,
   IconChevronLeft,
   IconChevronRight,
   IconFileSymlink,
   IconFocusCentered,
-  IconMenu2
+  IconMenu2,
+  IconSearch
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
@@ -138,6 +140,7 @@ const LayoutDriftNotification = (props: PopoverProps) => (
 export const TopLeftPanel = () => {
   const store = useDiagramStoreApi()
   const {
+    enableSearch,
     showNavigationButtons,
     showFitDiagram,
     showLayoutDriftWarning,
@@ -150,11 +153,12 @@ export const TopLeftPanel = () => {
     const isNotFocused = isNullish(s.focusedNodeId)
     const isNotActive = isNotWalkthrough && isNotFocused
     return ({
+      enableSearch: s.enableSearch,
       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,
+      showGoToSource: s.controls && !!s.onOpenSource && isNotWalkthrough,
       viewportChanged: s.viewportChanged,
       showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
     })
@@ -174,12 +178,21 @@ export const TopLeftPanel = () => {
         gap={'xs'}>
         {showNavigationButtons && <BackwardForwardButtons />}
         <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+          {enableSearch && (
+            <Tooltip label="Search (Ctrl+F or ⌘+F)">
+              <ActionIcon
+                onClick={() => openSpotlight()}
+              >
+                <IconSearch />
+              </ActionIcon>
+            </Tooltip>
+          )}
           {showGoToSource && (
             <Tooltip label="Open source" {...portalProps}>
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
-                  store.getState().onOpenSourceView?.()
+                  store.getState().onOpenSourceView()
                 }}>
                 <IconFileSymlink stroke={1.5} />
               </ActionIcon>

package/src/xyflow/edges/EdgeLabel.tsx

@@ -1,4 +1,4 @@
-import { extractStep, isStepEdgeId, type ViewID } from '@likec4/core'
+import { extractStep, isStepEdgeId, type ViewId } from '@likec4/core'
 import {
   ActionIcon,
   Box,
@@ -80,9 +80,9 @@ export const EdgeLabel = ({
             </Box>
           )}
           {isTruthy(label?.text) && (
-            <Box className={edgesCss.edgeLabelText}>
+            <Text component="div" className={edgesCss.edgeLabelText} lineClamp={5}>
               {label.text}
-            </Box>
+            </Text>
           )}
           {navigateTo && <NavigateToBtn viewId={navigateTo} />}
         </Box>
@@ -162,7 +162,7 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
 }
 
 type NavigateToBtnProps = {
-  viewId: ViewID
+  viewId: ViewId
 }
 
 function NavigateToBtn({ viewId }: NavigateToBtnProps) {

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -16,11 +16,12 @@ 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 { Link } from '../../ui/Link'
 import type { RelationshipData } from '../types'
 import * as css from './RelationshipsDropdownMenu.css'
 
@@ -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,7 +156,7 @@ export function RelationshipsDropdownMenu({
 const Relationship = forwardRef<
   HTMLDivElement,
   StackProps & {
-    relationship: LikeC4Model.ViewModel.Relationship
+    relationship: LikeC4Model.AnyRelation
     edge: RelationshipData['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/nodes/compound/CompoundNode.css.ts

@@ -49,7 +49,20 @@ globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
   willChange: 'opacity, filter'
 })
 
+globalStyle(`:where([data-mantine-color-scheme='dark'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`
+  }
+})
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-title-color']: vars.element.stroke
+  }
+})
+
 export const varOpacity = createVar('opacity')
+export const varBorderColor = createVar('border-color')
+export const varBorderRadius = createVar('border-transparency')
 export const varBorderTransparency = createVar('border-transparency')
 
 const outlineColor = fallbackVar(
@@ -62,14 +75,17 @@ export const compoundBody = style({
   width: '100%',
   height: '100%',
   position: 'relative',
-  borderRadius: 6,
+  borderRadius: varBorderRadius,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
   padding: 0,
   margin: 0,
   transition: 'all 200ms ease-out',
-  backgroundClip: 'padding-box',
+  // backgroundClip: 'padding-box',
   // overflow: 'hidden',
   cursor: 'default',
+  vars: {
+    [varBorderRadius]: '6px'
+  },
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
       boxShadow: 'none'
@@ -88,8 +104,11 @@ export const compoundBody = style({
     width: '100%',
     height: '100%',
     pointerEvents: 'none',
+    border: '1px solid transparent',
+    borderRadius: varBorderRadius,
     transition: 'background 175ms ease-out, opacity 175ms ease-out',
-    background: vars.element.fill
+    background: vars.element.fill,
+    backgroundClip: 'border-box'
   }
 })
 export const compoundTitle = style({
@@ -97,19 +116,20 @@ export const compoundTitle = style({
   alignItems: 'center',
   gap: 6,
   paddingLeft: 14,
-  paddingTop: 9,
+  paddingTop: 6,
   minHeight: 30,
+  paddingRight: 2,
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {
       cursor: 'grab'
     },
     [`:where(.likec4-compound-transparent) &`]: {
-      paddingTop: 4
+      paddingTop: 3
     }
   }
 })
 export const withNavigation = style({
-  paddingLeft: 30
+  paddingLeft: 32
 })
 
 const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
@@ -117,8 +137,9 @@ export const transparent = style({
   borderStyle: 'dashed',
   borderWidth: 3,
   boxShadow: 'none',
-  borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
+  borderColor: `color-mix(in srgb , ${varBorderColor}, transparent ${fallbackVar(varBorderTransparency, '5%')})`,
   vars: {
+    [varBorderColor]: `var(--_compound-border-color,${vars.element.stroke})`,
     [opacityDeltaOnHover]: '0'
   },
   ':before': {
@@ -156,12 +177,6 @@ export const title = style({
   mixBlendMode: 'screen'
 })
 
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
-  vars: {
-    ['--_compound-title-color']: vars.element.stroke
-  }
-})
-
 const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6