@likec4/diagram 1.16.0 → 1.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -23,44 +23,47 @@
   "exports": {
     ".": "./src/index.ts"
   },
-  "packageManager": "yarn@4.5.1",
+  "packageManager": "yarn@4.5.3",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "run -T eslint src/ --fix",
-    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo",
+    "test": "vitest run --no-isolate"
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.16.0",
-    "@mantine/vanilla-extract": "7.13.4",
+    "@likec4/core": "1.17.1",
+    "@mantine/vanilla-extract": "7.14.1",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
-    "@vanilla-extract/css": "^1.16.0",
+    "@vanilla-extract/css": "^1.16.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.2",
-    "@xyflow/system": "0.0.43",
+    "@xyflow/react": "12.3.5",
+    "@xyflow/system": "0.0.46",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
-    "esm-env": "^1.0.0",
+    "esm-env": "^1.1.4",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.11.10",
+    "framer-motion": "^11.11.17",
     "khroma": "^2.1.0",
-    "remeda": "^2.16.0",
-    "type-fest": "4.26.1",
+    "remeda": "^2.17.3",
+    "type-fest": "4.27.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.13.4",
-    "@mantine/hooks": "^7.13.4",
+    "@mantine/core": "^7.14.1",
+    "@mantine/hooks": "^7.14.1",
+    "@mantine/spotlight": "^7.14.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.16.0",
-    "@mantine/core": "7.13.4",
-    "@mantine/hooks": "7.13.4",
+    "@likec4/tsconfig": "1.17.1",
+    "@mantine/core": "7.14.1",
+    "@mantine/hooks": "7.14.1",
+    "@mantine/spotlight": "7.14.1",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.11",
@@ -68,6 +71,7 @@
     "execa": "^9.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.5"
   }
 }

package/src/LikeC4CustomColors.tsx

@@ -1,33 +1,36 @@
-import { type ThemeColorValues } from '@likec4/core'
+import { type CustomColorDefinitions, type ThemeColorValues } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
 import { deepEqual } from 'fast-equals'
 import { memo } from 'react'
 import { entries } from 'remeda'
-import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
 import { vars } from './theme-vars'
 
 type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
-export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
-  function toStyle(name: String, colorValues: ThemeColorValues): String {
-    const rules = new Array<String>(
-      ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
-      ...entries(colorValues.relationships).map(([key, value]) =>
-        `${stripCssVarReference(vars.relation[key])}: ${value};`
-      )
-    )
-      .join('\n')
-
-    return `:where([data-likec4-color=${name}]) {
-            ${rules}
-        }`
-  }
-
-  function stripCssVarReference(ref: CSSVarFunction): String {
-    const end = ref.indexOf(',')
-    return ref.substring(4, end == -1 ? ref.length - 1 : end)
-  }
+interface LikeC4CustomColorsProperties {
+  customColors: CustomColorDefinitions
+}
+
+function toStyle(name: String, colorValues: ThemeColorValues): String {
+  const rules = [
+    ...entries(colorValues.elements)
+      .map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
+    ...entries(colorValues.relationships)
+      .map(([key, value]) => `${stripCssVarReference(vars.relation[key])}: ${value};`)
+  ]
+    .join('\n')
 
+  return `:where([data-likec4-color=${name}]) {
+  ${rules}
+}`
+}
+
+function stripCssVarReference(ref: CSSVarFunction): String {
+  const end = ref.indexOf(',')
+  return ref.substring(4, end == -1 ? ref.length - 1 : end)
+}
+
+export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
   const styles = entries(customColors)
     .map(([name, color]) => toStyle(name, color))
     .join('\n')

package/src/LikeC4Diagram.props.ts

