@likec4/diagram 1.32.2 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.32.2",
+  "version": "1.33.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -67,11 +67,10 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@mantine/core": "8.1.0",
-    "@mantine/hooks": "8.1.0",
+    "@mantine/core": "8.1.1",
+    "@mantine/hooks": "8.1.1",
     "@nanostores/react": "1.0.0",
     "@react-hookz/web": "^25.1.1",
-    "@tabler/icons-react": "3.31.0",
     "@xstate/react": "^5.0.4",
     "@xyflow/react": "^12.6.4",
     "@xyflow/system": "^0.0.61",
@@ -82,25 +81,31 @@
     "nanostores": "1.0.1",
     "react-error-boundary": "^6.0.0",
     "react-shadow": "^20.6.0",
-    "remeda": "^2.23.0",
+    "remeda": "^2.23.1",
     "type-fest": "^4.41.0",
     "xstate": "^5.19.3",
-    "@likec4/core": "1.32.2",
-    "@likec4/style-preset": "1.32.2",
-    "@likec4/styles": "1.32.2"
+    "@likec4/core": "1.33.0",
+    "@likec4/styles": "1.33.0"
   },
   "peerDependencies": {
+    "@pandacss/dev": "^0.53.7",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
+  "peerDependenciesMeta": {
+    "@pandacss/dev": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@tabler/icons-react": "3.31.0",
     "@pandacss/dev": "^0.53.7",
     "@statelyai/inspect": "^0.4.0",
     "@types/bezier-js": "^4.1.3",
     "@types/d3-shape": "^3.1.7",
-    "@types/react": "19.1.5",
-    "@types/react-dom": "19.1.5",
-    "@types/node": "~20.19.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@types/node": "~20.19.1",
     "@vitejs/plugin-react": "^4.5.2",
     "postcss": "8.5.5",
     "react": "^19.1.0",
@@ -108,9 +113,9 @@
     "typescript": "5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "3.2.3",
+    "vitest": "3.2.4",
     "wireit": "0.14.12",
-    "@likec4/tsconfig": "1.32.2"
+    "@likec4/tsconfig": "1.33.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",
@@ -119,6 +124,7 @@
     "build": "echo \"use pnpm turbo run build\" || true",
     "pack": "pnpm pack",
     "test": "vitest run --no-isolate",
-    "clean": "pnpm rimraf dist lib bundle"
+    "clean": "pnpm rimraf dist lib bundle *.tgz",
+    "lint:package": "pnpx publint ./package.tgz"
   }
 }

package/panda.buildinfo.json

@@ -260,8 +260,6 @@
       "filter]___[value:none]___[cond:_smallZoom",
       "transition]___[value:none]___[cond:_whenPanning",
       "filter]___[value:none]___[cond:_whenPanning",
-      "position]___[value:bottom-start",
-      "mainAxis]___[value:8",
       "alignItems]___[value:flex-end",
       "gap]___[value:4",
       "justifyItems]___[value:stretch",
@@ -277,17 +275,19 @@
       "height]___[value:12]___[cond:_whenHovered",
       "borderRadius]___[value:4]___[cond:_whenHovered",
       "transitionDelay]___[value:.08s]___[cond:_whenHovered",
-      "border]___[value:none",
       "userSelect]___[value:none",
       "fontSize]___[value:lg",
       "borderRadius]___[value:4",
       "paddingInline]___[value:6",
       "flexWrap]___[value:wrap",
       "paddingBottom]___[value:sm",
+      "translate]___[value:auto",
+      "translateX]___[value:-8",
       "gap]___[value:sm",
       "textStyle]___[value:likec4.node.primary",
       "color]___[value:likec4.palette.hiContrast",
-      "flex]___[value:0 1 auto",
+      "flexGrow]___[value:0",
+      "flexShrink]___[value:1",
       "textStyle]___[value:likec4.node.secondary",
       "textOverflow]___[value:ellipsis",
       "overflow]___[value:hidden",
