@likec4/diagram 1.30.0 → 1.32.0

package/src/base/types.ts

@@ -4,8 +4,8 @@ import type {
   Node as RFNode,
   NodeProps as ReactFlowNodeProps,
 } from '@xyflow/react'
-import { hasSubObject } from 'remeda'
 import type { OptionalKeysOf, SetRequired, Simplify } from 'type-fest'
+import * as Base from './types.Base'
 
 /**
 
@@ -40,8 +40,8 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}> = ReactFlowNodeProps<
-  RFNode<Base.NodeData & T, any>
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = ReactFlowNodeProps<
+  RFNode<Base.NodeData & T, NodeType>
 >
 
 /**
@@ -64,106 +64,4 @@ export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends
   'type' | 'data'
 >
 
-export namespace Base {
-  // 'immediate' means that the node is dimmed without delay
-  export type Dimmed = 'immediate' | boolean
-
-  export type NodeData<Data extends Record<string, unknown> = {}> = Simplify<
-    Data & {
-      /**
-       * Whether the cursor is hovering over the node
-       */
-      hovered?: boolean
-      /**
-       * Whether the node is dimmed
-       * 'immediate' means that the node is dimmed without delay
-       */
-      dimmed?: Dimmed
-    }
-  >
-
-  export type Node = RFNode<NodeData>
-
-  export type NodeProps = ReactFlowNodeProps<RFNode<Base.NodeData, any>>
-
-  export type EdgeData<Data extends Record<string, unknown> = {}> = Simplify<
-    Data & {
-      /**
-       * Whether the cursor is hovering over the edge
-       */
-      hovered?: boolean
-      /**
-       * Whether the edge is active (animated and highlighted)
-       */
-      active?: boolean
-      /**
-       * Whether the edge is dimmed
-       * 'immediate' means that the edge is dimmed without delay
-       */
-      dimmed?: Dimmed
-    }
-  >
-
-  // export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
-  export type Edge = SetRequired<RFEdge<EdgeData>, 'data'>
-
-  type WithDimmed = { data: { dimmed?: Dimmed } }
-  type WithHovered = { data: { hovered?: boolean } }
-
-  const _setDimmed = <T extends WithDimmed>(v: T, dimmed: Dimmed): T =>
-    (v.data.dimmed ?? false) === dimmed ? v : ({
-      ...v,
-      data: {
-        ...v.data,
-        dimmed,
-      },
-    })
-
-  export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T
-  export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T
-  export function setDimmed<T extends WithDimmed>(arg1: T | Dimmed, arg2?: Dimmed) {
-    if (arg2 !== undefined) {
-      return _setDimmed(arg1 as T, arg2)
-    }
-    return (v: T) => _setDimmed(v, arg1 as Dimmed)
-  }
-
-  const _setHovered = <T extends WithHovered>(v: T, hovered: boolean): T =>
-    (v.data.hovered ?? false) === hovered ? v : ({
-      ...v,
-      data: {
-        ...v.data,
-        hovered,
-      },
-    })
-  export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T
-  export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T
-  export function setHovered<T extends WithHovered>(arg1: T | boolean, arg2?: boolean) {
-    if (arg2 !== undefined) {
-      return _setHovered(arg1 as T, arg2)
-    }
-    return (v: T) => _setHovered(v, arg1 as boolean)
-  }
-
-  type WithData<D> = { data: D }
-  function _setData<D, E extends WithData<D>>(value: E, state: Partial<NoInfer<D>>): E {
-    if (hasSubObject(value.data as any, state as any)) {
-      return value
-    }
-    return {
-      ...value,
-      data: {
-        ...value.data,
-        ...state,
-      },
-    }
-  }
-  export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E
-  export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E
-  export function setData<E extends WithData<any>>(arg1: E | Partial<E['data']>, arg2?: any) {
-    if (arg2 !== undefined) {
-      return _setData(arg1 as E, arg2)
-    }
-    return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
-  }
-}
+export * as Base from './types.Base'

package/src/bundle/LikeC4View.props.ts

