@likec4/diagram 1.32.2 → 1.34.0

package/src/LikeC4Diagram.props.ts

@@ -6,7 +6,7 @@ import type {
   ViewChange,
   WhereOperator,
 } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/aux'
+import type * as aux from '@likec4/core/types/_aux'
 import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { SetRequired } from 'type-fest'

package/src/StaticLikeC4Diagram.tsx

@@ -1,4 +1,4 @@
-import type * as aux from '@likec4/core/types/aux'
+import type * as aux from '@likec4/core/types/_aux'
 import { LikeC4Diagram } from './LikeC4Diagram'
 import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 

package/src/base/primitives/MarkdownBlock.tsx

@@ -0,0 +1,66 @@
+import { type RichTextOrEmpty as RichTextType } from '@likec4/core/types'
+import { cx } from '@likec4/styles/css'
+import { type BoxProps, Box } from '@likec4/styles/jsx'
+import { type MarkdownBlockVariant, markdownBlock } from '@likec4/styles/recipes'
+import { Text } from '@mantine/core'
+import { forwardRef } from 'react'
+
+export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
+  value: RichTextType
+
+  /**
+   * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+   * @default false
+   */
+  uselikec4palette?: boolean
+  /**
+   * Scale factor for the font size.
+   * @default 1
+   */
+  textScale?: number
+  /**
+   * If true, the component will not render anything if the value is empty.
+   * @default false
+   */
+  hideIfEmpty?: boolean
+  /**
+   * Text to show if the value is empty.
+   * @default "no content"
+   */
+  emptyText?: string
+}
+
+export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
+  value,
+  textScale = 1,
+  uselikec4palette = false,
+  hideIfEmpty = false,
+  emptyText = 'no content',
+  className,
+  ...props
+}, ref) => {
+  if (value.isEmpty && hideIfEmpty) {
+    return null
+  }
+  const content = value.nonEmpty
+    ? { dangerouslySetInnerHTML: { __html: value.html } }
+    : { children: <Text component="span" fz={'xs'} c="dimmed">{emptyText}</Text> }
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      className={cx(
+        markdownBlock({
+          uselikec4palette,
+        }),
+        className,
+      )}
+      style={{
+        // @ts-expect-error
+        ['--mantine-scale']: textScale,
+      }}
+      {...content}
+    />
+  )
+})
+MarkdownBlock.displayName = 'MarkdownBlock'

package/src/base/primitives/element/ElementTags.tsx

@@ -3,12 +3,12 @@ import { css, cx } from '@likec4/styles/css'
 import { type BoxProps, Box, HStack } from '@likec4/styles/jsx'
 import { hstack } from '@likec4/styles/patterns'
 import { likec4tag } from '@likec4/styles/recipes'
-import { HoverCard } from '@mantine/core'
+import { useDebouncedState, useHover } from '@mantine/hooks'
+import { NodeToolbar, Position } from '@xyflow/react'
 import { deepEqual } from 'fast-equals'
-import { forwardRef, memo, useCallback } from 'react'
+import { forwardRef, memo, useCallback, useEffect } from 'react'
 import { useTagSpecification } from '../../../context/TagStylesContext'
 import { useDiagram } from '../../../hooks/useDiagram'
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps'
 import { useCurrentZoom } from '../../../hooks/useXYFlow'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
@@ -46,137 +46,139 @@ type Data = {
 type ElementTagsProps = NodeProps<Data>
 
 const propsAreEqual = (prev: ElementTagsProps, next: ElementTagsProps) => {
-  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags)
+  return (
+    prev.data.width === next.data.width &&
+    deepEqual(prev.data.tags, next.data.tags) &&
+    (prev.data.hovered ?? false) === (next.data.hovered ?? false)
+  )
 }