@@ -118,12 +118,6 @@ export interface LikeC4DiagramProperties {
    */
   background?: 'transparent' | 'solid' | XYBackground | undefined
 
-  /**
-   * Display hovercards with element links
-   * @default true
-   */
-  showElementLinks?: boolean | undefined
-
   /**
    * Display webview with diagram title / description
    * @default true
@@ -144,9 +138,9 @@ export interface LikeC4DiagramProperties {
 
   /**
    * Display dropdown with details on relationship's label click
-   * @default true
+   * @default false
    */
-  showRelationshipDetails?: boolean | undefined
+  enableRelationshipDetails?: boolean | undefined
 
   /**
    * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
@@ -154,12 +148,24 @@ export interface LikeC4DiagramProperties {
    */
   enableFocusMode?: boolean | undefined
 
+  /**
+   * Enable search popup for elements and views
+   * @default true
+   */
+  enableSearch?: boolean | undefined
+
+  /**
+   * Enable modal with element details
+   * @default false
+   */
+  enableElementDetails?: boolean | undefined
+
   /**
    * Experimental feature to browse relationships
    *
    * @default false
    */
-  enableRelationshipsBrowser?: boolean | undefined
+  enableRelationshipBrowser?: boolean | undefined
 
   /**
    * If Walkthrough for dynamic views should be enabled

package/src/LikeC4Diagram.tsx

@@ -1,18 +1,19 @@
-import type { DiagramView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
-import { shallowEqual } from 'fast-equals'
-import { domMax, LazyMotion } from 'framer-motion'
+import { deepEqual } from 'fast-equals'
 import { memo, useEffect, useRef } from 'react'
+import { isEmpty } from 'remeda'
 import { rootClassName } from './globals.css'
 import { useDiagramState } from './hooks/useDiagramState'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { useLikeC4Model } from './likec4model'
-import { EnsureMantine } from './mantine/EnsureMantine'
+import { LikeC4Search } from './LikeC4Search'
 import { Overlays } from './overlays'
 import { DiagramContextProvider } from './state/DiagramContext'
+import { EnsureMantine } from './ui/EnsureMantine'
+import { FramerMotionConfig } from './ui/FramerMotionConfig'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
@@ -32,13 +33,14 @@ export function LikeC4Diagram({
   nodesDraggable = !readonly,
   background = 'dots',
   controls = !readonly,
-  showElementLinks = true,
   showDiagramTitle = true,
   showNotations = true,
-  showRelationshipDetails = true,
   enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
-  enableRelationshipsBrowser = false,
+  enableElementDetails = false,
+  enableRelationshipDetails = enableElementDetails,
+  enableRelationshipBrowser = enableRelationshipDetails,
+  enableSearch = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -74,43 +76,47 @@ export function LikeC4Diagram({
     if (hasLikec4model) {
       return
     }
-    if (showRelationshipDetails) {
+    if (enableRelationshipDetails) {
       console.warn('Invalid showRelationshipDetails=true, requires LikeC4ModelProvider')
     }
-    if (enableRelationshipsBrowser) {
-      console.warn('Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider')
+    if (enableElementDetails) {
+      console.warn('Invalid enableElementDetails=true, requires LikeC4ModelProvider')
+    }
+    if (enableRelationshipBrowser) {
+      console.warn('Invalid enableRelationshipBrowser=true, requires LikeC4ModelProvider')
     }
   })
 
   return (
     <EnsureMantine>
-      <LazyMotion features={domMax} strict>
+      <FramerMotionConfig>
         <XYFlowProvider
           fitView={fitView}
           {...initialRef.current}
         >
-          {customColorsDefined(view) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
+          {!isEmpty(view.customColorDefinitions) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
           <DiagramContextProvider
             view={view}
             keepAspectRatio={keepAspectRatio}
             className={clsx(rootClassName, className)}
             readonly={readonly}
+            experimentalEdgeEditing={!readonly && experimentalEdgeEditing}
             pannable={pannable}
             zoomable={zoomable}
+            nodesDraggable={nodesDraggable}
+            nodesSelectable={nodesSelectable || enableFocusMode}
             hasLikeC4Model={hasLikec4model}
             fitViewEnabled={fitView}
             fitViewPadding={fitViewPadding}
             controls={controls}
-            showElementLinks={showElementLinks}
             showNavigationButtons={showNavigationButtons && !!onNavigateTo}
             showNotations={showNotations}
-            showRelationshipDetails={showRelationshipDetails && hasLikec4model}
-            nodesDraggable={nodesDraggable}
-            nodesSelectable={nodesSelectable}
-            experimentalEdgeEditing={experimentalEdgeEditing}
-            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableFocusMode={enableFocusMode}
-            enableRelationshipsBrowser={enableRelationshipsBrowser && hasLikec4model}
+            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model}
+            enableSearch={hasLikec4model && enableSearch}
+            enableElementDetails={enableElementDetails && hasLikec4model}
+            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+            enableRelationshipBrowser={enableRelationshipBrowser && hasLikec4model}
             // Apply where filter only in readonly mode
             whereFilter={readonly ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
@@ -131,10 +137,11 @@ export function LikeC4Diagram({
             <LikeC4DiagramInnerMemo
               background={background}
               showDiagramTitle={showDiagramTitle}
+              enableSearch={hasLikec4model && enableSearch}
             />
           </DiagramContextProvider>
         </XYFlowProvider>
-      </LazyMotion>
+      </FramerMotionConfig>
     </EnsureMantine>
   )
 }
@@ -143,10 +150,12 @@ LikeC4Diagram.displayName = 'LikeC4Diagram'
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
   showDiagramTitle: boolean
+  enableSearch: boolean
 }
 const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
-  showDiagramTitle
+  showDiagramTitle,
+  enableSearch
 }) {
   const {
     isInitialized,
@@ -159,7 +168,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
     pannable: s.pannable,
     fitView: s.fitViewEnabled,
     enableFocusMode: s.enableFocusMode,
-    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipsBrowser || s.showRelationshipDetails)
+    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipBrowser || s.enableElementDetails)
   }))
 
   return (
@@ -180,6 +189,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
         />
       </XYFlow>
       {enableOverlays && <Overlays />}
+      {enableSearch && <LikeC4Search />}
       {isInitialized && (
         <>
           {fitView && <FitViewOnDiagramChange />}
@@ -188,9 +198,5 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
       )}
     </>
   )
-}, shallowEqual)
+}, deepEqual)
 LikeC4DiagramInnerMemo.displayName = 'LikeC4DiagramInnerMemo'
-
-function customColorsDefined(view: DiagramView) {
-  return Object.keys(view.customColorDefinitions).length > 0
-}

package/src/LikeC4Search.tsx

@@ -0,0 +1,146 @@
+import type { DiagramView } from '@likec4/core'
+import { Spotlight, SpotlightActionsGroup, type SpotlightActionData } from '@mantine/spotlight'
+import { IconRectangularPrism, IconSitemap, IconSearch } from '@tabler/icons-react'
+import { memo, useMemo, useState } from 'react'
+import { filter, map, pipe } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from './hooks'
+import { useLikeC4Model } from './likec4model'
+import { Center, Group, Highlight, Text } from '@mantine/core'
+
+interface QueryMatch {
+  data: SpotlightActionData,
+  keyword: string,
+  match: string
+}
+
+function filterAction(actionData: SpotlightActionData, query: string) : QueryMatch | undefined {
+  const queryLower = query.toLowerCase();
+  const keywords = Array.isArray(actionData.keywords) ? actionData.keywords : [];
+  const keywordMatch = keywords
+    .map(keyword => {
+      const index = keyword.toLowerCase().indexOf(queryLower);
+      return index !== -1 ? {
+        keyword: keyword,
+        match: keyword.substring(index, index + query.length)
+      } : null;
+    })
+    .find(match => !!match);
+  return !!keywordMatch ? {
+    data: actionData,
+    keyword: keywordMatch.keyword,
+    match: keywordMatch.match
+  } : undefined;
+}
+
+function buildFilteredActions(actionsData: SpotlightActionData[], query: string): JSX.Element[] {
+  return pipe(
+    actionsData,
+    map(a => filterAction(a, query)),
+    filter(qm => !!qm),
+    map(qm => buildSpotlightAction(qm))
+  );
+}
+
+function highlightMatch(match: QueryMatch): JSX.Element {
+  return <Highlight highlight={match.match}>{match.keyword}</Highlight>
+}
+
+function buildSpotlightAction(matchedAction: QueryMatch): JSX.Element {
+  const isMatchInLabel = matchedAction.keyword == matchedAction.data.label;
+  return <Spotlight.Action onClick={matchedAction.data.onClick}>
+    <Center style={{ marginRight: '8px '}}>
+      {matchedAction.data.leftSection}
+    </Center>
+    <Group wrap="nowrap" w="100%">
+      <div style={{ flex: 1 }}>
+        <Text>
+          {isMatchInLabel ? highlightMatch(matchedAction) : matchedAction.data.label}
+        </Text>
+        {!isMatchInLabel && <Text opacity={0.6} size="xs">{highlightMatch(matchedAction)}</Text>}
+      </div>
+    </Group>
+  </Spotlight.Action>
+}
+
+export const LikeC4Search = memo(() => {
+  const view = useDiagramState(s => s.view)
+  const model = useLikeC4Model(true)
+  const store = useDiagramStoreApi()
+  const [ query, setQuery ] = useState('')
+
+  const getNodeActionsData = (): SpotlightActionData[] => {
+    const { focusOnNode } = store.getState()
+
+    return pipe(
+      view.nodes,
+      filter(n => !!n.title),
+      map(n => ({
+        id: n.id,
+        label: n.title,
+        keywords: [
+          n.title,
+          ...(n.tags ?? []).map(t => `#${t}`),
+          ...(n.description ? [n.description] : [])
+        ].filter(k => k.toLowerCase()),
+        onClick: () => focusOnNode(n.id),
+        leftSection: <IconRectangularPrism />
+      }))
+    );
+  }
+
+  const getViewActionsData = (): SpotlightActionData[] => {
+    const { onNavigateTo } = store.getState()
+    const views = model.views()
+
+    return map(views, v => ({
+      id: v.id,
+      label: v.title ?? v.id,
+      keywords: [
+        v.title ?? v.id,
+        ...(v.tags ?? []),
+        ...(v.view.description ? [v.view.description] : [])
+      ],
+      onClick: () => {
+        store.setState({
+          hoveredNodeId: null,
+          lastOnNavigate: {
+            fromView: view.id,
+            toView: v.id,
+            fromNode: null
+          }
+        })
+        onNavigateTo?.(v.id)
+      },
+      leftSection: <IconSitemap />
+    }));
+  }
+
+  const { nodeActions, viewActions } = useMemo(() => ({
+      nodeActions: buildFilteredActions(getNodeActionsData(), query),
+      viewActions: buildFilteredActions(getViewActionsData(), query)
+    }),
+    [model, store, view, query]
+  );
+
+  const portalProps = useMantinePortalProps();
+  return (
+    <Spotlight.Root
+      {...portalProps}
+      shortcut={['mod + f', 'mod + k']}
+      query={query}
+      onQueryChange={setQuery}
+      scrollable
+      maxHeight={'calc(100vh - 100px)'}
+    >
+      <Spotlight.Search
+        placeholder="Search elements in current view and other views..."
+        leftSection={<IconSearch stroke={1.5} />}
+      />
+      <Spotlight.ActionsList>
+      {nodeActions.length > 0 && <SpotlightActionsGroup label="Elements">{nodeActions}</SpotlightActionsGroup> }
+      {viewActions.length > 0 && <SpotlightActionsGroup label="Views">{viewActions}</SpotlightActionsGroup> }
+      {nodeActions.length == 0 && viewActions.length == 0 && <Spotlight.Empty>Nothing found...</Spotlight.Empty> }
+      </Spotlight.ActionsList>
+    </Spotlight.Root>
+  );
+});

package/src/StaticLikeC4Diagram.tsx

@@ -9,7 +9,9 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'fitView'
   | 'fitViewPadding'
   | 'background'
-  | 'showElementLinks'
+  | 'enableElementDetails'
+  | 'enableRelationshipDetails'
+  | 'enableRelationshipBrowser'
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'
@@ -20,7 +22,9 @@ export function StaticLikeC4Diagram({
   view,
   fitView = true,
   fitViewPadding = 0,
-  showElementLinks = true,
+  enableElementDetails = false,
+  enableRelationshipDetails = false,
+  enableRelationshipBrowser = enableRelationshipDetails,
   background = 'transparent',
   ...rest
 }: StaticLikeC4DiagramProps) {
@@ -34,16 +38,17 @@ export function StaticLikeC4Diagram({
       zoomable={false}
       controls={false}
       background={background}
-      showElementLinks={showElementLinks}
       showDiagramTitle={false}
       showNotations={false}
-      showRelationshipDetails={false}
+      enableElementDetails={enableElementDetails}
+      enableRelationshipDetails={enableRelationshipDetails}
+      enableRelationshipBrowser={enableRelationshipBrowser}
       enableDynamicViewWalkthrough={false}
-      enableRelationshipsBrowser={false}
       experimentalEdgeEditing={false}
       enableFocusMode={false}
       nodesSelectable={false}
       nodesDraggable={false}
+      enableSearch={false}
       {...rest}
     />
   )

package/src/overlays/OverlayContext.tsx

@@ -3,7 +3,7 @@ import type { DiagramState } from '../hooks'
 
 export const OverlayContext = createContext({} as {
   openOverlay: DiagramState['openOverlay']
-  close: () => void
+  close: (onClosed?: () => void) => void
 })
 
 export function useOverlayDialog() {

package/src/overlays/Overlays.css.ts

@@ -1,7 +1,7 @@
-import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, xyvars } from '../theme-vars'
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine, vars, whereDark, whereLight, xyvars } from '../theme-vars'
 
-const mixColor = createVar('mix-color')
+export const mixColor = createVar('mix-color')
 export const container = style({
   position: 'absolute',
   top: 0,
@@ -16,41 +16,46 @@ export const container = style({
   isolation: 'isolate',
   WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
   backdropFilter: 'blur(var(--backdrop-blur))',
-  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent var(--backdrop-opacity))`,
+  backgroundColor: `rgb(200 200 200 / var(--backdrop-opacity))`,
   vars: {
-    '--backdrop-blur': '3px',
-    '--backdrop-opacity': '50%',
-    [mixColor]: `black`,
-    [xyvars.edge.stroke]: vars.relation.lineColor,
-    [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) 50%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 30%)`
+    '--backdrop-blur': '0px',
+    '--backdrop-opacity': '0%',
+    [mixColor]: `black`
   },
   selectors: {
     [`${whereDark} &`]: {
+      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`,
       vars: {
-        [mixColor]: `white`,
-        [xyvars.edge.labelColor]: vars.relation.labelColor,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+        [mixColor]: `white`
       }
     }
   }
 })
 
-globalStyle(`:where(${container}) .react-flow__attribution`, {
-  display: 'none'
+export const cssReactflowMarker = style({})
+globalStyle(`.react-flow${cssReactflowMarker}`, {
+  vars: {
+    // [xyvars.background.color]: vars.likec4.background.color,
+    [xyvars.background.pattern.color]: vars.likec4.background.pattern.color
+  }
 })
-globalStyle(`:where(${container}) .react-flow__edge-text`, {
-  fontSize: 14
+
+globalStyle(`${whereDark} .react-flow${cssReactflowMarker}`, {
+  vars: {
+    [xyvars.edge.labelColor]: vars.relation.labelColor,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+  }
+})
+globalStyle(`:where(${cssReactflowMarker}) .react-flow__attribution`, {
+  display: 'none'
 })
-globalStyle(`:where(${container}) .react-flow__node-compound`, {
-  mixBlendMode: 'hard-light'
+globalStyle(`:where(${cssReactflowMarker}) .react-flow__edge-text`, {
+  fontSize: 16
 })
-
-globalStyle(`${container} .react-flow__edges > svg`, {
+globalStyle(`${cssReactflowMarker} .react-flow__edges > svg`, {
   mixBlendMode: 'plus-lighter'
 })
-globalStyle(`:where([data-mantine-color-scheme="light"]) ${container} .react-flow__edges > svg`, {
+globalStyle(`${whereLight} ${cssReactflowMarker} .react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })