@likec4/diagram 1.8.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.8.1",
+  "version": "1.12.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -14,84 +14,60 @@
     "package.json",
     "LICENSE",
     "README.md",
-    "dist",
     "src",
-    "!dist/src",
     "!**/*.spec.*",
     "!**/*.d.ts.map"
   ],
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.mjs"
-    },
-    "./style.css": "./dist/style.css"
+    ".": "./src/index.ts"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      },
-      "./style.css": "./dist/style.css"
-    }
-  },
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.5.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "prepack": "vite build --mode production",
     "lint": "run -T eslint src/ --fix",
-    "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
+    "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@lume/kiwi": "^0.4.3",
+    "@likec4/core": "1.12.0",
+    "@lume/kiwi": "^0.4.4",
+    "@mantine/vanilla-extract": "7.12.2",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.14.0",
-    "@vanilla-extract/css": "^1.15.5",
+    "@tabler/icons-react": "^3.19.0",
+    "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.1.1",
-    "@xyflow/system": "0.0.39",
+    "@xyflow/react": "12.3.1",
+    "@xyflow/system": "0.0.43",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.3.30",
-    "remeda": "^2.11.0",
+    "framer-motion": "^11.5.6",
+    "khroma": "^2.1.0",
+    "remeda": "^2.14.0",
+    "type-fest": "4.26.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@likec4/core": "1.8.1",
-    "@mantine/core": "^7.11.2",
-    "@mantine/hooks": "^7.11.2",
+    "@mantine/core": "^7.12.2",
+    "@mantine/hooks": "^7.12.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/core": "1.8.1",
-    "@likec4/tsconfig": "1.8.1",
-    "@mantine/core": "7.11.2",
-    "@mantine/hooks": "7.11.2",
-    "@mantine/vanilla-extract": "7.11.2",
-    "@total-typescript/ts-reset": "^0.5.1",
+    "@likec4/tsconfig": "1.12.0",
+    "@mantine/core": "7.12.2",
+    "@mantine/hooks": "7.12.2",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.6",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.10",
-    "@vitejs/plugin-react": "^4.3.1",
     "execa": "^9.3.1",
-    "khroma": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "type-fest": "^4.21.0",
-    "typescript": "^5.5.4",
-    "vite": "5.3.4",
-    "vite-plugin-dts": "^3.9.1"
+    "typescript": "^5.6.2"
   }
 }

package/src/LikeC4CustomColors.props.ts

@@ -0,0 +1,5 @@
+import { type CustomColorDefinitions } from '@likec4/core'
+
+export interface LikeC4CustomColorsProperties {
+  customColors: CustomColorDefinitions
+}

package/src/LikeC4CustomColors.tsx

@@ -0,0 +1,37 @@
+import { type ThemeColorValues } from '@likec4/core'
+import { entries } from 'remeda'
+import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
+import { vars } from './theme-vars'
+
+type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
+
+export function LikeC4CustomColors({ customColors }: LikeC4CustomColorsProperties) {
+  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)
+  }
+
+  const styles = entries(customColors)
+    .map(([name, color]) => toStyle(name, color))
+    .join('\n')
+
+  return (
+    <>
+      <style type="text/css" dangerouslySetInnerHTML={{ __html: styles }} />
+    </>
+  )
+}