@@ -1,12 +1,13 @@
-import type { WhereOperator } from '@likec4/core'
+import type { WhereOperator } from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import type { CSSProperties } from 'react'
-import type { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
+import type { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
 
-export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+export interface LikeC4ViewProps<A extends aux.Any> {
   /**
    * View to display.
    */
-  viewId: ViewId
+  viewId: aux.ViewId<A>
 
   /**
    * Enable/disable panning
@@ -110,6 +111,12 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
    */
   enableElementDetails?: boolean | undefined
 
+  /**
+   * Display element tags in the bottom left corner
+   * @default false
+   */
+  enableElementTags?: boolean | undefined
+
   /**
    * Experimental feature to browse relationships
    *
@@ -130,7 +137,7 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
-  where?: WhereOperator<Tag, Kind> | undefined
+  where?: WhereOperator<A> | undefined
 
   /**
    * Override some react flow props
@@ -148,6 +155,11 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
   /** Function to generate nonce attribute added to all generated `<style />` tags */
   styleNonce?: string | (() => string) | undefined
 
+  /**
+   * Override node renderers
+   */
+  renderNodes?: CustomNodes | undefined
+
   /**
    * Render custom icon for a node
    * By default, if icon is http:// or https://, it will be rendered as an image
@@ -225,6 +237,12 @@ export interface LikeC4BrowserProps {
    */
   enableRelationshipDetails?: boolean | undefined
 
+  /**
+   * Display element tags in the bottom left corner
+   * @default true
+   */
+  enableElementTags?: boolean | undefined
+
   /**
    * Display notations of the view
    * @default true

package/src/bundle/LikeC4View.tsx

@@ -1,28 +1,24 @@
-import { memo, useState } from 'react'
-import { ShadowRoot } from './ShadowRoot'
-
-import type { DiagramView, ViewId } from '@likec4/core'
+import type { Any, DiagramView, ViewId } from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import { cx } from '@likec4/styles/css'
 import { ActionIcon, Box } from '@mantine/core'
 import { shallowEqual } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
+import { memo, useState } from 'react'
 import { isBoolean } from 'remeda'
 import { FramerMotionConfig } from '../context/FramerMotionConfig'
 import { LikeC4Diagram } from '../LikeC4Diagram'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { Overlay } from '../overlays/overlay/Overlay'
 import type { LikeC4ViewProps } from './LikeC4View.props'
+import { ShadowRoot } from './ShadowRoot'
 import { cssInteractive, useColorScheme, useShadowRootStyle } from './styles.css'
 import { ErrorMessage, ViewNotFound } from './ViewNotFound'
 
-export function LikeC4View<
-  ViewId extends string = string,
-  Tag = string,
-  Kind = string,
->({
+export function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({
   viewId,
   ...props
-}: LikeC4ViewProps<ViewId, Tag, Kind>) {
+}: LikeC4ViewProps<A>) {
   const likec4model = useLikeC4Model()
   const view = likec4model?.findView(viewId)
 
@@ -33,7 +29,7 @@ export function LikeC4View<
       </ErrorMessage>
     )
   }
-  if (likec4model.type !== 'layouted') {
+  if (likec4model.stage !== 'layouted') {
     return (
       <ErrorMessage>
         LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
@@ -48,10 +44,10 @@ export function LikeC4View<
   return <LikeC4ViewInner view={view.$view} {...props} />
 }
 
-type LikeC4ViewInnerProps = Omit<LikeC4ViewProps<any, any, any>, 'viewId'> & {
-  view: DiagramView
+type LikeC4ViewInnerProps<A extends aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
+  view: DiagramView<A>
 }
-const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
+const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
   view,
   className,
   pannable = false,
@@ -77,18 +73,19 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
   styleNonce,
   style,
   reactFlowProps = {},
+  renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model(true, 'layouted')
+  const likec4model = useLikeC4Model('layouted')
   const colorScheme = useColorScheme(explicitColorScheme)
 
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
 
-  const [browserViewId, onNavigateTo] = useState(null as ViewId | null)
+  const [browserViewId, onNavigateTo] = useState(null as aux.ViewId<Any> | null)
 
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null
 
-  const notations = view.notation?.elements ?? []
+  const notations = view.notation?.nodes ?? []
   const hasNotations = notations.length > 0
 
   let nonce
@@ -123,7 +120,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
         style={style}>
         <FramerMotionConfig>
           <LikeC4Diagram
-            view={view as any}
+            view={view}
             readonly
             pannable={pannable}
             zoomable={zoomable}
@@ -139,6 +136,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
             enableRelationshipDetails={enableRelationshipDetails}
             enableElementDetails={enableElementDetails}
             enableRelationshipBrowser={enableRelationshipBrowser}
+            enableElementTags={false}
             controls={controls}
             nodesDraggable={false}
             reduceGraphics={reduceGraphics}
@@ -152,6 +150,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
               onNodeClick: () => onNavigateTo(view.id),
             }}
             reactFlowProps={reactFlowProps}
+            renderNodes={renderNodes}
             {...props}
           />
           {browserView && (
@@ -166,14 +165,16 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
                 enableElementDetails
                 enableRelationshipDetails
                 enableSearch
+                enableElementTags
                 controls
                 readonly
                 fitView
                 fitViewPadding={'16px'}
+                renderNodes={renderNodes}
                 {...props}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&
-                  (browserView.notation?.elements.length ?? 0) > 0}
+                  (browserView.notation?.nodes.length ?? 0) > 0}
               />
               <Box pos="absolute" top={'1rem'} right={'1rem'}>
                 <ActionIcon

package/src/bundle/ReactLikeC4.tsx

@@ -1,21 +1,16 @@
-import type { DiagramView, WhereOperator } from '@likec4/core'
-import { type CSSProperties } from 'react'
-import { ShadowRoot } from './ShadowRoot'
-
+import type { Any, DiagramView } from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import { cx } from '@likec4/styles/css'
+import { type CSSProperties } from 'react'
 import { isFunction, isString } from 'remeda'
 import { type LikeC4DiagramProps, LikeC4Diagram } from '../LikeC4Diagram'
-import type { OnNavigateTo } from '../LikeC4Diagram.props'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
+import { ShadowRoot } from './ShadowRoot'
 import { useColorScheme, useShadowRootStyle } from './styles.css'
 import { ErrorMessage, ViewNotFound } from './ViewNotFound'
 
-export type ReactLikeC4Props<
-  ViewId = string,
-  Tag = string,
-  Kind = string,
-> = Omit<LikeC4DiagramProps, 'view' | 'where' | 'onNavigateTo'> & {
-  viewId: ViewId
+export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+  viewId: aux.ViewId<A>
 
   /**
    * Keep aspect ratio of the diagram
@@ -41,24 +36,16 @@ export type ReactLikeC4Props<
 
   style?: CSSProperties | undefined
 
-  where?: WhereOperator<Tag, Kind> | undefined
-
-  onNavigateTo?: OnNavigateTo<ViewId> | undefined
-
   mantineTheme?: any
 
   /** Function to generate nonce attribute added to all generated `<style />` tags */
   styleNonce?: string | (() => string) | undefined
 }
 
-export function ReactLikeC4<
-  ViewId extends string = string,
-  Tag = string,
-  Kind = string,
->({
+export function ReactLikeC4<A extends aux.Any = aux.UnknownLayouted>({
   viewId,
   ...props
-}: ReactLikeC4Props<ViewId, Tag, Kind>) {
+}: ReactLikeC4Props<A>) {
   const likec4model = useLikeC4Model()
   const view = likec4model?.findView(viewId)
 
@@ -85,10 +72,10 @@ export function ReactLikeC4<
   return <ReactLikeC4Inner view={view.$view} {...props} />
 }
 
-type ReactLikeC4InnerProps = Omit<ReactLikeC4Props<any, any, any>, 'viewId'> & {
-  view: DiagramView
+type ReactLikeC4InnerProps<A extends Any> = Omit<ReactLikeC4Props<A>, 'viewId'> & {
+  view: DiagramView<A>
 }
-function ReactLikeC4Inner({
+function ReactLikeC4Inner<A extends Any>({
   className,
   view,
   colorScheme: explicitColorScheme,
@@ -101,12 +88,12 @@ function ReactLikeC4Inner({
   mantineTheme,
   styleNonce,
   ...props
-}: ReactLikeC4InnerProps) {
+}: ReactLikeC4InnerProps<A>) {
   const colorScheme = useColorScheme(explicitColorScheme)
 
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
 
-  const notations = view.notation?.elements ?? []
+  const notations = view.notation?.nodes ?? []
   const hasNotations = notations.length > 0
 
   let nonce
@@ -139,10 +126,11 @@ function ReactLikeC4Inner({
           showNotations={showNotations && hasNotations}
           onNavigateTo={onNavigateTo as any}
           background={background}
+          enableElementTags={false}
           {...props}
         />
       </ShadowRoot>
     </>
   )
 }
-ReactLikeC4.displayName = 'GenericReactLikeC4'
+ReactLikeC4.displayName = 'ReactLikeC4'

package/src/bundle/custom.ts

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

package/src/bundle/index.ts

@@ -1,7 +1,26 @@
+export type {
+  ChangeEvent,
+  CustomNodes,
+  DiagramNodeWithNavigate,
+  ElementIconRenderer,
+  LikeC4ColorScheme,
+  LikeC4DiagramEventHandlers,
+  OnCanvasClick,
+  OnChange,
+  OnEdgeClick,
+  OnNavigateTo,
+  OnNodeClick,
+  OpenSourceParams,
+  PaddingUnit,
+  PaddingWithUnit,
+  WhereOperator,
+} from '../LikeC4Diagram.props'
 export { LikeC4View } from './LikeC4View'
-export type { LikeC4ViewProps } from './LikeC4View.props'
+export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props'
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4'
 
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 
 export { ViewNotFound } from './ViewNotFound'
+
+export * from '../custom/hooks'

package/src/bundle/styles.css.ts

@@ -10,8 +10,8 @@ import {
 import { useIsomorphicLayoutEffect } from '@react-hookz/web'
 import { useState } from 'react'
 import { first, isFunction, isString } from 'remeda'
+import fontsCss from '../styles-font.css?inline'
 import inlinedStyles from '../styles.css?inline'
-import fontsCss from './font.css?inline'
 
 export const DefaultTheme = createTheme({
   autoContrast: true,

package/src/components/ErrorFallback.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@likec4/styles/jsx'
+import { Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
+import { IconX } from '@tabler/icons-react'
+import type { FallbackProps } from 'react-error-boundary'
+
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  const errorString = error instanceof Error ? error.message : 'Unknown error'
+  return (
+    <Box pos={'fixed'} top={0} left={0} w={'100%'} p={0} style={{ zIndex: 1000 }}>
+      <Notification
+        icon={<IconX style={{ width: 16, height: 16 }} />}
+        styles={{
+          icon: {
+            alignSelf: 'flex-start',
+          },
+        }}
+        color={'red'}
+        title={'Oops, something went wrong'}
+        p={'xl'}
+        withCloseButton={false}>
+        <ScrollAreaAutosize maw={'100%'} mah={400}>
+          <Code block>{errorString}</Code>
+        </ScrollAreaAutosize>
+        <Group gap={'xs'} mt="xl">
+          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
+        </Group>
+      </Notification>
+    </Box>
+  )
+}

package/src/components/SearchControl.tsx

@@ -1,3 +1,4 @@
+import { cx } from '@likec4/styles/css'
 import {
   type ElementProps,
   type UnstyledButtonProps,
@@ -7,7 +8,6 @@ import {
 } from '@mantine/core'
 import { IconSearch } from '@tabler/icons-react'
 import { isMacOs } from '@xyflow/system'
-import cx from 'clsx'
 import * as classes from './SearchControl.css'
 
 interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {}

package/src/context/DiagramEventHandlers.tsx

@@ -1,3 +1,4 @@
+import type { Any } from '@likec4/core/types'
 import { useSyncedRef } from '@react-hookz/web'
 import { type PropsWithChildren, type RefObject, createContext, useContext, useMemo } from 'react'
 import { isFunction, mapToObj } from 'remeda'
@@ -21,8 +22,8 @@ const HandlerNames = [
   'onCanvasDblClick',
 ] as const
 
-type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers> & {
-  handlersRef: RefObject<LikeC4DiagramEventHandlers>
+type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers<Any>> & {
+  handlersRef: RefObject<LikeC4DiagramEventHandlers<Any>>
 }
 
 const DiagramEventHandlersContext = createContext<DiagramEventHandlersContextValue>({
@@ -32,10 +33,10 @@ const DiagramEventHandlersContext = createContext<DiagramEventHandlersContextVal
   },
 })
 
-export function DiagramEventHandlers({
+export function DiagramEventHandlers<A extends Any>({
   handlers,
   children,
-}: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers }>) {
+}: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers<A> }>) {
   const handlersRef = useSyncedRef(handlers)
 
   const deps = HandlerNames.map((name) => isFunction(handlers[name]))

package/src/context/DiagramFeatures.tsx

@@ -1,7 +1,7 @@
-import type { ExclusiveUnion, NonEmptyArray } from '@likec4/core'
+import type { ExclusiveUnion } from '@likec4/core/types'
 import { shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
-import { map, mapToObj, pick } from 'remeda'
+import { mapToObj } from 'remeda'
 
 const FeatureNames = [
   'Controls',
@@ -18,14 +18,11 @@ const FeatureNames = [
   'EdgeEditing',
   'ViewTitle',
   'FitView',
-  /**
-   * LikeC4Model is available in context
-   */
-  'LikeC4Model',
   /**
    * Running in VSCode
    */
   'Vscode',
+  'ElementTags',
 ] as const
 export type FeatureName = typeof FeatureNames[number]
 export type EnabledFeatures = {
@@ -41,20 +38,9 @@ const DiagramFeaturesContext = createContext<EnabledFeatures>(AllDisabled)
 const validate = (features: EnabledFeatures) => {
   let {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest
   } = features
-  if (!enableLikeC4Model) {
-    enableElementDetails = false
-    enableRelationshipDetails = false
-    enableRelationshipBrowser = false
-    enableSearch = false
-  }
 
   if (enableReadOnly) {
     enableEdgeEditing = false
@@ -62,11 +48,6 @@ const validate = (features: EnabledFeatures) => {
 
   return {
     enableReadOnly,
-    enableLikeC4Model,
-    enableElementDetails,
-    enableRelationshipDetails,
-    enableRelationshipBrowser,
-    enableSearch,
     enableEdgeEditing,
     ...rest,
   }
@@ -123,12 +104,6 @@ DiagramFeatures.Overlays = ({ children }: PropsWithChildren) => {
   )
 }
 
-export function useEnabledFeature<F extends NonEmptyArray<FeatureName>>(
-  ...names: F
-): { [P in `enable${F[number]}`]: boolean } {
-  return pick(useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}` as const))
-}
-
 export function useEnabledFeatures(): EnabledFeatures {
   return useContext(DiagramFeaturesContext)
 }
@@ -138,7 +113,7 @@ export function IfEnabled({
   children,
   and = true,
 }: PropsWithChildren<{ feature: FeatureName; and?: boolean }>) {
-  const enabled = useEnabledFeature(feature)[`enable${feature}`] === true
+  const enabled = useEnabledFeatures()[`enable${feature}`] === true
   return enabled && and ? <>{children}</> : null
 }
 
@@ -146,6 +121,16 @@ export function IfNotEnabled({
   feature,
   children,
 }: PropsWithChildren<{ feature: FeatureName }>) {
-  const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true
+  const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true
   return notEnabled ? <>{children}</> : null
 }
+
+export function IfNotReadOnly({
+  children,
+}: PropsWithChildren) {
+  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true
+  if (isReadOnly) {
+    return null
+  }
+  return <>{children}</>
+}

package/src/context/EnsureMantine.tsx

@@ -1,13 +1,23 @@
-import { MantineContext } from '@mantine/core'
-import { type PropsWithChildren, useContext } from 'react'
+import { MantineContext, MantineProvider } from '@mantine/core'
+import { type PropsWithChildren, useContext, useEffect } from 'react'
 
 type EnsureMantineProps = PropsWithChildren<{}>
 
 export function EnsureMantine({ children }: EnsureMantineProps) {
   const mantineCtx = useContext(MantineContext)
 
+  useEffect(() => {
+    if (!mantineCtx) {
+      console.warn('LikeC4Diagram must be a child of MantineProvider')
+    }
+  }, [])
+
   if (!mantineCtx) {
-    throw new Error('LikeC4Diagram must be a child of MantineProvider')
+    return (
+      <MantineProvider defaultColorScheme="auto">
+        {children}
+      </MantineProvider>
+    )
   }
 
   return <>{children}</>

package/src/context/IconRenderer.tsx

@@ -1,4 +1,5 @@
 import type { ElementShape } from '@likec4/core'
+import { cx as clsx } from '@likec4/styles/css'
 import {
   type Icon,
   type IconProps,
@@ -9,7 +10,6 @@ import {
   IconReorder,
   IconUser,
 } from '@tabler/icons-react'
-import clsx from 'clsx'
 import {
   type ForwardRefExoticComponent,
   type PropsWithChildren,
@@ -99,10 +99,7 @@ export function IconOrShapeRenderer({
   }
   className: string
 }) {
-  const icon = IconRenderer({
-    element,
-    className,
-  })
+  const icon = <IconRenderer element={element} className={className} />
   if (icon) {
     return icon
   }