-export const ElementTags = memo(({ id, data: { tags, width } }: ElementTagsProps) => {
+export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }: ElementTagsProps) => {
+  const {
+    hovered: isTagsBarHovered,
+    ref: tagsBarRef,
+  } = useHover()
+  const {
+    hovered: isTagsToolbarHovered,
+    ref: tagsToolbarRef,
+  } = useHover()
+
+  const [isVisible, setVisible] = useDebouncedState(false, hovered ? 120 : 300)
+
+  useEffect(() => {
+    setVisible(visibleNow => {
+      if (!visibleNow) {
+        return hovered && (isTagsBarHovered || isTagsToolbarHovered)
+      }
+      return hovered || isTagsBarHovered || isTagsToolbarHovered
+    })
+  }, [isTagsBarHovered, isTagsToolbarHovered, hovered])
+
   const zoom = useCurrentZoom()
   const zoomIsLargeEnough = zoom > 1.2
-  const portalProps = useMantinePortalProps()
+
+  const diagram = useDiagram()
+
+  const onHover = (tag: string) => {
+    diagram.send({ type: 'tag.highlight', tag })
+  }
+
+  const onLeave = useCallback(() => {
+    diagram.send({ type: 'tag.unhighlight' })
+  }, [])
+
   if (!tags || tags.length === 0) {
     return null
   }
   const maxWidth = Math.max(Math.round(width * zoom) - 10, 200)
 
   return (
-    <HoverCard
-      {...portalProps}
-      floatingStrategy="fixed"
-      position="bottom-start"
-      offset={{
-        alignmentAxis: Math.round(4 * zoom),
-        mainAxis: 8,
-      }}
-      keepMounted={false}
-      openDelay={300}
-      closeDelay={500}
-    >
-      <HoverCard.Target>
-        <div
-          className={cx(
-            'likec4-element-tags',
-            hstack({
-              pointerEvents: 'all',
-              gap: 4,
-              alignItems: 'flex-end',
-              justifyItems: 'stretch',
-              position: 'absolute',
-              width: '100%',
+    <>
+      <div
+        ref={tagsBarRef}
+        className={cx(
+          'likec4-element-tags',
+          hstack({
+            pointerEvents: 'all',
+            gap: 4,
+            alignItems: 'flex-end',
+            justifyItems: 'stretch',
+            position: 'absolute',
+            width: '100%',
+            bottom: 0,
+            left: 0,
+            padding: 4,
+            _shapeCylinder: {
+              bottom: 5,
+            },
+            _shapeStorage: {
+              bottom: 5,
+            },
+            _shapeQueue: {
               bottom: 0,
-              left: 0,
-              padding: 4,
-              _shapeCylinder: {
-                bottom: 5,
-              },
-              _shapeStorage: {
-                bottom: 5,
-              },
-              _shapeQueue: {
-                bottom: 0,
-                paddingLeft: 14,
+              paddingLeft: 14,
+            },
+          }),
+        )}
+        onClick={stopPropagation}
+      >
+        {tags.map((tag) => (
+          <Box
+            key={id + '#' + tag}
+            data-likec4-tag={tag}
+            className={css({
+              layerStyle: 'likec4.tag',
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              maxWidth: 50,
+              height: 5,
+              _whenHovered: {
+                height: 12,
+                borderRadius: 4,
+                transitionDelay: '.08s',
               },
-            }),
-          )}
-          onClick={stopPropagation}
+              transition: 'fast',
+            })}
+          />
+        ))}
+      </div>
+      <NodeToolbar isVisible={isVisible} align="start" position={Position.Bottom}>
+        <HStack
+          ref={tagsToolbarRef}
+          css={{
+            gap: 4,
+            flexWrap: 'wrap',
+            pb: 'sm',
+            translate: 'auto',
+            x: -8,
+            maxWidth,
+          }}
         >
           {tags.map((tag) => (
-            <Box
-              key={id + '#' + tag}
-              data-likec4-tag={tag}
+            <ElementTag
+              key={tag}
+              tag={tag}
               className={css({
-                layerStyle: 'likec4.tag',
-                flex: 1,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                maxWidth: 50,
-                height: 5,
-                _whenHovered: {
-                  height: 12,
+                userSelect: 'none',
+                cursor: 'pointer',
+                ...(zoomIsLargeEnough && {
+                  fontSize: 'lg',
                   borderRadius: 4,
-                  transitionDelay: '.08s',
-                },
-                transition: 'fast',
+                  px: 6,
+                }),
               })}
+              onClick={e => {
+                e.stopPropagation()
+                diagram.openSearch(`#${tag}`)
+              }}
+              onMouseEnter={() => onHover(tag)}
+              onMouseLeave={onLeave}
             />
           ))}
-        </div>
-      </HoverCard.Target>
-      <HoverCard.Dropdown
-        p={0}
-        w={'auto'}
-        maw={maxWidth}
-        className={css({
-          background: 'transparent',
-          border: 'none',
-        })}
-      >
-        <ElementTagsDropdown tags={tags} zoomIsLargeEnough={zoomIsLargeEnough} />
-      </HoverCard.Dropdown>
-    </HoverCard>
+        </HStack>
+      </NodeToolbar>
+    </>
   )
 }, propsAreEqual)
 ElementTags.displayName = 'ElementTags'
