@likec4/diagram 1.0.0-rc.1 → 1.0.1

package/dist/style.css

@@ -724,27 +724,6 @@ svg.react-flow__connectionline {
   --likec4-relation-lineColor: #6366f1;
   --likec4-relation-labelBg: #1e1b4b;
   --likec4-relation-labelColor: #818cf8;
-}._1yqpph0 {
-  background-color: transparent;
-}
-._1yqpph1 {
-  padding: 0;
-  height: 100%;
-}
-._1yqpph2 {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-}
-._1yqpph3 {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-}
-@media (min-width: 62em) {
-  ._1yqpph4 {
-    --cb-size: var(--cb-size-lg);
-  }
 }.react-flow._2h8g8h0 {
   --xy-background-color: var(--likec4-background-color);
   --xy-background-pattern-color: var(--likec4-background-pattern-color);
@@ -761,9 +740,7 @@ svg.react-flow__connectionline {
   display: none;
 }._14qhjro0 {
   width: 100%;
-  width: -webkit-fill-available;
   height: 100%;
-  height: -webkit-fill-available;
   padding: 0;
 }._1lmzt1h0 {
   top: var(--likec4-options-panel-top, 1rem);
@@ -779,7 +756,7 @@ svg.react-flow__connectionline {
 }
 [data-mantine-color-scheme="dark"] .bexn7q0 {
   --xy-edge-label-color: var(--likec4-relation-labelColor);
-  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 75%);
+  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 55%);
 }
 .bexn7q0[data-edge-hovered='true'] {
   --xy-edge-stroke: color-mix(in srgb, var(--likec4-relation-lineColor), white 30%);
@@ -789,6 +766,9 @@ svg.react-flow__connectionline {
   --xy-edge-stroke-width: 2.5;
 }
 .react-flow__edges > svg {
+  mix-blend-mode: screen;
+}
+:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg {
   mix-blend-mode: lighten;
 }
 .bexn7q1 {
@@ -825,9 +805,6 @@ svg.react-flow__connectionline {
   transform: var(--bexn7q6);
   will-change: transform;
 }
-[data-mantine-color-scheme="dark"] .bexn7q7 {
-  mix-blend-mode: luminosity;
-}
 .bexn7q7[data-edge-hovered="true"] {
   transition: all 140ms ease-out;
   transform: var(--bexn7q6) scale(1.1);
@@ -847,9 +824,7 @@ svg.react-flow__connectionline {
 }
 .lbtzdo0 {
   width: 100%;
-  width: -webkit-fill-available;
   height: 100%;
-  height: -webkit-fill-available;
   position: relative;
   padding: 0;
   margin: 0;
@@ -992,9 +967,7 @@ svg.react-flow__connectionline {
   --_1b6tkn0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));
   position: relative;
   width: 100%;
-  width: -webkit-fill-available;
   height: 100%;
-  height: -webkit-fill-available;
   padding: 0;
   margin: 0;
 }
@@ -1076,9 +1049,7 @@ svg.react-flow__connectionline {
   --_1b6tkn1: calc(1.5rem * var(--mantine-scale));
   position: relative;
   width: 100%;
-  width: -webkit-fill-available;
   height: 100%;
-  height: -webkit-fill-available;
   padding: var(--_1b6tkn1);
   display: flex;
   flex-direction: column;

package/dist/xyflow/nodes/element/ElementIcon.d.ts

@@ -6,5 +6,5 @@ type ElementIconProps = {
     paddingX?: number | undefined;
     paddingY?: number | undefined;
 };
-export declare function ElementIcon({ node, maxWidth, paddingX, paddingY }: ElementIconProps): JSX.Element | null;
+export declare function ElementIcon({ node, paddingY }: ElementIconProps): JSX.Element | null;
 export {};

package/dist/xyflow/types.d.ts

@@ -1,6 +1,6 @@
 import { SetReadonly, SetRequired, Simplify } from 'type-fest';
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { Edge, InternalNode, Node, ReactFlowInstance, ReactFlowState, EdgeMouseHandler, NodeMouseHandler, OnMoveEnd, OnMoveStart } from '@xyflow/react';
+import { Edge, EdgeMouseHandler, InternalNode, Node, NodeMouseHandler, OnMoveEnd, OnMoveStart, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
 import { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core';
 
 export type ElementNodeData = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -40,19 +40,17 @@
       "./style.css": "./dist/style.css"
     }
   },
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "yarn@4.2.2",
   "scripts": {
     "typecheck": "tsc",
     "prepack": "vite build --mode production",
     "build:turbo": "run -T turbo build --filter='diagram'",
     "build": "vite build --mode development && tsc -b",
     "lint": "run -T eslint src/ --fix",
-    "clean": "run -T rimraf -v dist/* .tsbuildinfo"
+    "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.0.0-rc.1",
-    "@mantine/core": "^7.9.0",
-    "@mantine/hooks": "^7.9.0",
+    "@likec4/core": "1.0.1",
     "@react-hookz/web": "^24.0.4",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
@@ -61,27 +59,31 @@
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@mantine/core": "^7.9.0",
+    "@mantine/hooks": "^7.9.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@lume/kiwi": "^0.4.3",
+    "@mantine/core": "^7.9.0",
+    "@mantine/hooks": "^7.9.0",
     "@mantine/vanilla-extract": "^7.9.0",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.4",
     "@vanilla-extract/css": "^1.15.1",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
     "@vitejs/plugin-react": "^4.2.1",
-    "@xyflow/react": "^12.0.0-next.17",
+    "@xyflow/react": "^12.0.0-next",
     "clsx": "^2.1.1",
     "execa": "^8.0.1",
     "khroma": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tilg": "^0.1.1",
-    "type-fest": "^4.18.1",
+    "type-fest": "^4.18.2",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
     "vite": "^5.2.11",

package/src/LikeC4Diagram.props.ts

@@ -15,12 +15,14 @@ import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
-export type OnNavigateTo = (
-  to: ViewID,
-  event: ReactMouseEvent,
-  element: DiagramNodeWithNavigate,
-  xynode: XYFlowNode
-) => void
+export type OnNavigateTo = {
+  (
+    to: ViewID,
+    event: ReactMouseEvent,
+    element: DiagramNodeWithNavigate,
+    xynode: XYFlowNode
+  ): void
+}
 export type OnNodeClick = (
   event: {
     element: DiagramNode
@@ -62,7 +64,9 @@ export type Change =
 export type ChangeEvent = {
   changes: NonEmptyArray<Change>
 }
-export type OnChange = (event: ChangeEvent) => void
+export type OnChange = {
+  (event: ChangeEvent): void
+}
 export type LikeC4ColorScheme = 'light' | 'dark'
 
 export interface LikeC4DiagramProperties {
@@ -76,7 +80,7 @@ export interface LikeC4DiagramProperties {
    *
    * @example 'light' | 'dark'
    */
-  colorScheme?: LikeC4ColorScheme | undefined
+  // colorScheme?: LikeC4ColorScheme | undefined
 
   /**
    * Show/hide controls menu

package/src/LikeC4Diagram.tsx

@@ -5,7 +5,8 @@ import { rootClassName } from './globals.css'
 import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
-import { DiagramContextProvider, WhenInitialized } from './state'
+import { DiagramContextProvider } from './state/DiagramContext'
+import { WhenInitialized } from './state/WhenInitialized'
 import { KeepAspectRatio } from './ui/KeepAspectRatio'
 import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
@@ -20,7 +21,6 @@ export function LikeC4Diagram({
   className,
   fitView = true,
   fitViewPadding = 0,
-  colorScheme,
   readonly = true,
   pannable = true,
   zoomable = true,
@@ -61,7 +61,7 @@ export function LikeC4Diagram({
     }
   }
   return (
-    <EnsureMantine colorScheme={colorScheme}>
+    <EnsureMantine>
       <XYFlowProvider
         fitView={fitView}
         {...initialRef.current}

package/src/StaticLikeC4Diagram.tsx

@@ -6,7 +6,6 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'view'
   | 'keepAspectRatio'
   | 'className'
-  | 'colorScheme'
   | 'fitView'
   | 'fitViewPadding'
   | 'background'

package/src/globals.css.ts

@@ -1,6 +1,6 @@
 import type { ThemeColor } from '@likec4/core'
 import { defaultTheme } from '@likec4/core'
-import { createGlobalTheme, createTheme, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { createGlobalTheme } from '@vanilla-extract/css'
 import { omit } from 'remeda'
 import { mantine } from './mantine.css'
 import { vars } from './theme.css'

package/src/index.ts

@@ -1,11 +1,10 @@
 import '@xyflow/react/dist/style.css'
 import './globals.css'
 
-export { EmbeddedLikeC4Diagram } from './EmbeddedLikeC4Diagram'
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
-export type * from './EmbeddedLikeC4Diagram'
+export * from './hooks'
 export type * from './LikeC4Diagram'
 export type * from './LikeC4Diagram.props'
 export type * from './StaticLikeC4Diagram'

package/src/mantine/EnsureMantine.tsx

@@ -1,24 +1,14 @@
-import { MantineContext, MantineProvider } from '@mantine/core'
+import { MantineContext } from '@mantine/core'
 import { type PropsWithChildren, useContext } from 'react'
-import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import { theme } from './theme'
 
-type EnsureMantineProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'colorScheme'>>
+type EnsureMantineProps = PropsWithChildren<{}>
 
-export function EnsureMantine({ colorScheme, children }: EnsureMantineProps) {
+export function EnsureMantine({ children }: EnsureMantineProps) {
   const mantineCtx = useContext(MantineContext)
-  if (mantineCtx) {
-    return <>{children}</>
+
+  if (!mantineCtx) {
+    throw new Error('LikeC4Diagram must be a child of MantineProvider')
   }
-  return (
-    <MantineProvider
-      {...(colorScheme && {
-        forceColorScheme: colorScheme
-      })}
-      theme={theme}
-      defaultColorScheme="auto"
-    >
-      {children}
-    </MantineProvider>
-  )
+
+  return <>{children}</>
 }

package/src/mantine/theme.ts

@@ -3,6 +3,7 @@ import { createTheme, type MantineTheme } from '@mantine/core'
 export const theme = createTheme({
   primaryColor: 'indigo',
   cursorType: 'pointer',
+  defaultRadius: 'sm',
   headings: {
     fontWeight: '500',
     sizes: {

package/src/ui/KeepAspectRatio.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
 export const wrapper = style({
-  width: ['100%', '-webkit-fill-available'],
-  height: ['100%', '-webkit-fill-available'],
+  width: '100%',
+  height: '100%',
   padding: 0
 })

package/src/ui/OptionsPanel.tsx

@@ -11,7 +11,7 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
   const [selectedNodes, setSelectedNodes] = useState([] as string[])
 
   useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
+    onChange: ({ nodes }) => {
       const next = nodes.map(n => n.id).sort()
       setSelectedNodes(prev => {
         return shallowEqual(prev, next) ? prev : next

package/src/ui/options/NodeOptions.tsx

@@ -21,7 +21,7 @@ import {
 } from '@mantine/core'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
 import { useDiagramStoreApi } from '../../state'
-import { useXYFlow, useXYNodesData } from '../../xyflow/hooks'
+import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
 
 // const ColorPanel = () => {
@@ -54,7 +54,6 @@ type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
   const diagramApi = useDiagramStoreApi()
   const nodes = useXYNodesData(selectedNodeIds)
-  const api = useXYFlow()
   if (!hasAtLeast(nodes, 1)) {
     return null
   }

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -38,7 +38,7 @@ function FitViewOnDiagramChanges() {
   const diagramApi = useDiagramStoreApi()
   const [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged)
   const [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState()))
-  const [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 50)
+  const [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 100)
 
   const isReady = useNodesInitialized({
     includeHiddenNodes: true

package/src/xyflow/SyncWithDiagram.tsx

@@ -1,30 +1,15 @@
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import { useXYFlow, useXYStoreApi } from './hooks'
-import type { XYFlowEdge, XYFlowNode } from './types'
+import type { XYFlowNode } from './types'
 
-import { memo, useCallback, useEffect } from 'react'
-import { type DiagramState, useDiagramStoreApi } from '../state'
+import { memo, useEffect } from 'react'
+import { useDiagramStoreApi } from '../state'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 import { toDomPrecision } from './utils'
 
 const isSameNode = (a: XYFlowNode) => (b: XYFlowNode) =>
   a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId)
 
-function hasNoChanges(existing: XYFlowNode, update: XYFlowNode) {
-  return existing.id === update.id
-    && existing.type === update.type
-    && existing.parentId == update.parentId
-    && eq(existing.data.element, update.data.element)
-}
-
-function edgeHasNoChanges(existing: XYFlowEdge, update: XYFlowEdge) {
-  return existing.id === update.id
-    && existing.type === update.type
-    && existing.source === update.source
-    && existing.target === update.target
-    && eq(existing.data, update.data)
-}
-
 /**
  * Syncs the diagram state with the XYFlow instance
  */
@@ -33,51 +18,6 @@ export const SyncWithDiagram = memo(() => {
   const xyflowApi = useXYStoreApi()
   const diagramStoreApi = useDiagramStoreApi()
 
-  const correctPosition = useCallback((
-    lastOnNavigate: NonNullable<DiagramState['lastOnNavigate']>,
-    nodes: DiagramState['view']['nodes']
-  ) => {
-    // const {
-    //   lastOnNavigate,
-    //   view: {
-    //     nodes,
-    //     id: viewId
-    //   }
-    // } = diagramStoreApi.getState()
-    // if (lastOnNavigate.toView !== viewId || lastOnNavigate.positionCorrected) {
-    // return
-    // }
-
-    const elFrom = lastOnNavigate.element
-    const elTo = nodes.find(n => n.id === elFrom.id)
-    if (elTo) {
-      const centerFrom = lastOnNavigate.elementCenterScreenPosition,
-        centerTo = xyflow.flowToScreenPosition({
-          x: elTo.position[0] + elTo.width / 2,
-          y: elTo.position[1] + elTo.height / 2
-        }),
-        diff = {
-          x: toDomPrecision(centerFrom.x - centerTo.x),
-          y: toDomPrecision(centerFrom.y - centerTo.y)
-        }
-      requestAnimationFrame(() => {
-        xyflowApi.getState().panBy(diff)
-      })
-    }
-    queueMicrotask(() => {
-      diagramStoreApi.setState(
-        {
-          lastOnNavigate: {
-            ...lastOnNavigate,
-            positionCorrected: true
-          }
-        },
-        false,
-        'positionCorrected'
-      )
-    })
-  }, [diagramStoreApi, xyflowApi])
-
   useEffect(() => {
     return diagramStoreApi.subscribe(
       // selector
@@ -123,28 +63,30 @@ export const SyncWithDiagram = memo(() => {
         )
 
         if (lastOnNavigate?.toView === viewId && !lastOnNavigate.positionCorrected) {
-          // correctPosition(
-          //   lastOnNavigate,
-          //   nodes
-          // )
           const elFrom = lastOnNavigate.element
           const elTo = nodes.find(n => n.id === elFrom.id)
           if (elTo) {
-            const centerFrom = lastOnNavigate.elementCenterScreenPosition,
-              // xyflow.flowToScreenPosition({
-              //     x: elFrom.position[0] + elFrom.width / 2,
-              //     y: elFrom.position[1] + elFrom.height / 2
-              //   }),
-              centerTo = xyflow.flowToScreenPosition({
-                x: elTo.position[0] + elTo.width / 2,
-                y: elTo.position[1] + elTo.height / 2
-              }),
-              diff = {
-                x: toDomPrecision(centerFrom.x - centerTo.x),
-                y: toDomPrecision(centerFrom.y - centerTo.y)
-              }
+            const centerFrom = lastOnNavigate.elementCenterScreenPosition
+            const nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
+
             requestAnimationFrame(() => {
               requestAnimationFrame(() => {
+                const v = xyflow.getViewport()
+                if (nextZoom < v.zoom) {
+                  xyflow.setViewport({
+                    x: v.x,
+                    y: v.y,
+                    zoom: nextZoom
+                  })
+                }
+                const centerTo = xyflow.flowToScreenPosition({
+                    x: elTo.position[0] + elTo.width / 2,
+                    y: elTo.position[1] + elTo.height / 2
+                  }),
+                  diff = {
+                    x: toDomPrecision(centerFrom.x - centerTo.x),
+                    y: toDomPrecision(centerFrom.y - centerTo.y)
+                  }
                 xyflowApi.getState().panBy(diff)
               })
             })
@@ -165,7 +107,7 @@ export const SyncWithDiagram = memo(() => {
         equalityFn: shallowEqual
       }
     )
-  }, [xyflow, xyflowApi, diagramStoreApi, correctPosition])
+  }, [xyflow, xyflowApi, diagramStoreApi])
 
   return null
 })

package/src/xyflow/XYFlowEvents.tsx

@@ -1,5 +1,4 @@
-import { nonNullable } from '@likec4/core'
-import type { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd, OnMoveStart, Viewport } from '@xyflow/react'
+import type { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { useMemo, useRef } from 'react'
 import { useDiagramStoreApi } from '../state'

package/src/xyflow/XYFlowWrapper.tsx

@@ -1,6 +1,6 @@
 import { useMantineColorScheme } from '@mantine/core'
-import { Controls, ReactFlow as GenericReactFlow, type ReactFlowProps } from '@xyflow/react'
-import { type CSSProperties, memo, type PropsWithChildren, type RefAttributes } from 'react'
+import { Controls, ReactFlow } from '@xyflow/react'
+import { type CSSProperties, memo, type PropsWithChildren } from 'react'
 import type { SetNonNullable, Simplify } from 'type-fest'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state'
@@ -13,10 +13,6 @@ import { XYFlowEdge, XYFlowNode } from './types'
 import { XYFlowBackground } from './XYFlowBackground'
 import { useXYFlowEvents } from './XYFlowEvents'
 
-// @ts-expect-error - typing in @xyflow/react
-const ReactFlow: (props: ReactFlowProps<XYFlowNode, XYFlowEdge> & RefAttributes<HTMLDivElement>) => JSX.Element =
-  GenericReactFlow
-
 const nodeTypes = {
   element: ElementNode,
   compound: CompoundNode
@@ -89,7 +85,7 @@ function XYFlowWrapper({
   const colorMode = colorScheme !== 'auto' ? colorScheme : undefined
 
   return (
-    <ReactFlow
+    <ReactFlow<XYFlowNode, XYFlowEdge>
       className={className}
       style={style}
       {...colorMode && { colorMode }}

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -1,5 +1,5 @@
 import { invariant, type NonEmptyArray, nonNullable, type Point } from '@likec4/core'
-import { Box, Text } from '@mantine/core'
+import { Box } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { EdgeProps, XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
@@ -93,8 +93,8 @@ const isEqualProps = (prev: EdgeProps<XYFlowEdge>, next: EdgeProps<XYFlowEdge>)
 export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(function RelationshipEdgeR({
   id,
   data,
-  selected,
-  markerEnd,
+  selected: _selected,
+  markerEnd: _markerEnd,
   style,
   source,
   target,
@@ -109,8 +109,7 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
 
   invariant(data, 'data is required')
   const {
-    edge,
-    controlPoints
+    edge
   } = data
   // const edgePath = bezierPath(edge.points)
 

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

@@ -15,7 +15,7 @@ export const container = style({
     [mantine.darkSelector]: {
       vars: {
         [xyvars.edge.labelColor]: vars.relation.labelColor,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 75%)`
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
       }
     }
     // [mantine.lightSelector]: {
@@ -46,6 +46,9 @@ globalStyle(`.react-flow__edge.selected ${container}`, {
 })
 
 globalStyle(`.react-flow__edges > svg`, {
+  mixBlendMode: 'screen'
+})
+globalStyle(`:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg`, {
   mixBlendMode: 'lighten'
 })
 
@@ -102,9 +105,9 @@ export const edgeLabel = style({
     [varLabelY]: '50%'
   },
   selectors: {
-    [mantine.darkSelector]: {
-      mixBlendMode: 'luminosity'
-    },
+    // [mantine.darkSelector]: {
+    //   mixBlendMode: 'luminosity'
+    // },
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-out',
       transform: `${varTranslate} scale(1.1)`

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

@@ -4,8 +4,8 @@ import { mantine } from '../../../mantine.css'
 import { vars } from '../../../theme.css'
 
 export const cssContainer = style({
-  width: ['100%', '-webkit-fill-available'],
-  height: ['100%', '-webkit-fill-available'],
+  width: '100%',
+  height: '100%',
   position: 'relative',
   padding: 0,
   margin: 0
@@ -40,6 +40,7 @@ export const cssCompound = style({
   }
 })
 
+// @ts-ignore
 const cssTransparentCompound = style({
   width: '100%',
   height: '100%',

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

@@ -16,6 +16,8 @@ type CompoundNodeProps = Pick<
   NodeProps<CompoundXYFlowNode>,
   'id' | 'data' | 'width' | 'height' | 'selected'
 >
+
+// @ts-ignore
 const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   prev.id === next.id
   && prev.selected === next.selected
@@ -72,7 +74,6 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
       }}
     >
       <Handle
-        // @ts-expect-error
         type="target"
         position={Position.Top}
         style={{ visibility: 'hidden' }}
@@ -95,7 +96,6 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
       </div>
       {isnavigable && <NavigateToBtn xynodeId={id} className={cssNavigateBtn} />}
       <Handle
-        // @ts-expect-error
         type="source"
         position={Position.Bottom}
         style={{ visibility: 'hidden' }}