package/src/LikeC4Diagram.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars, xyvars } from './theme.css'
+import { vars, xyvars } from './theme-vars'
 
 export const cssReactFlow = style({
   '@supports': {

package/src/LikeC4Diagram.props.ts

@@ -3,73 +3,18 @@ import type {
   DiagramNode,
   DiagramView,
   Fqn,
-  NonEmptyArray,
   RelationID,
   ViewChange,
-  ViewID
+  ViewID,
+  WhereOperator
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
-import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import type { XYBackground } from './xyflow/XYFlowBackground'
 
-type EqualOperator<V> = {
-  eq: V
-  neq?: never
-} | {
-  eq?: never
-  neq: V
-}
-
-type AllNever = {
-  not?: never
-  and?: never
-  or?: never
-  tag?: never
-  kind?: never
-}
-
-type TagKindOperator<Tag, Kind> =
-  & Omit<AllNever, 'tag' | 'kind'>
-  & ({
-    tag: EqualOperator<Tag>
-    kind?: never
-  } | {
-    tag?: never
-    kind: EqualOperator<Kind>
-  })
-
-type NotOperator<Tag, Kind> = Omit<AllNever, 'not'> & {
-  not: TagKindOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>
-}
+export type { WhereOperator }
 
-type AndOperator<Tag, Kind> = Omit<AllNever, 'and'> & {
-  and: NonEmptyArray<
-    | TagKindOperator<Tag, Kind>
-    | OrOperator<Tag, Kind>
-    | NotOperator<Tag, Kind>
-  >
-}
-
-type OrOperator<Tag, Kind> = Omit<AllNever, 'or'> & {
-  or: NonEmptyArray<
-    | TagKindOperator<Tag, Kind>
-    | AndOperator<Tag, Kind>
-    | NotOperator<Tag, Kind>
-  >
-}
-
-// export const isOrOperator = (operator: WhereOperator): operator is OrOperator<WhereOperator> => {
-//   return 'or' in operator
-// }
-
-export type WhereOperator<Tag extends string, Kind extends string> =
-  | TagKindOperator<Tag, Kind>
-  | NotOperator<Tag, Kind>
-  | AndOperator<Tag, Kind>
-  | OrOperator<Tag, Kind>
-
-export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
-  navigateTo: ViewID
+export type DiagramNodeWithNavigate<ID extends string = ViewID> = Omit<DiagramNode, 'navigateTo'> & {
+  navigateTo: ID
 }
 
 type ElementIconNodeProps = {
@@ -82,28 +27,21 @@ export type ElementIconRenderer = (props: {
   node: ElementIconNodeProps
 }) => ReactNode
 
-export type OnNavigateTo = {
-  (
-    to: ViewID,
-    // These fields present if navigateTo triggered by a node click
-    event?: ReactMouseEvent,
-    element?: DiagramNodeWithNavigate,
-    xynode?: XYFlowNode
-  ): void
-}
+export type OnNavigateTo<ID extends string = ViewID> = (
+  to: ID,
+  // These fields present if navigateTo triggered by a node click
+  event?: ReactMouseEvent,
+  element?: DiagramNodeWithNavigate<ID>
+) => void
+
 export type OnNodeClick = (
-  event: {
-    element: DiagramNode
-    xynode: XYFlowNode
-    event: ReactMouseEvent
-  }
+  node: DiagramNode,
+  event: ReactMouseEvent
 ) => void
+
 export type OnEdgeClick = (
-  event: {
-    edge: DiagramEdge
-    xyedge: XYFlowEdge
-    event: ReactMouseEvent
-  }
+  edge: DiagramEdge,
+  event: ReactMouseEvent
 ) => void
 
 /**
@@ -114,9 +52,8 @@ export type OnCanvasClick = (event: ReactMouseEvent) => void
 export type ChangeEvent = {
   change: ViewChange
 }
-export type OnChange = {
-  (event: ChangeEvent): void
-}
+export type OnChange = (event: ChangeEvent) => void
+
 export type LikeC4ColorScheme = 'light' | 'dark'
 
 export interface LikeC4DiagramProperties {
@@ -125,15 +62,7 @@ export interface LikeC4DiagramProperties {
   className?: string | undefined
 
   /**
-   * Controls color scheme used for styling the flow
-   * By default inherits from system or surrounding MantineProvider
-   *
-   * @example 'light' | 'dark'
-   */
-  // colorScheme?: LikeC4ColorScheme | undefined
-
-  /**
-   * Show/hide controls menu
+   * Show/hide ReactFlow controls menu
    * @default false
    */
   controls?: boolean | undefined
@@ -163,10 +92,13 @@ export interface LikeC4DiagramProperties {
    */
   fitViewPadding?: number | undefined
 
+  /**
+   * @default false if readonly
+   */
   nodesSelectable?: boolean | undefined
 
   /**
-   * @default false
+   * @default false if readonly
    */
   nodesDraggable?: boolean | undefined
 
@@ -192,14 +124,14 @@ export interface LikeC4DiagramProperties {
   showElementLinks?: boolean | undefined
 
   /**
-   * Display panel with diagram title / description
+   * Display webview with diagram title / description
    * @default true
    */
   showDiagramTitle?: boolean | undefined
 
   /**
    * Show back/forward navigation buttons
-   * @default false
+   * @default true if `onNavigateTo` is set
    */
   showNavigationButtons?: undefined | boolean
 
@@ -209,6 +141,12 @@ export interface LikeC4DiagramProperties {
    */
   showNotations?: boolean | undefined
 
+  /**
+   * Display dropdown with details on relationship's label click
+   * @default true
+   */
+  showRelationshipDetails?: boolean | undefined
+
   /**
    * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
    * @default true
@@ -228,11 +166,14 @@ export interface LikeC4DiagramProperties {
   experimentalEdgeEditing?: boolean | undefined
 
   /**
-   * Render custom icon for a node
+   * Render icon for an element, bundled or remote
    * By default, if icon is http:// or https://, it will be rendered as an image
    */
   renderIcon?: ElementIconRenderer | undefined
 
+  /**
+   * Dynamic filter, applies both to nodes and edges
+   */
   where?: WhereOperator<string, string> | undefined
 }
 
@@ -247,8 +188,15 @@ export interface LikeC4DiagramEventHandlers {
   onCanvasClick?: OnCanvasClick | null | undefined
   onCanvasDblClick?: OnCanvasClick | null | undefined
 
+  // if set, will render a burger menu icon in the top left corner
   onBurgerMenuClick?: null | undefined | (() => void)
+
+  // if set, will render a source code icon in the top left corner
   onOpenSourceView?: null | undefined | (() => void)
+
+  // if set, will render an icon in properties webview for each element
   onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void)
+
+  // if set, will be called on edge click
   onOpenSourceRelation?: null | undefined | ((id: RelationID) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -1,12 +1,15 @@
+import type { DiagramView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
 import { domAnimation, LazyMotion } from 'framer-motion'
-import { memo, useRef } from 'react'
+import { memo, useEffect, useRef } from 'react'
 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 { DiagramContextProvider } from './state/DiagramContext'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
@@ -31,6 +34,7 @@ export function LikeC4Diagram({
   showElementLinks = true,
   showDiagramTitle = true,
   showNotations = true,
+  showRelationshipDetails = true,
   enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
   initialWidth,
@@ -54,6 +58,7 @@ export function LikeC4Diagram({
   where,
   showNavigationButtons = !!onNavigateTo
 }: LikeC4DiagramProps) {
+  const hasLikec4model = !!useLikeC4Model()
   const initialRef = useRef({
     defaultNodes: [] as XYFlowNode[],
     defaultEdges: [] as XYFlowEdge[],
@@ -63,6 +68,12 @@ export function LikeC4Diagram({
   if (readonly !== true && !!where) {
     console.warn('where filter is only supported in readonly mode')
   }
+  useEffect(() => {
+    if (showRelationshipDetails && !hasLikec4model) {
+      console.warn('Relationship details require LikeC4ModelProvider')
+    }
+  }, [showRelationshipDetails, hasLikec4model])
+
   return (
     <EnsureMantine>
       <LazyMotion features={domAnimation} strict>
@@ -70,6 +81,7 @@ export function LikeC4Diagram({
           fitView={fitView}
           {...initialRef.current}
         >
+          {customColorsDefined(view) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
           <DiagramContextProvider
             view={view}
             keepAspectRatio={keepAspectRatio}
@@ -82,6 +94,7 @@ export function LikeC4Diagram({
             showElementLinks={showElementLinks}
             showNavigationButtons={showNavigationButtons}
             showNotations={showNotations}
+            showRelationshipDetails={showRelationshipDetails && hasLikec4model}
             nodesDraggable={nodesDraggable}
             nodesSelectable={nodesSelectable}
             experimentalEdgeEditing={experimentalEdgeEditing}
@@ -114,13 +127,14 @@ export function LikeC4Diagram({
     </EnsureMantine>
   )
 }
+LikeC4Diagram.displayName = 'LikeC4Diagram'
 
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
 }
-const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
+const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
   controls,
   showDiagramTitle
@@ -164,3 +178,8 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
     </>
   )
 }, shallowEqual)
+LikeC4DiagramInnerMemo.displayName = 'LikeC4DiagramInnerMemo'
+
+function customColorsDefined(view: DiagramView) {
+  return Object.keys(view.customColorDefinitions).length > 0
+}

package/src/LikeC4ModelProvider.tsx

@@ -0,0 +1,49 @@
+import { LikeC4Model } from '@likec4/core'
+import { useCustomCompareMemo } from '@react-hookz/web'
+import { type PropsWithChildren } from 'react'
+import type { RequireExactlyOne } from 'type-fest'
+import { depsShallowEqual } from './hooks/useUpdateEffect'
+import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
+import { useLikeC4Model } from './likec4model/useLikeC4Model'
+
+export type LikeC4ModelProviderProps = PropsWithChildren<
+  RequireExactlyOne<{
+    likec4model: LikeC4Model
+    layouted: LikeC4Model.Layouted.SourceModel
+    computed: LikeC4Model.Computed.SourceModel
+  }>
+>
+
+/**
+ * Ensures LikeC4Model context
+ */
+export function LikeC4ModelProvider({
+  children,
+  ...props
+}: LikeC4ModelProviderProps) {
+  const model = useLikeC4Model()
+
+  if (model) {
+    return <>{children}</>
+  }
+
+  const value = useCustomCompareMemo(
+    () => {
+      if (props.likec4model) {
+        return props.likec4model
+      }
+      if (props.layouted) {
+        return LikeC4Model.layouted(props.layouted)
+      }
+      return LikeC4Model.computed(props.computed)
+    },
+    [props.likec4model ?? props.layouted ?? props.computed],
+    depsShallowEqual
+  )
+
+  return (
+    <LikeC4ModelContext.Provider value={value}>
+      {children}
+    </LikeC4ModelContext.Provider>
+  )
+}

package/src/StaticLikeC4Diagram.tsx

@@ -35,6 +35,7 @@ export function StaticLikeC4Diagram({
       showElementLinks
       showDiagramTitle={false}
       showNotations={false}
+      showRelationshipDetails={false}
       enableDynamicViewWalkthrough={false}
       enableFocusMode={false}
       nodesSelectable={false}

package/src/globals.css.ts

@@ -2,8 +2,7 @@ import { defaultTheme } from '@likec4/core'
 import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
 import { scale, toHex } from 'khroma'
 import { keys, omit } from 'remeda'
-import { mantine, whereDark } from './mantine.css'
-import { vars } from './theme.css'
+import { mantine, vars, whereDark } from './theme-vars'
 
 export const rootClassName = 'likec4-diagram-root'
 
@@ -18,7 +17,7 @@ globalStyle(`.${rootClassName}`, {
   WebkitFontSmoothing: mantine.webkitFontSmoothing,
   MozOsxFontSmoothing: mantine.mozFontSmoothing
 })
-globalStyle(`.${rootClassName} .mantine-ActionIcon-icon .tabler-icon`, {
+globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
   width: '75%',
   height: '75%'
 })

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useDiagramState'
+export * from './useMantinePortalProps'
 export * from './useSetState'
 export * from './useUpdateEffect'
 export * from './useXYFlow'

package/src/hooks/useMantinePortalProps.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react'
+
+import { useDiagramState } from './useDiagramState'
+
+export function useMantinePortalProps() {
+  const target = useDiagramState(s => s.getContainer())
+  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target])
+}

package/src/hooks/useXYFlow.ts

@@ -12,8 +12,7 @@ export function useXYStore<StateSlice = unknown>(
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
 ): StateSlice {
   return useStore(
-    // @ts-expect-error - types are not correct
-    selector,
+    selector as any,
     equalityFn ?? shallowEqual
   )
 }

package/src/index.ts

@@ -1,11 +1,14 @@
 import '@xyflow/react/dist/style.css'
 
 export { LikeC4Diagram } from './LikeC4Diagram'
+export * from './likec4model/useLikeC4Model'
+export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
 export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
 export type * from './LikeC4Diagram'
 export type * from './LikeC4Diagram.props'
+export type * from './LikeC4ModelProvider'
 export type * from './StaticLikeC4Diagram'
 export type * from './xyflow/types'

package/src/likec4model/LikeC4ModelContext.ts

@@ -0,0 +1,4 @@
+import type { LikeC4Model } from '@likec4/core'
+import { createContext } from 'react'
+
+export const LikeC4ModelContext = createContext<LikeC4Model | null>(null)

package/src/likec4model/index.ts

@@ -0,0 +1 @@
+export * from './useLikeC4Model'

package/src/likec4model/useLikeC4Model.ts

@@ -0,0 +1,55 @@
+import { type ComputedView, type DiagramView, type LikeC4Model, type ViewID } from '@likec4/core'
+import { useContext } from 'react'
+import { isDefined, isNonNullish, isString } from 'remeda'
+import type { LiteralUnion } from 'type-fest'
+import { LikeC4ModelContext } from './LikeC4ModelContext'
+
+export function useLikeC4Model(): LikeC4Model | null
+export function useLikeC4Model(strict: true): LikeC4Model
+export function useLikeC4Model(strict: boolean): LikeC4Model | null
+export function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted
+export function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed
+export function useLikeC4Model(strict: true, type: LikeC4Model['type'] | undefined): LikeC4Model
+export function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null
+export function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null
+export function useLikeC4Model(strict: boolean, type: LikeC4Model['type'] | undefined): LikeC4Model | null
+export function useLikeC4Model(strict?: boolean, type?: LikeC4Model['type']) {
+  const model = useContext(LikeC4ModelContext)
+
+  if (isString(type) && isNonNullish(model) && model.type !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`)
+  }
+
+  if (isDefined(strict) && strict === true && !model) {
+    throw new Error('No LikeC4Model found in context')
+  }
+  return model
+}
+
+export function useLikeC4Views(): LikeC4Model.SourceModel['views'] {
+  return useLikeC4Model(true).sourcemodel.views
+}
+
+export function useLikeC4ViewModel(viewId: LiteralUnion<ViewID, string>): LikeC4Model.ViewModel {
+  return useLikeC4Model(true).view(viewId)
+}
+
+export function useLikeC4View(viewId: LiteralUnion<ViewID, string>): ComputedView | DiagramView | null {
+  const model = useLikeC4Model(true)
+  try {
+    return model.view(viewId).view
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
+export function useLikeC4DiagramView(viewId: LiteralUnion<ViewID, string>): DiagramView | null {
+  const model = useLikeC4Model(true, 'layouted')
+  try {
+    return model.view(viewId).view
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}

package/src/mantine/EnsureMantine.tsx

@@ -12,3 +12,4 @@ export function EnsureMantine({ children }: EnsureMantineProps) {
 
   return <>{children}</>
 }
+EnsureMantine.displayName = 'EnsureMantine'

package/src/state/DiagramContext.tsx

@@ -79,3 +79,4 @@ export function DiagramContextProvider({
     </div>
   )
 }
+DiagramContextProvider.displayName = 'DiagramContextProvider'