-
-function ElementTagsDropdown({ tags, zoomIsLargeEnough }: { tags: readonly string[]; zoomIsLargeEnough: boolean }) {
-  const diagram = useDiagram()
-
-  const onHover = (tag: string) => {
-    diagram.send({ type: 'tag.highlight', tag })
-  }
-
-  const onLeave = useCallback(() => {
-    diagram.send({ type: 'tag.unhighlight' })
-  }, [])
-
-  return (
-    <HStack
-      css={{
-        gap: 4,
-        flexWrap: 'wrap',
-        pb: 'sm',
-      }}
-    >
-      {tags.map((tag) => (
-        <ElementTag
-          key={tag}
-          tag={tag}
-          className={css({
-            userSelect: 'none',
-            cursor: 'pointer',
-            ...(zoomIsLargeEnough && {
-              fontSize: 'lg',
-              borderRadius: 4,
-              px: 6,
-            }),
-          })}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.openSearch(`#${tag}`)
-          }}
-          onMouseEnter={() => onHover(tag)}
-          onMouseLeave={onLeave}
-        />
-      ))}
-    </HStack>
-  )
-}

package/src/base/primitives/element/ElementTitle.css.ts

@@ -10,7 +10,9 @@ const title = css.raw({
 })
 
 const description = css.raw({
-  flex: '0 1 auto',
+  flexGrow: '0',
+  flexShrink: '1',
+
   textStyle: 'likec4.node.secondary',
   color: 'likec4.palette.loContrast',
   textAlign: 'center',
@@ -87,6 +89,8 @@ export const elementTitle = sva({
       flex: '1',
       height: 'fit-content',
       width: 'fit-content',
+      maxHeight: '100%',
+      maxWidth: '100%',
       margin: '0 auto',
       display: 'flex',
       alignItems: 'center',
@@ -139,6 +143,8 @@ export const elementTitle = sva({
     textContainer: {
       height: 'fit-content',
       width: 'fit-content',
+      maxHeight: '100%',
+      maxWidth: '100%',
       flex: '0 1 auto',
       display: 'flex',
       flexDirection: 'column',

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core/types'
+import type { DiagramNode, RichTextOrEmpty } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
 import { Text } from '@mantine/core'
@@ -6,6 +6,7 @@ import { isEmpty, isNumber, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
 import { IconRenderer } from '../../../context/IconRenderer'
 import type { NodeProps, NonOptional } from '../../types'
+import { MarkdownBlock } from '../MarkdownBlock'
 import { nodeSizes } from './ElementNodeContainer'
 import * as styles from './ElementTitle.css'
 
@@ -15,12 +16,12 @@ type Data = Simplify<
       DiagramNode,
       | 'title'
       | 'technology'
-      | 'description'
       | 'color'
       | 'style'
     >
   >
   & {
+    description?: RichTextOrEmpty
     icon?: string | null
   }
 >
@@ -40,7 +41,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
   })
   const classes = styles.elementTitle({
     hasIcon: isTruthy(elementIcon),
-    hasDescription: !isEmpty(data.description ?? ''),
+    hasDescription: !!data.description?.nonEmpty,
     hasTechnology: !isEmpty(data.technology ?? ''),
   })
   const size = nodeSizes(data.style).size
@@ -62,7 +63,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       {elementIcon}
       <Box className={cx(classes.textContainer, 'likec4-element-main-props')}>
         <Text
-          component="h3"
+          component="div"
           className={cx(classes.title, 'likec4-element-title')}
           lineClamp={isSmOrXs ? 2 : 3}>
           {data.title}
@@ -77,12 +78,16 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         )}
 
         {data.description && (
-          <Text
-            component="div"
+          <MarkdownBlock
             className={cx(classes.description, 'likec4-element-description')}
-            lineClamp={isSmOrXs ? 3 : 5}>
-            {data.description}
-          </Text>
+            value={data.description}
+            uselikec4palette
+            hideIfEmpty
+            // Workaround for lineClamp not working with nested TABLE elements (if markdown has tables)
+            maxHeight={data.description.isMarkdown ? '8rem' : undefined}
+            // textScale={0.95}
+            lineClamp={isSmOrXs ? 3 : 5}
+          />
         )}
       </Box>
     </Box>

package/src/base/primitives/index.ts

@@ -16,4 +16,5 @@ export { ElementNodeContainer } from './element/ElementNodeContainer'
 export { ElementShape } from './element/ElementShape'
 export { ElementTag, ElementTags } from './element/ElementTags'
 export { ElementTitle } from './element/ElementTitle'
+export { MarkdownBlock } from './MarkdownBlock'
 export { DefaultHandles } from './NodeHandles'

package/src/bundle/LikeC4View.props.ts

@@ -1,5 +1,5 @@
 import type { WhereOperator } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/aux'
+import type * as aux from '@likec4/core/types/_aux'
 import type { CSSProperties } from 'react'
 import type { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
 

package/src/bundle/LikeC4View.tsx

@@ -1,5 +1,5 @@
 import type { Any, DiagramView } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/aux'
+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'

package/src/bundle/ReactLikeC4.tsx

@@ -1,5 +1,5 @@
 import type { Any, DiagramView } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/aux'
+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'

package/src/context/DiagramFeatures.tsx

@@ -117,17 +117,17 @@ export function IfEnabled({
   return enabled && and ? <>{children}</> : null
 }
 
-export function IfNotEnabled({
-  feature,
-  children,
-}: PropsWithChildren<{ feature: FeatureName }>) {
+export function IfNotEnabled({ feature, children }: PropsWithChildren<{ feature: FeatureName }>) {
   const notEnabled = useEnabledFeatures()[`enable${feature}`] !== true
   return notEnabled ? <>{children}</> : null
 }
 
-export function IfNotReadOnly({
-  children,
-}: PropsWithChildren) {
+export function IfReadOnly({ children }: PropsWithChildren) {
+  const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true
+  return isReadOnly ? <>{children}</> : null
+}
+
+export function IfNotReadOnly({ children }: PropsWithChildren) {
   const isReadOnly = useEnabledFeatures()[`enableReadOnly`] === true
   if (isReadOnly) {
     return null

package/src/custom/components.ts

@@ -11,6 +11,7 @@ export {
   ElementTag,
   ElementTags,
   ElementTitle,
+  MarkdownBlock,
 } from '../base/primitives'
 
 export {
@@ -41,6 +42,7 @@ export {
   IfEnabled,
   IfNotEnabled,
   IfNotReadOnly,
+  IfReadOnly,
 } from '../context/DiagramFeatures'
 
 export {

package/src/custom/hooks.ts

@@ -10,13 +10,16 @@ export {
 
 export {
   type EnabledFeatures,
+  type FeatureName,
   useEnabledFeatures,
 } from '../context/DiagramFeatures'
 export {
   useCurrentViewId,
 } from '../hooks/useCurrentViewId'
 export {
+  type DiagramApi,
   useDiagram,
+  useDiagramActorRef,
   useDiagramContext,
 } from '../hooks/useDiagram'
 export {
@@ -24,6 +27,8 @@ export {
   useXYInternalNode,
   useXYStore,
   useXYStoreApi,
+  type XYFlowInstance,
+  type XYStoreApi,
 } from '../hooks/useXYFlow'
 
 export {

package/src/hooks/useXYFlow.ts

@@ -1,9 +1,17 @@
 import { useCallbackRef } from '@mantine/hooks'
-import { type ReactFlowState, useInternalNode, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
+import {
+  type ReactFlowInstance,
+  type ReactFlowState,
+  useInternalNode,
+  useReactFlow,
+  useStore,
+  useStoreApi,
+} from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import type { Types } from '../likec4diagram/types'
 
 export const useXYFlow = useReactFlow<Types.Node, Types.Edge>
+export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>
 
 export function useXYStore<StateSlice = unknown>(
   selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice,

package/src/index.ts

@@ -1,11 +1,21 @@
 export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
 export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { IconRendererProvider } from './context/IconRenderer'
-export { LikeC4Diagram } from './LikeC4Diagram'
-export type { LikeC4DiagramProps } from './LikeC4Diagram'
-export { Overlay } from './overlays/overlay/Overlay'
 
-export { LikeC4ModelProvider } from './LikeC4ModelProvider'
+export {
+  LikeC4Diagram,
+  type LikeC4DiagramProps,
+} from './LikeC4Diagram'
+
+export {
+  Overlay,
+  type OverlayProps,
+} from './overlays/overlay/Overlay'
+
+export {
+  LikeC4ModelProvider,
+  type LikeC4ModelProviderProps,
+} from './LikeC4ModelProvider'
 
 export * from './custom/hooks'
 
@@ -28,5 +38,7 @@ export type {
   WhereOperator,
 } from './LikeC4Diagram.props'
 
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
-export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'
+export {
+  StaticLikeC4Diagram,
+  type StaticLikeC4DiagramProps,
+} from './StaticLikeC4Diagram'

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -253,7 +253,7 @@ const Relationship = forwardRef<
         )}
       </Group>
       <Box className={styles.title}>{r.title || 'untitled'}</Box>
-      {r.description && <Text size="xs" c="dimmed">{r.description}</Text>}
+      {r.description.nonEmpty && <Text size="xs" c="dimmed">{r.description.text}</Text>}
       {links.length > 0 && (
         <Stack
           gap={3}

package/src/likec4diagram/types.ts

@@ -1,4 +1,4 @@
-import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types'
+import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
@@ -21,7 +21,6 @@ export namespace Types {
         | 'id'
         | 'title'
         | 'technology'
-        | 'description'
         | 'color'
         | 'shape'
         | 'width'
@@ -33,6 +32,7 @@ export namespace Types {
       >
     >
     & {
+      description: RichTextOrEmpty
       /**
        * View this node belongs to
        */