@@ -303,6 +303,7 @@
       "alignSelf]___[value:flex-start",
       "height]___[value:fit-content",
       "width]___[value:fit-content",
+      "maxHeight]___[value:100%",
       "margin]___[value:0 auto",
       "paddingTop]___[value:var(--likec4-spacing)",
       "paddingBottom]___[value:var(--likec4-spacing)",
@@ -325,6 +326,7 @@
       "--icon-size]___[value:90px]___[cond:_shapeSizeXl",
       "gap]___[value:16px]___[cond:_shapeSizeXl",
       "gap]___[value:16px",
+      "flex]___[value:0 1 auto",
       "alignItems]___[value:stretch",
       "flexWrap]___[value:nowrap",
       "gap]___[value:8px",
@@ -332,6 +334,7 @@
       "alignItems]___[value:flex-start",
       "lineClamp]___[value:2",
       "lineClamp]___[value:3",
+      "maxHeight]___[value:8rem",
       "top]___[value:1rem",
       "right]___[value:1rem",
       "color]___[value:gray",
@@ -416,6 +419,7 @@
       "color]___[value:likec4.palette.loContrast]___[cond:_dark",
       "fontSize]___[value:xs",
       "opacity]___[value:0.65",
+      "position]___[value:bottom-start",
       "top]___[value:5",
       "right]___[value:6",
       "gap]___[value:10px",
@@ -522,7 +526,7 @@
       "paddingBlock]___[value:2",
       "opacity]___[value:0.7",
       "marginBottom]___[value:sm",
-      "maxHeight]___[value:42",
+      "maxHeight]___[value:60",
       "display]___[value:inline-block",
       "right]___[value:0",
       "--ai-radius]___[value:0px",
@@ -589,6 +593,7 @@
       "gap]___[value:lg",
       "backgroundColor]___[value:mantine.colors.body",
       "backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
+      "border]___[value:none",
       "backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent), color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px, color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px) ",
       "cursor]___[value:move",
       "fontFamily]___[value:likec4.element",
@@ -645,9 +650,10 @@
       "display]___[value:grid",
       "gridTemplateColumns]___[value:min-content 1fr",
       "gridAutoRows]___[value:min-content max-content",
-      "gap]___[value:[20px 16px]",
+      "gap]___[value:[24px 20px]",
       "alignItems]___[value:baseline",
       "justifySelf]___[value:end",
+      "textAlign]___[value:right",
       "width]___[value:14px",
       "height]___[value:14px",
       "border]___[value:3.5px solid",
@@ -660,10 +666,18 @@
       "cursor]___[value:se-resize",
       "borderWidth]___[value:4px]___[cond:_hover",
       "borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
+      "gap]___[value:[4px 4px]",
+      "paddingRight]___[value:2xs",
+      "color]___[value:mantine.colors.gray[8]",
+      "color]___[value:mantine.colors.defaultColor]___[cond:_groupHover",
+      "background]___[value:mantine.colors.defaultHover]___[cond:_groupHover",
+      "whiteSpace]___[value:pre",
+      "fontFamily]___[value:[var(--mantine-font-family-monospace)]",
       "lineClamp]___[value:1",
       "marginTop]___[value:6",
       "stroke]___[value:1.6",
       "paddingTop]___[value:xs",
+      "overscrollBehavior]___[value:none",
       "marginBottom]___[value:sm]___[cond:&[data-level='1']",
       "marginTop]___[value:0",
       "marginBottom]___[value:0",
@@ -974,6 +988,11 @@
       "likec4RelationPalette]___[value:sky"
     ],
     "recipes": {
+      "markdownBlock": [
+        "uselikec4palette]___[value:false]___[recipe:markdownBlock",
+        "uselikec4palette]___[value:true]___[recipe:markdownBlock",
+        "uselikec4palette]___[value:true]___[cond:_hover]___[recipe:markdownBlock"
+      ],
       "actionBtn": [
         "size]___[value:md]___[recipe:actionBtn",
         "radius]___[value:md]___[recipe:actionBtn",

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/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 {